react-design-editor 0.0.33 → 0.0.37

package/lib/objects/Arrow.js

@@ -1,39 +0,0 @@
-"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));
-};
-window.fabric.Arrow = Arrow;
-exports.default = Arrow;

package/lib/objects/Chart.d.ts

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

@@ -1,123 +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 });
-const fabric_1 = require("fabric");
-const echarts = __importStar(require("echarts"));
-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));
-};
-window.fabric.Chart = Chart;
-exports.default = Chart;

package/lib/objects/CirclePort.d.ts

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

package/lib/objects/CirclePort.js

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

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

package/lib/objects/Cube.js

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

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

package/lib/objects/CurvedLink.js

@@ -1,49 +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 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.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));
-};
-window.fabric.CurvedLink = CurvedLink;
-exports.default = CurvedLink;

package/lib/objects/Element.d.ts

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

@@ -1,83 +0,0 @@
-"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));
-};
-window.fabric.Element = Element;
-exports.default = Element;

package/lib/objects/Gif.d.ts

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

package/lib/objects/Gif.js

@@ -1,38 +0,0 @@
-"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.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));
-};
-window.fabric.Gif = Gif;
-exports.default = Gif;

package/lib/objects/Iframe.d.ts

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

@@ -1,69 +0,0 @@
-"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));
-};
-window.fabric.Iframe = Iframe;
-exports.default = Iframe;

package/lib/objects/Line.d.ts

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

package/lib/objects/Line.js

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

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