@bwp-web/canvas 0.6.2 → 0.7.0

package/dist/index.d.ts

@@ -11,8 +11,12 @@ export { useCanvasTooltip } from './hooks';
 export type { UseCanvasTooltipOptions, CanvasTooltipState } from './hooks';
 export { useCanvasClick } from './hooks';
 export type { UseCanvasClickOptions } from './hooks';
-export { useObjectOverlay } from './hooks';
-export type { UseObjectOverlayOptions } from './hooks';
+export { ObjectOverlay } from './overlay';
+export type { ObjectOverlayProps } from './overlay';
+export { OverlayContent } from './overlay';
+export type { OverlayContentProps } from './overlay';
+export { FixedSizeContent } from './overlay';
+export type { FixedSizeContentProps } from './overlay';
 export type { Point2D, ShapeStyleOptions, SnappingOptions, InteractionModeOptions, SnappableInteractionOptions, DragBounds, ModeSetup, CanvasJSON, } from './types';
 export type { ObjectDataType } from './fabricAugmentation';
 export { createRectangle, createRectangleAtPoint, editRectangle, } from './shapes';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAGvD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACtB,2BAA2B,EAC3B,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG3D,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEpE,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC7D,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAGpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,UAAU,EACV,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,UAAU,CAAC;AAKlB,OAAO,EACL,MAAM,IAAI,YAAY,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -2976,18 +2976,24 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
-// src/hooks/useObjectOverlay.ts
+// src/overlay/ObjectOverlay.tsx
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { Stack } from "@mui/material";
 import { util as util4 } from "fabric";
-function useObjectOverlay(canvasRef, object, options) {
-  const containerRef = useRef7(null);
-  const optionsRef = useRef7(options);
-  optionsRef.current = options;
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ObjectOverlay({
+  canvasRef,
+  object,
+  sx,
+  children,
+  ...rest
+}) {
+  const stackRef = useRef7(null);
   useEffect6(() => {
     const canvas = canvasRef.current;
     if (!canvas || !object) return;
     function update() {
-      const el = containerRef.current;
+      const el = stackRef.current;
       if (!el || !canvas || !object) return;
       const zoom = canvas.getZoom();
       const vt = canvas.viewportTransform;
@@ -2999,32 +3005,11 @@ function useObjectOverlay(canvasRef, object, options) {
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
       const angle = object.angle ?? 0;
-      const opts = optionsRef.current;
-      if (opts?.autoScaleContent !== false) {
-        el.style.left = `${screenCoords.x - actualWidth / 2}px`;
-        el.style.top = `${screenCoords.y - actualHeight / 2}px`;
-        el.style.width = `${actualWidth}px`;
-        el.style.height = `${actualHeight}px`;
-        el.style.transformOrigin = "center center";
-        el.style.transform = angle !== 0 ? `scale(${zoom}) rotate(${angle}deg)` : `scale(${zoom})`;
-        el.style.rotate = "";
-        el.style.setProperty("--overlay-scale", String(zoom));
-        if (opts?.textSelector) {
-          const textMinScale = opts?.textMinScale ?? 0.5;
-          const textEls = el.querySelectorAll(opts.textSelector);
-          const display = zoom < textMinScale ? "none" : "";
-          textEls.forEach((t) => {
-            t.style.display = display;
-          });
-        }
-      } else {
-        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 = "";
-        el.style.rotate = angle !== 0 ? `${angle}deg` : "";
-      }
+      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)` : "";
     }
     update();
     canvas.on("after:render", update);
@@ -3038,7 +3023,168 @@ function useObjectOverlay(canvasRef, object, options) {
       object.off("rotating", update);
     };
   }, [canvasRef, object]);
-  return containerRef;
+  if (!object) return null;
+  return /* @__PURE__ */ jsx2(
+    Stack,
+    {
+      ref: stackRef,
+      sx: {
+        position: "absolute",
+        pointerEvents: "none",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+        overflow: "hidden",
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/overlay/OverlayContent.tsx
+import { Stack as Stack2 } from "@mui/material";
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function OverlayContent({
+  children,
+  padding = 4,
+  maxScale = 2,
+  sx,
+  ...rest
+}) {
+  const outerRef = useRef8(null);
+  const innerRef = useRef8(null);
+  useEffect7(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    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");
+        return;
+      }
+      const scale = Math.min(
+        containerW / (natW + padding * 2),
+        containerH / (natH + padding * 2),
+        maxScale
+      );
+      inner.style.transform = `scale(${scale})`;
+      inner.style.setProperty("--overlay-scale", String(scale));
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(outer);
+    observer.observe(inner);
+    fit();
+    return () => observer.disconnect();
+  }, [padding, maxScale]);
+  return /* @__PURE__ */ jsx3(
+    Stack2,
+    {
+      ref: outerRef,
+      sx: {
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        ...sx
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx3(
+        Stack2,
+        {
+          ref: innerRef,
+          sx: {
+            transformOrigin: "center center",
+            flexShrink: 0,
+            width: "max-content"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/overlay/FixedSizeContent.tsx
+import { Stack as Stack3 } from "@mui/material";
+import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FixedSizeContent({
+  children,
+  hideOnOverflow = true,
+  truncationPadding = 4,
+  sx,
+  ...rest
+}) {
+  const ref = useRef9(null);
+  const totalContentHeightRef = useRef9(0);
+  useEffect8(() => {
+    const el = ref.current;
+    if (!el) return;
+    let clipAncestor = el.parentElement;
+    while (clipAncestor) {
+      if (getComputedStyle(clipAncestor).overflow === "hidden") break;
+      clipAncestor = clipAncestor.parentElement;
+    }
+    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") {
+          el.style.display = "none";
+        }
+        if (el.style.display !== "none") {
+          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+        }
+      });
+    }
+    const observer = new ResizeObserver(check);
+    observer.observe(ancestor);
+    check();
+    return () => observer.disconnect();
+  }, [hideOnOverflow, truncationPadding]);
+  return /* @__PURE__ */ jsx4(
+    Stack3,
+    {
+      ref,
+      sx: {
+        transform: "scale(calc(1 / var(--overlay-scale, 1)))",
+        transformOrigin: "center center",
+        flexShrink: 0,
+        width: "max-content",
+        overflow: "hidden",
+        "& > *": {
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        },
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
 }
 
 // src/index.ts
@@ -3062,6 +3208,9 @@ export {
   Canvas2 as FabricCanvas,
   FabricImage3 as FabricImage,
   FabricObject5 as FabricObject,
+  FixedSizeContent,
+  ObjectOverlay,
+  OverlayContent,
   Point9 as Point,
   Polygon5 as Polygon,
   Rect6 as Rect,
@@ -3107,7 +3256,6 @@ export {
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useObjectOverlay,
   useViewCanvas,
   util5 as util
 };