@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/layers/controls/rotate-control/rotate-control.svelte

@@ -1,90 +1,175 @@
-<script lang="ts" module>
-	import type { Layer } from '../../../types.js';
-
-	interface Props {
-		layer: Layer;
-	}
-</script>
-
 <script lang="ts">
 	import RotateIcon from 'lucide-svelte/icons/refresh-cw';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import {
+		calculateGroupRotatedBoundingBox,
+		calculateLayerTransform,
+		type Transform,
+	} from '../../utils.js';
+	import type { Layer } from '../../../types.js';
 
-	let { layer = $bindable() }: Props = $props();
+	const type = 'rotate';
 
 	const editor = getPresentationEditorContext();
 
 	let element: HTMLElement | null = $state(null);
 
+	let initial: {
+		clientX: number;
+		clientY: number;
+		bbox: Transform;
+		layers: (Layer & { state: Layer })[];
+	} | null = null;
+	const actionId = editor.generateId();
+	let currentRotate = 0;
+
+	/**
+	 * Normalize the rotation angle to be between -180 and 180 degrees.
+	 *
+	 * @param rotate - The rotation angle in degrees.
+	 * @returns The normalized rotation angle.
+	 */
+	const normalizeRotation = (rotate: number) => {
+		// Adjust the rotation to be within the range of 0 to 360 degrees
+		const adjustedRotate = (rotate + 360) % 360;
+		// If the adjusted rotation is greater than or equal to 180, subtract 360 to bring it within the range of -180 to 180
+		return adjustedRotate >= 180 ? adjustedRotate - 360 : adjustedRotate;
+	};
+
 	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		console.log('rotate', 'mousedown', layer.id);
-		editor.activeAction = {
-			type: 'rotate',
-			cursor: 'cursor-grabbing',
+		console.log(type, 'mousedown', e);
+
+		if (!editor.activeLayers.length) return;
+		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
-			layer: { ...layer },
+			bbox:
+				editor.activeLayers.length === 1
+					? calculateLayerTransform(editor.activeLayers[0])
+					: calculateGroupRotatedBoundingBox(
+							editor.activeLayers.map(calculateLayerTransform),
+							editor.activeGroupRotate,
+						),
+			layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 		};
+		editor.activeAction = { id: actionId, type, cursor: 'cursor-grabbing' };
+		currentRotate = initial.bbox.rotate;
 		addEventListener('mousemove', onMouseMove);
 		addEventListener('mouseup', onMouseUp);
 	};
 
-	const onMouseUp = () => {
-		console.log('rotate', 'mouseup', layer.id);
-		if (editor.activeAction && editor.activeAction.layer.rotate !== layer.rotate) {
-			if (editor.checkIfLayerInBounds(layer)) {
-				editor.historyPush({
-					type: 'layer',
-					layer: { id: layer.id, type: layer.type },
-					undo: { rotate: editor.activeAction.layer.rotate },
-					redo: { rotate: layer.rotate },
-				});
-			}
-		}
-		editor.activeAction = null;
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(type, 'mouseup', e);
 		removeEventListener('mousemove', onMouseMove);
 		removeEventListener('mouseup', onMouseUp);
+
+		if (editor.activeAction?.id !== actionId) return;
+		editor.activeAction = null;
+		if (!initial || currentRotate === initial.bbox.rotate) return;
+
+		editor.historyPush({
+			type: 'layersGroup',
+			actions: initial.layers.map((layer) => {
+				if (editor.isLayerOutOfBounds(layer.state)) {
+					return {
+						type: 'layersRemove',
+						slideId: editor.activeSlide.id,
+						layers: [layer],
+					};
+				} else {
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { x: layer.x, y: layer.y, rotate: layer.rotate },
+						redo: { x: layer.state.x, y: layer.state.y, rotate: layer.state.rotate },
+					};
+				}
+			}),
+		});
 	};
 
 	const onMouseMove = (e: MouseEvent) => {
-		if (!editor.activeAction || !element) return;
+		if (!initial || editor.activeAction?.id !== actionId || !element) return;
 
 		const slideClientRect = element.closest('[data-slide-container]')?.getBoundingClientRect();
 		if (!slideClientRect) return;
 
 		const { x: slideX, y: slideY } = slideClientRect;
 
-		const { width, height, x, y } = editor.activeAction.layer;
-		const scale = editor.activeAction.layer.scale || 1;
+		const { width, height, x, y, rotate } = initial.bbox;
 
 		// Calculate the center of the layer
-		const centerX = slideX + x * editor.zoom + (width * scale * editor.zoom) / 2;
-		const centerY = slideY + y * editor.zoom + (height * scale * editor.zoom) / 2;
+		const clientX = slideX + x * editor.zoom + (width * editor.zoom) / 2;
+		const clientY = slideY + y * editor.zoom + (height * editor.zoom) / 2;
 
 		// Calculate the current angle based on the current mouse position relative to the center of the layer
 		const currentAngle = Math.atan2(
-			(e.clientY - centerY) / editor.zoom,
-			(e.clientX - centerX) / editor.zoom,
+			(e.clientY - clientY) / editor.zoom,
+			(e.clientX - clientX) / editor.zoom,
 		);
 
 		// Convert the current angle from radians to degrees and adjust to make 0 degrees the initial position
-		let rotate = ((currentAngle * 180) / Math.PI - 90 + 360) % 360;
+		currentRotate = (currentAngle * 180) / Math.PI - 90;
 
 		// Add snapping
 		const snapThreshold = 1;
-		const remainder = rotate % 45;
+		const remainder = Math.abs(currentRotate) % 45;
 		if (remainder < snapThreshold || remainder > 45 - snapThreshold) {
-			rotate = Math.round(rotate / 45) * 45;
+			currentRotate = Math.round(currentRotate / 45) * 45;
 		}
 
-		// Normalize the rotation to be between -180 and 180 degrees
-		if (rotate >= 180) rotate -= 360;
+		currentRotate = normalizeRotation(currentRotate);
+
+		// Apply the new rotation
+		if (initial.layers.length > 1) {
+			editor.activeGroupRotate = currentRotate;
+
+			const rotateDiff = currentRotate - rotate;
+			const angle = (rotateDiff * Math.PI) / 180;
+			const centerX = x + width / 2;
+			const centerY = y + height / 2;
+
+			initial.layers.forEach((layer) => {
+				const { width, height, x, y, rotate } = calculateLayerTransform(layer);
+				// Find center of layerect
+				const layerCenterX = x + width / 2;
+				const layerCenterY = y + height / 2;
+
+				// Translate to origin
+				const dx = layerCenterX - centerX;
+				const dy = layerCenterY - centerY;
+
+				// Apply rotation
+				const rotatedX = dx * Math.cos(angle) - dy * Math.sin(angle);
+				const rotatedY = dx * Math.sin(angle) + dy * Math.cos(angle);
 
-		// Apply the new rotation to the layer
-		layer.rotate = rotate;
-		editor.activeAction.tooltip = { x: e.clientX, y: e.clientY, text: `${Math.round(rotate)}°` };
+				// Translate back
+				const newCenterX = rotatedX + centerX;
+				const newCenterY = rotatedY + centerY;
+
+				// Compute new top-left corner
+				const newX = newCenterX - width / 2;
+				const newY = newCenterY - height / 2;
+
+				const newRotate = normalizeRotation(rotate + rotateDiff);
+
+				Object.assign(layer.state, { rotate: newRotate, x: newX, y: newY });
+			});
+		} else {
+			// layer.rotate = rotate;
+			initial.layers.forEach((layer) => {
+				Object.assign(layer.state, { rotate: currentRotate });
+			});
+		}
+		editor.activeAction.tooltip = {
+			x: e.clientX,
+			y: e.clientY,
+			text: `${Math.round(currentRotate)}°`,
+		};
 	};
 </script>
 
@@ -96,7 +181,7 @@
 			onmousedown={onMouseDown}
 		></div>
 		<div
-			class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-purple-500 group-active:bg-purple-500"
+			class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors"
 			style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 		>
 			<RotateIcon class="h-4 w-4" />

package/dist/components/presentation-editor/layers/controls/rotate-control/rotate-control.svelte.d.ts

@@ -1,7 +1,3 @@
-import type { Layer } from '../../../types.js';
-interface Props {
-    layer: Layer;
-}
-declare const RotateControl: import("svelte").Component<Props, {}, "layer">;
+declare const RotateControl: import("svelte").Component<Record<string, never>, {}, "">;
 type RotateControl = ReturnType<typeof RotateControl>;
 export default RotateControl;

package/dist/components/presentation-editor/layers/controls/side-resize-control/side-resize-control.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
-	import type { ActiveAction, ImageLayer } from '../../../types.js';
+	import type { ImageLayer } from '../../../types.js';
 
 	const sideResizeControlVariants = tv({
 		slots: {
@@ -56,42 +56,63 @@
 
 	const editor = getPresentationEditorContext();
 
-	let action: (Omit<ActiveAction, 'layer'> & { layer: ImageLayer }) | null = null;
-	let isChanged = false;
-
 	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
 
+	let initial: { clientX: number; clientY: number; layer: ImageLayer } | null = null;
+	let isChanged = false;
+	const actionId = editor.generateId();
+
 	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
 		console.log(`${origin}-origin-resize`, 'mousedown', layer.id);
+
 		isChanged = false;
-		action = {
-			type: `${origin}-origin-resize`,
-			cursor: cursor(),
+		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
 			layer: { ...layer },
 		};
-		editor.activeAction = action;
+		editor.activeAction = {
+			id: actionId,
+			type: `${origin}-origin-resize`,
+			cursor: cursor(),
+		};
 		addEventListener('mousemove', onMouseMove);
 		addEventListener('mouseup', onMouseUp);
 	};
 
-	const onMouseUp = () => {
-		console.log(`${origin}-origin-resize`, 'mouseup', layer.id);
-		if (isChanged && action) {
-			if (editor.checkIfLayerInBounds(layer)) {
-				const undo = {
-					scale: action.layer.scale,
-					x: action.layer.x,
-					y: action.layer.y,
-					width: action.layer.width,
-					height: action.layer.height,
-					offsetX: action.layer.offsetX,
-					offsetY: action.layer.offsetY,
-				};
-				const redo = {
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(`${origin}-origin-resize`, 'mouseup', layer.id, e);
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+
+		if (editor.activeAction?.id !== actionId) return;
+		editor.activeAction = null;
+		if (!initial || !isChanged) return;
+
+		if (editor.isLayerOutOfBounds(layer)) {
+			editor.historyPush({
+				type: 'layersRemove',
+				slideId: editor.activeSlide.id,
+				layers: [initial.layer],
+			});
+		} else {
+			editor.historyPush({
+				type: 'layer',
+				slideId: editor.activeSlide.id,
+				layer: { id: layer.id, type: layer.type },
+				undo: {
+					scale: initial.layer.scale,
+					x: initial.layer.x,
+					y: initial.layer.y,
+					width: initial.layer.width,
+					height: initial.layer.height,
+					offsetX: initial.layer.offsetX,
+					offsetY: initial.layer.offsetY,
+				},
+				redo: {
 					scale: layer.scale,
 					x: layer.x,
 					y: layer.y,
@@ -99,37 +120,27 @@
 					height: layer.height,
 					offsetX: layer.offsetX,
 					offsetY: layer.offsetY,
-				};
-				editor.historyPush({
-					type: 'layer',
-					layer: { id: layer.id, type: layer.type },
-					undo,
-					redo,
-				});
-			}
+				},
+			});
 		}
-		action = null;
-		editor.activeAction = null;
-		removeEventListener('mousemove', onMouseMove);
-		removeEventListener('mouseup', onMouseUp);
+		initial = null;
 	};
 
 	const onMouseMove = async (e: MouseEvent) => {
-		if (!action) return;
+		if (!initial || editor.activeAction?.id !== actionId) return;
 
 		isChanged = true;
-		const { clientX, clientY } = action;
-		const { width, height, x, y } = action.layer;
-		const scale = action.layer.scale || 1;
-		const rotate = action.layer.rotate || 0;
-		const offsetX = action.layer.offsetX || 0;
-		const offsetY = action.layer.offsetY || 0;
+		const { width, height, x, y, flipX, flipY } = initial.layer;
+		const scale = initial.layer.scale || 1;
+		const rotate = initial.layer.rotate || 0;
+		const offsetX = initial.layer.offsetX || 0;
+		const offsetY = initial.layer.offsetY || 0;
 
 		const angle = (rotate * Math.PI) / 180;
-		const xDiff = (e.clientX - clientX) / editor.zoom;
-		const yDiff = (e.clientY - clientY) / editor.zoom;
-		const adjustedXDiff = xDiff * Math.cos(angle) + yDiff * Math.sin(angle);
-		const adjustedYDiff = -xDiff * Math.sin(angle) + yDiff * Math.cos(angle);
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
+		const adjustedXDiff = (xDiff * Math.cos(angle) + yDiff * Math.sin(angle)) * (flipX ? -1 : 1);
+		const adjustedYDiff = (-xDiff * Math.sin(angle) + yDiff * Math.cos(angle)) * (flipY ? -1 : 1);
 
 		let newWidth = width * scale;
 		let newHeight = height * scale;
@@ -137,8 +148,8 @@
 		let newOffsetX = offsetX;
 		let newOffsetY = offsetY;
 		const snapping = 10;
-		if (origin === 'left') {
-			newWidth += adjustedXDiff;
+		if ((origin === 'left' && !flipX) || (origin === 'right' && flipX)) {
+			newWidth = Math.max(newWidth + adjustedXDiff, 10);
 			const maxWidth = layer.image.width - offsetX;
 			const maxWidthDiff = maxWidth * scale - newWidth;
 			if (Math.abs(maxWidthDiff) < snapping) {
@@ -147,8 +158,8 @@
 				newScale = newWidth / maxWidth;
 				newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
 			}
-		} else if (origin === 'top') {
-			newHeight += adjustedYDiff;
+		} else if ((origin === 'top' && !flipY) || (origin === 'bottom' && flipY)) {
+			newHeight = Math.max(newHeight + adjustedYDiff, 10);
 			const maxHeight = layer.image.height - offsetY;
 			const maxHeightDiff = maxHeight * scale - newHeight;
 			if (Math.abs(maxHeightDiff) < snapping) {
@@ -157,9 +168,10 @@
 				newScale = newHeight / maxHeight;
 				newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
 			}
-		} else if (origin === 'right') {
-			newWidth -= adjustedXDiff;
-			newOffsetX += adjustedXDiff / scale;
+		} else if ((origin === 'right' && !flipX) || (origin === 'left' && flipX)) {
+			const adjustedDiff = Math.min(adjustedXDiff, newWidth - 10);
+			newWidth -= adjustedDiff;
+			newOffsetX += adjustedDiff / scale;
 			if (Math.abs(newOffsetX * scale) < snapping) {
 				newOffsetX = 0;
 				newWidth = (width + offsetX) * scale;
@@ -168,9 +180,10 @@
 				newScale = newWidth / (width + offsetX);
 				newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
 			}
-		} else if (origin === 'bottom') {
-			newHeight -= adjustedYDiff;
-			newOffsetY += adjustedYDiff / scale;
+		} else if ((origin === 'bottom' && !flipY) || (origin === 'top' && flipY)) {
+			const adjustedDiff = Math.min(adjustedYDiff, newHeight - 10);
+			newHeight -= adjustedDiff;
+			newOffsetY += adjustedDiff / scale;
 			if (Math.abs(newOffsetY * scale) < snapping) {
 				newOffsetY = 0;
 				newHeight = (height + offsetY) * scale;
@@ -180,8 +193,6 @@
 				newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
 			}
 		}
-		newWidth = Math.max(newWidth, 10);
-		newHeight = Math.max(newHeight, 10);
 
 		const { newX, newY } = calculateNewPosition(
 			origin,

package/dist/components/presentation-editor/layers/controls/side-resize-control/side-resize-control.svelte.d.ts

@@ -32,61 +32,7 @@ declare const sideResizeControlVariants: import("tailwind-variants").TVReturnTyp
     handler: string;
     grip: string;
     cursor: string;
-}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        top: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        bottom: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-    };
-}, {
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        top: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        bottom: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-    };
-}>, {
+}, undefined, {
     origin: {
         right: {
             base: string;
@@ -150,61 +96,7 @@ declare const sideResizeControlVariants: import("tailwind-variants").TVReturnTyp
     handler: string;
     grip: string;
     cursor: string;
-}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        top: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        bottom: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-    };
-}, {
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        top: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-        bottom: {
-            base: string;
-            handler: string;
-            grip: string;
-            cursor: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown, undefined>>;
 type Origin = VariantProps<typeof sideResizeControlVariants>['origin'];
 interface Props {
     origin: NonNullable<Origin>;

package/dist/components/presentation-editor/layers/controls/side-scale-control/side-scale-control.svelte

@@ -42,62 +42,74 @@
 
 	const editor = getPresentationEditorContext();
 
+	let initial: { clientX: number; clientY: number; layer: HtmlLayer } | null = null;
 	let isChanged = false;
+	const actionId = editor.generateId();
 
 	const { base, handler, cursor } = sideScaleControlVariants({ origin });
 
 	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
 		console.log(`${origin}-origin-scale`, 'mousedown', layer.id);
 		isChanged = false;
-		editor.activeAction = {
-			type: `${origin}-origin-scale`,
-			cursor: cursor(),
+		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
 			layer: { ...layer },
 		};
+		editor.activeAction = {
+			id: actionId,
+			type: `${origin}-origin-scale`,
+			cursor: cursor(),
+		};
 		addEventListener('mousemove', onMouseMove);
 		addEventListener('mouseup', onMouseUp);
 	};
 
-	const onMouseUp = () => {
-		console.log(`${origin}-origin-scale`, 'mouseup', layer.id);
-		if (isChanged && editor.activeAction) {
-			if (editor.checkIfLayerInBounds(layer)) {
-				const undo = {
-					x: editor.activeAction.layer.x,
-					y: editor.activeAction.layer.y,
-					width: editor.activeAction.layer.width,
-					height: editor.activeAction.layer.height,
-				};
-				const redo = { x: layer.x, y: layer.y, width: layer.width, height: layer.height };
-				editor.historyPush({
-					type: 'layer',
-					layer: { id: layer.id, type: layer.type },
-					undo,
-					redo,
-				});
-			}
-		}
-		editor.activeAction = null;
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(`${origin}-origin-scale`, 'mouseup', layer.id, e);
 		removeEventListener('mousemove', onMouseMove);
 		removeEventListener('mouseup', onMouseUp);
+
+		if (editor.activeAction?.id !== actionId) return;
+		editor.activeAction = null;
+		if (!initial || !isChanged) return;
+
+		if (editor.isLayerOutOfBounds(layer)) {
+			editor.historyPush({
+				type: 'layersRemove',
+				slideId: editor.activeSlide.id,
+				layers: [initial.layer],
+			});
+		} else {
+			editor.historyPush({
+				type: 'layer',
+				slideId: editor.activeSlide.id,
+				layer: { id: layer.id, type: layer.type },
+				undo: {
+					x: initial.layer.x,
+					y: initial.layer.y,
+					width: initial.layer.width,
+					height: initial.layer.height,
+				},
+				redo: { x: layer.x, y: layer.y, width: layer.width, height: layer.height },
+			});
+		}
+		initial = null;
 	};
 
 	const onMouseMove = async (e: MouseEvent) => {
-		if (!editor.activeAction) return;
+		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		isChanged = true;
-		const { clientX, clientY } = editor.activeAction;
-		const { width, height, x, y } = editor.activeAction.layer;
-		const scale = editor.activeAction.layer.scale || 1;
-		const rotate = editor.activeAction.layer.rotate || 0;
+		const { width, height, x, y } = initial.layer;
+		const scale = initial.layer.scale || 1;
+		const rotate = initial.layer.rotate || 0;
 
 		const angle = (rotate * Math.PI) / 180;
-		const xDiff = (e.clientX - clientX) / editor.zoom;
-		const yDiff = (e.clientY - clientY) / editor.zoom;
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
 		const adjustedXDiff = xDiff * Math.cos(angle) + yDiff * Math.sin(angle);
 
 		let newWidth = width * scale;
@@ -107,6 +119,7 @@
 			newWidth += adjustedXDiff;
 		}
 		newWidth = Math.max(newWidth, 10);
+		isChanged = newWidth !== width * scale;
 
 		layer.width = newWidth / scale;
 		await tick();
@@ -135,7 +148,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="h-4 w-1.5 rounded-sm bg-white transition-colors group-hover:bg-purple-500 group-active:bg-purple-500"
+		class="group-hover:bg-primary group-active:bg-primary h-4 w-1.5 rounded-sm bg-white transition-colors"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>