bsign-customization-full 0.0.1

package/src/lib/cart-proposal-pdf.ts

@@ -0,0 +1,350 @@
+import { jsPDF } from "jspdf"
+
+import { getTemplateById, getTemplateMaterial } from "./config"
+import { CURRENCY_SYMBOL, formatPrice, getCartSummary, getUnitPrice } from "./pricing"
+import type { TCartItem } from "../store/cart-store"
+import type { LayerTextProps } from "../components/layers/text-layer"
+import type { TLayer } from "../components/preview"
+
+const PROPOSAL_LOGO_SRC = "https://bsign-store.com/cdn/shop/files/Logo_black_140x.png"
+const PAGE_MARGIN_MM = 14
+const HEADER_HEIGHT_MM = 22
+const IMAGE_BOX_SIZE_MM = 52
+const CARD_PADDING_MM = 4
+const CARD_GAP_MM = 6
+const CARD_TEXT_LINE_HEIGHT_MM = 4.8
+const PAGE_FOOTER_SAFE_SPACE_MM = 12
+
+const normalizeQty = (qty: number): number => {
+  return Number.isFinite(qty) && qty > 0 ? Math.floor(qty) : 1
+}
+
+const formatSizeNumber = (value: number): string => {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, "")
+}
+
+const formatLinePrice = (value: number): string => {
+  return `${CURRENCY_SYMBOL}${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)}`
+}
+
+const getPersonalizationLines = (item: TCartItem): string[] => {
+  const textLayers = item.sign.filter((layer) => layer.type === "text" && layer.subtype !== "braille") as TLayer<LayerTextProps>[]
+  const lines = textLayers
+    .map((layer) => layer.props.text.trim())
+    .filter(Boolean)
+  return lines.length > 0 ? lines : ["-"]
+}
+
+const hasAdaFont = (item: TCartItem): boolean => {
+  const textLayers = item.sign.filter((layer) => layer.type === "text" && layer.subtype !== "braille") as TLayer<LayerTextProps>[]
+  return textLayers.some((layer) => Boolean(layer.props.braille))
+}
+
+const getColorLabel = (item: TCartItem): string => {
+  const template = getTemplateById(item.options.selectedTemplateId)
+  const material = getTemplateMaterial({
+    template,
+    materialId: item.options.selectedMaterialId,
+  })
+
+  return material.label
+}
+
+const blobToDataUrl = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(reader.error ?? new Error("Unable to read image blob"))
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result)
+        return
+      }
+      reject(new Error("Unable to convert image blob to data URL"))
+    }
+    reader.readAsDataURL(blob)
+  })
+}
+
+const resolveImageDataUrl = async (src: string): Promise<string | null> => {
+  if (!src) return null
+  if (src.startsWith("data:image/")) return src
+
+  try {
+    const response = await fetch(src)
+    if (!response.ok) return null
+    const blob = await response.blob()
+    return blobToDataUrl(blob)
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+const getImageFormat = (dataUrl: string): "PNG" | "JPEG" => {
+  const mimeType = dataUrl.match(/^data:image\/([a-zA-Z0-9.+-]+);/)?.[1]?.toLowerCase()
+  if (mimeType === "jpg" || mimeType === "jpeg") {
+    return "JPEG"
+  }
+  return "PNG"
+}
+
+const drawImageContained = ({
+  pdf,
+  dataUrl,
+  x,
+  y,
+  width,
+  height,
+}: {
+  pdf: jsPDF
+  dataUrl: string
+  x: number
+  y: number
+  width: number
+  height: number
+}): boolean => {
+  try {
+    const imageProps = pdf.getImageProperties(dataUrl)
+    if (!Number.isFinite(imageProps.width) || !Number.isFinite(imageProps.height) || imageProps.width <= 0 || imageProps.height <= 0) {
+      return false
+    }
+
+    const scale = Math.min(width / imageProps.width, height / imageProps.height)
+    const renderWidth = imageProps.width * scale
+    const renderHeight = imageProps.height * scale
+    const renderX = x + (width - renderWidth) / 2
+    const renderY = y + (height - renderHeight) / 2
+
+    pdf.addImage(dataUrl, getImageFormat(dataUrl), renderX, renderY, renderWidth, renderHeight, undefined, "FAST")
+    return true
+  } catch (error) {
+    console.error(error)
+    return false
+  }
+}
+
+const drawPageHeader = ({
+  pdf,
+  logoDataUrl,
+  proposalDate,
+  proposalId,
+}: {
+  pdf: jsPDF
+  logoDataUrl: string | null
+  proposalDate: string
+  proposalId: string
+}): number => {
+  const pageWidth = pdf.internal.pageSize.getWidth()
+  const topY = PAGE_MARGIN_MM
+
+  if (logoDataUrl) {
+    drawImageContained({
+      pdf,
+      dataUrl: logoDataUrl,
+      x: PAGE_MARGIN_MM,
+      y: topY - 1,
+      width: 30,
+      height: 12,
+    })
+  }
+
+  const titleX = logoDataUrl ? PAGE_MARGIN_MM + 35 : PAGE_MARGIN_MM
+
+  pdf.setFont("helvetica", "bold")
+  pdf.setFontSize(18)
+  pdf.setTextColor(28, 29, 29)
+  pdf.text("Bsign", titleX, topY + 7)
+
+  pdf.setFont("helvetica", "normal")
+  pdf.setFontSize(9.5)
+  pdf.setTextColor(102, 102, 102)
+  pdf.text(`Date: ${proposalDate}`, pageWidth - PAGE_MARGIN_MM, topY + 4, { align: "right" })
+  pdf.text(`#${proposalId}`, pageWidth - PAGE_MARGIN_MM, topY + 9, { align: "right" })
+
+  const separatorY = topY + HEADER_HEIGHT_MM - 2
+  pdf.setDrawColor(218, 218, 218)
+  pdf.line(PAGE_MARGIN_MM, separatorY, pageWidth - PAGE_MARGIN_MM, separatorY)
+
+  return topY + HEADER_HEIGHT_MM + 2
+}
+
+const drawSummaryBlock = ({
+  pdf,
+  y,
+  signsCount,
+  totalQty,
+  totalAmount,
+}: {
+  pdf: jsPDF
+  y: number
+  signsCount: number
+  totalQty: number
+  totalAmount: number
+}): number => {
+  const pageWidth = pdf.internal.pageSize.getWidth()
+  const contentWidth = pageWidth - PAGE_MARGIN_MM * 2
+
+  pdf.setFillColor(247, 247, 247)
+  pdf.setDrawColor(222, 222, 222)
+  pdf.roundedRect(PAGE_MARGIN_MM, y, contentWidth, 22, 3, 3, "FD")
+
+  pdf.setFont("helvetica", "bold")
+  pdf.setFontSize(10)
+  pdf.setTextColor(28, 29, 29)
+  pdf.text("Summary", PAGE_MARGIN_MM + 4, y + 6)
+
+  pdf.setFont("helvetica", "normal")
+  pdf.setFontSize(10)
+  pdf.setTextColor(56, 56, 56)
+  pdf.text(`Signs in cart: ${signsCount}`, PAGE_MARGIN_MM + 4, y + 12)
+  pdf.text(`Total quantity: ${totalQty}`, PAGE_MARGIN_MM + 4, y + 17)
+
+  pdf.setFont("helvetica", "bold")
+  pdf.setFontSize(11)
+  pdf.setTextColor(28, 29, 29)
+  pdf.text(`Total amount: ${formatPrice(totalAmount)}`, pageWidth - PAGE_MARGIN_MM - 4, y + 17, { align: "right" })
+
+  return y + 28
+}
+
+export const downloadCartProposalPdf = async (cart: TCartItem[]): Promise<void> => {
+  if (!cart.length) return
+
+  const [logoDataUrl, ...cartImageDataUrls] = await Promise.all([
+    resolveImageDataUrl(PROPOSAL_LOGO_SRC),
+    ...cart.map((item) => resolveImageDataUrl(item.img)),
+  ])
+
+  const pdf = new jsPDF({
+    orientation: "portrait",
+    unit: "mm",
+    format: "a4",
+  })
+
+  const pageHeight = pdf.internal.pageSize.getHeight()
+  const contentWidth = pdf.internal.pageSize.getWidth() - PAGE_MARGIN_MM * 2
+
+  const now = new Date()
+  const proposalDate = new Intl.DateTimeFormat("en-US", {
+    dateStyle: "long",
+  }).format(now)
+  const proposalId = now.toISOString().replace(/[-:TZ.]/g, "").slice(0, 14)
+
+  let y = drawPageHeader({
+    pdf,
+    logoDataUrl,
+    proposalDate,
+    proposalId,
+  })
+
+  const { totalQty, totalAmount } = getCartSummary(cart)
+  y = drawSummaryBlock({
+    pdf,
+    y,
+    signsCount: cart.length,
+    totalQty,
+    totalAmount,
+  })
+
+  for (const [index, item] of cart.entries()) {
+    const qty = normalizeQty(item.qty)
+    const lineTotal = getUnitPrice(item.options.selectedSize, qty) * qty
+    const colorLabel = getColorLabel(item)
+    const templateLabel = getTemplateById(item.options.selectedTemplateId).name
+    const personalizationText = getPersonalizationLines(item).join(" | ")
+    const adaText = hasAdaFont(item) ? "Yes" : "No"
+    const width = formatSizeNumber(item.options.selectedSize.inchs.w)
+    const height = formatSizeNumber(item.options.selectedSize.inchs.h)
+
+    const textX = PAGE_MARGIN_MM + CARD_PADDING_MM + IMAGE_BOX_SIZE_MM + CARD_GAP_MM
+    const textWidth = contentWidth - IMAGE_BOX_SIZE_MM - CARD_PADDING_MM * 2 - CARD_GAP_MM
+    const detailLines = [
+      `Size & Color: ${width}" x ${height}" - ${colorLabel} - ${templateLabel}`,
+      `Personalization: ${personalizationText}`,
+      `Braille Font: ${adaText}`,
+      `Quantity: ${qty}`,
+      `Line total: ${formatLinePrice(lineTotal)}`,
+    ].flatMap((line) => pdf.splitTextToSize(line, textWidth) as string[])
+
+    const textBlockHeight = 8 + detailLines.length * CARD_TEXT_LINE_HEIGHT_MM
+    const cardHeight = Math.max(IMAGE_BOX_SIZE_MM + CARD_PADDING_MM * 2, textBlockHeight + CARD_PADDING_MM * 2)
+
+    if (y + cardHeight > pageHeight - PAGE_FOOTER_SAFE_SPACE_MM) {
+      pdf.addPage()
+      y = drawPageHeader({
+        pdf,
+        logoDataUrl,
+        proposalDate,
+        proposalId,
+      })
+    }
+
+    pdf.setDrawColor(214, 214, 214)
+    pdf.setFillColor(255, 255, 255)
+    pdf.roundedRect(PAGE_MARGIN_MM, y, contentWidth, cardHeight, 2.5, 2.5, "FD")
+
+    const imageX = PAGE_MARGIN_MM + CARD_PADDING_MM
+    const imageY = y + (cardHeight - IMAGE_BOX_SIZE_MM) / 2
+    pdf.setFillColor(244, 244, 244)
+    pdf.rect(imageX, imageY, IMAGE_BOX_SIZE_MM, IMAGE_BOX_SIZE_MM, "F")
+
+    const imageDataUrl = cartImageDataUrls[index]
+    const imageRendered = imageDataUrl
+      ? drawImageContained({
+          pdf,
+          dataUrl: imageDataUrl,
+          x: imageX,
+          y: imageY,
+          width: IMAGE_BOX_SIZE_MM,
+          height: IMAGE_BOX_SIZE_MM,
+        })
+      : false
+
+    if (!imageRendered) {
+      pdf.setFont("helvetica", "normal")
+      pdf.setFontSize(8.5)
+      pdf.setTextColor(140, 140, 140)
+      pdf.text("Preview unavailable", imageX + IMAGE_BOX_SIZE_MM / 2, imageY + IMAGE_BOX_SIZE_MM / 2, { align: "center" })
+    }
+
+    let lineY = y + CARD_PADDING_MM + 5
+    pdf.setFont("helvetica", "bold")
+    pdf.setFontSize(12)
+    pdf.setTextColor(28, 29, 29)
+    pdf.text(`Sign ${index + 1}`, textX, lineY)
+
+    lineY += 5.5
+    pdf.setFont("helvetica", "normal")
+    pdf.setFontSize(9.8)
+    pdf.setTextColor(52, 52, 52)
+    for (const line of detailLines) {
+      pdf.text(line, textX, lineY)
+      lineY += CARD_TEXT_LINE_HEIGHT_MM
+    }
+
+    y += cardHeight + 6
+  }
+
+  if (y + 16 < pageHeight - PAGE_FOOTER_SAFE_SPACE_MM) {
+    pdf.setDrawColor(224, 224, 224)
+    pdf.line(PAGE_MARGIN_MM, y + 2, PAGE_MARGIN_MM + contentWidth, y + 2)
+    pdf.setFont("helvetica", "italic")
+    pdf.setFontSize(9)
+    pdf.setTextColor(120, 120, 120)
+    pdf.text("Thank you for your request. We are ready to proceed after your confirmation.", PAGE_MARGIN_MM, y + 8)
+  }
+
+  const totalPages = pdf.getNumberOfPages()
+  for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
+    pdf.setPage(pageNumber)
+    pdf.setFont("helvetica", "normal")
+    pdf.setFontSize(8.5)
+    pdf.setTextColor(130, 130, 130)
+    pdf.text(`Page ${pageNumber} of ${totalPages}`, pdf.internal.pageSize.getWidth() - PAGE_MARGIN_MM, pageHeight - 5, {
+      align: "right",
+    })
+  }
+
+  const filenameDate = now.getTime();
+  pdf.save(`bsign-cart-${filenameDate}.pdf`);
+}

package/src/lib/config-font.tsx

@@ -0,0 +1,109 @@
+export const BASE_FONT_SIZE = 100 as const;
+
+export const BASE_TEXT_SCALE_CHANGE_VALUE = 0.05 as const;
+export const MAX_SCALE = 1.8 as const;
+export const MIN_SCALE = 0.5 as const;
+export const MODERN_MIN_FONT_PT = 64 as const;
+
+export const AUTO_ADD_TEXT_SCALE_STEP = 0.30 as const;
+export const AUTO_ADD_TEXT_LINE_DENSITY_STEP = 0.15 as const;
+export const AUTO_ADD_TEXT_MIN_SCALE_RATIO = 0.55 as const;
+
+export const MAX_LINE_LENGTH = 12 as const;
+export const MIN_LINE_LENGTH = 1 as const;
+export const MAX_LINE_LENGTH_HARD_CAP = 32 as const;
+export const BASE_FONT_SCALE = 1 as const;
+const MAX_LINE_LENGTH_CURVE_POWER = 1 as const;
+const BASE_SIGN_AREA_INCH = 3.5 * 3.5;
+const BASE_RECOMMENDED_PT = 90 as const;
+const BASE_RECOMMENDED_LINE_LENGTH = 8 as const;
+const TEMPLATE_BASE_RECOMMENDED_LINE_LENGTH = {
+    modern: 4,
+    wave: BASE_RECOMMENDED_LINE_LENGTH,
+} as const;
+
+type TSignInchs = {
+    w: number;
+    h: number;
+};
+
+const getSignSizeFactor = (signInchs?: TSignInchs) => {
+    if (!signInchs) return 1;
+
+    const safeWidth = Math.max(0.1, signInchs.w);
+    const safeHeight = Math.max(0.1, signInchs.h);
+    const areaRatio = (safeWidth * safeHeight) / BASE_SIGN_AREA_INCH;
+
+    // Square root keeps growth smoother for bigger signs.
+    return Math.sqrt(areaRatio);
+};
+
+const getTemplateBaseRecommendedLineLength = (templateId?: string) => {
+    if (!templateId) return BASE_RECOMMENDED_LINE_LENGTH;
+
+    if (templateId in TEMPLATE_BASE_RECOMMENDED_LINE_LENGTH) {
+        return TEMPLATE_BASE_RECOMMENDED_LINE_LENGTH[
+            templateId as keyof typeof TEMPLATE_BASE_RECOMMENDED_LINE_LENGTH
+        ];
+    }
+
+    return BASE_RECOMMENDED_LINE_LENGTH;
+};
+
+export const getMaxLineLengthByPt = (
+    pt: number,
+    signInchs?: TSignInchs,
+    templateId?: string
+) => {
+    const safePt = Math.max(1, pt);
+    const sizeFactor = getSignSizeFactor(signInchs);
+    const baseRecommendedLineLength = getTemplateBaseRecommendedLineLength(templateId);
+    const estimatedLength = baseRecommendedLineLength
+        * sizeFactor
+        * Math.pow(BASE_RECOMMENDED_PT / safePt, MAX_LINE_LENGTH_CURVE_POWER);
+
+    return Math.max(
+        MIN_LINE_LENGTH,
+        Math.min(MAX_LINE_LENGTH_HARD_CAP, Math.round(estimatedLength))
+    );
+};
+
+export const getMinScaleByTemplate = ({
+    templateId,
+    sizeLimitScale = 1,
+}: {
+    templateId?: string;
+    sizeLimitScale?: number;
+}) => {
+    if (templateId !== "modern") return MIN_SCALE;
+
+    const normalizedSizeLimitScale =
+        Number.isFinite(sizeLimitScale) && sizeLimitScale > 0
+            ? sizeLimitScale
+            : 1;
+
+    const modernMinScale = MODERN_MIN_FONT_PT / (BASE_FONT_SIZE * normalizedSizeLimitScale);
+
+    return Math.min(MAX_SCALE, Math.max(MIN_SCALE, modernMinScale));
+};
+
+export const FONT_RANGE = (() => {
+    let range: Record<number, number> = {};
+
+    let newFontScale = BASE_FONT_SCALE;
+
+    for (let length = 5; length <= MAX_LINE_LENGTH; length += 1) {
+        range[length] = newFontScale;
+        newFontScale -= 0.1;
+    }
+
+    return range;
+})();
+
+// export const LINES_SCALE = [
+//     { lines: 2, length: 5, scale: 0.75 },
+//     { lines: 2, length: 6, scale: 0.8 },
+//     { lines: 2, length: 8, scale: 0.8 },
+//     { lines: 3, length: 8, scale: 0.6 },
+//     { lines: 4, length: 8, scale: 0.7 },
+// ] as const;