@canvas-harness/react 0.1.3 → 0.1.4

package/dist/index.d.cts

@@ -131,6 +131,24 @@ type CanvasProps = {
      * <Canvas selectionColor="#10b981" />
      */
     selectionColor?: string;
+    /**
+     * Cap on the canvas backing-store DPR. Defaults to `1`.
+     *
+     * At native device-pixel ratio on hi-DPI displays (Mac Retina ≈ 2,
+     * Windows 4K @ 175% ≈ 1.75), the canvas backing buffer can hit
+     * 20-30 megapixels per frame — the per-frame GPU-upload cost alone
+     * eats a sizable slice of the frame budget. Capping DPR at 1 keeps
+     * perf consistent across hardware at the cost of slightly softer
+     * shape outlines on hi-DPI displays. Text remains crisp regardless
+     * (the text bitmap cache handles its own DPR).
+     *
+     * Bump to `2` (or `window.devicePixelRatio`) when crispness matters
+     * more than FPS — e.g. presentation slides, print-export views.
+     *
+     * @example
+     * <Canvas maxDpr={2} />  // pixel-crisp at the cost of FPS on hi-DPI
+     */
+    maxDpr?: number;
     /**
      * Render a custom node's React subtree. Called once per
      * library-mounted custom-node id; positioning is handled by the

package/dist/index.d.ts

@@ -131,6 +131,24 @@ type CanvasProps = {
      * <Canvas selectionColor="#10b981" />
      */
     selectionColor?: string;
+    /**
+     * Cap on the canvas backing-store DPR. Defaults to `1`.
+     *
+     * At native device-pixel ratio on hi-DPI displays (Mac Retina ≈ 2,
+     * Windows 4K @ 175% ≈ 1.75), the canvas backing buffer can hit
+     * 20-30 megapixels per frame — the per-frame GPU-upload cost alone
+     * eats a sizable slice of the frame budget. Capping DPR at 1 keeps
+     * perf consistent across hardware at the cost of slightly softer
+     * shape outlines on hi-DPI displays. Text remains crisp regardless
+     * (the text bitmap cache handles its own DPR).
+     *
+     * Bump to `2` (or `window.devicePixelRatio`) when crispness matters
+     * more than FPS — e.g. presentation slides, print-export views.
+     *
+     * @example
+     * <Canvas maxDpr={2} />  // pixel-crisp at the cost of FPS on hi-DPI
+     */
+    maxDpr?: number;
     /**
      * Render a custom node's React subtree. Called once per
      * library-mounted custom-node id; positioning is handled by the

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createRenderer, DEFAULT_MINIMAP_MAX_NODES, renderMinimapContent, sceneBounds, drawMinimapViewport, worldViewportFromCamera, screenToWorld, hitTestAny, copy, cut, paste, createPalmRejectionState, createDefaultTextareaEditor, minimapScreenToWorld, notePenActive, shouldRejectTouch, notePenInactive, asEdgeId, midpointToCubicControls, projectToNodeBoundary, marqueeNodes, shouldAutoFit, computeAutoFitHeight, hitTestPoint, worldToNodeLocal, edgeLabelBoundsWorld, asNodeId, zoomAtScreenPoint, clampZoom, panByScreen } from '@canvas-harness/core';
-import { createContext, useContext, useSyncExternalStore, useRef, useState, useEffect } from 'react';
+import { createContext, useContext, useSyncExternalStore, useRef, useEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/Canvas.tsx
@@ -1045,6 +1045,7 @@ function CanvasSurface({
   arrowDefaults,
   background,
   selectionColor,
+  maxDpr,
   renderCustomNodeView,
   children
 }) {
@@ -1062,8 +1063,15 @@ function CanvasSurface({
   const interactionMode = useInteractionMode();
   useArrowTool(wrapRef, store, tool === "arrow", arrowDefaults);
   const { mountedIds, setMountedIds } = useOverlayHost();
-  const [camera, setCamera] = useState(() => store.getCamera());
-  useEffect(() => store.subscribe("camera", (c) => setCamera({ ...c })), [store]);
+  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]);
   useEffect(() => {
     if (!staticRef.current || !interactiveRef.current || w === 0 || h === 0) return;
     if (rendererRef.current) {
@@ -1079,6 +1087,7 @@ function CanvasSurface({
       height: h,
       background,
       selectionColor,
+      maxDpr,
       onOverlayChange: (ids) => setMountedIds(ids)
     });
     r.start();
@@ -1088,7 +1097,7 @@ function CanvasSurface({
       r.dispose();
       rendererRef.current = null;
     };
-  }, [store, theme, w, h, onRenderer, setMountedIds]);
+  }, [store, theme, w, h, maxDpr, onRenderer, setMountedIds]);
   useEffect(() => {
     rendererRef.current?.setBackground(background);
   }, [background]);
@@ -1110,9 +1119,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 = screenToWorld(screen, camera2);
-        const hit = hitTestAny(store, world, camera2.z);
+        const camera = store.getCamera();
+        const world = screenToWorld(screen, camera);
+        const hit = 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) {
@@ -1150,9 +1159,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 = screenToWorld(screenFromEvent(e), camera2);
-      if (hitTestAny(store, world, camera2.z)) return;
+      const camera = store.getCamera();
+      const world = screenToWorld(screenFromEvent(e), camera);
+      if (hitTestAny(store, world, camera.z)) return;
       startWorld = world;
       startScreen = screenFromEvent(e);
       activePointerId = e.pointerId;
@@ -1259,7 +1268,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__ */ jsxs(
     "div",
     {