react-design-editor 0.0.36 → 0.0.37

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

@@ -53,12 +53,3 @@ object-assign
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/** @license React v16.14.0
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.36",
+	"version": "0.0.37",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -10,10 +10,10 @@
 	],
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "npm run clean && webpack -p --config webpack.prod.js && typedoc",
-		"build:lib": "npm run tsc && webpack -p --config webpack.lib.js",
+		"build": "npm run clean && webpack --node-env production --config webpack.prod.js && typedoc",
+		"build:lib": "npm run tsc && webpack --node-env production --config webpack.lib.js",
 		"start": "npm install && npm run start:dev",
-		"start:dev": "webpack-dev-server --config webpack.dev.js --inline",
+		"start:dev": "webpack serve --config webpack.dev.js",
 		"ghpages": "npm run build && node scripts/ghpages",
 		"deploy": "npm run build:lib && npm publish",
 		"lint": "npm run tsc",
@@ -40,10 +40,9 @@
 	"homepage": "https://salgum1114.github.io/react-design-editor",
 	"peerDependencies": {
 		"animejs": "^3.0.0",
-		"fabric": "^3.4.0",
-		"react": "^16.4.1",
-		"react-dom": "^16.14.0",
-		"react-dom-factories": "^1.0.2"
+		"fabric": "^3.6.6",
+		"react": "^16.14.0",
+		"react-dom": "^16.14.0"
 	},
 	"dependencies": {
 		"animejs": "^3.0.0",
@@ -51,7 +50,7 @@
 		"classnames": "^2.2.6",
 		"color": "^3.1.2",
 		"echarts": "^4.7.0",
-		"fabric": "^3.4.0",
+		"fabric": "^3.6.6",
 		"gifler": "^0.1.0",
 		"honeycomb-grid": "^3.1.7",
 		"i18next": "^19.0.0",
@@ -59,12 +58,11 @@
 		"lodash": "^4.17.10",
 		"mediaelement": "^4.2.9",
 		"prop-types": "^15.6.2",
-		"react": "^16.4.1",
+		"react": "^16.14.0",
 		"react-ace": "^8.1.0",
 		"react-color": "^2.14.1",
 		"react-custom-scrollbars": "^4.2.1",
 		"react-dom": "^16.14.0",
-		"react-dom-factories": "^1.0.2",
 		"react-helmet": "^5.2.0",
 		"react-hot-loader": "^4.12.20",
 		"react-json-view": "^1.19.1",
@@ -80,12 +78,14 @@
 		"@babel/plugin-proposal-decorators": "^7.16.4",
 		"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
 		"@babel/plugin-proposal-private-methods": "^7.16.0",
+		"@babel/plugin-proposal-private-property-in-object": "^7.16.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/plugin-transform-runtime": "^7.16.4",
-		"@babel/polyfill": "^7.12.1",
+		"@babel/plugin-transform-typescript": "^7.16.1",
 		"@babel/preset-env": "^7.16.4",
 		"@babel/preset-react": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
+		"@hot-loader/react-dom": "^17.0.1",
 		"@types/animejs": "^3.1.0",
 		"@types/color": "^3.0.1",
 		"@types/echarts": "^4.4.6",
@@ -101,11 +101,12 @@
 		"babel-loader": "^8.1.0",
 		"babel-plugin-dynamic-import-webpack": "^1.1.0",
 		"babel-plugin-import": "^1.13.0",
+		"core-js": "^3.19.1",
 		"css-loader": "^3.5.2",
 		"del": "^5.1.0",
-		"eslint": "^6.8.0",
-		"eslint-config-airbnb": "^17.1.0",
-		"eslint-loader": "^4.0.0",
+		"eslint": "^8.3.0",
+		"eslint-config-airbnb": "^19.0.0",
+		"eslint-loader": "^4.0.2",
 		"eslint-plugin-import": "^2.20.2",
 		"eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-react": "^7.19.0",
@@ -118,15 +119,15 @@
 		"path": "^0.12.7",
 		"serve": "^11.3.0",
 		"style-loader": "^1.1.4",
-		"terser-webpack-plugin": "^2.3.5",
+		"terser-webpack-plugin": "^4.2.3",
 		"tslint": "^6.1.1",
 		"tslint-react": "^5.0.0",
 		"typedoc": "^0.17.4",
 		"typescript": "^3.9.3",
 		"url-loader": "^4.1.0",
-		"webpack": "^4.43.0",
-		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3",
+		"webpack": "^4.46.0",
+		"webpack-cli": "^4.9.1",
+		"webpack-dev-server": "^3.11.3",
 		"webpack-merge": "^4.2.2",
 		"workbox-webpack-plugin": "^5.1.2"
 	}

package/lib/Canvas.d.ts

@@ -1,18 +0,0 @@
-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,172 +0,0 @@
-"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 +0,0 @@
-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;

package/lib/CanvasObject.js

@@ -1,96 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasObject = void 0;
-const fabric_1 = require("fabric");
-const objects_1 = require("./objects");
-const Svg_1 = __importDefault(require("./objects/Svg"));
-exports.createCanvasObject = (objectSchema) => objectSchema;
-const CanvasObject = {
-    group: {
-        create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),
-    },
-    'i-text': {
-        create: ({ text, ...option }) => new fabric_1.fabric.IText(text, option),
-    },
-    textbox: {
-        create: ({ text, ...option }) => new fabric_1.fabric.Textbox(text, option),
-    },
-    triangle: {
-        create: (option) => new fabric_1.fabric.Triangle(option),
-    },
-    circle: {
-        create: (option) => new fabric_1.fabric.Circle(option),
-    },
-    rect: {
-        create: (option) => new fabric_1.fabric.Rect(option),
-    },
-    cube: {
-        create: (option) => new objects_1.Cube(option),
-    },
-    image: {
-        create: ({ element = new Image(), ...option }) => new fabric_1.fabric.Image(element, {
-            ...option,
-            crossOrigin: 'anonymous',
-        }),
-    },
-    polygon: {
-        create: ({ points, ...option }) => new fabric_1.fabric.Polygon(points, {
-            ...option,
-            perPixelTargetFind: true,
-        }),
-    },
-    line: {
-        create: ({ points, ...option }) => new objects_1.Line(points, option),
-    },
-    arrow: {
-        create: ({ points, ...option }) => new objects_1.Arrow(points, option),
-    },
-    chart: {
-        create: (option) => new objects_1.Chart(option.chartOption || {
-            xAxis: {},
-            yAxis: {},
-            series: [
-                {
-                    type: 'line',
-                    data: [
-                        [0, 1],
-                        [1, 2],
-                        [2, 3],
-                        [3, 4],
-                    ],
-                },
-            ],
-        }, option),
-    },
-    element: {
-        create: ({ code, ...option }) => new objects_1.Element(code, option),
-    },
-    iframe: {
-        create: ({ src, ...option }) => new objects_1.Iframe(src, option),
-    },
-    video: {
-        create: ({ src, file, ...option }) => new objects_1.Video(src || file, option),
-    },
-    gif: {
-        create: (option) => new objects_1.Gif(option),
-    },
-    node: {
-        create: (option) => new objects_1.Node(option),
-    },
-    link: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
-    },
-    curvedLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.CurvedLink(fromNode, fromPort, toNode, toPort, option),
-    },
-    orthogonalLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.OrthogonalLink(fromNode, fromPort, toNode, toPort, option),
-    },
-    svg: {
-        create: (option) => new Svg_1.default(option),
-    },
-};
-exports.default = CanvasObject;

package/lib/constants/code.d.ts

@@ -1,19 +0,0 @@
-export declare const ESCAPE = "Escape";
-export declare const DELETE = "Delete";
-export declare const BACKSPACE = "Backspace";
-export declare const EQUAL = "Equal";
-export declare const MINUS = "Minus";
-export declare const KEY_A = "KeyA";
-export declare const KEY_Q = "KeyQ";
-export declare const KEY_W = "KeyW";
-export declare const KEY_C = "KeyC";
-export declare const KEY_V = "KeyV";
-export declare const KEY_Z = "KeyZ";
-export declare const KEY_Y = "KeyY";
-export declare const KEY_O = "KeyO";
-export declare const KEY_P = "KeyP";
-export declare const KEY_X = "KeyX";
-export declare const ARROW_UP = "ArrowUp";
-export declare const ARROW_DOWN = "ArrowDown";
-export declare const ARROW_LEFT = "ArrowLeft";
-export declare const ARROW_RIGHT = "ArrowRight";

package/lib/constants/code.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_DOWN = exports.ARROW_UP = exports.KEY_X = exports.KEY_P = exports.KEY_O = exports.KEY_Y = exports.KEY_Z = exports.KEY_V = exports.KEY_C = exports.KEY_W = exports.KEY_Q = exports.KEY_A = exports.MINUS = exports.EQUAL = exports.BACKSPACE = exports.DELETE = exports.ESCAPE = void 0;
-exports.ESCAPE = 'Escape';
-exports.DELETE = 'Delete';
-exports.BACKSPACE = 'Backspace';
-exports.EQUAL = 'Equal';
-exports.MINUS = 'Minus';
-exports.KEY_A = 'KeyA';
-exports.KEY_Q = 'KeyQ';
-exports.KEY_W = 'KeyW';
-exports.KEY_C = 'KeyC';
-exports.KEY_V = 'KeyV';
-exports.KEY_Z = 'KeyZ';
-exports.KEY_Y = 'KeyY';
-exports.KEY_O = 'KeyO';
-exports.KEY_P = 'KeyP';
-exports.KEY_X = 'KeyX';
-exports.ARROW_UP = 'ArrowUp';
-exports.ARROW_DOWN = 'ArrowDown';
-exports.ARROW_LEFT = 'ArrowLeft';
-exports.ARROW_RIGHT = 'ArrowRight';

package/lib/constants/defaults.d.ts

@@ -1,38 +0,0 @@
-import { FabricObjectOption, WorkareaObject } from '../utils';
-export declare const canvasOption: {
-    preserveObjectStacking: boolean;
-    width: number;
-    height: number;
-    selection: boolean;
-    defaultCursor: string;
-    backgroundColor: string;
-};
-export declare const keyEvent: {
-    move: boolean;
-    all: boolean;
-    copy: boolean;
-    paste: boolean;
-    esc: boolean;
-    del: boolean;
-    clipboard: boolean;
-    transaction: boolean;
-    zoom: boolean;
-    cut: boolean;
-    grab: boolean;
-};
-export declare const gridOption: {
-    enabled: boolean;
-    grid: number;
-    snapToGrid: boolean;
-    lineColor: string;
-    borderColor: string;
-};
-export declare const workareaOption: Partial<WorkareaObject>;
-export declare const objectOption: Partial<FabricObjectOption>;
-export declare const guidelineOption: {
-    enabled: boolean;
-};
-export declare const activeSelectionOption: {
-    hasControls: boolean;
-};
-export declare const propertiesToInclude: string[];

package/lib/constants/defaults.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.propertiesToInclude = exports.activeSelectionOption = exports.guidelineOption = exports.objectOption = exports.workareaOption = exports.gridOption = exports.keyEvent = exports.canvasOption = void 0;
-exports.canvasOption = {
-    preserveObjectStacking: true,
-    width: 300,
-    height: 150,
-    selection: true,
-    defaultCursor: 'default',
-    backgroundColor: '#f3f3f3',
-};
-exports.keyEvent = {
-    move: true,
-    all: true,
-    copy: true,
-    paste: true,
-    esc: true,
-    del: true,
-    clipboard: false,
-    transaction: true,
-    zoom: true,
-    cut: true,
-    grab: true,
-};
-exports.gridOption = {
-    enabled: false,
-    grid: 10,
-    snapToGrid: false,
-    lineColor: '#ebebeb',
-    borderColor: '#cccccc',
-};
-exports.workareaOption = {
-    width: 600,
-    height: 400,
-    workareaWidth: 600,
-    workareaHeight: 400,
-    lockScalingX: true,
-    lockScalingY: true,
-    scaleX: 1,
-    scaleY: 1,
-    backgroundColor: '#fff',
-    hasBorders: false,
-    hasControls: false,
-    selectable: false,
-    lockMovementX: true,
-    lockMovementY: true,
-    hoverCursor: 'default',
-    name: '',
-    id: 'workarea',
-    type: 'image',
-    layout: 'fixed',
-    link: {},
-    tooltip: {
-        enabled: false,
-    },
-    isElement: false,
-};
-exports.objectOption = {
-    rotation: 0,
-    centeredRotation: true,
-    strokeUniform: true,
-};
-exports.guidelineOption = {
-    enabled: true,
-};
-exports.activeSelectionOption = {
-    hasControls: true,
-};
-exports.propertiesToInclude = ['id', 'name', 'locked', 'editable'];

package/lib/constants/index.d.ts

@@ -1,3 +0,0 @@
-import * as defaults from './defaults';
-import * as code from './code';
-export { defaults, code };

package/lib/constants/index.js

@@ -1,26 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.code = exports.defaults = void 0;
-const defaults = __importStar(require("./defaults"));
-exports.defaults = defaults;
-const code = __importStar(require("./code"));
-exports.code = code;

package/lib/handlers/AlignmentHandler.d.ts

@@ -1,18 +0,0 @@
-import Handler from './Handler';
-declare class AlignmentHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * Align left at selection
-     */
-    left: () => void;
-    /**
-     * Align center at selection
-     */
-    center: () => void;
-    /**
-     * Align right at selection
-     */
-    right: () => void;
-}
-export default AlignmentHandler;