react-design-editor 0.0.33 → 0.0.37

package/lib/objects/Video.js

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

package/lib/objects/index.d.ts

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

@@ -1,400 +0,0 @@
-/// <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;
-    dashboard?: 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;
-    [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;
-}
-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

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

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

package/lib/utils/index.js

@@ -1,13 +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 __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);