refactor: pltrefactor: plt display
This commit is contained in:
parent
7fd53650e3
commit
fdc5a4656f
|
|
@ -158,29 +158,6 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
const allPaths = cardPaths.map(p => p.points);
|
||||
const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
|
||||
|
||||
// 进度控制 (0 到 cardPaths.length)
|
||||
const [progress, setProgress] = createSignal(0);
|
||||
|
||||
// 计算当前正在切割的卡片索引
|
||||
const currentPathIndex = createMemo(() => {
|
||||
const p = progress();
|
||||
if (p <= 0) return -1;
|
||||
if (p >= cardPaths.length) return cardPaths.length - 1;
|
||||
return Math.floor(p);
|
||||
});
|
||||
|
||||
// 计算当前小球位置
|
||||
const ballPosition = createMemo(() => {
|
||||
const p = progress();
|
||||
if (p <= 0 || cardPaths.length === 0) return null;
|
||||
|
||||
const cardIndex = Math.min(Math.floor(p), cardPaths.length - 1);
|
||||
const cardProgress = p - cardIndex;
|
||||
const cardPath = cardPaths[cardIndex];
|
||||
|
||||
return getPointOnPath(cardPath.points, cardProgress);
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!plotterCode) {
|
||||
alert('没有可导出的卡片');
|
||||
|
|
@ -198,32 +175,12 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleProgressChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setProgress(Number(target.value));
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
{/* 头部控制栏 */}
|
||||
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
|
||||
<h2 class="text-base font-bold m-0">PLT 切割预览</h2>
|
||||
<div class="flex items-center gap-4 flex-1 max-w-md">
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap">切割进度</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={cardPaths.length}
|
||||
step="0.01"
|
||||
value={progress()}
|
||||
onInput={handleProgressChange}
|
||||
class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
/>
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap w-20 text-right">
|
||||
{Math.floor(progress())} / {cardPaths.length}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
|
|
@ -283,35 +240,39 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
{/* 切割路径 */}
|
||||
<For each={pageCardPaths}>
|
||||
{(path) => {
|
||||
const currentIndex = currentPathIndex();
|
||||
const isCurrentPath = currentIndex === path.cardIndex;
|
||||
const isCompleted = currentIndex > path.cardIndex;
|
||||
const displayColor = isCurrentPath ? '#ef4444' : (isCompleted ? '#10b981' : '#3b82f6');
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* 切割路径（虚线） */}
|
||||
{/* 切割路径 */}
|
||||
<path
|
||||
d={path.pathD}
|
||||
fill="none"
|
||||
stroke={displayColor}
|
||||
stroke="#3b82f6"
|
||||
stroke-width="0.3"
|
||||
stroke-dasharray="2 1"
|
||||
/>
|
||||
|
||||
{/* 动画小球 */}
|
||||
<circle
|
||||
r="0.8"
|
||||
fill="#ef4444"
|
||||
>
|
||||
<animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
|
||||
{/* 序号标签 */}
|
||||
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
||||
<circle
|
||||
r="2"
|
||||
fill="white"
|
||||
stroke={displayColor}
|
||||
stroke="#3b82f6"
|
||||
stroke-width="0.1"
|
||||
/>
|
||||
<text
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
font-size="1.5"
|
||||
fill={displayColor}
|
||||
fill="#3b82f6"
|
||||
font-weight="bold"
|
||||
>
|
||||
{path.cardIndex + 1}
|
||||
|
|
@ -321,43 +282,11 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
);
|
||||
}}
|
||||
</For>
|
||||
|
||||
{/* 动画小球 */}
|
||||
<Show when={ballPosition()}>
|
||||
{(pos) => (
|
||||
<circle
|
||||
cx={pos()[0]}
|
||||
cy={pos()[1]}
|
||||
r="0.8"
|
||||
fill="#ef4444"
|
||||
/>
|
||||
)}
|
||||
</Show>
|
||||
</svg>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #3b82f6" }}></div>
|
||||
<span class="text-sm text-gray-600">待切割路径</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #ef4444" }}></div>
|
||||
<span class="text-sm text-gray-600">正在切割</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #10b981" }}></div>
|
||||
<span class="text-sm text-gray-600">已切割</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-red-500"></div>
|
||||
<span class="text-sm text-gray-600">刀头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue