{"version":3,"sources":["webpack:///./src/components/controllers/Knob.vue?83fb","webpack:///src/components/controllers/Knob.vue","webpack:///./src/components/controllers/Knob.vue?571a","webpack:///./src/components/controllers/Knob.vue","webpack:///./src/components/controllers/Knob.vue?e55a","webpack:///./src/assets/scss/_variables.scss?ad52"],"names":["render","_vm","this","_h","$createElement","_c","_self","_b","Object","assign","$props","$attrs","staticClass","style","color","width","height","_g","$_scaledPosition","on","$_handleMouseWheel","controlHandlers","attrs","rangeArc","pathArc","staticRenderFns","name","mixins","Control","components","props","type","String","default","minDeg","Number","validator","maxDeg","data","computed","endArc","startArc","largeArc","positionZeroPoint","positionPoint","zeroVal","bipolar","sweep","valuePoint","zeroPoint","min","max","component","module","exports"],"mappings":"mJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,kBAAkBJ,EAAIM,GAAG,GAAG,kBAAkBC,OAAOC,OAAO,GAAIR,EAAIS,OAAQT,EAAIU,SAAQ,GAAO,CAACN,EAAG,MAAM,CAACO,YAAY,QAAQ,CAACP,EAAG,MAAM,CAACO,YAAY,YAAYC,MAAM,CAAGC,MAAOb,EAAIa,MAAOC,MAAOd,EAAIc,MAAOC,OAAQf,EAAIc,QAAU,CAACV,EAAG,MAAMJ,EAAIgB,GAAG,CAACL,YAAY,oBAAoBC,MAAM,CAAG,WAAYZ,EAAIiB,kBAAoBC,GAAG,CAAC,MAAQlB,EAAImB,qBAAqBnB,EAAIoB,kBAAkBhB,EAAG,MAAM,CAACiB,MAAM,CAAC,QAAU,gBAAgB,CAACjB,EAAG,OAAO,CAACiB,MAAM,CAAC,EAAIrB,EAAIsB,SAAS,KAAO,UAAUlB,EAAG,OAAO,CAACO,YAAY,eAAeU,MAAM,CAAC,EAAIrB,EAAIuB,QAAQ,KAAO,OAAO,OAASvB,EAAIa,kBACrpBW,EAAkB,G,+ECoBtB,KACA,KACA,KAMA,GACEC,KAAM,OACNC,OAAQ,CAACC,EAAX,MACEC,WAAY,CAAd,uBACEC,MAAO,CACLhB,MAAO,CACLiB,KAAMC,OACNC,QAAS,EAAf,WAEIC,OAAQ,CACNH,KAAM,CAACC,OAAQG,QACfF,SAAU,IACVG,UAAW,SAAjB,mBAEIC,OAAQ,CACNN,KAAM,CAACC,OAAQG,QACfF,QAAS,IACTG,UAAW,SAAjB,mBAEIrB,MAAO,CACLgB,KAAMC,OACNC,QAAS,QAGbK,KAxBF,WAyBI,MAAO,IAETC,SAAU,CACRrB,iBADJ,WAEM,OAAO,OAAb,OAAa,CAAb,6CAEIM,QAJJ,WAMM,MAAO,KAAb,0LAEID,SARJ,WASM,OAAO,OAAb,OAAa,CAAb,gCAEIiB,OAXJ,WAYM,OAAO,OAAb,OAAa,CAAb,8BAEIC,SAdJ,WAeM,OAAO,OAAb,OAAa,CAAb,+BAEIC,SAjBJ,WAkBM,OAAOxC,KAAKyC,kBAAoBzC,KAAKgB,kBAAoB,IAAM,EAAI,GAErE0B,cApBJ,WAqBM,OAAO,OAAb,OAAa,CAAb,6CAEID,kBAvBJ,WAwBM,IAAN,EAMM,OAJEE,EADE3C,KAAK4C,QACG,GAEA,EAEL,OAAb,OAAa,CAAb,gCAEIC,MAhCJ,WAiCM,OAAO7C,KAAK0C,eAAiB1C,KAAKyC,kBAAoB,EAAI,GAK5DK,WAtCJ,WAuCM,OAAO,OAAb,OAAa,CAAb,uDAEIC,UAzCJ,WA0CM,IAAN,EAMM,OAJEJ,EADE3C,KAAK4C,SACI5C,KAAKgD,IAAMhD,KAAKiD,KAAO,EAExBjD,KAAKgD,IAEV,OAAb,OAAa,CAAb,gDCxG6V,I,wBCQzVE,EAAY,eACd,EACApD,EACAyB,GACA,EACA,KACA,WACA,MAIa,aAAA2B,E,2CCnBf,yBAAsjB,EAAG,G,qBCCzjBC,EAAOC,QAAU,CAAC,QAAU,UAAU,QAAU","file":"src/assets/js/chunk-0e8f871a.ae8bd28a.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('base-controller',_vm._b({},'base-controller',Object.assign({}, _vm.$props, _vm.$attrs),false),[_c('div',{staticClass:\"knob\"},[_c('div',{staticClass:\"knob-dial\",style:({ color: _vm.color, width: _vm.width, height: _vm.width })},[_c('div',_vm._g({staticClass:\"dial-grip handle \",style:({ '--rotate': _vm.$_scaledPosition }),on:{\"wheel\":_vm.$_handleMouseWheel}},_vm.controlHandlers)),_c('svg',{attrs:{\"viewBox\":\"0 0 100 100\"}},[_c('path',{attrs:{\"d\":_vm.rangeArc,\"fill\":\"none\"}}),_c('path',{staticClass:\"dial-svg-arc\",attrs:{\"d\":_vm.pathArc,\"fill\":\"none\",\"stroke\":_vm.color}})])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <base-controller v-bind=\"{ ...$props, ...$attrs }\">\n    <div class=\"knob\">\n      <div class=\"knob-dial\" :style=\"{ color, width, height: width }\">\n        <div\n          class=\"dial-grip handle \"\n          :style=\"{ '--rotate': $_scaledPosition }\"\n          v-on=\"controlHandlers\"\n          @wheel=\"$_handleMouseWheel\"\n        ></div>\n        <svg viewBox=\"0 0 100 100\">\n          <path :d=\"rangeArc\" fill=\"none\" />\n          <path :d=\"pathArc\" fill=\"none\" :stroke=\"color\" class=\"dial-svg-arc\" />\n        </svg>\n      </div>\n    </div>\n  </base-controller>\n</template>\n\n<script>\n// knob constants;\nconst RADIUS = 40;\nconst MID_X = 50;\nconst MID_Y = 50;\n\nimport { clamp, scale, describeArc, polarToCartesian } from \"@/utils\";\nimport { ControlMixin } from \"@/mixins/Control\";\nimport variables from \"@/assets/scss/_variables.scss\";\nimport BaseController from \"./BaseController\";\nexport default {\n  name: \"Knob\",\n  mixins: [ControlMixin],\n  components: { BaseController },\n  props: {\n    color: {\n      type: String,\n      default: variables.control\n    },\n    minDeg: {\n      type: [String, Number],\n      default: -135,\n      validator: v => +v === +v // is numeric\n    },\n    maxDeg: {\n      type: [String, Number],\n      default: 135,\n      validator: v => +v === +v // is numeric\n    },\n    width: {\n      type: String,\n      default: \"3em\"\n    }\n  },\n  data() {\n    return {};\n  },\n  computed: {\n    $_scaledPosition() {\n      return scale(this.position$, 0, 1, this.minDeg, this.maxDeg);\n    },\n    pathArc() {\n      // return \"M20,76 A 40 40 0 1 1 80 76\";\n      return `M ${this.startArc.x} ${this.startArc.y} A ${RADIUS} ${RADIUS} 0 ${this.largeArc} ${this.sweep} ${this.endArc.x} ${this.endArc.y}`;\n    },\n    rangeArc() {\n      return describeArc(MID_X, MID_Y, RADIUS, this.minDeg, this.maxDeg);\n    },\n    endArc() {\n      return polarToCartesian(MID_X, MID_Y, RADIUS, this.$_scaledPosition);\n    },\n    startArc() {\n      return polarToCartesian(MID_X, MID_Y, RADIUS, this.positionZeroPoint);\n    },\n    largeArc() {\n      return this.positionZeroPoint - this.$_scaledPosition < -180 ? 1 : 0;\n    },\n    positionPoint() {\n      return scale(this.position$, 0, 1, this.minDeg, this.maxDeg);\n    },\n    positionZeroPoint() {\n      let zeroVal;\n      if (this.bipolar) {\n        zeroVal = (0 + 1) / 2;\n      } else {\n        zeroVal = 0;\n      }\n      return scale(zeroVal, 0, 1, this.minDeg, this.maxDeg);\n    },\n    sweep() {\n      return this.positionPoint >= this.positionZeroPoint ? 1 : 0;\n      // return this.valuePoint >= this.zeroPoint ? 1 : 0;\n    },\n    /* depracated */\n\n    valuePoint() {\n      return scale(this.value, this.min, this.max, this.minDeg, this.maxDeg);\n    },\n    zeroPoint() {\n      let zeroVal;\n      if (this.bipolar) {\n        zeroVal = (this.min + this.max) / 2;\n      } else {\n        zeroVal = this.min;\n      }\n      return scale(zeroVal, this.min, this.max, this.minDeg, this.maxDeg);\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.knob {\n  display: inline-block;\n  position: relative;\n\n  &-dial {\n    position: relative;\n    display: block;\n    // background: #2c2d2f;\n    transform: translateY(16%);\n    margin-top: -16%; // compensate\n  }\n  svg {\n    pointer-events: none;\n    position: absolute;\n    stroke-width: 5;\n    stroke: #55595c;\n    .dial-svg-arc {\n      filter: drop-shadow(0 0 1px);\n    }\n  }\n}\n.dial-grip {\n  border-radius: 100%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(calc(var(--rotate, 0) * 1deg));\n  height: 65%;\n  width: 65%;\n  z-index: 1;\n  background-color: #2c2d2f;\n\n  &::before {\n    content: \"\";\n    z-index: 1;\n    border-radius: inherit;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: rotate(calc(var(--rotate, 0) * -1deg));\n    background: linear-gradient(to bottom, #fff3, transparent);\n    box-shadow: 0 0 0.04em 0.08em #000, 0 0.4em 0.4em 0 #111a, inset 0 0 0.08em 0.12em #181b1c;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    z-index: 2;\n    width: 6%;\n    transform: translateX(-50%);\n    // -------------------------\n    top: 0;\n    height: 45%;\n    border-radius: 0 0 2px 2px;\n    background-color: #e4e8ea;\n    mix-blend-mode: color-dodge;\n    box-shadow: 0px 1px 1px 0px #000, inset 0 1px 1px 2px #aaa;\n    // -------------------------\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Knob.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Knob.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Knob.vue?vue&type=template&id=abbea0f8&scoped=true&\"\nimport script from \"./Knob.vue?vue&type=script&lang=js&\"\nexport * from \"./Knob.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Knob.vue?vue&type=style&index=0&id=abbea0f8&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"abbea0f8\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Knob.vue?vue&type=style&index=0&id=abbea0f8&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Knob.vue?vue&type=style&index=0&id=abbea0f8&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\nmodule.exports = {\"primary\":\"#ff0080\",\"control\":\"#f08f20\"};"],"sourceRoot":""}