vue-audio-ui 0.1.0 → 0.1.1

package/dist/v-audio-ui.js

@@ -1,1189 +0,0 @@
-import { defineComponent as w, resolveComponent as G, createElementBlock as p, openBlock as c, createVNode as k, ref as y, watch as W, computed as H, onMounted as I, onUnmounted as R, createStaticVNode as V, createElementVNode as n, Fragment as O, normalizeStyle as S, toDisplayString as m, renderSlot as U, reactive as F, normalizeClass as L } from "vue";
-const N = w({
-  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
-    }
-  }
-}), u = (t, e) => {
-  const a = t.__vccOpts || t;
-  for (const [r, i] of e)
-    a[r] = i;
-  return a;
-}, E = { class: "stereo-meter-container" };
-function B(t, e, a, r, i, s) {
-  const o = G("v-a-analog-meter");
-  return c(), p("div", E, [
-    k(o, {
-      class: "meter-channel",
-      input: t.leftInput,
-      fftSize: t.fftSize,
-      type: t.type,
-      width: t.width
-    }, null, 8, ["input", "fftSize", "type", "width"]),
-    k(o, {
-      class: "meter-channel",
-      input: t.rightInput,
-      fftSize: t.fftSize,
-      type: t.type,
-      width: t.width
-    }, null, 8, ["input", "fftSize", "type", "width"])
-  ]);
-}
-const _ = /* @__PURE__ */ u(N, [["render", B], ["__scopeId", "data-v-b2b883c7"]]);
-function T(t, e) {
-  let a, r;
-  e && i(e);
-  function i(l) {
-    a = l.context.createAnalyser(), a.fftSize = t, r = new Float32Array(a.frequencyBinCount), l.connect(a);
-  }
-  function s(l, d) {
-    l && i(l);
-  }
-  function o() {
-    return a?.getFloatTimeDomainData(r), r;
-  }
-  function h() {
-    return a?.getFloatFrequencyData(r), r;
-  }
-  function g(l) {
-    let d = 0, f;
-    for (let x = 0; x < l.length; x++)
-      f = Math.abs(l[x]), f > d && (d = f);
-    return 20 * Math.log10(d);
-  }
-  function D(l) {
-    let d = 0, f;
-    for (let x = 0; x < l.length; x++)
-      f = Math.abs(l[x]), d += f * f;
-    return 20 * Math.log10(Math.sqrt(d / l.length));
-  }
-  return {
-    getPeakDb: g,
-    getRmsDb: D,
-    getFloatTimeDomainData: o,
-    getFloatFrequencyData: h,
-    onInputChanged: s
-  };
-}
-function P() {
-  const t = y(!1);
-  function e(i) {
-    try {
-      i();
-    } catch (s) {
-      t.value = !1, console.log(`error in render callback - ${s}`);
-    }
-    t.value && window.requestAnimationFrame(() => e(i));
-  }
-  function a(i) {
-    t.value = !0, e(i);
-  }
-  function r() {
-    t.value = !1;
-  }
-  return { startRendering: a, stopRendering: r };
-}
-const Y = w({
-  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: a, getFloatTimeDomainData: r, onInputChanged: i } = T(t.fftSize, t.input);
-    W(() => t.input, i);
-    const { startRendering: s, stopRendering: o } = P(), h = y(-1), g = y("black"), D = H(() => isNaN(h.value) ? "rotate(0 160 150)" : `rotate(${50 * h.value} 160 150)`);
-    return I(() => {
-      s(() => {
-        const l = r();
-        let d = 0;
-        t.type === "peak" && l ? d = e(l) : t.type === "rms" && l && (d = a(l));
-        const f = 80;
-        d = d < -f ? -f : d;
-        const x = (f + d) / f;
-        h.value = x * 2 - 1;
-      });
-    }), R(() => {
-      o();
-    }), {
-      color: g,
-      rotation: D,
-      value: h
-    };
-  }
-}), K = { class: "meter-container" }, X = ["width"], Z = ["transform"];
-function j(t, e, a, r, i, s) {
-  return c(), p("div", K, [
-    (c(), p("svg", {
-      width: `${t.width}px`,
-      viewBox: "0 0 320 220",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, [
-      e[1] || (e[1] = V('<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)),
-      n("g", {
-        id: "needle",
-        transform: t.rotation
-      }, [...e[0] || (e[0] = [
-        n("polygon", {
-          points: "160,70 158,150 162,150",
-          fill: "#c62828"
-        }, null, -1),
-        n("circle", {
-          cx: "160",
-          cy: "150",
-          r: "6",
-          fill: "#333"
-        }, null, -1),
-        n("circle", {
-          cx: "160",
-          cy: "150",
-          r: "3",
-          fill: "#777"
-        }, null, -1)
-      ])], 8, Z),
-      e[2] || (e[2] = n("rect", {
-        x: "24",
-        y: "24",
-        rx: "12",
-        ry: "12",
-        width: "272",
-        height: "172",
-        fill: "url(#glassGrad)"
-      }, null, -1)),
-      e[3] || (e[3] = n("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, X))
-  ]);
-}
-const J = /* @__PURE__ */ u(Y, [["render", j], ["__scopeId", "data-v-a00b48f0"]]);
-function z(t, e, a) {
-  return t < e ? e : t > a ? a : t;
-}
-class A {
-  min;
-  max;
-  constructor(e, a) {
-    this.min = e, this.max = a;
-  }
-  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 $(t) {
-  return Math.pow(Math.E, t);
-}
-function Q(t, e, a, r, i, s) {
-  return ($(((t - e) / (a - e) - 1) * s) - 1) / ($(-s) - 1) * (r - i) + i;
-}
-function tt(t, e, a, r, i, s) {
-  return (Math.log((t - i) * ($(-s) - 1) / (r - i) + 1) / s + 1) * (a - e) + e;
-}
-class q extends A {
-  curveAmount;
-  constructor(e, a, r) {
-    super(e, a), this.curveAmount = r;
-  }
-  getCurvedValue(e) {
-    return this.validateInput(e), Q(e, this.min, this.max, this.min, this.max, this.curveAmount);
-  }
-  getLinearValue(e) {
-    return this.validateInput(e), tt(e, this.min, this.max, this.min, this.max, this.curveAmount);
-  }
-}
-class M extends A {
-  constructor(e, a) {
-    super(e, a);
-  }
-  getCurvedValue(e) {
-    return this.validateInput(e), e;
-  }
-  getLinearValue(e) {
-    return this.validateInput(e), e;
-  }
-}
-const et = 3, at = 300, rt = w({
-  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 q(0, 1, 8)
-      // todo: adjust curve based on sample length?,
-    };
-  },
-  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 / et;
-    },
-    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, a = Math.round(
-        e * this.zoomWindowLength
-      );
-      this.shiftZoomWindow(a);
-      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, a) {
-      let r = Number.MIN_VALUE;
-      for (let i = e; i < a; i++)
-        r = Math.max(r, t[i]);
-      return r;
-    },
-    getMinSampleValue(t, e, a) {
-      let r = Number.MAX_VALUE;
-      for (let i = e; i < a; i++)
-        r = Math.min(r, t[i]);
-      return r;
-    },
-    getAvgSampleValue(t, e, a) {
-      let r = 0;
-      for (let i = e; i < a; i++)
-        r += Math.abs(t[i]);
-      return r / (a - 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 a = 0, r = 0, i = 0;
-      for (let s = this.zoomWindowStartIndex; s < this.zoomWindowEndIndex; s += t)
-        i = this.amplitudeData[s], a = (s - this.zoomWindowStartIndex) * e, r = this.graphHeight - (this.graphHeight / 2 + i * this.graphHeight / 2), this.canvasContext?.lineTo(a, 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();
-    },
-    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, a = 0, r = 0;
-      for (let i = 0; i < this.graphWidth; i++)
-        e = i, r = this.getAvgSampleValue(
-          this.amplitudeData,
-          this.zoomWindowStartIndex + i * t,
-          this.zoomWindowStartIndex + (i + 1) * t
-        ), a = this.graphHeight - (this.graphHeight / 2 + r * this.graphHeight / 2), this.canvasContext?.moveTo(e, a), a = this.graphHeight - (this.graphHeight / 2 + -r * this.graphHeight / 2), this.canvasContext?.lineTo(e, a);
-      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, a = 0, r = 0, i = 0;
-      for (let s = 0; s < this.graphWidth; s++)
-        e = s, r = this.getMinSampleValue(
-          this.amplitudeData,
-          this.zoomWindowStartIndex + s * t,
-          this.zoomWindowStartIndex + (s + 1) * t
-        ), i = this.getMaxSampleValue(
-          this.amplitudeData,
-          this.zoomWindowStartIndex + s * t,
-          this.zoomWindowStartIndex + (s + 1) * t
-        ), a = this.graphHeight - (this.graphHeight / 2 + r * this.graphHeight / 2), this.canvasContext?.moveTo(e, a), a = this.graphHeight - (this.graphHeight / 2 + i * this.graphHeight / 2), this.canvasContext?.lineTo(e, a);
-      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, a = t.clientX - e;
-      this.markerIndex = Math.round(a / this.graphWidth * this.zoomWindowLength) + this.zoomWindowStartIndex, this.markerPosition = a, 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, a = t.pageX, r = a - this.prevX, i = e - this.prevY;
-      if (Math.abs(r) >= Math.abs(i)) {
-        if (this.prevX >= 0) {
-          let s = Math.round(
-            r / this.graphWidth * this.zoomWindowLength
-          );
-          const o = -this.zoomWindowStartIndex, h = this.amplitudeData.length - this.zoomWindowEndIndex;
-          s = z(s, o, h), this.shiftZoomWindow(-s), this.markerIndex -= s;
-        }
-      } else
-        this.prevY >= 0 && (this.zoom = z(this.zoom - i / at * 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 = a;
-    }
-  }
-}), it = ["width", "height"];
-function st(t, e, a, r, i, s) {
-  return c(), p(O, null, [
-    n("canvas", {
-      width: t.graphWidth,
-      height: t.graphHeight,
-      ref: "visualizer",
-      class: "visualizer-canvas",
-      style: S(t.cssVars),
-      onMousedown: e[0] || (e[0] = (...o) => t.onCanvasMouseDown && t.onCanvasMouseDown(...o)),
-      onDblclick: e[1] || (e[1] = (...o) => t.onCanvasDoubleClick && t.onCanvasDoubleClick(...o))
-    }, null, 44, it),
-    n("p", null, "zoom: " + m(t.zoom), 1),
-    n("p", null, "zoomWindowStartIndex: " + m(t.zoomWindowStartIndex), 1),
-    n("p", null, "zoomWindowEndIndex: " + m(t.zoomWindowEndIndex), 1),
-    n("p", null, "zoomWindowLength: " + m(t.zoomWindowLength), 1),
-    n("p", null, "totalSamples: " + m(t.amplitudeData.length), 1),
-    n("p", null, "markerIndex: " + m(t.markerIndex), 1),
-    n("p", null, "markerPosition: " + m(t.markerPosition), 1),
-    n("p", null, "graphWidth: " + m(t.graphWidth), 1),
-    n("p", null, " binSize: " + m(Math.max(Math.floor(t.zoomWindowLength / t.graphWidth), 1)), 1),
-    n("p", null, " binSize (raw): " + m(Math.max(t.zoomWindowLength / t.graphWidth, 1)), 1)
-  ], 64);
-}
-const ot = /* @__PURE__ */ u(rt, [["render", st], ["__scopeId", "data-v-41d0c9ce"]]), nt = w({
-  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"
-    }
-  }
-}), ht = { class: "stereo-meter-container" };
-function lt(t, e, a, r, i, s) {
-  const o = G("v-a-digital-meter");
-  return c(), p("div", ht, [
-    k(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"]),
-    k(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 dt = /* @__PURE__ */ u(nt, [["render", lt], ["__scopeId", "data-v-0ed3d04a"]]), v = 90, pt = new q(0, v, 2), ct = w({
-  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 = T(t.fftSize, t.input);
-    return W(() => t.input, e.onInputChanged), {
-      ...e,
-      ...P()
-    };
-  },
-  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 * ((v + t) / v) * (v / (v + 10));
-    },
-    scaleY(t) {
-      return pt.getCurvedValue(t + v) - v;
-    },
-    draw() {
-      if (this.canvasCxt) {
-        const t = this.getFloatTimeDomainData();
-        let e = -v;
-        this.type === "peak" && t ? e = this.getPeakDb(t) : this.type === "rms" && t && (e = this.getRmsDb(t));
-        const a = e > 0;
-        e = z(e, -v, 0);
-        const r = 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 = a ? this.clippingColor : this.barColor, 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)), a = this.width + 4;
-      this.canvasCxt.lineWidth = 1, this.canvasCxt.strokeStyle = this.markerColor, this.canvasCxt?.beginPath(), this.canvasCxt?.moveTo(a, e), this.canvasCxt?.lineTo(a + 4, e), this.canvasCxt?.stroke(), this.canvasCxt.font = `10px ${this.font}`, this.canvasCxt.fillStyle = this.markerColor, this.canvasCxt.fillText(`${Math.abs(t)}`, a + 8, e + 3);
-    }
-  }
-}), ft = ["height", "width"];
-function ut(t, e, a, r, i, s) {
-  return c(), p("canvas", {
-    class: "meter",
-    ref: "meterCanvas",
-    height: t.height,
-    width: t.canvasWidth
-  }, null, 8, ft);
-}
-const mt = /* @__PURE__ */ u(ct, [["render", ut]]), gt = {}, yt = {
-  version: "1.1",
-  viewBox: "0 0 62.143 129.29",
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "27"
-};
-function xt(t, e) {
-  return c(), p("svg", yt, [...e[0] || (e[0] = [
-    V('<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 vt = /* @__PURE__ */ u(gt, [["render", xt]]), wt = {}, kt = {
-  version: "1.1",
-  viewBox: "0 0 104 460",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function bt(t, e) {
-  return c(), p("svg", kt, [...e[0] || (e[0] = [
-    V('<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 Ct = /* @__PURE__ */ u(wt, [["render", bt]]), Gt = w({
-  name: "VAFader",
-  components: {
-    defaultFaderHead: vt,
-    defaultFaderBackground: Ct
-  },
-  emits: ["update:modelValue"],
-  setup(t) {
-    const e = y(new M(t.minValue, t.maxValue)), a = y(0), r = y(t.modelValue), i = y(e.value.getCurvedValue(t.modelValue)), s = y(0), o = y(void 0);
-    return {
-      valueCurve: e,
-      faderContainerY: a,
-      linearValue: r,
-      curvedValue: i,
-      // faderContainer,
-      // faderBackground,
-      // faderHead,
-      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 M(t, this.maxValue);
-    },
-    maxValue(t) {
-      this.valueCurve = new M(this.minValue, t);
-    }
-  }
-}), St = {
-  ref: "faderBackground",
-  class: "fader-background"
-};
-function Mt(t, e, a, r, i, s) {
-  const o = G("defaultFaderBackground"), h = G("defaultFaderHead");
-  return c(), p("div", {
-    ref: "faderContainer",
-    class: "fader-container",
-    style: S(t.cssVars)
-  }, [
-    n("div", St, [
-      U(t.$slots, "faderBackground", {}, () => [
-        k(o)
-      ], !0)
-    ], 512),
-    n("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))
-    }, [
-      U(t.$slots, "faderHead", {}, () => [
-        k(h)
-      ], !0)
-    ], 544)
-  ], 4);
-}
-const Vt = /* @__PURE__ */ u(Gt, [["render", Mt], ["__scopeId", "data-v-9d74edfd"]]), Dt = {}, Ut = {
-  width: "50",
-  height: "50",
-  viewBox: "0 0 100 100"
-};
-function zt(t, e) {
-  return c(), p("svg", Ut, [...e[0] || (e[0] = [
-    V(`<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 $t = /* @__PURE__ */ u(Dt, [["render", zt], ["__scopeId", "data-v-3cef4f4a"]]), Wt = w({
-  components: {
-    defaultKnob: $t
-  },
-  setup(t) {
-    const e = {
-      curvedValue: 0,
-      linearValue: 0,
-      unsteppedValue: 0,
-      rotationMax: 3 * Math.PI / 4,
-      dragRange: 70,
-      prevY: -1,
-      valueCurve: new M(t.minValue, t.maxValue)
-      // audioParamValue: null as AudioParam | null
-    };
-    return t.modelValue instanceof Number && (e.linearValue = t.modelValue, e.curvedValue = e.valueCurve.getCurvedValue(t.modelValue), e.unsteppedValue = e.curvedValue), F(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 a = this.unsteppedValue + e / this.dragRange * (this.valueRange / 2);
-        a = a > this.maxValue ? this.maxValue : a < this.minValue ? this.minValue : a, this.unsteppedValue = a;
-        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);
-    }
-  }
-}), Tt = { class: "control-container" }, Pt = { class: "knob-row" };
-function Ht(t, e, a, r, i, s) {
-  const o = G("default-knob");
-  return c(), p("div", Tt, [
-    n("div", Pt, [
-      n("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: S(`transform: rotate(${t.knobRotation}rad); width: ${t.size}px; height: ${t.size}px;`)
-      }, [
-        U(t.$slots, "default", {}, () => [
-          k(o)
-        ], !0)
-      ], 36)
-    ])
-  ]);
-}
-const At = /* @__PURE__ */ u(Wt, [["render", Ht], ["__scopeId", "data-v-775457f1"]]), b = 20, C = -120, qt = 3, It = w({
-  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 = T(t.fftSize, t.input);
-    return W(() => t.input, e.onInputChanged), {
-      ...e,
-      ...P()
-    };
-  },
-  computed: {
-    graphWidth() {
-      return this.width;
-    },
-    graphHeight() {
-      return this.height < 0 ? this.width / qt : this.height;
-    },
-    cssVars() {
-      return {
-        "--border-color": `${this.borderColor}`
-      };
-    }
-  },
-  mounted() {
-    this.canvasContext = this.$refs.analyserCanvas.getContext("2d"), this.startRendering(this.drawFrequencyDomain);
-  },
-  methods: {
-    scaleX(t, e, a, r) {
-      const i = 0.30111412225233364;
-      let s = (a - e) / a;
-      s *= 1 - i, s = 1 - s;
-      let o = (t - e) / (a - e);
-      return o = Math.pow(o, s), o < 1 && (o *= r), o;
-    },
-    scaleXLegacy(t, e, a, r) {
-      return Math.floor(
-        Math.log2(t - e) / Math.log2(a - e) * r
-      );
-    },
-    drawFrequencyDomain() {
-      if (this.canvasContext) {
-        const t = 0 - C, e = this.input ? this.input.context.sampleRate / 2 : 24e3, a = 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), a) {
-          this.canvasContext.beginPath(), this.canvasContext.lineWidth = 1, this.canvasContext.strokeStyle = this.lineColor, this.canvasContext.fillStyle = this.lineColor, this.canvasContext.moveTo(0, this.graphHeight);
-          let r = 0, i = this.graphHeight - (a[0] - C) / t * this.graphHeight;
-          for (let s = 0; s < a.length; s++) {
-            const o = (a[s] - C) / t * this.graphHeight, h = s * (e / a.length);
-            this.canvasContext.lineTo(r, i), h >= b && (r = this.scaleX(h, b, e, this.graphWidth), i = this.graphHeight - o, this.fillStyle === "lines" && this.canvasContext.fillRect(r, i, 1, o)), this.canvasContext.lineTo(r, i);
-          }
-          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 - (C - t) / C * 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(
-        b,
-        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, a = !1, r = !0) {
-      if (this.canvasContext && t >= b) {
-        const i = this.scaleX(t, b, e, this.graphWidth);
-        r && (this.canvasContext.strokeStyle = this.gridColor, this.canvasContext.beginPath(), this.canvasContext.moveTo(i, 0), this.canvasContext.lineTo(i, this.graphWidth), this.canvasContext.stroke()), a && (this.canvasContext.font = `14px ${this.font}`, this.canvasContext.fillStyle = this.lineColor, t < 1e3 ? this.canvasContext.fillText(`${t}hz`, i, 50) : this.canvasContext.fillText(`${t / 1e3}khz`, i, 50));
-      }
-    }
-  }
-}), Rt = ["width", "height"];
-function Ot(t, e, a, r, i, s) {
-  return c(), p("canvas", {
-    width: t.graphWidth,
-    height: t.graphHeight,
-    ref: "analyserCanvas",
-    class: "analyser-canvas",
-    style: S(t.cssVars)
-  }, null, 12, Rt);
-}
-const Ft = /* @__PURE__ */ u(It, [["render", Ot], ["__scopeId", "data-v-8be4064b"]]), Lt = w({
-  Name: "VAToggleButton",
-  props: {
-    color: {
-      required: !1,
-      type: String,
-      default: "red"
-    },
-    label: {
-      require: !1,
-      type: String,
-      default: ""
-    }
-  },
-  setup(t) {
-    const e = y(!1), a = H(() => ({
-      "--on-color": `${t.color}`
-    }));
-    function r() {
-      e.value = !e.value;
-    }
-    return { on: e, cssVars: a, onButtonClick: r };
-  }
-});
-function Nt(t, e, a, r, i, s) {
-  return c(), p("button", {
-    onClick: e[0] || (e[0] = (...o) => t.onButtonClick && t.onButtonClick(...o)),
-    class: L([t.on ? "button-on" : "button-off", "button"]),
-    style: S(t.cssVars)
-  }, m(t.label), 7);
-}
-const Et = /* @__PURE__ */ u(Lt, [["render", Nt], ["__scopeId", "data-v-87a8a5ae"]]), Bt = {
-  // test,
-  VAAnalogMeterStereo: _,
-  VAAnalogMeter: J,
-  VAAudioFileVisualizer: ot,
-  VADigitalMeterStereo: dt,
-  VADigitalMeter: mt,
-  VAFader: Vt,
-  VAKnob: At,
-  VASpectrumAnalyzer: Ft,
-  VAToggleButton: Et
-}, Yt = function(e) {
-  Object.entries(Bt).forEach(([a, r]) => {
-    e.component(a, r);
-  });
-};
-export {
-  J as VAAnalogMeter,
-  _ as VAAnalogMeterStereo,
-  ot as VAAudioFileVisualizer,
-  mt as VADigitalMeter,
-  dt as VADigitalMeterStereo,
-  Vt as VAFader,
-  At as VAKnob,
-  Ft as VASpectrumAnalyzer,
-  Et as VAToggleButton,
-  Yt as default
-};