termites 1.0.21 → 1.0.23

package/package.json

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

package/server.js

@@ -591,8 +591,6 @@ class TermitesServer {
         .header-title .sep { color: var(--sep-color, #657b83); }
         .no-client { color: #888; font-style: italic; }
         #terminal-container { flex: 1; padding: 4px; transition: background 0.3s; overflow: hidden; min-height: 0; position: relative; }
-        #terminal-container.select-mode { cursor: text; }
-        #terminal-container.select-mode::after { content: 'Select Mode'; position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; pointer-events: none; }
         .xterm { height: 100%; }
         .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; }
         .overlay.open { opacity: 1; visibility: visible; }
@@ -723,9 +721,14 @@ class TermitesServer {
         <button data-key="ArrowDown">↓</button>
         <div class="sep"></div>
         <button data-seq="/">/</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>
-        <button id="select-btn" class="mod-btn">Select</button>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
@@ -1062,58 +1065,95 @@ class TermitesServer {
             pasteBtn.addEventListener('touchstart', handlePaste, { passive: false });
             pasteBtn.addEventListener('click', handlePaste);
 
-            // Select mode button - enables touch selection
-            let selectMode = false;
-            const selectBtn = document.getElementById('select-btn');
-            const termContainer = document.getElementById('terminal-container');
+            // 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);
+                }
+            }
 
-            const toggleSelectMode = (e) => {
+            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();
-                e.stopPropagation();
-                selectMode = !selectMode;
-                selectBtn.classList.toggle('active', selectMode);
-                termContainer.style.touchAction = selectMode ? 'none' : '';
-                termContainer.style.userSelect = selectMode ? 'text' : '';
-                if (selectMode) {
-                    // Enable selection overlay
-                    termContainer.classList.add('select-mode');
+                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 {
-                    termContainer.classList.remove('select-mode');
-                    term.clearSelection();
+                    // Already adjusting start, switch to end
+                    selMode = 'end';
+                    selStartBtn.classList.remove('active');
+                    selEndBtn.classList.add('active');
                 }
             };
-            selectBtn.addEventListener('touchstart', toggleSelectMode, { passive: false });
-            selectBtn.addEventListener('click', toggleSelectMode);
-
-            // Handle touch selection
-            let touchStartPos = null;
-            termContainer.addEventListener('touchstart', (e) => {
-                if (selectMode && e.touches.length === 1) {
-                    const touch = e.touches[0];
-                    const rect = termContainer.getBoundingClientRect();
-                    touchStartPos = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
-                }
-            }, { passive: true });
-
-            termContainer.addEventListener('touchmove', (e) => {
-                if (selectMode && touchStartPos && e.touches.length === 1) {
-                    e.preventDefault();
-                    const touch = e.touches[0];
-                    const rect = termContainer.getBoundingClientRect();
-                    const currentPos = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
-
-                    // Convert pixel positions to terminal coordinates
-                    const cellWidth = term._core._renderService.dimensions.css.cell.width;
-                    const cellHeight = term._core._renderService.dimensions.css.cell.height;
-
-                    const startCol = Math.floor(touchStartPos.x / cellWidth);
-                    const startRow = Math.floor(touchStartPos.y / cellHeight);
-                    const endCol = Math.floor(currentPos.x / cellWidth);
-                    const endRow = Math.floor(currentPos.y / cellHeight);
+            selStartBtn.addEventListener('touchstart', handleSelStart, { passive: false });
+            selStartBtn.addEventListener('click', handleSelStart);
 
-                    term.select(startCol, startRow, (endRow - startRow) * term.cols + (endCol - startCol) + 1);
+            const handleSelEnd = (e) => {
+                e.preventDefault();
+                if (selMode === 'start') {
+                    selMode = 'end';
+                    selStartBtn.classList.remove('active');
+                    selEndBtn.classList.add('active');
+                } else {
+                    // Exit selection mode
+                    selMode = false;
+                    showSelCtrls(false);
                 }
-            }, { passive: 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);
+            };
+            addSelHandler(selLeftBtn, -1, 0);
+            addSelHandler(selRightBtn, 1, 0);
+            addSelHandler(selUpBtn, 0, -1);
+            addSelHandler(selDownBtn, 0, 1);
         }
 
         function updateClientList() {