kevinguevara/brandly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Scale element borders, shadows and blurs dynamically based on resolution

Browse Source
This commit is contained in:
kevinguevaradevia@gmail.com
2026-06-02 22:31:27 -05:00
parent 32a993d6a9
commit dc6cab57bd
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/composition/CompositionElement.tsx
+9 -4
View File
@@ -1,5 +1,6 @@
import React, { RefObject, useEffect } from 'react';
import { Sequence, AbsoluteFill, Img, Video, Audio } from '../../engine/components';
import { useVideoConfig } from '../../engine/player';
import { interpolate } from '../../engine/animation';
import { TimelineElement, TimelineLayer, DesignMD } from '../../types';
import { calculateElementTransitions } from './useTransitions';
@@ -56,6 +57,9 @@ export const CompositionElement: React.FC<CompositionElementProps> = ({
if (fontFamily) loadGoogleFont(fontFamily);
}, [fontFamily]);
const { width } = useVideoConfig();
const scaleFactor = width / 1080;
// In image mode: all non-locked elements are interactive (Photoshop model)
// In video mode: only elements on the active layer are interactive
const isInteractive = isImageMode
@@ -128,7 +132,8 @@ export const CompositionElement: React.FC<CompositionElementProps> = ({
const ckTolerance = el.chromaKeyTolerance ?? 30;
const ckSoftness = el.chromaKeySoftness ?? 10;
const filterStr = `brightness(${el.brightness ?? 100}%) contrast(${el.contrast ?? 100}%) saturate(${el.saturation ?? 100}%)${el.hueRotate ? ` hue-rotate(${el.hueRotate}deg)` : ''}${el.sepia ? ` sepia(${el.sepia}%)` : ''}${el.blurAmount ? ` blur(${el.blurAmount}px)` : ''}`;
const scaledBlurAmount = (el.blurAmount ?? 0) * scaleFactor;
const filterStr = `brightness(${el.brightness ?? 100}%) contrast(${el.contrast ?? 100}%) saturate(${el.saturation ?? 100}%)${el.hueRotate ? ` hue-rotate(${el.hueRotate}deg)` : ''}${el.sepia ? ` sepia(${el.sepia}%)` : ''}${scaledBlurAmount ? ` blur(${scaledBlurAmount}px)` : ''}`;
// Contain background: wrap media in a colored container when objectFit='contain' and color is set
const hasContainBg = (el.objectFit === 'contain' || !el.objectFit) && !!el.containBgColor;
@@ -341,11 +346,11 @@ export const CompositionElement: React.FC<CompositionElementProps> = ({
outlineOffset: `${6 / currentScale}px`,
pointerEvents: isInteractive || isSelected ? 'auto' : 'none',
mixBlendMode: resolvedBlendMode !== 'normal' ? resolvedBlendMode as React.CSSProperties['mixBlendMode'] : undefined,
border: el.borderWidth ? `${el.borderWidth}px ${el.borderStyle ?? 'solid'} ${el.borderColor ?? '#ffffff'}` : undefined,
borderRadius: el.borderRadius ? `${el.borderRadius}px` : undefined,
border: el.borderWidth ? `${el.borderWidth * scaleFactor}px ${el.borderStyle ?? 'solid'} ${el.borderColor ?? '#ffffff'}` : undefined,
borderRadius: el.borderRadius ? `${el.borderRadius * scaleFactor}px` : undefined,
overflow: (el.height || el.borderRadius) ? 'hidden' : undefined,
boxShadow: el.boxShadowBlur || el.boxShadowX || el.boxShadowY
? `${el.boxShadowX ?? 0}px ${el.boxShadowY ?? 4}px ${el.boxShadowBlur ?? 10}px ${el.boxShadowColor ?? 'rgba(0,0,0,0.5)'}`
? `${(el.boxShadowX ?? 0) * scaleFactor}px ${(el.boxShadowY ?? 4) * scaleFactor}px ${(el.boxShadowBlur ?? 10) * scaleFactor}px ${el.boxShadowColor ?? 'rgba(0,0,0,0.5)'}`
: undefined,
}}
onClick={(e) => { e.stopPropagation(); }}