react-design-editor 0.0.37 → 0.0.41

package/lib/objects/Arrow.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const Arrow = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
+    type: 'arrow',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _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();
+        // 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();
+    },
+});
+Arrow.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new Arrow([x1, y1, x2, y2], options));
+};
+// @ts-ignore
+window.fabric.Arrow = Arrow;
+exports.default = Arrow;

package/lib/objects/Chart.d.ts

@@ -0,0 +1,10 @@
+import * as echarts from 'echarts';
+import { FabricElement } from '../utils';
+export interface ChartObject extends FabricElement {
+    setSource: (source: echarts.EChartOption) => void;
+    setChartOption: (chartOption: echarts.EChartOption) => void;
+    chartOption: echarts.EChartOption;
+    instance: echarts.ECharts;
+}
+declare const Chart: any;
+export default Chart;

package/lib/objects/Chart.js

@@ -0,0 +1,124 @@
+"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 });
+const echarts = __importStar(require("echarts"));
+const fabric_1 = require("fabric");
+const utils_1 = require("../utils");
+const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
+    type: 'chart',
+    superType: 'element',
+    hasRotatingPoint: false,
+    initialize(chartOption, options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        this.set({
+            chartOption,
+            fill: 'rgba(255, 255, 255, 0)',
+            stroke: 'rgba(255, 255, 255, 0)',
+        });
+    },
+    setSource(source) {
+        if (typeof source === 'string') {
+            this.setChartOptionStr(source);
+        }
+        else {
+            this.setChartOption(source);
+        }
+    },
+    setChartOptionStr(chartOptionStr) {
+        this.set({
+            chartOptionStr,
+        });
+    },
+    setChartOption(chartOption) {
+        this.set({
+            chartOption,
+        });
+        this.distroyChart();
+        this.createChart(chartOption);
+    },
+    createChart(chartOption) {
+        this.instance = echarts.init(this.element);
+        if (!chartOption) {
+            this.instance.setOption({
+                xAxis: {},
+                yAxis: {},
+                series: [
+                    {
+                        type: 'line',
+                        data: [
+                            [0, 1],
+                            [1, 2],
+                            [2, 3],
+                            [3, 4],
+                        ],
+                    },
+                ],
+            });
+        }
+        else {
+            this.instance.setOption(chartOption);
+        }
+    },
+    distroyChart() {
+        if (this.instance) {
+            this.instance.dispose();
+        }
+    },
+    toObject(propertiesToInclude) {
+        return utils_1.toObject(this, propertiesToInclude, {
+            chartOption: this.get('chartOption'),
+            container: this.get('container'),
+            editable: this.get('editable'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        if (!this.instance) {
+            const { id, scaleX, scaleY, width, height, angle, editable, chartOption } = this;
+            const zoom = this.canvas.getZoom();
+            const left = this.calcCoords().tl.x;
+            const top = this.calcCoords().tl.y;
+            const padLeft = (width * scaleX * zoom - width) / 2;
+            const padTop = (height * scaleY * zoom - height) / 2;
+            this.element = fabric_1.fabric.util.makeElement('div', {
+                id: `${id}_container`,
+                style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
+                        width: ${width}px;
+                        height: ${height}px;
+                        left: ${left + padLeft}px;
+                        top: ${top + padTop}px;
+                        position: absolute;
+                        user-select: ${editable ? 'none' : 'auto'};
+                        pointer-events: ${editable ? 'none' : 'auto'};`,
+            });
+            this.createChart(chartOption);
+            const container = document.getElementById(this.container);
+            container.appendChild(this.element);
+        }
+    },
+});
+Chart.fromObject = (options, callback) => {
+    return callback(new Chart(options.chartOption, options));
+};
+// @ts-ignore
+window.fabric.Chart = Chart;
+exports.default = Chart;

package/lib/objects/CirclePort.d.ts

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

package/lib/objects/CirclePort.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const CirclePort = fabric_1.fabric.util.createClass(fabric_1.fabric.Circle, {
+    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);
+    },
+});
+CirclePort.fromObject = (options, callback) => {
+    return callback(new CirclePort(options));
+};
+// @ts-ignore
+window.fabric.CirclePort = CirclePort;
+exports.default = CirclePort;

package/lib/objects/Cube.d.ts

@@ -0,0 +1,5 @@
+import { FabricObject } from '../utils';
+export interface CubeObject extends FabricObject {
+}
+declare const Cube: any;
+export default Cube;

package/lib/objects/Cube.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const Cube = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
+    type: 'cube',
+    superType: 'shape',
+    initialize(options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+    },
+    shadeColor(color, percent) {
+        color = color.substr(1);
+        const num = parseInt(color, 16);
+        const amt = Math.round(2.55 * percent);
+        const R = (num >> 16) + amt;
+        const G = ((num >> 8) & 0x00ff) + amt;
+        const B = (num & 0x0000ff) + amt;
+        return ('#' +
+            (0x1000000 +
+                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+                (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+                (B < 255 ? (B < 1 ? 0 : B) : 255))
+                .toString(16)
+                .slice(1));
+    },
+    _render(ctx) {
+        const { width, height, fill } = this;
+        const wx = width / 2;
+        const wy = width / 2;
+        const h = height / 2;
+        const x = 0;
+        const y = wy;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x - wx, y - wx * 0.5);
+        ctx.lineTo(x - wx, y - h - wx * 0.5);
+        ctx.lineTo(x, y - h * 1);
+        ctx.closePath();
+        ctx.fillStyle = this.shadeColor(fill, -10);
+        ctx.strokeStyle = fill;
+        ctx.stroke();
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + wy, y - wy * 0.5);
+        ctx.lineTo(x + wy, y - h - wy * 0.5);
+        ctx.lineTo(x, y - h * 1);
+        ctx.closePath();
+        ctx.fillStyle = this.shadeColor(fill, 10);
+        ctx.strokeStyle = this.shadeColor(fill, 50);
+        ctx.stroke();
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(x, y - h);
+        ctx.lineTo(x - wx, y - h - wx * 0.5);
+        ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
+        ctx.lineTo(x + wy, y - h - wy * 0.5);
+        ctx.closePath();
+        ctx.fillStyle = this.shadeColor(fill, 20);
+        ctx.strokeStyle = this.shadeColor(fill, 60);
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    },
+});
+Cube.fromObject = (options, callback) => {
+    return callback(new Cube(options));
+};
+// @ts-ignore
+window.fabric.Cube = Cube;
+exports.default = Cube;

package/lib/objects/CurvedLink.d.ts

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

package/lib/objects/CurvedLink.js

@@ -0,0 +1,51 @@
+"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 CurvedLink = fabric_1.fabric.util.createClass(Link_1.default, {
+    type: 'curvedLink',
+    superType: 'link',
+    initialize(fromNode, fromPort, toNode, toPort, options) {
+        options = options || {};
+        this.callSuper('initialize', fromNode, fromPort, toNode, toPort, options);
+    },
+    _render(ctx) {
+        // Drawing curved 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.beginPath();
+        ctx.moveTo(fp.x, fp.y);
+        ctx.bezierCurveTo(fp.x, sp.y, sp.x, fp.y, sp.x, sp.y);
+        ctx.stroke();
+        ctx.save();
+        const xDiff = x2 - x1;
+        const yDiff = y2 - y1;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate((x2 - x1) / 2, (y2 - 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();
+    },
+});
+CurvedLink.fromObject = (options, callback) => {
+    const { fromNode, fromPort, toNode, toPort } = options;
+    return callback(new CurvedLink(fromNode, fromPort, toNode, toPort, options));
+};
+// @ts-ignore
+window.fabric.CurvedLink = CurvedLink;
+exports.default = CurvedLink;

package/lib/objects/Element.d.ts

@@ -0,0 +1,13 @@
+import { FabricElement } from '../utils';
+export interface Code {
+    html: string;
+    css: string;
+    js: string;
+}
+export interface ElementObject extends FabricElement {
+    setSource: (source: Code) => void;
+    setCode: (code: Code) => void;
+    code: Code;
+}
+declare const Element: any;
+export default Element;

package/lib/objects/Element.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const utils_1 = require("../utils");
+const initialCode = {
+    html: '',
+    css: '',
+    js: '',
+};
+const Element = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
+    type: 'element',
+    superType: 'element',
+    hasRotatingPoint: false,
+    initialize(code = initialCode, options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        this.set({
+            code,
+            fill: 'rgba(255, 255, 255, 0)',
+            stroke: 'rgba(255, 255, 255, 0)',
+        });
+    },
+    setSource(source) {
+        this.setCode(source);
+    },
+    setCode(code = initialCode) {
+        this.set({
+            code,
+        });
+        const { css, js, html } = code;
+        this.styleEl.innerHTML = css;
+        this.scriptEl.innerHTML = js;
+        this.element.innerHTML = html;
+    },
+    toObject(propertiesToInclude) {
+        return utils_1.toObject(this, propertiesToInclude, {
+            code: this.get('code'),
+            container: this.get('container'),
+            editable: this.get('editable'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        if (!this.element) {
+            const { id, scaleX, scaleY, width, height, angle, editable, code } = this;
+            const zoom = this.canvas.getZoom();
+            const left = this.calcCoords().tl.x;
+            const top = this.calcCoords().tl.y;
+            const padLeft = (width * scaleX * zoom - width) / 2;
+            const padTop = (height * scaleY * zoom - height) / 2;
+            this.element = fabric_1.fabric.util.makeElement('div', {
+                id: `${id}_container`,
+                style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
+                        width: ${width}px;
+                        height: ${height}px;
+                        left: ${left + padLeft}px;
+                        top: ${top + padTop}px;
+                        position: absolute;
+                        user-select: ${editable ? 'none' : 'auto'};
+                        pointer-events: ${editable ? 'none' : 'auto'};`,
+            });
+            const { html, css, js } = code;
+            this.styleEl = document.createElement('style');
+            this.styleEl.id = `${id}_style`;
+            this.styleEl.type = 'text/css';
+            this.styleEl.innerHTML = css;
+            document.head.appendChild(this.styleEl);
+            this.scriptEl = document.createElement('script');
+            this.scriptEl.id = `${id}_script`;
+            this.scriptEl.type = 'text/javascript';
+            this.scriptEl.innerHTML = js;
+            document.head.appendChild(this.scriptEl);
+            const container = document.getElementById(this.container);
+            container.appendChild(this.element);
+            this.element.innerHTML = html;
+        }
+    },
+});
+Element.fromObject = (options, callback) => {
+    return callback(new Element(options.code, options));
+};
+// @ts-ignore
+window.fabric.Element = Element;
+exports.default = Element;

package/lib/objects/Gif.d.ts

@@ -0,0 +1,3 @@
+import 'gifler';
+declare const Gif: any;
+export default Gif;

package/lib/objects/Gif.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+require("gifler");
+const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
+    type: 'gif',
+    superType: 'image',
+    gifCanvas: null,
+    isStarted: false,
+    initialize(options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        this.gifCanvas = document.createElement('canvas');
+    },
+    drawFrame(ctx, frame) {
+        // update canvas size
+        this.gifCanvas.width = frame.width;
+        this.gifCanvas.height = frame.height;
+        // update canvas that we are using for fabric.js
+        ctx.drawImage(frame.buffer, -frame.width / 2, -frame.height / 2, frame.width, frame.height);
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        if (!this.isStarted) {
+            this.isStarted = true;
+            window
+                // @ts-ignore
+                .gifler('./images/sample/earth.gif')
+                .frames(this.gifCanvas, (_c, frame) => {
+                this.isStarted = true;
+                this.drawFrame(ctx, frame);
+            });
+        }
+    },
+});
+Gif.fromObject = (options, callback) => {
+    return callback(new Gif(options));
+};
+// @ts-ignore
+window.fabric.Gif = Gif;
+exports.default = Gif;

package/lib/objects/Iframe.d.ts

@@ -0,0 +1,9 @@
+import { FabricElement } from '../utils';
+export interface IframeObject extends FabricElement {
+    setSource: (source: string) => void;
+    setSrc: (src: string) => void;
+    src: string;
+    iframeElement: HTMLIFrameElement;
+}
+declare const Iframe: any;
+export default Iframe;

package/lib/objects/Iframe.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const utils_1 = require("../utils");
+const Iframe = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
+    type: 'iframe',
+    superType: 'element',
+    hasRotatingPoint: false,
+    initialize(src = '', options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        this.set({
+            src,
+            fill: 'rgba(255, 255, 255, 0)',
+            stroke: 'rgba(255, 255, 255, 0)',
+        });
+    },
+    setSource(source) {
+        this.setSrc(source);
+    },
+    setSrc(src) {
+        this.set({
+            src,
+        });
+        this.iframeElement.src = src;
+    },
+    toObject(propertiesToInclude) {
+        return utils_1.toObject(this, propertiesToInclude, {
+            src: this.get('src'),
+            container: this.get('container'),
+            editable: this.get('editable'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        if (!this.element) {
+            const { id, scaleX, scaleY, width, height, angle, editable, src } = this;
+            const zoom = this.canvas.getZoom();
+            const left = this.calcCoords().tl.x;
+            const top = this.calcCoords().tl.y;
+            const padLeft = (width * scaleX * zoom - width) / 2;
+            const padTop = (height * scaleY * zoom - height) / 2;
+            this.iframeElement = fabric_1.fabric.util.makeElement('iframe', {
+                id,
+                src,
+                width: '100%',
+                height: '100%',
+            });
+            this.element = fabric_1.fabric.util.wrapElement(this.iframeElement, 'div', {
+                id: `${id}_container`,
+                style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
+                        width: ${width}px;
+                        height: ${height}px;
+                        left: ${left + padLeft}px;
+                        top: ${top + padTop}px;
+                        position: absolute;
+                        user-select: ${editable ? 'none' : 'auto'};
+                        pointer-events: ${editable ? 'none' : 'auto'};`,
+            });
+            const container = document.getElementById(this.container);
+            container.appendChild(this.element);
+        }
+    },
+});
+Iframe.fromObject = (options, callback) => {
+    return callback(new Iframe(options.src, options));
+};
+// @ts-ignore
+window.fabric.Iframe = Iframe;
+exports.default = Iframe;

package/lib/objects/Line.d.ts

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

package/lib/objects/Line.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const Line = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
+    type: 'line',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+    },
+});
+Line.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new Line([x1, y1, x2, y2], options));
+};
+window.fabric.Line = Line;
+exports.default = Line;

package/lib/objects/Link.d.ts

@@ -0,0 +1,15 @@
+import { fabric } from 'fabric';
+import { FabricObject } from '../utils';
+import { NodeObject } from './Node';
+import { PortObject } from './Port';
+export interface LinkObject extends FabricObject<fabric.Line> {
+    fromNode?: NodeObject;
+    toNode?: NodeObject;
+    fromPort?: PortObject;
+    toPort?: PortObject;
+    fromPortIndex?: number;
+    setPort?: (fromNode: NodeObject, fromPort: PortObject, toNode: NodeObject, toPort: PortObject) => void;
+    setPortEnabled?: (node: NodeObject, port: PortObject, enabled: boolean) => void;
+}
+declare const Link: any;
+export default Link;