diff options
| -rw-r--r-- | pages/editor.tsx | 5 | ||||
| -rw-r--r-- | styles/editor.css | 4 |
2 files changed, 6 insertions, 3 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 972c5f4..abb7b5e 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -351,6 +351,7 @@ function TimelineEditor(props: { }, []); var [selectionActive, setSelectionActive] = useState(false); + var [selectionPlaced, setSelectionPlaced] = useState(false); var [selectionHidden, setSelectionHidden] = useState(true); var [selectionLeftType, setSelectionLeftType] = useState(null); var [selectionRightType, setSelectionRightType] = useState(null); @@ -375,6 +376,7 @@ function TimelineEditor(props: { if (selectionHidden && distanceTraveled > minDistance) setSelectionHidden(false); if (selectionLeftType) setSelectionLeftType(null); if (selectionRightType) setSelectionRightType(null); + if (selectionPlaced) setSelectionPlaced(false); selectionPosAPI.start({ center: 0, startOffset: 0, @@ -432,6 +434,7 @@ function TimelineEditor(props: { }); setSelectionLeftType(left.type); setSelectionRightType(right.type); + setSelectionPlaced(true); } } }, { domTarget: selectionRef, eventOptions: { passive: false } }); @@ -484,7 +487,7 @@ function TimelineEditor(props: { {workingTimeline.map((slide: anySlide) => <TimelineKeyframe slide={slide} />)} <div id='selection' - className='posabs dispinbl' + className={'posabs dispinbl ' + (selectionPlaced ? 'placed ' : '')} style={{ left: `calc(var(--zoom) * ${selectionPos.startingFrame.toJSON() + selectionPos.center.toJSON()} * 1px - 6px + ${selectionPos.startOffset.toJSON()} * 1px)`, diff --git a/styles/editor.css b/styles/editor.css index 1279c72..881f82c 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -175,10 +175,10 @@ width: calc(var(--zoom) * var(--total-frames) * 1px); background-color: rgba(0, 0, 255, var(--debug-hitbox-opacity)); } -#selection { +#selection.placed { cursor: grab; } -#selection:active { +#selection.placed:active { cursor: grabbing; } |