import { TipIcons } from "../../components/TipIcons"; import { EditorModule } from "../../module"; import { ICompKeys } from "../../typings"; import { DesignComp } from "../DesignTemp/DesignComp"; function getVisible(this: EditorModule, comp: DesignComp) { return !!comp; } type ItemParams = Pick & { getVisible?: typeof getVisible; }; class ToolbarItem { component: any; getValue?: (c: DesignComp) => number; onClick: (this: EditorModule, c: DesignComp) => void; getVisible!: typeof getVisible; constructor(data: ItemParams) { this.component = data.component; this.getValue = data.getValue; this.onClick = data.onClick; this.getVisible = data.getVisible || getVisible; return; } setVisible(cb: typeof getVisible) { const item = new ToolbarItem(this); item.getVisible = cb; return item; } } export type ICompToolbars = { [name in ICompKeys]?: ToolbarItem[] } & { default: ToolbarItem[]; }; function createToolbars>(obj: T) { const data: any = {}; Object.entries(obj).forEach(([key, value]) => { data[key] = new ToolbarItem(value); }); return data as { [name in keyof T]: ToolbarItem }; } export const toolbars = createToolbars({ // 显示/隐藏 visible: { component: TipIcons.Visible, getValue: (comp) => (comp.layout.visible !== false ? 0 : 1), onClick(comp) { this.actions.setCompVisible(comp); }, }, // 锁定 lock: { component: TipIcons.Lock, getValue: (comp) => (comp ? 0 : 1), onClick(comp) { this.actions.setCompLock(comp); }, }, // 删除 delete: { component: TipIcons.Delete, getVisible(comp) { return this.helper.isCompCanDelete(comp.id); }, onClick(comp) { this.actions.removeComp(comp.id); }, }, // 对齐 align: { component: TipIcons.Align, getVisible: (comp) => !comp.isPostioned() && !comp.isFullWidth(), getValue: (comp) => ["start", "center", "end"].indexOf(comp.layout.alignSelf || "start"), onClick(comp) { const vals = ["start", "center", "end"]; let index = vals.indexOf(comp.layout.alignSelf || "start"); this.actions.setCompAlign(comp, vals[++index % 3]); }, }, // 绝对定位 position: { component: TipIcons.Position, getVisible(comp) { return this.helper.isCustomChildComp(comp); }, getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0), onClick(comp) { this.actions.setCompPosition(comp); }, }, // 全屏尺寸 fullWidth: { component: TipIcons.FullWidth, getVisible: (comp) => !comp.isTransformed && !comp.isFullWidth, onClick(comp) { this.actions.fullCompWidth(comp); }, }, // 清除变换 clearTransform: { component: TipIcons.ClearTransform, getVisible: (comp) => comp.isTransformed(), onClick(comp) { this.actions.clearCompTransform(comp); }, }, // 定位图层上移 layerUp: { component: TipIcons.LayerUp, getVisible: (comp) => comp.isPostioned(), onClick(comp) { this.actions.setCompLayer(comp, 1); }, }, // 定位图层下移 layerDown: { component: TipIcons.LayerDown, getVisible: (comp) => comp.isPostioned(), onClick(comp) { this.actions.setCompLayer(comp, -1); }, }, // 切换到父组件 parentComp: { component: TipIcons.ParentComp, getVisible(comp) { return !this.helper.isCustomChildComp(comp); }, onClick(comp) { this.actions.pickParentComp(comp.id); }, }, // 保存为组件 saveAsComp: { component: TipIcons.SaveAsComp, getVisible(comp) { return this.helper.isShowSaveComp(comp); }, onClick(comp) { this.actions.saveAsComp(comp); }, }, // 取消打组 cancelGroup: { component: TipIcons.CancelGroup, onClick(comp) { this.actions.cancelGroupComps(comp); }, } });