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

A poster editor based on Vue.js

'use strict';

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

var _clone2 = require('lodash/clone');

var _clone3 = _interopRequireDefault(_clone2);

var _pick2 = require('lodash/pick');

var _pick3 = _interopRequireDefault(_pick2);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _editorElement = require('./editor-element');

var _editorElement2 = _interopRequireDefault(_editorElement);

var _editorElementGroup = require('./editor-element-group.html');

var _editorElementGroup2 = _interopRequireDefault(_editorElementGroup);

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

exports.default = (0, _vueInherit2.default)(_editorElement2.default, {
    template: _editorElementGroup2.default,
    computed: {
        cssStyle: function cssStyle() {
            var rect = this.rect;
            var padding = rect.padding;


            return {
                height: rect.height + padding[0] + padding[2] + 'px',
                width: rect.width + padding[1] + padding[3] + 'px',
                transform: this.transform.toString(),
                left: rect.left + 'px',
                top: rect.top + 'px',
                opacity: this.opacity
            };
        }
    },
    methods: {
        load: function load() {
            return this.loadDfd.promise;
        },
        initLoadDfd: function initLoadDfd() {
            var model = this.model;

            var loadDfd = this.loadDfd = {
                loadCount: 0,
                check: function check() {
                    loadDfd.loadCount += 1;

                    if (loadDfd.loadCount >= model.elements.length) {
                        loadDfd.resolve();
                    }
                }
            };

            loadDfd.promise = new _bluebird2.default(function (resolve, reject) {
                loadDfd.resolve = resolve;
                loadDfd.reject = reject;

                if (!model.elements.length) {
                    resolve();
                }
            });
        },
        getRect: function getRect() {
            var model = this.model;
            var elements = model.elements;

            var bbox = _utils2.default.getBBoxByElements(elements);
            var zoom = this.global.zoom;


            return {
                height: bbox.height * zoom,
                width: bbox.width * zoom
            };
        },
        syncRect: function syncRect() {
            this.updateRect();
        },
        resizeInit: function resizeInit(dir) {
            this.$childModelsCache = this.model.elements.map(function (element) {
                var cache = (0, _pick3.default)(element, ['left', 'top', 'width', 'height', 'fontSize', 'imageWidth', 'imageHeight', 'contents']);

                cache.padding = (0, _clone3.default)(element.padding);
                cache.clip = (0, _clone3.default)(element.clip);
                if (element.type === 'mask') {
                    cache.imagePosition = (0, _clone3.default)(element.imageTransform.position);
                }

                return cache;
            });

            this.$elementCache = {
                dir: dir,
                width: this.model.width,
                height: this.model.height
            };
        },
        resizeEnd: function resizeEnd() {
            delete this.$childModelsCache;
            delete this.$elementCache;
        },
        scaleGroup: function scaleGroup(widthRatio, heightRatio) {
            this.resizeInit();
            this.setSubElementsRatio(widthRatio, heightRatio);
            this.syncRect();
            this.resizeEnd();
        },
        setSubElementsRatio: function setSubElementsRatio(widthRatio, heightRatio) {
            var $childModelsCache = this.$childModelsCache,
                model = this.model;
            var _$elementCache$dir = this.$elementCache.dir,
                dir = _$elementCache$dir === undefined ? '' : _$elementCache$dir;


            model.elements.forEach(function (element, i) {
                var cache = $childModelsCache[i];

                if (model.autoGrow && element.type === 'text' && dir.length === 1) {
                    element.top = cache.top * heightRatio + (cache.height * heightRatio - cache.height) / 2;
                } else {
                    element.top = cache.top * heightRatio;
                    element.height = cache.height * heightRatio;
                }

                element.left = cache.left * widthRatio;
                element.width = cache.width * widthRatio;

                var prePadding = cache.padding;
                var newPadding = element.padding;
                newPadding[0] = prePadding[0] * heightRatio;
                newPadding[2] = prePadding[2] * heightRatio;
                newPadding[1] = prePadding[1] * widthRatio;
                newPadding[3] = prePadding[3] * widthRatio;

                if (element.type === 'text') {
                    var fitFontSize = function fitFontSize(fontSize, ratio) {
                        fontSize = fontSize * ratio;
                        if (fontSize % 1 !== 0) {
                            fontSize = Math.floor(fontSize * 10) / 10;
                        }
                        return fontSize;
                    };

                    if (!model.autoGrow || model.autoGrow && dir && dir.length === 2) {
                        element.fontSize = fitFontSize(cache.fontSize, widthRatio);
                        element.contents = element.contents.map(function (item, i) {
                            return _extends({}, item, {
                                fontSize: fitFontSize(cache.contents[i].fontSize, widthRatio)
                            });
                        });
                    }
                }

                if (element.type === 'image' && cache.clip) {
                    var preClip = cache.clip;
                    var newClip = element.clip;
                    newClip.left = preClip.left * widthRatio;
                    newClip.right = preClip.right * widthRatio;
                    newClip.top = preClip.top * heightRatio;
                    newClip.bottom = preClip.bottom * heightRatio;
                }

                if (element.type === 'mask') {
                    var prePosition = cache.imagePosition;
                    var newPosition = element.imageTransform.position;
                    newPosition.x = prePosition.x * widthRatio;
                    newPosition.y = prePosition.y * heightRatio;
                    element.imageWidth = cache.imageWidth * widthRatio;
                    element.imageHeight = cache.imageHeight * heightRatio;
                }
            });
        },
        updateSubElements: function updateSubElements() {
            var model = this.model;

            var childModelsCache = this.$childModelsCache;

            if (!childModelsCache) {
                return;
            }

            var widthRatio = model.width / this.$elementCache.width;
            var heightRatio = model.height / this.$elementCache.height;
            this.setSubElementsRatio(widthRatio, heightRatio);
        }
    },
    events: {
        'editor.element.loaded': function editorElementLoaded() {
            this.loadDfd.check();
        },
        'editor.element.error.load': function editorElementErrorLoad() {
            this.loadDfd.check();

            return true;
        },
        'editor.element.rect.update': function editorElementRectUpdate(currModel, delta) {
            var model = this.model,
                $elementCache = this.$elementCache;
            var elements = model.elements,
                autoGrow = model.autoGrow;

            if (!autoGrow || $elementCache && $elementCache.dir || elements.indexOf(currModel) === -1) {
                this.syncRect();
                return;
            }

            model.elements.forEach(function (element) {
                if (element.type === 'svg') {
                    element.width += delta.width;
                    element.height += delta.height;
                }
            });
            this.syncRect();
        },
        'editor.groupBounding.reset': function editorGroupBoundingReset(model) {
            if (model === this.model) {
                var rect = _utils2.default.getBBoxByElements(model.elements);
                var parentLeft = model.left + rect.left;
                var parentTop = model.top + rect.top;

                model.elements.forEach(function (element) {
                    element.left = model.left + element.left - parentLeft;
                    element.top = element.top + model.top - parentTop;
                });

                model.left = parentLeft;
                model.top = parentTop;
                model.width = rect.width;
                model.height = rect.height;
            }
        },
        'editor.groupContent.scale': function editorGroupContentScale(model, ratio) {
            if (model === this.model) {
                this.scaleGroup(ratio, ratio);
            }
        },
        'editor.transform.active': function editorTransformActive(model, data) {
            if (model !== this.model && model.elements && ~model.elements.indexOf(model)) {
                return;
            }

            this.resizeInit(data.dir);
        },
        'editor.transform.inactive': function editorTransformInactive() {
            this.resizeEnd();
        }
    },

    watch: {
        'model.width': function modelWidth() {
            this.updateSubElements();
        },
        'model.height': function modelHeight() {
            this.updateSubElements();
        }
    },

    created: function created() {
        this.initLoadDfd();
    },
    mounted: function mounted() {
        var _this = this;

        this.$nextTick(function () {
            _this.syncRect();
        });
    }
});
module.exports = exports['default'];