框架同步

graphic-pixi

@@ -1 +1 @@
-Subproject commit 6899504fef7c623a9539905812aba3a93a58395f
+Subproject commit 0a08789fbdda1083005835e3bbd9a58bccbc167c

src/jl-graphic/app/JlGraphicApp.ts

@@ -543,8 +543,13 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
         g.loadState(state);
         this.addGraphics(g);
       } else {
-        list.forEach((g) => {
+        // 调整逻辑：所有图形对象状态数据更新完后再统一重绘
-          g.updateStates(state);
+        list
+          .filter((g) => {
+            return g.updateStates(state);
+          })
+          .forEach((g) => {
+            g.repaint();
           });
       }
     });

src/jl-graphic/core/JlGraphic.ts

@@ -902,7 +902,7 @@ export abstract class JlGraphic extends Container {
       this.onStateChange(state, old);
       stateChange = true;
       this.emit('stateupdate', this.getStates(), old);
-      this.repaint();
+      // this.repaint();
     }
     return stateChange;
   }
@@ -912,8 +912,12 @@ export abstract class JlGraphic extends Container {
   onStateChange(newVal: GraphicState, old?: GraphicState): void {}
 
   repaint(): void {
+    try {
       this.doRepaint();
       this.emit('repaint', this);
+    } catch (e) {
+      console.error(`设备id=${this.id},type=${this.type}重绘逻辑异常`, e);
+    }
   }
 
   /**

src/jl-graphic/graphic/index.ts

@@ -2,3 +2,4 @@ export * from './VectorGraphic';
 export * from './VectorText';
 export * from './DraggablePoint';
 export * from './AbsorbablePosition';
+export * from './DashedLine';

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -52,9 +52,6 @@ class CompleteMouseToolOptions implements IMouseToolOptions {
   }
 }
 
-const DefaultSelectToolOptions: CompleteMouseToolOptions =
-  new CompleteMouseToolOptions();
-
 /**
  * 通用交互工具
  */
@@ -72,7 +69,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
 
   constructor(graphicApp: GraphicApp) {
     super(CommonMouseTool.Name, graphicApp);
-    this.options = DefaultSelectToolOptions;
+    this.options = new CompleteMouseToolOptions();
 
     this.box = new Graphics();
     this.box.name = CommonMouseTool.SelectBox;

src/jl-graphic/ui/ContextMenu.ts

@@ -212,16 +212,11 @@ export class ContextMenu extends Container {
     // this.initTitle();
     this.groups = [];
     const options = this.menuOptions;
-    let maxItemWidth = 0;
-    let borderHeight = 0;
     options.groups.forEach((group) => {
       const menuGroup = new MenuGroup(this, group);
       this.groups.push(menuGroup);
-      borderHeight += menuGroup.totalHeight;
-      if (menuGroup.maxWidth > maxItemWidth) {
-        maxItemWidth = menuGroup.maxWidth;
-      }
     });
+    const { borderHeight, maxItemWidth } = this.calculateBorderInfo();
 
     const splitLineWidth = 1;
 
@@ -293,20 +288,40 @@ export class ContextMenu extends Container {
     }
   }
 
+  private calculateBorderInfo(): {
+    borderHeight: number;
+    maxItemWidth: number;
+  } {
+    let maxItemNameWidth = 0;
+    let maxShortcutWidth = 0;
+    let maxGutter = 0;
+    let borderHeight = 0;
+    this.groups.forEach((menuGroup) => {
+      borderHeight += menuGroup.totalHeight;
+      const maxInw = menuGroup.maxItemNameWidth;
+      if (maxInw > maxItemNameWidth) {
+        maxItemNameWidth = maxInw;
+      }
+      const maxSw = menuGroup.maxShortcutWidth;
+      if (maxSw > maxShortcutWidth) {
+        maxShortcutWidth = maxSw;
+      }
+      const gutter = menuGroup.totalGutter;
+      if (gutter > maxGutter) {
+        maxGutter = gutter;
+      }
+    });
+
+    const maxItemWidth = maxItemNameWidth + maxShortcutWidth + maxGutter;
+    return { borderHeight, maxItemWidth };
+  }
+
   updateBg() {
     this.bg.clear();
     const options = this.menuOptions;
-    let maxItemWidth = 0;
+    const { borderHeight, maxItemWidth } = this.calculateBorderInfo();
-    let borderHeight = 0;
     const splitLineWidth = 1;
 
-    this.groups.forEach((menuGroup) => {
-      borderHeight += menuGroup.totalHeight;
-      if (menuGroup.maxWidth > maxItemWidth) {
-        maxItemWidth = menuGroup.maxWidth;
-      }
-    });
-
     const bgWidth = maxItemWidth + this.padding * 2;
     const bgHeight =
       borderHeight +
@@ -350,9 +365,13 @@ export class ContextMenu extends Container {
   }
 
   update() {
+    if (this.menuOptions.groups.length !== this.groups.length) {
+      this.init();
+    } else {
       this.groups.forEach((group) => group.update());
       this.updateBg();
     }
+  }
 
   public get menuName(): string {
     return this.menuOptions.name;
@@ -426,10 +445,14 @@ class MenuGroup extends Container {
     super();
     this.config = config;
     this.menu = menu;
-    config.items.forEach((item) => {
+    this.init();
-      this.items.push(new ContextMenuItem(menu, item));
+  }
-    });
 
+  private init() {
+    this.items = []; // 清空
+    this.config.items.forEach((item) => {
+      this.items.push(new ContextMenuItem(this.menu, item));
+    });
     this.addChild(...this.items);
   }
 
@@ -443,22 +466,24 @@ class MenuGroup extends Container {
     return false;
   }
 
-  public get maxWidth(): number {
+  public get maxItemNameWidth(): number {
     const maxNameWidth = this.items
       .map((item) => item.nameBounds.width)
       .sort((a, b) => a - b)
       .reverse()[0];
+    return maxNameWidth;
+  }
+
+  public get maxShortcutWidth(): number {
     const maxShortcutWidth = this.items
       .map((item) => item.shortcutKeyBounds.width)
       .sort((a, b) => a - b)
       .reverse()[0];
-    const maxWidth =
+    return maxShortcutWidth;
-      maxNameWidth +
+  }
-      this.gutter +
+
-      maxShortcutWidth +
+  public get totalGutter(): number {
-      this.items[0].paddingLeft +
+    return this.gutter + this.items[0].paddingLeft + this.items[0].paddingRight;
-      this.items[0].paddingRight;
-    return maxWidth;
   }
 
   public get totalHeight(): number {
@@ -468,6 +493,9 @@ class MenuGroup extends Container {
   }
 
   update() {
+    if (this.items.length !== this.config.items.length) {
+      this.init();
+    } else {
       let i = 0;
       this.items.forEach((item) => {
         item.update();
@@ -476,13 +504,7 @@ class MenuGroup extends Container {
           i++;
         }
       });
-    // this.items.forEach()
+    }
-    // for (let i = 0; i < this.items.length; i++) {
-    //   const item = this.items[i];
-    //   if (item.visible) {
-    //     item.position.y = i * item.totalHeight;
-    //   }
-    // }
   }
 
   updateItemBox(maxItemWidth: number) {
@@ -557,7 +579,7 @@ class ContextMenuItem extends Container {
         this.config.handler();
         this.menu.plugin.app.emit('post-menu-handle', this.config);
       }
-      if (!this.config.subMenu || this.config.subMenu.length === 0) {
+      if (!this.config.subMenu || this.config.subMenu.groups.length === 0) {
         this.active = false;
         this.menu.active = false;
         this.menu.rootMenu.close();
@@ -684,20 +706,13 @@ class ContextMenuItem extends Container {
   }
 
   initSubMenu() {
-    if (this.config.subMenu && this.config.subMenu.length > 0) {
+    if (this.config.subMenu && this.config.subMenu.groups.length > 0) {
       this.arrowText = new Text('>', {
         fontSize: this.fontSize,
         fill: this.fontColor,
       });
       this.addChild(this.arrowText);
-      this.subMenu = new ContextMenu(
+      this.subMenu = new ContextMenu(this.config.subMenu, this);
-        {
-          name: `${this.config.name}子菜单`,
-          groups: this.config.subMenu,
-          style: this.menu.style,
-        },
-        this
-      );
     }
   }
 
@@ -767,6 +782,12 @@ class ContextMenuItem extends Container {
       this.initShortcutKeyText();
     }
 
+    if (this.config.subMenu == undefined && this.subMenu) {
+      this.subMenu = undefined;
+    } else if (this.config.subMenu && this.subMenu == undefined) {
+      this.initSubMenu();
+    }
+
     if (this.subMenu) {
       this.subMenu.update();
     }

src/jl-graphic/ui/Menu.ts

@@ -101,7 +101,7 @@ export interface MenuItemOptions {
   /**
    * 子菜单
    */
-  subMenu?: MenuGroupOptions[];
+  subMenu?: MenuOptions;
 }
 
 export interface MenuItemStyle {