svg-envelope/dist/main.js

Customizable ADSR like envelope

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.svgEnvelope=t():e.svgEnvelope=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n="http://www.w3.org/2000/svg",r=e;("string"==typeof e||e instanceof String)&&(e=document.querySelector(e)),"svg"===e.nodeName.toLowerCase()?r=e:(r=document.createElementNS("http://www.w3.org/2000/svg","svg"),e.appendChild(r));void 0!==e.dataset.label&&e.dataset.label;var o=JSON.parse(r.dataset.config||"{}"),i=Object.assign({},{label:!1,env_color:"blue",env_width:4,with_label:!0,width_A:.25,width_D:.25,width_R:.25,env:{attack:1,decay:1,sustain:.5,release:1}},t,o),s=i.env;function u(){var e="",t=0,n=0;return e+="M"+100*t+","+(100-n),e+="L"+100*(t+=s.attack*i.width_A)+","+(100-(n=100-i.env_width/2)),e+="L"+100*(t+=s.decay*i.width_D)+","+(100-(n=100*s.sustain-i.env_width/2)+2),e+="L"+100*(t=1-s.release*i.width_R)+","+(100-(n=100*s.sustain-i.env_width/2)+2),e+="L"+100*(t=1)+","+(100-(n=i.env_width/2)+2)}return function(){r.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),r.setAttributeNS(null,"viewBox","0 0 100 100"),r.setAttributeNS(null,"preserveAspectRatio","none"),r.setAttribute("class","envelope");var e=document.createElementNS(n,"path");e.setAttributeNS(null,"d",u()),e.setAttribute("vector-effect","non-scaling-stroke"),e.setAttribute("stroke",i.env_color),e.setAttribute("stroke-width",""+i.env_width),e.setAttribute("fill","transparent"),e.setAttribute("class","envelope-path"),r.appendChild(e)}(),{set envelope(e){!function(e){s=e}(e),r.childNodes[0].setAttributeNS(null,"d",u())}}}}])});