/* =========================================================== DTF.uk · Ops — Orders list (dispatch board) + Order detail =========================================================== */ const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React; /* ---- date helpers ---- */ const DOW = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; const MON = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; function parseYMD(s){ const [y,m,d] = s.split("-").map(Number); return new Date(y, m-1, d); } function fmtDateLabel(ymd){ const d = parseYMD(ymd); return `${DOW[d.getDay()]} ${d.getDate()} ${MON[d.getMonth()]}`; } function relDay(ymd){ const a = parseYMD(ymd), t = parseYMD(DTF.TODAY); const diff = Math.round((a - t) / 86400000); if (diff === 0) return "Today"; if (diff === 1) return "Tomorrow"; if (diff === -1) return "Yesterday"; if (diff < 0) return Math.abs(diff) + " days ago"; return "In " + diff + " days"; } // "YYYY-MM-DD HH:MM" -> { day:"18 Jun", time:"11:10" } for the Placed column function fmtPlaced(dt){ const [d, t] = (dt || "").split(" "); if (!d) return { day: dt || "—", time: "" }; const dd = parseYMD(d); return { day: `${dd.getDate()} ${MON[dd.getMonth()]}`, time: t || "" }; } // "YYYY-MM-DD" -> "18 Jun" for the Dispatch-by column function fmtDay(ymd){ const d = parseYMD(ymd); return `${d.getDate()} ${MON[d.getMonth()]}`; } const esc = s => String(s == null ? "" : s).replace(/[&<>"]/g, c => ({ "&":"&", "<":"<", ">":">", '"':""" }[c])); const PRINT_CSS = ` * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; color:#14161a; margin:0; padding:0; font-size:12px; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; } h1 { font-size:20px; margin:0 0 2px; } h2 { font-size:18px; margin:0 0 12px; } .sub { color:#666; font-size:12px; margin-bottom:18px; } table { width:100%; border-collapse:collapse; font-size:12px; } th { text-align:left; border-bottom:2px solid #14161a; padding:7px 8px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; } td { border-bottom:1px solid #e3e3df; padding:7px 8px; vertical-align:top; } tfoot td { border-top:2px solid #14161a; border-bottom:0; font-weight:700; } .num { text-align:right; white-space:nowrap; } .muted { color:#666; } .lbl { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:#666; font-weight:700; } /* ---- Order summary blocks ---- */ .ob { border:1px solid #c9c9c4; border-radius:6px; padding:14px 16px; margin-bottom:14px; page-break-inside:avoid; } .ob-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:10px; } .shipname { font-weight:700; font-size:13px; margin-bottom:2px; } table.kv { width:auto; font-size:12px; } table.kv td { border:0; padding:1px 0; } table.kv td:first-child { color:#666; padding-right:14px; white-space:nowrap; } table.kv td:nth-child(2) { font-weight:600; text-align:right; } .notes { font-size:12px; margin:0 0 10px; } .notes > div { margin:2px 0; } .props { margin-top:4px; } .props > div { font-size:11px; color:#444; word-break:break-word; overflow-wrap:anywhere; } .props .pk { color:#666; } .props a { color:#1a5fb4; word-break:break-all; } table.li th, table.li td { font-size:12px; } table.li .pcol { width:96px; } td.pcell { width:96px; padding:5px 8px; } .thumb { width:88px; height:88px; object-fit:cover; border-radius:4px; border:1px solid #e3e3df; display:block; } .thumb--ph { background:#f0f0ec; } /* ---- Packing slip ---- */ .slip { page-break-after: always; padding-bottom:8px; } .slip:last-child { page-break-after: auto; } .ps-cols { display:flex; justify-content:space-between; gap:36px; margin:4px 0 14px; } .ps-cols > div { font-size:12px; line-height:1.5; } .ps-cols .lbl { margin-bottom:3px; } table.ps-meta { width:100%; margin-bottom:14px; } table.ps-meta td { border:0; padding:2px 8px 2px 0; } table.ps-meta td:nth-child(odd) { color:#666; width:1%; white-space:nowrap; } table.ps-meta td:nth-child(even) { font-weight:600; padding-right:28px; } .ps-barcode { text-align:center; margin-top:28px; padding-top:14px; border-top:1px solid #e3e3df; } `; // Render any placeholders into Code128 barcodes inside `root`. // To stay scannable we DON'T stretch the SVG (that blurs the bars when html2canvas // rasterises it). Instead we pick the largest *integer* module width that fits the // container, so the bars are natively wide and crisp, with a quiet-zone margin. // The human-readable code is shown separately in HTML. function renderBarcodes(root){ if (!window.JsBarcode) return; root.querySelectorAll("svg[data-code]").forEach(el => { const code = el.getAttribute("data-code"); const target = (el.parentNode && el.parentNode.clientWidth) || 320; const H = 72, MARGIN = 10; try { // Probe module count at width 1 (svg width = modules + 2*margin). JsBarcode(el, code, { format: "CODE128", width: 1, height: H, displayValue: false, margin: MARGIN }); const modules = Math.max(1, (parseFloat(el.getAttribute("width")) || 0) - 2 * MARGIN); let w = Math.floor((target - 2 * MARGIN) / modules); // integer px per module -> crisp w = Math.max(2, Math.min(7, w)); JsBarcode(el, code, { format: "CODE128", width: w, height: H, displayValue: false, margin: MARGIN }); // Explicit pixel sizing — the bare width/height attributes JsBarcode writes // ("336px") aren't always used for layout, collapsing the SVG to ~16px. const fw = parseFloat(el.getAttribute("width")) || (modules * w + 2 * MARGIN); const fh = parseFloat(el.getAttribute("height")) || H; el.removeAttribute("style"); el.style.display = "block"; el.style.margin = "0 auto"; el.style.width = fw + "px"; el.style.height = fh + "px"; el.style.maxWidth = "100%"; } catch(e){} }); } // Open a print HTML window as a fallback (native dialog → Save as PDF / printer). function openPrintWindow(title, bodyHtml, withBarcodes, extraCss){ const w = window.open("", "_blank"); if (!w) { alert("Allow pop-ups for this site to print."); return; } w.document.write( '' + esc(title) + '' + (withBarcodes ? '' : "") + '' + bodyHtml + 'function go(){try{if(window.JsBarcode){document.querySelectorAll("svg[data-code]").forEach(function(el){var code=el.getAttribute("data-code");var target=(el.parentNode&&el.parentNode.clientWidth)||320;var H=72,M=10;JsBarcode(el,code,{format:"CODE128",width:1,height:H,displayValue:false,margin:M});var mod=Math.max(1,(parseFloat(el.getAttribute("width"))||0)-2*M);var w=Math.floor((target-2*M)/mod);w=Math.max(2,Math.min(7,w));JsBarcode(el,code,{format:"CODE128",width:w,height:H,displayValue:false,margin:M});var fw=parseFloat(el.getAttribute("width"))||(mod*w+2*M),fh=parseFloat(el.getAttribute("height"))||H;el.removeAttribute("style");el.style.display="block";el.style.margin="0 auto";el.style.width=fw+"px";el.style.height=fh+"px";el.style.maxWidth="100%";});}}catch(e){}window.focus();setTimeout(function(){window.print();},150);}if(document.readyState==="complete")go();else window.addEventListener("load",go);' + '' ); w.document.close(); } // Rasterize one HTML fragment (offscreen) to a canvas via html2canvas, awaiting images first. async function htmlToCanvas(html, opts){ const host = document.createElement("div"); host.style.cssText = "position:fixed;left:-10000px;top:0;background:#fff;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;color:#14161a;"; host.style.width = (opts.contentWidthPx || 794) + "px"; host.style.padding = (opts.padPx != null ? opts.padPx : 53) + "px"; host.style.fontSize = (opts.baseFontPx || 12) + "px"; host.innerHTML = "" + html; document.body.appendChild(host); if (opts.withBarcodes) renderBarcodes(host); const imgs = Array.from(host.querySelectorAll("img")); imgs.forEach(img => { try { img.crossOrigin = "anonymous"; img.src = img.src; } catch(e){} }); await Promise.all(imgs.map(img => img.complete && img.naturalWidth ? Promise.resolve() : new Promise(res => { img.onload = img.onerror = res; setTimeout(res, 6000); }))); try { return await window.html2canvas(host, { scale: opts.scale || 2, useCORS: true, backgroundColor: "#ffffff", logging: false }); } finally { try { document.body.removeChild(host); } catch(e){} } } // Build a PDF and open it in a new tab for preview (browser PDF viewer). // opts: { sections:[html] (one PDF page-group each) OR body:html (continuous, sliced), // format ('a4'|[w,h]mm), orientation, contentWidthPx, padPx, baseFontPx, extraCss, withBarcodes } // Margins are baked into each section via padPx; the rasterized page is placed full-bleed and // sliced across pages. Falls back to an HTML print window if the libs are missing or rendering fails. // Rasterize sections into a jsPDF doc and return it (async), or null if the libs // are missing. Shared by openPdfPreview (view/download) and the email path (base64). async function renderPdfDoc(opts){ const jsPDFCtor = window.jspdf && window.jspdf.jsPDF; if (!window.html2canvas || !jsPDFCtor) return null; const sections = opts.sections || [opts.body || ""]; const pdf = new jsPDFCtor({ unit: "mm", format: opts.format || "a4", orientation: opts.orientation || "portrait" }); const pageW = pdf.internal.pageSize.getWidth(); const pageH = pdf.internal.pageSize.getHeight(); for (let i = 0; i < sections.length; i++) { const canvas = await htmlToCanvas(sections[i], opts); // PNG keeps barcode bar edges sharp (JPEG ringing breaks scanning); callers // with barcodes pass imgFormat:"png". const imgData = opts.imgFormat === "png" ? canvas.toDataURL("image/png") : canvas.toDataURL("image/jpeg", 0.95); const imgH = canvas.height * pageW / canvas.width; // mm, full-bleed width let heightLeft = imgH, k = 0; do { if (!(i === 0 && k === 0)) pdf.addPage(); pdf.addImage(imgData, "JPEG", 0, -k * pageH, pageW, imgH); heightLeft -= pageH; k++; } while (heightLeft > 0.5); } return pdf; } // Shared cache of connected packing-station agents (populated on load + polled), // so both the label modal and the packing-slip/summary buttons resolve the same // "print to" target without each re-fetching. window.__dtfLabelAgents = window.__dtfLabelAgents || []; function dtfRefreshLabelAgents(){ return fetch("/api/labels/agents").then(r => r.json()).then(j => { window.__dtfLabelAgents = (j.agents || []).filter(a => a.online); return window.__dtfLabelAgents; }).catch(() => window.__dtfLabelAgents); } try { dtfRefreshLabelAgents(); setInterval(dtfRefreshLabelAgents, 20000); } catch {} // Resolve the station to print to: a saved choice wins; "browser" forces preview; // otherwise AUTO — default to the connected station so it "just prints". function directPrintStation(){ let saved = ""; try { saved = localStorage.getItem("dtf_labelStation") || ""; } catch {} if (saved === "browser") return ""; const online = window.__dtfLabelAgents || []; if (saved && online.some(a => a.id === saved)) return saved; return online.length ? online[0].id : ""; } window.directPrintStation = directPrintStation; function openPdfPreview(title, opts){ opts = opts || {}; const jsPDFCtor = window.jspdf && window.jspdf.jsPDF; const sections = opts.sections || [opts.body || ""]; if (!window.html2canvas || !jsPDFCtor) { openPrintWindow(title, sections.join(""), opts.withBarcodes); return; } (async () => { try { const pdf = await renderPdfDoc(opts); // Direct print: if a station is mapped and this doc has a type, send the PDF // to the agent (it routes to the printer mapped for that type — e.g. summary // → A4, packing → thermal). Silent, no preview. Falls back to preview on error. const station = opts.docType ? directPrintStation() : ""; if (station) { try { const b64 = pdf.output("datauristring").split(",")[1]; const r = await fetch("/api/labels/print-doc", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pdf: b64, docType: opts.docType, station, orderRef: opts.orderRef || title }) }); if (r.ok) return; // printed silently } catch { /* fall through to preview */ } } if (opts.download) pdf.save(opts.download); // true file download else window.open(pdf.output("bloburl"), "_blank"); // preview in a new tab } catch (err) { console.warn("[print] PDF render failed, falling back to print window", err); openPrintWindow(title, sections.join(""), opts.withBarcodes); } })(); } // ---- Proforma invoice (client-side PDF, styled like pay.dtf.uk/i/…) ---------- // Remittance / company details shown on the invoice. Kept here (not the server) // because the whole document renders client-side from the in-memory order via the // existing jsPDF + html2canvas pipeline (openPdfPreview). // Defaults; overridden by the server-side company config (editable in Settings). let INVOICE_CO = { name: "DTF.UK", addr: ["2 Fensom Place", "Oakgrove", "Milton Keynes MK10 9UH", "United Kingdom"], email: "pay@dtf.uk", website: "https://dtf.uk", legalName: "DTFUK LTD", bank: "Revolut Ltd", sortCode: "04-29-09", accountNo: "98458426", companyNo: "15694877", vat: "GB 528 4115 00", }; // VAT registration is effective 01 Jul 2026 — supplies (orders) dated on/after this // carry 20% VAT (prices are VAT-INCLUSIVE, so VAT = total × 20/120 within the price); // earlier orders were pre-registration and show "Not applicable". Override date via // window.DTF_VAT_FROM if HMRC confirms a different effective date. const VAT_FROM = new Date((typeof window !== "undefined" && window.DTF_VAT_FROM) || "2026-07-01T00:00:00"); function orderHasVat(o) { let d = (o && o.date) ? new Date(String(o.date).replace(" ", "T")) : new Date(); if (isNaN(d)) d = new Date(); return d >= VAT_FROM; } // VAT-inclusive split of a gross total → { vat, net } (2dp). function vatSplit(total) { const vat = Math.round((Number(total) || 0) / 6 * 100) / 100; // 20/120 return { vat, net: Math.round(((Number(total) || 0) - vat) * 100) / 100 }; } // Pull the latest company/bank details before rendering an invoice so edits in // Settings take effect immediately (no rebuild). Falls back to the defaults above. async function loadCompany(){ try { const c = await fetch("/api/company").then(r => r.json()); if (c && !c.error && c.name) INVOICE_CO = c; } catch (e) {} } const invDate = (v) => { const d = v instanceof Date ? v : (v ? new Date(String(v).replace(" ", "T")) : new Date()); return (isNaN(d) ? new Date() : d).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }); }; const PROFORMA_CSS = ` .pf{ color:#14161a; font-family:Arial,Helvetica,sans-serif; position:relative; } .pf-badge.pf-badge--paid{ border-color:#0f8a4f; color:#0f8a4f; background:#e4f4ec; } .pf-wm{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) rotate(-24deg); font-size:120px; font-weight:800; letter-spacing:.1em; color:rgba(15,138,79,.12); border:9px solid rgba(15,138,79,.13); border-radius:16px; padding:8px 44px; pointer-events:none; white-space:nowrap; } .pf-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; } .pf-kicker{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7a828c; } .pf-no{ font-size:26px; font-weight:700; margin-top:2px; } .pf-badge{ border:1px solid #d7b400; color:#8a6d00; background:#fff8db; border-radius:999px; padding:4px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .pf-meta{ display:flex; gap:34px; flex-wrap:wrap; padding:14px 0; border-top:1px solid #eceef1; border-bottom:1px solid #eceef1; margin-bottom:22px; } .pf-meta > div{ display:flex; flex-direction:column; gap:3px; } .pf-meta span{ font-size:10.5px; color:#8a929b; text-transform:uppercase; letter-spacing:.04em; } .pf-meta b{ font-size:13px; font-weight:600; } .pf-parties{ display:flex; gap:40px; margin-bottom:26px; } .pf-party{ flex:1; font-size:12.5px; line-height:1.5; } .pf-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#8a929b; margin-bottom:6px; } .pf-strong{ font-weight:700; font-size:13.5px; margin-bottom:2px; } .pf-tbl{ width:100%; border-collapse:collapse; margin-bottom:18px; font-size:12.5px; } .pf-tbl thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#8a929b; border-bottom:2px solid #14161a; padding:0 8px 8px; } .pf-tbl tbody td{ padding:10px 8px; border-bottom:1px solid #eceef1; vertical-align:top; } .pf-tbl .pf-r{ text-align:right; white-space:nowrap; } .pf-tbl .pf-idx{ width:24px; color:#9aa2ab; } .pf-var{ color:#7a828c; } .pf-sku{ font-size:10.5px; color:#9aa2ab; margin-top:2px; } .pf-sums{ margin-left:auto; width:262px; font-size:12.5px; } .pf-trow{ display:flex; justify-content:space-between; padding:6px 8px; } .pf-trow span:first-child{ color:#6b727b; } .pf-grand{ border-top:2px solid #14161a; margin-top:4px; padding-top:10px; font-size:15px; font-weight:700; } .pf-grand span:first-child{ color:#14161a; } .pf-remit{ margin-top:34px; border:1px solid #eceef1; border-radius:10px; padding:16px 18px; background:#fafbfc; } .pf-remit-t{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8a929b; margin-bottom:12px; } .pf-remit-g{ display:flex; flex-wrap:wrap; gap:8px 28px; } .pf-remit-g > div{ flex:0 0 calc(50% - 14px); display:flex; justify-content:space-between; gap:16px; font-size:12px; border-bottom:1px dashed #e4e7ea; padding-bottom:6px; } .pf-remit-g span{ color:#8a929b; } .pf-remit-g b{ font-weight:600; text-align:right; } .pf-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; } .pf-logo{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#18f4af; color:#063d2b; font-weight:700; font-size:13px; letter-spacing:.5px; } .pf-wordmark{ font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.15; } .pf-wordmark small{ display:block; font-size:9.5px; font-weight:400; letter-spacing:.02em; color:#7a828c; } .pf-footrow{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; } .pf-pay{ text-align:center; } .pf-qr{ width:104px; height:104px; display:block; image-rendering:pixelated; } .pf-pay-cap{ margin-top:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#18f4af; } .pf-pay-sub{ font-size:10px; color:#9aa2ab; margin-top:2px; } `; // QR as a data-URL via the bundled qrcode-generator (global `qrcode`). Returns null // if the lib isn't loaded, so the invoice still renders without it. function qrDataUrl(text){ try { if (!text || typeof window.qrcode !== "function") return null; const qr = window.qrcode(0, "M"); // auto version, medium error-correction qr.addData(String(text)); qr.make(); return qr.createDataURL(5, 2); } catch (e) { return null; } } function proformaInvoiceHtml(o, c, payUrl, paid){ const money = DTF.fmtGBP; const items = (o.items || []).filter(it => !it.removed); const hasVat = orderHasVat(o); // VAT applies from 01 Jul 2026 const r2 = (n) => Math.round((Number(n) || 0) * 100) / 100; const exVat = (gross) => r2(gross / 1.2); // gross → net (prices are VAT-inclusive) const rows = items.map((it, i) => { const qty = it.qty || 0, unitG = +it.price || 0; const unit = hasVat ? exVat(unitG) : unitG; // ex-VAT unit price on VAT invoices const amt = hasVat ? r2(qty * unitG / 1.2) : qty * unitG; // ex-VAT line amount const variant = it.variant ? ` (${esc(it.variant)})` : ""; const sku = it.sku ? `
${esc(it.sku)}
` : ""; return `${i + 1}${esc(it.name || "—")}${variant}${sku}` + `${qty}${money(unit)}${money(amt)}`; }).join(""); const subtotal = items.reduce((s, it) => s + (it.qty || 0) * (+it.price || 0), 0); const shipping = (o.shipping != null) ? +o.shipping : (o.method === "Collection" ? 0 : o.method === "SD" ? 8.50 : o.method === "DPD" ? 6.00 : 4.20); const total = (o.total != null) ? +o.total : subtotal + shipping; const adjust = +(total - subtotal - shipping).toFixed(2); // discount / rounding so the doc reconciles // VAT-inclusive breakdown per component (net + VAT), so the rows reconcile to `total`: const itemsNet = exVat(subtotal), shipNet = exVat(shipping), discNet = exVat(adjust); const goodsVat = r2((subtotal + adjust) - (itemsNet + discNet)); // VAT on items (incl. any discount) const shipVat = r2(shipping - shipNet); // VAT on shipping const vatTotal = r2(goodsVat + shipVat); const billName = (o.ship && o.ship.name) || (c && c.name) || "Customer"; const billCompany = (o.ship && o.ship.company) || (c && c.company) || ""; const billLines = addrLines(o.ship, o.address); const qr = paid ? null : qrDataUrl(payUrl); const due = new Date((o.date ? (isNaN(new Date(String(o.date).replace(" ", "T"))) ? new Date() : new Date(String(o.date).replace(" ", "T"))) : new Date()).getTime() + 7 * 24 * 3600 * 1000); const line = (lbl, val) => `
${esc(lbl)}${val}
`; const kv = (lbl, val) => `
${esc(lbl)}${esc(val)}
`; return `
${paid ? `
PAID
` : ""}
DTF.UKSame Day DTF Transfers
${paid ? "Invoice" : "Proforma invoice"}
${esc(o.id)}
${paid ? "Paid" : "Proforma"}
${kv("Invoice number", recordNo(o))} ${kv("Date", invDate(o.date))} ${paid ? "" : kv("Due date", invDate(due))} ${kv("Status", paid ? "Paid" : "Awaiting payment")}
From
${esc(INVOICE_CO.name)}
${INVOICE_CO.addr.map(l => `
${esc(l)}
`).join("")}
${esc(INVOICE_CO.email)}
Bill to
${esc(billName)}
${billCompany ? `
${esc(billCompany)}
` : ""} ${billLines.map(l => `
${esc(l)}
`).join("")} ${c && c.email ? `
${esc(c.email)}
` : ""}
${rows}
#DescriptionQuantityUnit price${hasVat ? " (ex VAT)" : ""}Amount${hasVat ? " (ex VAT)" : ""}
${qr ? `Pay online
Pay online
Scan to pay securely
` : ""}
${line("Subtotal" + (hasVat ? " (ex VAT)" : ""), money(hasVat ? itemsNet : subtotal))} ${shipping ? line("Shipping" + (hasVat ? " (ex VAT)" : ""), money(hasVat ? shipNet : shipping)) : ""} ${adjust ? line((adjust < 0 ? "Discount" : "Adjustment") + (hasVat ? " (ex VAT)" : ""), (adjust < 0 ? "−" : "") + money(Math.abs(hasVat ? discNet : adjust))) : ""} ${hasVat ? line("VAT on items @ 20%", money(goodsVat)) : ""} ${hasVat && shipping ? line("VAT on shipping @ 20%", money(shipVat)) : ""} ${hasVat ? `
VAT total${money(vatTotal)}
` : line("VAT", "Not applicable")}
Total${hasVat ? " (incl. VAT)" : ""}${money(total)}
Payment details
${kv("Website", INVOICE_CO.website)} ${kv("Email", INVOICE_CO.email)} ${kv("Company name", INVOICE_CO.legalName)} ${kv("Bank", INVOICE_CO.bank)} ${kv("Sort code", INVOICE_CO.sortCode)} ${kv("Account number", INVOICE_CO.accountNo)} ${kv("Registered in England and Wales No.", INVOICE_CO.companyNo)} ${hasVat ? kv("VAT Registration Number", INVOICE_CO.vat) : ""}
`; } async function downloadInvoice(o, opts){ opts = opts || {}; const draft = !!opts.draft; await loadCompany(); // Decide paid vs proforma from the live payment status, then for an unpaid order // resolve a "Pay online" link (Revolut Merchant first, Shopify as fallback). let paid = !draft && o.pay === "paid", payUrl = null; if (draft) { payUrl = await resolvePayUrl(o, { draft: true }); } else { try { const info = await fetch("/api/orders/" + recordNo(o) + "/payment-link").then(r => r.json()); if (info && info.fullyPaid) paid = true; if (!paid) payUrl = await resolvePayUrl(o, { shopInfo: info }); } catch (e) {} } const c = DTF.getCustomer(o.customerId) || o.customer || null; openPdfPreview((paid ? "Invoice " : "Proforma invoice ") + o.id, { body: proformaInvoiceHtml(o, c, payUrl, paid), extraCss: PROFORMA_CSS, contentWidthPx: 794, padPx: 56, baseFontPx: 12, download: (paid ? "Invoice-" : "Proforma-") + recordNo(o) + ".pdf", }); } // Resolve the "Pay online" URL for an unpaid order: prefer a Revolut Merchant link // (money into the Revolut Business account on the invoice), fall back to Shopify's. async function resolvePayUrl(o, opts){ opts = opts || {}; // Drafts are addressed by their numeric legacyId; real orders by their #number. const ref = opts.draft ? o.legacyId : recordNo(o); const base = opts.draft ? "/api/draft-orders/" : "/api/orders/"; // For drafts, only attempt Revolut when address + shipping are both set — the // total isn't final without them, so a Revolut link at this stage is premature. const draftRevolutReady = opts.draft ? !!(o.ship && o.shippingTitle) : true; if (draftRevolutReady) { try { const rv = await fetch(base + ref + "/revolut-link").then(r => r.json()); if (rv && rv.url) return rv.url; } catch (e) {} } if (opts.draft) { // GraphQL invoiceUrl is only set after Shopify admin "Send invoice" — fall back // to the REST API which always returns the URL regardless of send state. if (o.invoiceUrl) return o.invoiceUrl; try { const j = await fetch(`/api/draft-orders/${ref}/invoice-url`).then(r => r.json()); if (j && j.url) return j.url; } catch {} return null; } const info = opts.shopInfo || await fetch("/api/orders/" + ref + "/payment-link").then(r => r.json()).catch(() => null); return (info && info.paymentUrl && !info.fullyPaid) ? info.paymentUrl : null; } // Build an invoice PDF (paid = PAID-watermarked "Invoice"; else Proforma with a // Pay-online QR) and return it as a nodemailer base64 attachment, or null if the // PDF libs aren't available. Used by the Email customer composer. async function invoicePdfAttachment(o, { paid, draft } = {}){ await loadCompany(); const payUrl = paid ? null : await resolvePayUrl(o, { draft: !!draft }); const body = proformaInvoiceHtml(o, DTF.getCustomer(o.customerId) || o.customer, payUrl, !!paid); const pdf = await renderPdfDoc({ body, extraCss: PROFORMA_CSS, contentWidthPx: 794, padPx: 56, baseFontPx: 12 }); if (!pdf) return null; const b64 = pdf.output("datauristring").split(",")[1]; const kind = paid ? "Invoice" : "Proforma"; return { filename: kind + "-" + recordNo(o) + ".pdf", content: b64, encoding: "base64", contentType: "application/pdf" }; } // ---- print formatting helpers ---- const recordNo = o => String(o.id || "").replace(/^#/, ""); function fmtMDY(dt){ const d = String(dt||"").split(" ")[0].split("-"); return d.length===3 ? `${+d[1]}/${+d[2]}/${d[0]}` : ""; } function fmtDMY(dt){ const d = String(dt||"").split(" ")[0].split("-"); return d.length===3 ? `${+d[2]}/${+d[1]}/${d[0]}` : ""; } // Address lines per spec: address1 / address2 / "city, PROVINCE zip" / countryCode function addrLines(ship, fallback){ if (!ship) return fallback ? [fallback] : []; const region = [ship.city, [ (ship.provinceCode || ship.province), ship.zip ].filter(Boolean).join(" ")].filter(Boolean).join(", "); return [ship.address1, ship.address2, region, (ship.countryCodeV2 || ship.country)].filter(Boolean); } // Line-item custom properties as label/value rows; underscore-prefixed keys (e.g. _Print Ready File) kept, leading underscores stripped from the label. // Batch picking report — one block per order, line items priced. // Order summary — a compact, printable table (one row per order) for the // production floor. Columns: Order ID · Date · Customer · Collection/Delivery · // total DTF metres · SKUs (each SKU on its own line as "SKU × qty"). // Customised-garment products (the product customizer) carry a "Customised sides" // property listing the chosen sides (e.g. "Front" or "Front, Back") and one image // property per side name holding that side's artwork. Returns [{label, url}] for // each chosen side so we can show a small preview on the packing summary. Falls // back to the composed "Design Preview" mockup when a side has no direct artwork. function customisedSides(it){ const props = (it && it.properties) || []; const raw = (props.find(p => /^customised sides$/i.test((p.name||"").trim())) || {}).value; if (!raw) return []; const sides = String(raw).split(/[,/&+]+/).map(s => s.trim()).filter(Boolean); const preview = (props.find(p => /design preview/i.test(p.name||"") && isImageUrl(p.value)) || {}).value || null; const out = sides.map(s => { const p = props.find(p => (p.name||"").trim().toLowerCase() === s.toLowerCase() && isImageUrl(p.value)); return { label: s, url: p ? p.value : null }; }); if (out.length && !out.some(x => x.url) && preview) out[0].url = preview; return out; } // Small preview block for the packing summary — the composed "Design Preview" // mockup plus one thumbnail per chosen side, each captioned. Thumbnails are // proxied same-origin so html2canvas can rasterize them into the PDF. function sidesPreviewHtml(it){ const sides = customisedSides(it); if (!sides.length) return ""; const props = (it && it.properties) || []; const preview = (props.find(p => /design preview/i.test(p.name||"") && isImageUrl(p.value)) || {}).value || null; const cell = (url, label, mod) => url ? `
${esc(label)}
${esc(label)}
` : `${esc(label)}`; const cells = []; if (preview) cells.push(cell(preview, "Design preview", " os-side--preview")); sides.forEach(s => cells.push(cell(s.url, s.label))); return `
${cells.join("")}
`; } // Personalisation / print-instruction props the press manager needs (e.g. // Surname, Name, Number, Size) — plain-text properties only. Excludes artwork // URLs/files, the chosen sides (already shown as thumbnails), and builder/QC // metadata noise. Used on the order-summary PDF so garment jobs carry what to print. function itemPrintProps(it){ const props = (it && it.properties) || []; const sideNames = new Set(customisedSides(it).map(s => s.label.trim().toLowerCase())); const NOISE = /^_|admin|^edit|edit_sheet|app[\s_-]?(name|id|version)|^has[\s_-]|pixels?|overlap|low[\s_-]?dpi|low[\s_-]?res|\bdpi\b|customi[sz]er|customised sides|design preview|print[\s_-]?ready|gang[\s_-]?sheet|actual|sheet[\s_-]?size|mockup|token|preview/i; const fileOrUrl = v => /^https?:\/\//i.test(v) || /\.(png|jpe?g|webp|gif|svg|pdf|ai|eps|psd|tiff?)(\?|$)/i.test(v); return props.map(p => ({ name: String(p.name||"").replace(/^_+/, "").trim(), value: String(p.value==null?"":p.value).trim() })) .filter(p => p.name && p.value && !sideNames.has(p.name.toLowerCase()) && !NOISE.test(p.name) && !fileOrUrl(p.value)) .map(p => ({ name: p.name, value: p.value.length > 200 ? p.value.slice(0,200) + "…" : p.value })); } // A checkout "Tip" / gratuity line — not something we make or pack, so it's kept // off the production print-outs (order summary + packing slip). const isTipItem = (name) => /^(tip|tips|gratuity)$/i.test(String(name || "").trim()); // The customizer's "Customisation Print Fee" is a synthetic pence-priced fee line // (huge qty = pence), not something we make/pack — keep it off the production // print-outs (order summary + packing slips), same as tips. const isFeeItem = (name) => /customi[sz]ation\s*print\s*fee|customi[sz]er\s*fee/i.test(String(name || "").trim()); const isNonProduct = (name) => isTipItem(name) || isFeeItem(name); async function printOrderSummary(orders){ // Fold grouped orders into one dispatch unit: parent + children pack into one // parcel, so they print as a single block (all items, tagged by source order). const byId = new Map(orders.map(o => [o.id, o])); const seen = new Set(); const units = []; // { lead, members:[order,...], isGroup } for (const o of orders){ if (seen.has(o.id)) continue; const g = DTF.groupOf(o); if (!g){ units.push({ lead:o, members:[o], isGroup:false }); seen.add(o.id); continue; } const memberIds = [g.parent, ...g.children]; const members = memberIds.map(id => byId.get(id) || (DTF.getOrder && DTF.getOrder(id))).filter(Boolean); const lead = byId.get(g.parent) || members[0] || o; const ordered = [lead, ...members.filter(m => m.id !== lead.id)]; units.push({ lead, members: ordered, isGroup: ordered.length > 1 }); ordered.forEach(m => seen.add(m.id)); } // Per-order printing instructions (placement/spec) — fetched once for every order // being printed and shown as a highlighted block under that order's items. const memberNames = units.flatMap(u => u.members.map(m => String(m.id).replace(/^#/, ""))); let instr = {}; try { const r = await fetch("/api/orders/instructions?names=" + encodeURIComponent(memberNames.join(","))); instr = (await r.json()).instructions || {}; } catch {} const instrFor = (id) => instr["#" + String(id).replace(/^#/, "")] || null; // Refresh the marked gang-sheet lengths so metres reflect the ACTUAL sheet being // printed (height ÷ DPI of the "to print" artwork), not the per-line estimate. try { const cr = await fetch("/api/artwork/counts"); const cj = await cr.json(); if (cj && cj.printMetres) DTF._printMetres = cj.printMetres; } catch {} const sheetM = (id) => (DTF._printMetres && DTF._printMetres[String(id)]) || 0; // Refunded / removed lines aren't produced, and tips aren't items — never print them. const itemsOf = o => { const its = (o.items || []).filter(it => !it.removed && !isNonProduct(it.name)); return its.length ? its : [{ name: "—", qty: 0 }]; }; const rows = units.map(u => { const { lead, members, isGroup } = u; const c = DTF.getCustomer(lead.customerId); const name = (lead.ship && lead.ship.name) || (c && c.name) || "—"; // Show the actual delivery service (SD 1pm / RM24 / RM48 / DPD / Free) rather than // a generic "Delivery", so the packer sees the carrier at a glance. Collection stays // as-is. const mm = DTF.methodMeta[lead.method]; const method = lead.method === "Collection" ? "Collection" : ((mm && mm.short) || lead.method || "Delivery"); // Total printed rows this unit spans (all members' items, +1 subtotal for groups). const n = members.reduce((a, m) => a + itemsOf(m).length, 0) + (isGroup ? 1 : 0); let first = true; const memberRows = members.map((m, mi) => { // Marked gang-sheet length wins for this order's metres (shown once, on its // first row); otherwise fall back to the per-line estimate on each row. const ms = sheetM(m.id); return itemsOf(m).map((it, ii) => { const sku = it.sku ? `${esc(it.sku)} ` : ""; const nm = esc(it.name || "—"); const variant = it.variant ? ` (${esc(it.variant)})` : ""; const metresCell = ms > 0 ? (ii === 0 ? `${esc(DTF.fmtMetres(ms))} sheet` : "") : esc(DTF.fmtMetres((DTF.itemMetres ? DTF.itemMetres(it) : 0) || 0)); const src = (isGroup && mi > 0 && ii === 0) ? `${esc(m.id)} ` : ""; const pp = itemPrintProps(it); const propsHtml = pp.length ? `
${pp.map(p => `${esc(p.name)}: ${esc(p.value)}`).join("")}
` : ""; const sides = sidesPreviewHtml(it); const lead0 = first ? `${esc(lead.id)}${isGroup ? `
+${members.length - 1} combined
` : ""}` + `${esc(fmtDMY(lead.date))}` + `${esc(name)}` + `${esc(method)}` : ""; const cls = first ? "os-top" : (isGroup && mi > 0 && ii === 0) ? "os-memtop" : "os-sub"; first = false; return ` ${lead0} ${src}${sku}${nm}${variant}${propsHtml}${sides} ${metresCell} ×${it.qty || 0} `; }).join(""); }).join(""); let sub = ""; if (isGroup){ const gm = members.reduce((s, m) => s + (DTF.orderMetres(m) || 0), 0); const gu = members.reduce((s, m) => s + (m.items || []).filter(it => !isNonProduct(it.name)).reduce((a, it) => a + (it.qty || 0), 0), 0); sub = ` Combined parcel · ${members.length} orders ${esc(DTF.fmtMetres(gm))} ×${gu} `; } // Printing-instruction blocks (one per member that has any), full width. const instrRows = members.map(m => { const rec = instrFor(m.id); if (!rec || !rec.text) return ""; const lbl = isGroup ? `Printing instructions · ${esc(m.id)}` : "Printing instructions"; return `
${lbl}
${esc(rec.text)}
`; }).join(""); return memberRows + sub + instrRows; }).join(""); const allMembers = units.flatMap(u => u.members); const totalMetres = allMembers.reduce((s, o) => s + (DTF.orderMetres(o) || 0), 0); const totalUnits = allMembers.reduce((s, o) => s + (o.items || []).filter(it => !isNonProduct(it.name)).reduce((n, it) => n + (it.qty || 0), 0), 0); const groupCount = units.filter(u => u.isGroup).length; const parcelNote = groupCount ? ` · ${units.length} parcel${units.length===1?"":"s"}` : ""; const body = `

Order Summary

DTF.uk · ${allMembers.length} order${allMembers.length===1?"":"s"}${parcelNote} · ${totalUnits} unit${totalUnits===1?"":"s"} · printed ${esc(new Date().toLocaleDateString("en-GB"))}
` + `${rows}
Order IDDateCustomerCollection / DeliveryItem (SKU · name)MetresQty
Total${esc(DTF.fmtMetres(totalMetres))}×${totalUnits}
`; const extraCss = ` table.os { table-layout:fixed; } table.os td { word-break:break-word; overflow-wrap:anywhere; } /* a new dispatch unit starts at each .os-top row — separate them with a stronger rule */ table.os tbody tr.os-top > td { border-top:2px solid #c9c9c4; } /* child order inside a group — light divider + source tag */ table.os tbody tr.os-memtop > td { border-top:1px dashed #d7d7d2; } .os-src { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-weight:700; font-size:10px; color:#057a54; background:#e6fbf3; padding:0 4px; border-radius:3px; margin-right:2px; } .os-grp { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-weight:700; font-size:9px; color:#057a54; margin-top:2px; white-space:nowrap; } tr.os-grpsum > td { background:#f3faf7; font-size:10.5px; } tr.os-grpsum td.os-item { font-style:italic; color:#555; } .os-id { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-weight:700; white-space:nowrap; vertical-align:top; } table.os td.os-item { font-size:11.5px; line-height:1.4; } .os-sku { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-weight:700; font-size:10.5px; } td.os-m { white-space:nowrap; } .os-sheet { font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#057a54; background:#e6fbf3; padding:0 3px; border-radius:3px; vertical-align:middle; } td.os-q { font-size:15px; font-weight:800; white-space:nowrap; } /* personalisation / print instructions (Surname, Number, Size…) */ .os-props { margin-top:3px; display:flex; flex-wrap:wrap; gap:2px 12px; } .os-prop { font-size:11px; color:#222; } .os-propk { color:#777; font-weight:700; font-size:9px; letter-spacing:.03em; text-transform:uppercase; } .os-prop b { font-weight:800; } /* customised-garment side previews */ .os-sides { display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; } figure.os-side { margin:0; width:58px; } figure.os-side img { width:58px; height:58px; object-fit:contain; display:block; border:1px solid #d7d7d2; border-radius:4px; background:#fff; } figure.os-side figcaption { margin-top:2px; font-size:9px; font-weight:700; color:#555; text-align:center; text-transform:capitalize; } figure.os-side--preview { width:72px; } figure.os-side--preview img { width:72px; height:72px; border-color:#9fd8c2; } figure.os-side--preview figcaption { color:#057a54; text-transform:none; } .os-side--noimg { display:inline-block; padding:2px 7px; border:1px dashed #c9c9c4; border-radius:4px; font-size:10px; font-weight:600; color:#555; text-transform:capitalize; } /* printing instructions block (placement / print spec) */ tr.os-instr > td { background:#fff8e6; border-top:1px solid #f0e2b8; padding:7px 10px 8px; } .os-instr-lbl { font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8a6d1a; margin-bottom:3px; } .os-instr-txt { font-size:11.5px; line-height:1.5; white-space:pre-wrap; color:#1c1c1c; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; } `; openPdfPreview("Order Summary", { body, format: "a4", orientation: "portrait", contentWidthPx: 794, padPx: 40, baseFontPx: 12, extraCss, docType: "summary", orderRef: units.map(u => u.lead.id).join(", ") }); } // One slip per order — no prices, barcode footer encodes the order number. function printPackingSlips(orders){ const FROM = ["DTF.uk (Ecommerce 360 limited)", "2 Fensom Place", "Milton Keynes, Buckinghamshire MK10 9UH"]; const sections = orders.map(o => { const c = DTF.getCustomer(o.customerId); const code = recordNo(o) || String(o.adminId || ""); const user = String(o.customerId || "").split("/").pop(); const shipTo = [ (o.ship && o.ship.name) || (c && c.name) || "" ].concat(addrLines(o.ship, o.address)).filter(Boolean).map(esc).join("
"); const packItems = o.items.filter(it => !it.removed && !isNonProduct(it.name)); const items = packItems.map(it => `${esc(it.name)}${it.variant ? `
${esc(it.variant)}
` : ""}${it.qty}`).join(""); const totalQty = packItems.reduce((s, it) => s + (it.qty || 0), 0); return `

Packing Slip

From
${FROM.map(esc).join("
")}
Ship To
${shipTo}
Order #${esc(recordNo(o))}Date${esc(fmtDMY(o.date))}
User${esc(user)}Ship Date${o.dispatched ? esc(fmtDMY(o.date)) : ""}
${items}
Item DescriptionQty
Total qty${totalQty}
${esc(code)}
`; }); // 4x6" (100x150mm) thermal shipping-label format const css46 = ` h2 { font-size: 14px; margin: 0 0 7px; } .ps-cols { gap: 10px; margin: 2px 0 8px; } .ps-cols > div { font-size: 8.5px; line-height: 1.35; } .ps-cols .lbl, .lbl { font-size: 7px; margin-bottom: 2px; } table.ps-meta { margin-bottom: 8px; } table.ps-meta td { font-size: 8.5px; padding: 1px 6px 1px 0; } table.ps-meta td:nth-child(even) { padding-right: 14px; } table.li th { font-size: 7.5px; padding: 4px 5px; } table.li td { font-size: 9px; padding: 4px 5px; } .ps-barcode { margin-top: 10px; padding-top: 8px; text-align: center; } .ps-barcode svg { display: block; margin: 0 auto; max-width: 100%; } .ps-code { text-align: center; font-family: monospace; font-size: 11px; letter-spacing: 3px; margin-top: 5px; } `; openPdfPreview("Packing Slips", { sections, withBarcodes: true, imgFormat: "png", scale: 3, format: [100, 150], orientation: "portrait", contentWidthPx: 378, padPx: 15, baseFontPx: 9, extraCss: css46, docType: "packing", orderRef: orders.map(o => o.id).join(", ") }); } /* ---- itemssummary ---- */ function itemsSummary(o){ // Removed (refunded/edited-out) lines don't count toward what we make/ship. const active = o.items.filter(i => !i.removed); const units = active.reduce((s,i)=>s+i.qty,0); return { lines: active.length, units, removed: o.items.length - active.length }; } /* =================== ORDERS LIST =================== */ // Persist the list view (board/all · filter · search) so returning from an order // (back button / crumb) lands on the same section you opened it from. function _ordersViewLoad(){ try { return JSON.parse(sessionStorage.getItem("dtf_ordersview") || "null") || {}; } catch(e){ return {}; } } function _ordersViewSave(v){ try { sessionStorage.setItem("dtf_ordersview", JSON.stringify(v)); } catch(e){} } // Statuses offered in the multi-select filter, in pipeline order. const STATUS_OPTIONS = [ "new", "awaiting_artwork", "awaiting_garments", "design_queue", "rip_queue", "print_queue", "printing", "printed", "press_queue", "ready_dispatch", "ready-collection", "dispatched", "collected", "delivered", "refunded", "cancelled", "closed", ]; // Multi-select status filter — a checkbox popover. Pick any set of statuses // (e.g. Printed + Press queue + Ready to dispatch) to view them together. function StatusPicker({ picks, onToggle, onClear, statuses }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [open]); const n = picks.size; const label = n === 0 ? "Statuses" : n === 1 ? ((DTF.statusMeta[[...picks][0]]||{}).label || [...picks][0]) : `${n} statuses`; return (
{open && (
Show statuses {n > 0 && }
{statuses.filter(k => DTF.statusMeta[k]).map(k => ( ))}
)}
); } // Delivery methods offered in the multi-select filter, in urgency order. const METHOD_OPTIONS = ["SD", "RM24", "DPD", "RM48", "Collection", "Free"]; // Multi-select delivery-method filter — a checkbox popover mirroring StatusPicker. // Composes with the status filter and search to narrow whatever list is shown. function MethodPicker({ picks, onToggle, onClear, methods }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [open]); const n = picks.size; const label = n === 0 ? "Delivery" : n === 1 ? ((DTF.methodMeta[[...picks][0]]||{}).short || [...picks][0]) : `${n} methods`; return (
{open && (
Delivery method {n > 0 && }
{methods.filter(k => DTF.methodMeta[k]).map(k => ( ))}
)}
); } function OrdersList({ go, board }) { const _v0 = _ordersViewLoad(); const [mode, setMode] = useState(board || _v0.mode || "board"); // board (dispatch) | new | all // The dispatch board always lands on awaiting-dispatch only — ignore any status // filter left over from a prior session. const [statusFilter, setStatusFilter] = useState(board === "board" ? "todispatch" : (_v0.statusFilter || "todispatch")); // todispatch | all | // Multi-status filter: when non-empty it overrides the board/new/all mode and // shows exactly the picked statuses (e.g. printed + press queue + ready to dispatch). const [statusPicks, setStatusPicks] = useState(() => new Set(_v0.statusPicks || [])); const toggleStatusPick = k => setStatusPicks(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; }); const clearStatusPicks = () => setStatusPicks(new Set()); // "Today's Summary List" — statuses configured in Settings; one click shows those // statuses and selects every loaded order in them (no auto-print — the operator // prints from the selection toolbar if/when they want). const [summaryStatuses, setSummaryStatuses] = useState([]); useEffect(() => { fetch("/api/settings/summary-statuses").then(r => r.json()).then(j => setSummaryStatuses(Array.isArray(j.statuses) ? j.statuses : [])).catch(() => {}); }, []); const todaysSummary = () => { const picks = (summaryStatuses || []).filter(Boolean); if (!picks.length) { alert("No statuses configured for the summary list. Set them in Settings → Today's Summary List."); return; } const matched = (DTF.orders || []).filter(o => picks.includes(o.status)); if (!matched.length) { alert("No loaded orders are in the summary statuses right now."); return; } setStatusPicks(new Set(picks)); // show those statuses on the board setSel(new Set(matched.map(o => o.id))); // preselect what's included }; // Multi-method filter: a cross-cutting refinement (unlike status picks it does // not override the mode) — it narrows whatever list is shown to the picked // delivery methods, and persists across Dispatch / New / All tabs. const [methodPicks, setMethodPicks] = useState(() => new Set(_v0.methodPicks || [])); const toggleMethodPick = k => setMethodPicks(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; }); const clearMethodPicks = () => setMethodPicks(new Set()); // Sidebar entry chooses the board (Dispatch board vs New orders) via the route. // Landing on a board must present that board cleanly: a leftover multi-status // pick or search query otherwise overrides it (that's why #/dispatch sometimes // showed all/other orders). Clearing them makes #/dispatch always the clean // awaiting-dispatch view. useEffect(() => { if (!board) return; if (board !== mode) setMode(board); setStatusFilter(board === "board" ? "todispatch" : (board === "new" ? "todispatch" : statusFilter)); clearStatusPicks(); setQuery(""); }, [board]); const [sel, setSel] = useState(() => new Set(_v0.sel || [])); // persists across reload const [query, setQuery] = useState(_v0.query || ""); const [collecting, setCollecting] = useState(null); // order id being marked collected const [ver, setVer] = useState(0); // bump so memos recompute when DTF.orders mutates async function markCollectedRow(id){ const ids = Array.isArray(id) ? id : [id]; if (!ids.length) return; setCollecting(ids[0]); // spinner sits on the parent row try { for (const one of ids) await DTF.markCollected(one); setVer(v => v + 1); } catch (e) { alert("Couldn't mark collected: " + e.message); } finally { setCollecting(null); } } const [shipFor, setShipFor] = useState(null); // orders to create labels for const [combineFor, setCombineFor] = useState(null); // orders to combine into a group const [shipChildren, setShipChildren] = useState({}); // parentId -> [childOrder] for combined dispatch const [loadingMore, setLoadingMore] = useState(false); // Collapse a dispatch selection to one parcel per group: children are replaced // by their parent (one label), and each parent carries its child orders so they // get fulfilled with the parent's tracking after the label prints. function planDispatch(list){ const byId = new Map(DTF.orders.map(o => [o.id, o])); const parents = new Map(); const kids = {}; for (const o of list){ if (o.method === "Collection") continue; const g = DTF.groupOf(o); if (!g){ if (!parents.has(o.id)) parents.set(o.id, o); continue; } const pOrder = byId.get(g.parent) || o; parents.set(pOrder.id, pOrder); kids[pOrder.id] = g.children.map(id => byId.get(id)).filter(Boolean).filter(k => k.method !== "Collection"); } return { orders: [...parents.values()], groupChildren: kids }; } function openLabels(list){ const p = planDispatch(list); setShipChildren(p.groupChildren); setShipFor(p.orders); } // Remember the current section so a later "back" returns here. useEffect(() => { _ordersViewSave({ mode, statusFilter, statusPicks: [...statusPicks], methodPicks: [...methodPicks], query, sel: [...sel] }); }, [mode, statusFilter, statusPicks, methodPicks, query, sel]); // Reload orders/customers/workflow when the section opens so it's never stale. const [loading, setLoading] = useState(DTF.orders.length === 0); useEffect(() => { let alive = true; if (DTF.reloadData) DTF.reloadData().then(() => { if (alive) { setLoading(false); setVer(v => v + 1); } }).catch(() => alive && setLoading(false)); else setLoading(false); return () => { alive = false; }; }, []); const [reloading, setReloading] = useState(false); const doReload = () => { if (reloading || !DTF.reloadData) return; setReloading(true); DTF.reloadData().then(() => { setReloading(false); setVer(v => v + 1); }).catch(() => setReloading(false)); }; // Live-sync pushed fresh data → recompute the list. useEffect(() => { const h = () => setVer(v => v + 1); window.addEventListener("dtf:refreshed", h); window.addEventListener("dtf:print-live", h); return () => { window.removeEventListener("dtf:refreshed", h); window.removeEventListener("dtf:print-live", h); }; }, []); const orders = DTF.orders; const q = query.trim(); // Backend (Shopify) order search — covers ALL orders, not just the loaded page. const [results, setResults] = useState(null); // null = browsing; array = search results const [searching, setSearching] = useState(false); const [sCursor, setSCursor] = useState(null); const [sHasMore, setSHasMore] = useState(false); // While searching we span ALL orders (the backend search ignores the board's // status filter), so auto-select "All statuses" so the dropdown matches what's // shown. Remember the prior filter and restore it when the search is cleared. const preSearchFilter = useRef(null); const preSearchMode = useRef(null); useEffect(() => { if (!q) { setResults(null); setSearching(false); if (preSearchFilter.current != null) { setStatusFilter(preSearchFilter.current); preSearchFilter.current = null; } if (preSearchMode.current != null) { setMode(preSearchMode.current); preSearchMode.current = null; } return; } if (preSearchFilter.current == null) { preSearchFilter.current = statusFilter; setStatusFilter("all"); } // The New-orders board only shows status:"new"; a search spans all orders, so // switch to "All orders" while searching to avoid a misleading "New" tab. if (mode !== "all" && preSearchMode.current == null) { preSearchMode.current = mode; setMode("all"); } let alive = true; setSearching(true); const t = setTimeout(() => { DTF.searchOrders(q).then(r => { if (!alive) return; setResults(r.orders); setSCursor(r.cursor); setSHasMore(r.hasMore); setSearching(false); }) .catch(() => { if (alive) { setResults([]); setSearching(false); } }); }, 350); return () => { alive = false; clearTimeout(t); }; }, [q]); async function doLoadMore(){ setLoadingMore(true); try { if (results != null) { const r = await DTF.searchOrders(q, sCursor); setResults(prev => [...prev, ...r.orders]); setSCursor(r.cursor); setSHasMore(r.hasMore); } else { await DTF.loadMoreOrders(); setVer(v => v + 1); } } catch (e) { alert("Couldn't load more: " + e.message); } finally { setLoadingMore(false); } } const visible = useMemo(() => orders.slice(), [orders, ver]); // loaded orders (non-search view) // Delivery-method filter predicate — applied to every displayed list (boards, // status picks, and search results) so it composes with the other filters. const inMethods = o => !methodPicks.size || methodPicks.has(o.method); // stats — orders awaiting dispatch exclude terminal states AND in-production stages. const NONDISPATCH = ["closed","delivered","dispatched","collected","refunded","cancelled", ...DTF.PRODUCTION_STAGES, ...(DTF.HOLD_STAGES||[])]; const isOpen = o => !NONDISPATCH.includes(o.status) && o.fulfil !== "fulfilled"; // Due to dispatch today = still-open orders whose cutoff-aware dispatch day is // today or earlier. Orders placed after the 1pm cutoff roll to tomorrow (via // fulfillBy) so they don't count today; yesterday's unshipped orders do. const dueToday = orders.filter(o => isOpen(o) && o.fulfillBy <= DTF.TODAY); const overdue = dueToday.filter(o => o.fulfillBy < DTF.TODAY).length; const printing = orders.filter(o => o.status === "printing" || o.status === "in-progress").length; // Per-queue production counts (by derived status, which carries the local stage). const PROD_QUEUES = [ ["awaiting_artwork", "Artwork"], ["design_queue", "Design"], ["rip_queue", "RIP"], ["print_queue", "Print"], ["printing", "Printing"], ["printed", "Printed"], ["press_queue", "Press"], ]; const prodCounts = {}; PROD_QUEUES.forEach(([s]) => prodCounts[s] = orders.filter(o => o.status === s).length); const prodTotal = Object.values(prodCounts).reduce((a, b) => a + b, 0); const unfulfilled = orders.filter(o => o.fulfil !== "fulfilled" && !["closed","delivered","refunded","cancelled"].includes(o.status)).length; const revenueToday = dueToday.reduce((s,o)=>s+o.total,0); // Dispatch board — one flat table, sorted by dispatch date (soonest first) then // method urgency. NOT split into a table per date (same-date rows stay adjacent // via the sort; each row shows its own "Dispatch by" date). const boardList = useMemo(() => { let list = visible.slice(); if (statusFilter === "todispatch") list = list.filter(o => o.status === "ready_dispatch" && o.fulfil !== "fulfilled"); else if (statusFilter !== "all") list = list.filter(o => o.status === statusFilter); list = list.filter(inMethods); return list.sort((a,b) => { if (a.fulfillBy !== b.fulfillBy) return parseYMD(a.fulfillBy) - parseYMD(b.fulfillBy); const ra = (DTF.methodMeta[a.method]||{}).rank ?? 99, rb = (DTF.methodMeta[b.method]||{}).rank ?? 99; if (ra !== rb) return ra - rb; return a.date < b.date ? -1 : 1; }); }, [statusFilter, visible, methodPicks]); const newCount = useMemo(() => visible.filter(o => o.status === "new").length, [visible]); const flatList = useMemo(() => visible.filter(inMethods).sort((a,b)=> a.date < b.date ? 1 : -1), [visible, methodPicks]); // New orders: one flat table (no date grouping), newest order first. Held orders // (parked until their hold date) are HIDDEN here — they stay in All orders and // re-appear in New on their hold date (status reverts to "new" that day). const newList = useMemo(() => visible.filter(o => o.status === "new").filter(inMethods).sort((a,b) => a.date < b.date ? 1 : -1), [visible, methodPicks]); // Multi-status view: all loaded orders matching any picked status, dispatch-sorted. const pickedList = useMemo(() => { if (!statusPicks.size) return []; return visible.filter(o => statusPicks.has(o.status)).filter(inMethods).sort((a,b) => { if (a.fulfillBy !== b.fulfillBy) return parseYMD(a.fulfillBy) - parseYMD(b.fulfillBy); const ra = (DTF.methodMeta[a.method]||{}).rank ?? 99, rb = (DTF.methodMeta[b.method]||{}).rank ?? 99; if (ra !== rb) return ra - rb; return a.date < b.date ? -1 : 1; }); }, [statusPicks, visible, methodPicks]); // Search results, narrowed by any active status picks and/or method picks — so // both multi-filters also apply while searching, not only on the boards. const resultList = useMemo(() => results == null ? null : results.filter(o => (!statusPicks.size || statusPicks.has(o.status)) && (!methodPicks.size || methodPicks.has(o.method))) , [results, statusPicks, methodPicks]); // Switching tab (Dispatch / New / All) clears any active search. Reset the // pre-search refs too, else the search-clear effect would restore the old mode. function chooseMode(m){ preSearchMode.current = null; preSearchFilter.current = null; setQuery(""); clearStatusPicks(); // a tab shows its own list; drop any status multi-filter setMode(m); // Reflect the tab in the URL (#/dispatch · #/neworders · #/orders) so it's // shareable / bookmarkable; the hashchange listener re-syncs the route. go({ view: "orders", board: m }); } function toggleSel(id){ setSel(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); } function setSelMany(ids, on){ setSel(prev => { const n = new Set(prev); ids.forEach(id => on ? n.add(id) : n.delete(id)); return n; }); } // What's on screen: backend search results when searching, else — if statuses // are picked — the multi-status list (overrides the mode), else the mode's list. const usePicks = results == null && statusPicks.size > 0; const shown = results != null ? resultList : usePicks ? pickedList : (mode === "all" ? flatList : mode === "new" ? newList : boardList); const selectedOrders = shown.filter(o => sel.has(o.id)); // Combine is offered when the operator picks ≥2 ungrouped orders that go together: // either the SAME delivery address (guest re-checkout / duplicate profiles) OR the // SAME customer (covers an order that's missing an address, or a customer with a // couple of orders to combine into one parcel). The CombineModal confirms the parcel. const _first = selectedOrders[0]; const _sameAddr = _first && DTF.combineKey(_first) && selectedOrders.every(o => DTF.combineKey(o) === DTF.combineKey(_first)); const _sameCust = _first && _first.customerId && selectedOrders.every(o => o.customerId === _first.customerId); const canCombine = selectedOrders.length >= 2 && (_sameAddr || _sameCust) && selectedOrders.every(o => !DTF.groupOf(o)); // Same-destination suggestions on the New / Dispatch / All boards: any // un-grouped, still-open order sharing a delivery address (catches duplicate // customer profiles / guest re-checkout) — so orders headed to one address can // be combined into a single parcel whether they're new or already ready to ship. const suggestions = useMemo(() => { if (q || usePicks) return []; return DTF.groupSuggestions(visible.filter(isOpen)); }, [mode, q, visible, ver, usePicks]); const allShownIds = shown.map(o => o.id); const allSelected = allShownIds.length > 0 && allShownIds.every(id => sel.has(id)); // Bulk hand-over: assign the selected orders to a partner shop (or take them back). // The server folds combined-group siblings; the response is the full assignment map. async function bulkHandover(slug) { const names = selectedOrders.map(o => String(o.id).replace(/^#/, "")); if (!names.length) return; try { const r = slug === "__none__" ? await shSend("/api/shops/none/unassign", "POST", { names }) : await shSend("/api/shops/" + slug + "/assign", "POST", { names }); if (r && r.orders) DTF.shopAssignments = r.orders; } catch (e) { /* best-effort; tag refreshes on next load */ } setSel(new Set()); setVer(x => x + 1); } // Open an order while remembering the exact list it came from, so the order // page can offer prev/next through this same board / search / filtered set. const navSource = results != null ? `Search "${q}"` : usePicks ? "Status: " + [...statusPicks].map(k => (DTF.statusMeta[k]||{}).label || k).join(", ") : (mode === "board" ? "Dispatch board" : mode === "new" ? "New orders" : "All orders") + (mode === "board" && statusFilter !== "todispatch" && statusFilter !== "all" ? " · " + (DTF.statusMeta[statusFilter] ? DTF.statusMeta[statusFilter].label : statusFilter) : mode === "board" && statusFilter === "todispatch" ? " · to dispatch" : ""); function openOrder(o){ DTF.setOrderNav(shown.map(x => x.id), { source: navSource, route: { view:"orders", board: mode } }); go({ view:"order", id:o.id }); } return (
Due to dispatch today
{dueToday.length}
{overdue>0 ? <>{overdue} overdue · {dueToday.length-overdue} today : `${dueToday.length} ${dueToday.length===1?"order":"orders"} today`}
go({view:"production"})} title="Open production">
In production
{prodTotal}
{PROD_QUEUES.map(([s,l]) => ( {prodCounts[s]} {l} ))}
Open / unfulfilled
{unfulfilled}
▲ needs action
Revenue · today's batch
{DTF.fmtGBP(revenueToday)}
incl. VAT
setQuery(e.target.value)} placeholder="Search items, SKU, customer, order #, method…" /> {query && }
{mode === "board" && statusPicks.size === 0 && (
)} {q ? (searching ? `Searching "${q}"…` : `${resultList ? resultList.length : 0}${sHasMore && !statusPicks.size && !methodPicks.size ? "+" : ""} ${resultList && resultList.length===1?"match":"matches"} for "${q}"${statusPicks.size ? ` in ${statusPicks.size} status${statusPicks.size===1?"":"es"}` : ""}${methodPicks.size ? ` · ${statusPicks.size?"":"filtered to "}${[...methodPicks].map(k=>(DTF.methodMeta[k]||{}).short||k).join(", ")}` : ""}`) : usePicks ? `${statusPicks.size} status${statusPicks.size===1?"":"es"} · across all loaded orders` : mode === "new" ? "Newest first · by order date" : "By dispatch date, then urgency · SD 1pm → RM24 → DPD → RM48 → Collection"} {!q && (usePicks || mode === "new" || mode === "board") && (() => { const list = usePicks ? pickedList : mode === "new" ? newList : boardList; const m = list.reduce((s,o)=>s+DTF.orderMetres(o),0); return list.length ? {list.length} orders{m > 0 ? <> · {DTF.fmtMetres(m)} : null} : null; })()}
{sel.size > 0 && <> {sel.size} selected {canCombine && } {(DTF.myShops||[]).length > 0 && } }
{suggestions.length > 0 && sel.size === 0 && (
{suggestions.map(s => (
{s.name} has {s.orderIds.length} open orders to the same address — combine into one dispatch?
))}
)} {(results == null && (reloading || (loading && DTF.orders.length === 0))) ? ( ) : results != null ? ( searching && resultList.length === 0 ? (
Searching…
) : resultList.length === 0 ? ( (statusPicks.size || methodPicks.size) && results.length > 0 ? (
{results.length}{sHasMore ? "+" : ""} match "{q}", but none pass the active filter{statusPicks.size && methodPicks.size ? "s" : ""}.
) : (
No orders match "{q}".
) ) : ( ) ) : usePicks ? ( pickedList.length === 0 ? (
No loaded orders in {statusPicks.size===1?"that status":"those statuses"}.
) : ( ) ) : mode === "all" ? ( ) : mode === "new" ? ( newList.length === 0 ? (
No new orders to deal with — all triaged. 🎉
) : ( ) ) : boardList.length === 0 ? (
Nothing awaiting dispatch.
) : ( )} {shown.length > 0 && (results != null ? sHasMore : DTF._ordersHasMore) && (
{results != null ? `${resultList.length} shown` : `${DTF.orders.length} loaded`}
)} {shipFor && shipFor.length > 0 && { setShipFor(null); setShipChildren({}); }} onDone={()=>{ setSel(new Set()); }} />} {combineFor && combineFor.length >= 2 && setCombineFor(null)} onDone={()=>{ setCombineFor(null); setSel(new Set()); setVer(v=>v+1); }} />}
); } // Order a flat list into group-aware tree rows: each group is emitted at the // position of its first-seen member, parent first, children immediately below. // { o, role:"single"|"parent"|"child", group?, members?, parentId? } function buildTreeRows(orders){ const byId = new Map(orders.map(o => [o.id, o])); const placed = new Set(); const rows = []; for (const o of orders){ if (placed.has(o.id)) continue; const g = DTF.groupOf(o); if (!g){ rows.push({ o, role:"single" }); placed.add(o.id); continue; } const members = [g.parent, ...g.children].map(id => byId.get(id)).filter(Boolean); const parent = byId.get(g.parent) || members[0]; if (!parent){ rows.push({ o, role:"single" }); placed.add(o.id); continue; } rows.push({ o: parent, role:"parent", group:g, members }); placed.add(parent.id); for (const co of members){ if (co.id === parent.id) continue; rows.push({ o: co, role:"child", group:g, parentId:parent.id, parentMethod: parent.method }); placed.add(co.id); } } return rows; } function shortAddr(a){ if (!a) return ""; return [a.name, a.address1, a.city, a.zip].filter(Boolean).join(", "); } function OrdersTable({ orders, go, onOpen, sel, toggleSel, setSelMany, onCollected, collecting, onCreateLabel }) { const open = onOpen || (o => go({ view:"order", id:o.id })); const ids = orders.map(o => o.id); const allSel = ids.length > 0 && ids.every(id => sel.has(id)); const [collapsed, setCollapsed] = useState(() => new Set()); // group ids collapsed const [ungrouping, setUngrouping] = useState(null); const treeRows = buildTreeRows(orders); const toggleGroup = gid => setCollapsed(prev => { const n = new Set(prev); n.has(gid) ? n.delete(gid) : n.add(gid); return n; }); async function ungroup(gid){ const g = DTF._workflow && DTF._workflow.groups[gid]; const credited = DTF.groupCreditTotal(g); if (credited > 0 && !confirm(`This group refunded ${DTF.fmtGBP(credited)} of shipping to the customer's store credit. Ungrouping will deduct that back off their account. Continue?`)) return; setUngrouping(gid); try { const res = await DTF.dissolveGroup(gid); if (res && res.ok === false) { alert("Ungroup halted — couldn't reverse store credit for " + (res.failed||[]).map(f=>f.orderId).join(", ") + ". The group was kept so nothing is lost.\n" + (((res.failed||[])[0]||{}).error || "")); } else if (res && (res.reversed||[]).length) { const back = res.reversed.reduce((s,r)=>s+(r.amount||0),0); alert(`Ungrouped. Reversed ${DTF.fmtGBP(back)} of store credit.`); } } catch(e){ alert("Couldn't ungroup: "+e.message); } finally { setUngrouping(null); } } // A group is selected as ONE unit: checking the parent checks every member; // children have no separate checkbox. function toggleRow(row){ if (row.role === "parent"){ const memberIds = (row.members || [row.o]).map(m => m.id); setSelMany && setSelMany(memberIds, !sel.has(row.o.id)); } else { toggleSel(row.o.id); } } return (
{treeRows.map(row => { if (row.role === "child" && collapsed.has(row.group.id)) return null; return toggleRow(row)} onCollected={onCollected} collecting={collecting} go={go} onCreateLabel={onCreateLabel} collapsed={row.role === "parent" && collapsed.has(row.group.id)} onToggleGroup={toggleGroup} onUngroup={ungroup} ungrouping={ungrouping} />; })}
setSelMany && setSelMany(ids, !allSel)} /> Flags Order Placed Dispatch by Customer Items Channel Method Tracking Total Payment Fulfilment Status Progress
); } function OrderRow({ row, open, sel, onToggle, onCollected, collecting, go, collapsed, onToggleGroup, onUngroup, ungrouping, onCreateLabel }) { const o = row.o; const role = row.role; const isParent = role === "parent"; const isChild = role === "child"; const members = row.members || [o]; // The parent row speaks for the whole group: it shows every group item and the // combined material total (this is the order you dispatch). const dispItems = (isParent ? members.flatMap(m => (m.items||[]).map(it => ({ ...it, _from: m.id }))) : o.items).filter(it => !it.removed); const dispMetres = isParent ? members.reduce((s,m)=>s+DTF.orderMetres(m),0) : DTF.orderMetres(o); const dispUnits = dispItems.reduce((s,it)=>s+(it.qty||0),0); const c = DTF.getCustomer(o.customerId) || {}; const isSel = sel.has(o.id); const hasUV = dispItems.some(it => /\buv\b/i.test(it.name || "")); const printing = DTF.printingFor && DTF.printingFor(o.id); const otherAddrs = isParent ? members.filter(m => m.id !== o.id && shortAddr(m.ship) && shortAddr(m.ship) !== shortAddr(o.ship)).length : 0; const rowCls = (isSel?"is-sel":"")+(hasUV?" has-uv":"")+(printing?" is-printing":"") + (isParent?" ord-row--parent":"") + (isChild?" ord-row--child":""); // Which partner shop (location) this order is handed over to, if any. const shopTag = (() => { const map = (DTF && DTF.shopAssignments) || {}; const slug = map["#" + String(o.id).replace(/^#/, "")] || map[String(o.id)]; if (!slug) return null; const byId = (DTF && DTF.shopsById) || {}; return byId[slug] || { slug, name: slug }; })(); return ( open(o)}> {e.stopPropagation(); if(!isChild) onToggle();}}> {isChild ? ↳ : } {isParent && ( { e.stopPropagation(); onToggleGroup(row.group.id); }}>{collapsed?"▸":"▾"} )} {isChild && ↳} {o.id} {isParent && ( {members.length} combined )} {isChild && of {row.parentId}} {isParent && ( )} {shopTag && { e.stopPropagation(); go({ view:"shop", slug: shopTag.slug, id: String(o.id).replace(/^#/,"") }); }}> {shopTag.name}} {fmtPlaced(o.date).day}
{fmtPlaced(o.date).time}
{fmtDay(o.fulfillBy)} {(() => { const stillOpen = !["dispatched","collected","delivered","closed","refunded","cancelled"].includes(o.status); const overdue = stillOpen && o.fulfillBy < DTF.TODAY; return
{relDay(o.fulfillBy)}
; })()} {c.name || (o.ship && o.ship.name) || "—"}
{c.location || ""}
{(isParent || isChild) && shortAddr(o.ship) &&
{shortAddr(o.ship)}
} {isParent && otherAddrs > 0 &&
+{otherAddrs} other {otherAddrs===1?"address":"addresses"} in group
} {o.note &&
{o.note.replace(/\s+/g," ")}
} {(() => { const ct = DTF.threadsForCustomer(o.customerId); if (!ct.length) return null; const recent = ct.slice().sort((a,b)=> a.updated < b.updated ? 1 : -1)[0]; return ( { e.stopPropagation(); if(e.metaKey||e.ctrlKey||e.shiftKey||e.button!==0) return; e.preventDefault(); go({ view:"inbox", id:recent.id }); }} title="Open most recent email" className="mono" style={{ display:"inline-block", marginTop:3, fontSize:10, color:"var(--mint-ink)", textDecoration:"underline", cursor:"pointer" }}> ✉ {ct.length} {ct.length===1 ? "email" : "emails"} ); })()}
{dispItems.map((it, i) => { const uv = /\buv\b/i.test(it.name || ""); return (
{it.qty}× {it.sku ? {it.sku} : {it.name}} {uv && UV}
); })}
{isParent?"combined: ":""}{dispUnits} units · {dispItems.length} {dispItems.length===1?"line":"lines"} {dispMetres > 0 ? <> · {DTF.fmtMetres(dispMetres)} : null}
{isChild && row.parentMethod && row.parentMethod !== o.method ? via main : } {o.tracking && (o.tracking.url || o.tracking.number) ? (o.tracking.url ? e.stopPropagation()} className="mono" style={{color:"var(--mint-ink)",fontSize:11,textDecoration:"underline",whiteSpace:"nowrap"}}>{o.tracking.number || "Track"} : {o.tracking.number}) : —} {DTF.fmtGBP(o.total)}
{printing ? 🖨 Printing{printing.percent != null ? " " + printing.percent + "%" : ""} : o.status === "held" && o.holdUntil ? Held until {o.holdUntil} : } {o.method === "Collection" && !["collected","refunded","cancelled","closed"].includes(o.status) && onCollected && ( )} {onCreateLabel && !isChild && o.method !== "Collection" && !["dispatched","collected","delivered","closed","refunded","cancelled"].includes(o.status) && ( )}
); } function CombineModal({ orders, onClose, onDone }) { // Default the main order to the one with the most items (then most material, // then earliest) — usually the "biggest" order. The operator can override. const scored = orders.slice().sort((a,b) => { // The parent drives the parcel's delivery address, so prefer an order that HAS one // (some orders — e.g. a fee/collection line — arrive with no shipping address). const aa = (a.ship && a.ship.address1) ? 1 : 0, ba = (b.ship && b.ship.address1) ? 1 : 0; if (aa !== ba) return ba - aa; const au = (a.items||[]).reduce((s,i)=>s+i.qty,0), bu = (b.items||[]).reduce((s,i)=>s+i.qty,0); if (au !== bu) return bu - au; const am = DTF.orderMetres(a), bm = DTF.orderMetres(b); if (am !== bm) return bm - am; return a.date < b.date ? -1 : 1; }); const [parent, setParent] = useState(scored[0].id); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [creditShip, setCreditShip] = useState(false); // refund child shipping → store credit const cust = DTF.getCustomer(orders[0].customerId) || {}; const totalUnits = orders.reduce((s,o)=>s+(o.items||[]).reduce((a,i)=>a+i.qty,0),0); const totalMetres = orders.reduce((s,o)=>s+DTF.orderMetres(o),0); // The children (everything but the chosen main) ship inside the main order's // parcel, so their already-paid shipping can be refunded to store credit. const children = orders.filter(o => o.id !== parent); const childShip = children.reduce((s,c)=>s+(c.shipping||0),0); async function combine(){ setErr(""); setBusy(true); try { await DTF.createGroup(parent, children.map(o=>o.id)); if (creditShip) { const toCredit = children.filter(c => (c.shipping||0) > 0); const cres = await Promise.allSettled(toCredit.map(c => DTF.creditShipping(c.id))); const fail = toCredit.filter((_,i)=>cres[i].status==="rejected"); if (fail.length) { const msg = ((cres.find(r=>r.status==="rejected")||{}).reason||{}).message || "error"; setErr(`Combined, but store credit failed for ${fail.map(c=>c.id).join(", ")}: ${msg}`); setBusy(false); return; // group exists; leave modal open so the error is seen } } onDone && onDone(); } catch(e){ setErr(e.message || "Couldn't combine"); setBusy(false); } } return (
e.stopPropagation()}>

Combine {orders.length} orders{cust.name?` — ${cust.name}`:""}

Choose the main order. It leads the group, shows every item, and is the one you dispatch. The others sit under it as children.

{orders.map(o => { const isP = o.id === parent; const units = (o.items||[]).reduce((a,i)=>a+i.qty,0); const m = DTF.orderMetres(o); return ( ); })}
{childShip > 0 && ( )} {err &&
{err}
}
{orders.length} orders · {totalUnits} units{totalMetres>0?` · ${DTF.fmtMetres(totalMetres)}`:""}
); } // A vector SVG design (e.g. the "Design Preview" of a gang-sheet upload): rasterise // it to a print-ready PNG at a fixed physical width (cm) — height stays proportional // to the SVG's aspect ratio — at 300 DPI, then attach to the order's artwork. const DTF_SHEET_WIDTH_CM = 57; // standard DTF roll width function SvgConvertProp({ orderId, value }) { const v = String(value); let fname = "design"; try { fname = decodeURIComponent(v.split("?")[0].split("/").pop() || "design"); } catch {} const [widthCm, setWidthCm] = useState(DTF_SHEET_WIDTH_CM); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false); const [err, setErr] = useState(""); const [step, setStep] = useState(""); const [aspect, setAspect] = useState(null); // height / width from the SVG's intrinsic size useEffect(() => { let alive = true; const im = new Image(); im.onload = () => { if (alive && im.naturalWidth) setAspect(im.naturalHeight / im.naturalWidth); }; im.src = v; return () => { alive = false; }; }, [v]); const heightCm = aspect ? Math.round(widthCm * aspect * 10) / 10 : null; const wpx = Math.round(widthCm / 2.54 * 300); const hpx = heightCm != null ? Math.round(heightCm / 2.54 * 300) : null; async function convert() { if (busy) return; setBusy(true); setErr(""); setDone(false); setStep("starting"); try { await DTF.svgToPng(orderId, v, widthCm, setStep); setDone(true); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name: orderId } })); } catch (e) { setErr(e.message || "Convert failed"); } finally { setBusy(false); } } return (
svg preview
SVG (vector){aspect ? " · " + (Math.round(aspect * 100) / 100) + ":1 h/w" : ""} — scales to any size
→ {widthCm} × {heightCm != null ? heightCm : "?"} cm @300 DPI ({wpx} × {hpx != null ? hpx : "?"} px)
{done && saved to Artwork below} {err && {err}}
); } // A customer-uploaded PDF design (Design Preview) — download it, or rasterise its // first page to a 300-DPI print-ready PNG that lands in the order's Artwork. function PdfConvertProp({ orderId, value }) { const v = String(value); let fname = "design.pdf"; try { fname = decodeURIComponent(v.split("?")[0].split("/").pop() || "design.pdf"); } catch {} const dlName = dlNameFor(orderId, v); const dlHref = "/api/dl?src=" + encodeURIComponent(v) + "&name=" + encodeURIComponent(dlName) + (orderId ? "&order=" + encodeURIComponent(orderId) : ""); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false); const [err, setErr] = useState(""); const [step, setStep] = useState(""); async function convert() { if (busy) return; setBusy(true); setErr(""); setDone(false); setStep("starting"); try { await DTF.pdfToPng(orderId, v, setStep); setDone(true); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name: orderId } })); } catch (e) { setErr(e.message || "Convert failed"); } finally { setBusy(false); } } return ( {fname} Download {err && {err}} ); } // How far along the pipeline an order is: 0 New → 1 In production → 2 Ready to // dispatch → 3 Dispatched. Drives the progress dots so they fill dynamically. function progRank(o) { const s = o.status; if (o.dispatched || ["dispatched","collected","delivered","closed"].includes(s)) return 3; if (["ready_dispatch","ready-collection"].includes(s)) return 2; if (s === "new") return 0; if (["refunded","cancelled"].includes(s)) return 0; const prod = (DTF.PRODUCTION_STAGES || []).concat(DTF.HOLD_STAGES || []); if (prod.includes(s) || o.packed) return 1; return 1; // any other open state = in progress } function ProgressDots({ o }) { const rank = progRank(o); const steps = [ { on: rank >= 0, title:"New / placed" }, { on: rank >= 1, title:"In production" }, { on: rank >= 2, title:"Ready to dispatch" }, { on: rank >= 3, title:"Dispatched" }, ]; const cur = steps[Math.min(rank, steps.length - 1)]; return ( {steps.map((s,i)=> )} ); } const isImageUrl = v => /^https?:\/\//i.test(v) && /\.(png|jpe?g|webp|gif)(\?|$)/i.test(v); const isSvgUrl = v => /^https?:\/\//i.test(v) && /\.svg(\?|$)/i.test(v); const isPdfUrl = v => /^https?:\/\//i.test(v) && /\.pdf(\?|$)/i.test(v); // Downloadable design/document files (e.g. a PDF "Design Preview") — get a // rename-on-download CTA rather than a plain open-in-tab link. const isFileUrl = v => /^https?:\/\//i.test(v) && /\.(pdf|ai|eps|psd|cdr|zip|rar|7z|tiff?)(\?|$)/i.test(v); // Filename to save a design file under: prefix the order number if it isn't // already there, so downloads are grouped by order (e.g. 3964-artwork.pdf). function dlNameFor(orderId, url) { let fname = "file"; try { fname = decodeURIComponent((String(url).split("?")[0].split("/").pop() || "file")); } catch {} const bare = String(orderId || "").replace(/^#/, ""); return (bare && !new RegExp("^#?" + bare + "[-_ ]").test(fname)) ? bare + "-" + fname : fname; } // Ordered physical print size (cm) from a line item's "Width (cm)" / "Height (cm)" // properties (Custom Size DTF uploads). Returns null when not both present. function readPrintCm(it) { const g = nm => { const p = (it.properties || []).find(pp => (pp.name || "").trim().toLowerCase() === nm); return p ? parseFloat(String(p.value).replace(/[^\d.]/g, "")) : NaN; }; const w = g("width (cm)"), h = g("height (cm)"); return (w > 0 && h > 0) ? { w, h } : null; } // A line-item design image (e.g. the "Design Preview" property): shows a thumbnail // and a one-click "Make print-ready" that runs bria bg-removal → Real-ESRGAN 10× // upscale → trim → 300 DPI on the server and attaches it to the order's artwork. function DesignPreviewProp({ orderId, value, showCta = true, printCm = null, showDownload = true, allowDpiFix = false }) { const v = String(value); let fname = "design"; try { fname = decodeURIComponent((v.split("?")[0].split("/").pop() || "design")); } catch {} // Download name: prefix the order number if it isn't already there, so saved // design files are grouped by order (e.g. 3865-…-dtf.png). Served via /api/dl // (a proxy) because a cross-origin `download=` attribute can't rename the file. const _bareOrder = String(orderId || "").replace(/^#/, ""); const dlName = (_bareOrder && !new RegExp("^#?" + _bareOrder + "[-_ ]").test(fname)) ? _bareOrder + "-" + fname : fname; const dlHref = "/api/dl?src=" + encodeURIComponent(v) + "&name=" + encodeURIComponent(dlName) + (orderId ? "&order=" + encodeURIComponent(orderId) : ""); const [busyKind, setBusyKind] = useState(null); // "print" | "upscale" | null const [doneKind, setDoneKind] = useState(null); const [step, setStep] = useState(""); const [err, setErr] = useState(""); // Upscale factor: just enough to reach 300 DPI at the ordered physical size, // plus ~10% headroom (better a bit bigger — the RIP downsizes), capped at 10×. // Falls back to 10 when the print size or the image's real dimensions are unknown. function scaleFor(m) { const DEFAULT = 10; if (!printCm || !(printCm.w > 0) || !(printCm.h > 0) || !m || !m.width || !m.height) return DEFAULT; const DPI = 300, MARGIN = 1.1, ESRGAN_MAX_PX = 900000; // must match server/outreach.js const targetW = (printCm.w / 2.54) * DPI, targetH = (printCm.h / 2.54) * DPI; // Already at/above the target print resolution → no upscale needed. (Without // this, a big image would still get an upscale factor because the pipeline // shrinks it to ~900K first — running that on an already-sharp image only // degrades it.) if (m.width >= targetW && m.height >= targetH) return 1; // The upscaler shrinks inputs over ~900K px to fit the GPU BEFORE scaling, so // the ×N applies to the downscaled size — compute N from that, not the original. const fit = Math.min(1, Math.sqrt(ESRGAN_MAX_PX / (m.width * m.height))); const inW = m.width * fit, inH = m.height * fit; const need = Math.max(targetW / inW, targetH / inH) * MARGIN; return Math.min(DEFAULT, Math.max(1, Math.ceil(need * 10) / 10)); } async function run(kind) { if (busyKind) return; setBusyKind(kind); setErr(""); setDoneKind(null); setStep("starting"); if (kind === "setdpi") { // Resolution fix only — re-stamp to 300 DPI, no upscale/bg/services. try { await DTF.processArtwork(orderId, v, { setdpi: true, dpi: 300, onStep: setStep }); setDoneKind(kind); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name: orderId } })); } catch (e) { setErr(e.message || "Couldn't fix the resolution"); } finally { setBusyKind(null); } return; } if (kind === "trim") { // Trim only — crop transparent margins to the artwork + 300 DPI. No bg/upscale. try { await DTF.processArtwork(orderId, v, { trim: true, dpi: 300, onStep: setStep }); setDoneKind(kind); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name: orderId } })); } catch (e) { setErr(e.message || "Couldn't trim"); } finally { setBusyKind(null); } return; } let m = meta; if (!m && DTF.fetchImageMeta) { try { m = await DTF.fetchImageMeta(v); } catch {} } const scale = scaleFor(m); // kind → which pipeline steps run; skip the upscaler when it's already big enough const opts = { scale, dpi: 300, removeBg: kind !== "upscale", upscale: kind !== "removebg" && scale > 1.05, onStep: setStep }; try { await DTF.processArtwork(orderId, v, opts); setDoneKind(kind); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name: orderId } })); } catch (e) { setErr(e.message || "Processing failed"); } finally { setBusyKind(null); } } const ACTIONS = [ { kind: "print", cls: "btn--primary", icon: "image", label: "Make Print-Ready", title: "Remove background → upscale 10× (Real-ESRGAN) → trim → 300 DPI → attach to artwork" }, { kind: "upscale", cls: "btn--ghost", icon: "spark", label: "Upscale", title: "Upscale 10× (Real-ESRGAN) → trim → 300 DPI → attach — keeps the background" }, { kind: "removebg", cls: "btn--ghost", icon: "scissors", label: "Remove BG", title: "Remove background → trim → 300 DPI → attach — no upscale" }, { kind: "trim", cls: "btn--ghost", icon: "crop", label: "Trim", title: "Crop transparent AND white margins down to the artwork → 300 DPI → attach — no background removal or upscale" }, ]; // Actual pixel dimensions + DPI of the uploaded design (read server-side). const [meta, setMeta] = useState(null); useEffect(() => { let alive = true; if (DTF.fetchImageMeta) DTF.fetchImageMeta(v).then(m => { if (alive) setMeta(m); }); return () => { alive = false; }; }, [v]); const metaLabel = (() => { if (!meta || !meta.width) return null; let s = meta.width + " × " + meta.height + " px"; if (meta.dpi) { const mm = px => Math.round(px / meta.dpi * 25.4); s += " · " + meta.dpi + " DPI · " + mm(meta.width) + " × " + mm(meta.height) + " mm"; } return s; })(); // What the print CTAs will do given the ordered size (credit-saving hint). const planLabel = (() => { if (!printCm || !meta || !meta.width) return null; const s = scaleFor(meta); return s > 1.05 ? `${printCm.w} × ${printCm.h} cm @300 DPI → upscale ${s}×` : `${printCm.w} × ${printCm.h} cm @300 DPI → already high-res, no upscale`; })(); return (
design preview
{fname} {showDownload && Download}
{metaLabel &&
{metaLabel}
} {/* Resolution fix: the "Upload DTF Gang Sheet" product arrives with a missing or 72-DPI tag so the print size reads huge — one click re-stamps to 300 DPI (pixels untouched) and attaches it. Only for that product; no services. */} {allowDpiFix && meta && meta.width && meta.dpi !== 300 && (
{doneKind === "setdpi" && ✓ attached}
)} {showCta && planLabel &&
{planLabel}
} {showCta && <>
{ACTIONS.map(a => ( ))}
{busyKind && ~1 min} {doneKind && saved to Artwork below} {err && {err}}
}
); } function PropValue({ value, orderId, download }) { const v = String(value); const hasExt = /\.[a-z0-9]{2,4}(\?|#|$)/i.test(v); // A downloadable file (e.g. a PDF "Design Preview"), a non-preview image // (e.g. "_Print Ready File"), or a download-flagged link (e.g. the gang-sheet // builder's "_actual_gang_sheet", which 302s to a signed print file): show a // "Download" CTA that saves it renamed via the /api/dl proxy — a cross-origin // download= attribute can't rename the file, so we proxy it. if (isFileUrl(v) || isImageUrl(v) || (download && /^https?:\/\//i.test(v))) { let fname = v; try { fname = decodeURIComponent((v.split("?")[0].split("/").pop() || v)); } catch {} const dlName = dlNameFor(orderId, v); // Extension-less links: don't force a name — let /api/dl use the real // filename from the resolved file, and show a friendly "Open" label. const dlHref = "/api/dl?src=" + encodeURIComponent(v) + (hasExt ? "&name=" + encodeURIComponent(dlName) : "") + (orderId ? "&order=" + encodeURIComponent(orderId) : ""); return ( {hasExt ? fname : "Open"} Download ); } if (/^https?:\/\//i.test(v)) { return {v}; } if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) { return {v}; } return {v}; } // Reusable line-item custom-properties block — the aligned label/value rows shown // under an item on BOTH the admin order view and the partner shop view. Renders // design previews with artwork services (DesignPreviewProp), SVG converters, // downloadable files/images, and plain text/links, all in the .li__props layout. // Pass the normalised line item (needs .name + .properties) and the order id used // to name downloads. On the shop view the props are already redacted server-side // (admin/edit builder links stripped), so partners just see previews + files. function ItemProps({ it, orderId }) { if (!(it && it.properties && it.properties.length)) return null; // Chosen sides (Front/Back/sleeves…) on a customised product — each is its own // artwork image, so give it the full artwork services + download, like a preview. const sideNames = new Set(customisedSides(it).map(s => s.label.trim().toLowerCase())); // When the item already carries a print-ready file, the low-res "Preview" is just // a thumbnail — no point downloading it, so its Download CTA is suppressed and only // the print-ready file keeps one. const hasPrintReady = it.properties.some(p => /actual|gang[\s_-]*sheet|print[\s_-]*ready/i.test(String(p.name || "").replace(/^_+/, ""))); // Only the "Upload DTF Gang Sheet" product gets the 300-DPI resolution fix — those // uploads come in tagged 72 DPI (already full-res, just wrong metadata). const isGangUpload = /upload\b.*gang\s*sheet/i.test(it.name || ""); return (
{it.properties.map((p, j) => { const label = p.name.replace(/^_+/, ""); const val = String(p.value || ""); const isHttp = /^https?:\/\//i.test(val); // Thumbnail preview only on "Preview"/"Design Preview" props — not // "Print Ready File", which shows as a plain download link. const isPreview = /preview/i.test(label); const isSide = sideNames.has(label.trim().toLowerCase()); // The customer's raw upload on the Custom Size DTF product ("Uploaded File") // is a low-res, low-DPI screen image behind an extension-less redirect URL — // downloading it as-is gives a plain, unprintable file. Treat it as a design // image so it gets a thumbnail, a real download, and "Make print-ready" // (upscale → 300 DPI) to produce an actual print file. const isUpload = /uploaded\s*file/i.test(label) && isHttp && !isPdfUrl(val) && !isSvgUrl(val); // The "_Print Ready" value points at the upload app's builder PAGE (returns // HTML), not a file — never offer it as a download; link out to it instead. const isAppBuilder = isHttp && /dripappsserver\.com\/(shopify\/gang|builder)/i.test(val); // The headless storefront sends the customer's uploaded artwork on each // Custom Size DTF line as a "_artwork_url" property (an https S3 image URL). // Treat it exactly like "Design Preview": render the thumbnail + the full // print-ready pipeline. Match the raw name or the underscore-stripped label // (/^_?artwork/) so it works whether or not the "_" prefix survives upstream. const isArtworkUrl = (/^_?artwork/i.test(String(p.name || "").trim()) || /^_?artwork/i.test(label.trim())) && isImageUrl(val); // "Make Print-Ready" against the Design Preview / uploaded design of the // Custom Size DTF product, and against each chosen side's artwork. const cta = isSide || isUpload || isArtworkUrl || (/^design preview$/i.test(label.trim()) && /custom size dtf transfers/i.test(it.name || "")); const asArtwork = isUpload || isArtworkUrl || (isImageUrl(val) && (isPreview || isSide)); // The print-ready output of a gang-sheet builder (e.g. "_actual_gang_sheet") // is a plain URL that redirects to the real file — flag it downloadable. const dlable = !isAppBuilder && /actual|gang[\s_-]*sheet|print[\s_-]*ready/i.test(label); return (
{label} {asArtwork ? : isSvgUrl(val) && isPreview ? : isPdfUrl(val) && isPreview ? : isAppBuilder ? Open print-ready builder ↗ : }
); })}
); } function Tracking({ tracking }) { if (!tracking || (!tracking.number && !tracking.url)) return Not yet tracked; const label = tracking.number || "Track parcel"; const suffix = tracking.company ? " · " + tracking.company : ""; if (tracking.url) { return ( {label}{suffix} ); } return {label}{suffix}; } /* ---- production routing card ---- */ function fmtBytes(n) { n = Number(n) || 0; if (n < 1024) return n + " B"; if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KB"; return (n / 1024 / 1024).toFixed(1) + " MB"; } // Artwork file's pixel dims + DPI + physical print size (mm = px / dpi × 25.4). // DPI + mm are appended only when a DPI is recorded on the file. // Images past the browser's decode limits (e.g. an 8-metre gang sheet at // 6732×94636) won't render in a tab — opening the full file shows a blank page. // For those, "Open" points at a downscaled JPEG preview instead; Download still // serves the full-resolution file. function artOversized(f) { return !!(f && /^image\//.test(f.contentType || "") && f.width && f.height && (f.width > 8000 || f.height > 8000 || f.width * f.height > 40e6)); } function artDims(f) { if (!f || !f.width || !f.height) return null; let s = `${f.width} × ${f.height} px`; if (f.dpi) { const mm = px => Math.round(px / f.dpi * 25.4); s += ` · ${f.dpi} DPI · ${mm(f.width)} × ${mm(f.height)} mm`; } return s; } // Per-order artwork: upload print-ready files when design is done; download from // any workstation for printing. // Artwork services runnable per uploaded file (context menu). Each maps to the // two independent pipeline steps (remove-bg / upscale-at-scale). // Fetch a public, token-signed artwork URL (same links the email composer uses) and // copy it to the clipboard — so the operator can paste it to a customer. Falls back // to a prompt if the clipboard is blocked. `owner` = bare order number or "draft-". async function copyArtworkPublicUrl(owner, fileId) { // Open the preview tab synchronously (still inside the click gesture) so popup // blockers don't eat it, then point it at the link once we have it. let win = null; try { win = window.open("about:blank", "_blank"); } catch {} try { const r = await fetch("/api/artwork/links", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ refs: [{ owner, fileId }] }) }); const url = (((await r.json()) || {}).links || [])[0]?.url || ""; if (!url) throw new Error("no link returned"); try { await navigator.clipboard.writeText(url); } catch { window.prompt("Public artwork URL — copy to share:", url); } // Warm the chat-preview thumbnail so the first WhatsApp/Telegram unfurl is instant // (a big gang sheet can take ~30s to resize the first time). try { fetch(url + "&preview=1").catch(() => {}); } catch {} if (win) { try { win.location = url; } catch {} } else { try { window.open(url, "_blank", "noopener"); } catch {} } return url; } catch (e) { if (win) { try { win.close(); } catch {} } alert("Couldn't get the public link: " + (e.message || e)); return ""; } } const ART_SERVICES = [ { key: "rename", label: "Rename", action: "rename" }, { key: "copylink", label: "Copy public URL (share with customer)", action: "copylink" }, { key: "print", label: "Make print-ready", opts: { removeBg: true, upscale: true, scale: 10 } }, { key: "nobg", label: "Remove background", opts: { removeBg: true, upscale: false } }, // Alternative remover — recraft-ai/recraft-remove-background. Full-res transparent // PNG in one pass; often cleaner edges than bria. Keeps the source resolution. { key: "recraftbg", label: "Remove background (Recraft)", opts: { recraftbg: true } }, // Trim only — crop the fully-transparent margins to the actual artwork + stamp 300 DPI. { key: "trim", label: "Trim to artwork", opts: { trim: true } }, { key: "defringe", label: "Shave edge (remove halo)", adjust: { opt: "erode", min: 1, max: 10, hint: v => `Contracts the edge by ${v}px and removes outside (~${(v / 300 * 25.4).toFixed(2)}mm @300 DPI).` }, opts: { removeBg: false, upscale: false } }, { key: "solid", label: "Remove semi-transparent pixels", adjust: { opt: "harden", min: 1, max: 254, hint: v => `Keeps pixels with alpha ≥ ${v}; lower = keep softer edges.` }, opts: { removeBg: false, upscale: false } }, { key: "outline", label: "Clean die-cut outline", adjust: { opt: "outline", min: 2, max: 120, hint: v => `Uniform white border ${v}px wide (~${(v / 300 * 25.4).toFixed(1)}mm @300 DPI).` }, opts: { removeBg: false, upscale: false } }, // Colour-key removal — no AI: pick any colour from the image and delete every pixel // within `colortol`% of it. Opens a picker with a live preview (see ColorKeyPicker). { key: "colorkey", label: "Remove a colour (pick from image)", action: "pick" }, // Recolour the whole design to ONE flat colour (keeps the alpha silhouette) — pick a // colour with a live preview, then it replaces every opaque pixel with it. { key: "recolor", label: "Recolour to one colour (pick)", action: "recolor" }, // Vectorise (recraft) → recolour the SVG palette → rasterise back to a print-ready PNG. { key: "vectorize", label: "Vectorise & recolour", action: "vectorize" }, // DTF Halftone prep — convert artwork to halftone dot/line pattern for dark garments. { key: "halftone", label: "DTF Halftone prep", action: "halftone" }, // Upscale is one entry with a factor selector (×2 / ×5 / ×10) instead of three // separate menu items — pick the factor, then Apply. Keeps the background. { key: "upscale", label: "Upscale", choices: { opt: "scale", values: [2, 5, 10], hint: v => `Real-ESRGAN ${v}× → trim → 300 DPI. Keeps the background.` }, opts: { removeBg: false, upscale: true } }, // AI re-render at 2K/4K via google/nano-banana-pro (keeps aspect ratio). Best for // flat/opaque designs — it flattens transparency, so it's not for cutouts. { key: "highres", label: "Make high-res (AI)", promptOpt: "highresPrompt", choices: { opt: "highres", values: ["1K", "2K", "4K"], fmt: v => v, hint: v => `Google nano-banana-pro re-render at ${v}, same aspect ratio → 300 DPI. 1K = fewest tokens. Flattens transparency — use on opaque designs.` }, opts: { removeBg: false, upscale: false } }, ]; // --- Vectorise & recolour editor ------------------------------------------- // Colour-space + circle-pack + k-means helpers for the recolour editor. function vrHexToRgb(hex){ const n=String(hex||"").replace("#",""); const s=n.length===3?[...n].map(c=>c+c).join(""):n; return [parseInt(s.slice(0,2),16)||0,parseInt(s.slice(2,4),16)||0,parseInt(s.slice(4,6),16)||0]; } function vrRgbHex(r,g,b){ return "#"+[r,g,b].map(v=>Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,"0")).join(""); } function vrHue(r,g,b){ r/=255;g/=255;b/=255; const mx=Math.max(r,g,b),mn=Math.min(r,g,b),d=mx-mn; let h=0; if(d){ if(mx===r)h=((g-b)/d)%6; else if(mx===g)h=(b-r)/d+2; else h=(r-g)/d+4; h*=60; if(h<0)h+=360; } return {h,sat:d,l:(mx+mn)/2}; } // Greedy spiral circle-pack → organic cluster. items:[{id,r}] → placed:[{id,r,x,y}] + w,h. function vrPack(items){ const sorted=items.slice().sort((a,b)=>b.r-a.r), placed=[], pad=4; for(const it of sorted){ if(!placed.length){ placed.push({...it,x:0,y:0}); continue; } let best=null; for(let ang=0; ang<800; ang+=0.3){ const rad=it.r+ang*1.9, x=Math.cos(ang)*rad, y=Math.sin(ang)*rad; let ok=true; for(const p of placed){ if(Math.hypot(x-p.x,y-p.y) < it.r+p.r+pad){ ok=false; break; } } if(ok){ best={x,y}; break; } } placed.push({...it, x:best?best.x:0, y:best?best.y:placed.length*40}); } let minx=1e9,miny=1e9,maxx=-1e9,maxy=-1e9; for(const p of placed){ minx=Math.min(minx,p.x-p.r); miny=Math.min(miny,p.y-p.r); maxx=Math.max(maxx,p.x+p.r); maxy=Math.max(maxy,p.y+p.r); } return { placed: placed.map(p=>({...p, x:p.x-minx, y:p.y-miny})), w:Math.max(1,maxx-minx), h:Math.max(1,maxy-miny) }; } // Weighted k-means over RGB points → {assign, cents}. Groups colours for the presets. function vrKmeans(pts, w, k, iters){ k=Math.max(1,Math.min(k, pts.length)); iters=iters||14; const lum=p=>0.299*p[0]+0.587*p[1]+0.114*p[2]; const order=pts.map((_,i)=>i).sort((a,b)=>lum(pts[a])-lum(pts[b])); const cents=[]; for(let i=0;i{const x=a[0]-b[0],y=a[1]-b[1],z=a[2]-b[2];return x*x+y*y+z*z;}; for(let t=0;t[0,0,0,0]); for(let i=0;i { const im = imgRef.current; if (im && im.clientWidth) { setRw(im.clientWidth); setRh(im.clientHeight); } }; useEffect(() => { if (imgRef.current && imgRef.current.complete) sync(); window.addEventListener("resize", sync); return () => window.removeEventListener("resize", sync); }, []); // Drag with window-level listeners so a fast drag / leaving the box never drops it. function beginDrag(mode, e, anchor) { e.preventDefault(); e.stopPropagation(); const startX = e.clientX, startY = e.clientY, c = { ...crop }; const iw = () => { const r = imgRef.current.getBoundingClientRect(); return r; }; const onMove = (ev) => { const r = iw(); if (mode === "draw") { const nx = (ev.clientX - r.left) / r.width, ny = (ev.clientY - r.top) / r.height; const x = Math.max(0, Math.min(anchor.ax, nx)), y = Math.max(0, Math.min(anchor.ay, ny)); const x2 = Math.min(1, Math.max(anchor.ax, nx)), y2 = Math.min(1, Math.max(anchor.ay, ny)); setCrop({ x, y, w: Math.max(0.02, x2 - x), h: Math.max(0.02, y2 - y) }); return; } const dx = (ev.clientX - startX) / r.width, dy = (ev.clientY - startY) / r.height; let { x, y, w, h } = c; if (mode === "move") { x = Math.min(1 - w, Math.max(0, c.x + dx)); y = Math.min(1 - h, Math.max(0, c.y + dy)); } else { if (mode.includes("w")) { const nx = Math.min(c.x + c.w - 0.03, Math.max(0, c.x + dx)); w = c.x + c.w - nx; x = nx; } if (mode.includes("e")) { w = Math.min(1 - c.x, Math.max(0.03, c.w + dx)); } if (mode.includes("n")) { const ny = Math.min(c.y + c.h - 0.03, Math.max(0, c.y + dy)); h = c.y + c.h - ny; y = ny; } if (mode.includes("s")) { h = Math.min(1 - c.y, Math.max(0.03, c.h + dy)); } } setCrop({ x, y, w, h }); }; const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); } // Mouse-down on the image (not the frame) starts drawing a fresh selection. function startDraw(e) { if (e.target !== imgRef.current || !rw) return; const r = imgRef.current.getBoundingClientRect(); const ax = (e.clientX - r.left) / r.width, ay = (e.clientY - r.top) / r.height; setCrop({ x: ax, y: ay, w: 0.005, h: 0.005 }); beginDrag("draw", e, { ax, ay }); } const cw = Math.round(crop.w * W), ch = Math.round(crop.h * H), mp = cw * ch / 1e6; const overMax = cw > 4096 || ch > 4096 || mp > 16; const px = { left: crop.x * rw, top: crop.y * rh, width: crop.w * rw, height: crop.h * rh }; const handle = (mode, style) => beginDrag(mode, e)} style={{ position: "absolute", width: 16, height: 16, background: "#fff", border: "1.5px solid var(--mint-ink,#0a7)", borderRadius: 3, cursor: mode + "-resize", ...style }} />; return (
{/* Viewport-based cap so a tall image scales to FIT the canvas (an inline-block wrapper has auto height, so maxHeight:100% wouldn't constrain it). */} {rw > 0 && (
beginDrag("move", e)}> {handle("nw", { left: -9, top: -9 })}{handle("ne", { right: -9, top: -9 })}{handle("sw", { left: -9, bottom: -9 })}{handle("se", { right: -9, bottom: -9 })}
)}

Drag on the image to draw a selection, or drag the frame / its corners to adjust. Full resolution is kept; only selections over recraft's limit (16 MP / 4096 px) are scaled to fit.

Source image
{W} × {H} px · {(W * H / 1e6).toFixed(1)} MP
Selection
{cw} × {ch} px · {mp.toFixed(1)} MP
{overMax &&
Selection exceeds recraft's 16 MP / 4096 px limit and will be scaled to fit.
}
); } // Vectorise a raster artwork to SVG (recraft), then recolour its flat-colour palette in a // zoom/pan editor: colours become usage-sized bubbles grouped by family; click one to // Magic-eraser flood fill: from each seed point (normalised 0..1), clear the // connected run of similar-coloured pixels to transparent on the given 2D context. // One getImageData/putImageData for all seeds. Tolerance is squared-distance in RGB. function vrFloodErase(ctx, W, H, seeds, tol) { if (!seeds || !seeds.length || !W || !H) return; const img = ctx.getImageData(0, 0, W, H), d = img.data; const seen = new Uint8Array(W * H); const t2 = tol * tol * 3; for (const s of seeds) { const sx = Math.round(s.nx * (W - 1)), sy = Math.round(s.ny * (H - 1)); if (sx < 0 || sy < 0 || sx >= W || sy >= H) continue; const p0 = sy * W + sx, i0 = p0 * 4; if (d[i0 + 3] === 0) continue; // clicked empty space const r0 = d[i0], g0 = d[i0 + 1], b0 = d[i0 + 2]; const stack = [p0]; while (stack.length) { const p = stack.pop(); if (seen[p]) continue; seen[p] = 1; const i = p * 4; if (d[i + 3] === 0) continue; const dr = d[i] - r0, dg = d[i + 1] - g0, db = d[i + 2] - b0; if (dr * dr + dg * dg + db * db > t2) continue; d[i + 3] = 0; // erase to transparent const x = p - Math.floor(p / W) * W; if (x > 0) stack.push(p - 1); if (x < W - 1) stack.push(p + 1); if (p >= W) stack.push(p - W); if (p < (H - 1) * W) stack.push(p + W); } } ctx.putImageData(img, 0, 0); } const VR_ERASE_TOL = 48; // highlight it on the canvas and recolour/hide it; drag one onto another to merge; presets // quantise to N colours. Save → /svg-to-png at 300 DPI (trimmed). // recraft SVGs carry a small intrinsic width/height, so drawing them onto a canvas // rasterises at that size and upscales → pixelated edges. Force the SVG to render at // a target width by rewriting its width/height (aspect from the viewBox). function vrSvgAtSize(svg, wPx) { let aspect = 1; const n = ((svg || "").match(/viewBox="[^"]+"/) || [])[0]?.match(/[-\d.]+/g); if (n && n.length === 4 && +n[2] > 0) aspect = (+n[3]) / (+n[2]); const hPx = Math.max(1, Math.round(wPx * aspect)); const sized = String(svg || "").replace(/]*?)>/i, (m, a) => ``); return { sized, dataUrl: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(sized), wPx, hPx, aspect }; } // Render an SVG string to a canvas at a target width (vector → crisp raster). function vrRasterizeSvg(svgStr, wPx) { return new Promise((resolve, reject) => { const { dataUrl, wPx: W, hPx: H } = vrSvgAtSize(svgStr, wPx); const img = new Image(); img.onload = () => { const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.getContext("2d").drawImage(img, 0, 0, W, H); resolve({ cv, W, H }); }; img.onerror = () => reject(new Error("Couldn't render the SVG")); img.src = dataUrl; }); } // Render the recoloured artwork with hidden colours removed. Instead of a per-pixel // (1-bit) knockout — which turns anti-aliased edges jagged — we paint the kept // colours, then ERASE the hidden colours as a smooth vector layer (destination-out), // so counters (holes in 0/6, etc.) stay smooth. `outSvg` already has final colours. async function vrCompositeRecolored(outSvg, keepHexes, hideHexes, wPx) { const paintSvg = (hideHexes || []).reduce((s, h) => s.split(h).join("none"), outSvg); // kept colours only const { cv, W, H } = await vrRasterizeSvg(paintSvg, wPx); if (hideHexes && hideHexes.length) { const eraseSvg = (keepHexes || []).reduce((s, h) => s.split(h).join("none"), outSvg); // hidden colours only const { cv: ec } = await vrRasterizeSvg(eraseSvg, wPx); const ctx = cv.getContext("2d"); ctx.globalCompositeOperation = "destination-out"; ctx.drawImage(ec, 0, 0); ctx.globalCompositeOperation = "source-over"; } return { cv, W, H }; } function VectorizeRecolorModal({ name: _nameProp, owner, file, onCancel, onDone }) { // Accept an order name OR a {type,id} owner (draft) — DTF artwork helpers take either. const name = owner || _nameProp; const [svg, setSvg] = useState(null); const [base, setBase] = useState("design"); const [loading, setLoading] = useState(true); const [err, setErr] = useState(""); const [remap, setRemap] = useState({}); // root token -> "#rrggbb" | "none" const [merged, setMerged] = useState({}); // token -> parent token const autoMergedRef = useRef(false); // auto-merge near-identical colours once, on load const [past, setPast] = useState([]); const [future, setFuture] = useState([]); const [selected, setSelected] = useState(null); const [dragOver, setDragOver] = useState(null); const [usage, setUsage] = useState({}); // original token -> pixel count const [widthMm, setWidthMm] = useState(200); const [widthText, setWidthText] = useState("200"); // raw input string (clamped on blur) const [saving, setSaving] = useState(false); const [step, setStep] = useState(""); const [phase, setPhase] = useState(null); // "crop" (raster, pre-vectorise) | "edit" const [crop, setCrop] = useState({ x: 0, y: 0, w: 1, h: 1 }); // whole artwork by default const [engine, setEngine] = useState("recraft"); // tracer: recraft (crop-aware) or vectorizer.ai (full image, premium) const [zoom, setZoom] = useState(1); const [pan, setPan] = useState({ x: 0, y: 0 }); const [fit, setFit] = useState(1); const [eraseMode, setEraseMode] = useState(false); // magic-eraser: click to flood-erase a colour region const [eraseSeeds, setEraseSeeds] = useState([]); // click points {nx,ny} (0..1) flood-filled to transparent const previewRef = useRef(null); const workRef = useRef(null); const dragRef = useRef(null); const movedRef = useRef(false); const natRef = useRef({ w: 1, h: 1 }); const [natWH, setNatWH] = useState("1x1"); // canvas dims signature → re-fit when they change const lastTag = useRef(null); const isSvgFile = /svg/i.test(file.contentType || "") || /\.svg$/i.test(file.filename || ""); useEffect(() => { let dead = false; (async () => { try { if (isSvgFile) { const res = await fetch(DTF.artworkUrl(name, file.id), { credentials: "include" }); if (!res.ok) throw new Error("Couldn't load the SVG"); const text = await res.text(); if (dead) return; setSvg(text); setEraseSeeds([]); setBase(String(file.filename || "design").replace(/\.svg$/i, "")); setPhase("edit"); } else { setPhase("crop"); // raster: show the crop frame first, then vectorise on confirm } if (file.width) { const mm = Math.round(file.width / (file.dpi || 300) * 25.4); if (mm >= 10 && mm <= 3000) { setWidthMm(mm); setWidthText(String(mm)); } } } catch (e) { if (!dead) setErr(e.message || "Couldn't load the vector"); } finally { if (!dead) setLoading(false); } })(); return () => { dead = true; }; }, [name, file.id]); // Vectorise the chosen crop, then move to the recolour editor. async function doVectorise() { setLoading(true); setErr(""); try { // vectorizer.ai traces the full image (handles transparency itself) — crop is recraft-only. const r = await DTF.vectorize(name, file.id, engine === "vectorizer" ? null : crop, engine); setSvg(r.svg); setEraseSeeds([]); setBase(r.base || "design"); setPhase("edit"); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); } catch (e) { setErr(e.message || "Vectorise failed"); } finally { setLoading(false); } } const palette = useMemo(() => { if (!svg) return []; const set = new Set(); const re = /(?:fill|stroke)\s*[=:]\s*["']?\s*(rgb\(\d+,\d+,\d+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3})/g; let m; while ((m = re.exec(svg))) { if (!/none/i.test(m[1])) set.add(m[1]); } return [...set]; }, [svg]); function toHex(c) { if (c[0] === "#") return c.length === 4 ? "#" + [...c.slice(1)].map(x => x + x).join("") : c; const m = c.match(/rgb\((\d+),(\d+),(\d+)\)/); return m ? "#" + [1, 2, 3].map(i => Math.min(255, +m[i]).toString(16).padStart(2, "0")).join("") : "#000000"; } function rootOf(t) { let x = t, seen = new Set(); while (merged[x] && !seen.has(x)) { seen.add(x); x = merged[x]; } return x; } const roots = palette.filter(t => rootOf(t) === t); const childrenOf = (rt) => palette.filter(t => t !== rt && rootOf(t) === rt); const isTransparent = (rt) => remap[rt] === "none"; const effHex = (rt) => (remap[rt] && remap[rt] !== "none") ? remap[rt] : toHex(rt); const rootUsage = (rt) => palette.reduce((s, c) => rootOf(c) === rt ? s + (usage[c] || 0) : s, 0); const sel = (selected && roots.includes(selected)) ? selected : null; // Commit a change to history (coalesce same-tag edits, e.g. dragging the colour picker). // Snapshots carry eraseSeeds too so undo/redo covers colour edits AND magic-erases. function commit(nr, nm, tag) { if (tag && tag === lastTag.current) { setRemap(nr); setMerged(nm); } else { setPast(p => [...p, { remap, merged, seeds: eraseSeeds }].slice(-100)); setRemap(nr); setMerged(nm); setFuture([]); } lastTag.current = tag || null; } // Magic-erase click: push current state, then add the new seed point. function commitErase(newSeeds) { setPast(p => [...p, { remap, merged, seeds: eraseSeeds }].slice(-100)); setEraseSeeds(newSeeds); setFuture([]); lastTag.current = null; } function undo() { if (!past.length) return; const prev = past[past.length - 1]; setPast(p => p.slice(0, -1)); setFuture(f => [{ remap, merged, seeds: eraseSeeds }, ...f]); setRemap(prev.remap); setMerged(prev.merged); setEraseSeeds(prev.seeds || []); lastTag.current = null; } function redo() { if (!future.length) return; const nx = future[0]; setFuture(f => f.slice(1)); setPast(p => [...p, { remap, merged, seeds: eraseSeeds }]); setRemap(nx.remap); setMerged(nx.merged); setEraseSeeds(nx.seeds || []); lastTag.current = null; } function setColor(rt, hex) { commit({ ...remap, [rt]: hex }, merged, "col:" + rt); } function toggleHide(rt) { const n = { ...remap }; if (n[rt] === "none") delete n[rt]; else n[rt] = "none"; commit(n, merged, null); } function resetColor(rt) { const n = { ...remap }; delete n[rt]; commit(n, merged, null); } function mergeInto(from, to) { if (!from || !to || from === to || rootOf(to) === from) return; commit(remap, { ...merged, [from]: to }, null); setSelected(to); } function unmerge(t) { const n = { ...merged }; delete n[t]; commit(remap, n, null); } function resetAll() { commit({}, {}, null); setSelected(null); } function quantizeTo(n) { const pts = palette.map(c => vrHexToRgb(toHex(c))), w = palette.map(c => Math.max(1, usage[c] || 1)); const { assign, cents } = vrKmeans(pts, w, n); const groups = {}; palette.forEach((c, i) => { (groups[assign[i]] = groups[assign[i]] || []).push(c); }); const nm = {}, nr = {}; for (const k in groups) { const mem = groups[k].slice().sort((a, b) => (usage[b] || 0) - (usage[a] || 0)); const root = mem[0]; nr[root] = vrRgbHex(...cents[k]); for (const c of mem) if (c !== root) nm[c] = root; } commit(nr, nm, null); setSelected(null); } // Merge near-identical colours (recraft often emits several almost-equal shades on // anti-aliased edges) into their most-used neighbour, so the palette starts clean — // like vectorizer.ai's default. `thr` = RGB distance under which two are "the same". function autoMergeClose(thr = 26) { const cols = palette.slice().sort((a, b) => (usage[b] || 0) - (usage[a] || 0)); const keep = [], nm = {}; for (const c of cols) { const rgb = vrHexToRgb(toHex(c)); let best = null, bd = thr; for (const r of keep) { const rr = vrHexToRgb(toHex(r)); const d = Math.hypot(rgb[0] - rr[0], rgb[1] - rr[1], rgb[2] - rr[2]); if (d < bd) { bd = d; best = r; } } if (best) nm[c] = best; else keep.push(c); } return nm; } // Apply the auto-merge once, after the colour usage has been measured. useEffect(() => { if (autoMergedRef.current || !svg || !palette.length || !Object.keys(usage).length) return; autoMergedRef.current = true; const nm = autoMergeClose(); if (Object.keys(nm).length) setMerged(nm); }, [svg, palette.join(","), usage]); const outSvg = useMemo(() => { if (!svg) return ""; let s = svg; for (const c of palette) { const rt = rootOf(c); const val = (remap[rt] && remap[rt] !== "none") ? remap[rt] : toHex(rt); s = s.split(c).join(val); } return s; }, [svg, remap, merged, palette]); const hideHexes = roots.filter(rt => remap[rt] === "none").map(rt => toHex(rt)); const keepHexes = roots.filter(rt => remap[rt] !== "none").map(rt => effHex(rt)); const dataUrl = outSvg ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(outSvg) : null; const origUrl = svg ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg) : null; // Usage (pixel area) per original colour — renders the original vector small and buckets // each pixel to its nearest palette colour. Drives bubble sizes. useEffect(() => { if (!origUrl || !palette.length) return; let dead = false; const img = new Image(); img.onload = () => { if (dead) return; const nw = img.naturalWidth || 300, nh = img.naturalHeight || 300; const W = Math.min(nw, 260), H = Math.max(1, Math.round(nh * W / nw)); const cv = document.createElement("canvas"); cv.width = W; cv.height = H; const ctx = cv.getContext("2d"); ctx.drawImage(img, 0, 0, W, H); try { const px = ctx.getImageData(0, 0, W, H).data, pr = palette.map(c => vrHexToRgb(toHex(c))), cnt = new Array(palette.length).fill(0); for (let i = 0; i < px.length; i += 4) { if (px[i + 3] < 128) continue; let bd = 1e9, bj = -1; for (let j = 0; j < pr.length; j++) { const dr = px[i] - pr[j][0], dg = px[i + 1] - pr[j][1], db = px[i + 2] - pr[j][2]; const d = dr * dr + dg * dg + db * db; if (d < bd) { bd = d; bj = j; } } if (bj >= 0) cnt[bj]++; } const u = {}; palette.forEach((c, j) => u[c] = cnt[j]); if (!dead) setUsage(u); } catch (e) {} }; img.src = origUrl; return () => { dead = true; }; }, [origUrl, palette.join(",")]); // Preview: draw recoloured SVG, knock out hidden colours, and (if a colour is selected) // dim everything else so the selection is highlighted on the canvas. // Re-render the preview at a resolution that tracks the zoom, so zooming in stays // crisp (a fixed raster would pixelate). Bucketed by zoom to avoid re-render churn. const zoomStep = Math.min(4, Math.max(1, Math.ceil(zoom))); useEffect(() => { const cv = previewRef.current; if (!cv || !outSvg) return; let dead = false; const timer = setTimeout(async () => { try { const renderW = Math.min(5000, 1500 * zoomStep); // higher res as you zoom in // Paint kept colours + erase hidden colours as a smooth vector layer — keeps // anti-aliased edges (no 1-bit knockout that made counters jagged). const { cv: comp, W, H } = await vrCompositeRecolored(outSvg, keepHexes, hideHexes, renderW); if (dead) return; natRef.current = { w: W, h: H }; setNatWH(W + "x" + H); cv.width = W; cv.height = H; const ctx = cv.getContext("2d"); ctx.clearRect(0, 0, W, H); ctx.drawImage(comp, 0, 0); // Selection highlight: dim everything not the selected colour. const hi = sel && !isTransparent(sel) ? vrHexToRgb(effHex(sel)) : null; if (hi) { try { const d = ctx.getImageData(0, 0, W, H), px = d.data, thr = 64; for (let i = 0; i < px.length; i += 4) { if (px[i + 3] === 0) continue; const match = Math.max(Math.abs(px[i] - hi[0]), Math.abs(px[i + 1] - hi[1]), Math.abs(px[i + 2] - hi[2])) <= thr; if (!match) px[i + 3] = Math.round(px[i + 3] * 0.12); } ctx.putImageData(d, 0, 0); } catch (e) {} } try { vrFloodErase(ctx, W, H, eraseSeeds, VR_ERASE_TOL); } catch (e) {} } catch (e) {} }, 60); return () => { dead = true; clearTimeout(timer); }; }, [outSvg, keepHexes.join(","), hideHexes.join(","), sel, eraseSeeds, zoomStep]); // Fit-to-window: scale the canvas so the whole artwork fits the working area. // Runs after layout (rAF) and on any panel/window resize — a stale/early read is // why a tall image overflowed. Uses natRef (the current canvas pixel dims). useEffect(() => { const wa = workRef.current; if (!wa) return; let raf = 0; const fitNow = () => { const n = natRef.current; const cw = wa.clientWidth - 24, ch = wa.clientHeight - 24; if (!n || !n.w || !n.h || cw <= 0 || ch <= 0) return; const f = Math.min(cw / n.w, ch / n.h); if (f > 0 && isFinite(f)) setFit(f); }; const kick = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(fitNow); }; const ro = window.ResizeObserver ? new ResizeObserver(kick) : null; if (ro) ro.observe(wa); kick(); const t = setTimeout(kick, 120); // also refit shortly after the modal lays out return () => { if (ro) ro.disconnect(); cancelAnimationFrame(raf); clearTimeout(t); }; }, [outSvg, phase, natWH]); // Non-passive wheel zoom on the working area. useEffect(() => { const wa = workRef.current; if (!wa) return; const onWheel = (e) => { e.preventDefault(); setZoom(z => Math.max(0.2, Math.min(8, z * (e.deltaY < 0 ? 1.12 : 1 / 1.12)))); }; wa.addEventListener("wheel", onWheel, { passive: false }); return () => wa.removeEventListener("wheel", onWheel); }, [loading]); function onPanStart(e) { movedRef.current = false; dragRef.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y }; } function onPanMove(e) { const d = dragRef.current; if (!d) return; if (Math.abs(e.clientX - d.sx) + Math.abs(e.clientY - d.sy) > 3) movedRef.current = true; setPan({ x: d.px + (e.clientX - d.sx), y: d.py + (e.clientY - d.sy) }); } function onPanEnd() { dragRef.current = null; } // Find the palette root colour under a click on the preview canvas, or null for // empty/transparent space. Drag (pan) suppresses the click. function colourAt(e) { if (movedRef.current) return undefined; // was a pan, ignore const cv = previewRef.current; if (!cv || !cv.width) return null; const rect = cv.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / rect.width * cv.width); const y = Math.floor((e.clientY - rect.top) / rect.height * cv.height); if (x < 0 || y < 0 || x >= cv.width || y >= cv.height) return null; try { const p = cv.getContext("2d").getImageData(x, y, 1, 1).data; if (p[3] === 0) return null; // transparent/empty let best = null, bd = Infinity; for (const rt of roots) { if (isTransparent(rt)) continue; const c = vrHexToRgb(effHex(rt)); const dd = (p[0] - c[0]) ** 2 + (p[1] - c[1]) ** 2 + (p[2] - c[2]) ** 2; if (dd < bd) { bd = dd; best = rt; } } return best; } catch (err) { return null; } } // Magic-eraser click: record the click as a normalised seed point. The preview // (and save) flood-fills the connected same-colour region from each seed to // transparent — so clicking a colour clears just that touching region, leaving // the same colour elsewhere and everything beneath untouched. Returns true if // the click landed on a non-empty pixel. function erasePathAt(e) { const cv = previewRef.current; if (!cv || !cv.width) return false; const rect = cv.getBoundingClientRect(); const nx = (e.clientX - rect.left) / rect.width, ny = (e.clientY - rect.top) / rect.height; if (nx < 0 || ny < 0 || nx > 1 || ny > 1) return false; try { const px = Math.min(cv.width - 1, Math.max(0, Math.round(nx * (cv.width - 1)))); const py = Math.min(cv.height - 1, Math.max(0, Math.round(ny * (cv.height - 1)))); const a = cv.getContext("2d").getImageData(px, py, 1, 1).data; if (a[3] === 0) return false; // clicked empty space } catch (err) {} commitErase([...eraseSeeds, { nx, ny }]); return true; } // Find the palette root colour under a click on the preview canvas, or null. function colourAt(e) { const cv = previewRef.current; if (!cv || !cv.width) return null; const rect = cv.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / rect.width * cv.width); const y = Math.floor((e.clientY - rect.top) / rect.height * cv.height); if (x < 0 || y < 0 || x >= cv.width || y >= cv.height) return null; try { const p = cv.getContext("2d").getImageData(x, y, 1, 1).data; if (p[3] === 0) return null; // transparent/empty let best = null, bd = Infinity; for (const rt of roots) { if (isTransparent(rt)) continue; const c = vrHexToRgb(effHex(rt)); const dd = (p[0] - c[0]) ** 2 + (p[1] - c[1]) ** 2 + (p[2] - c[2]) ** 2; if (dd < bd) { bd = dd; best = rt; } } return best; } catch (err) { return null; } } // Click behaviour: in erase mode, remove the exact path clicked. Otherwise select // that colour's bubble (recolour / merge). Clicking empty space deselects. A drag // (pan) suppresses the click. function onWorkClick(e) { if (movedRef.current) return; if (eraseMode) { erasePathAt(e); return; } setSelected(colourAt(e)); } async function save() { if (saving || !outSvg) return; setSaving(true); setErr(""); const wCm = Math.min(300, Math.max(1, (widthMm || 2000) / 10)); try { // Rasterise the recoloured SVG in THIS browser — Chrome renders recraft's outline // paths correctly, where the server's rsvg/resvg silently drop them. The server then // flattens to the palette + trims + stamps DPI on the uploaded PNG. setStep("rendering"); const wPx = Math.round(wCm / 2.54 * 300); const hPx = vrSvgAtSize(outSvg, wPx).hPx; const MAX = 16384; if (wPx > MAX || hPx > MAX) throw new Error("Too large to render in-browser (max ~" + Math.floor(MAX / 300 * 2.54) + " cm/side) — reduce the width"); // Paint kept colours + erase hidden colours as a smooth vector layer (keeps the // anti-aliased edges). Already recoloured + counters cleanly removed here, so we // DON'T ask the server to flatten to a palette (that binarises edges → jagged). const { cv } = await vrCompositeRecolored(outSvg, keepHexes, hideHexes, wPx); const sctx = cv.getContext("2d"); // Magic-eraser: flood-clear each seed's colour region to transparent at save res. try { vrFloodErase(sctx, wPx, hPx, eraseSeeds, VR_ERASE_TOL); } catch (e) {} const blob = await new Promise((res, rej) => cv.toBlob(b => b ? res(b) : rej(new Error("Render failed")), "image/png")); setStep("uploading"); await DTF.attachPng(name, blob, base + "-recoloured-" + wCm + "cm", { trim: true, dpi: 300, onProgress: p => setStep("uploading " + Math.round(p * 100) + "%") }); onDone && onDone(); } catch (e) { setErr(e.message || "Save failed"); setSaving(false); } } // Bubble cluster: roots sized by usage, ordered by family (hue; neutrals last), packed. const bubbles = useMemo(() => { if (!roots.length) return { placed: [], w: 1, h: 1 }; const tot = roots.reduce((s, rt) => s + Math.max(1, rootUsage(rt)), 0) || 1; const ord = roots.slice().sort((a, b) => { const A = vrHue(...vrHexToRgb(effHex(a))), B = vrHue(...vrHexToRgb(effHex(b))); const na = A.sat < 0.12, nb = B.sat < 0.12; if (na !== nb) return na ? 1 : -1; if (na && nb) return A.l - B.l; return A.h - B.h; }); const items = ord.map(rt => ({ id: rt, r: Math.max(15, Math.min(58, 13 + Math.sqrt(Math.max(1, rootUsage(rt)) / tot) * 200)) })); return vrPack(items); }, [roots.join(","), usage, remap, merged]); const bScale = Math.min(300 / bubbles.w, 190 / bubbles.h, 1.5); const presets = []; for (let n = 2; n <= Math.min(palette.length - 1, 24); n++) presets.push(n); const btn = { width: 30, height: 26, borderRadius: 6, border: "1px solid var(--line,#dfe4ea)", background: "#fff", cursor: "pointer", fontSize: 14, lineHeight: 1, display: "inline-flex", alignItems: "center", justifyContent: "center" }; return (
e.stopPropagation()} style={{ width: "96vw", height: "94vh", maxWidth: "none", maxHeight: "none", display: "flex", flexDirection: "column" }}>

{phase === "crop" ? "Vectorise · choose area" : "Vectorise & recolour"}

{phase === "edit" && !loading && !err && {roots.length} colour{roots.length === 1 ? "" : "s"}}
{phase === "edit" && !loading && !err && <> }
{loading ?
{phase === "edit" ? "Vectorising…" : isSvgFile ? "Loading vector…" : "Preparing…"}
: err ?
{err}
: phase === "crop" ? : (
{/* working area */}
{Math.round(fit * zoom * 100)}% · {eraseMode ? "click a colour to erase that area · drag to pan" : "scroll to zoom, drag to pan"}
{/* sidebar */}
{/* bubble cluster — drop a bubble on the empty area to un-merge (split) it */}
e.preventDefault()} onDrop={e => { e.preventDefault(); const t = e.dataTransfer.getData("text/plain"); if (t && merged[t]) unmerge(t); }}>
{bubbles.placed.map(b => { const transp = isTransparent(b.id), on = sel === b.id, D = b.r * 2 * bScale; const kids = childrenOf(b.id); return ( e.dataTransfer.setData("text/plain", b.id)} onDragOver={e => { e.preventDefault(); if (dragOver !== b.id) setDragOver(b.id); }} onDragLeave={() => setDragOver(o => o === b.id ? null : o)} onDrop={e => { e.preventDefault(); e.stopPropagation(); setDragOver(null); mergeInto(e.dataTransfer.getData("text/plain"), b.id); }} onClick={() => setSelected(s => s === b.id ? null : b.id)} onDoubleClick={() => toggleHide(b.id)} title={effHex(b.id) + (transp ? " (hidden)" : "") + " — click to highlight, double-click to hide, drag to merge" + (kids.length ? " · " + kids.length + " merged inside (drag one out to split)" : "")} style={{ position: "absolute", left: (b.x - b.r) * bScale, top: (b.y - b.r) * bScale, width: D, height: D, borderRadius: "50%", cursor: "pointer", background: transp ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50%/8px 8px" : effHex(b.id), boxShadow: on ? "0 0 0 3px var(--mint-ink,#0a7)" : (dragOver === b.id ? "0 0 0 3px #f6c" : "inset 0 -3px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2)"), border: "1px solid rgba(0,0,0,.15)" }}> {kids.map((k, ci) => { const cr = Math.max(6, Math.min(b.r * 0.30 * bScale, D / 2 - 4)); const ring = kids.length > 1 ? Math.max(0, D / 2 - cr - 3) : 0; const ang = (ci / Math.max(1, kids.length)) * 2 * Math.PI - Math.PI / 2; return ( { e.stopPropagation(); e.dataTransfer.setData("text/plain", k); }} onClick={e => { e.stopPropagation(); setSelected(b.id); }} title={"Merged " + toHex(k) + " — drag out to split off, or onto another colour to move it"} style={{ position: "absolute", left: D / 2 + Math.cos(ang) * ring - cr, top: D / 2 + Math.sin(ang) * ring - cr, width: cr * 2, height: cr * 2, borderRadius: "50%", cursor: "grab", background: toHex(k), border: "1.5px solid #fff", boxShadow: "0 1px 2px rgba(0,0,0,.4)" }} /> ); })} ); })}
drag a bubble into the empty space to split it out
{/* selected colour panel or instructions */} {sel ? (
Selected colour highlighted on canvas
setColor(sel, e.target.value)} style={{ width: 34, height: 28, padding: 0, border: "1px solid var(--line,#dfe4ea)", borderRadius: 6, background: "none", cursor: "pointer" }} title="Recolour" /> { const v = e.target.value.trim(); if (/^#?[0-9a-fA-F]{6}$/.test(v)) setColor(sel, v[0] === "#" ? v : "#" + v); }} className="mono" style={{ width: 96, fontSize: 12 }} /> {(remap[sel] || childrenOf(sel).length) ? : null}
{childrenOf(sel).length > 0 && (
merged: {childrenOf(sel).map(k => ( ))}
)}
) : (
Click a bubble to highlight where it's used and recolour or hide it (or double-click to hide). Drag one bubble onto another to merge — merged colours sit inside as small bubbles; drag a small bubble out to split it off. Bubble size = how much of the artwork uses that colour.
)} {/* palette presets */} {presets.length > 0 && (
Palette presets (reduce to N colours)
{presets.map(n => )}
)} {/* width + save note */}
Width { setWidthText(e.target.value); const n = Number(e.target.value); if (e.target.value !== "" && !isNaN(n)) setWidthMm(n); }} onFocus={e => e.target.select()} onBlur={() => { const n = Math.min(3000, Math.max(10, Number(widthText) || 200)); setWidthMm(n); setWidthText(String(n)); }} style={{ width: 78 }} /> mm @300 DPI
Saved as a new PNG in Artwork (trimmed); the original is untouched.
)}
{saving && {step || "saving…"}}
{phase === "crop" && ( )} {phase === "crop" ? : }
); } // Colour / area removal tool. Loads the artwork same-origin into a canvas and offers // three modes, all previewed LIVE over a checkerboard (transparent = removed): // • "everywhere" — global colour key (Chebyshev distance), same as colorkey.py. // • "remove area" — magic-wand flood fill: click connected region(s) to delete only // what you click (e.g. the outer background) without touching same-coloured areas // enclosed inside the artwork. // • "keep area" — inverse wand: click the shape(s) to keep; everything else goes. // The wand modes match wand.py (4-connected, L1 colour distance <= tol from the seed). function ColorKeyPicker({ name: _nameProp, owner, file, onApply, onCancel }) { const name = owner || _nameProp; // order name OR {type,id} owner (draft) const canvasRef = React.useRef(null); const srcRef = React.useRef(null); // { data: Uint8ClampedArray, w, h } const [loaded, setLoaded] = useState(false); const [err, setErr] = useState(""); const [mode, setMode] = useState("all"); // "all" | "remove" | "keep" const [picked, setPicked] = useState(null); // { r, g, b } — "all" mode const [seeds, setSeeds] = useState([]); // [{ x, y, r, g, b }] in source px — wand modes const [tol, setTol] = useState(15); const MAXW = 460, MAXH = 380; const isWand = mode !== "all"; const hex = picked ? "#" + [picked.r, picked.g, picked.b].map(n => n.toString(16).padStart(2, "0")).join("") : ""; // Load the image (same-origin thumb → clean canvas) and cache its pixels once. useEffect(() => { let dead = false; const img = new Image(); img.onload = () => { if (dead) return; const off = document.createElement("canvas"); off.width = img.naturalWidth; off.height = img.naturalHeight; const oc = off.getContext("2d"); oc.drawImage(img, 0, 0); try { const d = oc.getImageData(0, 0, off.width, off.height); srcRef.current = { data: d.data, w: off.width, h: off.height }; setLoaded(true); } catch (e) { setErr("Couldn't read the image pixels (" + (e.message || "canvas blocked") + ")"); } }; img.onerror = () => { if (!dead) setErr("Couldn't load the image"); }; img.src = DTF.artThumbUrl(name, file.id, 800); return () => { dead = true; }; }, [name, file.id]); // Switching mode clears the current selection so the two tools don't get confused. function switchMode(m) { setMode(m); setPicked(null); setSeeds([]); } // Fit the source into the display box, preserving aspect ratio. const src = srcRef.current; const scale = src ? Math.min(MAXW / src.w, MAXH / src.h, 1) : 1; const dispW = src ? Math.max(1, Math.round(src.w * scale)) : MAXW; const dispH = src ? Math.max(1, Math.round(src.h * scale)) : 240; // Contiguous flood fill (matches wand.py): from each seed, select the connected run // of pixels within L1 tolerance of that seed's colour. Returns a Uint8Array mask. function floodUnion(sd, w, h, pts, thr) { const sel = new Uint8Array(w * h); for (const seed of pts) { const sr = seed.r, sg = seed.g, sb = seed.b; const inMask = (x, y) => { const p = (y * w + x) * 4; return (Math.abs(sd[p] - sr) + Math.abs(sd[p + 1] - sg) + Math.abs(sd[p + 2] - sb)) <= thr; }; if (!inMask(seed.x, seed.y)) continue; const stack = [[seed.x, seed.y]]; while (stack.length) { const [x, y] = stack.pop(); const base = y * w; if (sel[base + x] || !inMask(x, y)) continue; let xl = x; while (xl > 0 && !sel[base + xl - 1] && inMask(xl - 1, y)) xl--; let xr = x; while (xr < w - 1 && !sel[base + xr + 1] && inMask(xr + 1, y)) xr++; for (let ix = xl; ix <= xr; ix++) sel[base + ix] = 1; for (const ny of [y - 1, y + 1]) { if (ny < 0 || ny >= h) continue; const nb = ny * w; let run = false; for (let ix = xl; ix <= xr; ix++) { const ok = !sel[nb + ix] && inMask(ix, ny); if (ok && !run) { stack.push([ix, ny]); run = true; } else if (!ok) run = false; } } } } return sel; } // Re-render the preview whenever the selection, mode or tolerance changes. useEffect(() => { const cv = canvasRef.current, s = srcRef.current; if (!cv || !s) return; cv.width = s.w; cv.height = s.h; const ctx = cv.getContext("2d"); // Checkerboard so transparency reads clearly (like the artwork preview links). const sq = Math.max(6, Math.round(Math.min(s.w, s.h) / 28)); for (let y = 0; y < s.h; y += sq) for (let x = 0; x < s.w; x += sq) { ctx.fillStyle = ((x / sq + y / sq) % 2 === 0) ? "#e9edf2" : "#ffffff"; ctx.fillRect(x, y, sq, sq); } const out = ctx.createImageData(s.w, s.h); const sd = s.data, od = out.data; const thr = Math.round(tol / 100 * 255); const sel = isWand && seeds.length ? floodUnion(sd, s.w, s.h, seeds, thr) : null; const p = picked; for (let i = 0, px = 0; i < sd.length; i += 4, px++) { od[i] = sd[i]; od[i + 1] = sd[i + 1]; od[i + 2] = sd[i + 2]; od[i + 3] = sd[i + 3]; if (mode === "all") { if (p) { const cheb = Math.max(Math.abs(sd[i] - p.r), Math.abs(sd[i + 1] - p.g), Math.abs(sd[i + 2] - p.b)); if (cheb <= thr) od[i + 3] = 0; } } else if (sel) { // remove → drop the selected region; keep → drop everything NOT selected. if (mode === "remove" ? sel[px] : !sel[px]) od[i + 3] = 0; } } // Draw the keyed pixels over the checkerboard via a temporary canvas. const tmp = document.createElement("canvas"); tmp.width = s.w; tmp.height = s.h; tmp.getContext("2d").putImageData(out, 0, 0); ctx.drawImage(tmp, 0, 0); // Mark where the user clicked (wand modes) so multi-point selections are visible. if (isWand) for (const seed of seeds) { ctx.beginPath(); ctx.arc(seed.x, seed.y, Math.max(3, sq * 0.5), 0, 2 * Math.PI); ctx.lineWidth = Math.max(1.5, sq * 0.15); ctx.strokeStyle = "#18f4af"; ctx.stroke(); } }, [mode, picked, seeds, tol, loaded]); function clickAt(e) { const s = srcRef.current, cv = canvasRef.current; if (!s || !cv) return; const rect = cv.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / rect.width * s.w); const y = Math.floor((e.clientY - rect.top) / rect.height * s.h); if (x < 0 || y < 0 || x >= s.w || y >= s.h) return; const i = (y * s.w + x) * 4; const col = { r: s.data[i], g: s.data[i + 1], b: s.data[i + 2] }; if (mode === "all") setPicked(col); else setSeeds(prev => [...prev, { x, y, ...col }]); } const ready = mode === "all" ? !!picked : seeds.length > 0; const applyLabel = mode === "all" ? "Remove this colour" : mode === "keep" ? "Keep clicked area" : "Remove clicked area"; function apply() { if (mode === "all") { onApply({ mode: "all", hex, tol }); return; } const s = srcRef.current; if (!s) return; const norm = seeds.map(sd => ({ x: s.w > 1 ? sd.x / (s.w - 1) : 0, y: s.h > 1 ? sd.y / (s.h - 1) : 0 })); onApply({ mode, tol, seeds: norm }); } const hint = mode === "all" ? "Click the background to pick its colour — every pixel near it is removed, anywhere in the image." : mode === "remove" ? "Click a background area to remove only that connected region. Click more spots to remove several. Enclosed same-coloured areas inside the art are kept." : "Click the shape(s) to KEEP — everything else is removed. Click more spots to keep several regions."; return (
e.stopPropagation()} style={{ maxWidth: MAXW + 48 }}>

Remove colour / area

{hint} The preview shows the result (checkerboard = transparent).

{err &&
{err}
}
{!loaded && !err &&
Loading image…
} {mode === "all" ? (
{picked ? hex : "pick a colour"}
) : (
{seeds.length} point{seeds.length === 1 ? "" : "s"} selected {seeds.length > 0 && } {seeds.length > 0 && }
)}
Tolerance setTol(Number(e.target.value))} style={{ flex: 1 }} /> {tol}%
Higher spreads the selection to more nearby shades. Removal is all-or-nothing per pixel (DTF can't print partial opacity) — chain "Shave edge" to tidy a fringe.
); } // Recolour the whole design to ONE flat colour, keeping the alpha silhouette. Live // preview mirrors the server (recolor_logo.py: every opaque pixel → the chosen colour). function RecolorPicker({ name: _nameProp, owner, file, onApply, onCancel }) { const name = owner || _nameProp; // order name OR {type,id} owner (draft) const canvasRef = React.useRef(null); const srcRef = React.useRef(null); const [loaded, setLoaded] = useState(false); const [err, setErr] = useState(""); const [hex, setHex] = useState("#18f4af"); const MAXW = 460, MAXH = 380; useEffect(() => { let dead = false; const img = new Image(); img.onload = () => { if (dead) return; const off = document.createElement("canvas"); off.width = img.naturalWidth; off.height = img.naturalHeight; off.getContext("2d").drawImage(img, 0, 0); try { const d = off.getContext("2d").getImageData(0, 0, off.width, off.height); srcRef.current = { data: d.data, w: off.width, h: off.height }; setLoaded(true); } catch (e) { setErr("Couldn't read the image pixels (" + (e.message || "canvas blocked") + ")"); } }; img.onerror = () => { if (!dead) setErr("Couldn't load the image"); }; img.src = DTF.artThumbUrl(name, file.id, 800); return () => { dead = true; }; }, [name, file.id]); const src = srcRef.current; const scale = src ? Math.min(MAXW / src.w, MAXH / src.h, 1) : 1; const dispW = src ? Math.max(1, Math.round(src.w * scale)) : MAXW; const dispH = src ? Math.max(1, Math.round(src.h * scale)) : 240; const validHex = /^#[0-9a-fA-F]{6}$/.test(hex); useEffect(() => { const cv = canvasRef.current, s = srcRef.current; if (!cv || !s) return; cv.width = s.w; cv.height = s.h; const ctx = cv.getContext("2d"); const sq = Math.max(6, Math.round(Math.min(s.w, s.h) / 28)); for (let y = 0; y < s.h; y += sq) for (let x = 0; x < s.w; x += sq) { ctx.fillStyle = ((x / sq + y / sq) % 2 === 0) ? "#e9edf2" : "#ffffff"; ctx.fillRect(x, y, sq, sq); } const [r, g, b] = vrHexToRgb(validHex ? hex : "#18f4af"); const out = ctx.createImageData(s.w, s.h); const sd = s.data, od = out.data; for (let i = 0; i < sd.length; i += 4) { od[i] = r; od[i + 1] = g; od[i + 2] = b; od[i + 3] = sd[i + 3]; } const tmp = document.createElement("canvas"); tmp.width = s.w; tmp.height = s.h; tmp.getContext("2d").putImageData(out, 0, 0); ctx.drawImage(tmp, 0, 0); }, [hex, loaded]); return (
e.stopPropagation()} style={{ maxWidth: MAXW + 48 }}>

Recolour to one colour

Pick a colour — the whole design is replaced with it, keeping its shape (checkerboard = transparent). Remove the background first if it isn't already cut out.

{err &&
{err}
}
{!loaded && !err &&
Loading image…
}
setHex(e.target.value)} title="Pick a colour" style={{ width: 40, height: 32, border: "1px solid var(--line,#dfe4ea)", borderRadius: 6, background: "none", cursor: "pointer", padding: 0 }} /> { let v = e.target.value.trim(); if (v && v[0] !== "#") v = "#" + v; setHex(v.slice(0, 7)); }} style={{ width: 120, fontSize: 13, fontFamily: "var(--font-mono)" }} /> {!validHex && enter a colour like #18f4af}
); } // Text breakdown of a produced gang sheet (images + exact sizes + qty), mirroring // the public /g/ preview page, with a cm/inches toggle. Shown under the gang-sheet // row in the artwork list so you can see each artwork's size without opening it. function GangSheetInfo({ owner, fileId }) { const [comp, setComp] = useState(undefined); // undefined=loading, null=none, obj=data const [unit, setUnit] = useState("cm"); useEffect(() => { let live = true; DTF.gangComposition(owner, fileId) .then(c => { if (live) setComp(c && c.found ? c : null); }) .catch(() => { if (live) setComp(null); }); return () => { live = false; }; }, [owner.id, owner.type, fileId]); if (!comp) return null; const uLabel = unit === "in" ? "in" : "cm"; const val = (mm) => unit === "in" ? (mm / 25.4).toFixed(1) : (mm / 10).toFixed(1); const dpi = comp.dpi || 300; return (
{comp.totalImages} images · {comp.distinctImages} design{comp.distinctImages === 1 ? "" : "s"}{comp.lengthM != null ? ` · ${comp.lengthM} m` : ""} · {val(comp.sheetWidthMm)} {uLabel} roll · {dpi} DPI e.stopPropagation()}>
    {(comp.images || []).map((im, i) => (
  • {im.name} — {im.qty}pcs, {val(im.wMm)}×{val(im.hMm)} {uLabel}, {dpi}dpi
    • ))}
); } function ArtworkCard({ o, canMark, craft }) { // Craft-aware wording: embroidery shops must never see "print" language. The // underlying flag is still `f.print` (the "make this file" marker) — only the // labels change. const emb = craft === "embroidery"; const markVerb = emb ? "Mark to do" : "Mark to print"; const markedVerb = emb ? "To do ✓" : "To print ✓"; const doBadge = emb ? "TO DO" : "PRINT THIS"; const doWord = emb ? "make" : "print"; const [files, setFiles] = useState(null); // null = loading const [busy, setBusy] = useState(false); const [prog, setProg] = useState(0); const [err, setErr] = useState(""); const [drag, setDrag] = useState(false); const [menuFor, setMenuFor] = useState(null); // file id with an open services menu const [copiedFor, setCopiedFor] = useState(null); // file id showing a "public link copied" tick const menuBtnRef = useRef(null); // the open menu's trigger button (for floating placement) const menuElRef = useRef(null); // the open menu element // Float the services menu as a fixed dropdown at its natural size, shifting up so // it respects the window's bottom edge (only scrolls if taller than the screen). const positionMenu = () => { if (!menuBtnRef.current || !menuElRef.current) return; const btn = menuBtnRef.current.getBoundingClientRect(); const el = menuElRef.current, st = el.style; const vw = window.innerWidth, vh = window.innerHeight, pad = 8, topMin = 64; // topMin clears the fixed top bar st.maxHeight = ""; st.overflowY = ""; st.position = "fixed"; st.right = "auto"; // reset so we measure natural size const w = Math.min(el.offsetWidth || 220, vw - 2 * pad); st.left = Math.max(pad, Math.min(btn.right - w, vw - w - pad)) + "px"; const h = el.offsetHeight; let top = btn.bottom + 4; if (top + h > vh - pad) top = vh - pad - h; // would overflow the bottom → shift the whole menu up if (top < topMin) { top = topMin; st.maxHeight = (vh - topMin - pad) + "px"; st.overflowY = "auto"; } // keep clear of the header + scroll if taller than the screen st.top = top + "px"; st.bottom = "auto"; }; useLayoutEffect(() => { if (menuFor) positionMenu(); }, [menuFor]); const [pickerFor, setPickerFor] = useState(null); // file object with an open colour-key picker const [recolorFor, setRecolorFor] = useState(null); // file object with an open recolour picker const [vecFor, setVecFor] = useState(null); // file object with an open vectorise-recolour modal const [halftoneFor, setHalftoneFor] = useState(null); // file object with an open halftone modal const [htPending, setHtPending] = useState(() => { try { const enc = encodeURIComponent(o.id); return JSON.parse(localStorage.getItem(HT_QUEUE_KEY) || "[]").filter(j => j.pollBase && j.pollBase.includes(enc)); } catch { return []; } }); const [adjVals, setAdjVals] = useState({ erode: 1, harden: 128, outline: 16, scale: 10, colortol: 15, highres: "1K", highresPrompt: "Upscale to high resolution, keep the design identical - do not change anything" }); // per-service slider / selector values const [procById, setProcById] = useState({}); // fileId -> { step } | { error } — per-file so jobs run in parallel const [sel, setSel] = useState(() => new Set()); // selected file ids for gang-sheet const [gsOpen, setGsOpen] = useState(false); const [gsEdit, setGsEdit] = useState(null); // { files, rows } — re-open the builder pre-filled to edit an existing sheet const [libOpen, setLibOpen] = useState(false); // customer artwork library modal const [savingLib, setSavingLib] = useState(false); const [textOpen, setTextOpen] = useState(false); const inputRef = React.useRef(null); const name = o.id; const cust = DTF.getCustomer(o.customerId) || o.customer || {}; const custName = cust.name || [cust.firstName, cust.lastName].filter(Boolean).join(" ") || cust.displayName || cust.email || ""; // Background halftone queue — poll pending jobs every 5 s, refresh artwork when done useEffect(() => { if (!htPending.length) return; let active = true; const poll = async () => { const doneIds = []; for (const job of htPending) { try { const r = await fetch(`${job.pollBase}/process-artwork/${job.jobId}`); if (!r.ok) continue; const j = await r.json(); if (j.status === "done" || j.status === "error") doneIds.push(job.jobId); } catch {} } if (!active || !doneIds.length) return; setHtPending(prev => prev.filter(j => !doneIds.includes(j.jobId))); try { const q = JSON.parse(localStorage.getItem(HT_QUEUE_KEY) || "[]"); localStorage.setItem(HT_QUEUE_KEY, JSON.stringify(q.filter(j => !doneIds.includes(j.jobId)))); } catch {} await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }; poll(); const timer = setInterval(poll, 5000); return () => { active = false; clearInterval(timer); }; }, [htPending.length]); // Which of this order's artworks are already in the customer's library — matched by // filename (that's what "Add to library" stores as the asset name). Drives the badge. const [libNames, setLibNames] = useState(null); // Set | null const loadLibNames = React.useCallback(() => { if (!o.customerId) { setLibNames(null); return; } DTF.customerLibrary(o.customerId).then(d => setLibNames(new Set((d.assets || []).map(a => a.name)))).catch(() => setLibNames(null)); }, [o.customerId]); useEffect(() => { loadLibNames(); }, [loadLibNames]); // In the library if the artwork carries a direct link (added from / published to // the library), or — for legacy files without the link — its name matches a library // asset. Order artwork names are prefixed with the order number, so also try the // de-prefixed name against the library asset names. const inLibrary = (f) => { if (f.libraryAssetId) return true; if (!libNames || !f.filename) return false; if (libNames.has(f.filename)) return true; const num = String(name || "").replace(/^#/, ""); const bare = num && f.filename.startsWith(num + "-") ? f.filename.slice(num.length + 1) : f.filename; return libNames.has(bare); }; async function addSelToLibrary() { if (!o.customerId || !sel.size) return; setSavingLib(true); try { for (const id of sel) await DTF.libFromArtwork(o.customerId, { type: "order", id: name }, id); setSel(new Set()); loadLibNames(); } catch (e) { alert("Couldn't add to library: " + e.message); } finally { setSavingLib(false); } } const toggleSel = (id) => setSel(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const refresh = () => DTF.artworkFor(name, true).then(setFiles); // On mount: show any cached list instantly, then re-fetch FRESH so files added by a // background artwork-service job (while we were on another page) show up on return. useEffect(() => { const cached = DTF.artworkCached(name); if (cached) setFiles(cached); DTF.artworkFor(name, true).then(setFiles).catch(() => {}); }, [name]); // Close on outside click / Escape. On page scroll, REPOSITION (don't close) so the // fixed menu follows its button; scrolling INSIDE the menu is ignored. useEffect(() => { if (!menuFor) return; const close = () => setMenuFor(null); const key = e => { if (e.key === "Escape") setMenuFor(null); }; const onScroll = e => { if (menuElRef.current && menuElRef.current.contains(e.target)) return; positionMenu(); }; window.addEventListener("click", close); window.addEventListener("keydown", key); window.addEventListener("scroll", onScroll, true); window.addEventListener("resize", positionMenu); return () => { window.removeEventListener("click", close); window.removeEventListener("keydown", key); window.removeEventListener("scroll", onScroll, true); window.removeEventListener("resize", positionMenu); }; }, [menuFor]); async function runService(f, opts) { setMenuFor(null); const cur = procById[f.id]; if (cur && !cur.error) return; // this file already has a job running setProcById(m => ({ ...m, [f.id]: { step: "starting" } })); try { await DTF.processArtwork(name, null, { fileId: f.id, ...opts, onStep: s => setProcById(m => ({ ...m, [f.id]: { step: s } })) }); setProcById(m => { const n = { ...m }; delete n[f.id]; return n; }); await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); } catch (e) { setProcById(m => ({ ...m, [f.id]: { error: e.message || "Processing failed" } })); } } // Rasterise an uploaded PDF artwork file to a print-ready PNG (page 1) and attach it. async function convertPdf(f) { const cur = procById[f.id]; if (cur && !cur.error) return; setProcById(m => ({ ...m, [f.id]: { step: "starting" } })); try { await DTF.pdfToPng(name, { fileId: f.id }, s => setProcById(m => ({ ...m, [f.id]: { step: s } }))); setProcById(m => { const n = { ...m }; delete n[f.id]; return n; }); await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); } catch (e) { setProcById(m => ({ ...m, [f.id]: { error: e.message || "Conversion failed" } })); } } // Refresh when a design preview is processed into artwork elsewhere on the page. useEffect(() => { const h = e => { if (!e.detail || e.detail.name === name) refresh(); }; window.addEventListener("dtf:artwork-updated", h); return () => window.removeEventListener("dtf:artwork-updated", h); }, [name]); async function upload(list) { list = [...(list || [])].filter(Boolean); if (!list.length) return; setErr(""); setBusy(true); try { for (const f of list) { setProg(0); await DTF.uploadArtwork(name, f, p => setProg(p)); } await refresh(); } catch (ex) { setErr(ex.message || "Upload failed"); } setBusy(false); setProg(0); } // Re-open the gang-sheet builder pre-filled with an existing sheet's layout. const isGang = (f) => /gang.?sheet/i.test(f.filename || ""); async function editGang(f) { try { const comp = await DTF.gangComposition({ type: "order", id: name }, f.id); if (!comp || !comp.found || !(comp.images || []).length) { alert("Couldn't load this gang sheet's layout to edit it."); return; } const have = new Set((files || []).map(ff => ff.id)); const rows = comp.images.filter(im => have.has(im.id)).map(im => ({ fid: im.id, dim: "w", mm: im.wMm, qty: im.qty })); if (!rows.length) { alert("The source images for this gang sheet aren't on the order anymore, so it can't be edited."); return; } const compFiles = (files || []).filter(ff => rows.some(r => r.fid === ff.id)); setGsEdit({ files: compFiles, rows, replaceId: f.id }); } catch (e) { alert(e.message || "Couldn't open the gang sheet for editing."); } } async function del(id) { setFiles(await DTF.deleteArtwork(name, id)); } // Studio marks the one file the shop should print (radio). Clicking the marked // one again clears it. async function togglePrint(f) { try { setFiles(await DTF.setPrintFile(name, f.id, !f.print)); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); } catch (e) { setErr(e.message || "Couldn't set the print file"); } } return (

Artwork

{files && files.length > 0 && {files.length} file{files.length === 1 ? "" : "s"}}
{emb ? "Design files" : "Print-ready files"} for this order. Upload once design is done — they can be downloaded on the {emb ? "workstation" : "printing workstation"}.{canMark && (files && files.length > 1) ? ` Use "${markVerb}" so the shop knows which file(s) to run — you can mark more than one.` : ""}
{ e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={e => { e.preventDefault(); setDrag(false); upload(e.dataTransfer.files); }} onClick={() => inputRef.current && inputRef.current.click()} style={{ marginBottom: 12 }} > {busy ? Uploading… {Math.round(prog * 100)}% : Drop files or click to upload artwork}
{ const fs = [...e.target.files]; e.target.value = ""; upload(fs); }} /> {(() => { const pfs = (files || []).filter(f => f.print); return pfs.length ? (
{emb ? "Make" : "Print"} {pfs.length > 1 ? "these " + pfs.length + " files" : "this file"}: {pfs.map(pf => ( {pf.filename} ))}
) : null; })()} {(() => { const selectable = (files || []).filter(f => /^image\//.test(f.contentType)); if (selectable.length < 2) return null; const allSel = selectable.every(f => sel.has(f.id)); return ( ); })()} {files === null ?
Loading…
: files.length === 0 ? null :
{files.slice().sort((a, b) => (b.print ? 1 : 0) - (a.print ? 1 : 0)).map(f => { const isImg = /^image\//.test(f.contentType); const isPdf = /pdf/i.test(f.contentType || "") || /\.pdf$/i.test(f.filename || ""); const isSvg = /svg/i.test(f.contentType || "") || /\.svg$/i.test(f.filename || ""); const p = procById[f.id]; const running = p && !p.error; const failed = p && p.error; const openMenu = e => { e.preventDefault(); e.stopPropagation(); if (!running) setMenuFor(m => m === f.id ? null : f.id); }; return (
{isImg && } {isImg ? : }
{f.filename} {f.print && {doBadge}} {artOversized(f) && preview} {inLibrary(f) ? In library : (o.customerId && libNames) ? not in library : null}
{artDims(f) ? artDims(f) + " · " : ""}{fmtBytes(f.size)} · {window.fmtEventTime ? window.fmtEventTime(f.uploadedAt) : ""}
{running &&
{p.step || "working…"} · ~1 min
} {failed &&
{p.error}
}
{copiedFor === f.id && Public link copied ✓} {isImg && (
e.stopPropagation()}> {menuFor === f.id && (
{ART_SERVICES.map(s => s.adjust ? (() => { const val = adjVals[s.adjust.opt]; return (
{s.label}
setAdjVals(m => ({ ...m, [s.adjust.opt]: Number(e.target.value) }))} /> {val}
{s.adjust.hint(val)}
); })() : s.choices ? (() => { const val = adjVals[s.choices.opt]; return (
{s.label}
{s.promptOpt && ( setAdjVals(m => ({ ...m, [s.promptOpt]: e.target.value }))} /> )}
{s.choices.values.map(v => ( ))}
{s.choices.hint(val)}
); })() : s.action === "pick" ? ( ) : s.action === "recolor" ? ( ) : s.action === "vectorize" ? ( ) : s.action === "halftone" ? ( ) : s.action === "rename" ? ( ) : s.action === "copylink" ? ( ) : ( ))}
)}
)} {isGang(f) && } {isPdf && } {isSvg && } {canMark && } Download
{isGang(f) && } {htPending.filter(j => j.filename === f.filename).map(job => (
Halftoning{job.upscale ? " + AI upscale" : ""} of "{job.filename}" in progress — will appear when done
))} ); })}
} {htPending.filter(j => !(files || []).some(f => f.filename === j.filename)).map(job => (
Halftoning{job.upscale ? " + AI upscale" : ""} of "{job.filename}" in progress — will appear when done
))} {files && files.some(f => /^image\//.test(f.contentType) && f.width) && (() => { const gsFiles = files.filter(f => /^image\//.test(f.contentType) && f.width); const allSel = gsFiles.length > 0 && gsFiles.every(f => sel.has(f.id)); return (
{o.customerId && } {sel.size > 0 && !allSel && } tick artworks to place them on a 57 cm roll
); })()} {gsOpen && sel.has(f.id))} onCancel={() => setGsOpen(false)} onDone={async () => { setGsOpen(false); setSel(new Set()); await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }} />} {gsEdit && setGsEdit(null)} onDone={async (newFile) => { const rid = gsEdit && gsEdit.replaceId; setGsEdit(null); try { if (newFile && rid) await DTF.deleteArtwork(name, rid); } catch {} await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }} />} {libOpen && { setLibOpen(false); loadLibNames(); }} onAssigned={(fs) => { if (fs && fs.length) setFiles(fs); refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }} />} {pickerFor && setPickerFor(null)} onApply={(payload) => { const f = pickerFor; setPickerFor(null); if (payload.mode === "all") runService(f, { removeBg: false, upscale: false, colorkey: payload.hex, colortol: payload.tol }); else runService(f, { removeBg: false, upscale: false, wandmode: payload.mode, wandseeds: payload.seeds, colortol: payload.tol }); }} />} {recolorFor && setRecolorFor(null)} onApply={({ hex }) => { const f = recolorFor; setRecolorFor(null); runService(f, { removeBg: false, upscale: false, recolor: hex }); }} />} {vecFor && setVecFor(null)} onDone={async () => { setVecFor(null); await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }} />} {halftoneFor && setHalftoneFor(null)} onQueued={job => { setHalftoneFor(null); setHtPending(prev => [...prev, job]); }} />}
{textOpen && setTextOpen(false)} onDone={async () => { setTextOpen(false); await refresh(); window.dispatchEvent(new CustomEvent("dtf:artwork-updated", { detail: { name } })); }} />} {err &&
{err}
}
); } // ── DTF Halftone Prep modal ────────────────────────────────────────────────── // Converts colour artwork to a halftone dot/line pattern for printing on dark garments. // Interactive 2-axis widget: drag endpoint to rotate (angle), drag length to adjust function HtSliderRow({ label, value, min, max, step, setter, fmtFn, onCommit }) { const fmt = fmtFn || (v => String(v)); const [localVal, setLocalVal] = React.useState(value); const [txt, setTxt] = React.useState(() => fmt(value)); const draggingRef = React.useRef(false); const editRef = React.useRef(false); // Sync from parent (e.g. Reset defaults) only when not mid-drag React.useEffect(() => { if (draggingRef.current) return; setLocalVal(value); if (!editRef.current) setTxt(fmt(value)); }, [value]); const commitText = () => { editRef.current = false; const n = parseFloat(txt); const clamped = isNaN(n) ? value : Math.max(min, Math.min(max, n)); setter(clamped); setLocalVal(clamped); setTxt(fmt(clamped)); onCommit?.(); }; return (
{ e.stopPropagation(); e.preventDefault(); const s = step || 1; const dir = e.deltaY < 0 ? 1 : -1; const newVal = Math.max(min, Math.min(max, +(localVal + dir * s).toFixed(10))); setLocalVal(newVal); setTxt(fmt(newVal)); setter(newVal); onCommit?.(); }}> {label} { draggingRef.current = true; }} onChange={e => { const v = parseFloat(e.target.value); setLocalVal(v); if (!editRef.current) setTxt(fmt(v)); }} onMouseUp={e => { draggingRef.current = false; const v = parseFloat(e.target.value); setter(v); setTxt(fmt(v)); onCommit?.(); }} onTouchEnd={() => { draggingRef.current = false; setter(localVal); setTxt(fmt(localVal)); onCommit?.(); }} style={{ flex: 1, minWidth: 0, accentColor: "#18f4af", height: 4 }} /> { editRef.current = true; setTxt(e.target.value); }} onBlur={commitText} onKeyDown={e => { if (e.key === "Enter") e.currentTarget.blur(); }} style={{ width: 38, fontSize: 11, color: "#18f4af", background: "rgba(24,244,175,0.05)", border: "1px solid #18f4af33", borderRadius: 3, padding: "1px 4px", textAlign: "right", flexShrink: 0, outline: "none" }} />
); } // ── WebGL halftone preview ────────────────────────────────────────────────── const HT_VERT = ` attribute vec2 aPos; varying vec2 vUV; void main() { vUV = vec2(aPos.x * 0.5 + 0.5, 1.0 - (aPos.y * 0.5 + 0.5)); gl_Position = vec4(aPos, 0.0, 1.0); }`; const HT_FRAG = ` precision highp float; varying vec2 vUV; uniform sampler2D uTex; uniform vec2 uSize; uniform float uCellPx; uniform float uAngle; uniform float uBlack; uniform float uMid; uniform float uWhite; uniform float uOutMin; uniform float uOutMax; uniform int uView; uniform int uPattern; uniform vec3 uShirt; uniform int uKoOn; uniform vec3 uKoCol; uniform float uKoTol; uniform float uShadowBoost; uniform int uHalftoneEnabled; uniform float uAlphaThresh; const float PI = 3.14159265; void main() { vec4 src = texture2D(uTex, vUV); if (uView == 3) { gl_FragColor = src; return; } // Threshold semi-transparent pixels to fully opaque or fully transparent. // Semi-transparent pixels print as faint white dots on dark DTF garments. if (uAlphaThresh > 0.0) { src.a = (src.a >= uAlphaThresh) ? 1.0 : 0.0; } // Knockout-only mode: pass through original pixels, apply only color knockout if (uHalftoneEnabled == 0) { float a = (src.a > 0.0) ? 1.0 : 0.0; if (uKoOn == 1) { vec3 d = abs(src.rgb - uKoCol); if (max(max(d.r,d.g),d.b) <= uKoTol) a = 0.0; } if (uView == 2) { gl_FragColor = vec4(a,a,a,1.0); } else if (uView == 1) { gl_FragColor = vec4(mix(uShirt,src.rgb,a),1.0); } else { gl_FragColor = vec4(src.rgb, a); } return; } vec2 px = vUV * uSize; float rad = uAngle * PI / 180.0; float ca = cos(rad), sa = sin(rad); vec2 rot = vec2(ca*px.x - sa*px.y, sa*px.x + ca*px.y); vec2 cellId = floor(rot / uCellPx); vec2 ccr = (cellId + 0.5) * uCellPx; vec2 cpx = vec2(ca*ccr.x + sa*ccr.y, -sa*ccr.x + ca*ccr.y); vec2 cuv = clamp(cpx / uSize, 0.0, 1.0); vec4 cell = texture2D(uTex, cuv); float r = cell.r, g = cell.g, b = cell.b; float cmax = max(max(r,g),b); float bl = uBlack/255.0, wh = uWhite/255.0; float vN = clamp((cmax - bl) / max(wh - bl, 0.001), 0.0, 1.0); vN = pow(max(vN, 0.0), uMid); vN = uOutMin/255.0 + vN*((uOutMax-uOutMin)/255.0); vN = vN * (1.0 - uShadowBoost * (1.0 - vN)); // Dot coverage from V only — alpha gates presence but must not shrink dot size. // Semi-transparent sky pixels need full-brightness-sized dots, not alpha×V-sized. float eff = (cell.a > 0.004) ? vN : 0.0; float inside; if (uPattern == 0) { // Scale 0.75 capped at 0.70×cellPx: circles merge at eff≈0.44, giving dense fill // through mid-tones. Cap stays below the cell diagonal (0.707) so corners stay // uncovered and the pattern reads as round, not square. float dotR = min(sqrt(max(eff, 0.0)) * uCellPx * 0.75, uCellPx * 0.70); inside = (eff > 0.005 && length(rot - ccr) <= dotR) ? 1.0 : 0.0; } else { float hw = (eff >= 0.78) ? uCellPx*0.5 : sqrt(max(eff,0.0))*uCellPx*0.48; inside = (eff > 0.005 && abs(rot.y - ccr.y) <= hw) ? 1.0 : 0.0; } // Dots should be fully opaque — source alpha tones the dot SIZE (via eff) not its opacity. // Semi-transparent sky/shadow pixels otherwise produce nearly-invisible faint dots. float alpha = (src.a > 0.0) ? inside : 0.0; if (uKoOn == 1) { vec3 d = abs(src.rgb - uKoCol); if (max(max(d.r,d.g),d.b) <= uKoTol) alpha = 0.0; } if (uView == 2) { gl_FragColor = vec4(alpha,alpha,alpha,1.0); } else if (uView == 1) { gl_FragColor = vec4(mix(uShirt,src.rgb,alpha),1.0); } else { gl_FragColor = vec4(src.rgb, alpha); } }`; // Pass-2 shader: MinFilter erosion (cleanup) + defringe + view compositing. // Reads the raw halftone RGBA from the FBO written by pass 1. const HT_CLEANUP_FRAG = ` precision highp float; varying vec2 vUV; uniform sampler2D uTex; uniform vec2 uPixel; uniform int uCleanup; uniform int uDefringe; uniform int uView; uniform vec3 uShirt; void main() { // FBO was rendered in GL framebuffer space (y=0 at bottom), but vUV has y=0 // at screen top (flipped by HT_VERT). Correct by inverting Y when sampling FBO. vec2 fuv = vec2(vUV.x, 1.0 - vUV.y); vec4 c = texture2D(uTex, fuv); float alpha = c.a; if (uCleanup >= 1) { float m = alpha; m = min(m, texture2D(uTex, fuv+vec2(-uPixel.x,-uPixel.y)).a); m = min(m, texture2D(uTex, fuv+vec2( 0.0, -uPixel.y)).a); m = min(m, texture2D(uTex, fuv+vec2( uPixel.x,-uPixel.y)).a); m = min(m, texture2D(uTex, fuv+vec2(-uPixel.x, 0.0 )).a); m = min(m, texture2D(uTex, fuv+vec2( uPixel.x, 0.0 )).a); m = min(m, texture2D(uTex, fuv+vec2(-uPixel.x, uPixel.y)).a); m = min(m, texture2D(uTex, fuv+vec2( 0.0, uPixel.y)).a); m = min(m, texture2D(uTex, fuv+vec2( uPixel.x, uPixel.y)).a); alpha = m; } if (uCleanup >= 2) { float m = alpha; vec2 p2 = uPixel * 2.0; m = min(m, texture2D(uTex, fuv+vec2(-p2.x,-p2.y)).a); m = min(m, texture2D(uTex, fuv+vec2( 0.0, -p2.y)).a); m = min(m, texture2D(uTex, fuv+vec2( p2.x,-p2.y)).a); m = min(m, texture2D(uTex, fuv+vec2(-p2.x, 0.0)).a); m = min(m, texture2D(uTex, fuv+vec2( p2.x, 0.0)).a); m = min(m, texture2D(uTex, fuv+vec2(-p2.x, p2.y)).a); m = min(m, texture2D(uTex, fuv+vec2( 0.0, p2.y)).a); m = min(m, texture2D(uTex, fuv+vec2( p2.x, p2.y)).a); alpha = m; } if (uDefringe == 1) { float bl = 0.0751*(texture2D(uTex,fuv+vec2(-uPixel.x,-uPixel.y)).a +texture2D(uTex,fuv+vec2( uPixel.x,-uPixel.y)).a +texture2D(uTex,fuv+vec2(-uPixel.x, uPixel.y)).a +texture2D(uTex,fuv+vec2( uPixel.x, uPixel.y)).a) + 0.1238*(texture2D(uTex,fuv+vec2( 0.0, -uPixel.y)).a +texture2D(uTex,fuv+vec2(-uPixel.x, 0.0 )).a +texture2D(uTex,fuv+vec2( uPixel.x, 0.0 )).a +texture2D(uTex,fuv+vec2( 0.0, uPixel.y)).a) + 0.2042*alpha; alpha = (bl > (180.0/255.0)) ? min(alpha*1.05,1.0) : alpha*0.72; } if (uView == 2) { gl_FragColor = vec4(alpha,alpha,alpha,1.0); } else if (uView == 1) { gl_FragColor = vec4(mix(uShirt,c.rgb,alpha),1.0); } else { gl_FragColor = vec4(c.rgb, alpha); } }`; function parseHexColor(hex) { const h = (hex||'#000000').replace('#',''); const f = h.length===3 ? h.split('').map(c=>c+c).join('') : h.padEnd(6,'0'); return [parseInt(f.slice(0,2),16)||0, parseInt(f.slice(2,4),16)||0, parseInt(f.slice(4,6),16)||0]; } function makeHalftoneGL(canvas, imgSrc, origW, origH) { const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false }); if (!gl) return null; const mkS = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { console.error('[htGL]', gl.getShaderInfoLog(s)); return null; } return s; }; // Pass 1: halftone shader const vs1 = mkS(gl.VERTEX_SHADER, HT_VERT); const fs1 = mkS(gl.FRAGMENT_SHADER, HT_FRAG); if (!vs1 || !fs1) return null; const prog1 = gl.createProgram(); gl.bindAttribLocation(prog1, 0, 'aPos'); gl.attachShader(prog1, vs1); gl.attachShader(prog1, fs1); gl.linkProgram(prog1); if (!gl.getProgramParameter(prog1, gl.LINK_STATUS)) { console.error('[htGL p1]', gl.getProgramInfoLog(prog1)); return null; } // Pass 2: cleanup/defringe + view composite shader const vs2 = mkS(gl.VERTEX_SHADER, HT_VERT); const fs2 = mkS(gl.FRAGMENT_SHADER, HT_CLEANUP_FRAG); if (!vs2 || !fs2) return null; const prog2 = gl.createProgram(); gl.bindAttribLocation(prog2, 0, 'aPos'); gl.attachShader(prog2, vs2); gl.attachShader(prog2, fs2); gl.linkProgram(prog2); if (!gl.getProgramParameter(prog2, gl.LINK_STATUS)) { console.error('[htGL p2]', gl.getProgramInfoLog(prog2)); return null; } // Shared vertex buffer at attrib 0 (both programs bound to 0 above) const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // Source image texture (tex unit 0) const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgSrc); // FBO texture for pass-1 output const fboTex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, fboTex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fboTex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Prog1 uniforms gl.useProgram(prog1); const U1 = Object.fromEntries( ['uTex','uSize','uCellPx','uAngle','uBlack','uMid','uWhite','uOutMin','uOutMax', 'uView','uPattern','uShirt','uKoOn','uKoCol','uKoTol','uShadowBoost','uHalftoneEnabled','uAlphaThresh'] .map(n => [n, gl.getUniformLocation(prog1, n)]) ); gl.uniform1i(U1.uTex, 0); // Prog2 uniforms gl.useProgram(prog2); const U2 = Object.fromEntries( ['uTex','uPixel','uCleanup','uDefringe','uView','uShirt'] .map(n => [n, gl.getUniformLocation(prog2, n)]) ); gl.uniform1i(U2.uTex, 0); const setP1Uniforms = (p, viewIdx) => { const cellPx = (300.0 / p.frequency) * (canvas.width / origW); gl.uniform2f(U1.uSize, canvas.width, canvas.height); gl.uniform1f(U1.uCellPx, Math.max(2, cellPx)); gl.uniform1f(U1.uAngle, p.angle); gl.uniform1f(U1.uBlack, p.levelsBlack); gl.uniform1f(U1.uMid, p.levelsMid); gl.uniform1f(U1.uWhite, p.levelsWhite); gl.uniform1f(U1.uOutMin, p.outputMin); gl.uniform1f(U1.uOutMax, p.outputMax); gl.uniform1i(U1.uView, viewIdx); gl.uniform1i(U1.uPattern, p.pattern === 'line' ? 1 : 0); const sc = parseHexColor(p.shirtColor); gl.uniform3f(U1.uShirt, sc[0]/255, sc[1]/255, sc[2]/255); gl.uniform1i(U1.uKoOn, p.knockoutEnabled ? 1 : 0); const kc = parseHexColor(p.knockoutColor); gl.uniform3f(U1.uKoCol, kc[0]/255, kc[1]/255, kc[2]/255); gl.uniform1f(U1.uKoTol, p.knockoutTol / 100.0); gl.uniform1f(U1.uShadowBoost, (p.shadowBoost || 0) / 100.0); gl.uniform1i(U1.uHalftoneEnabled, p.halftoneEnabled !== false ? 1 : 0); gl.uniform1f(U1.uAlphaThresh, p.alphaThreshEnabled ? (p.alphaThreshVal || 50) / 100.0 : 0.0); return sc; }; return { origW, origH, render(p) { const cleanupN = p.cleanup === 'high' ? 2 : p.cleanup === 'standard' ? 1 : 0; const needsPass2 = (cleanupN > 0 || p.defringe) && p.view !== 'original'; const viewIdx = ['alpha','shirt','mask','original'].indexOf(p.view); gl.viewport(0, 0, canvas.width, canvas.height); if (needsPass2) { // Pass 1 → FBO with raw alpha (no view compositing) gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(prog1); gl.bindTexture(gl.TEXTURE_2D, tex); const sc = setP1Uniforms(p, 0); // view=alpha (raw) gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // Pass 2 → canvas: cleanup + defringe + view composite gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(prog2); gl.bindTexture(gl.TEXTURE_2D, fboTex); gl.uniform2f(U2.uPixel, 1/canvas.width, 1/canvas.height); gl.uniform1i(U2.uCleanup, cleanupN); gl.uniform1i(U2.uDefringe, p.defringe ? 1 : 0); gl.uniform1i(U2.uView, viewIdx); gl.uniform3f(U2.uShirt, sc[0]/255, sc[1]/255, sc[2]/255); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } else { // Single pass directly to canvas gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(prog1); gl.bindTexture(gl.TEXTURE_2D, tex); setP1Uniforms(p, viewIdx); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } }, destroy() { gl.deleteTexture(tex); gl.deleteTexture(fboTex); gl.deleteFramebuffer(fbo); gl.deleteBuffer(buf); gl.deleteProgram(prog1); gl.deleteProgram(prog2); } }; } // ── Apply progress panel ──────────────────────────────────────────────────── const HT_APPLY_STEPS = [ { key: "downloading", label: "Downloading", pct: 18 }, { key: "applying halftone", label: "Applying halftone", pct: 58 }, { key: "trimming + 300 DPI", label: "Trimming + DPI", pct: 88 }, ]; const HT_APPLY_STEPS_UPSCALE = [ { key: "upscaling", label: "AI upscaling", pct: 38 }, { key: "applying halftone", label: "Applying halftone", pct: 72 }, { key: "trimming + 300 DPI", label: "Trimming + DPI", pct: 92 }, ]; const HT_TOTAL_EST_S = 40; const HT_TOTAL_EST_UPSCALE_S = 120; function HtApplyProgress({ step, elapsed, steps, totalEst }) { const _steps = steps || HT_APPLY_STEPS; const _total = totalEst || HT_TOTAL_EST_S; const si = _steps.findIndex(s => s.key === step); const pct = si >= 0 ? _steps[si].pct : 8; const lbl = si >= 0 ? _steps[si].label : "Queuing…"; const etaSec = elapsed < _total ? Math.max(0, _total - elapsed) : null; return (
{_steps.map((s, i) => { const done = si > i, active = si === i; return ( {i > 0 &&
}
); })}
{lbl} {elapsed}s{etaSec !== null ? ` · ~${etaSec}s left` : " · finalising…"}
); } // Phase 1 asks for output size (cm), Phase 2 is the full halftone editor. // Settings persist in localStorage; axis widget overlays the preview and controls angle+frequency. const HT_QUEUE_KEY = "dtf-halftone-queue"; function HalftonePrepModal({ name, file, onCancel, onQueued }) { const isDraft = /^gid:\/\/shopify\/DraftOrder\//.test(name) || (typeof name === "string" && name.startsWith("D-")); const previewBase = isDraft ? `/api/draft-orders/${encodeURIComponent(name)}` : `/api/orders/${encodeURIComponent(name)}`; const isMac = /mac/i.test(typeof navigator !== "undefined" ? (navigator.platform || navigator.userAgent || "") : ""); const modKey = isMac ? "⌘" : "Ctrl"; // ── Persist settings via localStorage ────────────────────────────────────── const PREF_KEY = "dtf-halftone-prefs"; const prefs = useMemo(() => { try { return JSON.parse(localStorage.getItem(PREF_KEY) || "{}"); } catch { return {}; } }, []); // ── Settings state (loaded from prefs on mount) ───────────────────────────── const [pattern, setPattern] = useState(prefs.pattern || "round"); const [frequency, setFrequency] = useState(prefs.frequency ?? 30); const [angle, setAngle] = useState(prefs.angle ?? 45); // Black/White stored as 0-255 (matching Photoshop DTPrep convention). // Old stored values were 0-100 (%); migrate by multiplying by 2.55. const _b0 = prefs.levelsBlack !== undefined ? Number(prefs.levelsBlack) : undefined; const _w0 = prefs.levelsWhite !== undefined ? Number(prefs.levelsWhite) : undefined; const [levelsBlack, setLevelsBlack] = useState(_b0 !== undefined ? (_b0 <= 100 ? Math.round(_b0 * 2.55) : _b0) : 7); const [levelsMid, setLevelsMid] = useState(prefs.levelsMid ?? 1.0); const [levelsWhite, setLevelsWhite] = useState(_w0 !== undefined ? (_w0 <= 100 ? Math.round(_w0 * 2.55) : _w0) : 100); const [outputMin, setOutputMin] = useState(prefs.outputMin ?? 0); const [outputMax, setOutputMax] = useState(prefs.outputMax ?? 255); const [shadowBoost, setShadowBoost] = useState(prefs.shadowBoost ?? 0); const [koEnabled, setKoEnabled] = useState(prefs.koEnabled !== undefined ? prefs.koEnabled : true); const [koColor, setKoColor] = useState(prefs.koColor || "#000000"); const [koTol, setKoTol] = useState(prefs.koTol ?? 15); const [shirtColor, setShirtColor] = useState(prefs.shirtColor || "#000000"); const [cleanup, setCleanup] = useState(prefs.cleanup || "none"); const [defringe, setDefringe] = useState(prefs.defringe ?? false); const [applyHalftone, setApplyHalftone] = useState(prefs.applyHalftone !== false); const [alphaThreshEnabled, setAlphaThreshEnabled] = useState(prefs.alphaThreshEnabled ?? false); const [alphaThreshVal, setAlphaThreshVal] = useState(prefs.alphaThreshVal ?? 50); // Non-persisted const [view, setView] = useState("alpha"); const [compareMode, setCompareMode] = useState(false); const [showEditHt, setShowEditHt] = useState(false); const [showAxis, setShowAxis] = useState(true); const [phase, setPhase] = useState("size"); // Size picker: linked W×H with proportional lock const _initRatio = (file.width && file.height) ? file.width / file.height : null; // Default to the image's natural print size at 300 DPI const _origWcm = file.width ? +(file.width / 300 * 2.54).toFixed(1) : 30; const _origHcm = file.height ? +(file.height / 300 * 2.54).toFixed(1) : 30; const [linked, setLinked] = useState(true); const [ratio, setRatio] = useState(_initRatio); const [targetWidthCm, setTargetWidthCm] = useState(_origWcm); const [targetHeightCm, setTargetHeightCm] = useState(_origHcm); const [wInput, setWInput] = useState(String(_origWcm)); const [hInput, setHInput] = useState(String(_origHcm)); // Fetch actual pixel dimensions from image header to correct stored metadata (which may be wrong/square). // Runs once when the modal mounts; updates ratio + default size if different from stored values. useEffect(() => { let cancelled = false; fetch(`${previewBase}/halftone-source?fileId=${encodeURIComponent(file.id)}`, { method: "HEAD" }) .then(r => { if (cancelled) return; const w = parseInt(r.headers.get("X-Image-Width") || "0", 10); const h = parseInt(r.headers.get("X-Image-Height") || "0", 10); if (w > 0 && h > 0 && (w !== file.width || h !== file.height)) { const newRatio = w / h; const newWcm = +(w / 300 * 2.54).toFixed(1); const newHcm = +(h / 300 * 2.54).toFixed(1); setRatio(newRatio); setTargetWidthCm(newWcm); setTargetHeightCm(newHcm); setWInput(String(newWcm)); setHInput(String(newHcm)); } }) .catch(() => {}); return () => { cancelled = true; }; }, []); const [zoom, setZoom] = useState(1); const [pan, setPan] = useState({ x: 0, y: 0 }); const [spaceDown, setSpaceDown] = useState(false); const spaceRef = useRef(false); const panDragRef = useRef(null); // ── Axis: controls frequency (length) + angle (direction) ────────────────── // axisLen 30→110 maps to frequency 60→15 lpi (longer arrow = coarser dots) const freqToLen = (f) => 30 + (1 - (Math.max(15, Math.min(60, f)) - 15) / 45) * 80; const lenToFreq = (l) => Math.round(60 - (Math.max(30, Math.min(110, l)) - 30) / 80 * 45); const [axisLen, setAxisLen] = useState(() => Math.round(freqToLen(prefs.frequency ?? 30))); const [canvasCursor, setCanvasCursor] = useState("crosshair"); const canvasRef = useRef(null); const dragRef = useRef(null); // ── WebGL preview state ───────────────────────────────────────────────────── const glRef = useRef(null); const glCanvasRef = useRef(null); const previewAreaRef = useRef(null); const [glLoading, setGlLoading] = useState(false); const [glErr, setGlErr] = useState(null); const [showHotkeys, setShowHotkeys] = useState(false); const [applying, setApplying] = useState(false); const [applyErr, setApplyErr] = useState(null); const [applyStep, setApplyStep] = useState(null); const [applyElapsed, setApplyElapsed] = useState(0); const [applyWithUpscale, setApplyWithUpscale] = useState(false); const applyTimerRef = useRef(null); // ── Save prefs whenever settings change ──────────────────────────────────── useEffect(() => { try { localStorage.setItem(PREF_KEY, JSON.stringify({ pattern, frequency, angle, levelsBlack, levelsMid, levelsWhite, outputMin, outputMax, shadowBoost, koEnabled, koColor, koTol, shirtColor, cleanup, defringe, applyHalftone, alphaThreshEnabled, alphaThreshVal })); } catch {} }, [pattern, frequency, angle, levelsBlack, levelsMid, levelsWhite, outputMin, outputMax, shadowBoost, koEnabled, koColor, koTol, shirtColor, cleanup, defringe, applyHalftone, alphaThreshEnabled, alphaThreshVal]); const halftoneParams = useCallback(() => ({ pattern, frequency: Number(frequency), angle: Number(angle), levelsBlack: Number(levelsBlack), levelsMid: Number(levelsMid), levelsWhite: Number(levelsWhite), outputMin: Number(outputMin), outputMax: Number(outputMax), shadowBoost: Number(shadowBoost), knockoutEnabled: koEnabled, knockoutColor: koColor, knockoutTol: Number(koTol), halftoneEnabled: applyHalftone, alphaThreshEnabled, alphaThreshVal: Number(alphaThreshVal), shirtColor, cleanup, defringe, view, targetWidthCm: Number(targetWidthCm), targetHeightCm: Number(targetHeightCm) || 0, }), [pattern, frequency, angle, levelsBlack, levelsMid, levelsWhite, outputMin, outputMax, shadowBoost, koEnabled, koColor, koTol, shirtColor, cleanup, defringe, applyHalftone, alphaThreshEnabled, alphaThreshVal, view, targetWidthCm, targetHeightCm]); const renderGL = useCallback(() => { if (!glRef.current) return; // In compare mode the canvas shows the shirt view; the original is a separate const p = halftoneParams(); glRef.current.render(compareMode ? { ...p, view: 'shirt' } : p); }, [halftoneParams, compareMode]); // Load source image once on edit phase enter; destroy GL context on exit useEffect(() => { if (phase !== "edit") return; let cancelled = false; setGlLoading(true); setGlErr(null); (async () => { try { const r = await fetch(`${previewBase}/halftone-source?fileId=${encodeURIComponent(file.id)}`); if (!r.ok) throw new Error("HTTP " + r.status); const blob = await r.blob(); if (cancelled) return; const bmp = await createImageBitmap(blob, { premultiplyAlpha: 'none', colorSpaceConversion: 'none' }); if (cancelled) return; const MAX = 4096; const scale = Math.min(1, MAX / Math.max(bmp.width, bmp.height)); const cW = Math.round(bmp.width * scale), cH = Math.round(bmp.height * scale); let imgSrc = bmp; if (scale < 1) { const tmp = document.createElement("canvas"); tmp.width = cW; tmp.height = cH; tmp.getContext("2d").drawImage(bmp, 0, 0, cW, cH); imgSrc = tmp; } const cvs = glCanvasRef.current; if (!cvs || cancelled) return; cvs.width = cW; cvs.height = cH; if (glRef.current) glRef.current.destroy(); glRef.current = makeHalftoneGL(cvs, imgSrc, bmp.width, bmp.height); if (!glRef.current) throw new Error("WebGL not supported in this browser"); setGlLoading(false); if (!cancelled) glRef.current.render(halftoneParams()); } catch (e) { if (!cancelled) { setGlErr(e.message); setGlLoading(false); } } })(); return () => { cancelled = true; if (glRef.current) { glRef.current.destroy(); glRef.current = null; } }; }, [phase]); // Re-render on every param change (instant — just updates uniforms + drawArrays) useEffect(() => { if (phase !== "edit") return; renderGL(); }, [renderGL, phase]); // ── Keyboard shortcuts (Space pan, Cmd+0 fit, Cmd+1 1:1) ─────────────────── useEffect(() => { if (phase !== "edit") return; const onDown = (e) => { const meta = e.metaKey || e.ctrlKey; // Cmd+0 — fit to area if (meta && e.key === "0") { e.preventDefault(); setZoom(1); setPan({ x: 0, y: 0 }); return; } // Cmd+1 — 1:1 pixels (actual canvas resolution) if (meta && e.key === "1") { e.preventDefault(); const cvs = glCanvasRef.current; const area = previewAreaRef.current; if (cvs && area) { const fitScale = Math.min(area.clientWidth / cvs.width, area.clientHeight / cvs.height, 1); setZoom(Math.min(8, +(1 / fitScale).toFixed(2))); setPan({ x: 0, y: 0 }); } return; } if (e.code !== "Space") return; if (["INPUT","TEXTAREA","SELECT"].includes(e.target.tagName)) return; e.preventDefault(); spaceRef.current = true; setSpaceDown(true); }; const onUp = (e) => { if (e.code !== "Space") return; spaceRef.current = false; setSpaceDown(false); panDragRef.current = null; }; window.addEventListener("keydown", onDown); window.addEventListener("keyup", onUp); return () => { window.removeEventListener("keydown", onDown); window.removeEventListener("keyup", onUp); }; }, [phase]); const onPreviewAreaMouseDown = useCallback((e) => { if (!spaceRef.current) return; e.preventDefault(); e.stopPropagation(); panDragRef.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y }; }, [pan]); const onPreviewAreaMouseMove = useCallback((e) => { if (!panDragRef.current) return; setPan({ x: panDragRef.current.px + (e.clientX - panDragRef.current.sx), y: panDragRef.current.py + (e.clientY - panDragRef.current.sy) }); }, []); const onPreviewAreaMouseUp = useCallback(() => { panDragRef.current = null; }, []); // ── Canvas draw: positive arrows only (angle=direction, len=frequency) ────── useEffect(() => { const canvas = canvasRef.current; if (!canvas || phase !== "edit") return; const ctx = canvas.getContext("2d"); const W = 180, H = 180, cx = W / 2, cy = H / 2; ctx.clearRect(0, 0, W, H); // Translucent circle background ctx.fillStyle = "rgba(10,10,25,0.58)"; ctx.beginPath(); ctx.arc(cx, cy, cx - 1, 0, Math.PI * 2); ctx.fill(); const rad = (angle * Math.PI) / 180; const perp = rad + Math.PI / 2; const len = axisLen * 0.72; // Subtle dashed rotation ring ctx.globalAlpha = 0.18; ctx.strokeStyle = "#18f4af"; ctx.lineWidth = 1.5; ctx.setLineDash([4, 6]); ctx.beginPath(); ctx.arc(cx, cy, len + 18, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]); ctx.globalAlpha = 1; const drawArrow = (r, alpha) => { const x2 = cx + Math.cos(r) * len, y2 = cy + Math.sin(r) * len; ctx.globalAlpha = alpha; // Shaft ctx.strokeStyle = "#18f4af"; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(x2, y2); ctx.stroke(); // Arrowhead const hl = 11, ha = 0.55; ctx.beginPath(); ctx.moveTo(x2, y2); ctx.lineTo(x2 - hl * Math.cos(r - ha), y2 - hl * Math.sin(r - ha)); ctx.lineTo(x2 - hl * Math.cos(r + ha), y2 - hl * Math.sin(r + ha)); ctx.closePath(); ctx.fillStyle = "#18f4af"; ctx.fill(); // Draggable tip circle ctx.beginPath(); ctx.arc(x2, y2, 8, 0, Math.PI * 2); ctx.fillStyle = "#18f4af33"; ctx.fill(); ctx.strokeStyle = "#18f4af"; ctx.lineWidth = 1.5; ctx.stroke(); ctx.globalAlpha = 1; }; drawArrow(rad, 1.0); drawArrow(perp, 0.45); // Centre rotation handle ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(cx, cy, 5, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#18f4af44"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(cx, cy, 10, 0, Math.PI * 2); ctx.stroke(); // Labels ctx.globalAlpha = 0.85; ctx.fillStyle = "#18f4af"; ctx.font = "bold 11px monospace"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; const lx = cx + Math.cos(rad) * (len + 22), ly = cy + Math.sin(rad) * (len + 22); const clampedLx = Math.max(22, Math.min(W - 22, lx)), clampedLy = Math.max(10, Math.min(H - 10, ly)); ctx.fillText(frequency + " lpi", clampedLx, clampedLy); ctx.globalAlpha = 0.5; ctx.font = "10px monospace"; ctx.fillText(angle + "°", cx + Math.cos(rad) * (len * 0.45), cy + Math.sin(rad) * (len * 0.45) - 8); ctx.globalAlpha = 1; }, [angle, axisLen, frequency, phase]); const onCanvasMouseDown = useCallback((e) => { e.stopPropagation(); const rect = canvasRef.current.getBoundingClientRect(); const mx = e.clientX - rect.left - 90, my = e.clientY - rect.top - 90; const dist = Math.sqrt(mx * mx + my * my); if (dist > 87) return; // Detect if click is near either arrow tip (tip drag = angle + freq, else rotate only) const len = axisLen * 0.72; const rad = (angle * Math.PI) / 180; const perp = rad + Math.PI / 2; const nearTip = [rad, perp].some(r => { const dx = mx - Math.cos(r) * len, dy = my - Math.sin(r) * len; return Math.sqrt(dx * dx + dy * dy) < 20; }); dragRef.current = nearTip ? "tip" : "rotate"; }, [angle, axisLen]); const onCanvasMouseMove = useCallback((e) => { const rect = canvasRef.current.getBoundingClientRect(); const mx = e.clientX - rect.left - 90, my = e.clientY - rect.top - 90; const dist = Math.sqrt(mx * mx + my * my); if (!dragRef.current) { // Hover cursor feedback if (dist > 87) { setCanvasCursor("default"); return; } const len = axisLen * 0.72; const rad = (angle * Math.PI) / 180; const perp = rad + Math.PI / 2; const nearTip = [rad, perp].some(r => { const dx = mx - Math.cos(r) * len, dy = my - Math.sin(r) * len; return Math.sqrt(dx * dx + dy * dy) < 20; }); setCanvasCursor(nearTip ? "nesw-resize" : "grab"); return; } if (dist < 5) return; const newAngle = (Math.atan2(my, mx) * 180 / Math.PI + 360) % 180; setAngle(Math.round(newAngle)); if (dragRef.current === "tip") { const newLen = Math.max(30, Math.min(110, dist / 0.72)); setAxisLen(Math.round(newLen)); setFrequency(lenToFreq(newLen)); setCanvasCursor("nesw-resize"); } else { setCanvasCursor("grabbing"); } }, [angle, axisLen]); const onCanvasMouseUp = useCallback(() => { dragRef.current = null; setCanvasCursor("crosshair"); }, []); const onPreviewWheel = useCallback((e) => { if (!e.metaKey && !e.ctrlKey) return; e.preventDefault(); setZoom(z => Math.max(0.25, Math.min(8, +(z + (e.deltaY < 0 ? 0.25 : -0.25)).toFixed(2)))); }, []); // ── Apply ─────────────────────────────────────────────────────────────────── const handleApply = async () => { const tWpx = Math.round(targetWidthCm / 2.54 * 300); const tHpx = Math.round(targetHeightCm / 2.54 * 300); const needsUpscale = !!(file.width && file.height && (tWpx > file.width || tHpx > file.height)); const upscaleScale = needsUpscale ? Math.min(4, Math.max(2, Math.ceil(Math.max(tWpx / file.width, tHpx / file.height)))) : null; setApplyWithUpscale(needsUpscale); setApplying(true); setApplyErr(null); setApplyStep("queuing"); setApplyElapsed(0); try { const params = { ...halftoneParams(), view: "alpha" }; if (needsUpscale) { params.upscaleBeforeHalftone = true; params.upscaleScale = upscaleScale; } const r = await fetch(`${previewBase}/process-artwork`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ fileId: file.id, halftoneParams: params }), }); if (!r.ok) { const t = await r.text().catch(() => ""); throw new Error(t || ("HTTP " + r.status)); } const { jobId } = await r.json(); // Store in background queue and close immediately — artwork appears when done try { const q = JSON.parse(localStorage.getItem(HT_QUEUE_KEY) || "[]"); q.push({ jobId, pollBase: previewBase, filename: file.filename || file.id, startedAt: Date.now(), upscale: needsUpscale }); localStorage.setItem(HT_QUEUE_KEY, JSON.stringify(q.slice(-30))); } catch {} onQueued({ jobId, pollBase: previewBase, filename: file.filename || file.id, startedAt: Date.now(), upscale: needsUpscale }); } catch (e) { setApplyErr(e.message); setApplying(false); } }; const [chkDark, setChkDark] = useState(false); const previewBg = view === "shirt" ? shirtColor : view === "mask" ? "#ffffff" : view === "alpha" ? "transparent" : "#1a1a2e"; const chkLight = "repeating-conic-gradient(#c8cdd4 0% 25%, #f0f2f5 0% 50%) 0/24px 24px"; const chkDarkBg = "repeating-conic-gradient(#2a2a3a 0% 25%, #1a1a2e 0% 50%) 0/24px 24px"; const previewAreaBg = view === "alpha" ? (chkDark ? chkDarkBg : chkLight) : previewBg; const SliderRow = (props) => ; // ── Size picker helpers ───────────────────────────────────────────────────── const SIZE_RECENT_KEY = "dtf-halftone-recent-sizes"; const [recentSizes, setRecentSizes] = useState(() => { try { const r = JSON.parse(localStorage.getItem(SIZE_RECENT_KEY) || "[]"); return Array.isArray(r) ? r : []; } catch { return []; } }); const defaultPresets = [20, 30, 40, 57]; // Merge recent into presets (recent first, fill gaps with defaults, max 4) const sizePresets = [...new Set([...recentSizes, ...defaultPresets])].slice(0, 4); const applyPresetW = (w) => { setTargetWidthCm(w); setWInput(String(w)); const r = ratio || (targetWidthCm > 0 && targetHeightCm > 0 ? targetWidthCm / targetHeightCm : null); if (linked && r) { const h = +(w / r).toFixed(2); setTargetHeightCm(h); setHInput(String(h)); } }; const onWChange = (raw) => { setWInput(raw); const v = parseFloat(raw); if (!isNaN(v) && v > 0) { setTargetWidthCm(v); const r = ratio || (targetWidthCm > 0 && targetHeightCm > 0 ? targetWidthCm / targetHeightCm : null); if (linked && r) { const h = +(v / r).toFixed(2); setTargetHeightCm(h); setHInput(String(h)); } } }; const onHChange = (raw) => { setHInput(raw); const v = parseFloat(raw); if (!isNaN(v) && v > 0) { setTargetHeightCm(v); const r = ratio || (targetWidthCm > 0 && targetHeightCm > 0 ? targetWidthCm / targetHeightCm : null); if (linked && r) { const w = +(v * r).toFixed(2); setTargetWidthCm(w); setWInput(String(w)); } } }; const toggleLink = () => { if (!linked && targetWidthCm > 0 && targetHeightCm > 0) setRatio(targetWidthCm / targetHeightCm); setLinked(l => !l); }; const confirmSize = () => { // Save used width to recents const w = Math.round(targetWidthCm * 10) / 10; const next = [w, ...recentSizes.filter(x => x !== w)].slice(0, 4); setRecentSizes(next); try { localStorage.setItem(SIZE_RECENT_KEY, JSON.stringify(next)); } catch {} setPhase("edit"); }; // ── Phase 1: Size picker ──────────────────────────────────────────────────── if (phase === "size") { const wPx = Math.round(targetWidthCm / 2.54 * 300); const hPx = Math.round(targetHeightCm / 2.54 * 300); const sizNeedsUpscale = !!(file.width && file.height && (wPx > file.width || hPx > file.height)); const sizUpscaleScale = sizNeedsUpscale ? Math.min(4, Math.max(2, Math.ceil(Math.max(wPx / file.width, hPx / file.height)))) : null; // Effective DPI: source DPI relative to the chosen target size const effectiveDpi = file.width && targetWidthCm > 0 ? Math.round(file.width / (targetWidthCm / 2.54)) : null; const dpiWarn = !sizNeedsUpscale && effectiveDpi !== null && effectiveDpi < 250; const inStyle = { width: "100%", padding: "7px 10px", background: "#222", border: "1px solid #444", color: "#fff", borderRadius: 6, fontSize: 14, boxSizing: "border-box" }; return (
Set Output Size
{file.width && file.height && (
Original: {file.width.toLocaleString()} × {file.height.toLocaleString()} px {" · "}{_origWcm} × {_origHcm} cm @ 300 DPI
)}
{sizNeedsUpscale ? "Target is larger than source — Real-ESRGAN will upscale first, then halftone." : "Source image will be scaled to this print size at 300 DPI before halftoning."}
{/* W × H inputs with link button */}
WIDTH (cm)
onWChange(e.target.value)} onBlur={() => { if (!parseFloat(wInput)) { setWInput(String(targetWidthCm)); } }} style={inStyle} />
HEIGHT (cm)
onHChange(e.target.value)} onBlur={() => { if (!parseFloat(hInput)) { setHInput(String(targetHeightCm)); } }} style={inStyle} />
{/* Link button */}
{/* Quick presets (recent-first, defaults fill gaps) */}
Quick widths (cm)
{sizePresets.map(w => ( ))}
Output: {wPx.toLocaleString()} × {hPx.toLocaleString()} px @ 300 DPI {sizNeedsUpscale ? ( ⚡ will AI upscale {sizUpscaleScale}× → 300 DPI ) : effectiveDpi !== null ? ( {dpiWarn ? "⚠" : "✓"} source {effectiveDpi} DPI{dpiWarn ? " — consider upscaling first" : ""} ) : null}
); } // ── Phase 2: Full-screen halftone editor ──────────────────────────────────── return (
{/* Header */}
DTF Halftone Prep {targetWidthCm} × {targetHeightCm}cm @ 300 DPI · {file.filename || file.id}
{/* Body */}
{/* ── Left settings panel ── */}
{/* View */}
View
{["alpha","shirt","mask","original"].map(v => ( ))}
{/* Shirt color */}
Shirt color setShirtColor(e.target.value)} style={{ width: 28, height: 22, border: "none", background: "none", cursor: "pointer", padding: 0 }} /> {shirtColor}
{/* Edit Halftones */}
Edit Halftones
Pattern
{ const v = Math.round(f); setFrequency(v); setAxisLen(Math.round(freqToLen(v))); }} /> setAngle(Math.round(v))} />
{/* Levels */}
Levels
setLevelsBlack(Math.round(v))} /> Number(v).toFixed(2)} /> setLevelsWhite(Math.round(v))} />
Output levels
{/* Semi-transparent pixel removal */}
{ const v = e.target.checked; setAlphaThreshEnabled(v); if (glRef.current) glRef.current.render({ ...halftoneParams(), alphaThreshEnabled: v }); }} style={{ accentColor: "#18f4af" }} />
{alphaThreshEnabled && ( <>
Semi-transparent pixels print as faint white dots on dark DTF garments. Pixels above the threshold become fully opaque; below become transparent.
{ const val = Math.round(v); setAlphaThreshVal(val); if (glRef.current) glRef.current.render({ ...halftoneParams(), alphaThreshVal: val }); }} /> )}
{/* Apply Halftone + Color Knockout */}
setApplyHalftone(e.target.checked)} style={{ accentColor: "#18f4af" }} /> uncheck for bg-remove only
setKoEnabled(e.target.checked)} style={{ accentColor: "#18f4af" }} />
{koEnabled && ( <>
BG color setKoColor(e.target.value)} style={{ width: 28, height: 22, border: "none", background: "none", cursor: "pointer", padding: 0 }} /> {koColor}
)}
{/* Post Cleanup */}
Post Cleanup
{["none","standard","high"].map(v => ( ))}
setDefringe(e.target.checked)} style={{ accentColor: "#18f4af" }} />
{/* Axis toggle */}
setShowAxis(e.target.checked)} style={{ accentColor: "#18f4af" }} />
{/* Sticky apply buttons at bottom */}
{applying ? (
Submitting to queue…
) : (
{!glLoading && !glErr && ( )}
)} {applyErr &&
{applyErr}
}
{/* ── Right: preview area ── */}
{/* Zoom controls */}
{view === "alpha" && (
)}
{showHotkeys && (
Keyboard shortcuts
{[ [modKey+"+0", "Fit image to area"], [modKey+"+1", "1:1 pixels (actual size)"], [modKey+"+scroll", "Zoom in / out"], ["Space+drag", "Pan image"], ["Axis centre", "Drag to rotate angle"], ["Axis tip", "Drag to change frequency"], ].map(([key, desc]) => (
{desc} {key}
))}
)}
{Math.round(zoom * 100)}%
{/* Loading overlay */} {glLoading && (
Loading image…
)} {/* WebGL canvas (pans + zooms); in compare mode sits next to the original img */}
{/* Shirt (or current view) — WebGL canvas */}
{compareMode && !glLoading && !glErr && (
Shirt
)}
{/* Original — plain img, only in compare mode */} {compareMode && !glLoading && !glErr && (
Original
)}
{/* Axis overlay — always centred in the preview area, independent of pan/zoom */} {showAxis && !glLoading && !glErr && (
)} {glErr && (
{glErr}
)}
); } // Type text, pick a font from the global library + a colour, set the print size (cm), // and render a print-ready PNG (server, 300 DPI) attached to the owner's artwork. // Live preview draws the text in the actual font via the FontFace API, mirroring the // server's stretch/fit scaling. `owner` is { type:'order'|'draft', id }. function TextArtworkBuilder({ owner, onCancel, onDone }) { const [fonts, setFonts] = useState(null); const [text, setText] = useState(""); const [fontId, setFontId] = useState(""); const [color, setColor] = useState("#680000"); const [widthCm, setWidthCm] = useState(20); const [heightCm, setHeightCm] = useState(10); const [mode, setMode] = useState("stretch"); const [bulk, setBulk] = useState(false); const [prog, setProg] = useState(null); // { done, total } while bulk-generating const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [ready, setReady] = useState(false); const canvasRef = React.useRef(null); useEffect(() => { DTF.listFonts().then(fs => { setFonts(fs); if (fs && fs[0]) setFontId(fs[0].id); }); }, []); const font = (fonts || []).find(f => f.id === fontId); const family = font ? "dtf-font-" + font.id : ""; // In bulk mode each non-empty line becomes its own artwork; the preview shows the first. const lines = text.split("\n").map(s => s.trim()).filter(Boolean); const previewText = bulk ? (lines[0] || "") : text; const needW = mode !== "height"; // width is used unless we're pinning height const needH = mode !== "width"; // height is used unless we're pinning width useEffect(() => { if (!font) { setReady(false); return; } let dead = false; setReady(false); const ff = new FontFace(family, "url(" + DTF.fontFileUrl(font.id) + ")"); ff.load().then(f => { if (dead) return; document.fonts.add(f); setReady(true); }).catch(() => { if (!dead) setErr("Couldn't load that font for preview"); }); return () => { dead = true; }; }, [fontId]); useEffect(() => { const cv = canvasRef.current; if (!cv) return; const DISP = 560; const ctx = cv.getContext("2d"); if (!ready || !previewText.trim()) { cv.width = DISP; cv.height = 120; ctx.clearRect(0, 0, DISP, 120); return; } const base = 200; // Measure first (canvas resize below resets context state, so re-set the font after). ctx.font = base + 'px "' + family + '"'; ctx.textBaseline = "alphabetic"; const plines = bulk ? [previewText] : (previewText.split("\n").filter(l => l.length)); if (!plines.length) plines.push(previewText); const ms = plines.map(ln => ctx.measureText(ln)); const tw = Math.max(1, ...ms.map(m => (m.actualBoundingBoxLeft || 0) + (m.actualBoundingBoxRight || m.width))); const asc = Math.max(...ms.map(m => m.actualBoundingBoxAscent || base * 0.8)); const desc = Math.max(...ms.map(m => m.actualBoundingBoxDescent || base * 0.2)); const lineH = asc + desc, gap = base * 0.15; const th = Math.max(1, lineH * plines.length + gap * (plines.length - 1)); const w = Number(widthCm) || 1, h = Number(heightCm) || 1; let bw, bh, sx, sy; if (mode === "stretch") { bw = DISP; bh = Math.max(40, Math.min(340, Math.round(DISP * h / w))); sx = bw / tw; sy = bh / th; } else if (mode === "fit") { bw = DISP; bh = Math.max(40, Math.min(340, Math.round(DISP * h / w))); sx = sy = Math.min(bw / tw, bh / th); } else { bw = DISP; bh = Math.max(40, Math.min(340, Math.round(DISP * th / tw))); sx = sy = bw / tw; } // width/height → natural aspect cv.width = bw; cv.height = bh; ctx.clearRect(0, 0, bw, bh); ctx.font = base + 'px "' + family + '"'; // re-apply: resizing the canvas cleared it ctx.fillStyle = color; ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; ctx.save(); ctx.translate((bw - tw * sx) / 2, (bh - th * sy) / 2); ctx.scale(sx, sy); let y = asc; for (const ln of plines) { ctx.fillText(ln, tw / 2, y); y += lineH + gap; } ctx.restore(); }, [previewText, color, widthCm, heightCm, mode, ready, family, bulk]); async function create() { if (busy) return; if (!font) { setErr("Pick a font"); return; } const items = bulk ? lines : (text.trim() ? [text] : []); if (!items.length) { setErr(bulk ? "Add at least one line" : "Type some text"); return; } setBusy(true); setErr(""); setProg(bulk ? { done: 0, total: items.length } : null); const opts = { fontId: font.id, color, widthCm: Number(widthCm) || 10, heightCm: Number(heightCm) || 10, mode }; try { for (let i = 0; i < items.length; i++) { await DTF.createTextArtwork(owner, { ...opts, text: items[i] }); if (bulk) setProg({ done: i + 1, total: items.length }); } onDone && onDone(); } catch (e) { setErr(e.message || "Couldn't create the text artwork"); setBusy(false); setProg(null); } } const lbl = { display: "flex", flexDirection: "column", fontSize: 11.5, gap: 3 }; return (
e.stopPropagation()} style={{ maxWidth: 640 }}>

Text artwork

{fonts && fonts.length === 0 && (
No fonts yet — add one in Settings → Fonts, then reopen this.
)}
{bulk && {lines.length} item{lines.length === 1 ? "" : "s"}}