feat(editor): support zooming placeholder in turbo renderer (#10504)

[Screen Recording 2025-02-28 at 4.32.20 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/lEGcysB4lFTEbCwZ8jMv/6c08b827-8428-42f3-aa7a-a2366756bd16.mov" />](https://app.graphite.dev/media/video/lEGcysB4lFTEbCwZ8jMv/6c08b827-8428-42f3-aa7a-a2366756bd16.mov)

This prevents painting task backlog during zooming by adding a fast placeholder painter, with a `zooming` state in renderer state machine.
This commit is contained in:
doodlewind
2025-03-03 02:07:46 +00:00
parent fdde818ddd
commit bd1b26a230
5 changed files with 131 additions and 71 deletions

View File

@@ -78,7 +78,7 @@ export class Viewport {
() => {
this.zooming$.value = false;
},
100,
200,
{ leading: false, trailing: true }
);
@@ -86,7 +86,7 @@ export class Viewport {
() => {
this.panning$.value = false;
},
100,
200,
{ leading: false, trailing: true }
);
@@ -390,7 +390,7 @@ export class Viewport {
this._resizeObserver.observe(el);
}
setZoom(zoom: number, focusPoint?: IPoint) {
setZoom(zoom: number, focusPoint?: IPoint, wheel = false) {
const prevZoom = this.zoom;
focusPoint = (focusPoint ?? this._center) as IPoint;
this._zoom = clamp(zoom, this.ZOOM_MIN, this.ZOOM_MAX);
@@ -401,7 +401,9 @@ export class Viewport {
Vec.toVec(focusPoint),
Vec.mul(offset, prevZoom / newZoom)
);
this.zooming$.value = true;
if (wheel) {
this.zooming$.value = true;
}
this.setCenter(newCenter[0], newCenter[1]);
this.viewportUpdated.emit({
zoom: this.zoom,