RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: stable background blur previews in settings

This commit is contained in:
Maze Winther 2026-04-13 21:56:18 +02:00
parent 2c344fa01d
commit 11ee0dbf27
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/components/editor/panels/assets/views/settings/background.tsx
View File

@ -17,23 +17,24 @@ import { colors } from "@/data/colors/solid";
import { syntaxUIGradients } from "@/data/colors/syntax-ui"; import { syntaxUIGradients } from "@/data/colors/syntax-ui";
import { useEditor } from "@/hooks/use-editor"; import { useEditor } from "@/hooks/use-editor";
import { effectPreviewService } from "@/services/renderer/effect-preview"; import { effectPreviewService } from "@/services/renderer/effect-preview";
import type { TCanvasSize } from "@/lib/project/types";
import { cn } from "@/utils/ui"; import { cn } from "@/utils/ui";
const BLUR_PREVIEW_UNIFORM_DIMENSIONS = {
width: 1920,
height: 1080,
} as const;
const BlurPreview = memo( const BlurPreview = memo(
({ ({
blur, blur,
canvasSize,
isSelected, isSelected,
onSelect, onSelect,
}: { }: {
blur: { label: string; value: number }; blur: { label: string; value: number };
canvasSize: TCanvasSize;
isSelected: boolean; isSelected: boolean;
onSelect: () => void; onSelect: () => void;
}) => { }) => {
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const { width, height } = canvasSize;
useEffect(() => { useEffect(() => {
const renderPreview = () => { const renderPreview = () => {
@ -43,13 +44,13 @@ const BlurPreview = memo(
effectType: "blur", effectType: "blur",
params: { intensity: blur.value }, params: { intensity: blur.value },
targetCanvas: canvasRef.current, targetCanvas: canvasRef.current,
uniformDimensions: { width, height }, uniformDimensions: BLUR_PREVIEW_UNIFORM_DIMENSIONS,
}); });
}; };
renderPreview(); renderPreview();
return effectPreviewService.onPreviewImageReady({ callback: renderPreview }); return effectPreviewService.onPreviewImageReady({ callback: renderPreview });
}, [blur.value, width, height]); }, [blur.value]);
return ( return (
<button <button
@ -169,7 +170,6 @@ export function BackgroundContent() {
const currentBackgroundColor = isColorBackground const currentBackgroundColor = isColorBackground
? (activeProject.settings.background as { color: string }).color ? (activeProject.settings.background as { color: string }).color
: DEFAULT_BACKGROUND_COLOR; : DEFAULT_BACKGROUND_COLOR;
const canvasSize = activeProject.settings.canvasSize;
const blurPreviews = useMemo( const blurPreviews = useMemo(
() => () =>
@ -177,12 +177,11 @@ export function BackgroundContent() {
<BlurPreview <BlurPreview
key={blur.value} key={blur.value}
blur={blur} blur={blur}
canvasSize={canvasSize}
isSelected={isBlurBackground && currentBlurIntensity === blur.value} isSelected={isBlurBackground && currentBlurIntensity === blur.value}
onSelect={() => handleBlurSelect(blur.value)} onSelect={() => handleBlurSelect(blur.value)}
/> />
)), )),
[canvasSize, isBlurBackground, currentBlurIntensity, handleBlurSelect], [isBlurBackground, currentBlurIntensity, handleBlurSelect],
); );
return ( return (