From 7f70f6ea55de1b427474ea84d80167c158e8d28a Mon Sep 17 00:00:00 2001 From: walker Date: Fri, 14 Jul 2023 18:10:55 +0800 Subject: [PATCH] =?UTF-8?q?bugfix-=E8=8F=9C=E5=8D=95=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E5=AD=90=E8=8F=9C=E5=8D=95=E4=B8=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/examples/app/index.ts | 29 +++++++ src/jlgraphic/ui/ContextMenu.ts | 132 +++++++++++++++++++++----------- src/jlgraphic/ui/Menu.ts | 2 +- src/layouts/DrawLayout.vue | 38 ++++----- 4 files changed, 136 insertions(+), 65 deletions(-) diff --git a/src/examples/app/index.ts b/src/examples/app/index.ts index 5327f78..56c46de 100644 --- a/src/examples/app/index.ts +++ b/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.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); }); diff --git a/src/jlgraphic/ui/ContextMenu.ts b/src/jlgraphic/ui/ContextMenu.ts index f69746a..15d3e8e 100644 --- a/src/jlgraphic/ui/ContextMenu.ts +++ b/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(); } diff --git a/src/jlgraphic/ui/Menu.ts b/src/jlgraphic/ui/Menu.ts index a500216..3cf24e4 100644 --- a/src/jlgraphic/ui/Menu.ts +++ b/src/jlgraphic/ui/Menu.ts @@ -101,7 +101,7 @@ export interface MenuItemOptions { /** * 子菜单 */ - subMenu?: MenuGroupOptions[]; + subMenu?: MenuOptions; } export interface MenuItemStyle { diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue index fa1c35a..d1792b5 100644 --- a/src/layouts/DrawLayout.vue +++ b/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); + // }, + // }); } });