@canvas-harness/react 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -1047,6 +1047,7 @@ function CanvasSurface({
   arrowDefaults,
   background,
   selectionColor,
+  maxDpr,
   renderCustomNodeView,
   children
 }) {
@@ -1064,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) {
@@ -1081,6 +1089,7 @@ function CanvasSurface({
       height: h,
       background,
       selectionColor,
+      maxDpr,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1090,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]);
@@ -1112,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) {
@@ -1152,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;
@@ -1261,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",
     {