7

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, Move } from 'lucide-react';
+import { Grid, MousePointer2, Trash2, RotateCcw, X, Plus } from 'lucide-react';
 
 interface Props {
   config: AppConfig;
@@ -24,26 +24,23 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   // Состояния
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); 
   const [isButtonHovered, setIsButtonHovered] = useState(false);
+  const [dragging, setDragging] = useState<DragTarget | null>(null);
   
-  // Main Grid States
+  // Main Grid
   const [phantomMainAxis, setPhantomMainAxis] = useState<Axis | null>(null);
   const [hoveredMainSplit, setHoveredMainSplit] = useState<{ axis: Axis; index: number } | null>(null);
 
-  // Partition States
+  // Partitions
   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 ---
   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;
@@ -54,7 +51,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 ---
+  // --- Helpers ---
   const getSelectedPartition = () => {
       if (!selectedPartitionId) return null;
       for (const key in safePartitions) {
@@ -65,7 +62,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
   };
   const selectedData = getSelectedPartition();
 
-  // --- ACTIONS ---
+  // --- Actions ---
   const removeMainSplit = (axis: Axis, index: number) => {
     const newSplits = { ...splits, x: [...safeX], y: [...safeY] };
     newSplits[axis] = newSplits[axis].filter((_, i) => i !== index);
@@ -80,10 +77,7 @@ 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,
+          axis, offset, height: config.drawer.height || 80, rounded: false
-          offset,
-          height: config.drawer.height || 80,
-          rounded: false
       };
       onChange({ ...splits, partitions: { ...safePartitions, [key]: [...current, newPart] } });
       setSelectedPartitionId(newPart.id);
@@ -102,7 +96,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
       setHoveredPartition(null);
   };
 
-  // --- MOUSE HANDLER ---
+  // --- Mouse Handlers ---
   const handleMouseMove = (e: React.MouseEvent) => {
     if (!svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
@@ -132,7 +126,9 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                 newOffset = (ny - cellY1) / (cellY2 - cellY1);
             }
             newOffset = Math.max(0.05, Math.min(0.95, newOffset));
-            updatePartition(pDrag.cellKey, pDrag.id, { offset: newOffset });
+            if (!isNaN(newOffset)) {
+                updatePartition(pDrag.cellKey, pDrag.id, { offset: newOffset });
+            }
         }
         return;
     }
@@ -256,18 +252,10 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
         <h2 className="text-lg font-bold flex items-center gap-2 text-primary">
           <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); }} 
+            <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>
-                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 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>
-               <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>
@@ -319,7 +307,8 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                       {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]; // ВОТ ЭТО ИСПРАВЛЕНО
+                              // ЯВНОЕ ОПРЕДЕЛЕНИЕ ПЕРЕМЕННОЙ Y2
+                              const y2 = sortedY[j + 1];
                               
                               const cellX = x1 * viewBoxW; const cellY = y1 * viewBoxH;
                               const cellW = (x2 - x1) * viewBoxW; const cellH = (y2 - y1) * viewBoxH;
@@ -331,18 +320,17 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
 
                               return (
                                   <g key={`cell-${key}`}>
-                                      {/* Highlight Cell */}
+                                      {/* Highlight */}
                                       {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 */}
+                                      {/* 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" />
@@ -350,8 +338,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                                               </g>
                                           );
                                       })}
-
+                                      {/* Phantom */}
-                                      {/* Phantom Partition */}
                                       {isHovered && phantomPartition && !hoveredPartition && !dragging && (
                                           <g className="pointer-events-none opacity-60">
                                               {phantomPartition.axis === 'x' ? 
@@ -385,7 +372,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
                           );
                       })}
 
-                      {/* PHANTOMS */}
+                      {/* MAIN PHANTOMS */}
                       {mode === 'lines' && !hoveredMainSplit && !dragging && phantomMainAxis === 'x' && <line x1={mousePos.x * viewBoxW} y1="0" x2={mousePos.x * viewBoxW} y2="100%" stroke="#3b82f6" strokeWidth="4" strokeDasharray="8,8" className="pointer-events-none opacity-50"/>}
                       {mode === 'lines' && !hoveredMainSplit && !dragging && phantomMainAxis === 'y' && <line x1="0" y1={mousePos.y * viewBoxH} x2="100%" y2={mousePos.y * viewBoxH} stroke="#3b82f6" strokeWidth="4" strokeDasharray="8,8" className="pointer-events-none opacity-50"/>}
                    </svg>