@bwp-web/canvas 0.15.0 → 1.0.0

package/dist/index.js

@@ -165,6 +165,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;
@@ -3183,8 +3184,10 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
   const [state, setState] = useState3({
     visible: false,
     content: null,
-    position: { x: 0, y: 0 }
+    position: { x: 0, y: 0 },
+    ref: { current: null }
   });
+  const tooltipElRef = useRef5(null);
   const hoveredObjectRef = useRef5(null);
   const optionsRef = useRef5(options);
   optionsRef.current = options;
@@ -3201,6 +3204,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;
@@ -3210,7 +3219,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 });
         }
       }
     };
@@ -3224,7 +3233,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);