Op het vochtdoek komt een kruislat van 20×30 mm, 400 mm h.o.h. in beide richtingen. De bovenste lat staat haaks op de gevelbekleding.
3D PERSPECTIEF
Balken & Dak
Verticale balken:-
Horizontale balken:-
Dakhelling:-
Houtwerk
Volume hout:-
Gewicht hout:-
Inkoop balken:-
Snijverlies:-
Spaanplaat (binnenzijde)
Oppervlak:-
Volume:-
Gewicht:-
Buitenzijde (Vochtdoek)
Oppervlak:-
Volume:-
Gewicht:-
Latwerk 20x30 (kruislat):-
Isolatie & totaal
Inhoud leegtes:-
Totaal gewicht wand:-
Project eigenschappen
`;
function mountWallEditor(container, callbacks) {
const onSaved = callbacks && callbacks.onSaved;
container.innerHTML = WALL_TEMPLATE;
// Binnen een unit volgt de wandbreedte uit de vloer (zie unit/unit.js);
// callbacks.lockWidth is dan de uitleg-tekst voor de tooltip.
if (callbacks && callbacks.lockWidth) {
const widthInput = document.getElementById('inp-wall-w');
widthInput.disabled = true;
widthInput.title = callbacks.lockWidth;
}
// Binnen een woning is de richting van de gevelbekleding (voorlopig) globaal.
const lockCladding = callbacks && callbacks.lockCladding;
// Binnen een woning is de h.o.h. globaal (woning-instellingen), niet per wand.
if (callbacks && callbacks.lockSpacing) {
['inp-min-sp', 'inp-max-sp'].forEach(id => {
const el = document.getElementById(id);
el.disabled = true;
el.title = callbacks.lockSpacing;
});
}
// Binnen een woning: delen van de wand die op een naad met een andere unit
// vallen (en dus vervallen), als [vanaf-links, tot] in mm.
const seamCuts = (callbacks && callbacks.seamCuts) || [];
// Binnen een woning: gevellampen op deze wand ({ u vanaf links, y }), zie LightingModel.
const lampMarks = (callbacks && callbacks.lamps) || [];
// ============================================================
// STATE
// ============================================================
// Dichtheden/gewichten: zie WallModel (wall/wall-model.js).
let CONFIG = {};
let calcData = { fullStuds: [], jackStuds: [] };
let wallGroup3D = null;
let lastBaseHeight = 2400;
// Elke opening: { id, w, h, y, anchor: 'left'|'middle'|'right', offset }
// 'offset' betekent afhankelijk van anchor:
// left -> afstand vanaf linker wandrand tot linkerkant opening
// right -> afstand vanaf rechter wandrand tot rechterkant opening
// middle -> verschuiving t.o.v. het midden (0 = gecentreerd, + = naar rechts)
let openings = [
{ id: 1, type: 'raam', w: 1200, h: 1200, y: 600, anchor: 'middle', offset: 0 }
];
let openingIdCounter = 2;
// ------------------------------------------------------------
// Interactieve selectie/verslepen van openingen in het vooraanzicht
// (nu het primaire aanzicht). Snap op 50mm, net als de stapgrootte van
// de invoervelden. N/Z-handles wijzigen alleen de hoogte, O/W-handles
// alleen de breedte — precies zoals bij de meeste 2D-tekentools.
// ------------------------------------------------------------
let selectedOpeningId = null;
let dragInfo = null; // { type:'move'|'resize', handle, openingId, startMouseX, startMouseY, startLocalX, startY, startW, startH }
let frontView = { scale: 1, centerX: 0, floorY: 0 }; // bijgewerkt door draw2DFront()
let frontOpeningRects = []; // hit-test data, bijgewerkt door draw2DFront()
let frontHandleRects = []; // idem, alleen voor de geselecteerde opening
function snap50(mm) { return Math.round(mm / 50) * 50; }
// Zet offset (en evt. breedte) zodat de opening's linkerrand op
// `leftLocalX` komt te liggen met breedte `w`, ongeacht welk ankertype
// actief is — dit is de kern die verslepen/resizen mogelijk maakt zonder
// dat het ankertype zelf hoeft te veranderen.
function applyOpeningPosition(op, leftLocalX, w, wallWidth) {
if (op.anchor === 'right') op.offset = wallWidth - leftLocalX - w;
else if (op.anchor === 'middle') op.offset = leftLocalX - (wallWidth - w) / 2;
else op.offset = leftLocalX; // 'left'
op.w = w;
}
function syncOpeningCardInputs(op) {
const card = document.querySelector(`.opening-card[data-opening-id="${op.id}"]`);
if (!card) return;
['w', 'h', 'y', 'offset'].forEach(field => {
const input = card.querySelector(`input[data-field="${field}"]`);
if (input && document.activeElement !== input) input.value = Math.round(op[field]);
});
}
function highlightSelectedCard() {
document.querySelectorAll('.opening-card').forEach(card => {
const id = parseInt(card.dataset.openingId, 10);
card.classList.toggle('opening-selected', id === selectedOpeningId);
});
}
function switchTab(tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(ct => ct.classList.remove('active'));
document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.add('active');
document.getElementById(tabId).classList.add('active');
}
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => switchTab(btn.dataset.tab));
});
// ============================================================
// OPENINGEN: UI (lijst met kaarten, ankerkeuze, toevoegen/verwijderen)
// ============================================================
function anchorOffsetLabel(anchor) {
if (anchor === 'right') return 'Afstand vanaf rechts:';
if (anchor === 'middle') return 'Verschuiving t.o.v. midden:';
return 'Afstand vanaf links:';
}
function addOpening() {
const n = openings.length;
const preset = WallModel.OPENING_TYPES.raam;
openings.push({
id: openingIdCounter++,
type: 'raam',
w: preset.w,
h: preset.h,
y: preset.y,
anchor: 'left',
offset: 300 + n * 1400
});
renderOpeningsList();
updateAll();
}
function toggleFullscreen3D() {
const el = document.getElementById('app-container');
el.classList.remove('fullscreen-2d');
el.classList.toggle('fullscreen-3d');
requestAnimationFrame(onWindowResize);
}
function toggleFullscreen2D() {
const el = document.getElementById('app-container');
el.classList.remove('fullscreen-3d');
el.classList.toggle('fullscreen-2d');
requestAnimationFrame(onWindowResize);
}
const PROJECT_PROP_IDS = ['inp-proj-naam', 'inp-proj-plaats', 'inp-proj-straat', 'inp-proj-nummer',
'inp-proj-tekenaar', 'inp-proj-titel', 'inp-proj-element', 'inp-proj-opmerking'];
let projectPropsSnapshot = null;
function openProjectProperties() {
projectPropsSnapshot = {};
PROJECT_PROP_IDS.forEach(id => { projectPropsSnapshot[id] = document.getElementById(id).value; });
document.getElementById('wall-project-overlay').classList.add('open');
}
function closeProjectProperties() {
document.getElementById('wall-project-overlay').classList.remove('open');
}
document.getElementById('wall-project-save').addEventListener('click', closeProjectProperties);
document.getElementById('wall-project-cancel').addEventListener('click', () => {
if (projectPropsSnapshot) PROJECT_PROP_IDS.forEach(id => { document.getElementById(id).value = projectPropsSnapshot[id]; });
closeProjectProperties();
});
document.getElementById('wall-project-close-x').addEventListener('click', () => {
if (projectPropsSnapshot) PROJECT_PROP_IDS.forEach(id => { document.getElementById(id).value = projectPropsSnapshot[id]; });
closeProjectProperties();
});
document.getElementById('wall-project-overlay').addEventListener('click', (e) => {
if (e.target.id === 'wall-project-overlay') {
if (projectPropsSnapshot) PROJECT_PROP_IDS.forEach(id => { document.getElementById(id).value = projectPropsSnapshot[id]; });
closeProjectProperties();
}
});
function removeOpening(id) {
openings = openings.filter(o => o.id !== id);
if (selectedOpeningId === id) selectedOpeningId = null;
renderOpeningsList();
updateAll();
}
// Horizontaal spiegelen (Bewerken-menu): wisselt links/rechts om. De
// hoogte-links/-rechts worden verwisseld (de schuine kant "klapt om"),
// en elke opening wordt zo herankerd dat 'ie fysiek op dezelfde plek
// blijft t.o.v. zijn (nu omgewisselde) referentierand:
// - anchor 'left' <-> 'right', offset ONGEWIJZIGD (het is en blijft
// een afstand-tot-een-rand, alleen de rand zelf wisselt)
// - anchor 'middle': offset wordt genegeerd (spiegelbeeld t.o.v. midden)
// Verticaal spiegelen is bewust niet geïmplementeerd: een wand mag aan de
// onderzijde niet scheef worden, dus dat menu-item blijft permanent
// disabled (zie index.html/app.js).
function mirrorHorizontal() {
const hLeftInput = document.getElementById('inp-wall-h-left');
const hRightInput = document.getElementById('inp-wall-h-right');
const tmp = hLeftInput.value;
hLeftInput.value = hRightInput.value;
hRightInput.value = tmp;
openings = openings.map(o => {
if (o.anchor === 'left') return { ...o, anchor: 'right' };
if (o.anchor === 'right') return { ...o, anchor: 'left' };
if (o.anchor === 'middle') return { ...o, offset: -o.offset };
return o;
});
renderOpeningsList();
updateAll();
setIoStatus('Horizontaal gespiegeld.', 'ok');
}
function renderOpeningsList() {
const list = document.getElementById('openings-list');
list.innerHTML = openings.map(op => `