lejayandCursor
30921aade6
Ship configurator updates with catalog DB included for server deploy. Co-authored-by: Cursor <[email protected]>
3345 lines
130 KiB
React
3345 lines
130 KiB
React
import { useRef, Suspense, useMemo, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
|
||
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
||
import { OrbitControls, Html, Edges } from '@react-three/drei';
|
||
import * as THREE from 'three';
|
||
import Room3D, { calculateWardrobeTransform } from './Room3D';
|
||
import WardrobeElement from './WardrobeElement';
|
||
import Icon from './ui/Icon';
|
||
import styles from './WardrobePreview.module.css';
|
||
import {
|
||
GROOVE,
|
||
PANEL_M,
|
||
PLINTH,
|
||
getAxiloPlinthPanelHeightMm,
|
||
getAxiloPlinthReturnLengthMm,
|
||
getAxiloPlinthFrontSideDeductionMm,
|
||
hasSidePlinthReturn,
|
||
getDoorHingeSide,
|
||
DRAWER_REINFORCEMENT,
|
||
drawerStackHeightMm,
|
||
drawerNicheHeightsMm,
|
||
HORIZONTAL_SPAN_DOOR_MODES,
|
||
resolveHorizontalSpan,
|
||
getSeparatorVerticalSegments,
|
||
validateHorizontalSpans,
|
||
usesBlockConstruction,
|
||
columnUsesBlockConstruction,
|
||
horizontalConstructionRuns,
|
||
BLOCK_ASSEMBLY
|
||
} from '@shared/manufacturing.js';
|
||
import { shelfCenterYsMeters, minShelvesForStructuralHeight, minShelvesForColumn, moduleStackInfo, moduleBlockHeightsMm, moduleBlockDoors, moduleHangingZoneMm, resolveShelfPositionsMm, system32ShelfPositionsMm, STRUCTURAL_WINDOW_HALF_MM, DIMENSION_RANGES } from '../constants/wardrobe';
|
||
|
||
const SCALE = 1 / 1000;
|
||
/** Three-quarter from the front: facade stays readable, side depth still shows. */
|
||
const DEFAULT_VIEW_YAW = Math.PI / 8;
|
||
/** Camera rise above the look-at point, before the direction is normalized. */
|
||
const DEFAULT_VIEW_ELEV = 0.22;
|
||
|
||
function defaultViewDirection() {
|
||
return new THREE.Vector3(
|
||
Math.sin(DEFAULT_VIEW_YAW),
|
||
DEFAULT_VIEW_ELEV,
|
||
Math.cos(DEFAULT_VIEW_YAW),
|
||
).normalize();
|
||
}
|
||
|
||
function carcassBox(totalWidthMm, heightMm, depthMm) {
|
||
return {
|
||
w: (totalWidthMm || 2400) * SCALE,
|
||
h: (heightMm || 2400) * SCALE,
|
||
d: (depthMm || 600) * SCALE,
|
||
};
|
||
}
|
||
|
||
/** Camera-to-target distance that keeps the carcass inside the frame. */
|
||
function distanceToFitCarcass(box, targetY, dir, fovDeg, aspect) {
|
||
const back = dir.clone().normalize();
|
||
const xAxis = new THREE.Vector3().crossVectors(new THREE.Vector3(0, 1, 0), back).normalize();
|
||
const yAxis = new THREE.Vector3().crossVectors(back, xAxis).normalize();
|
||
const tanV = Math.tan(THREE.MathUtils.degToRad(fovDeg) / 2) * 0.86;
|
||
const tanH = tanV * Math.max(0.2, aspect || 1);
|
||
let need = 0;
|
||
const p = new THREE.Vector3();
|
||
for (const sx of [-1, 1]) {
|
||
for (const sy of [0, 1]) {
|
||
for (const sz of [-1, 1]) {
|
||
p.set(sx * box.w / 2, sy * box.h - targetY, sz * box.d / 2);
|
||
const cz = p.dot(back);
|
||
need = Math.max(need, cz + Math.abs(p.dot(xAxis)) / tanH, cz + Math.abs(p.dot(yAxis)) / tanV);
|
||
}
|
||
}
|
||
}
|
||
return Math.max(0.8, need);
|
||
}
|
||
|
||
function defaultCameraPosition({ roomConfig, totalWidthMm, heightMm, depthMm, aspect = 1.6 }) {
|
||
if (roomConfig) {
|
||
const roomSize = Math.max(roomConfig.width, roomConfig.length);
|
||
return [roomSize * 0.8, roomSize * 0.5, roomSize * 0.8];
|
||
}
|
||
const box = carcassBox(totalWidthMm, heightMm, depthMm);
|
||
const targetY = box.h * 0.5;
|
||
const dir = defaultViewDirection();
|
||
const dist = distanceToFitCarcass(box, targetY, dir, 45, aspect);
|
||
return [dir.x * dist, targetY + dir.y * dist, dir.z * dist];
|
||
}
|
||
const PANEL_THICKNESS = PANEL_M.structure; // 0.019 m (19 mm)
|
||
const BACK_PANEL_THICKNESS = PANEL_M.back; // 0.008 m (8 mm)
|
||
const REINFORCEMENT_THICKNESS = PANEL_M.reinforcement; // 0.016 m (16 mm)
|
||
const REINFORCEMENT_WIDTH = PANEL_M.reinforcementWidth; // 0.100 m (100 mm)
|
||
/** Centre du dos sur l'axe de la rainure, mesuré depuis le chant arrière de la caisse. */
|
||
const BACK_PANEL_AXIS_FROM_REAR_M = GROOVE.back.axisFromPanelEdge * SCALE;
|
||
/** Partie cachée du dos engagée dans chaque rainure périphérique. */
|
||
const BACK_PANEL_GROOVE_INSERT_M = GROOVE.back.depth * SCALE;
|
||
const DIMENSION_RULES = {
|
||
widthMm: DIMENSION_RANGES.widthMm,
|
||
heightMm: DIMENSION_RANGES.heightMm,
|
||
depthMm: DIMENSION_RANGES.depthMm,
|
||
};
|
||
|
||
/**
|
||
* Jeu de façade (reveal) par côté, en mètres. 1.5 mm de chaque côté en hauteur
|
||
* et en largeur → 3 mm de jeu total entre façades adjacentes (portes et faces de tiroirs).
|
||
*/
|
||
const FACADE_REVEAL_MM = 1.5;
|
||
const FACADE_REVEAL_M = FACADE_REVEAL_MM * SCALE;
|
||
/** Tiny embed so coplanar carcass faces don't leak the background at 90° junctions. */
|
||
const JOIN_OVERLAP_M = 0.0008;
|
||
|
||
/** Edges shorter than this (m) get a grip that extends past the geometry for easier grabs. */
|
||
const THIN_EDGE_M = 0.45;
|
||
const MIN_EDGE_GRIP_M = 0.2;
|
||
const GRIP_OVERFLOW_WHEN_THIN_M = 0.08;
|
||
|
||
/**
|
||
* Visible grip length along an edge (width, height, or depth of the carcass).
|
||
* When the edge is narrow, the grip is at least slightly longer than the element.
|
||
*/
|
||
function gripSpanAlongEdge(edgeLenM) {
|
||
if (!(edgeLenM > 0)) return MIN_EDGE_GRIP_M;
|
||
const inset = edgeLenM * 0.96;
|
||
if (edgeLenM < THIN_EDGE_M) {
|
||
return Math.max(MIN_EDGE_GRIP_M, edgeLenM + GRIP_OVERFLOW_WHEN_THIN_M, inset);
|
||
}
|
||
return Math.max(0.18, inset);
|
||
}
|
||
|
||
/** Perpendicular thickness for DimensionAxisGrip hit boxes; grows when the main span is thin. */
|
||
function gripHitCrossAxis(mainSpanM) {
|
||
return Math.max(0.1, 0.06 + mainSpanM * 0.12);
|
||
}
|
||
|
||
/** Below this sin² between view ray and drag axis, the axis points at the camera and ray projection is unstable. */
|
||
const AXIS_DRAG_MIN_DENOM = 0.04;
|
||
/** Magnetic snap radius in screen pixels (converted to mm at drag start). */
|
||
const SNAP_RADIUS_PX = 10;
|
||
|
||
function rayFromClient(clientX, clientY, camera, domElement) {
|
||
const rect = domElement.getBoundingClientRect();
|
||
const ndc = new THREE.Vector2(
|
||
((clientX - rect.left) / rect.width) * 2 - 1,
|
||
-((clientY - rect.top) / rect.height) * 2 + 1
|
||
);
|
||
const raycaster = new THREE.Raycaster();
|
||
raycaster.setFromCamera(ndc, camera);
|
||
return raycaster.ray;
|
||
}
|
||
|
||
function worldToClient(point, camera, domElement) {
|
||
const rect = domElement.getBoundingClientRect();
|
||
const p = point.clone().project(camera);
|
||
return new THREE.Vector2(
|
||
rect.left + ((p.x + 1) / 2) * rect.width,
|
||
rect.top + ((1 - p.y) / 2) * rect.height
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Maps pointer motion to a signed displacement (m) along a world axis through `origin`,
|
||
* so the grabbed handle stays under the cursor whatever the zoom or orbit angle.
|
||
* The camera must stay still for the duration of the gesture.
|
||
*/
|
||
function createAxisDrag({ origin, axis, camera, domElement, clientX, clientY }) {
|
||
const o = origin.clone();
|
||
const a = axis.clone().normalize();
|
||
const screenStart = worldToClient(o, camera, domElement);
|
||
const screenAxis = worldToClient(o.clone().addScaledVector(a, 1), camera, domElement).sub(screenStart);
|
||
const pxPerMeter = Math.max(1, screenAxis.length());
|
||
|
||
const projectOnAxis = (cx, cy) => {
|
||
const ray = rayFromClient(cx, cy, camera, domElement);
|
||
const w0 = ray.origin.clone().sub(o);
|
||
const b = ray.direction.dot(a);
|
||
const denom = 1 - b * b;
|
||
if (denom < AXIS_DRAG_MIN_DENOM) return null;
|
||
return (a.dot(w0) - b * ray.direction.dot(w0)) / denom;
|
||
};
|
||
|
||
const startT = projectOnAxis(clientX, clientY);
|
||
const useRay = startT !== null && pxPerMeter > 40;
|
||
let last = 0;
|
||
|
||
return {
|
||
mmPerPx: 1000 / pxPerMeter,
|
||
deltaMeters(cx, cy) {
|
||
if (useRay) {
|
||
const t = projectOnAxis(cx, cy);
|
||
if (t !== null) last = t - startT;
|
||
return last;
|
||
}
|
||
if (pxPerMeter > 40) {
|
||
const d = new THREE.Vector2(cx - clientX, cy - clientY);
|
||
return d.dot(screenAxis) / (pxPerMeter * pxPerMeter);
|
||
}
|
||
// Axis seen end-on: fall back to a fixed rate, up/right = positive.
|
||
return ((cx - clientX) - (cy - clientY)) * 0.002;
|
||
},
|
||
};
|
||
}
|
||
|
||
function axisDragFromEvent(e, localAxis, camera, domElement) {
|
||
const object = e.object;
|
||
object.updateWorldMatrix(true, false);
|
||
const origin = new THREE.Vector3().setFromMatrixPosition(object.matrixWorld);
|
||
const axis = localAxis.clone().transformDirection(object.matrixWorld);
|
||
return {
|
||
origin,
|
||
axis,
|
||
drag: createAxisDrag({ origin, axis, camera, domElement, clientX: e.clientX, clientY: e.clientY }),
|
||
};
|
||
}
|
||
|
||
/** First candidate (in priority order) within `radius` of `value`, else null. */
|
||
function magneticSnap(value, candidates, radius) {
|
||
for (const c of candidates) {
|
||
if (Number.isFinite(c.value) && Math.abs(c.value - value) <= radius) return c;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/* ===================================================================
|
||
ResizableSeparator - a draggable handle between two modules
|
||
=================================================================== */
|
||
function ResizableSeparator({
|
||
position,
|
||
height,
|
||
depth,
|
||
zCenter,
|
||
visibleSegments,
|
||
separatorIndex,
|
||
colors,
|
||
onElementClick,
|
||
isResizing,
|
||
onResizePointerDown,
|
||
}) {
|
||
const [hovered, setHovered] = useState(false);
|
||
const { gl } = useThree();
|
||
const meshRef = useRef();
|
||
|
||
const handlePointerOver = useCallback((e) => {
|
||
e.stopPropagation();
|
||
setHovered(true);
|
||
gl.domElement.style.cursor = 'col-resize';
|
||
}, [gl]);
|
||
|
||
const handlePointerOut = useCallback((e) => {
|
||
e.stopPropagation();
|
||
if (!isResizing) {
|
||
setHovered(false);
|
||
gl.domElement.style.cursor = 'auto';
|
||
}
|
||
}, [gl, isResizing]);
|
||
|
||
const handlePointerDown = useCallback((e) => {
|
||
e.stopPropagation();
|
||
if (onResizePointerDown) {
|
||
onResizePointerDown(separatorIndex, e);
|
||
}
|
||
}, [separatorIndex, onResizePointerDown]);
|
||
|
||
const baseColor = hovered || isResizing ? '#4f46e5' : '#d4c4a4';
|
||
|
||
const hitX = Math.max(PANEL_THICKNESS * 8, 0.11);
|
||
const hitY = Math.max(height, gripSpanAlongEdge(height));
|
||
const hitZ = Math.max(depth, gripSpanAlongEdge(depth));
|
||
|
||
return (
|
||
<group position={position}>
|
||
{/* Séparateur : plaqué au dos, sans rainure ; même emprise Z que dessus/fond */}
|
||
{(visibleSegments || [{ centerY: 0, height }]).map((segment, index) => (
|
||
<group key={`visible-segment-${index}`} position={[0, segment.centerY, zCenter]}>
|
||
<WardrobeElement
|
||
elementType="panneauxInterieurs"
|
||
geometryType="box"
|
||
geometryArgs={[PANEL_THICKNESS, segment.height, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={onElementClick}
|
||
/>
|
||
</group>
|
||
))}
|
||
{/* Invisible hit area: wider/taller/deeper than the panel when the carcass is shallow or short */}
|
||
<mesh
|
||
ref={meshRef}
|
||
onPointerOver={handlePointerOver}
|
||
onPointerOut={handlePointerOut}
|
||
onPointerDown={handlePointerDown}
|
||
>
|
||
<boxGeometry args={[hitX, hitY, hitZ]} />
|
||
<meshBasicMaterial transparent opacity={0} />
|
||
</mesh>
|
||
{/* Highlight overlay when hovered/resizing */}
|
||
{(hovered || isResizing) && (
|
||
<mesh>
|
||
<boxGeometry args={[Math.max(PANEL_THICKNESS * 1.5, hitX * 0.85), height * 0.95, depth * 0.95]} />
|
||
<meshBasicMaterial color={baseColor} transparent opacity={0.35} />
|
||
</mesh>
|
||
)}
|
||
</group>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Rainure dos APEX 4.0 : 9×10,5 mm, axe à 16 mm du bord arrière (face intérieure caisse).
|
||
* Repère local identique au panneau : Z− = arrière, dessus = rainure sur face bas (−Y), fond = face haut (+Y).
|
||
*/
|
||
function BackGrooveVisual3D({ variant, innerW, innerD, thickness, panelH, panelD }) {
|
||
const gw = GROOVE.back.width * SCALE;
|
||
const gd = GROOVE.back.depth * SCALE;
|
||
const ax = GROOVE.back.axisFromPanelEdge * SCALE;
|
||
const eps = 0.0003;
|
||
const mat = (
|
||
<meshStandardMaterial
|
||
color="#2a9d8f"
|
||
roughness={0.55}
|
||
metalness={0.05}
|
||
transparent
|
||
opacity={0.52}
|
||
polygonOffset
|
||
polygonOffsetFactor={-1}
|
||
polygonOffsetUnits={-1}
|
||
/>
|
||
);
|
||
|
||
if (variant === 'horizontal-top') {
|
||
const zHalf = innerD / 2;
|
||
const zc = -zHalf + ax;
|
||
return (
|
||
<mesh position={[0, -thickness / 2 + gd / 2 + eps, zc]}>
|
||
<boxGeometry args={[Math.max(0.001, innerW - eps * 4), gd, gw]} />
|
||
{mat}
|
||
</mesh>
|
||
);
|
||
}
|
||
if (variant === 'horizontal-bottom') {
|
||
const zHalf = innerD / 2;
|
||
const zc = -zHalf + ax;
|
||
return (
|
||
<mesh position={[0, thickness / 2 - gd / 2 - eps, zc]}>
|
||
<boxGeometry args={[Math.max(0.001, innerW - eps * 4), gd, gw]} />
|
||
{mat}
|
||
</mesh>
|
||
);
|
||
}
|
||
if (variant === 'vertical-left') {
|
||
const zHalf = panelD / 2;
|
||
const zc = -zHalf + ax;
|
||
return (
|
||
<mesh position={[thickness / 2 - gd / 2 - eps, 0, zc]}>
|
||
<boxGeometry args={[gd, Math.max(0.001, panelH - eps * 4), gw]} />
|
||
{mat}
|
||
</mesh>
|
||
);
|
||
}
|
||
if (variant === 'vertical-right') {
|
||
const zHalf = panelD / 2;
|
||
const zc = -zHalf + ax;
|
||
return (
|
||
<mesh position={[-thickness / 2 + gd / 2 + eps, 0, zc]}>
|
||
<boxGeometry args={[gd, Math.max(0.001, panelH - eps * 4), gw]} />
|
||
{mat}
|
||
</mesh>
|
||
);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/* ===================================================================
|
||
WidthLabel - floating HTML label showing module width in mm
|
||
=================================================================== */
|
||
function WidthLabel({ position, widthMm, hint, snapped = false }) {
|
||
return (
|
||
<Html position={position} center style={{ pointerEvents: 'none' }}>
|
||
<div style={{
|
||
background: snapped ? 'rgba(5, 150, 105, 0.95)' : 'rgba(79, 70, 229, 0.9)',
|
||
color: '#fff',
|
||
padding: '2px 8px',
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
userSelect: 'none',
|
||
}}>
|
||
{Math.round(widthMm)}mm
|
||
{hint && <span style={{ marginLeft: 6, opacity: 0.85, fontWeight: 500 }}>{hint}</span>}
|
||
</div>
|
||
</Html>
|
||
);
|
||
}
|
||
|
||
/* ===================================================================
|
||
DimensionAxisGrip - CAD-like edge grip for bounding box resize
|
||
=================================================================== */
|
||
function DimensionAxisGrip({
|
||
position,
|
||
rotation = [0, 0, 0],
|
||
size,
|
||
hitSize,
|
||
label,
|
||
cursor,
|
||
active,
|
||
tintColor = '#4f46e5',
|
||
chipOffset = [0, 0.06, 0],
|
||
onPointerDown
|
||
}) {
|
||
const [hovered, setHovered] = useState(false);
|
||
const { gl } = useThree();
|
||
|
||
const handlePointerOver = useCallback((e) => {
|
||
e.stopPropagation();
|
||
setHovered(true);
|
||
gl.domElement.style.cursor = cursor;
|
||
}, [gl, cursor]);
|
||
|
||
const handlePointerOut = useCallback((e) => {
|
||
e.stopPropagation();
|
||
if (!active) {
|
||
setHovered(false);
|
||
gl.domElement.style.cursor = 'auto';
|
||
}
|
||
}, [gl, active]);
|
||
|
||
const handlePointerDown = useCallback((e) => {
|
||
e.stopPropagation();
|
||
e.target?.setPointerCapture?.(e.pointerId);
|
||
onPointerDown?.(e);
|
||
}, [onPointerDown]);
|
||
|
||
return (
|
||
<group position={position}>
|
||
<mesh
|
||
rotation={rotation}
|
||
onPointerOver={handlePointerOver}
|
||
onPointerOut={handlePointerOut}
|
||
onPointerDown={handlePointerDown}
|
||
>
|
||
<boxGeometry args={size} />
|
||
<meshStandardMaterial color={active || hovered ? '#4f46e5' : '#f59e0b'} emissive={active || hovered ? '#3730a3' : '#000000'} />
|
||
</mesh>
|
||
<mesh
|
||
rotation={rotation}
|
||
onPointerOver={handlePointerOver}
|
||
onPointerOut={handlePointerOut}
|
||
onPointerDown={handlePointerDown}
|
||
>
|
||
<boxGeometry args={hitSize || [size[0] * 2.8, size[1] * 2.8, size[2] * 2.8]} />
|
||
<meshBasicMaterial
|
||
color={tintColor}
|
||
transparent
|
||
opacity={active ? 0.28 : hovered ? 0.2 : 0.1}
|
||
/>
|
||
</mesh>
|
||
<Html position={chipOffset} center style={{ pointerEvents: 'none' }}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 0,
|
||
background: active ? 'rgba(79,70,229,0.96)' : 'rgba(15,23,42,0.86)',
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
padding: '4px 7px',
|
||
borderRadius: 6,
|
||
whiteSpace: 'nowrap',
|
||
userSelect: 'none',
|
||
border: active ? '1px solid rgba(255,255,255,0.65)' : '1px solid rgba(255,255,255,0.18)',
|
||
boxShadow: active ? '0 4px 16px rgba(0,0,0,0.32)' : '0 2px 8px rgba(0,0,0,0.22)',
|
||
}}
|
||
>
|
||
<span>{label}</span>
|
||
</div>
|
||
</Html>
|
||
</group>
|
||
);
|
||
}
|
||
|
||
/* ===================================================================
|
||
DrawerBox - renders drawer front faces stacked vertically
|
||
=================================================================== */
|
||
function DrawerBox({
|
||
moduleCenter,
|
||
moduleWidth,
|
||
bodyH,
|
||
plinthH,
|
||
drawersCount,
|
||
depth,
|
||
behindDoor,
|
||
drawerDepthMm,
|
||
drawerHeightsMm,
|
||
colors,
|
||
onElementClick
|
||
}) {
|
||
const reveal = FACADE_REVEAL_M;
|
||
const gapMm = 8; // jeu de fabrication entre faces de tiroirs (mm) — pris DANS la niche Legrabox
|
||
// Hauteurs de NICHE Legrabox par tiroir (SMS) — mêmes valeurs que porte / rayon fixe / renforts.
|
||
const heightsMm = drawerNicheHeightsMm(drawersCount, drawerHeightsMm);
|
||
const totalMm = heightsMm.reduce((s, v) => s + v, 0);
|
||
// Même capping que le rayon fixe au-dessus des tiroirs, pour rester aligné.
|
||
const totalM = Math.min(bodyH * 0.78, totalMm * SCALE);
|
||
const k = totalMm > 0 ? totalM / (totalMm * SCALE) : 1;
|
||
|
||
/** Profondeur utile tiroir (mm) — réduite en mode caché. */
|
||
const effMm = Math.max(350, Number(drawerDepthMm) || 550);
|
||
const drawerBodyDepthM = Math.max(
|
||
PANEL_THICKNESS * 2,
|
||
Math.min(effMm * SCALE, Math.max(0.08, depth - PANEL_THICKNESS * 3))
|
||
);
|
||
/** Face avant des tiroirs (côté porte) : +Z vers l’avant du caisson. */
|
||
const frontFaceZ = behindDoor
|
||
? depth / 2 - PANEL_THICKNESS - 0.15
|
||
: depth / 2 - PANEL_THICKNESS - 0.002;
|
||
const bodyCenterZ = frontFaceZ - drawerBodyDepthM / 2 - PANEL_THICKNESS / 2;
|
||
|
||
const faceW = Math.max(0.04, moduleWidth - 2 * reveal);
|
||
const startY = -bodyH / 2 + PANEL_THICKNESS;
|
||
|
||
let cursor = startY;
|
||
const items = [];
|
||
for (let di = 0; di < drawersCount; di++) {
|
||
const hM = heightsMm[di] * SCALE * k;
|
||
const yc = cursor + hM / 2;
|
||
// Façade = niche − jeu (8 mm pris dans la niche) − jeux visuels haut/bas.
|
||
const faceH = Math.max(0.02, hM - gapMm * SCALE * k - 2 * reveal);
|
||
items.push({ di, yc, faceH });
|
||
cursor += hM;
|
||
}
|
||
|
||
// Cales de compensation (renforts) — uniquement pour tiroirs cachés derrière une porte
|
||
// à charnières : un montant gauche + un droit, en retrait avant pour ne pas toucher les charnières.
|
||
const caleThicknessM = DRAWER_REINFORCEMENT.thicknessMm * SCALE;
|
||
const caleDepthM = Math.max(
|
||
0.08,
|
||
depth -
|
||
(DRAWER_REINFORCEMENT.backInsetFromRearMm + DRAWER_REINFORCEMENT.hingeFrontClearanceMm) * SCALE -
|
||
PANEL_THICKNESS
|
||
);
|
||
const carcassFrontZ = depth / 2 - PANEL_THICKNESS;
|
||
const caleFrontZ = carcassFrontZ - DRAWER_REINFORCEMENT.hingeFrontClearanceMm * SCALE;
|
||
const caleCenterZ = caleFrontZ - caleDepthM / 2;
|
||
const caleHeightM = Math.max(0.02, totalM);
|
||
const caleCenterY = plinthH / 2 + startY + totalM / 2;
|
||
const caleLeftX = moduleCenter - moduleWidth / 2 + PANEL_THICKNESS + caleThicknessM / 2;
|
||
const caleRightX = moduleCenter + moduleWidth / 2 - PANEL_THICKNESS - caleThicknessM / 2;
|
||
|
||
return (
|
||
<>
|
||
{behindDoor && moduleWidth > 0 && drawersCount > 0 && (
|
||
<>
|
||
<WardrobeElement
|
||
elementType="renfortsTiroir"
|
||
geometryType="box"
|
||
geometryArgs={[caleThicknessM, caleHeightM, caleDepthM]}
|
||
position={[caleLeftX, caleCenterY, caleCenterZ]}
|
||
colors={colors}
|
||
onElementClick={onElementClick}
|
||
materialProps={{ roughness: 0.7, metalness: 0.02 }}
|
||
/>
|
||
<WardrobeElement
|
||
elementType="renfortsTiroir"
|
||
geometryType="box"
|
||
geometryArgs={[caleThicknessM, caleHeightM, caleDepthM]}
|
||
position={[caleRightX, caleCenterY, caleCenterZ]}
|
||
colors={colors}
|
||
onElementClick={onElementClick}
|
||
materialProps={{ roughness: 0.7, metalness: 0.02 }}
|
||
/>
|
||
</>
|
||
)}
|
||
{items.map(({ di, yc, faceH }) => (
|
||
<group key={`drawer-${di}`}>
|
||
{/* Corps (volume du tiroir, en retrait derrière la face) */}
|
||
<WardrobeElement
|
||
elementType="tiroirs"
|
||
geometryType="box"
|
||
geometryArgs={[Math.max(0.03, faceW - 0.02), Math.max(0.02, faceH - 0.008), drawerBodyDepthM]}
|
||
position={[moduleCenter, plinthH / 2 + yc, moduleWidth > 0 ? bodyCenterZ : 0]}
|
||
colors={colors}
|
||
onElementClick={onElementClick}
|
||
materialProps={{ roughness: 0.6, metalness: 0.03 }}
|
||
/>
|
||
{/* Face avant alignée (jeu 1.5 mm de chaque côté) */}
|
||
<WardrobeElement
|
||
elementType="tiroirs"
|
||
geometryType="box"
|
||
geometryArgs={[faceW, faceH, PANEL_THICKNESS]}
|
||
position={[moduleCenter, plinthH / 2 + yc, moduleWidth > 0 ? frontFaceZ : 0]}
|
||
colors={colors}
|
||
onElementClick={onElementClick}
|
||
materialProps={{ roughness: 0.45, metalness: 0.05 }}
|
||
/>
|
||
</group>
|
||
))}
|
||
</>
|
||
);
|
||
}
|
||
|
||
/* ===================================================================
|
||
WardrobeMesh - Full wardrobe model with drag/resize/drawers
|
||
=================================================================== */
|
||
const GHOST_COLOR = '#6366f1';
|
||
const ignoreRaycast = () => null;
|
||
|
||
function GhostBox({ size, position }) {
|
||
return (
|
||
<mesh position={position} raycast={ignoreRaycast} renderOrder={2}>
|
||
<boxGeometry args={size} />
|
||
<meshBasicMaterial color={GHOST_COLOR} transparent opacity={0.14} depthWrite={false} />
|
||
<Edges color={GHOST_COLOR} transparent opacity={0.55} />
|
||
</mesh>
|
||
);
|
||
}
|
||
|
||
/** Étape Espace: aperçu de l'agencement intérieur en transparence (non interactif). */
|
||
function LayoutGhost({ config, modules, modulePositions, height, depth, plinthH }) {
|
||
const T = PANEL_THICKNESS;
|
||
const baseY = -height / 2 + plinthH;
|
||
const innerDepth = Math.max(0.02, depth - T * 2);
|
||
return (
|
||
<group>
|
||
{modules.map((mod, i) => {
|
||
const pos = modulePositions[i];
|
||
if (!pos) return null;
|
||
const innerW = Math.max(0.02, pos.width - T * 2);
|
||
const heightsMm = moduleBlockHeightsMm(mod, config);
|
||
const junctionsMm = heightsMm.slice(0, -1).reduce((acc, h) => [...acc, (acc[acc.length - 1] || 0) + h], []);
|
||
const shelvesMm = resolveShelfPositionsMm({
|
||
shelfCount: Math.max(minShelvesForColumn(config.heightMm, mod, config), Number(mod.shelves) || 0),
|
||
heightMm: config.heightMm,
|
||
plinthHeightMm: config.plinthHeightMm ?? 100,
|
||
shelfPositionsMm: mod.shelfPositionsMm,
|
||
stack: moduleStackInfo(mod, config)
|
||
});
|
||
const drawers = Math.max(0, Number(mod.drawers) || 0);
|
||
const drawerH = drawers > 0 ? (drawerStackHeightMm(drawers, config.hardware?.drawerHeightsMm) * SCALE) / drawers : 0;
|
||
const zone = moduleHangingZoneMm(mod, config);
|
||
return (
|
||
<group key={mod.id || i}>
|
||
{i > 0 && (
|
||
<GhostBox size={[T, height - plinthH - T * 2, innerDepth]} position={[pos.center - pos.width / 2, baseY + (height - plinthH) / 2, 0]} />
|
||
)}
|
||
{junctionsMm.map((mm) => (
|
||
<GhostBox key={`j${mm}`} size={[innerW, T * 2, innerDepth]} position={[pos.center, baseY + mm * SCALE, 0]} />
|
||
))}
|
||
{shelvesMm.map((mm) => (
|
||
<GhostBox key={`s${mm}`} size={[innerW, T, innerDepth]} position={[pos.center, baseY + mm * SCALE, 0]} />
|
||
))}
|
||
{Array.from({ length: drawers }, (_, d) => (
|
||
<GhostBox
|
||
key={`d${d}`}
|
||
size={[innerW - 0.01, drawerH - 0.006, innerDepth * 0.9]}
|
||
position={[pos.center, baseY + T + drawerH * (d + 0.5), 0]}
|
||
/>
|
||
))}
|
||
{zone && (
|
||
<mesh position={[pos.center, baseY + zone.rodMm * SCALE, 0]} rotation={[0, 0, Math.PI / 2]} raycast={ignoreRaycast} renderOrder={2}>
|
||
<cylinderGeometry args={[0.012, 0.012, innerW - 0.02, 12]} />
|
||
<meshBasicMaterial color={GHOST_COLOR} transparent opacity={0.6} depthWrite={false} />
|
||
</mesh>
|
||
)}
|
||
</group>
|
||
);
|
||
})}
|
||
</group>
|
||
);
|
||
}
|
||
|
||
function WardrobeMesh({
|
||
config,
|
||
colors = {},
|
||
onElementClick,
|
||
onModuleClick,
|
||
selectedModuleIndex,
|
||
selectedBlockIndex = 0,
|
||
selectedHorizontalSpanId,
|
||
onHorizontalSpanClick,
|
||
modules = [],
|
||
showDoors = true,
|
||
onResizeModules,
|
||
onUpdateModule,
|
||
onSetDimension,
|
||
onBeginUndoableGesture,
|
||
activeStep = 1,
|
||
suppressHtmlOverlays = false,
|
||
onInteractionChange,
|
||
}) {
|
||
const { gl, camera, controls } = useThree();
|
||
const useModules = modules && modules.length > 0;
|
||
const shellOnlyMode = activeStep === 1;
|
||
|
||
// --- Dimensions ---
|
||
const totalWidth = useModules
|
||
? modules.reduce((s, m) => s + (m.widthMm || 0), 0)
|
||
: config.widthMm || 2400;
|
||
|
||
const width = totalWidth * SCALE;
|
||
const height = (config.heightMm || 2400) * SCALE;
|
||
const depth = (config.depthMm || 600) * SCALE;
|
||
const plinthH = (config.plinthHeightMm || 100) * SCALE;
|
||
const plinthPanelH = getAxiloPlinthPanelHeightMm(config.plinthHeightMm || 100) * SCALE;
|
||
const plinthThicknessM = PLINTH.panelThicknessMm * SCALE;
|
||
const plinthSetbackM = PLINTH.frontSetbackMm * SCALE;
|
||
const plinthZ = depth / 2 - plinthSetbackM - plinthThicknessM / 2;
|
||
const bodyH = height - plinthH;
|
||
const isNiche = config.installationType === 'niche';
|
||
const nicheMeasurements = config.nicheMeasurements || {};
|
||
const smallestNicheMeasureM = (values, fallbackMm) => {
|
||
const valid = values.map(Number).filter((value) => Number.isFinite(value) && value > 0);
|
||
return (valid.length > 0 ? Math.min(...valid) : fallbackMm) * SCALE;
|
||
};
|
||
const nicheOpeningWidth = isNiche
|
||
? smallestNicheMeasureM(
|
||
[
|
||
nicheMeasurements.widthTopMm,
|
||
nicheMeasurements.widthMidMm,
|
||
nicheMeasurements.widthBottomMm
|
||
],
|
||
totalWidth + 2 * (Number(config.sanitaryGapMm) || 30)
|
||
)
|
||
: width;
|
||
const nicheOpeningHeight = isNiche
|
||
? smallestNicheMeasureM(
|
||
[nicheMeasurements.heightLeftMm, nicheMeasurements.heightRightMm],
|
||
(config.heightMm || 2400) + (Number(config.sanitaryGapMm) || 30)
|
||
)
|
||
: height;
|
||
const exteriorFinishesEnabled = !!config.exteriorFinishesEnabled;
|
||
const sideDefaultsEnabled = config?.sideFinishesEnabled !== false;
|
||
const sideFinishLeftEnabled = config?.sideFinishLeftEnabled ?? sideDefaultsEnabled;
|
||
const sideFinishRightEnabled = config?.sideFinishRightEnabled ?? sideDefaultsEnabled;
|
||
const topFinishEnabled = config?.topFinishEnabled !== false;
|
||
const sideAssemblyLeft =
|
||
config.installationType === 'free' && exteriorFinishesEnabled && sideFinishLeftEnabled;
|
||
const sideAssemblyRight =
|
||
config.installationType === 'free' && exteriorFinishesEnabled && sideFinishRightEnabled;
|
||
const leftPlinthReturn = hasSidePlinthReturn(config, 'left');
|
||
const rightPlinthReturn = hasSidePlinthReturn(config, 'right');
|
||
const leftPlinthDeductM = getAxiloPlinthFrontSideDeductionMm(config, 'left') * SCALE;
|
||
const rightPlinthDeductM = getAxiloPlinthFrontSideDeductionMm(config, 'right') * SCALE;
|
||
const frontPlinthWidth = isNiche
|
||
? width
|
||
: Math.max(0.02, width - leftPlinthDeductM - rightPlinthDeductM);
|
||
const frontPlinthCenterX = isNiche
|
||
? 0
|
||
: (leftPlinthDeductM - rightPlinthDeductM) / 2;
|
||
const horizontalPanelLeftInset = PANEL_THICKNESS;
|
||
const horizontalPanelRightInset = PANEL_THICKNESS;
|
||
const horizontalPanelWidth =
|
||
Math.max(0.02, width - horizontalPanelLeftInset - horizontalPanelRightInset);
|
||
const horizontalPanelCenterX = (horizontalPanelLeftInset - horizontalPanelRightInset) / 2;
|
||
/**
|
||
* Dos optionnel PAR ZONE (colonne).
|
||
* Construction: dos → caisson block ; sinon côté (montant extérieur) ou rayonnage → block ;
|
||
* sinon séparations. Legacy sans flags: dos présent partout (ancien comportement).
|
||
*/
|
||
const legacyBack = config?.hasBack !== false;
|
||
/**
|
||
* Empilage vertical PAR COLONNE — N blocks: `mod.blockHeightsMm` / `mod.blockBacks`
|
||
* (legacy: stacked + stackBottomHeightMm / hasBack + hasBackTop). Jonction = double panneau horizontal.
|
||
*/
|
||
const modHeightsMm = (i) => moduleBlockHeightsMm(modules?.[i] ?? null, config);
|
||
/** Dos par block (bas → haut); legacy sans flags → dos présent (ancien comportement). */
|
||
const modBacks = (i) => {
|
||
const m = modules?.[i];
|
||
const n = modHeightsMm(i).length;
|
||
const arr = Array.isArray(m?.blockBacks) ? m.blockBacks : null;
|
||
const base = m && typeof m.hasBack === 'boolean' ? m.hasBack : legacyBack;
|
||
return Array.from({ length: n }, (_, k) => {
|
||
if (arr && typeof arr[k] === 'boolean') return arr[k];
|
||
if (k === n - 1 && n >= 2 && m && typeof m.hasBackTop === 'boolean') return m.hasBackTop;
|
||
return base;
|
||
});
|
||
};
|
||
/** Y (repère groupe) des jonctions entre blocks de la colonne i ([] si 1 block). */
|
||
const modJointYs = (i) => {
|
||
const hs = modHeightsMm(i);
|
||
if (hs.length < 2) return [];
|
||
const ys = [];
|
||
let acc = 0;
|
||
for (let k = 0; k < hs.length - 1; k++) {
|
||
acc += hs[k];
|
||
ys.push(-height / 2 + plinthH + acc * SCALE);
|
||
}
|
||
return ys;
|
||
};
|
||
const modStacked = (i) => modHeightsMm(i).length >= 2;
|
||
const anyStacked = useModules ? modules.some((_, i) => modStacked(i)) : modStacked(0);
|
||
const modBack = (i) => modBacks(i)[0] ?? legacyBack;
|
||
/** Dos de la zone du dessus (dernier block, ou zone unique). */
|
||
const modBackTop = (i) => {
|
||
const b = modBacks(i);
|
||
return b.length > 0 ? b[b.length - 1] : legacyBack;
|
||
};
|
||
const modBackAny = (i) => modBacks(i).some(Boolean);
|
||
const anyBack = useModules ? modules.some((_, i) => modBackAny(i)) : legacyBack;
|
||
const backAtLeftSide = useModules ? modBackAny(0) : legacyBack;
|
||
const backAtRightSide = useModules ? modBackAny(modules.length - 1) : legacyBack;
|
||
/** Colonne en caisson block: dos, ou rayonnage (même sans dos). Les côtés extérieurs restent des montants block. */
|
||
const modIsBlock = (i) => {
|
||
if (!useModules) return usesBlockConstruction(null, legacyBack);
|
||
return columnUsesBlockConstruction(modules[i], config);
|
||
};
|
||
/** Jonction i (entre colonnes i et i+1): double montant si caisson des deux côtés. */
|
||
const boundaryAnyBlock = (i) => modIsBlock(i) || modIsBlock(i + 1);
|
||
/** Gap between double montants (assemblage block) */
|
||
const BLOCK_JOINT_GAP_M = (BLOCK_ASSEMBLY.jointGapMm || 3) * SCALE;
|
||
/** Same Z footprint as dessus/fond so front/back corners meet the horizontals. */
|
||
const separatorDepthM = depth - PANEL_THICKNESS;
|
||
const separatorZ = PANEL_THICKNESS / 2;
|
||
const isSliding = config.doorType === 'sliding';
|
||
const hw = config.hardware || {};
|
||
const doorOpenAngle = 0.32; // radians (~18°) - visible “ajar” preview
|
||
|
||
/** Séparateurs: côté caisson (block), montants alignés sur la hauteur habillage (body + bandeau si habillage dessus). */
|
||
const sepStyleBlock = {
|
||
y: topFinishEnabled ? plinthH / 2 + PANEL_THICKNESS / 2 : plinthH / 2,
|
||
h: topFinishEnabled ? bodyH + PANEL_THICKNESS : bodyH
|
||
};
|
||
const sepStyleSeparations = {
|
||
y: plinthH / 2,
|
||
h: bodyH - PANEL_THICKNESS * 2 + JOIN_OVERLAP_M
|
||
};
|
||
/**
|
||
* Inset of a column's horizontal board from a module edge.
|
||
* Verticals sit between dessus/fond, so the board must cover their thickness
|
||
* (outer face of a clad side, joint gap of a double montant, centerline of a shared separator).
|
||
*/
|
||
const horizontalInsetAt = (moduleIndex, side) => {
|
||
const neighbor = side === 'left' ? moduleIndex - 1 : moduleIndex + 1;
|
||
if (neighbor < 0 || neighbor >= modules.length) return PANEL_THICKNESS;
|
||
if (modIsBlock(moduleIndex)) {
|
||
return PANEL_THICKNESS + (modIsBlock(neighbor) ? BLOCK_JOINT_GAP_M / 2 : 0);
|
||
}
|
||
return 0;
|
||
};
|
||
const montantXsAt = (boundaryX, boundaryIndex) => {
|
||
const jointHalf = (BLOCK_JOINT_GAP_M + PANEL_THICKNESS) / 2;
|
||
const leftBlock = modIsBlock(boundaryIndex);
|
||
const rightBlock = modIsBlock(boundaryIndex + 1);
|
||
if (leftBlock && rightBlock) return [boundaryX - jointHalf, boundaryX + jointHalf];
|
||
if (leftBlock) return [boundaryX - PANEL_THICKNESS / 2];
|
||
if (rightBlock) return [boundaryX + PANEL_THICKNESS / 2];
|
||
return [boundaryX];
|
||
};
|
||
/** Single full-width shell on step 1; structural boards are split by block afterwards. */
|
||
const splitTopPerZone =
|
||
anyBack && useModules && modules.length > 1 && !shellOnlyMode;
|
||
|
||
const dimGrip = useMemo(() => {
|
||
const w = gripSpanAlongEdge(width);
|
||
const h = gripSpanAlongEdge(bodyH);
|
||
const d = gripSpanAlongEdge(depth);
|
||
const gripOutset = 0.03;
|
||
const rightExteriorX =
|
||
width / 2
|
||
+ (isNiche ? PANEL_THICKNESS * 0.6 : 0)
|
||
+ ((!isNiche && exteriorFinishesEnabled && sideFinishRightEnabled) ? PANEL_THICKNESS : 0)
|
||
+ gripOutset;
|
||
const frontExteriorZ = depth / 2 + gripOutset;
|
||
const bottomY = -height / 2 + plinthH + 0.02;
|
||
return {
|
||
w,
|
||
h,
|
||
d,
|
||
crossW: gripHitCrossAxis(width),
|
||
crossH: gripHitCrossAxis(bodyH),
|
||
crossD: gripHitCrossAxis(depth),
|
||
rightExteriorX,
|
||
frontExteriorZ,
|
||
bottomY,
|
||
};
|
||
}, [width, bodyH, depth, height, plinthH, isNiche, exteriorFinishesEnabled, sideFinishRightEnabled]);
|
||
|
||
// --- Module positions ---
|
||
const modulePositions = useMemo(() => {
|
||
const items = useModules ? modules : [];
|
||
const result = [];
|
||
let offset = 0;
|
||
items.forEach((item) => {
|
||
const w = (item.widthMm || 0) * SCALE;
|
||
result.push({ x0: offset, width: w, center: -width / 2 + offset + w / 2 });
|
||
offset += w;
|
||
});
|
||
return result;
|
||
}, [useModules, modules, width]);
|
||
|
||
// --- Separator positions (between modules) ---
|
||
const separatorPositions = useMemo(() => {
|
||
const items = useModules ? modules : [];
|
||
return items.slice(0, -1).map((item, i) => {
|
||
const x = modulePositions[i].x0 + modulePositions[i].width;
|
||
return { x: -width / 2 + x, index: i };
|
||
});
|
||
}, [modulePositions, width, useModules, modules]);
|
||
|
||
const spanConfig = useMemo(() => ({ ...config, modules }), [config, modules]);
|
||
const invalidHorizontalSpanIds = useMemo(
|
||
() => new Set(validateHorizontalSpans(spanConfig).map((issue) => String(issue.spanId))),
|
||
[spanConfig]
|
||
);
|
||
const resolvedHorizontalSpans = useMemo(
|
||
() => (Array.isArray(config?.horizontalSpans) ? config.horizontalSpans : [])
|
||
.filter((span) => !invalidHorizontalSpanIds.has(String(span?.id)))
|
||
.map((span) => resolveHorizontalSpan(span, spanConfig))
|
||
.filter((resolved) => (
|
||
resolved &&
|
||
resolved.moduleIndexes.length >= 2 &&
|
||
resolved.widthMm > 0 &&
|
||
Number.isFinite(resolved.bottomMm) &&
|
||
Number.isFinite(resolved.topMm) &&
|
||
resolved.topMm > resolved.bottomMm &&
|
||
resolved.moduleIndexes.every(
|
||
(moduleIndex, index) => index === 0 || moduleIndex === resolved.moduleIndexes[index - 1] + 1
|
||
)
|
||
)),
|
||
[config?.horizontalSpans, invalidHorizontalSpanIds, spanConfig]
|
||
);
|
||
const renderedSpanConfig = useMemo(
|
||
() => ({ ...spanConfig, horizontalSpans: resolvedHorizontalSpans.map((resolved) => resolved.span) }),
|
||
[spanConfig, resolvedHorizontalSpans]
|
||
);
|
||
const spanCoversBlock = (moduleIndex, blockIndex) =>
|
||
resolvedHorizontalSpans.some((resolved) => resolved.coveredBlocks.some(
|
||
(covered) => covered.moduleIndex === moduleIndex && covered.blockIndexes.includes(blockIndex)
|
||
));
|
||
const spanCoversY = (moduleIndex, y) => {
|
||
const bodyYmm = (y - (-height / 2 + plinthH)) / SCALE;
|
||
return resolvedHorizontalSpans.some(
|
||
(resolved) =>
|
||
resolved.moduleIndexes.includes(moduleIndex) &&
|
||
bodyYmm >= resolved.bottomMm - 0.5 &&
|
||
bodyYmm <= resolved.topMm + 0.5
|
||
);
|
||
};
|
||
const stackPanelCovered = (moduleIndex, jointY, side) => {
|
||
const jointMm = (jointY - (-height / 2 + plinthH)) / SCALE;
|
||
return resolvedHorizontalSpans.some((resolved) => {
|
||
if (!resolved.moduleIndexes.includes(moduleIndex)) return false;
|
||
if (jointMm > resolved.bottomMm + 0.5 && jointMm < resolved.topMm - 0.5) return true;
|
||
if (side === 'upper' && Math.abs(jointMm - resolved.bottomMm) <= 0.5) return true;
|
||
if (side === 'lower' && Math.abs(jointMm - resolved.topMm) <= 0.5) return true;
|
||
return false;
|
||
});
|
||
};
|
||
const separatorSegmentsFor = (separatorIndex, style) => {
|
||
const styleBottom = style.y - style.h / 2;
|
||
const styleTop = style.y + style.h / 2;
|
||
return getSeparatorVerticalSegments(renderedSpanConfig, separatorIndex)
|
||
.map((segment) => {
|
||
const bottom = Math.max(
|
||
styleBottom,
|
||
-height / 2 + plinthH + segment.bottomMm * SCALE
|
||
);
|
||
const top = Math.min(
|
||
styleTop,
|
||
-height / 2 + plinthH + segment.topMm * SCALE
|
||
);
|
||
return {
|
||
centerY: (bottom + top) / 2 - style.y,
|
||
height: top - bottom
|
||
};
|
||
})
|
||
.filter((segment) => segment.height > 0.001);
|
||
};
|
||
|
||
/**
|
||
* Habillage dessus: 1 bandeau par caisson avec dos, colonnes sans dos contiguës fusionnées.
|
||
*/
|
||
const topSegments = useMemo(() => {
|
||
if (!useModules || modulePositions.length === 0) return null;
|
||
const n = modules.length;
|
||
const runs = [];
|
||
let i = 0;
|
||
while (i < n) {
|
||
if (modBackTop(i)) {
|
||
runs.push({ start: i, end: i, hasBack: true });
|
||
i += 1;
|
||
} else {
|
||
let j = i;
|
||
while (j + 1 < n && !modBackTop(j + 1)) j += 1;
|
||
runs.push({ start: i, end: j, hasBack: false });
|
||
i = j + 1;
|
||
}
|
||
}
|
||
return runs.map((seg) => {
|
||
const x0 = modulePositions[seg.start].x0;
|
||
const x1 = modulePositions[seg.end].x0 + modulePositions[seg.end].width;
|
||
const leftInset = horizontalInsetAt(seg.start, 'left');
|
||
const rightInset = horizontalInsetAt(seg.end, 'right');
|
||
const xa = x0 + leftInset;
|
||
const xb = x1 - rightInset;
|
||
return {
|
||
...seg,
|
||
rawX0: x0,
|
||
rawX1: x1,
|
||
center: -width / 2 + (xa + xb) / 2,
|
||
w: Math.max(0.02, xb - xa)
|
||
};
|
||
});
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [
|
||
modulePositions,
|
||
width,
|
||
useModules,
|
||
modules,
|
||
legacyBack,
|
||
config?.stackEnabled,
|
||
bodyH,
|
||
]);
|
||
|
||
const geometryFromRuns = (runs) => {
|
||
if (!runs || runs.length === 0) return null;
|
||
return runs.map((seg) => {
|
||
const x0 = modulePositions[seg.start].x0;
|
||
const x1 = modulePositions[seg.end].x0 + modulePositions[seg.end].width;
|
||
const leftInset = horizontalInsetAt(seg.start, 'left');
|
||
const rightInset = horizontalInsetAt(seg.end, 'right');
|
||
const xa = x0 + leftInset;
|
||
const xb = x1 - rightInset;
|
||
return {
|
||
...seg,
|
||
center: -width / 2 + (xa + xb) / 2,
|
||
w: Math.max(0.02, xb - xa),
|
||
showsBack: Boolean(seg.hasBack)
|
||
};
|
||
});
|
||
};
|
||
|
||
/** Dessus structurel: 1 panneau par caisson block, séparations contiguës = 1 panneau continu. */
|
||
const topConstructionSegments = useMemo(() => {
|
||
if (!useModules || modulePositions.length === 0) return null;
|
||
return geometryFromRuns(horizontalConstructionRuns(modules, config, 'top'));
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [modulePositions, width, useModules, modules, legacyBack, config?.stackEnabled, config?.horizontalSpans, bodyH]);
|
||
|
||
/** Fond structurel: même règle que le dessus, au niveau bas. */
|
||
const bottomConstructionSegments = useMemo(() => {
|
||
if (!useModules || modulePositions.length === 0) return null;
|
||
return geometryFromRuns(horizontalConstructionRuns(modules, config, 'bottom'));
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [modulePositions, width, useModules, modules, legacyBack, config?.stackEnabled, config?.horizontalSpans, bodyH]);
|
||
|
||
// --- Hover state for width labels ---
|
||
const [hoveredModule, setHoveredModule] = useState(null);
|
||
const [hoveredShelfKey, setHoveredShelfKey] = useState(null);
|
||
const [resizeState, setResizeState] = useState(null); // { separatorIndex, hint, snapped }
|
||
const [shelfDragState, setShelfDragState] = useState(null); // { moduleIndex, shelfIndex }
|
||
const [dimensionResizeState, setDimensionResizeState] = useState(null); // { type, startValue }
|
||
/** Live gesture data (axis tracker, start values, limits); kept out of state so moves never read stale closures. */
|
||
const gestureRef = useRef(null);
|
||
|
||
const dimensionEditMode = activeStep === 1 && typeof onSetDimension === 'function';
|
||
/** Drei Html portals use a high z-index and can paint above fixed modals (e.g. plans). */
|
||
const showDimensionHtml = dimensionEditMode && !suppressHtmlOverlays;
|
||
const applyDimensionValue = useCallback((type, rawValue) => {
|
||
if (!dimensionEditMode) return;
|
||
const rules = DIMENSION_RULES[type];
|
||
if (!rules) return;
|
||
const parsed = Number(rawValue);
|
||
if (!Number.isFinite(parsed)) return;
|
||
const clamped = Math.min(rules.max, Math.max(rules.min, parsed));
|
||
const stepped = Math.round(clamped / rules.step) * rules.step;
|
||
onSetDimension?.(type, stepped);
|
||
}, [dimensionEditMode, onSetDimension]);
|
||
|
||
// --- Separator drag: the panel follows the cursor along the carcass X axis ---
|
||
const handleResizePointerDown = useCallback((separatorIndex, e) => {
|
||
e.stopPropagation();
|
||
const left = modules[separatorIndex];
|
||
const right = modules[separatorIndex + 1];
|
||
if (!left || !right) return;
|
||
e.target?.setPointerCapture?.(e.pointerId);
|
||
const { drag } = axisDragFromEvent(e, new THREE.Vector3(1, 0, 0), camera, gl.domElement);
|
||
const startLeft = left.widthMm;
|
||
const startRight = right.widthMm;
|
||
const pair = startLeft + startRight;
|
||
const lo = Math.max(left.minWidth || 300, pair - (right.maxWidth || 1200));
|
||
const hi = Math.min(left.maxWidth || 1200, pair - (right.minWidth || 300));
|
||
const otherWidths = modules
|
||
.map((m, i) => ({ value: m.widthMm, index: i }))
|
||
.filter((m) => m.index !== separatorIndex && m.index !== separatorIndex + 1);
|
||
if (controls) controls.enabled = false;
|
||
onBeginUndoableGesture?.();
|
||
gestureRef.current = { kind: 'separator', separatorIndex, drag, startLeft, startRight, pair, lo, hi, otherWidths };
|
||
setResizeState({ separatorIndex, hint: null, snapped: false });
|
||
gl.domElement.style.cursor = 'col-resize';
|
||
}, [modules, camera, gl, controls, onBeginUndoableGesture]);
|
||
|
||
const handleDimensionPointerDown = useCallback((type, e) => {
|
||
if (!dimensionEditMode) return;
|
||
let localAxis;
|
||
let factor;
|
||
if (type === 'widthMm') {
|
||
// Carcass grows symmetrically: the grabbed half of the bar follows the cursor outward.
|
||
e.object.updateWorldMatrix(true, false);
|
||
const center = new THREE.Vector3().setFromMatrixPosition(e.object.matrixWorld);
|
||
const worldX = new THREE.Vector3(1, 0, 0).transformDirection(e.object.matrixWorld);
|
||
const side = e.point && e.point.clone().sub(center).dot(worldX) < 0 ? -1 : 1;
|
||
localAxis = new THREE.Vector3(side, 0, 0);
|
||
factor = 2;
|
||
} else if (type === 'heightMm') {
|
||
localAxis = new THREE.Vector3(0, 1, 0);
|
||
factor = 1;
|
||
} else {
|
||
localAxis = new THREE.Vector3(0, 0, 1);
|
||
factor = 2;
|
||
}
|
||
const { drag } = axisDragFromEvent(e, localAxis, camera, gl.domElement);
|
||
const startValue = Number(config[type]) || 0;
|
||
if (controls) controls.enabled = false;
|
||
onBeginUndoableGesture?.();
|
||
gestureRef.current = { kind: 'dimension', type, drag, factor, startValue };
|
||
setDimensionResizeState({ type, startValue });
|
||
gl.domElement.style.cursor = type === 'heightMm' ? 'ns-resize' : 'ew-resize';
|
||
}, [dimensionEditMode, camera, gl, controls, config, onBeginUndoableGesture]);
|
||
|
||
const handleShelfPointerDown = useCallback((moduleIndex, shelfIndex, isStructural, e) => {
|
||
if (activeStep !== 2 || typeof onUpdateModule !== 'function') return;
|
||
const mod = modules[moduleIndex];
|
||
const shelfCount = Math.max(0, Number(mod?.shelves) || 0);
|
||
if (shelfCount <= 0) return;
|
||
// Colonne empilée: rangées System 32 propres à chaque block (rien dans la jonction).
|
||
const dragStack = moduleStackInfo(mod, config);
|
||
const slotsMm = system32ShelfPositionsMm(config.heightMm, config.plinthHeightMm ?? 100, dragStack);
|
||
if (!slotsMm.length) return;
|
||
const shelfPositionsMm = resolveShelfPositionsMm({
|
||
shelfCount,
|
||
heightMm: config.heightMm,
|
||
plinthHeightMm: config.plinthHeightMm ?? 100,
|
||
shelfPositionsMm: mod?.shelfPositionsMm,
|
||
stack: dragStack
|
||
});
|
||
const startPosMm = shelfPositionsMm[shelfIndex];
|
||
if (!Number.isFinite(startPosMm)) return;
|
||
e.stopPropagation();
|
||
e.target?.setPointerCapture?.(e.pointerId);
|
||
const { drag } = axisDragFromEvent(e, new THREE.Vector3(0, 1, 0), camera, gl.domElement);
|
||
if (controls) controls.enabled = false;
|
||
onBeginUndoableGesture?.();
|
||
gestureRef.current = {
|
||
kind: 'shelf',
|
||
moduleIndex,
|
||
shelfIndex,
|
||
drag,
|
||
startPosMm,
|
||
shelfPositionsMm,
|
||
originalShelfPositionsMm: mod?.shelfPositionsMm,
|
||
slotsMm
|
||
};
|
||
setShelfDragState({ moduleIndex, shelfIndex });
|
||
gl.domElement.style.cursor = 'ns-resize';
|
||
}, [activeStep, onUpdateModule, modules, config.heightMm, config.plinthHeightMm, onBeginUndoableGesture, camera, gl, controls]);
|
||
|
||
// Window-level listeners so drags stay live when the pointer leaves the canvas.
|
||
const onPointerMoveRef = useRef(null);
|
||
const onPointerUpRef = useRef(null);
|
||
const onKeyDownRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
const endGesture = () => {
|
||
const g = gestureRef.current;
|
||
if (!g) return;
|
||
gestureRef.current = null;
|
||
if (g.kind === 'separator') setResizeState(null);
|
||
if (g.kind === 'dimension') setDimensionResizeState(null);
|
||
if (g.kind === 'shelf') {
|
||
setShelfDragState(null);
|
||
setHoveredShelfKey(null);
|
||
}
|
||
gl.domElement.style.cursor = 'auto';
|
||
};
|
||
|
||
const handleMove = (e) => {
|
||
const g = gestureRef.current;
|
||
if (!g || g.cancelled) return;
|
||
const deltaMm = g.drag.deltaMeters(e.clientX, e.clientY) / SCALE;
|
||
|
||
if (g.kind === 'separator') {
|
||
const raw = g.startLeft + deltaMm;
|
||
const fine = e.shiftKey;
|
||
let next = fine ? Math.round(raw) : Math.round(raw / 10) * 10;
|
||
let snap = null;
|
||
if (!fine && !e.altKey) {
|
||
const radius = Math.max(4, SNAP_RADIUS_PX * g.drag.mmPerPx);
|
||
const roundFifty = Math.round(raw / 50) * 50;
|
||
snap = magneticSnap(raw, [
|
||
{ value: g.pair / 2, hint: '= égales' },
|
||
...g.otherWidths.map((m) => ({ value: m.value, hint: `= col. ${m.index + 1}` })),
|
||
{ value: g.startLeft, hint: 'initial' },
|
||
{ value: roundFifty, hint: null },
|
||
], radius);
|
||
if (snap) next = Math.round(snap.value);
|
||
}
|
||
next = Math.min(g.hi, Math.max(g.lo, next));
|
||
const clamped = next === g.lo || next === g.hi;
|
||
onResizeModules?.(g.separatorIndex, next - g.startLeft, { leftMm: g.startLeft, rightMm: g.startRight });
|
||
const hint = snap?.hint ?? (clamped && Math.abs(raw - next) > 1 ? 'limite' : null);
|
||
setResizeState((prev) => (
|
||
prev && (prev.hint !== hint || prev.snapped !== !!snap?.hint)
|
||
? { ...prev, hint, snapped: !!snap?.hint }
|
||
: prev
|
||
));
|
||
return;
|
||
}
|
||
|
||
if (g.kind === 'dimension') {
|
||
applyDimensionValue(g.type, g.startValue + deltaMm * g.factor);
|
||
return;
|
||
}
|
||
|
||
if (g.kind === 'shelf') {
|
||
const rawMm = g.startPosMm + deltaMm;
|
||
const slots = g.slotsMm;
|
||
let nearestIdx = 0;
|
||
let best = Infinity;
|
||
for (let i = 0; i < slots.length; i++) {
|
||
const d = Math.abs(slots[i] - rawMm);
|
||
if (d < best) {
|
||
best = d;
|
||
nearestIdx = i;
|
||
}
|
||
}
|
||
const n = g.shelfPositionsMm.length;
|
||
const minIdx = g.shelfIndex;
|
||
const maxIdx = slots.length - (n - g.shelfIndex);
|
||
nearestIdx = Math.max(minIdx, Math.min(maxIdx, nearestIdx));
|
||
const nextShelfPositions = [...g.shelfPositionsMm];
|
||
nextShelfPositions[g.shelfIndex] = slots[nearestIdx];
|
||
onUpdateModule?.(g.moduleIndex, { shelfPositionsMm: nextShelfPositions });
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (e) => {
|
||
const g = gestureRef.current;
|
||
if (!g || g.cancelled || e.key !== 'Escape') return;
|
||
e.preventDefault();
|
||
if (g.kind === 'separator') {
|
||
onResizeModules?.(g.separatorIndex, 0, { leftMm: g.startLeft, rightMm: g.startRight });
|
||
} else if (g.kind === 'dimension') {
|
||
applyDimensionValue(g.type, g.startValue);
|
||
} else if (g.kind === 'shelf') {
|
||
onUpdateModule?.(g.moduleIndex, { shelfPositionsMm: g.originalShelfPositionsMm });
|
||
}
|
||
// Stay "interacting" until the button is released so the orbit controls don't pick up the held pointer.
|
||
g.cancelled = true;
|
||
if (g.kind === 'separator') setResizeState((prev) => (prev ? { ...prev, hint: 'annulé', snapped: false } : prev));
|
||
};
|
||
|
||
onPointerMoveRef.current = handleMove;
|
||
onPointerUpRef.current = endGesture;
|
||
onKeyDownRef.current = handleKeyDown;
|
||
}, [onResizeModules, applyDimensionValue, onUpdateModule, gl]);
|
||
|
||
useEffect(() => {
|
||
const move = (e) => onPointerMoveRef.current?.(e);
|
||
const up = (e) => onPointerUpRef.current?.(e);
|
||
const key = (e) => onKeyDownRef.current?.(e);
|
||
window.addEventListener('pointermove', move);
|
||
window.addEventListener('pointerup', up);
|
||
window.addEventListener('pointercancel', up);
|
||
window.addEventListener('keydown', key);
|
||
return () => {
|
||
window.removeEventListener('pointermove', move);
|
||
window.removeEventListener('pointerup', up);
|
||
window.removeEventListener('pointercancel', up);
|
||
window.removeEventListener('keydown', key);
|
||
};
|
||
}, []);
|
||
|
||
// Disable OrbitControls during resize
|
||
const interactionActive = resizeState !== null || dimensionResizeState !== null || shelfDragState !== null;
|
||
const dimensionChipLabel = (letter, type) => {
|
||
const value = Math.round(Number(config[type]) || 0);
|
||
if (dimensionResizeState?.type !== type) return `${letter} ${value}`;
|
||
const delta = value - Math.round(dimensionResizeState.startValue);
|
||
return `${letter} ${value} mm${delta ? ` (${delta > 0 ? '+' : ''}${delta})` : ''}`;
|
||
};
|
||
useEffect(() => {
|
||
onInteractionChange?.(interactionActive);
|
||
}, [interactionActive, onInteractionChange]);
|
||
const elementClickHandler = dimensionEditMode ? undefined : onElementClick;
|
||
const moduleClickHandler = dimensionEditMode ? null : onModuleClick;
|
||
const activeStepRef = useRef(activeStep);
|
||
activeStepRef.current = activeStep;
|
||
// Invisible column/span volumes must not steal clicks off the Colonnes step.
|
||
// A stable raycast reads the ref so a stale mesh still lets the piece behind receive the click.
|
||
const columnSelectRaycast = useCallback(function columnSelectRaycast(raycaster, intersects) {
|
||
if (activeStepRef.current !== 2) return;
|
||
THREE.Mesh.prototype.raycast.call(this, raycaster, intersects);
|
||
}, []);
|
||
/**
|
||
* Colonnes: clicking a block's panels selects that block.
|
||
* Matériaux and the other steps color the piece that was actually hit, including the
|
||
* interior (dos, étagère) when the click lands inside the block.
|
||
*/
|
||
const moduleSelectFor = (moduleIndex, blockIndex = 0) => (elementType, label) => {
|
||
if (activeStepRef.current === 2 && moduleClickHandler) {
|
||
moduleClickHandler(moduleIndex, blockIndex);
|
||
return;
|
||
}
|
||
elementClickHandler?.(elementType, label);
|
||
};
|
||
|
||
return (
|
||
<group position={[0, height / 2, 0]}>
|
||
{/* Plinthe bas — planche 19 mm, reculée 20 mm du chant avant (et 20 mm des côtés libres). */}
|
||
<WardrobeElement
|
||
elementType="plintheBas"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
frontPlinthWidth,
|
||
plinthPanelH,
|
||
plinthThicknessM
|
||
]}
|
||
position={[
|
||
frontPlinthCenterX,
|
||
-height / 2 + plinthPanelH / 2,
|
||
plinthZ
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
materialProps={{ roughness: 0.7, metalness: 0.1 }}
|
||
/>
|
||
{leftPlinthReturn && (
|
||
<WardrobeElement
|
||
elementType="plintheGauche"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
plinthThicknessM,
|
||
plinthPanelH,
|
||
Math.max(0.02, getAxiloPlinthReturnLengthMm(config.depthMm || 600) * SCALE)
|
||
]}
|
||
position={[
|
||
-width / 2 + plinthSetbackM + plinthThicknessM / 2,
|
||
-height / 2 + plinthPanelH / 2,
|
||
-plinthSetbackM / 2
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
materialProps={{ roughness: 0.7, metalness: 0.1 }}
|
||
/>
|
||
)}
|
||
{rightPlinthReturn && (
|
||
<WardrobeElement
|
||
elementType="plintheDroite"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
plinthThicknessM,
|
||
plinthPanelH,
|
||
Math.max(0.02, getAxiloPlinthReturnLengthMm(config.depthMm || 600) * SCALE)
|
||
]}
|
||
position={[
|
||
width / 2 - plinthSetbackM - plinthThicknessM / 2,
|
||
-height / 2 + plinthPanelH / 2,
|
||
-plinthSetbackM / 2
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
materialProps={{ roughness: 0.7, metalness: 0.1 }}
|
||
/>
|
||
)}
|
||
|
||
{/* Dessus structurel — 1 panneau par caisson block, séparations contiguës fusionnées.
|
||
Pleine profondeur caisse : le dos 8 mm s'engage dans la rainure (axe 16 mm). */}
|
||
{!shellOnlyMode && topConstructionSegments ? (
|
||
topConstructionSegments.map((sg) => {
|
||
const closed = sg.showsBack;
|
||
return (
|
||
<group
|
||
key={`dessus-block-${sg.start}-${sg.end}`}
|
||
position={[sg.center, bodyH / 2 + plinthH / 2 - PANEL_THICKNESS / 2, 0]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="dessus"
|
||
geometryType="box"
|
||
geometryArgs={[sg.w + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{closed && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-top"
|
||
innerW={sg.w}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
);
|
||
})
|
||
) : (
|
||
<group position={[horizontalPanelCenterX, bodyH / 2 + plinthH / 2 - PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="dessus"
|
||
geometryType="box"
|
||
geometryArgs={[horizontalPanelWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{anyBack && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-top"
|
||
innerW={horizontalPanelWidth}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
)}
|
||
|
||
{/* Fond structurel — 1 panneau par caisson block, séparations contiguës fusionnées.
|
||
Pleine profondeur caisse : le dos 8 mm s'engage dans la rainure (axe 16 mm). */}
|
||
{!shellOnlyMode && bottomConstructionSegments ? (
|
||
bottomConstructionSegments.map((sg) => {
|
||
const closed = sg.showsBack;
|
||
return (
|
||
<group
|
||
key={`fond-block-${sg.start}-${sg.end}`}
|
||
position={[sg.center, -height / 2 + plinthH + PANEL_THICKNESS / 2, 0]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="fond"
|
||
geometryType="box"
|
||
geometryArgs={[sg.w + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{closed && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-bottom"
|
||
innerW={sg.w}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
);
|
||
})
|
||
) : (
|
||
<group position={[horizontalPanelCenterX, -height / 2 + plinthH + PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="fond"
|
||
geometryType="box"
|
||
geometryArgs={[horizontalPanelWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{anyBack && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-bottom"
|
||
innerW={horizontalPanelWidth}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
)}
|
||
|
||
{/* Empilage vertical PAR COLONNE: chaque jonction = dessus du block inférieur + fond du block supérieur.
|
||
Masqué à l'étape Espace (carcasse seule). */}
|
||
{!shellOnlyMode && (useModules ? (
|
||
modules.flatMap((m, i) => {
|
||
const jointYs = modJointYs(i);
|
||
if (jointYs.length === 0) return [];
|
||
const backs = modBacks(i);
|
||
const leftInset = horizontalInsetAt(i, 'left');
|
||
const rightInset = horizontalInsetAt(i, 'right');
|
||
const panelW = Math.max(0.02, modulePositions[i].width - leftInset - rightInset);
|
||
const cx = -width / 2 + modulePositions[i].x0 + leftInset + panelW / 2;
|
||
const renderW = panelW + JOIN_OVERLAP_M * 2;
|
||
return jointYs.flatMap((jointY, k) => [
|
||
!stackPanelCovered(i, jointY, 'lower') && <group key={`stack-joint-${m?.id ?? i}-${k}-bas`} position={[cx, jointY - PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="dessus"
|
||
geometryType="box"
|
||
geometryArgs={[renderW, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{backs[k] && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-top"
|
||
innerW={panelW}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>,
|
||
!stackPanelCovered(i, jointY, 'upper') && <group key={`stack-joint-${m?.id ?? i}-${k}-haut`} position={[cx, jointY + PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="fond"
|
||
geometryType="box"
|
||
geometryArgs={[renderW, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{backs[k + 1] && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-bottom"
|
||
innerW={panelW}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
].filter(Boolean));
|
||
})
|
||
) : (
|
||
anyStacked &&
|
||
modJointYs(0).flatMap((jointY, k) => [
|
||
<group key={`stack-joint-legacy-${k}-bas`} position={[horizontalPanelCenterX, jointY - PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="dessus"
|
||
geometryType="box"
|
||
geometryArgs={[horizontalPanelWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
</group>,
|
||
<group key={`stack-joint-legacy-${k}-haut`} position={[horizontalPanelCenterX, jointY + PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="fond"
|
||
geometryType="box"
|
||
geometryArgs={[horizontalPanelWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
</group>
|
||
])
|
||
))}
|
||
|
||
{/* Côtés extérieurs — chaque block passe entre ses panneaux horizontaux s'il est habillé.
|
||
Étape Espace: un côté continu (pas de joints de blocks). */}
|
||
{[
|
||
{
|
||
side: 'left',
|
||
x: -width / 2 + PANEL_THICKNESS / 2 + (sideAssemblyLeft ? PANEL_THICKNESS : 0),
|
||
inset: sideAssemblyLeft,
|
||
heights: shellOnlyMode ? [bodyH / SCALE] : modHeightsMm(0),
|
||
backs: shellOnlyMode ? [backAtLeftSide] : modBacks(0),
|
||
grooveVariant: 'vertical-left',
|
||
fallbackBack: backAtLeftSide
|
||
},
|
||
{
|
||
side: 'right',
|
||
x: width / 2 - PANEL_THICKNESS / 2 - (sideAssemblyRight ? PANEL_THICKNESS : 0),
|
||
inset: sideAssemblyRight,
|
||
heights: shellOnlyMode
|
||
? [bodyH / SCALE]
|
||
: modHeightsMm(Math.max(0, modules.length - 1)),
|
||
backs: shellOnlyMode
|
||
? [backAtRightSide]
|
||
: modBacks(Math.max(0, modules.length - 1)),
|
||
grooveVariant: 'vertical-right',
|
||
fallbackBack: backAtRightSide
|
||
}
|
||
].flatMap((sideInfo) => {
|
||
let offsetMm = 0;
|
||
return sideInfo.heights.map((blockHeightMm, blockIndex) => {
|
||
const blockHeight = blockHeightMm * SCALE;
|
||
const panelHeight = Math.max(
|
||
0.02,
|
||
blockHeight - (sideInfo.inset ? PANEL_THICKNESS * 2 : 0) + JOIN_OVERLAP_M
|
||
);
|
||
const centerY = -height / 2 + plinthH + offsetMm * SCALE + blockHeight / 2;
|
||
offsetMm += blockHeightMm;
|
||
const hasBack = sideInfo.backs?.[blockIndex] ?? sideInfo.fallbackBack;
|
||
return (
|
||
<group
|
||
key={`cote-${sideInfo.side}-block-${blockIndex}`}
|
||
position={[sideInfo.x, centerY, 0]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="cotes"
|
||
geometryType="box"
|
||
geometryArgs={[PANEL_THICKNESS, panelHeight, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(
|
||
sideInfo.side === 'left' ? 0 : Math.max(0, modules.length - 1),
|
||
blockIndex
|
||
)}
|
||
/>
|
||
{hasBack && (
|
||
<BackGrooveVisual3D
|
||
variant={sideInfo.grooveVariant}
|
||
thickness={PANEL_THICKNESS}
|
||
panelH={panelHeight}
|
||
panelD={depth}
|
||
/>
|
||
)}
|
||
</group>
|
||
);
|
||
});
|
||
})}
|
||
|
||
{/* Habillages de finition (Libre + Premium) */}
|
||
{!isNiche && exteriorFinishesEnabled && (
|
||
<>
|
||
{/* Habillage gauche */}
|
||
{sideFinishLeftEnabled && (
|
||
<WardrobeElement
|
||
elementType="habillageFinitionGauche"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
PANEL_THICKNESS,
|
||
(topFinishEnabled ? bodyH + PANEL_THICKNESS : bodyH) + plinthH,
|
||
depth
|
||
]}
|
||
position={[
|
||
-width / 2 + PANEL_THICKNESS / 2,
|
||
topFinishEnabled ? PANEL_THICKNESS / 2 : 0,
|
||
0
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
)}
|
||
{/* Habillage droite */}
|
||
{sideFinishRightEnabled && (
|
||
<WardrobeElement
|
||
elementType="habillageFinitionDroite"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
PANEL_THICKNESS,
|
||
(topFinishEnabled ? bodyH + PANEL_THICKNESS : bodyH) + plinthH,
|
||
depth
|
||
]}
|
||
position={[
|
||
width / 2 - PANEL_THICKNESS / 2,
|
||
topFinishEnabled ? PANEL_THICKNESS / 2 : 0,
|
||
0
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
)}
|
||
{/* Habillage dessus — 1 bandeau continu ou 1 par zone (caissons avec dos) */}
|
||
{topFinishEnabled && (
|
||
splitTopPerZone && topSegments ? (
|
||
topSegments.map((sg, i) => {
|
||
const isFirst = sg.start === 0;
|
||
const isLast = sg.end === modules.length - 1;
|
||
const rawW = sg.rawX1 - sg.rawX0;
|
||
const rawC = -width / 2 + (sg.rawX0 + sg.rawX1) / 2;
|
||
const tl = isFirst ? 0 : PANEL_THICKNESS;
|
||
const tr = isLast ? 0 : PANEL_THICKNESS;
|
||
const habitW = Math.max(0.001, rawW + tl + tr);
|
||
const cx = rawC + (tr - tl) / 2;
|
||
return (
|
||
<WardrobeElement
|
||
key={`hab-top-seg-${i}`}
|
||
elementType="habillageFinitionDessus"
|
||
geometryType="box"
|
||
geometryArgs={[habitW, PANEL_THICKNESS, depth]}
|
||
position={[cx, plinthH / 2 + bodyH / 2 + PANEL_THICKNESS / 2, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
);
|
||
})
|
||
) : (
|
||
(() => {
|
||
const habitW = Math.max(0.001, width);
|
||
const cx = 0;
|
||
return (
|
||
<WardrobeElement
|
||
elementType="habillageFinitionDessus"
|
||
geometryType="box"
|
||
geometryArgs={[habitW, PANEL_THICKNESS, depth]}
|
||
position={[cx, plinthH / 2 + bodyH / 2 + PANEL_THICKNESS / 2, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
);
|
||
})()
|
||
)
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Dos (back panel) — 8 mm per APEX 4.0 spec — par zone (colonne × niveau si empilage) */}
|
||
{useModules && !shellOnlyMode ? (
|
||
modules.flatMap((m, i) => {
|
||
const leftInset = horizontalInsetAt(i, 'left');
|
||
const rightInset = horizontalInsetAt(i, 'right');
|
||
const innerW = Math.max(0.02, modulePositions[i].width - leftInset - rightInset);
|
||
const panelW = innerW + BACK_PANEL_GROOVE_INSERT_M * 2;
|
||
const panelCenter = -width / 2 + modulePositions[i].x0 + leftInset + innerW / 2;
|
||
const heightsM = modHeightsMm(i).map((h) => h * SCALE);
|
||
const backs = modBacks(i);
|
||
let accY = -height / 2 + plinthH;
|
||
const zones = heightsM.map((hM, k) => {
|
||
const zone = {
|
||
key: `blk${k}`,
|
||
blockIndex: k,
|
||
on: backs[k],
|
||
h: hM - PANEL_THICKNESS * 2 + BACK_PANEL_GROOVE_INSERT_M * 2,
|
||
y: accY + hM / 2
|
||
};
|
||
accY += hM;
|
||
return zone;
|
||
});
|
||
return zones
|
||
.filter((z) => z.on && z.h > 0.02 && !spanCoversBlock(i, z.blockIndex))
|
||
.map((z) => (
|
||
<WardrobeElement
|
||
key={`dos-${m?.id ?? i}-${z.key}`}
|
||
elementType="dos"
|
||
geometryType="box"
|
||
geometryArgs={[panelW, z.h, BACK_PANEL_THICKNESS]}
|
||
position={[panelCenter, z.y, -depth / 2 + BACK_PANEL_AXIS_FROM_REAR_M]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(i, z.blockIndex)}
|
||
materialProps={{ roughness: 0.8 }}
|
||
/>
|
||
));
|
||
})
|
||
) : (
|
||
anyBack && (
|
||
<WardrobeElement
|
||
elementType="dos"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
width - PANEL_THICKNESS * 2 + BACK_PANEL_GROOVE_INSERT_M * 2,
|
||
bodyH - PANEL_THICKNESS * 2 + BACK_PANEL_GROOVE_INSERT_M * 2,
|
||
BACK_PANEL_THICKNESS
|
||
]}
|
||
position={[0, plinthH / 2, -depth / 2 + BACK_PANEL_AXIS_FROM_REAR_M]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
materialProps={{ roughness: 0.8 }}
|
||
/>
|
||
)
|
||
)}
|
||
|
||
{/* Outline to keep wardrobe edges readable through niche wall */}
|
||
{config?.installationType === 'niche' && (
|
||
<WardrobeOutline width={width} height={height} depth={depth} />
|
||
)}
|
||
|
||
{/* Fileurs de niche surdimensionnés à 50 mm, recoupés sur place au profil des murs. */}
|
||
{isNiche && (
|
||
<>
|
||
<WardrobeElement
|
||
elementType="fileur"
|
||
geometryType="box"
|
||
geometryArgs={[0.05, nicheOpeningHeight, PANEL_THICKNESS]}
|
||
position={[
|
||
-nicheOpeningWidth / 2 + 0.025,
|
||
(nicheOpeningHeight - height) / 2,
|
||
depth / 2 + PANEL_THICKNESS / 2
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
<WardrobeElement
|
||
elementType="fileur"
|
||
geometryType="box"
|
||
geometryArgs={[0.05, nicheOpeningHeight, PANEL_THICKNESS]}
|
||
position={[
|
||
nicheOpeningWidth / 2 - 0.025,
|
||
(nicheOpeningHeight - height) / 2,
|
||
depth / 2 + PANEL_THICKNESS / 2
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
<WardrobeElement
|
||
elementType="fileur"
|
||
geometryType="box"
|
||
geometryArgs={[nicheOpeningWidth, 0.05, PANEL_THICKNESS]}
|
||
position={[
|
||
0,
|
||
nicheOpeningHeight - height / 2 - 0.025,
|
||
depth / 2 + PANEL_THICKNESS / 2
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* Separators between modules — jonction caisson↔caisson: double montant; sinon panneau simple */}
|
||
{!shellOnlyMode && useModules && onResizeModules
|
||
? separatorPositions.flatMap((pos, i) => {
|
||
const style = boundaryAnyBlock(pos.index) ? sepStyleBlock : sepStyleSeparations;
|
||
const xs = montantXsAt(pos.x, pos.index);
|
||
return xs.map((xSep, j) => (
|
||
<ResizableSeparator
|
||
key={`sep-resize-${i}-${j}`}
|
||
position={[xSep, style.y, 0]}
|
||
height={style.h}
|
||
depth={separatorDepthM}
|
||
zCenter={separatorZ}
|
||
visibleSegments={separatorSegmentsFor(pos.index, style)}
|
||
separatorIndex={pos.index}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
isResizing={resizeState?.separatorIndex === pos.index}
|
||
onResizePointerDown={handleResizePointerDown}
|
||
/>
|
||
));
|
||
})
|
||
: !shellOnlyMode && separatorPositions.flatMap((pos, i) => {
|
||
const style = boundaryAnyBlock(pos.index) ? sepStyleBlock : sepStyleSeparations;
|
||
const xs = montantXsAt(pos.x, pos.index);
|
||
const visibleSegments = separatorSegmentsFor(pos.index, style);
|
||
return xs.flatMap((xSep, j) => visibleSegments.map((segment, segmentIndex) => (
|
||
<group
|
||
key={`sep-${i}-${j}-${segmentIndex}`}
|
||
position={[xSep, style.y + segment.centerY, separatorZ]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="panneauxInterieurs"
|
||
geometryType="box"
|
||
geometryArgs={[PANEL_THICKNESS, segment.height, separatorDepthM]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
</group>
|
||
)));
|
||
})
|
||
}
|
||
|
||
{/* Multi-column horizontal spans: shared panels/back and one span-wide selection target. */}
|
||
{!shellOnlyMode && resolvedHorizontalSpans.map((resolved) => {
|
||
const firstIndex = resolved.moduleIndexes[0];
|
||
const lastIndex = resolved.moduleIndexes[resolved.moduleIndexes.length - 1];
|
||
const leftInset = horizontalInsetAt(firstIndex, 'left');
|
||
const rightInset = horizontalInsetAt(lastIndex, 'right');
|
||
const rawLeft = -width / 2 + resolved.leftMm * SCALE;
|
||
const rawRight = -width / 2 + resolved.rightMm * SCALE;
|
||
const panelLeft = rawLeft + leftInset;
|
||
const panelRight = rawRight - rightInset;
|
||
const panelWidth = Math.max(0.02, panelRight - panelLeft);
|
||
const renderPanelWidth = panelWidth + JOIN_OVERLAP_M * 2;
|
||
const centerX = (panelLeft + panelRight) / 2;
|
||
const backLeft =
|
||
rawLeft + (firstIndex === 0 ? PANEL_THICKNESS : PANEL_THICKNESS / 2);
|
||
const backRight =
|
||
rawRight - (lastIndex === modules.length - 1 ? PANEL_THICKNESS : PANEL_THICKNESS / 2);
|
||
const backWidth = Math.max(0.02, backRight - backLeft);
|
||
const backCenterX = (backLeft + backRight) / 2;
|
||
const bodyBottomY = -height / 2 + plinthH;
|
||
const bottomY = bodyBottomY + resolved.bottomMm * SCALE;
|
||
const topY = bodyBottomY + resolved.topMm * SCALE;
|
||
const spanHeight = Math.max(0.02, topY - bottomY);
|
||
const hasOwnBottom = resolved.bottomMm > 0.5;
|
||
const hasOwnTop = resolved.topMm < bodyH / SCALE - 0.5;
|
||
const selected = String(selectedHorizontalSpanId) === String(resolved.span.id);
|
||
const clickSpan = (e) => {
|
||
if (e.delta > 5) return;
|
||
e.stopPropagation();
|
||
onHorizontalSpanClick?.(resolved.span.id);
|
||
};
|
||
const doorMode = resolved.span.doorMode ?? HORIZONTAL_SPAN_DOOR_MODES.none;
|
||
const spanDoorClick =
|
||
activeStep === 2 && onHorizontalSpanClick
|
||
? () => onHorizontalSpanClick(resolved.span.id)
|
||
: elementClickHandler;
|
||
const makeSpanDoor = ({
|
||
key,
|
||
doorCenterX,
|
||
doorWidth,
|
||
hingeModuleIndex,
|
||
hingeSideOverride
|
||
}) => {
|
||
const doorHeight = Math.max(0.04, spanHeight - 2 * FACADE_REVEAL_M);
|
||
const facadeWidth = Math.max(0.04, doorWidth - 2 * FACADE_REVEAL_M);
|
||
const doorCount = Math.max(1, modules.length);
|
||
const overrideSides =
|
||
Array.isArray(hw.doorHingeSides) && hw.doorHingeSides.length === doorCount
|
||
? hw.doorHingeSides
|
||
: null;
|
||
const hingeSide =
|
||
hingeSideOverride
|
||
? hingeSideOverride
|
||
: overrideSides
|
||
? (overrideSides[hingeModuleIndex] === 'right' ? 'right' : 'left')
|
||
: getDoorHingeSide(hingeModuleIndex, doorCount, hw);
|
||
const angle = hingeSide === 'left' ? -doorOpenAngle : doorOpenAngle;
|
||
const hingeX = hingeSide === 'left'
|
||
? doorCenterX - facadeWidth / 2
|
||
: doorCenterX + facadeWidth / 2;
|
||
const localX = hingeSide === 'left' ? facadeWidth / 2 : -facadeWidth / 2;
|
||
|
||
return (
|
||
<group
|
||
key={key}
|
||
position={[hingeX, (bottomY + topY) / 2, depth / 2 + 0.004]}
|
||
rotation={[0, angle, 0]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="portes"
|
||
geometryType="plane"
|
||
geometryArgs={[facadeWidth, doorHeight]}
|
||
position={[localX, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={spanDoorClick}
|
||
transparent={true}
|
||
opacity={0.9}
|
||
materialProps={{ roughness: 0.5 }}
|
||
/>
|
||
</group>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<group key={`horizontal-span-${resolved.span.id}`}>
|
||
{hasOwnBottom && (
|
||
<group position={[centerX, bottomY + PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="fond"
|
||
geometryType="box"
|
||
geometryArgs={[renderPanelWidth, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{resolved.span.hasBack && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-bottom"
|
||
innerW={panelWidth}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
)}
|
||
{hasOwnTop && (
|
||
<group position={[centerX, topY - PANEL_THICKNESS / 2, 0]}>
|
||
<WardrobeElement
|
||
elementType="dessus"
|
||
geometryType="box"
|
||
geometryArgs={[renderPanelWidth, PANEL_THICKNESS, depth]}
|
||
position={[0, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
/>
|
||
{resolved.span.hasBack && (
|
||
<BackGrooveVisual3D
|
||
variant="horizontal-top"
|
||
innerW={panelWidth}
|
||
innerD={depth}
|
||
thickness={PANEL_THICKNESS}
|
||
/>
|
||
)}
|
||
</group>
|
||
)}
|
||
{resolved.span.hasBack && spanHeight > PANEL_THICKNESS * 2 && (
|
||
<WardrobeElement
|
||
elementType="dos"
|
||
geometryType="box"
|
||
geometryArgs={[
|
||
backWidth + BACK_PANEL_GROOVE_INSERT_M * 2,
|
||
spanHeight - PANEL_THICKNESS * 2 + BACK_PANEL_GROOVE_INSERT_M * 2,
|
||
BACK_PANEL_THICKNESS
|
||
]}
|
||
position={[
|
||
backCenterX,
|
||
(bottomY + topY) / 2,
|
||
-depth / 2 + BACK_PANEL_AXIS_FROM_REAR_M
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
materialProps={{ roughness: 0.8 }}
|
||
/>
|
||
)}
|
||
<mesh
|
||
position={[centerX, (bottomY + topY) / 2, depth * 0.12]}
|
||
raycast={columnSelectRaycast}
|
||
onClick={(e) => {
|
||
if (activeStepRef.current !== 2) return;
|
||
clickSpan(e);
|
||
}}
|
||
>
|
||
<boxGeometry args={[panelWidth, spanHeight, depth * 0.72]} />
|
||
<meshBasicMaterial transparent opacity={0} depthWrite={false} />
|
||
</mesh>
|
||
{showDoors && doorMode === HORIZONTAL_SPAN_DOOR_MODES.perColumn && (
|
||
<>
|
||
{makeSpanDoor({
|
||
key: `horizontal-span-door-${resolved.span.id}-left`,
|
||
doorCenterX: rawLeft + (rawRight - rawLeft) / 4,
|
||
doorWidth: (rawRight - rawLeft) / 2,
|
||
hingeModuleIndex: firstIndex,
|
||
hingeSideOverride: 'left'
|
||
})}
|
||
{makeSpanDoor({
|
||
key: `horizontal-span-door-${resolved.span.id}-right`,
|
||
doorCenterX: rawLeft + 3 * (rawRight - rawLeft) / 4,
|
||
doorWidth: (rawRight - rawLeft) / 2,
|
||
hingeModuleIndex: lastIndex,
|
||
hingeSideOverride: 'right'
|
||
})}
|
||
</>
|
||
)}
|
||
{showDoors && doorMode === HORIZONTAL_SPAN_DOOR_MODES.single && (
|
||
makeSpanDoor({
|
||
key: `horizontal-span-door-${resolved.span.id}-single`,
|
||
doorCenterX: (rawLeft + rawRight) / 2,
|
||
doorWidth: rawRight - rawLeft,
|
||
hingeModuleIndex: firstIndex
|
||
})
|
||
)}
|
||
{activeStep === 2 && selected && (
|
||
<mesh
|
||
position={[centerX, (bottomY + topY) / 2, 0]}
|
||
renderOrder={42}
|
||
raycast={() => null}
|
||
>
|
||
<boxGeometry args={[panelWidth, spanHeight, depth * 0.96]} />
|
||
<meshBasicMaterial
|
||
color="#7c3aed"
|
||
transparent
|
||
opacity={0.2}
|
||
depthWrite={false}
|
||
/>
|
||
<Edges color="#c084fc" threshold={15} scale={1.008} renderOrder={43} />
|
||
</mesh>
|
||
)}
|
||
</group>
|
||
);
|
||
})}
|
||
|
||
{/* Width labels -- show during resize or hover */}
|
||
{!shellOnlyMode && !suppressHtmlOverlays && modules.length > 0 && (resizeState !== null || hoveredModule !== null) && (
|
||
<>
|
||
{resizeState !== null && (
|
||
<>
|
||
{modules[resizeState.separatorIndex] && (
|
||
<WidthLabel
|
||
position={[modulePositions[resizeState.separatorIndex]?.center || 0, bodyH / 2 + plinthH / 2 + 0.06, depth / 2]}
|
||
widthMm={modules[resizeState.separatorIndex].widthMm}
|
||
hint={resizeState.hint}
|
||
snapped={resizeState.snapped}
|
||
/>
|
||
)}
|
||
{modules[resizeState.separatorIndex + 1] && (
|
||
<WidthLabel
|
||
position={[modulePositions[resizeState.separatorIndex + 1]?.center || 0, bodyH / 2 + plinthH / 2 + 0.06, depth / 2]}
|
||
widthMm={modules[resizeState.separatorIndex + 1].widthMm}
|
||
snapped={resizeState.snapped}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
{resizeState === null && hoveredModule !== null && modules[hoveredModule] && (
|
||
<WidthLabel
|
||
position={[modulePositions[hoveredModule]?.center || 0, bodyH / 2 + plinthH / 2 + 0.06, depth / 2]}
|
||
widthMm={modules[hoveredModule].widthMm}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{shellOnlyMode && useModules && (
|
||
<LayoutGhost
|
||
config={config}
|
||
modules={modules}
|
||
modulePositions={modulePositions}
|
||
height={height}
|
||
depth={depth}
|
||
plinthH={plinthH}
|
||
/>
|
||
)}
|
||
|
||
{/* Module contents: doors, shelves, rods, drawers + click-to-select */}
|
||
{!shellOnlyMode && useModules && modules.map((module, moduleIndex) => {
|
||
const pos = modulePositions[moduleIndex];
|
||
if (!pos) return null;
|
||
const moduleCenter = pos.center;
|
||
const moduleWidth = pos.width;
|
||
const innerLeftInset = horizontalInsetAt(moduleIndex, 'left');
|
||
const innerRightInset = horizontalInsetAt(moduleIndex, 'right');
|
||
const innerWidth = Math.max(0.02, moduleWidth - innerLeftInset - innerRightInset);
|
||
const innerCenter = moduleCenter + (innerLeftInset - innerRightInset) / 2;
|
||
const shelfCount = module.shelves || 0;
|
||
const drawersCount = module.drawers || 0;
|
||
const isSelected = selectedModuleIndex === moduleIndex;
|
||
const blockHeightsM = modHeightsMm(moduleIndex).map((h) => h * SCALE);
|
||
const blockZones = [];
|
||
let blockOffsetY = -height / 2 + plinthH;
|
||
blockHeightsM.forEach((blockHeight, blockIndex) => {
|
||
blockZones.push({
|
||
blockIndex,
|
||
height: blockHeight,
|
||
centerY: blockOffsetY + blockHeight / 2
|
||
});
|
||
blockOffsetY += blockHeight;
|
||
});
|
||
const selectedBlock = blockZones[Math.min(Math.max(0, selectedBlockIndex || 0), blockZones.length - 1)];
|
||
const blockIndexAtY = (y) => {
|
||
const match = blockZones.find((zone) => (
|
||
y >= zone.centerY - zone.height / 2 && y <= zone.centerY + zone.height / 2
|
||
));
|
||
return match?.blockIndex ?? 0;
|
||
};
|
||
// Colonne empilée: la jonction bas/haut est structurelle → pas de fenêtre structurelle à imposer.
|
||
const moduleStack = moduleStackInfo(module, config);
|
||
const needsMiddleFix = !moduleStack && minShelvesForStructuralHeight(config.heightMm || 2400) > 0;
|
||
const bodyHmm = (Number(config.heightMm) || 0) - (Number(config.plinthHeightMm) || 0);
|
||
const bodyMidMm = bodyHmm / 2;
|
||
const structuralMinMm = bodyMidMm - STRUCTURAL_WINDOW_HALF_MM;
|
||
const structuralMaxMm = bodyMidMm + STRUCTURAL_WINDOW_HALF_MM;
|
||
const resolvedShelfPositionsMm = resolveShelfPositionsMm({
|
||
shelfCount,
|
||
heightMm: config.heightMm,
|
||
plinthHeightMm: config.plinthHeightMm ?? 100,
|
||
shelfPositionsMm: module.shelfPositionsMm,
|
||
stack: moduleStack
|
||
});
|
||
const hasShelfInStructuralWindow =
|
||
!needsMiddleFix ||
|
||
resolvedShelfPositionsMm.some((p) => p >= structuralMinMm && p <= structuralMaxMm);
|
||
const structuralZoneCenterY =
|
||
-height / 2 + plinthH + (bodyMidMm / 1000);
|
||
const structuralZoneHeight = (STRUCTURAL_WINDOW_HALF_MM * 2) / 1000;
|
||
const moduleSpanForZone = innerWidth;
|
||
const depthSpanForZone = Math.max(0.02, depth * 0.9);
|
||
const shelfCenterYs = shelfCenterYsMeters({
|
||
shelfCount,
|
||
heightM: height,
|
||
plinthHM: plinthH,
|
||
shelfGapMm: module.shelfGapMm,
|
||
shelfPositionsMm: resolvedShelfPositionsMm,
|
||
});
|
||
|
||
return (
|
||
<group key={`mod-${module.id}`}>
|
||
{/* Invisible volume filling the block. It only receives clicks on Colonnes.
|
||
On Matériaux the raycast is skipped so the click hits the piece inside (dos, étagère…). */}
|
||
{blockZones.map((zone) => (
|
||
<mesh
|
||
key={`block-hit-${moduleIndex}-${zone.blockIndex}`}
|
||
position={[moduleCenter, zone.centerY, 0]}
|
||
raycast={columnSelectRaycast}
|
||
onPointerOver={() => {
|
||
if (activeStepRef.current !== 2) return;
|
||
setHoveredModule(moduleIndex);
|
||
}}
|
||
onPointerOut={() => setHoveredModule(prev => prev === moduleIndex ? null : prev)}
|
||
onClick={(e) => {
|
||
if (activeStepRef.current !== 2) return;
|
||
// Ignore clicks that end a drag gesture (shelf/separator resize)
|
||
if (e.delta > 5) return;
|
||
e.stopPropagation();
|
||
if (moduleClickHandler) moduleClickHandler(moduleIndex, zone.blockIndex);
|
||
}}
|
||
>
|
||
<boxGeometry args={[moduleWidth - PANEL_THICKNESS * 2, Math.max(0.02, zone.height - PANEL_THICKNESS * 2), depth * 0.5]} />
|
||
<meshBasicMaterial transparent opacity={0} depthWrite={false} />
|
||
</mesh>
|
||
))}
|
||
|
||
{/* Highlight only on Colonnes. On Matériaux the block must not stay marked as selected. */}
|
||
{activeStep === 2 && isSelected && selectedBlock && (
|
||
<mesh
|
||
position={[moduleCenter, selectedBlock.centerY, 0]}
|
||
renderOrder={40}
|
||
raycast={() => null}
|
||
>
|
||
<boxGeometry args={[moduleWidth * 0.98, selectedBlock.height * 0.98, depth * 0.98]} />
|
||
<meshBasicMaterial
|
||
color="#0066ff"
|
||
transparent
|
||
opacity={0.18}
|
||
depthWrite={false}
|
||
/>
|
||
<Edges
|
||
color="#00eaff"
|
||
threshold={15}
|
||
scale={1.008}
|
||
renderOrder={41}
|
||
/>
|
||
</mesh>
|
||
)}
|
||
|
||
{activeStep === 2 && needsMiddleFix && !hasShelfInStructuralWindow && (
|
||
<group position={[moduleCenter, structuralZoneCenterY, 0]}>
|
||
<mesh>
|
||
<boxGeometry args={[moduleSpanForZone, structuralZoneHeight, depthSpanForZone]} />
|
||
<meshBasicMaterial color="#ef4444" transparent opacity={0.12} />
|
||
</mesh>
|
||
<mesh position={[0, 0, depth / 2 + 0.004]}>
|
||
<planeGeometry args={[moduleSpanForZone, structuralZoneHeight]} />
|
||
<meshBasicMaterial color="#dc2626" transparent opacity={0.2} />
|
||
</mesh>
|
||
</group>
|
||
)}
|
||
|
||
{/* Portes battantes per module — 1 porte par block avec porte (block sans porte = niche ouverte) */}
|
||
{showDoors && !isSliding && (
|
||
(() => {
|
||
const doorW = Math.max(0.04, moduleWidth - 2 * FACADE_REVEAL_M);
|
||
const drawerCount = Math.max(0, Number(module?.drawers) || 0);
|
||
const drawerHeightsMm = Array.isArray(hw.drawerHeightsMm) ? hw.drawerHeightsMm : [90, 128, 177, 240];
|
||
const drawerStackMmRaw = drawerStackHeightMm(drawerCount, drawerHeightsMm);
|
||
const drawerStackM = Math.min(bodyH * 0.78, Math.max(0, drawerStackMmRaw) * SCALE);
|
||
/** Caché : porte pleine hauteur ; Visible : porte au-dessus du bandeau tiroirs. */
|
||
const drawerHidden = ['hidden', 'hidden_with_handle'].includes(
|
||
module.drawerType || hw.drawerType || 'visible'
|
||
);
|
||
const splitDoorOverDrawers = drawerCount > 0 && !drawerHidden;
|
||
const doorCount = Math.max(1, modules.length);
|
||
const overrideSides =
|
||
Array.isArray(hw.doorHingeSides) && hw.doorHingeSides.length === doorCount
|
||
? hw.doorHingeSides
|
||
: null;
|
||
const hingeSide =
|
||
overrideSides
|
||
? (overrideSides[moduleIndex] === 'right' ? 'right' : 'left')
|
||
: getDoorHingeSide(moduleIndex, doorCount, hw);
|
||
// Rotate so the free edge swings toward the front (+Z), i.e. "outside" the carcass.
|
||
const angle = hingeSide === 'left' ? -doorOpenAngle : doorOpenAngle;
|
||
const hingeX = hingeSide === 'left'
|
||
? moduleCenter - doorW / 2
|
||
: moduleCenter + doorW / 2;
|
||
const localX = hingeSide === 'left' ? doorW / 2 : -doorW / 2;
|
||
|
||
const blockDoors = moduleBlockDoors(module, config, blockHeightsM.length);
|
||
const out = [];
|
||
let startY = 0; // depuis le bas de caisse (m)
|
||
for (let k = 0; k < blockHeightsM.length; k++) {
|
||
const hk = blockHeightsM[k];
|
||
const blockStart = startY;
|
||
startY += hk;
|
||
if (!blockDoors[k] || spanCoversBlock(moduleIndex, k)) continue;
|
||
// Tiroirs (partent du bas): la porte du block bas commence au-dessus du bandeau tiroirs.
|
||
const drawerStackForDoor = k === 0 && splitDoorOverDrawers ? drawerStackM : 0;
|
||
const doorH = Math.max(
|
||
0.08,
|
||
hk - 2 * FACADE_REVEAL_M - drawerStackForDoor - (drawerStackForDoor > 0 ? 2 * FACADE_REVEAL_M : 0)
|
||
);
|
||
const doorCenterY = -height / 2 + plinthH + blockStart + hk / 2 + drawerStackForDoor / 2;
|
||
out.push(
|
||
<group
|
||
key={`door-${module?.id ?? moduleIndex}-${k}`}
|
||
position={[hingeX, doorCenterY, depth / 2 + 0.002]}
|
||
rotation={[0, angle, 0]}
|
||
>
|
||
<WardrobeElement
|
||
elementType="portes"
|
||
geometryType="plane"
|
||
geometryArgs={[doorW, doorH]}
|
||
position={[localX, 0, 0]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(moduleIndex, k)}
|
||
transparent={true}
|
||
opacity={0.9}
|
||
materialProps={{ roughness: 0.5 }}
|
||
/>
|
||
</group>
|
||
);
|
||
}
|
||
return out;
|
||
})()
|
||
)}
|
||
|
||
{/* Shelves */}
|
||
{(() => {
|
||
const bottomInside = -height / 2 + plinthH + PANEL_THICKNESS;
|
||
const innerSpan = bodyH - 2 * PANEL_THICKNESS;
|
||
const yMiddle = bottomInside + innerSpan / 2;
|
||
const tolM = 0.2; // ±20 cm tolerance around middle
|
||
let structuralIdx = null;
|
||
let best = Infinity;
|
||
for (let i = 0; i < shelfCount; i++) {
|
||
const y = shelfCenterYs[i];
|
||
if (y == null) continue;
|
||
const d = Math.abs(y - yMiddle);
|
||
if (d < best) {
|
||
best = d;
|
||
structuralIdx = i;
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{Array.from({ length: shelfCount }).map((_, shelfIndex) => {
|
||
const shelfY = shelfCenterYs[shelfIndex];
|
||
if (spanCoversY(moduleIndex, shelfY)) return null;
|
||
const isStructural = needsMiddleFix && shelfIndex === structuralIdx;
|
||
const shelfKey = `${moduleIndex}-${shelfIndex}`;
|
||
const isShelfHovered = hoveredShelfKey === shelfKey;
|
||
const isShelfDragging =
|
||
shelfDragState?.moduleIndex === moduleIndex && shelfDragState?.shelfIndex === shelfIndex;
|
||
return (
|
||
<group key={`shelf-${moduleIndex}-${shelfIndex}`}>
|
||
<WardrobeElement
|
||
elementType={isStructural ? 'rayonFixe' : 'panneauxInterieurs'}
|
||
geometryType="box"
|
||
geometryArgs={[innerWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth - PANEL_THICKNESS * 2]}
|
||
position={[innerCenter, shelfY, 0]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(moduleIndex, blockIndexAtY(shelfY))}
|
||
/>
|
||
{activeStep === 2 && (
|
||
<mesh
|
||
position={[
|
||
innerCenter,
|
||
shelfY,
|
||
(depth - PANEL_THICKNESS * 2) / 2 + Math.max(0.004, PANEL_THICKNESS * 0.18)
|
||
]}
|
||
onPointerOver={(e) => {
|
||
e.stopPropagation();
|
||
setHoveredShelfKey(shelfKey);
|
||
gl.domElement.style.cursor = 'ns-resize';
|
||
}}
|
||
onPointerOut={(e) => {
|
||
e.stopPropagation();
|
||
setHoveredShelfKey((prev) => (prev === shelfKey ? null : prev));
|
||
if (!shelfDragState) gl.domElement.style.cursor = 'auto';
|
||
}}
|
||
onPointerDown={(e) => handleShelfPointerDown(moduleIndex, shelfIndex, isStructural, e)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<boxGeometry
|
||
args={[
|
||
moduleWidth - PANEL_THICKNESS * 1.8,
|
||
Math.max(0.03, PANEL_THICKNESS * 1.25),
|
||
Math.max(0.018, PANEL_THICKNESS * 0.95)
|
||
]}
|
||
/>
|
||
<meshBasicMaterial
|
||
color="#4f46e5"
|
||
transparent
|
||
opacity={isShelfDragging ? 0.28 : isShelfHovered ? 0.2 : 0.08}
|
||
/>
|
||
</mesh>
|
||
)}
|
||
</group>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
})()}
|
||
|
||
{/* Fixed structural shelf above drawers */}
|
||
{drawersCount > 0 && (
|
||
(() => {
|
||
const drawerHeightsMm = Array.isArray(hw.drawerHeightsMm) ? hw.drawerHeightsMm : [90, 128, 177, 240];
|
||
const drawerStackMmRaw = drawerStackHeightMm(drawersCount, drawerHeightsMm);
|
||
const drawerStackM = Math.min(bodyH * 0.78, Math.max(0, drawerStackMmRaw) * SCALE);
|
||
const yFixed = (-height / 2 + plinthH + PANEL_THICKNESS) + drawerStackM + PANEL_THICKNESS / 2;
|
||
if (spanCoversY(moduleIndex, yFixed)) return null;
|
||
return (
|
||
<WardrobeElement
|
||
key={`fixed-shelf-drawers-${moduleIndex}`}
|
||
elementType="rayonFixe"
|
||
geometryType="box"
|
||
geometryArgs={[innerWidth + JOIN_OVERLAP_M * 2, PANEL_THICKNESS, depth - PANEL_THICKNESS * 2]}
|
||
position={[innerCenter, yFixed, 0]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(moduleIndex, 0)}
|
||
/>
|
||
);
|
||
})()
|
||
)}
|
||
|
||
{/* Drawers */}
|
||
{drawersCount > 0 && !spanCoversBlock(moduleIndex, 0) && (
|
||
<DrawerBox
|
||
moduleCenter={moduleCenter}
|
||
moduleWidth={moduleWidth}
|
||
bodyH={bodyH}
|
||
plinthH={plinthH}
|
||
drawersCount={drawersCount}
|
||
depth={depth}
|
||
behindDoor={['hidden', 'hidden_with_handle'].includes(
|
||
module.drawerType || hw.drawerType || 'visible'
|
||
)}
|
||
drawerDepthMm={Math.max(
|
||
350,
|
||
Math.round(Math.max(400, Math.min(650, (config.depthMm || 600) - 10)) / 50) * 50 -
|
||
(['hidden', 'hidden_with_handle'].includes(module.drawerType || hw.drawerType || 'visible') ? 40 : 0)
|
||
)}
|
||
drawerHeightsMm={hw.drawerHeightsMm}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(moduleIndex, 0)}
|
||
/>
|
||
)}
|
||
|
||
{/* Rod (penderie) */}
|
||
{module.hasRod && (() => {
|
||
const zone = moduleHangingZoneMm(module, config);
|
||
const rodY = -height / 2 + plinthH + zone.rodMm * SCALE;
|
||
if (spanCoversY(moduleIndex, rodY)) return null;
|
||
return (
|
||
<WardrobeElement
|
||
elementType="penderie"
|
||
geometryType="cylinder"
|
||
geometryArgs={[0.012, 0.012, moduleWidth - 0.06, 16]}
|
||
position={[moduleCenter, rodY, 0]}
|
||
rotation={[0, 0, Math.PI / 2]}
|
||
colors={colors}
|
||
onElementClick={moduleSelectFor(moduleIndex, zone.blockIndex)}
|
||
materialProps={{ roughness: 0.3, metalness: 0.8 }}
|
||
/>
|
||
);
|
||
})()}
|
||
</group>
|
||
);
|
||
})}
|
||
|
||
{/* Portes coulissantes (sliding) */}
|
||
{showDoors && isSliding && (
|
||
resolvedHorizontalSpans.length === 0 ? (
|
||
<WardrobeElement
|
||
elementType="portes"
|
||
geometryType="plane"
|
||
geometryArgs={[width * 0.98, bodyH * 0.98]}
|
||
position={[0, plinthH / 2, depth / 2 + 0.002]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
transparent={true}
|
||
opacity={0.85}
|
||
materialProps={{ roughness: 0.5 }}
|
||
/>
|
||
) : (() => {
|
||
const bodyBottomY = -height / 2 + plinthH;
|
||
const xEdges = [
|
||
-width / 2,
|
||
width / 2,
|
||
...resolvedHorizontalSpans.flatMap((resolved) => [
|
||
-width / 2 + resolved.leftMm * SCALE,
|
||
-width / 2 + resolved.rightMm * SCALE
|
||
])
|
||
].sort((a, b) => a - b);
|
||
const yEdges = [
|
||
bodyBottomY,
|
||
bodyBottomY + bodyH,
|
||
...resolvedHorizontalSpans.flatMap((resolved) => [
|
||
bodyBottomY + resolved.bottomMm * SCALE,
|
||
bodyBottomY + resolved.topMm * SCALE
|
||
])
|
||
].sort((a, b) => a - b);
|
||
const cells = [];
|
||
for (let xi = 0; xi < xEdges.length - 1; xi++) {
|
||
const x0 = xEdges[xi];
|
||
const x1 = xEdges[xi + 1];
|
||
if (x1 - x0 < 0.001) continue;
|
||
for (let yi = 0; yi < yEdges.length - 1; yi++) {
|
||
const y0 = yEdges[yi];
|
||
const y1 = yEdges[yi + 1];
|
||
if (y1 - y0 < 0.001) continue;
|
||
const midXmm = ((x0 + x1) / 2 + width / 2) / SCALE;
|
||
const midYmm = ((y0 + y1) / 2 - bodyBottomY) / SCALE;
|
||
const covered = resolvedHorizontalSpans.some((resolved) => (
|
||
midXmm >= resolved.leftMm - 0.5 &&
|
||
midXmm <= resolved.rightMm + 0.5 &&
|
||
midYmm >= resolved.bottomMm - 0.5 &&
|
||
midYmm <= resolved.topMm + 0.5
|
||
));
|
||
if (!covered) cells.push({ x0, x1, y0, y1 });
|
||
}
|
||
}
|
||
return cells.map((cell, index) => (
|
||
<WardrobeElement
|
||
key={`sliding-door-cell-${index}`}
|
||
elementType="portes"
|
||
geometryType="plane"
|
||
geometryArgs={[
|
||
Math.max(0.001, cell.x1 - cell.x0 - FACADE_REVEAL_M),
|
||
Math.max(0.001, cell.y1 - cell.y0 - FACADE_REVEAL_M)
|
||
]}
|
||
position={[
|
||
(cell.x0 + cell.x1) / 2,
|
||
(cell.y0 + cell.y1) / 2,
|
||
depth / 2 + 0.002
|
||
]}
|
||
colors={colors}
|
||
onElementClick={elementClickHandler}
|
||
transparent={true}
|
||
opacity={0.85}
|
||
materialProps={{ roughness: 0.5 }}
|
||
/>
|
||
));
|
||
})()
|
||
)}
|
||
|
||
{/* Module content is rendered above in the module loop */}
|
||
{/* Non-module door rendering is also above */}
|
||
|
||
{/* Step 1 dimension editor: bounding box + edge grips + rulers */}
|
||
{showDimensionHtml && (
|
||
<>
|
||
<DimensionAxisGrip
|
||
position={[0, bodyH / 2 + plinthH / 2 + 0.01, dimGrip.frontExteriorZ]}
|
||
size={[dimGrip.w, 0.012, 0.012]}
|
||
hitSize={[
|
||
Math.max(dimGrip.w + 0.05, MIN_EDGE_GRIP_M + 0.04),
|
||
dimGrip.crossW,
|
||
dimGrip.crossW,
|
||
]}
|
||
label={dimensionChipLabel('L', 'widthMm')}
|
||
cursor="ew-resize"
|
||
tintColor="#2563eb"
|
||
chipOffset={[0, 0.07, 0]}
|
||
active={dimensionResizeState?.type === 'widthMm'}
|
||
onPointerDown={(e) => handleDimensionPointerDown('widthMm', e)}
|
||
/>
|
||
<DimensionAxisGrip
|
||
position={[dimGrip.rightExteriorX, plinthH / 2, dimGrip.frontExteriorZ]}
|
||
size={[0.012, dimGrip.h, 0.012]}
|
||
hitSize={[
|
||
dimGrip.crossH,
|
||
Math.max(dimGrip.h + 0.05, MIN_EDGE_GRIP_M + 0.04),
|
||
dimGrip.crossH,
|
||
]}
|
||
label={dimensionChipLabel('H', 'heightMm')}
|
||
cursor="ns-resize"
|
||
tintColor="#9333ea"
|
||
chipOffset={[0.09, 0, 0]}
|
||
active={dimensionResizeState?.type === 'heightMm'}
|
||
onPointerDown={(e) => handleDimensionPointerDown('heightMm', e)}
|
||
/>
|
||
<DimensionAxisGrip
|
||
position={[dimGrip.rightExteriorX, dimGrip.bottomY, dimGrip.frontExteriorZ]}
|
||
size={[0.012, 0.012, dimGrip.d]}
|
||
hitSize={[
|
||
dimGrip.crossD,
|
||
dimGrip.crossD,
|
||
Math.max(dimGrip.d + 0.05, MIN_EDGE_GRIP_M + 0.06),
|
||
]}
|
||
label={dimensionChipLabel('P', 'depthMm')}
|
||
cursor="ew-resize"
|
||
tintColor="#0891b2"
|
||
chipOffset={[0.09, 0, 0.09]}
|
||
active={dimensionResizeState?.type === 'depthMm'}
|
||
onPointerDown={(e) => handleDimensionPointerDown('depthMm', e)}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* Pass interaction state to parent for OrbitControls toggling */}
|
||
<InteractionBlocker active={interactionActive} />
|
||
</group>
|
||
);
|
||
}
|
||
|
||
function WardrobeOutline({ width, height, depth }) {
|
||
const geom = useMemo(() => {
|
||
const g = new THREE.EdgesGeometry(new THREE.BoxGeometry(width, height, depth), 18);
|
||
return g;
|
||
}, [width, height, depth]);
|
||
|
||
useEffect(() => () => geom.dispose(), [geom]);
|
||
|
||
return (
|
||
<lineSegments geometry={geom} renderOrder={999}>
|
||
<lineBasicMaterial
|
||
color="#111827"
|
||
transparent
|
||
opacity={0.55}
|
||
stencilWrite={false}
|
||
stencilRef={1}
|
||
stencilFunc={THREE.EqualStencilFunc}
|
||
stencilFail={THREE.KeepStencilOp}
|
||
stencilZFail={THREE.KeepStencilOp}
|
||
stencilZPass={THREE.KeepStencilOp}
|
||
// Only show where the wall is in front (occluding).
|
||
depthTest
|
||
depthFunc={THREE.GreaterEqualDepth}
|
||
depthWrite={false}
|
||
/>
|
||
</lineSegments>
|
||
);
|
||
}
|
||
|
||
/* ===================================================================
|
||
InteractionBlocker - disables OrbitControls during drag/resize
|
||
Uses useThree to access the controls
|
||
=================================================================== */
|
||
function InteractionBlocker({ active }) {
|
||
const { controls } = useThree();
|
||
useEffect(() => {
|
||
if (controls) {
|
||
controls.enabled = !active;
|
||
}
|
||
}, [active, controls]);
|
||
return null;
|
||
}
|
||
|
||
/* ===================================================================
|
||
CameraController - exposes zoom/reset via ref
|
||
=================================================================== */
|
||
const CameraController = forwardRef(({ roomConfig, config, modules, activeStep, interactionActive = false }, ref) => {
|
||
const { camera, gl } = useThree();
|
||
const controlsRef = useRef();
|
||
const isDimensionStep = activeStep === 1;
|
||
const snapAnimRef = useRef(null);
|
||
|
||
const targetY = roomConfig ? roomConfig.height / 2 : (config.heightMm || 2400) * SCALE * 0.5;
|
||
const cameraTarget = useMemo(() => [0, targetY, 0], [targetY]);
|
||
/** Initial target only: later changes are animated, never snapped through the prop. */
|
||
const [initialTarget] = useState(cameraTarget);
|
||
|
||
const totalWidthMm = useMemo(() => {
|
||
if (Array.isArray(modules) && modules.length > 0) {
|
||
const sum = modules.reduce((s, m) => s + (Number(m?.widthMm) || 0), 0);
|
||
return sum > 0 ? sum : (config.widthMm || 2400);
|
||
}
|
||
return config.widthMm || 2400;
|
||
}, [modules, config.widthMm]);
|
||
|
||
const fitDistance = useMemo(() => {
|
||
if (roomConfig) {
|
||
return Math.max(roomConfig.width, roomConfig.length) * 1.2;
|
||
}
|
||
const w = totalWidthMm * SCALE;
|
||
const h = (config.heightMm || 2400) * SCALE;
|
||
const d = (config.depthMm || 600) * SCALE;
|
||
const maxDim = Math.max(w, h, d);
|
||
const fov = THREE.MathUtils.degToRad(45);
|
||
const dist = (maxDim / 2) / Math.tan(fov / 2);
|
||
return Math.max(1.2, dist * 1.25);
|
||
}, [roomConfig, totalWidthMm, config.heightMm, config.depthMm]);
|
||
|
||
// Zoom limits stay frozen while a handle is dragged so the view never moves under the cursor.
|
||
const frozenFitRef = useRef(null);
|
||
if (interactionActive && frozenFitRef.current === null) frozenFitRef.current = fitDistance;
|
||
if (!interactionActive) frozenFitRef.current = null;
|
||
const effectiveFitDistance = frozenFitRef.current ?? fitDistance;
|
||
|
||
const getDefaultDistance = useCallback(
|
||
() => effectiveFitDistance,
|
||
[effectiveFitDistance]
|
||
);
|
||
|
||
const box = useMemo(() => ({
|
||
w: totalWidthMm * SCALE,
|
||
h: (config.heightMm || 2400) * SCALE,
|
||
d: (config.depthMm || 600) * SCALE,
|
||
}), [totalWidthMm, config.heightMm, config.depthMm]);
|
||
|
||
/** Distance along the current view direction at which the whole carcass fits the viewport. */
|
||
const distanceToFit = useCallback((target) => {
|
||
camera.updateMatrixWorld();
|
||
const right = new THREE.Vector3();
|
||
const up = new THREE.Vector3();
|
||
const back = new THREE.Vector3();
|
||
camera.matrixWorld.extractBasis(right, up, back);
|
||
const tanV = Math.tan(THREE.MathUtils.degToRad(camera.fov || 45) / 2) * 0.86;
|
||
const tanH = tanV * (camera.aspect || 1);
|
||
let need = 0;
|
||
const p = new THREE.Vector3();
|
||
for (const sx of [-1, 1]) for (const sy of [0, 1]) for (const sz of [-1, 1]) {
|
||
p.set(sx * box.w / 2, sy * box.h, sz * box.d / 2).sub(target);
|
||
const cz = p.dot(back);
|
||
need = Math.max(need, cz + Math.abs(p.dot(right)) / tanH, cz + Math.abs(p.dot(up)) / tanV);
|
||
}
|
||
return need;
|
||
}, [camera, box]);
|
||
|
||
const distanceLimits = useCallback(() => {
|
||
const fit = getDefaultDistance();
|
||
return isDimensionStep
|
||
? [Math.max(0.1, fit * 0.8), 30]
|
||
: [fit * 0.35, fit * 2.6];
|
||
}, [getDefaultDistance, isDimensionStep]);
|
||
|
||
/** Smoothly moves target/distance while keeping the user's orbit angle. */
|
||
const animateFraming = useCallback(({ toTarget, toDistance, duration = 0.45 }) => {
|
||
const controls = controlsRef.current;
|
||
if (!controls) return;
|
||
const fromTarget = controls.target.clone();
|
||
const offset = camera.position.clone().sub(fromTarget);
|
||
const fromDistance = offset.length();
|
||
const [minD, maxD] = distanceLimits();
|
||
snapAnimRef.current = {
|
||
t: 0,
|
||
duration,
|
||
dir: offset.normalize(),
|
||
fromTarget,
|
||
toTarget: toTarget.clone(),
|
||
fromDistance,
|
||
toDistance: Math.min(maxD, Math.max(minD, toDistance ?? fromDistance)),
|
||
};
|
||
}, [camera, distanceLimits]);
|
||
|
||
useFrame((_, dt) => {
|
||
const anim = snapAnimRef.current;
|
||
const controls = controlsRef.current;
|
||
if (!anim || !controls) return;
|
||
anim.t = Math.min(1, anim.t + dt / anim.duration);
|
||
const k = 1 - Math.pow(1 - anim.t, 3);
|
||
controls.target.lerpVectors(anim.fromTarget, anim.toTarget, k);
|
||
const dist = anim.fromDistance + (anim.toDistance - anim.fromDistance) * k;
|
||
camera.position.copy(controls.target).addScaledVector(anim.dir, dist);
|
||
const [minD, maxD] = distanceLimits();
|
||
controls.minDistance = Math.min(minD, dist);
|
||
controls.maxDistance = Math.max(maxD, dist);
|
||
controls.update();
|
||
if (anim.t >= 1) snapAnimRef.current = null;
|
||
});
|
||
|
||
// Limits are applied imperatively and loosened to the current distance so tightening them never snaps the camera.
|
||
useEffect(() => {
|
||
const controls = controlsRef.current;
|
||
if (!controls || snapAnimRef.current) return;
|
||
const [minD, maxD] = distanceLimits();
|
||
const current = camera.position.distanceTo(controls.target);
|
||
controls.minDistance = Math.min(minD, current);
|
||
controls.maxDistance = Math.max(maxD, current);
|
||
}, [distanceLimits, camera]);
|
||
|
||
const cancelSnap = useCallback(() => {
|
||
snapAnimRef.current = null;
|
||
}, []);
|
||
|
||
const placeDefaultView = useCallback(() => {
|
||
const controls = controlsRef.current;
|
||
if (!controls) return;
|
||
cancelSnap();
|
||
const target = new THREE.Vector3(...cameraTarget);
|
||
controls.target.copy(target);
|
||
camera.up.set(0, 1, 0);
|
||
if (roomConfig) {
|
||
const roomSize = Math.max(roomConfig.width, roomConfig.length);
|
||
camera.position.set(roomSize * 0.8, roomSize * 0.5, roomSize * 0.8);
|
||
} else {
|
||
const dir = defaultViewDirection();
|
||
camera.position.copy(target).addScaledVector(dir, 2);
|
||
camera.lookAt(target);
|
||
camera.updateMatrixWorld();
|
||
camera.position.copy(target).addScaledVector(dir, distanceToFit(target));
|
||
}
|
||
const [minD, maxD] = distanceLimits();
|
||
const current = camera.position.distanceTo(controls.target);
|
||
controls.minDistance = Math.min(minD, current);
|
||
controls.maxDistance = Math.max(maxD, current);
|
||
controls.update();
|
||
}, [camera, cameraTarget, roomConfig, cancelSnap, distanceToFit, distanceLimits]);
|
||
|
||
const fitView = useCallback(() => {
|
||
const target = new THREE.Vector3(...cameraTarget);
|
||
animateFraming({ toTarget: target, toDistance: roomConfig ? undefined : distanceToFit(target) });
|
||
}, [animateFraming, cameraTarget, distanceToFit, roomConfig]);
|
||
|
||
// After a size change (deferred until the drag ends), re-centre and back off only if the carcass no longer fits.
|
||
const framingKey = `${targetY}|${box.w}|${box.h}|${box.d}`;
|
||
const lastFramingKeyRef = useRef(framingKey);
|
||
useEffect(() => {
|
||
if (interactionActive || lastFramingKeyRef.current === framingKey) return;
|
||
lastFramingKeyRef.current = framingKey;
|
||
const controls = controlsRef.current;
|
||
if (!controls) return;
|
||
const target = new THREE.Vector3(...cameraTarget);
|
||
const current = camera.position.distanceTo(controls.target);
|
||
const toDistance = roomConfig ? current : Math.max(current, distanceToFit(target));
|
||
animateFraming({ toTarget: target, toDistance });
|
||
}, [framingKey, interactionActive, cameraTarget, camera, roomConfig, distanceToFit, animateFraming]);
|
||
|
||
const setView = useCallback((view) => {
|
||
if (!controlsRef.current) return;
|
||
const target = controlsRef.current.target;
|
||
const dist = getDefaultDistance();
|
||
|
||
if (view === 'front') camera.position.set(0, target.y, dist);
|
||
if (view === 'side') camera.position.set(dist, target.y, 0);
|
||
if (view === 'top') camera.position.set(0.001, target.y + dist, 0.001);
|
||
if (view === 'iso') camera.position.set(dist * 0.75, target.y + dist * 0.35, dist * 0.75);
|
||
if (view === 'inside') {
|
||
// View from slightly in front of the wardrobe, looking into it.
|
||
const depth = (config.depthMm || 600) * SCALE;
|
||
camera.position.set(0, target.y, Math.max(0.25, depth * 0.35));
|
||
}
|
||
controlsRef.current.update();
|
||
}, [camera, getDefaultDistance, config]);
|
||
|
||
const size = useThree((s) => s.size);
|
||
const didPlaceDefaultRef = useRef(false);
|
||
useFrame(() => {
|
||
if (didPlaceDefaultRef.current || !controlsRef.current) return;
|
||
if (size.width < 2 || size.height < 2) return;
|
||
didPlaceDefaultRef.current = true;
|
||
placeDefaultView();
|
||
});
|
||
|
||
useImperativeHandle(ref, () => ({
|
||
fitView,
|
||
resetView: () => {
|
||
placeDefaultView();
|
||
},
|
||
}), [fitView, placeDefaultView]);
|
||
|
||
useEffect(() => {
|
||
if (controlsRef.current) {
|
||
controlsRef.current.minPolarAngle = isDimensionStep ? 0 : 0;
|
||
controlsRef.current.maxPolarAngle = Math.PI;
|
||
}
|
||
}, [isDimensionStep]);
|
||
|
||
const handleControlStart = useCallback(() => {
|
||
cancelSnap();
|
||
gl.domElement.style.cursor = 'grabbing';
|
||
}, [cancelSnap, gl]);
|
||
|
||
const handleControlEnd = useCallback(() => {
|
||
gl.domElement.style.cursor = 'auto';
|
||
}, [gl]);
|
||
|
||
return (
|
||
<OrbitControls
|
||
ref={controlsRef}
|
||
enablePan={false}
|
||
enableZoom={true}
|
||
enableRotate={true}
|
||
enableDamping={true}
|
||
dampingFactor={0.08}
|
||
rotateSpeed={0.55}
|
||
zoomSpeed={0.9}
|
||
panSpeed={0.85}
|
||
target={initialTarget}
|
||
onStart={handleControlStart}
|
||
onEnd={handleControlEnd}
|
||
makeDefault
|
||
/>
|
||
);
|
||
});
|
||
|
||
/* ===================================================================
|
||
Scene - assembles everything
|
||
=================================================================== */
|
||
function Scene({
|
||
config,
|
||
roomConfig,
|
||
controllerRef,
|
||
colors,
|
||
modules,
|
||
onElementClick,
|
||
onModuleClick,
|
||
selectedModuleIndex,
|
||
selectedBlockIndex,
|
||
selectedHorizontalSpanId,
|
||
onHorizontalSpanClick,
|
||
showDoors,
|
||
onResizeModules,
|
||
onUpdateModule,
|
||
onSetDimension,
|
||
onBeginUndoableGesture,
|
||
activeStep,
|
||
suppressHtmlOverlays,
|
||
}) {
|
||
const [interactionActive, setInteractionActive] = useState(false);
|
||
const wardrobeTransform = useMemo(() => {
|
||
if (roomConfig) {
|
||
return calculateWardrobeTransform(roomConfig, config);
|
||
}
|
||
return { position: [0, 0, 0], rotation: [0, 0, 0] };
|
||
}, [roomConfig, config]);
|
||
|
||
const nicheBackdrop = useMemo(() => {
|
||
if (roomConfig) return null;
|
||
if (config?.installationType !== 'niche') return null;
|
||
const OUTER_WALL_EXTENT_M = 200; // effectively infinite wall planes
|
||
const widthMmRaw = Array.isArray(modules) && modules.length > 0
|
||
? modules.reduce((s, m) => s + (Number(m?.widthMm) || 0), 0)
|
||
: (config.widthMm || 2400);
|
||
const widthM = Math.max(0.4, (widthMmRaw || 2400) * SCALE);
|
||
const heightM = Math.max(1.8, (config.heightMm || 2400) * SCALE);
|
||
const depthM = Math.max(0.4, (config.depthMm || 600) * SCALE);
|
||
const sanitaryGapMm = Math.max(0, Number(config.sanitaryGapMm) || 0);
|
||
const niche = config.nicheMeasurements || {};
|
||
const smallestPositive = (values, fallback) => {
|
||
const valid = values.map(Number).filter((value) => Number.isFinite(value) && value > 0);
|
||
return valid.length > 0 ? Math.min(...valid) : fallback;
|
||
};
|
||
const nicheWidthM = smallestPositive(
|
||
[niche.widthTopMm, niche.widthMidMm, niche.widthBottomMm],
|
||
widthMmRaw + sanitaryGapMm * 2
|
||
) * SCALE;
|
||
const nicheHeightM = smallestPositive(
|
||
[niche.heightLeftMm, niche.heightRightMm],
|
||
(config.heightMm || 2400) + sanitaryGapMm * 2
|
||
) * SCALE;
|
||
const nicheDepthM = smallestPositive(
|
||
[niche.depthTopMm, niche.depthMidMm, niche.depthBottomMm],
|
||
(config.depthMm || 600) + sanitaryGapMm * 2
|
||
) * SCALE;
|
||
|
||
const gapSideM = Math.max(0, (nicheWidthM - widthM) / 2);
|
||
// The wardrobe sits on the floor, so all remaining vertical clearance is visible above it.
|
||
const gapTopM = Math.max(0, nicheHeightM - heightM);
|
||
const gapBottomM = 0;
|
||
const gapDepthM = Math.max(0, (nicheDepthM - depthM) / 2);
|
||
|
||
const nicheW = widthM + gapSideM * 2;
|
||
const nicheH = heightM + gapTopM + gapBottomM;
|
||
const nicheD = depthM + gapDepthM * 2;
|
||
|
||
return {
|
||
outerWallW: OUTER_WALL_EXTENT_M,
|
||
outerWallH: OUTER_WALL_EXTENT_M,
|
||
outerWallD: OUTER_WALL_EXTENT_M,
|
||
gapSideM,
|
||
gapTopM,
|
||
gapBottomM,
|
||
gapDepthM,
|
||
widthM,
|
||
heightM,
|
||
depthM,
|
||
nicheW,
|
||
nicheH,
|
||
nicheD,
|
||
// wardrobe spans y=[0..heightM], z=[-depthM/2..+depthM/2]
|
||
floorY: -gapBottomM,
|
||
ceilY: heightM + gapTopM,
|
||
backZ: -depthM / 2 - gapDepthM,
|
||
frontZ: depthM / 2 + gapDepthM,
|
||
leftX: -widthM / 2 - gapSideM,
|
||
rightX: widthM / 2 + gapSideM,
|
||
};
|
||
}, [
|
||
roomConfig,
|
||
config?.installationType,
|
||
config?.widthMm,
|
||
config?.heightMm,
|
||
config?.depthMm,
|
||
config?.sanitaryGapMm,
|
||
config?.nicheMeasurements,
|
||
modules
|
||
]);
|
||
|
||
const freeBackdrop = useMemo(() => {
|
||
if (roomConfig) return null;
|
||
if (config?.installationType !== 'free') return null;
|
||
const depthM = (config.depthMm || 600) * SCALE;
|
||
const heightM = (config.heightMm || 2400) * SCALE;
|
||
// Place the wall right behind the wardrobe back face.
|
||
const wallZ = -depthM / 2 - 0.01;
|
||
const wallY = heightM * 0.6;
|
||
return {
|
||
wallZ,
|
||
wallY,
|
||
};
|
||
}, [roomConfig, config?.installationType, config?.depthMm, config?.heightMm]);
|
||
|
||
return (
|
||
<>
|
||
<ambientLight intensity={roomConfig ? 0.5 : 0.6} />
|
||
<directionalLight
|
||
position={[4, 6, 5]}
|
||
intensity={roomConfig ? 1.0 : 1.2}
|
||
castShadow
|
||
shadow-mapSize={[1024, 1024]}
|
||
shadow-camera-far={20}
|
||
shadow-camera-left={-5}
|
||
shadow-camera-right={5}
|
||
shadow-camera-top={5}
|
||
shadow-camera-bottom={-5}
|
||
/>
|
||
<directionalLight position={[-2, 4, 3]} intensity={0.4} />
|
||
|
||
{/* Niche alcove backdrop using the measured installation clearances. */}
|
||
{/* All backdrop meshes opt out of raycasting: they are decorative only and
|
||
must never intercept pointer events meant for wardrobe handles. */}
|
||
{nicheBackdrop && (
|
||
<group>
|
||
{/* floor */}
|
||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, nicheBackdrop.floorY, 0]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[nicheBackdrop.outerWallW, nicheBackdrop.outerWallD]} />
|
||
<meshStandardMaterial color="#d1d5db" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
|
||
{/* back wall (niche sized) */}
|
||
<mesh position={[0, (nicheBackdrop.floorY + nicheBackdrop.ceilY) / 2, nicheBackdrop.backZ]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[nicheBackdrop.nicheW, nicheBackdrop.nicheH]} />
|
||
<meshStandardMaterial color="#f8fafc" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
|
||
{/* left wall (niche sized) */}
|
||
<mesh rotation={[0, Math.PI / 2, 0]} position={[nicheBackdrop.leftX, (nicheBackdrop.floorY + nicheBackdrop.ceilY) / 2, 0]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[nicheBackdrop.nicheD, nicheBackdrop.nicheH]} />
|
||
<meshStandardMaterial color="#f8fafc" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
|
||
{/* right wall (niche sized) */}
|
||
<mesh rotation={[0, -Math.PI / 2, 0]} position={[nicheBackdrop.rightX, (nicheBackdrop.floorY + nicheBackdrop.ceilY) / 2, 0]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[nicheBackdrop.nicheD, nicheBackdrop.nicheH]} />
|
||
<meshStandardMaterial color="#f8fafc" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
|
||
{/* ceiling (niche sized) */}
|
||
<mesh rotation={[Math.PI / 2, 0, 0]} position={[0, nicheBackdrop.ceilY, 0]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[nicheBackdrop.nicheW, nicheBackdrop.nicheD]} />
|
||
<meshStandardMaterial color="#f8fafc" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
|
||
{/* front wall: everywhere except the niche opening */}
|
||
<FrontWallWithOpening niche={nicheBackdrop} />
|
||
</group>
|
||
)}
|
||
|
||
{/* Backdrop wall/floor for "Libre" (free-standing) view */}
|
||
{freeBackdrop && !nicheBackdrop && (
|
||
<group>
|
||
{/* floor */}
|
||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[200, 200]} />
|
||
<meshStandardMaterial color="#d1d5db" roughness={0.95} metalness={0} />
|
||
</mesh>
|
||
{/* wall behind wardrobe (Z-), flush to back */}
|
||
<mesh position={[0, freeBackdrop.wallY, freeBackdrop.wallZ]} receiveShadow raycast={() => null}>
|
||
<planeGeometry args={[200, 120]} />
|
||
<meshStandardMaterial color="#f9fafb" roughness={0.98} metalness={0} />
|
||
</mesh>
|
||
</group>
|
||
)}
|
||
|
||
{roomConfig && (
|
||
<Room3D roomConfig={roomConfig} wardrobeConfig={config} />
|
||
)}
|
||
|
||
<group
|
||
position={wardrobeTransform.position}
|
||
rotation={wardrobeTransform.rotation}
|
||
>
|
||
<WardrobeMesh
|
||
config={config}
|
||
colors={colors}
|
||
modules={modules}
|
||
onElementClick={onElementClick}
|
||
onModuleClick={onModuleClick}
|
||
selectedModuleIndex={selectedModuleIndex}
|
||
selectedBlockIndex={selectedBlockIndex}
|
||
selectedHorizontalSpanId={selectedHorizontalSpanId}
|
||
onHorizontalSpanClick={onHorizontalSpanClick}
|
||
showDoors={showDoors}
|
||
onResizeModules={onResizeModules}
|
||
onUpdateModule={onUpdateModule}
|
||
onSetDimension={onSetDimension}
|
||
onBeginUndoableGesture={onBeginUndoableGesture}
|
||
activeStep={activeStep}
|
||
suppressHtmlOverlays={suppressHtmlOverlays}
|
||
onInteractionChange={setInteractionActive}
|
||
/>
|
||
</group>
|
||
|
||
<CameraController
|
||
ref={controllerRef}
|
||
roomConfig={roomConfig}
|
||
config={config}
|
||
modules={modules}
|
||
activeStep={activeStep}
|
||
interactionActive={interactionActive}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function FrontWallWithOpening({ niche }) {
|
||
const shape = useMemo(() => {
|
||
// Outer wall (slightly larger than niche box so it reads as the room wall)
|
||
const outerW = Math.max(6, niche.outerWallW || niche.nicheW * 3);
|
||
const outerH = Math.max(3, niche.outerWallH || niche.nicheH * 2.2);
|
||
|
||
// Hole = niche opening (exact nicheW/nicheH), positioned around the wardrobe volume
|
||
const holeW = niche.nicheW;
|
||
const holeH = niche.nicheH;
|
||
|
||
const s = new THREE.Shape();
|
||
s.moveTo(-outerW / 2, -outerH / 2);
|
||
s.lineTo(outerW / 2, -outerH / 2);
|
||
s.lineTo(outerW / 2, outerH / 2);
|
||
s.lineTo(-outerW / 2, outerH / 2);
|
||
s.closePath();
|
||
|
||
const hole = new THREE.Path();
|
||
// Hole Y range: from floorY to floorY + holeH
|
||
const holeBottom = niche.floorY;
|
||
const holeTop = niche.floorY + holeH;
|
||
hole.moveTo(-holeW / 2, holeBottom);
|
||
hole.lineTo(holeW / 2, holeBottom);
|
||
hole.lineTo(holeW / 2, holeTop);
|
||
hole.lineTo(-holeW / 2, holeTop);
|
||
hole.closePath();
|
||
s.holes.push(hole);
|
||
return s;
|
||
}, [niche]);
|
||
|
||
return (
|
||
// raycast disabled: purely decorative wall must not intercept clicks on
|
||
// dimension grips that sit just outside the niche opening (e.g. width
|
||
// handle above the wardrobe top is behind the solid wall in 3D space).
|
||
<mesh position={[0, 0, niche.frontZ]} receiveShadow raycast={() => null}>
|
||
<shapeGeometry args={[shape]} />
|
||
<meshStandardMaterial
|
||
color="#f8fafc"
|
||
roughness={0.98}
|
||
metalness={0}
|
||
stencilWrite
|
||
stencilRef={1}
|
||
stencilFunc={THREE.AlwaysStencilFunc}
|
||
stencilZPass={THREE.ReplaceStencilOp}
|
||
/>
|
||
</mesh>
|
||
);
|
||
}
|
||
|
||
/* ===================================================================
|
||
WardrobePreview - main exported component
|
||
=================================================================== */
|
||
export default function WardrobePreview({
|
||
config,
|
||
activeStep = 1,
|
||
roomConfig,
|
||
colors = {},
|
||
modules = [],
|
||
onElementClick,
|
||
onModuleClick,
|
||
onResizeModules,
|
||
onUpdateModule,
|
||
onSetDimension,
|
||
onBeginUndoableGesture,
|
||
canUndo3d = false,
|
||
canRedo3d = false,
|
||
onUndo3d,
|
||
onRedo3d,
|
||
selectedModuleIndex,
|
||
selectedBlockIndex = 0,
|
||
selectedHorizontalSpanId,
|
||
onHorizontalSpanClick,
|
||
suppressHtmlOverlays = false,
|
||
}) {
|
||
const containerRef = useRef(null);
|
||
const controllerRef = useRef(null);
|
||
const [selectedElement, setSelectedElement] = useState(null);
|
||
const [showDoors, setShowDoors] = useState(activeStep !== 2);
|
||
const isDimensionStep = activeStep === 1;
|
||
|
||
const perspectiveCameraPosition = useMemo(() => {
|
||
const totalWidthMm = Array.isArray(modules) && modules.length > 0
|
||
? modules.reduce((sum, mod) => sum + (Number(mod?.widthMm) || 0), 0) || (config.widthMm || 2400)
|
||
: (config.widthMm || 2400);
|
||
return defaultCameraPosition({
|
||
roomConfig,
|
||
totalWidthMm,
|
||
heightMm: config.heightMm,
|
||
depthMm: config.depthMm,
|
||
});
|
||
}, [roomConfig, modules, config.widthMm, config.heightMm, config.depthMm]);
|
||
|
||
const handleResetView = useCallback(() => {
|
||
controllerRef.current?.resetView();
|
||
}, []);
|
||
|
||
const handleFitView = useCallback(() => {
|
||
controllerRef.current?.fitView();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const onKeyDown = (e) => {
|
||
if (e.key !== 'f' && e.key !== 'F') return;
|
||
if (e.ctrlKey || e.metaKey || e.altKey) return;
|
||
const el = e.target;
|
||
if (el && (el.closest?.('input, textarea, select') || el.isContentEditable)) return;
|
||
e.preventDefault();
|
||
controllerRef.current?.fitView();
|
||
};
|
||
window.addEventListener('keydown', onKeyDown);
|
||
return () => window.removeEventListener('keydown', onKeyDown);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// Columns: hide doors so interior layout is visible; Portes: show them.
|
||
if (activeStep === 2) setShowDoors(false);
|
||
else if (activeStep === 3) setShowDoors(true);
|
||
}, [activeStep]);
|
||
|
||
const handleToggleDoors = useCallback(() => {
|
||
setShowDoors(prev => !prev);
|
||
}, []);
|
||
|
||
const handleElementClick = useCallback((elementType, label) => {
|
||
setSelectedElement({ type: elementType, label });
|
||
if (onElementClick) {
|
||
onElementClick(elementType, label);
|
||
}
|
||
}, [onElementClick]);
|
||
|
||
// All element types that can be color-picked (back panel only when enabled)
|
||
const hasBackOption = (modules && modules.length > 0)
|
||
? modules.some((m) => (typeof m?.hasBack === 'boolean' ? m.hasBack : config?.hasBack !== false))
|
||
: config?.hasBack !== false;
|
||
const PICKABLE_ELEMENTS = useMemo(() => [
|
||
{ type: 'portes', label: 'Portes' },
|
||
{ type: 'cotes', label: 'Côtés' },
|
||
{ type: 'dessus', label: 'Dessus' },
|
||
{ type: 'fond', label: 'Fond (bas)' },
|
||
...(hasBackOption ? [{ type: 'dos', label: 'Dos (arrière)' }] : []),
|
||
{ type: 'plintheBas', label: 'Plinthe' },
|
||
{ type: 'bandeauHaut', label: 'Bandeau haut' },
|
||
{ type: 'panneauxInterieurs', label: 'Panneaux int.' },
|
||
{ type: 'separateurs', label: 'Séparateurs' },
|
||
{ type: 'etageres', label: 'Étagères' },
|
||
{ type: 'rayonFixe', label: 'Rayon fixe' },
|
||
{ type: 'renfortsTiroir', label: 'Renforts tiroir' },
|
||
{ type: 'tiroirs', label: 'Tiroirs' },
|
||
{ type: 'penderie', label: 'Tringle' },
|
||
], [hasBackOption]);
|
||
|
||
const handleElementSelect = useCallback((e) => {
|
||
const val = e.target.value;
|
||
if (!val) return;
|
||
const item = PICKABLE_ELEMENTS.find(p => p.type === val);
|
||
if (item) {
|
||
handleElementClick(item.type, item.label);
|
||
}
|
||
// Reset select to placeholder
|
||
e.target.value = '';
|
||
}, [PICKABLE_ELEMENTS, handleElementClick]);
|
||
|
||
const showDoorToggle = activeStep === 2 || activeStep === 3 || activeStep === 4 || activeStep === 6;
|
||
const showColorSelector = activeStep === 4 || activeStep === 6;
|
||
const showReset = isDimensionStep || activeStep === 2 || activeStep === 6;
|
||
const show3dUndo = typeof onUndo3d === 'function';
|
||
const effectiveShowDoors = isDimensionStep ? true : showDoors;
|
||
|
||
return (
|
||
<div
|
||
ref={containerRef}
|
||
className={styles.container}
|
||
data-room={roomConfig ? '1' : '0'}
|
||
onDoubleClick={handleResetView}
|
||
title="Glisser pour tourner. Molette pour zoom. Double-clic pour réinitialiser."
|
||
>
|
||
{selectedElement && !isDimensionStep && (
|
||
<div className={styles.selectedElement}>
|
||
Élément sélectionné: <strong>{selectedElement.label}</strong>
|
||
</div>
|
||
)}
|
||
{/* Zoom Controls */}
|
||
<div className={styles.controls}>
|
||
<button type="button" className={styles.controlBtn} onClick={handleFitView} title="Recadrer sur l'armoire (F)">
|
||
<Icon name="fit" size={20} />
|
||
</button>
|
||
{showReset && (
|
||
<button type="button" className={styles.controlBtn} onClick={handleResetView} title="Réinitialiser la vue">◊</button>
|
||
)}
|
||
|
||
{show3dUndo && (
|
||
<>
|
||
<div className={styles.controlDivider} />
|
||
<button
|
||
type="button"
|
||
className={`${styles.controlBtn} ${!canUndo3d ? styles.controlBtnDisabled : ''}`}
|
||
onClick={onUndo3d}
|
||
disabled={!canUndo3d}
|
||
title="Annuler la dernière modification 3D (Ctrl+Z)"
|
||
>
|
||
←
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`${styles.controlBtn} ${!canRedo3d ? styles.controlBtnDisabled : ''}`}
|
||
onClick={onRedo3d}
|
||
disabled={!canRedo3d}
|
||
title="Rétablir (Ctrl+Shift+Z ou Ctrl+Y)"
|
||
>
|
||
→
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{showDoorToggle && (
|
||
<>
|
||
<div className={styles.controlDivider} />
|
||
<button
|
||
type="button"
|
||
className={`${styles.controlBtn} ${!showDoors ? styles.controlBtnActive : ''}`}
|
||
onClick={handleToggleDoors}
|
||
title={showDoors ? 'Masquer les portes' : 'Afficher les portes'}
|
||
>
|
||
<Icon name={showDoors ? 'door-off' : 'door'} size={22} />
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{showColorSelector && (
|
||
<>
|
||
<div className={styles.controlDivider} />
|
||
<select
|
||
className={styles.elementSelect}
|
||
onChange={handleElementSelect}
|
||
defaultValue=""
|
||
title="Choisir un élément pour changer sa couleur"
|
||
>
|
||
<option value="" disabled>🎨 Couleur…</option>
|
||
{PICKABLE_ELEMENTS.map(el => (
|
||
<option key={el.type} value={el.type}>{el.label}</option>
|
||
))}
|
||
</select>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<Suspense fallback={<div className={styles.loading}>Chargement 3D…</div>}>
|
||
<Canvas
|
||
shadows
|
||
orthographic={false}
|
||
camera={{ position: perspectiveCameraPosition, fov: roomConfig ? 60 : 45 }}
|
||
gl={{ antialias: true, alpha: true, stencil: true }}
|
||
style={{ width: '100%', height: '100%', display: 'block' }}
|
||
onCreated={({ gl }) => {
|
||
gl.setClearColor(0x000000, 0);
|
||
}}
|
||
>
|
||
<Scene
|
||
config={config}
|
||
roomConfig={roomConfig}
|
||
controllerRef={controllerRef}
|
||
colors={colors}
|
||
modules={modules}
|
||
onElementClick={handleElementClick}
|
||
onModuleClick={onModuleClick}
|
||
selectedModuleIndex={selectedModuleIndex}
|
||
selectedBlockIndex={selectedBlockIndex}
|
||
selectedHorizontalSpanId={selectedHorizontalSpanId}
|
||
onHorizontalSpanClick={onHorizontalSpanClick}
|
||
showDoors={effectiveShowDoors}
|
||
onResizeModules={onResizeModules}
|
||
onUpdateModule={onUpdateModule}
|
||
onSetDimension={onSetDimension}
|
||
onBeginUndoableGesture={onBeginUndoableGesture}
|
||
activeStep={activeStep}
|
||
suppressHtmlOverlays={suppressHtmlOverlays}
|
||
/>
|
||
</Canvas>
|
||
</Suspense>
|
||
|
||
</div>
|
||
);
|
||
}
|