npm - termites - Versions diffs - 1.0.23 → 1.0.24 - Mend

termites 1.0.23 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/server.js +99 -74

package/package.json CHANGED Viewed

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

package/server.js CHANGED Viewed

@@ -645,6 +645,13 @@ class TermitesServer {
         .mobile-toolbar button:active { opacity: 0.6; transform: scale(0.95); }
         .mobile-toolbar button.active { background: var(--btn-active, rgba(255,255,255,0.15)); }
         .mobile-toolbar .sep { width: 1px; background: currentColor; opacity: 0.2; margin: 0 4px; }
+        .sel-marker {
+            position: absolute; z-index: 50; padding: 4px 8px; border-radius: 4px;
+            font-size: 11px; font-weight: bold; cursor: grab; touch-action: none;
+            user-select: none; -webkit-user-select: none;
+        }
+        #sel-start-marker { background: #22c55e; color: #fff; }
+        #sel-end-marker { background: #ef4444; color: #fff; }
     </style>
 </head>
 <body>
@@ -721,15 +728,12 @@ 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="sel-btn" class="mod-btn">Sel</button>
         <button id="copy-btn">Copy</button>
         <button id="paste-btn">Paste</button>
     </div>
+    <div id="sel-start-marker" class="sel-marker" style="display:none">▼Start</div>
+    <div id="sel-end-marker" class="sel-marker" style="display:none">▲End</div>
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
@@ -1065,17 +1069,34 @@ class TermitesServer {
             pasteBtn.addEventListener('touchstart', handlePaste, { passive: false });
             pasteBtn.addEventListener('click', handlePaste);
-            // Selection mode with start/end control
-            let selMode = false; // false=off, 'start'=adjusting start, 'end'=adjusting end
+            // Selection mode with draggable markers
+            let selMode = false;
             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');
+            const selBtn = document.getElementById('sel-btn');
+            const startMarker = document.getElementById('sel-start-marker');
+            const endMarker = document.getElementById('sel-end-marker');
+            const termContainer = document.getElementById('terminal-container');
+            function getCellSize() {
+                try {
+                    return {
+                        width: term._core._renderService.dimensions.css.cell.width,
+                        height: term._core._renderService.dimensions.css.cell.height
+                    };
+                } catch (e) {
+                    return { width: 9, height: 17 }; // fallback
+                }
+            }
+            function updateMarkerPositions() {
+                const cell = getCellSize();
+                const rect = termContainer.getBoundingClientRect();
+                startMarker.style.left = (selStart.col * cell.width + 4) + 'px';
+                startMarker.style.top = (selStart.row * cell.height) + 'px';
+                endMarker.style.left = (selEnd.col * cell.width + 4) + 'px';
+                endMarker.style.top = ((selEnd.row + 1) * cell.height) + 'px';
+            }
             function updateSelection() {
                 const startOffset = selStart.row * term.cols + selStart.col;
@@ -1084,76 +1105,80 @@ class TermitesServer {
                 if (length > 0) {
                     term.select(selStart.col, selStart.row, length);
                 }
+                updateMarkerPositions();
             }
-            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) => {
+            function toggleSelMode(e) {
                 e.preventDefault();
-                if (!selMode) {
-                    // Enter selection mode, start from last line
-                    selMode = 'start';
+                selMode = !selMode;
+                selBtn.classList.toggle('active', selMode);
+                if (selMode) {
+                    // Enter selection mode
                     const lastRow = term.buffer.active.cursorY;
                     selStart = { col: 0, row: Math.max(0, lastRow - 2) };
                     selEnd = { col: term.cols - 1, row: lastRow };
-                    showSelCtrls(true);
+                    startMarker.style.display = 'block';
+                    endMarker.style.display = 'block';
                     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();
-                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);
+                    startMarker.style.display = 'none';
+                    endMarker.style.display = 'none';
+                    term.clearSelection();
                 }
-                updateSelection();
-            };
+            }
+            selBtn.addEventListener('touchstart', toggleSelMode, { passive: false });
+            selBtn.addEventListener('click', toggleSelMode);
-            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);
+            // Make markers draggable
+            function setupDraggable(marker, isStart) {
+                let dragging = false;
+                let startX, startY;
+                const onStart = (e) => {
+                    e.preventDefault();
+                    dragging = true;
+                    const touch = e.touches ? e.touches[0] : e;
+                    startX = touch.clientX;
+                    startY = touch.clientY;
+                    marker.style.cursor = 'grabbing';
+                };
+                const onMove = (e) => {
+                    if (!dragging) return;
+                    e.preventDefault();
+                    const touch = e.touches ? e.touches[0] : e;
+                    const cell = getCellSize();
+                    const rect = termContainer.getBoundingClientRect();
+                    const x = touch.clientX - rect.left - 4;
+                    const y = touch.clientY - rect.top;
+                    const col = Math.max(0, Math.min(term.cols - 1, Math.floor(x / cell.width)));
+                    const row = Math.max(0, Math.floor(y / cell.height));
+                    if (isStart) {
+                        selStart = { col, row };
+                    } else {
+                        selEnd = { col, row: Math.max(0, row - 1) };
+                    }
+                    updateSelection();
+                };
+                const onEnd = () => {
+                    dragging = false;
+                    marker.style.cursor = 'grab';
+                };
+                marker.addEventListener('touchstart', onStart, { passive: false });
+                marker.addEventListener('touchmove', onMove, { passive: false });
+                marker.addEventListener('touchend', onEnd);
+                marker.addEventListener('mousedown', onStart);
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onEnd);
+            }
+            setupDraggable(startMarker, true);
+            setupDraggable(endMarker, false);
         }
         function updateClientList() {