rust/BoxGenerator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

6

Browse Source
This commit is contained in:
Халимов Рустам
2026-01-10 21:40:13 +03:00
parent 85b5fef5ab
commit 18cc8f23db
1 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/LayoutStep.tsx
View File

@@ -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>
);
};