zds-pickers 4.0.3 → 4.0.6

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 }

package/lib/other/SoundFontProvider.tsx

@@ -0,0 +1,130 @@
+// See https://github.com/danigb/soundfont-player
+// for more documentation on prop options.
+import { useCallback, useEffect, useState } from 'react'
+import Soundfont from 'soundfont-player'
+// import '../temp/acoustic_grand_piano-mp3'
+
+const isDefined = <T,>(item: T) =>
+  item !== undefined && item !== null && !Number.isNaN(item)
+
+type SoundfontProviderProps = {
+  audioContext: AudioContext
+  format?: 'mp3' | 'ogg'
+  hostname?: string
+  instrumentName: Soundfont.InstrumentName
+  onChange?: (midiNumber: number) => void
+  render: (props: {
+    isLoading: boolean
+    playNote: (midiNumber: number) => void
+    stopNote: (midiNumber: number) => void
+    stopAllNotes: () => void
+  }) => React.ReactNode
+  soundfont?: 'MusyngKite' | 'FluidR3_GM'
+}
+
+const SoundfontProvider = (props: SoundfontProviderProps) => {
+  const {
+    audioContext,
+    format,
+    hostname,
+    instrumentName,
+    onChange,
+    render,
+    soundfont,
+  } = props
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [activeAudioNodes, setActiveAudioNodes] = useState<
+    Record<number, Soundfont.Player>
+  >({})
+  const [instrument, setInstrument] = useState<Soundfont.Player | null>(null)
+
+  const loadInstrument = useCallback(
+    (nm: Soundfont.InstrumentName) => {
+      // Re-trigger loading state
+      setInstrument(null)
+
+      if (isDefined(hostname)) {
+        // pull from an url
+        Soundfont.instrument(audioContext, nm, {
+          format,
+          soundfont,
+          nameToUrl: (name: string, sf: string, fmt: string) =>
+            `${hostname}/${sf}/${name}-${fmt}.js`,
+        }).then(newInstrument => {
+          setInstrument(newInstrument)
+        })
+      } else if (isDefined(instrumentName)) {
+        // the host app has already injected the soundfont into global space
+        Soundfont.instrument(audioContext, instrumentName).then(
+          newInstrument => {
+            setInstrument(newInstrument)
+          },
+        )
+      } else {
+        // sound must be disabled
+        setIsLoading(false)
+      }
+    },
+    [audioContext, format, hostname, instrumentName, soundfont],
+  )
+
+  useEffect(() => {
+    loadInstrument(instrumentName)
+  }, [instrumentName, loadInstrument])
+
+  useEffect(() => {
+    if (isDefined(instrumentName)) {
+      setIsLoading(!instrument)
+    }
+  }, [instrument, instrumentName])
+
+  const playNote = (midiNumber: number) => {
+    if (instrument) {
+      audioContext.resume().then(() => {
+        const audioNode = instrument.play(String(midiNumber))
+        setActiveAudioNodes(prev => ({ ...prev, [midiNumber]: audioNode }))
+      })
+    }
+  }
+
+  const stopNote = (midiNumber: number) => {
+    audioContext.resume().then(() => {
+      if (!activeAudioNodes[midiNumber]) {
+        return
+      }
+      const audioNode = activeAudioNodes[midiNumber]
+      audioNode.stop()
+      setActiveAudioNodes(prev => {
+        const { [midiNumber]: _, ...rest } = prev
+        return rest
+      })
+    })
+    onChange?.(midiNumber)
+  }
+
+  // Clear any residual notes that don't get called with stopNote
+  const stopAllNotes = () => {
+    audioContext.resume().then(() => {
+      const nodes = Object.values(activeAudioNodes)
+      for (const node of nodes) {
+        if (node) {
+          node.stop()
+        }
+      }
+      setActiveAudioNodes(nodes)
+    })
+  }
+
+  return render({
+    isLoading,
+    playNote,
+    stopNote,
+    stopAllNotes,
+  })
+}
+
+// https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
+// https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
+
+export default SoundfontProvider

package/lib/pickers/CCPicker.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import ccValues from '../midi/ccValues'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type CCPickerProps = SelectProps<number>
+
+type CCPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const CCPicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  CCPickerProps
+>((props, ref) => (
+  <Select
+    {...props}
+    options={ccValues}
+    ref={ref}
+  />
+))
+
+export default CCPicker
+
+export type { CCPickerProps, CCPickerRef }