@tremolo-ui/react 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -23,9 +23,9 @@
     "clean:sb": "rimraf ./storybook-static"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "10.5.10",
-    "@storybook/addon-links": "10.5.10",
-    "@storybook/react-vite": "10.5.10",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-links": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -33,19 +33,18 @@
     "jotai": "2.20.3",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "storybook": "10.5.10",
+    "storybook": "10.6.0",
     "tone": "15.1.22",
-    "@storybook/addon-docs": "10.5.10"
+    "@storybook/addon-docs": "10.6.0"
   },
   "peerDependencies": {
     "react": "^18 ||^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/dom": "^0.4.0",
-    "@tremolo-ui/functions": "^0.4.0",
-    "clsx": "^2.1.1",
-    "zustand": "^5.0.3"
+    "@tremolo-ui/dom": "^0.5.0",
+    "@tremolo-ui/functions": "^0.5.0",
+    "clsx": "^2.1.1"
   },
   "files": [
     "dist",

package/src/components/AnimationCanvas/index.tsx

@@ -2,18 +2,16 @@ import clsx from 'clsx'
 import {
   ComponentPropsWithoutRef,
   ReactElement,
-  RefObject,
-  useCallback,
   useEffect,
   useRef,
+  useState,
 } from 'react'
 
 import {
-  DrawingContext,
-  drawingState,
-  DrawingStateValue,
-  setDprConfig,
-} from './canvas'
+  createAnimationCanvas,
+  type AnimationCanvasInstance,
+  type AnimationFrame,
+} from '@tremolo-ui/dom'
 
 export type InitFunction = (
   context: CanvasRenderingContext2D,
@@ -27,20 +25,7 @@ export type InitFunction = (
 
 export type DrawFunction = (
   context: CanvasRenderingContext2D,
-  option: {
-    /** current canvas width */
-    width: number
-    /** current canvas height */
-    height: number
-    /** frame count */
-    count: number
-    /** delta time (ms) */
-    deltaTime: number
-    /** elapsed time (ms) */
-    elapsedTime: number
-    /** frame per second */
-    fps: number
-  },
+  option: AnimationFrame,
 ) => void
 
 export interface CommonProps {
@@ -48,6 +33,9 @@ export interface CommonProps {
   init?: InitFunction
   animate?: boolean
   /**
+   * Read once, when the 2D context is created, so changing it later has no
+   * effect. Passing a fresh object on every render is therefore harmless.
+   *
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
   options?: CanvasRenderingContext2DSettings
@@ -87,10 +75,10 @@ export function AnimationCanvas({
   animate = true,
   options,
   // absolute
-  width: _width = 100,
-  height: _height = 100,
+  width = 100,
+  height = 100,
   // relative
-  relativeSize,
+  relativeSize = false,
   reduceFlickering = true,
   // canvas props
   className,
@@ -101,142 +89,83 @@ export function AnimationCanvas({
     ComponentPropsWithoutRef<'canvas'>,
     keyof AnimationCanvasProps
   >): ReactElement {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const memoCanvasRef = useRef<HTMLCanvasElement>(null)
-  const reqIdRef = useRef(-1)
-  const widthRef = useRef(0)
-  const heightRef = useRef(0)
-  const deltaMemoRef = useRef(-1)
-  const startTimeRef = useRef(-1)
-
-  const loop = useCallback(
-    (
-      context: CanvasRenderingContext2D,
-      width: RefObject<number>,
-      height: RefObject<number>,
-      count: number,
-    ) => {
-      const now = performance.now()
-      const deltaTime = now - deltaMemoRef.current
-      const elapsedTime = now - startTimeRef.current
-      deltaMemoRef.current = now
-      if (animate) {
-        reqIdRef.current = requestAnimationFrame(() =>
-          loop(context, width, height, count + 1),
-        )
-      }
-      draw(context, {
-        width: width.current,
-        height: height.current,
-        count: count + 1,
-        deltaTime,
-        elapsedTime,
-        fps: 1000 / deltaTime,
-      })
-    },
-    [draw, animate],
-  )
+  // See useDrag for why the node is held in state rather than a ref: an inline
+  // ref would be re-attached on every render and tear the instance down.
+  const [node, setNode] = useState<HTMLCanvasElement | null>(null)
+
+  // Read when the instance is created. The effect below keeps it current, and
+  // runs right after, so a stale handler is replaced within the same commit.
+  const latest = useRef({
+    draw,
+    init,
+    animate,
+    width,
+    height,
+    reduceFlickering,
+    options,
+  })
+  const instanceRef = useRef<AnimationCanvasInstance | null>(null)
+  /** Set while the instance below is newer than the effect that pushes into it. */
+  const justCreated = useRef(false)
 
   useEffect(() => {
-    if (!canvasRef.current) return
-    const canvas = canvasRef.current
-    const context = canvas.getContext('2d', options)
-    if (!context) throw new Error('Cannot get canvas context.')
-    const dpr = globalThis.devicePixelRatio
-
-    const firstRendering = (width: number, height: number) => {
-      setDprConfig(canvas, context, width, height, dpr)
-      widthRef.current = width
-      heightRef.current = height
-
-      if (init) init(context, { width, height })
-      const now = performance.now()
-      deltaMemoRef.current = now
-      startTimeRef.current = now
-      loop(context, widthRef, heightRef, -1)
+    if (!node) return
+
+    const current = latest.current
+    const instance = createAnimationCanvas(node, {
+      draw: (context, frame) => latest.current.draw(context, frame),
+      init: (context, size) => latest.current.init?.(context, size),
+      animate: current.animate,
+      size: { width: current.width, height: current.height },
+      reduceFlickering: current.reduceFlickering,
+      relativeSize,
+      contextAttributes: current.options,
+    })
+    instanceRef.current = instance
+    justCreated.current = true
+
+    return () => {
+      instanceRef.current = null
+      instance.destroy()
     }
-
-    if (relativeSize) {
-      const parent = canvas.parentElement
-      if (!parent) throw new Error("Canvas doesn't have a parent element.")
-      const memoCanvas = memoCanvasRef.current
-      const memoContext = memoCanvas?.getContext('2d', options)
-
-      const ro = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const w = entry.contentRect.width
-          const h = entry.contentRect.height
-          const contextMemo = {} as DrawingContext
-          if (reduceFlickering && memoCanvas && memoContext) {
-            // Prevents loss of some context when the canvas is resized
-            for (const prop of drawingState) {
-              ;(contextMemo[prop] as DrawingStateValue) = context[prop]
-            }
-            memoCanvas.width = w * dpr
-            memoCanvas.height = h * dpr
-            memoContext.scale(1 / dpr, 1 / dpr)
-            if (canvas.width > 0 && canvas.height > 0) {
-              memoContext.drawImage(canvas, 0, 0)
-            }
-          }
-
-          setDprConfig(canvas, context, w, h, dpr)
-          widthRef.current = w
-          heightRef.current = h
-
-          if (
-            reduceFlickering &&
-            memoContext &&
-            memoCanvas &&
-            memoCanvas.width > 0 &&
-            memoCanvas.height > 0
-          ) {
-            for (const prop of drawingState) {
-              ;(context[prop] as DrawingStateValue) = contextMemo[prop]
-            }
-
-            context.drawImage(memoContext.canvas, 0, 0)
-          }
-
-          if (!animate) {
-            // re rendering
-            loop(context, widthRef, heightRef, -1)
-          }
-        }
-      })
-      ro.observe(parent)
-
-      const width = parent.clientWidth
-      const height = parent.clientHeight
-      firstRendering(width, height)
-
-      return () => {
-        if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
-        ro.disconnect()
-      }
-    } else {
-      const { width, height } = canvas.getBoundingClientRect()
-      firstRendering(width, height)
-
-      return () => {
-        if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
-      }
+    // Only `relativeSize` decides how the instance is wired, so it is the one
+    // setting that rebuilds it. `options` is read from the ref above rather
+    // than depended on: it is almost always written inline, and depending on
+    // it would tear the canvas down on every render.
+  }, [node, relativeSize])
+
+  // Runs after every render: the handlers come from props and are cheap to
+  // push, and updating in place keeps the frame count and elapsed time going.
+  useEffect(() => {
+    latest.current = {
+      draw,
+      init,
+      animate,
+      width,
+      height,
+      reduceFlickering,
+      options,
+    }
+    // The instance was built from `latest` a moment ago, so there is nothing
+    // to push yet. Skipping matters with `animate` off, where `update()` draws
+    // a frame and would otherwise paint the same one twice on mount.
+    if (justCreated.current) {
+      justCreated.current = false
+      return
     }
-  }, [loop, init, options, reduceFlickering, relativeSize, animate])
+    instanceRef.current?.update({
+      animate,
+      size: { width, height },
+      reduceFlickering,
+    })
+  })
 
   return (
-    <>
-      <canvas
-        className={clsx('tremolo-animation-canvas', className)}
-        width={relativeSize ? 0 : _width}
-        height={relativeSize ? 0 : _height}
-        ref={canvasRef}
-        onContextMenu={onContextMenu}
-        {...props}
-      ></canvas>
-      {relativeSize && reduceFlickering && (
-        <canvas style={{ display: 'none' }} ref={memoCanvasRef}></canvas>
-      )}
-    </>
+    <canvas
+      className={clsx('tremolo-animation-canvas', className)}
+      ref={setNode}
+      onContextMenu={onContextMenu}
+      {...props}
+    />
   )
 }

package/src/components/Knob/ActiveLine.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { SVGProps } from 'react'
 
-import { center, useKnobContext } from './context'
+import { arcRadius, pointOnArc, useKnobContext } from './context'
 
 export function ActiveLine({
   stroke = 'currentColor',
@@ -11,15 +11,15 @@ export function ActiveLine({
 }: Omit<SVGProps<SVGPathElement>, 'd'>) {
   const r2 = useKnobContext((s) => s.r2)
   const r3 = useKnobContext((s) => s.r3)
-  const x2 = useKnobContext((s) => s.x2)
-  const y2 = useKnobContext((s) => s.y2)
-  const x3 = useKnobContext((s) => s.x3)
-  const y3 = useKnobContext((s) => s.y3)
+
+  const radius = arcRadius(strokeWidth)
+  const start = pointOnArc(r2, radius)
+  const end = pointOnArc(r3, radius)
 
   return (
     <path
       className={clsx('tremolo-knob-active-line', className)}
-      d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3} ${y3}`}
+      d={`M ${start.x} ${start.y} A ${radius} ${radius} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${end.x} ${end.y}`}
       fill="none"
       stroke={stroke}
       strokeWidth={strokeWidth}

package/src/components/Knob/InactiveLine.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { SVGProps } from 'react'
 
-import { center, useKnobContext } from './context'
+import { arcRadius, pointOnArc, useKnobContext } from './context'
 
 export function InactiveLine({
   stroke = 'currentColor',
@@ -17,21 +17,19 @@ export function InactiveLine({
   const r2 = useKnobContext((s) => s.r2)
   const r3 = useKnobContext((s) => s.r3)
   const r4 = useKnobContext((s) => s.r4)
-  const x1 = useKnobContext((s) => s.x1)
-  const y1 = useKnobContext((s) => s.y1)
-  const x2 = useKnobContext((s) => s.x2)
-  const y2 = useKnobContext((s) => s.y2)
-  const x3 = useKnobContext((s) => s.x3)
-  const y3 = useKnobContext((s) => s.y3)
-  const x4 = useKnobContext((s) => s.x4)
-  const y4 = useKnobContext((s) => s.y4)
+
+  const radius = arcRadius(strokeWidth)
+  const p1 = pointOnArc(r1, radius)
+  const p2 = pointOnArc(r2, radius)
+  const p3 = pointOnArc(r3, radius)
+  const p4 = pointOnArc(r4, radius)
 
   return (
     <>
       {startValue > min && (
         <path
           className={clsx('tremolo-knob-inactive-line', className)}
-          d={`M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2} ${y2}`}
+          d={`M ${p1.x} ${p1.y} A ${radius} ${radius} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${p2.x} ${p2.y}`}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}
@@ -41,7 +39,7 @@ export function InactiveLine({
       {startValue < max && (
         <path
           className={clsx('tremolo-knob-inactive-line', className)}
-          d={`M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4} ${y4}`}
+          d={`M ${p3.x} ${p3.y} A ${radius} ${radius} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${p4.x} ${p4.y}`}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}

package/src/components/Knob/SVGRoot.tsx

@@ -1,39 +1,30 @@
-import { SVGProps } from 'react'
+import { ReactNode, SVGProps } from 'react'
 
-import { Override } from '../_util/type'
-
-import { ActiveLine } from './ActiveLine'
 import { viewBoxSize } from './context'
-import { InactiveLine } from './InactiveLine'
-import { Thumb } from './Thumb'
 
-interface SVGRoot {
-  block?: boolean
-  overflowVisible?: boolean
+export interface SVGRootProps {
+  /**
+   * `<Knob.InactiveLine />`, `<Knob.ActiveLine />` and `<Knob.Thumb />` go
+   * here, in the order you want them painted.
+   */
+  children: ReactNode
 }
 
 export function SVGRoot({
   children,
   style,
   ...props
-}: Override<SVGRoot, SVGProps<SVGSVGElement>>) {
+}: SVGRootProps & Omit<SVGProps<SVGSVGElement>, keyof SVGRootProps>) {
   return (
     <svg
       viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
       style={{
         display: 'block',
-        overflow: 'visible',
         ...style,
       }}
       {...props}
     >
-      {children || (
-        <>
-          <InactiveLine />
-          <ActiveLine />
-          <Thumb />
-        </>
-      )}
+      {children}
     </svg>
   )
 }

package/src/components/Knob/context.tsx

@@ -1,120 +1,88 @@
-import {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react'
-import { createStore, useStore } from 'zustand'
+import { createContext, useContext } from 'react'
 
-import { normalizeValue, radian } from '@tremolo-ui/functions'
+import { radian, type Scale } from '@tremolo-ui/functions'
 
 export const viewBoxSize = 100
 export const center = viewBoxSize / 2
 
-type State = {
+export type KnobConfig = {
   value: number
   min: number
   max: number
   step: number
-  skew: number // | SkewFunction // TODO
+  scale: Scale
   startValue: number
+  /** angle range [degree] */
   angleRange: number
 }
 
-type DrawingState = {
-  p: number // normalized value
-  r1: number // ロータリー開始位置
-  r2: number // activeLineの開始位置
-  r3: number // activeLineの終了位置
-  r4: number // ロータリー終了位置
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-  x3: number
-  y3: number
-  x4: number
-  y4: number
+export type KnobContextValue = KnobConfig & {
+  /** normalized value */
+  p: number
+  /** ロータリー開始位置 */
+  r1: number
+  /** activeLine の開始位置 */
+  r2: number
+  /** activeLine の終了位置 */
+  r3: number
+  /** ロータリー終了位置 */
+  r4: number
 }
 
-function calcDrawingState({
+/**
+ * 角度から円弧上の点を求める。
+ *
+ * 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
+ * それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
+ */
+export function pointOnArc(angle: number, radius: number) {
+  return {
+    x: center + radius * Math.cos(radian(angle - 90)),
+    y: center + radius * Math.sin(radian(angle - 90)),
+  }
+}
+
+/** 線の太さが viewBox からはみ出さないようにした半径 */
+export function arcRadius(strokeWidth: number | string | undefined) {
+  const width =
+    typeof strokeWidth === 'number'
+      ? strokeWidth
+      : Number.parseFloat(String(strokeWidth))
+  return Number.isFinite(width) ? center - width / 2 : center
+}
+
+/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
+export function calcAngles({
   value,
   min,
   max,
-  skew,
+  scale,
   startValue,
   angleRange,
-}: State) {
-  const p = normalizeValue(value, min, max, skew)
-  const s = normalizeValue(startValue, min, max, skew)
+}: KnobConfig) {
+  const p = scale.normalize(value, min, max)
+  const s = scale.normalize(startValue, min, max)
 
   const r1 = -angleRange / 2
   const r2 = r1 + Math.min(p, s) * angleRange
   const r3 = r1 + Math.max(p, s) * angleRange
   const r4 = angleRange / 2
-  const x1 = center + center * Math.cos(radian(r1 - 90))
-  const y1 = center + center * Math.sin(radian(r1 - 90))
-  const x2 = center + center * Math.cos(radian(r2 - 90))
-  const y2 = center + center * Math.sin(radian(r2 - 90))
-  const x3 = center + center * Math.cos(radian(r3 - 90))
-  const y3 = center + center * Math.sin(radian(r3 - 90))
-  const x4 = center + center * Math.cos(radian(r4 - 90))
-  const y4 = center + center * Math.sin(radian(r4 - 90))
 
-  return {
-    p,
-    r1,
-    r2,
-    r3,
-    r4,
-    x1,
-    y1,
-    x2,
-    y2,
-    x3,
-    y3,
-    x4,
-    y4,
-  }
+  return { p, r1, r2, r3, r4 }
 }
 
-type KnobStore = ReturnType<typeof createKnobStore>
+const KnobContext = createContext<KnobContextValue | null>(null)
 
-const createKnobStore = (initProps: State) => {
-  return createStore<State & DrawingState>()(() => ({
-    ...initProps,
-    ...calcDrawingState(initProps),
-  }))
-}
-
-const KnobContext = createContext<KnobStore | null>(null)
-
-export function KnobProvider({ children, ...props }: PropsWithChildren<State>) {
-  const storeRef = useRef<KnobStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createKnobStore(props)
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.setState({ ...props, ...calcDrawingState(props) })
-    } else {
-      storeRef.current = createKnobStore(props)
-    }
-  }, [props])
-
-  return (
-    <KnobContext.Provider value={storeRef.current}>
-      {children}
-    </KnobContext.Provider>
-  )
-}
+export const KnobProvider = KnobContext.Provider
 
-export function useKnobContext<T>(
-  selector: (state: State & DrawingState) => T,
-): T {
-  const store = useContext(KnobContext)
-  if (!store) throw new Error('Missing KnobContext.Provider in the tree')
-  return useStore(store, selector)
+/**
+ * Everything here is derived during render, so there is no state to keep in
+ * sync: `value` comes from the props of `Root` and the rest follows from it.
+ */
+export function useKnobContext(): KnobContextValue
+export function useKnobContext<T>(selector: (state: KnobContextValue) => T): T
+export function useKnobContext<T>(selector?: (state: KnobContextValue) => T) {
+  const context = useContext(KnobContext)
+  if (!context) throw new Error('Missing KnobContext.Provider in the tree')
+  return selector ? selector(context) : context
 }

package/src/components/Knob/index.css

@@ -1,7 +1,12 @@
 .tremolo-knob {
+  /* The knob has no intrinsic size: the SVG inside scales to its box.
+     Override with the `size` prop, or by setting this variable. */
+  --knob-size: 50px;
+
   display: inline-block;
+  width: var(--knob-size);
+  height: var(--knob-size);
   cursor: grab;
-  overflow: visible;
   outline: 0;
 
   &[aria-readonly='true'] {
@@ -14,7 +19,6 @@
 }
 
 .tremolo-knob-active-line {
-  overflow: visible;
   color: oklch(69.2% 0.17548 266.373);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {