vue-audio-ui 0.1.0 → 0.1.1

package/dist/vue-audio-ui.umd.cjs

@@ -0,0 +1,17 @@
+(function(v,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(v=typeof globalThis<"u"?globalThis:v||self,a(v["vue-audio-ui"]={},v.Vue))})(this,(function(v,a){"use strict";const x={colors:{primary:"#70bfff",secondary:"#6c757d",success:"#28a745",danger:"#dc3545",warning:"#ffc107",info:"#17a2b8",light:"#e0e0e0",dark:"#343a40",muted:"#6c757d",white:"#ffffff",black:"#000000"}};function Y(t,e){let i,r;e&&n(e);function n(l){i=l.context.createAnalyser(),i.fftSize=t,r=new Float32Array(i.frequencyBinCount),l.connect(i)}function s(l){i&&l&&l.disconnect(i)}function o(l,f){l&&n(l)}function h(){return i?.getFloatTimeDomainData(r),r}function g(){return i?.getFloatFrequencyData(r),r}function w(l){let f=0,m;for(let u=0;u<l.length;u++)m=Math.abs(l[u]),m>f&&(f=m);return 20*Math.log10(f)}function c(l){let f=0,m;for(let u=0;u<l.length;u++)m=Math.abs(l[u]),f+=m*m;return 20*Math.log10(Math.sqrt(f/l.length))}return{getPeakDb:w,getRmsDb:c,getFloatTimeDomainData:h,getFloatFrequencyData:g,onInputChanged:o,disposeMetering:s}}function K(){const t=a.ref(!1);function e(n){try{n()}catch(s){t.value=!1,console.log(`error in render callback - ${s}`)}t.value&&window.requestAnimationFrame(()=>e(n))}function i(n){t.value=!0,e(n)}function r(){t.value=!1}return{startRendering:i,stopRendering:r}}const Gt=a.defineComponent({name:"VAAnalogMeter",props:{input:{required:!1,type:AudioNode,default:void 0},type:{required:!1,type:String,default:"peak"},fftSize:{required:!1,type:Number,default:2048},width:{required:!1,type:Number,default:300}},setup(t){const{getPeakDb:e,getRmsDb:i,getFloatTimeDomainData:r,onInputChanged:n}=Y(t.fftSize,t.input);a.watch(()=>t.input,n);const{startRendering:s,stopRendering:o}=K(),h=a.ref(-1),g=a.ref("black"),w=a.computed(()=>isNaN(h.value)?"rotate(0 160 150)":`rotate(${50*h.value} 160 150)`);return a.onMounted(()=>{s(()=>{const c=r();let l=0;t.type==="peak"&&c?l=e(c):t.type==="rms"&&c&&(l=i(c));const f=80;l=l<-f?-f:l;const m=(f+l)/f;h.value=m*2-1})}),a.onUnmounted(()=>{o()}),{color:g,rotation:w,value:h}}}),M=(t,e)=>{const i=t.__vccOpts||t;for(const[r,n]of e)i[r]=n;return i},Et={class:"meter-container"},$t=["width"],At=["transform"];function Bt(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("div",Et,[(a.openBlock(),a.createElementBlock("svg",{width:`${t.width}px`,viewBox:"0 0 320 220",xmlns:"http://www.w3.org/2000/svg"},[e[1]||(e[1]=a.createStaticVNode('<defs data-v-048f897f><linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1" data-v-048f897f><stop offset="0%" stop-color="#f0f0f0" data-v-048f897f></stop><stop offset="50%" stop-color="#b5b5b5" data-v-048f897f></stop><stop offset="100%" stop-color="#8a8a8a" data-v-048f897f></stop></linearGradient><linearGradient id="faceGrad" x1="0" y1="0" x2="0" y2="1" data-v-048f897f><stop offset="0%" stop-color="#fffdf7" data-v-048f897f></stop><stop offset="100%" stop-color="#e9e2d3" data-v-048f897f></stop></linearGradient><radialGradient id="glassGrad" cx="50%" cy="0%" r="80%" data-v-048f897f><stop offset="0%" stop-color="white" stop-opacity="0.7" data-v-048f897f></stop><stop offset="60%" stop-color="white" stop-opacity="0.15" data-v-048f897f></stop><stop offset="100%" stop-color="white" stop-opacity="0" data-v-048f897f></stop></radialGradient><filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" data-v-048f897f><feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.4" data-v-048f897f></feDropShadow></filter><filter id="needleShadow" data-v-048f897f><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5" data-v-048f897f></feDropShadow></filter></defs><rect x="10" y="10" rx="18" ry="18" width="300" height="200" fill="url(#frameGrad)" filter="url(#shadow)" data-v-048f897f></rect><rect x="24" y="24" rx="12" ry="12" width="272" height="172" fill="url(#faceGrad)" stroke="#777" stroke-width="1" data-v-048f897f></rect><path d="M 60 90 A 130 70 0 0 1 260 90" fill="none" stroke="#222" stroke-width="2" data-v-048f897f></path><g stroke="#222" stroke-width="2" data-v-048f897f><line x1="100" y1="120" x2="105" y2="130" data-v-048f897f></line><line x1="160" y1="110" x2="160" y2="122" data-v-048f897f></line><line x1="220" y1="120" x2="215" y2="130" data-v-048f897f></line></g>',5)),a.createElementVNode("g",{id:"needle",transform:t.rotation},[...e[0]||(e[0]=[a.createElementVNode("polygon",{points:"160,70 158,150 162,150",fill:"#c62828"},null,-1),a.createElementVNode("circle",{cx:"160",cy:"150",r:"6",fill:"#333"},null,-1),a.createElementVNode("circle",{cx:"160",cy:"150",r:"3",fill:"#777"},null,-1)])],8,At),e[2]||(e[2]=a.createElementVNode("rect",{x:"24",y:"24",rx:"12",ry:"12",width:"272",height:"172",fill:"url(#glassGrad)"},null,-1)),e[3]||(e[3]=a.createElementVNode("text",{x:"160",y:"185","text-anchor":"middle","font-size":"16","font-weight":"bold","font-family":"Arial, Helvetica, sans-serif",fill:"#333"},null,-1))],8,$t))])}const st=M(Gt,[["render",Bt],["__scopeId","data-v-048f897f"]]);function I(t,e,i){return t<e?e:t>i?i:t}function Nt(t,e){const i=Math.abs(t),r=Math.abs(e);return i>r?t:r>i?e:Math.max(t,e)}function Tt(t){return(t&t-1)===0}function lt(t,e){return+`${Math.round(+`${t}e${e}`)}e${-e}`}class dt{min;max;constructor(e,i){this.min=e,this.max=i}getCurvedValue(e){throw"getCurvedValue must be overriden in child class"}getLinearValue(e){throw"getLinearValue must be overriden in child class"}validateInput(e){if(e<this.min)throw`given value ${e} is less than min value ${this.min}`;if(e>this.max)throw`given value ${e} is greater than max value ${this.max}`}}function at(t){return Math.pow(Math.E,t)}function Pt(t,e,i,r,n,s){return(at(((t-e)/(i-e)-1)*s)-1)/(at(-s)-1)*(r-n)+n}function Ut(t,e,i,r,n,s){return(Math.log((t-n)*(at(-s)-1)/(r-n)+1)/s+1)*(i-e)+e}class ht extends dt{curveAmount;constructor(e,i,r){super(e,i),this.curveAmount=r}getCurvedValue(e){return this.validateInput(e),Pt(e,this.min,this.max,this.min,this.max,this.curveAmount)}getLinearValue(e){return this.validateInput(e),Ut(e,this.min,this.max,this.min,this.max,this.curveAmount)}}class X extends dt{constructor(e,i){super(e,i)}getCurvedValue(e){return this.validateInput(e),e}getLinearValue(e){return this.validateInput(e),e}}const It=3,zt=300,Wt=16,Lt=a.defineComponent({name:"VAAudioFileVisualizer",data(){return{canvas:null,canvasContext:null,markerPosition:0,markerIndex:0,selectionPosition:void 0,selectionIndex:void 0,zoomWindowStartIndex:0,zoomWindowEndIndex:0,zoom:1,prevY:-1,prevX:-1,curedRange:new ht(0,1,8)}},props:{amplitudeData:{required:!1,type:Float32Array},lineColor:{required:!1,type:String},backgroundColor:{required:!1,type:String},width:{required:!1,type:Number,default:500},height:{required:!1,type:Number}},computed:{cssVars(){return{"--line-color":`${this.canvasLineColor}`,"--background-color":`${this.canvasBackgroundColor}`}},graphWidth(){return this.width},graphHeight(){return this.height??this.width/It},zoomMult(){if(!this.amplitudeData)return 1;const t=this.curedRange.getCurvedValue(this.zoom);return Math.max(t,Wt/this.amplitudeData.length)},zoomWindowLength(){return this.zoomWindowEndIndex-this.zoomWindowStartIndex},canvasLineColor(){return this.lineColor??x.colors.white},canvasBackgroundColor(){return this.backgroundColor??x.colors.black},canvasMarkerColor(){return x.colors.primary},canvasSelectColor(){return x.colors.primary}},mounted(){this.canvas=this.$refs.visualizer,this.canvasContext=this.canvas.getContext("2d")},methods:{pixelsToSamples(t){return this.zoomWindowLength/this.graphWidth*t},shiftZoomWindow(t){this.zoomWindowStartIndex+=t,this.zoomWindowEndIndex+=t},setZoomWindow(){if(!this.amplitudeData){this.zoomWindowStartIndex=0,this.zoomWindowEndIndex=0,this.zoom=1;return}this.zoomWindowStartIndex=this.markerIndex-Math.round(this.amplitudeData.length*this.zoomMult/2),this.zoomWindowEndIndex=this.markerIndex+Math.round(this.amplitudeData.length*this.zoomMult/2);const e=(this.graphWidth/2-this.markerPosition)/this.graphWidth,i=Math.round(e*this.zoomWindowLength);this.shiftZoomWindow(i);let r=0;r+=this.zoomWindowStartIndex<0?-this.zoomWindowStartIndex:0,r+=this.zoomWindowEndIndex>this.amplitudeData.length?this.amplitudeData.length-this.zoomWindowEndIndex:0,this.shiftZoomWindow(r)},drawZoom(){this.setZoomWindow(),this.drawAmplitude()},getMaxSampleValue(t,e,i){let r=Number.NEGATIVE_INFINITY;for(let n=e;n<i;n++)r=Math.max(r,t[n]);return r},getMinSampleValue(t,e,i){let r=Number.POSITIVE_INFINITY;for(let n=e;n<i;n++)r=Math.min(r,t[n]);return r},getAvgSampleValue(t,e,i){let r=0;for(let n=e;n<i;n++)r+=Math.abs(t[n]);return r/(i-e)},drawMarker(){this.canvasContext.fillStyle=this.canvasMarkerColor,this.canvasContext?.fillRect(this.markerPosition,0,2,this.graphHeight)},drawSelection(){this.selectionPosition!==void 0&&(this.canvasContext.globalAlpha=.5,this.canvasContext.fillStyle=this.canvasSelectColor,this.canvasContext.fillRect(this.markerPosition,0,this.selectionPosition-this.markerPosition,this.graphHeight),this.canvasContext.globalAlpha=1)},drawPoint(t,e){this.canvasContext.fillStyle=this.canvasLineColor,this.canvasContext?.beginPath(),this.canvasContext?.arc(t+.5,e+.5,2,0,Math.PI*2),this.canvasContext?.fill()},drawBackground(){this.canvasContext?.clearRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.fillStyle=this.canvasBackgroundColor,this.canvasContext?.fillRect(0,0,this.graphWidth,this.graphHeight)},drawAmplitudeMinMax(){if(!this.amplitudeData)return;const t=this.zoomWindowLength/this.graphWidth,e=Math.max(Math.round(t),1);this.drawBackground();let i=0,r=0,n=0,s=0,o=0;for(let h=0;h<this.graphWidth;h++)i=h,s=this.getMinSampleValue(this.amplitudeData,this.zoomWindowStartIndex+h*e,this.zoomWindowStartIndex+(h+1)*e),o=this.getMaxSampleValue(this.amplitudeData,this.zoomWindowStartIndex+h*e,this.zoomWindowStartIndex+(h+1)*e),r=this.graphHeight-(this.graphHeight/2+s*this.graphHeight/2),n=this.graphHeight-(this.graphHeight/2+o*this.graphHeight/2),this.canvasContext.fillStyle=this.canvasLineColor,this.canvasContext?.fillRect(i,r,1,Nt(n-r,1));this.drawSelection(),this.drawMarker()},drawAmplitudeSampleLine(t=!1){if(!this.amplitudeData)return;const e=this.zoomWindowLength/this.graphWidth,i=Math.max(Math.round(e),1),r=this.graphWidth/this.zoomWindowLength;this.drawBackground();const n=new Path2D;let s=0,o=0,h=0;for(let g=this.zoomWindowStartIndex;g<this.zoomWindowEndIndex;g+=i)h=this.amplitudeData[g],s=(g-this.zoomWindowStartIndex)*r,o=this.graphHeight-(this.graphHeight/2+h*this.graphHeight/2),g===0?n.moveTo(s,o):n.lineTo(s,o),t&&this.drawPoint(s,o);n.lineTo(this.graphWidth,o),this.canvasContext.strokeStyle=this.canvasLineColor,this.canvasContext?.stroke(n),this.drawSelection(),this.drawMarker()},drawAmplitudeAvg(){if(!this.amplitudeData)return;const t=this.zoomWindowLength/this.graphWidth,e=Math.max(Math.round(t),1);this.drawBackground();const i=new Path2D;i.moveTo(0,0);let r=0,n=0,s=0;for(let o=0;o<this.graphWidth;o++)r=o,s=this.getAvgSampleValue(this.amplitudeData,this.zoomWindowStartIndex+o*e,this.zoomWindowStartIndex+(o+1)*e),n=this.graphHeight-(this.graphHeight/2+s*this.graphHeight/2),i.moveTo(r,n),n=this.graphHeight-(this.graphHeight/2+-s*this.graphHeight/2),i.lineTo(r,n);i.lineTo(this.graphWidth,this.graphHeight/2),this.canvasContext.strokeStyle=this.canvasLineColor,this.canvasContext?.stroke(i),this.drawSelection(),this.drawMarker()},drawAmplitude(){this.zoomWindowLength/this.graphWidth<.25?this.drawAmplitudeSampleLine(!0):this.zoomWindowLength/this.graphWidth<=2?this.drawAmplitudeSampleLine(!1):this.drawAmplitudeMinMax()},onCanvasDoubleClick(){this.amplitudeData&&(this.zoom=1,this.zoomWindowStartIndex=0,this.zoomWindowEndIndex=this.amplitudeData.length,this.markerIndex=Math.round(this.pixelsToSamples(this.markerPosition))+this.zoomWindowStartIndex,this.selectionPosition=void 0,this.selectionIndex=void 0,window.requestAnimationFrame(this.drawAmplitude))},onCanvasMouseDown(t){this.prevX=t.pageX,this.prevY=t.pageY;const e=this.canvas?.getBoundingClientRect()?.x,i=t.clientX-e;this.markerIndex=Math.round(this.pixelsToSamples(i))+this.zoomWindowStartIndex,this.markerPosition=i,this.selectionPosition=void 0,this.selectionIndex=void 0,window.requestAnimationFrame(this.drawAmplitude),document.getElementsByTagName("body")[0].classList.add("--no-text-select"),t.metaKey||t.ctrlKey?(window.addEventListener("mousemove",this.onCtrlClickDrag),window.addEventListener("mouseup",this.endCtrlClickDrag)):(window.addEventListener("mousemove",this.onClickDrag),window.addEventListener("mouseup",this.endClickDrag))},onClickDrag(t){const e=t.pageY,i=t.pageX,r=i-this.prevX;e-this.prevY,this.selectionPosition=this.selectionPosition===void 0?this.markerPosition+r:this.selectionPosition+r,window.requestAnimationFrame(this.drawAmplitude),this.prevY=e,this.prevX=i},endClickDrag(){window.removeEventListener("mousemove",this.onClickDrag),this.prevY=-1,this.prevX=-1,this.selectionPosition&&this.$emit("audioSelection",{startIndex:this.markerIndex,endIndex:Math.round(this.pixelsToSamples(this.selectionPosition))+this.zoomWindowStartIndex}),document.getElementsByTagName("body")[0].classList.remove("--no-text-select")},onCtrlClickDrag(t){if(!this.amplitudeData)return;const e=t.pageY,i=t.pageX,r=i-this.prevX,n=e-this.prevY;if(Math.abs(r)>=Math.abs(n)){if(this.prevX>=0){let s=-Math.round(r/this.graphWidth*this.zoomWindowLength);const o=-this.zoomWindowStartIndex,h=this.amplitudeData.length-this.zoomWindowEndIndex;s=I(s,o,h),this.shiftZoomWindow(s),this.markerIndex+=s}}else this.prevY>=0&&(this.zoom=I(this.zoom-n/zt*1,0,1),this.setZoomWindow());this.markerPosition=Math.round((this.markerIndex-this.zoomWindowStartIndex)/this.zoomWindowLength*this.graphWidth),window.requestAnimationFrame(this.drawAmplitude),this.prevY=e,this.prevX=i},endCtrlClickDrag(){window.removeEventListener("mousemove",this.onCtrlClickDrag),this.prevY=-1,this.prevX=-1,document.getElementsByTagName("body")[0].classList.remove("--no-text-select")}},watch:{amplitudeData(t,e){window.requestAnimationFrame(this.drawZoom)}}}),Ot=["width","height"];function qt(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("canvas",{ref:"visualizer",class:"visualizer-canvas",style:a.normalizeStyle(t.cssVars),width:t.graphWidth,height:t.graphHeight,onMousedown:e[0]||(e[0]=(...o)=>t.onCanvasMouseDown&&t.onCanvasMouseDown(...o)),onDblclick:e[1]||(e[1]=(...o)=>t.onCanvasDoubleClick&&t.onCanvasDoubleClick(...o))},null,44,Ot)}const ct=M(Lt,[["render",qt],["__scopeId","data-v-f20165f6"]]),Rt=a.defineComponent({name:"VADigitalMeterStereo",props:{leftInput:{required:!1,type:AudioNode},rightInput:{required:!1,type:AudioNode},type:{required:!1,type:String,default:"peak"},fftSize:{required:!1,type:Number,default:2048},clippingColor:{required:!1,type:String,default:"#e64a19"},barColor:{required:!1,type:String},backgroundColor:{required:!1,type:String},markerColor:{required:!1,type:String,default:"gray"},drawMarkers:{required:!1,type:Boolean,default:!1},height:{required:!1,type:Number,default:200},width:{required:!1,type:Number,default:20},font:{required:!1,type:String,default:"Helvetica, sans-serif"}}}),Ht={class:"stereo-meter-container"};function Ft(t,e,i,r,n,s){const o=a.resolveComponent("v-a-digital-meter");return a.openBlock(),a.createElementBlock("div",null,[a.createElementVNode("div",Ht,[a.createVNode(o,{class:"meter-channel",input:t.leftInput,fftSize:t.fftSize,type:t.type,height:t.height,width:t.width,barColor:t.barColor,backgroundColor:t.backgroundColor,markerColor:t.markerColor,font:t.font,clippingColor:t.clippingColor,drawMarkers:!1},null,8,["input","fftSize","type","height","width","barColor","backgroundColor","markerColor","font","clippingColor"]),a.createVNode(o,{class:"meter-channel",input:t.rightInput,fftSize:t.fftSize,type:t.type,height:t.height,width:t.width,barColor:t.barColor,backgroundColor:t.backgroundColor,markerColor:t.markerColor,font:t.font,clippingColor:t.clippingColor,drawMarkers:t.drawMarkers},null,8,["input","fftSize","type","height","width","barColor","backgroundColor","markerColor","font","clippingColor","drawMarkers"])])])}const pt=M(Rt,[["render",Ft],["__scopeId","data-v-688c5c09"]]),A=90,_t=new ht(0,A,2),Yt=a.defineComponent({name:"VADigitalMeter",props:{input:{required:!1,type:AudioNode,default:void 0},type:{required:!1,type:String,default:"peak"},fftSize:{required:!1,type:Number,default:2048},clippingColor:{required:!1,type:String},barColor:{required:!1,type:String},backgroundColor:{required:!1,type:String},markerColor:{required:!1,type:String},drawMarkers:{required:!1,type:Boolean,default:!1},height:{required:!1,type:Number,default:200},width:{required:!1,type:Number,default:20},font:{required:!1,type:String,default:"Helvetica, sans-serif"}},computed:{canvasWidth(){return this.width+(this.drawMarkers?30:0)}},setup(t){const e=Y(t.fftSize,t.input);return a.watch(()=>t.input,e.onInputChanged),{...e,...K()}},data(){return{canvasCxt:null}},mounted(){const t=this.$refs.meterCanvas;this.canvasCxt=t.getContext("2d"),this.startRendering(this.draw)},methods:{getMeterHeight(t){return this.height*((A+t)/A)*(A/(A+10))},scaleY(t){return _t.getCurvedValue(t+A)-A},draw(){if(this.canvasCxt){const t=this.getFloatTimeDomainData();let e=-A;this.type==="peak"&&t?e=this.getPeakDb(t):this.type==="rms"&&t&&(e=this.getRmsDb(t));const i=e>0;e=I(e,-A,0);const r=this.getMeterHeight(this.scaleY(e));this.canvasCxt.clearRect(0,0,this.canvasWidth,this.height),this.canvasCxt.fillStyle=this.backgroundColor??x.colors.light,this.canvasCxt.beginPath(),this.canvasCxt.fillRect(0,0,this.width,this.height),this.canvasCxt.stroke(),this.canvasCxt.fillStyle=i?this.clippingColor??x.colors.danger:this.barColor??x.colors.success,this.canvasCxt.beginPath(),this.canvasCxt.fillRect(0,this.height-r,this.width,r),this.canvasCxt.stroke(),this.drawMarkers&&this.drawDbMarkers()}},drawDbMarkers(){this.drawDbMarker(0),this.drawDbMarker(-10),this.drawDbMarker(-20),this.drawDbMarker(-30),this.drawDbMarker(-40),this.drawDbMarker(-60)},drawDbMarker(t){const e=this.height-this.getMeterHeight(this.scaleY(t)),i=this.width+4;this.canvasCxt.lineWidth=1,this.canvasCxt.strokeStyle=this.markerColor??x.colors.muted,this.canvasCxt?.beginPath(),this.canvasCxt?.moveTo(i,e),this.canvasCxt?.lineTo(i+4,e),this.canvasCxt?.stroke(),this.canvasCxt.font=`10px ${this.font}`,this.canvasCxt.fillStyle=this.markerColor??x.colors.muted,this.canvasCxt.fillText(`${Math.abs(t)}`,i+8,e+3)}}}),Kt=["height","width"];function Xt(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("canvas",{class:"meter",ref:"meterCanvas",height:t.height,width:t.canvasWidth},null,8,Kt)}const ut=M(Yt,[["render",Xt]]),Zt={},jt={version:"1.1",viewBox:"0 0 62.143 129.29",xmlns:"http://www.w3.org/2000/svg",width:"27"};function Jt(t,e){return a.openBlock(),a.createElementBlock("svg",jt,[...e[0]||(e[0]=[a.createStaticVNode('<defs><filter id="filter4165" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-1" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-4" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><linearGradient id="linearGradient7341" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(406.7,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7468" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(203.35,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7595" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(0,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7698" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,582.85,121.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7700" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,37.712,-1157.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7702" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 51.792 414.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7704" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 51.792 466.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7706" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 51.792 554.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7708" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 581.97 -1263.8)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7710" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 29.714 -1226.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7712" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 35.581 -982.83)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7714" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 39.183 -932.97)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7716" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 44.587 -848)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient></defs><g transform="translate(-642.36 -637.36)"><rect x="642.36" y="637.36" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="643.3" y="701.75" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="643.05" y="638.08" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7698)"></rect><rect x="643.25" y="689.59" width="58.811" height="10.119" fill="#333"></rect><rect x="642.36" y="680.23" width="61.133" height="8.7929" fill="#333"></rect><rect x="642.36" y="661.81" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="642.36" y="667.58" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="643.05" y="-661.09" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7700)"></rect><rect x="643.22" y="666.37" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7702)"></rect><rect x="643.22" y="679.09" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7704)"></rect><rect x="643.22" y="688.34" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7706)"></rect><rect transform="scale(1,-1)" x="642.67" y="-765.57" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7708)"></rect><rect transform="scale(1,-1)" x="643.25" y="-717.26" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="642.36" y="-726.3" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="642.36" y="-744.06" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.36" y="-738.49" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.67" y="-746.93" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7710)"></rect><rect transform="scale(1,-1)" x="643.22" y="-740.17" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7712)"></rect><rect transform="scale(1,-1)" x="643.22" y="-728.15" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7714)"></rect><rect transform="scale(1,-1)" x="643.22" y="-718.85" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7716)"></rect></g>',2)])])}const Qt=M(Zt,[["render",Jt]]),te={},ee={version:"1.1",viewBox:"0 0 104 460",xmlns:"http://www.w3.org/2000/svg"};function ae(t,e){return a.openBlock(),a.createElementBlock("svg",ee,[...e[0]||(e[0]=[a.createStaticVNode('<defs><filter id="filter4165" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-1" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-4" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><linearGradient id="linearGradient7341" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(406.7,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7468" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(203.35,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7595" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(0,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7698" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,582.85,121.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7700" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,37.712,-1157.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7702" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 51.792 414.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7704" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 51.792 466.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7706" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 51.792 554.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7708" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 581.97 -1263.8)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7710" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 29.714 -1226.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7712" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 35.581 -982.83)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7714" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 39.183 -932.97)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7716" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 44.587 -848)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7718" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,787.52,-27.904)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7720" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,242.38,-1008.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7722" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 256.46 265.42)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7724" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 256.46 317.38)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7726" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 256.46 405.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7728" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 786.64 -1114.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7730" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 234.39 -1076.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7732" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 240.25 -833.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7734" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 243.85 -783.64)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7736" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 249.26 -698.66)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7738" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,989.55,-112.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7740" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,444.41,-923.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7742" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 458.49 180.57)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7744" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 458.49 232.53)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7746" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 458.49 320.25)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7748" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 988.67 -1029.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7750" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 436.42 -991.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7752" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 442.28 -748.65)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7754" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 445.88 -698.79)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7756" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 451.29 -613.82)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><clipPath id="clipPath1318"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1322"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1326"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1330"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1334"><rect x="211.98" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1338"><rect x="620" y="321.05" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1342"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1346"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1350"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1354"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1358"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1362"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1366"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1370"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1374"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1378"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1382"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath></defs><g transform="translate(-621.34 -349.25)"><g transform="translate(0,-14.18)" clip-path="url(#clipPath1382)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(0,-14.18)" clip-path="url(#clipPath1378)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1374)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m679.64 802.47v-445.18" clip-path="url(#clipPath1370)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1366)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7595)" stroke-width="12"></path></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1358)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1354)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1350)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m882.99 802.47v-445.18" clip-path="url(#clipPath1346)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1342)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7468)" stroke-width="12"></path></g><g transform="translate(-1.3202,15.152)" clip-path="url(#clipPath1338)"><path transform="matrix(.53231 0 0 .99811 560.96 12.701)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-1)"></path><path d="m890.45 497.09h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="847.03" y="488.03" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="847.97" y="552.42" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="847.72" y="488.74" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7718)"></rect><rect x="847.92" y="540.26" width="58.811" height="10.119" fill="#333"></rect><rect x="847.03" y="530.89" width="61.133" height="8.7929" fill="#333"></rect><rect x="847.03" y="512.48" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="847.03" y="518.25" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="847.72" y="-511.76" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7720)"></rect><rect x="847.89" y="517.03" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7722)"></rect><rect x="847.89" y="529.76" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7724)"></rect><rect x="847.89" y="539.01" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7726)"></rect><rect transform="scale(1,-1)" x="847.34" y="-616.24" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7728)"></rect><rect transform="scale(1,-1)" x="847.92" y="-567.93" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="847.03" y="-576.96" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="847.03" y="-594.72" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.03" y="-589.16" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.34" y="-597.6" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7730)"></rect><rect transform="scale(1,-1)" x="847.89" y="-590.84" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7732)"></rect><rect transform="scale(1,-1)" x="847.89" y="-578.82" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7734)"></rect><rect transform="scale(1,-1)" x="847.89" y="-569.52" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7736)"></rect></g><g transform="translate(406.7,-14.18)" clip-path="url(#clipPath1334)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1330)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m1086.3 802.47v-445.18" clip-path="url(#clipPath1326)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1322)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7341)" stroke-width="12"></path></g><g clip-path="url(#clipPath1318)"><path transform="matrix(.53231 0 0 .99811 762.99 -72.147)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-4)"></path><path d="m1092.5 412.25h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="1049.1" y="403.18" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="1050" y="467.57" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="1049.8" y="403.9" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7738)"></rect><rect x="1050" y="455.41" width="58.811" height="10.119" fill="#333"></rect><rect x="1049.1" y="446.05" width="61.133" height="8.7929" fill="#333"></rect><rect x="1049.1" y="427.63" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="1049.1" y="433.4" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="1049.8" y="-426.91" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7740)"></rect><rect x="1049.9" y="432.19" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7742)"></rect><rect x="1049.9" y="444.91" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7744)"></rect><rect x="1049.9" y="454.16" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7746)"></rect><rect transform="scale(1,-1)" x="1049.4" y="-531.39" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7748)"></rect><rect transform="scale(1,-1)" x="1050" y="-483.08" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="1049.1" y="-492.12" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="1049.1" y="-509.88" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.1" y="-504.31" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.4" y="-512.75" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7750)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-505.99" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7752)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-493.97" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7754)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-484.67" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7756)"></rect></g></g>',2)])])}const ie=M(te,[["render",ae]]),re=a.defineComponent({name:"VAFader",components:{defaultFaderHead:Qt,defaultFaderBackground:ie},emits:["update:modelValue"],setup(t){const e=a.ref(new X(t.minValue,t.maxValue)),i=a.ref(0),r=a.ref(t.modelValue),n=a.ref(e.value.getCurvedValue(t.modelValue)),s=a.ref(0),o=a.ref(void 0);return{valueCurve:e,faderContainerY:i,linearValue:r,curvedValue:n,faderHeadHeight:s,resizeObserver:o}},props:{modelValue:{required:!0,type:Number},minValue:{required:!0,type:Number},maxValue:{required:!0,type:Number},height:{required:!1,type:Number,default:200},width:{required:!1,type:Number,default:46},default:{required:!1,type:Number}},computed:{midValue(){return this.minValue+this.valueRange/2},valueRange(){return this.maxValue-this.minValue},faderDragRange(){return Math.abs(this.height-this.faderHeadHeight)},faderHeadTop(){const t=(this.linearValue-this.minValue)/(this.maxValue-this.minValue);return this.faderDragRange-t*this.faderDragRange},cssVars(){return{"--fader-height":`${this.height}px`,"--fader-width":`${this.width}px`,"--fader-head-top":`${this.faderHeadTop}px`}}},mounted(){this.resizeObserver=new ResizeObserver((t,e)=>{this.faderHeadHeight=this.getFaderHeadHeight()}),this.resizeObserver.observe(this.$refs.faderHead)},unmounted(){this.resizeObserver?.disconnect()},methods:{getContainedImgOrSvg(t){if(t.children.length==1){if(t.children.item(0)instanceof SVGElement)return t.children.item(0);if(t.children.item(0)instanceof HTMLImageElement)return t.children.item(0)}},getFaderHeadHeight(){const t=this.$refs.faderHead,e=this.getContainedImgOrSvg(t);return e?e.getBoundingClientRect().height:t.getBoundingClientRect().height},onHeadMouseDown(t){t.preventDefault(),this.faderContainerY=this.$refs.faderContainer.getBoundingClientRect().y,this.faderHeadHeight=this.getFaderHeadHeight(),document.addEventListener("mousemove",this.onHeadMouseDrag),document.addEventListener("touchmove",this.onHeadTouchDrag),document.addEventListener("mouseup",this.onDocumentMouseUp),document.addEventListener("touchend",this.onDocumentMouseUp)},onDocumentMouseUp(){document.removeEventListener("mousemove",this.onHeadMouseDrag),document.removeEventListener("touchmove",this.onHeadTouchDrag),document.removeEventListener("mouseup",this.onDocumentMouseUp),document.removeEventListener("touchend",this.onDocumentMouseUp)},onHeadDblClick(){const t=typeof this.default>"u"?this.midValue:this.default;this.$emit("update:modelValue",this.valueCurve.getCurvedValue(t))},onHeadDrag(t){let e=t-this.faderContainerY;e>this.height?e=this.height:e<0&&(e=0);const r=(this.height-e)/this.height*this.valueRange+this.minValue;this.$emit("update:modelValue",this.valueCurve.getCurvedValue(r))},onHeadTouchDrag(t){t.touches[0]&&this.onHeadDrag(t.touches[0].clientY)},onHeadMouseDrag(t){this.onHeadDrag(t.clientY)}},watch:{modelValue(t){this.curvedValue=t,this.linearValue=this.valueCurve.getLinearValue(this.curvedValue)},minValue(t){this.valueCurve=new X(t,this.maxValue)},maxValue(t){this.valueCurve=new X(this.minValue,t)}}}),oe={ref:"faderBackground",class:"fader-background"};function ne(t,e,i,r,n,s){const o=a.resolveComponent("defaultFaderBackground"),h=a.resolveComponent("defaultFaderHead");return a.openBlock(),a.createElementBlock("div",{ref:"faderContainer",class:"fader-container",style:a.normalizeStyle(t.cssVars)},[a.createElementVNode("div",oe,[a.renderSlot(t.$slots,"faderBackground",{},()=>[a.createVNode(o)],!0)],512),a.createElementVNode("div",{ref:"faderHead",class:"fader-head",onMousedown:e[0]||(e[0]=(...g)=>t.onHeadMouseDown&&t.onHeadMouseDown(...g)),onTouchstart:e[1]||(e[1]=(...g)=>t.onHeadMouseDown&&t.onHeadMouseDown(...g)),onDblclick:e[2]||(e[2]=(...g)=>t.onHeadDblClick&&t.onHeadDblClick(...g))},[a.renderSlot(t.$slots,"faderHead",{},()=>[a.createVNode(h)],!0)],544)],4)}const ft=M(re,[["render",ne],["__scopeId","data-v-9d74edfd"]]),se={},le={width:"50",height:"50",viewBox:"0 0 100 100"};function de(t,e){return a.openBlock(),a.createElementBlock("svg",le,[...e[0]||(e[0]=[a.createStaticVNode(`<g data-v-3cef4f4a><g data-v-3cef4f4a><circle class="st0" cx="50%" cy="50%" r="50%" data-v-3cef4f4a></circle><g transform="translate(-20 -20)" data-v-3cef4f4a><g transform="translate(0 -6)" data-v-3cef4f4a><path d="M109.4,78.2c-2.3-2.5-4-5.6-4.6-9c-0.7-3.5-0.5-6.9,0.6-10.2c-2.2-4.6-5.3-8.6-9.2-11.9c-3.3,0.2-6.8-0.4-10-2
+                      s-5.8-4-7.7-6.7c-5.1-1-10.2-1.1-15-0.2c-1.9,2.8-4.6,5.1-7.8,6.6s-6.7,2.1-10.1,1.7c-3.8,3.1-7.1,7.1-9.5,11.6
+                      c0.9,3.2,1.1,6.7,0.4,10.2c-0.9,3.5-2.6,6.5-5,8.9c0.1,5.1,1.1,10.1,3.1,14.6c3.1,1.2,5.9,3.2,8.2,6.2c2.2,2.8,3.5,6.2,4,9.4
+                      c4,3,8.4,5.3,13.5,6.7c2.9-1.6,6.3-2.6,9.9-2.6s6.9,1,9.9,2.8c4.8-1.1,9.5-3.3,13.6-6.4c0.6-3.3,1.9-6.5,4.2-9.3
+                      c2.3-2.8,5.2-4.7,8.4-5.9c1-2.2,1.9-4.6,2.5-7.1C109.1,83.4,109.3,80.7,109.4,78.2z" data-v-3cef4f4a></path></g><ellipse class="st1" cx="70.4" cy="70.4" rx="26.7" ry="26.7" data-v-3cef4f4a></ellipse><g transform="translate(0 -8)" data-v-3cef4f4a><path class="st2" d="M71.5,28.5c-0.4,0-0.9,0-1.1,0c-0.3,0-0.9,0-1.1,0v31h2.5v-31H71.5z" data-v-3cef4f4a></path></g></g></g></g>`,1)])])}const he=M(se,[["render",de],["__scopeId","data-v-3cef4f4a"]]),ce=a.defineComponent({components:{defaultKnob:he},setup(t){const e={curvedValue:0,linearValue:0,unsteppedValue:0,rotationMax:3*Math.PI/4,dragRange:70,prevY:-1,valueCurve:new X(t.minValue,t.maxValue)};return t.modelValue instanceof Number&&(e.linearValue=t.modelValue,e.curvedValue=e.valueCurve.getCurvedValue(t.modelValue),e.unsteppedValue=e.curvedValue),a.reactive(e)},props:{modelValue:{required:!0,type:Number},minValue:{required:!0,type:Number},maxValue:{required:!0,type:Number},step:{required:!1,type:Number,default:0},size:{required:!1,type:Number,default:60},default:{required:!1,type:Number}},computed:{knobRotation(){return(this.linearValue-this.midValue)/(this.valueRange/2)*this.rotationMax},midValue(){return this.minValue+this.valueRange/2},valueRange(){return this.maxValue-this.minValue}},methods:{onKnobMouseDown(t){t.preventDefault(),document.addEventListener("mousemove",this.onKnobMouseDrag),document.addEventListener("touchmove",this.onKnobTouchDrag),document.addEventListener("mouseup",this.onDocumentMouseUp),document.addEventListener("touchend",this.onDocumentMouseUp)},onDocumentMouseUp(){document.removeEventListener("mousemove",this.onKnobMouseDrag),document.removeEventListener("touchmove",this.onKnobTouchDrag),document.removeEventListener("mouseup",this.onDocumentMouseUp),document.removeEventListener("touchend",this.onDocumentMouseUp),this.prevY=-1},onKnobDblClick(){const t=typeof this.default>"u"?this.midValue:this.default;this.unsteppedValue=t,this.$emit("update:modelValue",this.valueCurve.getCurvedValue(t))},roundToStep(t){if(this.step===0)throw"step is zero or undefined";const e=Math.round(t/this.step)*this.step;return I(e,this.minValue,this.maxValue)},onKnobDrag(t){if(this.prevY>=0){const e=this.prevY-t;let i=this.unsteppedValue+e/this.dragRange*(this.valueRange/2);i=I(i,this.minValue,this.maxValue),this.unsteppedValue=i;const r=this.step===0?this.unsteppedValue:this.roundToStep(this.unsteppedValue);this.$emit("update:modelValue",this.valueCurve.getCurvedValue(r))}},onKnobTouchDrag(t){t.touches[0]&&(this.onKnobDrag(t.touches[0].pageY),this.prevY=t.touches[0].pageY)},onKnobMouseDrag(t){this.onKnobDrag(t.pageY),this.prevY=t.pageY}},watch:{modelValue(t){this.curvedValue=t,this.unsteppedValue=this.valueCurve.getLinearValue(this.curvedValue),this.linearValue=this.step===0?this.unsteppedValue:this.roundToStep(this.unsteppedValue)}}}),pe={class:"control-container"},ue={class:"knob-row"};function fe(t,e,i,r,n,s){const o=a.resolveComponent("default-knob");return a.openBlock(),a.createElementBlock("div",pe,[a.createElementVNode("div",ue,[a.createElementVNode("span",{onMousedown:e[0]||(e[0]=(...h)=>t.onKnobMouseDown&&t.onKnobMouseDown(...h)),onTouchstart:e[1]||(e[1]=(...h)=>t.onKnobMouseDown&&t.onKnobMouseDown(...h)),onDblclick:e[2]||(e[2]=(...h)=>t.onKnobDblClick&&t.onKnobDblClick(...h)),class:"knob-container",style:a.normalizeStyle(`transform: rotate(${t.knobRotation}rad); width: ${t.size}px; height: ${t.size}px;`)},[a.renderSlot(t.$slots,"default",{},()=>[a.createVNode(o)],!0)],36)])])}const mt=M(ce,[["render",fe],["__scopeId","data-v-516025e9"]]),R=20,H=-120,me=3,ge=a.defineComponent({name:"VASpectrumAnalyzer",data(){return{continueDrawing:!1,canvas:null,canvasContext:null}},props:{input:{required:!1,type:AudioNode},fftSize:{type:Number,required:!1,default:1024},height:{type:Number,required:!1},width:{type:Number,required:!1,default:500},fillStyle:{type:String,required:!1,default:"none"},lineColor:{type:String,required:!1},backgroundColor:{type:String,required:!1,default:"black"},gridColor:{type:String,required:!1,default:"gray"},dbColor:{type:String,required:!1,default:"gray"},hzColor:{type:String,required:!1,default:"white"},font:{required:!1,type:String,default:"Helvetica, sans-serif"}},setup(t){const e=Y(t.fftSize,t.input);return a.watch(()=>t.input,e.onInputChanged),{...e,...K()}},computed:{graphWidth(){return this.width},graphHeight(){return this.height?this.height:this.width/me},cssVars(){return{"--border-color":this.backgroundColor}}},mounted(){this.canvasContext=this.$refs.analyserCanvas.getContext("2d"),this.startRendering(this.drawFrequencyDomain)},methods:{scaleX(t,e,i,r){const n=.30111412225233364;let s=(i-e)/i;s*=1-n,s=1-s;let o=(t-e)/(i-e);return o=Math.pow(o,s),o<1&&(o*=r),o},scaleXLegacy(t,e,i,r){return Math.floor(Math.log2(t-e)/Math.log2(i-e)*r)},drawFrequencyDomain(){if(this.canvasContext){const t=0-H,e=this.input?this.input.context.sampleRate/2:24e3,i=this.getFloatFrequencyData();if(this.canvasContext.clearRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.fillStyle=this.backgroundColor,this.canvasContext.fillRect(0,0,this.graphWidth,this.graphHeight),i){this.canvasContext.beginPath(),this.canvasContext.lineWidth=1,this.canvasContext.strokeStyle=this.lineColor??x.colors.primary,this.canvasContext.fillStyle=this.lineColor??x.colors.primary,this.canvasContext.moveTo(0,this.graphHeight);let r=0,n=this.graphHeight-(i[0]-H)/t*this.graphHeight;for(let s=0;s<i.length;s++){const o=(i[s]-H)/t*this.graphHeight,h=s*(e/i.length);this.canvasContext.lineTo(r,n),h>=R&&(r=this.scaleX(h,R,e,this.graphWidth),n=this.graphHeight-o,this.fillStyle==="lines"&&this.canvasContext.fillRect(r,n,1,o)),this.canvasContext.lineTo(r,n)}this.canvasContext.lineTo(this.graphWidth,this.graphHeight),this.canvasContext.closePath(),this.canvasContext.stroke(),this.fillStyle==="solid"&&this.canvasContext.fill()}this.drawDbMarkers(),this.drawFrequencyMarkers(e)}},drawDbMarkers(){this.drawDbMarker(-20),this.drawDbMarker(-40),this.drawDbMarker(-60),this.drawDbMarker(-80),this.drawDbMarker(-100)},drawDbMarker(t){if(this.canvasContext){const e=this.graphHeight-(H-t)/H*this.graphHeight;this.canvasContext.strokeStyle=this.dbColor,this.canvasContext.beginPath(),this.canvasContext.moveTo(0,e),this.canvasContext.lineTo(this.graphWidth,e),this.canvasContext.stroke(),this.canvasContext.font=`12px ${this.font}`,this.canvasContext.fillStyle=this.gridColor,this.canvasContext.fillText(`${t}db`,10,e)}},drawFrequencyMarkers(t){this.drawFrequencyMarker(R,t,this.graphWidth>300,!1),this.drawFrequencyMarker(25,t),this.drawFrequencyMarker(50,t,!0),this.drawFrequencyMarker(100,t),this.drawFrequencyMarker(200,t,this.graphWidth>600),this.drawFrequencyMarker(500,t,this.graphWidth>300),this.drawFrequencyMarker(1e3,t,this.graphWidth>600),this.drawFrequencyMarker(1500,t),this.drawFrequencyMarker(2e3,t,!0),this.drawFrequencyMarker(3e3,t,this.graphWidth>600),this.drawFrequencyMarker(5e3,t,this.graphWidth>300),this.drawFrequencyMarker(7e3,t,this.graphWidth>600),this.drawFrequencyMarker(1e4,t,!0),this.drawFrequencyMarker(15e3,t,this.graphWidth>600),this.drawFrequencyMarker(2e4,t,this.graphWidth>800)},drawFrequencyMarker(t,e,i=!1,r=!0){if(this.canvasContext&&t>=R){const n=this.scaleX(t,R,e,this.graphWidth);r&&(this.canvasContext.strokeStyle=this.gridColor,this.canvasContext.beginPath(),this.canvasContext.moveTo(n,0),this.canvasContext.lineTo(n,this.graphWidth),this.canvasContext.stroke()),i&&(this.canvasContext.font=`14px ${this.font}`,this.canvasContext.fillStyle=this.hzColor??x.colors.primary,t<1e3?this.canvasContext.fillText(`${t}hz`,n,50):this.canvasContext.fillText(`${t/1e3}khz`,n,50))}}}}),ye=["width","height"];function ke(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("canvas",{width:t.graphWidth,height:t.graphHeight,ref:"analyserCanvas",class:"analyser-canvas",style:a.normalizeStyle(t.cssVars)},null,12,ye)}const gt=M(ge,[["render",ke],["__scopeId","data-v-670d0fd3"]]),we=["height","width"],ve=3,yt=a.defineComponent({__name:"v-a-oscilloscope",props:{input:{type:AudioNode,required:!1},width:{type:Number,required:!1,default:500},height:{type:Number,required:!1},fftSize:{type:Number,required:!1,default:2048,validator(t){return t>=32&&t<=32768&&Tt(t)}},lineColor:{type:String,required:!1}},setup(t){const e=t,i=Y(e.fftSize,e.input),r=K();a.watch(()=>e.input,i.onInputChanged);const n=a.useTemplateRef("analyserCanvas");let s;a.onMounted(()=>{s=n.value?.getContext("2d"),r.startRendering(g)}),a.onUnmounted(h);const o=a.computed(()=>e.height?e.height:e.width/ve);function h(){i.disposeMetering(e.input)}function g(){let w=i.getFloatTimeDomainData();if(!s||(s.fillStyle="black",s.fillRect(0,0,e.width,o.value),!w))return;s.lineWidth=2.5,s.strokeStyle=e.lineColor??x.colors.primary,s.beginPath();const c=e.width/w.length;let l=0,f=0;for(let m=0;m<w.length;m++){const u=-w[m]*o.value/2;f=o.value/2+u,m===0?s.moveTo(l,f):s.lineTo(l,f),l+=c}s.lineTo(e.width,f),s.stroke()}return(w,c)=>(a.openBlock(),a.createElementBlock("canvas",{ref_key:"analyserCanvas",ref:n,height:o.value,width:t.width,class:"analyser-canvas"},null,8,we))}}),xe=a.defineComponent({Name:"VAToggleButton",props:{color:{required:!1,type:String,default:"red"},label:{require:!1,type:String,default:""}},setup(t){const e=a.ref(!1),i=a.computed(()=>({"--on-color":`${t.color}`}));function r(){e.value=!e.value}return{on:e,cssVars:i,onButtonClick:r}}});function Ce(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("button",{onClick:e[0]||(e[0]=(...o)=>t.onButtonClick&&t.onButtonClick(...o)),class:a.normalizeClass([t.on?"button-on":"button-off","button"]),style:a.normalizeStyle(t.cssVars)},a.toDisplayString(t.label),7)}const kt=M(xe,[["render",Ce],["__scopeId","data-v-87a8a5ae"]]),be=a.defineComponent({emits:["update:modelValue"],props:{modelValue:{type:Object,required:!0},attackMax:{type:Number,required:!1,default:1e3},decayMax:{type:Number,required:!1,default:1e3},releaseMax:{type:Number,required:!1,default:1e3},width:{type:Number,required:!1,default:200},height:{type:Number,required:!1}},setup(t,e){const i=a.ref("black"),r=a.ref("#70bfff"),n=a.ref("#70bfff"),s=a.ref(4),o=a.ref(16),h=.25,g=.4,w=.1,c=.25,l=a.ref(0),f=a.ref(0),m=a.ref(0),u=a.ref(0);let C=0,S=0,D=0,G=0;const E=a.ref(0),p=a.ref(0),d=a.ref(0),y=a.ref(0);let z=0,L=0,bt=0,Vt=0;const it=a.ref(0),rt=a.ref(0),b=10,B=a.ref("");let Z=-1,Mt=-1;const ua=a.computed(()=>t.modelValue.attack+t.modelValue.decay+t.modelValue.release),St=a.computed(()=>t.width),Dt=a.computed(()=>t.height?t.height:t.width/2.5),F=a.computed(()=>St.value-b*2),V=a.computed(()=>Dt.value-b*2),fa=a.computed(()=>V.value*1),O=a.computed(()=>h*F.value),_=a.computed(()=>O.value*(t.modelValue.attack/t.attackMax)),q=a.computed(()=>g*F.value),j=a.computed(()=>q.value*(t.modelValue.decay/t.decayMax)),J=a.computed(()=>w*F.value),ot=a.computed(()=>c*F.value),Q=a.computed(()=>ot.value*(t.modelValue.release/t.releaseMax)),ma=a.computed(()=>{l.value=b,f.value=V.value+b,m.value=_.value+b,u.value=b,C=_.value+j.value/4+b,S=(V.value-V.value*t.modelValue.sustain)/2+b,D=_.value+j.value/2+b,G=V.value-V.value*t.modelValue.sustain+b,E.value=_.value+j.value+b,p.value=V.value-V.value*t.modelValue.sustain+b,d.value=O.value+q.value+J.value,y.value=V.value-V.value*t.modelValue.sustain+b,z=O.value+q.value+J.value+Q.value/4,L=V.value-V.value*t.modelValue.sustain/2+b,bt=O.value+q.value+J.value+Q.value/2,Vt=V.value+b,it.value=d.value+Q.value,rt.value=V.value+b;const k=`M ${l.value} ${f.value} `,tt=`L ${m.value} ${u.value} `,N=`C
+        ${C}
+        ${S}
+        ${D}
+        ${G}
+        ${E.value}
+        ${p.value}`,et=`L ${d.value} ${y.value}`,$=`C 
+        ${z}
+        ${L} 
+        ${bt}
+        ${Vt}
+        ${it.value}
+        ${rt.value}`;return k+tt+N+et+$});function ga(k){k.preventDefault?k.preventDefault():k.returnValue=!1,B.value="attackAnchor"}function ya(k){k.preventDefault?k.preventDefault():k.returnValue=!1,B.value="decaySustainAnchor"}function ka(k){k.preventDefault?k.preventDefault():k.returnValue=!1,B.value="releaseAnchor"}function nt(k,tt){let N,et,$=0,T=0,P=0,U=0;if(B.value!=""){switch(B.value){case"attackAnchor":N=k-Z,$=N/O.value*t.attackMax,$=t.modelValue.attack+$>=t.attackMax&&$>0?t.attackMax-t.modelValue.attack:t.modelValue.attack+$<=0&&$<0?0:$;break;case"decaySustainAnchor":N=k-Z,T=N/q.value*t.decayMax,T=t.modelValue.decay+T>=t.decayMax&&T>0?t.decayMax-t.modelValue.decay:t.modelValue.decay+T<=0&&T<0?0:T,et=tt-Mt,P=-(et/V.value),P=t.modelValue.sustain+P>=1&&P>0?1-t.modelValue.sustain:t.modelValue.sustain+P<=0&&P<0?0:P;break;case"releaseAnchor":N=k-Z,U=N/ot.value*t.releaseMax,U=t.modelValue.release+U>=t.releaseMax&&U>0?t.releaseMax-t.modelValue.release:t.modelValue.release+U<=0&&U<0?0:U;break}e.emit("update:modelValue",{attack:t.modelValue.attack+$,decay:t.modelValue.decay+T,sustain:t.modelValue.sustain+P,release:t.modelValue.release+U})}Z=k,Mt=tt}function wa(k){nt(k.pageX,k.pageY)}function va(k){k.touches[0]&&nt(k.touches[0].pageX,k.touches[0].pageY)}function xa(){B.value=""}function Ca(){B.value=""}return{backgroundColor:i,envelopeColor:r,anchorColor:n,anchorRadius:s,ghostAnchorRadius:o,activeAnchorId:B,startX:l,startY:f,attackPeakX:m,attackPeakY:u,decayEndX:E,decayEndY:p,releaseEndX:it,releaseEndY:rt,envTime:ua,containerWidth:St,containerHeight:Dt,graphWidth:F,graphHeight:V,envHeight:fa,attackTotalWidth:O,attackWidth:_,decayTotalWidth:q,decayWidth:j,sustainTotalWidth:J,releaseTotalWidth:ot,releaseWidth:Q,adsrPath:ma,attackAnchorMouseDown:ga,decaySustainAnchorMouseDown:ya,releaseAnchorMouseDown:ka,onMouseUp:xa,onMouseLeave:Ca,onMove:nt,onMouseMove:wa,onTouchMove:va}}}),Ve={class:"component-container"},Me=["width","height"],Se=["width","height"],De=["width","height","fill"],Ge=["d","stroke"],Ee=["cx","cy","r","stroke","fill"],$e=["cx","cy","r"],Ae=["cx","cy","r","stroke","fill"],Be=["cx","cy","r"],Ne=["cx","cy","r","stroke","fill"],Te=["cx","cy","r"],Pe=["cx","cy","r","stroke","fill"],Ue={class:"value-label-container"},Ie={class:"value-label"},ze={class:"value-label"},We={class:"value-label"},Le={class:"value-label"};function Oe(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("div",Ve,[a.createElementVNode("div",{class:a.normalizeClass(["graph-container",t.activeAnchorId!==""?"dragging":""]),onMousemove:e[12]||(e[12]=(...o)=>t.onMouseMove&&t.onMouseMove(...o)),onTouchmove:e[13]||(e[13]=(...o)=>t.onTouchMove&&t.onTouchMove(...o)),onMouseup:e[14]||(e[14]=(...o)=>t.onMouseUp&&t.onMouseUp(...o)),onTouchend:e[15]||(e[15]=(...o)=>t.onMouseUp&&t.onMouseUp(...o)),onMouseleave:e[16]||(e[16]=(...o)=>t.onMouseLeave&&t.onMouseLeave(...o)),width:t.containerWidth,height:t.containerHeight},[(a.openBlock(),a.createElementBlock("svg",{width:t.containerWidth,height:t.containerHeight},[a.createElementVNode("rect",{width:t.containerWidth,height:t.containerHeight,fill:t.backgroundColor},null,8,De),a.createElementVNode("path",{id:"envPath",d:t.adsrPath,fill:"transparent",stroke:t.envelopeColor,"stroke-width":"2"},null,8,Ge),a.createElementVNode("circle",{class:"anchor",cx:t.startX,cy:t.startY,r:t.anchorRadius,stroke:t.anchorColor,fill:t.anchorColor},null,8,Ee),a.createElementVNode("circle",{class:"anchor",id:"attackAnchorGhost",onMousedown:e[0]||(e[0]=(...o)=>t.attackAnchorMouseDown&&t.attackAnchorMouseDown(...o)),onTouchstart:e[1]||(e[1]=(...o)=>t.attackAnchorMouseDown&&t.attackAnchorMouseDown(...o)),cx:t.attackPeakX,cy:t.attackPeakY,r:t.ghostAnchorRadius,stroke:"rgba(0, 0, 0, 0)",fill:"rgba(0, 0, 0, 0)"},null,40,$e),a.createElementVNode("circle",{class:"anchor",id:"attackAnchor",onMousedown:e[2]||(e[2]=(...o)=>t.attackAnchorMouseDown&&t.attackAnchorMouseDown(...o)),onTouchstart:e[3]||(e[3]=(...o)=>t.attackAnchorMouseDown&&t.attackAnchorMouseDown(...o)),cx:t.attackPeakX,cy:t.attackPeakY,r:t.anchorRadius,stroke:t.anchorColor,fill:t.anchorColor},null,40,Ae),a.createElementVNode("circle",{class:"anchor",id:"decaySustainAnchorGhost",onMousedown:e[4]||(e[4]=(...o)=>t.decaySustainAnchorMouseDown&&t.decaySustainAnchorMouseDown(...o)),onTouchstart:e[5]||(e[5]=(...o)=>t.decaySustainAnchorMouseDown&&t.decaySustainAnchorMouseDown(...o)),cx:t.decayEndX,cy:t.decayEndY,r:t.ghostAnchorRadius,stroke:"rgba(0, 0, 0, 0)",fill:"rgba(0, 0, 0, 0)"},null,40,Be),a.createElementVNode("circle",{class:"anchor",id:"decaySustainAnchor",onMousedown:e[6]||(e[6]=(...o)=>t.decaySustainAnchorMouseDown&&t.decaySustainAnchorMouseDown(...o)),onTouchstart:e[7]||(e[7]=(...o)=>t.decaySustainAnchorMouseDown&&t.decaySustainAnchorMouseDown(...o)),cx:t.decayEndX,cy:t.decayEndY,r:t.anchorRadius,stroke:t.anchorColor,fill:t.anchorColor},null,40,Ne),a.createElementVNode("circle",{class:"anchor",id:"releaseAnchorGhost",onMousedown:e[8]||(e[8]=(...o)=>t.releaseAnchorMouseDown&&t.releaseAnchorMouseDown(...o)),onTouchstart:e[9]||(e[9]=(...o)=>t.releaseAnchorMouseDown&&t.releaseAnchorMouseDown(...o)),cx:t.releaseEndX,cy:t.releaseEndY,r:t.ghostAnchorRadius,stroke:"rgba(0, 0, 0, 0)",fill:"rgba(0, 0, 0, 0)"},null,40,Te),a.createElementVNode("circle",{class:"anchor",id:"releaseAnchor",onMousedown:e[10]||(e[10]=(...o)=>t.releaseAnchorMouseDown&&t.releaseAnchorMouseDown(...o)),onTouchstart:e[11]||(e[11]=(...o)=>t.releaseAnchorMouseDown&&t.releaseAnchorMouseDown(...o)),cx:t.releaseEndX,cy:t.releaseEndY,r:t.anchorRadius,stroke:t.anchorColor,fill:t.anchorColor},null,40,Pe)],8,Se)),a.createElementVNode("div",Ue,[a.createElementVNode("div",Ie,a.toDisplayString(Math.round(t.modelValue.attack))+" ms",1),a.createElementVNode("div",ze,a.toDisplayString(Math.round(t.modelValue.decay))+" ms",1),a.createElementVNode("div",We,a.toDisplayString(t.modelValue.sustain.toFixed(2)),1),a.createElementVNode("div",Le,a.toDisplayString(Math.round(t.modelValue.release))+" ms",1)])],42,Me)])}const wt=M(be,[["render",Oe],["__scopeId","data-v-f87b5263"]]),qe={width:"8",height:"12",viewBox:"0 0 8 12","aria-hidden":"true",class:"num-trianlge"},Re=["fill"],He={key:0,class:"num-value"},Fe=["min","max"],_e=90,vt=M(a.defineComponent({__name:"v-a-num-box",props:{modelValue:{required:!0,type:Number},minValue:{type:Number,required:!1,default:0},maxValue:{type:Number,required:!1,default:99},fixedDecimals:{type:Number,required:!1,default:0},showBorder:{type:Boolean,required:!1,default:!0},width:{type:Number,required:!1}},emits:["update:modelValue"],setup(t,{emit:e}){const i=e,r=t,n=a.ref(!1),s=a.ref(!1),o=a.ref(r.modelValue),h=a.useTemplateRef("manualInputEl"),g=a.useTemplateRef("numBox");let w=-1;const c=a.computed(()=>n.value?x.colors.primary:x.colors.secondary),l=a.computed(()=>({"--border-color":`${x.colors.secondary}`,"--numbox-width":r.width?`${r.width}px`:"auto"})),f=a.computed(()=>r.maxValue-r.minValue);a.watch(()=>r.modelValue,y=>o.value=y);function m(){s.value=!0,o.value=r.modelValue,a.nextTick().then(()=>{h.value?.select(),document.addEventListener("mouseup",u)})}function u(y){g.value.contains(y.target)||S()}function C(y){y.key==="Enter"&&S()}function S(){i("update:modelValue",I(lt(o.value,r.fixedDecimals),r.minValue,r.maxValue)),s.value=!1,document.removeEventListener("mouseup",u)}function D(y){s.value||(y.preventDefault(),document.addEventListener("mousemove",d),document.addEventListener("touchmove",p),document.addEventListener("mouseup",G),document.addEventListener("touchend",G))}function G(){n.value=!1,document.removeEventListener("mousemove",d),document.removeEventListener("touchmove",p),document.removeEventListener("mouseup",G),document.removeEventListener("touchend",G),w=-1}function E(y){if(n.value=!0,w>=0){const z=w-y,L=I(r.modelValue+z/_e*(f.value/2),r.minValue,r.maxValue);i("update:modelValue",lt(L,r.fixedDecimals))}}function p(y){y.touches[0]&&(E(y.touches[0].pageY),w=y.touches[0].pageY)}function d(y){E(y.pageY),w=y.pageY}return(y,z)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"numBox",ref:g,class:a.normalizeClass(["numbox",{"show-border":t.showBorder}]),style:a.normalizeStyle(l.value),onMousedown:D,onDblclick:m},[(a.openBlock(),a.createElementBlock("svg",qe,[a.createElementVNode("polygon",{points:"0,0 0,12 8,6",fill:c.value},null,8,Re)])),s.value?a.createCommentVNode("",!0):(a.openBlock(),a.createElementBlock("span",He,a.toDisplayString(t.modelValue),1)),s.value?a.withDirectives((a.openBlock(),a.createElementBlock("input",{key:1,id:"manualInputEl",ref_key:"manualInputEl",ref:h,type:"number",min:t.minValue,max:t.maxValue,"onUpdate:modelValue":z[0]||(z[0]=L=>o.value=L),onKeydown:C},null,40,Fe)),[[a.vModelText,o.value]]):a.createCommentVNode("",!0)],38))}}),[["__scopeId","data-v-41e990e3"]]);class Ye{_minusInputMin;_plusOutputMin;_dividedByInputRange;_multipliedByOutputRange;input;output;constructor(e,i,r,n,s,o){this._minusInputMin=new ConstantSourceNode(e,{offset:-i}),this._dividedByInputRange=new GainNode(e,{gain:1/(r-i)}),this._multipliedByOutputRange=new GainNode(e,{gain:s-n}),this._plusOutputMin=new ConstantSourceNode(e,{offset:n}),this._minusInputMin.start(),this._plusOutputMin.start(),this.input=new GainNode(e,{gain:1}),this.output=new GainNode(e,{gain:1}),this._minusInputMin.connect(this.input),this.input.connect(this._dividedByInputRange),this._dividedByInputRange.connect(this._multipliedByOutputRange),this._multipliedByOutputRange.connect(this.output),this._plusOutputMin.connect(this.output),o&&this.output.connect(o)}dispose(){this._minusInputMin.stop(),this._plusOutputMin.stop(),this._minusInputMin.disconnect(),this._plusOutputMin.disconnect(),this._dividedByInputRange.disconnect(),this._multipliedByOutputRange.disconnect(),this.input.disconnect(),this.output.disconnect()}}class Ke{_minusInputMin;_dividedByInputRange;input;output;constructor(e,i,r,n){this._minusInputMin=new ConstantSourceNode(e,{offset:-i}),this._dividedByInputRange=new GainNode(e,{gain:1/(r-i)}),this._minusInputMin.start(),this.input=new GainNode(e,{gain:1}),this.output=new GainNode(e,{gain:1}),this._minusInputMin.connect(this.input),this.input.connect(this._dividedByInputRange),this.output=this._dividedByInputRange}dispose(){this._minusInputMin.stop(),this._minusInputMin.disconnect(),this._dividedByInputRange.disconnect(),this.input.disconnect(),this.output.disconnect()}}const Xe={class:"matrix-row header"},Ze={class:"matrix-cell source-label"},xt=M(a.defineComponent({__name:"v-a-mod-matrix",props:{sources:{type:Array,required:!0},destinations:{type:Array,required:!0},loggerNode:{type:AudioNode,required:!1}},setup(t){const e=t,i=a.ref(),r=a.ref([]);let n=[];a.watch(()=>e.sources,(c,l)=>{w(l,e.destinations),g(c,e.destinations)}),a.watch(()=>e.destinations,(c,l)=>{w(e.sources),g(e.sources,c)});function s(c,l){c.modAmountNode.gain.setValueAtTime(l,i.value.currentTime)}function o(c,l){l.ratioSum=new GainNode(c,{gain:1}),l.sourceCells.forEach((f=>{l.ratioSum&&f.modAmountNode.connect(l.ratioSum)})),l.clamper=new WaveShaperNode(c,{curve:[0,0,1]}),l.ratioSum.connect(l.clamper),l.outputScaler=new Ye(c,0,1,l.destination.minValue,l.destination.maxValue),l.clamper.connect(l.outputScaler.input),l.output=l.outputScaler.output,(l.destination.node instanceof AudioParam||l.destination.node instanceof AudioNode)&&l.output.connect(l.destination.node)}function h(c){c.sourceCells.forEach(l=>{l.modAmountNode.disconnect()}),c.ratioSum?.disconnect(),c.ratioSum=void 0,c.clamper?.disconnect(),c.clamper=void 0}function g(c,l){if(c.length>0&&(i.value=c[0]?.node.context),!i.value)return;const f=i.value,m=[];c.forEach(u=>{const C=[];l.forEach(D=>{const G=new GainNode(f,{gain:0}),E=new Ke(f,u.minValue,u.maxValue);u.node.connect(E.input),E.output.connect(G);const p={modAmountValue:0,modAmountNode:G,signalToRatioConverter:E,source:u,destination:D};C.push(p),m.push(p)}),r.value.push(C)}),l.forEach(u=>{const C={destination:u,sourceCells:m.filter(S=>S.destination===u)};o(f,C),n.push(C)})}function w(c,l){c.forEach(f=>{r.value.shift()?.forEach(u=>{u.source.node.disconnect(u.signalToRatioConverter.input),u.signalToRatioConverter.dispose(),u.modAmountNode.disconnect()})}),r.value=[],n.forEach(f=>{h(f)}),n=[]}return(c,l)=>{const f=a.resolveComponent("v-a-num-box");return a.openBlock(),a.createElementBlock("div",null,[a.createElementVNode("div",Xe,[l[0]||(l[0]=a.createElementVNode("div",{class:"matrix-cell source-label"},null,-1)),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(t.destinations,(m,u)=>(a.openBlock(),a.createElementBlock("div",{class:"matrix-cell destination-label",key:`header-${u}`},a.toDisplayString(m.name),1))),128))]),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(r.value,(m,u)=>(a.openBlock(),a.createElementBlock("div",{class:"matrix-row",key:`src-${u}`},[a.createElementVNode("div",Ze,a.toDisplayString(m[0]?.source.name),1),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(m,(C,S)=>(a.openBlock(),a.createElementBlock("div",{class:"matrix-cell",key:`dest-${S}`},[a.createVNode(f,{minValue:0,maxValue:1,"onUpdate:modelValue":[D=>s(C,D),D=>C.modAmountValue=D],modelValue:C.modAmountValue,fixedDecimals:2,width:60},null,8,["onUpdate:modelValue","modelValue"])]))),128))]))),128))])}}}),[["__scopeId","data-v-c8b43eec"]]),W=a.ref(!1),je=a.defineComponent({emits:["keySlideOn","keySlideOff","keyMouseDown","keyMouseUp","keyboardKeyDown","keyboardKeyUp"],props:{disabled:{type:Boolean,required:!1,default:!1},enableKeyControls:{type:Boolean,required:!1,default:!0},startingOctave:{type:Number,required:!1,default:3},numOctaves:{type:Number,required:!1,default:2},enableKeyboardControls:{type:Boolean,required:!1,default:!0}},setup(t,e){const i="#ff2929",r=[1,3,6,8,10],n=["KeyA","KeyW","KeyS","KeyE","KeyD","KeyF","KeyT","KeyG","KeyY","KeyH","KeyU","KeyJ","KeyK","KeyO","KeyL"];let s=t.startingOctave*12;function o(p){const d=n.findIndex(y=>y===p.code);if(d>-1){const y=d+s;g(y),e.emit("keyboardKeyDown",y)}}function h(p){const d=n.findIndex(y=>y===p.code);if(d>-1){const y=d+s;w(y),e.emit("keyboardKeyUp",y)}else p.code==="KeyZ"?s-=12:p.code==="KeyX"?s+=12:p.code==="KeyC"||p.code}function g(p){const d=document.querySelector(`#key${p}`);d!=null&&(d.style.background=i)}function w(p){const d=document.querySelector(`#key${p}`);d!=null&&(d.style.background=r.includes(p%12)?"black":"white")}function c(p){const d=p.target;return parseInt(d.id.replace("key",""))}function l(p){if(!W.value)return;const d=c(p);p.stopPropagation(),t.disabled||(g(d),e.emit("keySlideOn",d))}function f(p){if(!W.value)return;p.stopPropagation();const d=c(p);t.disabled||(w(d),e.emit("keySlideOff",d))}function m(p){p.stopPropagation(),W.value=!0;const d=c(p);t.disabled||(g(d),e.emit("keyMouseDown",d))}function u(p){p.stopPropagation(),W.value=!1;const d=c(p);t.disabled||(w(d),e.emit("keyMouseUp",c(p)))}function C(){W.value=!0}function S(){W.value=!1}function D(){document.addEventListener("mousedown",C),document.addEventListener("mouseup",S),document.addEventListener("keydown",o),document.addEventListener("keyup",h);const p=document.querySelectorAll("div.keyboard div.key, div.keyboard div.black-key");for(const d of p)d.addEventListener("mousedown",m),d.addEventListener("mouseup",u),d.addEventListener("mouseover",l),d.addEventListener("mouseout",f),d.addEventListener("touchstart",m),d.addEventListener("touchend",u)}function G(){document.removeEventListener("mousedown",C),document.removeEventListener("mouseup",S),document.removeEventListener("keydown",o),document.removeEventListener("keyup",h);const p=document.querySelectorAll("div.keyboard div.key, div.keyboard div.black-key");for(const d of p)d.removeEventListener("mousedown",m),d.removeEventListener("mouseup",u),d.removeEventListener("mouseover",l),d.removeEventListener("mouseout",f),d.removeEventListener("touchstart",m),d.removeEventListener("touchend",u)}function E(){G(),D()}a.onMounted(()=>{D()}),a.onBeforeUnmount(()=>{G()}),a.watch(()=>t.numOctaves,E)}}),Je=["id"],Qe=["id"],ta=["id"],ea=["id"],aa=["id"],ia=["id"],ra=["id"],oa=["id"],na=["id"],sa=["id"],la=["id"],da=["id"];function ha(t,e,i,r,n,s){return a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["keyboard",t.disabled?"disabled":""])},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(t.numOctaves,o=>(a.openBlock(),a.createElementBlock("div",{key:o,class:"octave-section"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+0}`,class:"key"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+1}`,class:"black-key"},null,8,Qe)],8,Je),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+2}`,class:"key"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+3}`,class:"black-key"},null,8,ea)],8,ta),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+4}`,class:"key"},null,8,aa),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+5}`,class:"key"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+6}`,class:"black-key"},null,8,ra)],8,ia),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+7}`,class:"key"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+8}`,class:"black-key"},null,8,na)],8,oa),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+9}`,class:"key"},[a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+10}`,class:"black-key"},null,8,la)],8,sa),a.createElementVNode("div",{id:`key${t.startingOctave*12+(o-1)*12+11}`,class:"key"},null,8,da)]))),128))],2)}const Ct=M(je,[["render",ha],["__scopeId","data-v-25deb579"]]),ca={VAAnalogMeter:st,VAAudioFileVisualizer:ct,VADigitalMeterStereo:pt,VADigitalMeter:ut,VAFader:ft,VAKnob:mt,VASpectrumAnalyzer:gt,VAOscilloscope:yt,VAToggleButton:kt,VAEnvelopeAdsr:wt,VANumBox:vt,VAModMatrix:xt,VAPiano:Ct},pa=function(e){Object.entries(ca).forEach(([i,r])=>{e.component(i,r)})};v.VAAnalogMeter=st,v.VAAudioFileVisualizer=ct,v.VADigitalMeter=ut,v.VADigitalMeterStereo=pt,v.VAEnvelopeAdsr=wt,v.VAFader=ft,v.VAKnob=mt,v.VAModMatrix=xt,v.VANumBox=vt,v.VAOscilloscope=yt,v.VAPiano=Ct,v.VASpectrumAnalyzer=gt,v.VAToggleButton=kt,v.default=pa,v.vueAudioUITheme=x,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "vue-audio-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "audio ui component library for vue.js",
   "type": "module",
   "files": ["dist", "./package.json"],
-  "types": "./dist/v-audio-ui.d.ts",
-  "module": "./dist/v-audio-ui.js",
-  "main": "./dist/v-audio-ui.umd.js",
+  "types": "./dist/vue-audio-ui.d.ts",
+  "module": "./dist/vue-audio-ui.js",
+  "main": "./dist/vue-audio-ui.umd.js",
   "exports": {
     ".": {
-      "types": "./dist/v-audio-ui.d.ts",
-      "import": "./dist/v-audio-ui.js",
-      "require": "./dist/v-audio-ui.umd.js"
+      "types": "./dist/vue-audio-ui.d.ts",
+      "import": "./dist/vue-audio-ui.js",
+      "require": "./dist/vue-audio-ui.umd.js"
     },
-    "./style.css": "./dist/v-audio-ui.css",
+    "./style.css": "./dist/vue-audio-ui.css",
     "./package.json": "./package.json"
   },
   "engines": {
@@ -22,6 +22,7 @@
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
+    "publish-local": "node scripts/publish-local.js",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build"

package/README.md

@@ -1,42 +0,0 @@
-# test
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```

package/dist/src/composables/useMeteringSSR.d.ts

@@ -1,7 +0,0 @@
-export declare function useMetering(fftSize: number, input?: AudioNode): {
-    getPeakDb: (buffer: Float32Array) => number;
-    getRmsDb: (buffer: Float32Array) => number;
-    getFloatTimeDomainData: () => Float32Array | undefined;
-    getFloatFrequencyData: () => Float32Array | undefined;
-    onInputChanged: (newInput: AudioNode | undefined, oldInput: AudioNode | undefined) => void;
-};