react-design-editor 0.0.36 → 0.0.37

package/lib/objects/Link.js

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

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

@@ -1,271 +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.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

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

package/lib/objects/OrthogonalLink.js

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

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

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

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

@@ -1,59 +0,0 @@
-"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 = {}) {
-        const { svg, loadType } = option;
-        this.callSuper('initialize', [], option);
-        this.loadSvg(svg, loadType);
-    },
-    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));
-        }
-        else {
-            createdObj.set({
-                originX: 'center',
-                originY: 'center',
-            });
-            this.add(createdObj);
-        }
-        this.setCoords();
-        if (this.canvas) {
-            this.canvas.requestRenderAll();
-        }
-    },
-    loadSvg(svg, loadType) {
-        return new Promise(resolve => {
-            if (loadType === 'svg') {
-                fabric_1.fabric.loadSVGFromString(svg, (objects, options) => {
-                    resolve(this.addSvgElements(objects, options, svg));
-                });
-            }
-            else {
-                fabric_1.fabric.loadSVGFromURL(svg, (objects, options) => {
-                    resolve(this.addSvgElements(objects, options, 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

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