tigma 1.0.3 → 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

@@ -14876,6 +14876,8 @@ class CanvasApp {
   currentFilePath = null;
   saveStatusMessage = null;
   saveStatusTimeout = 0;
+  isSelecting = false;
+  isSelectionPending = false;
   showSavePrompt = false;
   savePromptInput = "";
   gridWidth = 0;
@@ -15351,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;
@@ -15362,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();
@@ -15380,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);
@@ -15398,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") {
@@ -15502,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;
       }
@@ -15877,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);
@@ -16012,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") {
@@ -16057,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) {
@@ -16339,6 +16397,36 @@ 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;
@@ -16600,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.3",
+  "version": "1.0.4",
   "description": "A terminal-based design tool",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",