@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/Knob/Thumb.tsx

@@ -1,24 +1,44 @@
-import clsx from 'clsx'
 import { SVGProps } from 'react'
 
 import { clamp } from '@tremolo-ui/functions'
 
+import { useCheckPlacement } from '../_util/Placement'
+
 import { useKnobContext, viewBoxSize } from './context'
 
-interface Props {
-  /** color */
+export interface KnobThumbProps {
+  /**
+   * Fill colour of the circle.
+   * @default 'currentColor'
+   */
   thumb?: string
-  /** color */
+  /**
+   * Colour of the line that points at the value.
+   * @default 'currentColor'
+   */
   thumbLine?: string
-  /** percent (0-100) */
+  /**
+   * Diameter of the circle, as a percentage of the knob.
+   * @default 84
+   */
   thumbSize?: number
-  /** percent (0-100) */
+  /**
+   * Thickness of the line, as a percentage of the knob.
+   * @default 6
+   */
   thumbLineWeight?: number
-  /** percent (0-100) */
+  /**
+   * How far down the line reaches, as a percentage of the knob from its top.
+   * The line starts at the edge of the circle.
+   * @default 35
+   */
   thumbLineLength?: number
 
+  /**
+   * Classes for what the thumb draws inside itself: `thumbLine` is the line
+   * that points at the value.
+   */
   classes?: {
-    thumb?: string
     thumbLine?: string
   }
 }
@@ -34,17 +54,19 @@ export function Thumb({
   classes,
 
   ...props
-}: Props & Omit<SVGProps<SVGSVGElement>, 'd' | keyof Props>) {
+}: KnobThumbProps & Omit<SVGProps<SVGSVGElement>, 'd' | keyof KnobThumbProps>) {
+  useCheckPlacement('Knob.Thumb', 'Knob.SVGRoot')
+
   const angleRange = useKnobContext((s) => s.angleRange)
 
   const p = useKnobContext((s) => s.p)
   const r1 = useKnobContext((s) => s.r1)
 
   return (
-    <svg className={clsx('tremolo-knob-thumb', classes?.thumb)} {...props}>
+    <svg className={className} {...props}>
       <circle cx="50%" cy="50%" r={`${thumbSize / 2}%`} fill={thumb} />
       <line
-        className={clsx('tremolo-knob-thumb-line', classes?.thumbLine)}
+        className={classes?.thumbLine}
         x1="50%"
         y1={`${(viewBoxSize - clamp(thumbSize, 0, 100)) / 2}%`}
         x2="50%"

package/src/components/Knob/context.tsx

@@ -1,120 +1,104 @@
-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
+}
+
+/** Build an SVG path for an arc, splitting full turns into drawable segments. */
+export function arcPath(startAngle: number, endAngle: number, radius: number) {
+  const start = pointOnArc(startAngle, radius)
+  const sweep = endAngle - startAngle
+  const segmentCount = Math.max(1, Math.ceil(Math.abs(sweep) / 180))
+  const segmentSweep = sweep / segmentCount
+  let path = `M ${start.x} ${start.y}`
+
+  for (let i = 1; i <= segmentCount; i += 1) {
+    const end = pointOnArc(startAngle + segmentSweep * i, radius)
+    path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`
+  }
+
+  return path
+}
+
+/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
+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,
-  }
-}
 
-type KnobStore = ReturnType<typeof createKnobStore>
-
-const createKnobStore = (initProps: State) => {
-  return createStore<State & DrawingState>()(() => ({
-    ...initProps,
-    ...calcDrawingState(initProps),
-  }))
+  return { p, r1, r2, r3, r4 }
 }
 
-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)
-  }
+const KnobContext = /* @__PURE__ */ createContext<KnobContextValue | null>(null)
 
-  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
 }