diff --git a/src/jlgraphic/app/JlGraphicApp.ts b/src/jlgraphic/app/JlGraphicApp.ts index 4d51e69..f6bec4f 100644 --- a/src/jlgraphic/app/JlGraphicApp.ts +++ b/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(...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(...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 { * 获取动画管理器 */ 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) { // 清除选中 diff --git a/src/jlgraphic/core/JlGraphic.ts b/src/jlgraphic/core/JlGraphic.ts index a872c28..65d58d1 100644 --- a/src/jlgraphic/core/JlGraphic.ts +++ b/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')) { diff --git a/src/jlgraphic/global.d.ts b/src/jlgraphic/global.d.ts index c0626ae..6cc2969 100644 --- a/src/jlgraphic/global.d.ts +++ b/src/jlgraphic/global.d.ts @@ -95,8 +95,8 @@ declare namespace GlobalMixins { isGraphic(): boolean; // 是否业务图形对象 getGraphic(): G | null; // 获取所属的图形对象 isGraphicChild(): boolean; // 是否图形子元素 - onAddToCanvas(): void; // 添加到画布处理 - onRemoveFromCanvas(): void; //从画布移除处理 + onAddToCanvas(canvas: JlCanvasType): void; // 添加到画布处理 + onRemoveFromCanvas(canvas: JlCanvasType): void; //从画布移除处理 isInCanvas(): boolean; // 是否添加到画布中 getCanvas(): JlCanvasType; // 获取所在画布 isCanvas(): boolean; // 是否画布对象 diff --git a/src/jlgraphic/graphic/VectorGraphic.ts b/src/jlgraphic/graphic/VectorGraphic.ts index b00b385..d6c057c 100644 --- a/src/jlgraphic/graphic/VectorGraphic.ts +++ b/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()); } }); } diff --git a/src/jlgraphic/plugins/CommonMousePlugin.ts b/src/jlgraphic/plugins/CommonMousePlugin.ts index 8804548..13143c0 100644 --- a/src/jlgraphic/plugins/CommonMousePlugin.ts +++ b/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; diff --git a/src/jlgraphic/plugins/GraphicTransformPlugin.ts b/src/jlgraphic/plugins/GraphicTransformPlugin.ts index 17b3b02..29eaf61 100644 --- a/src/jlgraphic/plugins/GraphicTransformPlugin.ts +++ b/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;