@tremolo-ui/react 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -16,7 +16,7 @@
     "serve": "http-server ./storybook-static",
     "lint": "eslint --fix --ext .ts,.tsx .",
     "format": "prettier --write .",
-    "test": "echo 'No test yet.'",
+    "test": "jest",
     "build:package": "tsc && tsdown",
     "clean": "npm run clean:build && npm run clean:sb",
     "clean:build": "rimraf ./dist",
@@ -39,14 +39,14 @@
     "react": "^19",
     "react-dom": "^19",
     "storybook": "^8.6.7",
-    "tone": "^15.0.4"
+    "tone": "^15"
   },
   "peerDependencies": {
     "react": "^18 ||^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "^0.1.4",
+    "@tremolo-ui/functions": "^0.1.6",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },
@@ -78,14 +78,19 @@
   "exports": {
     ".": {
       "require": {
-        "default": "./dist/index.cjs",
-        "types": "./dist/index.d.cts"
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       },
       "import": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
-    "./index.css": "./dist/index.css"
+    "./styles/index.css": "./dist/index.css",
+    "./styles/global.css": "./src/styles/global.css",
+    "./styles/Knob.css": "./src/components/Knob/index.css",
+    "./styles/NumberInput.css": "./src/components/NumberInput/index.css",
+    "./styles/Piano.css": "./src/components/Piano/index.css",
+    "./styles/XYPad.css": "./src/components/XYPad/index.css"
   }
 }

package/src/components/AnimationCanvas/canvas.ts

@@ -28,3 +28,19 @@ export function isDrawingState(obj: unknown): obj is DrawingState {
   const d: string[] = [...drawingState]
   return typeof obj == 'string' && d.includes(obj)
 }
+
+export function setDprConfig(
+  canvas: HTMLCanvasElement,
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  dpr: number,
+) {
+  canvas.width = width * dpr
+  canvas.height = height * dpr
+  // Reset current transformation matrix to the identity matrix
+  context.setTransform(1, 0, 0, 1, 0, 0)
+  context.scale(dpr, dpr)
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
+}

package/src/components/AnimationCanvas/index.tsx

@@ -8,30 +8,12 @@ import {
   useRef,
 } from 'react'
 
-import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
-
-/*
-TODO
-AbsoluteSizingProps, RelativeSizingPropsの型付けを強くする
-AbsoluteSizingPropsの場合、width, heightは必須
-RelativeSizingPropsのの場合、relativeSizeは必須、reduceFlickeringはオプショナル
-*/
-
-function setDprConfig(
-  canvas: HTMLCanvasElement,
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  dpr: number,
-) {
-  canvas.width = width * dpr
-  canvas.height = height * dpr
-  // Reset current transformation matrix to the identity matrix
-  context.setTransform(1, 0, 0, 1, 0, 0)
-  context.scale(dpr, dpr)
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
-}
+import {
+  DrawingContext,
+  drawingState,
+  DrawingStateValue,
+  setDprConfig,
+} from './canvas'
 
 /** @category AnimationCanvas */
 export type InitFunction = (
@@ -46,8 +28,6 @@ export type InitFunction = (
 
 /** @category AnimationCanvas */
 export type DrawFunction = (
-  // TODO: saving scale and translate
-  // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
   option: {
     /** current canvas width */
@@ -67,12 +47,13 @@ export type DrawFunction = (
 
 /** @category AnimationCanvas */
 export interface CommonProps {
+  draw: DrawFunction
+  init?: InitFunction
+  animate?: boolean
   /**
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
   options?: CanvasRenderingContext2DSettings
-  init?: InitFunction
-  draw: DrawFunction
 }
 
 /** @category AnimationCanvas */
@@ -108,12 +89,13 @@ export function AnimationCanvas(
 ): ReactElement
 export function AnimationCanvas({
   // common
-  options,
-  init,
   draw,
+  init,
+  animate = true,
+  options,
   // absolute
-  width = 100,
-  height = 100,
+  width: _width = 100,
+  height: _height = 100,
   // relative
   relativeSize,
   reduceFlickering = true,
@@ -145,9 +127,11 @@ export function AnimationCanvas({
       const deltaTime = now - deltaMemoRef.current
       const elapsedTime = now - startTimeRef.current
       deltaMemoRef.current = now
-      reqIdRef.current = requestAnimationFrame(() =>
-        loop(context, width, height, count + 1),
-      )
+      if (animate) {
+        reqIdRef.current = requestAnimationFrame(() =>
+          loop(context, width, height, count + 1),
+        )
+      }
       draw(context, {
         width: width.current,
         height: height.current,
@@ -157,7 +141,7 @@ export function AnimationCanvas({
         fps: 1000 / deltaTime,
       })
     },
-    [draw],
+    [draw, animate],
   )
 
   useEffect(() => {
@@ -167,6 +151,18 @@ export function AnimationCanvas({
     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 (relativeSize) {
       const parent = canvas.parentElement
       if (!parent) throw new Error("Canvas doesn't have a parent element.")
@@ -175,16 +171,14 @@ export function AnimationCanvas({
 
       const ro = new ResizeObserver((entries) => {
         for (const entry of entries) {
-          // Prevents loss of some context when the canvas is resized
-          const contextMemo = {} as DrawingContext
-          for (const prop of drawingState) {
-            ;(contextMemo[prop] as DrawingStateValue) = context[prop]
-          }
-
           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)
@@ -197,10 +191,6 @@ export function AnimationCanvas({
           widthRef.current = w
           heightRef.current = h
 
-          for (const prop of drawingState) {
-            ;(context[prop] as DrawingStateValue) = contextMemo[prop]
-          }
-
           if (
             reduceFlickering &&
             memoContext &&
@@ -208,52 +198,45 @@ export function AnimationCanvas({
             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 w = parent.clientWidth
-      const h = parent.clientHeight
-      setDprConfig(canvas, context, w, h, dpr)
-
-      if (init)
-        init(context, { width: widthRef.current, height: heightRef.current })
-      const now = performance.now()
-      deltaMemoRef.current = now
-      startTimeRef.current = now
-      loop(context, widthRef, heightRef, -1)
+      const width = parent.clientWidth
+      const height = parent.clientHeight
+      firstRendering(width, height)
 
       return () => {
         if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
         ro.disconnect()
       }
     } else {
-      const rect = canvas.getBoundingClientRect()
-      setDprConfig(canvas, context, rect.width, rect.height, dpr)
-      widthRef.current = rect.width
-      heightRef.current = rect.height
-
-      if (init)
-        init(context, { width: widthRef.current, height: heightRef.current })
-      const now = performance.now()
-      deltaMemoRef.current = now
-      startTimeRef.current = now
-      loop(context, widthRef, heightRef, -1)
+      const { width, height } = canvas.getBoundingClientRect()
+      firstRendering(width, height)
 
       return () => {
         if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
       }
     }
-  }, [loop, init, options, reduceFlickering, relativeSize])
+  }, [loop, init, options, reduceFlickering, relativeSize, animate])
 
   return (
     <>
       <canvas
         className={clsx('tremolo-animation-canvas', className)}
-        width={relativeSize ? 0 : width}
-        height={relativeSize ? 0 : height}
+        width={relativeSize ? 0 : _width}
+        height={relativeSize ? 0 : _height}
         ref={canvasRef}
         onContextMenu={onContextMenu}
         {...props}

package/src/components/Knob/index.css

@@ -4,45 +4,76 @@
   overflow: visible;
   outline: 0;
 
-  &:focus,
-  &:hover {
-    > .tremolo-knob-active-line {
-      color: #4e76e6;
-    }
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
+}
 
-    > .tremolo-knob-inactive-line {
-      color: #ddd;
-    }
+.tremolo-knob-active-line {
+  overflow: visible;
+  color: oklch(69.2% 0.17548 266.373);
 
-    > .tremolo-knob-thumb {
-      color: #ccc;
-    }
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: var(--tremolo-theme-color);
   }
 
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
+  :where(.tremolo-knob[aria-disabled='true']) & {
+    color: oklch(50.5% 0.03307 270.021);
   }
+}
 
-  &[aria-disabled='true'] {
-    > .tremolo-knob-active-line {
-      color: #5d6478;
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-active-line {
+    color: var(--tremolo-theme-color);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(65.2% 0.17548 266.373);
     }
   }
 }
 
-.tremolo-knob-active-line {
-  overflow: visible;
-  color: #7998ec;
+.tremolo-knob-inactive-line {
+  color: oklch(95% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
+  }
 }
 
-.tremolo-knob-inactive-line {
-  color: #eee;
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
+  }
 }
 
 .tremolo-knob-thumb {
-  color: #d0d0d0;
+  color: oklch(85.7% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(84.5% 0 0);
+  }
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-thumb {
+    color: oklch(48.6% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(51.7% 0 0);
+    }
+  }
 }
 
 .tremolo-knob-thumb-line {
-  color: #eee;
+  color: oklch(94.2% 0 0);
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-thumb-line {
+    color: oklch(84.2% 0 0);
+  }
 }

package/src/components/Knob/index.tsx

@@ -43,8 +43,8 @@ export interface KnobProps {
    */
   startValue?: number
 
-  // TODO: relative size (Lower priority)
-  size?: number
+  /** width and height */
+  size?: number | string
 
   /** Whether to apply `{use-select: none}` when dragging */
   bodyNoSelect?: boolean
@@ -69,15 +69,16 @@ export interface KnobProps {
   thumb?: string
   /** color */
   thumbLine?: string
-
   /** percent (0-100) */
   thumbSize?: number
   /** percent (0-100) */
   thumbLineWeight?: number
   /** percent (0-100) */
   thumbLineLength?: number
-  /** percent (0-100) */
+  /** line weight [px] */
   lineWeight?: number
+  /** angle range [degree] */
+  angleRange?: number
 
   classes?: {
     activeLine?: string
@@ -125,6 +126,11 @@ export const Knob = forwardRef<KnobMethods, Props>(
       inactiveLine,
       thumb,
       thumbLine,
+      thumbSize = 84,
+      thumbLineWeight = 6,
+      thumbLineLength = 35,
+      lineWeight = 6,
+      angleRange = 270,
       onChange,
       onKeyDown,
       onPointerDown,
@@ -133,26 +139,18 @@ export const Knob = forwardRef<KnobMethods, Props>(
       classes,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     const valueRef = useRef(0)
     const elmRef = useRef<HTMLOrSVGElement>(null)
 
-    // --- interpret props ---
-    const padding = 8 // %
-    const thumbLineWeight = 6 // %
-    const thumbLineLength = 35 // %
-    const lineWeight = size * 0.06 // px
-    const p = normalizeValue(value, min, max, skew)
-    const s = normalizeValue(startValue, min, max, skew)
-
     // --- internal functions ---
     const onDrag = useCallback(
       (_x: number, y: number) => {
         if (!onChange || readonly) return
         const v = rawValue(valueRef.current - y / 100, min, max, skew)
-        const v2 = clamp(stepValue(v, step), min, max)
-        onChange(v2)
+        const clamped = clamp(stepValue(v, step), min, max)
+        onChange(clamped)
       },
       [max, min, onChange, readonly, skew, step],
     )
@@ -210,7 +208,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
       [wheel, onChange, readonly, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           elmRef.current?.focus()
@@ -221,11 +219,17 @@ export const Knob = forwardRef<KnobMethods, Props>(
       }
     }, [])
 
-    const center = size / 2
-    const r1 = -135
-    const r2 = -135 + Math.min(p, s) * 270
-    const r3 = -135 + Math.max(p, s) * 270
-    const r4 = 135
+    const viewBoxSize = 100
+    const center = viewBoxSize / 2
+    const padding = (viewBoxSize - clamp(thumbSize, 0, 100)) / 2 // %
+    const p = normalizeValue(value, min, max, skew)
+    const s = normalizeValue(startValue, min, max, skew)
+
+    // 時計回りで描画していく
+    const r1 = -angleRange / 2 // ロータリー開始位置
+    const r2 = r1 + Math.min(p, s) * angleRange // activeLineの開始位置
+    const r3 = r1 + Math.max(p, s) * angleRange // activeLineの終了位置
+    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))
@@ -237,12 +241,13 @@ export const Knob = forwardRef<KnobMethods, Props>(
 
     return (
       <svg
-        className={clsx('tremolo-knob', className)}
         ref={(div) => {
           elmRef.current = div
           wheelRefCallback(div)
           touchMoveRefCallback(div)
         }}
+        className={clsx('tremolo-knob', className)}
+        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
         width={size}
         height={size}
         tabIndex={0}
@@ -268,7 +273,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
         }}
         {...props}
       >
-        {/* rotary meter */}
+        {/* lines */}
         {startValue > min && (
           <path
             className={clsx(
@@ -305,7 +310,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
           <circle
             cx="50%"
             cy="50%"
-            r={`${50 - padding}%`}
+            r={`${thumbSize / 2}%`}
             fill={thumb || 'currentColor'}
           />
           <line
@@ -320,7 +325,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
             // https://bugs.webkit.org/show_bug.cgi?id=201854
             // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
             style={{
-              transform: `rotate(${-135 + p * 270}deg)`,
+              transform: `rotate(${r1 + p * angleRange}deg)`,
               transformOrigin: '50% 50%',
             }}
           />

package/src/components/NumberInput/InternalInput.tsx

@@ -16,11 +16,11 @@ import {
   rawValue,
   stepValue,
 } from '@tremolo-ui/functions'
-import { parseValue } from '@tremolo-ui/functions/NumberInput'
 
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 
 import { safeClamp, useNumberInputContext } from './context'
+import { parseValue } from './type'
 
 import { NumberInputMethods } from '.'
 

package/src/components/NumberInput/context.tsx

@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useRef } from 'react'
 import { createStore, useStore } from 'zustand'
 
 import { clamp } from '@tremolo-ui/functions'
-import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+
+import { parseValue, Units } from './type'
 
 type State = {
   value: string

package/src/components/NumberInput/index.css

@@ -72,6 +72,7 @@
 
 .tremolo-number-input {
   display: block;
+  color: inherit;
   width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;

package/src/components/NumberInput/index.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx'
 import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
 
 import { InputEventOption } from '@tremolo-ui/functions'
-import { Units } from '@tremolo-ui/functions/NumberInput'
 
 import { NumberInputProvider } from './context'
 import { InternalInput } from './InternalInput'
+import { Units } from './type'
 
 /*
 TODO
@@ -55,7 +55,6 @@ export interface NumberInputProps {
   keepWithinRange?: boolean
   clampValueOnBlur?: boolean
 
-  // TODO
   /**
    * wheel control option
    */
@@ -126,9 +125,9 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
       children,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
-    const colors: { [key: string]: string | undefined } = {
+    const colors: Record<string, string | undefined> = {
       '--active-color': activeColor,
     }
     return (
@@ -154,7 +153,7 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
           data-variant={variant}
         >
           <InternalInput
-            ref={ref}
+            ref={forwardedRef}
             readonly={readonly}
             disabled={disabled}
             selectWithFocus={selectWithFocus}
@@ -178,3 +177,4 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
 export * from './Stepper'
 export * from './IncrementStepper'
 export * from './DecrementStepper'
+export { type Units } from './type'

package/src/components/NumberInput/type.ts

@@ -0,0 +1,58 @@
+/**
+ * [unit, scale][]
+ * @example
+ * [['Hz', 1], ['kHz', 1000]]
+ */
+export type Units = [string, number][]
+
+export function selectUnit(units: Units, value: number): [string, number] {
+  let i = 0
+  for (; i < units.length; i++) {
+    if (Math.abs(units[i][1]) > Math.abs(value)) break
+  }
+  return units[Math.max(0, i - 1)]
+}
+
+export function parseValue(
+  inputString: string,
+  units?: string | Units,
+  digit?: number,
+): {
+  rawValue: number
+  formatValue: string
+  unit: string
+} {
+  const str = inputString.trim()
+  if (!units || typeof units == 'string') {
+    const m = str.match(/-?\d+(\.\d+)?/)
+    let v = Number(m?.[0] ?? '0')
+    v = isNaN(v) ? 0 : v
+    return {
+      rawValue: v,
+      formatValue: (digit != undefined ? v.toFixed(digit) : v) + (units ?? ''),
+      unit: units ?? '',
+    }
+  }
+
+  const unitList = units.map(([u, _s]) => u)
+  const scaleList = units.map(([_u, s]) => s)
+  let rawValue = 0
+  let unit = unitList[0]
+  let formatValue =
+    (digit != undefined ? rawValue.toFixed(digit) : rawValue) + unit
+  const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/)
+  if (m) {
+    rawValue = Number(m[1]) || 0
+    const uIndex = unitList.indexOf(m[3])
+    rawValue *= uIndex != -1 ? scaleList[uIndex] : 1
+    const [u, scale] = selectUnit(units, rawValue)
+    const v = rawValue / scale
+    formatValue = (digit != undefined ? v.toFixed(digit) : v) + u
+    unit = u
+  }
+  return {
+    rawValue: rawValue,
+    formatValue: formatValue,
+    unit: unit,
+  }
+}