tigma 1.0.2 → 1.0.4

package/README.md

@@ -2,12 +2,14 @@
 
 A terminal-based design tool for creating ASCII diagrams and designs.
 
-## Installation
+## Running
 
 ```bash
-bun install
+bunx tigma
 ```
 
+Currently this requires [bun](http://bun.sh).
+
 ## Usage
 
 ```bash
@@ -47,6 +49,7 @@ Switch between tools using keyboard shortcuts:
 - **Shift+Click** to add/remove objects from selection (multi-select)
 - **Click+Drag** to move selected objects
 - **Click on empty space** to deselect all
+- **Click+Drag on empty space** to box-select multiple items (hold Shift to add)
 
 #### Rectangle Resizing
 
@@ -125,7 +128,7 @@ Designs are saved as `.tigma` files in JSON format. The file stores:
 ## Features
 
 - **Layered rendering**: Objects stack based on z-index; newer objects appear on top by default
-- **Multi-selection**: Select multiple objects with Shift+Click
+- **Multi-selection**: Select multiple objects with Shift+Click or box-select
 - **Undo/Redo**: Up to 100 history snapshots
 - **Terminal responsive**: Adapts to terminal resize events
 - **Mouse support**: Full mouse interaction including hover highlighting

package/dist/index.js

@@ -1,4 +1,5 @@
-#!/usr/bin/env node
+#!/usr/bin/env bun
+// @bun
 // node_modules/@opentui/core/index-rysm4rsr.js
 import { Buffer as Buffer2 } from "buffer";
 import { EventEmitter } from "events";
@@ -1703,56 +1704,56 @@ var Yoga = wrapAssembly(await yoga_wasm_base64_esm_default());
 var src_default = Yoga;
 var BorderChars = {
   single: {
-    topLeft: "┌",
-    topRight: "┐",
-    bottomLeft: "└",
-    bottomRight: "┘",
-    horizontal: "─",
-    vertical: "│",
-    topT: "┬",
-    bottomT: "┴",
-    leftT: "├",
-    rightT: "┤",
-    cross: "┼"
+    topLeft: "\u250C",
+    topRight: "\u2510",
+    bottomLeft: "\u2514",
+    bottomRight: "\u2518",
+    horizontal: "\u2500",
+    vertical: "\u2502",
+    topT: "\u252C",
+    bottomT: "\u2534",
+    leftT: "\u251C",
+    rightT: "\u2524",
+    cross: "\u253C"
   },
   double: {
-    topLeft: "╔",
-    topRight: "╗",
-    bottomLeft: "╚",
-    bottomRight: "╝",
-    horizontal: "═",
-    vertical: "║",
-    topT: "╦",
-    bottomT: "╩",
-    leftT: "╠",
-    rightT: "╣",
-    cross: "╬"
+    topLeft: "\u2554",
+    topRight: "\u2557",
+    bottomLeft: "\u255A",
+    bottomRight: "\u255D",
+    horizontal: "\u2550",
+    vertical: "\u2551",
+    topT: "\u2566",
+    bottomT: "\u2569",
+    leftT: "\u2560",
+    rightT: "\u2563",
+    cross: "\u256C"
   },
   rounded: {
-    topLeft: "╭",
-    topRight: "╮",
-    bottomLeft: "╰",
-    bottomRight: "╯",
-    horizontal: "─",
-    vertical: "│",
-    topT: "┬",
-    bottomT: "┴",
-    leftT: "├",
-    rightT: "┤",
-    cross: "┼"
+    topLeft: "\u256D",
+    topRight: "\u256E",
+    bottomLeft: "\u2570",
+    bottomRight: "\u256F",
+    horizontal: "\u2500",
+    vertical: "\u2502",
+    topT: "\u252C",
+    bottomT: "\u2534",
+    leftT: "\u251C",
+    rightT: "\u2524",
+    cross: "\u253C"
   },
   heavy: {
-    topLeft: "┏",
-    topRight: "┓",
-    bottomLeft: "┗",
-    bottomRight: "┛",
-    horizontal: "━",
-    vertical: "┃",
-    topT: "┳",
-    bottomT: "┻",
-    leftT: "┣",
-    rightT: "┫",
-    cross: "╋"
+    topLeft: "\u250F",
+    topRight: "\u2513",
+    bottomLeft: "\u2517",
+    bottomRight: "\u251B",
+    horizontal: "\u2501",
+    vertical: "\u2503",
+    topT: "\u2533",
+    bottomT: "\u253B",
+    leftT: "\u2523",
+    rightT: "\u252B",
+    cross: "\u254B"
   }
 };
 function getBorderSides(border) {
@@ -2288,7 +2289,7 @@ var parseKeypress = (s = "", options = {}) => {
     key.meta = s.length === 2;
   } else if (s === "\t") {
     key.name = "tab";
-  } else if (s === "\b" || s === "\x1B\b" || s === "" || s === "\x1B") {
+  } else if (s === "\b" || s === "\x1B\b" || s === "\x7F" || s === "\x1B\x7F") {
     key.name = "backspace";
     key.meta = s.charAt(0) === "\x1B";
   } else if (s === "\x1B" || s === "\x1B\x1B") {
@@ -14875,6 +14876,8 @@ class CanvasApp {
   currentFilePath = null;
   saveStatusMessage = null;
   saveStatusTimeout = 0;
+  isSelecting = false;
+  isSelectionPending = false;
   showSavePrompt = false;
   savePromptInput = "";
   gridWidth = 0;
@@ -15350,6 +15353,11 @@ class CanvasApp {
       if (event.x !== this.mouseDownX || event.y !== this.mouseDownY) {
         this.hasDragged = true;
       }
+      if (this.isSelectionPending && this.hasDragged && this.currentTool === "move") {
+        this.isSelectionPending = false;
+        this.isSelecting = true;
+        this.isDraggingMouse = true;
+      }
       if (this.isDraggingSelection) {
         const dx = event.x - this.dragStartX;
         const dy = event.y - this.dragStartY;
@@ -15361,7 +15369,7 @@ class CanvasApp {
         if (rectId !== undefined) {
           this.resizeRect(rectId, event.x, event.y);
         }
-      } else if (this.isDrawingRect || this.isDrawingLine) {
+      } else if (this.isDrawingRect || this.isDrawingLine || this.isSelecting) {
         this.drawCursorX = Math.max(0, Math.min(this.gridWidth - 1, event.x));
         this.drawCursorY = Math.max(0, Math.min(this.gridHeight - 1, event.y));
         this.renderer.requestRender();
@@ -15379,6 +15387,11 @@ class CanvasApp {
         this.drawCursorY = Math.max(0, Math.min(this.gridHeight - 1, event.y));
         this.commitLine();
       }
+      if (this.isSelecting) {
+        this.drawCursorX = Math.max(0, Math.min(this.gridWidth - 1, event.x));
+        this.drawCursorY = Math.max(0, Math.min(this.gridHeight - 1, event.y));
+        this.commitSelection();
+      }
       if (this.clickedOnSelectedTextBox && !this.hasDragged && this.selectedTextBoxIds.size === 1) {
         const textBoxId = this.selectedTextBoxIds.values().next().value;
         const textBox = this.textBoxes.find((b) => b.id === textBoxId);
@@ -15397,6 +15410,8 @@ class CanvasApp {
       this.isDraggingMouse = false;
       this.clickedOnSelectedTextBox = false;
       this.hasDragged = false;
+      this.isSelecting = false;
+      this.isSelectionPending = false;
       return;
     }
     if (event.type === "down") {
@@ -15501,6 +15516,11 @@ class CanvasApp {
         if (!shiftHeld) {
           this.clearSelection();
         }
+        this.isSelectionPending = true;
+        this.drawStartX = event.x;
+        this.drawStartY = event.y;
+        this.drawCursorX = event.x;
+        this.drawCursorY = event.y;
         this.renderer.requestRender();
         return;
       }
@@ -15876,6 +15896,40 @@ class CanvasApp {
     this.isDrawingLine = false;
     this.setTool("move");
   }
+  commitSelection() {
+    if (!this.isSelecting)
+      return;
+    const selX1 = Math.min(this.drawStartX, this.drawCursorX);
+    const selX2 = Math.max(this.drawStartX, this.drawCursorX);
+    const selY1 = Math.min(this.drawStartY, this.drawCursorY);
+    const selY2 = Math.max(this.drawStartY, this.drawCursorY);
+    const isIntersecting = (x1, y1, x2, y2) => {
+      return !(x2 < selX1 || x1 > selX2 || y2 < selY1 || y1 > selY2);
+    };
+    for (const box of this.textBoxes) {
+      const width = Math.max(1, this.getTextLength(box));
+      const bx1 = box.x;
+      const bx2 = box.x + width - 1;
+      const by1 = box.y;
+      const by2 = box.y;
+      if (isIntersecting(bx1, by1, bx2, by2)) {
+        this.selectTextBox(box.id, true);
+      }
+    }
+    for (const rect of this.rectangles) {
+      const { x1, y1, x2, y2 } = this.normalizeRect(rect);
+      if (isIntersecting(x1, y1, x2, y2)) {
+        this.selectRect(rect.id, true);
+      }
+    }
+    for (const line of this.lines) {
+      const { x1, y1, x2, y2 } = this.normalizeLine(line);
+      if (isIntersecting(x1, y1, x2, y2)) {
+        this.selectLine(line.id, true);
+      }
+    }
+    this.isSelecting = false;
+  }
   deleteLine(id) {
     this.saveSnapshot();
     this.lines = this.lines.filter((l) => l.id !== id);
@@ -16011,6 +16065,8 @@ class CanvasApp {
     }
     this.isDrawingRect = false;
     this.isDrawingLine = false;
+    this.isSelecting = false;
+    this.isSelectionPending = false;
     this.isDraggingMouse = false;
     this.currentTool = tool;
     if (tool !== "move") {
@@ -16056,6 +16112,9 @@ class CanvasApp {
     if (this.isDrawingLine) {
       this.renderLinePreview(buffer);
     }
+    if (this.isSelecting) {
+      this.renderSelectionBoxPreview(buffer);
+    }
     if (this.activeTextBoxId !== null) {
       const activeBox = this.textBoxes.find((b) => b.id === this.activeTextBoxId);
       if (activeBox) {
@@ -16109,31 +16168,31 @@ class CanvasApp {
     for (let x = startX;x < startX + promptWidth; x++) {
       if (x >= 0 && x < this.gridWidth) {
         if (startY >= 0 && startY < this.gridHeight) {
-          buffer.setCell(x, startY, "─", borderColor, bgColor, 0);
+          buffer.setCell(x, startY, "\u2500", borderColor, bgColor, 0);
         }
         if (startY + promptHeight - 1 >= 0 && startY + promptHeight - 1 < this.gridHeight) {
-          buffer.setCell(x, startY + promptHeight - 1, "─", borderColor, bgColor, 0);
+          buffer.setCell(x, startY + promptHeight - 1, "\u2500", borderColor, bgColor, 0);
         }
       }
     }
     for (let y = startY;y < startY + promptHeight; y++) {
       if (y >= 0 && y < this.gridHeight) {
         if (startX >= 0 && startX < this.gridWidth) {
-          buffer.setCell(startX, y, "│", borderColor, bgColor, 0);
+          buffer.setCell(startX, y, "\u2502", borderColor, bgColor, 0);
         }
         if (startX + promptWidth - 1 >= 0 && startX + promptWidth - 1 < this.gridWidth) {
-          buffer.setCell(startX + promptWidth - 1, y, "│", borderColor, bgColor, 0);
+          buffer.setCell(startX + promptWidth - 1, y, "\u2502", borderColor, bgColor, 0);
         }
       }
     }
     if (startX >= 0 && startY >= 0)
-      buffer.setCell(startX, startY, "┌", borderColor, bgColor, 0);
+      buffer.setCell(startX, startY, "\u250C", borderColor, bgColor, 0);
     if (startX + promptWidth - 1 < this.gridWidth && startY >= 0)
-      buffer.setCell(startX + promptWidth - 1, startY, "┐", borderColor, bgColor, 0);
+      buffer.setCell(startX + promptWidth - 1, startY, "\u2510", borderColor, bgColor, 0);
     if (startX >= 0 && startY + promptHeight - 1 < this.gridHeight)
-      buffer.setCell(startX, startY + promptHeight - 1, "└", borderColor, bgColor, 0);
+      buffer.setCell(startX, startY + promptHeight - 1, "\u2514", borderColor, bgColor, 0);
     if (startX + promptWidth - 1 < this.gridWidth && startY + promptHeight - 1 < this.gridHeight)
-      buffer.setCell(startX + promptWidth - 1, startY + promptHeight - 1, "┘", borderColor, bgColor, 0);
+      buffer.setCell(startX + promptWidth - 1, startY + promptHeight - 1, "\u2518", borderColor, bgColor, 0);
     const title = " Save As ";
     const titleX = startX + Math.floor((promptWidth - title.length) / 2);
     for (let i = 0;i < title.length; i++) {
@@ -16157,7 +16216,7 @@ class CanvasApp {
     }
     const cursorX = inputX + displayText.length;
     if (cursorX >= 0 && cursorX < inputX + inputWidth && inputY >= 0 && inputY < this.gridHeight) {
-      buffer.setCell(cursorX, inputY, "▏", borderColor, inputBgColor, 0);
+      buffer.setCell(cursorX, inputY, "\u258F", borderColor, inputBgColor, 0);
     }
     const hint = "Enter to save, Esc to cancel";
     const hintX = startX + Math.floor((promptWidth - hint.length) / 2);
@@ -16208,16 +16267,16 @@ class CanvasApp {
         buffer.setCell(x, y, char, borderColor, bg2, 0);
       }
     };
-    drawBorderCell(x1, y1, "┌");
-    drawBorderCell(x2, y1, "┐");
-    drawBorderCell(x1, y2, "└");
-    drawBorderCell(x2, y2, "┘");
+    drawBorderCell(x1, y1, "\u250C");
+    drawBorderCell(x2, y1, "\u2510");
+    drawBorderCell(x1, y2, "\u2514");
+    drawBorderCell(x2, y2, "\u2518");
     for (let x = x1 + 1;x < x2; x++) {
-      drawBorderCell(x, y1, "─");
-      drawBorderCell(x, y2, "─");
+      drawBorderCell(x, y1, "\u2500");
+      drawBorderCell(x, y2, "\u2500");
     }
-    drawBorderCell(x1, box.y, "│");
-    drawBorderCell(x2, box.y, "│");
+    drawBorderCell(x1, box.y, "\u2502");
+    drawBorderCell(x2, box.y, "\u2502");
   }
   renderTextCursor(buffer, box) {
     if (!this.cursorBlinkVisible)
@@ -16257,17 +16316,17 @@ class CanvasApp {
             continue;
           let char = "";
           if (y === y1 && x === x1)
-            char = "┌";
+            char = "\u250C";
           else if (y === y1 && x === x2)
-            char = "┐";
+            char = "\u2510";
           else if (y === y2 && x === x1)
-            char = "└";
+            char = "\u2514";
           else if (y === y2 && x === x2)
-            char = "┘";
+            char = "\u2518";
           else if (y === y1 || y === y2)
-            char = "─";
+            char = "\u2500";
           else if (x === x1 || x === x2)
-            char = "│";
+            char = "\u2502";
           if (char) {
             let bg2 = this.bgColor;
             if (isHovered) {
@@ -16292,17 +16351,17 @@ class CanvasApp {
           continue;
         let char = "";
         if (y === y1 && x === x1)
-          char = "┌";
+          char = "\u250C";
         else if (y === y1 && x === x2)
-          char = "┐";
+          char = "\u2510";
         else if (y === y2 && x === x1)
-          char = "└";
+          char = "\u2514";
         else if (y === y2 && x === x2)
-          char = "┘";
+          char = "\u2518";
         else if (y === y1 || y === y2)
-          char = "─";
+          char = "\u2500";
         else if (x === x1 || x === x2)
-          char = "│";
+          char = "\u2502";
         if (char) {
           buffer.setCell(x, y, char, fg2, this.bgColor, attrs);
         }
@@ -16338,28 +16397,58 @@ class CanvasApp {
       buffer.setCell(x, y, char, fg2, bg2, attrs);
     }
   }
+  renderSelectionBoxPreview(buffer) {
+    const x1 = Math.min(this.drawStartX, this.drawCursorX);
+    const x2 = Math.max(this.drawStartX, this.drawCursorX);
+    const y1 = Math.min(this.drawStartY, this.drawCursorY);
+    const y2 = Math.max(this.drawStartY, this.drawCursorY);
+    const fg2 = this.toolbarActiveColor;
+    for (let y = y1;y <= y2; y++) {
+      for (let x = x1;x <= x2; x++) {
+        if (x < 0 || x >= this.gridWidth || y < 0 || y >= this.gridHeight)
+          continue;
+        let char = "";
+        if (y === y1 && x === x1)
+          char = "+";
+        else if (y === y1 && x === x2)
+          char = "+";
+        else if (y === y2 && x === x1)
+          char = "+";
+        else if (y === y2 && x === x2)
+          char = "+";
+        else if (y === y1 || y === y2)
+          char = "-";
+        else if (x === x1 || x === x2)
+          char = "\u2502";
+        if (char) {
+          const currentBg = this.readBufferBg(buffer, x, y);
+          buffer.setCell(x, y, char, fg2, currentBg, 0);
+        }
+      }
+    }
+  }
   getLineChar(x1, y1, x2, y2, index, total) {
     const dx = x2 - x1;
     const dy = y2 - y1;
     if (dx === 0) {
       if (index === 0)
-        return dy > 0 ? "╷" : "╵";
+        return dy > 0 ? "\u2577" : "\u2575";
       if (index === total - 1)
-        return dy > 0 ? "╵" : "╷";
-      return "│";
+        return dy > 0 ? "\u2575" : "\u2577";
+      return "\u2502";
     } else if (dy === 0) {
       if (index === 0)
-        return dx > 0 ? "╶" : "╴";
+        return dx > 0 ? "\u2576" : "\u2574";
       if (index === total - 1)
-        return dx > 0 ? "╴" : "╶";
-      return "─";
+        return dx > 0 ? "\u2574" : "\u2576";
+      return "\u2500";
     } else {
       const goingRight = dx > 0;
       const goingDown = dy > 0;
       if (goingRight === goingDown) {
-        return "╲";
+        return "\u2572";
       } else {
-        return "╱";
+        return "\u2571";
       }
     }
   }
@@ -16543,9 +16632,9 @@ class CanvasApp {
       if (x < width) {
         if (color === null) {
           const fg2 = isSelected ? this.toolbarActiveColor : this.toolbarTextColor;
-          buffer.setCell(x, pickerY, "∅", fg2, this.toolbarBgColor, 0);
+          buffer.setCell(x, pickerY, "\u2205", fg2, this.toolbarBgColor, 0);
         } else {
-          const char = isSelected ? "█" : "■";
+          const char = isSelected ? "\u2588" : "\u25A0";
           buffer.setCell(x, pickerY, char, color, this.toolbarBgColor, 0);
         }
         x++;
@@ -16556,9 +16645,9 @@ class CanvasApp {
       if (x < width) {
         if (color === null) {
           const fg2 = isSelected ? this.toolbarActiveColor : this.toolbarTextColor;
-          buffer.setCell(x, pickerY, "∅", fg2, this.toolbarBgColor, 0);
+          buffer.setCell(x, pickerY, "\u2205", fg2, this.toolbarBgColor, 0);
         } else {
-          const char = isSelected ? "█" : "■";
+          const char = isSelected ? "\u2588" : "\u25A0";
           buffer.setCell(x, pickerY, char, color, this.toolbarBgColor, 0);
         }
         x++;
@@ -16599,7 +16688,7 @@ class CanvasApp {
     if (this.activeTextBoxId !== null) {
       modeText = "| Editing (Esc to finish)";
     } else if (this.currentTool === "move") {
-      modeText = "| Click to select, drag to move";
+      modeText = "| Click to select, drag to move, drag empty space to box-select";
     } else if (this.currentTool === "text") {
       modeText = "| Click to add/edit text";
     } else if (this.isDrawingRect || this.isDrawingLine) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tigma",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A terminal-based design tool",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "bun build ./index.ts --outdir ./dist --target node && echo '#!/usr/bin/env node' | cat - ./dist/index.js > ./dist/temp && mv ./dist/temp ./dist/index.js && chmod +x ./dist/index.js",
+    "build": "bun build ./index.ts --outdir ./dist --target bun && echo '#!/usr/bin/env bun' | cat - ./dist/index.js > ./dist/temp && mv ./dist/temp ./dist/index.js && chmod +x ./dist/index.js",
     "prepublishOnly": "bun run build"
   },
   "keywords": [