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

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<ToolbarItem, "getValue" | "component" | "onClick"> & {
  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<T extends Record<string, ItemParams>>(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);
    },
  }
});