vue-poster-editor/lib/widgets/editor-percentage-scaler.js

A poster editor based on Vue.js

'use strict';

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

var _editorPercentageScaler = require('./editor-percentage-scaler.html');

var _editorPercentageScaler2 = _interopRequireDefault(_editorPercentageScaler);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

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

var _utils2 = _interopRequireDefault(_utils);

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

var BAR_WIDTH = 150;
var MIN_IMAGE_SIZE = 20;
var MAX_SCALE = 2;
var DRAG_OFFSET_SCALER = 5;

exports.default = {

    template: _editorPercentageScaler2.default,

    props: [],

    data: function data() {
        return {
            upperBound: MAX_SCALE,
            isDragging: false,
            elementLoaded: false,
            scale: null
        };
    },


    computed: {
        scaleOffset: function scaleOffset() {
            if (!this.scale) {
                return 0;
            }

            return this.scale / this.upperBound * BAR_WIDTH;
        },
        scalePercentage: function scalePercentage() {
            if (!this.scale) {
                return 0;
            }

            return (this.scale * 100).toFixed(0) + '%';
        },
        editor: function editor() {
            return this.$parent.editor;
        },
        hasCropButton: function hasCropButton() {
            return this.editor.options.cropperOptions.switchable;
        },
        isInnerActive: function isInnerActive() {
            if (!this.editor.currentElement) {
                return false;
            }
            return this.editor.currentElement.resize === 7;
        }
    },

    methods: {
        beginScale: function beginScale(e) {
            var _this = this;

            var $win = (0, _jquery2.default)(window);
            var baseX = e.pageX;
            var baseScale = this.scale;
            this.isDragging = true;

            var _editor = this.editor,
                currentElement = _editor.currentElement,
                currentEditMask = _editor.currentEditMask;

            var naturalWidth = void 0,
                naturalHeight = void 0;
            if (currentElement.type === '$croper') {
                naturalWidth = currentElement.$naturalWidth;
                naturalHeight = currentElement.$naturalHeight;
            } else {
                naturalWidth = currentEditMask.$naturalWidth;
                naturalHeight = currentEditMask.$naturalHeight;
            }

            var minRatio = MIN_IMAGE_SIZE / Math.min(naturalWidth, naturalHeight);

            var moveHandler = function moveHandler(e) {
                if (!naturalHeight || !naturalWidth) {
                    return;
                }

                var offset = e.pageX - baseX;
                var ratio = offset / DRAG_OFFSET_SCALER * _this.upperBound / BAR_WIDTH;
                var newScale = _utils2.default.clamp(baseScale + ratio, minRatio, _this.upperBound);
                _this.scale = newScale > 0.97 && newScale < 1.03 ? 1 : newScale;
                _this.$events.$emit('imageCroper.scale', _this.scale);
            };

            $win.on('mousemove', moveHandler);
            $win.one('mouseup', function (e) {
                e.preventDefault();
                e.stopPropagation();
                _this.isDragging = false;
                setTimeout(function () {
                    _this.$events.$emit('imageCroper.scaleEnd');
                }, 0);
                $win.off('mousemove', moveHandler);
            });
        },
        seek: function seek(e) {
            var newScale = e.offsetX / BAR_WIDTH * this.upperBound;
            this.scale = newScale;
            this.$events.$emit('imageCroper.scale', this.scale);
        },
        scaleImage: function scaleImage() {
            this.$events.$emit('imageCroper.scale', this.scale);
        },
        switchCropper: function switchCropper(e) {
            e.preventDefault();
            e.stopPropagation();
            var name = this.isInnerActive ? 'imageCroper.activeOuter' : 'imageCroper.activeInner';
            this.$events.$emit(name);
        }
    },

    events: {
        'editor.element.loaded': function editorElementLoaded(element) {
            var type = element.type;
            var editor = this.editor;


            if (type !== 'image' && type !== 'mask') {
                return;
            }

            if (element.$naturalWidth || element.$naturalHeight) {
                this.elementLoaded = true;
            }

            var model = this.editor.currentCropElement || this.editor.currentEditMask;

            var currentWidth = void 0,
                baseWidth = void 0,
                baseHeight = void 0,
                currentHeight = void 0;

            if (editor.currentElement.type === '$croper') {
                baseWidth = editor.currentCropElement.$naturalWidth;
                baseHeight = editor.currentCropElement.$naturalHeight;
                var _ref = [model.width, model.height];
                currentWidth = _ref[0];
                currentHeight = _ref[1];

                if (model.clip) {
                    currentWidth = currentWidth + model.clip.left + model.clip.right;
                    currentHeight = currentHeight + model.clip.top + model.clip.bottom;
                }
            } else {
                baseWidth = editor.currentEditMask.$naturalWidth;
                baseHeight = editor.currentEditMask.$naturalHeight;
                currentWidth = editor.currentEditMask.imageWidth;
                currentHeight = editor.currentEditMask.imageHeight;
            }

            var newScale = Math.max(currentWidth / baseWidth, currentHeight / baseHeight);
            this.upperBound = Math.max(newScale, MAX_SCALE);
            this.scale = newScale;
        },
        'imageCroper.resizeEnd': function imageCroperResizeEnd(_ref2) {
            var width = _ref2.width;
            var _editor2 = this.editor,
                currentElement = _editor2.currentElement,
                currentEditMask = _editor2.currentEditMask;

            var naturalWidth = void 0;

            if (currentElement.type === '$croper') {
                naturalWidth = currentElement.$naturalWidth;
            } else {
                naturalWidth = currentEditMask.$naturalWidth;
            }

            this.scale = Math.min(this.upperBound, width / naturalWidth);
        }
    }
};
module.exports = exports['default'];