mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
Add thread metadata display and unique color handling
- Fix PyStitch threadlist interpretation: threads = color blocks, not unique colors - Add uniqueColors array to PesPatternData with proper deduplication at data layer - Display thread metadata (brand, catalog number, chart, description) across all components - Show unique colors vs thread blocks (e.g., "5 / 12" colors/blocks) - Improve null value handling for missing thread metadata - Reorder metadata display: brand + catalog # • chart + description - Add metadata to pattern preview legend, tooltips, and color swatches 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn
parent
501a7e8538
commit
eadbecc401
5 changed files with 865 additions and 615 deletions
|
|
@ -126,7 +126,7 @@ export function FileUpload({
|
|||
|
||||
{!isLoading && pesData && (
|
||||
<div className="mb-3">
|
||||
<div className="grid grid-cols-2 gap-2 text-xs mb-2">
|
||||
<div className="grid grid-cols-3 gap-2 text-xs mb-2">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Size</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
|
|
@ -140,22 +140,48 @@ export function FileUpload({
|
|||
{pesData.stitchCount.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Colors / Blocks</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{pesData.uniqueColors.length} / {pesData.threads.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Colors:</span>
|
||||
<div className="flex gap-1">
|
||||
{pesData.threads.slice(0, 8).map((thread, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: thread.hex }}
|
||||
title={`Thread ${idx + 1}: ${thread.hex}`}
|
||||
/>
|
||||
))}
|
||||
{pesData.colorCount > 8 && (
|
||||
{pesData.uniqueColors.slice(0, 8).map((color, idx) => {
|
||||
// Primary metadata: brand and catalog number
|
||||
const primaryMetadata = [
|
||||
color.brand,
|
||||
color.catalogNumber ? `#${color.catalogNumber}` : null
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
// Secondary metadata: chart and description
|
||||
const secondaryMetadata = [
|
||||
color.chart,
|
||||
color.description
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
|
||||
|
||||
const tooltipText = metadata
|
||||
? `Color ${idx + 1}: ${color.hex} - ${metadata}`
|
||||
: `Color ${idx + 1}: ${color.hex}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: color.hex }}
|
||||
title={tooltipText}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{pesData.uniqueColors.length > 8 && (
|
||||
<div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-[7px] font-bold text-gray-600 dark:text-gray-300">
|
||||
+{pesData.colorCount - 8}
|
||||
+{pesData.uniqueColors.length - 8}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -296,17 +296,42 @@ export function PatternCanvas({ pesData, sewingProgress, machineInfo, initialPat
|
|||
{pesData && (
|
||||
<>
|
||||
{/* Thread Legend Overlay */}
|
||||
<div className="absolute top-2.5 left-2.5 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm p-2.5 rounded-lg shadow-lg z-10 max-w-[150px]">
|
||||
<h4 className="m-0 mb-2 text-xs font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-300 dark:border-gray-600 pb-1.5">Threads</h4>
|
||||
{pesData.threads.map((thread, index) => (
|
||||
<div key={index} className="flex items-center gap-2 mb-1.5 last:mb-0">
|
||||
<div
|
||||
className="w-4 h-4 rounded border border-black dark:border-gray-300 flex-shrink-0"
|
||||
style={{ backgroundColor: thread.hex }}
|
||||
/>
|
||||
<span className="text-[11px] text-gray-900 dark:text-gray-100">Thread {index + 1}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="absolute top-2.5 left-2.5 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm p-2.5 rounded-lg shadow-lg z-10 max-w-[200px]">
|
||||
<h4 className="m-0 mb-2 text-xs font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-300 dark:border-gray-600 pb-1.5">Colors</h4>
|
||||
{pesData.uniqueColors.map((color, idx) => {
|
||||
// Primary metadata: brand and catalog number
|
||||
const primaryMetadata = [
|
||||
color.brand,
|
||||
color.catalogNumber ? `#${color.catalogNumber}` : null
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
// Secondary metadata: chart and description
|
||||
const secondaryMetadata = [
|
||||
color.chart,
|
||||
color.description
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<div key={idx} className="flex items-start gap-2 mb-1.5 last:mb-0">
|
||||
<div
|
||||
className="w-4 h-4 rounded border border-black dark:border-gray-300 flex-shrink-0 mt-0.5"
|
||||
style={{ backgroundColor: color.hex }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[11px] font-semibold text-gray-900 dark:text-gray-100">
|
||||
Color {idx + 1}
|
||||
</div>
|
||||
{(primaryMetadata || secondaryMetadata) && (
|
||||
<div className="text-[9px] text-gray-600 dark:text-gray-400 leading-tight mt-0.5 break-words">
|
||||
{primaryMetadata}
|
||||
{primaryMetadata && secondaryMetadata && <span className="mx-1">•</span>}
|
||||
{secondaryMetadata}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Pattern Offset Indicator */}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export function PatternSummaryCard({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs mb-3">
|
||||
<div className="grid grid-cols-3 gap-2 text-xs mb-3">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Size</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
|
|
@ -42,22 +42,50 @@ export function PatternSummaryCard({
|
|||
{pesData.stitchCount.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Colors</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{pesData.uniqueColors.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">Colors:</span>
|
||||
<div className="flex gap-1">
|
||||
{pesData.threads.slice(0, 8).map((thread, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: thread.hex }}
|
||||
title={`Thread ${idx + 1}: ${thread.hex}`}
|
||||
/>
|
||||
))}
|
||||
{pesData.colorCount > 8 && (
|
||||
{pesData.uniqueColors.slice(0, 8).map((color, idx) => {
|
||||
// Primary metadata: brand and catalog number
|
||||
const primaryMetadata = [
|
||||
color.brand,
|
||||
color.catalogNumber ? `#${color.catalogNumber}` : null
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
// Secondary metadata: chart and description
|
||||
const secondaryMetadata = [
|
||||
color.chart,
|
||||
color.description
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
|
||||
|
||||
// Show which thread blocks use this color
|
||||
const threadNumbers = color.threadIndices.map(i => i + 1).join(", ");
|
||||
const tooltipText = metadata
|
||||
? `Color ${idx + 1}: ${color.hex}\n${metadata}\nUsed in thread blocks: ${threadNumbers}`
|
||||
: `Color ${idx + 1}: ${color.hex}\nUsed in thread blocks: ${threadNumbers}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: color.hex }}
|
||||
title={tooltipText}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{pesData.uniqueColors.length > 8 && (
|
||||
<div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-[7px] font-bold text-gray-600 dark:text-gray-300">
|
||||
+{pesData.colorCount - 8}
|
||||
+{pesData.uniqueColors.length - 8}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@ import {
|
|||
PauseCircleIcon,
|
||||
ExclamationCircleIcon,
|
||||
ChartBarIcon,
|
||||
ArrowPathIcon
|
||||
} from '@heroicons/react/24/solid';
|
||||
import type { PatternInfo, SewingProgress } from '../types/machine';
|
||||
import { MachineStatus } from '../types/machine';
|
||||
import type { PesPatternData } from '../utils/pystitchConverter';
|
||||
ArrowPathIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import type { PatternInfo, SewingProgress } from "../types/machine";
|
||||
import { MachineStatus } from "../types/machine";
|
||||
import type { PesPatternData } from "../utils/pystitchConverter";
|
||||
import {
|
||||
canStartSewing,
|
||||
canStartMaskTrace,
|
||||
canResumeSewing,
|
||||
getStateVisualInfo
|
||||
} from '../utils/machineStateHelpers';
|
||||
getStateVisualInfo,
|
||||
} from "../utils/machineStateHelpers";
|
||||
|
||||
interface ProgressMonitorProps {
|
||||
machineStatus: MachineStatus;
|
||||
|
|
@ -43,7 +43,8 @@ export function ProgressMonitor({
|
|||
isDeleting = false,
|
||||
}: ProgressMonitorProps) {
|
||||
// State indicators
|
||||
const isMaskTraceComplete = machineStatus === MachineStatus.MASK_TRACE_COMPLETE;
|
||||
const isMaskTraceComplete =
|
||||
machineStatus === MachineStatus.MASK_TRACE_COMPLETE;
|
||||
|
||||
const stateVisual = getStateVisualInfo(machineStatus);
|
||||
|
||||
|
|
@ -52,57 +53,72 @@ export function ProgressMonitor({
|
|||
: 0;
|
||||
|
||||
// Calculate color block information from pesData
|
||||
const colorBlocks = pesData ? (() => {
|
||||
const blocks: Array<{
|
||||
colorIndex: number;
|
||||
threadHex: string;
|
||||
startStitch: number;
|
||||
endStitch: number;
|
||||
stitchCount: number;
|
||||
}> = [];
|
||||
const colorBlocks = pesData
|
||||
? (() => {
|
||||
const blocks: Array<{
|
||||
colorIndex: number;
|
||||
threadHex: string;
|
||||
startStitch: number;
|
||||
endStitch: number;
|
||||
stitchCount: number;
|
||||
threadCatalogNumber: string | null;
|
||||
threadBrand: string | null;
|
||||
threadDescription: string | null;
|
||||
threadChart: string | null;
|
||||
}> = [];
|
||||
|
||||
let currentColorIndex = pesData.stitches[0]?.[3] ?? 0;
|
||||
let blockStartStitch = 0;
|
||||
let currentColorIndex = pesData.stitches[0]?.[3] ?? 0;
|
||||
let blockStartStitch = 0;
|
||||
|
||||
for (let i = 0; i < pesData.stitches.length; i++) {
|
||||
const stitchColorIndex = pesData.stitches[i][3];
|
||||
for (let i = 0; i < pesData.stitches.length; i++) {
|
||||
const stitchColorIndex = pesData.stitches[i][3];
|
||||
|
||||
// When color changes, save the previous block
|
||||
if (stitchColorIndex !== currentColorIndex || i === pesData.stitches.length - 1) {
|
||||
const endStitch = i === pesData.stitches.length - 1 ? i + 1 : i;
|
||||
blocks.push({
|
||||
colorIndex: currentColorIndex,
|
||||
threadHex: pesData.threads[currentColorIndex]?.hex || '#000000',
|
||||
startStitch: blockStartStitch,
|
||||
endStitch: endStitch,
|
||||
stitchCount: endStitch - blockStartStitch,
|
||||
});
|
||||
// When color changes, save the previous block
|
||||
if (
|
||||
stitchColorIndex !== currentColorIndex ||
|
||||
i === pesData.stitches.length - 1
|
||||
) {
|
||||
const endStitch = i === pesData.stitches.length - 1 ? i + 1 : i;
|
||||
const thread = pesData.threads[currentColorIndex];
|
||||
blocks.push({
|
||||
colorIndex: currentColorIndex,
|
||||
threadHex: thread?.hex || "#000000",
|
||||
threadCatalogNumber: thread?.catalogNumber ?? null,
|
||||
threadBrand: thread?.brand ?? null,
|
||||
threadDescription: thread?.description ?? null,
|
||||
threadChart: thread?.chart ?? null,
|
||||
startStitch: blockStartStitch,
|
||||
endStitch: endStitch,
|
||||
stitchCount: endStitch - blockStartStitch,
|
||||
});
|
||||
|
||||
currentColorIndex = stitchColorIndex;
|
||||
blockStartStitch = i;
|
||||
}
|
||||
}
|
||||
currentColorIndex = stitchColorIndex;
|
||||
blockStartStitch = i;
|
||||
}
|
||||
}
|
||||
|
||||
return blocks;
|
||||
})() : [];
|
||||
return blocks;
|
||||
})()
|
||||
: [];
|
||||
|
||||
// Determine current color block based on current stitch
|
||||
const currentStitch = sewingProgress?.currentStitch || 0;
|
||||
const currentBlockIndex = colorBlocks.findIndex(
|
||||
block => currentStitch >= block.startStitch && currentStitch < block.endStitch
|
||||
(block) =>
|
||||
currentStitch >= block.startStitch && currentStitch < block.endStitch,
|
||||
);
|
||||
|
||||
const stateIndicatorColors = {
|
||||
idle: 'bg-blue-50 dark:bg-blue-900/20 border-blue-600',
|
||||
info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-600',
|
||||
active: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
|
||||
waiting: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
|
||||
warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500',
|
||||
complete: 'bg-green-50 dark:bg-green-900/20 border-green-600',
|
||||
success: 'bg-green-50 dark:bg-green-900/20 border-green-600',
|
||||
interrupted: 'bg-red-50 dark:bg-red-900/20 border-red-600',
|
||||
error: 'bg-red-50 dark:bg-red-900/20 border-red-600',
|
||||
danger: 'bg-red-50 dark:bg-red-900/20 border-red-600',
|
||||
idle: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",
|
||||
info: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",
|
||||
active: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
|
||||
waiting: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
|
||||
warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
|
||||
complete: "bg-green-50 dark:bg-green-900/20 border-green-600",
|
||||
success: "bg-green-50 dark:bg-green-900/20 border-green-600",
|
||||
interrupted: "bg-red-50 dark:bg-red-900/20 border-red-600",
|
||||
error: "bg-red-50 dark:bg-red-900/20 border-red-600",
|
||||
danger: "bg-red-50 dark:bg-red-900/20 border-red-600",
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -110,7 +126,9 @@ export function ProgressMonitor({
|
|||
<div className="flex items-start gap-3 mb-3">
|
||||
<ChartBarIcon className="w-6 h-6 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Sewing Progress</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">
|
||||
Sewing Progress
|
||||
</h3>
|
||||
{sewingProgress && (
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{progressPercent.toFixed(1)}% complete
|
||||
|
|
@ -123,18 +141,29 @@ export function ProgressMonitor({
|
|||
{patternInfo && (
|
||||
<div className="grid grid-cols-3 gap-2 text-xs mb-3">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Total Stitches</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">{patternInfo.totalStitches.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Est. Time</span>
|
||||
<span className="text-gray-600 dark:text-gray-400 block">
|
||||
Total Stitches
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{Math.floor(patternInfo.totalTime / 60)}:{String(patternInfo.totalTime % 60).padStart(2, '0')}
|
||||
{patternInfo.totalStitches.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Speed</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">{patternInfo.speed} spm</span>
|
||||
<span className="text-gray-600 dark:text-gray-400 block">
|
||||
Est. Time
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{Math.floor(patternInfo.totalTime / 60)}:
|
||||
{String(patternInfo.totalTime % 60).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">
|
||||
Speed
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{patternInfo.speed} spm
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -143,20 +172,29 @@ export function ProgressMonitor({
|
|||
{sewingProgress && (
|
||||
<div className="mb-3">
|
||||
<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-md overflow-hidden shadow-inner relative mb-2">
|
||||
<div className="h-full bg-gradient-to-r from-purple-600 to-purple-700 dark:from-purple-600 dark:to-purple-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]" style={{ width: `${progressPercent}%` }} />
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-purple-600 to-purple-700 dark:from-purple-600 dark:to-purple-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs mb-3">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Current Stitch</span>
|
||||
<span className="text-gray-600 dark:text-gray-400 block">
|
||||
Current Stitch
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{sewingProgress.currentStitch.toLocaleString()} / {patternInfo?.totalStitches.toLocaleString() || 0}
|
||||
{sewingProgress.currentStitch.toLocaleString()} /{" "}
|
||||
{patternInfo?.totalStitches.toLocaleString() || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">
|
||||
<span className="text-gray-600 dark:text-gray-400 block">Time Elapsed</span>
|
||||
<span className="text-gray-600 dark:text-gray-400 block">
|
||||
Time Elapsed
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{Math.floor(sewingProgress.currentTime / 60)}:{String(sewingProgress.currentTime % 60).padStart(2, '0')}
|
||||
{Math.floor(sewingProgress.currentTime / 60)}:
|
||||
{String(sewingProgress.currentTime % 60).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,33 +202,54 @@ export function ProgressMonitor({
|
|||
)}
|
||||
|
||||
{/* State Visual Indicator */}
|
||||
{patternInfo && (() => {
|
||||
const iconMap = {
|
||||
ready: <ClockIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />,
|
||||
active: <PlayIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
|
||||
waiting: <PauseCircleIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
|
||||
complete: <CheckBadgeIcon className="w-5 h-5 text-green-600 dark:text-green-400" />,
|
||||
interrupted: <PauseCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />,
|
||||
error: <ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
|
||||
};
|
||||
{patternInfo &&
|
||||
(() => {
|
||||
const iconMap = {
|
||||
ready: (
|
||||
<ClockIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
),
|
||||
active: (
|
||||
<PlayIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
|
||||
),
|
||||
waiting: (
|
||||
<PauseCircleIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
|
||||
),
|
||||
complete: (
|
||||
<CheckBadgeIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
),
|
||||
interrupted: (
|
||||
<PauseCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
|
||||
),
|
||||
error: (
|
||||
<ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}`}>
|
||||
<div className="flex-shrink-0">
|
||||
{iconMap[stateVisual.iconName]}
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}`}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{iconMap[stateVisual.iconName]}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-xs dark:text-gray-100">
|
||||
{stateVisual.label}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-600 dark:text-gray-400">
|
||||
{stateVisual.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-xs dark:text-gray-100">{stateVisual.label}</div>
|
||||
<div className="text-[10px] text-gray-600 dark:text-gray-400">{stateVisual.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Color Blocks */}
|
||||
{colorBlocks.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<h4 className="text-xs font-semibold mb-2 text-gray-700 dark:text-gray-300">Color Blocks</h4>
|
||||
<h4 className="text-xs font-semibold mb-2 text-gray-700 dark:text-gray-300">
|
||||
Color Blocks
|
||||
</h4>
|
||||
<div className="flex flex-col gap-2">
|
||||
{colorBlocks.map((block, index) => {
|
||||
const isCompleted = currentStitch >= block.endStitch;
|
||||
|
|
@ -199,7 +258,9 @@ export function ProgressMonitor({
|
|||
// Calculate progress within current block
|
||||
let blockProgress = 0;
|
||||
if (isCurrent) {
|
||||
blockProgress = ((currentStitch - block.startStitch) / block.stitchCount) * 100;
|
||||
blockProgress =
|
||||
((currentStitch - block.startStitch) / block.stitchCount) *
|
||||
100;
|
||||
} else if (isCompleted) {
|
||||
blockProgress = 100;
|
||||
}
|
||||
|
|
@ -209,13 +270,13 @@ export function ProgressMonitor({
|
|||
key={index}
|
||||
className={`p-2.5 rounded-lg border-2 transition-all duration-300 ${
|
||||
isCompleted
|
||||
? 'border-green-600 bg-green-50 dark:bg-green-900/20'
|
||||
? "border-green-600 bg-green-50 dark:bg-green-900/20"
|
||||
: isCurrent
|
||||
? 'border-purple-600 bg-purple-50 dark:bg-purple-900/20 shadow-lg shadow-purple-600/20 animate-pulseGlow'
|
||||
: 'border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 opacity-70'
|
||||
? "border-purple-600 bg-purple-50 dark:bg-purple-900/20 shadow-lg shadow-purple-600/20 animate-pulseGlow"
|
||||
: "border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 opacity-70"
|
||||
}`}
|
||||
role="listitem"
|
||||
aria-label={`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? 'completed' : isCurrent ? 'in progress' : 'pending'}`}
|
||||
aria-label={`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? "completed" : isCurrent ? "in progress" : "pending"}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
{/* Color swatch */}
|
||||
|
|
@ -223,7 +284,7 @@ export function ProgressMonitor({
|
|||
className="w-7 h-7 rounded-lg border-2 border-gray-300 dark:border-gray-600 shadow-md flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: block.threadHex,
|
||||
...(isCurrent && { borderColor: '#9333ea' })
|
||||
...(isCurrent && { borderColor: "#9333ea" }),
|
||||
}}
|
||||
title={`Thread color: ${block.threadHex}`}
|
||||
aria-label={`Thread color ${block.threadHex}`}
|
||||
|
|
@ -233,6 +294,28 @@ export function ProgressMonitor({
|
|||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-xs text-gray-900 dark:text-gray-100">
|
||||
Thread {block.colorIndex + 1}
|
||||
{(block.threadBrand || block.threadChart || block.threadDescription || block.threadCatalogNumber) && (
|
||||
<span className="font-normal text-gray-600 dark:text-gray-400">
|
||||
{" "}
|
||||
(
|
||||
{(() => {
|
||||
// Primary metadata: brand and catalog number
|
||||
const primaryMetadata = [
|
||||
block.threadBrand,
|
||||
block.threadCatalogNumber ? `#${block.threadCatalogNumber}` : null
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
// Secondary metadata: chart and description
|
||||
const secondaryMetadata = [
|
||||
block.threadChart,
|
||||
block.threadDescription
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");
|
||||
})()}
|
||||
)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-600 dark:text-gray-400 mt-0.5">
|
||||
{block.stitchCount.toLocaleString()} stitches
|
||||
|
|
@ -241,11 +324,20 @@ export function ProgressMonitor({
|
|||
|
||||
{/* Status icon */}
|
||||
{isCompleted ? (
|
||||
<CheckCircleIcon className="w-5 h-5 text-green-600 flex-shrink-0" aria-label="Completed" />
|
||||
<CheckCircleIcon
|
||||
className="w-5 h-5 text-green-600 flex-shrink-0"
|
||||
aria-label="Completed"
|
||||
/>
|
||||
) : isCurrent ? (
|
||||
<ArrowRightIcon className="w-5 h-5 text-purple-600 flex-shrink-0 animate-pulse" aria-label="In progress" />
|
||||
<ArrowRightIcon
|
||||
className="w-5 h-5 text-purple-600 flex-shrink-0 animate-pulse"
|
||||
aria-label="In progress"
|
||||
/>
|
||||
) : (
|
||||
<CircleStackIcon className="w-5 h-5 text-gray-400 flex-shrink-0" aria-label="Pending" />
|
||||
<CircleStackIcon
|
||||
className="w-5 h-5 text-gray-400 flex-shrink-0"
|
||||
aria-label="Pending"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -304,10 +396,14 @@ export function ProgressMonitor({
|
|||
onClick={onStartMaskTrace}
|
||||
disabled={isDeleting}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
aria-label={isMaskTraceComplete ? 'Start mask trace again' : 'Start mask trace'}
|
||||
aria-label={
|
||||
isMaskTraceComplete
|
||||
? "Start mask trace again"
|
||||
: "Start mask trace"
|
||||
}
|
||||
>
|
||||
<ArrowPathIcon className="w-3.5 h-3.5" />
|
||||
{isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'}
|
||||
{isMaskTraceComplete ? "Trace Again" : "Start Mask Trace"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { pyodideLoader } from './pyodideLoader';
|
||||
import { pyodideLoader } from "./pyodideLoader";
|
||||
import {
|
||||
STITCH,
|
||||
MOVE,
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
PEN_CUT_DATA,
|
||||
PEN_COLOR_END,
|
||||
PEN_DATA_END,
|
||||
} from './embroideryConstants';
|
||||
} from "./embroideryConstants";
|
||||
|
||||
// JavaScript constants module to expose to Python
|
||||
const jsEmbConstants = {
|
||||
|
|
@ -23,6 +23,19 @@ export interface PesPatternData {
|
|||
threads: Array<{
|
||||
color: number;
|
||||
hex: string;
|
||||
brand: string | null;
|
||||
catalogNumber: string | null;
|
||||
description: string | null;
|
||||
chart: string | null;
|
||||
}>;
|
||||
uniqueColors: Array<{
|
||||
color: number;
|
||||
hex: string;
|
||||
brand: string | null;
|
||||
catalogNumber: string | null;
|
||||
description: string | null;
|
||||
chart: string | null;
|
||||
threadIndices: number[]; // Which thread entries use this color
|
||||
}>;
|
||||
penData: Uint8Array;
|
||||
colorCount: number;
|
||||
|
|
@ -43,14 +56,14 @@ export async function convertPesToPen(file: File): Promise<PesPatternData> {
|
|||
const pyodide = await pyodideLoader.initialize();
|
||||
|
||||
// Register our JavaScript constants module for Python to import
|
||||
pyodide.registerJsModule('js_emb_constants', jsEmbConstants);
|
||||
pyodide.registerJsModule("js_emb_constants", jsEmbConstants);
|
||||
|
||||
// Read the PES file
|
||||
const buffer = await file.arrayBuffer();
|
||||
const uint8Array = new Uint8Array(buffer);
|
||||
|
||||
// Write file to Pyodide virtual filesystem
|
||||
const filename = '/tmp/pattern.pes';
|
||||
const filename = "/tmp/pattern.pes";
|
||||
pyodide.FS.writeFile(filename, uint8Array);
|
||||
|
||||
// Read the pattern using PyStitch
|
||||
|
|
@ -123,7 +136,11 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
'threads': [
|
||||
{
|
||||
'color': thread.color if hasattr(thread, 'color') else 0,
|
||||
'hex': thread.hex_color() if hasattr(thread, 'hex_color') else '#000000'
|
||||
'hex': thread.hex_color() if hasattr(thread, 'hex_color') else '#000000',
|
||||
'catalog_number': thread.catalog_number if hasattr(thread, 'catalog_number') else -1,
|
||||
'brand': thread.brand if hasattr(thread, 'brand') else "",
|
||||
'description': thread.description if hasattr(thread, 'description') else "",
|
||||
'chart': thread.chart if hasattr(thread, 'chart') else ""
|
||||
}
|
||||
for thread in pattern.threadlist
|
||||
],
|
||||
|
|
@ -136,7 +153,6 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
// Convert Python result to JavaScript
|
||||
const data = result.toJs({ dict_converter: Object.fromEntries });
|
||||
|
||||
|
||||
// Clean up virtual file
|
||||
try {
|
||||
pyodide.FS.unlink(filename);
|
||||
|
|
@ -145,19 +161,45 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
}
|
||||
|
||||
// Extract stitches and validate
|
||||
const stitches: number[][] = Array.from(data.stitches as ArrayLike<ArrayLike<number>>).map((stitch) =>
|
||||
Array.from(stitch)
|
||||
);
|
||||
const stitches: number[][] = Array.from(
|
||||
data.stitches as ArrayLike<ArrayLike<number>>,
|
||||
).map((stitch) => Array.from(stitch));
|
||||
|
||||
if (!stitches || stitches.length === 0) {
|
||||
throw new Error('Invalid PES file or no stitches found');
|
||||
throw new Error("Invalid PES file or no stitches found");
|
||||
}
|
||||
|
||||
// Extract thread data
|
||||
const threads = (data.threads as Array<{ color?: number; hex?: string }>).map((thread) => ({
|
||||
color: thread.color || 0,
|
||||
hex: thread.hex || '#000000',
|
||||
}));
|
||||
// Extract thread data - preserve null values for unavailable metadata
|
||||
const threads = (
|
||||
data.threads as Array<{
|
||||
color?: number;
|
||||
hex?: string;
|
||||
catalog_number?: number | string;
|
||||
brand?: string;
|
||||
description?: string;
|
||||
chart?: string;
|
||||
}>
|
||||
).map((thread) => {
|
||||
// Normalize catalog_number - can be string or number from PyStitch
|
||||
const catalogNum = thread.catalog_number;
|
||||
const normalizedCatalog =
|
||||
catalogNum !== undefined &&
|
||||
catalogNum !== null &&
|
||||
catalogNum !== -1 &&
|
||||
catalogNum !== "-1" &&
|
||||
catalogNum !== ""
|
||||
? String(catalogNum)
|
||||
: null;
|
||||
|
||||
return {
|
||||
color: thread.color ?? 0,
|
||||
hex: thread.hex || "#000000",
|
||||
catalogNumber: normalizedCatalog,
|
||||
brand: thread.brand && thread.brand !== "" ? thread.brand : null,
|
||||
description: thread.description && thread.description !== "" ? thread.description : null,
|
||||
chart: thread.chart && thread.chart !== "" ? thread.chart : null,
|
||||
};
|
||||
});
|
||||
|
||||
// Track bounds
|
||||
let minX = Infinity;
|
||||
|
|
@ -187,8 +229,8 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
// Encode absolute coordinates with flags in low 3 bits
|
||||
// Shift coordinates left by 3 bits to make room for flags
|
||||
// As per official app line 780: buffer[index64] = (byte) ((int) numArray4[index64 / 4, 0] << 3 & (int) byte.MaxValue);
|
||||
let xEncoded = (absX << 3) & 0xFFFF;
|
||||
let yEncoded = (absY << 3) & 0xFFFF;
|
||||
let xEncoded = (absX << 3) & 0xffff;
|
||||
let yEncoded = (absY << 3) & 0xffff;
|
||||
|
||||
// Add command flags to Y-coordinate based on stitch type
|
||||
if (cmd & MOVE) {
|
||||
|
|
@ -209,20 +251,24 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
const nextStitch = stitches[i + 1];
|
||||
const nextStitchColor = nextStitch?.[3];
|
||||
|
||||
if (!isLastStitch && nextStitchColor !== undefined && nextStitchColor !== stitchColor) {
|
||||
if (
|
||||
!isLastStitch &&
|
||||
nextStitchColor !== undefined &&
|
||||
nextStitchColor !== stitchColor
|
||||
) {
|
||||
// This is the last stitch before a color change (but not the last stitch overall)
|
||||
xEncoded = (xEncoded & 0xFFF8) | PEN_COLOR_END;
|
||||
xEncoded = (xEncoded & 0xfff8) | PEN_COLOR_END;
|
||||
} else if (isLastStitch) {
|
||||
// This is the very last stitch of the pattern
|
||||
xEncoded = (xEncoded & 0xFFF8) | PEN_DATA_END;
|
||||
xEncoded = (xEncoded & 0xfff8) | PEN_DATA_END;
|
||||
}
|
||||
|
||||
// Add stitch as 4 bytes: [X_low, X_high, Y_low, Y_high]
|
||||
penStitches.push(
|
||||
xEncoded & 0xFF,
|
||||
(xEncoded >> 8) & 0xFF,
|
||||
yEncoded & 0xFF,
|
||||
(yEncoded >> 8) & 0xFF
|
||||
xEncoded & 0xff,
|
||||
(xEncoded >> 8) & 0xff,
|
||||
yEncoded & 0xff,
|
||||
(yEncoded >> 8) & 0xff,
|
||||
);
|
||||
|
||||
// Check for end command
|
||||
|
|
@ -233,9 +279,29 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
|
||||
const penData = new Uint8Array(penStitches);
|
||||
|
||||
// Calculate unique colors from threads (threads represent color blocks, not unique colors)
|
||||
const uniqueColors = threads.reduce((acc, thread, idx) => {
|
||||
const existing = acc.find(c => c.hex === thread.hex);
|
||||
if (existing) {
|
||||
existing.threadIndices.push(idx);
|
||||
} else {
|
||||
acc.push({
|
||||
color: thread.color,
|
||||
hex: thread.hex,
|
||||
brand: thread.brand,
|
||||
catalogNumber: thread.catalogNumber,
|
||||
description: thread.description,
|
||||
chart: thread.chart,
|
||||
threadIndices: [idx],
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
}, [] as PesPatternData['uniqueColors']);
|
||||
|
||||
return {
|
||||
stitches,
|
||||
threads,
|
||||
uniqueColors,
|
||||
penData,
|
||||
colorCount: data.thread_count,
|
||||
stitchCount: data.stitch_count,
|
||||
|
|
@ -251,16 +317,25 @@ for i, stitch in enumerate(pattern.stitches):
|
|||
/**
|
||||
* Get thread color from pattern data
|
||||
*/
|
||||
export function getThreadColor(data: PesPatternData, colorIndex: number): string {
|
||||
export function getThreadColor(
|
||||
data: PesPatternData,
|
||||
colorIndex: number,
|
||||
): string {
|
||||
if (!data.threads || colorIndex < 0 || colorIndex >= data.threads.length) {
|
||||
// Default colors if not specified or index out of bounds
|
||||
const defaultColors = [
|
||||
'#FF0000', '#00FF00', '#0000FF', '#FFFF00',
|
||||
'#FF00FF', '#00FFFF', '#FFA500', '#800080',
|
||||
"#FF0000",
|
||||
"#00FF00",
|
||||
"#0000FF",
|
||||
"#FFFF00",
|
||||
"#FF00FF",
|
||||
"#00FFFF",
|
||||
"#FFA500",
|
||||
"#800080",
|
||||
];
|
||||
const safeIndex = Math.max(0, colorIndex) % defaultColors.length;
|
||||
return defaultColors[safeIndex];
|
||||
}
|
||||
|
||||
return data.threads[colorIndex]?.hex || '#000000';
|
||||
return data.threads[colorIndex]?.hex || "#000000";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue