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

import { DrawItem, shapeNames, ShapeType } from "@/index";
import { ImageData, defaultStyle } from "@/core/components/image/index";
import { v4 as uuid } from "uuid";
import { getAMapInfo } from "../../dialog/basemap";
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";
import { getRealPixel } from "@/example/fuse/views/tabulation/gen-tab";
import { nextTick } from "vue";
import { Rect } from "konva/lib/shapes/Rect";
import { Size } from "@/utils/math";
import { getBaseItem } from "@/core/components/util";

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"), single: true },
    { icon: "rectangle", ...genDrawItem("rectangle"), single: true },
    { icon: "circle", ...genDrawItem("circle"), single: true },
    { icon: "triangulartriangular", ...genDrawItem("triangle"), single: true },
    { icon: "polygon", ...genDrawItem("polygon") },
  ],
};

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

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

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

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) => {
        let files: File[];
        try {
          files = await selectFile(false, ".png, .jpg");
        } catch (e: any) {
          ElMessage.error(e.message);
          return;
        }
        if (files[0].size >= 100 * 1024 * 1024) {
          ElMessage.error("图片大小不超过100MB");
          return;
        }

        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];
  const a = getRealPixel(5, "a4");
  return { size, margin };
};
export const paperConfigs = {
  a4: { size: [297, 210], scale: 2.5 },
  a3: { size: [420, 297], scale: 2.5 },
};
export type PaperKey = keyof typeof paperConfigs;

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 getMapImageItem = (url: string, size: Size) => ({
  ...getBaseItem(),
  ...defaultStyle,
  cornerRadius: 0,
  width: size.width * 100,
  height: size.height * 100,
  zIndex: -100,
  url,
  lock: true,
  mat: [1, 0, 0, 1, 0, 0],
});

export const dbImage: MenuItem = {
  value: uuid(),
  icon: "",
  name: "底图",
  children: [
    {
      value: uuid(),
      icon: "",
      name: "高德地图",
      handler: async (draw: Draw) => {
        const info = await getAMapInfo();
        const url = await window.platform.uploadResourse(
          new File([info.blob], "map.png")
        );
        draw.store.addItem('image', getMapImageItem(url, info.size))
      },
    },
  ],
};

export const test: MenuItem = {
  value: uuid(),
  icon: "debugger",
  name: "测试",
  type: "sub-menu-horizontal",
  children: [
    ...dbImage.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));
      },
    },
    {
      value: uuid(),
      icon: "",
      name: "切换a4导出视图",
      async handler(draw) {
        draw.viewer.setViewMat([1, 0, 0, 1, 0, 0]);
        await nextTick();

        const viewSize = draw.viewer.viewSize!;
        const size = {
          width: draw.stage!.width(),
          height: draw.stage!.height(),
        };
        const rect = {
          x: (size.width - viewSize.width) / 2,
          y: (size.height - viewSize.height) / 2,
          ...viewSize,
        };
        draw.stage?.children[2].add(new Rect({ ...rect, fill: "red" }));
      },
    },
  ],
};