External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

increase zoom of buttons + refactor

Browse Source
This commit is contained in:
Maze Winther
2026-02-02 19:14:37 +01:00
parent c3f0d640ef
commit e88a059222
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+7 -5
View File
@@ -51,11 +51,13 @@ export function TimelineToolbar({
setZoomLevel: ({ zoom }: { zoom: number }) => void; setZoomLevel: ({ zoom }: { zoom: number }) => void;
}) { }) {
const handleZoom = ({ direction }: { direction: "in" | "out" }) => { const handleZoom = ({ direction }: { direction: "in" | "out" }) => {
const zoomFactor = 1.25;
const newZoomLevel = const newZoomLevel =
direction === "in" direction === "in"
? Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, zoomLevel * zoomFactor) ? Math.min(
: Math.max(minZoom, zoomLevel / zoomFactor); TIMELINE_CONSTANTS.ZOOM_MAX,
zoomLevel * TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR,
)
: Math.max(minZoom, zoomLevel / TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR);
setZoomLevel({ zoom: newZoomLevel }); setZoomLevel({ zoom: newZoomLevel });
}; };
@@ -297,7 +299,7 @@ function ToolbarRightSection({
type="button" type="button"
onClick={() => onZoom({ direction: "out" })} onClick={() => onZoom({ direction: "out" })}
> >
<HugeiconsIcon icon={SearchAddIcon} /> <HugeiconsIcon icon={SearchMinusIcon} />
</Button> </Button>
<Slider <Slider
className="w-28" className="w-28"
@@ -315,7 +317,7 @@ function ToolbarRightSection({
type="button" type="button"
onClick={() => onZoom({ direction: "in" })} onClick={() => onZoom({ direction: "in" })}
> >
<HugeiconsIcon icon={SearchMinusIcon} /> <HugeiconsIcon icon={SearchAddIcon} />
</Button> </Button>
</div> </div>
</div> </div>
apps/web/src/constants/timeline-constants.tsx
+1 -3
View File
@@ -35,12 +35,10 @@ export const TRACK_GAP = 4;
export const TIMELINE_CONSTANTS = { export const TIMELINE_CONSTANTS = {
PIXELS_PER_SECOND: 50, PIXELS_PER_SECOND: 50,
DEFAULT_ELEMENT_DURATION: 5, DEFAULT_ELEMENT_DURATION: 5,
PLAYHEAD_LOOKAHEAD_SECONDS: 30, // padding ahead
PADDING_TOP_PX: 0, PADDING_TOP_PX: 0,
ZOOM_LEVELS: [0.1, 0.25, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 10, 15, 20, 30, 50],
ZOOM_MIN: 0.1, ZOOM_MIN: 0.1,
ZOOM_MAX: 100, ZOOM_MAX: 100,
ZOOM_STEP: 0.1, ZOOM_BUTTON_FACTOR: 1.7,
} as const; } as const;
export const DEFAULT_TIMELINE_VIEW_STATE: TTimelineViewState = { export const DEFAULT_TIMELINE_VIEW_STATE: TTimelineViewState = {
apps/web/src/lib/timeline/zoom-utils.ts
+2 -2
View File
@@ -53,8 +53,8 @@ export function getZoomPercent({
} }
/** /**
* Convert linear slider position (0-1) to exponential zoom level. * convert linear slider position (0-1) to exponential zoom level.
* At low slider values, zoom changes are small. At high values, changes are large. * at low slider values, zoom changes are small. at high values, changes are large.
*/ */
export function sliderToZoom({ export function sliderToZoom({
sliderPosition, sliderPosition,