From df3021f75e057e229756b429321c14d181223698 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Mon, 20 May 2024 15:26:46 +0800
Subject: [PATCH] feat: add history forward & back shortcut key (#154)

---
 packages/designer/src/dnd/use-dnd.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts
index d1daa6ad..91135d5b 100644
--- a/packages/designer/src/dnd/use-dnd.ts
+++ b/packages/designer/src/dnd/use-dnd.ts
@@ -58,6 +58,12 @@ export function useDnd({
       'command+v,ctrl+v': () => {
         workspace.pasteSelectedNode();
       },
+      'command+z,ctrl+z': () => {
+        workspace.history.back();
+      },
+      'command+shift+z,ctrl+shift+z': () => {
+        workspace.history.forward();
+      },
     });
   }, [workspace]);
 
@@ -84,10 +90,10 @@ export function useDnd({
   const onMouseMove = (e: React.MouseEvent) => {
     const point = sandboxQuery.getRelativePoint({ x: e.clientX, y: e.clientY });
     setElementStyle('.SelectionMask', {
-      width: Math.abs(selectSource.start?.point.x - point.x) + 'px',
-      height: Math.abs(selectSource.start?.point.y - point.y) + 'px',
-      left: Math.min(selectSource.start?.point.x, point.x) + 'px',
-      top: Math.min(selectSource.start?.point.y, point.y) + 'px',
+      width: `${Math.abs(selectSource.start?.point.x - point.x)}px`,
+      height: `${Math.abs(selectSource.start?.point.y - point.y)}px`,
+      left: `${Math.min(selectSource.start?.point.x, point.x)}px`,
+      top: `${Math.min(selectSource.start?.point.y, point.y)}px`,
     });
   };