vue-audio-ui 0.1.0 → 0.1.1

package/dist/v-audio-ui.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),A=a.defineComponent({name:"VAAnalogMeterStereo",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},width:{required:!1,type:Number,default:300}}}),c=(t,e)=>{const r=t.__vccOpts||t;for(const[i,o]of e)r[i]=o;return r},H={class:"stereo-meter-container"};function E(t,e,r,i,o,s){const n=a.resolveComponent("v-a-analog-meter");return a.openBlock(),a.createElementBlock("div",H,[a.createVNode(n,{class:"meter-channel",input:t.leftInput,fftSize:t.fftSize,type:t.type,width:t.width},null,8,["input","fftSize","type","width"]),a.createVNode(n,{class:"meter-channel",input:t.rightInput,fftSize:t.fftSize,type:t.type,width:t.width},null,8,["input","fftSize","type","width"])])}const G=c(A,[["render",E],["__scopeId","data-v-b2b883c7"]]);function C(t,e){let r,i;e&&o(e);function o(l){r=l.context.createAnalyser(),r.fftSize=t,i=new Float32Array(r.frequencyBinCount),l.connect(r)}function s(l,d){l&&o(l)}function n(){return r?.getFloatTimeDomainData(i),i}function h(){return r?.getFloatFrequencyData(i),i}function f(l){let d=0,p;for(let u=0;u<l.length;u++)p=Math.abs(l[u]),p>d&&(d=p);return 20*Math.log10(d)}function v(l){let d=0,p;for(let u=0;u<l.length;u++)p=Math.abs(l[u]),d+=p*p;return 20*Math.log10(Math.sqrt(d/l.length))}return{getPeakDb:f,getRmsDb:v,getFloatTimeDomainData:n,getFloatFrequencyData:h,onInputChanged:s}}function b(){const t=a.ref(!1);function e(o){try{o()}catch(s){t.value=!1,console.log(`error in render callback - ${s}`)}t.value&&window.requestAnimationFrame(()=>e(o))}function r(o){t.value=!0,e(o)}function i(){t.value=!1}return{startRendering:r,stopRendering:i}}const N=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:r,getFloatTimeDomainData:i,onInputChanged:o}=C(t.fftSize,t.input);a.watch(()=>t.input,o);const{startRendering:s,stopRendering:n}=b(),h=a.ref(-1),f=a.ref("black"),v=a.computed(()=>isNaN(h.value)?"rotate(0 160 150)":`rotate(${50*h.value} 160 150)`);return a.onMounted(()=>{s(()=>{const l=i();let d=0;t.type==="peak"&&l?d=e(l):t.type==="rms"&&l&&(d=r(l));const p=80;d=d<-p?-p:d;const u=(p+d)/p;h.value=u*2-1})}),a.onUnmounted(()=>{n()}),{color:f,rotation:v,value:h}}}),q={class:"meter-container"},I=["width"],B=["transform"];function O(t,e,r,i,o,s){return a.openBlock(),a.createElementBlock("div",q,[(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-a00b48f0><linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1" data-v-a00b48f0><stop offset="0%" stop-color="#f0f0f0" data-v-a00b48f0></stop><stop offset="50%" stop-color="#b5b5b5" data-v-a00b48f0></stop><stop offset="100%" stop-color="#8a8a8a" data-v-a00b48f0></stop></linearGradient><linearGradient id="faceGrad" x1="0" y1="0" x2="0" y2="1" data-v-a00b48f0><stop offset="0%" stop-color="#fffdf7" data-v-a00b48f0></stop><stop offset="100%" stop-color="#e9e2d3" data-v-a00b48f0></stop></linearGradient><radialGradient id="glassGrad" cx="50%" cy="0%" r="80%" data-v-a00b48f0><stop offset="0%" stop-color="white" stop-opacity="0.7" data-v-a00b48f0></stop><stop offset="60%" stop-color="white" stop-opacity="0.15" data-v-a00b48f0></stop><stop offset="100%" stop-color="white" stop-opacity="0" data-v-a00b48f0></stop></radialGradient><filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" data-v-a00b48f0><feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.4" data-v-a00b48f0></feDropShadow></filter><filter id="needleShadow" data-v-a00b48f0><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5" data-v-a00b48f0></feDropShadow></filter></defs><rect x="10" y="10" rx="18" ry="18" width="300" height="200" fill="url(#frameGrad)" filter="url(#shadow)" data-v-a00b48f0></rect><rect x="24" y="24" rx="12" ry="12" width="272" height="172" fill="url(#faceGrad)" stroke="#777" stroke-width="1" data-v-a00b48f0></rect><path d="M 60 90 A 130 70 0 0 1 260 90" fill="none" stroke="#222" stroke-width="2" data-v-a00b48f0></path><g stroke="#222" stroke-width="2" data-v-a00b48f0><line x1="100" y1="120" x2="105" y2="130" data-v-a00b48f0></line><line x1="160" y1="110" x2="160" y2="122" data-v-a00b48f0></line><line x1="220" y1="120" x2="215" y2="130" data-v-a00b48f0></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,B),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,I))])}const S=c(N,[["render",O],["__scopeId","data-v-a00b48f0"]]);function w(t,e,r){return t<e?e:t>r?r:t}class V{min;max;constructor(e,r){this.min=e,this.max=r}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 k(t){return Math.pow(Math.E,t)}function R(t,e,r,i,o,s){return(k(((t-e)/(r-e)-1)*s)-1)/(k(-s)-1)*(i-o)+o}function F(t,e,r,i,o,s){return(Math.log((t-o)*(k(-s)-1)/(i-o)+1)/s+1)*(r-e)+e}class D extends V{curveAmount;constructor(e,r,i){super(e,r),this.curveAmount=i}getCurvedValue(e){return this.validateInput(e),R(e,this.min,this.max,this.min,this.max,this.curveAmount)}getLinearValue(e){return this.validateInput(e),F(e,this.min,this.max,this.min,this.max,this.curveAmount)}}class x extends V{constructor(e,r){super(e,r)}getCurvedValue(e){return this.validateInput(e),e}getLinearValue(e){return this.validateInput(e),e}}const L=3,_=300,Y=a.defineComponent({name:"VAAudioFileVisualizer",data(){return{canvas:null,canvasContext:null,amplitudeData:new Float32Array,markerPosition:0,markerIndex:0,zoomWindowStartIndex:0,zoomWindowEndIndex:0,zoom:1,prevY:-1,prevX:-1,curedRange:new D(0,1,8)}},props:{lineColor:{required:!1,type:String,default:"white"},backgroundColor:{required:!1,type:String,default:"black"},width:{required:!1,type:Number,default:800},height:{required:!1,type:Number,default:-1}},computed:{cssVars(){return{"--line-color":`${this.lineColor}`,"--background-color":`${this.backgroundColor}`}},graphWidth(){return this.width},graphHeight(){return this.width/L},zoomMult(){const t=this.curedRange.getCurvedValue(this.zoom);return Math.max(t,16/this.amplitudeData.length)},zoomWindowLength(){return this.zoomWindowEndIndex-this.zoomWindowStartIndex}},mounted(){this.canvas=this.$refs.visualizer,this.canvasContext=this.canvas.getContext("2d")},methods:{loadAudioFromAmplitudeData(t){this.amplitudeData=t,window.requestAnimationFrame(this.drawZoom)},shiftZoomWindow(t){this.zoomWindowStartIndex+=t,this.zoomWindowEndIndex+=t},setZoomWindow(){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,r=Math.round(e*this.zoomWindowLength);this.shiftZoomWindow(r);let i=0;i+=this.zoomWindowStartIndex<0?-this.zoomWindowStartIndex:0,i+=this.zoomWindowEndIndex>this.amplitudeData.length?this.amplitudeData.length-this.zoomWindowEndIndex:0,this.shiftZoomWindow(i)},drawZoom(){this.setZoomWindow(),this.drawAmplitude()},getMaxSampleValue(t,e,r){let i=Number.MIN_VALUE;for(let o=e;o<r;o++)i=Math.max(i,t[o]);return i},getMinSampleValue(t,e,r){let i=Number.MAX_VALUE;for(let o=e;o<r;o++)i=Math.min(i,t[o]);return i},getAvgSampleValue(t,e,r){let i=0;for(let o=e;o<r;o++)i+=Math.abs(t[o]);return i/(r-e)},drawAmplitudeSamples(){const t=Math.max(Math.ceil(this.zoomWindowLength/this.graphWidth),1),e=this.graphWidth/(this.zoomWindowEndIndex-this.zoomWindowStartIndex);this.canvasContext?.clearRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.fillStyle=this.backgroundColor,this.canvasContext?.fillRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.strokeStyle=this.lineColor,this.canvasContext?.beginPath();let r=0,i=0,o=0;for(let s=this.zoomWindowStartIndex;s<this.zoomWindowEndIndex;s+=t)o=this.amplitudeData[s],r=(s-this.zoomWindowStartIndex)*e,i=this.graphHeight-(this.graphHeight/2+o*this.graphHeight/2),this.canvasContext?.lineTo(r,i);this.canvasContext?.lineTo(this.graphWidth,this.graphHeight/2),this.canvasContext?.stroke(),this.canvasContext?.beginPath(),this.canvasContext.strokeStyle="red",this.canvasContext?.moveTo(this.markerPosition,0),this.canvasContext?.lineTo(this.markerPosition,this.graphHeight),this.canvasContext?.stroke()},drawAmplitudeAvg(){const t=Math.max(Math.floor(this.zoomWindowLength/this.graphWidth),1);this.canvasContext?.clearRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.fillStyle=this.backgroundColor,this.canvasContext?.fillRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.strokeStyle=this.lineColor,this.canvasContext?.beginPath();let e=0,r=0,i=0;for(let o=0;o<this.graphWidth;o++)e=o,i=this.getAvgSampleValue(this.amplitudeData,this.zoomWindowStartIndex+o*t,this.zoomWindowStartIndex+(o+1)*t),r=this.graphHeight-(this.graphHeight/2+i*this.graphHeight/2),this.canvasContext?.moveTo(e,r),r=this.graphHeight-(this.graphHeight/2+-i*this.graphHeight/2),this.canvasContext?.lineTo(e,r);this.canvasContext?.lineTo(this.graphWidth,this.graphHeight/2),this.canvasContext?.stroke(),this.canvasContext?.beginPath(),this.canvasContext.strokeStyle="red",this.canvasContext?.moveTo(this.markerPosition,0),this.canvasContext?.lineTo(this.markerPosition,this.graphHeight),this.canvasContext?.stroke()},drawAmplitudeMinMax(){const t=Math.max(Math.floor(this.zoomWindowLength/this.graphWidth),1);this.canvasContext?.clearRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.fillStyle=this.backgroundColor,this.canvasContext?.fillRect(0,0,this.graphWidth,this.graphHeight),this.canvasContext.strokeStyle=this.lineColor,this.canvasContext?.beginPath();let e=0,r=0,i=0,o=0;for(let s=0;s<this.graphWidth;s++)e=s,i=this.getMinSampleValue(this.amplitudeData,this.zoomWindowStartIndex+s*t,this.zoomWindowStartIndex+(s+1)*t),o=this.getMaxSampleValue(this.amplitudeData,this.zoomWindowStartIndex+s*t,this.zoomWindowStartIndex+(s+1)*t),r=this.graphHeight-(this.graphHeight/2+i*this.graphHeight/2),this.canvasContext?.moveTo(e,r),r=this.graphHeight-(this.graphHeight/2+o*this.graphHeight/2),this.canvasContext?.lineTo(e,r);this.canvasContext?.lineTo(this.graphWidth,this.graphHeight/2),this.canvasContext?.stroke(),this.canvasContext?.beginPath(),this.canvasContext.strokeStyle="red",this.canvasContext?.moveTo(this.markerPosition,0),this.canvasContext?.lineTo(this.markerPosition,this.graphHeight),this.canvasContext?.stroke()},drawAmplitude(){this.zoomWindowLength>this.graphWidth?this.drawAmplitudeAvg():this.drawAmplitudeSamples()},onCanvasDoubleClick(){this.markerIndex=0,this.markerPosition=0,this.zoom=1,this.zoomWindowStartIndex=0,this.zoomWindowEndIndex=this.amplitudeData.length},onCanvasMouseDown(t){document.getElementsByTagName("body")[0].classList.add("--no-text-select");const e=this.canvas?.getBoundingClientRect()?.x,r=t.clientX-e;this.markerIndex=Math.round(r/this.graphWidth*this.zoomWindowLength)+this.zoomWindowStartIndex,this.markerPosition=r,window.requestAnimationFrame(this.drawAmplitude),window.addEventListener("mousemove",this.onClickDrag),window.addEventListener("mouseup",this.endDrag)},endDrag(){window.removeEventListener("mousemove",this.onClickDrag),this.prevY=-1,this.prevX=-1,document.getElementsByTagName("body")[0].classList.remove("--no-text-select")},onClickDrag(t){const e=t.pageY,r=t.pageX,i=r-this.prevX,o=e-this.prevY;if(Math.abs(i)>=Math.abs(o)){if(this.prevX>=0){let s=Math.round(i/this.graphWidth*this.zoomWindowLength);const n=-this.zoomWindowStartIndex,h=this.amplitudeData.length-this.zoomWindowEndIndex;s=w(s,n,h),this.shiftZoomWindow(-s),this.markerIndex-=s}}else this.prevY>=0&&(this.zoom=w(this.zoom-o/_*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=r}}}),K=["width","height"];function X(t,e,r,i,o,s){return a.openBlock(),a.createElementBlock(a.Fragment,null,[a.createElementVNode("canvas",{width:t.graphWidth,height:t.graphHeight,ref:"visualizer",class:"visualizer-canvas",style:a.normalizeStyle(t.cssVars),onMousedown:e[0]||(e[0]=(...n)=>t.onCanvasMouseDown&&t.onCanvasMouseDown(...n)),onDblclick:e[1]||(e[1]=(...n)=>t.onCanvasDoubleClick&&t.onCanvasDoubleClick(...n))},null,44,K),a.createElementVNode("p",null,"zoom: "+a.toDisplayString(t.zoom),1),a.createElementVNode("p",null,"zoomWindowStartIndex: "+a.toDisplayString(t.zoomWindowStartIndex),1),a.createElementVNode("p",null,"zoomWindowEndIndex: "+a.toDisplayString(t.zoomWindowEndIndex),1),a.createElementVNode("p",null,"zoomWindowLength: "+a.toDisplayString(t.zoomWindowLength),1),a.createElementVNode("p",null,"totalSamples: "+a.toDisplayString(t.amplitudeData.length),1),a.createElementVNode("p",null,"markerIndex: "+a.toDisplayString(t.markerIndex),1),a.createElementVNode("p",null,"markerPosition: "+a.toDisplayString(t.markerPosition),1),a.createElementVNode("p",null,"graphWidth: "+a.toDisplayString(t.graphWidth),1),a.createElementVNode("p",null," binSize: "+a.toDisplayString(Math.max(Math.floor(t.zoomWindowLength/t.graphWidth),1)),1),a.createElementVNode("p",null," binSize (raw): "+a.toDisplayString(Math.max(t.zoomWindowLength/t.graphWidth,1)),1)],64)}const M=c(Y,[["render",X],["__scopeId","data-v-41d0c9ce"]]),Z=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,default:"#4caf50"},backgroundColor:{required:!1,type:String,default:"#e0e0e0"},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"}}}),j={class:"stereo-meter-container"};function J(t,e,r,i,o,s){const n=a.resolveComponent("v-a-digital-meter");return a.openBlock(),a.createElementBlock("div",j,[a.createVNode(n,{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(n,{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 z=c(Z,[["render",J],["__scopeId","data-v-0ed3d04a"]]),m=90,Q=new D(0,m,2),tt=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,default:"#e64a19"},barColor:{required:!1,type:String,default:"#4caf50"},backgroundColor:{required:!1,type:String,default:"#e0e0e0"},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"}},computed:{canvasWidth(){return this.width+(this.drawMarkers?30:0)}},setup(t){const e=C(t.fftSize,t.input);return a.watch(()=>t.input,e.onInputChanged),{...e,...b()}},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*((m+t)/m)*(m/(m+10))},scaleY(t){return Q.getCurvedValue(t+m)-m},draw(){if(this.canvasCxt){const t=this.getFloatTimeDomainData();let e=-m;this.type==="peak"&&t?e=this.getPeakDb(t):this.type==="rms"&&t&&(e=this.getRmsDb(t));const r=e>0;e=w(e,-m,0);const i=this.getMeterHeight(this.scaleY(e));this.canvasCxt.clearRect(0,0,this.canvasWidth,this.height),this.canvasCxt.fillStyle=this.backgroundColor,this.canvasCxt.beginPath(),this.canvasCxt.fillRect(0,0,this.width,this.height),this.canvasCxt.stroke(),this.canvasCxt.fillStyle=r?this.clippingColor:this.barColor,this.canvasCxt.beginPath(),this.canvasCxt.fillRect(0,this.height-i,this.width,i),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)),r=this.width+4;this.canvasCxt.lineWidth=1,this.canvasCxt.strokeStyle=this.markerColor,this.canvasCxt?.beginPath(),this.canvasCxt?.moveTo(r,e),this.canvasCxt?.lineTo(r+4,e),this.canvasCxt?.stroke(),this.canvasCxt.font=`10px ${this.font}`,this.canvasCxt.fillStyle=this.markerColor,this.canvasCxt.fillText(`${Math.abs(t)}`,r+8,e+3)}}}),et=["height","width"];function at(t,e,r,i,o,s){return a.openBlock(),a.createElementBlock("canvas",{class:"meter",ref:"meterCanvas",height:t.height,width:t.canvasWidth},null,8,et)}const U=c(tt,[["render",at]]),rt={},it={version:"1.1",viewBox:"0 0 62.143 129.29",xmlns:"http://www.w3.org/2000/svg",width:"27"};function ot(t,e){return a.openBlock(),a.createElementBlock("svg",it,[...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 st=c(rt,[["render",ot]]),nt={},ht={version:"1.1",viewBox:"0 0 104 460",xmlns:"http://www.w3.org/2000/svg"};function lt(t,e){return a.openBlock(),a.createElementBlock("svg",ht,[...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 dt=c(nt,[["render",lt]]),pt=a.defineComponent({name:"VAFader",components:{defaultFaderHead:st,defaultFaderBackground:dt},emits:["update:modelValue"],setup(t){const e=a.ref(new x(t.minValue,t.maxValue)),r=a.ref(0),i=a.ref(t.modelValue),o=a.ref(e.value.getCurvedValue(t.modelValue)),s=a.ref(0),n=a.ref(void 0);return{valueCurve:e,faderContainerY:r,linearValue:i,curvedValue:o,faderHeadHeight:s,resizeObserver:n}},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 i=(this.height-e)/this.height*this.valueRange+this.minValue;this.$emit("update:modelValue",this.valueCurve.getCurvedValue(i))},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)}}}),ct={ref:"faderBackground",class:"fader-background"};function ft(t,e,r,i,o,s){const n=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",ct,[a.renderSlot(t.$slots,"faderBackground",{},()=>[a.createVNode(n)],!0)],512),a.createElementVNode("div",{ref:"faderHead",class:"fader-head",onMousedown:e[0]||(e[0]=(...f)=>t.onHeadMouseDown&&t.onHeadMouseDown(...f)),onTouchstart:e[1]||(e[1]=(...f)=>t.onHeadMouseDown&&t.onHeadMouseDown(...f)),onDblclick:e[2]||(e[2]=(...f)=>t.onHeadDblClick&&t.onHeadDblClick(...f))},[a.renderSlot(t.$slots,"faderHead",{},()=>[a.createVNode(h)],!0)],544)],4)}const $=c(pt,[["render",ft],["__scopeId","data-v-9d74edfd"]]),ut={},mt={width:"50",height:"50",viewBox:"0 0 100 100"};function gt(t,e){return a.openBlock(),a.createElementBlock("svg",mt,[...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 yt=c(ut,[["render",gt],["__scopeId","data-v-3cef4f4a"]]),xt=a.defineComponent({components:{defaultKnob:yt},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 e<this.minValue?this.minValue:e>this.maxValue?this.maxValue:e},onKnobDrag(t){if(this.prevY>=0){const e=this.prevY-t;let r=this.unsteppedValue+e/this.dragRange*(this.valueRange/2);r=r>this.maxValue?this.maxValue:r<this.minValue?this.minValue:r,this.unsteppedValue=r;const i=this.step===0?this.unsteppedValue:this.roundToStep(this.unsteppedValue);this.$emit("update:modelValue",this.valueCurve.getCurvedValue(i))}},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)}}}),vt={class:"control-container"},wt={class:"knob-row"};function kt(t,e,r,i,o,s){const n=a.resolveComponent("default-knob");return a.openBlock(),a.createElementBlock("div",vt,[a.createElementVNode("div",wt,[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(n)],!0)],36)])])}const T=c(xt,[["render",kt],["__scopeId","data-v-775457f1"]]),g=20,y=-120,Ct=3,bt=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},fillStyle:{type:String,required:!1,default:"none"},lineColor:{type:String,required:!1,default:"black"},backgroundColor:{type:String,required:!1,default:"white"},gridColor:{type:String,required:!1,default:"gray"},borderColor:{type:String,required:!1,default:"black"},height:{type:Number,required:!1,default:-1},width:{type:Number,required:!1,default:1200},font:{required:!1,type:String,default:"Helvetica, sans-serif"}},setup(t){const e=C(t.fftSize,t.input);return a.watch(()=>t.input,e.onInputChanged),{...e,...b()}},computed:{graphWidth(){return this.width},graphHeight(){return this.height<0?this.width/Ct:this.height},cssVars(){return{"--border-color":`${this.borderColor}`}}},mounted(){this.canvasContext=this.$refs.analyserCanvas.getContext("2d"),this.startRendering(this.drawFrequencyDomain)},methods:{scaleX(t,e,r,i){const o=.30111412225233364;let s=(r-e)/r;s*=1-o,s=1-s;let n=(t-e)/(r-e);return n=Math.pow(n,s),n<1&&(n*=i),n},scaleXLegacy(t,e,r,i){return Math.floor(Math.log2(t-e)/Math.log2(r-e)*i)},drawFrequencyDomain(){if(this.canvasContext){const t=0-y,e=this.input?this.input.context.sampleRate/2:24e3,r=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),r){this.canvasContext.beginPath(),this.canvasContext.lineWidth=1,this.canvasContext.strokeStyle=this.lineColor,this.canvasContext.fillStyle=this.lineColor,this.canvasContext.moveTo(0,this.graphHeight);let i=0,o=this.graphHeight-(r[0]-y)/t*this.graphHeight;for(let s=0;s<r.length;s++){const n=(r[s]-y)/t*this.graphHeight,h=s*(e/r.length);this.canvasContext.lineTo(i,o),h>=g&&(i=this.scaleX(h,g,e,this.graphWidth),o=this.graphHeight-n,this.fillStyle==="lines"&&this.canvasContext.fillRect(i,o,1,n)),this.canvasContext.lineTo(i,o)}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-(y-t)/y*this.graphHeight;this.canvasContext.strokeStyle=this.gridColor,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(g,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,r=!1,i=!0){if(this.canvasContext&&t>=g){const o=this.scaleX(t,g,e,this.graphWidth);i&&(this.canvasContext.strokeStyle=this.gridColor,this.canvasContext.beginPath(),this.canvasContext.moveTo(o,0),this.canvasContext.lineTo(o,this.graphWidth),this.canvasContext.stroke()),r&&(this.canvasContext.font=`14px ${this.font}`,this.canvasContext.fillStyle=this.lineColor,t<1e3?this.canvasContext.fillText(`${t}hz`,o,50):this.canvasContext.fillText(`${t/1e3}khz`,o,50))}}}}),Gt=["width","height"];function St(t,e,r,i,o,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,Gt)}const W=c(bt,[["render",St],["__scopeId","data-v-8be4064b"]]),Vt=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),r=a.computed(()=>({"--on-color":`${t.color}`}));function i(){e.value=!e.value}return{on:e,cssVars:r,onButtonClick:i}}});function Dt(t,e,r,i,o,s){return a.openBlock(),a.createElementBlock("button",{onClick:e[0]||(e[0]=(...n)=>t.onButtonClick&&t.onButtonClick(...n)),class:a.normalizeClass([t.on?"button-on":"button-off","button"]),style:a.normalizeStyle(t.cssVars)},a.toDisplayString(t.label),7)}const P=c(Vt,[["render",Dt],["__scopeId","data-v-87a8a5ae"]]),Mt={VAAnalogMeterStereo:G,VAAnalogMeter:S,VAAudioFileVisualizer:M,VADigitalMeterStereo:z,VADigitalMeter:U,VAFader:$,VAKnob:T,VASpectrumAnalyzer:W,VAToggleButton:P},zt=function(e){Object.entries(Mt).forEach(([r,i])=>{e.component(r,i)})};exports.VAAnalogMeter=S;exports.VAAnalogMeterStereo=G;exports.VAAudioFileVisualizer=M;exports.VADigitalMeter=U;exports.VADigitalMeterStereo=z;exports.VAFader=$;exports.VAKnob=T;exports.VASpectrumAnalyzer=W;exports.VAToggleButton=P;exports.default=zt;

package/dist/v-audio-ui.css

@@ -1 +0,0 @@
-.stereo-meter-container[data-v-b2b883c7]{display:flex;flex-direction:row;align-items:flex-end;gap:4px}.meter-channel[data-v-b2b883c7]{margin:0}.meter-container[data-v-a00b48f0]{display:inline-block}.visualizer-canvas[data-v-41d0c9ce]{display:inline-block;border:1px solid;border-color:var(--border-color);cursor:move}.--no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.stereo-meter-container[data-v-0ed3d04a]{display:flex;flex-direction:row;align-items:flex-end;gap:4px}.meter-channel[data-v-0ed3d04a]{margin:0}.fader-container[data-v-9d74edfd]{width:var(--fader-width);height:var(--fader-height);position:relative}.fader-head[data-v-9d74edfd]{max-width:var(--fader-width);max-height:var(--fader-height);cursor:move;position:absolute;top:var(--fader-head-top);left:50%;translate:-50% 0}.fader-head[data-v-9d74edfd] img{max-width:var(--fader-width);max-height:var(--fader-height);display:block;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.fader-head[data-v-9d74edfd] svg{max-width:var(--fader-width);max-height:var(--fader-height)}.fader-background[data-v-9d74edfd]{width:var(--fader-width);height:var(--fader-height);position:absolute}.fader-background[data-v-9d74edfd] img{width:100%!important;height:100%!important;display:block;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.fader-background[data-v-9d74edfd] svg{width:100%!important;height:100%!important;display:block}.spacer[data-v-9d74edfd]{width:var(--fader-width);height:var(--fader-height);visibility:hidden}.st0[data-v-3cef4f4a]{fill:#4d4d4d}.st1[data-v-3cef4f4a]{fill:#939598}.st2[data-v-3cef4f4a]{fill:#fff}.st3[data-v-3cef4f4a]{fill:none;stroke:#fff;stroke-width:1.7417;stroke-linecap:round;stroke-miterlimit:10}.knob-row[data-v-775457f1]{justify-content:center;display:flex}.knob-shadow[data-v-775457f1]{-webkit-box-shadow:0px 0px 8px var(--shadowColor);box-shadow:0 0 8px var(--shadowColor)}.knob-container[data-v-775457f1]{border-radius:50%;line-height:0px!important;cursor:move}.knob-container[data-v-775457f1] svg{width:100%!important;height:auto!important;display:block}.knob-container[data-v-775457f1] img{width:100%!important;height:auto!important;display:block}.control-container[data-v-775457f1]{display:inline-block}.analyser-canvas[data-v-8be4064b]{display:block;border:1px solid;border-color:var(--border-color)}button[data-v-87a8a5ae],input[type=submit][data-v-87a8a5ae],input[type=reset][data-v-87a8a5ae]{background:none;color:inherit;border-radius:4px;border:solid 1px black;font:inherit;cursor:pointer;outline:inherit}.button[data-v-87a8a5ae]{cursor:pointer}.button-on[data-v-87a8a5ae]{box-shadow:inset 0 0 10px 3px var(--on-color)}.button-off[data-v-87a8a5ae]{box-shadow:inset 0 0 5px 5px #d3d3d3}