车站去圆圈

src/components/draw-app/properties/StationProperty.vue

@@ -8,40 +8,6 @@
       v-model="stationModel.code"
       lazy-rules
     />
-    <q-select
-      outlined
-      @blur="onUpdate"
-      v-model="hasCircle"
-      :options="optionsCircle"
-      label="是否有圆圈"
-    />
-    <div v-if="stationModel.hasCircle">
-      <q-item-label header>位置</q-item-label>
-      <q-item>
-        <q-item-section no-wrap class="q-gutter-sm column">
-          <div class="row">
-            <q-input
-              outlined
-              @blur="onUpdate"
-              label="x"
-              v-model.number="circlePosition.x"
-              type="number"
-              step="any"
-              class="col"
-            />
-            <q-input
-              outlined
-              @blur="onUpdate"
-              label="y"
-              v-model.number="circlePosition.y"
-              type="number"
-              step="any"
-              class="col"
-            />
-          </div>
-        </q-item-section>
-      </q-item>
-    </div>
   </q-form>
 </template>
 
@@ -49,21 +15,10 @@
 import { StationData } from 'src/drawApp/graphics/StationInteraction';
 import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
 
 const drawStore = useDrawStore();
 const stationModel = reactive(new StationData());
-const hasCircle = ref('是');
-let circlePosition = ref({ x: 0, y: -20 });
-const optionsCircle = ['是', '否'];
-enum showSelect {
-  是 = 'true',
-  否 = 'false',
-}
-enum showSelectData {
-  true = '是',
-  false = '否',
-}
 
 drawStore.$subscribe;
 watch(
@@ -71,7 +26,6 @@ watch(
   (val) => {
     if (val && val.type == Station.Type) {
       stationModel.copyFrom(val.saveData() as StationData);
-      hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
     }
   }
 );
@@ -80,15 +34,10 @@ onMounted(() => {
   const station = drawStore.selectedGraphic as Station;
   if (station) {
     stationModel.copyFrom(station.saveData());
-    if (stationModel.childTransforms) {
-      circlePosition.value = stationModel.childTransforms[0].transform.position;
-    }
-    hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
   }
 });
 
 function onUpdate() {
-  stationModel.hasCircle = JSON.parse((showSelect as never)[hasCircle.value]);
   const station = drawStore.selectedGraphic as Station;
   if (station) {
     drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);

src/drawApp/graphics/StationInteraction.ts

@@ -25,12 +25,6 @@ export class StationData extends GraphicDataBase implements IStationData {
   set code(v: string) {
     this.data.code = v;
   }
-  get hasCircle(): boolean {
-    return this.data.hasCircle;
-  }
-  set hasCircle(v: boolean) {
-    this.data.hasCircle = v;
-  }
   clone(): StationData {
     return new StationData(this.data.cloneMessage());
   }

src/graphics/station/Station.ts

@@ -1,4 +1,3 @@
-import { Color, Graphics } from 'pixi.js';
 import {
   GraphicData,
   JlGraphic,
@@ -10,63 +9,33 @@ import { StationDraw } from './StationDrawAssistant';
 export interface IStationData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
-  get hasCircle(): boolean; // 是否有圆圈--线网图
-  set hasCircle(v: boolean);
   clone(): IStationData;
   copyFrom(data: IStationData): void;
   eq(other: IStationData): boolean;
 }
 
 const stationConsts = {
-  circleOffsetY: -20,
-  radius: 5,
-  borderWidth: 1,
-  borderColor: '0xff0000',
-  fillColor: '0xff0000',
   codeColor: '0xF48815',
   codeFontSize: 22,
-  lineWidth: 3,
 };
 
 export class Station extends JlGraphic {
   static Type = 'station';
   codeGraph: VectorText = new VectorText(''); //车站名
-  circleGraphic: Graphics = new Graphics();
   constructor() {
     super(Station.Type);
     this.addChild(this.codeGraph);
-    this.addChild(this.circleGraphic);
-    this.circleGraphic.name = 'circle';
   }
 
   get datas(): IStationData {
     return this.getDatas<IStationData>();
   }
   static draw(station: Station | StationDraw, datas?: IStationData): void {
-    station.circleGraphic.clear();
     const codeGraph = station.codeGraph;
     codeGraph.text = datas?.code || '车站Station';
     codeGraph.style.fill = stationConsts.codeColor;
     codeGraph.setVectorFontSize(stationConsts.codeFontSize);
     codeGraph.anchor.set(0.5);
-    if (datas?.hasCircle) {
-      const circleGraphic = station.circleGraphic;
-      circleGraphic.lineStyle(
-        stationConsts.borderWidth,
-        new Color(stationConsts.borderColor)
-      );
-      circleGraphic.beginFill(stationConsts.fillColor, 1);
-      circleGraphic.drawCircle(0, 0, stationConsts.radius);
-      circleGraphic.endFill;
-      if (datas.childTransforms?.length) {
-        circleGraphic.position.set(
-          datas.childTransforms[0].transform.position.x,
-          datas.childTransforms[0].transform.position.y
-        );
-      } else {
-        circleGraphic.position.set(0, stationConsts.circleOffsetY);
-      }
-    }
   }
   doRepaint(): void {
     Station.draw(this, this.datas);
@@ -74,12 +43,8 @@ export class Station extends JlGraphic {
 }
 
 export class StationTemplate extends JlGraphicTemplate<Station> {
-  hasCircle: boolean;
-  radius: number;
   constructor() {
     super(Station.Type);
-    this.hasCircle = true;
-    this.radius = stationConsts.radius;
   }
   new(): Station {
     return new Station();

src/graphics/station/StationDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { FederatedPointerEvent, Point, Graphics } from 'pixi.js';
+import { FederatedPointerEvent, Point } from 'pixi.js';
 import {
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
@@ -18,7 +18,6 @@ export class StationDraw extends GraphicDrawAssistant<
   IStationData
 > {
   codeGraph: VectorText = new VectorText('');
-  circleGraphic: Graphics = new Graphics();
 
   constructor(app: JlDrawApp, createData: () => IStationData) {
     super(
@@ -52,9 +51,7 @@ export class StationDraw extends GraphicDrawAssistant<
     this.container.position.copyFrom(p);
   }
   prepareData(data: IStationData): boolean {
-    const template = this.graphicTemplate;
     data.transform = this.container.saveTransform();
-    data.hasCircle = template.hasCircle;
     return true;
   }
 }
@@ -77,21 +74,10 @@ export class stationInteraction extends GraphicInteractionPlugin<Station> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
-    if (g.datas.hasCircle) {
-      g.circleGraphic.eventMode = 'static';
-      g.circleGraphic.cursor = 'pointer';
-      g.circleGraphic.draggable = true;
-      g.circleGraphic.selectable = true;
-      g.circleGraphic.transformSave = true;
-    }
   }
   unbind(g: Station): void {
     g.eventMode = 'none';
     g.scalable = false;
     g.rotatable = false;
-    g.circleGraphic.eventMode = 'none';
-    g.circleGraphic.draggable = false;
-    g.circleGraphic.selectable = false;
-    g.circleGraphic.transformSave = false;
   }
 }