From 35f0341a8de9bce03b22bd07495d11575fdedca7 Mon Sep 17 00:00:00 2001 From: walker Date: Sun, 21 May 2023 10:18:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=8A=A8=E7=94=BB=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E8=B0=83=E6=95=B4=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E7=AE=A1=E7=90=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jlgraphic/app/JlGraphicApp.ts | 24 +++---- src/jlgraphic/core/JlGraphic.ts | 18 ++++-- src/jlgraphic/plugins/AnimationManager.ts | 75 ++++++++++++++++++++++ src/jlgraphic/plugins/CommonMousePlugin.ts | 4 ++ src/jlgraphic/plugins/index.ts | 1 + 5 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 src/jlgraphic/plugins/AnimationManager.ts diff --git a/src/jlgraphic/app/JlGraphicApp.ts b/src/jlgraphic/app/JlGraphicApp.ts index a55e29d..73ce594 100644 --- a/src/jlgraphic/app/JlGraphicApp.ts +++ b/src/jlgraphic/app/JlGraphicApp.ts @@ -27,6 +27,7 @@ import { } from '../message/WsMsgBroker'; import { OperationRecord } from '../operation/JlOperation'; import { + AnimationManager, CommonMouseTool, GraphicTransformPlugin, IMouseToolOptions, @@ -44,8 +45,8 @@ import { KeyListener, } from '../plugins/KeyboardPlugin'; import { ContextMenu, ContextMenuPlugin } from '../ui/ContextMenu'; -import { getRectangleCenter, recursiveChildren } from '../utils/GraphicUtils'; import { MenuItemOptions } from '../ui/Menu'; +import { getRectangleCenter, recursiveChildren } from '../utils/GraphicUtils'; export const AppConsts = { viewportname: '__viewport', @@ -346,7 +347,7 @@ export class GraphicApp extends EventEmitter { app: Application; // Pixi 渲染器 viewport: Viewport; // 视口 canvas: JlCanvas; // 画布 - interactiveTypeOptions: IInteractiveGraphicOptions; + interactiveTypeOptions: IInteractiveGraphicOptions; // 图形交互配置 graphicTemplateMap: Map = new Map< string, @@ -358,13 +359,14 @@ export class GraphicApp extends EventEmitter { keyboardPlugin: JlGraphicAppKeyboardPlugin; // 键盘操作处理插件 graphicCopyPlugin: GraphicCopyPlugin; // 图形复制操作插件 menuPlugin: ContextMenuPlugin; // 菜单插件 + animationManager: AnimationManager; // 动画管理组件 interactionPluginMap: Map = new Map< string, InteractionPlugin >(); // 交互插件 - wsMsgBroker?: AppWsMsgBroker; + wsMsgBroker?: AppWsMsgBroker; // websocket消息代理 constructor(dom: HTMLElement) { super(); @@ -432,8 +434,7 @@ export class GraphicApp extends EventEmitter { this.menuPlugin = new ContextMenuPlugin(this); // 添加通用交互插件 - const tool = new CommonMouseTool(this); - tool.resume(); + CommonMouseTool.new(this).resume(); // drag插件 DragPlugin.new(this).resume(); @@ -443,17 +444,8 @@ export class GraphicApp extends EventEmitter { // 图形变换插件 GraphicTransformPlugin.new(this).resume(); - // 动画控制 - this.app.ticker.add((dt: number) => { - // 暂时遍历所有图形对象，TODO:后需改完只处理有动画的对象 - this.queryStore.getAllGraphics().forEach((g) => { - g.animationMap.forEach((animation) => { - if (animation.running) { - animation.run(dt); - } - }); - }); - }); + // 动画管理 + this.animationManager = new AnimationManager(this); } setOptions(options: GraphicAppOptions) { diff --git a/src/jlgraphic/core/JlGraphic.ts b/src/jlgraphic/core/JlGraphic.ts index 44de834..0888f2c 100644 --- a/src/jlgraphic/core/JlGraphic.ts +++ b/src/jlgraphic/core/JlGraphic.ts @@ -567,7 +567,6 @@ export abstract class JlGraphic extends Container { private _code = ''; // 业务编号/名称，用于标识图形对象，具有业务意义 _datas?: GraphicData; // 图形数据 _states?: GraphicState; // 图形状态数据 - animationMap: Map = new Map(); private _relationManage?: RelationManage; // 图形关系管理 private _queryStore?: GraphicQueryStore; // 图形对象查询仓库 @@ -578,14 +577,25 @@ export abstract class JlGraphic extends Container { this.filters; } + /** + * 添加图形动画，只有在画布上才能添加 + * @param animation + */ addAnimation(animation: GraphicAnimation): void { - this.animationMap.set(animation.name, animation); + const app = this.getGraphicApp(); + app.animationManager.registerAnimation(this, animation); } removeAnimation(name: string): void { - this.animationMap.delete(name); + const app = this.getGraphicApp(); + app.animationManager.unregisterAnimation(this, name); } animation(name: string): GraphicAnimation | undefined { - return this.animationMap.get(name); + const app = this.getGraphicApp(); + return app.animationManager.animation(this, name); + } + removeAllAnimation(): void { + const app = this.getGraphicApp(); + app.animationManager.unregisterGraphicAnimations(this); } /** diff --git a/src/jlgraphic/plugins/AnimationManager.ts b/src/jlgraphic/plugins/AnimationManager.ts new file mode 100644 index 0000000..492a7fd --- /dev/null +++ b/src/jlgraphic/plugins/AnimationManager.ts @@ -0,0 +1,75 @@ +import { GraphicApp } from '../app'; +import { GraphicAnimation, JlGraphic } from '../core'; + +/** + * 图形动画管理 + */ +export class AnimationManager { + app: GraphicApp; + graphicAnimationMap: Map>; + constructor(app: GraphicApp) { + this.app = app; + this.graphicAnimationMap = new Map>(); + // 动画控制 + app.app.ticker.add((dt: number) => { + this.graphicAnimationMap.forEach((map) => { + map.forEach((animation) => { + if (animation.running) { + animation.run(dt); + } + }); + }); + }); + } + + static new(app: GraphicApp): AnimationManager { + return new AnimationManager(app); + } + + /** + * 图形对象的所有动画map + * @param graphic + * @returns + */ + animationMap(graphic: JlGraphic): Map { + let map = this.graphicAnimationMap.get(graphic.id); + if (!map) { + map = new Map(); + this.graphicAnimationMap.set(graphic.id, map); + } + return map; + } + + /** + * 注册图形动画 + * @param graphic + * @param animation + */ + registerAnimation(graphic: JlGraphic, animation: GraphicAnimation) { + this.animationMap(graphic).set(animation.name, animation); + } + /** + * 删除图形动画 + * @param graphic + * @param name + */ + unregisterAnimation(graphic: JlGraphic, name: string) { + this.animationMap(graphic).delete(name); + } + /** + * 删除所有图形动画 + * @param graphic + */ + unregisterGraphicAnimations(graphic: JlGraphic) { + this.animationMap(graphic).clear(); + } + /** + * 获取图形指定名称动画 + * @param graphic + * @param name + * @returns + */ + animation(graphic: JlGraphic, name: string): GraphicAnimation | undefined { + return this.animationMap(graphic).get(name); + } +} diff --git a/src/jlgraphic/plugins/CommonMousePlugin.ts b/src/jlgraphic/plugins/CommonMousePlugin.ts index 86d736c..5160f41 100644 --- a/src/jlgraphic/plugins/CommonMousePlugin.ts +++ b/src/jlgraphic/plugins/CommonMousePlugin.ts @@ -90,6 +90,10 @@ export class CommonMouseTool extends AppInteractionPlugin { }); } + static new(app: GraphicApp) { + return new CommonMouseTool(app); + } + bind(): void { const canvas = this.app.canvas; canvas.on('mousedown', this.onMouseDown, this); diff --git a/src/jlgraphic/plugins/index.ts b/src/jlgraphic/plugins/index.ts index 4b2ea34..75c00d9 100644 --- a/src/jlgraphic/plugins/index.ts +++ b/src/jlgraphic/plugins/index.ts @@ -3,3 +3,4 @@ export * from './CommonMousePlugin'; export * from './KeyboardPlugin'; export * from './CopyPlugin'; export * from './GraphicTransformPlugin'; +export * from './AnimationManager';