vue-poster-editor/lib/canvas/editor-element-text.js

A poster editor based on Vue.js

'use strict';

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

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

var _vueInherit2 = _interopRequireDefault(_vueInherit);

var _editorTextBase = require('./editor-text-base');

var _editorTextBase2 = _interopRequireDefault(_editorTextBase);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function syncRect() {
    this.syncRect();
}

exports.default = (0, _vueInherit2.default)(_editorTextBase2.default, {
    computed: {
        reverseTextEffects: function reverseTextEffects() {
            return [].concat(_toConsumableArray(this.model.textEffects)).reverse();
        },
        effectedTextEffects: function effectedTextEffects() {
            return this.reverseTextEffects.filter(function (effect) {
                return effect.enable !== false;
            });
        },
        effectStyles: function effectStyles() {
            var _this = this;

            return this.effectedTextEffects.map(function (effect) {
                return Object.assign({}, _this.textStyle, _this.getEffectStyle(effect));
            });
        }
    },
    methods: {
        getEffectStyle: function getEffectStyle(effect) {
            var zoom = this.global.zoom;
            var style = {};

            if (effect.offset) {
                if (effect.offset.x) {
                    style.left = effect.offset.x * zoom + 'px';
                }

                if (effect.offset.y) {
                    style.top = effect.offset.y * zoom + 'px';
                }
            }

            if (effect.stroke && effect.stroke.enable !== false) {
                if (effect.stroke && effect.stroke.width) {
                    style['textStroke'] = effect.stroke.width * zoom + 'px ' + effect.stroke.color;
                }
            }

            if (effect.shadow && effect.shadow.enable !== false) {
                var shadow = effect.shadow;
                style.textShadow = shadow.offsetX * zoom + 'px ' + shadow.offsetY * zoom + 'px ' + shadow.blur * zoom + 'px ' + shadow.color;
            }

            if (effect.skew && effect.skew.enable !== false) {
                if (effect.skew.x || effect.skew.y) {
                    style.transform = 'skew(' + effect.skew.x + 'deg, ' + effect.skew.y + 'deg)';
                }
            }

            if (effect.filling && effect.filling.enable !== false) {
                var filling = effect.filling;

                if (filling.type === 0) {
                    style.webkitTextFillColor = filling.color;
                }

                if (filling.type === 1 && filling.imageContent && filling.imageContent.image) {
                    var imageContent = filling.imageContent;

                    style.webkitBackgroundClip = 'text';
                    style.webkitTextFillColor = 'transparent';
                    style.backgroundImage = 'url(' + imageContent.image + ')';

                    style.backgroundRepeat = ['no-repeat', 'repeat'][imageContent.repeat || 0];

                    var width = imageContent.width,
                        height = imageContent.height,
                        scaleX = imageContent.scaleX,
                        scaleY = imageContent.scaleY;

                    if (width && height) {
                        style.backgroundSize = width * zoom * scaleX + 'px ' + height * zoom * scaleY + 'px';
                    }
                }

                if (filling.type === 2) {
                    style.webkitBackgroundClip = 'text';
                    style.webkitTextFillColor = 'transparent';

                    var result = [];
                    var gradient = filling.gradient;

                    result.push(90 - gradient.angle + 'deg');

                    gradient.stops.forEach(function (item) {
                        result.push(item.color + ' ' + item.offset * 100 + '%');
                    });

                    var gradientString = result.join(',');
                    style.backgroundImage = 'linear-gradient(' + gradientString + ')';
                }
            }

            return style;
        },
        scaleEffect: function scaleEffect(ratio) {
            this.model.textEffects.forEach(function (effect) {
                var offset = effect.offset,
                    stroke = effect.stroke,
                    shadow = effect.shadow,
                    filling = effect.filling;

                offset.x *= ratio;
                offset.y *= ratio;
                stroke.width *= ratio;
                shadow.offsetX *= ratio;
                shadow.offsetY *= ratio;

                if (filling.type === 1) {
                    var _filling$imageContent = filling.imageContent,
                        scaleX = _filling$imageContent.scaleX,
                        scaleY = _filling$imageContent.scaleY;

                    filling.imageContent.scaleX = Math.max(1e-2, scaleX * ratio) || 1;
                    filling.imageContent.scaleY = Math.max(1e-2, scaleY * ratio) || 1;
                }
            });
        }
    },
    watch: {
        'model.fontSize': function modelFontSize(val, oldVal) {
            if (this.options.mode === 'preview') {
                return;
            }

            this.scaleEffect(val / oldVal || 1);

            if (this.$textResizeMeta) {
                this.syncRect();
                return;
            }

            var parentModel = this.$parent.model;
            if (parentModel && parentModel.type === 'group' && parentModel.autoGrow) {
                var ratio = val / oldVal || 1;
                this.$events.$emit('editor.groupContent.scale', parentModel, ratio);
                this.syncRect();
                return;
            }

            if (this.model.autoScale) {
                var _ratio = val / oldVal || 1;
                var width = this.model.width * _ratio;

                if (this.model.textAlign === 'center') {
                    this.model.left -= (width - this.model.width) / 2;
                } else if (this.model.textAlign === 'right') {
                    this.model.left -= width - this.model.width;
                }

                this.model.width = width;
                this.model.height = this.model.height * _ratio;

                this.syncRect();

                if (parentModel && parentModel.type === 'group') {
                    this.$events.$emit('editor.groupBounding.reset', parentModel);
                }
            }
        },
        'model.writingMode': function modelWritingMode() {
            if (this.options.mode === 'preview') {
                return;
            }

            var model = this.model;

            var newResize = {
                2: 4, 4: 2, 5: 3, 3: 5
            }[model.resize];
            if (newResize) {
                model.resize = newResize;
            }

            var _ref = [model.height, model.width];
            model.width = _ref[0];
            model.height = _ref[1];


            this.syncRect();
        },


        'model.contents': syncRect,

        'model.letterSpacing': syncRect,

        'model.lineHeight': syncRect,

        'model.padding': syncRect
    },
    mounted: function mounted() {
        this.syncRect();
    }
});
module.exports = exports['default'];