bugfix-菜单更新逻辑，子菜单不更新问题

src/examples/app/index.ts

@@ -66,12 +66,18 @@ export function toStorageTransform(
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
+  shortcutKeys: ['Ctrl', 'Z'],
 };
 const RedoOptions: MenuItemOptions = {
   name: '重做',
+  shortcutKeys: ['Ctrl', 'Shift', 'Z'],
 };
 const SelectAllOptions: MenuItemOptions = {
   name: '全选',
+  shortcutKeys: ['Ctrl', 'A'],
+};
+const JumpStaitonOptions: MenuItemOptions = {
+  name: '车站定位',
 };
 
 export const DefaultCanvasMenu = new ContextMenu({
@@ -83,6 +89,9 @@ export const DefaultCanvasMenu = new ContextMenu({
     {
       items: [SelectAllOptions],
     },
+    {
+      items: [JumpStaitonOptions],
+    },
   ],
 });
 
@@ -142,6 +151,26 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     SelectAllOptions.handler = () => {
       app.selectAllGraphics();
     };
+    const stations = app.queryStore.queryByType<IscsFan>(IscsFan.Type);
+    const jumpStaitonItems: MenuItemOptions[] = [];
+    stations.forEach((station) => {
+      const item: MenuItemOptions = {
+        name: station.id,
+        handler: () => {
+          app.makeGraphicCenterShow(station);
+        },
+      };
+      jumpStaitonItems.push(item);
+    });
+    JumpStaitonOptions.subMenu = {
+      name: '车站列表',
+      groups: [
+        {
+          items: jumpStaitonItems,
+        },
+      ],
+    };
+    DefaultCanvasMenu.update();
     DefaultCanvasMenu.open(e.global);
   });
 

src/jlgraphic/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,41 @@ 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;
+      }
+    });
+
+    console.log(maxItemNameWidth, maxShortcutWidth, maxGutter);
+    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 +366,13 @@ export class ContextMenu extends Container {
   }
 
   update() {
-    this.groups.forEach((group) => group.update());
-    this.updateBg();
+    if (this.menuOptions.groups.length !== this.groups.length) {
+      console.log('重新初始化菜单', this.menuOptions.title);
+      this.init();
+    } else {
+      this.groups.forEach((group) => group.update());
+      this.updateBg();
+    }
   }
 
   public get menuName(): string {
@@ -426,10 +447,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,6 +468,26 @@ class MenuGroup extends Container {
     return false;
   }
 
+  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];
+    return maxShortcutWidth;
+  }
+
+  public get totalGutter(): number {
+    return this.gutter + this.items[0].paddingLeft + this.items[0].paddingRight;
+  }
+
   public get maxWidth(): number {
     const maxNameWidth = this.items
       .map((item) => item.nameBounds.width)
@@ -452,6 +497,7 @@ class MenuGroup extends Container {
       .map((item) => item.shortcutKeyBounds.width)
       .sort((a, b) => a - b)
       .reverse()[0];
+    console.log(`group=${this.config.name}`, maxNameWidth, maxShortcutWidth);
     const maxWidth =
       maxNameWidth +
       this.gutter +
@@ -468,21 +514,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 +600,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 +727,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 +803,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/jlgraphic/ui/Menu.ts

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

src/layouts/DrawLayout.vue

@@ -169,25 +169,25 @@ onMounted(() => {
     });
     loadDrawDatas(drawApp);
     onResize();
-    drawApp.enableWsStomp({
-      wsUrl: getWebsocketUrl(),
-      token: getJwtToken() as string,
-      onAuthenticationFailed: () => {
-        $q.dialog({
-          title: '认证失败',
-          message: '认证失败或登录超时，请重新登录',
-          persistent: true,
-        }).onOk(() => {
-          router.push({ name: 'login' });
-        });
-      },
-    });
-    drawApp.subscribe({
-      destination: '/queue/line/3/device',
-      messageHandle: (msg) => {
-        console.log('设备消息处理', msg);
-      },
-    });
+    // drawApp.enableWsStomp({
+    //   wsUrl: getWebsocketUrl(),
+    //   token: getJwtToken() as string,
+    //   onAuthenticationFailed: () => {
+    //     $q.dialog({
+    //       title: '认证失败',
+    //       message: '认证失败或登录超时，请重新登录',
+    //       persistent: true,
+    //     }).onOk(() => {
+    //       router.push({ name: 'login' });
+    //     });
+    //   },
+    // });
+    // drawApp.subscribe({
+    //   destination: '/queue/line/3/device',
+    //   messageHandle: (msg) => {
+    //     console.log('设备消息处理', msg);
+    //   },
+    // });
   }
 });