259 lines
11 KiB
TypeScript
259 lines
11 KiB
TypeScript
import React, { useMemo, Suspense, useEffect, useRef, useState } from 'react';
|
||
import { Canvas } from '@react-three/fiber';
|
||
import { OrbitControls, Center, Environment } from '@react-three/drei';
|
||
import * as THREE from 'three';
|
||
import JSZip from 'jszip';
|
||
import { AppConfig, GeneratedPart } from '../types';
|
||
import { createBinGeometry, exportSTL, generateSTL } from '../services/geometryGenerator';
|
||
import { Download, Package, Info, Loader2 } from 'lucide-react';
|
||
|
||
// --- 3D Helper Components ---
|
||
|
||
// Каркас ящика (только ребра, без диагоналей)
|
||
const DrawerFrame = ({ config }: { config: AppConfig }) => {
|
||
const { width, depth, height } = config.drawer;
|
||
const offset = 0.5; // Небольшой отступ наружу
|
||
|
||
return (
|
||
<group position={[width / 2, height / 2, depth / 2]}>
|
||
<lineSegments>
|
||
<edgesGeometry args={[new THREE.BoxGeometry(width + offset, height + offset, depth + offset)]} />
|
||
<lineBasicMaterial color="#475569" />
|
||
</lineSegments>
|
||
</group>
|
||
)
|
||
}
|
||
|
||
// --- Bin Component ---
|
||
|
||
interface BinMeshProps {
|
||
part: GeneratedPart;
|
||
thickness: number;
|
||
isSelected: boolean;
|
||
onClick: () => void;
|
||
}
|
||
|
||
const BinMesh: React.FC<BinMeshProps> = ({ part, thickness, isSelected, onClick }) => {
|
||
// REMOVED ARTIFICIAL GAP: The part dimensions now include the printer tolerance physically.
|
||
// The gap will be visible naturally because part.width is smaller than grid size.
|
||
|
||
// Генерируем реальную геометрию, как для STL
|
||
const geometry = useMemo(() => {
|
||
return createBinGeometry(part.width, part.depth, part.height, thickness);
|
||
}, [part, thickness]);
|
||
|
||
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}
|
||
/>
|
||
</mesh>
|
||
|
||
{/* Подсветка выделения (Bounding Box) */}
|
||
{isSelected && (
|
||
<lineSegments position={[0, part.height/2, 0]}>
|
||
<edgesGeometry args={[new THREE.BoxGeometry(part.width, part.height, part.depth)]} />
|
||
<lineBasicMaterial color="white" linewidth={2} />
|
||
</lineSegments>
|
||
)}
|
||
</group>
|
||
);
|
||
};
|
||
|
||
interface Props {
|
||
parts: GeneratedPart[];
|
||
config: AppConfig;
|
||
}
|
||
|
||
export const PreviewStep: React.FC<Props> = ({ parts, config }) => {
|
||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||
const [isZipping, setIsZipping] = 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);
|
||
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 {
|
||
console.log("Starting ZIP generation...");
|
||
// Ensure JSZip is available
|
||
if (typeof JSZip === 'undefined' && !JSZip) {
|
||
throw new Error("Библиотека JSZip не загружена.");
|
||
}
|
||
|
||
const zip = new JSZip();
|
||
|
||
// Генерация STL для каждой части и добавление в архив
|
||
parts.forEach(part => {
|
||
const geometry = createBinGeometry(part.width, part.depth, part.height, config.wallThickness);
|
||
const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial());
|
||
const stlData = generateSTL(mesh);
|
||
// stlData is Uint8Array or string here, which is supported
|
||
zip.file(`${part.name.replace(/\s+/g, '_')}.stl`, stlData);
|
||
});
|
||
|
||
console.log("Files added to ZIP. Generating blob...");
|
||
|
||
// Генерация самого ZIP файла
|
||
const content = await zip.generateAsync({ type: "blob" });
|
||
|
||
console.log("ZIP blob generated. Size:", content.size);
|
||
|
||
// Скачивание
|
||
const link = document.createElement('a');
|
||
link.href = URL.createObjectURL(content);
|
||
link.download = "PrintFit_Project.zip";
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
} catch (e: any) {
|
||
console.error("Failed to create zip archive", e);
|
||
alert(`Ошибка при создании архива: ${e.message || 'Неизвестная ошибка'}`);
|
||
} finally {
|
||
setIsZipping(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col lg:flex-row h-full gap-6">
|
||
{/* 3D Viewer */}
|
||
<div className="flex-1 bg-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-800 relative min-h-[400px]">
|
||
<div className="absolute top-4 right-4 z-10 bg-black/60 p-3 rounded-lg text-xs text-gray-300 backdrop-blur pointer-events-none border border-slate-700">
|
||
<div className="flex items-center gap-2 mb-1 text-primary font-bold">
|
||
<Info size={14} /> Управление
|
||
</div>
|
||
<ul className="space-y-1">
|
||
<li>• ЛКМ: Вращение</li>
|
||
<li>• ПКМ: Перемещение</li>
|
||
<li>• Скролл: Масштаб</li>
|
||
<li className="text-accent mt-2 font-semibold">• Клик по детали для выбора</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<Canvas
|
||
shadows
|
||
dpr={[1, 2]}
|
||
camera={{
|
||
position: [config.drawer.width * 1.5, config.drawer.height * 3, config.drawer.depth * 1.5],
|
||
fov: 45,
|
||
near: 1,
|
||
far: 20000
|
||
}}
|
||
>
|
||
<Suspense fallback={null}>
|
||
<color attach="background" args={['#0f172a']} />
|
||
|
||
<ambientLight intensity={0.7} />
|
||
<directionalLight position={[100, 200, 50]} intensity={1.2} />
|
||
<directionalLight position={[-100, 100, -50]} intensity={0.5} />
|
||
<Environment preset="city" />
|
||
|
||
<Center>
|
||
<group>
|
||
<DrawerFrame config={config} />
|
||
{parts.map(part => (
|
||
<BinMesh
|
||
key={part.id}
|
||
part={part}
|
||
thickness={config.wallThickness}
|
||
isSelected={selectedId === part.id}
|
||
onClick={() => setSelectedId(part.id)}
|
||
/>
|
||
))}
|
||
</group>
|
||
</Center>
|
||
|
||
<OrbitControls makeDefault minDistance={10} maxDistance={10000} />
|
||
</Suspense>
|
||
</Canvas>
|
||
</div>
|
||
|
||
{/* Sidebar List */}
|
||
<div className="w-full lg:w-96 bg-slate-900 p-6 rounded-xl border border-slate-800 flex flex-col h-full shadow-xl">
|
||
<div className="flex justify-between items-center mb-6 shrink-0">
|
||
<h2 className="text-xl font-bold flex items-center gap-2 text-primary">
|
||
<Package size={24} /> Детали ({parts.length})
|
||
</h2>
|
||
<button
|
||
onClick={handleDownloadAll}
|
||
disabled={isZipping || parts.length === 0}
|
||
className={`bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-1 transition-all active:scale-95 disabled:opacity-50 disabled:scale-100 disabled:cursor-not-allowed`}
|
||
>
|
||
{isZipping ? (
|
||
<>
|
||
<Loader2 size={16} className="animate-spin" /> ZIP...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Download size={16} /> Скачать все
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto pr-2 space-y-3 custom-scrollbar">
|
||
{parts.map(part => (
|
||
<div
|
||
key={part.id}
|
||
ref={(el) => { itemRefs.current[part.id] = el }}
|
||
className={`p-4 rounded-lg border transition-all cursor-pointer group ${selectedId === part.id ? 'bg-slate-800 border-accent shadow-md shadow-accent/10 ring-1 ring-accent' : 'bg-slate-800/50 border-slate-700 hover:border-slate-500 hover:bg-slate-800'}`}
|
||
onClick={() => setSelectedId(part.id)}
|
||
>
|
||
<div className="flex justify-between items-start mb-2">
|
||
<span className="font-semibold text-gray-200 group-hover:text-white transition-colors">{part.name}</span>
|
||
<div
|
||
className="w-3 h-3 rounded-full border border-white/10"
|
||
style={{ backgroundColor: part.color }}
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2 text-xs text-gray-400 mb-3">
|
||
<div className="bg-slate-900/50 p-1.5 rounded">
|
||
<span className="block text-gray-500 uppercase text-[9px] mb-0.5">Ширина</span>
|
||
{part.width.toFixed(1)}
|
||
</div>
|
||
<div className="bg-slate-900/50 p-1.5 rounded">
|
||
<span className="block text-gray-500 uppercase text-[9px] mb-0.5">Глубина</span>
|
||
{part.depth.toFixed(1)}
|
||
</div>
|
||
<div className="bg-slate-900/50 p-1.5 rounded">
|
||
<span className="block text-gray-500 uppercase text-[9px] mb-0.5">Высота</span>
|
||
{part.height.toFixed(1)}
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); handleDownload(part); }}
|
||
className="w-full py-2 bg-slate-700 hover:bg-primary hover:text-white text-gray-300 rounded text-xs flex items-center justify-center gap-2 transition-colors font-medium"
|
||
>
|
||
<Download size={14} /> Скачать STL
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |