{svg}
{svg}
{
if (e.button !== 0) return;
e.stopPropagation();
e.preventDefault();
onResizePointerDown(e, handle.id);
}}
onClick={(e) => e.stopPropagation()}
>
);
})
: null}
);
}
/**
* 贯穿预览区全宽的横向标尺：刻度按「预览标尺单位」绘制；与模板画布单位无关。
*/
function RulerBarHorizontal({
rulerTotalWidthPx,
paperWidthPx,
paperOffsetLeftPx,
paperWidthTemplate,
templateUnit,
displayUnit,
baseW,
selection,
}: {
rulerTotalWidthPx: number;
paperWidthPx: number;
paperOffsetLeftPx: number;
/** 模板定义的纸张宽度（模板单位） */
paperWidthTemplate: number;
templateUnit: "cm" | "inch";
displayUnit: PreviewRulerDisplayUnit;
baseW: number;
selection: { x: number; width: number } | null;
}) {
const displaySpan = convertTemplateLengthToDisplay(paperWidthTemplate, templateUnit, displayUnit);
if (!Number.isFinite(displaySpan) || displaySpan <= 0 || !Number.isFinite(paperWidthPx) || paperWidthPx < 1) {
return null;
}
if (!Number.isFinite(rulerTotalWidthPx) || rulerTotalWidthPx < 1) {
return null;
}
const h = RULER_H;
const pxPerDisplayUnit = paperWidthPx / displaySpan;
/** 标尺几何中心为刻度 0，向左为负、向右为正 */
const centerPx = rulerTotalWidthPx / 2;
const xAtSignedUnit = (u: number) => centerPx + u * pxPerDisplayUnit;
const nodes: React.ReactNode[] = [];
let labelStep = 1;
if (displayUnit === "mm") {
if (displaySpan > 120) labelStep = 20;
else if (displaySpan > 60) labelStep = 10;
else if (displaySpan > 25) labelStep = 5;
}
const minorDivisions = displayUnit === "inch" ? 8 : 10;
const kMin = Math.floor((0 - centerPx) / pxPerDisplayUnit) - 2;
const kMax = Math.ceil((rulerTotalWidthPx - centerPx) / pxPerDisplayUnit) + 2;
const kLo = Math.max(-5000, Math.min(5000, kMin));
const kHi = Math.max(-5000, Math.min(5000, kMax));
for (let k = kLo; k <= kHi; k++) {
const x = xAtSignedUnit(k);
if (x < -8 || x > rulerTotalWidthPx + 8) continue;
const showLabel = k === 0 || k % labelStep === 0;
nodes.push(
{previewText}
);
}
if (type === 'TEXT_STATIC') {
const text = (cfg?.text as string) ?? 'Text';
if (isAppPrintField && previewAsPrinted) {
if (inputType === 'options') {
const selected = Array.isArray(cfg?.selectedOptionValues)
? (cfg.selectedOptionValues as string[])
: [];
const line = formatMultipleOptionsCanvasLine(cfg, text, selected);
const muted = selected.length === 0;
return (
{line}
);
}
const display =
inputType === 'number' ? ((cfg?.text as string) ?? '0') : text;
return (
{display}
);
}
if (isAppPrintField) {
if (inputType === 'options') {
const selected = Array.isArray(cfg?.selectedOptionValues)
? (cfg.selectedOptionValues as string[])
: [];
const line = formatMultipleOptionsCanvasLine(cfg, text, selected);
return (
{line}
);
}
const display =
inputType === 'number' ? ((cfg?.text as string) ?? '0') : text;
return (
{display}
);
}
if (inputType === 'number') {
return (
);
}
if (inputType === 'options') {
// 画布只展示「答案」纯文本，不出现勾选、下拉箭头等控件样式；实际选择在 APP 打印流程中完成
const selected = Array.isArray(cfg?.selectedOptionValues)
? (cfg.selectedOptionValues as string[])
: [];
const line = formatMultipleOptionsCanvasLine(cfg, text, selected);
const muted = selected.length === 0;
return (
{line}
);
}
if (inputType === 'text') {
return (
);
}
return (
{text}
);
}
if (type === 'TEXT_PRODUCT') {
const text = (cfg?.text as string) ?? 'Product name';
return (
{text}
);
}
if (type === 'TEXT_PRICE') {
const text = (cfg?.text as string) ?? '0.00';
return (
{text}
);
}
// 条码（支持水平/竖排、制式、字号与对齐）
if (type === 'BARCODE') {
const data = (cfg?.data as string) ?? '123456789';
const showText = (cfg?.showText as boolean) !== false;
const orientation = (
el.rotation === 'vertical' || (cfg?.orientation as string) === 'vertical'
? 'vertical'
: 'horizontal'
) as 'horizontal' | 'vertical';
const textAlign = (cfg?.textAlign as string) ?? 'center';
const fontSize = (cfg?.fontSize as number) ?? 14;
return (
Logo
);
}
// 日期/时间
if (type === 'DATE') {
const previewFmtRaw = cfg?.__previewFormatted;
if (typeof previewFmtRaw === 'string') {
const previewFmt = previewFmtRaw.trim();
return (
{previewFmt || '—'}
{format}
{example}
{previewTime.trim() || '—'}
{example}
{previewDur.trim() || '—'}
{example}
{weightNum}
{weightUnit}
{currency}{(unitPrice * weight).toFixed(2)}
;
}
// 营养成分表
if (type === 'NUTRITION') {
const servingsPerContainer = String(cfg.servingsPerContainer ?? cfg.ServingsPerContainer ?? '').trim();
const servingSize = String(cfg.servingSize ?? cfg.ServingSize ?? '').trim();
const calories = String(cfg.calories ?? cfg.Calories ?? nutritionFixedField(cfg, 'calories', 'value') ?? '').trim();
const nutritionTitleSize = Number(cfg.nutritionTitleFontSize ?? cfg.NutritionTitleFontSize ?? 16) || 16;
const baseRows = NUTRITION_FIXED_ITEMS.map((item) => {
const value = nutritionFixedField(cfg, item.key, 'value');
const unit = nutritionFixedField(cfg, item.key, 'unit') || (item.defaultUnit ?? '');
return {
id: item.key,
label: item.label,
value,
unit,
};
});
const extraRows = nutritionExtraRows(cfg).map((item) => ({
id: item.id,
label: item.name.trim() || 'Other',
value: item.value.trim(),
unit: item.unit.trim(),
}));
const rows = [...baseRows, ...extraRows];
const formatNutritionValue = (value: string, unit: string): string => {
const v = String(value ?? '').trim();
const u = String(unit ?? '').trim();
if (!v && !u) return '';
return `<${v}${u ? ` ${u}` : ''}`;
};
const nutritionContent = (
Nutrition Facts
Calories
{calories ? formatNutritionValue(calories, '') : ''}
Servings Per Container
{servingsPerContainer}
Serving Size
{servingSize}
{rows.map((row) => (
{row.label}
{formatNutritionValue(row.value, row.unit)}
))}
{nutritionContent}
Blank
Space
);
}
return (
{el.type.replace(/_/g, ' ')}
);
}
interface LabelCanvasProps {
template: LabelTemplate;
canvasBorder?: 'none' | 'line' | 'dotted';
selectedId: string | null;
onSelect: (id: string | null) => void;
onUpdateElement: (id: string, patch: Partial
{/* Label Preview 标题 + 网格/预览/缩放 */}
);
}
/** Preview only: no grid, no rulers, no drag; scale to fit. */
export function LabelPreviewOnly({
template,
canvasBorder,
maxWidth = 480,
previewAsPrinted = false,
highlightElementId = null,
previewRulerUnit = "cm",
printOrientation = "vertical",
}: {
template: LabelTemplate;
canvasBorder?: 'none' | 'line' | 'dotted';
maxWidth?: number;
/** 标签新建/编辑：与模板编辑器画布同坐标系，按元素真实字号与框尺寸渲染 */
previewAsPrinted?: boolean;
/** 画布当前选中元素 id：在预览中高亮其框架位置 */
highlightElementId?: string | null;
/** 选中框尺寸读数单位（与编辑器预览标尺一致） */
previewRulerUnit?: PreviewRulerDisplayUnit;
/** 横打时内容整体旋转 90°，纸张尺寸不变；未传时读 template.printOrientation */
printOrientation?: PrintOrientation;
}) {
const effectivePrintOrientation =
printOrientation ?? template.printOrientation ?? 'vertical';
/** 画布 = 模板 width×height×unit（如 2inch×2inch → 192×192px），控件 x/y/width/height 与编辑区 1:1 */
const baseW = unitToPx(Number(template.width) || 0, template.unit);
const baseH = unitToPx(Number(template.height) || 0, template.unit);
const scaleToFit =
maxWidth > 0
? Math.min(maxWidth / baseW, maxWidth / baseH, previewAsPrinted ? 3 : 2)
: 1;
const displayW = baseW * scaleToFit;
const displayH = baseH * scaleToFit;
const effectiveCanvasBorder = canvasBorder ?? template.border ?? 'none';
const previewBorderClass =
effectiveCanvasBorder === 'line'
? 'border border-gray-500'
: effectiveCanvasBorder === 'dotted'
? 'border border-dotted border-gray-500'
: 'border border-transparent';
// 与编辑区一致：内层 baseW×baseH，transformOrigin 0 0 缩放，保证位置/样式一致
return (
Label Preview
{/* Canvas Container：底层灰底铺满可视区，内容层可滚动 */}
{onPrintOrientationChange ? (
{Math.round(scale * 100)}%
{onResetZoom ? (
) : null}
{/* 标尺交汇角：仅占位，不渲染背景/边框/拖拽控件 */}
{
if (suppressCanvasClickDeselectRef.current) {
suppressCanvasClickDeselectRef.current = false;
return;
}
// 点击画布空白处取消选中
const target = e.target as HTMLElement;
const isOnElement = target.closest('[id^="element-"]');
const isOnResizeHandle = target.closest('[data-element-resize-handle="true"]');
const isOnPaperResize =
target.closest('[data-paper-resize-handle="true"]') ||
target.closest('[title*="Drag to resize paper"]') ||
target.closest('[title*="Drag to increase paper height"]') ||
target.closest('[title*="Drag to increase paper width"]');
if (!isOnElement && !isOnResizeHandle && !isOnPaperResize) {
onSelect(null);
}
}}
onPointerDown={(e) => {
// 空白处按下即开始平移（在画布内且未点到元素/纸张拖拽条）
const target = e.target as HTMLElement;
const isOnElement = target.closest('[id^="element-"]');
const isOnResizeHandle = target.closest('[data-element-resize-handle="true"]');
const isOnPaperResize =
target.closest('[data-paper-resize-handle="true"]') ||
target.closest('[title*="Drag to resize paper"]') ||
target.closest('[title*="Drag to increase paper height"]') ||
target.closest('[title*="Drag to increase paper width"]');
const isOnCanvasArea = canvasRef.current?.contains(target);
if (isOnCanvasArea && !isOnElement && !isOnResizeHandle && !isOnPaperResize && !dragRef.current && !resizeRef.current) {
if (isSpacePressed || e.button === 1) {
e.preventDefault();
e.stopPropagation();
setIsPanning(true);
panOffsetStartRef.current = {
x: panOffset.x,
y: panOffset.y,
startX: e.clientX,
startY: e.clientY,
};
panStartRef.current = {
x: e.clientX,
y: e.clientY,
scrollLeft: scrollContainerRef.current?.scrollLeft ?? 0,
scrollTop: scrollContainerRef.current?.scrollTop ?? 0,
};
(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
}
}
}}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
onKeyDown={handleKeyDown}
>
{/* 选中元素对齐参考线：延伸至画布四边，蓝色虚线 */}
{selectedElementLive
? (() => {
const el = selectedElementLive;
const lineCls = "pointer-events-none absolute z-[2] border-blue-600";
return (
<>
);
})()
: null}
{template.elements.map((el) => {
const effectiveEl = mergeLabelElementLivePatch(el, liveElementPatch);
const isPrintField = isPrintInputElement(el);
const isSelected = selectedId === el.id;
return (
beginElementResize(e, selectedElementLive.id, handleId)
}
/>
) : null}
{
e.stopPropagation();
onSelect(el.id);
}}
onPointerDown={(e) => handlePointerDown(e, el.id)}
>
);
})}
{selectedElementLive ? (
{template.elements.map((el) => {
const isPrintField = isPrintInputElement(el);
const isHighlighted = highlightElementId === el.id;
return (