添加与画板对接对象

src/graphic/CanvasStyle/focus.js

@@ -33,11 +33,25 @@ const ControlPoint = {
   ...Point,
 }
 
+
+const Edg = {
+  ...def.Edge,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+
+const CurveEdge = {
+  ...def.CurveEdge,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+
+
 export default {
   Road,
   Tag,
   Point,
   CurvePoint,
   ControlPoint,
-  CurveRoad
+  CurveRoad,
+  Edg,
+  CurveEdge
 }

src/graphic/CanvasStyle/select.js

@@ -16,6 +16,16 @@ const Tag = {
   fillStyle: "#00C8AF",
 }
 
+const Edge = {
+  ...def.Edge,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+
+const CurveEdge = {
+  ...def.CurveEdge,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+
 const Point = {
   ...def.Point,
   lineWidth: 2,
@@ -39,5 +49,7 @@ export default {
   Point,
   CurvePoint,
   ControlPoint,
-  CurveRoad
+  CurveRoad,
+  Edge,
+  CurveEdge
 }

src/graphic/Controls/UIControl.js

@@ -15,9 +15,25 @@ import { addRoad } from "../Controls/AddRoad";
 // import { floorplanData } from "../VectorData.js";
 
 export default class UIControl {
-  constructor(layer) {
+  constructor(layer, newsletter) {
     this.layer = layer;
-    this.selectUI = null;
+    this.newsletter = newsletter
+  }
+
+  get selectUI() {
+    return this.newsletter.selectUI
+  }
+
+  set selectUI(selectUI) {
+    this.updateEventNameForSelectUI(selectUI);
+    this.newsletter.selectUI = selectUI
+  }
+
+  get selectVector() {
+    return this.newsletter.selectVector
+  }
+  set selectVector(selectVector) {
+    this.newsletter.selectVector = selectVector
   }
 
   /**
@@ -29,8 +45,7 @@ export default class UIControl {
    * 设置选中要操作的UI
    */
   set currentUI(value) {
-    console.log(value);
-    this.updateEventNameForSelectUI(value);
+    this.selectUI = value
   }
 
   clearUI() {
@@ -39,6 +54,7 @@ export default class UIControl {
 
   //点击左侧栏后，更新事件
   updateEventNameForSelectUI(selectUI) {
+    console.log(this.selectUI, selectUI)
     if (selectUI != null) {
       if (this.selectUI == selectUI) {
         return;
@@ -48,17 +64,17 @@ export default class UIControl {
           stateService.clear();
           //。。。。
         }
-        this.selectUI = selectUI;
+        // this.selectUI = selectUI;
         //执行新的事件
-        if (this.selectUI == UIEvents.Road) {
+        if (selectUI == UIEvents.Road) {
           stateService.setEventName(LayerEvents.AddRoad);
-        } else if (this.selectUI == UIEvents.CurveRoad) {
+        } else if (selectUI == UIEvents.CurveRoad) {
           stateService.setEventName(LayerEvents.AddCurveRoad);
-        } else if (this.selectUI == UIEvents.Tag) {
+        } else if (selectUI == UIEvents.Tag) {
           stateService.setEventName(LayerEvents.AddTag);
-        } else if (this.selectUI == UIEvents.Img) {
+        } else if (selectUI == UIEvents.Img) {
           stateService.setEventName(LayerEvents.Img);
-        } else if (this.selectUI == UIEvents.AddMeasureLine) {
+        } else if (selectUI == UIEvents.AddMeasureLine) {
           stateService.setEventName(LayerEvents.AddMeasureLine);
         }
       }

src/graphic/Layer.js

@@ -29,11 +29,11 @@ import { curveRoadService } from "./Service/CurveRoadService";
 const minDragDis = 10;
 
 export default class Layer {
-  constructor(canvas) {
+  constructor(canvas, newsletter) {
     this.canvas = canvas;
     this.load = new Load(this);
 
-    this.uiControl = new UIControl(this);
+    this.uiControl = new UIControl(this, newsletter);
     this.renderer = new Render(this);
     this.history = new History(this);
     this.mousePosition = null;

src/graphic/Renderer/Draw.js

@@ -22,6 +22,7 @@ const help = {
       [stateService.getDraggingItem(), "Dragging"],
       [stateService.getFocusItem(), "Focus"],
     ];
+
     return itemsEntry.reduce((prev, [item, attr]) => {
       if (
         item &&
@@ -188,9 +189,10 @@ export default class Draw {
     const rightEdge = isTemp ? vector.rightEdge : dataService.getEdge(vector.rightEdgeId);
     const ctx = this.context
     ctx.save();
-    help.setVectorStyle(ctx, vector, "Edge")
     isTemp && (ctx.globalAlpha = 0.3);
+    help.setVectorStyle(ctx, leftEdge)
     drawEdgeChild(leftEdge)
+    help.setVectorStyle(ctx, rightEdge)
     drawEdgeChild(rightEdge)
     ctx.restore()
 

src/graphic/index.js

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

src/hook/useGraphic.ts

@@ -1,10 +1,27 @@
-import { ref } from "vue";
-import { structureDraw } from "../graphic/index.js";
+import {computed, reactive, ref, watch, watchEffect} from "vue";
+import { structureDraw } from "@/graphic";
+import VectorType from '@/graphic/enum/VectorType'
+import UIType from '@/graphic/enum/UIEvents'
 
-export const drawRef = ref<ReturnType<typeof structureDraw>>();
+const newsletter = ref<{
+  selectUI?: typeof UIType
+  selectVector?: { geoType: typeof VectorType }
+}>({ selectUI: null, selectVector: null });
 
 export const setCanvas = async (canvas: HTMLCanvasElement) => {
   await import("../graphic/index.js").then((model) => {
-    drawRef.value = model.structureDraw(canvas);
+    drawRef.value = model.structureDraw(canvas, newsletter);
   });
 };
+
+export const drawRef = ref<ReturnType<typeof structureDraw>>();
+
+export const uiType = reactive({
+  current: computed(() => newsletter.value.selectUI),
+  change: (type: typeof UIType) => {
+    drawRef.value.uiControl.selectUI = type
+  }
+})
+export const currentVector = computed(() => newsletter.value.selectVector)
+
+export { VectorType, UIType }

src/router/info.ts

@@ -73,7 +73,7 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     path: "/graphic",
     name: readyRouteName.graphic,
     meta: readyRouteMeta.graphic,
-    component: () => import("@/views/drawGraphic/index.vue"),
+    component: () => import("@/views/raphic/index.vue"),
   },
 ];
 

src/views/drawGraphic/index.vue

@@ -4,8 +4,8 @@
       <div
         v-for="menu in menus"
         :key="menu.key"
-        @click="activeMenu = menu.key"
-        :class="{ active: menu.key === activeMenu }"
+        @click="uiType.change(menu.key)"
+        :class="{ active: menu.key === uiType.current }"
       >
         {{ menu.text }}
       </div>
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watchEffect } from "vue";
-import { setCanvas, drawRef } from "@/hook/useGraphic";
+import { onMounted, ref } from "vue";
+import { setCanvas, UIType, uiType } from "@/hook/useGraphic";
 
 const drawCanvasRef = ref<HTMLCanvasElement>();
 const setCanvasSize = () => {
@@ -27,29 +27,16 @@ const setCanvasSize = () => {
 };
 
 const menus = ref([
-  { key: "road", text: "直路" },
-  { key: "curveRoad", text: "弯路" },
-  { key: "tag", text: "标注" },
-  { key: "measure", text: "测量线" },
-  { key: "backgroundImage", text: "背景图片" },
+  { key: UIType.Road, text: "直路" },
+  { key: UIType.CurveRoad, text: "弯路" },
+  { key: UIType.Tag, text: "标注" },
+  { key: UIType.MeasureLine, text: "测量线" },
+  { key: UIType.Img, text: "背景图片" },
 ]);
-const activeMenu = ref<string>(null);
-
-// window.addEventListener("resize", setCanvasSize);
 
 onMounted(() => {
   setCanvasSize();
   setCanvas(drawCanvasRef.value);
-
-  watchEffect(() => {
-    if (drawRef.value) {
-      drawRef.value.control.currentUI = activeMenu.value as any;
-    }
-  });
-});
-
-onUnmounted(() => {
-  // window.removeEventListener("resize", setCanvasSize);
 });
 </script>