@bwp-web/canvas 0.6.1 → 0.7.0

package/dist/index.js

@@ -102,6 +102,10 @@ var DEFAULT_VIEWPORT_PADDING = 0.05;
 var BASE_CANVAS_SIZE = 1e3;
 var DEFAULT_SNAP_MARGIN = 6;
 var DEFAULT_ANGLE_SNAP_INTERVAL = 15;
+function computeSnapMargin(canvasWidth, canvasHeight, zoom, baseMargin = DEFAULT_SNAP_MARGIN, scaleWithCanvasSize = true) {
+  const sizeScale = scaleWithCanvasSize ? Math.max(canvasWidth || 800, canvasHeight || 600) / BASE_CANVAS_SIZE : 1;
+  return baseMargin * sizeScale / zoom;
+}
 var MIN_DRAG_SIZE = 3;
 var POLYGON_CLOSE_THRESHOLD = 10;
 var DEFAULT_IMAGE_MAX_SIZE = 4096;
@@ -309,23 +313,23 @@ function enablePanAndZoom(canvas, options) {
       const targetX = canvasCenterX - objectCenter.x * zoom;
       const targetY = canvasCenterY - objectCenter.y * zoom;
       if (!panOpts?.animate) {
-        const vt2 = canvas.viewportTransform;
-        if (!vt2) return;
+        const viewportTransform2 = canvas.viewportTransform;
+        if (!viewportTransform2) return;
         canvas.setViewportTransform([
-          vt2[0],
-          vt2[1],
-          vt2[2],
-          vt2[3],
+          viewportTransform2[0],
+          viewportTransform2[1],
+          viewportTransform2[2],
+          viewportTransform2[3],
           targetX,
           targetY
         ]);
         return;
       }
       const duration = panOpts.duration ?? 300;
-      const vt = canvas.viewportTransform;
-      if (!vt) return;
-      const startX = vt[4];
-      const startY = vt[5];
+      const viewportTransform = canvas.viewportTransform;
+      if (!viewportTransform) return;
+      const startX = viewportTransform[4];
+      const startY = viewportTransform[5];
       const startTime = performance.now();
       function step(now) {
         const elapsed = now - startTime;
@@ -333,13 +337,13 @@ function enablePanAndZoom(canvas, options) {
         const eased = 1 - Math.pow(1 - t, 3);
         const currentX = startX + (targetX - startX) * eased;
         const currentY = startY + (targetY - startY) * eased;
-        const currentVt = canvas.viewportTransform;
-        if (!currentVt) return;
+        const currentTransform = canvas.viewportTransform;
+        if (!currentTransform) return;
         canvas.setViewportTransform([
-          currentVt[0],
-          currentVt[1],
-          currentVt[2],
-          currentVt[3],
+          currentTransform[0],
+          currentTransform[1],
+          currentTransform[2],
+          currentTransform[3],
           currentX,
           currentY
         ]);
@@ -526,6 +530,7 @@ async function setBackgroundImage(canvas, url, options) {
     imageUrl = result.url;
   }
   const img = await FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
+  img.set({ left: img.width / 2, top: img.height / 2 });
   canvas.backgroundImage = img;
   if (prevContrast !== void 0 && prevContrast !== 1) {
     setBackgroundContrast(canvas, prevContrast);
@@ -723,63 +728,6 @@ registerSnapPointExtractor(
 // src/alignment/objectAlignment.ts
 import { util as util2 } from "fabric";
 
-// src/alignment/objectAlignmentRendering.ts
-function drawAlignmentLine(config, origin, target) {
-  const ctx = config.canvas.getTopContext();
-  const vt = config.canvas.viewportTransform;
-  const zoom = config.canvas.getZoom();
-  ctx.save();
-  ctx.transform(...vt);
-  ctx.lineWidth = config.width / zoom;
-  if (config.lineDash) ctx.setLineDash(config.lineDash);
-  ctx.strokeStyle = config.color;
-  ctx.beginPath();
-  ctx.moveTo(origin.x, origin.y);
-  ctx.lineTo(target.x, target.y);
-  ctx.stroke();
-  if (config.lineDash) ctx.setLineDash([]);
-  drawXMarker(ctx, origin, config.xSize / zoom);
-  drawXMarker(ctx, target, config.xSize / zoom);
-  ctx.restore();
-}
-function drawXMarker(ctx, point, size) {
-  ctx.save();
-  ctx.translate(point.x, point.y);
-  ctx.beginPath();
-  ctx.moveTo(-size, -size);
-  ctx.lineTo(size, size);
-  ctx.moveTo(size, -size);
-  ctx.lineTo(-size, size);
-  ctx.stroke();
-  ctx.restore();
-}
-function drawMarkerList(config, lines) {
-  const ctx = config.canvas.getTopContext();
-  const vt = config.canvas.viewportTransform;
-  const zoom = config.canvas.getZoom();
-  const markerSize = config.xSize / zoom;
-  ctx.save();
-  ctx.transform(...vt);
-  ctx.lineWidth = config.width / zoom;
-  ctx.strokeStyle = config.color;
-  for (const item of lines) drawXMarker(ctx, item.target, markerSize);
-  ctx.restore();
-}
-function drawVerticalAlignmentLines(config, lines) {
-  for (const v of lines) {
-    const { origin, target } = JSON.parse(v);
-    const from = { x: target.x, y: origin.y };
-    drawAlignmentLine(config, from, target);
-  }
-}
-function drawHorizontalAlignmentLines(config, lines) {
-  for (const h of lines) {
-    const { origin, target } = JSON.parse(h);
-    const from = { x: origin.x, y: target.y };
-    drawAlignmentLine(config, from, target);
-  }
-}
-
 // src/alignment/objectAlignmentMath.ts
 var OPPOSITE_ORIGIN_MAP = {
   tl: ["right", "bottom"],
@@ -903,6 +851,61 @@ function collectHorizontalSnapOffset(props) {
 }
 
 // src/alignment/objectAlignment.ts
+function drawXMarker(ctx, point, size) {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.beginPath();
+  ctx.moveTo(-size, -size);
+  ctx.lineTo(size, size);
+  ctx.moveTo(size, -size);
+  ctx.lineTo(-size, size);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawAlignmentLine(config, origin, target) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  if (config.lineDash) ctx.setLineDash(config.lineDash);
+  ctx.strokeStyle = config.color;
+  ctx.beginPath();
+  ctx.moveTo(origin.x, origin.y);
+  ctx.lineTo(target.x, target.y);
+  ctx.stroke();
+  if (config.lineDash) ctx.setLineDash([]);
+  drawXMarker(ctx, origin, config.xSize / zoom);
+  drawXMarker(ctx, target, config.xSize / zoom);
+  ctx.restore();
+}
+function drawMarkerList(config, lines) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  const markerSize = config.xSize / zoom;
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  ctx.strokeStyle = config.color;
+  for (const item of lines) drawXMarker(ctx, item.target, markerSize);
+  ctx.restore();
+}
+function drawVerticalAlignmentLines(config, lines) {
+  for (const v of lines) {
+    const { origin, target } = JSON.parse(v);
+    const from = { x: target.x, y: origin.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
+function drawHorizontalAlignmentLines(config, lines) {
+  for (const h of lines) {
+    const { origin, target } = JSON.parse(h);
+    const from = { x: origin.x, y: target.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
 function adjustCornerForFlip(corner, target) {
   let adjusted = corner;
   if (target.flipX) {
@@ -957,9 +960,13 @@ var ObjectAlignmentGuides = class {
   }
   // --- Margin calculation ---
   computeMargin() {
-    const zoom = this.canvas.getZoom();
-    const sizeScale = this.scaleWithCanvasSize ? Math.max(this.canvas.width ?? 800, this.canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
-    return this.margin * sizeScale / zoom;
+    return computeSnapMargin(
+      this.canvas.width ?? 800,
+      this.canvas.height ?? 600,
+      this.canvas.getZoom(),
+      this.margin,
+      this.scaleWithCanvasSize
+    );
   }
   // --- Snap point caching ---
   getCachedSnapPoints(object) {
@@ -1095,10 +1102,13 @@ function enableRotationSnap(canvas, options) {
 // src/alignment/cursorSnapping.ts
 import { Point as Point5 } from "fabric";
 function snapCursorPoint(canvas, rawPoint, options) {
-  const zoom = canvas.getZoom();
-  const scaleWithSize = options?.scaleWithCanvasSize !== false;
-  const sizeScale = scaleWithSize ? Math.max(canvas.width ?? 800, canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
-  const margin = (options?.margin ?? DEFAULT_SNAP_MARGIN) * sizeScale / zoom;
+  const margin = computeSnapMargin(
+    canvas.width ?? 800,
+    canvas.height ?? 600,
+    canvas.getZoom(),
+    options?.margin ?? DEFAULT_SNAP_MARGIN,
+    options?.scaleWithCanvasSize !== false
+  );
   const exclude = options?.exclude ?? /* @__PURE__ */ new Set();
   let targetPoints;
   if (options?.targetPoints) {
@@ -2161,20 +2171,7 @@ function enableScaledBorderRadius(canvas, options) {
 function getBaseStrokeWidth(obj) {
   return strokeBaseMap.get(obj) ?? obj.strokeWidth ?? 0;
 }
-function serializeCanvas(canvas, options) {
-  const properties = [
-    "data",
-    "shapeType",
-    // Control styling — absent from Fabric's default toObject output
-    "borderColor",
-    "cornerColor",
-    "cornerStrokeColor",
-    "transparentCorners",
-    // Interaction locks — absent from Fabric's default toObject output
-    "lockRotation",
-    "lockUniScaling",
-    ...options?.properties ?? []
-  ];
+function prepareStrokeWidths(canvas) {
   const scaledWidths = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     const base = strokeBaseMap.get(obj);
@@ -2183,6 +2180,11 @@ function serializeCanvas(canvas, options) {
       obj.strokeWidth = base;
     }
   });
+  return () => scaledWidths.forEach((scaled, obj) => {
+    obj.strokeWidth = scaled;
+  });
+}
+function prepareBorderRadii(canvas) {
   const appliedRadii = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     if (!(obj instanceof Rect5)) return;
@@ -2192,6 +2194,11 @@ function serializeCanvas(canvas, options) {
       obj.set({ rx: base.rx, ry: base.ry });
     }
   });
+  return () => appliedRadii.forEach((radii, obj) => {
+    obj.set(radii);
+  });
+}
+function prepareObjectOrigins(canvas) {
   const savedOrigins = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     if (obj.originX === "left" && obj.originY === "top") return;
@@ -2202,20 +2209,36 @@ function serializeCanvas(canvas, options) {
       top: obj.top ?? 0
     });
     const leftTop = obj.getPositionByOrigin("left", "top");
-    obj.set({ originX: "left", originY: "top", left: leftTop.x, top: leftTop.y });
+    obj.set({
+      originX: "left",
+      originY: "top",
+      left: leftTop.x,
+      top: leftTop.y
+    });
   });
+  return () => savedOrigins.forEach((saved, obj) => {
+    obj.set(saved);
+  });
+}
+function prepareBackgroundOrigin(canvas) {
   const bg = canvas.backgroundImage;
-  let savedBgOrigin = null;
-  if (bg instanceof FabricImage2 && (bg.originX !== "left" || bg.originY !== "top")) {
-    savedBgOrigin = {
-      originX: bg.originX,
-      originY: bg.originY,
-      left: bg.left ?? 0,
-      top: bg.top ?? 0
+  if (!(bg instanceof FabricImage2) || bg.originX === "left" && bg.originY === "top") {
+    return () => {
     };
-    const leftTop = bg.getPositionByOrigin("left", "top");
-    bg.set({ originX: "left", originY: "top", left: leftTop.x, top: leftTop.y });
   }
+  const saved = {
+    originX: bg.originX,
+    originY: bg.originY,
+    left: bg.left ?? 0,
+    top: bg.top ?? 0
+  };
+  const leftTop = bg.getPositionByOrigin("left", "top");
+  bg.set({ originX: "left", originY: "top", left: leftTop.x, top: leftTop.y });
+  return () => {
+    bg.set(saved);
+  };
+}
+function prepareStrokeWidthBaseData(canvas) {
   const savedData = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     const base = strokeBaseMap.get(obj) ?? obj.strokeWidth;
@@ -2227,33 +2250,53 @@ function serializeCanvas(canvas, options) {
       };
     }
   });
+  return () => savedData.forEach((originalData, obj) => {
+    obj.data = originalData;
+  });
+}
+function serializeCanvas(canvas, options) {
+  const properties = [
+    "data",
+    "shapeType",
+    // Control styling — absent from Fabric's default toObject output
+    "borderColor",
+    "cornerColor",
+    "cornerStrokeColor",
+    "transparentCorners",
+    // Interaction locks — absent from Fabric's default toObject output
+    "lockRotation",
+    "lockUniScaling",
+    ...options?.properties ?? []
+  ];
+  const restoreStrokeWidths = prepareStrokeWidths(canvas);
+  const restoreBorderRadii = prepareBorderRadii(canvas);
+  const restoreOrigins = prepareObjectOrigins(canvas);
+  const restoreBgOrigin = prepareBackgroundOrigin(canvas);
+  const restoreData = prepareStrokeWidthBaseData(canvas);
   const json = canvas.toObject(properties);
   delete json.backgroundColor;
   json.backgroundFilters = {
     opacity: getBackgroundContrast(canvas),
     inverted: getBackgroundInverted(canvas)
   };
-  scaledWidths.forEach((scaled, obj) => {
-    obj.strokeWidth = scaled;
-  });
-  appliedRadii.forEach((radii, obj) => {
-    obj.set({ rx: radii.rx, ry: radii.ry });
-  });
-  savedOrigins.forEach((saved, obj) => {
-    obj.set(saved);
-  });
-  if (savedBgOrigin && bg instanceof FabricImage2) {
-    bg.set(savedBgOrigin);
+  if (canvas.lockLightMode !== void 0) {
+    json.lockLightMode = canvas.lockLightMode;
   }
-  savedData.forEach((originalData, obj) => {
-    obj.data = originalData;
-  });
+  restoreStrokeWidths();
+  restoreBorderRadii();
+  restoreOrigins();
+  restoreBgOrigin();
+  restoreData();
   return json;
 }
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
   canvas.backgroundColor = "";
   delete canvas.backgroundFilters;
+  const rawCanvas = canvas;
+  if (rawCanvas.lockLightMode !== void 0) {
+    canvas.lockLightMode = rawCanvas.lockLightMode;
+  }
   const bg = canvas.backgroundImage;
   if (bg instanceof FabricImage2) {
     if (bg.originX !== "center" || bg.originY !== "center") {
@@ -2446,105 +2489,104 @@ function useEditCanvas(options) {
     (canvas) => {
       canvasRef.current = canvas;
       const opts = optionsRef.current;
-      if (opts?.scaledStrokes !== false) {
-        enableScaledStrokes(canvas);
-      }
-      if (opts?.borderRadius !== false) {
-        const borderRadiusOpts = typeof opts?.borderRadius === "number" ? { radius: opts.borderRadius } : void 0;
-        enableScaledBorderRadius(canvas, borderRadiusOpts);
-      }
-      if (opts?.keyboardShortcuts !== false) {
-        keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
-      }
-      setCanvasAlignmentEnabled(canvas, opts?.enableAlignment);
-      if (opts?.panAndZoom !== false) {
-        viewportRef.current = enablePanAndZoom(
-          canvas,
-          typeof opts?.panAndZoom === "object" ? opts.panAndZoom : void 0
-        );
-      }
-      const alignmentEnabled = resolveAlignmentEnabled(
-        opts?.enableAlignment,
-        opts?.alignment
-      );
-      if (alignmentEnabled) {
-        alignmentCleanupRef.current = enableObjectAlignment(
-          canvas,
-          typeof opts?.alignment === "object" ? opts.alignment : void 0
-        );
-      }
-      if (opts?.rotationSnap !== false) {
-        rotationSnapCleanupRef.current = enableRotationSnap(
-          canvas,
-          typeof opts?.rotationSnap === "object" ? opts.rotationSnap : void 0
+      setupFeatures();
+      setupEventListeners();
+      invokeOnReady();
+      function setupFeatures() {
+        if (opts?.scaledStrokes !== false) {
+          enableScaledStrokes(canvas);
+        }
+        if (opts?.borderRadius !== false) {
+          const borderRadiusOpts = typeof opts?.borderRadius === "number" ? { radius: opts.borderRadius } : void 0;
+          enableScaledBorderRadius(canvas, borderRadiusOpts);
+        }
+        if (opts?.keyboardShortcuts !== false) {
+          keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
+        }
+        setCanvasAlignmentEnabled(canvas, opts?.enableAlignment);
+        if (opts?.panAndZoom !== false) {
+          viewportRef.current = enablePanAndZoom(
+            canvas,
+            typeof opts?.panAndZoom === "object" ? opts.panAndZoom : void 0
+          );
+        }
+        const alignmentEnabled = resolveAlignmentEnabled(
+          opts?.enableAlignment,
+          opts?.alignment
         );
+        if (alignmentEnabled) {
+          alignmentCleanupRef.current = enableObjectAlignment(
+            canvas,
+            typeof opts?.alignment === "object" ? opts.alignment : void 0
+          );
+        }
+        if (opts?.rotationSnap !== false) {
+          rotationSnapCleanupRef.current = enableRotationSnap(
+            canvas,
+            typeof opts?.rotationSnap === "object" ? opts.rotationSnap : void 0
+          );
+        }
+        if (opts?.history) {
+          const historyOpts = typeof opts.history === "object" ? opts.history : void 0;
+          historyRef.current = createHistoryTracker(canvas, historyOpts);
+        }
       }
-      canvas.on("mouse:wheel", () => {
-        setZoom(canvas.getZoom());
-      });
-      canvas.on("selection:created", (e) => {
-        setSelected(e.selected ?? []);
-      });
-      canvas.on("selection:updated", (e) => {
-        setSelected(e.selected ?? []);
-      });
-      canvas.on("selection:cleared", () => {
-        setSelected([]);
-      });
-      if (opts?.trackChanges) {
-        canvas.on("object:added", () => setIsDirty(true));
-        canvas.on("object:removed", () => setIsDirty(true));
-        canvas.on("object:modified", () => setIsDirty(true));
-      }
-      if (opts?.history) {
-        const syncHistoryState = () => {
-          const h = historyRef.current;
-          if (!h) return;
-          setTimeout(() => {
-            setCanUndo(h.canUndo());
-            setCanRedo(h.canRedo());
-          }, 350);
-        };
-        canvas.on("object:added", syncHistoryState);
-        canvas.on("object:removed", syncHistoryState);
-        canvas.on("object:modified", syncHistoryState);
-      }
-      if (opts?.vertexEdit !== false) {
-        const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
-        canvas.on("mouse:dblclick", (e) => {
-          if (e.target && e.target instanceof Polygon4) {
-            vertexEditCleanupRef.current?.();
-            vertexEditCleanupRef.current = enableVertexEdit(canvas, e.target, {
-              ...vertexOpts,
-              onExit: () => {
-                vertexEditCleanupRef.current = null;
-                setIsEditingVertices(false);
-              }
-            });
-            setIsEditingVertices(true);
-          }
-        });
-      }
-      if (opts?.history) {
-        const historyOpts = typeof opts.history === "object" ? opts.history : void 0;
-        historyRef.current = createHistoryTracker(canvas, historyOpts);
+      function setupEventListeners() {
+        canvas.on("mouse:wheel", () => setZoom(canvas.getZoom()));
+        canvas.on("selection:created", (e) => setSelected(e.selected ?? []));
+        canvas.on("selection:updated", (e) => setSelected(e.selected ?? []));
+        canvas.on("selection:cleared", () => setSelected([]));
+        if (opts?.trackChanges) {
+          canvas.on("object:added", () => setIsDirty(true));
+          canvas.on("object:removed", () => setIsDirty(true));
+          canvas.on("object:modified", () => setIsDirty(true));
+        }
+        if (opts?.history) {
+          const syncHistoryState = () => {
+            const h = historyRef.current;
+            if (!h) return;
+            setTimeout(() => {
+              setCanUndo(h.canUndo());
+              setCanRedo(h.canRedo());
+            }, 350);
+          };
+          canvas.on("object:added", syncHistoryState);
+          canvas.on("object:removed", syncHistoryState);
+          canvas.on("object:modified", syncHistoryState);
+        }
+        if (opts?.vertexEdit !== false) {
+          const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
+          canvas.on("mouse:dblclick", (e) => {
+            if (e.target && e.target instanceof Polygon4) {
+              vertexEditCleanupRef.current?.();
+              vertexEditCleanupRef.current = enableVertexEdit(
+                canvas,
+                e.target,
+                {
+                  ...vertexOpts,
+                  onExit: () => {
+                    vertexEditCleanupRef.current = null;
+                    setIsEditingVertices(false);
+                  }
+                }
+              );
+              setIsEditingVertices(true);
+            }
+          });
+        }
       }
-      const onReadyResult = opts?.onReady?.(canvas);
-      if (opts?.autoFitToBackground !== false) {
+      function invokeOnReady() {
+        const onReadyResult = opts?.onReady?.(canvas);
         Promise.resolve(onReadyResult).then(() => {
-          if (canvas.backgroundImage) {
+          if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
             fitViewportToBackground(canvas);
             syncZoom(canvasRef, setZoom);
           }
           historyRef.current?.pushSnapshot();
         });
-      } else {
-        Promise.resolve(onReadyResult).then(() => {
-          historyRef.current?.pushSnapshot();
-        });
       }
     },
-    // onReady and panAndZoom are intentionally excluded — we only initialize once
+    // Dependency array intentionally empty — we only initialize once on mount
     []
   );
   useEffect2(() => {
@@ -2934,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;
@@ -2957,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);
@@ -2996,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
@@ -3020,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,
@@ -3065,7 +3256,6 @@ export {
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useObjectOverlay,
   useViewCanvas,
   util5 as util
 };