fix: preserve psd text appearance while editing
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-03-29 10:59:27 +08:00
parent a8e5252241
commit 9a1c7a8f3a

View File

@ -169,6 +169,24 @@ function getAssignedImageStyle(layer: AgentPsdTemplateImageLayerSlot): CSSProper
};
}
function hasEditedTextValue(layer: AgentPsdTemplateTextLayerSlot, value: string) {
return String(value || "").replace(/\r\n/g, "\n") !== String(layer.defaultText || "").replace(/\r\n/g, "\n");
}
function getInlineTextEditorStyle(
layer: AgentPsdTemplateTextLayerSlot,
preserveSourceAppearance: boolean
): CSSProperties {
const baseStyle = getTextLayerContentStyle(layer);
return {
...baseStyle,
background: "transparent",
color: preserveSourceAppearance ? "transparent" : layer.textColor,
caretColor: layer.textColor,
WebkitTextFillColor: preserveSourceAppearance ? "transparent" : layer.textColor,
};
}
export function AgentPsdTemplateEditorDialog({
open,
onOpenChange,
@ -618,9 +636,7 @@ export function AgentPsdTemplateEditorDialog({
}
const value = effectiveTextAssignments[layer.id] || "";
const defaultText = String(layer.defaultText || "");
const shouldUseEditedPreview =
value.trim().length > 0 && value.trim() !== defaultText.trim();
const shouldUseEditedPreview = hasEditedTextValue(layer, value);
if (!shouldUseEditedPreview && layer.sourceUrl) {
return (
@ -697,6 +713,9 @@ export function AgentPsdTemplateEditorDialog({
{orderedEditableTextLayers.map((layer) => {
const isSelected = selectedLayerId === layer.id;
const frameStyle = getLayerFrameStyle(layer, isSelected);
const currentValue = effectiveTextAssignments[layer.id] || "";
const preserveSourceAppearance =
!!layer.sourceUrl && !hasEditedTextValue(layer, currentValue);
if (isSelected) {
return (
@ -706,12 +725,21 @@ export function AgentPsdTemplateEditorDialog({
style={{
...frameStyle,
zIndex: 40,
background: "rgba(56,189,248,0.08)",
background: preserveSourceAppearance
? "transparent"
: "rgba(56,189,248,0.08)",
}}
>
{preserveSourceAppearance && layer.sourceUrl ? (
<img
src={layer.sourceUrl}
alt={layer.layerName}
className="pointer-events-none absolute inset-0 h-full w-full object-fill"
/>
) : null}
<textarea
ref={inlineTextEditorRef}
value={effectiveTextAssignments[layer.id] || ""}
value={currentValue}
onChange={(event) =>
setTextAssignments((current) => ({
...current,
@ -719,7 +747,7 @@ export function AgentPsdTemplateEditorDialog({
}))
}
className="h-full w-full resize-none border-none bg-transparent outline-none"
style={getTextLayerContentStyle(layer)}
style={getInlineTextEditorStyle(layer, preserveSourceAppearance)}
/>
<div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
{layer.layerName}