zds-pickers 4.0.5 → 4.0.6

package/lib/hooks/useStateWithDynamicDefault.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+
+const useStateWithDynamicDefault = <T>(defaultVal: T) => {
+  const [state, setState] = useState<T>(defaultVal)
+
+  useEffect(() => {
+    setState(defaultVal)
+  }, [defaultVal])
+
+  return [state, setState] as const
+}
+
+export default useStateWithDynamicDefault

package/lib/main.ts

@@ -0,0 +1,34 @@
+// Pickers
+export { default as CCPicker } from './pickers/CCPicker'
+export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker'
+export { default as ChannelPicker } from './pickers/ChannelPicker'
+export { default as Knob } from './pickers/Knob'
+export { default as KnobPicker } from './pickers/KnobPicker'
+export { default as LatchPicker } from './pickers/LatchPicker'
+export { default as MappingPicker } from './pickers/MappingPicker'
+export { default as NotePicker } from './pickers/NotePicker'
+export { default as OctavePlayer } from './other/OctavePlayer'
+export { default as PianoPicker } from './pickers/PianoPicker'
+export { default as PolarityPicker } from './pickers/PolarityPicker'
+export { default as ResponseCurvePicker } from './pickers/ResponseCurvePicker'
+export { default as Select } from './pickers/Select'
+export { default as StatusPicker } from './pickers/StatusPicker'
+export { default as SVGText } from './other/SVGText'
+export { default as ValuePicker } from './pickers/ValuePicker'
+
+// MIDI
+export {
+  combineStatusWithChannel,
+  extractStatusAndChannel,
+  getStatusLabel,
+  MASK_CHANNEL,
+  MASK_STATUS,
+  Statuses,
+} from './midi/export'
+
+export {
+  default as ResponseCurve,
+  RESPONSE_CURVES,
+} from './pickers/ResponseCurve'
+
+export { default as ccValues } from './midi/ccValues'

package/lib/midi/ccValues.ts

@@ -0,0 +1,139 @@
+import type { Option } from '../pickers/Select'
+
+const CC_NAMES = [
+  'Bank Select',
+  'Modulation Wheel',
+  'Breath Controller',
+  '',
+  'Foot Control',
+  'Portamento Time',
+  'Data Entry Slider',
+  'Volume',
+  'Balance',
+  '',
+  'Pan',
+  'Expression',
+  'Effect Control 1',
+  'Effect Control 2',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Controller 0',
+  'Controller 1',
+  'Controller 2',
+  'Controller 3',
+  'Controller 4',
+  'Controller 5',
+  'Controller 6',
+  'Controller 7',
+  'Controller 8',
+  'Controller 9',
+  'Controller 10',
+  'Controller 11',
+  'Controller 12',
+  'Controller 13',
+  'Controller 14',
+  'Controller 15',
+  'Controller 16',
+  'Controller 17',
+  'Controller 18',
+  'Controller 19',
+  'Controller 20',
+  'Controller 21',
+  'Controller 22',
+  'Controller 23',
+  'Controller 24',
+  'Controller 25',
+  'Controller 26',
+  'Controller 27',
+  'Controller 28',
+  'Controller 29',
+  'Controller 30',
+  'Controller 31',
+  'Sustain',
+  'Portamento',
+  'Sostenuto',
+  'Soft Pedal',
+  'Legato Pedal',
+  'Sustain 2',
+  'Sound Variation',
+  'Resonance/Timbre',
+  'Sound Release Time',
+  'Sound Attack Time',
+  'Frequency Cutoff',
+  'Sound Control 6',
+  'Sound Control 7',
+  'Sound Control 8',
+  'Sound Control 9',
+  'Sound Control 10',
+  'Decay or General 1',
+  'Hi-Pass or General 2',
+  'General 3',
+  'General 4',
+  'Portamento Amount',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Reverb Level',
+  'Tremolo Depth',
+  'Chorus Level',
+  'Detune',
+  'Phaser Depth',
+  'Data Entry +1',
+  'Data Entry -1',
+  'Non-registered LSB',
+  'Non-registered MSB',
+  'Registered msb',
+  'Registered lsb',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  '',
+  'Shift 1',
+  'Shift 2',
+  'Shift 3',
+  'Shift 4',
+  'Shift 5',
+  'Shift 6',
+  '',
+  '',
+  '',
+  '',
+  'All Sound Off',
+  'All Controllers Off',
+  'Local Mode',
+  'All Notes Off',
+  'Omni Mode Off',
+  'Omni Mode On',
+  'Mono Mode On',
+  'Poly Mode',
+].map(
+  (label, value): Option<number> => ({
+    label: String(label).length ? `${value} - ${label}` : String(value),
+    value,
+  }),
+)
+
+export default CC_NAMES

package/lib/midi/export.ts

@@ -0,0 +1,54 @@
+import type { Option } from 'lib/pickers/Select'
+
+const Statuses = {
+  noteOff: 8, // 1000
+  noteOn: 9, // 1001
+  aftertouch: 10, // 1010
+  controlChange: 11, // 1011
+  programChange: 12, // 1100
+  channelPressure: 13, // 1101
+  pitchWheel: 14, // 1110
+}
+
+type Status = (typeof Statuses)[keyof typeof Statuses]
+
+const MASK_CHANNEL = 15 // 00001111
+const MASK_STATUS = 240 // 01110000
+
+const statusOptions: Option<Status>[] = [
+  { value: Statuses.noteOn, label: 'Note On' },
+  { value: Statuses.noteOff, label: 'Note Stack' },
+  { value: Statuses.controlChange, label: 'Control Change' },
+  { value: Statuses.programChange, label: 'Program Change' },
+  { value: Statuses.aftertouch, label: 'Aftertouch' },
+  { value: Statuses.channelPressure, label: 'Channel Pressure' },
+  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },
+]
+
+const getStatusLabel = (val: Status) =>
+  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'
+
+const combineStatusWithChannel = (channel: number, status: Status) =>
+  channel | (status << 4)
+
+const extractStatusAndChannel = (
+  status: number,
+): {
+  status: Status
+  channel: number
+} => ({
+  status: (((status & MASK_STATUS) >> 4) | 8) as Status,
+  channel: status & MASK_CHANNEL,
+})
+
+export {
+  combineStatusWithChannel,
+  extractStatusAndChannel,
+  getStatusLabel,
+  MASK_CHANNEL,
+  MASK_STATUS,
+  statusOptions,
+  Statuses,
+}
+
+export type { Status }

package/lib/other/DefaultTooltip.ts

@@ -0,0 +1,14 @@
+import { Fragment, createElement } from 'react'
+
+type TooltipProps = {
+  children?: React.ReactNode
+  placement?: 'left' | 'right' | 'top' | 'bottom'
+  title: React.ReactNode
+}
+
+const DefaultTooltip = ({ children }: React.PropsWithoutRef<TooltipProps>) =>
+  createElement(Fragment, null, children)
+
+export default DefaultTooltip
+
+export type { TooltipProps }

package/lib/other/OctavePlayer.tsx

@@ -0,0 +1,141 @@
+import type Soundfont from 'soundfont-player'
+import { /* Midi, */ Note } from 'tonal'
+import { Piano as ReactPiano } from 'zds-react-piano'
+import type { TooltipProps } from './DefaultTooltip'
+import SoundfontProvider from './SoundFontProvider'
+
+const baseNotes = [
+  'C',
+  'C#',
+  'D',
+  'D#',
+  'E',
+  'F',
+  'F#',
+  'G',
+  'G#',
+  'A',
+  'A#',
+  'B',
+]
+
+// const { midiToFreq, midiToNoteName } = Midi
+
+// console.log(Note.names(), Note.midi('C4'))
+
+// const firstNote = 21
+// const lastNote = 108
+const numNotes = 12
+
+const whiteNotes = numNotes * 0.7 // approx
+
+const audioContext = new window.AudioContext()
+
+type OctavePlayerProps = {
+  disabled?: boolean
+  height: number
+  octave: number
+  width: number
+}
+
+const OctavePlayer = ({
+  octave,
+  height,
+  width,
+  ...rest
+}: OctavePlayerProps) => {
+  const keyWidth = width / whiteNotes + 2
+  const keyWidthToHeight = keyWidth / height
+
+  const firstNote = Note.midi(baseNotes[0] + String(octave)) || 0
+  const lastNote =
+    Note.midi(baseNotes[baseNotes.length - 1] + String(octave)) || 0
+
+  return (
+    <div>
+      <ReactPiano
+        keyWidthToHeight={keyWidthToHeight}
+        noteRange={{ first: firstNote, last: lastNote }}
+        width={width}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+type WithProviderProps = {
+  format?: 'mp3' | 'ogg'
+  height: number
+  hostname?: string
+  instrumentName: Soundfont.InstrumentName
+  octave?: number
+  onChange?: (note: number) => void
+  onClick?: (note: number) => void
+  onDoubleClick?: (note: number) => void
+  onKeyMouseEnter?: (note: number) => void
+  onKeyMouseLeave?: (note: number) => void
+  soundfont?: 'MusyngKite' | 'FluidR3_GM'
+  Tooltip?: TooltipProps
+  width: number
+}
+
+const WithProvider = ({
+  format,
+  height,
+  hostname,
+  instrumentName,
+  octave = 4,
+  onChange,
+  onClick,
+  onDoubleClick,
+  onKeyMouseEnter,
+  onKeyMouseLeave,
+  soundfont,
+  Tooltip,
+  width,
+}: WithProviderProps) => (
+  <SoundfontProvider
+    {...{
+      audioContext,
+      format,
+      hostname,
+      instrumentName,
+      onChange,
+      soundfont,
+    }}
+    render={({
+      isLoading,
+      playNote,
+      stopNote,
+    }: {
+      isLoading: boolean
+      playNote: (midiNumber: number) => void
+      stopNote: (midiNumber: number) => void
+    }) => (
+      <>
+        <div>
+          <h2>Octave: {octave}</h2>
+        </div>
+        <OctavePlayer
+          disabled={isLoading}
+          {...{
+            height,
+            octave,
+            onClick,
+            onDoubleClick,
+            onKeyMouseEnter,
+            onKeyMouseLeave,
+            playNote,
+            stopNote,
+            Tooltip,
+            width,
+          }}
+        />
+      </>
+    )}
+  />
+)
+
+export default WithProvider
+
+export type { WithProviderProps }

package/lib/other/SVGText.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+const MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'
+
+type WordsByLine = {
+  words: string[]
+  width: number
+  showLine: boolean
+}
+
+const calculateWordsByLines = (
+  text: string,
+  wordWidths: WordWidths,
+  maxWidth: number,
+  maxHeight: number,
+) => {
+  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths
+
+  return text.split(/\s+/).reduce((result: WordsByLine[], word) => {
+    const wordWidth = wordsWithComputedWidth[word]
+    const currentLine = result[result.length - 1]
+    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {
+      // Word can be added to an existing line
+      currentLine.words.push(word)
+      currentLine.width += wordWidth + spaceWidth
+    } else {
+      // Add first word to line or word is too long to scaleToFit on existing line
+      const newLine: WordsByLine = {
+        words: [word],
+        width: wordWidth,
+        showLine: maxHeight
+          ? lineHeight * (result.length + 1) < maxHeight
+          : true,
+      }
+      result.push(newLine)
+    }
+    return result
+  }, [])
+}
+
+type WordWidths = {
+  wordsWithComputedWidth: Record<string, number>
+  spaceWidth: number
+  lineHeight: number
+}
+
+const calculateWordWidths = (
+  style?: CSSStyleDeclaration,
+  textNode?: SVGGraphicsElement | null,
+  text?: string,
+): WordWidths | undefined => {
+  if (style && textNode) {
+    // biome-ignore lint/complexity/noForEach: <explanation>
+    Array.from(style).forEach(key =>
+      textNode.style.setProperty(
+        key,
+        style.getPropertyValue(key),
+        style.getPropertyPriority(key),
+      ),
+    )
+    const wordArray = [...new Set(String(text).split(/\s+/))]
+    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {
+      textNode.textContent = word
+      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
+      return { ...wordMap, [word]: textNode.getBBox().width }
+    }, {})
+
+    textNode.textContent = '\u00A0'
+
+    const spaceWidth =
+      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8
+    const lineHeight = textNode.getBBox().height
+
+    textNode.setAttribute('style', '')
+    return { wordsWithComputedWidth, spaceWidth, lineHeight }
+  }
+  return undefined
+}
+
+type TextProps = Partial<HTMLOrSVGElement> & {
+  className?: string
+  dx?: number
+  dy?: number
+  maxHeight?: number
+  maxWidth?: number
+  transform?: string
+  text: string
+  textAnchor?: React.CSSProperties['textAnchor']
+  verticalAnchor?: 'start' | 'middle' | 'end'
+  x?: number
+  y?: number
+}
+
+const Text = (props: TextProps) => {
+  const {
+    className = '',
+    dx = 0,
+    dy = 0,
+    maxHeight = 1000,
+    maxWidth = 1000,
+    // textAnchor = 'start',
+    text = '',
+    verticalAnchor = 'start',
+    x = 0,
+    y = 0,
+    transform = '',
+    ...rest
+  } = props
+  const [wordWidths, setWordWidths] = useState<WordWidths>()
+  const [textLines, setTextLines] = useState<WordsByLine[]>([])
+  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()
+  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)
+
+  const displayedLines: WordsByLine[] = useMemo(() => {
+    const result = textLines.filter(({ showLine }) => showLine)
+    return result.length
+      ? result
+      : text
+          .split(/\n/)
+          .map(line => ({ words: [line], width: 0, showLine: true }))
+  }, [textLines, text])
+
+  const ref: React.LegacyRef<SVGTextElement> = useCallback(
+    (node: SVGTextElement | null) => {
+      setComputedStyle(
+        node !== null ? window.getComputedStyle(node) : undefined,
+      )
+    },
+    [],
+  )
+
+  useEffect(() => {
+    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)
+    if (el === null) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)
+      document.body.appendChild(svg)
+      svg.appendChild(
+        document.createElementNS('http://www.w3.org/2000/svg', 'text'),
+      )
+      measureRef.current = svg
+      return () => {
+        document.body.removeChild(svg)
+      }
+    }
+    measureRef.current = el
+  }, [])
+
+  useEffect(() => {
+    const wordWithWidths = calculateWordWidths(
+      style,
+      measureRef.current as SVGGraphicsElement | null,
+      text,
+    )
+
+    setWordWidths(wordWithWidths)
+  }, [text, style])
+
+  useEffect(() => {
+    if (maxWidth && wordWidths) {
+      const lines = text
+        .split(/\n/)
+        .flatMap(line =>
+          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),
+        )
+
+      setTextLines(lines)
+    }
+  }, [maxHeight, maxWidth, wordWidths, text])
+
+  const startDy = useMemo(() => {
+    if (wordWidths?.lineHeight) {
+      switch (verticalAnchor) {
+        case 'start':
+          return wordWidths.lineHeight
+
+        case 'middle':
+          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)
+
+        default:
+          return -(displayedLines.length - 1) * wordWidths.lineHeight
+      }
+    }
+    return 0
+  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])
+
+  return (
+    <text
+      className={className}
+      ref={ref}
+      dx={dx}
+      dy={dy}
+      x={x}
+      y={y}
+      // textAnchor={textAnchor}
+      transform={transform}
+      {...rest}>
+      <>
+        {displayedLines.map((line, idx) => (
+          <tspan
+            dx={x + dx}
+            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}
+            key={idx}
+            x={0}>
+            {line.words.join(' ')}
+          </tspan>
+        ))}
+        {textLines.length && displayedLines.length !== textLines.length && (
+          <>
+            <tspan>...</tspan>
+            <title>{text}</title>
+          </>
+        )}
+      </>
+    </text>
+  )
+}
+
+export default Text
+
+export { MEASUREMENT_ELEMENT_ID }