@bwp-web/canvas 0.8.0 → 0.8.1

package/dist/index.js

@@ -434,21 +434,26 @@ function setBackgroundContrast(canvas, value) {
   const contrastIdx = currentFilters.findIndex(
     (f) => f instanceof filters.Contrast
   );
+  let changed = false;
   if (contrast === 0) {
     if (contrastIdx >= 0) {
       bg.filters = currentFilters.filter(
         (f) => !(f instanceof filters.Contrast)
       );
       bg.applyFilters();
+      changed = true;
     }
   } else if (contrastIdx >= 0) {
     currentFilters[contrastIdx].contrast = contrast;
     bg.applyFilters();
+    changed = true;
   } else {
     bg.filters = [...currentFilters, new filters.Contrast({ contrast })];
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundContrast(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -463,14 +468,18 @@ function setBackgroundInverted(canvas, inverted) {
   if (!bg) return;
   const currentFilters = bg.filters ?? [];
   const hasInvert = currentFilters.some((f) => f instanceof filters.Invert);
+  let changed = false;
   if (inverted && !hasInvert) {
     bg.filters = [...currentFilters, new filters.Invert()];
     bg.applyFilters();
+    changed = true;
   } else if (!inverted && hasInvert) {
     bg.filters = currentFilters.filter((f) => !(f instanceof filters.Invert));
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundInverted(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -536,6 +545,7 @@ async function setBackgroundImage(canvas, url, options) {
     setBackgroundContrast(canvas, prevContrast);
   }
   canvas.requestRenderAll();
+  canvas.fire("background:modified");
   return img;
 }
 
@@ -2540,6 +2550,7 @@ function useEditCanvas(options) {
           canvas.on("object:added", () => setIsDirty(true));
           canvas.on("object:removed", () => setIsDirty(true));
           canvas.on("object:modified", () => setIsDirty(true));
+          canvas.on("background:modified", () => setIsDirty(true));
         }
         if (opts?.history) {
           const syncHistoryState = () => {
@@ -2553,6 +2564,7 @@ function useEditCanvas(options) {
           canvas.on("object:added", syncHistoryState);
           canvas.on("object:removed", syncHistoryState);
           canvas.on("object:modified", syncHistoryState);
+          canvas.on("background:modified", syncHistoryState);
         }
         if (opts?.vertexEdit !== false) {
           const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
@@ -2684,6 +2696,8 @@ function useEditCanvas(options) {
     isDirty,
     /** Reset the dirty flag (e.g., after a successful save). */
     resetDirty: useCallback(() => setIsDirty(false), []),
+    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
+    markDirty: useCallback(() => setIsDirty(true), []),
     /** Undo the last change. Requires `history: true`. */
     undo: useCallback(async () => {
       const h = historyRef.current;
@@ -2743,6 +2757,7 @@ function useViewCanvas(options) {
       canvas.on("object:added", () => {
         lockCanvas(canvas);
       });
+      canvas.hoverCursor = "pointer";
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
@@ -3196,6 +3211,31 @@ function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
 }
+function deriveAngle(top, right, bottom, left) {
+  const hasTop = top !== void 0;
+  const hasRight = right !== void 0;
+  const hasBottom = bottom !== void 0;
+  const hasLeft = left !== void 0;
+  if (hasTop && hasRight) return 45;
+  if (hasTop && hasLeft) return 135;
+  if (hasBottom && hasRight) return 315;
+  if (hasBottom && hasLeft) return 225;
+  if (hasTop) return 90;
+  if (hasRight) return 0;
+  if (hasBottom) return 270;
+  if (hasLeft) return 180;
+  return 45;
+}
+function ellipsePosition(angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return {
+    pctX: 50 + 50 * Math.cos(rad),
+    pctY: 50 - 50 * Math.sin(rad)
+  };
+}
+function toNum(v) {
+  return typeof v === "number" ? v : 0;
+}
 function OverlayBadge({
   children,
   maxScale = 2,
@@ -3204,6 +3244,7 @@ function OverlayBadge({
   right,
   bottom,
   left,
+  circular = false,
   sx,
   ...rest
 }) {
@@ -3234,7 +3275,8 @@ function OverlayBadge({
         const overlayScale = parseFloat(
           getComputedStyle(el).getPropertyValue("--overlay-scale")
         ) || 1;
-        el.style.transform = `scale(${ownScale / overlayScale})`;
+        const scale = `scale(${ownScale / overlayScale})`;
+        el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
       });
     }
     const observer = new ResizeObserver(update);
@@ -3244,17 +3286,29 @@ function OverlayBadge({
       observer.disconnect();
       baseSize.current = null;
     };
-  }, [maxScale, minScale]);
+  }, [maxScale, minScale, circular]);
+  const positionSx = circular ? (() => {
+    const angle = deriveAngle(top, right, bottom, left);
+    const { pctX, pctY } = ellipsePosition(angle);
+    const leftOffset = toNum(left) - toNum(right);
+    const topOffset = toNum(top) - toNum(bottom);
+    return {
+      left: `calc(${pctX}% + ${leftOffset}px)`,
+      top: `calc(${pctY}% + ${topOffset}px)`
+    };
+  })() : {
+    top: toPx(top),
+    right: toPx(right),
+    bottom: toPx(bottom),
+    left: toPx(left)
+  };
   return /* @__PURE__ */ jsx5(
     Stack4,
     {
       ref,
       sx: {
         position: "absolute",
-        top: toPx(top),
-        right: toPx(right),
-        bottom: toPx(bottom),
-        left: toPx(left),
+        ...positionSx,
         transformOrigin: "center center",
         pointerEvents: "auto",
         width: "max-content",