feat(hook): update useEnvelop

Author: codeacme17

packages/hooks/index.ts

@@ -1,4 +1,4 @@
-export { useEnvelope, type UseEnvelopeProps } from './useEnvelope'
+// export { useEnvelope, type UseEnvelopeProps } from './useEnvelope'
 export { useFetchAudio, type UseFetchAudioProps } from './useFetchAudio'
 export { useOscilloscope, type UseOscilloscopeProps } from './useOscilloscope'
 export { usePlayer, type UsePlayerProps } from './usePlayer'

packages/hooks/useEnvelope.ts

@@ -1,64 +1,65 @@
 import * as Tone from 'tone'
-import { useRef } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { LIMITS } from '../components/controller/Envelope/constants'
 import type { EnvelopeData, EnvelopeLimits } from '../components/controller/Envelope'
 
 export interface UseEnvelopeProps {
   data: EnvelopeData
   limits?: EnvelopeLimits
-  setData?: (data: EnvelopeData) => void
 }
 
 export const useEnvelope = (props: UseEnvelopeProps) => {
-  const { data, limits = LIMITS, setData } = props
+  const { data: _data, limits = LIMITS } = props
 
+  const [data, setData] = useState({ ..._data })
   const envelope = useRef<Tone.Envelope | null>(null)
 
-  const init = () => {
-    envelope.current = new Tone.Envelope()
-
-    return () => {}
-  }
+  const [delay, setDelay] = useState(_data.delay)
+  const [attack, setAttack] = useState(_data.attack)
+  const [hold, setHold] = useState(_data.hold)
+  const [decay, setDecay] = useState(_data.decay)
+  const [sustain, setSustain] = useState(_data.sustain)
+  const [release, setRelease] = useState(_data.release)
 
-  const setAttack = (value: number) => {
-    if (setData) {
-      setData({ ...data, attack: value })
-    }
-  }
+  useEffect(() => {
+    if (!envelope.current) return
 
-  const setDecay = (value: number) => {
-    if (setData) {
-      setData({ ...data, decay: value })
-    }
-  }
+    envelope.current.attack = attack
+    envelope.current.decay = decay
+    envelope.current.sustain = sustain
+    envelope.current.release = release
+    setData({ attack, decay, sustain, release })
 
-  const setDelay = (value: number) => {
-    if (setData) {
-      setData({ ...data, delay: value })
-    }
-  }
+    if (_data.delay !== undefined) {
+      envelope.current.triggerAttack(`+${delay || 0}`)
+      setData({ delay, attack, decay, sustain, release })
 
-  const setHold = (value: number) => {
-    if (setData) {
-      setData({ ...data, hold: value })
+      if (_data.hold !== undefined) {
+        envelope.current.triggerRelease(`+${delay! + attack + hold! + decay}}`)
+        setData({ delay, attack, decay, hold, sustain, release })
+      }
     }
-  }
+  }, [delay, attack, hold, decay, sustain, release])
 
-  const setRelease = (value: number) => {
-    if (setData) {
-      setData({ ...data, release: value })
-    }
+  const init = () => {
+    envelope.current = new Tone.AmplitudeEnvelope({
+      attack: data.attack,
+      decay: data.decay,
+      sustain: data.sustain,
+      release: data.release,
+    })
   }
 
   return {
-    envelope: envelope.current,
+    init,
     data,
+    envelope,
     limits,
-    init,
     setAttack,
     setDecay,
+    setSustain,
+    setRelease,
     setDelay,
     setHold,
-    setRelease,
   }
 }