添加绘图主题框架

src/graphic/Controls/UIControl.js

@@ -32,7 +32,10 @@ export default class UIControl {
   /**
    * 设置选中要操作的UI
    */
-  set currentUI(value) {}
+  set currentUI(value) {
+    console.log(value);
+    this.value = value;
+  }
 
   //点击左侧栏后，更新事件
   updateEventNameForSelectUI() {

src/graphic/index.js

@@ -1,6 +1,10 @@
 import Layer from "./Layer";
+import UIControl from "./Controls/UIControl";
 
 export const structureDraw = (canvas) => {
   console.log("???");
-  new Layer(canvas);
+  const layer = new Layer(canvas);
+  const control = new UIControl(layer);
+
+  return { layer, control };
 };

src/hook/useGraphic.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import { structureDraw } from "../graphic/index.js";
 
-const drawRef = ref();
+export const drawRef = ref<ReturnType<typeof structureDraw>>();
 
 export const setCanvas = (canvas: HTMLCanvasElement) => {
   drawRef.value = structureDraw(canvas);

src/views/drawGraphic/index.vue

@@ -1,12 +1,24 @@
 <template>
   <div class="draw-layout">
-    <canvas ref="drawCanvasRef" class="draw-canvas" />
+    <div class="draw-slide">
+      <div
+        v-for="menu in menus"
+        :key="menu.key"
+        @click="activeMenu = menu.key"
+        :class="{ active: menu.key === activeMenu }"
+      >
+        {{ menu.text }}
+      </div>
+    </div>
+    <div class="canvas-layout">
+      <canvas ref="drawCanvasRef" class="draw-canvas" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
-import { setCanvas } from "@/hook/useGraphic";
+import { onMounted, onUnmounted, ref, watchEffect } from "vue";
+import { setCanvas, drawRef } from "@/hook/useGraphic";
 
 const drawCanvasRef = ref<HTMLCanvasElement>();
 const setCanvasSize = () => {
@@ -14,12 +26,22 @@ const setCanvasSize = () => {
   drawCanvasRef.value.height = drawCanvasRef.value.offsetHeight;
 };
 
+const menus = ref([
+  { key: "road", text: "道路" },
+  { key: "tag", text: "标注" },
+]);
+const activeMenu = ref<string>(null);
+
 // window.addEventListener("resize", setCanvasSize);
 
 onMounted(() => {
-  console.log("???");
   setCanvasSize();
   setCanvas(drawCanvasRef.value);
+
+  watchEffect(() => {
+    drawRef.value.control.currentUI = activeMenu.value as any;
+    drawRef.value.control.updateEventNameForSelectUI();
+  });
 });
 
 onUnmounted(() => {

src/views/drawGraphic/style.scss

@@ -1,5 +1,36 @@
-.draw-canvas,
 .draw-layout {
+  width  : 100%;
+  height : 100%;
+  display: flex;
+}
+
+.draw-slide {
+  flex        : 0 0 100px;
+  padding     : 10px 0;
+  border-right: 1px solid #ccc;
+
+  >div {
+    font-size  : 14px;
+    text-align : center;
+    cursor     : pointer;
+    line-height: 30px;
+
+    &:hover {
+      color: #1890ff;
+    }
+
+    &.active {
+      background-color: #e6f7ff;
+    }
+  }
+}
+
+
+.draw-layout {
+  flex: 1;
+}
+
+.draw-canvas {
   width : 100%;
   height: 100%;
 }