修改框选边框颜色处理逻辑

修改onAddToCanvas接口
修改jlcanvas添加/移除对象调用接口问题

src/jlgraphic/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 {
@@ -48,7 +48,7 @@ import {
 } from '../plugins/KeyboardPlugin';
 import { ContextMenu, ContextMenuPlugin } from '../ui/ContextMenu';
 import { MenuItemOptions } from '../ui/Menu';
-import { DebouncedFunction, debounce } from '../utils';
+import { DebouncedFunction, debounce, newContrastColor } from '../utils';
 import { getRectangleCenter, recursiveChildren } from '../utils/GraphicUtils';
 import {
   GraphicCreateOperation,
@@ -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/jlgraphic/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.onRemoveFromCanvas = function onRemoveFromCanvas() {};
+DisplayObject.prototype.onAddToCanvas = function onAddToCanvas(
+  _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/jlgraphic/global.d.ts

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

src/jlgraphic/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/jlgraphic/plugins/CommonMousePlugin.ts

@@ -1,11 +1,5 @@
-import {
-  Color,
-  DisplayObject,
-  FederatedMouseEvent,
-  Graphics,
-  Point,
-} from 'pixi.js';
-import { ICanvasProperties, IGraphicScene } from '../app';
+import { DisplayObject, FederatedMouseEvent, Graphics, Point } from 'pixi.js';
+import { AppConsts, 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/jlgraphic/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;