Try fix layout step
This commit is contained in:
Халимов Рустам
@@ -8,7 +8,7 @@ import { createBinGeometry, generateSTL, exportSTL } from '../services/geometryG
|
||||
import { Download, Package, Info, Loader2, Share2, Check, Ruler } from 'lucide-react';
|
||||
import { generateShareUrl } from '../utils/share';
|
||||
|
||||
// --- DrawerFrame (Каркас) ---
|
||||
// --- DrawerFrame (Каркас ящика) ---
|
||||
const DrawerFrame = ({ config }: { config: AppConfig }) => {
|
||||
const { width, depth, height } = config.drawer;
|
||||
const offset = 0.5;
|
||||
@@ -32,32 +32,37 @@ interface BinMeshProps {
|
||||
}
|
||||
|
||||
const BinMesh: React.FC<BinMeshProps> = ({ part, thickness, cornerRadius, isSelected, onClick }) => {
|
||||
// 1. Создаем геометрию, учитывая ВНУТРЕННИЕ ПЕРЕГОРОДКИ
|
||||
const geometry = useMemo(() => {
|
||||
return createBinGeometry(
|
||||
part.width,
|
||||
part.depth,
|
||||
part.height,
|
||||
thickness,
|
||||
cornerRadius,
|
||||
part.internalPartitions // <--- ВАЖНО: передаем перегородки
|
||||
cornerRadius,
|
||||
part.internalPartitions // <--- ВАЖНО: передаем перегородки в генератор
|
||||
);
|
||||
}, [part, thickness, cornerRadius]);
|
||||
}, [part, thickness, cornerRadius]);
|
||||
|
||||
// 2. Создаем контур выделения (EdgesGeometry)
|
||||
// Threshold 20 градусов скрывает линии на плавных скруглениях
|
||||
const edgesGeometry = useMemo(() => {
|
||||
return new THREE.EdgesGeometry(geometry, 20);
|
||||
}, [geometry]);
|
||||
|
||||
return (
|
||||
<group position={[part.x + part.width/2, 0, part.y + part.depth/2]}>
|
||||
{/* Сама модель */}
|
||||
<mesh geometry={geometry} onClick={(e) => { e.stopPropagation(); onClick(); }}>
|
||||
<meshStandardMaterial
|
||||
color={isSelected ? '#f59e0b' : part.color}
|
||||
roughness={0.5}
|
||||
metalness={0.1}
|
||||
side={THREE.DoubleSide}
|
||||
side={THREE.DoubleSide} // Рисуем обе стороны стенок
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Белая подсветка при выборе */}
|
||||
{isSelected && (
|
||||
<lineSegments geometry={edgesGeometry}>
|
||||
<lineBasicMaterial color="white" linewidth={2} />
|
||||
@@ -67,7 +72,7 @@ const BinMesh: React.FC<BinMeshProps> = ({ part, thickness, cornerRadius, isSele
|
||||
);
|
||||
};
|
||||
|
||||
// --- PreviewStep (Основной) ---
|
||||
// --- PreviewStep (Основной компонент) ---
|
||||
interface Props {
|
||||
parts: GeneratedPart[];
|
||||
config: AppConfig;
|
||||
@@ -80,25 +85,42 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
const [shareUrlCopied, setShareUrlCopied] = useState(false);
|
||||
const itemRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||
|
||||
// Скролл к выбранной детали в списке
|
||||
useEffect(() => {
|
||||
if (selectedId && itemRefs.current[selectedId]) {
|
||||
itemRefs.current[selectedId]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [selectedId]);
|
||||
|
||||
// Скачивание одной детали
|
||||
const handleDownload = (part: GeneratedPart) => {
|
||||
const geometry = createBinGeometry(part.width, part.depth, part.height, config.wallThickness, config.cornerRadius);
|
||||
const geometry = createBinGeometry(
|
||||
part.width,
|
||||
part.depth,
|
||||
part.height,
|
||||
config.wallThickness,
|
||||
config.cornerRadius,
|
||||
part.internalPartitions // <--- ВАЖНО для STL
|
||||
);
|
||||
const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial());
|
||||
exportSTL(mesh, `${part.name.replace(/\s+/g, '_')}.stl`);
|
||||
};
|
||||
|
||||
// Скачивание всего архивом
|
||||
const handleDownloadAll = async () => {
|
||||
if (isZipping) return;
|
||||
setIsZipping(true);
|
||||
try {
|
||||
const zip = new JSZip();
|
||||
parts.forEach(part => {
|
||||
const geometry = createBinGeometry(part.width, part.depth, part.height, config.wallThickness, config.cornerRadius);
|
||||
const geometry = createBinGeometry(
|
||||
part.width,
|
||||
part.depth,
|
||||
part.height,
|
||||
config.wallThickness,
|
||||
config.cornerRadius,
|
||||
part.internalPartitions // <--- ВАЖНО для STL
|
||||
);
|
||||
const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial());
|
||||
const stlData = generateSTL(mesh);
|
||||
zip.file(`${part.name.replace(/\s+/g, '_')}.stl`, stlData);
|
||||
@@ -117,6 +139,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// Поделиться ссылкой
|
||||
const handleShare = async () => {
|
||||
const url = generateShareUrl(config, splits);
|
||||
let success = false;
|
||||
@@ -150,8 +173,9 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Верхняя панель */}
|
||||
{/* Верхняя панель: Размеры + Поделиться */}
|
||||
<div className="flex flex-col xl:flex-row justify-between items-center bg-slate-800/80 p-4 rounded-xl border border-slate-700 mb-4 gap-4 backdrop-blur-sm shadow-lg">
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 justify-center md:justify-start">
|
||||
<div className="hidden md:flex items-center gap-2 text-gray-300 mr-2">
|
||||
<Ruler className="text-primary" size={20} />
|
||||
@@ -173,6 +197,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
<span className="text-sm text-slate-500 font-bold self-baseline">мм</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className={`
|
||||
@@ -268,7 +293,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
`}
|
||||
onClick={() => setSelectedId(part.id)}
|
||||
>
|
||||
{/* Фон-индикатор */}
|
||||
{/* Индикатор цвета */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-white/5 to-transparent rounded-bl-3xl pointer-events-none"
|
||||
style={{ backgroundColor: part.color, opacity: 0.1 }}
|
||||
@@ -285,12 +310,12 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- РАЗМЕРЫ (НОВОЕ) --- */}
|
||||
{/* Размеры */}
|
||||
<div className="text-[10px] text-gray-400 font-mono z-10">
|
||||
{part.width.toFixed(0)} × {part.depth.toFixed(0)} × {part.height.toFixed(0)}
|
||||
</div>
|
||||
|
||||
{/* Кнопка */}
|
||||
{/* Кнопка скачивания */}
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDownload(part); }}
|
||||
className="w-full py-1.5 bg-slate-700 hover:bg-primary hover:text-white text-gray-300 rounded text-xs flex items-center justify-center gap-1.5 transition-colors font-medium border border-slate-600 hover:border-primary z-10 mt-1"
|
||||
|
||||
Reference in New Issue
Block a user