diff options
| -rw-r--r-- | apps/web/src/components/editor/panels/assets/views/settings/background.tsx | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx index bbceac7d..72883e35 100644 --- a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx +++ b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx @@ -17,23 +17,24 @@ import { colors } from "@/data/colors/solid"; import { syntaxUIGradients } from "@/data/colors/syntax-ui";
import { useEditor } from "@/hooks/use-editor";
import { effectPreviewService } from "@/services/renderer/effect-preview";
-import type { TCanvasSize } from "@/lib/project/types";
import { cn } from "@/utils/ui";
+const BLUR_PREVIEW_UNIFORM_DIMENSIONS = {
+ width: 1920,
+ height: 1080,
+} as const;
+
const BlurPreview = memo(
({
blur,
- canvasSize,
isSelected,
onSelect,
}: {
blur: { label: string; value: number };
- canvasSize: TCanvasSize;
isSelected: boolean;
onSelect: () => void;
}) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
- const { width, height } = canvasSize;
useEffect(() => {
const renderPreview = () => {
@@ -43,13 +44,13 @@ const BlurPreview = memo( effectType: "blur",
params: { intensity: blur.value },
targetCanvas: canvasRef.current,
- uniformDimensions: { width, height },
+ uniformDimensions: BLUR_PREVIEW_UNIFORM_DIMENSIONS,
});
};
renderPreview();
return effectPreviewService.onPreviewImageReady({ callback: renderPreview });
- }, [blur.value, width, height]);
+ }, [blur.value]);
return (
<button
@@ -169,7 +170,6 @@ export function BackgroundContent() { const currentBackgroundColor = isColorBackground
? (activeProject.settings.background as { color: string }).color
: DEFAULT_BACKGROUND_COLOR;
- const canvasSize = activeProject.settings.canvasSize;
const blurPreviews = useMemo(
() =>
@@ -177,12 +177,11 @@ export function BackgroundContent() { <BlurPreview
key={blur.value}
blur={blur}
- canvasSize={canvasSize}
isSelected={isBlurBackground && currentBlurIntensity === blur.value}
onSelect={() => handleBlurSelect(blur.value)}
/>
)),
- [canvasSize, isBlurBackground, currentBlurIntensity, handleBlurSelect],
+ [isBlurBackground, currentBlurIntensity, handleBlurSelect],
);
return (
|