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:
@@ -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
|
||||
|
||||
@@ -639,7 +639,9 @@ export function FieldPlacer({ docId, pageInfo, currentPage, children, readOnly =
|
||||
handleMoveStart(e, field.id);
|
||||
}}
|
||||
>
|
||||
{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')}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user