This commit is contained in:
Халимов Рустам
2026-01-11 15:48:49 +03:00
parent 56183b3ada
commit 803c7213d5

View File

@@ -1,4 +1,4 @@
import React, { useRef, useState, useMemo } from 'react';
import React, { useRef, useState, useMemo, useEffect } from 'react';
import { AppConfig, LayoutSplits, Partition } from '../types';
import { Grid, MousePointer2, Trash2, RotateCcw, X, Move, Settings2 } from 'lucide-react';
@@ -61,11 +61,12 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
};
const selectedData = getSelectedPartition();
// --- SOLVER ---
// --- SOLVER (Robust) ---
const solveWallLimits = (parts: Partition[]): LimitMap => {
const limits: LimitMap = {};
parts.forEach(p => { limits[p.id] = { min: 0, max: 1 }; });
// 4 прохода для надежности
for (let pass = 0; pass < 4; pass++) {
parts.forEach(target => {
let newMin = 0;
@@ -78,7 +79,9 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
const obsMin = limits[obstacle.id].min;
const obsMax = limits[obstacle.id].max;
if (target.offset >= obsMin - 0.001 && target.offset <= obsMax + 0.001) {
// Epsilon для надежного пересечения
const EPS = 0.001;
if (target.offset >= obsMin - EPS && target.offset <= obsMax + EPS) {
if (obstacle.offset < center) newMin = Math.max(newMin, obstacle.offset);
else if (obstacle.offset > center) newMax = Math.min(newMax, obstacle.offset);
}
@@ -89,23 +92,26 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
return limits;
};
// --- RAYCASTING ---
// --- RAYCASTING (Find empty box) ---
const getCursorBox = (lx: number, ly: number, parts: Partition[], limitMap: LimitMap) => {
let minX = 0, maxX = 1;
let minY = 0, maxY = 1;
parts.forEach(p => {
const { min: pMin, max: pMax } = limitMap[p.id];
// Игнорируем схлопнутые стенки
if (pMax - pMin < 0.001) return;
const EPS = 0.002;
const EPS = 0.005; // Чуть больше допуск для мыши
if (p.axis === 'x') {
// Вертикальная стенка
if (ly >= pMin - EPS && ly <= pMax + EPS) {
if (p.offset < lx) minX = Math.max(minX, p.offset);
if (p.offset > lx) maxX = Math.min(maxX, p.offset);
}
} else {
// Горизонтальная стенка
if (lx >= pMin - EPS && lx <= pMax + EPS) {
if (p.offset < ly) minY = Math.max(minY, p.offset);
if (p.offset > ly) maxY = Math.min(maxY, p.offset);
@@ -115,7 +121,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
return { minX, maxX, minY, maxY };
};
// Поиск соседей для размеров
// --- NEIGHBORS (For dimensions) ---
const getNeighborOffsets = (offset: number, crossPos: number, axis: Axis, parts: Partition[], limitMap: LimitMap) => {
let min = 0;
let max = 1;
@@ -214,7 +220,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
setPhantomPartition(null);
setHoveredCell(null);
// 1. Find Cell
// 1. Find Global Cell
let cellIdx = null;
for (let i = 0; i < sortedX.length - 1; i++) {
if (nx >= sortedX[i] && nx <= sortedX[i+1]) {
@@ -238,10 +244,7 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
const lx = (nx - cx1) / cw;
const ly = (ny - cy1) / ch;
// Реальные размеры в мм (для интуитивности)
const realCellW = cw * drawerW;
const realCellH = ch * drawerD;
// Check hover over existing walls
let found = null;
const SNAP = 0.05;
for (const p of parts) {
@@ -256,38 +259,41 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
if (found) {
setHoveredPartition({ id: found.id, cellKey: key });
} else {
// --- ЛОГИКА ФАНТОМА ---
// --- PHANTOM LOGIC ---
const box = getCursorBox(lx, ly, parts, limitMap);
const distL = lx - box.minX; const distR = box.maxX - lx;
const distT = ly - box.minY; const distB = box.maxY - ly;
// Локальные координаты относительно "коробки" (0..1)
const localBoxW = box.maxX - box.minX;
const localBoxH = box.maxY - box.minY;
// Размеры "комнаты" под курсором
const boxW = (box.maxX - box.minX) * realCellW;
const boxH = (box.maxY - box.minY) * realCellH;
const relX = (lx - box.minX) / localBoxW;
const relY = (ly - box.minY) / localBoxH;
// 1. По умолчанию делим длинную сторону (чтобы ячейки стремились к квадрату)
let newAxis: Axis = boxW > boxH ? 'x' : 'y';
// Определяем ось на основе позиции мыши в "коробке"
// Если мы близко к краям - хотим отрезать кусок (перпендикуляр)
// Если в центре - делим длинную сторону
const edgeThreshold = 0.2; // 20% от края
let newAxis: Axis;
// 2. Но если мы близко к краю (менее 15% ширины/высоты),
// значит пользователь хочет отрезать узкую полоску параллельно этому краю.
const edgeThreshold = 0.15; // 15%
const relL = lx - box.minX;
const relT = ly - box.minY;
const relW = box.maxX - box.minX;
const relH = box.maxY - box.minY;
const nearLeftRight = relX < edgeThreshold || relX > (1 - edgeThreshold);
const nearTopBottom = relY < edgeThreshold || relY > (1 - edgeThreshold);
// Если близко к бокам -> ставим вертикальную (X)
if (relL / relW < edgeThreshold || (relW - relL) / relW < edgeThreshold) {
newAxis = 'x';
}
// Если близко к верху/низу -> ставим горизонтальную (Y)
else if (relT / relH < edgeThreshold || (relH - relT) / relH < edgeThreshold) {
newAxis = 'y';
if (nearLeftRight && !nearTopBottom) {
newAxis = 'x'; // Рядом с боковой стенкой -> Вертикальная
} else if (nearTopBottom && !nearLeftRight) {
newAxis = 'y'; // Рядом с верхней/нижней -> Горизонтальная
} else {
// В центре или в углу -> делим длинную сторону (учитывая реальные мм)
const realBoxW = localBoxW * (cw * drawerW);
const realBoxH = localBoxH * (ch * drawerD);
newAxis = realBoxW > realBoxH ? 'x' : 'y';
}
// Проверяем, есть ли место (>10% размера)
if ((newAxis === 'y' && relH > 0.1) || (newAxis === 'x' && relW > 0.1)) {
// Финальная проверка: есть ли место?
const valid = (newAxis === 'x' && localBoxW > 0.05) || (newAxis === 'y' && localBoxH > 0.05);
if (valid) {
const offset = newAxis === 'x' ? lx : ly;
const min = newAxis === 'x' ? box.minY : box.minX;
const max = newAxis === 'x' ? box.maxY : box.maxX;
@@ -460,7 +466,6 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
{/* LEFT: WORKSPACE */}
<div className="flex-1 flex flex-col relative min-w-0">
{/* TOOLBAR */}
<div className="flex justify-between items-center p-3 border-b border-slate-800 bg-slate-900 z-10 shrink-0">
<h2 className="text-sm font-bold flex items-center gap-2 text-primary"><Grid size={18} /> Редактор</h2>
<div className="flex bg-slate-800 p-1 rounded-lg border border-slate-700">
@@ -470,7 +475,6 @@ export const LayoutStep: React.FC<Props> = ({ config, splits, onChange }) => {
<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>
</div>
{/* CANVAS */}
<div className="flex-1 bg-slate-800/30 flex items-center justify-center p-4 overflow-hidden relative">
<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', aspectRatio: `${1/aspectRatio}`, maxHeight: '100%', maxWidth: '100%', cursor: mode === 'lines' ? (dragging ? 'grabbing' : hoveredMainSplit ? 'col-resize' : 'crosshair') : (dragging ? 'grabbing' : hoveredPartition ? 'grab' : hoveredCell ? 'crosshair' : 'default') }}>
<svg ref={svgRef} viewBox={`0 0 ${viewBoxW} ${viewBoxH}`} className="w-full h-full touch-none block" onMouseMove={handleMouseMove} onMouseDown={handleMouseDown} onMouseUp={() => setDragging(null)} onMouseLeave={() => setDragging(null)} onContextMenu={(e) => e.preventDefault()}>