@canvas-harness/react 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -815,12 +815,27 @@ var usePanZoom = (ref, store, tool) => {
       scheduled = false;
       rafId = 0;
       if (pendingZoomFactor !== 1 && pendingZoomAnchor) {
+        const MAX_PER_FRAME = 2;
+        const MIN_PER_FRAME = 0.5;
+        let appliedFactor = pendingZoomFactor;
+        let drained = true;
+        if (appliedFactor > MAX_PER_FRAME) {
+          appliedFactor = MAX_PER_FRAME;
+          pendingZoomFactor = pendingZoomFactor / MAX_PER_FRAME;
+          drained = false;
+        } else if (appliedFactor < MIN_PER_FRAME) {
+          appliedFactor = MIN_PER_FRAME;
+          pendingZoomFactor = pendingZoomFactor / MIN_PER_FRAME;
+          drained = false;
+        } else {
+          pendingZoomFactor = 1;
+        }
         const camera = store.getCamera();
         store.setCamera(
-          core.zoomAtScreenPoint(camera, core.clampZoom(camera.z * pendingZoomFactor), pendingZoomAnchor)
+          core.zoomAtScreenPoint(camera, core.clampZoom(camera.z * appliedFactor), pendingZoomAnchor)
         );
-        pendingZoomFactor = 1;
-        pendingZoomAnchor = null;
+        if (drained) pendingZoomAnchor = null;
+        else schedule();
       }
       if (pendingDx !== 0 || pendingDy !== 0) {
         const camera = store.getCamera();
@@ -857,7 +872,7 @@ var usePanZoom = (ref, store, tool) => {
       if (isEditing()) return;
       e.preventDefault();
       if (e.ctrlKey || e.metaKey) {
-        const factor = Math.exp(-e.deltaY * 0.01);
+        const factor = Math.abs(e.deltaY) >= 100 ? e.deltaY > 0 ? 1 / 1.1 : 1.1 : Math.exp(-e.deltaY * 0.01);
         pendingZoomFactor *= factor;
         pendingZoomAnchor = screenFromClient(e.clientX, e.clientY);
         pulseMotion("zooming");
@@ -1032,6 +1047,7 @@ function CanvasSurface({
   arrowDefaults,
   background,
   selectionColor,
+  maxDpr,
   renderCustomNodeView,
   children
 }) {
@@ -1049,8 +1065,15 @@ function CanvasSurface({
   const interactionMode = useInteractionMode();
   useArrowTool(wrapRef, store, tool === "arrow", arrowDefaults);
   const { mountedIds, setMountedIds } = useOverlayHost();
-  const [camera, setCamera] = react.useState(() => store.getCamera());
-  react.useEffect(() => store.subscribe("camera", (c) => setCamera({ ...c })), [store]);
+  react.useEffect(() => {
+    const el = overlayRef.current;
+    if (!el) return;
+    const apply = (c) => {
+      el.style.transform = `translate(${-c.x * c.z}px, ${-c.y * c.z}px) scale(${c.z})`;
+    };
+    apply(store.getCamera());
+    return store.subscribe("camera", apply);
+  }, [store]);
   react.useEffect(() => {
     if (!staticRef.current || !interactiveRef.current || w === 0 || h === 0) return;
     if (rendererRef.current) {
@@ -1066,6 +1089,7 @@ function CanvasSurface({
       height: h,
       background,
       selectionColor,
+      maxDpr,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1075,7 +1099,7 @@ function CanvasSurface({
       r.dispose();
       rendererRef.current = null;
     };
-  }, [store, theme, w, h, onRenderer, setMountedIds]);
+  }, [store, theme, w, h, maxDpr, onRenderer, setMountedIds]);
   react.useEffect(() => {
     rendererRef.current?.setBackground(background);
   }, [background]);
@@ -1097,9 +1121,9 @@ function CanvasSurface({
       if (toolRef.current === "select") {
         const rect = el.getBoundingClientRect();
         const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-        const camera2 = store.getCamera();
-        const world = core.screenToWorld(screen, camera2);
-        const hit = core.hitTestAny(store, world, camera2.z);
+        const camera = store.getCamera();
+        const world = core.screenToWorld(screen, camera);
+        const hit = core.hitTestAny(store, world, camera.z);
         if (hit && hit.kind === "body" && "nodeId" in hit) {
           store.beginEdit(hit.nodeId);
         } else if (hit && hit.kind === "body" && "edgeId" in hit) {
@@ -1137,9 +1161,9 @@ function CanvasSurface({
       if (e.button !== 0) return;
       if (!isShapeTool(toolRef.current)) return;
       if (store.getInteractionState().mode === "editing") return;
-      const camera2 = store.getCamera();
-      const world = core.screenToWorld(screenFromEvent(e), camera2);
-      if (core.hitTestAny(store, world, camera2.z)) return;
+      const camera = store.getCamera();
+      const world = core.screenToWorld(screenFromEvent(e), camera);
+      if (core.hitTestAny(store, world, camera.z)) return;
       startWorld = world;
       startScreen = screenFromEvent(e);
       activePointerId = e.pointerId;
@@ -1246,7 +1270,8 @@ function CanvasSurface({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [store]);
-  const overlayTransform = `translate(${-camera.x * camera.z}px, ${-camera.y * camera.z}px) scale(${camera.z})`;
+  const initialCamera = store.getCamera();
+  const overlayTransform = `translate(${-initialCamera.x * initialCamera.z}px, ${-initialCamera.y * initialCamera.z}px) scale(${initialCamera.z})`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {