drawing-board/src/app/liantong/example/index.vue

<template>
  <Teleport to="#right-pano">
    <ElButton @click="board.clear()"> 清除 </ElButton>
    <ElButton :disabled="!board.history.state.hasUndo" @click="board.history.undo()">
      撤销
    </ElButton>
    <ElButton :disabled="!board.history.state.hasRedo" @click="board.history.redo()">
      重做
    </ElButton>
    <ElButton @click="getData">获取数据</ElButton>

    <ElButton v-if="!drawing" @click="drawHandler"> 绘画 </ElButton>
    <ElButton v-if="drawing" @click="drawing.cancel()"> 停止 </ElButton>
    <ElButton v-if="drawing" @click="drawing.submit()"> 提交 </ElButton>
    <ElButton @click="download"> 下载 </ElButton>

    <template v-if="activeEntity">
      <ElButton @click="activeEntity.copy({ count: 5 })"> 向右复制5个 </ElButton>
      <ElButton @click="activeEntity.del()"> 删除 </ElButton>
    </template>

    <ElSelect v-model="poiType">
      <ElOption v-for="key in Object.keys(svgs)" :value="key" :label="key" />
    </ElSelect>
    <ElButton v-if="!addPoiState" @click="addPoiHandler(poiType)">添加poi</ElButton>
    <template v-if="addPoiState">
      <ElButton @click="addPoiState.cancel()"> 停止添加poi </ElButton>
    </template>

    <ElButton @click="board.showPois()"> 显示图例 </ElButton>
    <ElButton @click="board.hidenPois()"> 隐藏图例 </ElButton>
    <ElButton @click="board.showPoisId()"> 显示图例Id </ElButton>
    <ElButton @click="board.hidePoisId()"> 隐藏图例Id </ElButton>
    <ElButton @click="board.blurPoi()" v-if="activeEntity"> 去除聚焦 </ElButton>
  </Teleport>
  <div
    class="board-layout"
    :style="{ width: width + 'px', height: height + 'px' }"
    ref="containerRef"
  ></div>
</template>

<script setup lang="ts">
import { shallowRef, watch, ref } from "vue";
import { EditWholeLine, createBoard, EditPoi, changeEnv, floorDataTransform } from "../";
import storeData from "./storeData.json";
import floor from "./floorplan_cad.json";
import { ElButton, ElSelect, ElOption } from "element-plus";
import "element-plus/dist/index.css";
import { svgs } from "../icon";

const poiType = ref(Object.keys(svgs)[0]);
const rooms = floorDataTransform(floor);
changeEnv(false);
withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number }>(), {
  width: 320,
  height: 150,
  pixelRation: 1,
});
type Board = ReturnType<typeof createBoard>;

const board = createBoard();
board.bound.setRetainScale(true);

setTimeout(() => {
  // board.setData({ rooms: rooms });
  console.log(storeData);
  board.setData(storeData);
  board.bound.autoBound(20);
}, 500);

const activeEntity = shallowRef<EditPoi>();
board.bus.on("activePoi", (entity) => {
  activeEntity.value = entity;
});

const drawing = shallowRef<ReturnType<EditWholeLine["createPolygon"]>>();
const drawHandler = () => {
  drawing.value = board.room.createPolygon();
  drawing.value.bus.on("penStart", () => {
    console.log("开始绘画");
  });
  drawing.value.promise.then((result) => {
    console.log(result);
    drawing.value = null;
  });
};

window.board = board;
const addPoiState = shallowRef<ReturnType<Board["addPoi"]>>();
const addPoiHandler = (type: string) => {
  addPoiState.value = board.addPoi(type);
  addPoiState.value.promise.finally(() => {
    addPoiState.value = null;
  });
};

const containerRef = shallowRef<HTMLDivElement>();
watch(containerRef, (container, _) => {
  container && board.mount(container);
});

const getData = () => {
  console.log(JSON.stringify(board.getData(), null, 4));
};

const download = () => {
  board.bound.setSize(1920, 1080);
  board.tree.stage.toBlob({
    width: 1920,
    height: 1080,
    pixelRatio: 3,
    callback(blob) {
      window.open(URL.createObjectURL(blob));
    },
  });
  console.log(board);
};
</script>

<style lang="scss" scoped>
.board-layout {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);

  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>