@aurigma/design-atoms/Commands/ItemsCommands/DistributeItemsCommand.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

import { NotImplementedException } from "@aurigma/design-atoms-model/Exception";
import { BaseItemsCommand } from "./BaseItemsCommand";
import { PlaceholderItemHandler } from "../../ItemHandlers/PlaceholderItemHandler";
import { LayoutItemHandler } from "../../ItemHandlers/LayoutItemHandler";
import { RectangleF } from "@aurigma/design-atoms-model/Math";
import { DistributeType } from "@aurigma/design-atoms-interfaces";
export class DistributeItemsCommand extends BaseItemsCommand {
    constructor(_canvas, productHandler, historyArgs, args) {
        super(productHandler, historyArgs, args);
        this._canvas = _canvas;
    }
    async _executeCommandBody() {
        const targetItems = this._getTargetItems(this._args.items, this._args.query, this._args.queryOptions);
        if (targetItems.length < 3)
            return;
        if (this._canvas != null)
            this._canvas.pauseRedraw();
        try {
            this._distributeItemHandler(targetItems, this._args.distribute);
        }
        finally {
            if (this._canvas != null)
                this._canvas.continueRedraw();
        }
    }
    redo() {
        throw new NotImplementedException();
    }
    undo() {
        throw new NotImplementedException();
    }
    _distributeItemHandler(items, distribute) {
        const itemHandlers = items.map((item) => {
            return this._productHandler.getHandler(item);
        }).filter(handler => !handler.locked &&
            (distribute === DistributeType.horizontal && handler.getPermissions().allowMoveHorizontal
                || distribute === DistributeType.vertical && handler.getPermissions().allowMoveVertical));
        const boundsRectangle = RectangleF.getOverallBounds(itemHandlers.map(h => h.bounds));
        const boundsHeight = boundsRectangle.height;
        const boundsWidth = boundsRectangle.width;
        if (distribute === DistributeType.horizontal) {
            const totalItemsWidth = itemHandlers.reduce((acc, itemHandler) => {
                return acc + itemHandler.bounds.width;
            }, 0);
            const spacingW = (boundsWidth - totalItemsWidth) / (itemHandlers.length - 1);
            const handlersSortedX = itemHandlers.slice(0).sort((handler1, handler2) => {
                return handler1.bounds.center.x - handler2.bounds.center.x;
            });
            for (let i = 1; i < handlersSortedX.length - 1; i++) {
                const itemHandler = handlersSortedX[i];
                const itemCenterOld = itemHandler.bounds.center;
                const itemBounds = itemHandler.bounds;
                const itemHandlerPrevious = handlersSortedX[i - 1];
                const itemPreviousBounds = itemHandlerPrevious.bounds;
                const newCenterX = itemPreviousBounds.right + spacingW + itemBounds.width / 2;
                let itemRectangle = itemHandler.rectangle;
                itemRectangle.centerX = newCenterX;
                this._updateItemRectangle(itemHandler, itemRectangle, itemCenterOld);
            }
        }
        if (distribute === DistributeType.vertical) {
            const totalItemsHeight = itemHandlers.reduce((acc, itemHandler) => {
                return acc + itemHandler.bounds.height;
            }, 0);
            const spacingH = (boundsHeight - totalItemsHeight) / (itemHandlers.length - 1);
            const handlersSortedY = itemHandlers.slice(0).sort((handler1, handler2) => {
                return handler1.bounds.center.y - handler2.bounds.center.y;
            });
            for (let i = 1; i < handlersSortedY.length - 1; i++) {
                const itemHandler = handlersSortedY[i];
                const itemCenterOld = itemHandler.bounds.center;
                const itemBounds = itemHandler.bounds;
                const itemHandlerPrevious = handlersSortedY[i - 1];
                const itemPreviousBounds = itemHandlerPrevious.bounds;
                const newCenterY = itemPreviousBounds.bottom + spacingH + itemBounds.height / 2;
                let itemRectangle = itemHandler.rectangle;
                itemRectangle.centerY = newCenterY;
                this._updateItemRectangle(itemHandler, itemRectangle, itemCenterOld);
            }
        }
        this._canvas.updateSelection();
        this._canvas.redraw();
    }
    _updateItemRectangle(itemHandler, rectangle, centerOld) {
        if (itemHandler instanceof PlaceholderItemHandler) {
            itemHandler.setRectangle(rectangle, null, true);
            itemHandler.updateContentAndFrames(function (contentHandler) {
                var rect = contentHandler.rectangle;
                rect.centerX += (rectangle.centerX - centerOld.x);
                rect.centerY += (rectangle.centerY - centerOld.y);
                contentHandler.setRectangle(rect);
            });
        }
        else if (itemHandler instanceof LayoutItemHandler) {
            itemHandler.setRectangle(rectangle, null, true);
        }
        else {
            itemHandler.setRectangle(rectangle);
        }
        itemHandler.update();
    }
}
//# sourceMappingURL=DistributeItemsCommand.js.map