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

termites 1.0.22 → 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 +119 -8

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "termites",
-  "version": "1.0.22",
+  "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,10 +728,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-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>
@@ -1060,14 +1069,116 @@ 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 draggable markers
+            let selMode = false;
+            let selStart = { col: 0, row: 0 };
+            let selEnd = { col: 0, row: 0 };
+            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;
+                const endOffset = selEnd.row * term.cols + selEnd.col;
+                const length = endOffset - startOffset + 1;
+                if (length > 0) {
+                    term.select(selStart.col, selStart.row, length);
+                }
+                updateMarkerPositions();
+            }
+            function toggleSelMode(e) {
                 e.preventDefault();
-                term.selectAll();
-            };
-            selectAllBtn.addEventListener('touchstart', handleSelectAll, { passive: false });
-            selectAllBtn.addEventListener('click', handleSelectAll);
+                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 };
+                    startMarker.style.display = 'block';
+                    endMarker.style.display = 'block';
+                    updateSelection();
+                } else {
+                    // Exit selection mode
+                    startMarker.style.display = 'none';
+                    endMarker.style.display = 'none';
+                    term.clearSelection();
+                }
+            }
+            selBtn.addEventListener('touchstart', toggleSelMode, { passive: false });
+            selBtn.addEventListener('click', toggleSelMode);
+            // 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() {