Rotate panes

index.html

@@ -147,7 +147,11 @@ <h1 class="warning">Network is down</h1>
               <button type="button" aria-label="Close Pane" data-sc="D" id="trash-button" class="pane-buttons off has-help"><i class="f7-icons">rectangle_badge_xmark</i></button>
               <button type="button" aria-label="Split Right to Left" data-sc="'" id="divide-h" class="pane-buttons off has-help"><i class="f7-icons">divide</i></button>
               <button type="button" aria-label="Split Top to Bottom" data-sc="\" id="divide-v" class="pane-buttons off has-help">
-                  <i class="f7-icons" style="display: inline-block; transform: rotate(90deg);">divide</i></button>
+                  <i class="f7-icons" style="display: inline-block; transform: rotate(90deg);">divide</i>
+              </button>
+          <button type="button" aria-label="Rotate active layout" data-sc="⇧ R" id="rotate-layout" class="pane-buttons off has-help">
+              <i class="f7-icons">arrow_clockwise</i>
+          </button>
               <button type="button" aria-label="Search Pane Buffer" data-sc="F" id="search-button" class="pane-buttons off has-help"><i class="f7-icons">doc_text_search</i></button>
               <button type="button" aria-label="Video" id="video-button" class="pane-buttons off has-help"><i class="f7-icons">videocam</i></button>
               <button type="button" aria-label="Help" id="help-button" class="has-help"><i class="f7-icons">question</i></button>

src/layout.ts

@@ -363,4 +363,60 @@ export class Layout extends Cell {
         })
         return cells
     }
+    changeDir(){
+        if(this.dir === "TBD") return;
+        const parentDir = this.layout?.dir
+        const newDir = this.dir === 'rightleft' ? 'topbottom' : 'rightleft'
+        let keepXoff = false;
+        let keepYoff = false;
+        let cellSize;
+        console.log('origdir',this.dir)
+        if(this.dir === 'topbottom'){
+            keepYoff = true
+            cellSize = this.sy / this.cells.length
+        }else if(this.dir === 'rightleft') {
+            keepXoff = true
+            cellSize = this.sx / this.cells.length
+        }
+        this.cells.forEach((c, i) => {
+            const oldXoff = c.xoff
+            const oldYoff = c.yoff
+            const oldSx = c.sx;
+            const oldSy = c.sy;
+            c.yoff = oldXoff
+            c.xoff = oldYoff
+            c.sx = oldSy
+            c.sy = oldSx
+            // console.log('c',{
+            //     xoff: c.xoff,
+            //     yoff: c.yoff,
+            //     sx: c.sx,
+            //     sy: c.sy,
+            // })
+            if(keepYoff){
+                c.yoff = this.yoff + cellSize * i
+                c.xoff = this.xoff
+                c.sy = cellSize
+                c.sx = this.sx
+            }else if(keepXoff){
+                c.yoff = this.yoff
+                c.xoff = this.xoff + cellSize * i
+                c.sy = this.sy
+                c.sx = cellSize
+            }
+            // console.log('c2',{
+            //     xoff: c.xoff,
+            //     yoff: c.yoff,
+            //     sx: c.sx,
+            //     sy: c.sy,
+            // })
+        });
+        this.dir = newDir
+        this.refreshDividers()
+        if(this.dir === parentDir){
+            const replaceIndex = this.layout.cells.findIndex(c => c.id === this.id)
+            this.layout.cells.splice(replaceIndex, 1, ...this.cells)
+            this.layout.refreshDividers()
+        }
+    }
 }

src/pane.ts

@@ -563,23 +563,52 @@ export class Pane extends Cell {
             f = () => this.gate.newTab()
             break
         case "r":
-            f = () => this.gate.reset()
+            if(ev.shiftKey){
+                this.layout.cells.forEach(c => console.log(c))
+                f = () => this.layout.changeDir()
+            }else {
+                f = () => this.gate.reset()
+            }
             break
         // this key is at terminal level
         case "l":
             f = () => this.t7.map.showLog()
             break
         case "ArrowLeft":
-            f = () => this.w.moveFocus("left")
+            if(ev.shiftKey){
+                const pane = this.w.getPane("left")
+                if(!pane) return;
+                this.w.swapPanes(this,pane)
+            }else {
+                f = () => this.w.moveFocus("left")
+            }
             break
         case "ArrowRight":
-            f = () => this.w.moveFocus("right")
+            if(ev.shiftKey){
+                const pane = this.w.getPane("right")
+                if(!pane) return;
+                this.w.swapPanes(this,pane)
+            }else {
+                f = () => this.w.moveFocus("right")
+            }
             break
         case "ArrowUp":
-            f = () => this.w.moveFocus("up")
+            if(ev.shiftKey){
+                const pane = this.w.getPane("up")
+                if(!pane) return;
+                this.w.swapPanes(this,pane)
+            }else {
+                f = () => this.w.moveFocus("up")
+            }
             break
         case "ArrowDown":
-            f = () => this.w.moveFocus("down")
+            if(ev.shiftKey){
+                const pane = this.w.getPane("down")
+                if(!pane) return;
+                this.w.swapPanes(this,pane)
+            }else {
+                f = () => this.w.moveFocus("down")
+            }
             break
         case "p":
             f = () => this.t7.dumpLog()

src/terminal7.ts

@@ -313,6 +313,12 @@ export class Terminal7 {
         dV.addEventListener("click", () =>  {
                     if (this.activeG)
                         this.activeG.activeW.activeP.split("topbottom", 0.5)})
+        const rotateLayout = document.getElementById("rotate-layout")
+        rotateLayout.addEventListener("click", () =>  {
+            if(this.activeG){
+                this.activeG.activeW.activeP.layout.changeDir()
+            }
+        })
         document.getElementById('add-gate').addEventListener(
             'click', async (ev) => {
                 setTimeout(() => this.map.shell.runCommand('add', []), 50)

src/window.ts

@@ -182,7 +182,7 @@ export class Window {
         if (this.rootLayout)
             this.rootLayout.fit()
     }
-    moveFocus(where) {
+    getPane(where){
         const a = this.activeP,
             b = a.t.buffer.active,
             x = a.xoff + b.cursorX * a.sx / a.t.cols,
@@ -213,11 +213,21 @@ export class Window {
                 if (match(c))
                     nextPane = c
         })
+        return nextPane
+    }
+
+    moveFocus(where) {
+        const nextPane = this.getPane(where)
         if (nextPane) {
             nextPane.focus()
             this.gate.sendState()
         }
     }
+
+    switchPane(where){
+        console.log(this.activeP)
+    }
+µµ
     updateDivideButtons() {
         const bV = document.getElementById("divide-v")
         const bH = document.getElementById("divide-h")
@@ -265,5 +275,33 @@ export class Window {
         newLayout.refreshDividers()
         return newLayout
     }
+    swapPanes(pane1: Pane, pane2: Pane){
+        const pane1Layout = pane1.layout
+        const pane2Layout = pane2.layout
+        const pane1Index = pane1Layout.cells.indexOf(pane1);
+        const pane2Index = pane2Layout.cells.indexOf(pane2);
+        pane1Layout.cells[pane1Index] = pane2;
+        pane2Layout.cells[pane2Index] = pane1;
+        pane1.layout = pane2Layout;
+        pane2.layout = pane1Layout;
+
+        const pane1Xoff = pane1.xoff
+        const pane1Yoff = pane1.yoff
+        const pane1Sx   = pane1.sx
+        const pane1Sy   = pane1.sy
+
+        pane1.xoff = pane2.xoff
+        pane1.yoff = pane2.yoff
+        pane1.sx = pane2.sx
+        pane1.sy = pane2.sy
+
+        pane2.xoff = pane1Xoff
+        pane2.yoff = pane1Yoff
+        pane2.sx = pane1Sx
+        pane2.sy = pane1Sy
+
+        pane1Layout.refreshDividers();
+        pane2Layout.refreshDividers();
+    }
     // used to recieve the touch event from the gate
 }