vue-poster-editor/lib/components/editor-image-croper.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 _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

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

var _utils2 = _interopRequireDefault(_utils);

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

var _vueInherit2 = _interopRequireDefault(_vueInherit);

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

var _editorElementEditor2 = _interopRequireDefault(_editorElementEditor);

var _editorImageCroper = require('./editor-image-croper.html');

var _editorImageCroper2 = _interopRequireDefault(_editorImageCroper);

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

exports.default = (0, _vueInherit2.default)(_editorElementEditor2.default, {
    template: _editorImageCroper2.default,
    props: ['model', 'currentElement', 'currentLayout', 'global'],
    data: function data() {
        return {
            type: 'croper',
            clickLocked: true,
            showGrid: false
        };
    },


    computed: {
        editModelInner: function editModelInner() {
            var model = this.model;
            if (!model) {
                return false;
            }
            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',
                active: true,

                $dragLimit: true,
                $customDragMove: true,
                height: model.height + padding[0] + padding[2],
                width: model.width + padding[1] + padding[3],
                left: model.left,
                top: model.top,
                resize: 7,
                rotatable: false,
                dragable: true,

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

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

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

            return editModelInner;
        }
    },

    watch: {},

    methods: {
        activeInnerEdit: function activeInnerEdit(e) {
            var editModelInner = this.editModelInner;
            this.editor.focusElement(editModelInner);
            editModelInner.active = true;

            this.$events.$emit('imageCroper.activeInner', e);
        },
        activeOuterEdit: function activeOuterEdit(e) {
            var _this = this;

            (0, _jquery2.default)(this.$el).off('mousedown');

            setTimeout(function () {
                _this.$events.$emit('transform.drag', e);
            }, 0);
        },
        updateInner: function updateInner() {
            var modelInner = this.editModelInner;

            if (modelInner.active) {
                var rotate = this.model.rotate;
                var editModel = this.editModel;
                var modelClip = this.editModelClip;

                var xOffset = (editModel.width - modelInner.width) / 2;
                var yOffset = (editModel.height - modelInner.height) / 2;

                var dx = modelInner.left - editModel.left - xOffset;
                var dy = modelInner.top - editModel.top - yOffset;

                var sin = Math.sin(rotate / 180 * Math.PI);
                var cos = Math.cos(rotate / 180 * Math.PI);

                var left = dx * cos + dy * sin;
                var top = -dx * sin + dy * cos;

                modelClip.left = left + xOffset;
                modelClip.top = top + yOffset;

                modelClip.right = editModel.width - (modelClip.left + modelInner.width);
                modelClip.bottom = editModel.height - (modelClip.top + modelInner.height);
            }
        }
    },
    events: {
        'editor.transform.active': function editorTransformActive() {
            this.showGrid = true;

            if (this.editModelInner.$resizeLimit) {
                this.editModelInner.$getResizeLimit = function (self) {
                    var resizeLimit = {
                        minWidth: 2,
                        minHeight: 2,
                        maxWidth: self.editModel.width - self.editModelClip.left,
                        maxHeight: self.editModel.height - self.editModelClip.top
                    };

                    return function (drag) {
                        if (drag.dir.indexOf('w') > -1) {
                            resizeLimit.maxWidth = self.editModel.width - self.editModelClip.right;
                        }
                        if (drag.dir.indexOf('n') > -1) {
                            resizeLimit.maxHeight = self.editModel.height - self.editModelClip.bottom;
                        }
                        return resizeLimit;
                    };
                }(this);
            }
        },
        'editor.transform.resizing': function editorTransformResizing(drag, element) {
            if (element === this.editModelInner) {
                this.updateInner();
            }
        },
        'editor.transform.inactive': function editorTransformInactive() {
            var _editModel = this.editModel,
                width = _editModel.width,
                height = _editModel.height;

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

            this.showGrid = false;
        },
        '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.drag.active': function editorDragActive(element) {
            if (element.type !== '$croper') {
                this.editor.$events.$emit('editor.edit.apply', this.editModel);
                return;
            }

            this.showGrid = true;

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

            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;
            };

            if (editModelInner) {
                if (editModelInner.active) {
                    editModelInner.snapBboxList = _utils2.default.getBBox(this.editModel);
                } else {
                    this.editModel.snapBboxList = _utils2.default.getBBox(editModelInner);
                }
            }
        },
        'editor.drag.moving': function editorDragMoving() {
            this.updateInner();
        },
        'editor.drag.inactive': function editorDragInactive() {
            this.showGrid = false;
        },
        'imageCroper.scale': function imageCroperScale(scale) {
            this.scaling = true;
            var model = this.model,
                editModel = this.editModel,
                editModelClip = this.editModelClip,
                editModelInner = this.editModelInner;


            var originWidth = model.$naturalWidth;
            var originHeight = model.$naturalHeight;

            var newWidth = originWidth * scale;
            var newHeight = originHeight * scale;
            var leftDiff = (editModel.width - newWidth) / 2;
            var topDiff = (editModel.height - newHeight) / 2;

            editModel.width = newWidth;
            editModel.height = newHeight;

            editModel.left = editModel.left + leftDiff;
            editModel.top = editModel.top + topDiff;

            editModelClip.top = editModelClip.top - topDiff;
            editModelClip.left = editModelClip.left - leftDiff;
            editModelClip.right = editModel.width - (editModelClip.left + editModelInner.width);
            editModelClip.bottom = editModel.height - (editModelClip.top + editModelInner.height);
        },
        'imageCroper.scaleEnd': function imageCroperScaleEnd() {
            delete this.scaling;
        },
        'imageCroper.activeInner': function imageCroperActiveInner() {
            this.editor.focusElement(this.editModelInner);

            if (!this.editModelInner.active) {
                this.activeInnerEdit();
            }
        },
        'imageCroper.activeOuter': function imageCroperActiveOuter() {
            if (this.editModelInner.active) {
                this.editor.focusElement(this.editModel);
            }
        }
    },

    mounted: function mounted() {
        var _this2 = this;

        this.editor.focusElement(this.editModel);

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