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

fix: undo for resizing timeline elements

Browse Source
This commit is contained in:
Maze Winther
2025-07-21 14:46:28 +02:00
parent aeb9cfc6b8
commit a2a9bef1d8
2 changed files with 68 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/hooks/use-timeline-element-resize.ts
+40 -16
View File
@@ -29,7 +29,12 @@ export function useTimelineElementResize({
}: UseTimelineElementResizeProps) {
const [resizing, setResizing] = useState<ResizeState | null>(null);
const { mediaItems } = useMediaStore();
const { updateElementStartTime } = useTimelineStore();
const {
updateElementStartTime,
updateElementTrim,
updateElementDuration,
pushHistory,
} = useTimelineStore();
// Set up document-level mouse listeners during resize (like proper drag behavior)
useEffect(() => {
@@ -61,6 +66,9 @@ export function useTimelineElementResize({
e.stopPropagation();
e.preventDefault();
// Push history once at the start of the resize operation
pushHistory();
setResizing({
elementId,
side,
@@ -112,13 +120,14 @@ export function useTimelineElementResize({
const trimDelta = newTrimStart - resizing.initialTrimStart;
const newStartTime = element.startTime + trimDelta;
onUpdateTrim(
updateElementTrim(
track.id,
element.id,
newTrimStart,
resizing.initialTrimEnd
resizing.initialTrimEnd,
false
);
updateElementStartTime(track.id, element.id, newStartTime);
updateElementStartTime(track.id, element.id, newStartTime, false);
} else {
// Trying to extend beyond trimStart = 0
if (canExtendElementDuration()) {
@@ -128,22 +137,29 @@ export function useTimelineElementResize({
const newDuration = element.duration + extensionAmount;
// Keep trimStart at 0 and extend the element
onUpdateTrim(track.id, element.id, 0, resizing.initialTrimEnd);
onUpdateDuration(track.id, element.id, newDuration);
updateElementStartTime(track.id, element.id, newStartTime);
updateElementTrim(
track.id,
element.id,
0,
resizing.initialTrimEnd,
false
);
updateElementDuration(track.id, element.id, newDuration, false);
updateElementStartTime(track.id, element.id, newStartTime, false);
} else {
// Video/Audio: can't extend beyond original content - limit to trimStart = 0
const newTrimStart = 0;
const trimDelta = newTrimStart - resizing.initialTrimStart;
const newStartTime = element.startTime + trimDelta;
onUpdateTrim(
updateElementTrim(
track.id,
element.id,
newTrimStart,
resizing.initialTrimEnd
resizing.initialTrimEnd,
false
);
updateElementStartTime(track.id, element.id, newStartTime);
updateElementStartTime(track.id, element.id, newStartTime, false);
}
}
} else {
@@ -159,27 +175,35 @@ export function useTimelineElementResize({
const newTrimEnd = 0; // Reset trimEnd to 0 since we're extending
// Update duration first, then trim
onUpdateDuration(track.id, element.id, newDuration);
onUpdateTrim(
updateElementDuration(track.id, element.id, newDuration, false);
updateElementTrim(
track.id,
element.id,
resizing.initialTrimStart,
newTrimEnd
newTrimEnd,
false
);
} else {
// Can't extend - just set trimEnd to 0 (maximum possible extension)
onUpdateTrim(track.id, element.id, resizing.initialTrimStart, 0);
updateElementTrim(
track.id,
element.id,
resizing.initialTrimStart,
0,
false
);
}
} else {
// Normal trimming within original duration
const maxTrimEnd = element.duration - resizing.initialTrimStart - 0.1; // Leave at least 0.1s visible
const newTrimEnd = Math.max(0, Math.min(maxTrimEnd, calculated));
onUpdateTrim(
updateElementTrim(
track.id,
element.id,
resizing.initialTrimStart,
newTrimEnd
newTrimEnd,
false
);
}
}