termites 1.0.22 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termites",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Web terminal with server-client architecture for remote shell access",
   "main": "index.js",
   "scripts": {

package/server.js

@@ -721,7 +721,12 @@ class TermitesServer {
         <button data-key="ArrowDown">↓</button>
         <div class="sep"></div>
         <button data-seq="/">/</button>
-        <button id="select-all-btn">SelAll</button>
+        <button id="sel-start-btn">Sel▶</button>
+        <button id="sel-left-btn" class="sel-ctrl" style="display:none">◀</button>
+        <button id="sel-right-btn" class="sel-ctrl" style="display:none">▶</button>
+        <button id="sel-up-btn" class="sel-ctrl" style="display:none">▲</button>
+        <button id="sel-down-btn" class="sel-ctrl" style="display:none">▼</button>
+        <button id="sel-end-btn" class="sel-ctrl" style="display:none">End</button>
         <button id="copy-btn">Copy</button>
         <button id="paste-btn">Paste</button>
     </div>
@@ -1060,14 +1065,95 @@ class TermitesServer {
             pasteBtn.addEventListener('touchstart', handlePaste, { passive: false });
             pasteBtn.addEventListener('click', handlePaste);
 
-            // Select All button
-            const selectAllBtn = document.getElementById('select-all-btn');
-            const handleSelectAll = (e) => {
+            // Selection mode with start/end control
+            let selMode = false; // false=off, 'start'=adjusting start, 'end'=adjusting end
+            let selStart = { col: 0, row: 0 };
+            let selEnd = { col: 0, row: 0 };
+            const selStartBtn = document.getElementById('sel-start-btn');
+            const selEndBtn = document.getElementById('sel-end-btn');
+            const selLeftBtn = document.getElementById('sel-left-btn');
+            const selRightBtn = document.getElementById('sel-right-btn');
+            const selUpBtn = document.getElementById('sel-up-btn');
+            const selDownBtn = document.getElementById('sel-down-btn');
+            const selCtrls = document.querySelectorAll('.sel-ctrl');
+
+            function updateSelection() {
+                const startOffset = selStart.row * term.cols + selStart.col;
+                const endOffset = selEnd.row * term.cols + selEnd.col;
+                const length = endOffset - startOffset + 1;
+                if (length > 0) {
+                    term.select(selStart.col, selStart.row, length);
+                }
+            }
+
+            function showSelCtrls(show) {
+                selCtrls.forEach(el => el.style.display = show ? '' : 'none');
+                selStartBtn.textContent = show ? 'Start' : 'Sel▶';
+                selStartBtn.classList.toggle('active', selMode === 'start');
+                selEndBtn.classList.toggle('active', selMode === 'end');
+            }
+
+            const handleSelStart = (e) => {
+                e.preventDefault();
+                if (!selMode) {
+                    // Enter selection mode, start from last line
+                    selMode = 'start';
+                    const lastRow = term.buffer.active.cursorY;
+                    selStart = { col: 0, row: Math.max(0, lastRow - 2) };
+                    selEnd = { col: term.cols - 1, row: lastRow };
+                    showSelCtrls(true);
+                    updateSelection();
+                } else if (selMode === 'end') {
+                    // Switch to adjusting start
+                    selMode = 'start';
+                    selStartBtn.classList.add('active');
+                    selEndBtn.classList.remove('active');
+                } else {
+                    // Already adjusting start, switch to end
+                    selMode = 'end';
+                    selStartBtn.classList.remove('active');
+                    selEndBtn.classList.add('active');
+                }
+            };
+            selStartBtn.addEventListener('touchstart', handleSelStart, { passive: false });
+            selStartBtn.addEventListener('click', handleSelStart);
+
+            const handleSelEnd = (e) => {
                 e.preventDefault();
-                term.selectAll();
+                if (selMode === 'start') {
+                    selMode = 'end';
+                    selStartBtn.classList.remove('active');
+                    selEndBtn.classList.add('active');
+                } else {
+                    // Exit selection mode
+                    selMode = false;
+                    showSelCtrls(false);
+                }
+            };
+            selEndBtn.addEventListener('touchstart', handleSelEnd, { passive: false });
+            selEndBtn.addEventListener('click', handleSelEnd);
+
+            // Arrow controls for selection
+            const moveSelection = (dCol, dRow) => {
+                if (selMode === 'start') {
+                    selStart.col = Math.max(0, Math.min(term.cols - 1, selStart.col + dCol));
+                    selStart.row = Math.max(0, selStart.row + dRow);
+                } else if (selMode === 'end') {
+                    selEnd.col = Math.max(0, Math.min(term.cols - 1, selEnd.col + dCol));
+                    selEnd.row = Math.max(0, selEnd.row + dRow);
+                }
+                updateSelection();
+            };
+
+            const addSelHandler = (btn, dCol, dRow) => {
+                const handler = (e) => { e.preventDefault(); moveSelection(dCol, dRow); };
+                btn.addEventListener('touchstart', handler, { passive: false });
+                btn.addEventListener('click', handler);
             };
-            selectAllBtn.addEventListener('touchstart', handleSelectAll, { passive: false });
-            selectAllBtn.addEventListener('click', handleSelectAll);
+            addSelHandler(selLeftBtn, -1, 0);
+            addSelHandler(selRightBtn, 1, 0);
+            addSelHandler(selUpBtn, 0, -1);
+            addSelHandler(selDownBtn, 0, 1);
         }
 
         function updateClientList() {