From 18cc8f23db1bdc2ca380ee9605e5c92bb54d9454 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?= <rhalimov@elveesneotek.com>
Date: Sat, 10 Jan 2026 21:40:13 +0300
Subject: [PATCH] 6

---
 src/components/LayoutStep.tsx | 82 +++++++++++++++++++++++------------
 1 file changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/LayoutStep.tsx b/src/components/LayoutStep.tsx
index fcb5a66..23dd414 100644
--- a/src/components/LayoutStep.tsx
+++ b/src/components/LayoutStep.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useMemo } from 'react';
 import { AppConfig, LayoutSplits, Partition } from '../types';
-import { Grid, MousePointer2, Trash2, RotateCcw, X, Plus } from 'lucide-react';
+import { Grid, MousePointer2, Trash2, RotateCcw, X, Move } from 'lucide-react';
 
 interface Props {
   config: AppConfig;
@@ -11,31 +11,39 @@ interface Props {
 type EditMode = 'lines' | 'cells';
 type Axis = 'x' | 'y';
 
-// Тип для перетаскивания
+// Типы для перетаскивания
 type DragTarget = 
   | { type: 'main'; axis: Axis; index: number }
   | { type: 'partition'; cellKey: string; id: string; axis: Axis };
 
 export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   const svgRef = useRef<SVGSVGElement>(null);
+  
   const [mode, setMode] = useState<EditMode>('lines');
   
-  // States
+  // Состояния
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); 
   const [isButtonHovered, setIsButtonHovered] = useState(false);
+  
+  // Main Grid States
   const [phantomMainAxis, setPhantomMainAxis] = useState<Axis | null>(null);
   const [hoveredMainSplit, setHoveredMainSplit] = useState<{ axis: Axis; index: number } | null>(null);
+
+  // Partition States
   const [hoveredCell, setHoveredCell] = useState<{ i: number; j: number } | null>(null);
   const [hoveredPartition, setHoveredPartition] = useState<{ id: string; cellKey: string } | null>(null);
   const [phantomPartition, setPhantomPartition] = useState<{ axis: Axis; offset: number } | null>(null);
+  
+  // Selection & Dragging
   const [selectedPartitionId, setSelectedPartitionId] = useState<string | null>(null);
   const [dragging, setDragging] = useState<DragTarget | null>(null);
 
-  // --- Safe Data (Защита от вылетов) ---
+  // --- Safe Data ---
   const safeX = Array.isArray(splits?.x) ? splits.x : [];
   const safeY = Array.isArray(splits?.y) ? splits.y : [];
   const safePartitions = splits?.partitions || {};
 
+  // Размеры
   const drawerW = Math.max(1, config.drawer.width || 300);
   const drawerD = Math.max(1, config.drawer.depth || 400);
   const aspectRatio = drawerD / drawerW;
@@ -72,7 +80,10 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       const current = safePartitions[key] || [];
       const newPart: Partition = {
           id: Math.random().toString(36).substr(2, 9),
-          axis, offset, height: config.drawer.height || 80, rounded: false
+          axis,
+          offset,
+          height: config.drawer.height || 80,
+          rounded: false
       };
       onChange({ ...splits, partitions: { ...safePartitions, [key]: [...current, newPart] } });
       setSelectedPartitionId(newPart.id);
@@ -115,13 +126,13 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
             const cellY1 = sortedY[j]; const cellY2 = sortedY[j+1];
             
             let newOffset = 0;
-            if (pDrag.axis === 'x') { newOffset = (nx - cellX1) / (cellX2 - cellX1); } 
-            else { newOffset = (ny - cellY1) / (cellY2 - cellY1); }
-            
-            newOffset = Math.max(0.05, Math.min(0.95, newOffset));
-            if (!isNaN(newOffset)) {
-                updatePartition(pDrag.cellKey, pDrag.id, { offset: newOffset });
+            if (pDrag.axis === 'x') {
+                newOffset = (nx - cellX1) / (cellX2 - cellX1);
+            } else {
+                newOffset = (ny - cellY1) / (cellY2 - cellY1);
             }
+            newOffset = Math.max(0.05, Math.min(0.95, newOffset));
+            updatePartition(pDrag.cellKey, pDrag.id, { offset: newOffset });
         }
         return;
     }
@@ -230,18 +241,33 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
     }
   };
 
+  const handleMainSplitHover = (e: React.MouseEvent, axis: Axis, index: number) => {
+      if (mode !== 'lines' || dragging) return;
+      e.stopPropagation();
+      setHoveredMainSplit({ axis, index });
+      setPhantomMainAxis(null);
+  };
+
   return (
     <div className="bg-slate-900 p-4 rounded-xl shadow-lg border border-slate-800 h-full flex flex-col relative overflow-hidden">
       
       {/* HEADER */}
       <div className="flex justify-between items-center mb-2 z-20 shrink-0">
         <h2 className="text-lg font-bold flex items-center gap-2 text-primary">
-          <Grid size={20} /> 2. Макет
+          <Grid size={20} /> 2. Редактор макета
         </h2>
+        
         <div className="flex bg-slate-800 p-1 rounded-lg border border-slate-700">
-            <button onClick={() => { setMode('lines'); setSelectedPartitionId(null); }} className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${mode === 'lines' ? 'bg-primary text-white shadow' : 'text-gray-400 hover:text-gray-200'}`}>Границы</button>
-            <button onClick={() => setMode('cells')} className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${mode === 'cells' ? 'bg-primary text-white shadow' : 'text-gray-400 hover:text-gray-200'}`}>Внутри ячеек</button>
+            <button onClick={() => { setMode('lines'); setSelectedPartitionId(null); }} 
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${mode === 'lines' ? 'bg-primary text-white shadow' : 'text-gray-400 hover:text-gray-200'}`}>
+               <Move size={14}/> Границы
+            </button>
+            <button onClick={() => setMode('cells')} 
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${mode === 'cells' ? 'bg-primary text-white shadow' : 'text-gray-400 hover:text-gray-200'}`}>
+               <Grid size={14}/> Внутри ячеек
+            </button>
         </div>
+
         <button onClick={() => onChange({ x: [], y: [], partitions: {} })} className="px-3 py-1.5 text-xs text-red-400 border border-slate-700 rounded hover:bg-slate-800 transition-colors flex items-center gap-1">
             <RotateCcw size={14} /> Сброс
         </button>
@@ -252,12 +278,12 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
           <MousePointer2 size={14} className="text-primary" />
           {mode === 'lines' ? (
               <div className="flex gap-3">
-                  <span><b className="text-blue-400">ЛКМ:</b> Линия</span>
+                  <span><b className="text-blue-400">ЛКМ:</b> Создать/Тянуть линию</span>
                   <span><b className="text-red-400">ПКМ:</b> Удалить</span>
               </div>
           ) : (
               <div className="flex gap-3">
-                  <span><b className="text-green-400">ЛКМ в ячейке:</b> Стенка</span>
+                  <span><b className="text-green-400">ЛКМ в ячейке:</b> Создать стенку</span>
                   <span><b className="text-purple-400">Драг:</b> Двигать</span>
                   <span><b className="text-red-400">2xЛКМ:</b> Удалить</span>
               </div>
@@ -267,7 +293,8 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       {/* CANVAS */}
       <div className="flex-1 bg-slate-800/30 rounded-lg flex flex-col items-center justify-center relative overflow-hidden border border-slate-700/50 min-h-0 w-full">
             <div className="relative w-full h-full flex items-center justify-center p-4">
-                <div className="relative shadow-2xl bg-[#1e293b] border border-slate-600 rounded-sm overflow-hidden"
+                <div 
+                    className="relative shadow-2xl bg-[#1e293b] border border-slate-600 rounded-sm overflow-hidden"
                     style={{ 
                         width: aspectRatio > 1 ? 'auto' : '100%',
                         height: aspectRatio > 1 ? '100%' : 'auto',
@@ -288,14 +315,12 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                       </defs>
                       <rect width="100%" height="100%" fill="url(#grid)" />
 
-                      {/* --- CELLS & PARTITIONS --- */}
+                      {/* CELLS & PARTITIONS */}
                       {sortedX.slice(0, -1).map((x1, i) => {
                           const x2 = sortedX[i + 1];
                           return sortedY.slice(0, -1).map((y1, j) => {
-                              const y2 = sortedY[j + 1];
-                              // SAFETY CHECK: Если y2 не определен (такого быть не должно, но вдруг)
-                              if (y2 === undefined) return null;
-
+                              const y2 = sortedY[j + 1]; // ВОТ ЭТО ИСПРАВЛЕНО
+                              
                               const cellX = x1 * viewBoxW; const cellY = y1 * viewBoxH;
                               const cellW = (x2 - x1) * viewBoxW; const cellH = (y2 - y1) * viewBoxH;
                               
@@ -306,14 +331,18 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
 
                               return (
                                   <g key={`cell-${key}`}>
+                                      {/* Highlight Cell */}
                                       {isHovered && <rect x={cellX} y={cellY} width={cellW} height={cellH} fill="rgba(16, 185, 129, 0.05)" stroke="#10b981" strokeWidth="2" strokeDasharray="4,4" className="pointer-events-none"/>}
                                       {isAnyPartSelected && mode === 'cells' && <rect x={cellX} y={cellY} width={cellW} height={cellH} fill="transparent" stroke="#a855f7" strokeWidth="2" className="pointer-events-none opacity-50"/>}
+                                      
+                                      {/* Existing Partitions */}
                                       {parts.map(p => {
                                           const isSelected = selectedPartitionId === p.id;
                                           const isHoveredPart = hoveredPartition?.id === p.id;
                                           let lx1, ly1, lx2, ly2;
                                           if (p.axis === 'x') { const px = cellX + (cellW * p.offset); lx1 = px; ly1 = cellY; lx2 = px; ly2 = cellY + cellH; } 
                                           else { const py = cellY + (cellH * p.offset); lx1 = cellX; ly1 = py; lx2 = cellX + cellW; ly2 = py; }
+
                                           return (
                                               <g key={p.id} onDoubleClick={(e) => { e.stopPropagation(); removePartition(key, p.id); }}>
                                                   <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke="transparent" strokeWidth="30" />
@@ -321,6 +350,8 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                                               </g>
                                           );
                                       })}
+
+                                      {/* Phantom Partition */}
                                       {isHovered && phantomPartition && !hoveredPartition && !dragging && (
                                           <g className="pointer-events-none opacity-60">
                                               {phantomPartition.axis === 'x' ? 
@@ -334,7 +365,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                           });
                       })}
 
-                      {/* --- MAIN GRID X --- */}
+                      {/* MAIN GRID */}
                       {safeX.map((x, i) => {
                           const isHovered = hoveredMainSplit?.axis === 'x' && hoveredMainSplit.index === i;
                           return (
@@ -344,8 +375,6 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                             </g>
                           );
                       })}
-
-                      {/* --- MAIN GRID Y --- */}
                       {safeY.map((y, i) => {
                           const isHovered = hoveredMainSplit?.axis === 'y' && hoveredMainSplit.index === i;
                           return (
@@ -363,7 +392,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                 </div>
             </div>
 
-            {/* --- SIDEBAR --- */}
+            {/* SIDEBAR */}
             {mode === 'cells' && selectedData && (
                 <div className="absolute top-0 right-0 bottom-0 w-72 bg-slate-900 border-l border-slate-700 p-4 shadow-2xl flex flex-col z-30 animate-in slide-in-from-right duration-200">
                     <div className="flex justify-between items-center mb-6">
@@ -387,7 +416,6 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                 </div>
             )}
         </div>
-      </div>
     </div>
   );
 };
\ No newline at end of file