react-design-editor 0.0.37 → 0.0.41

package/lib/Canvas.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import Handler, { HandlerOptions } from './handlers/Handler';
+import './styles/canvas.less';
+import './styles/contextmenu.less';
+import './styles/fabricjs.less';
+import './styles/tooltip.less';
+import { FabricCanvas } from './utils';
+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

@@ -0,0 +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 fabric_1 = require("fabric");
+const react_1 = __importStar(require("react"));
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const uuidv4_1 = require("uuidv4");
+const constants_1 = require("./constants");
+const Handler_1 = __importDefault(require("./handlers/Handler"));
+require("./styles/canvas.less");
+require("./styles/contextmenu.less");
+require("./styles/fabricjs.less");
+require("./styles/tooltip.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

@@ -0,0 +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;

package/lib/CanvasObject.js

@@ -0,0 +1,96 @@
+"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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,22 @@
+"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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,69 @@
+"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

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

package/lib/constants/index.js

@@ -0,0 +1,26 @@
+"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

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

package/lib/handlers/AlignmentHandler.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class AlignmentHandler {
+    constructor(handler) {
+        /**
+         * Align left at selection
+         */
+        this.left = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                const activeObjectLeft = -(activeObject.width / 2);
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: activeObjectLeft,
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        /**
+         * Align center at selection
+         */
+        this.center = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: 0 - ((obj.width * obj.scaleX) / 2),
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        /**
+         * Align right at selection
+         */
+        this.right = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                const activeObjectLeft = (activeObject.width / 2);
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: activeObjectLeft - (obj.width * obj.scaleX),
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        this.handler = handler;
+    }
+}
+exports.default = AlignmentHandler;

package/lib/handlers/AnimationHandler.d.ts

@@ -0,0 +1,50 @@
+import anime from 'animejs';
+import { Handler } from '.';
+import { FabricObject } from '../utils';
+declare class AnimationHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Play the animation
+     * @param {string} id
+     * @param {boolean} [hasControls]
+     * @returns
+     */
+    play: (id: string, hasControls?: boolean) => void;
+    /**
+     * Pause the animation
+     * @param {string} id
+     * @returns
+     */
+    pause: (id: string) => void;
+    /**
+     * Stop the animation
+     * @param {string} id
+     * @param {boolean} [hasControls=true]
+     * @returns
+     */
+    stop: (id: string, hasControls?: boolean) => void;
+    /**
+     * Restart the animation
+     * @param {string} id
+     * @returns
+     */
+    restart: (id: string) => void;
+    /**
+     * Reset animation
+     *
+     * @param {FabricObject} obj
+     * @param {boolean} [hasControls=true]
+     * @returns
+     */
+    resetAnimation: (obj: FabricObject, hasControls?: boolean) => void;
+    /**
+     * Get animation option
+     *
+     * @param {FabricObject} obj
+     * @param {boolean} [hasControls]
+     * @returns
+     */
+    getAnime: (obj: FabricObject, hasControls?: boolean) => anime.AnimeInstance;
+}
+export default AnimationHandler;