xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make text scale based on preview size

Browse Source
This commit is contained in:
Maze Winther
2025-07-10 23:22:40 +02:00
parent f43021e994
commit 3d6786a587
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/components/editor/preview-panel.tsx
View File

@ -145,6 +145,8 @@ export function PreviewPanel() {
const fontClassName = const fontClassName =
FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || ""; FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || "";
const scaleRatio = previewDimensions.width / canvasSize.width;
return ( return (
<div <div
key={element.id} key={element.id}
@ -152,7 +154,7 @@ export function PreviewPanel() {
style={{ style={{
left: `${50 + (element.x / canvasSize.width) * 100}%`, left: `${50 + (element.x / canvasSize.width) * 100}%`,
top: `${50 + (element.y / canvasSize.height) * 100}%`, top: `${50 + (element.y / canvasSize.height) * 100}%`,
transform: `translate(-50%, -50%) rotate(${element.rotation}deg)`, transform: `translate(-50%, -50%) rotate(${element.rotation}deg) scale(${scaleRatio})`,
opacity: element.opacity, opacity: element.opacity,
zIndex: 100 + index, // Text elements on top zIndex: 100 + index, // Text elements on top
}} }}
@ -169,7 +171,7 @@ export function PreviewPanel() {
textDecoration: element.textDecoration, textDecoration: element.textDecoration,
padding: "4px 8px", padding: "4px 8px",
borderRadius: "2px", borderRadius: "2px",
whiteSpace: "pre-wrap", whiteSpace: "nowrap",
// Fallback for system fonts that don't have classes // Fallback for system fonts that don't have classes
...(fontClassName === "" && { fontFamily: element.fontFamily }), ...(fontClassName === "" && { fontFamily: element.fontFamily }),
}} }}