feat: elements arrow moving (#20)

* fix: Elements Overlay and Deleting * fix: editor overflow & change elements type * feat: elements arrow moving * feat: more moving with shift * fix: Elements Overlay and Deleting * fix: typecheck --------- Co-authored-by: Tom Lienard <[email protected]>
QuiiBz · Dec 29, 2023 · 3be62b8 · 3be62b8
1 parent 76d6c20
commit 3be62b8
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
@@ -20,6 +20,14 @@
   }
 }
 
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
 .element:focus {
   outline: none;
 }

diff --git a/apps/dashboard/src/components/OgEditor.tsx b/apps/dashboard/src/components/OgEditor.tsx
@@ -181,6 +181,58 @@ export function OgEditor({ initialElements, localStorageKey: key, width, height
         return
       }
 
+      // Move down
+      if (event.key === 'ArrowDown' && selectedElement) {
+        event.preventDefault()
+        const element = elements.find(item => item.id === selectedElement)
+
+        if (element) {
+          updateElement({
+            ...element,
+            y: element.y + (event.shiftKey ? 10 : 1)
+          })
+        }
+      }
+
+      // Move up
+      if (event.key === 'ArrowUp' && selectedElement) {
+        event.preventDefault()
+        const element = elements.find(item => item.id === selectedElement)
+
+        if (element) {
+          updateElement({
+            ...element,
+            y: element.y - (event.shiftKey ? 10 : 1)
+          })
+        }
+      }
+
+      // Move left
+      if (event.key === 'ArrowLeft' && selectedElement) {
+        event.preventDefault()
+        const element = elements.find(item => item.id === selectedElement)
+
+        if (element) {
+          updateElement({
+            ...element,
+            x: element.x - (event.shiftKey ? 10 : 1)
+          })
+        }
+      }
+
+      // Move right
+      if (event.key === 'ArrowRight' && selectedElement) {
+        event.preventDefault()
+        const element = elements.find(item => item.id === selectedElement)
+
+        if (element) {
+          updateElement({
+            ...element,
+            x: element.x + (event.shiftKey ? 10 : 1)
+          })
+        }
+      }
+
       // Delete any selected element
       if ((event.key === 'Backspace' || event.key === 'Delete') && selectedElement) {
         event.preventDefault()
@@ -289,6 +341,6 @@ export function OgEditor({ initialElements, localStorageKey: key, width, height
           <RightPanel />
         </div>
       </div>
-    </OgContext.Provider>
+    </OgContext.Provider  >
   )
 }