react-design-editor 0.0.34 → 0.0.35

package/lib/Canvas.d.ts

@@ -1,32 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Handler, { HandlerOptions } from './handlers/Handler';
 import { FabricCanvas } from './utils';
-import '../../styles/core/canvas.less';
-import '../../styles/core/tooltip.less';
-import '../../styles/core/contextmenu.less';
-import '../../styles/fabricjs/fabricjs.less';
+import '../styles/core/canvas.less';
+import '../styles/core/tooltip.less';
+import '../styles/core/contextmenu.less';
+import '../styles/fabricjs/fabricjs.less';
+export interface CanvasInstance {
+    handler: Handler;
+    canvas: FabricCanvas;
+    container: HTMLDivElement;
+}
 export declare type CanvasProps = HandlerOptions & {
     responsive?: boolean;
     style?: React.CSSProperties;
-    ref?: React.RefAttributes<Handler>;
 };
-interface IState {
-    id: string;
-    loaded: boolean;
-}
-declare class Canvas extends Component<CanvasProps, IState> {
-    handler: Handler;
-    canvas: FabricCanvas;
-    container: React.RefObject<HTMLDivElement>;
-    private resizeObserver;
-    static defaultProps: CanvasProps;
-    state: IState;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: CanvasProps): void;
-    componentWillUnmount(): void;
-    createObserver: () => void;
-    destroyObserver: () => void;
-    handleLoad: () => void;
-    render(): JSX.Element;
-}
+declare const Canvas: React.FC<CanvasProps>;
 export default Canvas;

package/lib/Canvas.js

@@ -24,20 +24,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const fabric_1 = require("fabric");
-const uuid_1 = require("uuid");
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const Handler_1 = __importDefault(require("./handlers/Handler"));
 const constants_1 = require("./constants");
-require("../../styles/core/canvas.less");
-require("../../styles/core/tooltip.less");
-require("../../styles/core/contextmenu.less");
-require("../../styles/fabricjs/fabricjs.less");
-class Canvas extends react_1.Component {
+const uuidv4_1 = require("uuidv4");
+require("../styles/core/canvas.less");
+require("../styles/core/tooltip.less");
+require("../styles/core/contextmenu.less");
+require("../styles/fabricjs/fabricjs.less");
+class InternalCanvas extends react_1.Component {
     constructor() {
         super(...arguments);
-        this.container = react_1.default.createRef();
+        this.containerRef = react_1.default.createRef();
         this.state = {
-            id: uuid_1.v4(),
+            id: uuidv4_1.uuid(),
             loaded: false,
         };
         this.createObserver = () => {
@@ -48,7 +48,7 @@ class Canvas extends react_1.Component {
                     this.handleLoad();
                 }
             });
-            this.resizeObserver.observe(this.container.current);
+            this.resizeObserver.observe(this.containerRef.current);
         };
         this.destroyObserver = () => {
             if (this.resizeObserver) {
@@ -77,13 +77,14 @@ class Canvas extends react_1.Component {
         this.canvas = new fabric_1.fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
         this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
         this.canvas.renderAll();
+        this.container = this.containerRef.current;
         this.handler = new Handler_1.default({
             id,
             width,
             height,
             editable,
             canvas: this.canvas,
-            container: this.container.current,
+            container: this.containerRef.current,
             canvasOption: mergedCanvasOption,
             ...other,
         });
@@ -145,12 +146,12 @@ class Canvas extends react_1.Component {
     render() {
         const { style } = this.props;
         const { id } = this.state;
-        return (react_1.default.createElement("div", { ref: this.container, id: id, className: "rde-canvas", style: { width: '100%', height: '100%', ...style } },
+        return (react_1.default.createElement("div", { ref: this.containerRef, id: id, className: "rde-canvas", style: { width: '100%', height: '100%', ...style } },
             react_1.default.createElement("canvas", { id: `canvas_${id}` })));
     }
 }
-Canvas.defaultProps = {
-    id: uuid_1.v4(),
+InternalCanvas.defaultProps = {
+    id: uuidv4_1.uuid(),
     editable: true,
     zoomEnabled: true,
     minZoom: 30,
@@ -159,4 +160,13 @@ Canvas.defaultProps = {
     width: 0,
     height: 0,
 };
+const Canvas = react_1.default.forwardRef((props, ref) => {
+    const canvasRef = react_1.useRef();
+    react_1.default.useImperativeHandle(ref, () => ({
+        handler: canvasRef.current.handler,
+        canvas: canvasRef.current.canvas,
+        container: canvasRef.current.container,
+    }));
+    return react_1.default.createElement(InternalCanvas, Object.assign({ ref: canvasRef }, props));
+});
 exports.default = Canvas;

package/lib/constants/defaults.d.ts

@@ -1,4 +1,4 @@
-import { WorkareaObject, FabricObjectOption } from '../utils';
+import { FabricObjectOption, WorkareaObject } from '../utils';
 export declare const canvasOption: {
     preserveObjectStacking: boolean;
     width: number;
@@ -18,6 +18,7 @@ export declare const keyEvent: {
     transaction: boolean;
     zoom: boolean;
     cut: boolean;
+    grab: boolean;
 };
 export declare const gridOption: {
     enabled: boolean;

package/lib/constants/defaults.js

@@ -20,6 +20,7 @@ exports.keyEvent = {
     transaction: true,
     zoom: true,
     cut: true,
+    grab: true,
 };
 exports.gridOption = {
     enabled: false,

package/lib/handlers/AnimationHandler.js

@@ -168,7 +168,7 @@ class AnimationHandler {
                     fill: obj.originFill,
                     stroke: obj.originStroke,
                     originFill: null,
-                    origniStroke: null,
+                    originStroke: null,
                 });
             }
             else {
@@ -202,17 +202,20 @@ class AnimationHandler {
                     });
                     this.handler.canvas.requestRenderAll();
                 },
-                update: (e) => {
+                update: (instance) => {
                     if (type === 'flash') {
                         // I don't know why it works. Magic code...
-                        const fill = e.animations[0].currentValue;
-                        const stroke = e.animations[1].currentValue;
+                        const fill = instance.animations[0].currentValue;
+                        const stroke = instance.animations[1].currentValue;
                         obj.set('fill', '');
                         obj.set('fill', fill);
                         obj.set('stroke', stroke);
                     }
                     else if (type === 'rotation') {
-                        const angle = e.animations[0].currentValue;
+                        let angle = instance.animations[0].currentValue;
+                        if (typeof angle === 'string') {
+                            angle = parseInt(angle, 10);
+                        }
                         obj.rotate(angle);
                         this.handler.canvas.requestRenderAll();
                         return;

package/lib/handlers/CustomHandler.d.ts

@@ -0,0 +1,7 @@
+import { Handler } from '.';
+declare class CustomHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    protected initialze(): void;
+}
+export default CustomHandler;

package/lib/handlers/CustomHandler.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class CustomHandler {
+    constructor(handler) {
+        this.handler = handler;
+        this.initialze();
+    }
+    initialze() { }
+}
+exports.default = CustomHandler;

package/lib/handlers/DrawingHandler.d.ts

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric';
-import Handler from './Handler';
 import { FabricEvent, FabricObject } from '../utils';
+import Handler from './Handler';
 declare class DrawingHandler {
     handler: Handler;
     constructor(handler: Handler);

package/lib/handlers/DrawingHandler.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
-const uuid_1 = require("uuid");
+const uuidv4_1 = require("uuidv4");
 const objects_1 = require("../objects");
 class DrawingHandler {
     constructor(handler) {
@@ -33,7 +33,7 @@ class DrawingHandler {
                 const { e, absolutePointer } = opt;
                 const { x, y } = absolutePointer;
                 const circle = new fabric_1.fabric.Circle({
-                    radius: 3,
+                    radius: 1,
                     fill: '#ffffff',
                     stroke: '#333333',
                     strokeWidth: 0.5,
@@ -47,7 +47,7 @@ class DrawingHandler {
                     hoverCursor: 'pointer',
                 });
                 circle.set({
-                    id: uuid_1.v4(),
+                    id: uuidv4_1.uuid(),
                 });
                 if (!this.handler.pointArray.length) {
                     circle.set({
@@ -56,7 +56,7 @@ class DrawingHandler {
                 }
                 const points = [x, y, x, y];
                 const line = new fabric_1.fabric.Line(points, {
-                    strokeWidth: 2,
+                    strokeWidth: 1,
                     fill: '#999999',
                     stroke: '#999999',
                     originX: 'center',
@@ -114,7 +114,7 @@ class DrawingHandler {
             },
             generate: (pointArray) => {
                 const points = [];
-                const id = uuid_1.v4();
+                const id = uuidv4_1.uuid();
                 pointArray.forEach(point => {
                     points.push({
                         x: point.left,
@@ -131,7 +131,7 @@ class DrawingHandler {
                     points,
                     type: 'polygon',
                     stroke: 'rgba(0, 0, 0, 1)',
-                    strokeWidth: 3,
+                    strokeWidth: 1,
                     fill: 'rgba(0, 0, 0, 0.25)',
                     opacity: 1,
                     objectCaching: !this.handler.editable,
@@ -206,7 +206,7 @@ class DrawingHandler {
                 const { absolutePointer } = opt;
                 const { x, y } = absolutePointer;
                 let points = [];
-                const id = uuid_1.v4();
+                const id = uuidv4_1.uuid();
                 this.handler.pointArray.forEach(point => {
                     points = points.concat(point.left, point.top, x, y);
                     this.handler.canvas.remove(point);
@@ -294,7 +294,7 @@ class DrawingHandler {
                 });
                 this.handler.canvas.remove(this.handler.activeLine);
                 const option = {
-                    id: uuid_1.v4(),
+                    id: uuidv4_1.uuid(),
                     points,
                     type: 'arrow',
                     stroke: 'rgba(0, 0, 0, 1)',

package/lib/handlers/EventHandler.d.ts

@@ -1,5 +1,5 @@
-import Handler from './Handler';
 import { FabricEvent } from '../utils';
+import Handler from './Handler';
 /**
  * Event Handler Class
  * @author salgum1114

package/lib/handlers/EventHandler.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
 const animejs_1 = __importDefault(require("animejs"));
+const fabric_1 = require("fabric");
 const constants_1 = require("../constants");
 /**
  * Event Handler Class
@@ -677,7 +677,7 @@ class EventHandler {
                         //     const { type } = file;
                         //     if (type === 'image/png' || type === 'image/jpeg' || type === 'image/jpg') {
                         //         const item = {
-                        //             id: v4(),
+                        //             id: uuid(),
                         //             type: 'image',
                         //             file,
                         //             superType: 'image',
@@ -702,7 +702,7 @@ class EventHandler {
             if (!Object.keys(keyEvent).length) {
                 return;
             }
-            const { clipboard } = keyEvent;
+            const { clipboard, grab } = keyEvent;
             if (this.handler.interactionHandler.isDrawingMode()) {
                 if (this.handler.shortcutHandler.isEscape(e)) {
                     if (this.handler.interactionMode === 'polygon') {
@@ -720,12 +720,12 @@ class EventHandler {
                 }
                 return;
             }
-            if (this.handler.shortcutHandler.isW(e)) {
+            if (this.handler.shortcutHandler.isW(e) && grab) {
                 this.code = e.code;
                 this.handler.interactionHandler.grab();
                 return;
             }
-            if (e.altKey && editable) {
+            if (e.altKey && editable && grab) {
                 this.handler.interactionHandler.grab();
                 return;
             }
@@ -839,6 +839,7 @@ class EventHandler {
      */
     initialize() {
         if (this.handler.editable) {
+            // @ts-ignore
             this.handler.canvas.on({
                 'object:modified': this.modified,
                 'object:scaling': this.scaling,
@@ -857,6 +858,7 @@ class EventHandler {
             });
         }
         else {
+            // @ts-ignore
             this.handler.canvas.on({
                 'mouse:down': this.mousedown,
                 'mouse:move': this.mousemove,

package/lib/handlers/FiberHandler.d.ts

@@ -0,0 +1,6 @@
+import CustomHandler from './CustomHandler';
+declare class FiberHandler extends CustomHandler {
+    protected initialze(): void;
+    private mousedown;
+}
+export default FiberHandler;

package/lib/handlers/FiberHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const CustomHandler_1 = __importDefault(require("./CustomHandler"));
+class FiberHandler extends CustomHandler_1.default {
+    initialze() {
+        this.handler.canvas.on('mouse:down', this.mousedown);
+    }
+    mousedown(opt) {
+        const { subTargets } = opt;
+        if (subTargets.length) {
+            const target = subTargets[0];
+            console.log(target);
+            if (target.type === 'container') {
+            }
+            else if (target.type === 'coreContainer') {
+            }
+        }
+    }
+}
+exports.default = FiberHandler;

package/lib/handlers/GuidelineHandler.d.ts

@@ -1,5 +1,5 @@
+import { FabricEvent, FabricObject } from '../utils';
 import Handler from './Handler';
-import { FabricObject, FabricEvent } from '../utils';
 declare class GuidelineHandler {
     handler: Handler;
     verticalLines: {

package/lib/handlers/GuidelineHandler.js

@@ -278,6 +278,7 @@ class GuidelineHandler {
      */
     initialize() {
         if (this.handler.guidelineOption.enabled) {
+            // @ts-ignore
             this.handler.canvas.on({
                 'before:render': this.beforeRender,
                 'after:render': this.afterRender,

package/lib/handlers/Handler.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { fabric } from 'fabric';
-import { ElementHandler, ImageHandler, ChartHandler, CropHandler, AnimationHandler, ContextmenuHandler, TooltipHandler, ZoomHandler, WorkareaHandler, TransactionHandler, LinkHandler, AlignmentHandler, GuidelineHandler, GridHandler, PortHandler, NodeHandler, EventHandler, DrawingHandler, InteractionHandler, ShortcutHandler } from '.';
-import { FabricObject, FabricImage, WorkareaObject, WorkareaOption, InteractionMode, CanvasOption, GridOption, GuidelineOption, KeyEvent, FabricObjectOption, FabricCanvas, FabricGroup, FabricObjects } from '../utils';
+import { AlignmentHandler, AnimationHandler, ChartHandler, ContextmenuHandler, CropHandler, CustomHandler, DrawingHandler, ElementHandler, EventHandler, GridHandler, GuidelineHandler, ImageHandler, InteractionHandler, LinkHandler, NodeHandler, PortHandler, ShortcutHandler, TooltipHandler, TransactionHandler, WorkareaHandler, ZoomHandler } from '.';
+import { CanvasOption, FabricCanvas, FabricGroup, FabricImage, FabricObject, FabricObjectOption, FabricObjects, GridOption, GuidelineOption, InteractionMode, KeyEvent, WorkareaObject, WorkareaOption } from '../utils';
 import { TransactionEvent } from './TransactionHandler';
 export interface HandlerCallback {
     /**
@@ -159,6 +159,9 @@ export interface HandlerOption {
      * @type {{ [key: string]: any }}
      */
     fabricObjects?: FabricObjects;
+    handlers?: {
+        [key: string]: CustomHandler;
+    };
     [key: string]: any;
 }
 export declare type HandlerOptions = HandlerOption & HandlerCallback;
@@ -220,6 +223,9 @@ declare class Handler implements HandlerOptions {
     eventHandler: EventHandler;
     drawingHandler: DrawingHandler;
     shortcutHandler: ShortcutHandler;
+    handlers: {
+        [key: string]: CustomHandler;
+    };
     objectMap: Record<string, FabricObject>;
     objects: FabricObject[];
     activeLine?: any;
@@ -605,5 +611,12 @@ declare class Handler implements HandlerOptions {
      * @param {string[]} propertiesToInclude
      */
     setPropertiesToInclude: (propertiesToInclude: string[]) => void;
+    /**
+     * Register custom handler
+     *
+     * @param {string} name
+     * @param {typeof CustomHandler} handler
+     */
+    registerHandler: (name: string, handler: typeof CustomHandler) => CustomHandler;
 }
 export default Handler;

package/lib/handlers/Handler.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
-const warning_1 = __importDefault(require("warning"));
-const uuid_1 = require("uuid");
 const lodash_1 = require("lodash");
+const uuidv4_1 = require("uuidv4");
+const warning_1 = __importDefault(require("warning"));
 const _1 = require(".");
 const CanvasObject_1 = __importDefault(require("../CanvasObject"));
 const constants_1 = require("../constants");
@@ -26,6 +26,7 @@ class Handler {
         this.keyEvent = constants_1.defaults.keyEvent;
         this.activeSelectionOption = constants_1.defaults.activeSelectionOption;
         this.fabricObjects = CanvasObject_1.default;
+        this.handlers = {};
         this.objectMap = {};
         this.zoom = 1;
         this.isCut = false;
@@ -139,8 +140,13 @@ class Handler {
             if (!activeObject) {
                 return;
             }
-            activeObject.set(key, value);
-            activeObject.setCoords();
+            if ((activeObject.type === 'svg' && key === 'fill') || key === 'stroke') {
+                activeObject._objects.forEach(obj => obj.set(key, value));
+            }
+            else {
+                activeObject.set(key, value);
+                activeObject.setCoords();
+            }
             this.canvas.requestRenderAll();
             const { id, superType, type, player, width, height } = activeObject;
             if (superType === 'element') {
@@ -298,7 +304,7 @@ class Handler {
             if (!activeObject) {
                 return;
             }
-            activeObject.setShadow(option);
+            activeObject.set('shadow', new fabric_1.fabric.Shadow(option));
             this.canvas.requestRenderAll();
             const { onModified } = this;
             if (onModified) {
@@ -464,7 +470,7 @@ class Handler {
                 this.animationHandler.play(createdObj.id);
             }
             if (createdObj.superType === 'node') {
-                createdObj.setShadow({
+                createdObj.set('shadow', {
                     color: createdObj.stroke,
                 });
             }
@@ -651,7 +657,12 @@ class Handler {
                     const activeSelection = clonedObj;
                     activeSelection.canvas = this.canvas;
                     activeSelection.forEachObject((obj) => {
-                        obj.set('id', uuid_1.v4());
+                        obj.set('id', uuidv4_1.uuid());
+                        if (obj.superType === 'node') {
+                            obj.set('shadow', {
+                                color: obj.stroke,
+                            });
+                        }
                         this.canvas.add(obj);
                         this.objects = this.getObjects();
                         if (obj.dblclick) {
@@ -665,7 +676,12 @@ class Handler {
                 }
                 else {
                     if (activeObject.id === clonedObj.id) {
-                        clonedObj.set('id', uuid_1.v4());
+                        clonedObj.set('id', uuidv4_1.uuid());
+                    }
+                    if (clonedObj.superType === 'node') {
+                        clonedObj.set('shadow', {
+                            color: clonedObj.stroke,
+                        });
                     }
                     this.canvas.add(clonedObj);
                     this.objects = this.getObjects();
@@ -697,7 +713,7 @@ class Handler {
                     cloned.set({
                         left: cloned.left + grid,
                         top: cloned.top + grid,
-                        id: uuid_1.v4(),
+                        id: uuidv4_1.uuid(),
                         evented: true,
                     });
                     this.canvas.add(cloned);
@@ -935,13 +951,13 @@ class Handler {
                 clonedObj.set({
                     left: clonedObj.left + padding,
                     top: clonedObj.top + padding,
-                    id: isCut ? clipboard.id : uuid_1.v4(),
+                    id: isCut ? clipboard.id : uuidv4_1.uuid(),
                     evented: true,
                 });
                 if (clonedObj.type === 'activeSelection') {
                     clonedObj.canvas = this.canvas;
                     clonedObj.forEachObject((obj) => {
-                        obj.set('id', isCut ? obj.id : uuid_1.v4());
+                        obj.set('id', isCut ? obj.id : uuidv4_1.uuid());
                         this.canvas.add(obj);
                         if (obj.dblclick) {
                             obj.on('mousedblclick', this.eventHandler.object.mousedblclick);
@@ -997,10 +1013,10 @@ class Handler {
             }
             fabric_1.fabric.util.loadImage(url, source => {
                 if (obj.type !== 'image') {
-                    obj.setPatternFill({
+                    obj.set('fill', new fabric_1.fabric.Pattern({
                         source,
                         repeat: 'repeat',
-                    }, null);
+                    }));
                     obj.setCoords();
                     this.canvas.renderAll();
                     return;
@@ -1237,7 +1253,7 @@ class Handler {
                     obj.top += diffTop;
                 }
                 if (obj.superType === 'element') {
-                    obj.id = uuid_1.v4();
+                    obj.id = uuidv4_1.uuid();
                 }
                 this.add(obj, false, true);
                 this.canvas.renderAll();
@@ -1266,7 +1282,7 @@ class Handler {
             }
             const group = activeObject.toGroup();
             group.set({
-                id: uuid_1.v4(),
+                id: uuidv4_1.uuid(),
                 name: 'New group',
                 type: 'group',
                 ...this.objectOption,
@@ -1595,6 +1611,16 @@ class Handler {
         this.setPropertiesToInclude = (propertiesToInclude) => {
             this.propertiesToInclude = lodash_1.union(propertiesToInclude, this.propertiesToInclude);
         };
+        /**
+         * Register custom handler
+         *
+         * @param {string} name
+         * @param {typeof CustomHandler} handler
+         */
+        this.registerHandler = (name, handler) => {
+            this.handlers[name] = new handler(this);
+            return this.handlers[name];
+        };
         this.initialize(options);
     }
     /**

package/lib/handlers/InteractionHandler.d.ts

@@ -1,5 +1,5 @@
-import Handler from './Handler';
 import { FabricObject, InteractionMode } from '../utils';
+import Handler from './Handler';
 declare type IReturnType = {
     selectable?: boolean;
     evented?: boolean;

package/lib/handlers/InteractionHandler.js

@@ -32,7 +32,12 @@ class InteractionHandler {
                         obj.hoverCursor = 'pointer';
                         return;
                     }
-                    obj.hoverCursor = 'move';
+                    if (this.handler.editable) {
+                        obj.hoverCursor = 'move';
+                    }
+                    else {
+                        obj.hoverCursor = 'pointer';
+                    }
                     obj.selectable = true;
                     obj.evented = true;
                 }

package/lib/handlers/LinkHandler.d.ts

@@ -1,6 +1,6 @@
-import Handler from './Handler';
-import { PortObject } from '../objects/Port';
 import { LinkObject } from '../objects/Link';
+import { PortObject } from '../objects/Port';
+import Handler from './Handler';
 export interface LinkOption {
     /**
      * Link Type

package/lib/handlers/LinkHandler.js

@@ -34,7 +34,7 @@ class LinkHandler {
             const toPort = { left, top };
             const fromNode = this.handler.objectMap[nodeId];
             this.handler.activeLine = new objects_1.CurvedLink(fromNode, fromPort, null, toPort, {
-                strokeWidth: 2,
+                strokeWidth: 4,
                 fill: '#999999',
                 stroke: '#999999',
                 class: 'line',