Skip to content

Commit 87e6817

Browse files
eye-waveeye-wave
committed
fix knob initialization bug
1 parent f20de48 commit 87e6817

17 files changed

Lines changed: 169 additions & 70 deletions

File tree

‎bun.lock‎

Lines changed: 29 additions & 33 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
},
1212
"dependencies": {
1313
"@eyewave/web-knobs": "workspace:*",
14-
"@lucide/astro": "^0.564.0",
14+
"@lucide/astro": "^0.574.0",
1515
"astro": "^5.17.2",
16-
"lucide": "^0.564.0",
17-
"svelte": "^5.51.2",
16+
"lucide": "^0.574.0",
17+
"svelte": "^5.51.3",
1818
"typescript": "^5.9.3"
1919
},
2020
"devDependencies": {

‎docs/src/lib/Code.astro‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,28 @@ const localId = (name: string) => `${formId}_${name}`;
6161
border-radius: 8px;
6262
tab-size: 2;
6363
user-select: all;
64-
font-size: 14px;
64+
font-size: 12px;
6565
}
6666

6767
.code-tabs > input:nth-of-type(1):checked ~ .tab-code:nth-of-type(1),
6868
.code-tabs > input:nth-of-type(2):checked ~ .tab-code:nth-of-type(2),
6969
.code-tabs > input:nth-of-type(3):checked ~ .tab-code:nth-of-type(3),
70-
.code-tabs > input:nth-of-type(4):checked ~ .tab-code:nth-of-type(4) {
70+
.code-tabs > input:nth-of-type(4):checked ~ .tab-code:nth-of-type(4),
71+
.code-tabs > input:nth-of-type(5):checked ~ .tab-code:nth-of-type(5),
72+
.code-tabs > input:nth-of-type(6):checked ~ .tab-code:nth-of-type(6),
73+
.code-tabs > input:nth-of-type(7):checked ~ .tab-code:nth-of-type(7),
74+
.code-tabs > input:nth-of-type(8):checked ~ .tab-code:nth-of-type(8) {
7175
display: block;
7276
}
7377

7478
.code-tabs > input:nth-of-type(1):checked ~ .tab-bar label:nth-of-type(1),
7579
.code-tabs > input:nth-of-type(2):checked ~ .tab-bar label:nth-of-type(2),
7680
.code-tabs > input:nth-of-type(3):checked ~ .tab-bar label:nth-of-type(3),
77-
.code-tabs > input:nth-of-type(4):checked ~ .tab-bar label:nth-of-type(4) {
81+
.code-tabs > input:nth-of-type(4):checked ~ .tab-bar label:nth-of-type(4),
82+
.code-tabs > input:nth-of-type(5):checked ~ .tab-bar label:nth-of-type(5),
83+
.code-tabs > input:nth-of-type(6):checked ~ .tab-bar label:nth-of-type(6),
84+
.code-tabs > input:nth-of-type(7):checked ~ .tab-bar label:nth-of-type(7),
85+
.code-tabs > input:nth-of-type(8):checked ~ .tab-bar label:nth-of-type(8) {
7886
color: cyan;
7987
}
8088
</style>

‎docs/src/pages/_examples.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const examples: Entry[] = [
3232
},
3333
{
3434
name: 'Custom knob',
35-
description: `In reality, svgknob and image knob are both based from a <code>{'<Draggable/>'}</code> component, that you can use as well, creating your very own custom made knob.`,
35+
description: `In reality, svgknob and image knob are both based from a <code>&lt;Draggable/&gt;</code> component, that you can use as well, creating your very own custom made knob.`,
3636
comp: r(await import('../examples/CustomKnob.astro')),
3737
code: [
3838
r(await import('../examples/CustomKnob.svelte?raw')),

‎docs/src/pages/index.astro‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,29 +25,49 @@ const logos = [
2525
`<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vue.js</title><path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z"/></svg>`,
2626
'4FC08D'
2727
]
28+
29+
// [
30+
// `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Solid</title><path d="M11.558.788A9.082 9.082 0 0 0 9.776.99l-.453.15c-.906.303-1.656.755-2.1 1.348l-.301.452-2.035 3.528c.426-.387.974-.698 1.643-.894h.001l.613-.154h.001a8.82 8.82 0 0 1 1.777-.206c2.916-.053 6.033 1.148 8.423 2.36 2.317 1.175 3.888 2.32 3.987 2.39L24 5.518c-.082-.06-1.66-1.21-3.991-2.386-2.393-1.206-5.521-2.396-8.45-2.343zM8.924 5.366a8.634 8.634 0 0 0-1.745.203l-.606.151c-1.278.376-2.095 1.16-2.43 2.108-.334.948-.188 2.065.487 3.116.33.43.747.813 1.216 1.147L12.328 10h.001a6.943 6.943 0 0 1 6.013 1.013l2.844-.963c-.17-.124-1.663-1.2-3.91-2.34-2.379-1.206-5.479-2.396-8.352-2.344zm5.435 4.497a6.791 6.791 0 0 0-1.984.283L2.94 13.189 0 18.334l9.276-2.992a6.945 6.945 0 0 1 7.408 2.314v.001c.695.903.89 1.906.66 2.808l2.572-4.63c.595-1.041.45-2.225-.302-3.429a6.792 6.792 0 0 0-5.255-2.543zm-3.031 5.341a6.787 6.787 0 0 0-2.006.283L.008 18.492c.175.131 2.02 1.498 4.687 2.768 2.797 1.332 6.37 2.467 9.468 1.712l.454-.152h.002c1.278-.376 2.134-1.162 2.487-2.09.353-.93.207-2.004-.541-2.978a6.791 6.791 0 0 0-5.237-2.548z"/></svg>`,
31+
// '2C4F7C'
32+
// ],
33+
34+
// [
35+
// `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Qwik</title><path d="M7.5469 0a2.957 2.957 0 0 0-2.5606 1.4785L.5332 9.1915a2.957 2.957 0 0 0 0 2.957l4.4531 7.7128A2.955 2.955 0 0 0 7.547 21.338H12l8.5938 2.6484c.2409.0742.4512-.1782.3359-.4023l-1.916-3.7227 4.4531-7.7129a2.957 2.957 0 0 0 0-2.957l-4.4531-7.7129A2.957 2.957 0 0 0 16.453 0zm0 .7656L17.7324 10.67l-1.8965 1.8985.5782 7.5332L6.2676 10.67l2.371-2.373z"/></svg>`,
36+
// 'AC7EF4'
37+
// ],
38+
39+
// [
40+
// `<svg role="img" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg"><title>Ripple TS</title><g clip-path="url(#a)"><path d="M19.434 11.756c0-4.13-3.395-7.495-7.563-7.495a7.57 7.57 0 0 0-5.02 1.896 2.04 2.04 0 0 1-2.862-.168c-.744-.83-.668-2.1.17-2.836A11.65 11.65 0 0 1 11.87.244c6.407 0 11.616 5.163 11.616 11.512 0 2.29-.68 4.427-1.847 6.222l1.574 1.474c.813.762.85 2.033.08 2.84a2.04 2.04 0 0 1-2.865.08l-2.9-2.72a1.995 1.995 0 0 1-.099-2.82 7.43 7.43 0 0 0 2.003-5.076m-19.18.003c0-1.11.908-2.009 2.027-2.009s2.027.9 2.027 2.009c0 2.644 1.39 4.979 3.496 6.317a2 2 0 0 1 .612 2.775 2.04 2.04 0 0 1-2.8.607c-3.217-2.044-5.361-5.626-5.361-9.7"/><path d="M11.87 15.238c1.94 0 3.511-1.558 3.511-3.48 0-1.92-1.572-3.478-3.51-3.478-1.939 0-3.51 1.558-3.51 3.479s1.571 3.479 3.51 3.479"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v23H0z"/></clipPath></defs></svg>`,
41+
// '3e95ff'
42+
// ],
43+
44+
// [
45+
// `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Angular</title><path d="M16.712 17.711H7.288l-1.204 2.916L12 24l5.916-3.373-1.204-2.916ZM14.692 0l7.832 16.855.814-12.856L14.692 0ZM9.308 0 .662 3.999l.814 12.856L9.308 0Zm-.405 13.93h6.198L12 6.396 8.903 13.93Z"/></svg>`,
46+
// '0F0F11'
47+
// ]
2848
];
2949
---
3050

3151
<Layout title="web-knobs">
32-
<section style="display:flex;justify-content:space-between">
52+
<section>
3353
<article>
3454
<h1>Welcome to web-knobs<span style="font-size:12px">v{pkg.version}</span></h1>
3555

3656
<p>Cross-framework audio component library!</p>
3757
</article>
3858

39-
<div style="display:grid;grid-template-columns:1fr 1fr">
59+
<div style="display:flex;flex-wrap:wrap;max-width:384px;justify-content:center">
4060
{
4161
logos.map(([logo, color]) => {
4262
const transformed = logo
43-
.replace('role="img"', 'width=128 height=128')
63+
.replace('role="img"', 'width=72 height=72 ')
4464
.replace('<path', '<path transform="translate(12 12) scale(0.5) translate(-12 -12)"')
4565
.replace(
4666
'svg">',
4767
'svg" stroke-linecap="round" stroke-linejoin="round" fill="currentColor"><circle cx="12" cy="12" r="10" fill="#333" /><path d="" fill="none" stroke-width=1 stroke="#555"/><path d="" fill="none" stroke-width=2 stroke="currentColor"/>'
4868
);
4969

50-
return <div class="knob" style={`color:#${color}`} set:html={transformed} />;
70+
return <div class="showcase-knob" style={`color:#${color}`} set:html={transformed} />;
5171
})
5272
}
5373
</div>
@@ -86,8 +106,8 @@ const logos = [
86106
<p set:html={line} />
87107
))}
88108

89-
<div style="display:grid;grid-template-columns:128px 1fr">
90-
<div>
109+
<div>
110+
<div style="width:100%;margin:18px 0">
91111
<Comp />
92112
</div>
93113
<Code
@@ -105,7 +125,7 @@ const logos = [
105125
import { createDraggable, type DraggableApi } from '@eyewave/web-knobs/core/draggable';
106126
import { valueToAngle, describeArc } from '@eyewave/web-knobs/core/helpers';
107127

108-
const knobElements = document.getElementsByClassName('knob');
128+
const knobElements = document.getElementsByClassName('showcase-knob');
109129
const knobs: DraggableApi[] = [];
110130

111131
for (const el of knobElements) {

‎docs/src/style.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ body {
55
color: #eee;
66
font-family: monospace;
77
font-size: 18px;
8+
padding: 0 24px;
89
}
910

1011
hr {
@@ -13,7 +14,7 @@ hr {
1314

1415
p code {
1516
font-style: italic;
16-
font-size: 16px;
17+
font-size: 14px;
1718
background: #222;
1819
border-radius: 8px;
1920
padding: 2px 4px;

‎packages/core/src/draggable.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function createDraggable<E extends HTMLElement>(
7777
},
7878
false
7979
);
80-
addReactive(s, 'disabled', options.disabled ?? false, (isDisabled) => {
80+
addReactive(s, 'disabled', options.disabled || false, (isDisabled) => {
8181
options.onDisabledChange?.(isDisabled);
8282
container.style.cursor = isDisabled ? 'auto' : 'grab';
8383
});

‎packages/react/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"react": "^19.2.0",
13-
"react-dom": "^19.2.0",
12+
"react": "^19.2.4",
13+
"react-dom": "^19.2.4",
1414
"@web-knobs/core": "workspace:*"
1515
},
1616
"devDependencies": {
17-
"@types/node": "^24.10.1",
18-
"@types/react": "^19.2.7",
17+
"@types/node": "^25.2.3",
18+
"@types/react": "^19.2.14",
1919
"@types/react-dom": "^19.2.3",
20-
"@vitejs/plugin-react": "^5.1.1",
21-
"globals": "^16.5.0",
20+
"@vitejs/plugin-react": "^5.1.4",
21+
"globals": "^17.3.0",
2222
"rolldown": "^1.0.0-rc.4",
2323
"typescript": "~5.9.3",
2424
"unplugin-isolated-decl": "^0.15.7",

‎packages/react/src/Draggable.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@ export default function Draggable({
7171
containerRef.current.innerHTML = '';
7272

7373
engineRef.current = createDraggable(containerRef.current, {
74+
value,
75+
disabled,
76+
defaultValue,
77+
invertWheel,
78+
step,
79+
snapPoints,
80+
snapThreshold,
81+
weight,
7482
onValueChange: callbacksRef.current?.onValueChange,
7583
onDisabledChange: callbacksRef.current?.onDisabledChange,
7684
onDefaultValueChange: callbacksRef.current?.onDefaultValueChange,

‎packages/react/src/SvgKnob.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,23 @@ export default function SvgKnob({
125125
containerRef.current.innerHTML = '';
126126

127127
engineRef.current = createSvgKnob(containerRef.current, {
128+
value,
129+
disabled,
130+
defaultValue,
131+
invertWheel,
132+
step,
133+
snapPoints,
134+
snapThreshold,
135+
weight,
136+
arcRadius,
137+
bgColor,
138+
circleRadius,
139+
disabledColor,
140+
maxAngle,
141+
minAngle,
142+
pointerLength,
143+
size,
144+
snapPointLength,
128145
onValueChange: callbacksRef.current?.onValueChange,
129146
onDisabledChange: callbacksRef.current?.onDisabledChange,
130147
onDefaultValueChange: callbacksRef.current?.onDefaultValueChange,

0 commit comments

Comments
 (0)