Merge pull request #25 from karlkauc/feature/xmlspy-grid-view

feat: XMLSpy-style grid view for graphical XML editor

Author: karlkauc

docs/superpowers/plans/2026-03-26-grid-cell-expand-arrows-fix.md

@@ -0,0 +1,86 @@
+# Grid Cell Expand Arrows Fix — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fix expand/collapse arrows in RepeatingElementsTable grid cells — they are invisible because they use Unicode characters that don't render in Monospaced font on Canvas. Replace with Canvas-drawn polygon triangles.
+
+**Architecture:** Replace `gc.fillText(arrow, ...)` calls for cell expand indicators with `gc.fillPolygon()` calls that draw triangles directly, matching the approach used for tree expand bars.
+
+**Tech Stack:** Java 25, JavaFX 24.0.1, Canvas (GraphicsContext)
+
+**Spec:** `docs/superpowers/specs/2026-03-26-grid-cell-expansion-design.md`
+
+---
+
+## File Structure
+
+| File | Action | Responsibility |
+|------|--------|----------------|
+| `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java` | Modify | Replace Unicode arrows with Canvas-drawn polygons in `renderInlineTable()` |
+
+---
+
+### Task 1: Replace Unicode arrows with Canvas-drawn polygons in grid cells
+
+**Files:**
+- Modify: `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java`
+
+- [ ] **Step 1: Replace the expand arrow rendering in `renderInlineTable()`**
+
+In `renderInlineTable()` (around line 1080-1088), replace the Unicode-based arrow drawing:
+
+```java
+// CURRENT (broken — Unicode chars don't render in Monospaced on Canvas):
+if (isComplex) {
+    gc.setFont(SMALL_FONT);
+    gc.setFill(TEXT_SECONDARY);
+    gc.setTextAlign(TextAlignment.LEFT);
+    gc.setTextBaseline(VPos.CENTER);
+    String arrow = row.isColumnExpanded(colName) ? "\u25BC" : "\u25B6";
+    gc.fillText(arrow, cellX + 2, cellCenterY);
+}
+```
+
+With Canvas-drawn polygon triangles (same approach as tree expand bars at line 768-778):
+
+```java
+if (isComplex) {
+    double arrowX = cellX + 8;
+    double arrowY = cellCenterY;
+    double arrowSize = 3;
+    gc.setFill(TEXT_SECONDARY);
+
+    if (row.isColumnExpanded(colName)) {
+        // Down-pointing triangle ▼ (expanded)
+        gc.fillPolygon(
+                new double[]{arrowX - arrowSize, arrowX, arrowX + arrowSize},
+                new double[]{arrowY - arrowSize / 2, arrowY + arrowSize, arrowY - arrowSize / 2},
+                3
+        );
+    } else {
+        // Right-pointing triangle ► (collapsed)
+        gc.fillPolygon(
+                new double[]{arrowX - arrowSize / 2, arrowX + arrowSize, arrowX - arrowSize / 2},
+                new double[]{arrowY - arrowSize, arrowY, arrowY + arrowSize},
+                3
+        );
+    }
+}
+```
+
+- [ ] **Step 2: Verify build compiles**
+
+Run: `./gradlew compileJava`
+Expected: BUILD SUCCESSFUL
+
+- [ ] **Step 3: Run all tests**
+
+Run: `./gradlew test`
+Expected: All tests PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java
+git commit -m "fix: replace Unicode arrows with Canvas-drawn polygons in grid cells"
+```

docs/superpowers/plans/2026-03-26-grid-cell-expansion.md

@@ -0,0 +1,200 @@
+# Grid Cell Expansion — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Enable inline expand/collapse for complex table cells in the RepeatingElementsTable grid view, so users can see and edit child nodes directly within the table.
+
+**Architecture:** Add cell-level expand state to `TableRow`, use `FlatRow.flattenElement()` to produce child rows on demand, render them inline within the cell with dynamic row heights, and handle click/edit interactions on the expanded content.
+
+**Tech Stack:** Java 25, JavaFX 24.0.1, Canvas (GraphicsContext), JUnit 5
+
+**Spec:** `docs/superpowers/specs/2026-03-26-grid-cell-expansion-design.md`
+
+**Status:** Already implemented (commit `19b7eb4a`). This plan documents what was built.
+
+---
+
+## File Structure
+
+| File | Action | Responsibility |
+|------|--------|----------------|
+| `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/FlatRow.java` | Modify | Add `flattenElement(XmlElement)` convenience method |
+| `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/RepeatingElementsTable.java` | Modify | Add cell expand state to TableRow, variable row heights |
+| `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java` | Modify | Render expanded cells, handle expand clicks, variable positioning |
+
+---
+
+### Task 1: Add FlatRow.flattenElement() convenience method
+
+**Files:**
+- Modify: `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/FlatRow.java`
+
+- [x] **Step 1: Add public static flattenElement(XmlElement) method**
+
+```java
+public static List<FlatRow> flattenElement(XmlElement element) {
+    List<FlatRow> rows = new ArrayList<>();
+    // Add attributes of the element itself at depth 0
+    int attrIdx = 0;
+    for (Map.Entry<String, String> attr : element.getAttributes().entrySet()) {
+        FlatRow attrRow = new FlatRow(RowType.ATTRIBUTE, 0, element, null,
+                attr.getKey(), attr.getValue(), 0);
+        attrRow.setAttributeIndex(attrIdx++);
+        rows.add(attrRow);
+    }
+    // Flatten children recursively
+    for (XmlNode child : element.getChildren()) {
+        if (child instanceof XmlElement childEl) {
+            flattenElement(childEl, 0, null, rows, true);
+        } else if (child instanceof XmlText text) {
+            if (text.getText() != null && !text.getText().isBlank()) {
+                rows.add(new FlatRow(RowType.TEXT, 0, text, null,
+                        "#text", text.getText().strip(), 0));
+            }
+        } else if (child instanceof XmlComment comment) {
+            rows.add(new FlatRow(RowType.COMMENT, 0, comment, null,
+                    null, comment.getText(), 0));
+        } else if (child instanceof XmlCData cdata) {
+            rows.add(new FlatRow(RowType.CDATA, 0, cdata, null,
+                    null, cdata.getText(), 0));
+        }
+    }
+    return rows;
+}
+```
+
+- [x] **Step 2: Verify build**
+
+Run: `./gradlew compileJava`
+Expected: BUILD SUCCESSFUL
+
+- [x] **Step 3: Commit**
+
+```bash
+git add src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/FlatRow.java
+git commit -m "feat: add FlatRow.flattenElement() for cell expansion"
+```
+
+---
+
+### Task 2: Add cell expansion state to RepeatingElementsTable.TableRow
+
+**Files:**
+- Modify: `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/RepeatingElementsTable.java`
+
+- [x] **Step 1: Add expansion fields and methods to TableRow**
+
+```java
+// In TableRow inner class:
+private final Set<String> expandedColumns = new HashSet<>();
+private final Map<String, List<FlatRow>> expandedCellRows = new LinkedHashMap<>();
+
+public boolean isColumnExpanded(String columnName) {
+    return expandedColumns.contains(columnName);
+}
+
+public void toggleColumnExpanded(String columnName) {
+    if (expandedColumns.contains(columnName)) {
+        expandedColumns.remove(columnName);
+        expandedCellRows.remove(columnName);
+    } else {
+        expandedColumns.add(columnName);
+        XmlElement child = complexChildren.get(columnName);
+        if (child != null) {
+            expandedCellRows.put(columnName, FlatRow.flattenElement(child));
+        }
+    }
+}
+
+public List<FlatRow> getExpandedCellRows(String columnName) {
+    return expandedCellRows.getOrDefault(columnName, List.of());
+}
+
+public Set<String> getExpandedColumns() {
+    return expandedColumns;
+}
+```
+
+- [x] **Step 2: Update calculateRowHeight() to return variable height**
+
+```java
+public double calculateRowHeight(TableRow row) {
+    double maxCellHeight = ROW_HEIGHT;
+    for (String colName : row.getExpandedColumns()) {
+        List<FlatRow> cellRows = row.getExpandedCellRows(colName);
+        double cellHeight = ROW_HEIGHT + cellRows.size() * ROW_HEIGHT;
+        maxCellHeight = Math.max(maxCellHeight, cellHeight);
+    }
+    return maxCellHeight;
+}
+```
+
+- [x] **Step 3: Update getHeight() to use variable row heights**
+
+The `calculateHeight()` method iterates rows and calls `calculateRowHeight(row)` for each, accumulating the total.
+
+- [x] **Step 4: Update getRowIndexAtY() and getRowY() for cumulative heights**
+
+Both methods iterate with `calculateRowHeight()` instead of dividing by fixed `ROW_HEIGHT`.
+
+- [x] **Step 5: Verify build and tests**
+
+Run: `./gradlew compileJava && ./gradlew test`
+Expected: BUILD SUCCESSFUL, all tests pass
+
+- [x] **Step 6: Commit**
+
+```bash
+git add src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/RepeatingElementsTable.java
+git commit -m "feat: add cell expansion state and variable row heights to RepeatingElementsTable"
+```
+
+---
+
+### Task 3: Render expanded cells and handle interaction in XmlCanvasView
+
+**Files:**
+- Modify: `src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java`
+
+- [x] **Step 1: Update renderInlineTable() for cumulative row positioning**
+
+Replace `dataY + r * ROW_HEIGHT` with cumulative `currentRowY` variable that uses `table.calculateRowHeight(row)`.
+
+- [x] **Step 2: Draw expand arrows for complex cells**
+
+Before drawing cell value, check `row.hasComplexChild(col.getName())`. Draw ▼ if expanded, ► if collapsed, using `gc.fillText()`.
+
+- [x] **Step 3: Render expanded cell sub-rows**
+
+After drawing cell summary, if `row.isColumnExpanded(colName)`:
+- Get `row.getExpandedCellRows(colName)`
+- Draw each FlatRow with: icon (`drawRowIcon()`), label (colored by type), value
+- Position below summary line at `subRowY` increments of `ROW_HEIGHT`
+- Apply depth-based indentation
+
+- [x] **Step 4: Handle click on cell expand arrow**
+
+In `handleTableClick()`, for single-clicks on data rows:
+- Check if click is within arrow zone (first 16px of complex cell)
+- If so, call `row.toggleColumnExpanded(col.getName())`
+- Trigger `recalculateVisibleRows()`, `updateScrollBars()`, `render()`
+
+- [x] **Step 5: Update getTableRowIndexAtScreenY() for variable heights**
+
+Iterate with cumulative `calculateRowHeight()` instead of fixed division.
+
+- [x] **Step 6: Update startEditingTableCell() for variable positioning**
+
+Calculate cell Y position with cumulative row heights for rows before the target.
+
+- [x] **Step 7: Verify build and tests**
+
+Run: `./gradlew compileJava && ./gradlew test`
+Expected: BUILD SUCCESSFUL, all tests pass
+
+- [x] **Step 8: Commit**
+
+```bash
+git add src/main/java/org/fxt/freexmltoolkit/controls/v2/xmleditor/view/XmlCanvasView.java
+git commit -m "feat: render expanded cells and handle expand interaction in grid view"
+```

docs/superpowers/specs/2026-03-26-grid-cell-expansion-design.md

@@ -0,0 +1,64 @@
+# Inline Expansion for Complex Table Cells
+
+**Date:** 2026-03-26
+**Status:** Approved
+
+## Summary
+
+In the RepeatingElementsTable (grid view), table cells containing complex XML elements (elements with children) currently show only a summary text. Users cannot see or interact with the child nodes. This spec adds inline expand/collapse to those cells, rendering children as flat rows within the cell.
+
+## Current Behavior
+
+A column like "Bond" that contains `<Bond><Issuer>ABC</Issuer><Coupon>5.0</Coupon></Bond>` shows only `"Issuer, Coupon"` (a summary of child element names). The children are invisible and not editable.
+
+## New Behavior
+
+### Expand Indicator
+
+- Cells with complex elements show a small expand arrow (►) to the left of the summary text.
+- Clicking the arrow expands the cell. The arrow becomes ▼.
+- Clicking again collapses back to the summary.
+
+### Expanded Cell Content
+
+When expanded, the cell grows vertically and shows the child nodes as flat rows using the same XMLSpy-style rendering:
+- `<>` icon + name + value for child elements
+- `=` icon + name + value for attributes of the complex element
+- `T` icon for text nodes
+- Indentation for nested levels
+- Recursive expansion: child elements with their own children can also be expanded.
+
+### Row Height
+
+- The table row height becomes the maximum of all cell heights in that row.
+- Non-expanded cells in the same row are top-aligned.
+- The total table height is recalculated when any cell expands/collapses.
+
+### Interaction
+
+- **Single click on arrow:** Toggle expand/collapse for that cell.
+- **Double-click on a value** in the expanded content: Start inline editing (same as in the tree view — uses Commands for undo/redo).
+- **Context menu** on expanded content: Same as regular tree view context menu.
+
+## Affected Files
+
+### RepeatingElementsTable.java
+- Re-add expand state tracking per cell: `TableRow.expandedColumns` (Set<String>) and `TableRow.isColumnExpanded(columnName)`/`toggleColumnExpanded(columnName)`.
+- Store flattened child rows per expanded cell: `TableRow.expandedCellRows` (Map<String, List<FlatRow>>).
+- `calculateRowHeight(TableRow)` returns dynamic height based on expanded cells.
+- `getHeight()` accounts for variable row heights.
+
+### XmlCanvasView.java
+- Render expanded cell content: iterate `FlatRow` list for the cell and draw each row with icon, indent, name, value.
+- Draw expand/collapse arrow in complex cells.
+- Hit-testing: detect clicks on cell expand arrows vs. cell content vs. expanded sub-rows.
+- Inline editing: `startEditingTableCell` must handle clicks on expanded sub-rows (delegate to `startEditingValue` for the sub-row's FlatRow).
+- Recalculate `rowYPositions` when cell expansion changes table height.
+
+### FlatRow.java
+- No changes needed. The existing `flatten()` method can be used to flatten a single `XmlElement` into rows for cell content. Add a convenience method: `static List<FlatRow> flattenElement(XmlElement element)`.
+
+## Performance
+
+- Expansion is lazy: child rows are only created when the cell is first expanded.
+- Cell rows are cached in `TableRow.expandedCellRows` and cleared on model changes.