diff options
Diffstat (limited to 'apps/web/src/components/editor')
| -rw-r--r-- | apps/web/src/components/editor/preview-panel.tsx | 20 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline/index.tsx | 36 |
2 files changed, 44 insertions, 12 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 639858d0..5d038d0f 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,22 @@ 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..078f1258 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -552,7 +552,7 @@ export function Timeline() { {/* Timeline Ruler */} <div - className="flex-1 relative overflow-hidden h-4" + className="flex-1 relative overflow-hidden h-10" onWheel={(e) => { // Check if this is horizontal scrolling - if so, don't handle it here if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) { @@ -567,7 +567,7 @@ export function Timeline() { <ScrollArea className="w-full" ref={rulerScrollRef}> <div ref={rulerRef} - className="relative h-4 select-none cursor-default" + className="relative h-10 select-none cursor-default" style={{ width: `${dynamicTimelineWidth}px`, }} @@ -601,13 +601,17 @@ export function Timeline() { return ( <div key={i} - className={`absolute top-0 bottom-0 ${ + className={`absolute top-0 h-4 ${ isMainMarker ? "border-l border-muted-foreground/40" : "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> |