From d4445e993acbea54bc376ee258b2aba8b9b05d41 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 17 Oct 2025 04:52:30 +0100 Subject: [PATCH 1/4] fix(editor): show scissors cursor when clip tool is active --- apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx | 5 +++++ apps/desktop/src/routes/editor/Timeline/styles.css | 10 ++++++++++ 2 files changed, 15 insertions(+) diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx index 4ab4faf989..24dbbeab5d 100644 --- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx +++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx @@ -195,6 +195,8 @@ export function ClipTrack( const hasMultipleRecordingSegments = () => editorInstance.recordings.segments.length > 1; + const split = () => editorState.timeline.interactMode === "split"; + return ( @@ -351,6 +353,7 @@ export function ClipTrack( isSelected() ? "wobble-wrapper border-gray-12" : "border-transparent", + split() ? "timeline-scissors-cursor" : "", )} innerClass="ring-blue-9" segment={relativeSegment} @@ -406,6 +409,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const start = segment.start; + if(split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 @@ -496,6 +500,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const end = segment.end; + if(split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 diff --git a/apps/desktop/src/routes/editor/Timeline/styles.css b/apps/desktop/src/routes/editor/Timeline/styles.css index 191e25f0d2..67458d2ef4 100644 --- a/apps/desktop/src/routes/editor/Timeline/styles.css +++ b/apps/desktop/src/routes/editor/Timeline/styles.css @@ -12,3 +12,13 @@ animation: wobble 1s ease-in-out infinite; will-change: transform; } + +.timeline-scissors-cursor { + cursor: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 2.5C3.15905 2.5 1.66666 3.99238 1.66666 5.83333C1.66666 7.67428 3.15905 9.16667 5 9.16667C5.85421 9.16667 6.63337 8.84536 7.22322 8.317L9.74771 10L7.22322 11.683C6.63337 11.1546 5.85421 10.8333 5 10.8333C3.15905 10.8333 1.66666 12.3257 1.66666 14.1667C1.66666 16.0076 3.15905 17.5 5 17.5C6.84095 17.5 8.33333 16.0076 8.33333 14.1667C8.33333 13.7822 8.26824 13.4129 8.14846 13.0692L18.6556 6.06446C18.1451 5.29858 17.1103 5.09162 16.3444 5.60221L11.25 8.99846L8.14846 6.93075C8.26824 6.5871 8.33333 6.21782 8.33333 5.83333C8.33333 3.99238 6.84095 2.5 5 2.5ZM3.33333 5.83333C3.33333 4.91286 4.07952 4.16667 5 4.16667C5.92047 4.16667 6.66666 4.91286 6.66666 5.83333C6.66666 6.75381 5.92047 7.5 5 7.5C4.07952 7.5 3.33333 6.75381 3.33333 5.83333ZM3.33333 14.1667C3.33333 13.2462 4.07952 12.5 5 12.5C5.92047 12.5 6.66666 13.2462 6.66666 14.1667C6.66666 15.0871 5.92047 15.8333 5 15.8333C4.07952 15.8333 3.33333 15.0871 3.33333 14.1667Z' fill='%23ffffff'/%3E%3Cpath d='M16.3444 14.3978L12.0012 11.5023L13.5035 10.5008L18.6556 13.9355C18.1451 14.7014 17.1103 14.9084 16.3444 14.3978Z' fill='%23ffffff'/%3E%3C/svg%3E") + 10 10, + crosshair; +} + +.timeline-scissors-cursor * { + cursor: inherit; +} From 6051381db96b463be8429f1faaf32f96dc11dd9f Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 17 Oct 2025 05:10:02 +0100 Subject: [PATCH 2/4] adding space after the if statement --- apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx index 24dbbeab5d..907f67b372 100644 --- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx +++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx @@ -409,7 +409,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const start = segment.start; - if(split()) return; + if (split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 @@ -500,7 +500,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const end = segment.end; - if(split()) return; + if (split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 From 3df0bbe666a8c32ddc0af9c8aa41cb87fde90f60 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Fri, 17 Oct 2025 14:54:09 +0800 Subject: [PATCH 3/4] use cut cursor for all tracks --- apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx | 1 - apps/desktop/src/routes/editor/Timeline/Track.tsx | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx index 907f67b372..434717b137 100644 --- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx +++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx @@ -353,7 +353,6 @@ export function ClipTrack( isSelected() ? "wobble-wrapper border-gray-12" : "border-transparent", - split() ? "timeline-scissors-cursor" : "", )} innerClass="ring-blue-9" segment={relativeSegment} diff --git a/apps/desktop/src/routes/editor/Timeline/Track.tsx b/apps/desktop/src/routes/editor/Timeline/Track.tsx index 293431aca5..c5581ecc94 100644 --- a/apps/desktop/src/routes/editor/Timeline/Track.tsx +++ b/apps/desktop/src/routes/editor/Timeline/Track.tsx @@ -55,6 +55,7 @@ export function SegmentRoot( ) => void; }, ) { + const { editorState } = useEditorContext(); const translateX = useSegmentTranslateX(() => props.segment); const width = useSegmentWidth(() => props.segment); @@ -64,6 +65,8 @@ export function SegmentRoot( {...props} class={cx( "absolute overflow-hidden border rounded-xl inset-y-0", + editorState.timeline.interactMode === "split" && + "timeline-scissors-cursor", props.class, )} style={{ From bf521a6189539584ac4ae8de15151df0b6435af8 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Fri, 17 Oct 2025 14:54:44 +0800 Subject: [PATCH 4/4] improve cursor image --- apps/desktop/src/routes/editor/Timeline/index.tsx | 2 +- apps/desktop/src/routes/editor/Timeline/styles.css | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/desktop/src/routes/editor/Timeline/index.tsx b/apps/desktop/src/routes/editor/Timeline/index.tsx index e9ec6690c2..0a2d73c94d 100644 --- a/apps/desktop/src/routes/editor/Timeline/index.tsx +++ b/apps/desktop/src/routes/editor/Timeline/index.tsx @@ -243,7 +243,7 @@ export function Timeline() { style={{ left: `${TIMELINE_PADDING}px`, transform: `translateX(${ - (time() - transform().position) / secsPerPixel() + (time() - transform().position) / secsPerPixel() - 0.5 }px)`, }} > diff --git a/apps/desktop/src/routes/editor/Timeline/styles.css b/apps/desktop/src/routes/editor/Timeline/styles.css index 67458d2ef4..fcf1312df8 100644 --- a/apps/desktop/src/routes/editor/Timeline/styles.css +++ b/apps/desktop/src/routes/editor/Timeline/styles.css @@ -14,11 +14,12 @@ } .timeline-scissors-cursor { - cursor: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 2.5C3.15905 2.5 1.66666 3.99238 1.66666 5.83333C1.66666 7.67428 3.15905 9.16667 5 9.16667C5.85421 9.16667 6.63337 8.84536 7.22322 8.317L9.74771 10L7.22322 11.683C6.63337 11.1546 5.85421 10.8333 5 10.8333C3.15905 10.8333 1.66666 12.3257 1.66666 14.1667C1.66666 16.0076 3.15905 17.5 5 17.5C6.84095 17.5 8.33333 16.0076 8.33333 14.1667C8.33333 13.7822 8.26824 13.4129 8.14846 13.0692L18.6556 6.06446C18.1451 5.29858 17.1103 5.09162 16.3444 5.60221L11.25 8.99846L8.14846 6.93075C8.26824 6.5871 8.33333 6.21782 8.33333 5.83333C8.33333 3.99238 6.84095 2.5 5 2.5ZM3.33333 5.83333C3.33333 4.91286 4.07952 4.16667 5 4.16667C5.92047 4.16667 6.66666 4.91286 6.66666 5.83333C6.66666 6.75381 5.92047 7.5 5 7.5C4.07952 7.5 3.33333 6.75381 3.33333 5.83333ZM3.33333 14.1667C3.33333 13.2462 4.07952 12.5 5 12.5C5.92047 12.5 6.66666 13.2462 6.66666 14.1667C6.66666 15.0871 5.92047 15.8333 5 15.8333C4.07952 15.8333 3.33333 15.0871 3.33333 14.1667Z' fill='%23ffffff'/%3E%3Cpath d='M16.3444 14.3978L12.0012 11.5023L13.5035 10.5008L18.6556 13.9355C18.1451 14.7014 17.1103 14.9084 16.3444 14.3978Z' fill='%23ffffff'/%3E%3C/svg%3E") - 10 10, - crosshair; + cursor: + url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision'%3E%3Cg transform='rotate(90 10 10)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 2.5C3.15905 2.5 1.66666 3.99238 1.66666 5.83333C1.66666 7.67428 3.15905 9.16667 5 9.16667C5.85421 9.16667 6.63337 8.84536 7.22322 8.317L9.74771 10L7.22322 11.683C6.63337 11.1546 5.85421 10.8333 5 10.8333C3.15905 10.8333 1.66666 12.3257 1.66666 14.1667C1.66666 16.0076 3.15905 17.5 5 17.5C6.84095 17.5 8.33333 16.0076 8.33333 14.1667C8.33333 13.7822 8.26824 13.4129 8.14846 13.0692L18.6556 6.06446C18.1451 5.29858 17.1103 5.09162 16.3444 5.60221L11.25 8.99846L8.14846 6.93075C8.26824 6.5871 8.33333 6.21782 8.33333 5.83333C8.33333 3.99238 6.84095 2.5 5 2.5ZM3.33333 5.83333C3.33333 4.91286 4.07952 4.16667 5 4.16667C5.92047 4.16667 6.66666 4.91286 6.66666 5.83333C6.66666 6.75381 5.92047 7.5 5 7.5C4.07952 7.5 3.33333 6.75381 3.33333 5.83333ZM3.33333 14.1667C3.33333 13.2462 4.07952 12.5 5 12.5C5.92047 12.5 6.66666 13.2462 6.66666 14.1667C6.66666 15.0871 5.92047 15.8333 5 15.8333C4.07952 15.8333 3.33333 15.0871 3.33333 14.1667Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/%3E%3Cpath d='M16.3444 14.3978L12.0012 11.5023L13.5035 10.5008L18.6556 13.9355C18.1451 14.7014 17.1103 14.9084 16.3444 14.3978Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E") + 12 12, + crosshair; } .timeline-scissors-cursor * { - cursor: inherit; + cursor: inherit; }