drawing-board-service/src/example/components/slide/actions.ts

import { DrawItem, shapeNames, ShapeType } from "@/index";
import { v4 as uuid } from "uuid";
import { getAMapInfo } from "../../dialog/basemap";
import { getImageSize } from "@/utils/shape";
import { selectAI } from "../../dialog/ai";
import { drawPlatformResource } from "../../platform/platform-draw";
import { selectFile } from "@/utils/dom";
import { getImage } from "@/utils/resource";
import { Draw } from "../container/use-draw";
import { MenuItem } from "./menu";
import { copy } from "@/utils/shared";
import { ElMessage } from "element-plus";


export type PresetAdd<T extends ShapeType = ShapeType> = {
  type: T;
  preset?: Partial<DrawItem<T>>;
};


const genDrawItem = <T extends ShapeType>(
  type: T,
  preset: PresetAdd<T>["preset"] = {}
) => ({
  name: shapeNames[type],
  value: uuid(),
  payload: { type, preset },
});

export const draw: MenuItem = {
  icon: "line_d",
  name: "绘制",
  value: uuid(),
  children: [
    { icon: "line", ...genDrawItem('sequentLine') },
    { icon: "line", ...genDrawItem('line') },
    { icon: "arrows", ...genDrawItem("arrow") },
    { icon: "rectangle", ...genDrawItem("rectangle") },
    { icon: "circle", ...genDrawItem("circle") },
    { icon: "triangulartriangular", ...genDrawItem("triangle") },
    { icon: "line", ...genDrawItem("polygon") },
  ],
};

export const text: MenuItem = {
  icon: "text",
  ...genDrawItem("text", { content: "文本" }),
};

export const table: MenuItem = {
  icon: "table",
  ...genDrawItem("table", {}),
};

export const serial: MenuItem = {
  icon: "order_no",
  ...genDrawItem("serial", { content: "1" }),
};

export const imp: MenuItem = {
  icon: 'import',
  name: "导入",
  value: uuid(),
  children: [
    {
      value: uuid(),
      icon: "scene_i",
      name: "场景",
      handler: async (draw: Draw) => {
        const aiData = await selectAI();
        drawPlatformResource(aiData, draw);
      }
    },
    {
      value: uuid(),
      icon: "local_i",
      name: "本地",
      handler: async (draw: Draw) => {
        const files = await selectFile(false, 'image/jpeg,image/png')
        const url = await window.platform.uploadResourse(files[0])
        const image = await getImage(url)
        ElMessage.warning('请在画图面板中选择放置位置，鼠标右键取消')

        draw.enterDrawShape('image', {
          width: image.width,
          height: image.height,
          url
        }, true)
      }
    }
  ]
}

export const getPaperConfig = (p: number[], scale: number) => {
  const pad = 5 * scale;
  const size = { width: p[0] * scale, height: p[1] * scale };
  const margin = [pad, pad, pad, pad * 5];
  return {size, margin}
}
export const paperConfigs = {
  'a4': { size: [297, 210], scale: 3.8 },
  'a3': { size: [420, 297], scale: 2.5 }
}

const setPaper = (draw: Draw, p: number[], scale: number) => {
  const { size, margin } = getPaperConfig(p, scale)
  // draw.config.size = size;
  draw.viewer.setViewSize(size)
  draw.config.back = { color: "#fff", opacity: 1 };
  draw.config.border = {
    margin: margin,
    lineWidth: 1,
    color: "#000",
    opacity: 1,
  };
  draw.config.margin = margin;
};

export const paper = {
  icon: "drawing",
  name: "纸张",
  type: 'sub-menu-horizontal',
  value: uuid(),
  children: [
    // {
    //   value: uuid(),
    //   icon: "A4_v",
    //   key: 'a4',
    //   name: "A4竖版",
    //   handler: (draw: Draw) => setPaper(draw, [210, 297], 2.8),
    // },
    {
      value: uuid(),
      icon: "A4_h",
      key: 'a4',
      name: "A4横版",
      handler: (draw: Draw) => setPaper(draw, paperConfigs.a4.size, paperConfigs.a4.scale),
    },
    // {
    //   value: uuid(),
    //   icon: "A3_v",
    //   key: 'a3',
    //   name: "A3竖版",
    //   handler: (draw: Draw) => setPaper(draw, [297, 450], 1.8),
    // },
    {
      value: uuid(),
      icon: "A3_h",
      key: 'a3',
      name: "A3横版",
      handler: (draw: Draw) => setPaper(draw, paperConfigs.a3.size, paperConfigs.a3.scale),
    },
  ],
};

export const dbImage: MenuItem = {
  value: uuid(),
  icon: "",
  name: "底图",
  children: [
    {
      value: uuid(),
      icon: "",
      name: "高德地图",
      handler: async (draw: Draw) => {
        const info = await getAMapInfo();
        const size = await getImageSize(info.blob);
        let proportion = { scale: info.ratio * 100, unit: "mm" };
        if (info.ratio > 1000) {
          proportion = { scale: info.ratio / 1000, unit: "km" };
        } else if (info.ratio > 1) {
          proportion = { scale: info.ratio, unit: "m" };
        }
        const url = await window.platform.uploadResourse(new File([info.blob], 'map.png'))

        draw.history.onceTrack(() => {
          draw.addShape(
            "image",
            {
              ...size,
              url,
              zIndex: -1,
            },
            { x: window.innerWidth / 2, y: window.innerHeight / 2 },
            true
          );
          draw.store.setConfig({ proportion });
        });
      },
    },
  ],
};

export const test: MenuItem = {
  value: uuid(),
  icon: "debugger",
  name: "测试",
  type: 'sub-menu-horizontal',
  children: [
    {
      value: uuid(),
      icon: "",
      name: "视图恢复",
      handler: (draw: Draw) => {
        draw.viewer.setViewMat( [1, 0, 0, 1, 0, 0])
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "切换栅栏显示",
      handler: (draw: Draw) => {
        draw.config.showGrid = !draw.config.showGrid;
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "切换标注线显示",
      handler: (draw: Draw) => {
        draw.config.showLabelLine = !draw.config.showLabelLine;
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "切换指南针显示",
      handler: (draw: Draw) => {
        draw.config.showCompass = !draw.config.showCompass;
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "切换组件大小显示",
      handler: (draw: Draw) => {
        draw.config.showComponentSize = !draw.config.showComponentSize;
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "碰撞检测",
      handler: (draw: Draw) => {
        draw.toggleHit();
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "获取当前数据",
      handler: (draw: Draw) => {
        console.log(copy(draw.store.$state))
      },
    }
  ],
};