From dd3075be56a08c1e10b20f48260546d2ad438510 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Thu, 25 Aug 2022 16:23:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=8E=BB=E6=8E=89=E7=94=BB?= =?UTF-8?q?=E5=B8=83=E6=A0=B9=E6=8D=AE=E8=A7=86=E7=AA=97=E5=A4=A7=E5=B0=8F?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=B0=83=E6=95=B4=E7=BC=A9=E6=94=BE=E6=AF=94?= =?UTF-8?q?=E4=BE=8B=EF=BC=8C=E5=8A=A0=E4=B8=8A=E7=BC=A9=E6=94=BE=E5=88=B0?= =?UTF-8?q?=E5=AE=9E=E9=99=85=E5=A4=A7=E5=B0=8F/=E7=BC=A9=E6=94=BE?= =?UTF-8?q?=E4=BB=A5=E9=80=82=E5=BA=94=E8=8F=9C=E5=8D=95=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/components/ToolButton.vue | 2 +- packages/editor/src/layouts/NavMenu.vue | 35 ++++++++++++++---- .../src/layouts/workspace/Workspace.vue | 8 +++++ packages/editor/src/services/ui.ts | 36 +++++++++---------- 4 files changed, 54 insertions(+), 27 deletions(-) diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue index 123d3912..991bf95f 100644 --- a/packages/editor/src/components/ToolButton.vue +++ b/packages/editor/src/components/ToolButton.vue @@ -2,7 +2,7 @@
import { computed, inject, markRaw } from 'vue'; -import { Back, Delete, Grid, Memo, Right, ZoomIn, ZoomOut } from '@element-plus/icons-vue'; +import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue'; import { NodeType } from '@tmagic/schema'; @@ -36,6 +36,9 @@ const showGuides = computed((): boolean => uiService?.get('showGuides') const showRule = computed((): boolean => uiService?.get('showRule') ?? true); const zoom = computed((): number => uiService?.get('zoom') ?? 1); +const isMac = /mac os x/.test(navigator.userAgent.toLowerCase()); +const ctrl = isMac ? 'Command' : 'Ctrl'; + const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { if (typeof item !== 'string') { return [item]; @@ -53,6 +56,8 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { ...getConfig('zoom-out'), ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`), ...getConfig('zoom-in'), + ...getConfig('scale-to-original'), + ...getConfig('scale-to-fit'), ); break; case 'delete': @@ -60,7 +65,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { type: 'button', className: 'delete', icon: markRaw(Delete), - tooltip: '刪除', + tooltip: `刪除(Delete)`, disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE, handler: () => services?.editorService.remove(services?.editorService.get('node')), }); @@ -70,7 +75,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { type: 'button', className: 'undo', icon: markRaw(Back), - tooltip: '后退', + tooltip: `后退(${ctrl}+z)`, disabled: () => !services?.historyService.state.canUndo, handler: () => services?.editorService.undo(), }); @@ -80,7 +85,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { type: 'button', className: 'redo', icon: markRaw(Right), - tooltip: '前进', + tooltip: `前进(${ctrl}+Shift+z)`, disabled: () => !services?.historyService.state.canRedo, handler: () => services?.editorService.redo(), }); @@ -90,7 +95,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { type: 'button', className: 'zoom-in', icon: markRaw(ZoomIn), - tooltip: '放大', + tooltip: `放大(${ctrl}+=)`, handler: () => uiService?.zoom(0.1), }); break; @@ -99,10 +104,28 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => { type: 'button', className: 'zoom-out', icon: markRaw(ZoomOut), - tooltip: '縮小', + tooltip: `縮小(${ctrl}+-)`, handler: () => uiService?.zoom(-0.1), }); break; + case 'scale-to-original': + config.push({ + type: 'button', + className: 'scale-to-original', + icon: markRaw(ScaleToOriginal), + tooltip: `缩放到实际大小(${ctrl}+1)`, + handler: () => uiService?.set('zoom', 1), + }); + break; + case 'scale-to-fit': + config.push({ + type: 'button', + className: 'scale-to-fit', + icon: markRaw(FullScreen), + tooltip: `缩放以适应(${ctrl}+0)`, + handler: () => uiService?.set('zoom', uiService.calcZoom()), + }); + break; case 'rule': config.push({ type: 'button', diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue index 2aed9460..6b39383a 100644 --- a/packages/editor/src/layouts/workspace/Workspace.vue +++ b/packages/editor/src/layouts/workspace/Workspace.vue @@ -145,6 +145,14 @@ export default defineComponent({ .keydown([ctrl, 'numpad-'], (e) => { e.inputEvent.preventDefault(); services?.uiService.zoom(-0.1); + }) + .keydown([ctrl, '0'], (e) => { + e.inputEvent.preventDefault(); + services?.uiService.set('zoom', services.uiService.calcZoom()); + }) + .keydown([ctrl, '1'], (e) => { + e.inputEvent.preventDefault(); + services?.uiService.set('zoom', 1); }); }); diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts index 58180260..1e0dde76 100644 --- a/packages/editor/src/services/ui.ts +++ b/packages/editor/src/services/ui.ts @@ -98,10 +98,6 @@ class Ui extends BaseService { } (state as any)[name] = value; - - if (name === 'stageContainerRect') { - state.zoom = this.calcZoom(); - } } public get(name: keyof typeof state): T { @@ -113,6 +109,22 @@ class Ui extends BaseService { if (this.get('zoom') < 0.1) this.set('zoom', 0.1); } + public calcZoom() { + const { stageRect, stageContainerRect } = state; + const { height, width } = stageContainerRect; + if (!width || !height) return 1; + + // 30为标尺的大小 + const stageWidth = stageRect.width + 30; + const stageHeight = stageRect.height + 30; + + if (width > stageWidth && height > stageHeight) { + return 1; + } + // 60/80是为了不要让画布太过去贴住四周（这样好看些） + return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1); + } + private setColumnWidth({ left, center, right }: SetColumnWidth) { const columnWidth = { ...toRaw(this.get('columnWidth')), @@ -150,22 +162,6 @@ class Ui extends BaseService { }; state.zoom = this.calcZoom(); } - - private calcZoom() { - const { stageRect, stageContainerRect } = state; - const { height, width } = stageContainerRect; - if (!width || !height) return 1; - - // 30为标尺的大小 - const stageWidth = stageRect.width + 30; - const stageHeight = stageRect.height + 30; - - if (width > stageWidth && height > stageHeight) { - return 1; - } - // 60/80是为了不要让画布太过去贴住四周（这样好看些） - return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1); - } } export type UiService = Ui;