diff --git a/src/components/LayoutStep.tsx b/src/components/LayoutStep.tsx index 7c5c2f8..4159687 100644 --- a/src/components/LayoutStep.tsx +++ b/src/components/LayoutStep.tsx @@ -1,6 +1,7 @@ import React, { useRef, useState, useMemo } from 'react'; import { AppConfig, LayoutSplits, Partition } from '../types'; -import { Grid, MousePointer2, Trash2, RotateCcw, X, Move, Settings2 } from 'lucide-react'; +// ИСПОЛЬЗУЕМ ТОЛЬКО БАЗОВЫЕ ИКОНКИ (чтобы не ломать билд) +import { Grid, MousePointer2, Trash2, RotateCcw, X, Plus } from 'lucide-react'; interface Props { config: AppConfig; @@ -21,20 +22,17 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const [mode, setMode] = useState('lines'); - // Мышь и состояния const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const [isButtonHovered, setIsButtonHovered] = useState(false); - // Main Grid States + // States const [phantomMainAxis, setPhantomMainAxis] = useState(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(null); const [dragging, setDragging] = useState(null); @@ -43,19 +41,17 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const safeY = Array.isArray(splits?.y) ? splits.y : []; const safePartitions = splits?.partitions || {}; - // --- Dimensions & Aspect Ratio --- const drawerW = Math.max(1, config.drawer.width || 300); const drawerD = Math.max(1, config.drawer.depth || 400); const aspectRatio = drawerD / drawerW; - // ViewBox (internal SVG coordinates) const viewBoxW = 1000; const viewBoxH = viewBoxW * aspectRatio; 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 Partition Data --- + // --- Helpers --- const getSelectedPartition = () => { if (!selectedPartitionId) return null; for (const key in safePartitions) { @@ -66,7 +62,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { }; const selectedData = getSelectedPartition(); - // --- ACTIONS: MAIN GRID --- + // --- ACTIONS --- const removeMainSplit = (axis: Axis, index: number) => { const newSplits = { ...splits, x: [...safeX], y: [...safeY] }; newSplits[axis] = newSplits[axis].filter((_, i) => i !== index); @@ -76,7 +72,6 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { setIsButtonHovered(false); }; - // --- ACTIONS: PARTITIONS --- const createPartition = (i: number, j: number, axis: Axis, offset: number) => { const key = `${i}-${j}`; const current = safePartitions[key] || []; @@ -110,12 +105,10 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const rect = svgRef.current.getBoundingClientRect(); if (rect.width === 0) return; - // Normalize coordinates (0 to 1) const nx = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); const ny = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)); setMousePos({ x: nx, y: ny }); - // --- DRAGGING LOGIC --- if (dragging) { if (dragging.type === 'main') { const newSplits = { ...splits, x: [...safeX], y: [...safeY] }; @@ -123,33 +116,32 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { newSplits[dragging.axis][dragging.index] = val; onChange(newSplits); } else { - // Dragging Partition - const [iStr, jStr] = dragging.cellKey.split('-'); + // Явное приведение типа для TS, чтобы не ругался при билде + const pDrag = dragging as { type: 'partition'; cellKey: string; id: string; axis: Axis }; + const [iStr, jStr] = pDrag.cellKey.split('-'); const i = parseInt(iStr); const j = parseInt(jStr); const cellX1 = sortedX[i]; const cellX2 = sortedX[i+1]; const cellY1 = sortedY[j]; const cellY2 = sortedY[j+1]; let newOffset = 0; - if (dragging.axis === 'x') { + 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(dragging.cellKey, dragging.id, { offset: newOffset }); + updatePartition(pDrag.cellKey, pDrag.id, { offset: newOffset }); } return; } if (isButtonHovered) return; - // --- HOVER LOGIC: MAIN LINES --- + // --- MODE: LINES --- if (mode === 'lines') { setHoveredMainSplit(null); const SNAP = 0.015; - - // Phantom Line if (nx > SNAP && nx < 1-SNAP && ny > SNAP && ny < 1-SNAP) { const closeToX = safeX.some(val => Math.abs(nx - val) < SNAP); const closeToY = safeY.some(val => Math.abs(ny - val) < SNAP); @@ -159,14 +151,12 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { } else { setPhantomMainAxis(null); } } } - - // --- HOVER LOGIC: PARTITIONS --- + // --- MODE: CELLS --- else if (mode === 'cells') { setHoveredPartition(null); setPhantomPartition(null); setHoveredCell(null); - // 1. Find which cell we are in let cellIndex = null; for(let i=0; i= sortedX[i] && nx <= sortedX[i+1]) { @@ -188,11 +178,9 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { const cy1 = sortedY[cellIndex.j]; const cy2 = sortedY[cellIndex.j+1]; const cw = cx2 - cx1; const ch = cy2 - cy1; - // Local coords in cell (0..1) const lx = (nx - cx1) / cw; const ly = (ny - cy1) / ch; - // Check existing partitions let foundPart = null; const PART_SNAP = 0.05; @@ -207,12 +195,10 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { if (foundPart) { setHoveredPartition({ id: foundPart.id, cellKey: key }); } else { - // Show Phantom Partition const distLeft = lx; const distRight = 1 - lx; const distTop = ly; const distBottom = 1 - ly; const minX = Math.min(distLeft, distRight); const minY = Math.min(distTop, distBottom); - const axis = minX < minY ? 'y' : 'x'; if (lx > 0.05 && lx < 0.95 && ly > 0.05 && ly < 0.95) { @@ -280,7 +266,7 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => {
- {/* --- CANVAS AREA --- */} + {/* --- CANVAS --- */}
- - {/* SVG Container - FILLS SPACE BUT KEEPS ASPECT RATIO */}
-
1 ? 'auto' : '100%', height: aspectRatio > 1 ? '100%' : 'auto', aspectRatio: `${1/aspectRatio}`, - maxHeight: '100%', - maxWidth: '100%', + 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()} + onMouseMove={handleGlobalMouseMove} onMouseDown={handleMouseDown} onMouseUp={() => setDragging(null)} onMouseLeave={() => setDragging(null)} onContextMenu={(e) => e.preventDefault()} > @@ -346,77 +320,41 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { - {/* --- ЯЧЕЙКИ И ВНУТРЕННОСТИ --- */} + {/* --- 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]; + const y2 = sortedY[j + 1]; // Гарантированно определена const cellX = x1 * viewBoxW; const cellY = y1 * viewBoxH; const cellW = (x2 - x1) * viewBoxW; const cellH = (y2 - y1) * viewBoxH; - const key = `${i}-${j}`; const parts = safePartitions[key] || []; - - // Логика выделения ячейки const isHovered = hoveredCell?.i === i && hoveredCell?.j === j && mode === 'cells'; const isAnyPartSelected = parts.some(p => p.id === selectedPartitionId); return ( - {/* Фон ячейки при наведении */} - {isHovered && ( - - )} - - {/* Рамка если выбрана стенка внутри этой ячейки */} - {isAnyPartSelected && mode === 'cells' && ( - - )} - - {/* Перегородки */} + {isHovered && } + {isAnyPartSelected && mode === 'cells' && } {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; - } - + 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 ( { e.stopPropagation(); removePartition(key, p.id); }}> - {/* Толстая невидимая линия для захвата */} - {/* Видимая линия */} - + ); })} - - {/* Фантомная перегородка */} {isHovered && phantomPartition && !hoveredPartition && !dragging && ( - {phantomPartition.axis === 'x' ? ( - - ) : ( - - )} + {phantomPartition.axis === 'x' ? + : + + } )} @@ -424,84 +362,55 @@ export const LayoutStep: React.FC = ({ config, splits, onChange }) => { }); })} - {/* --- ГЛАВНЫЕ ЛИНИИ (Поверх всего) --- */} + {/* --- MAIN GRID --- */} {safeX.map((x, i) => { const isHovered = hoveredMainSplit?.axis === 'x' && hoveredMainSplit.index === i; return ( - { if(mode === 'lines' && !dragging) { e.stopPropagation(); setHoveredMainSplit({axis: 'x', index: i}); setPhantomMainAxis(null); }}} - onDoubleClick={(e) => { e.stopPropagation(); removeMainSplit('x', i); }} - > + { if(mode === 'lines' && !dragging) { e.stopPropagation(); setHoveredMainSplit({axis: 'x', index: i}); setPhantomMainAxis(null); }}} onDoubleClick={(e) => { e.stopPropagation(); removeMainSplit('x', i); }}> ); })} - {safeY.map((y, i) => { const isHovered = hoveredMainSplit?.axis === 'y' && hoveredMainSplit.index === i; return ( - { if(mode === 'lines' && !dragging) { e.stopPropagation(); setHoveredMainSplit({axis: 'y', index: i}); setPhantomMainAxis(null); }}} - onDoubleClick={(e) => { e.stopPropagation(); removeMainSplit('y', i); }} - > + { if(mode === 'lines' && !dragging) { e.stopPropagation(); setHoveredMainSplit({axis: 'y', index: i}); setPhantomMainAxis(null); }}} onDoubleClick={(e) => { e.stopPropagation(); removeMainSplit('y', i); }}> ); })} - {/* Фантомная главная линия */} {mode === 'lines' && !hoveredMainSplit && !dragging && phantomMainAxis === 'x' && } {mode === 'lines' && !hoveredMainSplit && !dragging && phantomMainAxis === 'y' && }
- {/* --- SIDEBAR FOR SELECTED PARTITION SETTINGS --- */} + {/* --- SIDEBAR --- */} {mode === 'cells' && selectedData && (

- Настройки стенки + Настройки стенки

-
- {/* Высота */}
-
- Высота - {selectedData.part.height} мм -
- updatePartition(selectedData.key, selectedData.part.id, { height: parseFloat(e.target.value) })} - className="w-full h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-purple-500" - /> +
Высота {selectedData.part.height} мм
+ updatePartition(selectedData.key, selectedData.part.id, { height: parseFloat(e.target.value) })} className="w-full h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-purple-500"/>
- - {/* Скругление */}
- updatePartition(selectedData.key, selectedData.part.id, { rounded: e.target.checked })} - className="w-4 h-4 rounded bg-slate-700 border-slate-600 text-purple-500 focus:ring-0 cursor-pointer" - /> + updatePartition(selectedData.key, selectedData.part.id, { rounded: e.target.checked })} className="w-4 h-4 rounded bg-slate-700 border-slate-600 text-purple-500 focus:ring-0 cursor-pointer"/>
- - {/* Удалить */} -
- -
- Выделите стенку для настройки.
Двойной клик удаляет её. -
+
Выделите стенку для настройки.
Двойной клик удаляет её.
)}
diff --git a/src/types.ts b/src/types.ts index f7a9a30..5a2422b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,11 +11,11 @@ export interface AppConfig { cornerRadius: number; } -// Описание одной внутренней перегородки +// Описание внутренней перегородки export interface Partition { id: string; axis: 'x' | 'y'; - offset: number; // 0.1 - 0.9 + offset: number; // 0.1 - 0.9 height: number; rounded: boolean; }