-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
224 lines (211 loc) · 14.1 KB
/
index.html
File metadata and controls
224 lines (211 loc) · 14.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree DP & Graph Editor</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="p-4 md:p-6">
<div id="importModal" class="modal-overlay">
<div class="modal">
<h3 class="font-bold text-lg mb-2">Import / Reset</h3>
<p class="text-xs mb-2" style="color:var(--muted)">Format A (edge list): Line 1 is <code>V E</code>, Line 2 is V weights, then E lines of edges (<code>u v w</code>).<br>Format B (parent array): Line 1 is <code>n</code>, Line 2 is n weights, Line 3 is <code>p2 p3 … pn</code> (parent of each node).</p>
<textarea id="importText" class="w-full" rows="6" placeholder="3 2\n1 2 3\n1 2 1\n2 3 1 \nAlso supports CF multi-tree format: T, then for each tree: n, weights, parent-array"></textarea>
<div class="flex justify-end gap-2 mt-3">
<button id="btnResetSave" class="btn px-3 py-1.5 rounded text-xs mr-auto" style="background: var(--danger); color: white;">Reset Save</button>
<button id="btnModalClose" class="btn px-3 py-1.5 rounded text-xs" style="background:var(--border)">Cancel</button>
<button id="btnModalImport" class="btn px-3 py-1.5 rounded text-xs" style="background:var(--accent); color:var(--bg)">Import</button>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto">
<header class="mb-4">
<h1 class="text-2xl md:text-3xl font-bold tracking-tight">Graph <span style="color: var(--accent);">Editor</span> & DP</h1>
</header>
<div class="grid lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 space-y-3">
<div class="p-3 rounded-lg flex flex-col gap-3" style="background: var(--card); border: 1px solid var(--border);">
<div class="flex flex-wrap gap-2 items-center justify-between">
<div class="flex gap-2">
<button id="btnAdd" class="mode-btn btn px-3 py-1.5 rounded text-xs font-medium">Add (A)</button>
<button id="btnConnect" class="mode-btn btn px-3 py-1.5 rounded text-xs font-medium">Connect (C)</button>
<button id="btnSelect" class="mode-btn btn px-3 py-1.5 rounded text-xs font-medium">Edit (S)</button>
</div>
<div class="flex gap-2">
<button id="btnUndo" class="btn text-xs px-2 py-1 rounded" style="background: var(--border); color: var(--fg);">Undo</button>
<button id="btnRedo" class="btn text-xs px-2 py-1 rounded" style="background: var(--border); color: var(--fg);">Redo</button>
<button id="btnOpenImport" class="btn text-xs px-2 py-1 rounded" style="background: var(--border); color: var(--fg);">Menu</button>
<button id="btnBeautify" class="btn text-xs px-2 py-1 rounded" style="background: var(--border); color: var(--fg);">Re-root</button>
</div>
</div>
<div class="flex flex-wrap gap-x-6 gap-y-2 items-center border-t pt-3" style="border-color: var(--border);">
<div class="flex gap-4">
<div id="tglTreeContainer" class="toggle-container"><div id="tglTree" class="toggle-switch active"></div><span>Tree</span></div>
<div id="tglDirectedContainer" class="toggle-container"><div id="tglDirected" class="toggle-switch active"></div><span>Directed</span></div>
<div id="tglShowEdgeWContainer" class="toggle-container"><div id="tglShowEdgeW" class="toggle-switch"></div><span>Edge W</span></div>
</div>
</div>
</div>
<div class="canvas-container bg-grid">
<canvas id="graphCanvas"></canvas>
</div>
<div class="p-3 rounded-lg" style="background: var(--card); border: 1px solid var(--border);">
<div class="text-xs font-semibold mb-2 opacity-70">Vertex Content</div>
<div id="displayOptionsContainer" class="flex flex-wrap gap-3"></div>
</div>
<div class="p-3 rounded-lg" style="background: var(--card); border: 1px solid var(--border);">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<h3 class="font-semibold text-sm">DP Formulas</h3>
<select id="dpExamples" class="text-xs py-1 px-2" style="font-family: 'Space Grotesk', sans-serif;">
<option value="">Examples...</option>
<!-- populated dynamically from EXAMPLES keys in init() -->
</select>
</div>
<div class="flex gap-2">
<button id="btnSaveFormula" class="btn text-xs px-2 py-1 rounded font-medium" style="background: var(--border); color: var(--text);" title="Save current formula">💾</button>
<button id="btnDeleteFormula" class="btn text-xs px-2 py-1 rounded font-medium" style="background: var(--border); color: var(--text);" title="Delete saved formula">🗑️</button>
<button id="btnRunDp" class="btn text-xs px-3 py-1 rounded font-medium" style="background: var(--accent); color: var(--bg);">Run (Ctrl+Enter)</button>
<label class="text-xs opacity-70 flex items-center gap-2" style="margin-left:8px;">
Key Mode
<select id="editorKeyMode" class="text-xs py-1 px-2" style="font-family: 'Space Grotesk', sans-serif;">
<option value="common">Common</option>
<option value="safe">Safe</option>
</select>
</label>
</div>
</div>
<div id="dpErrorBox" class="error-box hidden"></div>
<div id="dpWarning" class="hidden text-xs mb-2 p-2 rounded" style="background: rgba(255,170,0,0.2); color: var(--orange);">Warning: Tree Mode is disabled. DP requires a tree structure.</div>
<div class="flex items-center gap-2 mb-2">
<label class="text-xs opacity-60 whitespace-nowrap" for="dpParam">param =</label>
<input type="number" id="dpParam" value="0" class="text-xs w-32" style="font-family: 'JetBrains Mono', monospace;" title="Global parameter usable in formulas as 'param'. Also set automatically by bsearch().">
<span class="text-xs opacity-40">global constant usable in formulas</span>
</div>
<textarea id="dpCode" class="w-full text-xs" rows="8" placeholder="dp = val + sum(children, dp)" title="Press F to focus | Esc to unfocus | Ctrl+Enter to run"></textarea>
</div>
</div>
<div class="space-y-3">
<div class="flex border-b" style="border-color: var(--border);">
<button class="tab-btn active" data-tab="output">Output</button>
<button class="tab-btn" data-tab="data">Data</button>
<button class="tab-btn" data-tab="docs">Docs</button>
<button class="tab-btn" data-tab="trees">Trees</button>
</div>
<div id="tab-output" class="tab-content">
<div class="grid grid-cols-3 gap-2 mb-3">
<div class="text-center p-2 rounded" style="background: var(--card);">
<div class="text-xl font-bold mono" style="color: var(--accent);" id="statNodes">0</div>
<div class="text-xs opacity-60">Nodes</div>
</div>
<div class="text-center p-2 rounded" style="background: var(--card);">
<div class="text-xl font-bold mono" style="color: var(--accent);" id="statEdges">0</div>
<div class="text-xs opacity-60">Edges</div>
</div>
<div class="text-center p-2 rounded" style="background: var(--card);">
<div class="text-xl font-bold mono" style="color: var(--accent);" id="statRoot">-</div>
<div class="text-xs opacity-60">Root</div>
</div>
</div>
<div class="text-center p-1 rounded mt-1" style="background: var(--card); font-size:10px;">
<div id="statSpecial" class="mono" style="color:var(--orange);"> </div>
</div>
<div class="output-panel">
<div class="output-header flex justify-between items-center">
<span class="text-xs font-semibold">CP Format</span>
<button id="btnCopy" class="text-xs px-2 py-0.5 rounded" style="background: var(--accent-dim); color: var(--accent); cursor:pointer; border:none;">Copy</button>
</div>
<div class="output-content p-3"><pre id="textOutput" class="mono text-xs" style="color: var(--muted);">0 0</pre></div>
</div>
<div class="output-panel mt-2">
<div class="output-header flex justify-between items-center">
<span class="text-xs font-semibold">Excalidraw Export</span>
<div class="flex gap-2">
<button id="btnCopyExcalidraw" class="text-xs px-2 py-0.5 rounded" style="background: var(--accent-dim); color: var(--accent);">Copy Excalidraw Elements</button>
<button id="btnDownloadExcalidraw" class="text-xs px-2 py-0.5 rounded" style="background: var(--border); color: var(--fg);">Download .excalidraw.json</button>
</div>
</div>
<div class="output-content p-3 text-xs">
<label class="text-xs"><input type="checkbox" id="tglExportLabels" checked> Include node & edge weights</label>
</div>
</div>
<div class="output-panel mt-2" style="display: none;">
<div class="output-header text-xs font-semibold">Groups</div>
<div class="output-content p-3" id="groupsInfo" style="font-size:10px;color:var(--muted);"></div>
</div>
</div>
<div id="tab-data" class="tab-content hidden">
<div class="output-panel">
<div class="output-header text-xs font-semibold">Node Table</div>
<div class="output-content p-2" id="dataTable">Empty</div>
</div>
</div>
<div id="tab-docs" class="tab-content hidden">
<div class="output-panel">
<div class="output-header text-xs font-semibold">Documentation</div>
<div class="output-content p-3 text-xs" id="docsContent"></div>
</div>
</div>
<div id="tab-trees" class="tab-content hidden">
<div class="output-panel">
<div class="output-header text-xs font-semibold flex justify-between items-center">
<span>Trees</span>
<button id="btnAddTree" class="btn text-xs px-2 py-1 rounded font-medium" style="background: var(--accent); color: var(--bg);">+ Add Tree</button>
<label for="importNewTreeInput" class="btn text-xs px-2 py-1 rounded font-medium" style="background: var(--border); color: var(--fg); cursor:pointer;">Import Tree<input id="importNewTreeInput" type="file" accept=".json,.txt" style="display:none"></label>
</div>
<div class="output-content p-2" id="treesList">
<!-- Tree list will be rendered here -->
</div>
<div class="flex flex-wrap gap-2 mt-2">
<button id="btnBatchDP" class="btn text-xs px-3 py-1 rounded font-medium" style="background: var(--accent); color: var(--bg);">Run DP on Selected</button>
<button id="btnExportTree" class="btn text-xs px-3 py-1 rounded font-medium" style="background: var(--border); color: var(--fg);">Export Selected</button>
<label for="importTreeInput" class="btn text-xs px-3 py-1 rounded font-medium" style="background: var(--border); color: var(--fg); cursor:pointer;">Import to Selected<input id="importTreeInput" type="file" accept=".json,.txt" style="display:none"></label>
<span class="text-xs opacity-60">(Select trees below)</span>
</div>
<div id="batchDpResults" class="mt-2 text-xs"></div>
</div>
<div class="mt-2 text-xs opacity-60">
Switch between trees, rename, delete, or select multiple for batch DP evaluation.
</div>
</div>
<div id="selInfo" class="hidden p-3 rounded-lg" style="background: var(--card); border: 1px solid var(--border);">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-semibold">Selected: <span id="selName" class="mono" style="color: var(--accent);"></span></span>
<button id="btnDelSel" class="text-xs px-2 py-0.5 rounded" style="background: var(--danger); cursor:pointer; border:none; color:white;">Del</button>
</div>
<div id="weightsContainer"></div>
<div id="weightAddRow" class="hidden mt-1">
<button id="btnAddWeight" class="text-xs px-2 py-0.5 rounded" style="background: var(--card); cursor:pointer; border:1px solid var(--border); color:var(--fg);" onclick="addWeightToNode()">+ Weight</button>
</div>
<div id="selXYGroup" class="hidden mt-2">
<div class="flex gap-2">
<div class="flex-1">
<label class="block text-xs opacity-60 mb-1">X</label>
<input type="number" id="selX" class="w-full">
</div>
<div class="flex-1">
<label class="block text-xs opacity-60 mb-1">Y</label>
<input type="number" id="selY" class="w-full">
</div>
</div>
</div>
<div id="selDpVals" class="hidden mt-2 text-xs"></div>
</div>
</div>
</div>
</div>
<script src="dp-engine/dp-examples.js"></script>
<script src="dp-engine/dp-docs.js"></script>
<script src="dp-engine/dp-parser.js"></script>
<script src="dp-engine/dp-engine.js"></script>
<script src="lib/state.js"></script>
<script src="lib/graph.js"></script>
<script src="lib/render.js"></script>
<script src="lib/editor-shortcuts.js"></script>
<script src="lib/export-excalidraw.js"></script>
<script src="lib/events.js"></script>
</body>
</html>