所有绘制app用一个store

src/components/draw-app/CCTVDrawProperties.vue

@@ -25,7 +25,6 @@
         <q-card-section>
           <iscs-text-property
             v-if="drawStore.selectedGraphicType === TextContent.Type"
-            :drawStore="drawStore"
           />
           <cctv-button-property
             v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
@@ -40,12 +39,12 @@
 </template>
 
 <script setup lang="ts">
-import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
 import CanvasProperty from './properties/CCTV/CanvasCCTVProperty.vue';
 import IscsTextProperty from './properties/IscsTextProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import cctvButtonProperty from './properties/CCTV/CCTVButtonProperty.vue';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 
-const drawStore = useCCTVDrawStore();
+const drawStore = useDrawStore();
 </script>

src/components/draw-app/FireAlarmDrawProperties.vue

@@ -25,7 +25,6 @@
         <q-card-section>
           <iscs-text-property
             v-if="drawStore.selectedGraphicType === TextContent.Type"
-            :drawStore="drawStore"
           />
         </q-card-section>
       </template>
@@ -37,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
-import CanvasProperty from './properties/CanvasProperty.vue';
+import CanvasProperty from './properties/FireAlarm/CanvasFireAlarmProperty.vue';
 import IscsTextProperty from './properties/IscsTextProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 
-const drawStore = useFireAlarmDrawStore();
+const drawStore = useDrawStore();
 </script>

src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue

@@ -23,13 +23,13 @@
 
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
-import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
 import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
 import { CCTVButtonData } from 'src/drawApp/graphics/CCTV/CCTVButtonInteraction';
 
 const { data: cctvButtonModel, onUpdate } = useFormData(
   new CCTVButtonData(),
-  useCCTVDrawStore().getDrawApp()
+  useDrawStore().getDrawApp()
 );
 
 const optionsButtonType = [

src/components/draw-app/properties/CCTV/CanvasCCTVProperty.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script setup lang="ts">
-import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, reactive } from 'vue';
-const drawStore = useCCTVDrawStore();
+const drawStore = useDrawStore();
 
 const canvas = reactive({
   width: 1920,

src/components/draw-app/properties/FireAlarm/CanvasFireAlarmProperty.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script setup lang="ts">
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, reactive } from 'vue';
-const drawStore = useFireAlarmDrawStore();
+const drawStore = useDrawStore();
 
 const canvas = reactive({
   width: 1920,

src/components/draw-app/properties/IscsTextProperty.vue

@@ -40,8 +40,9 @@
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { IscsTextData } from 'src/drawApp/graphics/IscsTextContentInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
 
-const { drawStore } = defineProps(['drawStore'])
+const drawStore = useDrawStore();
 
 const { data: textContentModel, onUpdate } = useFormData(
   new IscsTextData(),

src/drawApp/cctvApp.ts

@@ -6,7 +6,6 @@ import {
   KeyListener,
   newDrawApp,
 } from 'jl-graphic';
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
 import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
 import { fromUint8Array } from 'js-base64';
 import {
@@ -17,21 +16,22 @@ import {
 import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
 import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
 import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import { useDrawStore } from 'src/stores/draw-store';
 
 let drawApp: IDrawApp | null = null;
 
-export function getDrawApp(): IDrawApp | null {
+export function getCCTVDrawApp(): IDrawApp | null {
   return drawApp;
 }
 
-export function destroyDrawApp(): void {
+export function destroyCCTVDrawApp(): void {
   if (drawApp) {
     drawApp.destroy();
     drawApp = null;
   }
 }
 
-export function initDrawApp(): IDrawApp {
+export function initCCTVDrawApp(): IDrawApp {
   const isSupportDeletion = (g: JlGraphic) => {
     console.log(g);
     return true;
@@ -58,7 +58,7 @@ export function initDrawApp(): IDrawApp {
 }
 
 export async function loadDrawDatas(): Promise<IGraphicStorage> {
-  const drawStore = useFireAlarmDrawStore();
+  const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {
     throw new Error('获取数据异常：为获取到草稿地图ID');

src/drawApp/commonApp.ts

@@ -4,7 +4,6 @@ import {
   IDrawApp,
   MenuItemOptions,
 } from 'jl-graphic';
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
 import { toStorageTransform } from './graphics/GraphicDataBase';
 import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
 import { ArrowData } from './graphics/ArrowInteraction';
@@ -16,6 +15,7 @@ import {
 import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
 import { IscsTextData } from './graphics/IscsTextContentInteraction';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { useDrawStore } from 'src/stores/draw-store';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -104,7 +104,7 @@ export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
 }
 
 export function saveDrawToServer(base64: string) {
-  const drawStore = useFireAlarmDrawStore();
+  const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {
     return;

src/drawApp/fireAlarmApp.ts

@@ -6,7 +6,6 @@ import {
   KeyListener,
   newDrawApp,
 } from 'jl-graphic';
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
 import { FireAlarmGraphicData } from 'src/protos/fire_alarm_graphic_data';
 import { fromUint8Array } from 'js-base64';
 import {
@@ -14,24 +13,22 @@ import {
   saveCommonDrawDatas,
   saveDrawToServer,
 } from './commonApp';
-// import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
-// import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-// import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 
 let drawApp: IDrawApp | null = null;
 
-export function getDrawApp(): IDrawApp | null {
+export function getFireAlarmDrawApp(): IDrawApp | null {
   return drawApp;
 }
 
-export function destroyDrawApp(): void {
+export function destroyFireAlarmDrawApp(): void {
   if (drawApp) {
     drawApp.destroy();
     drawApp = null;
   }
 }
 
-export function initDrawApp(): IDrawApp {
+export function initFireAlarmDrawApp(): IDrawApp {
   const isSupportDeletion = (g: JlGraphic) => {
     console.log(g);
     return true;
@@ -58,7 +55,7 @@ export function initDrawApp(): IDrawApp {
 }
 
 export async function loadDrawDatas(): Promise<IGraphicStorage> {
-  const drawStore = useFireAlarmDrawStore();
+  const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {
     throw new Error('获取数据异常：为获取到草稿地图ID');

src/layouts/CCTVDrawLayout.vue

@@ -110,18 +110,18 @@ import { onMounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { successNotify } from 'src/utils/CommonNotify';
 import { useQuasar } from 'quasar';
-import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
-
+import { PictureType } from 'src/protos/picture';
 
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const searchId = ref(0);
 
-const drawStore = useCCTVDrawStore();
+const drawStore = useDrawStore();
 
 watch(
   () => drawStore.drawMode,
@@ -190,6 +190,7 @@ const leftMenuConfig = [
 onMounted(() => {
   console.log('绘制应用layout mounted');
   const dom = document.getElementById('draw-app-container');
+  drawStore.drawPictureType = PictureType.CCTV;
   if (dom) {
     drawStore.setDraftId(+route.params.id as number);
     const drawApp = drawStore.initDrawApp();
@@ -199,7 +200,7 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-  const drawAssistantsTypes = [Arrow.Type,TextContent.Type,CCTVButton.Type];
+  const drawAssistantsTypes = [Arrow.Type, TextContent.Type, CCTVButton.Type];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
     if (drawAssistant) {

src/layouts/FireAlarmDrawLayout.vue

@@ -110,7 +110,8 @@ import { onMounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { successNotify } from 'src/utils/CommonNotify';
 import { useQuasar } from 'quasar';
-import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
+import { PictureType } from 'src/protos/picture';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 
@@ -119,7 +120,7 @@ const route = useRoute();
 const router = useRouter();
 const searchId = ref(0);
 
-const drawStore = useFireAlarmDrawStore();
+const drawStore = useDrawStore();
 
 watch(
   () => drawStore.drawMode,
@@ -187,6 +188,7 @@ const leftMenuConfig = [
 
 onMounted(() => {
   console.log('绘制应用layout mounted');
+  drawStore.drawPictureType = PictureType.FireAlarm;
   const dom = document.getElementById('draw-app-container');
   if (dom) {
     drawStore.setDraftId(+route.params.id as number);

src/stores/cctv-draw-store.ts

@@ -1,106 +0,0 @@
-import { defineStore } from 'pinia';
-import { initDrawApp, destroyDrawApp, getDrawApp } from 'src/drawApp/cctvApp';
-import {
-  DrawAssistant,
-  GraphicData,
-  IDrawApp,
-  IJlCanvas,
-  JlGraphic,
-} from 'jl-graphic';
-import { markRaw } from 'vue';
-
-export const useCCTVDrawStore = defineStore('cctvDraw', {
-  state: () => ({
-    drawAssistant: null as DrawAssistant | null,
-    selectedGraphics: null as JlGraphic[] | null,
-    draftId: null as number | null,
-  }),
-  getters: {
-    drawMode: (state) => state.drawAssistant != null,
-    drawGraphicType: (state) => state.drawAssistant?.type,
-    drawGraphicName: (state) => state.drawAssistant?.description,
-    drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
-    getApp: () => {
-      return getDrawApp();
-    },
-    selectedGraphicType: (state) => {
-      if (state.selectedGraphics) {
-        if (state.selectedGraphics.length === 1) {
-          return state.selectedGraphics[0].type;
-        }
-      }
-    },
-    selectedObjName(state): string {
-      if (state.selectedGraphics) {
-        if (state.selectedGraphics.length == 0) {
-          return '画布';
-        } else if (state.selectedGraphics.length == 1) {
-          const name = this.getApp?.getDrawAssistant(
-            state.selectedGraphics[0].type
-          ).description;
-          return name || '';
-        }
-        return '批量设置';
-      }
-      return '';
-    },
-    selectedGraphic: (state) => {
-      if (state.selectedGraphics) {
-        if (state.selectedGraphics.length === 1) {
-          return state.selectedGraphics[0];
-        }
-      }
-      return null;
-    },
-  },
-  actions: {
-    getDrawApp(): IDrawApp {
-      const app = this.getApp;
-      if (app == null) {
-        throw new Error('未初始化app');
-      }
-      return app;
-    },
-    getJlCanvas(): IJlCanvas {
-      return this.getDrawApp().canvas;
-    },
-    bindFormData(form: GraphicData): void {
-      const app = this.getDrawApp();
-      app.bindFormData(form);
-    },
-    unbindFormData(form: GraphicData): void {
-      const app = this.getDrawApp();
-      app.unbindFormData(form);
-    },
-    initDrawApp() {
-      let app: IDrawApp | null = null;
-      app = initDrawApp();
-      if (app == null) {
-        throw new Error('未初始化app');
-      }
-      app.on('interaction-plugin-resume', (plugin) => {
-        if (plugin.isAppPlugin()) {
-          if (Object.hasOwn(plugin, '__GraphicDrawAssistant')) {
-            this.drawAssistant = plugin as DrawAssistant;
-          } else {
-            this.drawAssistant = null;
-          }
-        }
-      });
-      app.on('graphicselected', (graphics) => {
-        this.selectedGraphics = markRaw(graphics);
-      });
-      this.selectedGraphics = [];
-      return app;
-    },
-    destroy() {
-      // console.log('绘制状态清空，绘制应用销毁');
-      this.drawAssistant = null;
-      this.selectedGraphics = null;
-      destroyDrawApp();
-    },
-    setDraftId(id: number | null) {
-      this.draftId = id;
-    },
-  },
-});

src/stores/draw-store.ts

@@ -1,9 +1,13 @@
 import { defineStore } from 'pinia';
-import { QTable } from 'quasar';
 import {
-  initDrawApp,
+  initCCTVDrawApp,
-  destroyDrawApp,
+  destroyCCTVDrawApp,
-  getDrawApp,
+  getCCTVDrawApp,
+} from 'src/drawApp/cctvApp';
+import {
+  initFireAlarmDrawApp,
+  destroyFireAlarmDrawApp,
+  getFireAlarmDrawApp,
 } from 'src/drawApp/fireAlarmApp';
 import {
   DrawAssistant,
@@ -13,22 +17,31 @@ import {
   JlGraphic,
 } from 'jl-graphic';
 import { markRaw } from 'vue';
+import { PictureType } from 'src/protos/picture';
 
-export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
+export const useDrawStore = defineStore('draw', {
   state: () => ({
     drawAssistant: null as DrawAssistant | null,
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
-    oneClickType: '',
+    drawPictureType: null as PictureType | null,
-    table: undefined as QTable | undefined,
   }),
   getters: {
     drawMode: (state) => state.drawAssistant != null,
     drawGraphicType: (state) => state.drawAssistant?.type,
     drawGraphicName: (state) => state.drawAssistant?.description,
     drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
-    getApp: () => {
+    getApp: (state) => {
-      return getDrawApp();
+      let app = null;
+      switch (state.drawPictureType) {
+        case PictureType.CCTV:
+          app = getCCTVDrawApp();
+          break;
+        case PictureType.FireAlarm:
+          app = getFireAlarmDrawApp();
+          break;
+      }
+      return app;
     },
     selectedGraphicType: (state) => {
       if (state.selectedGraphics) {
@@ -81,7 +94,14 @@ export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
     },
     initDrawApp() {
       let app: IDrawApp | null = null;
-      app = initDrawApp();
+      switch (this.drawPictureType) {
+        case PictureType.CCTV:
+          app = initCCTVDrawApp();
+          break;
+        case PictureType.FireAlarm:
+          app = initFireAlarmDrawApp();
+          break;
+      }
       if (app == null) {
         throw new Error('未初始化app');
       }
@@ -104,7 +124,14 @@ export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
       // console.log('绘制状态清空，绘制应用销毁');
       this.drawAssistant = null;
       this.selectedGraphics = null;
-      destroyDrawApp();
+      switch (this.drawPictureType) {
+        case PictureType.CCTV:
+          destroyCCTVDrawApp();
+          break;
+        case PictureType.FireAlarm:
+          destroyFireAlarmDrawApp();
+          break;
+      }
     },
     setDraftId(id: number | null) {
       this.draftId = id;