vue-poster-editor/lib/canvas/editor-element.js

A poster editor based on Vue.js

'use strict';

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

var _noop2 = require('lodash/noop');

var _noop3 = _interopRequireDefault(_noop2);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _bluebird = require('bluebird');

var _bluebird2 = _interopRequireDefault(_bluebird);

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

var _utils2 = _interopRequireDefault(_utils);

var _vueInherit = require('../utils/vue-inherit');

var _vueInherit2 = _interopRequireDefault(_vueInherit);

var _editor = require('../base/editor.dragger');

var _editor2 = _interopRequireDefault(_editor);

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

exports.default = (0, _vueInherit2.default)(_editor2.default, {
    data: function data() {
        return {
            dragLocked: false,
            errorMessage: ''
        };
    },

    watch: {
        'model.$editing': function model$editing() {
            this.model.$blinking = false;
        }
    },
    computed: {
        isSvg: function isSvg() {
            return this.model.type === 'svg';
        },
        isMask: function isMask() {
            return this.model.type === 'mask';
        },
        isText: function isText() {
            return this.model.type === 'text';
        },
        isImage: function isImage() {
            return this.model.type === 'image';
        },
        isGroup: function isGroup() {
            return this.model.type === 'group';
        },
        transform: function transform() {
            return this.model.transform;
        },
        rect: function rect() {
            var model = this.model;
            var zoom = this.global.zoom;


            return _utils2.default.getElementRect(model, zoom);
        },
        opacity: function opacity() {
            var opacity = this.model.opacity;


            return opacity > 0.999 ? null : opacity;
        },
        padding: function padding() {
            var rect = this.rect;


            return rect.padding.join('px ') + 'px';
        },
        boxShadow: function boxShadow() {
            var data = this.model.boxShadow;

            if (!data) {
                return '';
            }
            return [data.offsetX + 'px', data.offsetY + 'px', data.blurRadius + 'px', data.spreadRadius + 'px', data.color].join(' ');
        },
        borderRadius: function borderRadius() {
            var borderRadius = this.model.borderRadius;

            if (borderRadius) {
                if (borderRadius < 1) {
                    return borderRadius * 100 + '%';
                } else {
                    return borderRadius * this.global.zoom + 'px';
                }
            }
            return 0;
        },
        cssFilter: function cssFilter() {
            var filters = this.model.filter;

            if (filters.gaussianBlur) {
                return 'blur(' + filters.gaussianBlur + 'px)';
            } else {
                return '';
            }
        },
        isFilters: function isFilters() {
            var filter = this.model.filter;


            return !!(filter.hueRotate || filter.saturate || filter.brightness);
        },
        isShowBlink: function isShowBlink() {
            var model = this.model,
                options = this.options,
                isMask = this.isMask,
                isImage = this.isImage;
            var frozen = model.frozen,
                hidden = model.hidden,
                editable = model.editable,
                $loaded = model.$loaded,
                $blinking = model.$blinking;


            var flag = (options.mode === 'design' || options.mode === 'flow') && $blinking && !frozen && !hidden && editable;

            if (isMask || isImage) {
                return $loaded && flag;
            }

            return flag;
        }
    },
    methods: {
        getRect: function getRect() {
            var element = (0, _jquery2.default)(this.$el);
            var innerElement = element.find('.element-main');

            if (this.isText && this.model.$editing) {
                innerElement = (0, _jquery2.default)('.editor-text-editor .element-main');
            }

            if (innerElement.length) {
                element = innerElement;
            }

            var height = element.prop('offsetHeight') || 0;
            var width = element.prop('offsetWidth') || 0;

            return {
                height: height,
                width: width
            };
        },
        updateRect: function updateRect() {
            var model = this.model;

            var rect = this.getRect();
            var zoom = this.global.zoom;


            var height = rect.height / zoom;
            var width = rect.width / zoom;
            var hasUpdated = false;

            var delta = { width: 0, height: 0 };

            if (width !== model.width) {
                delta.width = width - model.width;
                model.width = width;

                hasUpdated = true;
            }
            if (height !== model.height) {
                delta.height = height - model.height;
                model.height = height;

                hasUpdated = true;
            }

            if (hasUpdated) {
                this.$events.$emit('editor.element.rect.update', model, delta);
            }
        },

        syncRect: _noop3.default,

        checkLoad: function checkLoad() {
            var _this = this;

            var model = this.model;
            var timeout = this.options.elementLoadTimeout;
            var $id = model.$id,
                type = model.type;

            model.$loaded = false;

            return _bluebird2.default.try(function () {
                return _this.load();
            }).timeout(timeout, 'Element load timeout, [' + type + '-' + $id + ']').then(function () {
                model.$loaded = true;

                _this.$events.$emit('editor.element.loaded', model);
            }).catch(function (ex) {
                model.$loaded = true;

                _this.$events.$emit('editor.element.error.load', ex, model);
            });
        },
        load: function load() {
            return _bluebird2.default.delay(16);
        },
        hideBlink: function hideBlink() {
            this.model.$blinking = false;
        }
    },
    events: {
        'editor.click': function editorClick(e) {
            if (this.dragLocked) {
                e.preventDefault();

                this.dragLocked = false;
            }

            return true;
        },
        'editor.dragger.active': function editorDraggerActive(model) {
            if (this.model === model) {
                this.dragLocked = true;
                this.$events.$emit('editor.drag.active', this.model);
            }
        },
        'editor.dragger.inactive': function editorDraggerInactive(model) {
            var _this2 = this;

            if (this.model === model) {
                setTimeout(function () {
                    _this2.dragLocked = false;
                }, 160);
                this.$events.$emit('editor.drag.inactive', this.model);
            }
        },
        'editor.dragger.moving': function editorDraggerMoving(drag, model, e) {
            if (this.model === model) {
                this.$events.$emit('editor.drag.moving', drag, this.model, e);
            }
        },
        'editor.dragger.scaling': function editorDraggerScaling(evt) {
            this.$events.$emit('editor.transform.scaling', evt, this.model);
        }
    },
    created: function created() {
        var _this3 = this;

        setTimeout(function () {
            return _this3.checkLoad();
        });
    },
    beforeDestroy: function beforeDestroy() {
        this.hideBlink();
    }
});
module.exports = exports['default'];