diff options
| -rw-r--r-- | components/selection.tsx | 3 | ||||
| -rw-r--r-- | pages/editor.tsx | 15 |
2 files changed, 14 insertions, 4 deletions
diff --git a/components/selection.tsx b/components/selection.tsx index ad86f9f..a039f79 100644 --- a/components/selection.tsx +++ b/components/selection.tsx @@ -65,6 +65,7 @@ function Corner(props: { export default function Selection(props: { width: number; height: number; + frameWidth: number; left?: slideTypes; right?: slideTypes; className?: string; @@ -73,7 +74,7 @@ export default function Selection(props: { return <div className={'selection ' + props.className} style={{ - width: props.width, + width: `calc(var(--zoom) * ${props.frameWidth} * 1px + 12px)`, height: props.height, '--corner-size': small ? '6px' : '12px', } as CSSProperties} diff --git a/pages/editor.tsx b/pages/editor.tsx index dc74699..5b032c8 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -342,12 +342,13 @@ function TimelineEditor(props: { y1: 0, x2: 0, y2: 0, + startingFrame: 0, + frameWidth: 0, config: { mass: 0.5, tension: 500, friction: 20 }, })); var selectionRef = useRef(null); useDrag(({ xy: [x, y], initial: [bx, by], first, last, movement: [ox, oy] }) => { if (props.selectedTool != 'cursor') return; - // var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1); 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); @@ -367,13 +368,17 @@ function TimelineEditor(props: { var x2 = x1 + Math.abs(sx); var y2 = y1 + Math.abs(sy); + var zoom = zoomToPx(timelineZoom); + var frameWidth = Math.abs(sx) / zoom; + var startingFrame = x1 / zoom; + if (!selectionActive) setSelectionActive(true); if (last) { setSelectionActive(false); if (distanceTraveled <= minDistance) setSelectionHidden(true); } - selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2 }); + selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2, startingFrame, frameWidth }); }, { domTarget: selectionRef, eventOptions: { passive: false } }); return <> @@ -424,10 +429,14 @@ function TimelineEditor(props: { <div id='selection' className='posabs dispinbl' - style={{ left: selectionPos.x1.toJSON() - 6, top: selectionPos.y1.toJSON() - 6 }} + style={{ + left: `calc(var(--zoom) * ${selectionPos.startingFrame.toJSON()} * 1px - 6px)`, + top: selectionPos.y1.toJSON() - 6, + }} children={<Selection className={'' + (selectionActive ? 'active ' : '') + (selectionHidden ? 'hidden ' : '')} width={selectionPos.x2.toJSON() - selectionPos.x1.toJSON() + 12} + frameWidth={selectionPos.frameWidth.toJSON()} height={selectionPos.y2.toJSON() - selectionPos.y1.toJSON() + 12} />} /> |