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;
};

export class ToolbarItem {
  component: any;
  getValue?: (c: DesignComp) => any;
  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[];
  MultiSelector: ToolbarItem[];
};

export 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 multiSelToolbar = createToolbars({
  // 删除
  delete: {
    component: TipIcons.Delete,
    getVisible() {
      return true;
    },
    onClick() {
      this.actions.removeSelectComps();
    },
  },
  // // 清除变换
  // clearTransform: {
  //   component: TipIcons.ClearTransform,
  //   getVisible() {
  //     return true;
  //   },
  //   onClick() {
  //     //this.actions.clearCompTransform(comp);
  //   },
  // },
  // // 定位图层上移
  // layerUp: {
  //   component: TipIcons.LayerUp,
  //   getVisible() {
  //     return true;
  //   },
  //   onClick() {
  //     // this.actions.setCompLayer(comp, 1);
  //   },
  // },
  // // 定位图层下移
  // layerDown: {
  //   component: TipIcons.LayerDown,
  //   getVisible() {
  //     return true;
  //   },
  //   onClick() {
  //     // this.actions.setCompLayer(comp, -1);
  //   },
  // },
});

export const toolbars = createToolbars({
  // 重命名
  rename: {
    component: TipIcons.Rename,
    onClick(comp) {
      this.actions.resetCompName(comp);
    },
  },
  // 显示/隐藏
  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);
    },
  },
  // 编辑模式
  editor: {
    component: TipIcons.Edit,
    getVisible(comp) {
      return false; // comp.compKey == "Polygon" && !this.store.compEditMode
    },
    onClick(comp) {
      console.log("clicked edit");
      // this.actions.setCompPosition(comp);
      this.store.compEditMode = true;
      this.store.compEditReslut = -1;
    },
  },

  ok: {
    component: TipIcons.Right,
    getVisible(comp) {
      return this.store.compEditMode;
    },
    onClick(comp) {
      console.log("clicked ok ");
      this.store.compEditReslut = 1;
      this.store.compEditMode = false;
    },
  },

  cancel: {
    component: TipIcons.Cross,
    getVisible(comp) {
      return this.store.compEditMode;
    },
    onClick(comp) {
      console.log("clicked cancel ");
      // this.actions.setCompPosition(comp);
      this.store.compEditReslut = -1;
      this.store.compEditMode = false;
    },
  },

  // 全屏尺寸
  fullWidth: {
    component: TipIcons.FullWidth,
    getVisible: (comp) => !!comp && !comp.isTransformed && !comp.isFullWidth,
    onClick(comp) {
      this.actions.fullCompWidth(comp);
    },
  },
  // 清除变换
  clearTransform: {
    component: TipIcons.ClearTransform,
    getVisible: (comp) => !!comp && comp.isTransformed(),
    onClick(comp) {
      this.actions.clearCompTransform(comp);
    },
  },
  // 定位图层上移
  layerUp: {
    component: TipIcons.LayerUp,
    getVisible: (comp) => true,
    onClick(comp) {
      this.actions.setCompLayer(comp, 1);
    },
  },
  // 定位图层下移
  layerDown: {
    component: TipIcons.LayerDown,
    getVisible: (comp) => true,
    onClick(comp) {
      this.actions.setCompLayer(comp, -1);
    },
  },
  // 切换到父组件
  parentComp: {
    component: TipIcons.ParentComp,
    getVisible(comp) {
      return !!comp && !this.helper.isCustomChildComp(comp);
    },
    onClick(comp) {
      this.actions.pickParentComp(comp.id);
    },
  },
  // 保存为组件
  saveAsComp: {
    component: TipIcons.SaveAsComp,
    getVisible(comp) {
      return !!comp && this.helper.isShowSaveComp(comp);
    },
    async onClick(comp) {
      if (!comp) return;
      await this.actions.saveAsComp(comp);
      this.controls.compUICtrl.init();
    },
  },
  // 取消打组
  cancelGroup: {
    component: TipIcons.CancelGroup,
    getVisible(comp) {
      return (
        !!comp &&
        comp.compKey == "Group" &&
        this.store.selected.length == 1 &&
        this.helper.isStreamCardChild(comp.id)
      );
    },
    onClick(comp) {
      if (!comp) return;
      this.actions.cancelGroupComps(comp);
    },
  },
  // 打组
  createGroup: {
    component: TipIcons.CreateGroup,
    getVisible() {
      return this.store.selected.length > 1;
    },
    onClick() {
      console.log("打组");
      this.actions.createGroupComps();
    },
  },

  //图片裁剪
  imageCropper: {
    component: TipIcons.Cropper,
    getVisible(comp) {
      return this.store.currComp.compKey == "Image";
    },
    onClick(comp) {
      this.controls.cropCtrl.croppImage(this.store.currComp.id);
    },
  },
});