drawing-board-service/src/core/renderer/renderer.vue

<template>
  <div class="draw-layout" @contextmenu.prevent :style="{ cursor: cursorStyle }">
    <div class="mount-mask" :id="DomMountId" />
    <v-stage ref="stage" :config="size">
      <v-layer :config="viewerConfig" id="formal">
        <!--	不可去除，去除后移动端拖拽会有溢出	-->
        <!-- <v-rect
          :config="{
            ...size,
            fill: 'rgba(0,0,0,0)',
            listener: false,
            ...invertViewerConfig,
          }"
        /> -->
        <ShapeGroup v-for="type in types" :type="type" :key="type" />
      </v-layer>
      <!--	临时组，提供临时绘画，以及高频率渲染	-->
      <v-layer :config="viewerConfig" id="temp">
        <template v-if="mode.include(Mode.add)">
          <TempShapeGroup v-for="type in types" :type="type" :key="type" />
        </template>
      </v-layer>
      <v-layer id="helper">
        <ActiveBoxs />
        <SnapLines />
      </v-layer>
    </v-stage>
  </div>
</template>

<script lang="ts" setup>
import ShapeGroup from "./group.vue";
import TempShapeGroup from "./draw-group.vue";
import { DrawData, ShapeType, components } from "../components";
import { useCursor, useMode, useStage } from "../hook/use-global-vars.ts";
import { useViewerTransformConfig } from "../hook/use-viewer.ts";
import { useListener, useResize } from "../hook/use-event.ts";
import { useExpose } from "../hook/use-expose.ts";
import { DomMountId } from "../../constant";
import ActiveBoxs from "../helper/active-boxs.vue";
import SnapLines from "../helper/snap-lines.vue";
import { useStore } from "../store/index.ts";
import { useInteractiveAddShapeAPI } from "../hook/use-add.ts";
import { Mode } from "@/constant/mode.ts";
import { computed } from "vue";

const props = defineProps<{
  data: DrawData;
}>();
const store = useStore();
store.setStore(props.data);

const stage = useStage();
const size = useResize();
const viewerConfig = useViewerTransformConfig();
const types = Object.keys(components) as ShapeType[];
const mode = useMode();

// 退出添加模式
const { quitMouseAddShape } = useInteractiveAddShapeAPI();
useListener(
  "contextmenu",
  (ev) => {
    if (ev.button === 2) {
      quitMouseAddShape();
    }
  },
  document.documentElement
);

const cursor = useCursor();
const cursorStyle = computed(() => {
  if (cursor.value.includes(".")) {
    return `url(${cursor.value}), auto`;
  } else {
    return cursor.value;
  }
});

defineExpose(useExpose());
</script>

<style scoped lang="scss">
.draw-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.mount-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}
</style>