diff options
| -rw-r--r-- | pages/editor.tsx | 28 |
1 files changed, 26 insertions, 2 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 5b032c8..7c51dce 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -337,6 +337,8 @@ function TimelineEditor(props: { var [selectionActive, setSelectionActive] = useState(false); var [selectionHidden, setSelectionHidden] = useState(true); + var [selectionLeftType, setSelectionLeftType] = useState(null); + var [selectionRightType, setSelectionRightType] = useState(null); var [selectionPos, selectionPosAPI] = useSpring(() => ({ x1: 0, y1: 0, @@ -351,7 +353,10 @@ function TimelineEditor(props: { if (props.selectedTool != 'cursor') return; var minDistance = 5; // minimal drag distance in pixels to register selection var distanceTraveled = Math.sqrt(ox ** 2 + oy ** 2); + if (selectionHidden && distanceTraveled > minDistance) setSelectionHidden(false); + if (selectionLeftType) setSelectionLeftType(null); + if (selectionRightType) setSelectionRightType(null); var timelineInner = document.querySelector('.timeline .timelineInner'); var timelineRects = timelineInner.getBoundingClientRect(); @@ -372,13 +377,30 @@ function TimelineEditor(props: { var frameWidth = Math.abs(sx) / zoom; var startingFrame = x1 / zoom; + selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2, startingFrame, frameWidth }); if (!selectionActive) setSelectionActive(true); if (last) { setSelectionActive(false); if (distanceTraveled <= minDistance) setSelectionHidden(true); + else { + var endingFrame = startingFrame + frameWidth; + var keyframesInSelection = workingTimeline.filter((slide: anySlide) => + slide.frame >= Math.floor(startingFrame) && slide.frame <= Math.ceil(endingFrame) + ); + + if (keyframesInSelection.length < 1) return; + var left = keyframesInSelection[0]; + var right = keyframesInSelection[keyframesInSelection.length - 1]; + selectionPosAPI.start({ + y1: 50, + y2: 62, + startingFrame: left.frame, + frameWidth: right.frame - left.frame, + }); + setSelectionLeftType(left.type); + setSelectionRightType(right.type); + } } - - selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2, startingFrame, frameWidth }); }, { domTarget: selectionRef, eventOptions: { passive: false } }); return <> @@ -438,6 +460,8 @@ function TimelineEditor(props: { width={selectionPos.x2.toJSON() - selectionPos.x1.toJSON() + 12} frameWidth={selectionPos.frameWidth.toJSON()} height={selectionPos.y2.toJSON() - selectionPos.y1.toJSON() + 12} + left={selectionLeftType} + right={selectionRightType} />} /> </div> |