holder + scad: SCAD source editor on /holder + new /scad universal renderer

Phase 2 — SCAD editor on /holder ================================ Some adjustments need more control than the parameter form gives (e.g. tweaking the .scad logic itself). A collapsible CodeMirror-based editor now slides up from the bottom of the viewport when you click the "</> Source" button at the bottom-right. - holder.html / holder.css: editor panel, toggle button, Reset and Close buttons. CodeMirror 5 loaded from cdnjs (single CSS + JS pair, clike mode for syntax highlighting since OpenSCAD is C-like). - holder-app.js: lazy-initialises the editor on first show, fetches bundled source from /api/holder/source, tracks whether the editor content has been modified ("modified" tag in the panel title). When the editor is visible AND content differs from bundled, _doRender() switches from /api/holder/render -> /api/scad/render with {source, params}. Cell-count cap doesn't apply in that mode (the source may not even use the holder schema). Phase 3 — Universal OpenSCAD playground at /scad ================================================ A standalone page for rendering arbitrary OpenSCAD. Paste code, click Render (or Ctrl+Enter), see STL in the same Three.js viewer the holder uses. Useful for prototyping new generators before wiring them into a parameter form. - New page: static/scad.html + scad.css + js/scad-app.js. Reuses holder-viewer.js (the Three.js scene module is generic enough). - "Load example" populates a 6-hole rounded bracket so new users can verify the renderer works in two clicks. - Same progress UI (elapsed timer + indeterminate bar + Cancel via AbortController) as /holder. - Top nav now has Holder / Busbars / SCAD on every page. Backend (shared by phase 2 & 3) ================================ - holder.py: split _run_openscad() out of render_stl(). New render_source(source, params=None) writes the source to a temp file and renders it; enforces MAX_SOURCE_BYTES (default 512 KB) and RENDER_TIMEOUT but skips the cell-count cap. New bundled_source() returns the hex_cell.scad text for editor pre-population. - app.py: GET /api/holder/source returns the bundled .scad text. POST /api/scad/render takes {source, params?} and returns STL + X-Holder-Dimensions header. ValueError -> 400, RuntimeError -> 500. _stl_response() factored out so both render endpoints emit the same headers consistently.
2026-05-25 12:52:18 +03:00
parent 5bba0e3c4a
commit 676d976937
9 changed files with 470 additions and 29 deletions
@@ -165,3 +165,42 @@

 #fit-verdict.fit-ok    { color: #4ad97a; font-weight: 600; }
 #fit-verdict.fit-bad   { color: var(--danger, #d94a4a); font-weight: 600; }
+
+/* SCAD editor — slides up from the bottom of the viewport */
+.scad-toggle {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  font-size: 12px;
+  padding: 4px 10px;
+  z-index: 3;
+}
+.scad-panel {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 45%;
+  background: var(--bg, #11141a);
+  border-top: 1px solid var(--border, #2a2f3a);
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+}
+.scad-panel-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border, #2a2f3a);
+  font-size: 12px;
+}
+.scad-panel-title { flex: 1; color: var(--muted); }
+.scad-dirty { color: var(--accent, #4a9eff); font-weight: 600; }
+#scad-editor {
+  flex: 1;
+  overflow: hidden;
+  font-size: 12px;
+}
+#scad-editor .CodeMirror {
+  height: 100%;
+  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
+}
@@ -6,6 +6,9 @@
 <title>Hex Holder Designer</title>
 <link rel="stylesheet" href="styles.css" />
 <link rel="stylesheet" href="holder.css" />
+<!-- CodeMirror 5 for the SCAD source editor -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css" />

 <script type="importmap">
 {
@@ -23,6 +26,7 @@
  <nav class="topbar-nav">
    <a href="/holder" class="active">Holder</a>
    <a href="/">Busbars</a>
+    <a href="/scad">SCAD</a>
  </nav>

  <span id="status" class="topbar-status">— cells</span>
@@ -89,10 +93,27 @@
    <div class="viewport-overlay">
      <div id="hint-controls">left-drag: rotate · right-drag: pan · wheel: zoom</div>
    </div>
+
+    <!-- Collapsible SCAD source editor (slides up from the bottom of the viewport) -->
+    <div id="scad-panel" class="scad-panel" hidden>
+      <div class="scad-panel-bar">
+        <span class="scad-panel-title">SCAD source <span id="scad-dirty-tag" class="scad-dirty" hidden>· modified</span></span>
+        <button id="btn-scad-reset" type="button" title="Discard edits and reload bundled hex_cell.scad">Reset</button>
+        <button id="btn-scad-close" type="button" title="Hide the editor (changes kept until reload)">Close</button>
+      </div>
+      <div id="scad-editor"></div>
+    </div>
+
+    <button id="btn-scad-toggle" class="scad-toggle" type="button"
+            title="Show / hide the bundled SCAD source. When edits are present, renders use your source instead of the bundled file.">
+      &lt;/&gt; Source
+    </button>
  </section>
 </main>

 <script src="js/api.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/clike/clike.min.js"></script>
 <script type="module" src="js/holder-viewer.js"></script>
 <script type="module" src="js/holder-app.js"></script>
 </body>
@@ -13,6 +13,7 @@
  <nav class="topbar-nav">
    <a href="/holder">Holder</a>
    <a href="/" class="active">Busbars</a>
+    <a href="/scad">SCAD</a>
  </nav>

  <div class="project-bar">
@@ -23,6 +23,9 @@ const state = {
  dimensions: null,  // last ECHO dims dict from X-Holder-Dimensions
  maxBox: null,      // {w, d, h} of assembled-battery bounding box
  enclosure: null,   // {w, d, h} of user-defined case (or null)
+  scadEditor: null,    // CodeMirror instance (lazy-initialised on first show)
+  bundledSource: null, // text fetched from /api/holder/source
+  scadVisible: false,
 };

 const COLOR_MAX_BOX  = 0x4a9eff;  // blue
@@ -209,10 +212,16 @@ async function _doRender() {
  }, 100);

  try {
-    const res = await fetch("/api/holder/render", {
+    const useCustomSource = state.scadVisible && state.scadEditor &&
+                            state.scadEditor.getValue() !== state.bundledSource;
+    const url  = useCustomSource ? "/api/scad/render"   : "/api/holder/render";
+    const body = useCustomSource
+      ? { source: state.scadEditor.getValue(), params: state.params }
+      : { params: state.params };
+    const res = await fetch(url, {
      method: "POST",
      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ params: state.params }),
+      body: JSON.stringify(body),
      signal: state.abortCtrl.signal,
    });
    if (!res.ok) {
@@ -348,6 +357,59 @@ function _updateFitCheck() {
  }
 }

+// ----- SCAD editor ----------------------------------------------------------
+
+async function _ensureBundledSource() {
+  if (state.bundledSource !== null) return;
+  const r = await fetch("/api/holder/source");
+  if (!r.ok) throw new Error(`source fetch failed: ${r.statusText}`);
+  state.bundledSource = await r.text();
+}
+
+function _updateScadDirtyTag() {
+  if (!state.scadEditor) return;
+  const dirty = state.scadEditor.getValue() !== state.bundledSource;
+  $("scad-dirty-tag").hidden = !dirty;
+}
+
+async function _showScadEditor() {
+  await _ensureBundledSource();
+  $("scad-panel").hidden = false;
+  state.scadVisible = true;
+  if (!state.scadEditor) {
+    state.scadEditor = window.CodeMirror($("scad-editor"), {
+      value: state.bundledSource,
+      mode: "text/x-csrc",      // closest built-in mode for OpenSCAD
+      theme: "dracula",
+      lineNumbers: true,
+      indentUnit: 4,
+      tabSize: 4,
+      lineWrapping: false,
+      viewportMargin: Infinity, // render whole document so CM fills the panel
+    });
+    state.scadEditor.on("change", _updateScadDirtyTag);
+  } else {
+    state.scadEditor.refresh();
+  }
+  _updateScadDirtyTag();
+}
+
+function _hideScadEditor() {
+  $("scad-panel").hidden = true;
+  state.scadVisible = false;
+}
+
+$("btn-scad-toggle").addEventListener("click", () => {
+  if (state.scadVisible) _hideScadEditor();
+  else _showScadEditor().catch((e) => alert("Couldn't load SCAD: " + e.message));
+});
+$("btn-scad-close").addEventListener("click", _hideScadEditor);
+$("btn-scad-reset").addEventListener("click", () => {
+  if (!state.scadEditor || state.bundledSource == null) return;
+  state.scadEditor.setValue(state.bundledSource);
+  _updateScadDirtyTag();
+});
+
 // ----- buttons --------------------------------------------------------------

 $("show-max-box").addEventListener("change", _updateFitCheck);
@@ -0,0 +1,139 @@
+/* scad-app.js — controller for the /scad universal OpenSCAD playground.
+ *
+ * Reuses the same Three.js viewer module (holder-viewer.js) and the same
+ * /api/scad/render backend endpoint that the holder editor uses.
+ */
+
+const $ = (id) => document.getElementById(id);
+
+const state = {
+  editor: null,
+  rendering: false,
+  abortCtrl: null,
+  elapsedTimer: null,
+  lastBlob: null,
+  rendererReady: false,
+};
+
+const EXAMPLE_SOURCE = `// Tiny example to sanity-check the renderer.
+// Click Render. Then start editing.
+
+\$fn = 80;
+
+difference() {
+  // Outer rounded box
+  hull() {
+    for (x = [-20, 20], y = [-12, 12])
+      translate([x, y, 0]) cylinder(h = 8, r = 4);
+  }
+  // Six holes
+  for (i = [-2 : 2])
+    translate([i * 8, 0, -1]) cylinder(h = 10, d = 3);
+}
+`;
+
+function _whenViewerReady(cb) {
+  if (window.HolderViewer) { cb(); return; }
+  let tries = 0;
+  const t = setInterval(() => {
+    if (window.HolderViewer) { clearInterval(t); cb(); }
+    else if (++tries > 50)   { clearInterval(t); console.error("HolderViewer never loaded"); }
+  }, 60);
+}
+
+function _initEditor(initialValue) {
+  state.editor = window.CodeMirror($("scad-editor"), {
+    value: initialValue,
+    mode: "text/x-csrc",
+    theme: "dracula",
+    lineNumbers: true,
+    indentUnit: 4,
+    tabSize: 4,
+    lineWrapping: false,
+    viewportMargin: Infinity,
+  });
+}
+
+function _showProgress(show) {
+  $("render-progress").hidden = !show;
+  $("btn-render").hidden = show;
+  $("btn-cancel").hidden = !show;
+}
+
+async function _doRender() {
+  if (state.rendering || !state.editor) return;
+  const source = state.editor.getValue().trim();
+  if (!source) {
+    $("render-status").textContent = "✗ source is empty";
+    return;
+  }
+  state.rendering = true;
+  state.abortCtrl = new AbortController();
+  $("render-status").textContent = "rendering…";
+  $("warning").textContent = "";
+  _showProgress(true);
+
+  const t0 = performance.now();
+  state.elapsedTimer = setInterval(() => {
+    $("render-elapsed").textContent = ((performance.now() - t0) / 1000).toFixed(1) + "s";
+  }, 100);
+
+  try {
+    const res = await fetch("/api/scad/render", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ source }),
+      signal: state.abortCtrl.signal,
+    });
+    if (!res.ok) {
+      let msg = res.statusText;
+      try { msg = (await res.json()).error || msg; } catch {}
+      throw new Error(msg);
+    }
+    state.lastBlob = await res.blob();
+    const buf = await state.lastBlob.arrayBuffer();
+    window.HolderViewer.loadSTL(buf);
+    const dt = ((performance.now() - t0) / 1000).toFixed(1);
+    $("render-status").textContent =
+      `✓ rendered in ${dt}s · ${(state.lastBlob.size/1024).toFixed(0)} kB`;
+  } catch (e) {
+    if (e.name === "AbortError") $("render-status").textContent = "✗ cancelled";
+    else                          $("render-status").textContent = `✗ ${e.message}`;
+  } finally {
+    state.rendering = false;
+    state.abortCtrl = null;
+    clearInterval(state.elapsedTimer);
+    _showProgress(false);
+  }
+}
+
+$("btn-render").addEventListener("click", _doRender);
+$("btn-cancel").addEventListener("click", () => state.abortCtrl?.abort());
+$("btn-load-example").addEventListener("click", () => {
+  if (state.editor) state.editor.setValue(EXAMPLE_SOURCE);
+});
+
+$("btn-download-stl").addEventListener("click", () => {
+  if (!state.lastBlob) { alert("Nothing rendered yet."); return; }
+  const url = URL.createObjectURL(state.lastBlob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "rendered.stl";
+  document.body.appendChild(a); a.click();
+  setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 100);
+});
+
+// Ctrl+Enter from inside the editor triggers Render.
+document.addEventListener("keydown", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+    e.preventDefault();
+    _doRender();
+  }
+});
+
+// Bootstrap: viewer + editor with an empty buffer (or example).
+_whenViewerReady(() => {
+  window.HolderViewer.init($("viewer3d"));
+  state.rendererReady = true;
+  _initEditor(EXAMPLE_SOURCE);
+});
@@ -0,0 +1,37 @@
+/* OpenSCAD playground — wide left pane for code, viewer on the right. */
+
+.scad-main {
+  display: flex;
+  height: calc(100vh - 50px);
+}
+.scad-left {
+  width: 50%;
+  min-width: 320px;
+  border-right: 1px solid var(--border, #2a2f3a);
+  display: flex;
+  flex-direction: column;
+}
+.scad-left .panel {
+  border-bottom: 1px solid var(--border, #2a2f3a);
+  padding: 8px 12px;
+}
+.scad-left .panel h2 {
+  font-size: 11px;
+  color: var(--muted);
+  text-transform: uppercase;
+  margin: 0 0 6px;
+  letter-spacing: 0.05em;
+}
+
+#scad-editor {
+  flex: 1;
+  min-height: 250px;
+  border: 1px solid var(--border, #2a2f3a);
+  border-radius: 3px;
+  overflow: hidden;
+  font-size: 12px;
+}
+#scad-editor .CodeMirror {
+  height: 100%;
+  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
+}
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>OpenSCAD playground</title>
+<link rel="stylesheet" href="styles.css" />
+<link rel="stylesheet" href="holder.css" />
+<link rel="stylesheet" href="scad.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css" />
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
+  }
+}
+</script>
+</head>
+<body>
+<header class="topbar">
+  <h1>OpenSCAD playground</h1>
+
+  <nav class="topbar-nav">
+    <a href="/holder">Holder</a>
+    <a href="/">Busbars</a>
+    <a href="/scad" class="active">SCAD</a>
+  </nav>
+
+  <span id="status" class="topbar-status">paste OpenSCAD code →</span>
+
+  <div class="actions">
+    <button id="btn-render" class="primary" title="Render the SCAD source as STL">Render</button>
+    <button id="btn-cancel" title="Cancel running render" hidden>Cancel</button>
+    <button id="btn-download-stl" title="Download the rendered STL">Download STL</button>
+    <span class="sep"></span>
+    <button id="btn-load-example" title="Load a small example to verify the renderer works">Load example</button>
+  </div>
+</header>
+
+<main class="scad-main">
+  <aside class="left scad-left">
+    <section class="panel" style="flex:1; display:flex; flex-direction:column;">
+      <h2>Source</h2>
+      <div id="scad-editor" style="flex:1;"></div>
+    </section>
+
+    <section class="panel">
+      <h2>Status</h2>
+      <p class="hint" id="render-status">idle</p>
+      <div id="render-progress" class="render-progress" hidden>
+        <div class="render-progress-bar"><div class="render-progress-fill"></div></div>
+        <span id="render-elapsed" class="render-elapsed">0.0s</span>
+      </div>
+      <p class="hint" id="warning"></p>
+    </section>
+  </aside>
+
+  <section class="right">
+    <div id="viewer3d" class="viewer3d"></div>
+    <div class="viewport-overlay">
+      <div id="hint-controls">left-drag: rotate · right-drag: pan · wheel: zoom</div>
+    </div>
+  </section>
+</main>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/clike/clike.min.js"></script>
+<script type="module" src="js/holder-viewer.js"></script>
+<script type="module" src="js/scad-app.js"></script>
+</body>
+</html>