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

7

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

53
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, 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,
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);
@@ -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;
}
@@ -141,7 +137,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
if (mode === 'lines') {
setHoveredMainSplit(null);
const SNAP = 0.015;
const SNAP = 0.015;
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);
@@ -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); }}
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>
<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>
</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 Partition */}
{/* Phantom */}
{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>