@bwp-web/canvas 0.14.1 → 0.14.2

package/dist/hooks/useCanvasTooltip.d.ts

@@ -14,6 +14,12 @@ export interface CanvasTooltipState<T> {
         x: number;
         y: number;
     };
+    /**
+     * Ref to attach to the tooltip container element. When attached, position
+     * updates during pan/zoom are applied directly to the DOM — no React
+     * re-renders. The element should use `position: absolute`.
+     */
+    ref: RefObject<HTMLDivElement | null>;
 }
 /**
  * Track mouse hover over canvas objects and return tooltip state, using the
@@ -36,6 +42,9 @@ export declare function useCanvasTooltip<T>(options: UseCanvasTooltipOptions<T>)
  * coordinates relative to the canvas container element — suitable for absolute
  * positioning of a tooltip component.
  *
+ * Attach {@link CanvasTooltipState.ref | tooltip.ref} to the tooltip container
+ * for smooth, re-render-free position updates during pan and zoom.
+ *
  * @example
  * ```tsx
  * const tooltip = useCanvasTooltip(view.canvasRef, {
@@ -46,7 +55,10 @@ export declare function useCanvasTooltip<T>(options: UseCanvasTooltipOptions<T>)
  *   <>
  *     <Canvas onReady={view.onReady} />
  *     {tooltip.visible && (
- *       <div style={{ position: 'absolute', left: tooltip.position.x, top: tooltip.position.y }}>
+ *       <div
+ *         ref={tooltip.ref}
+ *         style={{ position: 'absolute', left: tooltip.position.x, top: tooltip.position.y }}
+ *       >
  *         {tooltip.content?.id}
  *       </div>
  *     )}

package/dist/hooks/useCanvasTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasTooltip.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,MAAM,IAAI,YAAY,EAEtB,YAAY,EACb,MAAM,QAAQ,CAAC;AAGhB,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,wFAAwF;IACxF,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;IAClB,gFAAgF;IAChF,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAClC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAClC,kBAAkB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"useCanvasTooltip.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,MAAM,IAAI,YAAY,EAEtB,YAAY,EACb,MAAM,QAAQ,CAAC;AAGhB,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,wFAAwF;IACxF,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;IAClB,gFAAgF;IAChF,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC;;;;OAIG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACvC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAClC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAClC,kBAAkB,CAAC,CAAC,CAAC,CAAC"}

package/dist/index.cjs

@@ -258,6 +258,7 @@ function setupMousePan(canvas, getMode, isEnabled) {
     const isModifiedSelect = e instanceof MouseEvent && mode === "select" && (e.metaKey || e.ctrlKey);
     const shouldPan = mode === "pan" || isMiddleButton || isModifiedSelect || mode === "select" && !opt.target;
     if (shouldPan) {
+      e.preventDefault();
       isPanning = true;
       lastPanX = pos.x;
       lastPanY = pos.y;
@@ -3260,8 +3261,10 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
   const [state, setState] = (0, import_react7.useState)({
     visible: false,
     content: null,
-    position: { x: 0, y: 0 }
+    position: { x: 0, y: 0 },
+    ref: { current: null }
   });
+  const tooltipElRef = (0, import_react7.useRef)(null);
   const hoveredObjectRef = (0, import_react7.useRef)(null);
   const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
@@ -3278,6 +3281,12 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
         y: bounds.top * zoom + vt[5] - 10
       };
     }
+    function applyPositionToDOM(position) {
+      const el = tooltipElRef.current;
+      if (!el) return;
+      el.style.left = `${position.x}px`;
+      el.style.top = `${position.y}px`;
+    }
     const handleMouseOver = (e) => {
       const target = e.target;
       if (!target) return;
@@ -3287,7 +3296,7 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
         hoveredObjectRef.current = target;
         const position = calculatePosition(target);
         if (position) {
-          setState({ visible: true, content, position });
+          setState({ visible: true, content, position, ref: tooltipElRef });
         }
       }
     };
@@ -3301,7 +3310,7 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
       if (!hoveredObjectRef.current) return;
       const position = calculatePosition(hoveredObjectRef.current);
       if (position) {
-        setState((prev) => prev.visible ? { ...prev, position } : prev);
+        applyPositionToDOM(position);
       }
     };
     canvas.on("mouse:over", handleMouseOver);