feat(LFO): update sine line

Author: codeacme17

example/src/components/visualizaion/EchoLFO.tsx

@@ -2,7 +2,7 @@ import { LFO } from '@echo-ui'
 
 export const EchoLFO = () => {
   return (
-    <section className="h-32">
+    <section className="h-32 w-2/3">
       <LFO />
     </section>
   )

packages/components/visualization/LFO/LFO.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import * as d3 from 'd3'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { useResizeObserver } from '../../../lib/hooks/useResizeObserver'
 import { cn } from '../../../lib/utils'
 import { LFOProps, LFORef } from './types'
@@ -9,12 +10,62 @@ export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
   const { lineWidth = LINE_WIDTH, lineColor = LINE_COLOR, ...restProps } = props
 
   const LFORef = useRef<LFORef | null>(null)
+  const xScale = useRef<d3.ScaleLinear<number, number> | null>(null)
+  const yScale = useRef<d3.ScaleLinear<number, number> | null>(null)
 
   useImperativeHandle(ref, () => LFORef.current as LFORef)
 
-  const dementions = useResizeObserver(LFORef, WIDTH, HEIGHT, () => {})
+  const dimensions = useResizeObserver(LFORef, WIDTH, HEIGHT, () => {
+    generateScales()
+    generateLine()
+  })
 
-  console.log(dementions)
+  const generateScales = () => {
+    const { width, height } = dimensions.current
+
+    xScale.current = d3
+      .scaleLinear()
+      .domain([0, 4 * Math.PI])
+      .range([0, width])
+
+    yScale.current = d3.scaleLinear().domain([-1, 1]).range([height, 0])
+  }
+
+  const generateLine = () => {
+    const { width, height } = dimensions.current
+
+    const svg = d3.select(LFORef.current).select('svg').attr('width', width).attr('height', height)
+
+    svg.selectAll('*').remove()
+
+    const data = d3.range(0, 4 * Math.PI, 0.01).map((x) => ({
+      x,
+      y: Math.sin(x),
+    }))
+
+    const line = d3
+      .line<{ x: number; y: number }>()
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y))
+
+    const xScale = d3
+      .scaleLinear()
+      .domain([0, 4 * Math.PI])
+      .range([0, width])
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([-1, 1])
+      .range([height - 4, 4])
+
+    svg
+      .append('path')
+      .datum(data)
+      .attr('fill', 'none')
+      .attr('stroke', lineColor)
+      .attr('stroke-width', lineWidth)
+      .attr('d', line)
+  }
 
   const { base, svg } = useStyle()
 

packages/components/visualization/LFO/constants.ts

@@ -2,4 +2,4 @@ export const WIDTH = 360
 export const HEIGHT = 100
 
 export const LINE_COLOR = 'var(--echo-primary)'
-export const LINE_WIDTH = 2
+export const LINE_WIDTH = 3