src/components/LayoutStep.tsx

@@ -19,7 +19,6 @@ type DragTarget =
 
 export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   const svgRef = useRef<SVGSVGElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   
   // -- STATE --
   const [mode, setMode] = useState<EditMode>('lines');
@@ -51,7 +50,7 @@ export const LayoutStep: React.FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ config, splits, onChange }) => {
       return limits;
   };
 
-  // Поиск ближайших соседей для текста размеров
+  // --- RAYCASTING: Поиск свободного места под курсором ---
-  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)
   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') {
-              // Вертикальная преграда
+              // Вертикальная стенка. Это препятствие по оси X.
-              if (ly > pMin && ly < pMax) {
+              // Проверяем, находится ли наш курсор (ly) в диапазоне высоты этой стенки?
-                  if (p.offset < lx) minX = Math.max(minX, p.offset);
+              if (ly >= pMin && ly <= pMax) {
-                  if (p.offset > lx) maxX = Math.min(maxX, p.offset);
+                  // Стенка на нашем уровне по Y. Она слева или справа?
+                  if (p.offset < lx) {
+                      minX = Math.max(minX, p.offset); // Ближайшая стенка слева
+                  } else {
+                      maxX = Math.min(maxX, p.offset); // Ближайшая стенка справа
+                  }
               }
           } else {
-              // Горизонтальная преграда
+              // Горизонтальная стенка. Препятствие по оси Y.
-              if (lx > pMin && lx < pMax) {
+              // Проверяем, находится ли наш курсор (lx) в диапазоне ширины этой стенки?
-                  if (p.offset < ly) minY = Math.max(minY, p.offset);
+              if (lx >= pMin && lx <= pMax) {
-                  if (p.offset > ly) maxY = Math.min(maxY, p.offset);
+                  // Стенка на нашем уровне по 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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;
+          // Если комната широкая -> ставим вертикальную (X)
-             const min = newAxis === 'x' ? box.minY : box.minX;
+          // Если комната высокая -> ставим горизонтальную (Y)
-             const max = newAxis === 'x' ? box.maxY : box.maxX;
+          const axis = width > height ? 'x' : 'y';
-             setPhantomPartition({ axis: newAxis, offset, min, max });
+
+          // Разрешаем рисовать, если есть хоть немного места (>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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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;