diff options
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/editor/preview-panel.tsx | 22 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline/index.tsx | 30 | ||||
| -rw-r--r-- | apps/web/src/components/landing/handlebars.tsx | 4 |
3 files changed, 45 insertions, 11 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 639858d0..6cb06061 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -211,7 +211,7 @@ export function PreviewPanel() { setDragState({ isDragging: true, elementId: element.id, - trackId: trackId, + trackId, startX: e.clientX, startY: e.clientY, initialElementX: element.x, @@ -355,8 +355,24 @@ export function PreviewPanel() { handleTextMouseDown(e, element, elementData.track.id) } style={{ - left: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentX : element.x) / canvasSize.width) * 100}%`, - top: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentY : element.y) / canvasSize.height) * 100}%`, + left: `${ + 50 + + ( + (dragState.isDragging && dragState.elementId === element.id + ? dragState.currentX + : element.x) / canvasSize.width + ) * + 100 + }%`, + top: `${ + 50 + + ( + (dragState.isDragging && dragState.elementId === element.id + ? dragState.currentY + : element.y) / canvasSize.height + ) * + 100 + }%`, transform: `translate(-50%, -50%) rotate(${element.rotation}deg) scale(${scaleRatio})`, opacity: element.opacity, zIndex: 100 + index, // Text elements on top diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index bdb4433c..7943af06 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -607,7 +607,11 @@ export function Timeline() { : "border-l border-muted-foreground/20" }`} style={{ - left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`, + left: `${ + time * + TIMELINE_CONSTANTS.PIXELS_PER_SECOND * + zoomLevel + }px`, }} > <span @@ -624,10 +628,16 @@ export function Timeline() { const secs = seconds % 60; if (hours > 0) { - return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; + return `${hours}:${minutes + .toString() + .padStart(2, "0")}:${Math.floor(secs) + .toString() + .padStart(2, "0")}`; } if (minutes > 0) { - return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`; + return `${minutes}:${Math.floor(secs) + .toString() + .padStart(2, "0")}`; } if (interval >= 1) { return `${Math.floor(secs)}s`; @@ -710,7 +720,10 @@ export function Timeline() { <div className="relative flex-1" style={{ - height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`, + height: `${Math.max( + 200, + Math.min(800, getTotalTracksHeight(tracks)) + )}px`, width: `${dynamicTimelineWidth}px`, }} > @@ -724,7 +737,10 @@ export function Timeline() { <div className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]" style={{ - top: `${getCumulativeHeightBefore(tracks, index)}px`, + top: `${getCumulativeHeightBefore( + tracks, + index + )}px`, height: `${getTrackHeight(track.type)}px`, }} onClick={(e) => { @@ -1092,7 +1108,9 @@ function TimelineToolbar({ <TooltipTrigger asChild> <Button variant="text" size="icon" onClick={toggleRippleEditing}> <Link - className={`h-4 w-4 ${rippleEditingEnabled ? "text-primary" : ""}`} + className={`h-4 w-4 ${ + rippleEditingEnabled ? "text-primary" : "" + }`} /> </Button> </TooltipTrigger> diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx index 26cf9254..e87d50e9 100644 --- a/apps/web/src/components/landing/handlebars.tsx +++ b/apps/web/src/components/landing/handlebars.tsx @@ -62,7 +62,7 @@ export function Handlebars({ children }: HandlebarsProps) { whileDrag={{ scale: 1.1, cursor: "grabbing" }} transition={{ type: "spring", stiffness: 400, damping: 30 }} > - <div className="w-2 h-8 rounded-full bg-yellow-500"></div> + <div className="w-2 h-8 rounded-full bg-yellow-500" /> </motion.div> <motion.div @@ -81,7 +81,7 @@ export function Handlebars({ children }: HandlebarsProps) { whileDrag={{ scale: 1.1, cursor: "grabbing" }} transition={{ type: "spring", stiffness: 400, damping: 30 }} > - <div className="w-2 h-8 rounded-full bg-yellow-500"></div> + <div className="w-2 h-8 rounded-full bg-yellow-500" /> </motion.div> </div> |