- {document.palette.map((color, index) => (
-
-
- {settings.showSymbols ? (
-
- {PRINT_SYMBOLS[index] ?? "?"}
-
- ) : null}
-
{index === 0 ? "MC" : `CC${index}`}
+ {!isDuplicate ? (
+
+ Construction
- {index === 0
- ? "Main/background colour"
- : `Contrast colour ${index}`}
+ {settings.construction === "flat"
+ ? "Worked flat"
+ : "In the round"}
- {color.hex.toUpperCase()}
- ))}
-
-
+ ) : null}
+
+ Pattern
+
+ {settings.patternUse === "single"
+ ? "Single motif"
+ : `${instructionDocument.width}-stitch repeat`}
+
+
+
+ Gauge
+
+ {document.gaugeStitches} sts and {document.gaugeRows} rows
+ over {document.gaugeMeasure} {document.gaugeUnit}
+
+
+
+
+
+ Colour key
+
+ {document.palette.map((color, index) => (
+
+
+ {settings.showSymbols ? (
+
+ {PRINT_SYMBOLS[index] ?? "?"}
+
+ ) : null}
+ {index === 0 ? "MC" : `CC${index}`}
+
+ {index === 0
+ ? "Main/background colour"
+ : `Contrast colour ${index}`}
+
+ {color.hex.toUpperCase()}
+
+ ))}
+
-
- How to work the chart
- {techniqueInstructions(settings)}
-
- Begin with {unitName.toLowerCase()} 1 at the bottom of the
- chart.{" "}
- {isDuplicate
- ? "Follow each chart row from left to right, or embroider the duplicate stitches in any order that feels comfortable."
- : settings.construction === "round"
- ? "Read every round from right to left."
- : "Read right-side rows from right to left and wrong-side rows from left to right."}
- {settings.patternUse === "repeat"
- ? ` Repeat the full ${instructionDocument.width}-stitch chart across the work as needed.`
- : " Work the chart once, positioning the motif as required in your project."}
-
-
+
+ How to work the chart
+ {techniqueInstructions(settings)}
+
+ Begin with {unitName.toLowerCase()} 1 at the bottom of the
+ chart.{" "}
+ {isDuplicate
+ ? "Follow each chart row from left to right, or embroider the duplicate stitches in any order that feels comfortable."
+ : settings.construction === "round"
+ ? "Read every round from right to left."
+ : "Read right-side rows from right to left and wrong-side rows from left to right."}
+ {settings.patternUse === "repeat"
+ ? ` Repeat the full ${instructionDocument.width}-stitch chart across the work as needed.`
+ : " Work the chart once, positioning the motif as required in your project."}
+
+
-
-
- Written{" "}
- {isDuplicate
- ? "rows"
- : settings.construction === "round"
- ? "rounds"
- : "rows"}
-
-
- {settings.technique === "duplicate"
- ? "Sequences are written in chart-reading order. Skip counts are base stitches left unembroidered; other counts are duplicate stitches worked in that colour."
- : showStitchMath
- ? "Sequences are written in working order. Colour counts show ordinary knit stitches; special stitch actions show their own abbreviations. The count beneath each row accounts for stitches consumed and produced by those actions."
- : "Sequences are written in working order. Each number is the number of stitches to work in that colour."}
-
-
- {rows.map((row) => (
- -
-
- {unitName} {row.number}
- {row.side ? ` (${row.side})` : ""}:
- {" "}
- {row.sequence}
- {showStitchMath ? (
-
- {row.startingStitches} sts in → {row.endingStitches}{" "}
- sts out (
- {row.change > 0 ? `+${row.change}` : row.change})
-
- ) : null}
-
- ))}
-
-
-
+
+
+ Written{" "}
+ {isDuplicate
+ ? "rows"
+ : settings.construction === "round"
+ ? "rounds"
+ : "rows"}
+
+
+ {settings.technique === "duplicate"
+ ? "Sequences are written in chart-reading order. Skip counts are base stitches left unembroidered; other counts are duplicate stitches worked in that colour."
+ : showStitchMath
+ ? "Sequences are written in working order. Colour counts show ordinary knit stitches; special stitch actions show their own abbreviations. The count beneath each row accounts for stitches consumed and produced by those actions."
+ : "Sequences are written in working order. Each number is the number of stitches to work in that colour."}
+
+
+ {rows.map((row) => (
+ -
+
+ {unitName} {row.number}
+ {row.side ? ` (${row.side})` : ""}:
+ {" "}
+ {row.sequence}
+ {showStitchMath ? (
+
+ {row.startingStitches} sts in → {row.endingStitches}{" "}
+ sts out (
+ {row.change > 0 ? `+${row.change}` : row.change})
+
+ ) : null}
+
+ ))}
+
+
+
+ )}
diff --git a/components/knit-mode.tsx b/components/knit-mode.tsx
index 561ec2e..f1b790e 100644
--- a/components/knit-mode.tsx
+++ b/components/knit-mode.tsx
@@ -16,19 +16,21 @@ import {
rowStitchMath,
rowStitchSteps,
stitchActionAt,
- stitchActionLabel,
stitchActionMath,
stitchActionSymbol,
chartCellDisplayColor,
copyStitchCellColors,
} from "@/lib/chart";
-
-export type KnitProgress = {
- row: number;
- stitch: number;
- trimBorder: boolean;
- markerStyle: MarkerStyle;
-};
+import type { KnitProgress } from "@/lib/chart-schema";
+import { rowSequence, workedStepLabel } from "@/lib/knit-sequence";
+import {
+ moveYokeKnitStep,
+ moveYokeKnitPage,
+ yokeKnitModel,
+ yokeKnitPages,
+} from "@/lib/yoke-knit";
+import { planYokeShortRows, shortRowInstructions } from "@/lib/yoke-short-rows";
+export type { KnitProgress } from "@/lib/chart-schema";
export type MarkerStyle = "none" | "flower" | "heart" | "star" | "yarn";
@@ -59,8 +61,8 @@ function clamp(value: number, minimum: number, maximum: number) {
return Math.min(maximum, Math.max(minimum, value));
}
-function majorColumnBoundary(column: number, width: number) {
- return column > 0 && column < width && column % 10 === 0;
+function majorColumnBoundary(column: number, width: number, offset = 0) {
+ return column > 0 && column < width && (column + offset) % 10 === 0;
}
function majorRowBoundary(chartRow: number, height: number) {
@@ -73,57 +75,6 @@ function isRightToLeft(document: ChartDocument, row: number) {
return document.instructions.construction === "round" || row % 2 === 1;
}
-function rowSequence(document: ChartDocument, rowNumber: number) {
- const source = rowStitchSteps(document, rowNumber);
- const ordered = isRightToLeft(document, rowNumber)
- ? [...source].reverse()
- : source;
- const labels = new Map(
- document.palette.map((color, index) => [
- color.id,
- index === 0 ? "MC" : `CC${index}`,
- ]),
- );
- if (document.instructions.technique === "duplicate")
- labels.set(document.palette[0].id, "Skip");
- return ordered.reduce<
- Array<{
- key: string;
- colorId: string;
- label: string;
- count: number;
- showCount: boolean;
- }>
- >((runs, step) => {
- if (step.action !== "knit") {
- const isEdgeAction =
- step.action === "cast-on" || step.action === "bind-off";
- const previous = runs[runs.length - 1];
- if (isEdgeAction && previous?.key === step.action) previous.count += 1;
- else
- runs.push({
- key: isEdgeAction ? step.action : `${step.action}-${step.column}`,
- colorId: step.colorId,
- label: stitchActionLabel(step.action),
- count: 1,
- showCount: isEdgeAction,
- });
- return runs;
- }
- const previous = runs[runs.length - 1];
- if (previous?.key === step.colorId) previous.count += 1;
- else
- runs.push({
- key: step.colorId,
- colorId: step.colorId,
- label: labels.get(step.colorId) ?? "?",
- count: 1,
- showCount: true,
- });
- return runs;
- }, []);
-}
-
function knitRegion(document: ChartDocument, shouldTrim: boolean) {
if (!shouldTrim) return { document, trimmed: false };
const backgroundId = document.palette[0]?.id;
@@ -188,35 +139,119 @@ export function KnitMode({
() => false,
);
const wakeLockRef = useRef
(null);
+ const yoke = document.yoke;
+ const model = useMemo(() => (yoke ? yokeKnitModel(yoke) : null), [yoke]);
+ const sectionColumns = progress.sectionColumns ?? 100;
+ const pages = useMemo(
+ () => (yoke && model ? yokeKnitPages(yoke, model, sectionColumns) : null),
+ [yoke, model, sectionColumns],
+ );
+ const pageRounds = useMemo(
+ () =>
+ model && pages
+ ? model.rounds.map((round, r) => ({
+ ...round,
+ lengths: pages.map((page) => page.rows[r].steps.length),
+ }))
+ : null,
+ [model, pages],
+ );
+ const roundNumber = clamp(progress.row, 1, document.height);
+ const markerSourceSection = model?.identical ? 0 : (progress.section ?? 0);
+ const markerPage =
+ pages?.findIndex((page) =>
+ page.rows[roundNumber - 1].steps.some(
+ (step) =>
+ step.sourceSection === markerSourceSection &&
+ step.sourceStep === progress.stitch,
+ ),
+ ) ?? -1;
+ const requestedPage = clamp(
+ progress.viewSection ?? Math.max(0, markerPage),
+ 0,
+ (pages?.length ?? 1) - 1,
+ );
+ const section =
+ pages && !pages[requestedPage].rows[roundNumber - 1].steps.length
+ ? pages.findIndex(
+ (page, index) =>
+ index > requestedPage && page.rows[roundNumber - 1].steps.length,
+ ) >= 0
+ ? pages.findIndex(
+ (page, index) =>
+ index > requestedPage && page.rows[roundNumber - 1].steps.length,
+ )
+ : Math.max(
+ 0,
+ pages.findIndex((page) => page.rows[roundNumber - 1].steps.length),
+ )
+ : requestedPage;
+ const sectionChart = pages?.[section] ?? null;
+ const shortRows = useMemo(() => {
+ if (!yoke?.measurements.backRise) return null;
+ try {
+ const plan = planYokeShortRows(yoke.measurements, yoke.shortRows);
+ return plan.extraRows ? shortRowInstructions(plan) : null;
+ } catch {
+ return [
+ "Review the back-neck turns in Edit shaping before starting Round 1.",
+ ];
+ }
+ }, [yoke]);
const region = useMemo(
- () => knitRegion(document, progress.trimBorder),
+ () => knitRegion(document, !document.yoke && progress.trimBorder),
[document, progress.trimBorder],
);
- const activeDocument = region.document;
+ const activeDocument = sectionChart?.document ?? region.document;
const aspect = cellAspectRatio(activeDocument);
const palette = new Map(
activeDocument.palette.map((color) => [color.id, color.hex]),
);
const row = clamp(progress.row, 1, activeDocument.height);
- const structural = hasStructuralStitches(activeDocument);
+ const structural = Boolean(yoke) || hasStructuralStitches(activeDocument);
const rowSteps = rowStitchSteps(activeDocument, row);
- const rowMath = rowStitchMath(activeDocument, row);
- const orderedRowSteps = isRightToLeft(activeDocument, row)
- ? [...rowSteps].reverse()
- : rowSteps;
- const stitch = clamp(progress.stitch, 0, orderedRowSteps.length);
+ const rowMath = model?.rounds[row - 1] ?? rowStitchMath(activeDocument, row);
+ const rightToLeft = !yoke && isRightToLeft(activeDocument, row);
+ const orderedRowSteps =
+ sectionChart?.rows[row - 1].steps ??
+ (rightToLeft ? [...rowSteps].reverse() : rowSteps);
+ const stitch = sectionChart
+ ? sectionChart.rows[row - 1].steps.findIndex(
+ (step) =>
+ step.sourceSection === markerSourceSection &&
+ step.sourceStep === progress.stitch,
+ ) + 1
+ : clamp(progress.stitch, 0, orderedRowSteps.length);
const activeStep = stitch > 0 ? orderedRowSteps[stitch - 1] : undefined;
+ const activeStepLabel = activeStep
+ ? workedStepLabel(activeDocument, activeStep, Boolean(yoke))
+ : "";
const activeStepMath = activeStep
? stitchActionMath(activeStep.action)
: undefined;
const rowIndex = activeDocument.height - row;
- const rightToLeft = isRightToLeft(activeDocument, row);
const markerColumn =
stitch > 0 ? (orderedRowSteps[stitch - 1]?.column ?? -1) : -1;
const markerX = (markerColumn + 0.5) * aspect;
const marker =
MARKERS.find((choice) => choice.id === progress.markerStyle) ?? MARKERS[1];
- const sequence = rowSequence(activeDocument, row);
+ const sequence = rowSequence(activeDocument, orderedRowSteps, Boolean(yoke));
+ const position = { row, section, stitch };
+ const nextYokeStep =
+ pageRounds && pages
+ ? moveYokeKnitStep(pageRounds, pages.length, position, 1)
+ : null;
+ const previousYokeStep =
+ pageRounds && pages
+ ? moveYokeKnitStep(pageRounds, pages.length, position, -1)
+ : null;
+ const pageLengths = pageRounds?.map((round) => round.lengths);
+ const nextPage = pageLengths
+ ? moveYokeKnitPage(pageLengths, row, section, 1)
+ : null;
+ const previousPage = pageLengths
+ ? moveYokeKnitPage(pageLengths, row, section, -1)
+ : null;
const isDuplicate = activeDocument.instructions.technique === "duplicate";
const unitName = isDuplicate
? "Row"
@@ -280,21 +315,60 @@ export function KnitMode({
};
}, [keepScreenAwake, wakeLockSupported]);
- function update(nextRow: number, nextStitch: number) {
+ function update(nextRow: number, nextStitch: number, nextSection = section) {
const clampedRow = clamp(nextRow, 1, activeDocument.height);
- const maximumStep = rowStitchSteps(activeDocument, clampedRow).length;
+ const maximumStep =
+ pageRounds?.[clampedRow - 1].lengths[nextSection] ??
+ rowStitchSteps(activeDocument, clampedRow).length;
+ if (pages) {
+ const page = pages[nextSection];
+ const local = clamp(nextStitch, 0, maximumStep);
+ const step = local
+ ? page.rows[clampedRow - 1].steps[local - 1]
+ : undefined;
+ onProgressChange({
+ ...progress,
+ shortRowNoteSeen: true,
+ row: clampedRow,
+ viewSection: nextSection,
+ section: step?.sourceSection ?? 0,
+ stitch: step?.sourceStep ?? 0,
+ });
+ return;
+ }
onProgressChange({
...progress,
row: clampedRow,
stitch: clamp(nextStitch, 0, maximumStep),
+ ...(yoke ? { section: nextSection } : {}),
});
}
function changeRow(amount: number) {
- update(row + amount, 0);
+ const next = amount > 0 ? nextPage : previousPage;
+ if (next) {
+ navigate(next.row, next.section);
+ return;
+ }
+ update(row + amount, 0, 0);
+ }
+
+ function navigate(nextRow: number, nextSection: number) {
+ onProgressChange({
+ ...progress,
+ ...(yoke ? { shortRowNoteSeen: true } : {}),
+ row: nextRow,
+ viewSection: nextSection,
+ ...(nextRow !== row ? { section: 0, stitch: 0 } : {}),
+ });
}
function changeStitch(amount: number) {
+ const yokeStep = amount > 0 ? nextYokeStep : previousYokeStep;
+ if (yokeStep) {
+ update(yokeStep.row, yokeStep.stitch, yokeStep.section);
+ return;
+ }
const next = stitch + amount;
if (next > orderedRowSteps.length && row < activeDocument.height)
update(row + 1, 0);
@@ -306,6 +380,14 @@ export function KnitMode({
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") onClose();
+ else if (
+ event.target instanceof HTMLElement &&
+ (event.target.closest(
+ "input, select, textarea, summary, [contenteditable=true]",
+ ) ||
+ (event.key === " " && event.target.closest("button")))
+ )
+ return;
else if (event.key === "ArrowRight" || event.key === " ") changeStitch(1);
else if (event.key === "ArrowLeft") changeStitch(-1);
else if (event.key === "ArrowUp") changeRow(1);
@@ -317,6 +399,114 @@ export function KnitMode({
return () => window.removeEventListener("keydown", handleKeyDown);
});
+ const progressionControls = (
+
+
+
+
+ );
+ const sectionSizeControl =
+ model && pages ? (
+
+ ) : null;
+ const jumpControl =
+ model && pages ? (
+
+ Jump to…
+
+
+
+
+
+ ) : null;
+
return (
{unitName} {row} of {activeDocument.height}
+ {pages && pages.length > 1 ? (
+
+ Section {section + 1} of {pages.length}
+
+ ) : null}
+ {markerPage >= 0 && markerPage !== section ? (
+ Marker saved in section {markerPage + 1}
+ ) : null}
{stitch > 0
? progress.markerStyle === "none"
@@ -388,6 +586,14 @@ export function KnitMode({
onClick={() => {
if (action === "no-stitch") return;
const nextRow = activeDocument.height - chartRowIndex;
+ if (sectionChart) {
+ const step =
+ sectionChart.rows[nextRow - 1].atColumn.get(
+ columnIndex,
+ );
+ if (step !== undefined) update(nextRow, step);
+ return;
+ }
const steps = rowStitchSteps(activeDocument, nextRow);
const orderedSteps = isRightToLeft(
activeDocument,
@@ -468,7 +674,11 @@ export function KnitMode({
{Array.from({ length: activeDocument.width }, (_, columnIndex) =>
- (columnIndex + 1) % columnStep === 0 ? (
+ (columnIndex + 1 + (sectionChart?.start ?? 0)) % columnStep ===
+ 0 ? (
- {columnIndex + 1}
+ {columnIndex + 1 + (sectionChart?.start ?? 0)}
) : null,
)}
@@ -569,61 +780,91 @@ export function KnitMode({
) : null}
+ {sectionSizeControl}
+ {sectionChart ? (
+
+
+ Columns {sectionChart.start + 1}–{sectionChart.end}
+
+ {jumpControl}
+
+ ) : null}
-
-
- ) : null}
-
-
+
+ )}
Marker
{MARKERS.map((choice) => (
@@ -642,14 +883,16 @@ export function KnitMode({
))}
- {progress.trimBorder && !region.trimmed ? (
+ {!yoke && progress.trimBorder && !region.trimmed ? (
There is no empty outer border to trim.
) : null}
- {isDuplicate
- ? "Follow each chart row from left to right, or work the duplicate stitches in any order that feels comfortable."
- : `Work this ${activeDocument.instructions.construction === "round" ? "round" : "row"} ${rightToLeft ? "right to left" : "left to right"}.`}{" "}
+ {yoke
+ ? "Start at centre back and follow the chart left to right, in section order."
+ : isDuplicate
+ ? "Follow each chart row from left to right, or work the duplicate stitches in any order that feels comfortable."
+ : `Work this ${activeDocument.instructions.construction === "round" ? "round" : "row"} ${rightToLeft ? "right to left" : "left to right"}.`}{" "}
{structural
? "Skip no-stitch cells and work special stitch actions as shown."
: "Click any stitch to place your marker there."}
@@ -689,9 +932,10 @@ export function KnitMode({
>
Current {structural ? "step" : "stitch"}
- {activeStep.action === "knit"
- ? `Work ${activeDocument.palette.findIndex((color) => color.id === activeStep.colorId) === 0 ? "MC" : `CC${activeDocument.palette.findIndex((color) => color.id === activeStep.colorId)}`}`
- : stitchActionLabel(activeStep.action)}
+ {activeStep.action === "knit" && activeStepLabel !== "Skip"
+ ? "Work "
+ : ""}
+ {activeStepLabel}
{activeStep.action === "purl" ? (
Work one purl stitch as marked.
@@ -699,64 +943,79 @@ export function KnitMode({
{activeStepMath.consumes} stitch
{activeStepMath.consumes === 1 ? "" : "es"} in →{" "}
- {activeStepMath.produces} out. This is not an MC stitch.
+ {activeStepMath.produces} out.
+ {yoke ? "" : " This is not an MC stitch."}
) : null}