Merge branch 'handle_id'

# Conflicts:
#	src/drawApp/lineNetApp.ts
#	src/drawApp/rangeConfigApp.ts
#	yarn.lock

quasar.config.js

@@ -53,20 +53,22 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
     build: {
       target: {
-        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        browser: ['es2020'],
         node: 'node16',
       },
       env: require('./EnvParse.js')(),
       chainWebpack(chain) {
-        chain.plugin('eslint-webpack-plugin')
+        chain
-          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
 
-        chain.plugin('define')
+        chain.plugin('define').use(require('webpack/lib/DefinePlugin'), [
-          .use(require('webpack/lib/DefinePlugin'), [{
+          {
             'process.env': {
-              NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+              NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-            }
+            },
-          }])
+          },
+        ]);
       },
       vueRouterMode: 'history', // available values: 'hash', 'history'
       vueRouterBase: BasePath,

src/drawApp/lineApp.ts

@@ -1,7 +1,9 @@
 import {
+  ClientEngine,
   GraphicData,
   GraphicState,
   IGraphicApp,
+  IGraphicStorage,
   newGraphicApp,
 } from 'src/jl-graphic';
 import {
@@ -69,7 +71,6 @@ import {
   LogicSectionOperationPlugin,
   LogicSectionState,
 } from './graphics/LogicSectionInteraction';
-import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp';
 import { Notify, QNotifyUpdateOptions } from 'quasar';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { alert } from 'src/protos/alertInfo';
@@ -89,58 +90,6 @@ export function destroyLineApp(): void {
 
 export function initLineApp(): IGraphicApp {
   if (lineApp) return lineApp;
-  const lineAppDataLoader: IGraphicAppConfig['dataLoader'] = async () => {
-    const lineStore = useLineStore();
-    const lineId = lineStore.lineId;
-    if (!lineId) {
-      throw Error('请先选择线路');
-    }
-    const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
-      lineId,
-      'line'
-    );
-    lineStore.setLineName(lineName);
-    const datas: GraphicData[] = [];
-    const canvasProperty = new CanvasData();
-    if (base64) {
-      const storage = graphicData.RtssGraphicStorage.deserialize(
-        toUint8Array(base64)
-      );
-      canvasProperty.copyFrom(storage.canvas);
-      storage.Platforms.forEach((platform) => {
-        const g = new PlatformData(platform);
-        datas.push(g);
-      });
-      storage.stations.forEach((station) => {
-        datas.push(new StationData(station));
-      });
-      storage.train.forEach((train) => {
-        datas.push(new TrainData(train));
-      });
-      storage.turnouts.forEach((turnout) => {
-        datas.push(new TurnoutData(turnout));
-      });
-      storage.signals.forEach((signal) => {
-        datas.push(new SignalData(signal));
-      });
-      storage.section.forEach((section) => {
-        datas.push(new SectionData(section));
-      });
-      storage.logicSections.forEach((section) => {
-        datas.push(new LogicSectionData(section));
-      });
-      storage.separators.forEach((separator) => {
-        datas.push(new SeparatorData(separator));
-      });
-      storage.axleCountings.forEach((axleCounting) => {
-        datas.push(new AxleCountingData(axleCounting));
-      });
-      storage.trainWindows.forEach((trainWindow) => {
-        datas.push(new TrainWindowData(trainWindow));
-      });
-    }
-    return { datas, canvasProperty };
-  };
 
   lineApp = newGraphicApp({
     interactiveGraphicTypeIncludes: [
@@ -157,7 +106,7 @@ export function initLineApp(): IGraphicApp {
       viewportDragLeft: true,
       wheelZoom: true,
     },
-    dataLoader: lineAppDataLoader,
+    dataLoader: loadLineDatas,
   });
 
   const graphicTemplate = [
@@ -182,6 +131,7 @@ export function initLineApp(): IGraphicApp {
   sectionOperationPlugin.init(lineApp);
 
   lineApp.enableWsMassaging({
+    engine: ClientEngine.MQTT,
     wsUrl: getWebsocketUrl(),
     token: getJwtToken() as string,
   });
@@ -242,6 +192,65 @@ export function initLineApp(): IGraphicApp {
   return lineApp;
 }
 
+export async function loadLineDatas(): Promise<IGraphicStorage> {
+  const lineStore = useLineStore();
+  const lineId = lineStore.lineId;
+  if (!lineId) {
+    throw Error('请先选择线路');
+  }
+  const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
+    lineId,
+    'line'
+  );
+  lineStore.setLineName(lineName);
+  const datas: GraphicData[] = [];
+  if (base64) {
+    const storage = graphicData.RtssGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    console.log('加载数据', storage);
+    storage.Platforms.forEach((platform) => {
+      const g = new PlatformData(platform);
+      datas.push(g);
+    });
+    storage.stations.forEach((station) => {
+      datas.push(new StationData(station));
+    });
+    storage.train.forEach((train) => {
+      datas.push(new TrainData(train));
+    });
+    storage.turnouts.forEach((turnout) => {
+      datas.push(new TurnoutData(turnout));
+    });
+    storage.signals.forEach((signal) => {
+      datas.push(new SignalData(signal));
+    });
+    storage.section.forEach((section) => {
+      datas.push(new SectionData(section));
+    });
+    storage.logicSections.forEach((section) => {
+      datas.push(new LogicSectionData(section));
+    });
+    storage.separators.forEach((separator) => {
+      datas.push(new SeparatorData(separator));
+    });
+    storage.axleCountings.forEach((axleCounting) => {
+      datas.push(new AxleCountingData(axleCounting));
+    });
+    storage.trainWindows.forEach((trainWindow) => {
+      datas.push(new TrainWindowData(trainWindow));
+    });
+    return Promise.resolve({
+      canvasProperty: storage.canvas,
+      datas: datas,
+    });
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}
+
 function handleSubscribe(lineApp: IGraphicApp) {
   const lineStore = useLineStore();
   const lineId = lineStore.lineId;

src/drawApp/lineNetApp.ts

@@ -3,7 +3,8 @@ import {
   GraphicData,
   GraphicState,
   newGraphicApp,
-} from 'src/jl-graphic';
+  IGraphicStorage,
+} from 'jl-graphic';
 import { getPublishLineNet } from 'src/api/PublishApi';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { state } from 'src/protos/ws_message';
@@ -34,7 +35,6 @@ import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { getJwtToken } from 'src/configs/TokenManage';
 import { alert } from 'src/protos/alertInfo';
 import { Notify } from 'quasar';
-import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp';
 
 let lineNetApp: IGraphicApp | null = null;
 
@@ -50,41 +50,6 @@ export function destroyLineNetApp(): void {
 }
 
 export function initLineNetApp(): IGraphicApp {
-  const lineNetStore = useLineNetStore();
-  const lineNetAppDataLoader: IGraphicAppConfig['dataLoader'] = async () => {
-    const { proto: base64, name: lineNetName } = await getPublishLineNet();
-    lineNetStore.setLineNetName(lineNetName);
-    const datas: GraphicData[] = [];
-    const canvasProperty = new CanvasData();
-    if (base64) {
-      const storage = graphicData.RtssGraphicStorage.deserialize(
-        toUint8Array(base64)
-      );
-      canvasProperty.copyFrom(storage.canvas);
-      storage.runLines.forEach((runLine) => {
-        const g = new RunLineData(runLine);
-        datas.push(g);
-      });
-      storage.pathLines.forEach((pathLine) => {
-        const g = new PathLineData(pathLine);
-        datas.push(g);
-      });
-      storage.stationLines.forEach((stationLine) => {
-        const g = new StationLineData(stationLine);
-        datas.push(g);
-      });
-      storage.trainLines.forEach((trainLine) => {
-        const g = new TrainLineData(trainLine);
-        datas.push(g);
-      });
-      storage.rects.forEach((rect) => {
-        const g = new RectData(rect);
-        datas.push(g);
-      });
-    }
-    return { datas, canvasProperty };
-  };
-
   lineNetApp = newGraphicApp({
     interactiveGraphicTypeIncludes: [
       RunLine.Type,
@@ -97,7 +62,7 @@ export function initLineNetApp(): IGraphicApp {
       viewportDragLeft: true,
       wheelZoom: true,
     },
-    dataLoader: lineNetAppDataLoader,
+    dataLoader: loadLineNetDatas,
   });
   const graphicTemplate = [
     new RunLineTemplate(new RunLineData()),
@@ -136,6 +101,47 @@ export function initLineNetApp(): IGraphicApp {
   return lineNetApp;
 }
 
+export async function loadLineNetDatas(): Promise<IGraphicStorage> {
+  const lineNetStore = useLineNetStore();
+  const { proto: base64, name: lineNetName } = await getPublishLineNet();
+  lineNetStore.setLineNetName(lineNetName);
+  const datas: GraphicData[] = [];
+  if (base64) {
+    const storage = graphicData.RtssGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    console.log('加载数据', storage);
+    storage.runLines.forEach((runLine) => {
+      const g = new RunLineData(runLine);
+      datas.push(g);
+    });
+    storage.pathLines.forEach((pathLine) => {
+      const g = new PathLineData(pathLine);
+      datas.push(g);
+    });
+    storage.stationLines.forEach((stationLine) => {
+      const g = new StationLineData(stationLine);
+      datas.push(g);
+    });
+    storage.trainLines.forEach((trainLine) => {
+      const g = new TrainLineData(trainLine);
+      datas.push(g);
+    });
+    storage.rects.forEach((rect) => {
+      const g = new RectData(rect);
+      datas.push(g);
+    });
+    return Promise.resolve({
+      canvasProperty: storage.canvas,
+      datas: datas,
+    });
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}
+
 function handleSubscribe(lineNetApp: IGraphicApp) {
   const lineNetStore = useLineNetStore();
   lineNetApp.enableWsMassaging({

src/drawApp/rangeConfigApp.ts

@@ -7,7 +7,14 @@ import { SectionTemplate } from 'src/graphics/section/Section';
 import { Signal, SignalTemplate } from 'src/graphics/signal/Signal';
 import { Station, StationTemplate } from 'src/graphics/station/Station';
 import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
-import { IGraphicApp, GraphicData, newGraphicApp } from 'src/jl-graphic';
+import {
+  IGraphicApp,
+  GraphicData,
+  newGraphicApp,
+  MenuItemOptions,
+  ContextMenu,
+  IGraphicStorage,
+} from 'jl-graphic';
 import {
   LogicSectionData,
   LogicSectionState,
@@ -25,9 +32,6 @@ import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
 import { useRangeConfigStore } from 'src/stores/range-config-store';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { toUint8Array } from 'js-base64';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp';
 
 let rangeConfigApp: IGraphicApp;
 
@@ -36,46 +40,6 @@ export function getRangeConfigApp() {
 }
 
 export function initRangeConfigApp(lineId: number) {
-  const dataLoader: IGraphicAppConfig['dataLoader'] = async () => {
-    if (!lineId) throw Error('请先选择线路');
-    const store = useRangeConfigStore();
-
-    const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
-      lineId,
-      'line'
-    );
-    store.setLineName(lineName);
-    const datas: GraphicData[] = [];
-    const canvasProperty = new CanvasData();
-    if (base64) {
-      const storage = graphicData.RtssGraphicStorage.deserialize(
-        toUint8Array(base64)
-      );
-      canvasProperty.copyFrom(storage.canvas);
-      storage.Platforms.forEach((platform) => {
-        datas.push(new PlatformData(platform));
-      });
-      storage.stations.forEach((station) => {
-        datas.push(new StationData(station));
-      });
-      storage.turnouts.forEach((turnout) => {
-        datas.push(new TurnoutData(turnout));
-      });
-      storage.section.forEach((section) => {
-        datas.push(new SectionData(section));
-      });
-      storage.logicSections.forEach((section) => {
-        datas.push(new LogicSectionData(section));
-      });
-      storage.separators.forEach((separator) => {
-        datas.push(new SeparatorData(separator));
-      });
-      storage.axleCountings.forEach((axleCounting) => {
-        datas.push(new AxleCountingData(axleCounting));
-      });
-    }
-    return { datas, canvasProperty };
-  };
   rangeConfigApp = newGraphicApp({
     mouseToolOptions: {
       boxSelect: true,
@@ -89,7 +53,7 @@ export function initRangeConfigApp(lineId: number) {
       LogicSection.Type,
       Turnout.Type,
     ],
-    dataLoader,
+    dataLoader: () => loadRangeConfigDatas(lineId),
   });
   const graphicTemplate = [
     new SignalTemplate(new SignalData(), new SignalState()),
@@ -128,6 +92,55 @@ export function initRangeConfigApp(lineId: number) {
   return rangeConfigApp;
 }
 
+export async function loadRangeConfigDatas(
+  lineId: number
+): Promise<IGraphicStorage> {
+  if (!lineId) throw Error('请先选择线路');
+  const store = useRangeConfigStore();
+
+  const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
+    lineId,
+    'line'
+  );
+  store.setLineName(lineName);
+  const datas: GraphicData[] = [];
+  if (base64) {
+    const storage = graphicData.RtssGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    console.log('加载数据', storage);
+    storage.Platforms.forEach((platform) => {
+      datas.push(new PlatformData(platform));
+    });
+    storage.stations.forEach((station) => {
+      datas.push(new StationData(station));
+    });
+    storage.turnouts.forEach((turnout) => {
+      datas.push(new TurnoutData(turnout));
+    });
+    storage.section.forEach((section) => {
+      datas.push(new SectionData(section));
+    });
+    storage.logicSections.forEach((section) => {
+      datas.push(new LogicSectionData(section));
+    });
+    storage.separators.forEach((separator) => {
+      datas.push(new SeparatorData(separator));
+    });
+    storage.axleCountings.forEach((axleCounting) => {
+      datas.push(new AxleCountingData(axleCounting));
+    });
+    return Promise.resolve({
+      canvasProperty: storage.canvas,
+      datas: datas,
+    });
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}
+
 export async function loadLineDatas(app: IGraphicApp) {
   const store = useRangeConfigStore();
   const lineId = store.lineId;