拆app，增加commonApp

src/drawApp/commonApp.ts

@@ -0,0 +1,109 @@
+import {
+  ContextMenu,
+  GraphicData,
+  IDrawApp,
+  MenuItemOptions,
+} from 'jl-graphic';
+import { useDrawStore } from 'src/stores/draw-store';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { toStorageTransform } from './graphics/GraphicDataBase';
+import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
+import { ArrowData } from './graphics/ArrowInteraction';
+import { ArrowDraw } from 'src/graphics/arrow/ArrowDrawAssistant';
+
+const UndoOptions: MenuItemOptions = {
+  name: '撤销',
+};
+const RedoOptions: MenuItemOptions = {
+  name: '重做',
+};
+const SelectAllOptions: MenuItemOptions = {
+  name: '全选',
+};
+
+export const DefaultCanvasMenu = new ContextMenu({
+  name: '绘制-画布菜单',
+  groups: [
+    {
+      items: [UndoOptions, RedoOptions],
+    },
+    {
+      items: [SelectAllOptions],
+    },
+  ],
+});
+
+export function initCommonDrawApp(app: IDrawApp) {
+  new ArrowDraw(app, new ArrowTemplate(new ArrowData()));
+  // 画布右键菜单
+  app.registerMenu(DefaultCanvasMenu);
+
+  app.canvas.on('_rightclick', (e) => {
+    if (app.drawing) return;
+    UndoOptions.disabled = !app.opRecord.hasUndo;
+    RedoOptions.disabled = !app.opRecord.hasRedo;
+
+    UndoOptions.handler = () => {
+      app.opRecord.undo();
+    };
+    RedoOptions.handler = () => {
+      app.opRecord.redo();
+    };
+    SelectAllOptions.handler = () => {
+      app.selectAllGraphics();
+    };
+    DefaultCanvasMenu.open(e.global);
+  });
+  app.on('destroy', async () => {});
+}
+
+export function loadCommonDrawDatas(
+  storage: iscsGraphicData.IscsGraphicStorage
+): GraphicData[] {
+  const datas: GraphicData[] = [];
+  console.log(storage, 'storage');
+  storage.arrows.forEach((arrow) => {
+    datas.push(new ArrowData(arrow));
+  });
+  return datas;
+}
+
+export function saveCommonDrawDatas(app: IDrawApp) {
+  const storage = new iscsGraphicData.IscsGraphicStorage();
+  const canvasData = app.canvas.saveData();
+  storage.canvas = new iscsGraphicData.Canvas({
+    width: canvasData.width,
+    height: canvasData.height,
+    backgroundColor: canvasData.backgroundColor,
+    viewportTransform: toStorageTransform(canvasData.viewportTransform),
+  });
+  const graphics = app.queryStore.getAllGraphics();
+  graphics.forEach((g) => {
+    if (Arrow.Type === g.type) {
+      const arrowData = (g as Arrow).saveData();
+      storage.arrows.push((arrowData as ArrowData).data);
+    }
+  });
+
+  return storage;
+}
+
+export function saveDrawToServer(base64: string) {
+  const drawStore = useDrawStore();
+  const id = drawStore.draftId;
+  if (!id) {
+    return;
+  }
+  console.log('save' + base64);
+}
+
+let UniqueIdPrefix = new iscsGraphicData.UniqueIdOfStationLayout();
+export function loadUniqueIdPrefix() {
+  return UniqueIdPrefix;
+}
+
+export function setUniqueIdPrefix(
+  newUniqueIdPrefix: iscsGraphicData.UniqueIdOfStationLayout
+) {
+  UniqueIdPrefix = newUniqueIdPrefix;
+}

src/drawApp/drawApp.ts

@@ -1,48 +1,24 @@
 // import { fromUint8Array } from 'js-base64';
 import {
   CombinationKey,
-  ContextMenu,
   IDrawApp,
   IGraphicStorage,
   JlGraphic,
   KeyListener,
-  MenuItemOptions,
   newDrawApp,
 } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { toStorageTransform } from './graphics/GraphicDataBase';
 import { fromUint8Array } from 'js-base64';
-import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
+import {
-import { ArrowData } from './graphics/ArrowInteraction';
+  initCommonDrawApp,
-import { ArrowDraw } from 'src/graphics/arrow/ArrowDrawAssistant';
+  saveCommonDrawDatas,
-
+  saveDrawToServer,
-// import { Notify } from 'quasar';
+} from './commonApp';
 
 let drawApp: IDrawApp | null = null;
 
-const UndoOptions: MenuItemOptions = {
-  name: '撤销',
-};
-const RedoOptions: MenuItemOptions = {
-  name: '重做',
-};
-const SelectAllOptions: MenuItemOptions = {
-  name: '全选',
-};
-
-export const DefaultCanvasMenu = new ContextMenu({
-  name: '绘制-画布菜单',
-  groups: [
-    {
-      items: [UndoOptions, RedoOptions],
-    },
-    {
-      items: [SelectAllOptions],
-    },
-  ],
-});
-
 export function getDrawApp(): IDrawApp | null {
   return drawApp;
 }
@@ -54,27 +30,6 @@ export function destroyDrawApp(): void {
   }
 }
 
-export const drawLayerList = [
-  // 图层列表  默认显示的图层defaultShow: true
-];
-
-// function initShowLayer(app: IDrawApp) {
-//   const showTypeList: string[] = [];
-//   drawLayerList.forEach((item) => {
-//     if (item.defaultShow) {
-//       showTypeList.push(item.value);
-//     }
-//   });
-//   const alllGraphic = app.queryStore.getAllGraphics();
-//   alllGraphic.forEach((g) => {
-//     if (showTypeList.includes(g.type)) {
-//       g.visible = true;
-//     } else {
-//       g.visible = false;
-//     }
-//   });
-// }
-
 export function initDrawApp(): IDrawApp {
   const isSupportDeletion = (g: JlGraphic) => {
     console.log(g);
@@ -85,24 +40,8 @@ export function initDrawApp(): IDrawApp {
     isSupportDeletion: isSupportDeletion,
   });
   const app = drawApp;
-  new ArrowDraw(drawApp, new ArrowTemplate(new ArrowData()));
+  initCommonDrawApp(app);
-  app.canvas.on('_rightclick', (e) => {
-    if (app.drawing) return;
-    UndoOptions.disabled = !app.opRecord.hasUndo;
-    RedoOptions.disabled = !app.opRecord.hasRedo;
 
-    UndoOptions.handler = () => {
-      app.opRecord.undo();
-    };
-    RedoOptions.handler = () => {
-      app.opRecord.redo();
-    };
-    SelectAllOptions.handler = () => {
-      app.selectAllGraphics();
-    };
-    DefaultCanvasMenu.open(e.global);
-  });
-  app.on('destroy', async () => {});
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyS',
@@ -113,9 +52,6 @@ export function initDrawApp(): IDrawApp {
       },
     })
   );
-  // app.on('postdataloaded', () => {
-  //   initShowLayer(app);
-  // });
   return drawApp;
 }
 
@@ -125,13 +61,19 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
   if (!id) {
     throw new Error('获取数据异常：为获取到草稿地图ID');
   }
+  /*   const { proto: base64 } = await getDraft(id);
+  if (base64) {
+    const storage = iscsGraphicData.IscsGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    const datas = loadCommonDrawDatas(storage);} */
   return Promise.resolve({
     datas: [],
   });
 }
 
 export function saveDrawDatas(app: IDrawApp) {
-  const storage = new iscsGraphicData.IscsGraphicStorage();
+  const storage = saveCommonDrawDatas(app);
   const canvasData = app.canvas.saveData();
   storage.canvas = new iscsGraphicData.Canvas({
     width: canvasData.width,
@@ -140,38 +82,12 @@ export function saveDrawDatas(app: IDrawApp) {
     viewportTransform: toStorageTransform(canvasData.viewportTransform),
   });
   const graphics = app.queryStore.getAllGraphics();
-  if (Arrow.Type === g.type) {
+  /*  graphics.forEach((g) => {
-    const arrowData = (g as Arrow).saveData();
+    if (TrackSection.Type === g.type) {
-    storage.arrows.push((arrowData as ArrowData).data);
+      const trackSectionData = (g as TrackSection).saveData();
-  }
+      storage.trackSections.push((trackSectionData as TrackSectionData).data);
+    } }) */
   console.log(storage, '保存数据', graphics);
   const base64 = fromUint8Array(storage.serialize());
   return base64;
 }
-
-export function loadCommonDrawDatas(storage: any): any[] {
-  const datas: any[] = [];
-  console.log(storage, 'storage');
-
-  return datas;
-}
-
-export function saveDrawToServer(base64: string) {
-  const drawStore = useDrawStore();
-  const id = drawStore.draftId;
-  if (!id) {
-    return;
-  }
-  console.log('save' + base64);
-}
-
-let UniqueIdPrefix = new iscsGraphicData.UniqueIdOfStationLayout();
-export function loadUniqueIdPrefix() {
-  return UniqueIdPrefix;
-}
-
-export function setUniqueIdPrefix(
-  newUniqueIdPrefix: iscsGraphicData.UniqueIdOfStationLayout
-) {
-  UniqueIdPrefix = newUniqueIdPrefix;
-}