color-synth

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

InputDragger.svelte (711B)

      1 <script lang="ts">
      2 	export let connection: { connected: Boolean; onConnect: () => void } | null;
      3 	export let controlName: string;
      4 </script>
      5 
      6 <div class="input-dragger" data-control-name={controlName}>
      7 	{#if connection}
      8 		<div
      9 			class={['connect', connection.connected && 'connected'].filter(Boolean).join(' ')}
     10 			on:mouseup={connection.onConnect}
     11 		/>
     12 	{/if}
     13 </div>
     14 
     15 <style>
     16 	.connect {
     17 		position: absolute;
     18 		background: green;
     19 		opacity: 0.5;
     20 		top: -5px;
     21 		right: -5px;
     22 		bottom: -5px;
     23 		left: -5px;
     24 	}
     25 	.input-dragger {
     26 		background: lightgreen;
     27 		position: absolute;
     28 		top: 17px;
     29 		left: 11px;
     30 		width: 16px;
     31 		height: 16px;
     32 		border-radius: 8px;
     33 	}
     34 	.connect.connected {
     35 		background: red;
     36 	}
     37 </style>