添加列车暂提

graphic-pixi

@@ -1 +1 @@
-Subproject commit 83eab6c5b3d7a25adced20ad2e6179d3154c05fb
+Subproject commit 6899504fef7c623a9539905812aba3a93a58395f

src/components/draw-app/dialogs/AddTrainDialog.vue

@@ -0,0 +1,73 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <q-dialog ref="dialogRef">
+    <q-card>
+      <q-card-section> <div class="text-h6">添加列车</div> </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          type="number"
+          dense
+          outlined
+          :disable="true"
+          label="Link"
+          v-model="props.linkIndex"
+        />
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          type="number"
+          dense
+          outlined
+          label="列车偏移"
+          :min="0"
+          :max="1"
+          v-model="offset"
+        />
+      </q-card-section>
+      <q-card-section>
+        <q-select
+          v-model="dir"
+          label="运行方向"
+          dense
+          :options="dirOptions"
+          emitValue
+          mapOptions
+        >
+        </q-select>
+      </q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
+        <q-btn
+          flat
+          label="确认"
+          @click="onDialogOK({ dir, offset })"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar';
+import { ref } from 'vue';
+
+const props = defineProps({
+  linkIndex: {
+    type: Number,
+    required: true,
+  },
+});
+
+const dir = ref(1);
+const offset = ref(0);
+const dirOptions = [
+  { label: '上行', value: 1 },
+  { label: '下行', value: 0 },
+];
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+</script>
+<style scoped></style>

src/drawApp/graphics/SectionLinkInteraction.ts

@@ -5,7 +5,17 @@ import {
   SectionLink,
 } from 'src/graphics/sectionLink/SectionLink';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { IPointData } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
+import {
+  GraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+import { SignalOperateInteraction } from './SignalInteraction';
+import { Dialog } from 'quasar';
+import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
 
 export class SectionLinkData
   extends GraphicDataBase
@@ -86,3 +96,59 @@ export class SectionLinkData
     return pb_1.Message.equals(this.data, other.data);
   }
 }
+const addTrainConfig: MenuItemOptions = {
+  name: '添加列车',
+};
+const SectionLinkOperateMenu: ContextMenu = ContextMenu.init({
+  name: 'Link操作菜单',
+  groups: [
+    {
+      items: [addTrainConfig],
+    },
+  ],
+});
+export class SectionLinkOperateInteraction extends GraphicInteractionPlugin<SectionLink> {
+  static Name = 'sectionLink_operate_menu';
+  constructor(app: GraphicApp) {
+    super(SectionLinkOperateInteraction.Name, app);
+    app.registerMenu(SectionLinkOperateMenu);
+  }
+  static init(app: GraphicApp) {
+    return new SignalOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): SectionLink[] | undefined {
+    return grahpics
+      .filter((g) => g.type === SectionLink.Type)
+      .map((g) => g as SectionLink);
+  }
+  bind(g: SectionLink): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.selectable = true;
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: SectionLink): void {
+    g.selectable = false;
+    g.eventMode = 'none';
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const link = target.getGraphic() as SectionLink;
+    this.app.updateSelected(link);
+    addTrainConfig.handler = () => {
+      Dialog.create({
+        title: '创建列车',
+        message: '',
+        component: AddTrainDialog,
+        componentProps: link.datas.index,
+        cancel: true,
+        persistent: true,
+      }).onOk((data: { offset: number; dir: 1 | 0 }) => {
+        console.log(data, 'data');
+      });
+    };
+  }
+}