From f1d406f82a7e455eaef646a98bbd12d92cd9f747 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Thu, 1 Sep 2022 10:01:42 +0300
Subject: [PATCH] feat: cut command and shortcuts

---
 .../src/components/ContextMenu/ContextMenu.tsx    | 11 +++++++++++
 .../src/components/ZoomMenu/ZoomMenu.tsx          |  8 ++++++--
 tldraw/packages/core/src/lib/TLApp/TLApp.ts       | 15 ++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
index f8e2a29c84..3e3bab90ba 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
@@ -38,6 +38,17 @@ export const ContextMenu = observer(function ContextMenu({
         <div>
           {app.selectedShapes?.size > 0 && (
             <>
+              <ReactContextMenu.Item
+                className="tl-context-menu-button"
+                onClick={() => runAndTransition(app.cut)}
+              >
+                Cut
+                <div className="tl-context-menu-right-slot">
+                  <span className="keyboard-shortcut">
+                    <code>{MOD_KEY}</code> <code>X</code>
+                  </span>
+                </div>
+              </ReactContextMenu.Item>
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
                 onClick={() => runAndTransition(app.copy)}
diff --git a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx
index 611cdae025..3889b2acf0 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx
@@ -25,7 +25,11 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           onClick={app.api.zoomToFit}
         >
           Zoom to fit
-          <div className="tl-zoom-menu-right-slot"></div>
+          <div className="tl-zoom-menu-right-slot">
+            <span className="keyboard-shortcut">
+              <code>1</code>
+            </span>
+          </div>
         </DropdownMenuPrimitive.Item>
         <DropdownMenuPrimitive.Item
           className="menu-link tl-zoom-menu-dropdown-item"
@@ -35,7 +39,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
           Zoom to selection
           <div className="tl-zoom-menu-right-slot">
             <span className="keyboard-shortcut">
-              <code>{MOD_KEY}</code> <code>-</code>
+              <code>⇧</code> <code>1</code>
             </span>
           </div>
         </DropdownMenuPrimitive.Item>
diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
index 063518f135..992f9cb140 100644
--- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts
+++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
@@ -96,7 +96,11 @@ export class TLApp<
         fn: () => this.api.resetZoom(),
       },
       {
-        keys: 'mod+-',
+        keys: '1',
+        fn: () => this.api.zoomToFit(),
+      },
+      {
+        keys: 'shift+1',
         fn: () => this.api.zoomToSelection(),
       },
       {
@@ -111,6 +115,10 @@ export class TLApp<
         keys: 'mod+z',
         fn: () => this.undo(),
       },
+      {
+        keys: 'mod+x',
+        fn: () => this.cut(),
+      },
       {
         keys: 'mod+shift+z',
         fn: () => this.redo(),
@@ -437,6 +445,11 @@ export class TLApp<
     }
   }
 
+  cut = () => {
+    this.copy()
+    this.api.deleteShapes()
+  }
+
   dropFiles = (files: FileList, point?: number[]) => {
     this.notify('drop-files', {
       files: Array.from(files),