From cac5bd9fafc86b4d08f553b7bdc3229d5acec325 Mon Sep 17 00:00:00 2001 From: "kevinguevaradevia@gmail.com" Date: Tue, 2 Jun 2026 23:27:50 -0500 Subject: [PATCH] fix: Repair blend mode stacking context in canvas and display mode in live preview --- src/components/express/builder/BuilderCanvas.tsx | 7 ++----- src/utils/expressCompiler.ts | 2 ++ 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/express/builder/BuilderCanvas.tsx b/src/components/express/builder/BuilderCanvas.tsx index aa24e42..80dda68 100644 --- a/src/components/express/builder/BuilderCanvas.tsx +++ b/src/components/express/builder/BuilderCanvas.tsx @@ -222,6 +222,7 @@ export const BuilderCanvas: React.FC = () => { // z-index from array position: index 0 = back, last = front // Dragging/selected get temporary boost to stay on top during interaction zIndex: isDraggingField ? 1000 : isSelected ? 999 : idx + 1, + mixBlendMode: field.style.blendMode && field.style.blendMode !== 'normal' ? field.style.blendMode as any : undefined, }} > {/* Field box */} @@ -367,10 +368,7 @@ const BrandVariableContent: React.FC<{ field: TemplateField; designMD: DesignMD; src={designMD.logoUrl} alt="Logo" className="max-w-full max-h-full object-contain pointer-events-none p-1" - style={{ - opacity: (field.style.opacity ?? 100) / 100, - mixBlendMode: field.style.blendMode as any, - }} + style={{ opacity: (field.style.opacity ?? 100) / 100 }} /> ); } @@ -391,7 +389,6 @@ const BrandVariableContent: React.FC<{ field: TemplateField; designMD: DesignMD; objectFit: objectFit as any, backgroundColor: objectFit === 'contain' ? (bgColor || 'transparent') : 'transparent', opacity: (field.style.opacity ?? 100) / 100, - mixBlendMode: field.style.blendMode as any, }} muted loop diff --git a/src/utils/expressCompiler.ts b/src/utils/expressCompiler.ts index 92b6aa5..b3649e3 100644 --- a/src/utils/expressCompiler.ts +++ b/src/utils/expressCompiler.ts @@ -356,6 +356,7 @@ export function compileExpressToTimeline( blendMode: field.style.blendMode, layerId, isBrandElement: field.nature === 'brand-variable', + brandDisplayMode: 'overlay', isLocked: field.nature === 'static', elementName: field.label, // Placeholder mode for empty media fields @@ -429,6 +430,7 @@ export function compileExpressToTimeline( opacity: field.style.opacity ?? 100, layerId, isBrandElement: field.type === 'logo', + brandDisplayMode: 'overlay', isLocked: false, elementName: field.label, // Placeholder mode for empty media fields