react-design-editor 0.0.31 → 0.0.35

package/dist/react-design-editor.min.js.LICENSE.txt

@@ -25,6 +25,17 @@ object-assign
 
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
 /** @license React v0.19.1
  * scheduler.production.min.js
  *
@@ -34,7 +45,7 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.13.1
+/** @license React v16.14.0
  * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -43,7 +54,7 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.13.1
+/** @license React v16.14.0
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.

package/lib/Canvas.d.ts

@@ -1,29 +1,18 @@
-import React, { Component } 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';
-export declare type CanvasProps = HandlerOptions & {
-    responsive?: boolean;
-    style?: React.CSSProperties;
-    ref?: React.RefAttributes<Handler>;
-};
-declare class Canvas extends Component<CanvasProps> {
-    handler: Handler;
-    canvas: FabricCanvas;
-    container: React.RefObject<HTMLDivElement>;
-    private resizeObserver;
-    static defaultProps: CanvasProps;
-    state: {
-        id: string;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: CanvasProps): void;
-    componentWillUnmount(): void;
-    createObserver: () => void;
-    cancelObserver: () => void;
-    render(): JSX.Element;
-}
-export default Canvas;
+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';
+export interface CanvasInstance {
+    handler: Handler;
+    canvas: FabricCanvas;
+    container: HTMLDivElement;
+}
+export declare type CanvasProps = HandlerOptions & {
+    responsive?: boolean;
+    style?: React.CSSProperties;
+};
+declare const Canvas: React.FC<CanvasProps>;
+export default Canvas;

package/lib/Canvas.js

@@ -1,208 +1,172 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": 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 union_1 = __importDefault(require("lodash/union"));
-const Handler_1 = __importDefault(require("./handlers/Handler"));
-require("../../styles/core/canvas.less");
-require("../../styles/core/tooltip.less");
-require("../../styles/core/contextmenu.less");
-require("../../styles/fabricjs/fabricjs.less");
-const defaultCanvasOption = {
-    preserveObjectStacking: true,
-    width: 300,
-    height: 150,
-    selection: true,
-    defaultCursor: 'default',
-    backgroundColor: '#f3f3f3',
-};
-const defaultKeyboardEvent = {
-    move: true,
-    all: true,
-    copy: true,
-    paste: true,
-    esc: true,
-    del: true,
-    clipboard: false,
-    transaction: true,
-    zoom: true,
-    cut: true,
-};
-const defaultGripOption = {
-    enabled: false,
-    grid: 10,
-    snapToGrid: false,
-    lineColor: '#ebebeb',
-    borderColor: '#cccccc',
-};
-const defaultPropertiesToInclude = ['id', 'name', 'locke', 'editable'];
-class Canvas extends react_1.Component {
-    constructor() {
-        super(...arguments);
-        this.container = react_1.default.createRef();
-        this.state = {
-            id: uuid_1.v4(),
-        };
-        this.createObserver = () => {
-            this.resizeObserver = new resize_observer_polyfill_1.default((entries) => {
-                const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
-                this.handler.eventHandler.resize(width, height);
-            });
-            this.resizeObserver.observe(this.container.current);
-        };
-        this.cancelObserver = () => {
-            if (this.resizeObserver) {
-                this.resizeObserver.disconnect();
-            }
-        };
-    }
-    componentDidMount() {
-        const { editable, canvasOption, width, height, keyEvent, guidelineOption, defaultOption, responsive, propertiesToInclude, gridOption, ...other } = this.props;
-        const { id } = this.state;
-        if (responsive) {
-            this.createObserver();
-        }
-        const mergedPropertiesToInclude = union_1.default(propertiesToInclude, defaultPropertiesToInclude);
-        const mergedCanvasOption = Object.assign({}, defaultCanvasOption, canvasOption, {
-            width,
-            height,
-            selection: editable,
-        });
-        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.handler = new Handler_1.default({
-            id,
-            canvas: this.canvas,
-            container: this.container.current,
-            keyEvent: Object.assign({}, defaultKeyboardEvent, keyEvent),
-            canvasOption: mergedCanvasOption,
-            guidelineOption,
-            editable,
-            defaultOption,
-            propertiesToInclude: mergedPropertiesToInclude,
-            gridOption: Object.assign({}, defaultGripOption, gridOption),
-            ...other,
-        });
-        this.handler.gridHandler.init();
-        if (editable) {
-            this.handler.transactionHandler.init();
-            this.handler.interactionHandler.selection();
-            if (guidelineOption.enabled) {
-                this.handler.guidelineHandler.init();
-            }
-        }
-        this.handler.eventHandler.attachEventListener();
-    }
-    componentDidUpdate(prevProps) {
-        if (JSON.stringify(this.props.canvasOption) !== JSON.stringify(prevProps.canvasOption)) {
-            this.handler.canvasOption = this.props.canvasOption;
-            this.handler.canvas.setBackgroundColor(this.props.canvasOption.backgroundColor, this.canvas.renderAll.bind(this.handler.canvas));
-            const { canvasOption: { width: currentWidth, height: currentHeight }, } = this.props;
-            const { canvasOption: { width: prevWidth, height: prevHeight }, } = prevProps;
-            if (!this.props.responsive && (currentWidth !== prevWidth || currentHeight !== prevHeight)) {
-                this.handler.eventHandler.resize(currentWidth, currentHeight);
-            }
-            if (typeof this.props.canvasOption.selection === 'undefined') {
-                this.canvas.selection = true;
-            }
-            else {
-                this.canvas.selection = this.props.canvasOption.selection;
-            }
-        }
-        if (!this.props.responsive &&
-            (this.props.width !== prevProps.width || this.props.height !== prevProps.height)) {
-            this.handler.eventHandler.resize(this.props.width, this.props.height);
-        }
-        if (JSON.stringify(this.props.keyEvent) !== JSON.stringify(prevProps.keyEvent)) {
-            this.handler.keyEvent = Object.assign({}, defaultKeyboardEvent, this.props.keyEvent);
-        }
-        if (JSON.stringify(this.props.fabricObjects) !== JSON.stringify(prevProps.fabricObjects)) {
-            this.handler.fabricObjects = Object.assign({}, this.handler.fabricObjects, this.props.fabricObjects);
-        }
-        if (JSON.stringify(this.props.workareaOption) !== JSON.stringify(prevProps.workareaOption)) {
-            this.handler.workarea.set({
-                ...this.props.workareaOption,
-            });
-        }
-        if (JSON.stringify(this.props.guidelineOption) !== JSON.stringify(prevProps.guidelineOption)) {
-            if (this.props.guidelineOption.enabled) {
-                this.canvas.on({
-                    'before:render': this.handler.eventHandler.beforeRender,
-                    'after:render': this.handler.eventHandler.afterRender,
-                });
-            }
-            else {
-                this.canvas.off({
-                    'before:render': this.handler.eventHandler.beforeRender,
-                    'after:render': this.handler.eventHandler.afterRender,
-                });
-            }
-        }
-    }
-    componentWillUnmount() {
-        this.handler.eventHandler.detachEventListener();
-        this.cancelObserver();
-        this.handler.clear(true);
-        if (this.handler.tooltipHandler.tooltipEl) {
-            document.body.removeChild(this.handler.tooltipHandler.tooltipEl);
-        }
-        if (this.handler.contextmenuHandler.contextmenuEl) {
-            document.body.removeChild(this.handler.contextmenuHandler.contextmenuEl);
-        }
-    }
-    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 } },
-            react_1.default.createElement("canvas", { id: `canvas_${id}` })));
-    }
-}
-Canvas.defaultProps = {
-    id: uuid_1.v4(),
-    editable: true,
-    canvasOption: {
-        selection: true,
-    },
-    defaultOption: {},
-    activeSelection: {
-        hasControls: true,
-    },
-    tooltip: null,
-    zoomEnabled: true,
-    minZoom: 30,
-    maxZoom: 300,
-    propertiesToInclude: defaultPropertiesToInclude,
-    workareaOption: {},
-    gridOption: defaultGripOption,
-    guidelineOption: {
-        enabled: true,
-    },
-    keyEvent: {},
-    responsive: true,
-};
-exports.default = Canvas;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const fabric_1 = require("fabric");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const Handler_1 = __importDefault(require("./handlers/Handler"));
+const constants_1 = require("./constants");
+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.containerRef = react_1.default.createRef();
+        this.state = {
+            id: uuidv4_1.uuid(),
+            loaded: false,
+        };
+        this.createObserver = () => {
+            this.resizeObserver = new resize_observer_polyfill_1.default((entries) => {
+                const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
+                this.handler.eventHandler.resize(width, height);
+                if (!this.state.loaded) {
+                    this.handleLoad();
+                }
+            });
+            this.resizeObserver.observe(this.containerRef.current);
+        };
+        this.destroyObserver = () => {
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        };
+        this.handleLoad = () => {
+            this.setState({
+                loaded: true,
+            }, () => {
+                if (this.props.onLoad) {
+                    this.props.onLoad(this.handler, this.canvas);
+                }
+            });
+        };
+    }
+    componentDidMount() {
+        const { editable, canvasOption, width, height, responsive, ...other } = this.props;
+        const { id } = this.state;
+        const mergedCanvasOption = Object.assign({}, constants_1.defaults.canvasOption, canvasOption, {
+            width,
+            height,
+            selection: editable,
+        });
+        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.containerRef.current,
+            canvasOption: mergedCanvasOption,
+            ...other,
+        });
+        if (this.props.responsive) {
+            this.createObserver();
+        }
+        else {
+            this.handleLoad();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.width !== prevProps.width || this.props.height !== prevProps.height) {
+            this.handler.eventHandler.resize(this.props.width, this.props.height);
+        }
+        if (this.props.editable !== prevProps.editable) {
+            this.handler.editable = this.props.editable;
+        }
+        if (this.props.responsive !== prevProps.responsive) {
+            if (!this.props.responsive) {
+                this.destroyObserver();
+            }
+            else {
+                this.destroyObserver();
+                this.createObserver();
+            }
+        }
+        if (JSON.stringify(this.props.canvasOption) !== JSON.stringify(prevProps.canvasOption)) {
+            this.handler.setCanvasOption(this.props.canvasOption);
+        }
+        if (JSON.stringify(this.props.keyEvent) !== JSON.stringify(prevProps.keyEvent)) {
+            this.handler.setKeyEvent(this.props.keyEvent);
+        }
+        if (JSON.stringify(this.props.fabricObjects) !== JSON.stringify(prevProps.fabricObjects)) {
+            this.handler.setFabricObjects(this.props.fabricObjects);
+        }
+        if (JSON.stringify(this.props.workareaOption) !== JSON.stringify(prevProps.workareaOption)) {
+            this.handler.setWorkareaOption(this.props.workareaOption);
+        }
+        if (JSON.stringify(this.props.guidelineOption) !== JSON.stringify(prevProps.guidelineOption)) {
+            this.handler.setGuidelineOption(this.props.guidelineOption);
+        }
+        if (JSON.stringify(this.props.objectOption) !== JSON.stringify(prevProps.objectOption)) {
+            this.handler.setObjectOption(this.props.objectOption);
+        }
+        if (JSON.stringify(this.props.gridOption) !== JSON.stringify(prevProps.gridOption)) {
+            this.handler.setGridOption(this.props.gridOption);
+        }
+        if (JSON.stringify(this.props.propertiesToInclude) !== JSON.stringify(prevProps.propertiesToInclude)) {
+            this.handler.setPropertiesToInclude(this.props.propertiesToInclude);
+        }
+        if (JSON.stringify(this.props.activeSelectionOption) !== JSON.stringify(prevProps.activeSelectionOption)) {
+            this.handler.setActiveSelectionOption(this.props.activeSelectionOption);
+        }
+    }
+    componentWillUnmount() {
+        this.destroyObserver();
+        this.handler.destroy();
+    }
+    render() {
+        const { style } = this.props;
+        const { id } = this.state;
+        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}` })));
+    }
+}
+InternalCanvas.defaultProps = {
+    id: uuidv4_1.uuid(),
+    editable: true,
+    zoomEnabled: true,
+    minZoom: 30,
+    maxZoom: 300,
+    responsive: true,
+    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/CanvasObject.d.ts

@@ -1,10 +1,10 @@
-import { fabric } from 'fabric';
-export interface ObjectSchema {
-    create: (...option: any) => fabric.Object;
-}
-export interface CanvasObjectSchema {
-    [key: string]: ObjectSchema;
-}
-export declare const createCanvasObject: (objectSchema: CanvasObjectSchema) => CanvasObjectSchema;
-declare const CanvasObject: CanvasObjectSchema;
-export default CanvasObject;
+import { fabric } from 'fabric';
+export interface ObjectSchema {
+    create: (...option: any) => fabric.Object;
+}
+export interface CanvasObjectSchema {
+    [key: string]: ObjectSchema;
+}
+export declare const createCanvasObject: (objectSchema: CanvasObjectSchema) => CanvasObjectSchema;
+declare const CanvasObject: CanvasObjectSchema;
+export default CanvasObject;