react-design-editor 0.0.51 → 0.0.54

package/lib/Canvas.js

@@ -72,7 +72,7 @@ class InternalCanvas extends react_1.Component {
         const mergedCanvasOption = Object.assign({}, constants_1.defaults.canvasOption, canvasOption, {
             width,
             height,
-            selection: (typeof canvasOption.selection !== 'undefined' && canvasOption.selection) || editable,
+            selection: (typeof canvasOption?.selection !== 'undefined' && canvasOption?.selection) || editable,
         });
         this.canvas = new fabric_1.fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
         this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));

package/lib/handlers/EventHandler.js

@@ -283,10 +283,10 @@ class EventHandler {
             const delta = event.e.deltaY;
             let zoomRatio = this.handler.canvas.getZoom();
             if (delta > 0) {
-                zoomRatio -= 0.05;
+                zoomRatio -= this.handler.zoomStep;
             }
             else {
-                zoomRatio += 0.05;
+                zoomRatio += this.handler.zoomStep;
             }
             this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(this.handler.canvas.getWidth() / 2, this.handler.canvas.getHeight() / 2), zoomRatio);
             event.e.preventDefault();
@@ -619,6 +619,7 @@ class EventHandler {
                                     const createdObj = this.handler.add(obj, false, true);
                                     this.handler.canvas.setActiveObject(createdObj);
                                     this.handler.canvas.requestRenderAll();
+                                    this.handler.onAdd?.(createdObj);
                                 }
                                 else {
                                     const nodes = [];
@@ -649,6 +650,7 @@ class EventHandler {
                                     });
                                     this.handler.canvas.setActiveObject(activeSelection);
                                     this.handler.canvas.requestRenderAll();
+                                    this.handler.onAdd?.(activeSelection);
                                 }
                                 if (!this.handler.transactionHandler.active) {
                                     this.handler.transactionHandler.save('paste');

package/lib/handlers/Handler.d.ts

@@ -104,6 +104,11 @@ export interface HandlerOption {
      * @type {number}
      */
     maxZoom?: number;
+    /**
+     * Zoom ratio step
+     * @type {number}
+     */
+    zoomStep?: number;
     /**
      * Workarea option
      * @type {WorkareaOption}
@@ -179,6 +184,7 @@ declare class Handler implements HandlerOptions {
     interactionMode: InteractionMode;
     minZoom: number;
     maxZoom: number;
+    zoomStep: number;
     propertiesToInclude?: string[];
     workareaOption?: WorkareaOption;
     canvasOption?: CanvasOption;

package/lib/handlers/Handler.js

@@ -17,6 +17,7 @@ const constants_1 = require("../constants");
  */
 class Handler {
     constructor(options) {
+        this.zoomStep = 0.05;
         this.propertiesToInclude = constants_1.defaults.propertiesToInclude;
         this.workareaOption = constants_1.defaults.workareaOption;
         this.canvasOption = constants_1.defaults.canvasOption;
@@ -43,6 +44,7 @@ class Handler {
             this.interactionMode = options.interactionMode;
             this.minZoom = options.minZoom;
             this.maxZoom = options.maxZoom;
+            this.zoomStep = options.zoomStep || 0.05;
             this.zoomEnabled = options.zoomEnabled;
             this.width = options.width;
             this.height = options.height;
@@ -88,7 +90,7 @@ class Handler {
             this.animationHandler = new _1.AnimationHandler(this);
             this.contextmenuHandler = new _1.ContextmenuHandler(this);
             this.tooltipHandler = new _1.TooltipHandler(this);
-            this.zoomHandler = new _1.ZoomHandler(this);
+            this.zoomHandler = new _1.ZoomHandler(this, this.zoomStep);
             this.interactionHandler = new _1.InteractionHandler(this);
             this.transactionHandler = new _1.TransactionHandler(this);
             this.gridHandler = new _1.GridHandler(this);

package/lib/handlers/ZoomHandler.d.ts

@@ -1,9 +1,10 @@
 import { fabric } from 'fabric';
-import Handler from './Handler';
 import { FabricObject } from '../utils';
+import Handler from './Handler';
 declare class ZoomHandler {
     handler?: Handler;
-    constructor(handler: Handler);
+    private _zoomStep?;
+    constructor(handler: Handler, zoomStep?: number);
     /**
      * Zoom to point
      *

package/lib/handlers/ZoomHandler.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 class ZoomHandler {
-    constructor(handler) {
+    constructor(handler, zoomStep = 0.05) {
         /**
          * Zoom to point
          *
@@ -74,7 +74,7 @@ class ZoomHandler {
          */
         this.zoomIn = () => {
             let zoomRatio = this.handler.canvas.getZoom();
-            zoomRatio += 0.05;
+            zoomRatio += this._zoomStep;
             const center = this.handler.canvas.getCenter();
             this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
         };
@@ -84,7 +84,7 @@ class ZoomHandler {
          */
         this.zoomOut = () => {
             let zoomRatio = this.handler.canvas.getZoom();
-            zoomRatio -= 0.05;
+            zoomRatio -= this._zoomStep;
             const center = this.handler.canvas.getCenter();
             this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
         };
@@ -138,6 +138,7 @@ class ZoomHandler {
             this.zoomToCenterWithObject(activeObject, zoomFit);
         };
         this.handler = handler;
+        this._zoomStep = zoomStep;
     }
 }
 exports.default = ZoomHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.51",
+	"version": "0.0.54",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",