@bwp-web/canvas 0.5.0 → 0.5.1

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export type { RectangleOptions, RectangleAtPointOptions } from './shapes';
 export { createCircle, createCircleAtPoint, editCircle } from './shapes';
 export type { CircleOptions, CircleAtPointOptions } from './shapes';
 export { createPolygon, createPolygonAtPoint, createPolygonFromDrag, createPolygonFromVertices, editPolygon, } from './shapes';
-export type { PolygonOptions, PolygonStyleOptions } from './shapes';
+export type { PolygonOptions } from './shapes';
 export { enableClickToCreate } from './interactions';
 export { enableDragToCreate } from './interactions';
 export type { DragToCreateOptions } from './interactions';
@@ -38,7 +38,7 @@ export type { RotationSnapOptions } from './alignment';
 export { snapCursorPoint } from './alignment';
 export type { CursorSnapResult, CursorSnapOptions, GuidelineStyle, } from './alignment';
 export { deleteObjects, enableKeyboardShortcuts } from './keyboard';
-export { enableScaledStrokes, serializeCanvas, loadCanvas, getBaseStrokeWidth, } from './serialization';
+export { enableScaledStrokes, enableScaledBorderRadius, serializeCanvas, loadCanvas, getBaseStrokeWidth, } from './serialization';
 export type { SerializeOptions, LoadCanvasOptions } from './serialization';
 export { fitViewportToBackground, getBackgroundSrc, setBackgroundContrast, getBackgroundContrast, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
 export type { FitViewportOptions, ResizeResult, ResizeImageOptions, SetBackgroundImageOptions, } from './background';

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,GACV,MAAM,SAAS,CAAC;AAGjB,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,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpE,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,GACnB,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,EACL,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAG3E,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

@@ -1410,6 +1410,11 @@ function enableDragToCreate(canvas, factory, options) {
     if (width < MIN_DRAG_SIZE && height < MIN_DRAG_SIZE) {
       canvas.requestRenderAll();
       previewRect = null;
+      if (options?.clickFactory) {
+        const obj2 = options.clickFactory(canvas, { x: startX, y: startY });
+        restoreViewport(options?.viewport);
+        options?.onCreated?.(obj2);
+      }
       return;
     }
     const obj = factory(canvas, { startX, startY, width, height });
@@ -2055,6 +2060,8 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 // src/serialization.ts
 import { Rect as Rect5 } from "fabric";
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
+var borderRadiusBaseMap = /* @__PURE__ */ new WeakMap();
+var VIEW_BORDER_RADIUS = 4;
 function enableScaledStrokes(canvas) {
   function applyScaledStrokes() {
     const zoom = canvas.getZoom();
@@ -2079,6 +2086,28 @@ function enableScaledStrokes(canvas) {
     });
   };
 }
+function enableScaledBorderRadius(canvas) {
+  function applyScaledBorderRadius() {
+    canvas.forEachObject((obj) => {
+      if (!(obj instanceof Rect5)) return;
+      if (!borderRadiusBaseMap.has(obj)) return;
+      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
+      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
+      obj.set({ rx, ry });
+    });
+  }
+  canvas.on("before:render", applyScaledBorderRadius);
+  return () => {
+    canvas.off("before:render", applyScaledBorderRadius);
+    canvas.forEachObject((obj) => {
+      if (!(obj instanceof Rect5)) return;
+      const base = borderRadiusBaseMap.get(obj);
+      if (base !== void 0) {
+        obj.set({ rx: base.rx, ry: base.ry });
+      }
+    });
+  };
+}
 function getBaseStrokeWidth(obj) {
   return strokeBaseMap.get(obj) ?? obj.strokeWidth ?? 0;
 }
@@ -2104,15 +2133,28 @@ function serializeCanvas(canvas, options) {
       obj.strokeWidth = base;
     }
   });
+  const appliedRadii = /* @__PURE__ */ new Map();
+  canvas.forEachObject((obj) => {
+    if (!(obj instanceof Rect5)) return;
+    const base = borderRadiusBaseMap.get(obj);
+    if (base !== void 0) {
+      appliedRadii.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
+      obj.set({ rx: base.rx, ry: base.ry });
+    }
+  });
   const json = canvas.toObject(properties);
   delete json.backgroundColor;
   scaledWidths.forEach((scaled, obj) => {
     obj.strokeWidth = scaled;
   });
+  appliedRadii.forEach((radii, obj) => {
+    obj.set({ rx: radii.rx, ry: radii.ry });
+  });
   return json;
 }
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
+  canvas.backgroundColor = "";
   if (options?.filter) {
     const toRemove = [];
     canvas.forEachObject((obj) => {
@@ -2136,6 +2178,12 @@ async function loadCanvas(canvas, json, options) {
     if (obj.shapeType === "circle" && obj instanceof Rect5) {
       restoreCircleConstraints(obj);
     }
+    if (obj instanceof Rect5 && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+      borderRadiusBaseMap.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
+      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
+      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
+      obj.set({ rx, ry });
+    }
   });
   canvas.requestRenderAll();
   return canvas.getObjects();
@@ -2187,6 +2235,7 @@ function useEditCanvas(options) {
       if (options?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
+      enableScaledBorderRadius(canvas);
       if (options?.keyboardShortcuts !== false) {
         keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
       }
@@ -2364,18 +2413,10 @@ function useEditCanvas(options) {
 
 // src/hooks/useViewCanvas.ts
 import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
-import { Rect as Rect6 } from "fabric";
-var VIEW_BORDER_RADIUS = 4;
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
     obj.selectable = false;
-    obj.evented = false;
-    if (obj instanceof Rect6 && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
-      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
-      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
-      obj.set({ rx, ry });
-    }
   });
 }
 function useViewCanvas(options) {
@@ -2388,6 +2429,7 @@ function useViewCanvas(options) {
       if (options?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
+      enableScaledBorderRadius(canvas);
       if (options?.panAndZoom !== false) {
         const panAndZoomOpts = typeof options?.panAndZoom === "object" ? options.panAndZoom : {};
         viewportRef.current = enablePanAndZoom(canvas, {
@@ -2700,7 +2742,7 @@ import {
   Canvas as Canvas2,
   FabricObject as FabricObject5,
   FabricImage as FabricImage2,
-  Rect as Rect7,
+  Rect as Rect6,
   Polygon as Polygon5,
   Point as Point9,
   util as util5
@@ -2718,7 +2760,7 @@ export {
   FabricObject5 as FabricObject,
   Point9 as Point,
   Polygon5 as Polygon,
-  Rect7 as Rect,
+  Rect6 as Rect,
   createCircle,
   createCircleAtPoint,
   createPolygon,
@@ -2738,6 +2780,7 @@ export {
   enableObjectAlignment,
   enablePanAndZoom,
   enableRotationSnap,
+  enableScaledBorderRadius,
   enableScaledStrokes,
   enableVertexEdit,
   fitViewportToBackground,