vue-poster-editor/lib/components/editor-element-editor-mask.js

A poster editor based on Vue.js

'use strict';

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

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

var _merge3 = _interopRequireDefault(_merge2);

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

var _utils2 = _interopRequireDefault(_utils);

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

var _vueInherit2 = _interopRequireDefault(_vueInherit);

var _editorElement = require('../canvas/editor-element');

var _editorElement2 = _interopRequireDefault(_editorElement);

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

exports.default = (0, _vueInherit2.default)(_editorElement2.default, {
    props: ['model', 'currentElement', 'global'],
    data: function data() {
        return {
            type: 'croper',
            clickLocked: true,
            showGrid: false,

            lastCurrentElement: null,
            innerProps: {
                editModel: null,
                editModelInner: null
            }
        };
    },

    computed: {
        editor: function editor() {
            return this.$parent;
        },
        zoom: function zoom() {
            return this.global.zoom;
        },
        editModel: function editModel() {
            return this.getEditModel();
        },
        editModelInner: function editModelInner() {
            return this.getEditModelInner();
        },
        rectPrefix: function rectPrefix() {
            var currentElement = this.lastCurrentElement;
            var ret = {
                left: 0,
                top: 0
            };

            if (currentElement && currentElement !== this.model) {
                ret.left = currentElement.left;
                ret.top = currentElement.top;
            }

            return ret;
        }
    },
    methods: {
        getEditModel: function getEditModel() {
            var model = this.model;
            var innerProps = this.innerProps;
            var editModel = innerProps.editModel;

            if (editModel && model === innerProps.modelCache) {
                return editModel;
            }

            var _model$imageTransform = this.model.imageTransform.position,
                x = _model$imageTransform.x,
                y = _model$imageTransform.y;


            var centerPoint = _utils2.default.getPointPosition({
                x: model.left + x + model.imageWidth / 2,
                y: model.top + y + model.imageHeight / 2
            }, {
                x: model.left + model.width / 2,
                y: model.top + model.height / 2
            }, model.rotate);

            editModel = (0, _merge3.default)({}, model, {
                type: '$' + this.type,
                $dragLimit: true,
                height: model.imageHeight,
                width: model.imageWidth,
                left: centerPoint.x - model.imageWidth / 2,
                top: centerPoint.y - model.imageHeight / 2,
                clip: null,
                resize: this.options.cropperOptions.outerResize,

                $guider: { show: false, snapTo: false },

                rotatable: true,
                dragable: true
            });

            editModel.rotation = model.imageTransform.rotation + model.transform.rotation;

            editModel = this.editor.createElement(editModel);

            model.$editing = true;

            innerProps.editModel = editModel;
            innerProps.modelCache = model;

            return editModel;
        },
        getEditModelInner: function getEditModelInner() {
            var model = this.model;
            var innerProps = this.innerProps;
            var editModelInner = innerProps.editModelInner;

            if (editModelInner && model === innerProps.modelCache) {
                return editModelInner;
            }

            var padding = model.padding;

            editModelInner = (0, _merge3.default)({}, model, {
                type: '$' + this.type,
                $name: '$cropperInner',
                height: model.height + padding[0] + padding[2],
                width: model.width + padding[1] + padding[3],
                left: model.left,
                top: model.top,

                $dragLimit: true,
                $customDragMove: true,
                resize: 7,

                rotatable: true,
                dragable: true,

                $guider: {
                    show: true,
                    snapTo: true
                },
                active: false
            });

            editModelInner = this.editor.createElement(editModelInner);
            model.$editing = true;

            innerProps.editModelInner = editModelInner;
            innerProps.modelCache = model;

            return editModelInner;
        },
        destroyEditModel: function destroyEditModel() {
            var model = this.model;

            if (!model) {
                return;
            }

            if (this.lastCurrentElement && (this.currentElement === this.editModel || this.currentElement === this.editModelInner)) {
                this.editor.focusElement(this.lastCurrentElement);
            }

            model.$editing = false;

            this.$emit('update:model', null);
        },
        save: function save() {
            var model = this.model,
                editModel = this.editModel,
                editModelInner = this.editModelInner;

            var imageTransform = model.imageTransform;

            Object.assign(model, {
                imageWidth: editModel.width,
                imageHeight: editModel.height,

                height: editModelInner.height,
                width: editModelInner.width,
                left: editModelInner.left,
                top: editModelInner.top
            });

            var newPoint = _utils2.default.getPointPosition({
                x: editModel.left + editModel.width / 2,
                y: editModel.top + editModel.height / 2
            }, {
                x: editModelInner.left + editModelInner.width / 2,
                y: editModelInner.top + editModelInner.height / 2
            }, -editModelInner.rotate);

            var x = newPoint.x - editModel.width / 2 - editModelInner.left;
            var y = newPoint.y - editModel.height / 2 - editModelInner.top;

            imageTransform.position.x = Math.round(x);
            imageTransform.position.y = Math.round(y);

            imageTransform.rotation = editModel.transform.rotation - editModelInner.transform.rotation;

            model.rotation = editModelInner.rotation;

            this.editor.changeElement({
                imageTransform: imageTransform
            });

            this.destroyEditModel();
        },
        cancel: function cancel() {
            this.destroyEditModel();
        }
    },
    events: {
        'editor.drag.active': function editorDragActive(element) {
            if (element.type !== '$masker') {
                this.editor.$events.$emit('editor.edit.apply', this.editModel);
                return;
            }

            this.clickLocked = false;
            this.showGrid = true;

            var editModelInner = this.editModelInner,
                editModel = this.editModel;


            var xBound = (editModelInner.width + editModel.width) / 2;
            var yBound = (editModelInner.height + editModel.height) / 2;
            var dragLimit = {
                minLeft: -xBound,
                maxLeft: xBound,
                minTop: -yBound,
                maxTop: yBound,
                baseLeft: editModel.left,
                baseTop: editModel.top,
                centerDeltaX: editModel.left + editModel.width / 2 - (editModelInner.left + editModelInner.width / 2),
                centerDeltaY: editModel.top + editModel.height / 2 - (editModelInner.top + editModelInner.height / 2)
            };
            editModel.$getDragLimit = editModelInner.$getDragLimit = function () {
                return dragLimit;
            };
        },
        'editor.drag.inactive': function editorDragInactive() {
            var _this = this;

            this.clickLocked = false;
            this.showGrid = false;

            setTimeout(function () {
                _this.clickLocked = true;
            }, 0);
        },
        'editor.drag.customMoving': function editorDragCustomMoving(_ref) {
            var element = _ref.element,
                dx = _ref.dx,
                dy = _ref.dy;

            var _element$$getDragLimi = element.$getDragLimit(),
                baseLeft = _element$$getDragLimi.baseLeft,
                baseTop = _element$$getDragLimi.baseTop;

            var _ref2 = [baseLeft + dx, baseTop + dy];
            this.editModel.left = _ref2[0];
            this.editModel.top = _ref2[1];
        },
        'editor.transform.active': function editorTransformActive(element) {
            this.showGrid = true;

            if (element === this.editModel) {
                this.clickLocked = true;
            }
        },
        'editor.transform.inactive': function editorTransformInactive() {
            var _this2 = this;

            this.clickLocked = false;
            this.showGrid = false;

            var _editModel = this.editModel,
                width = _editModel.width,
                height = _editModel.height;

            this.$events.$emit('imageCroper.resizeEnd', { width: width, height: height });

            setTimeout(function () {
                _this2.clickLocked = true;
            }, 0);
        },
        'editor.edit.apply': function editorEditApply(model) {
            if (model !== this.editModel && model !== this.editModelInner) {
                return;
            }

            this.save();
        },
        'editor.edit.cancel': function editorEditCancel(model) {
            if (model !== this.editModel && model !== this.editModelInner) {
                return;
            }

            this.cancel();
        }
    },
    watch: {
        currentElement: function currentElement(element) {
            if (element !== this.editModel && element !== this.editModelInner) {
                this.$events.$emit('editor.edit.apply', this.editModel);
                this.destroyEditModel();
            }
        }
    },
    created: function created() {
        this.lastCurrentElement = this.currentElement;
    },
    mounted: function mounted() {
        var _this3 = this;

        this.editor.focusElement(this.editModel);

        if (this.options.cropperOptions.defaultTarget === 'inner') {
            this.$nextTick(function () {
                _this3.editor.focusElement(_this3.editModelInner);
                _this3.editModelInner.active = true;
            });
        }
    }
});
module.exports = exports['default'];