From 30dd90233178cf9986f20f465fc0fb155b22cbe5 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 2 Jun 2026 08:47:07 +0000 Subject: [PATCH 01/20] Add 6 source-sync editing features to D2 editor - Delete Node: removes node declaration and all connected edges - Delete Edge: click edge to open menu, then delete - Rename Node: renames leaf segment in all references (works for both dot-notation and block-scope nodes) - Edit Edge Label: set or clear the label on any edge - Add Node: + button opens popup with name input and full shape picker - Change Shape: shape picker with lazy-loaded SVG previews of all 22 D2 shapes (callout through text, sorted alphabetically) Also: - Extracts parseD2Range/segVal/findMapKeyAt/buildEdgeSegLookup/ lineRangeInSrc from moveNode to module scope for reuse - Edges now open the action menu (with Edit Label + Delete) instead of just showing a key readout - CLAUDE.md: note CI + deploy wait before checking preview URL https://claude.ai/code/session_0188HqZ2PyajbSEGNhNmg9Tb --- CLAUDE.md | 3 + tools/d2-editor.html | 741 +++++++++++++++++++++++++++++++++++++++---- 2 files changed, 676 insertions(+), 68 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 432009f..674035d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,3 +12,6 @@ For example, PR #16 with `tools/d2-editor.html` is at: `https://tools.bobwhitelock.co.uk/pr-16/tools/d2-editor.html` Use this to inspect deployed code and debug issues when working on any tool. + +After pushing, wait for CI to pass, then wait a further ~1 minute for the deploy +to complete before loading the preview URL. diff --git a/tools/d2-editor.html b/tools/d2-editor.html index e826f1a..fb6cfc6 100644 --- a/tools/d2-editor.html +++ b/tools/d2-editor.html @@ -596,6 +596,49 @@ .d2-label-confirm:hover { background: #373e47; } .d2-label-confirm svg { width: 14px; height: 14px; } + /* Danger button (Delete) in action menu */ + .d2-action-menu button.d2-act-danger { color: #f85149; } + .d2-action-menu button.d2-act-danger:hover { background: #2a1a1a; border-color: #6e2222; } + + /* Shape picker popup */ + .d2-shape-picker { + position: fixed; z-index: 30; display: none; + background: #1f2330; border: 1px solid #30363d; border-radius: 8px; + padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.45); width: 332px; + } + .d2-shape-picker.show { display: block; } + .d2-shape-grid { + display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; + } + .d2-shape-btn { + display: flex; flex-direction: column; align-items: center; gap: 2px; + padding: 4px 2px; background: #2d333b; color: #c9d1d9; + border: 1px solid #444c56; border-radius: 6px; + font-size: 10px; cursor: pointer; line-height: 1.2; + text-align: center; overflow: hidden; + } + .d2-shape-btn:hover { background: #373e47; border-color: #8b949e; } + .d2-shape-btn.d2-shape-active { border-color: var(--accent); background: #1e3a2a; } + .d2-shape-btn svg { width: 54px; height: 38px; display: block; } + .d2-shape-btn svg * { stroke: #c9d1d9 !important; fill: none !important; } + .d2-shape-btn svg rect, .d2-shape-btn svg path[fill] { fill: #2d333b !important; } + .d2-shape-loading { color: #8b949e; font-size: 12px; padding: 12px; text-align: center; } + .d2-shape-placeholder { + width: 54px; height: 38px; display: flex; align-items: center; justify-content: center; + font-size: 9px; color: #8b949e; border: 1px dashed #444c56; border-radius: 4px; + } + + /* Add node popup */ + .d2-add-popup { + position: fixed; z-index: 30; display: none; + flex-direction: column; gap: 6px; + background: #1f2330; border: 1px solid #30363d; border-radius: 8px; + padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.45); width: 340px; + } + .d2-add-popup.show { display: flex; } + .d2-add-row { display: flex; gap: 4px; align-items: center; } + .d2-add-row .d2-label-input { flex: 1; min-width: 0; } + /* Status bar shown while picking a target */ .d2-action-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); @@ -1159,6 +1202,10 @@ +
+
@@ -1168,8 +1215,12 @@
- - + + + + + +
@@ -1358,6 +1409,47 @@
+ +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+
+
+ + +
+
+
+