vue-poster-editor/lib/utils/alignment.js

A poster editor based on Vue.js

"use strict";

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


var Alignment = {
    alignmentTop: function alignmentTop(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.top += selectsRect.top - item.rect.top;
        });
    },
    alignmentMiddle: function alignmentMiddle(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.top += selectsRect.middle - item.rect.middle;
        });
    },
    alignmentBottom: function alignmentBottom(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.top += selectsRect.bottom - item.rect.bottom;
        });
    },
    alignmentLeft: function alignmentLeft(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.left += selectsRect.left - item.rect.left;
        });
    },
    alignmentCenter: function alignmentCenter(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.left += selectsRect.center - item.rect.center;
        });
    },
    alignmentRight: function alignmentRight(elementsRect, selectsRect) {
        elementsRect.forEach(function (item) {
            item.element.left += selectsRect.right - item.rect.right;
        });
    },
    distributionTop: function distributionTop(elementsRect, selectsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.top - second.rect.top;
        });

        var step = elementsRect.length - 1;
        var perHeight = (elementsRect[step].rect.top - elementsRect[0].rect.top) / step;

        elementsRect.forEach(function (item, index) {
            item.element.top += selectsRect.top + index * perHeight - item.rect.top;
        });
    },
    distributionMiddle: function distributionMiddle(elementsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.middle - second.rect.middle;
        });

        var step = elementsRect.length - 1;
        var perHeight = (elementsRect[step].rect.middle - elementsRect[0].rect.middle) / step;

        elementsRect.forEach(function (item, index) {
            item.element.top += elementsRect[0].rect.middle + index * perHeight - item.rect.middle;
        });
    },
    distributionBottom: function distributionBottom(elementsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.bottom - second.rect.bottom;
        });

        var step = elementsRect.length - 1;
        var perHeight = (elementsRect[step].rect.bottom - elementsRect[0].rect.bottom) / step;

        elementsRect.forEach(function (item, index) {
            item.element.top += elementsRect[0].rect.bottom + index * perHeight - item.rect.bottom;
        });
    },
    distributionLeft: function distributionLeft(elementsRect, selectsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.left - second.rect.left;
        });

        var step = elementsRect.length - 1;
        var perWidth = (elementsRect[step].rect.left - elementsRect[0].rect.left) / step;

        elementsRect.forEach(function (item, index) {
            item.element.left += selectsRect.left + index * perWidth - item.rect.left;
        });
    },
    distributionCenter: function distributionCenter(elementsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.center - second.rect.center;
        });

        var step = elementsRect.length - 1;
        var perWidth = (elementsRect[step].rect.center - elementsRect[0].rect.center) / step;

        elementsRect.forEach(function (item, index) {
            item.element.left += elementsRect[0].rect.center + index * perWidth - item.rect.center;
        });
    },
    distributionRight: function distributionRight(elementsRect) {
        elementsRect.sort(function (first, second) {
            return first.rect.right - second.rect.right;
        });

        var step = elementsRect.length - 1;
        var perWidth = (elementsRect[step].rect.right - elementsRect[0].rect.right) / step;

        elementsRect.forEach(function (item, index) {
            item.element.left += elementsRect[0].rect.right + index * perWidth - item.rect.right;
        });
    }
};

exports.default = {
    alignment: function alignment(direction, elements) {
        var _this = this;

        var elementsRect = elements.map(function (element) {
            return {
                element: element,
                rect: _this.getBBoxByElement(element)
            };
        });

        var selectsRect = elementsRect.reduce(function (preRect, current) {
            var rect = current.rect;


            rect.right = rect.left + rect.width;
            rect.bottom = rect.top + rect.height;
            rect.center = rect.left + rect.width / 2;
            rect.middle = rect.top + rect.height / 2;

            var top = Math.min(preRect.top, rect.top);
            var left = Math.min(preRect.left, rect.left);
            var right = Math.max(preRect.left + preRect.width, rect.right);
            var bottom = Math.max(preRect.top + preRect.height, rect.bottom);

            return {
                top: top,
                left: left,
                right: right,
                bottom: bottom,
                width: right - left,
                height: bottom - top,
                center: (left + right) / 2,
                middle: (top + bottom) / 2
            };
        }, elementsRect[0].rect);

        var doAlign = Alignment[direction];
        if (doAlign) {
            doAlign(elementsRect, selectsRect);
        }
    }
};
module.exports = exports["default"];