The bleed outline is traced, not scaled — and half a millimetre of it (#168)

Scaling the cut up by a percentage is not an offset. On a sticker three times
as wide as it is tall, the same percentage adds three times as much ink at the
sides as at the top, so the band came out fat on two edges and thin on the
others and looked like the cut had slipped. A second distance transform at the
bleed distance gives a band the same width the whole way round, which is what
a bleed is.

And half a millimetre rather than two. Two is what a shop asks for on a big
sticker; on a 26mm one it is seven per cent — wide enough that the band
bridges the gap between a hammer and the word beside it and the sticker
becomes a blob. A bleed is a dilation, and a dilation joins anything closer
together than twice its distance, so the number has to suit the sticker rather
than the trade convention.

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: dallasbpeters

bin/rm-studio.mjs

@@ -6450,6 +6450,7 @@ const server = createServer(async (req, res) => {
         const per = 1024 / stickerMm;
         const offsetPx = Math.round(offsetMm * per);
         const roundPx = Math.round(roundMm * per);
+        const bleedPx = Math.round(Math.min(6, Math.max(0, Number(b.bleedMm ?? 0.5))) * per);
         const items = [];
         for (const rel of picked) {
           const file = stickerFile(id, rel);
@@ -6461,7 +6462,7 @@ const server = createServer(async (req, res) => {
             items.push({ name: rel, bytes: raw, type: { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp" }[ext] ?? "image/png" });
             continue;
           }
-          items.push({ name: rel, svg: raw.toString("utf8"), key: `v${DIE_VERSION}:${rel}:${Math.round(st.mtimeMs)}:${offsetPx}:${roundPx}` });
+          items.push({ name: rel, svg: raw.toString("utf8"), key: `v${DIE_VERSION}:${rel}:${Math.round(st.mtimeMs)}:${offsetPx}:${roundPx}:${bleedPx}` });
         }
         /*
          * The ones already traced cost nothing; the rest go through the same
@@ -6494,7 +6495,7 @@ const server = createServer(async (req, res) => {
                     if (inkCache.size > 200) inkCache.delete(inkCache.keys().next().value);
                     if (drawn) inkCache.set(inkKey, drawn);
                   }
-                  it.die = await dieLine(it.svg, { offsetPx, roundPx, drawn });
+                  it.die = await dieLine(it.svg, { offsetPx, roundPx, bleedPx, drawn, page: pg });
                   if (dieCache.size > 400) dieCache.delete(dieCache.keys().next().value);
                   dieCache.set(it.key, it.die);
                 }
@@ -6513,7 +6514,7 @@ const server = createServer(async (req, res) => {
           page,
           stickerMm,
           bleedMm: 3.175,
-          stickerBleedMm: Math.min(6, Math.max(0, Number(b.bleedMm ?? 2))),
+          stickerBleedMm: Math.min(6, Math.max(0, Number(b.bleedMm ?? 0.5))),
           logo: null,
           title: name,
         });
@@ -6605,7 +6606,7 @@ const server = createServer(async (req, res) => {
             const per = 1024 / stickerMm;
             /* Traced once per size, because the offset is in millimetres on the
                printed sticker and the sticker is a different size on each. */
-            const traced = body.die === false ? items : await withDieLines(items, { offsetPx: Math.round(offsetMm * per), roundPx: Math.round(roundMm * per) });
+            const traced = body.die === false ? items : await withDieLines(items, { offsetPx: Math.round(offsetMm * per), roundPx: Math.round(roundMm * per), bleedPx: Math.round(Math.min(6, Math.max(0, Number(body.bleedMm ?? 0.5))) * per) });
             const out = join(dir, `${name}-sheet-${page}-cmyk.pdf`);
             const made = await cutSheetToCmykPdf({
               items: traced,
@@ -6614,7 +6615,7 @@ const server = createServer(async (req, res) => {
               page,
               stickerMm,
               bleedMm: 3.175,
-              stickerBleedMm: Math.min(6, Math.max(0, Number(body.bleedMm ?? 2))),
+              stickerBleedMm: Math.min(6, Math.max(0, Number(body.bleedMm ?? 0.5))),
               logo: null,
               title: name,
               profile: String(body.profile ?? ""),

lib/print-sheet.mjs

@@ -197,7 +197,7 @@ export const CUT_MAGENTA = "#ec008c";
  * misalignment came back from a cache after it had been fixed. The version is
  * part of the key now.
  */
-export const DIE_VERSION = 10;
+export const DIE_VERSION = 11;
 
 export const CUT_PT = 0.75;
 
@@ -251,7 +251,13 @@ export const SHEET_PAGES = Object.entries(PAGES).map(([id, p]) => ({ id, ...p })
  */
 /*
 
- * Two millimetres by default, which is what a sticker shop asks for.
+ * Half a millimetre by default.
+ *
+ * Two is what a shop asks for on a big sticker, and on a 26mm one it is seven
+ * per cent — wide enough that the band bridges the gap between a hammer and
+ * the word beside it and the sticker becomes a blob. A bleed is a dilation and
+ * a dilation joins anything closer together than twice its distance, so the
+ * number has to suit the sticker rather than the trade convention.
  *
  * I set this to nothing once, having read a preview where the extra ink looked
  * like the cut being misplaced. It was not: it was the bleed, and taking it
@@ -265,7 +271,7 @@ export const SHEET_PAGES = Object.entries(PAGES).map(([id, p]) => ({ id, ...p })
  * doing both jobs, so setting a sticker's bleed moved the page size, and
  * setting the page's moved every cut.
  */
-export function cutSheetSvg({ items, page = "letter", stickerMm = 50.8, gapMm = 4, marginMm = 10, bleedMm = 3.175, stickerBleedMm = 2, radiusMm = 3, logo = null, title = "Stickers", skin = true }) {
+export function cutSheetSvg({ items, page = "letter", stickerMm = 50.8, gapMm = 4, marginMm = 10, bleedMm = 3.175, stickerBleedMm = 0.5, radiusMm = 3, logo = null, title = "Stickers", skin = true }) {
 	const p = PAGES[page] ?? PAGES.letter;
 	const W = p.wMm;
 	const H = p.hMm;
@@ -390,8 +396,8 @@ export function cutSheetSvg({ items, page = "letter", stickerMm = 50.8, gapMm =
 		 * extension produces anyway, and it has nothing in it to ghost.
 		 */
 		const bleedBand =
-			item.die?.d && bleedWrap && item.die.edgeColor
-				? `<g transform="${bleedWrap}"><g transform="${cutPlace}"><g${item.die.transform ? ` transform="${item.die.transform}"` : ""}><path d="${item.die.d}" fill="${item.die.edgeColor}"/></g></g></g>`
+			item.die?.d && item.die.bleedD && item.die.edgeColor
+				? `<g transform="${cutPlace}"><g${item.die.transform ? ` transform="${item.die.transform}"` : ""}><path d="${item.die.bleedD}" fill="${item.die.edgeColor}"/></g></g>`
 				: "";
 
 		if (item.svg) {
@@ -674,7 +680,7 @@ export async function renderInk(svg, { size = 1024, padFrac = 0.18, page: lent =
 	}
 }
 
-export async function dieLine(svg, { size = 1024, offsetPx = 14, roundPx = null, page = null, drawn: given = null, fetchImpl = fetch } = {}) {
+export async function dieLine(svg, { size = 1024, offsetPx = 14, roundPx = null, bleedPx = 0, page = null, drawn: given = null, fetchImpl = fetch } = {}) {
 	if ((await capture("potrace", ["--version"])).ok === false) return null;
 	/*
 	 * Grow past the offset, then shrink back — a closing.
@@ -912,7 +918,50 @@ export async function dieLine(svg, { size = 1024, offsetPx = 14, roundPx = null,
 		}
 		const per = drawn.square.w / (size * scale);
 		const square = { x: drawn.square.x - at(room) * per, y: drawn.square.y - at(room) * per, w: drawn.square.w + at(room) * 2 * per, h: drawn.square.h + at(room) * 2 * per };
-		return { d: joined, transform, size: grownSize, square, art: drawn.square, shapeBox, pathBox, inkBox: drawn.inkPx, artSize: drawn.size ?? size, room: at(room), edgeColor };
+		/*
+		 * The bleed outline, traced rather than scaled.
+		 *
+		 * Scaling the cut up by a percentage is not an offset: on a sticker
+		 * three times as wide as it is tall, the same percentage adds three
+		 * times as much ink at the sides as at the top, and the band comes out
+		 * fat on two edges and thin on the others. A second distance transform
+		 * at the bleed distance gives a band the same width all the way round,
+		 * which is what a bleed is.
+		 */
+		let bleedD = null;
+		if (bleedPx > 0) {
+			try {
+				const wide = join(dir, "wide.png");
+				const widePgm = join(dir, "wide.pgm");
+				const wideSvg = join(dir, "wide.svg");
+				await capture("magick", [
+					png,
+					"-alpha", "extract",
+					"-threshold", "30%",
+					...(scale < 1 ? ["-resize", `${(scale * 100).toFixed(4)}%`] : []),
+					"-bordercolor", "black",
+					"-border", `${at(room)}`,
+					"+repage",
+					"-negate",
+					"-morphology", "Distance", "Euclidean:1",
+					"-threshold", `${q(Math.round(offsetPx) + round + bleedPx)}`,
+					"-negate",
+					wide,
+				]);
+				await capture("magick", [wide, "-negate", "-depth", "8", widePgm]);
+				const t2 = await capture("potrace", [widePgm, "-s", "-a", "1.0", "-O", "0.2", "-t", "8", "-o", wideSvg]);
+				if (t2.ok) {
+					const w2 = await readFile(wideSvg, "utf8");
+					const d2 = [...w2.matchAll(/<path[^>]*\bd="([^"]+)"/g)].map((m) => m[1]);
+					/* Its own transform is the same shape as the cut's, and it is
+					   placed by the same fit, so only the path differs. */
+					if (d2.length) bleedD = d2.join(" ");
+				}
+			} catch {
+				/* Without it there is simply no bleed. */
+			}
+		}
+		return { d: joined, bleedD, transform, size: grownSize, square, art: drawn.square, shapeBox, pathBox, inkBox: drawn.inkPx, artSize: drawn.size ?? size, room: at(room), edgeColor };
 	} catch {
 		return null;
 	} finally {
@@ -928,7 +977,7 @@ export async function dieLine(svg, { size = 1024, offsetPx = 14, roundPx = null,
  * one takes, so they are run in a small pool: enough to keep the machine busy,
  * not so many that thirty browsers open at once.
  */
-export async function withDieLines(items, { offsetPx = 14, roundPx = null, size = 1024, lanes = 4 } = {}) {
+export async function withDieLines(items, { offsetPx = 14, roundPx = null, bleedPx = 0, size = 1024, lanes = 4 } = {}) {
 	const out = new Array(items.length);
 	if (!items.some((i) => i.svg)) return items.slice();
 	const { chromium } = await import("playwright");
@@ -943,7 +992,7 @@ export async function withDieLines(items, { offsetPx = 14, roundPx = null, size
 				while (next < items.length) {
 					const i = next++;
 					const item = items[i];
-					out[i] = item.svg ? { ...item, die: await dieLine(item.svg, { offsetPx, roundPx, size, page }) } : item;
+					out[i] = item.svg ? { ...item, die: await dieLine(item.svg, { offsetPx, roundPx, bleedPx, size, page }) } : item;
 				}
 			} finally {
 				await page.close();

lib/studio.js

@@ -16508,7 +16508,7 @@ function vStickers(m) {
   /* 76.2mm is three inches, which is what a sticker shop's default die is. */
   /* Filled from the vendor tables the first time the rail is drawn. */
   let sheetSizeList = []
-  const settings = { sticker: 'telegram', cutout: '', vectorize: '', endpoint: '', prompt: '', sheetName: 'stickers', columns: 4, size: 300, gap: 40, remote: '', printSizeMm: 76.2, printBleedMm: 2, printLayout: 'sheet', printPage: '4x6', dieOffsetMm: 0, dieRoundMm: 0, quoteQty: 250, quoteProduct: 'die-cut', quotePublish: true }
+  const settings = { sticker: 'telegram', cutout: '', vectorize: '', endpoint: '', prompt: '', sheetName: 'stickers', columns: 4, size: 300, gap: 40, remote: '', printSizeMm: 76.2, printBleedMm: 0.5, printLayout: 'sheet', printPage: '4x6', dieOffsetMm: 0, dieRoundMm: 0, quoteQty: 250, quoteProduct: 'die-cut', quotePublish: true }
   let affinityWatch = 0
   let makeBtn = null
 

lib/verify.mjs

@@ -3790,6 +3790,9 @@ console.log('\none way in')
   check('and that colour is sampled with the transparency kept', /"-background", "none", "-resize", "1x1!"/.test(prSrc) && /srgba\?\\\(/.test(prSrc))
   // The cut is fitted to the ink, and the ink is not always centred in its
   // cell, so growing the band about the cell pushed it off to one side.
+  // Scaling the cut by a percentage is not an offset: on a sticker three times
+  // as wide as it is tall it adds three times as much ink at the sides.
+  check('the bleed outline is traced, not scaled', /let bleedD = null/.test(prSrc) && /q\(Math\.round\(offsetPx\) \+ round \+ bleedPx\)/.test(prSrc) && /path d="\$\{item\.die\.bleedD\}"/.test(prSrc))
   check('and grown about the sticker, not the cell', /if \(inkMm\) cutMid = \{ x: inkMm\.x \+ inkMm\.w \/ 2/.test(prSrc) && /cutMid\?\.x \?\? cx \+ stickerMm \/ 2/.test(prSrc))
   // Every derivation was defensible and the line still came out a fraction down
   // and to the right: potrace does not put its output exactly where its bitmap
@@ -3806,7 +3809,7 @@ console.log('\none way in')
   // the square it was traced in, each centred on the cell separately.
   check('the drawing and the cut share one frame', /const frame = item\.die\?\.d \? item\.die\.square : box/.test(prSrc) && /const perPx = stickerMm \/ item\.die\.size/.test(prSrc))
   check('and the bleed is a scale about the cell, not a second placement', /const bleedScale = item\.die\?\.d && stickerMm > 0/.test(prSrc) && /translate\(\$\{midX\} \$\{midY\}\) scale\(\$\{bleedScale\}\)/.test(prSrc))
-  check("a sticker's bleed is not the sheet's", /stickerBleedMm = 2/.test(prSrc) && /stickerBleedMm \* 2\) \/ stickerMm/.test(prSrc) && /bleedMm: 3\.175,\n\s+stickerBleedMm:/.test(srvMb))
+  check("a sticker's bleed is not the sheet's", /stickerBleedMm = 0\.5/.test(prSrc) && /stickerBleedMm \* 2\) \/ stickerMm/.test(prSrc) && /bleedMm: 3\.175,\n\s+stickerBleedMm:/.test(srvMb))
   check('and the rail says which one it is', /'Sticker bleed \(mm\)', 'printBleedMm'/.test(uiMb))
   check('but by default it is traced exactly as drawn', /const round = Math\.max\(0, Math\.round\(roundPx \?\? 0\)\)/.test(prSrc) && /const plain = need === 0/.test(prSrc) && /dieRoundMm: 0,/.test(uiMb))
   check('and zero means no morphology at all, not a small one', /const shaping = plain\n\t\t\t\? \[\]/.test(prSrc))