diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts index 17692bd..88d5dd0 100644 --- a/src/drawApp/lineApp.ts +++ b/src/drawApp/lineApp.ts @@ -26,9 +26,9 @@ import { } from './graphics/StationInteraction'; import { Station, StationTemplate } from 'src/graphics/station/Station'; import { TurnoutData, TurnoutStates } from './graphics/TurnoutInteraction'; -import { TurnoutTemplate } from 'src/graphics/turnout/Turnout'; +import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout'; import { SectionData } from './graphics/SectionInteraction'; -import { SectionTemplate } from 'src/graphics/section/Section'; +import { Section, SectionTemplate } from 'src/graphics/section/Section'; import { getPublishMapInfoByLineId } from 'src/api/PublishApi'; import { graphicData } from 'src/protos/stationLayoutGraphics'; import { useLineStore } from 'src/stores/line-store'; @@ -41,12 +41,22 @@ import { AxleCountingTemplate, } from 'src/graphics/axleCounting/AxleCounting'; import { AxleCountingData } from './graphics/AxleCountingInteraction'; -import { - TrainWindow, - TrainWindowTemplate, -} from 'src/graphics/trainWindow/TrainWindow'; +import { TrainWindowTemplate } from 'src/graphics/trainWindow/TrainWindow'; import { TrainWindowData } from './graphics/TrainWindowInteraction'; import { useRoute } from 'vue-router'; +import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; +import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; +import { AxleCountingSectionTemplate } from 'src/graphics/axleCountingSection/AxleCountingSection'; +import { LogicSectionTemplate } from 'src/graphics/logicSection/LogicSection'; +import { + SectionLink, + SectionLinkTemplate, +} from 'src/graphics/sectionLink/SectionLink'; +import { Separator, SeparatorTemplate } from 'src/graphics/separator/Separator'; +import { SeparatorData } from './graphics/SeparatorInteraction'; +import { SectionLinkData } from './graphics/SectionLinkInteraction'; +import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction'; +import { LogicSectionData } from './graphics/LogicSectionInteraction'; let lineApp: GraphicApp | null = null; let msgBroker: AppWsMsgBroker | null = null; @@ -65,6 +75,40 @@ export function destroyLineApp(): void { } } +const PhysicsOptions: MenuItemOptions = { + name: '物理图层', +}; +const linkOptions: MenuItemOptions = { + name: 'Link图层', +}; + +const layerOptions: MenuItemOptions = { + name: '图层', + subMenu: [ + { + name: '图层菜单', + items: [PhysicsOptions, linkOptions], + }, + ], +}; +const DefaultCanvasMenu = new ContextMenu({ + name: '图层选择', + groups: [ + { + items: [layerOptions], + }, + ], +}); +const showType = [ + Platform.Type, + Station.Type, + Turnout.Type, + Signal.Type, + Separator.Type, +]; +const physicShowType = [...showType, Section.Type]; +const linkShowType = [...showType, SectionLink.Type, AxleCounting.Type]; + export function initLineApp(dom: HTMLElement): GraphicApp { lineApp = new GraphicApp(dom); const graphicTemplate = [ @@ -76,6 +120,10 @@ export function initLineApp(dom: HTMLElement): GraphicApp { new SectionTemplate(new SectionData()), new AxleCountingTemplate(new AxleCountingData()), new TrainWindowTemplate(new TrainWindowData()), + new SeparatorTemplate(new SeparatorData()), + new SectionLinkTemplate(new SectionLinkData()), + new AxleCountingSectionTemplate(new AxleCountingSectionData()), + new LogicSectionTemplate(new LogicSectionData()), ]; lineApp.registerGraphicTemplates(...graphicTemplate); lineApp.setOptions({ @@ -95,6 +143,30 @@ export function initLineApp(dom: HTMLElement): GraphicApp { SignalOperateInteraction.init(lineApp); PlatformOperateInteraction.init(lineApp); StationOperateInteraction.init(lineApp); + // 画布右键菜单 + lineApp.registerMenu(DefaultCanvasMenu); + lineApp.canvas.on('_rightclick', (e) => { + const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics(); + PhysicsOptions.handler = () => { + alllGraphic.forEach((g) => { + if (physicShowType.includes(g.type)) { + g.visible = true; + } else { + g.visible = false; + } + }); + }; + linkOptions.handler = () => { + alllGraphic.forEach((g) => { + if (linkShowType.includes(g.type)) { + g.visible = true; + } else { + g.visible = false; + } + }); + }; + DefaultCanvasMenu.open(e.global); + }); return lineApp; } @@ -139,20 +211,30 @@ export async function loadLineDatas(app: GraphicApp) { storage.trainWindows.forEach((trainWindow) => { datas.push(new TrainWindowData(trainWindow)); }); + storage.separators.forEach((separator) => { + datas.push(new SeparatorData(separator)); + }); + storage.sectionLinks.forEach((sectionLink) => { + if (sectionLink.code) { + sectionLink.index = parseInt(sectionLink.code); + } + datas.push(new SectionLinkData(sectionLink)); + }); + storage.axleCountingSections.forEach((axleCountingSection) => { + datas.push(new AxleCountingSectionData(axleCountingSection)); + }); + storage.logicSections.forEach((logicSection) => { + datas.push(new LogicSectionData(logicSection)); + }); await app.loadGraphic(datas); - //隐藏计轴--和车次窗 - const axleCountings = app.queryStore.queryByType( - AxleCounting.Type - ); - axleCountings.forEach((axleCounting) => { - axleCounting.visible = false; - }); - const trainWindows = app.queryStore.queryByType( - TrainWindow.Type - ); - trainWindows.forEach((trainWindow) => { - trainWindow.visible = false; + const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics(); + alllGraphic.forEach((g) => { + if (physicShowType.includes(g.type)) { + g.visible = true; + } else { + g.visible = false; + } }); StompCli.new({ @@ -160,10 +242,10 @@ export async function loadLineDatas(app: GraphicApp) { token: getJwtToken() as string, }); msgBroker = new AppWsMsgBroker(app); - const states: GraphicState[] = []; msgBroker.subscribe({ destination: `/simulation/${simulationId}/devices/status`, messageConverter: (message: Uint8Array) => { + const states: GraphicState[] = []; const storage = state.PushedDevicesStatus.deserialize(message); if (storage.all) { storage.allStatus.sectionState.forEach((item) => {