demo: add move-up and move-down commands. closes #28

treehousedev · Mar 6, 2023 · f08de14 · f08de14
1 parent 74643c0
commit f08de14
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/lib/action/keybinds.ts b/lib/action/keybinds.ts
@@ -9,10 +9,10 @@ export function bindingSymbols(key?: string): string[] {
     "meta": "⌘",
     "tab": "↹",
     "ctrl": "⌃",
-    "uparrow": "↑",
-    "downarrow": "↓",
-    "leftarrow": "←",
-    "rightarrow": "→",
+    "arrowup": "↑",
+    "arrowdown": "↓",
+    "arrowleft": "←",
+    "arrowright": "→",
     "enter": "⏎"
   };
   const keys = key.toLowerCase().split("+");

diff --git a/lib/mod.ts b/lib/mod.ts
@@ -159,6 +159,70 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
     }
   });
   workspace.keybindings.registerBinding({command: "outdent", key: "shift+tab"});
+  workspace.commands.registerCommand({
+    id: "move-up",
+    title: "Move Up",
+    action: (ctx: Context) => {
+      if (!ctx.node) return;
+      const node = ctx.node; // redraw seems to unset ctx.node
+      const parent = panelNode(node.getParent(), node.panel);
+      if (parent !== null && parent.ID !== "@root") {
+        const children = parent.childCount();
+        if (node.getSiblingIndex() === 0) {
+          if (!parent.getPrevSibling()) {
+            return;
+          }
+          const parentSib = panelNode(parent.getPrevSibling(), node.panel);
+          node.setParent(parentSib);
+          node.setSiblingIndex(parentSib.childCount()-1);
+          if (ctx.node.panel) {
+            workspace.setExpanded(parentSib, true);
+          }
+          m.redraw.sync();
+          workspace.focus(node);
+        } else {
+          if (children === 1) {
+            return;
+          }
+          node.setSiblingIndex(node.getSiblingIndex()-1);
+          m.redraw.sync();
+        }
+      }
+    }
+  });
+  workspace.keybindings.registerBinding({command: "move-up", key: "shift+meta+arrowup"});
+  workspace.commands.registerCommand({
+    id: "move-down",
+    title: "Move Down",
+    action: (ctx: Context) => {
+      if (!ctx.node) return;
+      const node = ctx.node; // redraw seems to unset ctx.node
+      const parent = panelNode(node.getParent(), node.panel);
+      if (parent !== null && parent.ID !== "@root") {
+        const children = parent.childCount();
+        if (node.getSiblingIndex() === children-1) {
+          if (!parent.getNextSibling()) {
+            return;
+          }
+          const parentSib = panelNode(parent.getNextSibling(), node.panel);
+          node.setParent(parentSib);
+          node.setSiblingIndex(0);
+          if (ctx.node.panel) {
+            workspace.setExpanded(parentSib, true);
+          }
+          m.redraw.sync();
+          workspace.focus(node);
+        } else {
+          if (children === 1) {
+            return;
+          }
+          node.setSiblingIndex(node.getSiblingIndex()+1);
+          m.redraw.sync();
+        }
+      }
+    }
+  });
+  workspace.keybindings.registerBinding({command: "move-down", key: "shift+meta+arrowdown"});
   workspace.commands.registerCommand({
     id: "insert-child",
     title: "Insert Child",
@@ -293,12 +357,14 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
     {command: "new-panel"},
     {command: "indent"},
     {command: "outdent"},
+    {command: "move-up"},
+    {command: "move-down"},
     {command: "delete"},
-    {command: "add-checkbox"}, // example when condition
-    {command: "remove-checkbox"},
+    // {command: "add-checkbox"}, 
+    // {command: "remove-checkbox"},
     {command: "mark-done"},
     {command: "add-page"},
-    {command: "remove-page"},
+    // {command: "remove-page"},
     {command: "generate-random"},
   ]);
 

diff --git a/lib/ui/outline.tsx b/lib/ui/outline.tsx
@@ -36,14 +36,15 @@ export const OutlineNode: m.Component<Attrs, State> = {
       e.stopPropagation();
     }
     const checkCommands = (e) => {
+      const anyModifiers = e.shiftKey || e.metaKey || e.altKey || e.ctrlKey;
       switch (e.key) {
       case "ArrowUp":
-        if (e.target.selectionStart !== 0) {
+        if (e.target.selectionStart !== 0 && !anyModifiers) {
           e.stopPropagation()
         }
         break;
       case "ArrowDown":
-        if (e.target.selectionStart !== e.target.value.length && e.target.selectionStart !== 0) {
+        if (e.target.selectionStart !== e.target.value.length && e.target.selectionStart !== 0 && !anyModifiers) {
           e.stopPropagation()
         }
         break;