rangeConfigApp

src/drawApp/rangeConfigApp.ts

@@ -27,6 +27,7 @@ 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;
 
@@ -35,6 +36,46 @@ 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,
@@ -48,6 +89,7 @@ export function initRangeConfigApp(lineId: number) {
       LogicSection.Type,
       Turnout.Type,
     ],
+    dataLoader,
   });
   const graphicTemplate = [
     new SignalTemplate(new SignalData(), new SignalState()),
@@ -60,7 +102,29 @@ export function initRangeConfigApp(lineId: number) {
     new AxleCountingTemplate(new AxleCountingData()),
   ];
   rangeConfigApp.registerGraphicTemplates(...graphicTemplate);
-  rangeConfigApp.setOptions({});
+
+  rangeConfigApp.reload().then(() => {
+    const QuickJumpMenu = new ContextMenu({
+      name: '快捷跳转',
+      groups: [
+        {
+          items: rangeConfigApp.queryStore
+            .queryByType<Station>(Station.Type)
+            .map<MenuItemOptions>((station) => ({
+              name: station.datas.name ?? '',
+              handler: () => {
+                rangeConfigApp?.makeGraphicCenterShow(station);
+              },
+            })),
+        },
+      ],
+    });
+    rangeConfigApp.registerMenu(QuickJumpMenu);
+    rangeConfigApp.canvas.on('_rightclick', (e) => {
+      QuickJumpMenu.open(e.global);
+    });
+  });
+
   return rangeConfigApp;
 }
 

src/layouts/RangeConfigLayout.vue

@@ -22,8 +22,6 @@ function onResize() {
     dom.style.width = clientWidth + 'px';
     dom.style.height = clientHeight - 50 + 'px';
   }
-  const app = getRangeConfigApp();
-  if (app) app.onDomResize(clientWidth, clientHeight);
 }
 
 function goBack() {
@@ -43,12 +41,13 @@ function openRangeList() {
   });
 }
 
+rangeConfigStore.lineId = Number(route.params.id);
+const rangeConfigApp = rangeConfigStore.initRangeConfigApp();
+
 onMounted(() => {
   const dom = document.querySelector<HTMLElement>('#rangeConfigContainer');
   if (!dom) return;
-  rangeConfigStore.lineId = Number(route.params.id);
-  const rangeConfigApp = rangeConfigStore.initRangeConfigApp(dom);
-  loadLineDatas(rangeConfigApp);
+  rangeConfigApp.bindDom(dom);
 });
 onUnmounted(() => {
   rangeConfigStore.destory();

src/stores/range-config-store.ts

@@ -12,8 +12,8 @@ export const useRangeConfigStore = defineStore('rangeConfig', {
     selectedGraphics: [] as JlGraphic[],
   }),
   actions: {
-    initRangeConfigApp(dom: HTMLElement) {
-      const app = initRangeConfigApp(dom);
+    initRangeConfigApp() {
+      const app = initRangeConfigApp(this.lineId);
       app.on('graphicselectedchange', () => {
         this.selectedGraphics = app.selectedGraphics;
       });
@@ -27,6 +27,8 @@ export const useRangeConfigStore = defineStore('rangeConfig', {
       this.lineName = name;
     },
     destory() {
+      this.lineId = NaN;
+      this.lineName = '';
       this.selectedGraphics = [];
       destroyRangeConfigApp();
     },