feat(opentui): add elbow connector tool

Author: benvinegar

packages/opentui/src/app.ts

@@ -458,13 +458,14 @@ export function buildHelpText(binaryName = "termdraw"): string {
   return truncateToCells(
     `${binaryName} [--load file.td.json|-] [--output file] [--fenced|--plain]\n\n` +
       `Controls:\n` +
-      `  right palette   click Select / Box / Line / Brush / Text, box styles, and colors\n` +
-      `  Ctrl+T / Tab    cycle select / box / line / brush / text\n` +
-      `  B / A / U / P / T switch to Brush / Select / Box / Line / Text outside text entry\n` +
+      `  right palette   click Select / Box / Line / Elbow / Brush / Text, box styles, and colors\n` +
+      `  Ctrl+T / Tab    cycle select / box / line / elbow / brush / text\n` +
+      `  B / A / U / P / E / T switch to Brush / Select / Box / Line / Elbow / Text outside text entry\n` +
       `  select tool     click to select, drag empty space to marquee-select multiple objects\n` +
       `  click objects   select and move them\n` +
       `  drag handles    resize boxes / adjust line endpoints\n` +
       `  line tool       choose Smooth (Braille-aware), Single, or Double line stencils\n` +
+      `  elbow tool      create right-angle connectors with arrowheads using line stencils\n` +
       `  text tool       choose No border, Single, Double, or Dashed textbox borders\n` +
       `  Shift + drag    constrain line creation/editing to horizontal or vertical\n` +
       `  selected text   shows a virtual selection box\n` +
@@ -473,8 +474,8 @@ export function buildHelpText(binaryName = "termdraw"): string {
       `  Ctrl+Q          quit\n` +
       `  Ctrl+Z / Ctrl+Y undo / redo\n` +
       `  Ctrl+X          clear canvas\n` +
-      `  [ / ]           cycle box style in Box mode, line style in Line mode, text border in Text mode, or brush in Brush mode\n` +
-      `  mouse wheel     cycle box style in Box mode, line style in Line mode, or brush in Brush mode\n` +
+      `  [ / ]           cycle box style in Box mode, line style in Line/Elbow mode, text border in Text mode, or brush in Brush mode\n` +
+      `  mouse wheel     cycle box style in Box mode, line style in Line/Elbow mode, or brush in Brush mode\n` +
       `  brush tool      choose from preset brush stencils in the palette\n` +
       `  Space           stamp a line point or current brush / insert space in Text mode\n` +
       `  Enter / Ctrl+S  export art\n` +

packages/opentui/src/app/input.test.ts

@@ -156,7 +156,7 @@ test("handleKeyPress invokes save on Ctrl+S", () => {
 test("handleKeyPress switches tools with hotkeys outside text entry", () => {
   let mode: string | null = null;
   let renders = 0;
-  const { event, wasPrevented } = createKeyEvent("b", { raw: "b" });
+  const { event, wasPrevented } = createKeyEvent("e", { raw: "e" });
 
   const handled = handleKeyPress({
     key: event as never,
@@ -178,7 +178,7 @@ test("handleKeyPress switches tools with hotkeys outside text entry", () => {
 
   expect(handled).toBe(true);
   expect(wasPrevented()).toBe(true);
-  expect(mode === "paint").toBe(true);
+  expect(mode === "elbow").toBe(true);
   expect(renders).toBe(1);
 });
 
@@ -217,7 +217,7 @@ test("handleKeyPress cycles line styles with bracket keys", () => {
   const { event: leftKey } = createKeyEvent("[", { raw: "[" });
   const { event: rightKey } = createKeyEvent("]", { raw: "]" });
   const state = createMockState({
-    currentMode: "line",
+    currentMode: "elbow",
     cycleLineStyle: (delta: number) => {
       cycles.push(delta);
     },

packages/opentui/src/app/input.ts

@@ -51,8 +51,8 @@ function applyStyleButtonSelection(state: DrawState, style: string): void {
     return;
   }
 
-  if (state.currentMode === "line") {
-    state.setMode("line");
+  if (state.currentMode === "line" || state.currentMode === "elbow") {
+    state.setMode(state.currentMode);
     state.setLineStyle(style as LineStyle);
     return;
   }
@@ -312,7 +312,7 @@ export function handleKeyPress(
     }
   }
 
-  if (state.currentMode === "line") {
+  if (state.currentMode === "line" || state.currentMode === "elbow") {
     if (key.raw === "[") {
       key.preventDefault();
       state.cycleLineStyle(-1);

packages/opentui/src/app/layout.ts

@@ -61,7 +61,7 @@ export function isInsideRect(
 /** Returns the number of style rows rendered beneath the active tool. */
 export function getContextualStyleRowCount(currentMode: DrawMode): number {
   if (currentMode === "box") return BOX_STYLE_OPTIONS.length;
-  if (currentMode === "line") return LINE_STYLE_OPTIONS.length;
+  if (currentMode === "line" || currentMode === "elbow") return LINE_STYLE_OPTIONS.length;
   if (currentMode === "paint") return BRUSH_OPTIONS.length;
   if (currentMode === "text") return TEXT_BORDER_OPTIONS.length;
   return 0;
@@ -79,6 +79,7 @@ export function getToolButtons(layout: AppLayout, currentMode: DrawMode): ToolBu
     { mode: "select", icon: "◎", label: "Select", color: COLORS.select },
     { mode: "box", icon: "▣", label: "Box", color: COLORS.warning },
     { mode: "line", icon: "╱", label: "Line", color: COLORS.accent },
+    { mode: "elbow", icon: "└", label: "Elbow", color: COLORS.accent },
     { mode: "paint", icon: "▒", label: "Brush", color: COLORS.paint },
     { mode: "text", icon: "T", label: "Text", color: COLORS.success },
   ];
@@ -109,6 +110,7 @@ export function getContextualStyleButtons(layout: AppLayout, currentMode: DrawMo
   if (
     currentMode !== "box" &&
     currentMode !== "line" &&
+    currentMode !== "elbow" &&
     currentMode !== "paint" &&
     currentMode !== "text"
   ) {
@@ -124,7 +126,7 @@ export function getContextualStyleButtons(layout: AppLayout, currentMode: DrawMo
   const options =
     currentMode === "box"
       ? BOX_STYLE_OPTIONS
-      : currentMode === "line"
+      : currentMode === "line" || currentMode === "elbow"
         ? LINE_STYLE_OPTIONS
         : currentMode === "text"
           ? TEXT_BORDER_OPTIONS

packages/opentui/src/app/render.ts

@@ -123,7 +123,7 @@ function drawHeaderRow(
   const modeColor =
     state.currentMode === "select"
       ? COLORS.select
-      : state.currentMode === "line"
+      : state.currentMode === "line" || state.currentMode === "elbow"
         ? COLORS.accent
         : state.currentMode === "box"
           ? COLORS.warning
@@ -156,7 +156,7 @@ function drawHeaderRow(
       COLORS.warning,
       COLORS.panel,
     );
-  } else if (state.currentMode === "line") {
+  } else if (state.currentMode === "line" || state.currentMode === "elbow") {
     const lineStyle =
       LINE_STYLE_OPTIONS.find((option) => option.style === state.currentLineStyle) ??
       LINE_STYLE_OPTIONS[0]!;
@@ -228,7 +228,7 @@ function drawFooterRow(
 ): void {
   const text =
     footerTextOverride ??
-    `B Brush • A Select • U Box • P Line • T Text • Esc Deselect • Enter/Ctrl+S Export Art${
+    `B Brush • A Select • U Box • P Line • E Elbow • T Text • Esc Deselect • Enter/Ctrl+S Export Art${
       canSaveDiagram ? " • Ctrl+D Save Diagram" : ""
     } • Ctrl+Q Quit`;
   const combined = `${text}  ${status}`;
@@ -321,7 +321,7 @@ function drawStyleButton(
   const isActive =
     state.currentMode === "box"
       ? state.currentBoxStyle === button.style
-      : state.currentMode === "line"
+      : state.currentMode === "line" || state.currentMode === "elbow"
         ? state.currentLineStyle === button.style
         : state.currentMode === "text"
           ? state.currentTextBorderMode === button.style

packages/opentui/src/app/theme.ts

@@ -113,6 +113,7 @@ const INK_COLOR_VALUES: Record<InkColor, RGBA> = {
 export const TOOL_HOTKEYS: Partial<Record<string, DrawMode>> = {
   a: "select",
   b: "paint",
+  e: "elbow",
   p: "line",
   t: "text",
   u: "box",

packages/opentui/src/draw-state.test.ts

@@ -110,6 +110,31 @@ describe("DrawState", () => {
     expect(state.getCompositeCell(12, 6)).toBe(" ");
   });
 
+  test("elbow tool keeps a live orthogonal preview and commits with an arrowhead", () => {
+    const state = new DrawState(24, 16);
+    state.setMode("elbow");
+
+    const start = canvasPoint(state, 1, 1);
+    const end = canvasPoint(state, 6, 4);
+    state.handlePointerEvent({ type: "down", button: MouseButton.LEFT, ...start });
+    state.handlePointerEvent({ type: "drag", button: MouseButton.LEFT, ...end });
+
+    const preview = state.getActivePreviewCharacters();
+    expect(preview.get("1,1")).toBe("─");
+    expect(preview.get("5,1")).toBe("─");
+    expect(preview.get("6,1")).toBe("┌");
+    expect(preview.get("6,2")).toBe("│");
+    expect(preview.get("6,4")).toBe("v");
+
+    state.handlePointerEvent({ type: "up", button: MouseButton.LEFT, ...end });
+
+    expect(state.getCompositeCell(1, 1)).toBe("─");
+    expect(state.getCompositeCell(5, 1)).toBe("─");
+    expect(state.getCompositeCell(6, 1)).toBe("┌");
+    expect(state.getCompositeCell(6, 2)).toBe("│");
+    expect(state.getCompositeCell(6, 4)).toBe("v");
+  });
+
   test("clicking empty space in line mode does not create a one-cell line", () => {
     const state = new DrawState(20, 10);
     state.setMode("box");