@bwp-web/canvas 0.4.3 → 0.5.0

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export type { CursorSnapResult, CursorSnapOptions, GuidelineStyle, } from './ali
 export { deleteObjects, enableKeyboardShortcuts } from './keyboard';
 export { enableScaledStrokes, serializeCanvas, loadCanvas, getBaseStrokeWidth, } from './serialization';
 export type { SerializeOptions, LoadCanvasOptions } from './serialization';
-export { fitViewportToBackground, getBackgroundSrc, setBackgroundOpacity, getBackgroundOpacity, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
+export { fitViewportToBackground, getBackgroundSrc, setBackgroundContrast, getBackgroundContrast, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
 export type { FitViewportOptions, ResizeResult, ResizeImageOptions, SetBackgroundImageOptions, } from './background';
 export { DEFAULT_CONTROL_STYLE, DEFAULT_SHAPE_STYLE, DEFAULT_CIRCLE_STYLE, DEFAULT_DRAG_SHAPE_STYLE, DEFAULT_GUIDELINE_SHAPE_STYLE, DEFAULT_ALIGNMENT_STYLE, } from './styles';
 export { Canvas as FabricCanvas, FabricObject, FabricImage, Rect, Polygon, Point, util, } from 'fabric';

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

@@ -94,7 +94,7 @@ import {
 var DEFAULT_MIN_ZOOM = 0.2;
 var DEFAULT_MAX_ZOOM = 10;
 var DEFAULT_ZOOM_FACTOR = 1.03;
-var DEFAULT_ZOOM_STEP = 0.2;
+var DEFAULT_ZOOM_STEP = 1.2;
 var DEFAULT_VIEWPORT_PADDING = 0.05;
 var BASE_CANVAS_SIZE = 1e3;
 var DEFAULT_SNAP_MARGIN = 6;
@@ -276,15 +276,15 @@ function enablePanAndZoom(canvas, options) {
     setEnabled(value) {
       enabled = value;
     },
-    zoomIn(step = DEFAULT_ZOOM_STEP) {
-      const z = Math.min(canvas.getZoom() + step, bounds.maxZoom);
+    zoomIn(factor = DEFAULT_ZOOM_STEP) {
+      const z = Math.min(canvas.getZoom() * factor, bounds.maxZoom);
       canvas.zoomToPoint(
         new Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
         z
       );
     },
-    zoomOut(step = DEFAULT_ZOOM_STEP) {
-      const z = Math.max(canvas.getZoom() - step, bounds.minZoom);
+    zoomOut(factor = DEFAULT_ZOOM_STEP) {
+      const z = Math.max(canvas.getZoom() / factor, bounds.minZoom);
       canvas.zoomToPoint(
         new Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
         z
@@ -383,15 +383,37 @@ function fitViewportToBackground(canvas, options) {
   canvas.setViewportTransform([scale, 0, 0, scale, offsetX, offsetY]);
   canvas.requestRenderAll();
 }
-function setBackgroundOpacity(canvas, opacity) {
+function setBackgroundContrast(canvas, value) {
   const bg = getBackgroundImage(canvas);
   if (!bg) return;
-  bg.set("opacity", Math.min(1, Math.max(0, opacity)));
+  const contrast = Math.min(Math.max(value, 0), 2) - 1;
+  const currentFilters = bg.filters ?? [];
+  const contrastIdx = currentFilters.findIndex(
+    (f) => f instanceof filters.Contrast
+  );
+  if (contrast === 0) {
+    if (contrastIdx >= 0) {
+      bg.filters = currentFilters.filter(
+        (f) => !(f instanceof filters.Contrast)
+      );
+      bg.applyFilters();
+    }
+  } else if (contrastIdx >= 0) {
+    currentFilters[contrastIdx].contrast = contrast;
+    bg.applyFilters();
+  } else {
+    bg.filters = [...currentFilters, new filters.Contrast({ contrast })];
+    bg.applyFilters();
+  }
   canvas.requestRenderAll();
 }
-function getBackgroundOpacity(canvas) {
+function getBackgroundContrast(canvas) {
   const bg = getBackgroundImage(canvas);
-  return bg?.opacity ?? 1;
+  if (!bg) return 1;
+  const contrastFilter = bg.filters?.find(
+    (f) => f instanceof filters.Contrast
+  );
+  return 1 + (contrastFilter?.contrast ?? 0);
 }
 function setBackgroundInverted(canvas, inverted) {
   const bg = getBackgroundImage(canvas);
@@ -457,7 +479,7 @@ function resizeImageUrl(url, options) {
   });
 }
 async function setBackgroundImage(canvas, url, options) {
-  const prevOpacity = options?.preserveOpacity ? getBackgroundOpacity(canvas) : void 0;
+  const prevContrast = options?.preserveContrast ? getBackgroundContrast(canvas) : void 0;
   let imageUrl = url;
   if (options !== void 0) {
     const result = await resizeImageUrl(url, options);
@@ -465,8 +487,8 @@ async function setBackgroundImage(canvas, url, options) {
   }
   const img = await FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
   canvas.backgroundImage = img;
-  if (prevOpacity !== void 0 && prevOpacity !== 1) {
-    img.set("opacity", prevOpacity);
+  if (prevContrast !== void 0 && prevContrast !== 1) {
+    setBackgroundContrast(canvas, prevContrast);
   }
   canvas.requestRenderAll();
   return img;
@@ -2083,6 +2105,7 @@ function serializeCanvas(canvas, options) {
     }
   });
   const json = canvas.toObject(properties);
+  delete json.backgroundColor;
   scaledWidths.forEach((scaled, obj) => {
     obj.strokeWidth = scaled;
   });
@@ -2097,6 +2120,17 @@ async function loadCanvas(canvas, json, options) {
     });
     for (const obj of toRemove) canvas.remove(obj);
   }
+  canvas.forEachObject((obj) => {
+    if (obj.originX === "center" && obj.originY === "center") return;
+    const center = obj.getCenterPoint();
+    obj.set({
+      originX: "center",
+      originY: "center",
+      left: center.x,
+      top: center.y
+    });
+    obj.setCoords();
+  });
   canvas.forEachObject((obj) => {
     obj.set(DEFAULT_CONTROL_STYLE);
     if (obj.shapeType === "circle" && obj instanceof Rect5) {
@@ -2259,7 +2293,7 @@ function useEditCanvas(options) {
     async (url, bgOpts) => {
       const canvas = canvasRef.current;
       if (!canvas) throw new Error("Canvas not ready");
-      const resizeOpts = options?.backgroundResize !== false ? typeof options?.backgroundResize === "object" ? { ...options.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveOpacity ? { preserveOpacity: true } : void 0;
+      const resizeOpts = options?.backgroundResize !== false ? typeof options?.backgroundResize === "object" ? { ...options.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
       const img = await setBackgroundImage(canvas, url, resizeOpts);
       if (options?.autoFitToBackground !== false) {
         fitViewportToBackground(canvas);
@@ -2317,7 +2351,7 @@ function useEditCanvas(options) {
      * exceeds the configured limits (opt out via `backgroundResize: false`),
      * and fits the viewport after setting if `autoFitToBackground` is enabled.
      *
-     * Pass `{ preserveOpacity: true }` to keep the current background opacity
+     * Pass `{ preserveContrast: true }` to keep the current background contrast
      * when replacing the image.
      */
     setBackground,
@@ -2707,8 +2741,8 @@ export {
   enableScaledStrokes,
   enableVertexEdit,
   fitViewportToBackground,
+  getBackgroundContrast,
   getBackgroundInverted,
-  getBackgroundOpacity,
   getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
@@ -2717,9 +2751,9 @@ export {
   resetViewport,
   resizeImageUrl,
   serializeCanvas,
+  setBackgroundContrast,
   setBackgroundImage,
   setBackgroundInverted,
-  setBackgroundOpacity,
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,