同步框架代码

修改区段/道岔等端口辅助文字颜色

src/graphics/section/SectionDrawAssistant.ts

@@ -1,28 +1,3 @@
-import {
-  ChildTransform,
-  DraggablePoint,
-  IGraphicApp,
-  GraphicDrawAssistant,
-  GraphicInteractionPlugin,
-  GraphicTransform,
-  GraphicTransformEvent,
-  IDrawApp,
-  JlGraphic,
-  VectorText,
-  calculateLineMidpoint,
-  linePoint,
-  KeyListener,
-  calculateMirrorPoint,
-  convertToBezierParams,
-  pointPolygon,
-} from 'src/jl-graphic';
-import {
-  ISectionData,
-  Section,
-  SectionConsts,
-  SectionTemplate,
-  SectionType,
-} from './Section';
 import {
   DisplayObject,
   FederatedMouseEvent,
@@ -31,30 +6,56 @@ import {
   IPointData,
   Point,
 } from 'pixi.js';
+import { Dialog } from 'quasar';
+import SectionSplitDialog from 'src/components/draw-app/dialogs/SectionSplitDialog.vue';
+import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
+import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
 import {
+  AppConsts,
+  ChildTransform,
+  DraggablePoint,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransform,
+  GraphicTransformEvent,
+  IDrawApp,
+  IGraphicApp,
+  JlGraphic,
+  KeyListener,
+  VectorText,
+  calculateLineMidpoint,
+  calculateMirrorPoint,
+  convertToBezierParams,
+  linePoint,
+  pointPolygon,
+} from 'src/jl-graphic';
+import AbsorbablePoint, {
+  AbsorbableLine,
+  AbsorbablePosition,
+} from 'src/jl-graphic/graphic/AbsorbablePosition';
+import {
+  BezierCurveEditPlugin,
   IEditPointOptions,
   ILineGraphic,
   PolylineEditPlugin,
   addWayPoint,
   clearWayPoint,
   getWaypointRangeIndex,
-  BezierCurveEditPlugin,
 } from 'src/jl-graphic/plugins/GraphicEditPlugin';
-import AbsorbablePoint, {
-  AbsorbableLine,
-  AbsorbablePosition,
-} from 'src/jl-graphic/graphic/AbsorbablePosition';
-import { Turnout, TurnoutPort } from '../turnout/Turnout';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { Dialog } from 'quasar';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import SectionSplitDialog from 'src/components/draw-app/dialogs/SectionSplitDialog.vue';
 import { AxleCounting } from '../axleCounting/AxleCounting';
-import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
 import { LogicSection } from '../logicSection/LogicSection';
 import { LogicSectionDraw } from '../logicSection/LogicSectionDrawAssistant';
+import { Turnout, TurnoutPort } from '../turnout/Turnout';
+import {
+  ISectionData,
+  Section,
+  SectionConsts,
+  SectionTemplate,
+  SectionType,
+} from './Section';
 
 export class SectionDraw extends GraphicDrawAssistant<
   SectionTemplate,
@@ -388,11 +389,13 @@ class SectionPolylineEditPlugin extends PolylineEditPlugin {
   }
 
   initLabels() {
-    this.labels = [new VectorText('A'), new VectorText('B')];
+    this.labels = ['A', 'B'].map((str) => {
-    this.labels.forEach((label) => {
+      const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
-      label.setVectorFontSize(14);
+      vc.setVectorFontSize(14);
-      this.addChild(label);
+      vc.anchor.set(0.5);
+      return vc;
     });
+    this.addChild(...this.labels);
     this.updateEditedPointsPosition();
   }
 

src/graphics/sectionLink/SectionLinkDrawAssistant.ts

@@ -7,6 +7,7 @@ import {
   linePoint,
   GraphicIdGenerator,
   VectorText,
+  AppConsts,
 } from 'src/jl-graphic';
 import {
   ISectionLinkData,
@@ -484,12 +485,13 @@ class LinkPolylineEditPlugin extends PolylineEditPlugin {
   }
 
   initLabels() {
-    this.labels = [new VectorText('A'), new VectorText('B')];
+    this.labels = ['A', 'B'].map((str) => {
-    this.labels.forEach((label) => {
+      const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
-      label.setVectorFontSize(14);
+      vc.setVectorFontSize(14);
-      this.addChild(label);
+      vc.anchor.set(0.5);
-      label.style.fill = '#ff0';
+      return vc;
     });
+    this.addChild(...this.labels);
     this.updateEditedPointsPosition();
   }
 

src/graphics/turnout/TurnoutDrawAssistant.ts

@@ -10,6 +10,7 @@ import {
   VectorText,
   linePoint,
   polylinePoint,
+  AppConsts,
 } from 'src/jl-graphic';
 import {
   ITurnoutData,
@@ -392,7 +393,7 @@ export class TurnoutEditPlugin extends GraphicEditPlugin<Turnout> {
       this.addChild(...cps);
     });
     this.labels = ['A', 'B', 'C'].map((str) => {
-      const vc = new VectorText(str);
+      const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
       vc.setVectorFontSize(14);
       vc.anchor.set(0.5);
       return vc;

src/jl-graphic/app/JlGraphicApp.ts

@@ -21,11 +21,11 @@ import {
 import { AbsorbablePosition } from '../graphic';
 import {
   AppWsMsgBroker,
+  GraphicQuery,
+  ICreateOnNotFound,
   WsMsgCli,
   type AppStateSubscription,
   type MessageCliOption,
-  GraphicQuery,
-  ICreateOnNotFound,
 } from '../message';
 import { OperationRecord } from '../operation/JlOperation';
 import {
@@ -59,6 +59,8 @@ export const AppConsts = {
   viewportname: '__viewport',
   canvasname: '__jlcanvas',
   AssistantAppendsName: '__assistantAppends',
+  // 辅助元素默认颜色
+  assistantElementColor: '#1976d2',
 };
 
 /**
@@ -228,13 +230,17 @@ export class JlCanvas extends Container implements IJlCanvas {
   addChild<U extends DisplayObject[]>(...children: U): U[0] {
     const rt = super.addChild(...children);
     children.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onAddToCanvas());
+      g.onAddToCanvas(this);
+      recursiveChildren(g as Container, (child) => child.onAddToCanvas(this));
     });
     return rt;
   }
   removeChild<U extends DisplayObject[]>(...children: U): U[0] {
     children.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onRemoveFromCanvas());
+      g.onRemoveFromCanvas(this);
+      recursiveChildren(g as Container, (child) =>
+        child.onRemoveFromCanvas(this)
+      );
     });
     return super.removeChild(...children);
   }
@@ -244,13 +250,17 @@ export class JlCanvas extends Container implements IJlCanvas {
   addNonInteractiveChild(...obj: DisplayObject[]): void {
     this.nonInteractiveContainer.addChild(...obj);
     obj.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onAddToCanvas());
+      g.onAddToCanvas(this);
+      recursiveChildren(g as Container, (child) => child.onAddToCanvas(this));
     });
   }
 
   removeGraphic(...obj: DisplayObject[]): void {
     obj.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onRemoveFromCanvas());
+      g.onRemoveFromCanvas(this);
+      recursiveChildren(g as Container, (child) =>
+        child.onRemoveFromCanvas(this)
+      );
     });
     this.removeChild(...obj);
     this.nonInteractiveContainer.removeChild(...obj);
@@ -261,7 +271,10 @@ export class JlCanvas extends Container implements IJlCanvas {
    */
   removeNonInteractiveChild(...obj: DisplayObject[]): void {
     obj.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onRemoveFromCanvas());
+      g.onRemoveFromCanvas(this);
+      recursiveChildren(g as Container, (child) =>
+        child.onRemoveFromCanvas(this)
+      );
     });
     this.nonInteractiveContainer.removeChild(...obj);
   }
@@ -269,12 +282,14 @@ export class JlCanvas extends Container implements IJlCanvas {
   addAssistantAppends(...appends: DisplayObject[]): void {
     this.assistantAppendContainer.addChild(...appends);
     appends.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onAddToCanvas());
+      g.onAddToCanvas(this);
+      recursiveChildren(g as Container, (child) => child.onAddToCanvas(this));
     });
   }
   removeAssistantAppends(...appends: DisplayObject[]): void {
     appends.forEach((g) => {
-      recursiveChildren(g as Container, (child) => child.onAddToCanvas());
+      g.onRemoveFromCanvas(this);
+      recursiveChildren(g as Container, (child) => child.onAddToCanvas(this));
     });
     this.assistantAppendContainer.removeChild(...appends);
   }
@@ -380,6 +395,10 @@ export interface IGraphicAppConfig {
    * 是否支持删除操作
    */
   isSupportDeletion?: (g: JlGraphic) => boolean;
+  /**
+   * 辅助元素颜色,默认蓝色
+   */
+  assistantElementColor?: string;
 }
 
 /**
@@ -434,6 +453,10 @@ export interface IGraphicScene extends EventEmitter<GraphicAppEvents> {
    * 获取动画管理器
    */
   get animationManager(): AnimationManager;
+  /**
+   * 获取配置选项
+   */
+  get appOptions(): GraphicAppOptions;
   /**
    * 设置配置选项
    * @param options
@@ -643,6 +666,9 @@ abstract class GraphicSceneBase
     // 发布选项更新事件
     this.emit('options-update', this._options);
   }
+  get appOptions(): GraphicAppOptions {
+    return this._options;
+  }
   abstract get app(): GraphicApp;
 
   get dom(): HTMLElement | undefined {
@@ -894,7 +920,7 @@ abstract class GraphicSceneBase
   }
 
   private doDeleteGraphics(graphic: JlGraphic): void {
-    // graphic可能是vue的Proxy对象，会导致canvas删除时因不是同一个对象而无法从画布移除
+    // 从store中删除
     const g = this.graphicStore.deleteGraphics(graphic);
     if (g) {
       // 清除选中

src/jl-graphic/core/JlGraphic.ts

@@ -259,8 +259,12 @@ DisplayObject.prototype.isGraphicChild = function isGraphicChild() {
   const g = this.getGraphic();
   return g != null && !this.isAssistantAppend() && g.isChild(this);
 };
-DisplayObject.prototype.onAddToCanvas = function onAddToCanvas() {};
+DisplayObject.prototype.onAddToCanvas = function onAddToCanvas(
-DisplayObject.prototype.onRemoveFromCanvas = function onRemoveFromCanvas() {};
+  _canvas: IJlCanvas
+) {};
+DisplayObject.prototype.onRemoveFromCanvas = function onRemoveFromCanvas(
+  _canvas: IJlCanvas
+) {};
 DisplayObject.prototype.isInCanvas = function isInCanvas(): boolean {
   let graphic = this as DisplayObject;
   while (graphic && !Object.hasOwn(graphic, '__JlCanvas')) {

src/jl-graphic/global.d.ts

@@ -95,8 +95,8 @@ declare namespace GlobalMixins {
     isGraphic(): boolean; // 是否业务图形对象
     getGraphic<G extends JlGraphicType>(): G | null; // 获取所属的图形对象
     isGraphicChild(): boolean; // 是否图形子元素
-    onAddToCanvas(): void; // 添加到画布处理
+    onAddToCanvas(canvas: JlCanvasType): void; // 添加到画布处理
-    onRemoveFromCanvas(): void; //从画布移除处理
+    onRemoveFromCanvas(canvas: JlCanvasType): void; //从画布移除处理
     isInCanvas(): boolean; // 是否添加到画布中
     getCanvas(): JlCanvasType; // 获取所在画布
     isCanvas(): boolean; // 是否画布对象

src/jl-graphic/graphic/VectorGraphic.ts

@@ -32,12 +32,13 @@ export class VectorGraphicUtil {
       registerScaleChange(obj);
     };
     obj.onRemoveFromCanvas = function onRemoveFromCanvas() {
+      // console.debug('矢量图像onRemoveFromCanvas');
       unregisterScaleChange(obj);
     };
 
     obj.on('added', (container) => {
       if (container.isInCanvas()) {
-        obj.onAddToCanvas();
+        obj.onAddToCanvas(container.getCanvas());
       }
     });
   }

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -1,11 +1,5 @@
-import {
+import { DisplayObject, FederatedMouseEvent, Graphics, Point } from 'pixi.js';
-  Color,
+import { AppConsts, IGraphicScene } from '../app';
-  DisplayObject,
-  FederatedMouseEvent,
-  Graphics,
-  Point,
-} from 'pixi.js';
-import { ICanvasProperties, IGraphicScene } from '../app';
 import { JlGraphic } from '../core';
 import {
   AppDragEvent,
@@ -75,7 +69,6 @@ export class CommonMouseTool extends AppInteractionPlugin {
   static SelectBox = '__select_box';
   options: CompleteMouseToolOptions;
   box: Graphics;
-  _boxLineColor: Color;
   leftDownTarget: DisplayObject | null = null;
 
   drag = false;
@@ -88,9 +81,6 @@ export class CommonMouseTool extends AppInteractionPlugin {
     this.options = new CompleteMouseToolOptions();
 
     this.box = new Graphics();
-    this._boxLineColor = new Color();
-
-    scene.canvas.on('dataupdate', this.updateBoxLineColor, this);
     this.box.name = CommonMouseTool.SelectBox;
     this.box.visible = false;
     this.app.canvas.addAssistantAppends(this.box);
@@ -110,29 +100,6 @@ export class CommonMouseTool extends AppInteractionPlugin {
     return new CommonMouseTool(app);
   }
 
-  /**
-   * 计算对比色
-   * @param rgb
-   * @returns
-   */
-  private calContrastColor(rgb: number): number {
-    if (rgb > 0.45 && rgb < 0.55) {
-      return 0;
-    } else {
-      return 1 - rgb;
-    }
-  }
-
-  private updateBoxLineColor(cp: ICanvasProperties) {
-    // 根据画布背景调整线色
-    const color = new Color(cp.backgroundColor);
-    // 对比色
-    const r = this.calContrastColor(color.red);
-    const g = this.calContrastColor(color.green);
-    const b = this.calContrastColor(color.blue);
-    this._boxLineColor.setValue([r, g, b]);
-  }
-
   bind(): void {
     const canvas = this.app.canvas;
     canvas.on('mousedown', this.onMouseDown, this);
@@ -360,7 +327,12 @@ export class CommonMouseTool extends AppInteractionPlugin {
     if (!this.drag) return;
     // 绘制框选矩形框
     this.box.clear();
-    this.box.lineStyle({ width: 2, color: this._boxLineColor });
+    this.box.lineStyle({
+      width: 2,
+      color:
+        this.app.appOptions.assistantElementColor ||
+        AppConsts.assistantElementColor,
+    });
     const dsx = end.x - start.x;
     const dsy = end.y - start.y;
     let { x, y } = start;

src/jl-graphic/plugins/GraphicTransformPlugin.ts

@@ -13,7 +13,7 @@ import {
   InteractionPluginType,
   KeyListener,
 } from '.';
-import { IGraphicScene } from '../app';
+import { AppConsts, IGraphicScene } from '../app';
 import { JlGraphic } from '../core';
 import { AbsorbablePosition, VectorText } from '../graphic';
 import { DraggablePoint } from '../graphic/DraggablePoint';
@@ -850,7 +850,7 @@ export class BoundsGraphic extends Graphics {
   static Name = '_BoundsRect';
   static BoundsLineStyle = {
     width: 1,
-    color: 0x29b6f2,
+    color: '#1976d2',
     alpha: 1,
   };
   obj: DisplayObject;