zds-pickers 4.0.5 → 4.0.6

package/lib/pickers/NotePicker.tsx

@@ -0,0 +1,95 @@
+import { forwardRef, useCallback, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { Midi } from 'tonal'
+import { type MapItem, type Mapping, emptyMapping } from 'zds-mappings'
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
+import { assertRange } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+const { midiToNoteName } = Midi
+
+const formattedMapEntry = ({ note, name }: MapItem) =>
+  `${note} ${name.length ? '-' : ''} ${name}`
+const formattedListEntry = (label: string, idx: number) => ({
+  label,
+  value: idx + 1,
+})
+
+type NotePickerProps = SelectProps<number> & {
+  channel: number
+  disabled?: boolean
+  isMelodicMode?: boolean
+  mapping?: Mapping
+  onChange: (value: number) => void
+}
+
+type NotePickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const NotePicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  NotePickerProps
+>((props, ref) => {
+  const {
+    channel,
+    disabled = false,
+    isMelodicMode = false,
+    mapping,
+    onChange,
+    value: initialValue,
+    ...rest
+  } = props
+
+  const options = useMemo(() => {
+    if (isMelodicMode) {
+      return emptyMapping()
+        .map(({ note }) => {
+          const midiNoteName = midiToNoteName(note, { sharps: false })
+            .replace('b', '♭')
+            .replace('#', '♯')
+          return `${midiNoteName} (#${note})`
+        })
+        .map(formattedListEntry)
+    }
+
+    return (mapping || emptyMapping())
+      .map(formattedMapEntry)
+      .map(formattedListEntry)
+  }, [isMelodicMode, mapping])
+
+  const [value, setValue] = useStateWithDynamicDefault(initialValue)
+
+  const handleChange = useCallback(
+    (v: number | string) => {
+      if (typeof v === 'string') return
+
+      const possibleNoteNumber = assertRange(v, 128, 0)
+
+      if (possibleNoteNumber > 0) {
+        onChange(possibleNoteNumber)
+      }
+      setValue(v)
+    },
+    [onChange, setValue],
+  )
+
+  return (
+    <Select
+      {...rest}
+      disabled={disabled}
+      // isDisabled={disabled}
+      onChange={handleChange}
+      options={options}
+      ref={ref}
+      value={value}
+    />
+  )
+})
+
+export default NotePicker
+
+export type { NotePickerProps, NotePickerRef }

package/lib/pickers/PianoPicker.tsx

@@ -0,0 +1,77 @@
+import { Piano as ReactPiano } from 'zds-react-piano'
+import type { WithProviderProps } from '../other/OctavePlayer'
+import SoundfontProvider from '../other/SoundFontProvider'
+
+const firstNote = 21
+const lastNote = 108
+const numNotes = lastNote - firstNote - 1
+
+const whiteNotes = numNotes * 0.7 // approx
+
+const audioContext = new window.AudioContext()
+
+type PianoProps = {
+  disabled: boolean
+  height: number
+  width: number
+}
+
+const PianoPicker = ({ height, width, ...rest }: PianoProps) => {
+  const keyWidth = width / whiteNotes + 2
+  const keyWidthToHeight = keyWidth / height
+
+  return (
+    <div>
+      <ReactPiano
+        keyWidthToHeight={keyWidthToHeight}
+        noteRange={{ first: firstNote, last: lastNote }}
+        width={width}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+const WithProvider = ({
+  format,
+  height,
+  hostname,
+  instrumentName,
+  onChange,
+  onClick,
+  onDoubleClick,
+  onKeyMouseEnter,
+  onKeyMouseLeave,
+  soundfont,
+  width,
+}: WithProviderProps) => (
+  <SoundfontProvider
+    {...{
+      audioContext,
+      format,
+      hostname,
+      instrumentName,
+      onChange,
+      soundfont,
+    }}
+    render={({ isLoading, playNote, stopNote }) => (
+      <PianoPicker
+        disabled={isLoading}
+        {...{
+          height,
+          onClick,
+          onDoubleClick,
+          onKeyMouseEnter,
+          onKeyMouseLeave,
+          playNote,
+          stopNote,
+          width,
+        }}
+      />
+    )}
+  />
+)
+
+export default WithProvider
+
+export type { PianoProps }

package/lib/pickers/PolarityPicker.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type Polarity = 0 | 1
+
+type PolarityPickerProps = SelectProps<Polarity> & {
+  labelOff?: string
+  labelOn?: string
+}
+
+type PolarityPickerRef = SelectInstance<
+  Option<Polarity>,
+  false,
+  GroupBase<Option<Polarity>>
+>
+
+const PolarityPicker = forwardRef<
+  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
+  PolarityPickerProps
+>(({ labelOff = 'Normally Off', labelOn = 'Normally On', ...rest }, ref) => {
+  const options = [
+    { value: 0, label: labelOff },
+    { value: 1, label: labelOn },
+  ] as Option<Polarity>[]
+
+  return (
+    <Select
+      {...rest}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default PolarityPicker
+
+export type { Polarity, PolarityPickerProps, PolarityPickerRef }

package/lib/pickers/ResponseCurve.tsx

@@ -0,0 +1,304 @@
+import { useRef } from 'react'
+import useComponentSize from '../hooks/useComponentSize'
+import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
+import SVGText from '../other/SVGText'
+import type { Option } from './Select'
+
+const RESPONSE_CURVE_0 = 0
+const RESPONSE_CURVE_1 = 1
+const RESPONSE_CURVE_2 = 2
+const RESPONSE_CURVE_3 = 3
+const RESPONSE_CURVE_4 = 4
+const RESPONSE_CURVE_5 = 5
+const RESPONSE_CURVE_6 = 6
+const RESPONSE_CURVE_7 = 7
+
+type Curve =
+  | typeof RESPONSE_CURVE_0
+  | typeof RESPONSE_CURVE_1
+  | typeof RESPONSE_CURVE_2
+  | typeof RESPONSE_CURVE_3
+  | typeof RESPONSE_CURVE_4
+  | typeof RESPONSE_CURVE_5
+  | typeof RESPONSE_CURVE_6
+  | typeof RESPONSE_CURVE_7
+
+type ResponseCurve = {
+  value: Curve
+  label: React.ReactNode
+  c1: number
+  c2: number
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  labelX: number
+  labelY: number
+}
+
+const RESPONSE_CURVES: Option<Curve>[] = [
+  {
+    value: RESPONSE_CURVE_7,
+    label: 'Always maxed out.',
+  },
+  {
+    value: RESPONSE_CURVE_6,
+    label: 'Most sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_5,
+    label: 'Moderately sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_4,
+    label: 'A little sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_0,
+    label: 'Linear, no change.',
+  },
+  {
+    value: RESPONSE_CURVE_1,
+    label: 'A little less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_2,
+    label: 'Even less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_3,
+    label: 'Least sensitive.',
+  },
+]
+
+// const width = 218
+// const height = 150
+const axisOffset = 20
+const buttonSize = 15
+
+const axisX1 = axisOffset
+const axisY1 = axisOffset
+
+type ResponseCurveProps = {
+  autosize: boolean
+  disabled?: boolean
+  inverted: boolean
+  onChange: (event: { target: { value: Curve } }) => void
+  Tooltip: React.FC<TooltipProps>
+  value: Curve
+}
+
+const ResponseCurve = (props: ResponseCurveProps) => {
+  const {
+    Tooltip = DefaultTooltip,
+    autosize,
+    disabled,
+    inverted,
+    onChange,
+    value: responseCurve,
+  } = props
+
+  const ref = useRef(null)
+  const svgRef = useRef(null)
+  const { height: ourHeight, width: ourWidth } = useComponentSize(ref)
+
+  const width = autosize ? ourWidth || 218 : 218
+  const height = autosize ? ourHeight || 150 : 150
+
+  const axisX2 = width - axisOffset
+  const axisY2 = height - axisOffset
+
+  const xMid = width / 2
+  const yMid = height / 2
+
+  const svgProps = { ref: svgRef }
+
+  const responseCurves = RESPONSE_CURVES.map(
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
+    ({ value, label }): ResponseCurve => {
+      let c1 = 0
+      let c2 = 0
+      let x1 = axisX1
+      let y1 = inverted ? axisY1 : axisY2
+      let x2 = axisX2
+      let y2 = inverted ? axisY2 : axisY1
+      let labelX = xMid
+      let labelY = yMid
+      switch (value) {
+        case RESPONSE_CURVE_0:
+          c1 = xMid
+          c2 = yMid
+          labelY += 3
+
+          break
+        case RESPONSE_CURVE_1:
+          c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13
+          c2 = yMid - height * 0.13
+          labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1
+          labelY = yMid - height * 0.09
+          break
+
+        case RESPONSE_CURVE_2:
+          c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25
+          c2 = yMid - height * 0.25
+          labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2
+          labelY = yMid - height * 0.17
+          break
+
+        case RESPONSE_CURVE_3:
+          c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35
+          c2 = yMid - height * 0.35
+          labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28
+          labelY = yMid - height * 0.25
+          break
+
+        case RESPONSE_CURVE_4:
+          c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13
+          c2 = yMid + height * 0.13
+          labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1
+          labelY = yMid + height * 0.1
+          break
+
+        case RESPONSE_CURVE_5:
+          c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25
+          c2 = yMid + height * 0.25
+          labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2
+          labelY = yMid + height * 0.18
+          break
+
+        case RESPONSE_CURVE_6:
+          c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35
+          c2 = yMid + height * 0.35
+          labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28
+          labelY = yMid + height * 0.25
+          break
+
+        case RESPONSE_CURVE_7:
+          x1 = inverted ? axisX1 : axisX2
+          y1 = axisY1
+          x2 = x1
+          y2 = axisY2
+          c1 = x1
+          c2 = yMid
+          labelX = x1 - 5
+          labelY = height - 30
+          break
+
+        default:
+          break
+      }
+      return {
+        value,
+        label,
+        c1,
+        c2,
+        x1,
+        y1,
+        x2,
+        y2,
+        labelX,
+        labelY,
+      }
+    },
+  )
+
+  return (
+    <div
+      className="response-curve-picker"
+      ref={ref}>
+      <svg {...svgProps}>
+        <rect
+          className="container"
+          height={height}
+          rx={3}
+          ry={3}
+          width={width}
+          x={0}
+          y={0}
+        />
+
+        <SVGText
+          className="axis"
+          textAnchor="middle"
+          transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}
+          x={0}
+          y={0}
+          text="Applied force"
+        />
+
+        <SVGText
+          className="axis"
+          textAnchor="middle"
+          transform={`translate(${width / 2} ${axisY2 + 13})`}
+          x={0}
+          y={0}
+          text="Output (velocity)"
+        />
+
+        <line
+          className="axis"
+          x1={axisX1}
+          x2={axisX1}
+          y1={axisY1}
+          y2={axisY2}
+        />
+        <line
+          className="axis"
+          x1={axisX1}
+          x2={axisX2}
+          y1={axisY2}
+          y2={axisY2}
+        />
+
+        {responseCurves.map(
+          ({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (
+            <g key={value}>
+              <path
+                className={value === responseCurve ? 'curve-selected' : 'curve'}
+                d={`M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}`}
+              />
+
+              <Tooltip
+                placement="left"
+                title={label}>
+                <rect
+                  className={
+                    value === responseCurve ? 'button-selected' : 'button'
+                  }
+                  height={buttonSize}
+                  onClick={
+                    disabled
+                      ? f => f
+                      : () =>
+                          onChange({
+                            target: {
+                              value: Number.parseInt(String(value)) as Curve,
+                            },
+                          })
+                  }
+                  transform={`translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`}
+                  width={buttonSize}
+                />
+              </Tooltip>
+
+              <text
+                className={
+                  value === responseCurve ? 'button-selected' : 'button'
+                }
+                transform={`translate(${labelX} ${labelY})`}>
+                {value}
+                <title>{label}</title>
+              </text>
+            </g>
+          ),
+        )}
+      </svg>
+    </div>
+  )
+}
+
+export default ResponseCurve
+
+export { RESPONSE_CURVES }
+
+export type { Curve, ResponseCurve, ResponseCurveProps }

package/lib/pickers/ResponseCurvePicker.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useCallback } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
+import { findObj } from '../utils'
+import ResponseCurve, { type Curve, RESPONSE_CURVES } from './ResponseCurve'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type ResponseCurvePickerProps = SelectProps<Curve> & {
+  inverted?: boolean
+  Tooltip?: React.FC<TooltipProps>
+}
+
+type ResponseCurvePickerRef = SelectInstance<
+  Option<Curve>,
+  false,
+  GroupBase<Option<Curve>>
+>
+
+const ResponseCurvePicker = forwardRef<
+  SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>,
+  ResponseCurvePickerProps
+>((props, ref) => {
+  const {
+    Tooltip = DefaultTooltip,
+    inverted = false,
+    onChange,
+    value,
+    ...rest
+  } = props
+
+  const Placeholder = useCallback(
+    () => (
+      <div className="singleValue">
+        {(findObj('value', value)(RESPONSE_CURVES) as Option<Curve>)?.label}
+      </div>
+    ),
+    [value],
+  )
+
+  const MenuList = useCallback(
+    ({ setValue }: { setValue: (v: Curve) => void }) => (
+      <ResponseCurve
+        autosize
+        inverted={inverted}
+        onChange={({ target: { value: v } }) => {
+          setValue(v)
+          onChange(v)
+        }}
+        Tooltip={Tooltip}
+        value={Number.parseInt(String(value)) as Curve}
+      />
+    ),
+    [Tooltip, inverted, onChange, value],
+  )
+
+  return (
+    <Select
+      {...rest}
+      components={{
+        Placeholder,
+        MenuList,
+      }}
+      isSearchable={false}
+      onChange={f => f}
+      ref={ref}
+      value={value}
+    />
+  )
+})
+
+export default ResponseCurvePicker
+
+export type { ResponseCurvePickerProps, ResponseCurvePickerRef }