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

<template>
  <div class="draw-layout">
    <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">
        <TempShapeGroup v-for="type in types" :type="type" :key="type" />
      </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 { 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 { useInteractiveShapeAPI } from "../hook/use-interactive.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";

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 { quitMouseAddShape } = useInteractiveShapeAPI();
useListener(
  "contextmenu",
  (ev) => {
    ev.preventDefault();
    quitMouseAddShape();
  },
  document.documentElement
);

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>