added placed class to #selection

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;
 }