queenshow/src/modules/editor/objects/Toolbars/layout.ts

import { TipIcons } from "../../components/TipIcons";
import { createToolbars } from "./default";


export const LayoutToolbars = createToolbars({
    xLeft: {
        component: TipIcons.AlignXLeft,
        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignX(0);
        },
    },
    xCenter: {
        component: TipIcons.AlignXCenter,
        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignX(1);
        },
    },
    xRight: {
        component: TipIcons.AlignXRight,

        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignX(2);
        },
    },
    xBetween: {
        component: TipIcons.AlignXBetween,

        getVisible(comp) { return this.store.selected.length > 2 },
        onClick(comp) {
            this.actions.setAlignX(3);
        },
    },

    yBetween: {
        component: TipIcons.AlignYBetween,
        getVisible(comp) { return this.store.selected.length > 2 },
        onClick(comp) {
            this.actions.setAlignY(3);
        },
    },

    YTop: {
        component: TipIcons.AlignYTop,

        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignY(0);
        },
    },
    YCenter: {
        component: TipIcons.AlignYCenter,

        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignY(1);
        },
    },
    YBottom: {
        component: TipIcons.AlignYBottom,
        getVisible(comp) { return this.store.selected.length > 0 },
        onClick(comp) {
            this.actions.setAlignY(2);
        },
    },

    Copy: {
        component: TipIcons.Copy,
        getVisible(comp) { return !!this.store.lastSelected },
        onClick(comp) {
            this.actions.copyLastSelected();
        },
    },
    SameWidth: {
        component: TipIcons.SameWidth,
        getVisible(comp) { return this.store.selected.length > 1 && !!this.store.lastSelected },
        onClick(comp) {
            this.actions.setSameSize(true);
        },
    },
    SameHeight: {
        component: TipIcons.SameHeight,
        getVisible(comp) { return this.store.selected.length > 1 && !!this.store.lastSelected },
        onClick(comp) {
            this.actions.setSameSize(false);
        },
    },
});