vue-poster-editor/lib/editor-core.js

A poster editor based on Vue.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _debounce2 = require('lodash/debounce');

var _debounce3 = _interopRequireDefault(_debounce2);

var _pickBy2 = require('lodash/pickBy');

var _pickBy3 = _interopRequireDefault(_pickBy2);

var _defaults2 = require('lodash/defaults');

var _defaults3 = _interopRequireDefault(_defaults2);

var _forEachRight2 = require('lodash/forEachRight');

var _forEachRight3 = _interopRequireDefault(_forEachRight2);

var _isUndefined2 = require('lodash/isUndefined');

var _isUndefined3 = _interopRequireDefault(_isUndefined2);

var _isNumber2 = require('lodash/isNumber');

var _isNumber3 = _interopRequireDefault(_isNumber2);

var _assign2 = require('lodash/assign');

var _assign3 = _interopRequireDefault(_assign2);

var _defaultsDeep2 = require('lodash/defaultsDeep');

var _defaultsDeep3 = _interopRequireDefault(_defaultsDeep2);

var _forEach2 = require('lodash/forEach');

var _forEach3 = _interopRequireDefault(_forEach2);

var _merge2 = require('lodash/merge');

var _merge3 = _interopRequireDefault(_merge2);

var _cloneDeep2 = require('lodash/cloneDeep');

var _cloneDeep3 = _interopRequireDefault(_cloneDeep2);

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _bluebird = require('bluebird');

var _bluebird2 = _interopRequireDefault(_bluebird);

var _stateshot = require('stateshot');

var _editorDefaults = require('./editor-defaults');

var _editorDefaults2 = _interopRequireDefault(_editorDefaults);

var _utils = require('./utils/utils');

var _utils2 = _interopRequireDefault(_utils);

var _elementUseModel = require('./utils/element-use-model');

var _config = require('./utils/rich-text/config');

var _snapshotRules = require('./utils/snapshot-rules');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

exports.default = {
    props: ['editorOptions'],
    data: function data() {
        return {
            version: _editorDefaults2.default.version,

            type: 'poster',

            supportTypes: ['text', 'image', 'svg', 'mask', 'group'],

            layouts: [],

            innerProps: {
                options: (0, _cloneDeep3.default)(_editorDefaults2.default.options),
                global: (0, _merge3.default)({}, _editorDefaults2.default.global, _editorDefaults2.default.globalExts),
                currentLayout: null,
                currentElement: null,
                currentSubElement: null,
                selector: null,
                snapshotSize: 0,
                snapshotable: true
            },

            clipboard: [],

            snapshotSize: 0,
            hasRedo: false,
            hasUndo: false
        };
    },

    computed: {
        options: {
            get: function get() {
                return this.innerProps.options;
            },
            set: function set(options) {
                var _this = this;

                (0, _forEach3.default)(options, function (val, k) {
                    _this.innerProps.options[k] = val;
                });
            }
        },
        global: {
            get: function get() {
                return this.innerProps.global;
            },
            set: function set(global) {
                global = (0, _defaultsDeep3.default)(global, _editorDefaults2.default.global, _editorDefaults2.default.globalExts);

                global.$draging = false;

                this.innerProps.global = global;
            }
        },

        currentLayout: {
            get: function get() {
                return this.innerProps.currentLayout;
            },
            set: function set(layout) {
                this.innerProps.currentLayout = layout;
            }
        },

        currentElement: {
            get: function get() {
                return this.innerProps.currentElement;
            },
            set: function set(element) {
                var innerProps = this.innerProps;

                if (element !== innerProps.currentElement) {
                    innerProps.currentElement = element;

                    this.currentSubElement = null;
                }
            }
        },

        currentSubElement: {
            get: function get() {
                return this.innerProps.currentSubElement;
            },
            set: function set(element) {
                var innerProps = this.innerProps;
                var lastSubElement = innerProps.currentSubElement;

                if (lastSubElement) {
                    lastSubElement.$selected = false;
                }

                if (element) {
                    element.$selected = true;
                }

                innerProps.currentSubElement = element;
            }
        },

        mode: {
            get: function get() {
                return this.options.mode;
            },
            set: function set(mode) {
                var supportModes = ['design', 'preview', 'mirror', 'flow'];

                if (supportModes.indexOf(mode) === -1) {
                    mode = 'design';
                }

                this.options.mode = mode;
            }
        },

        zoom: {
            get: function get() {
                return this.global.zoom || 1;
            },
            set: function set(zoom) {
                this.global.zoom = zoom;
            }
        },

        height: {
            get: function get() {
                if (this.mode === 'flow') {
                    return this.layouts.reduce(function (prev, next) {
                        return prev + next.height;
                    }, 0);
                }

                var currentLayout = this.currentLayout;
                if (!currentLayout) {
                    return 0;
                }

                return currentLayout.height;
            },
            set: function set(height) {
                var currentLayout = this.currentLayout;
                if (currentLayout) {
                    currentLayout.height = height;

                    this.makeSnapshot('resize_layout');
                }
            }
        },

        width: {
            get: function get() {
                var currentLayout = this.currentLayout;
                if (!currentLayout) {
                    return 0;
                }

                return currentLayout.width;
            },
            set: function set(width) {
                var currentLayout = this.currentLayout;
                if (currentLayout) {
                    currentLayout.width = width;

                    this.makeSnapshot('resize_layout');
                }
            }
        },

        editable: function editable() {
            return this.mode === 'design' || this.mode === 'flow';
        },

        selector: {
            get: function get() {
                return this.innerProps.selector;
            },
            set: function set(val) {
                this.innerProps.selector = val;
            }
        },

        selectedElements: function selectedElements() {
            return this.getSelectedElements();
        }
    },

    methods: {
        setMode: function setMode(mode) {
            this.mode = mode;
        },
        setOptions: function setOptions(options) {
            var defaultOpionts = (0, _cloneDeep3.default)(_editorDefaults2.default.options);

            options = (0, _assign3.default)({}, defaultOpionts, this.options, options);

            options.fontsMap = options.fontList.reduceRight(function (ret, item) {
                ret[item.name] = item;

                if (item.family) {
                    ret[item.family] = item;
                }

                return ret;
            }, {});

            this.innerProps.options = options;
        },
        checkVersion: function checkVersion(v) {
            var selfVer = _utils.version.parse(this.version);
            var targetVer = _utils.version.parse(v);

            return selfVer.major >= targetVer.major;
        },
        enableHotkey: function enableHotkey() {
            this.hotkeys.init(this.handleMap);
            this.hotkeys.setContext(this);
        },
        disableHotkey: function disableHotkey() {},
        resetSnapshot: function resetSnapshot() {
            this.$snapshots.reset();
            this.makeSnapshot('init', null, true, 'templet');
        },
        makeSnapshot: function makeSnapshot(tag) {
            var targetLayout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

            var _this2 = this;

            var sync = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
            var scope = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'layout';

            if (!this.innerProps.snapshotable) {
                return;
            }

            if (!targetLayout) {
                targetLayout = this.currentLayout;
            }

            var layoutIndex = this.layouts.findIndex(function (layout) {
                return layout === targetLayout;
            });

            if (scope === 'templet') {
                layoutIndex = -1;
            }

            var state = {
                tag: tag,
                scope: scope,
                elementId: this.currentElement ? this.currentElement.$id : null,
                layoutId: targetLayout ? targetLayout.$id : null,
                layouts: this.layouts
            };

            var syncState = function syncState() {
                _this2.snapshotSize = $snapshots.length;
                var _ref = [$snapshots.hasRedo, $snapshots.hasUndo];
                _this2.hasRedo = _ref[0];
                _this2.hasUndo = _ref[1];
            };

            var $snapshots = this.$snapshots;

            if (sync) {
                $snapshots.pushSync(state, layoutIndex);
                syncState();
            } else {
                $snapshots.push(state, layoutIndex).then(syncState);
            }
        },
        makeSnapshotByElement: function makeSnapshotByElement(element) {
            if (element && element.type.charAt(0) !== '$') {
                this.makeSnapshot('change_element');
            }
        },
        applySnapshot: function applySnapshot(snapshot) {
            var _this3 = this;

            var prevLayoutId = this.currentLayout && this.currentLayout.$id;
            var currentElementAfterApply = null;

            this.innerProps.snapshotable = false;
            this.snapshotSize = this.$snapshots.length;
            var _ref2 = [this.$snapshots.hasRedo, this.$snapshots.hasUndo];
            this.hasRedo = _ref2[0];
            this.hasUndo = _ref2[1];


            var resetLayout = function resetLayout(editorLayout, snapshotLayout) {
                editorLayout.elements = [];
                _this3.$nextTick(function () {
                    editorLayout.elements = snapshotLayout.elements.map(function (elementData) {
                        var element = _this3.createElement(elementData);
                        element.reset();
                        if (element.$id === snapshot.elementId) {
                            currentElementAfterApply = element;
                        }
                        return element;
                    });

                    Object.keys(snapshotLayout).forEach(function (key) {
                        if (key !== 'elements') {
                            editorLayout[key] = snapshotLayout[key];
                        }
                    });

                    _this3.currentElement = currentElementAfterApply;

                    if (prevLayoutId !== snapshot.layoutId) {
                        _this3.currentElement = null;
                    }
                });
            };

            var targetLayout = this.layouts.find(function (layout) {
                return layout.$id === snapshot.layoutId;
            });

            if (targetLayout && snapshot.scope === 'layout') {
                var snapshotLayout = snapshot.layouts.find(function (layout) {
                    return layout.$id === snapshot.layoutId;
                });
                if (targetLayout && snapshotLayout) {
                    resetLayout(targetLayout, snapshotLayout);
                }
            } else {
                    var _loop = function _loop(i) {
                        var targetLayout = _this3.layouts[i];
                        var snapshotLayout = snapshot.layouts[i];
                        if (!targetLayout && snapshotLayout) {
                            snapshotLayout.elements = snapshotLayout.elements.map(function (element) {
                                return _this3.createElement(element, snapshotLayout);
                            });
                            _this3.addLayout(snapshotLayout, undefined, false);
                        } else if (targetLayout && !snapshotLayout) {
                            _this3.removeLayout(targetLayout, false);
                        } else {
                            resetLayout(targetLayout, snapshotLayout);
                        }
                    };

                    for (var i = 0; i < Math.max(this.layouts.length, snapshot.layouts.length); i++) {
                        _loop(i);
                    }
                }
            this.innerProps.snapshotable = true;
        },
        undo: function undo() {
            var currentElement = this.currentElement;

            if (currentElement && (currentElement.type === '$croper' || currentElement.type === '$masker')) {
                this.$events.$emit('editor.edit.cancel', currentElement);
                return;
            }
            var snapshot = this.$snapshots.undo().get();
            this.applySnapshot(snapshot);
        },
        redo: function redo() {
            var snapshot = this.$snapshots.redo().get();
            this.applySnapshot(snapshot);
        },
        addLayout: function addLayout(layout, index) {
            var _this4 = this;

            var elements = layout && (layout.elements || layout.elems);
            delete layout.elems;

            var layoutProps = (0, _cloneDeep3.default)(_editorDefaults2.default.layout);
            layout = (0, _merge3.default)(layoutProps, layout);

            layout.elements = [];
            layout.$id = _utils2.default.uuid();
            layout.top = 0;

            if ((0, _isNumber3.default)(index)) {
                this.layouts.splice(index, 0, layout);
            } else {
                this.layouts.push(layout);
            }

            if (elements && elements.length) {
                if (elements[0].zIndex > 0) {
                    elements.sort(function (a, b) {
                        return a.zIndex - b.zIndex;
                    });

                    elements.forEach(function (element) {
                        delete element.zIndex;
                    });
                }

                elements.forEach(function (element) {
                    _this4.addElement(element, layout);
                });
            }

            this.makeSnapshot('add_layout', layout, false, 'templet');

            if (!this.currentLayout) {
                this.currentLayout = layout;
            }

            return layout;
        },
        removeLayout: function removeLayout(layout) {
            if ((0, _isNumber3.default)(layout)) {
                var inx = layout % this.layouts.length;

                layout = this.layouts[inx];
            } else if ((0, _isUndefined3.default)(layout)) {
                layout = this.currentLayout;
            }

            if (layout) {
                this.clearLayout(layout);

                var index = this.layouts.indexOf(layout);
                if (index > -1) {
                    this.layouts.splice(index, 1);
                }

                if (layout === this.currentLayout) {
                    this.currentLayout = this.layouts[0] || null;
                }

                this.makeSnapshot('remove_layout', layout, false, 'templet');
            }
        },
        clearLayout: function clearLayout(layout) {
            if ((0, _isNumber3.default)(layout)) {
                var inx = layout % this.layouts.length;

                layout = this.layouts[inx];
            } else if ((0, _isUndefined3.default)(layout)) {
                layout = this.currentLayout;
            }

            if (layout) {
                layout.elements = [];

                if (layout === this.currentLayout) {
                    this.currentElement = null;
                }

                this.makeSnapshot('clear_layout');
            }
        },
        changeLayout: function changeLayout(props, layouts) {
            layouts = [].concat(layouts || this.currentLayout);

            layouts.forEach(function (layout) {
                (0, _assign3.default)(layout, props);
            });

            this.makeSnapshot('change_layout', null, false, 'templet');
        },
        toggleLayout: function toggleLayout(layout) {
            if ((0, _isNumber3.default)(layout)) {
                var inx = layout % this.layouts.length;

                layout = this.layouts[inx];
            }

            if (layout && layout !== this.currentLayout) {
                if (this.currentCropElement || this.currentEditMask) {
                    this.$events.$emit('editor.edit.apply', this.currentElement);
                }

                this.clearSelectedElements();
                this.currentElement = null;
                this.currentLayout = layout;
            }
        },
        getLayoutByPoint: function getLayoutByPoint(point) {
            var y = point.y;
            var lastLayout = null;

            var layout = this.layouts.find(function (layout) {
                lastLayout = layout;
                return y < layout.top + layout.height;
            });

            return layout || lastLayout;
        },
        getLayoutByElement: function getLayoutByElement(element) {
            var layouts = this.layouts;
            element = element || this.currentElement;
            return layouts.find(function (layout) {
                return layout.elements.indexOf(element) > -1;
            });
        },
        setLayoutByElement: function setLayoutByElement(element) {
            var layout = this.getLayoutByElement(element);
            if (layout) {
                this.toggleLayout(layout);
            }
        },
        setLayoutByLayoutId: function setLayoutByLayoutId(layoutId) {
            this.currentLayout = this.layouts.find(function (layout) {
                return layout.$id === layoutId;
            });
        },
        switchLayout: function switchLayout(layoutA, layoutB) {
            var layouts = this.layouts;
            var indexA = null;
            var indexB = null;

            if ((0, _isNumber3.default)(layoutA)) {
                indexA = layoutA % layouts.length;
                layoutA = layouts[indexA];
            } else {
                indexA = layouts.indexOf(layoutA);
            }
            if ((0, _isNumber3.default)(layoutB)) {
                indexB = layoutB % layouts.length;
                layoutB = layouts[indexB];
            } else {
                indexB = layouts.indexOf(layoutB);
            }

            layouts.splice(indexA, 1, layoutB);
            layouts.splice(indexB, 1, layoutA);

            this.makeSnapshot('switch_layout');
        },
        createElement: function createElement(data, layout) {
            var type = data && data.type;
            if (!type) {
                throw new Error('No type to create element:' + JSON.stringify(data));
            }
            if (!this.checkVersion(data.version || '0.0.0')) {
                throw new Error('Element version not support:' + data.version);
            }

            var element = (0, _elementUseModel.useElementModel)(data);

            if (!layout) {
                layout = this.currentLayout;
            }

            if (layout && (0, _isUndefined3.default)(data.left)) {
                element.left = Math.max(0, (layout.width - element.width) / 2);
            }
            if (layout && (0, _isUndefined3.default)(data.top)) {
                element.top = Math.max(0, (layout.height - element.height) / 2);
            }

            if (type === 'text') {
                var _options2 = this.options,
                    fontsMap = _options2.fontsMap,
                    fontList = _options2.fontList;

                if (!fontsMap[element.fontFamily]) {
                    var defaultFont = fontList[0];

                    element.fontFamily = defaultFont ? defaultFont.name : '';
                }
            }

            return element;
        },
        addElement: function addElement(data, layout) {
            var element = data;
            if (!data || !data.$id) {
                element = this.createElement(data, layout);
            }

            if (this.supportTypes.indexOf(element.type) < 0) {
                throw new Error('Type [' + element.type + '] not supported');
            }

            if (!layout) {
                layout = this.currentLayout;
            }

            if (layout && layout.elements) {
                layout.elements.push(element);

                this.makeSnapshot('add_element', layout);
            }

            return element;
        },
        removeElement: function removeElement(elements, layout) {
            if (!layout) {
                layout = this.currentLayout;
            }
            if (!layout) {
                return;
            }

            var currElement = this.currentElement;

            if (!elements) {
                elements = this.getSelectedElements(true);
            } else if (!Array.isArray(elements)) {
                elements = [elements];
            }

            if (!elements.length) {
                return;
            }

            elements.forEach(function (element) {
                var index = layout.elements.indexOf(element);
                if (index > -1) {
                    layout.elements.splice(index, 1);
                }
            });

            if (elements.indexOf(currElement) > -1) {
                this.focusElement(null);
            }

            this.$events.$emit('editor.remove', elements);

            this.makeSnapshot('remove_element');
        },
        replaceElement: function replaceElement(oldElement, newElement, layout) {
            oldElement = this.getElement(oldElement);
            newElement = this.createElement(newElement);

            if (!layout) {
                layout = this.currentLayout;
            }

            var inx = layout.elements.indexOf(oldElement);
            layout.elements.splice(inx, 1, newElement);
            newElement.$id = oldElement.$id;

            this.makeSnapshot('replace_element');

            return newElement;
        },
        changeElement: function changeElement(props, elements) {
            var _this5 = this;

            elements = elements ? [].concat(elements) : [this.currentElement];
            elements.forEach(function (element) {
                var invalidProps = null;

                if (element.type === 'text') {
                    var contentsProps = {};
                    invalidProps = {};

                    Object.keys(props).forEach(function (name) {
                        if (!_config.styleMap[name]) {
                            invalidProps[name] = props[name];
                        } else {
                            contentsProps[name] = props[name];
                        }
                    });

                    _this5.changeTextContents(contentsProps, element);
                }

                (0, _merge3.default)(element, invalidProps || props);
            });

            this.makeSnapshot('change_element');
        },
        copyElement: function copyElement(elements) {
            var toClipboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

            elements = elements ? [].concat(elements) : this.getSelectedElements(true);

            elements = elements.filter(function (element) {
                return element.type.indexOf('$') !== 0;
            });

            if (elements.length) {
                elements = elements.map(this.createElement);
                this.options.clipboard.set(elements);
                if (toClipboard) {
                    this.clipboard = elements;
                }
            }
            return elements;
        },
        cutElement: function cutElement(elements) {
            var toClipboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

            elements = elements ? [].concat(elements) : this.getSelectedElements(true);

            if (elements.length) {
                this.removeElement(elements);

                elements = elements.filter(function (element) {
                    return element.type.indexOf('$') !== 0;
                });
                this.copyElement(elements, toClipboard);
            }
            return elements;
        },
        pasteElement: function pasteElement(elements, layout) {
            var _this6 = this;

            elements = elements || this.clipboard;
            layout = layout || this.currentLayout;

            var hookClipboard = this.options.clipboard;
            var outerContent = hookClipboard.get();
            if (outerContent) {
                elements = outerContent.map(this.createElement);
            }

            if (elements.length) {
                this.clearSelectedElements();

                var bbox = _utils2.default.getBBoxByElements(elements, 1);
                var prePoint = { left: bbox.left, top: bbox.top };

                var currentElement = this.currentElement;
                if (currentElement) {
                    bbox.left = currentElement.left + 20;
                    bbox.top = currentElement.top + 20;
                } else {
                    bbox.left = (layout.width - bbox.width) / 2;
                    bbox.top = (layout.height - bbox.height) / 2;
                }

                elements = elements.map(function (element) {
                    element.$selected = false;
                    element.$id = _utils2.default.uuid();

                    element = _this6.createElement(element);

                    element.left += bbox.left - prePoint.left;
                    element.top += bbox.top - prePoint.top;

                    return _this6.addElement(element, layout);
                });

                this.focusElement(elements.length === 1 ? elements[0] : null);

                this.$events.$emit('editor.paste', elements);

                this.makeSnapshot('paste_element');

                return elements;
            }
        },
        cloneElement: function cloneElement(elements) {
            elements = elements ? [].concat(elements) : this.getSelectedElements(true);

            elements = elements.filter(function (element) {
                return element.type.indexOf('$') !== 0;
            });

            elements = this.copyElement(elements, false);
            return this.pasteElement(elements);
        },
        lockElement: function lockElement(elements) {
            this.changeElement({
                lock: true
            }, elements);
        },
        unlockElement: function unlockElement(elements) {
            this.changeElement({
                lock: false
            }, elements);
        },
        getElementsByPoint: function getElementsByPoint() {
            var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
            var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
            var layout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.currentLayout;

            var retElems = [];
            var options = this.options;
            var allElems = layout && layout.elements || [];

            var elems = allElems.filter(function (elem) {
                return !elem.hidden && !elem.frozen;
            });

            if (!elems || !elems.length) {
                return retElems;
            }

            x -= layout.left || 0;
            y -= layout.top || 0;

            if (options.canvasOverflowHidden && (x < 0 || y < 0 || x > this.width || y > this.height)) {
                return retElems;
            }

            (0, _forEachRight3.default)(elems, function (elem) {
                var rect = _utils2.default.getElementRect(elem, 1);

                if (_utils2.default.pointInRect(x, y, rect)) {
                    retElems.push(elem);
                }
            });

            return retElems;
        },
        getElementByPoint: function getElementByPoint() {
            var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
            var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
            var layout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.currentLayout;

            var elems = this.getElementsByPoint(x, y, layout);

            return elems[0] || null;
        },
        elementFromPoint: function elementFromPoint() {
            var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
            var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
            var layout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.currentLayout;
            var returnAll = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

            var elems = this.getElementsByPoint(x, y, layout);

            if (returnAll) {
                return elems;
            }

            return elems[0] || null;
        },
        focusElement: function focusElement(element) {
            element = this.getElement(element, {
                queryCurrntElement: false
            });

            if (element !== this.currentElement) {
                this.currentElement = element;
            }
        },
        focusElementByPoint: function focusElementByPoint(x, y, layout) {
            var element = this.elementFromPoint(x, y);

            if (element && element !== this.currentElement) {
                this.currentElement = element;
            }

            if (element && element.type === 'group') {
                if (this.mode === 'flow') {
                    layout = layout || this.currentLayout;
                    x -= layout.left || 0;
                    y -= layout.top || 0;
                }

                var subElement = this.elementFromPoint(x, y, element);

                this.currentSubElement = subElement;
            }

            return element;
        },
        getElement: function getElement(id, options) {
            options = (0, _defaults3.default)({
                queryCurrntElement: true,
                deep: false
            }, options);

            if (id === undefined && options.queryCurrntElement) {
                return this.currentElement;
            }
            if (!id) {
                return null;
            }

            if (id && id.$id) {
                return id;
            }

            var layout = options.layout || this.currentLayout;
            var elements = layout && layout.elements || [];
            var ret = null;

            (0, _forEach3.default)(elements, function (element) {
                if (element.$id === id) {
                    ret = element;

                    return false;
                }
            });

            return ret;
        },
        getSelectedElements: function getSelectedElements(withCurrentElement) {
            var layout = this.currentLayout;
            var elements = layout ? layout.elements : [];

            elements = elements.filter(function (element) {
                return element.$selected;
            });

            var currElement = this.currentElement;
            if (currElement && withCurrentElement && elements.indexOf(currElement) < 0) {
                elements.push(currElement);
            }

            return elements;
        },
        clearSelectedElements: function clearSelectedElements() {
            var selectedElements = this.selectedElements;

            if (selectedElements.length) {
                selectedElements.forEach(function (element) {
                    element.$selected = false;
                });
            }
        },
        selectElement: function selectElement(element) {
            element = this.getElement(element);
            if (!element) {
                return;
            }

            this.selector.add(element);
            this.selector.showSelector();
        },
        unselectElement: function unselectElement(element) {
            element = this.getElement(element);
            if (!element) {
                return;
            }

            this.selector.remove(element);
            this.selector.showSelector();
        },
        alignmentElements: function alignmentElements(direction) {
            var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.selectedElements;

            _utils2.default.alignment(direction, elements);

            this.selector.showSelector();

            this.makeSnapshot('apply_alignment');
        },
        goElementIndex: function goElementIndex(elements, step) {
            var layout = this.currentLayout;
            if (!layout) {
                return;
            }

            var allElements = layout && layout.elements || [];
            elements = elements ? [].concat(elements) : this.getSelectedElements(true);

            var inx = null;

            elements = elements.filter(function (element) {
                if (element && element.type.indexOf('$') < 0) {
                    inx = allElements.indexOf(element);
                    if (inx >= 0 && inx <= allElements.length - 1) {
                        allElements.splice(inx, 1);
                        inx += step;
                        inx = Math.max(0, inx);
                        inx = Math.min(inx, allElements.length);
                        return true;
                    }
                }
            });

            allElements.splice.apply(allElements, [inx, 0].concat(_toConsumableArray(elements)));

            this.makeSnapshot('apply_alignment');
        },
        setElementToTop: function setElementToTop(elements) {
            this.goElementIndex(elements, this.currentLayout.elements.length);
        },
        setElementToBottom: function setElementToBottom(elements) {
            this.goElementIndex(elements, -this.currentLayout.elements.length);
        },
        forwardElement: function forwardElement(elements) {
            this.goElementIndex(elements, 1);
        },
        backwardElement: function backwardElement(elements) {
            this.goElementIndex(elements, -1);
        },
        createGroup: function createGroup(elements) {
            var _this7 = this;

            var self = this;
            if (!elements) {
                elements = this.getSelectedElements();
            }

            var childs = [];
            var flatElements = function flatElements(elements) {
                elements.forEach(function (element) {
                    if (element.type === 'group') {
                        flatElements(self.collapseGroup(element));
                        return;
                    }

                    childs.push(element);
                });
            };

            flatElements(elements);

            var bbox = _utils2.default.getBBoxByElements(childs);
            var group = this.createElement({
                type: 'group',
                height: bbox.height,
                width: bbox.width,
                left: bbox.left,
                top: bbox.top,
                elements: []
            });

            childs.forEach(function (element) {
                element = _this7.addElement(element, group);

                element.disableEditable();
                element.$selected = false;

                element.left -= group.left;
                element.top -= group.top;
            });

            return group;
        },
        collapseGroup: function collapseGroup(element) {
            var _this8 = this;

            var group = this.getElement(element);
            var elements = group && group.elements;

            if (!elements && !elements.length) {
                return [];
            }

            var groupRotate = group.rotate;

            return elements.map(function (element) {
                element = _this8.createElement(element);

                element.enableEditable();

                element.rotate += groupRotate;

                var prePoint = {
                    x: group.left + element.left + element.width / 2,
                    y: group.top + element.top + element.height / 2
                };

                var newPoint = _utils2.default.getRectPoints({
                    left: prePoint.x,
                    top: prePoint.y,
                    width: group.width - element.left * 2 - element.width,
                    height: group.height - element.top * 2 - element.height,
                    rotate: groupRotate,
                    skewX: element.skewX,
                    skewY: element.skewY
                });

                element.left += group.left + newPoint.nw.x - prePoint.x;
                element.top += group.top + newPoint.nw.y - prePoint.y;

                return element;
            });
        },
        addGroupByElements: function addGroupByElements(elements) {
            var _this9 = this;

            var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

            if (!elements) {
                elements = this.getSelectedElements();
            }

            if (!elements.length) {
                return;
            }

            var group = this.createGroup(elements);
            Object.keys(options).forEach(function (key) {
                group[key] = options[key];
            });

            elements.forEach(function (element) {
                _this9.removeElement(element);
            });

            this.addElement(group);
            this.focusElement(group);
        },
        flatGroup: function flatGroup(element) {
            var _this10 = this;

            var groupElement = this.getElement(element);
            var elements = groupElement && groupElement.elements;

            if (!elements || groupElement.type === '$selector') {
                return;
            }

            var groupLayout = this.getLayoutByElement(element);
            var groupIndex = groupLayout.elements.indexOf(groupElement);
            var indexOffset = groupIndex - groupLayout.elements.length;

            elements = this.collapseGroup(groupElement);

            this.removeElement(groupElement);

            elements.forEach(function (element) {
                element = _this10.addElement(element);
                _this10.goElementIndex(element, indexOffset);
                element.$selected = true;
            });

            this.selector.showSelector();
        },
        getPointsByElement: function getPointsByElement(element) {
            var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

            element = element || this.currentElement;

            return _utils2.default.getPointsByElement(element, zoom || this.zoom);
        },
        convertImageToMask: function convertImageToMask(element, layout) {
            element = this.getElement(element);
            if (!element) {
                return;
            }

            var data = (0, _pickBy3.default)(element, function (v, k) {
                return k.charAt(0) !== '$';
            });

            data.type = 'mask';
            data.mask = data.url;

            data.imageUrl = null;
            data.imageWidth = data.width;
            data.imageHeight = data.height;
            data.imageTransform = { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 };

            var clip = data.clip;
            if (clip) {
                data.imageWidth += clip.left + clip.right;
                data.imageHeight += clip.top + clip.bottom;
                data.imageTransform.tx = -clip.left;
                data.imageTransform.ty = -clip.top;
                data.clip = null;
                data.version = _editorDefaults2.default.version;
            }

            var newElement = this.replaceElement(element, data, layout);

            this.focusElement(newElement);

            return newElement;
        },
        convertMaskToImage: function convertMaskToImage(element, layout, url) {
            element = this.getElement(element);
            if (!element) {
                return;
            }

            var data = (0, _pickBy3.default)(element, function (v, k) {
                return k.charAt(0) !== '$';
            });

            data.type = 'image';
            data.url = url || data.mask;
            data.clip = null;
            data.version = _editorDefaults2.default.version;
            var newElement = this.replaceElement(element, data, layout);
            this.focusElement(newElement);
            return newElement;
        },
        _checkTempletLoaded: function _checkTempletLoaded() {
            var _this11 = this;

            var global = this.global;
            if (global.$loaded) {
                return;
            }

            var unloadLayouts = this.layouts.filter(function (layout) {
                return !layout.$loaded;
            });

            var count = 0;
            unloadLayouts.forEach(function (layout) {
                var unloadedElements = layout.elements.filter(function (element) {
                    return !element.$loaded;
                });

                if (!unloadedElements.length) {
                    layout.$loaded = true;
                    count += 1;

                    _this11.$emit('editor-layout-loaded', layout);
                    _this11.$emit('layout.load', layout);
                }
            });

            if (count >= unloadLayouts.length) {
                global.$loaded = true;
                this.$emit('editor-templet-loaded');
                this.$emit('load');

                global.$rendered = true;
                this.$emit('editor-templet-rendered');
            }
        },
        checkTempletLoaded: function checkTempletLoaded() {
            if (!this.checkTempletLoadedLazy) {
                this.checkTempletLoadedLazy = (0, _debounce3.default)(this._checkTempletLoaded, 96);
            }

            this.checkTempletLoadedLazy();
        },
        resetTemplet: function resetTemplet() {
            this.resetSnapshot();

            this.currentLayout = null;
            this.currentElement = null;
            this.layouts = [];
        },
        setTemplet: function setTemplet(tpl) {
            var _this12 = this;

            var defaultIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

            return _bluebird2.default.try(function () {
                if (!tpl) {
                    throw new Error('No templet give');
                }

                if (!_this12.checkVersion(tpl.version || '0.0.0')) {
                    throw new Error('This templet is not support');
                }

                _this12.resetTemplet();
            }).then(function () {
                _this12.global = (0, _merge3.default)(_this12.global, tpl.global);

                _this12.global.zoom = 1;

                _this12.global.$loaded = false;

                _this12.type = tpl.type || _this12.global.type || 'poster';
            }).then(function () {
                var layouts = tpl.layouts || [];
                if (!layouts.length) {
                    layouts.push({});
                }

                layouts.forEach(function (layout) {
                    layout.backgroundColor = _utils.onecolor.rgbaParser(layout.backgroundColor || '#FFFFFF00').cssa();
                    _this12.addLayout(layout);
                });

                _this12.currentLayout = _this12.layouts[defaultIndex];
            }).then(function () {
                _this12.resetSnapshot();

                return _this12.$nextTick();
            }).then(function () {
                _this12.$emit('editor.templet.ready');

                _this12.checkTempletLoaded();
            });
        },
        exportTemplet: function exportTemplet(layouts) {
            var _this13 = this;

            if (layouts === undefined) {
                layouts = this.layouts;
            } else {
                var args = [];
                [].slice.call(arguments).forEach(function (item) {
                    args = args.concat(item);
                });

                layouts = args.map(function (item) {
                    if (typeof item === 'number') {
                        return _this13.layouts[item];
                    } else if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object') {
                        return item;
                    } else {
                        console.error('ExportTemplet arguments is not available', layouts);
                    }
                }).filter(function (item) {
                    return item;
                });
            }

            var promise = _bluebird2.default.bind(this);
            return promise.then(function () {
                var tpl = {
                    version: _this13.version,
                    type: _this13.type,
                    global: _this13.global,
                    layouts: layouts || []
                };

                return JSON.stringify(tpl, function (k, v) {
                    if (k[0] === '$') {
                        return;
                    }

                    if ((k === 'color' || k === 'backgroundColor') && typeof v === 'string') {
                        return _utils.onecolor.hexa(v);
                    }

                    if (k === 'colors') {
                        if (v instanceof Array) {
                            return v.map(function (color) {
                                return _utils.onecolor.hexa(color);
                            });
                        } else {
                            var result = {};
                            for (var key in v) {
                                result[key] = _utils.onecolor.hexa(v[key]);
                            }
                            return result;
                        }
                    }

                    if (k === 'fontFamily') {
                        var _options3 = _this13.options,
                            fontsMap = _options3.fontsMap,
                            fontList = _options3.fontList;

                        var font = fontsMap[v] || fontList[0];

                        return font.name || font.family || v;
                    }

                    if (v && (typeof v === 'undefined' ? 'undefined' : _typeof(v)) === 'object' && v.type === 'text' && v.contents instanceof Array && v.contents.length) {
                        var contents = _utils.serialize.mergeChild(v.contents);

                        if (contents.length === 1) {
                            v = JSON.parse(JSON.stringify(v));

                            v.content = contents[0].content;

                            Object.keys(contents[0]).forEach(function (name) {
                                if (v.hasOwnProperty(name) && _config.styleMap[name]) {
                                    v[name] = contents[0][name];
                                }
                            });

                            v.contents = null;
                        }
                    }

                    return v;
                });
            });
        },
        exportTempletData: function exportTempletData() {
            return this.exportTemplet().then(function (content) {
                return JSON.parse(content);
            });
        },
        exportResourceBlobs: function exportResourceBlobs(layouts, options) {
            var urlHandler = function urlHandler(element, _options) {
                var mapKeys = element.type === 'mask' ? ['url', 'mask', 'imageUrl', 'effectedImage'] : ['url', 'effectedImage'];
                var resource = {};

                mapKeys.forEach(function (key) {
                    var url = element[key];
                    var valid = url && url.indexOf(';base64') > 0 && url.length > _options.contentLimit;
                    if (valid) {
                        resource[key] = _utils2.default.dataurlToBlob(url);
                    }
                });

                return _bluebird2.default.resolve(resource);
            };

            var defaultOptions = {
                contentLimit: 5,
                mask: urlHandler,
                image: urlHandler,
                svg: function svg(element) {
                    var resource = {};
                    var url = element.url,
                        content = element.content;