From 1e9a1d288a3e46c6391e3ba3d61cd762078b8835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?= =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= Date: Sun, 11 Jan 2026 15:01:42 +0300 Subject: [PATCH] 8 --- src/components/LayoutStep.tsx | 127 +++++++++++++++++++--------------- 1 file changed, 73 insertions(+), 54 deletions(-) diff --git a/src/components/LayoutStep.tsx b/src/components/LayoutStep.tsx index d58feaa..80a3ef8 100644 --- a/src/components/LayoutStep.tsx +++ b/src/components/LayoutStep.tsx @@ -19,7 +19,6 @@ type DragTarget = export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const svgRef = useRef(null); - const containerRef = useRef(null); // -- STATE -- const [mode, setMode] = useState('lines'); @@ -51,7 +50,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const sortedX = useMemo(() => [0, ...safeX, 1].sort((a, b) => a - b), [safeX]); const sortedY = useMemo(() => [0, ...safeY, 1].sort((a, b) => a - b), [safeY]); - // -- HELPER: Get Selected -- + // -- HELPERS -- const getSelectedPartition = () => { if (!selectedPartitionId) return null; for (const key in safePartitions) { @@ -62,12 +61,14 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { }; const selectedData = getSelectedPartition(); - // --- SOLVER (Синхронизирован с 3D) --- + // --- SOLVER (Пересчет границ для корректного 3D и UI) --- const solveWallLimits = (parts: Partition[]): LimitMap => { const limits: LimitMap = {}; + // Изначально считаем, что все стенки от края до края (0-1) parts.forEach(p => { limits[p.id] = { min: 0, max: 1 }; }); - for (let pass = 0; pass < 3; pass++) { + // Несколько проходов для решения вложенных зависимостей + for (let pass = 0; pass < 4; pass++) { parts.forEach(target => { let newMin = 0; let newMax = 1; @@ -76,9 +77,11 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { 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 && target.offset < obsMax) { if (obstacle.offset < center) newMin = Math.max(newMin, obstacle.offset); else if (obstacle.offset > center) newMax = Math.min(newMax, obstacle.offset); @@ -90,51 +93,67 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { return limits; }; - // Поиск ближайших соседей для текста размеров - const getNeighborOffsets = (currentOffset: number, crossPos: number, axis: Axis, parts: Partition[]) => { - let minLimit = 0; - let maxLimit = 1; - const limitMap = solveWallLimits(parts); // Используем решенные границы для соседей - - parts.forEach(p => { - if (p.axis === axis) { // Параллельные - const { min: pMin, max: pMax } = limitMap[p.id]; - // Пересекаются ли проекции? - if (crossPos > pMin && crossPos < pMax) { - if (p.offset < currentOffset) minLimit = Math.max(minLimit, p.offset); - if (p.offset > currentOffset) maxLimit = Math.min(maxLimit, p.offset); - } - } - }); - return { min: minLimit, max: maxLimit }; - }; - - // Границы для курсора (Raycasting) + // --- 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 { min: pMin, max: pMax } = limitMap[p.id]; + + // Если стенка схлопнулась (ошибка расчета), игнорируем её if (pMax - pMin < 0.001) return; if (p.axis === 'x') { - // Вертикальная преграда - if (ly > pMin && ly < pMax) { - if (p.offset < lx) minX = Math.max(minX, p.offset); - if (p.offset > lx) maxX = Math.min(maxX, p.offset); + // Вертикальная стенка. Это препятствие по оси X. + // Проверяем, находится ли наш курсор (ly) в диапазоне высоты этой стенки? + if (ly >= pMin && ly <= pMax) { + // Стенка на нашем уровне по Y. Она слева или справа? + if (p.offset < lx) { + minX = Math.max(minX, p.offset); // Ближайшая стенка слева + } else { + maxX = Math.min(maxX, p.offset); // Ближайшая стенка справа + } } } else { - // Горизонтальная преграда - if (lx > pMin && lx < pMax) { - if (p.offset < ly) minY = Math.max(minY, p.offset); - if (p.offset > ly) maxY = Math.min(maxY, p.offset); + // Горизонтальная стенка. Препятствие по оси Y. + // Проверяем, находится ли наш курсор (lx) в диапазоне ширины этой стенки? + if (lx >= pMin && lx <= pMax) { + // Стенка на нашем уровне по X. Она сверху или снизу? + if (p.offset < ly) { + minY = Math.max(minY, p.offset); // Ближайшая стенка сверху + } else { + maxY = Math.min(maxY, p.offset); // Ближайшая стенка снизу + } } } }); + return { minX, maxX, minY, maxY }; }; + // Поиск соседей для отображения размеров (аналогичная логика) + const getNeighborOffsets = (offset: number, crossCenter: number, axis: Axis, parts: Partition[], limitMap: LimitMap) => { + let min = 0; + let max = 1; + + parts.forEach(p => { + if (p.axis === axis) { // Ищем параллельные стенки + const { min: pMin, max: pMax } = limitMap[p.id]; + // Если проекции пересекаются + if (crossCenter > pMin && crossCenter < pMax) { + if (p.offset < offset) min = Math.max(min, p.offset); + if (p.offset > offset) max = Math.min(max, p.offset); + } + } + }); + return { min, max }; + }; + // -- ACTIONS -- const createPartition = (i: number, j: number, axis: Axis, offset: number, min: number, max: number) => { const key = `${i}-${j}`; @@ -169,7 +188,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { setDragging(null); }; - // -- MOUSE -- + // -- MOUSE HANDLERS -- const handleMouseMove = (e: React.MouseEvent) => { if (!svgRef.current) return; const rect = svgRef.current.getBoundingClientRect(); @@ -216,7 +235,6 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { setPhantomPartition(null); setHoveredCell(null); - // 1. Находим ячейку let cellIdx = null; for (let i = 0; i < sortedX.length - 1; i++) { if (nx >= sortedX[i] && nx <= sortedX[i+1]) { @@ -232,7 +250,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 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]; @@ -242,6 +260,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { let found = null; const SNAP = 0.05; + // Проверяем наведение на существующие стенки for (const p of parts) { const { min, max } = limitMap[p.id]; if (p.axis === 'x') { @@ -254,24 +273,25 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { if (found) { setHoveredPartition({ id: found.id, cellKey: key }); } else { - // Вычисляем бокс под курсором + // --- КЛЮЧЕВОЙ МОМЕНТ: Raycasting для фантома --- const box = getCursorBox(lx, ly, parts, limitMap); - const distL = lx - box.minX; const distR = box.maxX - lx; - const distT = ly - box.minY; const distB = box.maxY - ly; - - // Выбираем ось перпендикулярно ближайшей границе - const minD = Math.min(distL, distR, distT, distB); - const newAxis = (minD === distL || minD === distR) ? 'x' : 'y'; - const width = box.maxX - box.minX; const height = box.maxY - box.minY; - if ((newAxis === 'y' && height > 0.05) || (newAxis === 'x' && width > 0.05)) { - const offset = newAxis === 'x' ? lx : ly; - const min = newAxis === 'x' ? box.minY : box.minX; - const max = newAxis === 'x' ? box.maxY : box.maxX; - setPhantomPartition({ axis: newAxis, offset, min, max }); + // Логика авто-выбора оси: делим более длинную сторону "комнаты" + // Если комната широкая -> ставим вертикальную (X) + // Если комната высокая -> ставим горизонтальную (Y) + const axis = width > height ? 'x' : 'y'; + + // Разрешаем рисовать, если есть хоть немного места (>5%) + if ((axis === 'x' && width > 0.05) || (axis === 'y' && height > 0.05)) { + const offset = axis === 'x' ? lx : ly; + // Границы новой стенки — это перпендикулярные стенки коробки + const min = axis === 'x' ? box.minY : box.minX; + const max = axis === 'x' ? box.maxY : box.maxX; + + setPhantomPartition({ axis, offset, min, max }); } } } @@ -314,6 +334,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { } }; + // --- RENDER --- const renderCellsAndPartitions = () => { const elements = []; for (let i = 0; i < sortedX.length - 1; i++) { @@ -332,9 +353,9 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const realW = (x2 - x1) * drawerW; const realD = (y2 - y1) * drawerD; - // ВАЖНО: Вычисляем границы для отображения const limitMap = solveWallLimits(parts); + // Label if (parts.length === 0) { const labelX = cellX + cellW / 2; const labelY = cellY + cellH / 2; @@ -368,9 +389,8 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { lx1 = px; lx2 = px; ly1 = cellY + (cellH * min); ly2 = cellY + (cellH * max); - // Ищем соседей относительно текущей длины - const neighbors = getNeighborOffsets(p.offset, (min + max)/2, p.axis, parts); - + // Для размеров ищем границы относительно центра отрисованной линии + const neighbors = getNeighborOffsets(p.offset, (min + max)/2, p.axis, parts, limitMap); dist1 = Math.abs((p.offset - neighbors.min) * realW) - wallThick; dist2 = Math.abs((neighbors.max - p.offset) * realW) - wallThick; midX = px; midY = (ly1 + ly2) / 2; @@ -379,8 +399,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { ly1 = py; ly2 = py; lx1 = cellX + (cellW * min); lx2 = cellX + (cellW * max); - const neighbors = getNeighborOffsets(p.offset, (min + max)/2, p.axis, parts); - + const neighbors = getNeighborOffsets(p.offset, (min + max)/2, p.axis, parts, limitMap); dist1 = Math.abs((p.offset - neighbors.min) * realD) - wallThick; dist2 = Math.abs((neighbors.max - p.offset) * realD) - wallThick; midX = (lx1 + lx2) / 2; midY = py;