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

A poster editor based on Vue.js

'use strict';

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

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

var _cloneDeep3 = _interopRequireDefault(_cloneDeep2);

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

var _assign3 = _interopRequireDefault(_assign2);

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,
            lastCurrentElement: null,
            innerProps: {}
        };
    },

    computed: {
        editor: function editor() {
            return this.$parent;
        },
        zoom: function zoom() {
            return this.global.zoom;
        },
        editModel: function editModel() {
            return this.getEditModel();
        },
        editModelClip: function editModelClip() {
            return this.editModel.clipModel;
        },
        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;
            if (!model) {
                return false;
            }
            var innerProps = this.innerProps;
            var editModel = innerProps.editModel;

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

            var rectPrefix = this.rectPrefix;
            var padding = model.padding;
            var clip = (0, _merge3.default)({
                bottom: 0,
                right: 0,
                left: 0,
                top: 0
            }, model.clip);

            editModel = (0, _merge3.default)({}, model, {
                type: '$' + this.type,
                height: model.height + padding[0] + padding[2] + clip.top + clip.bottom,
                width: model.width + padding[1] + padding[3] + clip.left + clip.right,
                left: rectPrefix.left + model.left - clip.left,
                top: rectPrefix.top + model.top - clip.top,
                clipModel: clip,
                clip: null,
                resize: this.options.cropperOptions.outerResize,

                $dragLimit: true,
                $guider: { show: true, snapTo: true },

                rotatable: false,
                dragable: true
            });

            {
                var sin = Math.sin((360 - model.rotate) / 180 * Math.PI);
                var cos = Math.cos((360 - model.rotate) / 180 * Math.PI);

                var x1 = -(model.width / 2 + padding[3] + clip.left);
                var y1 = model.height / 2 + padding[0] + clip.top;
                var x2 = -editModel.width / 2;
                var y2 = editModel.height / 2;

                var _x1 = x1 * cos - y1 * sin;
                var _y1 = x1 * sin + y1 * cos;
                var _x2 = x2 * cos - y2 * sin;
                var _y2 = x2 * sin + y2 * cos;

                var xChanged = _x2 - _x1 - (x2 - x1);
                var yChanged = _y2 - _y1 - (y2 - y1);

                editModel.left -= xChanged;
                editModel.top += yChanged;
            };

            editModel = this.editor.createElement(editModel);

            model.$editing = true;

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

            return editModel;
        },
        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.$events.$emit('image.cancal.expand');

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

            var props = {
                width: editModelInner.width,
                height: editModelInner.height,
                left: editModelInner.left,
                top: editModelInner.top
            };

            var clip = model.clip;

            if (!clip) {
                clip = { left: 0, right: 0, bottom: 0, top: 0 };
                this.$set(model, 'clip', clip);
            }

            props.clip = (0, _assign3.default)(clip, this.editModelClip);
            this.editor.changeElement(props, model);

            this.destroyEditModel();
        },
        cancel: function cancel() {
            this.destroyEditModel();
        }
    },
    events: {
        'editor.click': function editorClick(e) {
            e.preventDefault();
            if (this.clickLocked && !this.scaling) {
                var point = this.editor.pointFromEvent(e);
                var rect = _utils2.default.getElementRect(this.editModel, 1);
                if (!_utils2.default.pointInRect(point.x, point.y, rect)) {
                    this.save();
                }
            }
        },
        'editor.drag.active': function editorDragActive(element) {
            if (element !== this.editModel) {
                return;
            }

            this.clickLocked = false;

            var editModelClip = this.editModelClip;

            editModelClip._left = editModelClip.left;
            editModelClip._top = editModelClip.top;
        },
        'editor.drag.moving': function editorDragMoving(drag, element) {
            if (element !== this.editModel) {
                return;
            }

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

            var editModelClip = this.editModelClip;

            drag.dx += editModel.$snapValue.left;
            drag.dy += editModel.$snapValue.top;

            {
                var sin = Math.sin((360 - model.rotate) / 180 * Math.PI);
                var cos = Math.cos((360 - model.rotate) / 180 * Math.PI);

                var left = editModelClip._left - (drag.dx * cos - drag.dy * sin);
                var top = editModelClip._top - (drag.dx * sin + drag.dy * cos);

                if (element.$dragLimit) {
                    left = _utils2.default.clamp(left, -editModelInner.width, editModel.width);
                    top = _utils2.default.clamp(top, -editModelInner.height, editModel.height);
                }

                editModelClip.left = left;
                editModelClip.top = top;

                editModelClip.right = editModel.width - left - model.width;
                editModelClip.bottom = editModel.height - top - model.height;
            };
        },
        'editor.drag.inactive': function editorDragInactive() {
            var _this = this;

            this.clickLocked = false;
            delete this.editModelClip._left;
            delete this.editModelClip._top;
            setTimeout(function () {
                _this.clickLocked = true;
            }, 0);
        },
        'editor.transform.active': function editorTransformActive(element) {
            if (element !== this.editModel) {
                return;
            }

            this.clickLocked = true;

            var editModelClip = this.editModelClip;

            editModelClip._left = this.editModelClip.left;
            editModelClip._top = this.editModelClip.top;

            var editModelClipCache = (0, _cloneDeep3.default)(this.editModelClip);
            this.editModelClipCache = editModelClipCache;
        },
        'editor.transform.resizing': function editorTransformResizing(drag, element) {
            if (element !== this.editModel) {
                return;
            }

            var dir = drag.dir;
            var model = this.model;
            var editModel = this.editModel;

            var width = editModel.width - model.width;
            var height = editModel.height - model.height;
            var editModelClipCache = this.editModelClipCache;
            var editModelClip = this.editModelClip;

            if (dir.indexOf('w') > -1) {
                editModelClip.left = width - editModelClipCache.right;
            } else {
                editModelClip.right = width - editModelClipCache.left;
            }
            if (dir.indexOf('n') > -1) {
                editModelClip.top = height - editModelClipCache.bottom;
            } else {
                editModelClip.bottom = height - editModelClipCache.top;
            }
        },
        'editor.transform.inactive': function editorTransformInactive() {
            var _this2 = this;

            this.clickLocked = false;
            delete this.editModelClip._left;
            delete this.editModelClip._top;
            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;
    }
});
module.exports = exports['default'];