v0.7.1: UI-overhaul, ribbon vervangen door de indeling van CAD/BIM-pakketten met elke functie op één plek: bovenbalk met menu Bestand (nieuw, openen, opslaan, exporteren, projectgegevens, kosten & tijden) · Beeld · Help, de ontwerpen als tabs en de knop Opslaan; links de structuur met inklapbare groepen (onthouden, groep met de selectie klapt vanzelf open); werkbalk boven de viewports met gereedschap (Selecteren V, Binnenwand W, Ruimte R, Inrichting I, opties van het gereedschap ernaast, Unit toevoegen) en weergave (één Lagen-menu met bouwfase voor 2D en 3D, Omgeving, Doorsnede X, Render, Lopen L, Rapport 4, 2D + 3D / 2D / 3D met 1/2/3); rechts het eigenschappenpaneel (Inspector: selectie met kruimelpad, of de woning met kerncijfers en inklapbare secties Gevel, Dak, Binnen, Verlichting, Elektra, Constructie); statusbalk met hint en meldingen; wand- en vloer/dak-editor in dezelfde indeling (paneel rechts met tab Resultaat, terug met ← Woning of Esc); sneltoetsenoverzicht (?), Ctrl+O, Ctrl+\ panelen verbergen; rapport als masonry; dubbele functies weg (lagenbalk, Beeld-tab en Weergave-filter, export en kosten op twee plekken, Snel nieuw); oude onderdelen gelijkgetrokken (dialoogknoppen, materiaalknoppen, chassis als schakelaar, eenheden); weergavelagen (ViewLayers) i.p.v. bouwfasen, elk los aan/uit; render-export met Blender-script voor de lampen; elektraleidingen boven een vals plafond en haaks binnen de units bij een L/T-vorm

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 23:16:43 +02:00
parent adb3c74f85
commit ab0dca9bb5
22 changed files with 1484 additions and 1027 deletions
@@ -0,0 +1,63 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// Eigenschappenpaneel rechts: eigenschappen van de selectie, of van de woning als er niets geselecteerd is.
+// Een sectie = { key, label, icon, groups() → [{ label, html }], wire(el) }; elke sectie krijgt een eigen element,
+// zodat wire() alleen de eigen knoppen koppelt.
+
+window.Inspector = (() => {
+  const icon = (n) => `<i class="bi bi-${n}" aria-hidden="true"></i>`;
+  const big = (label, iconName, attrs, cls) =>
+    `<button type="button" class="ins-btn ins-big${cls ? ' ' + cls : ''}" ${attrs || ''}>${icon(iconName)}<span>${label}</span></button>`;
+  const small = (label, iconName, attrs, cls) =>
+    `<button type="button" class="ins-btn${cls ? ' ' + cls : ''}" ${attrs || ''}>${icon(iconName)}<span>${label}</span></button>`;
+  const kv = (label, value, unit) =>
+    `<div class="ins-kv"><span>${label}</span><b>${value}${unit ? `<small>${unit}</small>` : ''}</b></div>`;
+
+  const PREF_KEY = 'tectum.inspector.open';
+  let open;
+  try { open = new Set(JSON.parse(localStorage.getItem(PREF_KEY) || 'null') || ['gevel']); } catch (e) { open = new Set(['gevel']); }
+  const saveOpen = () => { try { localStorage.setItem(PREF_KEY, JSON.stringify([...open])); } catch (e) { } };
+
+  // Een groepskop gelijk aan de sectienaam (bijv. Elektra › Elektra) vervalt.
+  const groupsHtml = (groups, secLabel) => groups.filter(Boolean).map(g =>
+    `<div class="ins-group${g.cls ? ' ' + g.cls : ''}">${g.label && g.label.toLowerCase() !== String(secLabel || '').toLowerCase() ? `<h3>${g.label}</h3>` : ''}<div class="ins-group-body">${g.html}</div></div>`).join('');
+
+  // view = { crumbs: [{ label, attrs }], title, icon, sub, top: html, sections: [...], collapsible, onBack }
+  function render(el, view) {
+    const scrollKey = view.title + '|' + (view.sub || '');
+    const keepScroll = el._insKey === scrollKey ? el.scrollTop : 0;
+    el._insKey = scrollKey;
+    el.innerHTML = `<div class="ins-head">
+        ${view.crumbs && view.crumbs.length ? `<div class="ins-crumbs">${view.crumbs.map(c => `<button type="button" class="ins-crumb" ${c.attrs || ''}>${c.label}</button>`).join(icon('chevron-right'))}${icon('chevron-right')}</div>` : ''}
+        <h2>${view.icon ? icon(view.icon) : ''}<span>${view.title}</span></h2>
+        ${view.sub ? `<div class="ins-sub">${view.sub}</div>` : ''}
+      </div>
+      ${view.top ? `<div class="ins-top">${view.top}</div>` : ''}
+      <div class="ins-sections"></div>`;
+    const host = el.querySelector('.ins-sections');
+    view.sections.filter(Boolean).forEach(sec => {
+      const node = document.createElement('section');
+      const collapsible = view.collapsible;
+      const isOpen = !collapsible || open.has(sec.key);
+      node.className = 'ins-section' + (collapsible ? ' ins-collapsible' : '') + (isOpen ? ' open' : '');
+      node.innerHTML = (collapsible ? `<button type="button" class="ins-section-head" aria-expanded="${isOpen}">${sec.icon ? icon(sec.icon) : ''}<span>${sec.label}</span>${icon('chevron-down')}</button>` : '') +
+        `<div class="ins-section-body">${groupsHtml(sec.groups ? sec.groups() : [], sec.label)}</div>`;
+      host.appendChild(node);
+      if (collapsible) node.querySelector('.ins-section-head').addEventListener('click', () => {
+        const now = !node.classList.contains('open');
+        node.classList.toggle('open', now);
+        node.querySelector('.ins-section-head').setAttribute('aria-expanded', now);
+        if (now) open.add(sec.key); else open.delete(sec.key);
+        saveOpen();
+      });
+      if (sec.wire) sec.wire(node);
+    });
+    el.scrollTop = keepScroll;
+  }
+
+  return { big, small, kv, render };
+})();