color-synth

a synth that generates colors instead of sounds
Log | Files | Refs | README

UnitDrag.svelte (1104B)

      1 <script lang="ts">
      2 	import { unitDragging, unitStore } from '$lib/stores';
      3 	import { getUnit, type UnitId } from './types';
      4 
      5 	export let id: UnitId;
      6 
      7 	const handleMouseMove = (e: MouseEvent) => {
      8 		if (!$unitDragging) return;
      9 		const { id, initPos } = $unitDragging;
     10 		$unitDragging = {
     11 			id,
     12 			initPos,
     13 			pos: {
     14 				x: e.clientX - initPos.x,
     15 				y: e.clientY - initPos.y
     16 			}
     17 		};
     18 	};
     19 
     20 	const handleMouseUp = () => {
     21 		if (!$unitDragging) return;
     22 		const unit = getUnit(null, $unitStore, id);
     23 		unitStore.setUnit(id, { ...unit, pos: $unitDragging.pos });
     24 		$unitDragging = null;
     25 		document.removeEventListener('mousemove', handleMouseMove);
     26 		document.removeEventListener('mouseup', handleMouseUp);
     27 	};
     28 
     29 	const handleMouseDown = (e: MouseEvent) => {
     30 		e.preventDefault();
     31 		e.stopPropagation();
     32 		const initPos = { x: e.offsetX, y: e.offsetY };
     33 		$unitDragging = { initPos, pos: getUnit(null, $unitStore, id).pos, id };
     34 		document.addEventListener('mousemove', handleMouseMove);
     35 		document.addEventListener('mouseup', handleMouseUp);
     36 	};
     37 </script>
     38 
     39 <div on:mousedown={handleMouseDown}><slot /></div>