fix(10-03): transparent field boxes and fixed-size checkbox in FieldPlacer

- preparePdf: remove opaque fill from all field type rectangles (signature,
  initials, checkbox, date, text) — underlying PDF content now shows through
- preparePdf: checkbox draws X lines only (no border rectangle); date draws
  no placeholder at all; text draws nothing (position marker only)
- sign route: remove white overwrite rectangle on date stamp — date text
  draws directly on existing PDF content
- FieldPlacer: suppress resize corner handles for checkbox fields; hide
  "Checkbox" label (too small at 24x24pt); checkbox is fixed-size only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chandler Copeland
2026-03-21 13:41:04 -06:00
parent 4d699fd474
commit e179b9284f
3 changed files with 10 additions and 36 deletions

View File

@@ -191,12 +191,7 @@ export async function POST(
for (const field of dateFields) {
const page = pages[field.page - 1];
if (!page) continue;
// Overwrite the amber placeholder rectangle with white background + date text
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.39, 0.45, 0.55), borderWidth: 0.5,
color: rgb(1.0, 1.0, 1.0),
});
// Draw signing date directly — no background rectangle so underlying PDF content shows through
page.drawText(signingDateStr, {
x: field.x + 4,
y: field.y + field.height / 2 - 4, // vertically center

View File

@@ -639,7 +639,9 @@ export function FieldPlacer({ docId, pageInfo, currentPage, children, readOnly =
handleMoveStart(e, field.id);
}}
>
<span style={{ pointerEvents: 'none' }}>{fieldLabel}</span>
{fieldType !== 'checkbox' && (
<span style={{ pointerEvents: 'none' }}>{fieldLabel}</span>
)}
{!readOnly && (
<button
data-no-move
@@ -673,7 +675,7 @@ export function FieldPlacer({ docId, pageInfo, currentPage, children, readOnly =
×
</button>
)}
{!readOnly && (
{!readOnly && fieldType !== 'checkbox' && (
<>
{resizeHandle('nw')}
{resizeHandle('ne')}

View File

@@ -95,11 +95,10 @@ export async function preparePdf(
const fieldType = getFieldType(field);
if (fieldType === 'client-signature') {
// Blue "Sign Here" placeholder — client will sign at signing time
// Blue "Sign Here" placeholder — transparent background, border + label only
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.15, 0.39, 0.92), borderWidth: 1.5,
color: rgb(0.90, 0.94, 0.99),
});
page.drawText('Sign Here', {
x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
@@ -107,11 +106,10 @@ export async function preparePdf(
});
} else if (fieldType === 'initials') {
// Purple "Initials" placeholder — client will initial at signing time
// Purple "Initials" placeholder — transparent background, border + label only
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.49, 0.23, 0.93), borderWidth: 1.5,
color: rgb(0.95, 0.92, 1.0),
});
page.drawText('Initials', {
x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
@@ -119,13 +117,7 @@ export async function preparePdf(
});
} else if (fieldType === 'checkbox') {
// Checked box: light gray background + X crossing diagonals (embedded at prepare time)
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.1, 0.1, 0.1), borderWidth: 1.5,
color: rgb(0.95, 0.95, 0.95),
});
// X mark: two diagonals
// X mark only — no background or border so underlying PDF content shows through
page.drawLine({
start: { x: field.x + 2, y: field.y + 2 },
end: { x: field.x + field.width - 2, y: field.y + field.height - 2 },
@@ -138,25 +130,10 @@ export async function preparePdf(
});
} else if (fieldType === 'date') {
// Light placeholder rectangle — actual signing date stamped at POST time in route.ts
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.85, 0.47, 0.04), borderWidth: 1,
color: rgb(1.0, 0.97, 0.90),
});
page.drawText('Date', {
x: field.x + 4, y: field.y + 4, size: 8, font: helvetica,
color: rgb(0.85, 0.47, 0.04),
});
// No placeholder drawn — actual signing date stamped at POST time in route.ts
} else if (fieldType === 'text') {
// Light background rectangle — text content is provided via textFillData (separate pipeline)
// type='text' SignatureFieldData fields are visual position markers only
page.drawRectangle({
x: field.x, y: field.y, width: field.width, height: field.height,
borderColor: rgb(0.39, 0.45, 0.55), borderWidth: 1,
color: rgb(0.96, 0.97, 0.98),
});
// No marker drawn — text content is provided via textFillData (separate pipeline)
} else if (fieldType === 'agent-signature') {
// Skip — agent signature handled by Phase 11; no placeholder drawn here