@tremolo-ui/react 0.0.7 → 0.0.8

package/src/components/Knob/index.tsx

@@ -1,12 +1,17 @@
-import { css, CSSObject, Global } from '@emotion/react'
-import { clamp, normalizeValue, radian, rawValue, stepValue, InputEventOption } from '@tremolo-ui/functions'
-import React, { ComponentPropsWithRef, useRef } from 'react'
 import clsx from 'clsx'
+import { ComponentPropsWithoutRef, useCallback, useRef } from 'react'
+
+import {
+  clamp,
+  InputEventOption,
+  normalizeValue,
+  radian,
+  rawValue,
+  stepValue,
+} from '@tremolo-ui/functions'
 
 import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { UserActionPseudoProps } from '../../system/pseudo'
-import { AnimationCanvas, DrawFunction } from '../AnimationCanvas'
 import { addNoSelect, removeNoSelect } from '../_util'
 
 export interface KnobProps {
@@ -16,8 +21,11 @@ export interface KnobProps {
   max: number
 
   // optional
+  step?: number
+  skew?: number // | SkewFunction
   /**
    * value set when double-clicking
+   * @default min
    * @see enableDoubleClickDefault
    */
   defaultValue?: number
@@ -28,111 +36,118 @@ export interface KnobProps {
    */
   startValue?: number
 
-  step?: number
-  skew?: number // | SkewFunction
+  // TODO: relative size (Lower priority)
+  size?: number
 
-  /** Priority over width or height */
-  size?: number | `${number}%`
-
-  width?: number | `${number}%`
-  height?: number | `${number}%`
+  /** Whether to apply `{use-select: none}` when dragging */
+  bodyNoSelect?: boolean
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null
+  enableDoubleClickDefault?: boolean
 
-  /** 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
-  }
+  disabled?: boolean
+  readonly?: boolean
 
-  draw?: DrawFunction
+  activeLine?: string
+  inactiveLine?: string
+  thumb?: string
+  thumbLine?: string
 
-  /** Whether to apply `{use-select: none}` when dragging */
-  bodyNoSelect?: boolean
+  classes?: {
+    activeLine?: string
+    inactiveLine?: string
+    thumb?: string
+    thumbLine?: string
+  }
 
-  wheel?: InputEventOption
-  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,
+  defaultValue = min,
+  startValue = min,
+  size = 50,
   bodyNoSelect = true,
-  wheel,
+  wheel = ['raw', 1],
+  keyboard = ['raw', 1],
   enableDoubleClickDefault = true,
-  style,
-  className,
+  disabled = false,
+  readonly = false,
+  activeLine,
+  inactiveLine,
+  thumb,
+  thumbLine,
   onChange,
-  _active,
-  _focus,
-  _hover,
+  className,
+  classes,
   ...props
-}: KnobProps &
-  UserActionPseudoProps &
-  Omit<ComponentPropsWithRef<'div'>, keyof KnobProps>) {
+}: KnobProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof KnobProps>) {
   // -- 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 padding = 8 // %
+  const thumbLineWeight = 6 // %
+  const thumbLength = 35 // %
+  const lineWeight = 3 // px
+  const p = normalizeValue(value, min, max, skew)
+  const s = normalizeValue(startValue, min, max, skew)
 
+  // --- internal functions ---
   const handleEvent = (
     event:
       | MouseEvent
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.MouseEvent<HTMLOrSVGElement, MouseEvent>
       | TouchEvent,
   ) => {
+    if (!onChange || readonly) return
     const isTouch = event instanceof TouchEvent
     if (isTouch && event.cancelable) event.preventDefault()
     if (dragOffsetY.current) {
       if (bodyNoSelect) addNoSelect()
       const screenY = isTouch ? event.touches[0].screenY : event.screenY
       const delta = dragOffsetY.current - screenY
+      if (Math.abs(delta) < 1) return
       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)
+      onChange(v2)
     }
   }
 
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLOrSVGElement>) => {
+      if (!keyboard || !onChange || readonly) 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, readonly, onChange],
+  )
+
   // --- hooks ---
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
@@ -167,34 +182,35 @@ export function Knob({
     if (bodyNoSelect) removeNoSelect()
   })
 
+  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 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 (
-    <div
+    <svg
       className={clsx('tremolo-knob', className)}
       ref={(div) => {
         wheelRefCallback(div)
         touchMoveRefCallback(div)
       }}
-      role="slider"
+      width={size}
+      height={size}
       tabIndex={0}
       aria-valuenow={value}
-      aria-valuemax={max}
       aria-valuemin={min}
-      css={css({
-        display: 'inline-block',
-        width: size ?? width,
-        height: size ?? height,
-        cursor: 'pointer',
-        ...style,
-        ':active': {
-          ..._active,
-        },
-        ':focus': {
-          ..._focus,
-        },
-        ':hover': {
-          ..._hover,
-        },
-      })}
+      aria-valuemax={max}
+      aria-disabled={disabled}
+      aria-readonly={readonly}
       onPointerDown={(event) => {
         dragOffsetY.current = event.screenY
         handleEvent(event)
@@ -204,85 +220,56 @@ export function Knob({
           onChange(defaultValue)
         }
       }}
+      onKeyDown={handleKeyDown}
+      onContextMenu={(e) => e.preventDefault()}
       {...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()
-        }}
+      {/* rotary meter */}
+      {startValue > min && (
+        <path
+          className={clsx('tremolo-knob-inactive-line', classes?.inactiveLine)}
+          d={`M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`}
+          fill="none"
+          stroke={inactiveLine || 'currentColor'}
+          strokeWidth={lineWeight}
+        />
+      )}
+      <path
+        className={clsx('tremolo-knob-active-line', classes?.activeLine)}
+        d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
+        fill="none"
+        stroke={activeLine || 'currentColor'}
+        strokeWidth={lineWeight}
       />
-    </div>
+      {startValue < max && (
+        <path
+          className={clsx('tremolo-knob-inactive-line', classes?.inactiveLine)}
+          d={`M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`}
+          fill="none"
+          stroke={inactiveLine || 'currentColor'}
+          strokeWidth={lineWeight}
+        />
+      )}
+      {/* thumb */}
+      <svg className={clsx('tremolo-knob-thumb', classes?.thumb)}>
+        <circle
+          cx="50%"
+          cy="50%"
+          r={`${50 - padding}%`}
+          fill={thumb || 'currentColor'}
+        />
+        <line
+          className={clsx('tremolo-knob-thumb-line', classes?.thumbLine)}
+          x1="50%"
+          y1={`${padding}%`}
+          x2="50%"
+          y2={`${thumbLength}%`}
+          stroke={thumbLine || 'currentColor'}
+          strokeWidth={`${thumbLineWeight}%`}
+          transform={`rotate(${-135 + p * 270})`}
+          transform-origin="50% 50%"
+        />
+      </svg>
+    </svg>
   )
 }

package/src/components/NumberInput/index.css

@@ -0,0 +1,25 @@
+.tremolo-number-input {
+  display: inline-block;
+  font: inherit;
+  margin: 0px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #bbb;
+  border-radius: 4px;
+  outline: 0px;
+  transition: all 0.1s linear;
+  appearance: textfield;
+
+  &:hover {
+    border-color: var(--tremolo-theme-color);
+  }
+
+  &:focus {
+    border-color: var(--tremolo-theme-color);
+    box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
+  }
+}

package/src/components/NumberInput/index.tsx

@@ -1,10 +1,8 @@
-import { css, CSSObject } from '@emotion/react'
-import { clamp } from '@tremolo-ui/functions'
-import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
-import { ChangeEvent, ComponentPropsWithoutRef, useState } from 'react'
 import clsx from 'clsx'
+import { ChangeEvent, ComponentPropsWithoutRef, useState } from 'react'
 
-import { InputPseudoProps, UserActionPseudoProps } from '../../system/pseudo'
+import { clamp } from '@tremolo-ui/functions'
+import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
 
 export interface NumberInputProps {
   value: number | string
@@ -31,7 +29,7 @@ export interface NumberInputProps {
   /**
    * NOTE: If units is specified, it is forced to `false`
    */
-  typeNumber?: boolean // TODO: rename typeNumber
+  typeNumber?: boolean
 
   /**
    * Digits for rounding numbers.
@@ -46,7 +44,6 @@ export interface NumberInputProps {
   selectWithFocus?: 'all' | 'number' | 'none'
   blurWithEnter?: boolean
   className?: string
-  style?: CSSObject
   onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void
   onFocus?: (
     value: number,
@@ -77,19 +74,16 @@ export function NumberInput({
   selectWithFocus = 'none',
   blurWithEnter = true,
   className,
-  style,
   onChange,
   onFocus,
   onBlur,
   ...props
-}: NumberInputProps & UserActionPseudoProps & InputPseudoProps &
-  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps>
-) {
+}: NumberInputProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
   const [showValue, setShowValue] = useState(
     parseValue(String(value), units, digit, defaultValue).formatValue,
   )
   const calculatedTypeNumber = units ? false : typeNumber
-  const { _active, _focus, _hover, ...rest } = props
 
   return (
     <input
@@ -104,40 +98,13 @@ export function NumberInput({
       placeholder={placeholder}
       readOnly={readOnly}
       tabIndex={tabIndex}
-      css={css({
-        display: 'inline-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
+          max ?? Infinity,
         )
         if (onChange) onChange(newValue, event)
       }}
@@ -166,7 +133,7 @@ export function NumberInput({
           event.currentTarget.blur()
         }
       }}
-      {...rest}
+      {...props}
     />
   )
 }