fix: improve psd template layer interactions
This commit is contained in:
Your Name
parent
25d331fa51
commit
5e7809687c
@ -258,6 +258,8 @@ const PREVIEW_STAGE_TARGET_WIDTH = 760;
|
||||
const PREVIEW_STAGE_TARGET_HEIGHT = 760;
|
||||
const MIN_IMAGE_SCALE = 0.4;
|
||||
const MAX_IMAGE_SCALE = 3;
|
||||
const SELECTED_LAYER_INTERACTION_Z_BOOST = 1;
|
||||
const SELECTED_LAYER_CONTROLS_Z_BOOST = 1000;
|
||||
const MIN_TEXT_POSITION_OFFSET = -5000;
|
||||
const MAX_TEXT_POSITION_OFFSET = 5000;
|
||||
const UNASSIGNED_BRAND_LABEL = "未分类";
|
||||
@ -2204,7 +2206,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 0, -1)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -2213,7 +2215,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() => nudgeLayerPositionOffset(selectedLayer.id, -1, 0)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -2221,7 +2223,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
←
|
||||
</Button>
|
||||
<Button
|
||||
className="h-9 rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 justify-self-center rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() => resetLayerPositionOffset(selectedLayer.id)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -2229,7 +2231,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
归零
|
||||
</Button>
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 1, 0)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -2238,7 +2240,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 0, 1)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -2469,7 +2471,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() =>
|
||||
nudgeImagePlacementOffset(selectedImageLayer.id, 0, -1)
|
||||
}
|
||||
@ -2480,7 +2482,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() =>
|
||||
nudgeImagePlacementOffset(selectedImageLayer.id, -1, 0)
|
||||
}
|
||||
@ -2490,7 +2492,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
←
|
||||
</Button>
|
||||
<Button
|
||||
className="h-9 rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 justify-self-center rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() =>
|
||||
updateImagePlacement(selectedImageLayer.id, (current) => ({
|
||||
...current,
|
||||
@ -2504,7 +2506,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
归零
|
||||
</Button>
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() =>
|
||||
nudgeImagePlacementOffset(selectedImageLayer.id, 1, 0)
|
||||
}
|
||||
@ -2515,7 +2517,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
<div />
|
||||
<Button
|
||||
className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
|
||||
onClick={() =>
|
||||
nudgeImagePlacementOffset(selectedImageLayer.id, 0, 1)
|
||||
}
|
||||
@ -4065,9 +4067,17 @@ export function AgentPsdTemplateEditorDialog({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-hidden"
|
||||
className="pointer-events-auto absolute overflow-hidden"
|
||||
key={layer.id}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setSelectedLayerId(layer.id);
|
||||
}}
|
||||
onPointerDown={(event) =>
|
||||
handleLayerDragStart(layer, event)
|
||||
}
|
||||
style={assignedImageContainerStyle}
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
>
|
||||
<img
|
||||
alt={layer.layerName}
|
||||
@ -4110,11 +4120,6 @@ export function AgentPsdTemplateEditorDialog({
|
||||
);
|
||||
}
|
||||
|
||||
const isSelected = selectedLayerId === layer.id;
|
||||
if (isSelected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value =
|
||||
effectiveTextAssignments[layer.id] ?? "";
|
||||
const resolvedTextColor =
|
||||
@ -4134,9 +4139,17 @@ export function AgentPsdTemplateEditorDialog({
|
||||
if (!shouldUseEditedPreview && layer.sourceUrl) {
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-hidden"
|
||||
className="pointer-events-auto absolute overflow-hidden"
|
||||
key={layer.id}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setSelectedLayerId(layer.id);
|
||||
}}
|
||||
onPointerDown={(event) =>
|
||||
handleTextDragStart(layer, event)
|
||||
}
|
||||
style={layerBoxStyle}
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
>
|
||||
<img
|
||||
alt={layer.layerName}
|
||||
@ -4162,8 +4175,15 @@ export function AgentPsdTemplateEditorDialog({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-visible"
|
||||
className="pointer-events-auto absolute overflow-visible"
|
||||
key={layer.id}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setSelectedLayerId(layer.id);
|
||||
}}
|
||||
onPointerDown={(event) =>
|
||||
handleTextDragStart(layer, event)
|
||||
}
|
||||
style={{
|
||||
left:
|
||||
layer.x +
|
||||
@ -4177,7 +4197,14 @@ export function AgentPsdTemplateEditorDialog({
|
||||
textFrame.offsetY,
|
||||
width: textFrame.width,
|
||||
height: textFrame.height,
|
||||
cursor:
|
||||
textDragStateRef.current?.layerId ===
|
||||
layer.id
|
||||
? "grabbing"
|
||||
: "grab",
|
||||
touchAction: "none",
|
||||
}}
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
>
|
||||
{renderTextLayerPreviewContent(
|
||||
layer,
|
||||
@ -4203,17 +4230,17 @@ export function AgentPsdTemplateEditorDialog({
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
<div
|
||||
aria-label={`普通图层 ${layer.layerName}`}
|
||||
className="absolute overflow-hidden rounded-lg transition-all"
|
||||
className="pointer-events-none absolute overflow-hidden rounded-lg transition-all"
|
||||
key={`static-layer-frame-${layer.id}`}
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
onPointerDown={(event) =>
|
||||
handleLayerDragStart(layer, event)
|
||||
}
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: baseZIndex + (isSelected ? 100 : 0),
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
(isSelected
|
||||
? SELECTED_LAYER_INTERACTION_Z_BOOST
|
||||
: 0),
|
||||
background: isSelected
|
||||
? "rgba(255,255,255,0.05)"
|
||||
: "transparent",
|
||||
@ -4221,11 +4248,10 @@ export function AgentPsdTemplateEditorDialog({
|
||||
layerDragStateRef.current?.layerId ===
|
||||
layer.id
|
||||
? "grabbing"
|
||||
: "grab",
|
||||
: "grab",
|
||||
touchAction: "none",
|
||||
}}
|
||||
title={`普通图层：${layer.layerName}`}
|
||||
type="button"
|
||||
>
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
{layer.layerName}
|
||||
@ -4234,7 +4260,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
<Move className="h-3 w-3" />
|
||||
拖动图层
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -4259,16 +4285,13 @@ export function AgentPsdTemplateEditorDialog({
|
||||
return isSelected && hasAssignedImage ? (
|
||||
<div
|
||||
aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
|
||||
className="absolute overflow-hidden rounded-lg transition-all"
|
||||
className="pointer-events-none absolute overflow-hidden rounded-lg transition-all"
|
||||
key={layer.id}
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
onPointerDown={(event) =>
|
||||
handleLayerDragStart(layer, event)
|
||||
}
|
||||
role="button"
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: baseZIndex + 120,
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
SELECTED_LAYER_INTERACTION_Z_BOOST,
|
||||
background: "rgba(249,115,22,0.08)",
|
||||
cursor:
|
||||
layerDragStateRef.current?.layerId ===
|
||||
@ -4277,7 +4300,6 @@ export function AgentPsdTemplateEditorDialog({
|
||||
: "grab",
|
||||
touchAction: "none",
|
||||
}}
|
||||
tabIndex={0}
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
>
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
@ -4299,7 +4321,11 @@ export function AgentPsdTemplateEditorDialog({
|
||||
}
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: baseZIndex + (isSelected ? 120 : 0),
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
(isSelected
|
||||
? SELECTED_LAYER_INTERACTION_Z_BOOST
|
||||
: 0),
|
||||
background: isSelected
|
||||
? "rgba(249,115,22,0.08)"
|
||||
: "transparent",
|
||||
@ -4365,7 +4391,9 @@ export function AgentPsdTemplateEditorDialog({
|
||||
) -
|
||||
44
|
||||
),
|
||||
zIndex: baseZIndex + 140,
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
SELECTED_LAYER_CONTROLS_Z_BOOST,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
@ -4451,15 +4479,13 @@ export function AgentPsdTemplateEditorDialog({
|
||||
if (isSelected) {
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-visible rounded-lg"
|
||||
className="pointer-events-none absolute overflow-visible rounded-lg"
|
||||
key={layer.id}
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
onPointerDown={(event) =>
|
||||
handleTextDragStart(layer, event)
|
||||
}
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: baseZIndex + 160,
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
SELECTED_LAYER_INTERACTION_Z_BOOST,
|
||||
background: "transparent",
|
||||
cursor:
|
||||
textDragStateRef.current?.layerId ===
|
||||
@ -4523,7 +4549,11 @@ export function AgentPsdTemplateEditorDialog({
|
||||
}
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: baseZIndex + (isSelected ? 160 : 0),
|
||||
zIndex:
|
||||
baseZIndex +
|
||||
(isSelected
|
||||
? SELECTED_LAYER_INTERACTION_Z_BOOST
|
||||
: 0),
|
||||
background: isSelected
|
||||
? "rgba(56,189,248,0.05)"
|
||||
: "transparent",
|
||||
@ -4693,8 +4723,10 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</div>
|
||||
) : selectedImageLayer ? (
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pr-1">
|
||||
<div className="sticky top-0 z-20 -mx-1 bg-[#0a0a0a]/95 px-1 pb-3 backdrop-blur-md">
|
||||
{selectedImageAdjustmentPanel}
|
||||
</div>
|
||||
{selectedLayerPositionPanel}
|
||||
{selectedImageAdjustmentPanel}
|
||||
{textLayerQuickColorPanel}
|
||||
</div>
|
||||
) : selectedTextLayer ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user