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.
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",
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 @@
-
+
+
{#each knobs as { component, ...knob }}
{/each}
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/index.js b/src/lib/index.js
index 4221cea..9916dcb 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -5,7 +5,9 @@ import Group from './Group.svelte';
import Action from './knobs/Action.svelte';
import Checkbox from './knobs/Checkbox.svelte';
import Color from './knobs/Color.svelte';
+import Radio from './knobs/Radio.svelte';
import Range from './knobs/Range.svelte';
+import Select from './knobs/Select.svelte';
import Text from './knobs/Text.svelte';
let knobby;
@@ -75,12 +77,18 @@ export const checkbox = knobber(Checkbox);
/** @type {import('./types').Knobber} */
export const color = knobber(Color);
+/** @type {import('./types').Knobber} */
+export const radio = knobber(Radio);
+
/** @type {import('./types').Knobber} */
export const range = knobber(Range);
/** @type {import('./types').Knobber} */
export const text = knobber(Text);
+/** @type {import('./types').Knobber} */
+export const select = knobber(Select);
+
/**
* @param {string} label
* @param {() => void} action
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 @@
-
+
-
diff --git a/src/lib/knobs/Radio.svelte b/src/lib/knobs/Radio.svelte
new file mode 100644
index 0000000..d592cba
--- /dev/null
+++ b/src/lib/knobs/Radio.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+ {#each options.options as option}
+
+ {/each}
+
+
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 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/_/X.svelte b/src/routes/_/X.svelte
index b720bb8..e57bbd1 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', { options: [ 'one', 'two', 'three' ]} );
+