From 5a246613bd62bb6d67fd907ccb2f0e65dcdb5fb1 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 13:45:45 +0200
Subject: [PATCH 1/8] Add a radio knob

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/index.js           |  4 ++++
 src/lib/knobs/Radio.svelte | 19 +++++++++++++++++++
 src/routes/_/X.svelte      |  6 ++++++
 3 files changed, 29 insertions(+)
 create mode 100644 src/lib/knobs/Radio.svelte

diff --git a/src/lib/index.js b/src/lib/index.js
index 4221cea..26d6d62 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -7,6 +7,7 @@ import Checkbox from './knobs/Checkbox.svelte';
 import Color from './knobs/Color.svelte';
 import Range from './knobs/Range.svelte';
 import Text from './knobs/Text.svelte';
+import Radio from './knobs/Radio.svelte';
 
 let knobby;
 
@@ -81,6 +82,9 @@ export const range = knobber(Range);
 /** @type {import('./types').Knobber<string>} */
 export const text = knobber(Text);
 
+/** @type {import('./types').Knobber<string, { groupName?: string, radioOptions?: array }>} */
+export const radio = knobber(Radio);
+
 /**
  * @param {string} label
  * @param {() => void} action
diff --git a/src/lib/knobs/Radio.svelte b/src/lib/knobs/Radio.svelte
new file mode 100644
index 0000000..462bb84
--- /dev/null
+++ b/src/lib/knobs/Radio.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Knob from '../Knob.svelte';
+
+	export let label;
+	export let options;
+	export let store;
+
+</script>
+
+<Knob {label}>
+
+	{#each options.radioOptions as item, i}
+		<label>
+			<input id={item} type="radio" name={label} bind:group={$store} value={item} />
+			{item}
+		</label>
+	{/each}
+
+</Knob>
diff --git a/src/routes/_/X.svelte b/src/routes/_/X.svelte
index b720bb8..9fea1d8 100644
--- a/src/routes/_/X.svelte
+++ b/src/routes/_/X.svelte
@@ -8,6 +8,9 @@
 
 	const bg = knobby.color('background', '#DCFF7A');
 	const fg = knobby.color('foreground', '#5000C7');
+
+	const c = knobby.radio('style', 'one', { groupName: 'style', radioOptions: [ 'one', 'two', 'three' ]} );
+
 </script>
 
 <div class="x" style="--bg: {$bg}; --fg: {$fg}">
@@ -15,6 +18,9 @@
 
 	<p>a: {$a}</p>
 	<p>b: {$b}</p>
+
+	<p>c: {$c}</p>
+
 </div>
 
 <style>

From b1389cf5931e264bb00c4d59537f91b04c76b5b9 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 13:50:36 +0200
Subject: [PATCH 2/8] Minimize API

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/index.js           | 2 +-
 src/lib/knobs/Radio.svelte | 4 ++--
 src/routes/_/X.svelte      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/index.js b/src/lib/index.js
index 26d6d62..a96dce6 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -82,7 +82,7 @@ export const range = knobber(Range);
 /** @type {import('./types').Knobber<string>} */
 export const text = knobber(Text);
 
-/** @type {import('./types').Knobber<string, { groupName?: string, radioOptions?: array }>} */
+/** @type {import('./types').Knobber<string, { radioOptions?: array }>} */
 export const radio = knobber(Radio);
 
 /**
diff --git a/src/lib/knobs/Radio.svelte b/src/lib/knobs/Radio.svelte
index 462bb84..3344329 100644
--- a/src/lib/knobs/Radio.svelte
+++ b/src/lib/knobs/Radio.svelte
@@ -9,9 +9,9 @@
 
 <Knob {label}>
 
-	{#each options.radioOptions as item, i}
+	{#each options.options as item, i}
 		<label>
-			<input id={item} type="radio" name={label} bind:group={$store} value={item} />
+			<input id={item} type="radio" bind:group={$store} value={item} />
 			{item}
 		</label>
 	{/each}
diff --git a/src/routes/_/X.svelte b/src/routes/_/X.svelte
index 9fea1d8..e57bbd1 100644
--- a/src/routes/_/X.svelte
+++ b/src/routes/_/X.svelte
@@ -9,7 +9,7 @@
 	const bg = knobby.color('background', '#DCFF7A');
 	const fg = knobby.color('foreground', '#5000C7');
 
-	const c = knobby.radio('style', 'one', { groupName: 'style', radioOptions: [ 'one', 'two', 'three' ]} );
+	const c = knobby.radio('style', 'one', { options: [ 'one', 'two', 'three' ]} );
 
 </script>
 

From 055a65ee47290fb7c460c1b315b56255262286f6 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 13:51:46 +0200
Subject: [PATCH 3/8] Fix wrong reference

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/index.js b/src/lib/index.js
index a96dce6..c0c447e 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -82,7 +82,7 @@ export const range = knobber(Range);
 /** @type {import('./types').Knobber<string>} */
 export const text = knobber(Text);
 
-/** @type {import('./types').Knobber<string, { radioOptions?: array }>} */
+/** @type {import('./types').Knobber<string, { options?: array }>} */
 export const radio = knobber(Radio);
 
 /**

From d699b0eaf39b337aa4fb8695b397614c46cc0a37 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 13:54:54 +0200
Subject: [PATCH 4/8] Remove unnecessary index and consistent variable names

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/knobs/Radio.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/knobs/Radio.svelte b/src/lib/knobs/Radio.svelte
index 3344329..d592cba 100644
--- a/src/lib/knobs/Radio.svelte
+++ b/src/lib/knobs/Radio.svelte
@@ -9,10 +9,10 @@
 
 <Knob {label}>
 
-	{#each options.options as item, i}
+	{#each options.options as option}
 		<label>
-			<input id={item} type="radio" bind:group={$store} value={item} />
-			{item}
+			<input id={option} type="radio" bind:group={$store} value={option} />
+			{option}
 		</label>
 	{/each}
 

From a0aaf315dd18325ace74d331f74672cc45950533 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 14:15:03 +0200
Subject: [PATCH 5/8] Add ability to move around knobby. Make button style
 globally accessible.

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/Knobby.svelte       | 37 +++++++++++++++++++++++++++--
 src/lib/dragcoords.js       |  3 +++
 src/lib/draggable.js        | 47 +++++++++++++++++++++++++++++++++++++
 src/lib/knobs/Action.svelte | 20 +---------------
 4 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/dragcoords.js
 create mode 100644 src/lib/draggable.js

diff --git a/src/lib/Knobby.svelte b/src/lib/Knobby.svelte
index 97242e9..e985e9d 100644
--- a/src/lib/Knobby.svelte
+++ b/src/lib/Knobby.svelte
@@ -1,22 +1,33 @@
 <script>
 	export let knobs = [];
 
+	import { draggable } from './draggable.js'
+	import { dragCoords } from './dragcoords.js';
+
+	function dragMove(event) {
+		dragCoords.update($dragCoords => ([
+			$dragCoords[0] + event.detail.dx,
+			$dragCoords[1] + event.detail.dy
+		]));
+	}
+
 </script>
 
-<div class="knobby">
+<div class="knobby" style="transform: translate({$dragCoords[0]}px,{$dragCoords[1]}px)">
+	<button class="knobby-button move-button" use:draggable on:dragmove={dragMove}>Drag to move</button>
 	{#each knobs as { component, ...knob }}
 		<svelte:component this={component} {...knob} />
 	{/each}
 </div>
 
 <style>
+
 	.knobby {
 		--bg: #f4f4f4;
 		--fg: #333;
 		--light: rgba(255, 255, 255, 0.2);
 		--dark: rgba(0, 0, 0, 0.05);
 		--border-radius: 2px;
-
 		position: fixed;
 		z-index: 99999;
 		top: 1rem;
@@ -44,4 +55,26 @@
 		color: var(--fg);
 	}
 
+	:global(.knobby-button) {
+		width: calc(100% - 0.5rem);
+		border-radius: 16px;
+		background: var(--bg);
+		box-shadow: 5px 5px 5px var(--dark), -5px -5px 5px var(--light);
+		border: 1px solid var(--dark);
+		border-radius: var(--border-radius);
+		font: inherit;
+		margin: 0.5rem 0 0.5rem 0.5rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+	:global(.knobby-button:active) {
+		box-shadow: inset 2px 2px 2px var(--dark), inset -2px -2px 2px var(--light);
+	}
+
+	.move-button {
+		cursor: move;
+		display: block;
+		width: calc(100% - 1rem);
+	}
+
 </style>
diff --git a/src/lib/dragcoords.js b/src/lib/dragcoords.js
new file mode 100644
index 0000000..bde0962
--- /dev/null
+++ b/src/lib/dragcoords.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const dragCoords = writable([0,0]);
\ No newline at end of file
diff --git a/src/lib/draggable.js b/src/lib/draggable.js
new file mode 100644
index 0000000..5320b76
--- /dev/null
+++ b/src/lib/draggable.js
@@ -0,0 +1,47 @@
+export function draggable(node) {
+	let x;
+	let y;
+
+	function handleMousedown(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragstart', {
+			detail: { x, y }
+		}));
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMousemove(event) {
+		const dx = event.clientX - x;
+		const dy = event.clientY - y;
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragmove', {
+			detail: { x, y, dx, dy }
+		}));
+	}
+
+	function handleMouseup(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragend', {
+			detail: { x, y }
+		}));
+
+		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
+	}
+
+	node.addEventListener('mousedown', handleMousedown);
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+		}
+	};
+}
\ No newline at end of file
diff --git a/src/lib/knobs/Action.svelte b/src/lib/knobs/Action.svelte
index 228695b..ee1bbc8 100644
--- a/src/lib/knobs/Action.svelte
+++ b/src/lib/knobs/Action.svelte
@@ -6,23 +6,5 @@
 
 </script>
 
-<button on:click={action}>{label}</button>
+<button class="knobby-button" on:click={action}>{label}</button>
 
-<style>
-	button {
-		width: calc(100% - 0.5rem);
-		border-radius: 16px;
-		background: var(--bg);
-		box-shadow: 5px 5px 5px var(--dark), -5px -5px 5px var(--light);
-		border: 1px solid var(--dark);
-		border-radius: var(--border-radius);
-		font: inherit;
-		margin: 0.5rem 0 0.5rem 0.5rem;
-		padding: 0.25rem 0.5rem;
-	}
-
-	button:active {
-		box-shadow: inset 2px 2px 2px var(--dark), inset -2px -2px 2px var(--light);
-	}
-
-</style>

From 87f82d45271829b312c8465706a2f77d649c32f8 Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 14:39:31 +0200
Subject: [PATCH 6/8] Add a select knob

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/index.js            |  4 ++++
 src/lib/knobs/Select.svelte | 16 ++++++++++++++++
 src/routes/_/Y.svelte       |  5 +++++
 3 files changed, 25 insertions(+)
 create mode 100644 src/lib/knobs/Select.svelte

diff --git a/src/lib/index.js b/src/lib/index.js
index 4221cea..7317112 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -7,6 +7,7 @@ import Checkbox from './knobs/Checkbox.svelte';
 import Color from './knobs/Color.svelte';
 import Range from './knobs/Range.svelte';
 import Text from './knobs/Text.svelte';
+import Select from './knobs/Select.svelte';
 
 let knobby;
 
@@ -81,6 +82,9 @@ export const range = knobber(Range);
 /** @type {import('./types').Knobber<string>} */
 export const text = knobber(Text);
 
+/** @type {import('./types').Knobber<string, { options: array}>} */
+export const select = knobber(Select);
+
 /**
  * @param {string} label
  * @param {() => void} action
diff --git a/src/lib/knobs/Select.svelte b/src/lib/knobs/Select.svelte
new file mode 100644
index 0000000..03c1b9b
--- /dev/null
+++ b/src/lib/knobs/Select.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Knob from '../Knob.svelte';
+
+	export let label;
+	export let store;
+	export let options;
+
+</script>
+
+<Knob {label}>
+	<select bind:value={$store}>
+		{#each options.options as option}
+			<option>{option}</option>
+		{/each}
+	</select>
+</Knob>
\ No newline at end of file
diff --git a/src/routes/_/Y.svelte b/src/routes/_/Y.svelte
index 40372b7..9049bec 100644
--- a/src/routes/_/Y.svelte
+++ b/src/routes/_/Y.svelte
@@ -8,6 +8,9 @@
 
 	const bg = knobby.color('background', '#557899');
 	const fg = knobby.color('foreground', '#ccee33');
+
+	const e = knobby.select('e', 'a', { options: ['a','b','c','d']});
+
 </script>
 
 <div class="y" style="--bg: {$bg}; --fg: {$fg}">
@@ -15,6 +18,8 @@
 
 	<p>c: {$c}</p>
 	<p>d: {$d}</p>
+	<p>e: {$e}</p>
+
 </div>
 
 <style>

From a4261ac21bd5ce320df18e4bb3c26e778023526f Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 14:44:14 +0200
Subject: [PATCH 7/8] Readme instructions

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index f25aec6..a9b4123 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+**Note: in this fork of svelte-knobby, I added a select, radio button and the ability to drag your window around** 
+
 # svelte-knobby
 
 Add knobs to your Svelte apps. [Demo](https://svelte.dev/repl/85c0f69007524dd9a45a8bf72d2401ba)
@@ -21,6 +23,8 @@ const text = knobby.text('my text control', 'text');
 const checked = knobby.checkbox('my checkbox control', true);
 const color = knobby.color('my color control', '#ff3e00');
 const number = knobby.range('my range control', 50, { min: 0, max: 100, step: 1 });
+const radio = knobby.radio('my radio control', 'one', { options: ['one','two','three'] });
+const select = knobby.select('my select control', 'a', { options: ['a','b','c'] });
 ```
 
 Controls are added to the control panel when their stores are subscribed to, and removed when there are no more subscribers.

From e2d41adea12080c84bad83f18fab6a71ee32a43a Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 5 Jun 2021 14:45:30 +0200
Subject: [PATCH 8/8] Package update

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a3b3484..3b34283 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
-	"name": "svelte-knobby",
-	"version": "0.0.8",
+	"name": "svelte-knobby-wolfr",
+	"description": "based on svelte-knobby 0.0.8",
+	"version": "0.0.1",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",