diff --git a/src/components/LayoutStep.tsx b/src/components/LayoutStep.tsx index bde04f1..e8a4beb 100644 --- a/src/components/LayoutStep.tsx +++ b/src/components/LayoutStep.tsx @@ -10,6 +10,8 @@ interface Props { type EditMode = 'lines' | 'cells'; type Axis = 'x' | 'y'; +type Limits = { min: number; max: number }; +type LimitMap = Record; type DragTarget = | { type: 'main'; axis: Axis; index: number } @@ -59,29 +61,52 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { }; const selectedData = getSelectedPartition(); - // --- RAYCASTING (Надежный поиск коробки) --- - // Находит ближайшие стенки во всех 4 направлениях - const getCursorBox = (lx: number, ly: number, parts: Partition[]) => { + // --- SOLVER --- + const solveWallLimits = (parts: Partition[]): LimitMap => { + const limits: LimitMap = {}; + parts.forEach(p => { limits[p.id] = { min: 0, max: 1 }; }); + + for (let pass = 0; pass < 4; pass++) { + parts.forEach(target => { + let newMin = 0; + let newMax = 1; + const center = target.offset; + + parts.forEach(obstacle => { + if (target.id === obstacle.id || target.axis === obstacle.axis) return; + + const obsMin = limits[obstacle.id].min; + const obsMax = limits[obstacle.id].max; + + if (target.offset >= obsMin - 0.001 && target.offset <= obsMax + 0.001) { + if (obstacle.offset < center) newMin = Math.max(newMin, obstacle.offset); + else if (obstacle.offset > center) newMax = Math.min(newMax, obstacle.offset); + } + }); + limits[target.id] = { min: newMin, max: newMax }; + }); + } + return limits; + }; + + // --- RAYCASTING --- + const getCursorBox = (lx: number, ly: number, parts: Partition[], limitMap: LimitMap) => { let minX = 0, maxX = 1; let minY = 0, maxY = 1; parts.forEach(p => { - // Используем сохраненные границы (они теперь достоверны) - const pMin = p.min ?? 0; - const pMax = p.max ?? 1; - const EPS = 0.005; // Допуск на попадание + const { min: pMin, max: pMax } = limitMap[p.id]; + if (pMax - pMin < 0.001) return; + + const EPS = 0.002; if (p.axis === 'x') { - // Вертикальная стенка. Перекрывает ли она наш Y? if (ly >= pMin - EPS && ly <= pMax + EPS) { - // Стенка на нашем уровне. Слева или справа? if (p.offset < lx) minX = Math.max(minX, p.offset); if (p.offset > lx) maxX = Math.min(maxX, p.offset); } } else { - // Горизонтальная стенка. Перекрывает ли она наш X? if (lx >= pMin - EPS && lx <= pMax + EPS) { - // Стенка на нашем уровне. Сверху или снизу? if (p.offset < ly) minY = Math.max(minY, p.offset); if (p.offset > ly) maxY = Math.min(maxY, p.offset); } @@ -90,16 +115,14 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { return { minX, maxX, minY, maxY }; }; - // Поиск соседей для размеров (Та же логика, что Raycasting) - const getNeighborOffsets = (offset: number, crossPos: number, axis: Axis, parts: Partition[]) => { + const getNeighborOffsets = (offset: number, crossPos: number, axis: Axis, parts: Partition[], limitMap: LimitMap) => { let min = 0; let max = 1; - const EPS = 0.005; + const EPS = 0.001; parts.forEach(p => { if (p.axis === axis) { - const pMin = p.min ?? 0; - const pMax = p.max ?? 1; + const { min: pMin, max: pMax } = limitMap[p.id]; if (crossPos >= pMin - EPS && crossPos <= pMax + EPS) { if (p.offset < offset) min = Math.max(min, p.offset); if (p.offset > offset) max = Math.min(max, p.offset); @@ -190,7 +213,6 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { setPhantomPartition(null); setHoveredCell(null); - // Find Cell let cellIdx = null; for (let i = 0; i < sortedX.length - 1; i++) { if (nx >= sortedX[i] && nx <= sortedX[i+1]) { @@ -206,6 +228,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { setHoveredCell(cellIdx); const key = `${cellIdx.i}-${cellIdx.j}`; const parts = safePartitions[key] || []; + const limitMap = solveWallLimits(parts); const cx1 = sortedX[cellIdx.i]; const cx2 = sortedX[cellIdx.i+1]; const cy1 = sortedY[cellIdx.j]; const cy2 = sortedY[cellIdx.j+1]; @@ -213,41 +236,35 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const lx = (nx - cx1) / cw; const ly = (ny - cy1) / ch; - // Use real mm for aspect ratio logic const realCellW = cw * drawerW; const realCellH = ch * drawerD; let found = null; const SNAP = 0.05; for (const p of parts) { - const pMin = p.min ?? 0; - const pMax = p.max ?? 1; + const { min, max } = limitMap[p.id]; if (p.axis === 'x') { - if (ly >= pMin && ly <= pMax && Math.abs(lx - p.offset) < SNAP * (aspectRatio > 1 ? 1 : aspectRatio)) found = p; + if (ly >= min && ly <= max && Math.abs(lx - p.offset) < SNAP * (aspectRatio > 1 ? 1 : aspectRatio)) found = p; } else { - if (lx >= pMin && lx <= pMax && Math.abs(ly - p.offset) < SNAP * (aspectRatio < 1 ? 1 : 1/aspectRatio)) found = p; + if (lx >= min && lx <= max && Math.abs(ly - p.offset) < SNAP * (aspectRatio < 1 ? 1 : 1/aspectRatio)) found = p; } } if (found) { setHoveredPartition({ id: found.id, cellKey: key }); } else { - // --- FIND BOX --- - const box = getCursorBox(lx, ly, parts); - + const box = getCursorBox(lx, ly, parts, limitMap); const boxW = (box.maxX - box.minX) * realCellW; const boxH = (box.maxY - box.minY) * realCellH; - // Default axis based on longest side let newAxis: Axis = boxW > boxH ? 'x' : 'y'; - // Override if near edges const relL = (lx - box.minX) / (box.maxX - box.minX); const relT = (ly - box.minY) / (box.maxY - box.minY); const THRESHOLD = 0.2; - if (relL < THRESHOLD || relL > 1 - THRESHOLD) newAxis = 'x'; // Near vertical edge -> vertical wall - else if (relT < THRESHOLD || relT > 1 - THRESHOLD) newAxis = 'y'; // Near horiz edge -> horizontal wall + if (relL < THRESHOLD || relL > 1 - THRESHOLD) newAxis = 'x'; + else if (relT < THRESHOLD || relT > 1 - THRESHOLD) newAxis = 'y'; const valid = (newAxis === 'x' && (box.maxX - box.minX) > 0.05) || (newAxis === 'y' && (box.maxY - box.minY) > 0.05); @@ -298,6 +315,14 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { } }; + // --- MOUSE LEAVE (Clear Phantoms) --- + const handleMouseLeave = () => { + setDragging(null); + setPhantomMainAxis(null); + setPhantomPartition(null); + setHoveredCell(null); + }; + // --- RENDER --- const renderCellsAndPartitions = () => { const elements = []; @@ -317,6 +342,8 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const realW = (x2 - x1) * drawerW; const realD = (y2 - y1) * drawerD; + const limitMap = solveWallLimits(parts); + if (parts.length === 0) { const labelX = cellX + cellW / 2; const labelY = cellY + cellH / 2; @@ -337,9 +364,8 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { {isAnySelected && mode === 'cells' && } {parts.map(p => { - const pMin = p.min ?? 0; - const pMax = p.max ?? 1; - if (pMax - pMin < 0.001) return null; + const { min, max } = limitMap[p.id]; + if (max - min < 0.001) return null; let lx1, ly1, lx2, ly2; let dist1 = 0, dist2 = 0; @@ -349,20 +375,22 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { if (isVertical) { const px = cellX + (cellW * p.offset); lx1 = px; lx2 = px; - ly1 = cellY + (cellH * pMin); ly2 = cellY + (cellH * pMax); + ly1 = cellY + (cellH * min); ly2 = cellY + (cellH * max); - const neighbors = getNeighborOffsets(p.offset, (pMin + pMax)/2, p.axis, parts); - dist1 = Math.abs((p.offset - neighbors.min) * realW) - wallThick; - dist2 = Math.abs((neighbors.max - p.offset) * realW) - wallThick; + const cy = (min + max) / 2; + const box = getCursorBox(p.offset, cy, parts, limitMap); + dist1 = Math.abs((p.offset - box.minX) * realW) - wallThick; + dist2 = Math.abs((box.maxX - p.offset) * realW) - wallThick; midX = px; midY = (ly1 + ly2) / 2; } else { const py = cellY + (cellH * p.offset); ly1 = py; ly2 = py; - lx1 = cellX + (cellW * pMin); lx2 = cellX + (cellW * pMax); + lx1 = cellX + (cellW * min); lx2 = cellX + (cellW * max); - const neighbors = getNeighborOffsets(p.offset, (pMin + pMax)/2, p.axis, parts); - dist1 = Math.abs((p.offset - neighbors.min) * realD) - wallThick; - dist2 = Math.abs((neighbors.max - p.offset) * realD) - wallThick; + const cx = (min + max) / 2; + const box = getCursorBox(cx, p.offset, parts, limitMap); + dist1 = Math.abs((p.offset - box.minY) * realD) - wallThick; + dist2 = Math.abs((box.maxY - p.offset) * realD) - wallThick; midX = (lx1 + lx2) / 2; midY = py; } @@ -430,7 +458,13 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => {
1 ? 'auto' : '100%', height: aspectRatio > 1 ? '100%' : 'auto', aspectRatio: `${1/aspectRatio}`, maxHeight: '100%', maxWidth: '100%', cursor: mode === 'lines' ? (dragging ? 'grabbing' : hoveredMainSplit ? 'col-resize' : 'crosshair') : (dragging ? 'grabbing' : hoveredPartition ? 'grab' : hoveredCell ? 'crosshair' : 'default') }}> - setDragging(null)} onMouseLeave={() => setDragging(null)} onContextMenu={(e) => e.preventDefault()}> + setDragging(null)} + onMouseLeave={handleMouseLeave} + onContextMenu={(e) => e.preventDefault()} + > {renderCellsAndPartitions()}