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>

js/wall/wall-model.js

@@ -751,8 +751,8 @@ window.WallModel = (() => {
     function build3D(CONFIG, calcData, opts) {
       const { woodMaterial, spaanplaatMaterial, doekMaterial, cementplaatMaterial, battenMaterial } = opts.materials;
       const buitenMateriaal = opts.buitenMateriaal || 'vochtdoek';
-      const stage = BuildStages.clamp(opts.stage);
-      const show = (key) => BuildStages.shows(stage, key);
+      const layers = ViewLayers.normalize(opts.layers);
+      const show = (key) => layers[key];
       const spaanplaatVisible = opts.spaanplaatVisible !== false && show('beplating');
       const buitenVisible = opts.buitenVisible !== false;
       const cladding = opts.cladding || 'horizontaal';
@@ -1311,7 +1311,7 @@ window.WallModel = (() => {
         }
       }
 
-      if (show('gevel') && window.KozijnModel) {
+      if (show('kozijnen') && window.KozijnModel) {
         const sh = CONFIG.sheathingThick, half = CONFIG.studDepth / 2;
         const exterior = buitenMateriaal === 'vochtdoek' || buitenMateriaal === 'cementplaat';
         const place = exterior ? { zOut: half + sh, depth: KozijnModel.PROFILE.depth, exterior: true }
@@ -1384,6 +1384,7 @@ window.WallModel = (() => {
           }
         });
       }
+      if (!show('regelwerk')) ViewLayers.hideByMaterial(wallGroup3D, [woodMaterial]);
 
       return {
         group: wallGroup3D,

js/wall/wall.js

@@ -6,7 +6,10 @@
  */
 
 const WALL_TEMPLATE = `
-  <div id="app-container">
+  <div id="app-container" class="ed-app">
+   <div class="ed-main">
+    <div class="ed-toolbar" id="wall-toolbar"></div>
+    <div class="ed-views">
     <div id="left-column">
       <div id="pane-2d-container">
         <div class="pane-2d-sub pane-2d-primary" id="pane-2d-front">
@@ -24,8 +27,16 @@ const WALL_TEMPLATE = `
           </div>
         </div>
       </div>
+    </div>
+    <div id="right-column">
+      <div id="pane-3d">
+        <div class="pane-label">3D</div>
+      </div>
+    </div>
+    </div>
+   </div>
 
-      <div id="control-panel">
+      <div id="control-panel" class="ed-panel">
         <div class="io-toolbar">
           <input type="file" id="file-import-json" accept="application/json" style="display:none;">
           <span id="io-status" class="io-status"></span>
@@ -34,6 +45,7 @@ const WALL_TEMPLATE = `
           <button class="tab-btn active" data-tab="tab-wall"><i class="bi bi-rulers"></i> Opbouw</button>
           <button class="tab-btn" data-tab="tab-opening"><i class="bi bi-door-open"></i> Openingen</button>
           <button class="tab-btn" data-tab="tab-materials"><i class="bi bi-layers"></i> Materiaal</button>
+          <button class="tab-btn" data-tab="tab-specs"><i class="bi bi-clipboard-data"></i> Resultaat</button>
         </div>
 
         <!-- TAB 1: WAND -->
@@ -104,10 +116,6 @@ const WALL_TEMPLATE = `
                 <div><input type="number" id="inp-max-sp" value="480" step="10" min="150" max="1500"><span class="unit">mm</span></div>
               </div>
 
-              <div class="divider"></div>
-              <div class="result-row"><span>Verticale balken</span><span data-spec="vert-beams" class="highlight">-</span></div>
-              <div class="result-row"><span>Horizontale balken</span><span data-spec="horiz-beams" class="highlight">-</span></div>
-              <div class="result-row"><span>Dakhelling</span><span data-spec="roof-angle" class="highlight">-</span></div>
             </div>
           </div>
         </div>
@@ -138,17 +146,10 @@ const WALL_TEMPLATE = `
           </div>
         </div>
 
-      </div>
-    </div>
-
-    <div id="right-column">
-      <div id="pane-3d">
-        <div class="pane-label">3D</div>
-        <div class="toolbar-3d" id="wall-toolbar-3d"></div>
-      </div>
 
+        <div id="tab-specs" class="tab-content">
       <div id="specs-panel-3d">
-        <div class="controls-grid">
+        <div>
           <div>
             <div class="spec-section">
               <h1><i class="bi bi-columns-gap"></i> Balken</h1>
@@ -188,6 +189,7 @@ const WALL_TEMPLATE = `
       </div>
     </div>
   </div>
+</div>
 
   <div id="wall-project-overlay">
     <div id="wall-project-modal">
@@ -218,8 +220,8 @@ const WALL_TEMPLATE = `
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" id="wall-project-cancel" class="io-btn">Annuleren</button>
-        <button type="button" id="wall-project-save" class="material-toggle-btn active" style="flex:none; padding:6px 18px;">Opslaan</button>
+        <button type="button" id="wall-project-cancel" class="ui-btn">Annuleren</button>
+        <button type="button" id="wall-project-save" class="ui-btn ui-btn-primary">Opslaan</button>
       </div>
     </div>
   </div>
@@ -333,13 +335,8 @@ function mountWallEditor(container, callbacks) {
       updateAll();
     }
 
-    function toggleFullscreen3D() {
-      UI.cycle3D(document.getElementById('app-container'));
-      requestAnimationFrame(onWindowResize);
-    }
-
-    function toggleFullscreen2D() {
-      UI.toggle2D(document.getElementById('app-container'));
+    function setView(mode) {
+      UI.setView(document.getElementById('app-container'), mode);
       requestAnimationFrame(onWindowResize);
     }
 
@@ -1279,14 +1276,13 @@ function mountWallEditor(container, callbacks) {
 
     const wallMaterials = WallModel.createMaterials();
 
-    // Alleen knoppen met data-material/-cladding: de "Opslaan"-knop van Project eigenschappen heeft ook de klasse material-toggle-btn.
     let buitenMateriaal = 'vochtdoek';
     let cladding = 'horizontaal';
     let trasraam = null;
     let stone = null;
     let stuc = null;
     let rabatColor = null;
-    let stage = BuildStages.FINAL;
+    let layers = ViewLayers.all();
     function syncMaterialButtons() {
       document.querySelectorAll('.material-toggle-btn[data-material]').forEach(b => b.classList.toggle('active', b.dataset.material === buitenMateriaal));
       document.querySelectorAll('.material-toggle-btn[data-cladding]').forEach(b => b.classList.toggle('active', b.dataset.cladding === cladding));
@@ -1303,13 +1299,17 @@ function mountWallEditor(container, callbacks) {
 
     let spaanplaatVisible = true;
     let buitenVisible = true;
-    createViewFilter(document.getElementById('wall-toolbar-3d'), [
-      { key: 'binnen', label: 'Beplating binnenzijde' },
-      { key: 'buiten', label: 'Beplating buitenzijde' }
-    ], (v) => {
-      spaanplaatVisible = v.binnen;
-      buitenVisible = v.buiten;
-      update3DScene();
+    const toolbar = document.getElementById('wall-toolbar');
+    toolbar.innerHTML = `<div class="tb-group tb-tools">${UI.tb('Spiegelen', 'symmetry-vertical', 'data-wt="mirror" title="Horizontaal spiegelen (Shift+H)"')}</div>
+      <div class="tb-spacer"></div><div class="tb-group tb-view"></div>${UI.tbSep()}${UI.viewSeg('split')}`;
+    toolbar.querySelector('[data-wt="mirror"]').addEventListener('click', () => mirrorHorizontal());
+    toolbar.querySelectorAll('[data-view]').forEach(b => b.addEventListener('click', () => setView(b.dataset.view)));
+    const viewGroup = toolbar.querySelector('.tb-view');
+    ViewLayers.createMenu(viewGroup, {
+      layers, keys: ['regelwerk', 'beplating', 'doek', 'latwerk', 'gevel', 'kozijnen', 'afwerking'],
+      onChange: (l) => { layers = l; update3DScene(); },
+      extras: [{ key: 'binnen', label: 'Beplating binnenzijde' }, { key: 'buiten', label: 'Beplating buitenzijde' }],
+      onExtra: (v) => { spaanplaatVisible = v.binnen; buitenVisible = v.buiten; update3DScene(); }
     });
     let skyMode = Skybox.getMode();
     const skyEnv = Skybox.createEnvironment(scene);
@@ -1317,15 +1317,14 @@ function mountWallEditor(container, callbacks) {
       skyEnv.fitTo(wallGroup3D, 0);
       Skybox.apply(skyMode, { env: skyEnv, grid, controls, sun: dirLight, ambient, base: { ambient: 0.6, sun: 0.8 }, shadowRoot: wallGroup3D });
     };
-    Skybox.createToggle(document.getElementById('wall-toolbar-3d'), (m) => { skyMode = m; applySky(); });
-    BuildStages.createBar(pane3D, stage, (st) => { stage = st; update3DScene(); });
+    Skybox.createToggle(viewGroup, (m) => { skyMode = m; applySky(); });
 
     let lastWallStats = null;
 
     function update3DScene() {
       if (wallGroup3D) scene.remove(wallGroup3D);
       const result = WallModel.build3D(CONFIG, calcData, {
-        materials: wallMaterials, buitenMateriaal, cladding, trasraam, stone, stuc, rabatColor, spaanplaatVisible, buitenVisible, stage
+        materials: wallMaterials, buitenMateriaal, cladding, trasraam, stone, stuc, rabatColor, spaanplaatVisible, buitenVisible, layers
       });
       wallGroup3D = result.group;
       lastWallStats = result.stats;
@@ -1419,8 +1418,8 @@ function mountWallEditor(container, callbacks) {
       exportDesign,
       triggerImport,
       mirrorHorizontal,
-      toggleFullscreen3D,
-      toggleFullscreen2D,
+      setView,
+      viewState: () => ({ view: UI.viewOf(document.getElementById('app-container')) }),
       openProjectProperties,
       getStateJson: getPureState,
       loadStateJson: applyPureState