drawing-board-service/src/example/fuse/views/overview/header.vue

<template>
  <Header :action-groups="actions" :title="title" no-back :draw="draw">
    <template #saves>
      <el-button type="primary" @click="saveHandler" :disabled="draw.drawing">
        保存
      </el-button>
      <el-button
        @click="gotoTabulation"
        color="#E6E6E6"
        :disabled="draw.drawing"
        v-if="showTabulation"
      >
        图纸
      </el-button>
    </template>
  </Header>
</template>

<script lang="ts" setup>
import Header from "../../../components/header/index.vue";
import { ElButton, ElMessage } from "element-plus";
import { useDraw } from "../../../components/container/use-draw.ts";
import { selectScene } from "../../../dialog/vr/index.ts";
import { Scene } from "../../../platform/platform-resource.ts";
import { getHeaderActions, getImage } from "../../../components/header/actions.ts";
import {
  tabulationData,
  refreshTabulationData,
  tableCoverWidth,
  tableCoverHeight,
  overviewData,
  TabCover,
} from "../../store.ts";
import { nextTick, onUnmounted } from "vue";
import { DataGroupId } from "@/constant/index.ts";
import { Group } from "konva/lib/Group";
import { Mode } from "@/constant/mode.ts";
import { lineLen } from "@/utils/math.ts";
import { repTabulationStore } from "../tabulation/gen-tab.ts";
import { router } from "../../router.ts";
import { overviewId, params, tabulationId } from "@/example/env.ts";
import { listener } from "@/utils/event.ts";
import { mergeFuns, repeatedlyOnly } from "@/utils/shared.ts";
import saveAs from "@/utils/file-serve.ts";

const props = defineProps<{ title: string }>();
const draw = useDraw();
const emit = defineEmits<{
  (e: "selectVR", v: Scene): void;
  (e: "saveAfter"): void;
}>();

// const showTabulation = !params.value.sceneDraw;
const showTabulation = true;
const baseActions = getHeaderActions(draw);
const actions = [
  [baseActions.undo, baseActions.redo],
  [
    baseActions.clear,
    baseActions.rotateView,
    { ...baseActions.initViewport, handler: () => draw.initViewport(40) },
    baseActions.toggleShow,
  ],
  [
    {
      handler: async () => {
        const scene = await selectScene();
        emit("selectVR", scene);
      },
      text: "VR辅助",
      icon: "VR",
    },
  ],
  [
    {
      ...baseActions.expose,
      children: baseActions.expose.children.map((item) => ({
        ...item,
        async handler() {
          const format = item.text.toLowerCase();
          if (format !== "dxf") {
            const blob = await draw.enterTemp(async () => {
              const back = draw.config.back;
              const [_, _a, recover] = await setViewToTableCover();
              if (format === "jpg") draw.config.back = back;
              await nextTick();
              const blob = await getImage(draw, `image/${format}`);
              recover();
              await nextTick();
              return blob;
            });
            if (!blob) {
              ElMessage.error("导出失败");
            } else {
              await saveAs(blob, `${props.title}.${format}`);
              ElMessage.success("导出成功");
            }
          } else {
            await item.handler(props.title);
          }
        },
      })),
    },
  ],
];

const setViewToTableCover = async () => {
  const oldViewMat = draw.viewer.viewMat;
  const oldShowGrid = draw.config.showGrid;
  const oldSize = draw.config.size;
  const oldBack = draw.config.back;
  const oldShowCompass = draw.config.showCompass;
  const oldLabelLineConfig = { ...draw.config.labelLineConfig };
  const oldShowOffset = draw.config.labelLineConfig.showOffset;
  draw.initViewport(0);
  await nextTick();
  const getRect = (id: string) => draw.stage!.findOne<Group>(`#${id}`)?.getClientRect();

  const pop = draw.mode.push(Mode.readonly);
  const rect = getRect(DataGroupId)!;

  let width = rect.width;
  let height = rect.height;
  const rectScale = width / height;
  const tableCoverScale = tableCoverWidth / tableCoverHeight;
  const padding = 70;

  if (rectScale > tableCoverScale) {
    height = width / tableCoverScale;
  } else {
    width = tableCoverScale * height;
  }
  if (width < padding * 2) {
    width += padding * 2;
  }
  if (height < padding * 2) {
    height += padding * 2;
  }

  draw.config.size = { width, height };
  draw.config.showGrid = false;
  draw.config.back = undefined;
  draw.config.showCompass = false;

  draw.config.labelLineConfig.type = "auto";
  draw.config.labelLineConfig.fontSize = width / 60;
  draw.config.labelLineConfig.strokeWidth = draw.config.labelLineConfig.fontSize / 10;

  await nextTick();
  draw.config.labelLineConfig.showOffset = padding - 5;
  draw.initViewport(padding);
  await nextTick();

  const syncItems: TabCover["syncItems"] = [];
  // const positionRect = getRect("formal")!;
  // draw.store.items.forEach((item) => {
  //   if (item.key === "trace") {
  //     const itemRect = getRect(item.id);
  //     if (itemRect) {
  //       itemRect.x = itemRect.x - positionRect.x;
  //       itemRect.y = itemRect.y - positionRect.y;
  //       syncItems.push({
  //         ...item,
  //         rect: itemRect,
  //         desc: (item as any).name || "",
  //       } as any);
  //     }
  //   }
  // });

  return [
    {
      width,
      height,
    },
    syncItems,
    () => {
      pop();
      draw.config.size = oldSize;
      draw.config.showGrid = oldShowGrid;
      draw.config.back = oldBack;
      draw.config.showCompass = oldShowCompass;
      draw.config.labelLineConfig = oldLabelLineConfig;
      draw.config.labelLineConfig.showOffset = oldShowOffset;
      draw.viewer.setViewMat(oldViewMat);
    },
  ] as const;
};

const setViewToKanKanCover = async () => {
  const oldViewMat = draw.viewer.viewMat;
  const oldBack = draw.config.back && { ...draw.config.back };
  const oldShowGrid = draw.config.showGrid;
  const oldLabelLineConfig = { ...draw.config.labelLineConfig };
  draw.config.labelLineConfig.stroke = "#FFFFFF";
  draw.config.labelLineConfig.shadowColor = "#000000";
  draw.config.labelLineConfig.fontSize = 18;
  const pop = draw.mode.push(Mode.readonly);
  draw.config.showGrid = false;
  draw.config.back = undefined;

  const set: any = {
    stroke: "#FFFFFF",
    fill: undefined,
    color: "#FFFFFF",
    fontColor: "#FFFFFF",
  };
  const cSet: any = {
    arrow: {
      fill: "#FFFFFF",
    },
    text: {
      fill: "#FFFFFF",
    },
  };
  const typeItems: any = Object.entries(draw.store.typeItems);
  const lineData = draw.store.getTypeItems("line")[0];
  if (lineData) {
    typeItems.push(["lines", lineData.lines]);
  }
  const clearupItems = typeItems.map(([type, items]: any) => {
    const cleanups: (() => void)[] = [];
    items.forEach((item: any) => {
      const itemSet = type in cSet ? cSet[type] : set;
      const setKeys = Object.keys(itemSet);

      for (const key of setKeys) {
        if (key in item) {
          const oldVal = item[key];
          cleanups.push(() => (item[key] = oldVal));
        } else {
          cleanups.push(() => delete item[key]);
        }
        item[key] = itemSet[key];
      }
    });
    return mergeFuns(cleanups);
  });

  draw.initViewport(70);
  await nextTick();
  const blob = await getImage(draw, "image/png");
  mergeFuns(clearupItems)();
  pop();
  draw.config.back = oldBack;
  draw.config.labelLineConfig = oldLabelLineConfig;
  draw.config.showGrid = oldShowGrid;
  draw.viewer.setViewMat(oldViewMat);
  await nextTick();
  return blob;
};

const saveHandler = repeatedlyOnly(async () => {
  const storeData = draw.getData();
  const [tabBlob, listBlob, kkBlob, scale, rect, syncItems] = await draw.enterTemp(
    async () => {
      const back = draw.config.back;
      const [rect, syncItems, recover] = await setViewToTableCover();
      await nextTick();
      const mat = draw.viewer.transform.invert();
      const scale =
        lineLen(mat.point({ x: 1, y: 0 }), mat.point({ x: 0, y: 0 })) *
        draw.store.config.proportion.scale;
      const tabBlob = await getImage(draw, "image/png");
      draw.config.back = back;
      await nextTick();
      const listBlob = await getImage(draw, "image/jpg");
      recover();
      await nextTick();

      const kkBlob = await setViewToKanKanCover();
      return [tabBlob, listBlob, kkBlob, scale, rect, syncItems] as const;
    }
  );

  let tabUrl = null;
  let listUrl = null;
  let kankanUrl = null;
  if (!tabBlob || !listBlob || !kkBlob) {
    ElMessage.error("截图保存失败");
  } else {
    console.error(window.platform.uploadResourse);
    [tabUrl, listUrl, kankanUrl] = await Promise.all([
      window.platform.uploadResourse(new File([tabBlob], `tabulation-cover.png`)),
      window.platform.uploadResourse(new File([listBlob], `list-cover.png`)),
      window.platform.uploadResourse(new File([kkBlob], `kankan-cover.png`)),
    ]);
  }

  tabulationId.value = await window.platform.getTabulationId(overviewId.value);
  await refreshTabulationData();

  const cover = {
    url: tabUrl,
    width: rect.width,
    height: rect.height,
    proportion: { ...draw.store.config.proportion, scale },
    syncItems,
  };

  console.log(tabulationData.value.store);
  const tabStore = await repTabulationStore(
    tabulationData.value.paperKey,
    storeData.config.compass.rotation,
    cover,
    tabulationData.value.isAutoGen ? undefined : tabulationData.value.store
  );

  console.log(tabStore);
  tabStore.config.compass = storeData.config.compass;
  const body: any = {
    ...overviewData.value,
    listCover: listUrl,
    store: storeData,
    viewport: draw!.viewer.transform.m,
    caseTabulation: {
      ...tabulationData.value,
      id: tabulationId.value,
      title: overviewData.value.title,
      cover,
      store: tabStore,
      overviewId: overviewId.value,
    },
  };
  if (window.platform.sceneDraw) {
    body.kankanCover = kankanUrl;
  }

  overviewId.value = await window.platform.saveOverviewData(overviewId.value, body);
  tabulationId.value = await window.platform.getTabulationId(overviewId.value);
  console.log("保存完毕");
  emit("saveAfter");
});

onUnmounted(
  listener(document.documentElement, "keydown", (ev) => {
    if (ev.ctrlKey && ev.key.toUpperCase() === "S") {
      saveHandler();
    }
  })
);

const gotoTabulation = repeatedlyOnly(async () => {
  await saveHandler();
  router.push({
    ...router.currentRoute.value,
    name: "tabulation",
    query: params.value,
  } as any);
});

defineExpose({ gotoTabulation, saveHandler });
</script>