react-design-editor 0.0.31 → 0.0.35

package/lib/objects/Port.d.ts

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

package/lib/objects/Video.js

@@ -1,86 +1,86 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-require("mediaelement");
-require("mediaelement/build/mediaelementplayer.min.css");
-const utils_1 = require("../utils");
-const Video = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
-    type: 'video',
-    superType: 'element',
-    hasRotatingPoint: false,
-    initialize(source, options) {
-        options = options || {};
-        this.callSuper('initialize', options);
-        if (source instanceof File) {
-            this.set({
-                file: source,
-                src: null,
-            });
-        }
-        else {
-            this.set({
-                file: null,
-                src: source,
-            });
-        }
-        this.set({
-            fill: 'rgba(255, 255, 255, 0)',
-            stroke: 'rgba(255, 255, 255, 0)',
-        });
-    },
-    setSource(source) {
-        if (source instanceof File) {
-            this.setFile(source);
-        }
-        else {
-            this.setSrc(source);
-        }
-    },
-    setFile(file) {
-        this.set({
-            file,
-            src: null,
-        });
-        const reader = new FileReader();
-        reader.onload = () => {
-            this.player.setSrc(reader.result);
-        };
-        reader.readAsDataURL(file);
-    },
-    setSrc(src) {
-        this.set({
-            file: null,
-            src,
-        });
-        this.player.setSrc(src);
-    },
-    toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
-            src: this.get('src'),
-            file: this.get('file'),
-            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, file, autoplay, muted, loop } = 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.videoElement = fabric_1.fabric.util.makeElement('video', {
-                id,
-                autoplay: editable ? false : autoplay,
-                muted: editable ? false : muted,
-                loop: editable ? false : loop,
-                preload: 'none',
-                controls: false,
-            });
-            this.element = fabric_1.fabric.util.wrapElement(this.videoElement, 'div', {
-                id: `${id}_container`,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+require("mediaelement");
+require("mediaelement/build/mediaelementplayer.min.css");
+const utils_1 = require("../utils");
+const Video = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
+    type: 'video',
+    superType: 'element',
+    hasRotatingPoint: false,
+    initialize(source, options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        if (source instanceof File) {
+            this.set({
+                file: source,
+                src: null,
+            });
+        }
+        else {
+            this.set({
+                file: null,
+                src: source,
+            });
+        }
+        this.set({
+            fill: 'rgba(255, 255, 255, 0)',
+            stroke: 'rgba(255, 255, 255, 0)',
+        });
+    },
+    setSource(source) {
+        if (source instanceof File) {
+            this.setFile(source);
+        }
+        else {
+            this.setSrc(source);
+        }
+    },
+    setFile(file) {
+        this.set({
+            file,
+            src: null,
+        });
+        const reader = new FileReader();
+        reader.onload = () => {
+            this.player.setSrc(reader.result);
+        };
+        reader.readAsDataURL(file);
+    },
+    setSrc(src) {
+        this.set({
+            file: null,
+            src,
+        });
+        this.player.setSrc(src);
+    },
+    toObject(propertiesToInclude) {
+        return utils_1.toObject(this, propertiesToInclude, {
+            src: this.get('src'),
+            file: this.get('file'),
+            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, file, autoplay, muted, loop } = 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.videoElement = fabric_1.fabric.util.makeElement('video', {
+                id,
+                autoplay: editable ? false : autoplay,
+                muted: editable ? false : muted,
+                loop: editable ? false : loop,
+                preload: 'none',
+                controls: false,
+            });
+            this.element = fabric_1.fabric.util.wrapElement(this.videoElement, 'div', {
+                id: `${id}_container`,
                 style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
                         width: ${width}px;
                         height: ${height}px;
@@ -88,32 +88,33 @@ const Video = 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);
-            this.player = new MediaElementPlayer(id, {
-                pauseOtherPlayers: false,
-                videoWidth: '100%',
-                videoHeight: '100%',
-                success: (_mediaeElement, _originalNode, instance) => {
-                    if (editable) {
-                        instance.pause();
-                    }
-                },
-            });
-            this.player.setPlayerSize(width, height);
-            if (src) {
-                this.setSrc(src);
-            }
-            else if (file) {
-                this.setFile(file);
-            }
-        }
-    },
-});
-Video.fromObject = (options, callback) => {
-    return callback(new Video(options.src || options.file, options));
-};
-window.fabric.Video = Video;
-exports.default = Video;
+                        pointer-events: ${editable ? 'none' : 'auto'};`,
+            });
+            const container = document.getElementById(this.container);
+            container.appendChild(this.element);
+            this.player = new MediaElementPlayer(id, {
+                pauseOtherPlayers: false,
+                videoWidth: '100%',
+                videoHeight: '100%',
+                success: (_mediaeElement, _originalNode, instance) => {
+                    if (editable) {
+                        instance.pause();
+                    }
+                },
+            });
+            this.player.setPlayerSize(width, height);
+            if (src) {
+                this.setSrc(src);
+            }
+            else if (file) {
+                this.setFile(file);
+            }
+        }
+    },
+});
+Video.fromObject = (options, callback) => {
+    return callback(new Video(options.src || options.file, options));
+};
+// @ts-ignore
+window.fabric.Video = Video;
+exports.default = Video;

package/lib/objects/index.d.ts

@@ -1,14 +1,15 @@
-export { default as Gif } from './Gif';
-export { default as Arrow } from './Arrow';
-export { default as Chart } from './Chart';
-export { default as Element } from './Element';
-export { default as Iframe } from './Iframe';
-export { default as Video } from './Video';
-export { default as Node } from './Node';
-export { default as Link } from './Link';
-export { default as CurvedLink } from './CurvedLink';
-export { default as OrthogonalLink } from './OrthogonalLink';
-export { default as Port } from './Port';
-export { default as Line } from './Line';
-export { default as CirclePort } from './CirclePort';
-export { default as Cube } from './Cube';
+export { default as Gif } from './Gif';
+export { default as Arrow } from './Arrow';
+export { default as Chart } from './Chart';
+export { default as Element } from './Element';
+export { default as Iframe } from './Iframe';
+export { default as Video } from './Video';
+export { default as Node } from './Node';
+export { default as Link } from './Link';
+export { default as CurvedLink } from './CurvedLink';
+export { default as OrthogonalLink } from './OrthogonalLink';
+export { default as Port } from './Port';
+export { default as Line } from './Line';
+export { default as CirclePort } from './CirclePort';
+export { default as Cube } from './Cube';
+export { default as Svg } from './Svg';

package/lib/objects/index.js

@@ -1,30 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var Gif_1 = require("./Gif");
-Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.default; } });
-var Arrow_1 = require("./Arrow");
-Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return Arrow_1.default; } });
-var Chart_1 = require("./Chart");
-Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return Chart_1.default; } });
-var Element_1 = require("./Element");
-Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Element_1.default; } });
-var Iframe_1 = require("./Iframe");
-Object.defineProperty(exports, "Iframe", { enumerable: true, get: function () { return Iframe_1.default; } });
-var Video_1 = require("./Video");
-Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.default; } });
-var Node_1 = require("./Node");
-Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return Node_1.default; } });
-var Link_1 = require("./Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.default; } });
-var CurvedLink_1 = require("./CurvedLink");
-Object.defineProperty(exports, "CurvedLink", { enumerable: true, get: function () { return CurvedLink_1.default; } });
-var OrthogonalLink_1 = require("./OrthogonalLink");
-Object.defineProperty(exports, "OrthogonalLink", { enumerable: true, get: function () { return OrthogonalLink_1.default; } });
-var Port_1 = require("./Port");
-Object.defineProperty(exports, "Port", { enumerable: true, get: function () { return Port_1.default; } });
-var Line_1 = require("./Line");
-Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return Line_1.default; } });
-var CirclePort_1 = require("./CirclePort");
-Object.defineProperty(exports, "CirclePort", { enumerable: true, get: function () { return CirclePort_1.default; } });
-var Cube_1 = require("./Cube");
-Object.defineProperty(exports, "Cube", { enumerable: true, get: function () { return Cube_1.default; } });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Gif_1 = require("./Gif");
+Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.default; } });
+var Arrow_1 = require("./Arrow");
+Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return Arrow_1.default; } });
+var Chart_1 = require("./Chart");
+Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return Chart_1.default; } });
+var Element_1 = require("./Element");
+Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Element_1.default; } });
+var Iframe_1 = require("./Iframe");
+Object.defineProperty(exports, "Iframe", { enumerable: true, get: function () { return Iframe_1.default; } });
+var Video_1 = require("./Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.default; } });
+var Node_1 = require("./Node");
+Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return Node_1.default; } });
+var Link_1 = require("./Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.default; } });
+var CurvedLink_1 = require("./CurvedLink");
+Object.defineProperty(exports, "CurvedLink", { enumerable: true, get: function () { return CurvedLink_1.default; } });
+var OrthogonalLink_1 = require("./OrthogonalLink");
+Object.defineProperty(exports, "OrthogonalLink", { enumerable: true, get: function () { return OrthogonalLink_1.default; } });
+var Port_1 = require("./Port");
+Object.defineProperty(exports, "Port", { enumerable: true, get: function () { return Port_1.default; } });
+var Line_1 = require("./Line");
+Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return Line_1.default; } });
+var CirclePort_1 = require("./CirclePort");
+Object.defineProperty(exports, "CirclePort", { enumerable: true, get: function () { return CirclePort_1.default; } });
+var Cube_1 = require("./Cube");
+Object.defineProperty(exports, "Cube", { enumerable: true, get: function () { return Cube_1.default; } });
+var Svg_1 = require("./Svg");
+Object.defineProperty(exports, "Svg", { enumerable: true, get: function () { return Svg_1.default; } });