prevent preview building while canvas transform

Author: softmarshmallow

editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx

@@ -74,11 +74,12 @@ export function CanvasEventTarget({
       document.removeEventListener("keydown", kd);
       document.removeEventListener("keyup", ku);
     };
-  });
+  }, []);
 
   const transform_wheel_to_zoom = (s) => {
     return {
       ...s,
+      origin: [s.event.clientX, s.event.clientY],
       delta: [-s.delta[1] * ZOOM_WITH_SCROLL_SENSITIVITY, 0],
     };
   };
@@ -143,6 +144,7 @@ export function CanvasEventTarget({
         // passive to false to raise `e.preventDefault()` and `e.stopPropagation()`. - this will prevent the browser from scrolling the page, navigating with swipe gesture (safari, firefox).
         passive: false,
       },
+      pinch: {},
     }
   );
 

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -189,14 +189,11 @@ export function Canvas({
   };
 
   const onZooming: OnZoomingHandler = (state) => {
+    // TODO: pinch delta is not consistent. - https://github.com/pmndrs/use-gesture/issues/435
+
     const zoomdelta = state.delta[0];
     // the origin point of the zooming point in x, y
-    const [ox, oy]: XY = [
-      // @ts-ignore
-      state.event.clientX ?? 0,
-      // @ts-ignore
-      state.event.clientY ?? 0,
-    ];
+    const [ox, oy]: XY = state.origin;
 
     const newzoom = Math.max(zoom + zoomdelta, MIN_ZOOM);
 
@@ -215,6 +212,24 @@ export function Canvas({
     ?.map((id) => designq.find_node_by_id_under_inpage_nodes(id, nodes))
     .filter(Boolean);
 
+  const items = useMemo(() => {
+    return nodes?.map((node) => {
+      node["filekey"] = filekey;
+      return (
+        <LazyFrame key={node.id} xy={[node.x, node.y]} size={node}>
+          {renderItem({
+            node: node as ReflectSceneNode & { filekey: string },
+            zoom, // ? use scaled_zoom ?
+            inViewport: true, // TODO:
+            isZooming: isZooming,
+            isPanning: isPanning,
+            focused: selectedNodes.includes(node.id),
+          })}
+        </LazyFrame>
+      );
+    });
+  }, [nodes, selectedNodes, isZooming, isPanning]);
+
   if (!transformIntitialized) {
     return <></>;
   }
@@ -227,8 +242,8 @@ export function Canvas({
           setIsPanning(true);
         }}
         onPanningEnd={() => {
-          _canvas_state_store.saveLastTransform(cvtransform);
           setIsPanning(false);
+          _canvas_state_store.saveLastTransform(cvtransform);
         }}
         onZooming={onZooming}
         onZoomingStart={() => {
@@ -271,21 +286,7 @@ export function Canvas({
         />
       </CanvasEventTarget>
       <CanvasTransformRoot scale={zoom} xy={nonscaled_offset}>
-        <DisableBackdropFilter>
-          {nodes?.map((node) => {
-            node["filekey"] = filekey;
-            return (
-              <LazyFrame key={node.id} xy={[node.x, node.y]} size={node}>
-                {renderItem({
-                  node: node as ReflectSceneNode & { filekey: string },
-                  zoom, // ? use scaled_zoom ?
-                  inViewport: true, // TODO:
-                  focused: selectedNodes.includes(node.id),
-                })}
-              </LazyFrame>
-            );
-          })}
-        </DisableBackdropFilter>
+        <DisableBackdropFilter>{items}</DisableBackdropFilter>
       </CanvasTransformRoot>
     </>
   );

editor-packages/editor-canvas/frame/index.ts

@@ -17,4 +17,14 @@ export interface FrameOptimizationFactors {
    * whether the frame is selected / focused by user
    */
   focused: boolean;
+
+  /**
+   * whether the canvas is being zoomed by user
+   */
+  isZooming: boolean;
+
+  /**
+   * whether the canvas is being panned by user
+   */
+  isPanning: boolean;
 }

editor/scaffolds/preview/index.tsx

@@ -55,6 +55,8 @@ const cache = {
 
 export function Preview({
   target,
+  isZooming,
+  isPanning,
 }: {
   target: ReflectSceneNode & {
     filekey: string;
@@ -75,7 +77,14 @@ export function Preview({
     cache.set(target.filekey, { ...result, __image });
   };
 
+  const hide_preview = isZooming || isPanning;
+
   useEffect(() => {
+    if (hide_preview) {
+      // don't make preview if zooming.
+      return;
+    }
+
     if (preview) {
       return;
     }
@@ -135,17 +144,19 @@ export function Preview({
       }
     } else {
       if (_input) {
-        d2c_firstload().then((r) => {
-          on_preview_result(r, false);
-          // if the result contains a image and needs to be fetched,
-          if (r.code.raw.includes(placeholderimg)) {
-            // TODO: we don't yet have other way to know if image is used, other than checking if placeholder image is used. - this needs to be updated in d2c module to include used images meta in the result.
-            d2c_imageload();
-          }
-        });
+        d2c_firstload()
+          .then((r) => {
+            on_preview_result(r, false);
+            // if the result contains a image and needs to be fetched,
+            if (r.code.raw.includes(placeholderimg)) {
+              // TODO: we don't yet have other way to know if image is used, other than checking if placeholder image is used. - this needs to be updated in d2c module to include used images meta in the result.
+              d2c_imageload();
+            }
+          })
+          .catch(console.error);
       }
     }
-  }, [target?.id]);
+  }, [target?.id, isZooming, isPanning]);
 
   const __bg = colorFromFills(target.fills);
   const bg_color_str = __bg ? "#" + __bg.hex : "transparent";