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

A poster editor based on Vue.js

'use strict';

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

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 _transform = require('../utils/transform');

var _transform2 = _interopRequireDefault(_transform);

var _canvas = require('../utils/canvas');

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

var _editorElementEditorMask2 = _interopRequireDefault(_editorElementEditorMask);

var _editorMaskEditor = require('./editor-mask-editor.html');

var _editorMaskEditor2 = _interopRequireDefault(_editorMaskEditor);

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

exports.default = (0, _vueInherit2.default)(_editorElementEditorMask2.default, {
    template: _editorMaskEditor2.default,
    props: ['model', 'currentElement', 'currentLayout', 'global'],
    data: function data() {
        return {
            type: 'masker'
        };
    },


    computed: {
        modelTransform: function modelTransform() {
            return this.editModelInner.transform;
        },
        editModelTransform: function editModelTransform() {
            return this.editModel.transform;
        },
        maskTransform: function maskTransform() {
            var transform = new _transform2.default();
            var zoom = this.zoom;
            var editModelInner = this.editModelInner;
            var editModel = this.editModel;
            transform.rotation = editModelInner.rotation - editModel.rotation;

            var rotate = editModel.rotate;

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

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

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

            transform.position.x = (xOffset - (dx * cos + dy * sin)) * zoom;
            transform.position.y = (yOffset - (dy * cos - dx * sin)) * zoom;
            return transform;
        },
        innerStyle: function innerStyle() {
            var result = {
                position: 'absolute',
                zIndex: 2,
                height: this.zoom * this.editModelInner.height + 'px',
                width: this.zoom * this.editModelInner.width + 'px',
                left: '1px',
                top: '1px',
                borderRadius: this.borderRadius,
                transform: this.maskTransform.toString()
            };

            this.$events.$emit('editor.croper.update', result);

            return result;
        }
    },

    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);
        },
        getContext: function getContext() {
            if (this.$context) {
                return this.$context;
            }

            var canvas = (0, _canvas.createCanvas)(100, 100);

            this.$context = canvas.getContext('2d');

            var bgImg = new Image();
            bgImg.crossOrigin = 'Anonymous';

            this.$bgImg = bgImg;
            bgImg.style.cssText = 'width:100%; height:100%; opacity:0.5;';

            var shell = (0, _jquery2.default)('.editor-mask-editor-main', this.$el);

            shell.html('').append(bgImg).append(canvas);

            return this.$context;
        },
        render: function render() {
            var _this2 = this;

            var context = this.getContext();

            var editModelInner = this.editModelInner;
            var fitCrossOrigin = this.options.fitCrossOrigin;

            return _bluebird2.default.all([_utils2.default.loadImage(editModelInner.url, fitCrossOrigin), _utils2.default.loadImage(editModelInner.mask, fitCrossOrigin)]).spread(function (image, mask) {
                context.$img = image;
                context.$mask = mask;

                _this2.$bgImg.src = image.src;

                _this2.updateStage();

                return context;
            });
        },
        updateStage: function updateStage() {
            var context = this.getContext();
            var canvas = context.canvas;
            var mask = context.$mask;
            var img = context.$img;

            if (!mask) {
                return;
            }

            var editModel = this.editModel;
            var editModelInner = this.editModelInner;
            var zoom = this.zoom;
            var position = this.maskTransform.position;

            var imageWidth = editModel.width,
                imageHeight = editModel.height;
            var width = editModelInner.width,
                height = editModelInner.height;
            var x = position.x,
                y = position.y;

            var canvasWidth = Math.round(imageWidth);
            var canvasHeight = Math.round(imageHeight);

            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

            context.clearRect(0, 0, canvasWidth, canvasHeight);

            var imageCenter = {
                x: x / zoom + width / 2,
                y: y / zoom + height / 2
            };

            var imageSize = {
                width: width,
                height: height
            };

            context.globalAlpha = 1;

            (0, _canvas.drawImageToCanvas)(canvas, mask, imageCenter, imageSize, this.maskTransform.rotation, 'source-over');

            context.globalCompositeOperation = 'source-in';
            context.drawImage(img, 0, 0, imageWidth, imageHeight);
        }
    },

    watch: {
        'editModel.width': function editModelWidth() {
            this.updateStage();
        },
        'editModel.height': function editModelHeight() {
            this.updateStage();
        },
        'editModel.left': function editModelLeft() {
            this.updateStage();
        },
        'editModel.top': function editModelTop() {
            this.updateStage();
        },
        'editModel.rotate': function editModelRotate() {
            this.updateStage();
        },
        'editModelInner.width': function editModelInnerWidth() {
            this.updateStage();
        },
        'editModelInner.height': function editModelInnerHeight() {
            this.updateStage();
        },
        'editModelInner.left': function editModelInnerLeft() {
            this.updateStage();
        },
        'editModelInner.top': function editModelInnerTop() {
            this.updateStage();
        },
        'editModelInner.rotate': function editModelInnerRotate() {
            this.updateStage();
        }
    },

    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();
                }
            }
        },
        'imageCroper.scale': function imageCroperScale(scale) {
            this.scaling = true;
            var model = this.model,
                editModel = this.editModel;


            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;
        },
        '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() {
        this.render();
    }
});
module.exports = exports['default'];