@bwp-web/canvas 0.15.0 → 1.1.0

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export type { ViewCanvasProviderProps, ViewCanvasContextValue, ViewCanvasViewpor
 export { useCanvasRef } from './context';
 export { ObjectOverlay } from './overlay';
 export type { ObjectOverlayProps } from './overlay';
+export { OverlayContainer } from './overlay';
+export type { OverlayContainerProps } from './overlay';
 export { OverlayContent } from './overlay';
 export type { OverlayContentProps } from './overlay';
 export { FixedSizeContent } from './overlay';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

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);
@@ -3442,10 +3451,66 @@ function useViewCanvasState() {
 }
 
 // src/overlay/ObjectOverlay.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
-import { Stack } from "@mui/material";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { Stack as Stack2 } from "@mui/material";
 import { util as util4 } from "fabric";
+
+// src/overlay/OverlayContainer.tsx
+import {
+  createContext as createContext4,
+  useContext as useContext4,
+  useEffect as useEffect7,
+  useRef as useRef7
+} from "react";
+import { Stack } from "@mui/material";
 import { jsx as jsx4 } from "react/jsx-runtime";
+var OverlayContainerContext = createContext4(false);
+function useIsInsideOverlayContainer() {
+  return useContext4(OverlayContainerContext);
+}
+function OverlayContainer({
+  canvasRef: canvasRefProp,
+  children
+}) {
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
+  const containerRef = useRef7(null);
+  useEffect7(() => {
+    const canvas = canvasRef?.current;
+    const el = containerRef.current;
+    if (!canvas || !el) return;
+    function updateContainer() {
+      if (!canvas || !el) return;
+      const vt = canvas.viewportTransform;
+      if (!vt) return;
+      el.style.transform = `translate(${vt[4]}px, ${vt[5]}px)`;
+    }
+    updateContainer();
+    canvas.on("after:render", updateContainer);
+    return () => {
+      canvas.off("after:render", updateContainer);
+    };
+  }, [canvasRef]);
+  return /* @__PURE__ */ jsx4(OverlayContainerContext.Provider, { value: true, children: /* @__PURE__ */ jsx4(
+    Stack,
+    {
+      ref: containerRef,
+      sx: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        willChange: "transform"
+      },
+      children
+    }
+  ) });
+}
+
+// src/overlay/ObjectOverlay.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ObjectOverlay({
   canvasRef: canvasRefProp,
   object,
@@ -3455,8 +3520,10 @@ function ObjectOverlay({
 }) {
   const contextCanvasRef = useCanvasRef();
   const canvasRef = canvasRefProp ?? contextCanvasRef;
-  const stackRef = useRef7(null);
-  useEffect7(() => {
+  const insideContainer = useIsInsideOverlayContainer();
+  const stackRef = useRef8(null);
+  const prev = useRef8({ transform: "", w: "", h: "" });
+  useEffect8(() => {
     const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
@@ -3468,15 +3535,32 @@ function ObjectOverlay({
       const center = object.getCenterPoint();
       const actualWidth = (object.width ?? 0) * (object.scaleX ?? 1);
       const actualHeight = (object.height ?? 0) * (object.scaleY ?? 1);
-      const screenCoords = util4.transformPoint(center, vt);
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
       const angle = object.angle ?? 0;
-      el.style.left = `${screenCoords.x - screenWidth / 2}px`;
-      el.style.top = `${screenCoords.y - screenHeight / 2}px`;
-      el.style.width = `${screenWidth}px`;
-      el.style.height = `${screenHeight}px`;
-      el.style.transform = angle !== 0 ? `rotate(${angle}deg)` : "";
+      let tx;
+      let ty;
+      if (insideContainer) {
+        tx = center.x * zoom - screenWidth / 2;
+        ty = center.y * zoom - screenHeight / 2;
+      } else {
+        const screenCoords = util4.transformPoint(center, vt);
+        tx = screenCoords.x - screenWidth / 2;
+        ty = screenCoords.y - screenHeight / 2;
+      }
+      const transform = angle !== 0 ? `translate(${tx}px, ${ty}px) rotate(${angle}deg)` : `translate(${tx}px, ${ty}px)`;
+      if (transform !== prev.current.transform) {
+        el.style.transform = transform;
+        prev.current.transform = transform;
+      }
+      const w = `${screenWidth}px`;
+      const h = `${screenHeight}px`;
+      if (prev.current.w !== w || prev.current.h !== h) {
+        el.style.width = w;
+        el.style.height = h;
+        prev.current.w = w;
+        prev.current.h = h;
+      }
     }
     update();
     canvas.on("after:render", update);
@@ -3488,19 +3572,23 @@ function ObjectOverlay({
       object.off("moving", update);
       object.off("scaling", update);
       object.off("rotating", update);
+      prev.current = { transform: "", w: "", h: "" };
     };
-  }, [canvasRef, object]);
+  }, [canvasRef, object, insideContainer]);
   if (!object) return null;
-  return /* @__PURE__ */ jsx4(
-    Stack,
+  return /* @__PURE__ */ jsx5(
+    Stack2,
     {
       ref: stackRef,
       sx: {
         position: "absolute",
+        left: 0,
+        top: 0,
         pointerEvents: "none",
         alignItems: "center",
         justifyContent: "center",
         zIndex: 1,
+        willChange: "transform",
         ...sx
       },
       ...rest,
@@ -3510,28 +3598,28 @@ function ObjectOverlay({
 }
 
 // src/overlay/OverlayContent.tsx
-import { Stack as Stack2 } from "@mui/material";
-import { useEffect as useEffect8, useRef as useRef8 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Stack as Stack3 } from "@mui/material";
+import { useEffect as useEffect9, useRef as useRef9 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function OverlayContent({
   children,
-  padding = 4,
+  padding = 6,
   maxScale = 2,
   sx,
   ...rest
 }) {
-  const outerRef = useRef8(null);
-  const innerRef = useRef8(null);
-  useEffect8(() => {
+  const outerRef = useRef9(null);
+  const innerRef = useRef9(null);
+  useEffect9(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
+    let natW = 0;
+    let natH = 0;
     function fit() {
       if (!outer || !inner) return;
       const containerW = outer.clientWidth;
       const containerH = outer.clientHeight;
-      const natW = inner.scrollWidth;
-      const natH = inner.scrollHeight;
       if (natW === 0 || natH === 0 || containerW <= 0 || containerH <= 0) {
         inner.style.transform = "";
         inner.style.removeProperty("--overlay-scale");
@@ -3545,14 +3633,25 @@ function OverlayContent({
       inner.style.transform = `scale(${scale})`;
       inner.style.setProperty("--overlay-scale", String(scale));
     }
-    const observer = new ResizeObserver(fit);
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === inner) {
+          natW = inner.scrollWidth;
+          natH = inner.scrollHeight;
+          break;
+        }
+      }
+      fit();
+    });
     observer.observe(outer);
     observer.observe(inner);
+    natW = inner.scrollWidth;
+    natH = inner.scrollHeight;
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ jsx5(
-    Stack2,
+  return /* @__PURE__ */ jsx6(
+    Stack3,
     {
       ref: outerRef,
       sx: {
@@ -3564,8 +3663,8 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx5(
-        Stack2,
+      children: /* @__PURE__ */ jsx6(
+        Stack3,
         {
           ref: innerRef,
           sx: {
@@ -3582,9 +3681,9 @@ function OverlayContent({
 }
 
 // src/overlay/FixedSizeContent.tsx
-import { Stack as Stack3 } from "@mui/material";
-import { useEffect as useEffect9, useRef as useRef9 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Stack as Stack4 } from "@mui/material";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3592,9 +3691,9 @@ function FixedSizeContent({
   sx,
   ...rest
 }) {
-  const ref = useRef9(null);
-  const totalContentHeightRef = useRef9(0);
-  useEffect9(() => {
+  const ref = useRef10(null);
+  const totalContentHeightRef = useRef10(0);
+  useEffect10(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3605,34 +3704,45 @@ function FixedSizeContent({
     if (!clipAncestor) return;
     const ancestor = clipAncestor;
     totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-    function check() {
-      requestAnimationFrame(() => {
-        if (!el) return;
-        const containerRect = ancestor.getBoundingClientRect();
-        el.style.maxWidth = `${Math.max(0, containerRect.width - truncationPadding * 2)}px`;
-        if (!hideOnOverflow) return;
-        const fits = containerRect.height >= totalContentHeightRef.current;
-        if (fits && el.style.display === "none") {
-          el.style.display = "";
-          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-          if (containerRect.height < totalContentHeightRef.current) {
-            el.style.display = "none";
-          }
-        } else if (!fits && el.style.display !== "none") {
+    let rafId = 0;
+    function doCheck() {
+      if (!el) return;
+      const containerW = ancestor.clientWidth;
+      const containerH = ancestor.clientHeight;
+      el.style.maxWidth = `${Math.max(0, containerW - truncationPadding * 2)}px`;
+      if (!hideOnOverflow) return;
+      const fits = containerH >= totalContentHeightRef.current;
+      if (fits && el.style.display === "none") {
+        el.style.display = "";
+        totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+        if (containerH < totalContentHeightRef.current) {
           el.style.display = "none";
         }
-        if (el.style.display !== "none") {
-          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-        }
-      });
+      } else if (!fits && el.style.display !== "none") {
+        el.style.display = "none";
+      }
+      if (el.style.display !== "none") {
+        totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+      }
+    }
+    function scheduleCheck() {
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          doCheck();
+        });
+      }
     }
-    const observer = new ResizeObserver(check);
+    const observer = new ResizeObserver(scheduleCheck);
     observer.observe(ancestor);
-    check();
-    return () => observer.disconnect();
+    scheduleCheck();
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ jsx6(
-    Stack3,
+  return /* @__PURE__ */ jsx7(
+    Stack4,
     {
       ref,
       sx: {
@@ -3656,9 +3766,9 @@ function FixedSizeContent({
 }
 
 // src/overlay/OverlayBadge.tsx
-import { Stack as Stack4 } from "@mui/material";
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Stack as Stack5 } from "@mui/material";
+import { useEffect as useEffect11, useRef as useRef11 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
@@ -3688,10 +3798,19 @@ function ellipsePosition(angleDeg) {
 function toNum(v) {
   return typeof v === "number" ? v : 0;
 }
+function readOverlayScale(el) {
+  let node = el.parentElement;
+  while (node) {
+    const val = node.style.getPropertyValue("--overlay-scale");
+    if (val) return parseFloat(val) || 1;
+    node = node.parentElement;
+  }
+  return 1;
+}
 function OverlayBadge({
   children,
-  maxScale = 2,
-  minScale = 0.75,
+  maxScale = 1.5,
+  minScale = 0.5,
   top,
   right,
   bottom,
@@ -3700,41 +3819,47 @@ function OverlayBadge({
   sx,
   ...rest
 }) {
-  const ref = useRef10(null);
-  const baseSize = useRef10(null);
-  useEffect10(() => {
+  const ref = useRef11(null);
+  const baseSize = useRef11(null);
+  useEffect11(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
     if (!ancestor) return;
-    function update() {
-      requestAnimationFrame(() => {
-        if (!el || !ancestor) return;
-        const containerW = ancestor.clientWidth;
-        const containerH = ancestor.clientHeight;
-        if (containerW <= 0 || containerH <= 0) {
-          el.style.transform = "";
-          return;
-        }
-        if (!baseSize.current) {
-          baseSize.current = { w: containerW, h: containerH };
-        }
-        const ratio = Math.min(
-          containerW / baseSize.current.w,
-          containerH / baseSize.current.h
-        );
-        const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
-        const overlayScale = parseFloat(
-          getComputedStyle(el).getPropertyValue("--overlay-scale")
-        ) || 1;
-        const scale = `scale(${ownScale / overlayScale})`;
-        el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
-      });
+    let rafId = 0;
+    function doUpdate() {
+      if (!el || !ancestor) return;
+      const containerW = ancestor.clientWidth;
+      const containerH = ancestor.clientHeight;
+      if (containerW <= 0 || containerH <= 0) {
+        el.style.transform = "";
+        return;
+      }
+      if (!baseSize.current) {
+        baseSize.current = { w: containerW, h: containerH };
+      }
+      const ratio = Math.min(
+        containerW / baseSize.current.w,
+        containerH / baseSize.current.h
+      );
+      const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
+      const overlayScale = readOverlayScale(el);
+      const scale = `scale(${ownScale / overlayScale})`;
+      el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
     }
-    const observer = new ResizeObserver(update);
+    function scheduleUpdate() {
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          doUpdate();
+        });
+      }
+    }
+    const observer = new ResizeObserver(scheduleUpdate);
     observer.observe(ancestor);
-    update();
+    scheduleUpdate();
     return () => {
+      if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
       baseSize.current = null;
     };
@@ -3754,8 +3879,8 @@ function OverlayBadge({
     bottom: toPx(bottom),
     left: toPx(left)
   };
-  return /* @__PURE__ */ jsx7(
-    Stack4,
+  return /* @__PURE__ */ jsx8(
+    Stack5,
     {
       ref,
       sx: {
@@ -3799,6 +3924,7 @@ export {
   FixedSizeContent,
   ObjectOverlay,
   OverlayBadge,
+  OverlayContainer,
   OverlayContent,
   Point9 as Point,
   Polygon5 as Polygon,