Luís Murta
f7dac370b4
Scaffold project structure with vite. src/ types.ts ← Node, Connection, ParseResult, PaletteEntry, BlockInfo, AppState parser.ts ← parsePuml() colors.ts ← PALETTE, guessColor() svg.ts ← makeBlock(), makeArrow(), makeLine() (pure SVG helpers) main.ts ← state, drawLevel(), updateNav(), render(), setBugData(), event wiring style.css ← all styles index.html ← shell + default PlantUML example in textarea package.json ← vite + typescript devDeps tsconfig.json ← strict mode, ESNext, bundler resolution
96 lines
2.9 KiB
HTML
96 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PlantUML → Isometric 3D Renderer</title>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>PlantUML → Isometric 3D Renderer</h1>
|
|
<p class="subtitle">Paste a PlantUML component diagram and click Render to generate an interactive isometric view.</p>
|
|
|
|
<div class="layout">
|
|
<div class="panel">
|
|
<div class="panel-label">PlantUML source</div>
|
|
<textarea id="puml" spellcheck="false">@startuml
|
|
component "ECU A" as A
|
|
component "ECU C" as C
|
|
|
|
component "ECU B" as B {
|
|
component "Connector A" as ConA
|
|
component "Adapter A" as AdpA
|
|
component "Connector C" as ConC
|
|
component "Adapter C" as AdpC
|
|
component "Logic" as L {
|
|
component "a" as La
|
|
component "b" as Lb
|
|
component "c" as Lc
|
|
La --> Lb
|
|
Lb --> Lc
|
|
}
|
|
ConA --> AdpA
|
|
ConC --> AdpC
|
|
AdpA --> L
|
|
AdpC --> L
|
|
}
|
|
|
|
A --> ConA
|
|
C --> ConC
|
|
@enduml</textarea>
|
|
|
|
<div class="btn-row">
|
|
<button id="btn-render" class="primary">Render →</button>
|
|
<button id="btn-reset">Reset example</button>
|
|
</div>
|
|
<div id="err"></div>
|
|
|
|
<div class="panel-label" style="margin-top:16px">Bug counts (JSON — alias: count)</div>
|
|
<textarea id="bugJson" spellcheck="false" rows="3"
|
|
placeholder='{"ConA":3,"AdpA":1,"L":7}'></textarea>
|
|
<div class="btn-row">
|
|
<button id="btn-apply-bugs" class="primary">Apply bugs</button>
|
|
<button id="btn-clear-bugs">Clear</button>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-swatch" style="background:var(--top-gray)"></div> ECU / top-level
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-swatch" style="background:var(--top-teal)"></div> Connector
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-swatch" style="background:var(--top-amber)"></div> Adapter
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-swatch" style="background:var(--top-purple)"></div> Logic
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-swatch" style="background:var(--top-coral)"></div> Sequence step
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint-box">
|
|
Color is inferred from the component label.<br>
|
|
Components with children are clickable — drill in to explore nested structure.
|
|
<br><br>
|
|
To connect your self-hosted PlantUML server, POST the source to
|
|
<code>/json</code> and feed the response AST into the renderer instead of the client-side parser.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-panel">
|
|
<div class="canvas-header">
|
|
<div id="nav"><span style="color:var(--txt3)">Overview</span></div>
|
|
</div>
|
|
<div id="canvas-wrap">
|
|
<svg id="iso" width="100%" viewBox="0 0 680 400"></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|