diff options
Diffstat (limited to 'apps/web/src/components/editor/panels/preview')
| -rw-r--r-- | apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx | 18 | ||||
| -rw-r--r-- | apps/web/src/components/editor/panels/preview/transform-handles.tsx | 8 |
2 files changed, 14 insertions, 12 deletions
diff --git a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx index fdd4055d..26649b26 100644 --- a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx +++ b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx @@ -56,7 +56,7 @@ export function TextEditOverlay({ }, [editor.timeline, trackId, elementId]); const handleKeyDown = useCallback( - (event: React.KeyboardEvent) => { + ({ event }: { event: React.KeyboardEvent }) => { const { key } = event; if (key === "Escape") { event.preventDefault(); @@ -98,10 +98,13 @@ export function TextEditOverlay({ const fontWeight = element.fontWeight === "bold" ? "bold" : "normal"; const fontStyle = element.fontStyle === "italic" ? "italic" : "normal"; const letterSpacing = element.letterSpacing ?? 0; - const backgroundColor = - element.background.color === "transparent" - ? "transparent" - : element.background.color; + const shouldShowBackground = + element.background.enabled && + element.background.color && + element.background.color !== "transparent"; + const backgroundColor = shouldShowBackground + ? element.background.color + : "transparent"; return ( <div @@ -134,13 +137,12 @@ export function TextEditOverlay({ backgroundColor, minHeight: displayFontSize * lineHeight, textDecoration: element.textDecoration ?? "none", - padding: - backgroundColor === "transparent" ? 0 : TEXT_BACKGROUND_PADDING, + padding: shouldShowBackground ? TEXT_BACKGROUND_PADDING : 0, minWidth: 1, }} onInput={handleInput} onBlur={onCommit} - onKeyDown={handleKeyDown} + onKeyDown={(event) => handleKeyDown({ event })} > {element.content || ""} </div> diff --git a/apps/web/src/components/editor/panels/preview/transform-handles.tsx b/apps/web/src/components/editor/panels/preview/transform-handles.tsx index 976c3019..2fcf8096 100644 --- a/apps/web/src/components/editor/panels/preview/transform-handles.tsx +++ b/apps/web/src/components/editor/panels/preview/transform-handles.tsx @@ -23,7 +23,7 @@ const CORNERS: Corner[] = [ "bottom-right", ]; -function getCornerPosition({ +export function getCornerPosition({ bounds, corner, }: { @@ -47,7 +47,7 @@ function getCornerPosition({ }; } -function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): { +export function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): { x: number; y: number; } { @@ -61,7 +61,7 @@ function getRotationHandlePosition({ bounds }: { bounds: ElementBounds }): { }; } -function getOverlayContext({ +export function getOverlayContext({ canvasRef, containerRef, }: { @@ -196,7 +196,7 @@ function BoundingBoxOutline({ height: outlineHeight, transform: `rotate(${rotation}deg)`, transformOrigin: "center center", - border: "1px solid white", + border: "1px dashed white", boxSizing: "border-box", opacity: 0.75, }} |