@tremolo-ui/react 0.0.3 → 0.0.4

package/src/components/AnimationCanvas/index.tsx

@@ -0,0 +1,169 @@
+import { css, CSSObject } from '@emotion/react'
+import { MutableRefObject, useEffect, useRef } from 'react'
+import clsx from 'clsx'
+
+import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
+
+function setDprConfig(
+  canvas: HTMLCanvasElement,
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  dpr: number,
+) {
+  canvas.width = width * dpr
+  canvas.height = height * dpr
+  context.scale(dpr, dpr)
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
+}
+
+export type DrawFunction = (
+  context: CanvasRenderingContext2D,
+  width: MutableRefObject<number>,
+  height: MutableRefObject<number>,
+  count: number,
+) => void
+
+interface AnimationCanvasProps {
+  width?: number
+  height?: number
+  relativeSize?: boolean
+  /** only available relativeSize=true */
+  reduceFlickering?: boolean
+  options?: CanvasRenderingContext2DSettings
+  style?: CSSObject
+  init?: DrawFunction
+  draw: DrawFunction
+}
+
+/**
+ * A simple animatable canvas with requestAnimationFrame()
+ */
+export function AnimationCanvas({
+  width = 100,
+  height = 100,
+  style,
+  relativeSize = false,
+  reduceFlickering = true,
+  options,
+  init,
+  draw,
+  className,
+  ...props
+}: AnimationCanvasProps &
+  Omit<
+    React.ClassAttributes<HTMLCanvasElement> &
+      React.CanvasHTMLAttributes<HTMLCanvasElement>,
+    'ref' | 'width' | 'height' | 'style'
+  >) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const memoCanvasRef = useRef<HTMLCanvasElement>(null)
+  const reqIdRef = useRef<number>()
+  const widthRef = useRef(0)
+  const heightRef = useRef(0)
+
+  const loop = (
+    context: CanvasRenderingContext2D,
+    width: MutableRefObject<number>,
+    height: MutableRefObject<number>,
+    count: number,
+  ) => {
+    reqIdRef.current = requestAnimationFrame(() =>
+      loop(context, width, height, count + 1),
+    )
+    draw(context, width, height, count + 1)
+  }
+
+  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 = window.devicePixelRatio
+
+    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 resizeObserver = new ResizeObserver(() => {
+        // console.log('resize')
+        // 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 = Math.floor(parent.clientWidth)
+        const h = Math.floor(parent.clientHeight)
+
+        if (reduceFlickering && memoCanvas && memoContext) {
+          memoCanvas.width = w * dpr
+          memoCanvas.height = h * dpr
+          memoContext.scale(1 / dpr, 1 / dpr)
+          memoContext.drawImage(context.canvas, 0, 0)
+        }
+
+        setDprConfig(canvas, context, w, h, dpr)
+        widthRef.current = w
+        heightRef.current = h
+
+        for (const prop of drawingState) {
+          (context[prop] as DrawingStateValue) = contextMemo[prop]
+        }
+
+        if (reduceFlickering && memoContext) {
+          context.drawImage(memoContext.canvas, 0, 0)
+        }
+      })
+      resizeObserver.observe(parent)
+
+      const w = Math.floor(parent.clientWidth)
+      const h = Math.floor(parent.clientHeight)
+      setDprConfig(canvas, context, w, h, dpr)
+
+      if (init) init(context, widthRef, heightRef, 0)
+      loop(context, widthRef, heightRef, 0)
+
+      return () => {
+        if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
+        resizeObserver.unobserve(parent)
+      }
+    } 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, widthRef, heightRef, 0)
+      loop(context, widthRef, heightRef, 0)
+
+      return () => {
+        if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
+      }
+    }
+  }, [loop])
+
+  return (
+    <>
+      <canvas
+        className={clsx('tremolo-animation-canvas', className)}
+        width={relativeSize ? 0 : width}
+        height={relativeSize ? 0 : height}
+        css={css(style)}
+        ref={canvasRef}
+        {...props}
+      ></canvas>
+      {relativeSize && reduceFlickering && (
+        <canvas
+          style={{ display: 'none' }}
+          width={relativeSize ? 0 : width}
+          height={relativeSize ? 0 : height}
+          ref={memoCanvasRef}
+        ></canvas>
+      )}
+    </>
+  )
+}

package/src/components/Knob/index.tsx

@@ -0,0 +1,292 @@
+import { css, CSSObject, Global } from '@emotion/react'
+import { clamp, normalizeValue, radian, rawValue, stepValue } from '@tremolo-ui/functions'
+import { WheelOption } from '@tremolo-ui/functions'
+import React, { useRef } from 'react'
+import clsx from 'clsx'
+
+import { useEventListener } from '../../hooks/useEventListener'
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { UserActionPseudoProps } from '../../system/pseudo'
+import { AnimationCanvas, DrawFunction } from '../AnimationCanvas'
+
+interface KnobProps {
+  // required
+  value: number
+  min: number
+  max: number
+
+  // optional
+  /**
+   * 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
+
+  step?: number
+  skew?: number // | SkewFunction
+
+  /** Priority over width or height */
+  size?: number | `${number}%`
+
+  width?: number | `${number}%`
+  height?: number | `${number}%`
+
+  /** drawing options */
+  options?: {
+    active?: string // active line color
+    inactive?: string // inactive line color
+    bg?: string // background color
+    thumb?: string // thumb color
+    lineWeight?: number // line color
+    thumbWeight?: number // thumb weight
+  }
+  // TODO: need?
+  draw?: DrawFunction
+
+  /** Whether to apply {use-select: none} when dragging */
+  bodyNoSelect?: boolean
+
+  enableWheel?: WheelOption
+  enableDoubleClickDefault?: boolean
+  style?: CSSObject
+  onChange?: (value: number) => void
+}
+
+const defaultOptions = {
+  active: '#7998ec',
+  inactive: '#eee',
+  bg: '#ccc',
+  thumb: '#4e76e6',
+  lineWeight: 6,
+  thumbWeight: 4,
+} as const
+
+/**
+ * simple rotary Knob.
+ */
+export function Knob({
+  value,
+  min,
+  max,
+  defaultValue = min,
+  startValue = min,
+  step = 1,
+  skew = 1,
+  size,
+  width = 50,
+  height = 50,
+  options = defaultOptions,
+  draw,
+  bodyNoSelect = true,
+  enableWheel,
+  enableDoubleClickDefault = true,
+  style,
+  className,
+  onChange,
+  _active,
+  _focus,
+  _hover,
+  ...props
+}: KnobProps &
+  UserActionPseudoProps &
+  Omit<
+    React.ClassAttributes<HTMLDivElement> &
+      React.HTMLAttributes<HTMLDivElement>,
+    'onChange'
+  >) {
+  // -- state and ref ---
+  // const [privateValue, setPrivateValue] = useState(value);
+  const dragOffsetY = useRef<number | undefined>(undefined)
+
+  // --- interpret props ---
+  const opts = { ...defaultOptions, ...options }
+  // const percent = normalizeValue(value, min, max, skew)
+
+  const isRelativeSize = typeof (size ?? width) == 'string'
+  const adaptSize = (size: number | `${number}%`) => {
+    if (typeof size == 'string') {
+      return Number(size.slice(0, -1))
+    } else {
+      return size
+    }
+  }
+
+  const handleEvent = (
+    event:
+      | MouseEvent
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | TouchEvent,
+  ) => {
+    const isTouch = event instanceof TouchEvent
+    if (isTouch && event.cancelable) event.preventDefault()
+    if (dragOffsetY.current) {
+      if (bodyNoSelect) document.body.classList.add('no-select')
+      const screenY = isTouch ? event.touches[0].screenY : event.screenY
+      const delta = dragOffsetY.current - screenY
+      dragOffsetY.current = screenY
+      const n = normalizeValue(value, min, max, skew)
+      const v = rawValue(n + delta / 100, min, max, skew)
+      const v2 = clamp(stepValue(v, step), min, max)
+      if (onChange) onChange(v2)
+    }
+  }
+
+  // --- hooks ---
+  const wheelRefCallback = useRefCallbackEvent(
+    'wheel',
+    (event) => {
+      if (!enableWheel) return
+      event.preventDefault()
+      const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1]
+      let v
+      if (enableWheel[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 },
+    [enableWheel, value, min, max, skew, step, onChange],
+  )
+
+  const touchMoveRefCallback = useRefCallbackEvent(
+    'touchmove',
+    handleEvent,
+    { passive: false },
+    [value, min, max, skew, step, onChange, bodyNoSelect],
+  )
+
+  useEventListener(window, 'mousemove', handleEvent)
+
+  useEventListener(window, 'pointerup', () => {
+    dragOffsetY.current = undefined
+    if (bodyNoSelect) document.body.classList.remove('no-select')
+  })
+
+  return (
+    <div
+      className={clsx('tremolo-knob', className)}
+      ref={(div) => {
+        wheelRefCallback(div)
+        touchMoveRefCallback(div)
+      }}
+      role="slider"
+      tabIndex={0}
+      aria-valuenow={value}
+      aria-valuemax={max}
+      aria-valuemin={min}
+      css={css({
+        display: 'block',
+        width: size ?? width,
+        height: size ?? height,
+        cursor: 'pointer',
+        ...style,
+        ':active': {
+          ..._active,
+        },
+        ':focus': {
+          ..._focus,
+        },
+        ':hover': {
+          ..._hover,
+        },
+      })}
+      onPointerDown={(event) => {
+        dragOffsetY.current = event.screenY
+        handleEvent(event)
+      }}
+      onDoubleClick={() => {
+        if (enableDoubleClickDefault && onChange) {
+          onChange(defaultValue)
+        }
+      }}
+      {...props}
+    >
+      <Global
+        styles={{
+          '.no-select': {
+            userSelect: 'none',
+          },
+        }}
+      />
+      <AnimationCanvas
+        width={adaptSize(size ?? width)}
+        height={adaptSize(size ?? height)}
+        relativeSize={isRelativeSize}
+        // TODO
+        // reduceFlickering={false}
+        draw={draw ? draw : (ctx, width, height) => {
+          const p = normalizeValue(value, min, max, skew)
+          const startP = normalizeValue(startValue, min, max, skew)
+          const w = width.current,
+            cx = w / 2
+          const h = height.current,
+            cy = h / 2
+          const r = Math.min(cx, cy)
+          if (r <= 0) return
+
+          // reset
+          ctx.clearRect(0, 0, w, h)
+          ctx.lineCap = 'butt'
+
+          // bg
+          ctx.beginPath()
+          ctx.fillStyle = opts.bg
+          ctx.arc(cx, cy, r - 0.5, 0, 2 * Math.PI)
+          ctx.fill()
+
+          ctx.lineCap = 'round'
+          ctx.lineWidth = opts.lineWeight
+
+          // inactive rotary
+          ctx.beginPath()
+          ctx.strokeStyle = opts.inactive
+          ctx.arc(
+            cx,
+            cy,
+            r - 0.5 - opts.lineWeight / 2,
+            radian(135),
+            radian(45),
+          )
+          ctx.stroke()
+
+          // active rotary
+          ctx.beginPath()
+          ctx.strokeStyle = opts.active
+          ctx.arc(
+            cx,
+            cy,
+            r - 0.5 - opts.lineWeight / 2,
+            radian(135 + 270 * startP),
+            radian(135 + 270 * p),
+            p < startP,
+          )
+          ctx.stroke()
+
+          // thumb
+          ctx.beginPath()
+          ctx.moveTo(cx, cy)
+          ctx.lineTo(
+            cx +
+              Math.cos(radian(135 + 270 * p)) *
+                (r - 0.5 - opts.thumbWeight / 2),
+            cy +
+              Math.sin(radian(135 + 270 * p)) *
+                (r - 0.5 - opts.thumbWeight / 2),
+          )
+          ctx.strokeStyle = opts.thumb
+          ctx.lineWidth = opts.thumbWeight
+          ctx.stroke()
+        }}
+      />
+    </div>
+  )
+}

package/src/components/NumberInput/index.tsx

@@ -0,0 +1,165 @@
+import { css, CSSObject } from '@emotion/react'
+import { clamp } from '@tremolo-ui/functions'
+import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+import { ChangeEvent, useState } from 'react'
+import clsx from 'clsx'
+
+import { InputPseudoProps, UserActionPseudoProps } from '../../system/pseudo'
+
+interface NumberInputProps {
+  value: number | string
+
+  min?: number
+  max?: number
+  step?: number
+  defaultValue?: number
+
+  // wrapping html input
+  disabled?: boolean
+  placeholder?: string
+  readOnly?: boolean
+  tabIndex?: number
+
+  /**
+   * @example
+   * units='Hz'
+   * units={[['Hz', 1], ['kHz', 1000]]}
+   * units={[['ms', 1], ['s', 1000]]}
+   */
+  units?: string | Units
+
+  /**
+   * NOTE: If units is specified, it is forced to `false`
+   */
+  strict?: boolean
+
+  /**
+   * @example
+   * with units-{[['Hz', 1], ['kHz', 1000]]}
+   * 3 ... 100Hz, 1.60Hz
+   */
+  digit?: number
+  selectWithFocus?: 'all' | 'number' | 'none'
+  blurWithEnter?: boolean
+  className?: string
+  style?: CSSObject
+  onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void
+  onFocus?: (
+    value: number,
+    event: React.FocusEvent<HTMLInputElement, Element>,
+  ) => void
+  onBlur?: (
+    value: number,
+    event: React.FocusEvent<HTMLInputElement, Element>,
+  ) => void
+}
+
+/**
+ * Input with some useful functions for entering numerical values.
+ */
+export function NumberInput({
+  value,
+  min,
+  max,
+  step,
+  defaultValue = min,
+  units,
+  disabled = false,
+  placeholder,
+  readOnly,
+  tabIndex,
+  strict = false,
+  digit,
+  selectWithFocus = 'none',
+  blurWithEnter = true,
+  className,
+  style,
+  onChange,
+  onFocus,
+  onBlur,
+  ...pseudo
+}: NumberInputProps & UserActionPseudoProps & InputPseudoProps) {
+  const [showValue, setShowValue] = useState(
+    parseValue(String(value), units, digit, defaultValue).formatValue,
+  )
+  const calculatedStrict = units ? false : strict
+  const { _active, _focus, _hover } = pseudo
+
+  return (
+    <input
+      className={clsx('tremolo-number-input', className)}
+      value={showValue}
+      min={min}
+      max={max}
+      step={step}
+      type={calculatedStrict ? 'number' : 'text'}
+      spellCheck={'false'}
+      disabled={disabled}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      tabIndex={tabIndex}
+      css={css({
+        display: 'block',
+        font: 'inherit',
+        margin: 0,
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: '#bbb',
+        borderRadius: 4,
+        outline: 0,
+        transition: 'all 0.1s linear',
+        appearance: 'textfield',
+        '&:hover': {
+          borderColor: 'var(--tremolo-theme-color)',
+          ..._hover,
+        },
+        '&:focus': {
+          borderColor: 'var(--tremolo-theme-color)',
+          boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)',
+          ..._focus,
+        },
+        ...(_active && { '&:active': { ..._active } }),
+        ...style,
+      })}
+      onChange={(event) => {
+        const v = event.currentTarget.value
+        setShowValue(v)
+        const newValue = clamp(
+          parseValue(v, units, digit, defaultValue).rawValue,
+          min ?? -Infinity,
+          max ?? Infinity
+        )
+        if (onChange) onChange(newValue, event)
+      }}
+      onFocus={(event) => {
+        const v = event.currentTarget.value
+        const parsed = parseValue(v, units, digit, defaultValue)
+        if (selectWithFocus == 'all') {
+          event.currentTarget.setSelectionRange(0, v.length)
+        } else if (selectWithFocus == 'number') {
+          event.currentTarget.setSelectionRange(
+            0,
+            parsed.formatValue.length - parsed.unit.length,
+          )
+        }
+        if (onFocus) onFocus(parsed.rawValue, event)
+      }}
+      onBlur={(event) => {
+        // update value
+        const v = event.currentTarget.value
+        const parsed = parseValue(v, units, digit, defaultValue)
+        setShowValue(parsed.formatValue)
+        if (onBlur) onBlur(parsed.rawValue, event)
+      }}
+      onKeyDown={(event) => {
+        if (blurWithEnter && event.key == 'Enter') {
+          event.currentTarget.blur()
+        }
+      }}
+    />
+  )
+}

package/src/components/Slider/Thumb.tsx

@@ -0,0 +1,54 @@
+import { CSSObject, css } from '@emotion/react'
+import { ReactNode } from 'react'
+
+interface SliderThumbProps {
+  color?: string
+  style?: CSSObject
+  __css?: CSSObject
+  children?: ReactNode
+}
+
+export function SliderThumb({
+  color,
+  children,
+  style,
+  __css,
+}: SliderThumbProps) {
+  return (
+    <div
+      className="tremolo-slider-thumb-wrapper"
+      css={css({
+        width: 'fit-content',
+        height: 'fit-content',
+        position: 'absolute',
+        translate: '-50% -50%',
+        zIndex: 100,
+        ...__css,
+      })}
+    >
+      {children ? (
+        children
+      ) : (
+        // default slider thumb
+        <div
+          className="tremolo-slider-thumb"
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+          css={css({
+            background: color,
+            width: '1.4rem',
+            height: '1.4rem',
+            borderRadius: '50%',
+            '&:hover': {
+              background: `color-mix(in srgb, ${color} 95%, black)`
+            },
+            '&:active': {
+              boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
+            },
+            ...style,
+          })}
+        ></div>
+      )}
+    </div>
+  )
+}

package/src/components/Slider/Track.tsx

@@ -0,0 +1,20 @@
+import { css, CSSObject } from '@emotion/react'
+import { ReactElement } from 'react'
+
+interface SliderTrackProps {
+  style?: CSSObject
+  children?: ReactElement
+  __css?: CSSObject
+}
+
+export function SliderTrack({
+  children,
+  style,
+  __css,
+}: SliderTrackProps) {
+  return (
+    <div className="tremolo-slider-track" css={css({ ...__css, ...style })}>
+      {children}
+    </div>
+  )
+}