同步代码

graphic-pixi

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

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;
-    let borderHeight = 0;
+    const { borderHeight, maxItemWidth } = this.calculateBorderInfo();
     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,8 +365,12 @@ export class ContextMenu extends Container {
   }
 
   update() {
-    this.groups.forEach((group) => group.update());
-    this.updateBg();
+    if (this.menuOptions.groups.length !== this.groups.length) {
+      this.init();
+    } else {
+      this.groups.forEach((group) => group.update());
+      this.updateBg();
+    }
   }
 
   public get menuName(): string {
@@ -426,10 +445,14 @@ class MenuGroup extends Container {
     super();
     this.config = config;
     this.menu = menu;
-    config.items.forEach((item) => {
-      this.items.push(new ContextMenuItem(menu, item));
-    });
+    this.init();
+  }
 
+  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 =
-      maxNameWidth +
-      this.gutter +
-      maxShortcutWidth +
-      this.items[0].paddingLeft +
-      this.items[0].paddingRight;
-    return maxWidth;
+    return maxShortcutWidth;
+  }
+
+  public get totalGutter(): number {
+    return this.gutter + this.items[0].paddingLeft + this.items[0].paddingRight;
   }
 
   public get totalHeight(): number {
@@ -468,21 +493,18 @@ class MenuGroup extends Container {
   }
 
   update() {
-    let i = 0;
-    this.items.forEach((item) => {
-      item.update();
-      if (item.visible) {
-        item.position.y = i * item.totalHeight;
-        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;
-    //   }
-    // }
+    if (this.items.length !== this.config.items.length) {
+      this.init();
+    } else {
+      let i = 0;
+      this.items.forEach((item) => {
+        item.update();
+        if (item.visible) {
+          item.position.y = i * item.totalHeight;
+          i++;
+        }
+      });
+    }
   }
 
   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(
-        {
-          name: `${this.config.name}子菜单`,
-          groups: this.config.subMenu,
-          style: this.menu.style,
-        },
-        this
-      );
+      this.subMenu = new ContextMenu(this.config.subMenu, 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 {