@tremolo-ui/react 0.2.0 → 0.2.1

package/src/index.ts

@@ -3,6 +3,7 @@ import './styles/global.css'
 import './components/Knob/index.css'
 import './components/NumberInput/index.css'
 import './components/Piano/index.css'
+import './components/PointsEditor/index.css'
 import './components/Slider/index.css'
 import './components/XYPad/index.css'
 
@@ -15,11 +16,6 @@ export {
   type InitFunction,
   type RelativeSizingProps,
 } from './components/AnimationCanvas'
-export {
-  AnimationKnob,
-  type AnimationKnobProps,
-  type AnimationKnobMethods,
-} from './components/AnimationKnob'
 export { DragObserver, type DragObserverProps } from './components/DragObserver'
 export { Knob, type KnobProps, type KnobMethods } from './components/Knob'
 export {
@@ -41,6 +37,13 @@ export {
   type KeyLabelProps,
   type KeyboardShortcuts,
 } from './components/Piano'
+export {
+  PointsEditor,
+  clampPoint,
+  type PointsEditorProps,
+  type PointProps,
+  type PointBaseType,
+} from './components/PointsEditor'
 export {
   Slider,
   useSliderContext,

package/src/styles/global.css

@@ -1,3 +1,19 @@
-.tremolo-no-select {
+.tremolo-user-select-none {
   user-select: none;
 }
+
+.tremolo-cursor-pointer {
+  cursor: pointer;
+}
+
+.tremolo-cursor-move {
+  cursor: move;
+}
+
+.tremolo-cursor-grabbing {
+  cursor: grabbing;
+}
+
+.tremolo-cursor-none {
+  cursor: none;
+}

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","names":[],"sources":["../src/styles/global.css","../src/components/Knob/index.css","../src/components/NumberInput/index.css","../src/components/Piano/index.css","../src/components/Slider/index.css","../src/components/XYPad/index.css"],"sourcesContent":[".tremolo-no-select {\n  user-select: none;\n}\n",".tremolo-knob {\n  display: inline-block;\n  cursor: pointer;\n  overflow: visible;\n  outline: 0;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-knob-active-line {\n  overflow: visible;\n  color: oklch(69.2% 0.17548 266.373);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(59.5% 0.17548 266.373);\n  }\n\n  :where(.tremolo-knob[aria-disabled='true']) & {\n    color: oklch(50.5% 0.03307 270.021);\n  }\n}\n\n.tremolo-knob-inactive-line {\n  color: oklch(95% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(90% 0 0);\n  }\n}\n\n.tremolo-knob-thumb {\n  color: oklch(85.7% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(84.5% 0 0);\n  }\n}\n\n.tremolo-knob-thumb-line {\n  color: oklch(94.2% 0 0);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-active-line {\n    color: oklch(59.5% 0.17548 266.373);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(65.2% 0.17548 266.373);\n    }\n  }\n\n  .tremolo-knob-inactive-line {\n    color: oklch(41.7% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(44.59% 0 0);\n    }\n  }\n\n  .tremolo-knob-thumb {\n    color: oklch(48.6% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(51.7% 0 0);\n    }\n  }\n\n  .tremolo-knob-thumb-line {\n    color: oklch(84.2% 0 0);\n  }\n}\n",".tremolo-number-input-wrapper {\n  --border-radius: 4px;\n  --stepper-width: 20px;\n  --active-color: oklch(59.5% 0.17548 266.373);\n  --border-color: oklch(81% 0 0);\n\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  width: 140px;\n  height: min-content;\n  border-style: solid;\n  border-color: var(--border-color);\n  border-width: 0px;\n  outline: none;\n  transition: all 0.1s;\n\n  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {\n    border-color: oklch(64.245% 0.21266 25.499);\n  }\n\n  &[data-variant='outline'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n\n    &:hover {\n      --border-color: oklch(65.335% 0 0);\n    }\n\n    &:focus-within {\n      --border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='filled'] {\n    --bg: oklch(95.88% 0 0);\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: transparent;\n    background-color: var(--bg);\n\n    &:hover {\n      --bg: oklch(93.166% 0 0);\n    }\n\n    &:focus-within {\n      background-color: inherit;\n      --border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='flushed'] {\n    border-bottom-width: 1px;\n\n    &:hover {\n      --border-color: oklch(65.335% 0 0);\n    }\n\n    &:focus-within {\n      --border-color: var(--active-color);\n      box-shadow: 0px 2px 0px 0px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-stepper='false'] {\n    --stepper-width: 0px;\n  }\n}\n\n.tremolo-number-input {\n  display: block;\n  color: inherit;\n  width: calc(100% - 20px - var(--stepper-width));\n  background-color: inherit;\n  font: inherit;\n  padding: 6px 10px;\n\n  margin: 0;\n  border: none;\n  outline: none;\n  appearance: none;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-stepper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--stepper-width);\n  transition: all 0.1s linear;\n\n  &[data-dynamic='true'] {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n}\n\n:is(\n    .tremolo-number-input-wrapper:hover,\n    .tremolo-number-input-wrapper:focus-within\n  )\n  .tremolo-number-input-stepper {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.tremolo-number-input-increment-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: oklch(84.522% 0 0);\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-top-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: oklch(37.798% 0.03812 254.612 / 0.055);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-decrement-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: oklch(84.522% 0 0);\n  border-top: 1px solid oklch(84.522% 0 0);\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-bottom-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: oklch(37.798% 0.03812 254.612 / 0.055);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-number-input-wrapper {\n    --border-color: oklch(52% 0 0);\n\n    &[data-variant='filled'] {\n      --bg: oklch(43.5% 0 0);\n\n      &:hover {\n        --bg: oklch(46.6% 0 0);\n      }\n    }\n  }\n}\n",".tremolo-piano {\n  display: inline-block;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n}\n\n.tremolo-piano-white-key {\n  --bg: oklch(100% 0 0);\n  --color: oklch(0% 0 0);\n  --active-bg: oklch(92% 0 0);\n  --active-color: oklch(0% 0 0);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 1;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-black-key {\n  --color: oklch(100% 0 0);\n  --bg: oklch(32% 0 0);\n  --active-color: oklch(100% 0 0);\n  --active-bg: oklch(44% 0 0);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 2;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-key-label-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  height: 100%;\n}\n\n.tremolo-piano-key-label {\n  box-sizing: content-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 0.6rem;\n  height: 10px;\n  margin-bottom: 10px;\n  padding: 4px;\n  border-radius: 4px;\n  border: 1px solid #888;\n  aspect-ratio: 1;\n  max-width: calc(100% - 16px);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-piano-white-key {\n    --bg: oklch(80% 0 0);\n    --color: oklch(0% 0 0);\n    --active-bg: oklch(72% 0 0);\n    --active-color: oklch(0% 0 0);\n  }\n}\n",".tremolo-slider {\n  display: inline-block;\n  cursor: pointer;\n  outline: 0;\n  -webkit-tap-highlight-color: transparent;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-slider-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-slider-thumb {\n  --color: oklch(59.5% 0.17548 266.373);\n\n  background: var(--color);\n  border-radius: 50%;\n  outline: none;\n\n  &[aria-disabled='true'] {\n    background: oklch(50.462% 0.03307 270.021);\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n.tremolo-slider-track {\n  --active: oklch(69.212% 0.12903 267.633);\n  --inactive: oklch(95% 0 0);\n\n  position: relative;\n\n  &[data-vertical='false'] {\n    min-width: 50px;\n  }\n\n  &[data-vertical='true'] {\n    min-height: 50px;\n  }\n\n  &:hover {\n    --active: oklch(64.276% 0.15244 266.932);\n    --inactive: #e0e0e0;\n  }\n\n  &[aria-disabled='true'] {\n    --active: oklch(75.327% 0.01237 264.547);\n    --inactive: oklch(89.755% 0.0001 271.152);\n  }\n}\n\n.tremolo-slider-scale {\n  display: block;\n  position: relative;\n}\n\n.tremolo-slider-scale-option {\n  display: flex;\n  color: oklch(25.197% 0.00003 271.152);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  translate: -50% 0;\n  z-index: 10;\n\n  &[data-vertical='true'] {\n    flex-direction: row;\n    translate: 0 -50%;\n  }\n}\n\n.tremolo-slider-scale-option-mark {\n  background-color: currentColor;\n}\n\n.tremolo-slider-scale-option-label {\n  text-align: right;\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-slider-thumb {\n    --color: oklch(64.5% 0.17548 266.373);\n\n    &:hover {\n      --color: oklch(67.5% 0.17548 266.373);\n    }\n  }\n\n  .tremolo-slider-track {\n    --active: oklch(59.5% 0.17548 266.373);\n    --inactive: oklch(41.7% 0 0);\n\n    &:hover {\n      --active: oklch(62.5% 0.17548 266.373);\n      --inactive: oklch(44.7% 0 0);\n    }\n\n    &[aria-disabled='true'] {\n      --active: oklch(75.327% 0.01237 264.547);\n      --inactive: oklch(89.755% 0.0001 271.152);\n    }\n  }\n}\n",".tremolo-xy-pad {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.tremolo-xy-pad-area {\n  --color: oklch(95% 0 0);\n\n  position: relative;\n  background-color: var(--color);\n}\n\n.tremolo-xy-pad-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-xy-pad-thumb {\n  --color: oklch(59.5% 0.17548 266.373);\n\n  border-radius: 50%;\n  outline: none;\n  background-color: var(--color);\n\n  &[aria-disabled='true'] {\n    background-color: oklch(50.462% 0.03307 270.021);\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-xy-pad-area {\n    --color: oklch(41.7% 0 0);\n  }\n\n  .tremolo-xy-pad-thumb {\n    --color: oklch(64.5% 0.17548 266.373);\n\n    &:hover {\n      --color: oklch(67.5% 0.17548 266.373);\n    }\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACxEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACxLA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACzFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AC/GA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA"}

package/src/components/AnimationKnob/index.tsx

@@ -1,314 +0,0 @@
-import clsx from 'clsx'
-import React, {
-  ComponentPropsWithoutRef,
-  CSSProperties,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {
-  clamp,
-  normalizeValue,
-  radian,
-  rawValue,
-  stepValue,
-  InputEventOption,
-} from '@tremolo-ui/functions'
-
-import { useDrag } from '../../hooks/useDrag'
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
-import { AnimationCanvas, DrawFunction } from '../AnimationCanvas'
-
-/** @category AnimationKnob */
-export type AnimationKnobProps = {
-  // required
-  value: number
-  min: number
-  max: number
-
-  // optional
-  step?: number
-  skew?: number // | SkewFunction
-  /**
-   * value set when double-clicking
-   * @see enableDoubleClickDefault
-   */
-  defaultValue?: number
-
-  /**
-   * Value to be used as the starting point of the line when drawing.
-   * @default min
-   */
-  startValue?: number
-
-  /** Priority over width or height */
-  size?: number | `${number}%`
-
-  width?: number | `${number}%`
-  height?: number | `${number}%`
-
-  /** active line color */
-  activeColor?: string
-  /** inactive line color */
-  inactiveColor?: string
-  /** background color */
-  bg?: string
-  /** thumb color */
-  thumb?: string
-  lineWeight?: number
-  thumbWeight?: number
-
-  draw?: DrawFunction
-
-  /** Whether to apply `{use-select: none}` when dragging */
-  bodyNoSelect?: boolean
-  /**
-   * wheel control option
-   */
-  wheel?: InputEventOption | null
-  /**
-   * keyboard control option
-   */
-  keyboard?: InputEventOption | null
-  enableDoubleClickDefault?: boolean
-  style?: CSSProperties
-  onChange?: (value: number) => void
-}
-
-/**
- * @category AnimationKnob
- */
-export interface AnimationKnobMethods {
-  focus: () => void
-  blur: () => void
-}
-
-type Props = AnimationKnobProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof AnimationKnobProps>
-
-/**
- * Animatable rotary knob.
- * @category AnimationKnob
- */
-export const AnimationKnob = forwardRef<AnimationKnobMethods, Props>(
-  (
-    {
-      value,
-      min,
-      max,
-      defaultValue = min,
-      startValue = min,
-      step = 1,
-      skew = 1,
-      size,
-      width = 50,
-      height = 50,
-      activeColor = '#7998ec',
-      inactiveColor = '#eee',
-      bg = '#ccc',
-      thumb = '#4e76e6',
-      lineWeight = 6,
-      thumbWeight = 4,
-      draw,
-      bodyNoSelect = true,
-      wheel = ['raw', 1],
-      keyboard = ['raw', 1],
-      enableDoubleClickDefault = true,
-      style,
-      className,
-      onChange,
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    // -- state and ref ---
-    const valueRef = useRef(0)
-    const elmRef = useRef<HTMLDivElement>(null)
-
-    // --- interpret props ---
-    const isRelativeSize =
-      typeof (size ?? width) == 'string' || typeof height == 'string'
-
-    const onDrag = useCallback(
-      (_x: number, y: number) => {
-        if (!onChange) return
-        const v = rawValue(valueRef.current - y / 100, min, max, skew)
-        const v2 = clamp(stepValue(v, step), min, max)
-        onChange(v2)
-      },
-      [max, min, onChange, skew, step],
-    )
-
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (!keyboard || !onChange) return
-        const key = event.key
-        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-          event.preventDefault()
-          const x =
-            key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1]
-          let v
-          if (keyboard[0] == 'normalized') {
-            const n = normalizeValue(value, min, max, skew)
-            v = rawValue(n + x, min, max, skew)
-          } else {
-            v = value + x
-          }
-          onChange(clamp(stepValue(v, step), min, max))
-        }
-      },
-      [value, min, max, step, skew, keyboard, onChange],
-    )
-
-    // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDrag<HTMLDivElement>({
-      onDrag: onDrag,
-      onDragStart: () => {
-        valueRef.current = normalizeValue(value, min, max, skew)
-        if (bodyNoSelect) addNoSelect()
-      },
-      onDragEnd: () => {
-        if (bodyNoSelect) removeNoSelect()
-      },
-    })
-
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!wheel) return
-        event.preventDefault()
-        const x = event.deltaY > 0 ? -wheel[1] : wheel[1]
-        let v
-        if (wheel[0] == 'normalized') {
-          const n = normalizeValue(value, min, max, skew)
-          v = rawValue(n + x, min, max, skew)
-        } else {
-          v = value + x
-        }
-        if (onChange) onChange(clamp(stepValue(v, step), min, max))
-      },
-      { passive: false },
-      [wheel, value, min, max, skew, step, onChange],
-    )
-
-    useImperativeHandle(ref, () => {
-      return {
-        focus() {
-          elmRef.current?.focus()
-        },
-        blur() {
-          elmRef.current?.blur()
-        },
-      }
-    }, [])
-
-    return (
-      <div
-        className={clsx('tremolo-animation-knob', className)}
-        ref={(div) => {
-          elmRef.current = div
-          wheelRefCallback(div)
-          touchMoveRefCallback(div)
-        }}
-        role="slider"
-        tabIndex={0}
-        aria-valuenow={value}
-        aria-valuemax={max}
-        aria-valuemin={min}
-        style={{
-          display: 'inline-block',
-          width: size ?? width,
-          height: size ?? height,
-          cursor: 'pointer',
-          WebkitTapHighlightColor: 'transparent',
-          ...style,
-        }}
-        onPointerDown={pointerDownHandler}
-        onDoubleClick={() => {
-          if (enableDoubleClickDefault && onChange) {
-            onChange(defaultValue)
-          }
-        }}
-        onKeyDown={handleKeyDown}
-        {...props}
-      >
-        <AnimationCanvas
-          {...(isRelativeSize
-            ? { relativeSize: true }
-            : {
-                width: size ?? width,
-                height: size ?? height,
-              })}
-          draw={
-            draw
-              ? draw
-              : (ctx, { width, height }) => {
-                  const p = normalizeValue(value, min, max, skew)
-                  const startP = normalizeValue(startValue, min, max, skew)
-                  const cx = width / 2
-                  const cy = height / 2
-                  const r = Math.min(cx, cy)
-                  if (r <= 0) return
-
-                  // reset
-                  ctx.clearRect(0, 0, width, height)
-                  ctx.lineCap = 'butt'
-
-                  // bg
-                  ctx.beginPath()
-                  ctx.fillStyle = bg
-                  ctx.arc(cx, cy, r - 0.5, 0, 2 * Math.PI)
-                  ctx.fill()
-
-                  ctx.lineWidth = lineWeight
-
-                  // inactive rotary
-                  ctx.beginPath()
-                  ctx.strokeStyle = inactiveColor
-                  ctx.arc(
-                    cx,
-                    cy,
-                    r - 0.5 - lineWeight / 2,
-                    radian(135),
-                    radian(45),
-                  )
-                  ctx.stroke()
-
-                  // active rotary
-                  ctx.beginPath()
-                  ctx.strokeStyle = activeColor
-                  ctx.arc(
-                    cx,
-                    cy,
-                    r - 0.5 - lineWeight / 2,
-                    radian(135 + 270 * startP),
-                    radian(135 + 270 * p),
-                    p < startP,
-                  )
-                  ctx.stroke()
-
-                  // thumb
-                  ctx.lineCap = 'round'
-                  ctx.beginPath()
-                  ctx.moveTo(cx, cy)
-                  ctx.lineTo(
-                    cx +
-                      Math.cos(radian(135 + 270 * p)) *
-                        (r - 0.5 - thumbWeight / 2),
-                    cy +
-                      Math.sin(radian(135 + 270 * p)) *
-                        (r - 0.5 - thumbWeight / 2),
-                  )
-                  ctx.strokeStyle = thumb
-                  ctx.lineWidth = thumbWeight
-                  ctx.stroke()
-                }
-          }
-        />
-      </div>
-    )
-  },
-)