添加绘制关联

src/graphic/Controls/UIControl.js

@@ -17,9 +17,10 @@ import VectorCategory from "../enum/VectorCategory.js";
 // import { floorplanData } from "../VectorData.js";
 
 export default class UIControl {
-  constructor(layer, newsletter) {
+  constructor(layer, newsletter, historyStateUI) {
     this.layer = layer;
     this.newsletter = newsletter;
+    this.historyStateUI = historyStateUI
   }
 
   get selectUI() {
@@ -141,6 +142,7 @@ export default class UIControl {
     this.layer.history.goPreState();
 
     const historyState = historyService.getHistoryState();
+    this.historyStateUI.canRevoke = historyState.pre
     // if (historyState.pre) {
     //     this.layer.$xui.toolbar.recall = true
     // } else {
@@ -157,6 +159,8 @@ export default class UIControl {
     this.layer.history.goNextState();
 
     const historyState = historyService.getHistoryState();
+    this.historyStateUI.canRecovery = historyState.next
+    this.historyStateUI.canRevoke = true
     // if (historyState.next) {
     //   this.layer.$xui.toolbar.recover = true;
     // } else {

src/graphic/Layer.js

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

src/graphic/Renderer/Draw.js

@@ -375,7 +375,7 @@ export default class Draw {
     help.setVectorStyle(
       this.context,
       vector,
-      vector.category || vector.geoType
+      'Arrow'
     );
     if (vector.arrowColor) {
       ctx.strokeStyle = vector.arrowColor
@@ -391,6 +391,7 @@ export default class Draw {
   }
 
   drawMagnifier(vector) {
+    console.error(123)
     const ctx = this.context
     this.drawPoint({
       ...vector.position,
@@ -401,7 +402,7 @@ export default class Draw {
     const target = vector.popPosition
     const style = help.setVectorStyle(ctx, vector)
     const offset = style.radius / 2
-    console.log(pt, target, pt, style.radius)
+    console.error(pt, target, pt, style.radius)
     const targetPts = [
       mathUtil.translate(pt, target, pt, style.radius),
       target
@@ -428,7 +429,8 @@ export default class Draw {
   drawCircle(element) {
     this.drawPoint({
       ...element,
-      geoType: 'Circle'
+      geoType: 'Circle',
+      ...element.center
     });
   }
 
@@ -439,7 +441,7 @@ export default class Draw {
     if (vector.color) {
       ctx.strokeStyle = vector.color
     }
-    const radius = (vector.radius || style.radius) * coordinate.ratio;
+    const radius = (vector.radius || style.radius) * coordinate.ratio ;
     ctx.save();
     ctx.beginPath();
     ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
@@ -483,7 +485,7 @@ export default class Draw {
 
   drawLine(vector) {
     console.log(vector)
-    if (vector.category === "Arrow") {
+    if (vector.category === "MeasureLine") {
       return this.drawArrow(vector);
     }
     let start = dataService.getPoint(vector.startId);

src/graphic/Renderer/Render.js

@@ -35,6 +35,8 @@ export default class Render {
       case VectorType.Text:
         draw.drawText(vector, styleType, flag);
         return;
+      case VectorType.Circle:
+        draw.drawCircle(vector);
       case VectorType.BackgroundImg:
         draw.drawBackGroundImg();
     }
@@ -45,12 +47,13 @@ export default class Render {
     if (draw.context == null) {
       return;
     }
+    console.log(vector)
     switch (vector.geoType) {
       case VectorType.Point:
-        draw.drawCircle(vector);
+        draw.drawPoint(vector);
         break;
       case VectorType.RoadPoint:
-        draw.drawCircle(vector);
+        draw.drawPoint(vector);
         break;
       case VectorType.Line:
         draw.drawElementLine(vector); //需要修改，有几种情况：测量，校准，基准
@@ -58,6 +61,9 @@ export default class Render {
       case VectorType.Road:
         draw.drawRoad(vector, true);
         break;
+      case VectorType.Magnifier:
+        draw.drawMagnifier(vector)
+        break;
     }
   }
 

src/graphic/index.js

@@ -1,8 +1,8 @@
 import Layer from "./Layer";
 import {watch, watchEffect} from "vue";
 
-export const structureDraw = (canvas, newsletter) => {
-  const layer = new Layer(canvas, newsletter.value);
+export const structureDraw = (canvas, newsletter, historyState) => {
+  const layer = new Layer(canvas, newsletter.value, historyState.value);
   watch(newsletter, () => {
     layer.uiControl.newsletter = newsletter.value
   })

src/hook/useGraphic.ts

@@ -11,9 +11,14 @@ const newsletter = ref<{
   focusVector?: { type: VectorTypeT[keyof VectorTypeT], vectorId: string }
 }>({ selectUI: null, focusVector: null });
 
+export const historyState = ref({
+  canRevoke: false,
+  canRecovery: false,
+})
+
 export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<any>) => {
   await import("../graphic/index.js").then((model) => {
-    drawRef.value = model.structureDraw(canvas, newsletter);
+    drawRef.value = model.structureDraw(canvas, newsletter, historyState);
 
     watchEffect(() => {
       console.log(data.value)

src/views/graphic/header.vue

@@ -21,6 +21,7 @@
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
 import {generateByMenus, headActionMenuRaw, Mode} from './menus'
+import {historyState} from '@/hook/useGraphic'
 import {computed} from "vue";
 import {router} from '@/router'