图形动画结构调整，添加动画管理组件

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<GraphicAppEvents> {
   app: Application; // Pixi 渲染器
   viewport: Viewport; // 视口
   canvas: JlCanvas; // 画布
-  interactiveTypeOptions: IInteractiveGraphicOptions;
+  interactiveTypeOptions: IInteractiveGraphicOptions; // 图形交互配置
 
   graphicTemplateMap: Map<string, GraphicTemplate> = new Map<
     string,
@@ -358,13 +359,14 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
   keyboardPlugin: JlGraphicAppKeyboardPlugin; // 键盘操作处理插件
   graphicCopyPlugin: GraphicCopyPlugin; // 图形复制操作插件
   menuPlugin: ContextMenuPlugin; // 菜单插件
+  animationManager: AnimationManager; // 动画管理组件
 
   interactionPluginMap: Map<string, InteractionPlugin> = new Map<
     string,
     InteractionPlugin
   >(); // 交互插件
 
-  wsMsgBroker?: AppWsMsgBroker;
+  wsMsgBroker?: AppWsMsgBroker; // websocket消息代理
 
   constructor(dom: HTMLElement) {
     super();
@@ -432,8 +434,7 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
     this.menuPlugin = new ContextMenuPlugin(this);
 
     // 添加通用交互插件
-    const tool = new CommonMouseTool(this);
+    CommonMouseTool.new(this).resume();
-    tool.resume();
 
     // drag插件
     DragPlugin.new(this).resume();
@@ -443,17 +444,8 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
     // 图形变换插件
     GraphicTransformPlugin.new(this).resume();
 
-    // 动画控制
+    // 动画管理
-    this.app.ticker.add((dt: number) => {
+    this.animationManager = new AnimationManager(this);
-      // 暂时遍历所有图形对象，TODO:后需改完只处理有动画的对象
-      this.queryStore.getAllGraphics().forEach((g) => {
-        g.animationMap.forEach((animation) => {
-          if (animation.running) {
-            animation.run(dt);
-          }
-        });
-      });
-    });
   }
 
   setOptions(options: GraphicAppOptions) {

src/jlgraphic/core/JlGraphic.ts

@@ -567,7 +567,6 @@ export abstract class JlGraphic extends Container {
   private _code = ''; // 业务编号/名称，用于标识图形对象，具有业务意义
   _datas?: GraphicData; // 图形数据
   _states?: GraphicState; // 图形状态数据
-  animationMap: Map<string, GraphicAnimation> = 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);
   }
 
   /**

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<string, Map<string, GraphicAnimation>>;
+  constructor(app: GraphicApp) {
+    this.app = app;
+    this.graphicAnimationMap = new Map<string, Map<string, GraphicAnimation>>();
+    // 动画控制
+    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<string, GraphicAnimation> {
+    let map = this.graphicAnimationMap.get(graphic.id);
+    if (!map) {
+      map = new Map<string, GraphicAnimation>();
+      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);
+  }
+}

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);

src/jlgraphic/plugins/index.ts

@@ -3,3 +3,4 @@ export * from './CommonMousePlugin';
 export * from './KeyboardPlugin';
 export * from './CopyPlugin';
 export * from './GraphicTransformPlugin';
+export * from './AnimationManager';