Fix trimming behavior (#1273)

* Basic visual feedback working

* Added trimming feedback

* fixing copilot error

* fixing change from code rabbit

* fixing change from code rabbit

* fix: clean up code formatting and remove unused imports

* fixed code rabbit review

* Final improvements
- Conslidated drag states into one 'startHandleDrag'
signal, focusing on deriving states like isDragging instead of using
independent signals.
- Limited offset to >=0, so dragging to the left
uses previous behaviour

---------

Co-authored-by: Brendan Allan <brendonovich@outlook.com>

Author: Enejivk

apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx

@@ -8,9 +8,10 @@ import {
 	createEffect,
 	createMemo,
 	createRoot,
+	createSignal,
 	For,
 	Match,
-	mergeProps,
+	onCleanup,
 	Show,
 	Switch,
 } from "solid-js";
@@ -204,18 +205,40 @@ export function ClipTrack(
 		>
 			<For each={segments()}>
 				{(segment, i) => {
-					const prevDuration = () =>
-						segments()
-							.slice(0, i())
-							.reduce((t, s) => t + (s.end - s.start) / s.timescale, 0);
-
-					const relativeSegment = mergeProps(segment, () => ({
-						start: prevDuration(),
-						end: segment.end - segment.start + prevDuration(),
-					}));
+					const [startHandleDrag, setStartHandleDrag] = createSignal<null | {
+						offset: number;
+						initialStart: number;
+					}>(null);
+
+					const prefixOffsets = createMemo(() => {
+						const segs = segments();
+						const out: number[] = new Array(segs.length);
+						let sum = 0;
+						for (let k = 0; k < segs.length; k++) {
+							out[k] = sum;
+							sum += (segs[k].end - segs[k].start) / segs[k].timescale;
+						}
+						return out;
+					});
+					const prevDuration = createMemo(() => prefixOffsets()[i()] ?? 0);
+
+					const relativeSegment = createMemo(() => {
+						const ds = startHandleDrag();
+						const offset = ds ? ds.offset / segment.timescale : 0;
+
+						return {
+							start: Math.max(prevDuration() + offset, 0),
+							end:
+								prevDuration() +
+								offset +
+								(segment.end - segment.start) / segment.timescale,
+							timescale: segment.timescale,
+							recordingSegment: segment.recordingSegment,
+						};
+					});
 
-					const segmentX = useSegmentTranslateX(() => relativeSegment);
-					const segmentWidth = useSegmentWidth(() => relativeSegment);
+					const segmentX = useSegmentTranslateX(relativeSegment);
+					const segmentWidth = useSegmentWidth(relativeSegment);
 
 					const segmentRecording = (s = i()) =>
 						editorInstance.recordings.segments[
@@ -360,7 +383,7 @@ export function ClipTrack(
 										: "border-transparent",
 								)}
 								innerClass="ring-blue-9"
-								segment={relativeSegment}
+								segment={relativeSegment()}
 								onMouseDown={(e) => {
 									e.stopPropagation();
 
@@ -465,9 +488,14 @@ export function ClipTrack(
 									position="start"
 									class="opacity-0 group-hover:opacity-100"
 									onMouseDown={(downEvent) => {
-										const start = segment.start;
-
 										if (split()) return;
+
+										const initialStart = segment.start;
+										setStartHandleDrag({
+											offset: 0,
+											initialStart,
+										});
+
 										const maxSegmentDuration =
 											editorInstance.recordings.segments[
 												segment.recordingSegment ?? 0
@@ -498,35 +526,51 @@ export function ClipTrack(
 
 										function update(event: MouseEvent) {
 											const newStart =
-												start +
-												(event.clientX - downEvent.clientX) * secsPerPixel();
+												initialStart +
+												(event.clientX - downEvent.clientX) *
+													secsPerPixel() *
+													segment.timescale;
+
+											const clampedStart = Math.min(
+												Math.max(
+													newStart,
+													prevSegmentIsSameClip ? prevSegment.end : 0,
+													segment.end - maxDuration,
+												),
+												segment.end - 1,
+											);
+
+											setStartHandleDrag({
+												offset: clampedStart - initialStart,
+												initialStart,
+											});
 
 											setProject(
 												"timeline",
 												"segments",
 												i(),
 												"start",
-												Math.min(
-													Math.max(
-														newStart,
-														prevSegmentIsSameClip ? prevSegment.end : 0,
-														segment.end - maxDuration,
-													),
-													segment.end - 1,
-												),
+												clampedStart,
 											);
 										}
 
 										const resumeHistory = projectHistory.pause();
 										createRoot((dispose) => {
+											onCleanup(() => {
+												resumeHistory();
+												console.log("NUL");
+												setStartHandleDrag(null);
+												onHandleReleased();
+											});
+
 											createEventListenerMap(window, {
 												mousemove: update,
 												mouseup: (e) => {
-													dispose();
-													resumeHistory();
 													update(e);
-													onHandleReleased();
+													dispose();
 												},
+												blur: () => dispose(),
+												mouseleave: () => dispose(),
 											});
 										});
 									}}
@@ -583,9 +627,11 @@ export function ClipTrack(
 												: false;
 
 										function update(event: MouseEvent) {
-											const newEnd =
-												end +
-												(event.clientX - downEvent.clientX) * secsPerPixel();
+											const deltaRecorded =
+												(event.clientX - downEvent.clientX) *
+												secsPerPixel() *
+												segment.timescale;
+											const newEnd = end + deltaRecorded;
 
 											setProject(
 												"timeline",
@@ -595,7 +641,8 @@ export function ClipTrack(
 												Math.max(
 													Math.min(
 														newEnd,
-														segment.end + availableTimelineDuration,
+														// availableTimelineDuration is in timeline seconds; convert to recorded seconds
+														end + availableTimelineDuration * segment.timescale,
 														nextSegmentIsSameClip
 															? nextSegment.start
 															: maxSegmentDuration,
@@ -615,6 +662,16 @@ export function ClipTrack(
 													update(e);
 													onHandleReleased();
 												},
+												blur: () => {
+													dispose();
+													resumeHistory();
+													onHandleReleased();
+												},
+												mouseleave: () => {
+													dispose();
+													resumeHistory();
+													onHandleReleased();
+												},
 											});
 										});
 									}}
@@ -716,7 +773,7 @@ function CutOffsetButton(props: {
 			{props.value === 0 ? (
 				<IconCapScissors class="size-3.5" />
 			) : (
-				<>{formatTime(props.value)}</>
+				formatTime(props.value)
 			)}
 		</button>
 	);