react-design-editor 0.0.37 → 0.0.41

package/lib/objects/Link.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const uuidv4_1 = require("uuidv4");
+const Node_1 = require("./Node");
+const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
+    type: 'link',
+    superType: 'link',
+    initialize(fromNode, fromPort, toNode, toPort, options) {
+        options = options || {};
+        const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
+        this.callSuper('initialize', coords, options);
+        this.set({
+            strokeWidth: 4,
+            id: options.id || uuidv4_1.uuid(),
+            originX: 'center',
+            originY: 'center',
+            lockScalingX: true,
+            lockScalingY: true,
+            lockRotation: true,
+            hasRotatingPoint: false,
+            hasControls: false,
+            hasBorders: false,
+            perPixelTargetFind: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            selectable: false,
+            fromNode,
+            fromPort,
+            toNode,
+            toPort,
+        });
+    },
+    setPort(fromNode, fromPort, _toNode, toPort) {
+        if (fromNode.type === 'BroadcastNode') {
+            fromPort = fromNode.fromPort[0];
+        }
+        fromPort.links.push(this);
+        toPort.links.push(this);
+        this.setPortEnabled(fromNode, fromPort, false);
+    },
+    setPortEnabled(node, port, enabled) {
+        if (node.descriptor.outPortType !== Node_1.OUT_PORT_TYPE.BROADCAST) {
+            port.set({
+                enabled,
+                fill: enabled ? port.originFill : port.selectFill,
+            });
+        }
+        else {
+            if (node.toPort.id === port.id) {
+                return;
+            }
+            port.links.forEach((link, index) => {
+                link.set({
+                    fromPort: port,
+                    fromPortIndex: index,
+                });
+            });
+            node.set({
+                configuration: {
+                    outputCount: port.links.length,
+                },
+            });
+        }
+    },
+    toObject() {
+        return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
+            id: this.get('id'),
+            name: this.get('name'),
+            superType: this.get('superType'),
+            configuration: this.get('configuration'),
+            fromNode: this.get('fromNode'),
+            fromPort: this.get('fromPort'),
+            toNode: this.get('toNode'),
+            toPort: this.get('toPort'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        ctx.save();
+        const xDiff = this.x2 - this.x1;
+        const yDiff = this.y2 - this.y1;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
+        ctx.rotate(angle);
+        ctx.beginPath();
+        if (this.arrow) {
+            // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+            ctx.moveTo(5, 0);
+            ctx.lineTo(-5, 5);
+            ctx.lineTo(-5, -5);
+        }
+        ctx.closePath();
+        ctx.lineWidth = this.strokeWidth;
+        ctx.fillStyle = this.stroke;
+        ctx.fill();
+        ctx.restore();
+    },
+});
+Link.fromObject = (options, callback) => {
+    const { fromNode, fromPort, toNode, toPort } = options;
+    return callback(new Link(fromNode, fromPort, toNode, toPort, options));
+};
+// @ts-ignore
+window.fabric.Link = Link;
+exports.default = Link;

package/lib/objects/Node.d.ts

@@ -0,0 +1,59 @@
+import { fabric } from 'fabric';
+import { FabricObject } from '../utils';
+import { PortObject } from './Port';
+export declare const NODE_COLORS: {
+    TRIGGER: {
+        fill: string;
+        border: string;
+    };
+    LOGIC: {
+        fill: string;
+        border: string;
+    };
+    DATA: {
+        fill: string;
+        border: string;
+    };
+    ACTION: {
+        fill: string;
+        border: string;
+    };
+};
+export declare const OUT_PORT_TYPE: {
+    SINGLE: string;
+    STATIC: string;
+    DYNAMIC: string;
+    BROADCAST: string;
+    NONE: string;
+};
+export declare const DESCRIPTIONS: {
+    script: string;
+    template: string;
+    json: string;
+    cron: string;
+};
+export declare const getEllipsis: (text: string, length: number) => string;
+export declare type NodeType = 'TRIGGER' | 'LOGIC' | 'DATA' | 'ACTION';
+export interface NodeObject extends FabricObject<fabric.Group> {
+    errorFlag?: fabric.IText;
+    label?: fabric.Text;
+    toPort?: PortObject;
+    errors?: any;
+    fromPort?: PortObject[];
+    descriptor?: Record<string, any>;
+    nodeClazz?: string;
+    configuration?: Record<string, any>;
+    defaultPortOption?: () => Partial<PortObject>;
+    toPortOption?: () => Partial<PortObject>;
+    fromPortOption?: () => Partial<PortObject>;
+    createToPort?: (left: number, top: number) => PortObject;
+    createFromPort?: (left: number, top: number) => PortObject[];
+    singlePort?: (portOption: Partial<PortObject>) => PortObject[];
+    staticPort?: (portOption: Partial<PortObject>) => PortObject[];
+    dynamicPort?: (portOption: Partial<PortObject>) => PortObject[];
+    broadcastPort?: (portOption: Partial<PortObject>) => PortObject[];
+    setErrors?: (errors: any) => void;
+    duplicate?: () => NodeObject;
+}
+declare const Node: any;
+export default Node;

package/lib/objects/Node.js

@@ -0,0 +1,271 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEllipsis = exports.DESCRIPTIONS = exports.OUT_PORT_TYPE = exports.NODE_COLORS = void 0;
+const fabric_1 = require("fabric");
+const i18next_1 = __importDefault(require("i18next"));
+const uuidv4_1 = require("uuidv4");
+const Port_1 = __importDefault(require("./Port"));
+exports.NODE_COLORS = {
+    TRIGGER: {
+        fill: '#48C9B0',
+        border: '#1ABC9C',
+    },
+    LOGIC: {
+        fill: '#AF7AC5',
+        border: '#9B59B6',
+    },
+    DATA: {
+        fill: '#5DADE2',
+        border: '#3498DB',
+    },
+    ACTION: {
+        fill: '#F5B041',
+        border: 'rgb(243, 156, 18)',
+    },
+};
+exports.OUT_PORT_TYPE = {
+    SINGLE: 'SINGLE',
+    STATIC: 'STATIC',
+    DYNAMIC: 'DYNAMIC',
+    BROADCAST: 'BROADCAST',
+    NONE: 'NONE',
+};
+exports.DESCRIPTIONS = {
+    script: i18next_1.default.t('common.name'),
+    template: i18next_1.default.t('common.name'),
+    json: i18next_1.default.t('common.name'),
+    cron: i18next_1.default.t('common.name'),
+};
+exports.getEllipsis = (text, length) => {
+    if (!length) {
+        return /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(text)
+            ? text.length > 8
+                ? text.substring(0, 8).concat('...')
+                : text
+            : text.length > 15
+                ? text.substring(0, 15).concat('...')
+                : text;
+    }
+    return /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(text)
+        ? text.length > length / 2
+            ? text.substring(0, length / 2).concat('...')
+            : text
+        : text.length > length
+            ? text.substring(0, length).concat('...')
+            : text;
+};
+const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    type: 'node',
+    superType: 'node',
+    initialize(options) {
+        options = options || {};
+        const icon = new fabric_1.fabric.IText(options.icon || '\uE174', {
+            fontFamily: 'Font Awesome 5 Free',
+            fontWeight: 900,
+            fontSize: 20,
+            fill: 'rgba(255, 255, 255, 0.8)',
+        });
+        let name = 'Default Node';
+        if (options.name) {
+            name = exports.getEllipsis(options.name, 18);
+        }
+        this.label = new fabric_1.fabric.Text(name || 'Default Node', {
+            fontSize: 16,
+            fontFamily: 'polestar',
+            fontWeight: 500,
+            fill: 'rgba(255, 255, 255, 0.8)',
+        });
+        const rect = new fabric_1.fabric.Rect({
+            rx: 10,
+            ry: 10,
+            width: 200,
+            height: 40,
+            fill: options.fill || 'rgba(0, 0, 0, 0.3)',
+            stroke: options.stroke || 'rgba(0, 0, 0, 0)',
+            strokeWidth: 2,
+        });
+        this.errorFlag = new fabric_1.fabric.IText('\uf071', {
+            fontFamily: 'Font Awesome 5 Free',
+            fontWeight: 900,
+            fontSize: 14,
+            fill: 'rgba(255, 0, 0, 0.8)',
+            visible: options.errors,
+        });
+        const node = [rect, icon, this.label, this.errorFlag];
+        const option = Object.assign({}, options, {
+            id: options.id || uuidv4_1.uuid(),
+            width: 200,
+            height: 40,
+            originX: 'left',
+            originY: 'top',
+            hasRotatingPoint: false,
+            hasControls: false,
+        });
+        this.callSuper('initialize', node, option);
+        icon.set({
+            top: icon.top + 10,
+            left: icon.left + 10,
+        });
+        this.label.set({
+            top: this.label.top + this.label.height / 2 + 4,
+            left: this.label.left + 35,
+        });
+        this.errorFlag.set({
+            left: rect.left,
+            top: rect.top,
+            visible: options.errors,
+        });
+    },
+    toObject() {
+        return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
+            id: this.get('id'),
+            name: this.get('name'),
+            icon: this.get('icon'),
+            description: this.get('description'),
+            superType: this.get('superType'),
+            configuration: this.get('configuration'),
+            nodeClazz: this.get('nodeClazz'),
+            descriptor: this.get('descriptor'),
+            borderColor: this.get('borderColor'),
+            borderScaleFactor: this.get('borderScaleFactor'),
+            dblclick: this.get('dblclick'),
+            deletable: this.get('deletable'),
+            cloneable: this.get('cloneable'),
+            fromPort: this.get('fromPort'),
+            toPort: this.get('toPort'),
+        });
+    },
+    defaultPortOption() {
+        const { type } = this.descriptor;
+        return {
+            nodeId: this.id,
+            hasBorders: false,
+            hasControls: false,
+            hasRotatingPoint: false,
+            selectable: false,
+            originX: 'center',
+            originY: 'center',
+            lockScalingX: true,
+            lockScalingY: true,
+            superType: 'port',
+            originFill: 'rgba(0, 0, 0, 0.1)',
+            hoverFill: 'rgba(0, 0, 0, 0.1)',
+            selectFill: 'rgba(0, 0, 0, 0.1)',
+            fill: 'rgba(0, 0, 0, 0.1)',
+            hoverCursor: 'pointer',
+            strokeWidth: 2,
+            stroke: this.descriptor ? exports.NODE_COLORS[type].border : 'rgba(0, 0, 0, 1)',
+            width: 10,
+            height: 10,
+            links: [],
+            enabled: true,
+        };
+    },
+    toPortOption() {
+        return {
+            ...this.defaultPortOption(),
+        };
+    },
+    fromPortOption() {
+        return {
+            ...this.defaultPortOption(),
+            angle: 45,
+        };
+    },
+    createToPort(left, top) {
+        if (this.descriptor.inEnabled) {
+            this.toPort = new Port_1.default({
+                id: 'defaultInPort',
+                type: 'toPort',
+                ...this.toPortOption(),
+                left,
+                top,
+            });
+        }
+        return this.toPort;
+    },
+    createFromPort(left, top) {
+        if (this.descriptor.outPortType === exports.OUT_PORT_TYPE.BROADCAST) {
+            this.fromPort = this.broadcastPort({ ...this.fromPortOption(), left, top });
+        }
+        else if (this.descriptor.outPortType === exports.OUT_PORT_TYPE.STATIC) {
+            this.fromPort = this.staticPort({ ...this.fromPortOption(), left, top });
+        }
+        else if (this.descriptor.outPortType === exports.OUT_PORT_TYPE.DYNAMIC) {
+            this.fromPort = this.dynamicPort({ ...this.fromPortOption(), left, top });
+        }
+        else if (this.descriptor.outPortType === exports.OUT_PORT_TYPE.NONE) {
+            this.fromPort = [];
+        }
+        else {
+            this.fromPort = this.singlePort({ ...this.fromPortOption(), left, top });
+        }
+        return this.fromPort;
+    },
+    singlePort(portOption) {
+        const fromPort = new Port_1.default({
+            id: 'defaultFromPort',
+            type: 'fromPort',
+            ...portOption,
+        });
+        return [fromPort];
+    },
+    staticPort(portOption) {
+        return this.descriptor.outPorts.map((outPort, i) => {
+            return new Port_1.default({
+                id: outPort,
+                type: 'fromPort',
+                ...portOption,
+                left: i === 0 ? portOption.left - 20 : portOption.left + 20,
+                top: portOption.top,
+                leftDiff: i === 0 ? -20 : 20,
+                fill: i === 0 ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)',
+                originFill: i === 0 ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)',
+                hoverFill: i === 0 ? 'rgba(0, 255, 0, 1)' : 'rgba(255, 0, 0, 1)',
+            });
+        });
+    },
+    dynamicPort(_portOption) {
+        return [];
+    },
+    broadcastPort(portOption) {
+        return this.singlePort(portOption);
+    },
+    setErrors(errors) {
+        this.set({
+            errors,
+        });
+        if (errors) {
+            this.errorFlag.set({
+                visible: true,
+            });
+        }
+        else {
+            this.errorFlag.set({
+                visible: false,
+            });
+        }
+    },
+    duplicate() {
+        const options = this.toObject();
+        options.id = uuidv4_1.uuid();
+        options.name = `${options.name}_clone`;
+        return new Node(options);
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+    },
+});
+Node.fromObject = (options, callback) => {
+    return callback(new Node(options));
+};
+// @ts-ignore
+window.fabric.FromPort = Port_1.default;
+// @ts-ignore
+window.fabric.ToPort = Port_1.default;
+// @ts-ignore
+window.fabric.Node = Node;
+exports.default = Node;

package/lib/objects/OrthogonalLink.d.ts

@@ -0,0 +1,2 @@
+declare const OrthogonalLink: any;
+export default OrthogonalLink;

package/lib/objects/OrthogonalLink.js

@@ -0,0 +1,54 @@
+"use strict";
+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 Link_1 = __importDefault(require("./Link"));
+const OrthogonalLink = fabric_1.fabric.util.createClass(Link_1.default, {
+    type: 'OrthogonalLink',
+    superType: 'link',
+    initialize(fromNode, fromPort, toNode, toPort, options) {
+        options = options || {};
+        this.callSuper('initialize', fromNode, fromPort, toNode, toPort, options);
+    },
+    _render(ctx) {
+        // Drawing orthogonal link
+        const { x1, y1, x2, y2 } = this;
+        ctx.lineWidth = this.strokeWidth;
+        ctx.strokeStyle = this.stroke;
+        const fp = { x: (x1 - x2) / 2, y: (y1 - y2) / 2 };
+        const sp = { x: (x2 - x1) / 2, y: (y2 - y1) / 2 };
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        ctx.moveTo(fp.x, fp.y);
+        ctx.lineTo(fp.x, sp.y / 2);
+        ctx.lineTo(sp.x, sp.y / 2);
+        ctx.lineTo(sp.x, sp.y);
+        ctx.stroke();
+        ctx.save();
+        const xDiff = this.x2 - this.x1;
+        const yDiff = this.y2 - this.y1;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
+        ctx.rotate(angle >= 0 ? 1.57 : -1.57);
+        ctx.beginPath();
+        if (this.arrow) {
+            // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+            ctx.moveTo(5, 0);
+            ctx.lineTo(-5, 5);
+            ctx.lineTo(-5, -5);
+        }
+        ctx.closePath();
+        ctx.fillStyle = this.stroke;
+        ctx.fill();
+        ctx.restore();
+    },
+});
+OrthogonalLink.fromObject = (options, callback) => {
+    const { fromNode, fromPort, toNode, toPort } = options;
+    return callback(new OrthogonalLink(fromNode, fromPort, toNode, toPort, options));
+};
+// @ts-ignore
+window.fabric.OrthogonalLink = OrthogonalLink;
+exports.default = OrthogonalLink;

package/lib/objects/Port.d.ts

@@ -0,0 +1,12 @@
+import { fabric } from 'fabric';
+import { FabricObject } from '../utils';
+import { LinkObject } from './Link';
+export interface PortObject extends FabricObject<fabric.Rect> {
+    links?: LinkObject[];
+    nodeId?: string;
+    enabled?: boolean;
+    hoverFill?: string;
+    selectFill?: string;
+}
+declare const Port: any;
+export default Port;

package/lib/objects/Port.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const Port = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
+    type: 'port',
+    superType: 'port',
+    initialize(options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+    },
+    toObject() {
+        return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
+            id: this.get('id'),
+            superType: this.get('superType'),
+            enabled: this.get('enabled'),
+            nodeId: this.get('nodeId'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+    },
+});
+Port.fromObject = (options, callback) => {
+    return callback(new Port(options));
+};
+// @ts-ignore
+window.fabric.Port = Port;
+exports.default = Port;

package/lib/objects/Svg.d.ts

@@ -0,0 +1,8 @@
+import { FabricGroup, FabricObject, FabricObjectOption } from '../utils';
+export declare type SvgObject = FabricGroup | FabricObject;
+export interface SvgOption extends FabricObjectOption {
+    svg?: string;
+    loadType?: 'file' | 'svg';
+}
+declare const Svg: any;
+export default Svg;

package/lib/objects/Svg.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const utils_1 = require("../utils");
+const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    type: 'svg',
+    initialize(option = {}) {
+        this.callSuper('initialize', [], option);
+        this.loadSvg(option);
+    },
+    addSvgElements(objects, options, path) {
+        const createdObj = fabric_1.fabric.util.groupSVGElements(objects, options, path);
+        this.set(options);
+        if (createdObj.getObjects) {
+            createdObj.getObjects().forEach(obj => {
+                this.add(obj);
+                if (options.fill) {
+                    obj.set('fill', options.fill);
+                }
+                if (options.stroke) {
+                    obj.set('stroke', options.stroke);
+                }
+            });
+        }
+        else {
+            createdObj.set({
+                originX: 'center',
+                originY: 'center',
+            });
+            if (options.fill) {
+                createdObj.set({
+                    fill: options.fill,
+                });
+            }
+            if (options.stroke) {
+                createdObj.set({
+                    stroke: options.stroke,
+                });
+            }
+            this.add(createdObj);
+        }
+        this.setCoords();
+        if (this.canvas) {
+            this.canvas.requestRenderAll();
+        }
+    },
+    loadSvg(option) {
+        const { svg, loadType, fill, stroke } = option;
+        return new Promise(resolve => {
+            if (loadType === 'svg') {
+                fabric_1.fabric.loadSVGFromString(svg, (objects, options) => {
+                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+                });
+            }
+            else {
+                fabric_1.fabric.loadSVGFromURL(svg, (objects, options) => {
+                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+                });
+            }
+        });
+    },
+    toObject(propertiesToInclude) {
+        return utils_1.toObject(this, propertiesToInclude, {
+            svg: this.get('svg'),
+            loadType: this.get('loadType'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+    },
+});
+Svg.fromObject = (option, callback) => {
+    return callback(new Svg(option));
+};
+// @ts-ignore
+window.fabric.Svg = Svg;
+exports.default = Svg;

package/lib/objects/Video.d.ts

@@ -0,0 +1,14 @@
+import 'mediaelement';
+import 'mediaelement/build/mediaelementplayer.min.css';
+import { FabricElement } from '../utils';
+export interface VideoObject extends FabricElement {
+    setSource: (source: string | File) => void;
+    setFile: (file: File) => void;
+    setSrc: (src: string) => void;
+    file?: File;
+    src?: string;
+    videoElement?: HTMLVideoElement;
+    player?: any;
+}
+declare const Video: any;
+export default Video;