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

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

* adding space after the if statement

* use cut cursor for all tracks

* improve cursor image

Author: Enejivk

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 (
 		<TrackRoot ref={props.ref}>
 			<For each={segments()}>
@@ -406,6 +408,7 @@ export function ClipTrack(
 									onMouseDown={(downEvent) => {
 										const start = segment.start;
 
+										if (split()) return;
 										const maxSegmentDuration =
 											editorInstance.recordings.segments[
 												segment.recordingSegment ?? 0
@@ -496,6 +499,7 @@ export function ClipTrack(
 									onMouseDown={(downEvent) => {
 										const end = segment.end;
 
+										if (split()) return;
 										const maxSegmentDuration =
 											editorInstance.recordings.segments[
 												segment.recordingSegment ?? 0

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={{

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)`,
 							}}
 						>

apps/desktop/src/routes/editor/Timeline/styles.css

@@ -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;
+}