添加事故照片相关绘制

src/graphic/Controls/UIControl.js

@@ -17,10 +17,10 @@ import VectorCategory from "../enum/VectorCategory.js";
 // import { floorplanData } from "../VectorData.js";
 
 export default class UIControl {
-  constructor(layer, newsletter, historyStateUI) {
+  constructor(layer, newsletter, graphicStateUI) {
     this.layer = layer;
     this.newsletter = newsletter;
-    this.historyStateUI = historyStateUI
+    this.graphicStateUI = graphicStateUI
   }
 
   get selectUI() {
@@ -142,7 +142,7 @@ export default class UIControl {
     this.layer.history.goPreState();
 
     const historyState = historyService.getHistoryState();
-    this.historyStateUI.canRevoke = historyState.pre
+    this.graphicStateUI.canRevoke = historyState.pre
     // if (historyState.pre) {
     //     this.layer.$xui.toolbar.recall = true
     // } else {
@@ -159,8 +159,8 @@ export default class UIControl {
     this.layer.history.goNextState();
 
     const historyState = historyService.getHistoryState();
-    this.historyStateUI.canRecovery = historyState.next
-    this.historyStateUI.canRevoke = true
+    this.graphicStateUI.canRecovery = historyState.next
+    this.graphicStateUI.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, historyState) {
+  constructor(canvas, newsletter, graphicState) {
     this.canvas = canvas;
     this.load = new Load(this);
 
-    this.uiControl = new UIControl(this, newsletter, historyState);
+    this.uiControl = new UIControl(this, newsletter, graphicState);
     this.renderer = new Render(this);
     this.history = new History(this);
     this.mousePosition = null;

src/graphic/index.js

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

src/hook/useGraphic.ts

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

src/views/graphic/header.vue

@@ -21,7 +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 {graphicState} from '@/hook/useGraphic'
 import {computed} from "vue";
 import {router} from '@/router'