this is the sauce selection

4 files changed, 35 insertions, 6 deletions

diff --git a/components/selection.tsx b/components/selection.tsx
index d1753f0..ad86f9f 100644
--- a/components/selection.tsx
+++ b/components/selection.tsx
@@ -67,16 +67,18 @@ export default function Selection(props: {
 	height: number;
 	left?: slideTypes;
 	right?: slideTypes;
+	className?: string;
 }) {
 	var small = props.width < 24 || props.height < 24 || !props.left || !props.right;
 	return <div
-		className='selection'
+		className={'selection ' + props.className}
 		style={{
 			width: props.width,
 			height: props.height,
 			'--corner-size': small ? '6px' : '12px',
 		} as CSSProperties}
 	>
+		<div className='background posabs dispinbl a0' />
 		<div className='posabs dispinbl t0 bar top' />
 		<div className='posabs dispinbl r0 bar right' />
 		<div className='posabs dispinbl b0 bar bottom' />
diff --git a/pages/editor.tsx b/pages/editor.tsx
index f9828a1..e08d6ae 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -335,6 +335,8 @@ function TimelineEditor(props: {
 		});
 	}, []);
 
+	var [selectionActive, setSelectionActive] = useState(false);
+	var [selectionHidden, setSelectionHidden] = useState(true);
 	var [selectionPos, selectionPosAPI] = useSpring(() => ({
 		x1: 0,
 		y1: 0,
@@ -343,9 +345,13 @@ function TimelineEditor(props: {
 		config: { mass: 0.5, tension: 500, friction: 20 },
 	}));
 	var selectionRef = useRef(null);
-	useDrag(({ xy: [x, y], initial: [bx, by] }) => {
+	useDrag(({ xy: [x, y], initial: [bx, by], 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);
+
 		var timelineInner = document.querySelector('.timeline .timelineInner');
 		var timelineRects = timelineInner.getBoundingClientRect();
 		var tx = x - timelineRects.x + timelineInner.scrollLeft;
@@ -360,6 +366,13 @@ function TimelineEditor(props: {
 		var y1 = iy + Math.min(0, sy);
 		var x2 = x1 + Math.abs(sx);
 		var y2 = y1 + Math.abs(sy);
+
+		if (!selectionActive) setSelectionActive(true);
+		if (last) {
+			setSelectionActive(false);
+			if (distanceTraveled <= minDistance) setSelectionHidden(true);
+		}
+
 		selectionPosAPI.start({ x1, y1, x2, y2 });
 	}, { domTarget: selectionRef, eventOptions: { passive: false } });
 
@@ -413,6 +426,7 @@ function TimelineEditor(props: {
 					className='posabs dispinbl'
 					style={{ left: selectionPos.x1.toJSON() - 6, top: selectionPos.y1.toJSON() - 6 }}
 					children={<Selection
+						className={'' + (selectionActive ? 'active ' : '') + (selectionHidden ? 'hidden ' : '')}
 						width={selectionPos.x2.toJSON() - selectionPos.x1.toJSON() + 12}
 						height={selectionPos.y2.toJSON() - selectionPos.y1.toJSON() + 12}
 					/>}
diff --git a/styles/editor.css b/styles/editor.css
index fc56488..792db3f 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -169,9 +169,8 @@
 	width: calc(var(--zoom) * var(--total-frames) * 1px);
 }
 
-.appGrid .timeline .keyframes .selectionarea {
-	width: calc(var(--zoom) * var(--total-frames) * 1px);
-}
+.appGrid .timeline .keyframes .selectionarea { width: calc(var(--zoom) * var(--total-frames) * 1px); }
+#selection { pointer-events: none; }
 
 .appGrid .timeline .ghostArea {
 	pointer-events: none;
diff --git a/styles/selection.css b/styles/selection.css
index 6bcbd88..dc49fe6 100644
--- a/styles/selection.css
+++ b/styles/selection.css
@@ -1,7 +1,9 @@
 .selection {
 	--selection-color: var(--gruble);
 	--corner-size: 12px;
-	filter: drop-shadow(0px 0px 10px var(--selection-color));
+	filter: drop-shadow(0px 0px 16px var(--selection-color));
+	transition-duration: 100ms;
+	transition-property: transform, opacity;
 }
 
 .selection .bar.top,
@@ -27,3 +29,15 @@
 .selection .corner {
 	fill: var(--selection-color);
 }
+
+.selection.active .background { opacity: .12; }
+.selection .background {
+	background-color: var(--selection-color);
+	opacity: 0;
+	transition: opacity 200ms;
+}
+
+.selection.hidden {
+	transform: scale(0.5);
+	opacity: 0;
+}