Skip to content

fix(editor): show scissors cursor when clip tool is active #1218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 17, 2025
Merged

fix(editor): show scissors cursor when clip tool is active #1218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d4445e9
fix(editor): show scissors cursor when clip tool is active
Enejivk Oct 17, 2025
6051381
adding space after the if statement
Enejivk Oct 17, 2025
3df0bbe
use cut cursor for all tracks
Brendonovich Oct 17, 2025
bf521a6
improve cursor image
Brendonovich Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,8 @@ export function ClipTrack(
const hasMultipleRecordingSegments = () =>
editorInstance.recordings.segments.length > 1;

const split = () => editorState.timeline.interactMode === "split";

return (
<TrackRoot ref={props.ref}>
<For each={segments()}>
Expand Down Expand Up @@ -406,6 +408,7 @@ export function ClipTrack(
onMouseDown={(downEvent) => {
const start = segment.start;

if (split()) return;
const maxSegmentDuration =
editorInstance.recordings.segments[
segment.recordingSegment ?? 0
Expand Down Expand Up @@ -496,6 +499,7 @@ export function ClipTrack(
onMouseDown={(downEvent) => {
const end = segment.end;

if (split()) return;
const maxSegmentDuration =
editorInstance.recordings.segments[
segment.recordingSegment ?? 0
Expand Down
3 changes: 3 additions & 0 deletions apps/desktop/src/routes/editor/Timeline/Track.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export function SegmentRoot(
) => void;
},
) {
const { editorState } = useEditorContext();
const translateX = useSegmentTranslateX(() => props.segment);
const width = useSegmentWidth(() => props.segment);

Expand All @@ -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={{
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/routes/editor/Timeline/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)`,
}}
>
Expand Down
11 changes: 11 additions & 0 deletions apps/desktop/src/routes/editor/Timeline/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,14 @@
animation: wobble 1s ease-in-out infinite;
will-change: transform;
}

.timeline-scissors-cursor {
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;
}