react-design-editor 0.0.31 → 0.0.35

package/lib/objects/CurvedLink.js

@@ -1,49 +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.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;
+"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

@@ -1,13 +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;
+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,55 +1,55 @@
-"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`,
+"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;
@@ -57,27 +57,28 @@ const Element = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
                         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;
+                        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

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

package/lib/objects/Gif.js

@@ -1,38 +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.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;
+"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

@@ -1,9 +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;
+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,53 +1,53 @@
-"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`,
+"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;
@@ -55,15 +55,16 @@ const Iframe = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
                         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;
+                        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

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

package/lib/objects/Line.js

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