A drag-and-drop-enabled, responsive, envelope graph that allows to shape a wave with attack, decay, sustain and release
MIT License
A drag-and-drop-enabled, responsive, envelope graph that allows to shape a wave with attack, decay, sustain and release.
Check out the Demo!
$ npm i --save react-envelope-graph
or
$ yarn add react-envelope-graph
Import the component
import EnvelopeGraph from "react-envelope-graph";
and then use it:
function App() {
return (
<EnvelopeGraph
defaultXa={1}
defaultXd={0.5}
defaultYs={0.5}
defaultXr={0.7}
ratio={{
xa: 0.25,
xd: 0.25,
xr: 0.2
}}
style={{
backgroundColor: "black",
padding: "2.5%",
height: "100vh",
width: "20vw"
}}
styles={{
line: {
fill: "none",
stroke: "red",
strokeWidth: 2,
},
dndBox: {
fill: "none",
stroke: "blue",
strokeWidth: 0.1,
height: 1,
width: 1
},
dndBoxActive: {
fill: "blue",
}
}}
onChange={console.log}
/>
);
}
height/width
ratio is preserved within the svgwidth
and height
can be specified via the style
propdefaultXa
, defaultXd
, defaultYs
and defaultXr
need to have a valueratio
, the sum of the values xa
, xd
and xr
needs to remain below0.75
. xs
is internally set to xs === 0.25
.styles
prop must not use a unit (e.g. px
orem
) as they set values on SVG components (user units)styles
is not a regular style
prop, but a custom prop thatstyle
propdefaultXa
, defaultXd
, defaultYs
and defaultXr
props are changed,onChange
event is fired and the graph is set to these values.ratio
, dndBox
, onChange
, style
To try the component:
$ git clone [email protected]:TimDaub/react-envelope-graph.git
$ npm i
$ npm run dev
Help is very much appreciated. I'll try to handle PRs as fast as I can. Below is a list of the current limitations:
ya
value cannot be set via draggingdefaultXa
, defaultXd
, defaultYs
and defaultXr
can now be used toonChange
event firinggetBoundingClientRect
in favor of getComputedStyles
formargin
and padding
via style
height
and width
. They're nowstyle
propheight
/width
of graph to 100%
to respect ratio. I'll haveonAttackChange
, onDecayChange
,onSustainChange
and onReleaseChange
in favor of onChange
, which returnsheight
and width
, the graph's ratio is adjustsratio.xs
from configurable paramspadding
through native style
prop and removemarginTop
, marginRight
, marginBottom
, and marginRight
propsstyles
prop to allow to styling of the componentdndBox
prop to styles
MIT