react-design-editor 0.0.37 → 0.0.41

package/lib/objects/Video.js

@@ -0,0 +1,120 @@
+"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;
+                        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);
+            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

@@ -0,0 +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 Svg } from './Svg';

package/lib/objects/index.js

@@ -0,0 +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; } });
+var Svg_1 = require("./Svg");
+Object.defineProperty(exports, "Svg", { enumerable: true, get: function () { return Svg_1.default; } });

package/lib/utils/ObjectUtil.d.ts

@@ -0,0 +1,407 @@
+/// <reference types="animejs" />
+import { fabric } from 'fabric';
+import { IFilter } from '../handlers/ImageHandler';
+export declare type AnimationType = 'fade' | 'bounce' | 'shake' | 'scaling' | 'rotation' | 'flash' | 'custom' | 'none';
+export interface AnimationProperty {
+    delay?: number;
+    duration?: number;
+    autoplay?: boolean;
+    loop?: boolean | number;
+    type: AnimationType;
+    offset?: number;
+    opacity?: number;
+    bounce?: 'vertical' | 'horizontal';
+    shake?: 'vertical' | 'horizontal';
+    scale?: number;
+    angle?: number;
+    fill?: string | fabric.Pattern;
+    stroke?: string;
+}
+export interface LinkProperty {
+    enabled?: boolean;
+    type?: string;
+    state?: string;
+    [key: string]: any;
+}
+export interface TooltipProperty {
+    enabled?: boolean;
+    type?: string;
+    template?: string;
+}
+export interface TriggerProperty {
+    enabled?: boolean;
+    type?: string;
+    script?: string;
+    effect?: string;
+}
+export interface FabricCanvasOption {
+    wrapperEl?: HTMLElement;
+}
+export declare type FabricCanvas<T extends any = fabric.Canvas> = T & FabricCanvasOption;
+export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> = T & {
+    /**
+     * Object id
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Parent object id
+     * @type {string}
+     */
+    parentId?: string;
+    /**
+     * Original opacity
+     * @type {number}
+     */
+    originOpacity?: number;
+    /**
+     * Original top position
+     * @type {number}
+     */
+    originTop?: number;
+    /**
+     * Original left position
+     * @type {number}
+     */
+    originLeft?: number;
+    /**
+     * Original scale X
+     * @type {number}
+     */
+    originScaleX?: number;
+    /**
+     * Original scale Y
+     * @type {number}
+     */
+    originScaleY?: number;
+    /**
+     * Original angle
+     * @type {number}
+     */
+    originAngle?: number;
+    /**
+     * Original fill color
+     * @type {(string | fabric.Pattern)}
+     */
+    originFill?: string | fabric.Pattern;
+    /**
+     * Original stroke color
+     * @type {string}
+     */
+    originStroke?: string;
+    /**
+     * Original rotation
+     *
+     * @type {number}
+     */
+    originRotation?: number;
+    /**
+     * Object editable
+     * @type {boolean}
+     */
+    editable?: boolean;
+    /**
+     * Object Super type
+     * @type {string}
+     */
+    superType?: string;
+    /**
+     * @description
+     * @type {string}
+     */
+    description?: string;
+    /**
+     * Animation property
+     * @type {AnimationProperty}
+     */
+    animation?: AnimationProperty;
+    /**
+     * Anime instance
+     * @type {anime.AnimeInstance}
+     */
+    anime?: anime.AnimeInstance;
+    /**
+     * Tooltip property
+     * @type {TooltipProperty}
+     */
+    tooltip?: TooltipProperty;
+    /**
+     * Link property
+     * @type {LinkProperty}
+     */
+    link?: LinkProperty;
+    /**
+     * Is running animation
+     * @type {boolean}
+     */
+    animating?: boolean;
+    /**
+     * Object class
+     * @type {string}
+     */
+    class?: string;
+    /**
+     * Is possible delete
+     * @type {boolean}
+     */
+    deletable?: boolean;
+    /**
+     * Is enable double click
+     * @type {boolean}
+     */
+    dblclick?: boolean;
+    /**
+     * Is possible clone
+     * @type {boolean}
+     */
+    cloneable?: boolean;
+    /**
+     * Is locked object
+     * @type {boolean}
+     */
+    locked?: boolean;
+    /**
+     * This property replaces "angle"
+     *
+     * @type {number}
+     */
+    rotation?: number;
+    /**
+     * Whether it can be clicked
+     *
+     * @type {boolean}
+     */
+    clickable?: boolean;
+    [key: string]: any;
+};
+export declare type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
+export declare type FabricGroup = FabricObject<fabric.Group> & {
+    /**
+     * Object that config group
+     * @type {FabricObject[]}
+     */
+    objects?: FabricObject[];
+};
+export declare type FabricImage = FabricObject & fabric.Image & {
+    /**
+     * Image URL
+     * @type {string}
+     */
+    src?: string;
+    /**
+     * Image File or Blob
+     * @type {File}
+     */
+    file?: File;
+    /**
+     * Image Filter
+     * @type {IFilter[]}
+     */
+    filters?: IFilter[];
+    _element?: any;
+};
+export interface FabricElement extends FabricObject<fabric.Rect> {
+    /**
+     * Wrapped Element
+     * @type {HTMLDivElement}
+     */
+    container: HTMLDivElement;
+    /**
+     * Target Element
+     * @type {HTMLDivElement}
+     */
+    element: HTMLDivElement;
+    /**
+     * Source of Element Object
+     */
+    setSource: (source: any) => void;
+}
+export declare type WorkareaLayout = 'fixed' | 'responsive' | 'fullscreen';
+export interface WorkareaOption {
+    /**
+     * Image URL
+     * @type {string}
+     */
+    src?: string;
+    /**
+     * Image File or Blbo
+     * @type {File}
+     */
+    file?: File;
+    /**
+     * Workarea Width
+     * @type {number}
+     */
+    width?: number;
+    /**
+     * Workarea Height
+     * @type {number}
+     */
+    height?: number;
+    /**
+     * Workarea Background Color
+     * @type {string}
+     */
+    backgroundColor?: string;
+    /**
+     * Workarea Layout Type
+     * @type {WorkareaLayout}
+     */
+    layout?: WorkareaLayout;
+}
+export declare type WorkareaObject = FabricImage & {
+    /**
+     * Workarea Layout Type
+     * @type {WorkareaLayout}
+     */
+    layout?: WorkareaLayout;
+    /**
+     * Workarea Image Element
+     * @type {HTMLImageElement}
+     */
+    _element?: HTMLImageElement;
+    /**
+     * Whether exist the element
+     * @type {boolean}
+     */
+    isElement?: boolean;
+    /**
+     * Stored width in workarea
+     * @type {number}
+     */
+    workareaWidth?: number;
+    /**
+     * Stored height in workarea
+     * @type {number}
+     */
+    workareaHeight?: number;
+};
+export interface CanvasOption extends fabric.ICanvasOptions {
+    /**
+     * Unique id of Canvas
+     * @type {string}
+     */
+    id?: string;
+}
+export interface GridOption {
+    /**
+     * Whether should be enabled
+     * @type {boolean}
+     */
+    enabled?: boolean;
+    /**
+     * Grid interval
+     * @type {number}
+     */
+    grid?: number;
+    /**
+     * When had moved object, whether should adjust position on grid interval
+     * @type {boolean}
+     */
+    snapToGrid?: boolean;
+    /**
+     * Grid line color
+     *
+     * @type {string}
+     */
+    lineColor?: string;
+    /**
+     * Grid border color
+     *
+     * @type {string}
+     */
+    borderColor?: string;
+}
+export interface GuidelineOption {
+    /**
+     * When have moved object, whether should show guideline
+     * @type {boolean}
+     */
+    enabled?: boolean;
+}
+export interface KeyEvent {
+    /**
+     * Arrow key
+     * @type {boolean}
+     */
+    move?: boolean;
+    /**
+     * Ctrl + A
+     * @type {boolean}
+     */
+    all?: boolean;
+    /**
+     * Ctrl + C
+     * @type {boolean}
+     */
+    copy?: boolean;
+    /**
+     * Ctrl + P
+     * @type {boolean}
+     */
+    paste?: boolean;
+    /**
+     * Escape
+     * @type {boolean}
+     */
+    esc?: boolean;
+    /**
+     * Delete or Backspace
+     * @type {boolean}
+     */
+    del?: boolean;
+    /**
+     * When have copied object, whether should copy object option on clipboard
+     * @type {boolean}
+     */
+    clipboard?: boolean;
+    /**
+     * Ctrl + Z, Ctrl + Y
+     * @type {boolean}
+     */
+    transaction?: boolean;
+    /**
+     * Plus, Minus
+     *
+     * @type {boolean}
+     */
+    zoom?: boolean;
+    /**
+     * Ctrl + X
+     *
+     * @type {boolean}
+     */
+    cut?: boolean;
+    grab?: boolean;
+}
+export declare type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
+export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent, 'e'> {
+    e: T;
+    target?: FabricObject;
+    subTargets?: FabricObject[];
+    button?: number;
+    isClick?: boolean;
+    pointer?: fabric.Point;
+    absolutePointer?: fabric.Point;
+    transform?: {
+        corner: string;
+        original: FabricObject;
+        originX: string;
+        originY: string;
+        width: number;
+    };
+}
+export declare type FabricObjects = {
+    [key: string]: {
+        create: (...args: any) => FabricObject;
+    };
+};
+/**
+ * toObject util
+ * @param {*} obj
+ * @param {string[]} propertiesToInclude
+ * @param {{ [key: string]: any }} [properties]
+ */
+export declare const toObject: (obj: any, propertiesToInclude: string[], properties?: {
+    [key: string]: any;
+}) => any;

package/lib/utils/ObjectUtil.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toObject = void 0;
+const fabric_1 = require("fabric");
+/**
+ * toObject util
+ * @param {*} obj
+ * @param {string[]} propertiesToInclude
+ * @param {{ [key: string]: any }} [properties]
+ */
+exports.toObject = (obj, propertiesToInclude, properties) => fabric_1.fabric.util.object.extend(obj.callSuper('toObject'), propertiesToInclude.reduce((prev, property) => Object.assign(prev, {
+    [property]: obj.get(property),
+}), Object.assign({}, properties)));

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './ObjectUtil';

package/lib/utils/index.js

@@ -0,0 +1,13 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ObjectUtil"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.37",
+	"version": "0.0.41",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",