Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi

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/app/JlGraphicApp.ts

@@ -543,9 +543,14 @@ 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/jlgraphic/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 {
-    this.doRepaint();
-    this.emit('repaint', this);
+    try {
+      this.doRepaint();
+      this.emit('repaint', this);
+    } catch (e) {
+      console.error(`设备id=${this.id},type=${this.type}重绘逻辑异常`, e);
+    }
   }
 
   /**

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,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/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);
+    //   },
+    // });
   }
 });