{"version":3,"sources":["webpack:///./src/components/view/ViewerImageScroll.vue?0837","webpack:///./src/components/view/ViewerImageScroll.vue?7b11","webpack:///src/components/view/ViewerImageScroll.vue","webpack:///./src/components/view/ViewerImageScroll.vue?16b4","webpack:///./src/components/view/ViewerImageScroll.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","hasPreviousImage","on","$event","$emit","activeIndex","staticStyle","ref","directives","name","rawName","value","expression","modifiers","series","images","length","domProps","_n","target","$forceUpdate","hasNextImage","staticRenderFns","scrollToIndex","csToolsImport","props","type","Object","required","image","stackIndex","Number","computed","_objectSpread","mapState","canvasLayout","state","viewer","get","set","index","$parent","$refs","canvas","frameIndex","watch","handler","setScrollLength","deep","mounted","_this","eventBus","onMouseWheel","throttle","e","wheelDelta","rangeInput","addEventListener","$once","removeEventListener","destroyed","off","methods","inputContainer","scrollLength","getBoundingClientRect","height","style","width","component"],"mappings":"8HAAA,W,2CCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,SAAS,CAACG,MAAM,CAAC,MAAQ,iBAAiB,UAAYP,EAAIQ,kBAAkBC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAM,SAAUX,EAAIY,kBAAkB,CAACR,EAAG,WAAW,CAACS,YAAY,CAAC,YAAY,OAAON,MAAM,CAAC,KAAO,eAAe,GAAGH,EAAG,MAAM,CAACU,IAAI,iBAAiBR,YAAY,mBAAmB,CAACF,EAAG,QAAQ,CAACW,WAAW,CAAC,CAACC,KAAK,QAAQC,QAAQ,iBAAiBC,MAAOlB,EAAe,YAAEmB,WAAW,cAAcC,UAAU,CAAC,QAAS,KAAQN,IAAI,aAAaR,YAAY,iBAAiBC,MAAM,CAAC,KAAO,QAAQ,IAAM,IAAI,IAAMP,EAAIqB,OAAOC,OAAOC,OAAS,GAAGC,SAAS,CAAC,MAASxB,EAAe,aAAGS,GAAG,CAAC,IAAM,SAASC,GAAQV,EAAIY,YAAYZ,EAAIyB,GAAGf,EAAOgB,OAAOR,QAAQ,KAAO,SAASR,GAAQ,OAAOV,EAAI2B,qBAAqBvB,EAAG,SAAS,CAACG,MAAM,CAAC,MAAQ,aAAa,UAAYP,EAAI4B,cAAcnB,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAM,SAAUX,EAAIY,kBAAkB,CAACR,EAAG,WAAW,CAACS,YAAY,CAAC,YAAY,OAAON,MAAM,CAAC,KAAO,iBAAiB,MAChjCsB,EAAkB,G,yECyBtBC,EAAAC,oBAAA,sBAEe,GACff,KAAA,oBACAgB,MAAA,CACAX,OAAA,CACAY,KAAAC,OACAC,UAAA,GAEAC,MAAA,CACAH,KAAAC,OACAC,UAAA,GAEAE,WAAA,CACAJ,KAAAK,OACAH,UAAA,IAGAI,SAAAC,8BAAA,GACAC,eAAA,CACAC,aAAA,SAAAC,GAAA,OAAAA,EAAAC,OAAAF,iBACA,IACA9B,YAAA,CACAiC,IAAA,WACA,YAAAR,YAEAS,IAAA,SAAAC,GACAjB,EAAA,KAAAkB,QAAAC,MAAAC,OAAAH,KAGAvC,iBAAA,WACA,YAAA6B,WAAA,GAEAT,aAAA,WACA,cAAAP,SAAA,KAAAA,OAAAC,YACA,KAAA6B,WAAA,QAAA9B,OAAAC,OAAAC,SACA,KAAAc,WAAA,OAAAhB,OAAAC,OAAAC,WAGA6B,MAAA,CACAV,aAAA,CACAW,QAAA,WACA,KAAAC,mBAEAC,MAAA,IAGAC,QAAA,eAAAC,EAAA,KACA,KAAAH,kBACAI,OAAAjD,GAAA,cAAA6C,iBAEA,IAAAK,EAAAC,gBAAA,SAAAC,GACAA,KAAAC,aACAD,EAAAC,WAAA,GAAAL,EAAA7B,aAAA6B,EAAA7C,cACAiD,EAAAC,WAAA,GAAAL,EAAAjD,kBAAAiD,EAAA7C,iBACA,GACA,KAAAqC,MAAAc,WAAAC,iBAAA,aAAAL,GACA,KAAAM,MAAA,iCACAR,EAAAR,MAAAc,WAAAG,oBAAA,aAAAP,OAGAQ,UAAA,WACAT,OAAAU,IAAA,cAAAd,kBAEAe,QAAA,CACAf,gBAAA,WACA,QAAAL,MAAAqB,gBAAA,KAAArB,MAAAc,WAAA,CACA,IAAAQ,EAAA,KAAAtB,MAAAqB,eAAAE,wBAAAC,OACA,KAAAxB,MAAAc,WAAAW,MAAAC,MAAAJ,EAAA,SC9FyW,I,wBCQrWK,EAAY,eACd,EACA7E,EACA8B,GACA,EACA,KACA,WACA,MAIa,aAAA+C,E","file":"js/componentViewerImageScroll.bf3db78f356e165bc30b.bundle.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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/lib/loader.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!./ViewerImageScroll.vue?vue&type=style&index=0&id=96eeccce&prod&lang=scss&scoped=true\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"scroll\"},[_c('button',{attrs:{\"title\":\"Previous Image\",\"disabled\":!_vm.hasPreviousImage},on:{\"click\":function($event){return _vm.$emit('scroll', _vm.activeIndex--)}}},[_c('svg-icon',{staticStyle:{\"font-size\":\"2em\"},attrs:{\"icon\":\"caret-up\"}})],1),_c('div',{ref:\"inputContainer\",staticClass:\"input-container\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.activeIndex),expression:\"activeIndex\",modifiers:{\"number\":true}}],ref:\"rangeInput\",staticClass:\"allow-keybinds\",attrs:{\"type\":\"range\",\"min\":\"0\",\"max\":_vm.series.images.length - 1},domProps:{\"value\":(_vm.activeIndex)},on:{\"__r\":function($event){_vm.activeIndex=_vm._n($event.target.value)},\"blur\":function($event){return _vm.$forceUpdate()}}})]),_c('button',{attrs:{\"title\":\"Next Image\",\"disabled\":!_vm.hasNextImage},on:{\"click\":function($event){return _vm.$emit('scroll', _vm.activeIndex++)}}},[_c('svg-icon',{staticStyle:{\"font-size\":\"2em\"},attrs:{\"icon\":\"caret-down\"}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"scroll\">\n\t\t<button title=\"Previous Image\" :disabled=\"!hasPreviousImage\" @click=\"$emit('scroll', activeIndex--)\">\n\t\t\t<svg-icon icon=\"caret-up\" style=\"font-size: 2em;\" />\n\t\t</button>\n\t\t<div ref=\"inputContainer\" class=\"input-container\">\n\t\t\t<input\n\t\t\t\tref=\"rangeInput\"\n\t\t\t\tv-model.number=\"activeIndex\"\n\t\t\t\tclass=\"allow-keybinds\"\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin=\"0\"\n\t\t\t\t:max=\"series.images.length - 1\"\n\t\t\t/>\n\t\t</div>\n\t\t<button title=\"Next Image\" :disabled=\"!hasNextImage\" @click=\"$emit('scroll', activeIndex++)\">\n\t\t\t<svg-icon icon=\"caret-down\" style=\"font-size: 2em;\" />\n\t\t</button>\n\t</div>\n</template>\n\n<script>\nimport { mapState } from 'vuex'\nimport { eventBus } from '@services/eventBus'\nimport { import as csToolsImport } from 'cornerstone-tools/dist/cornerstoneTools.js'\nimport throttle from '@/utils/throttle'\nconst scrollToIndex = csToolsImport('util/scrollToIndex')\n\nexport default {\n\tname: 'ViewerImageScroll',\n\tprops: {\n\t\tseries: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\t\timage: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\t\tstackIndex: {\n\t\t\ttype: Number,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tcomputed: {\n\t\t...mapState({\n\t\t\tcanvasLayout: state => state.viewer.canvasLayout,\n\t\t}),\n\t\tactiveIndex: {\n\t\t\tget() {\n\t\t\t\treturn this.stackIndex\n\t\t\t},\n\t\t\tset(index) {\n\t\t\t\tscrollToIndex(this.$parent.$refs.canvas, index)\n\t\t\t},\n\t\t},\n\t\thasPreviousImage() {\n\t\t\treturn this.stackIndex > 0\n\t\t},\n\t\thasNextImage() {\n\t\t\tif (!this.series || !this.series.images) return false\n\t\t\tif (this.frameIndex + 1 >= this.series.images.length) return false\n\t\t\treturn this.stackIndex + 1 < this.series.images.length\n\t\t},\n\t},\n\twatch: {\n\t\tcanvasLayout: {\n\t\t\thandler() {\n\t\t\t\tthis.setScrollLength()\n\t\t\t},\n\t\t\tdeep: true,\n\t\t},\n\t},\n\tmounted() {\n\t\tthis.setScrollLength()\n\t\teventBus.on('resize', this.setScrollLength)\n\t\t// allow mousewheel scrolling when pointer is over range input\n\t\tconst onMouseWheel = throttle(e => {\n\t\t\tif (!e || !e.wheelDelta) return\n\t\t\tif (e.wheelDelta < 0 && this.hasNextImage) this.activeIndex++\n\t\t\telse if (e.wheelDelta > 0 && this.hasPreviousImage) this.activeIndex--\n\t\t}, 5)\n\t\tthis.$refs.rangeInput.addEventListener('mousewheel', onMouseWheel)\n\t\tthis.$once('hook:beforeDestroy', () => {\n\t\t\tthis.$refs.rangeInput.removeEventListener('mousewheel', onMouseWheel)\n\t\t})\n\t},\n\tdestroyed() {\n\t\teventBus.off('resize', this.setScrollLength)\n\t},\n\tmethods: {\n\t\tsetScrollLength() {\n\t\t\tif (!this.$refs.inputContainer || !this.$refs.rangeInput) return\n\t\t\tconst scrollLength = this.$refs.inputContainer.getBoundingClientRect().height\n\t\t\tthis.$refs.rangeInput.style.width = scrollLength + 'px'\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.scroll {\n\tdisplay: flex;\n\tpadding-top: 12px;\n\tpointer-events: all;\n\tflex-direction: column;\n\twidth: 40px;\n\tmin-width: 40px;\n\theight: 100%;\n\t.input-container {\n\t\tflex-grow: 1;\n\t}\n\tbutton {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tcolor: #fff;\n\t\topacity: 0.5;\n\t\t// prettier-ignore\n\t\ttext-shadow:\n\t\t\t-1px -1px 0 #000,\n\t\t\t0 -2px 0 #000,\n\t\t\t1px -1px 0 #000,\n\t\t\t-1px 1px 0 #000,\n\t\t\t0 1px 0 #000,\n\t\t\t1px 1px 0 #000;\n\t\t&:hover:not(:disabled),\n\t\t&:active:not(:disabled) {\n\t\t\topacity: 1;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t&:disabled {\n\t\t\topacity: 0.3;\n\t\t}\n\t}\n\tinput {\n\t\tbackground: transparent;\n\t\tappearance: none;\n\t\theight: 40px;\n\t\tmargin-left: 40px;\n\t\ttransform-origin: top left;\n\t\ttransform: rotate(90deg);\n\t\tcursor: grab;\n\t\t&:focus {\n\t\t\tborder: 0;\n\t\t\toutline: none;\n\t\t}\n\t\t&::-webkit-slider-runnable-track {\n\t\t\twidth: 0;\n\t\t}\n\t\t&::-moz-range-track {\n\t\t\twidth: 0;\n\t\t}\n\t\t&::-ms-track,\n\t\t&::-ms-fill-lower,\n\t\t&::-ms-fill-upper {\n\t\t\twidth: 0;\n\t\t\tborder: 0;\n\t\t}\n\t\t$thumbWidth: 18px;\n\t\t$thumbHeight: 40px;\n\t\t$thumbBorderRadius: 9px;\n\t\t$thumbBackground: #fff;\n\t\t$thumbBorder: 1px solid #000;\n\t\t$thumbActiveOpacity: 1;\n\t\t$thumbInactiveOpacity: 0.5;\n\t\t&::-webkit-slider-thumb {\n\t\t\tappearance: none;\n\t\t\tborder-radius: $thumbBorderRadius;\n\t\t\theight: $thumbWidth;\n\t\t\twidth: $thumbHeight;\n\t\t\tbackground: $thumbBackground;\n\t\t\topacity: $thumbInactiveOpacity;\n\t\t\tborder: $thumbBorder;\n\t\t\t&:hover,\n\t\t\t&:active {\n\t\t\t\topacity: $thumbActiveOpacity;\n\t\t\t}\n\t\t}\n\t\t&::-moz-range-thumb {\n\t\t\tborder-radius: $thumbBorderRadius;\n\t\t\theight: $thumbWidth;\n\t\t\twidth: $thumbHeight;\n\t\t\tbackground: $thumbBackground;\n\t\t\topacity: $thumbInactiveOpacity;\n\t\t\tborder: $thumbBorder;\n\t\t\t&:hover,\n\t\t\t&:active {\n\t\t\t\topacity: $thumbActiveOpacity;\n\t\t\t}\n\t\t}\n\t\t&::-ms-thumb {\n\t\t\tborder-radius: $thumbBorderRadius;\n\t\t\theight: $thumbWidth;\n\t\t\twidth: $thumbHeight;\n\t\t\tbackground: $thumbBackground;\n\t\t\topacity: $thumbInactiveOpacity;\n\t\t\tborder: $thumbBorder;\n\t\t\t&:hover,\n\t\t\t&:active {\n\t\t\t\topacity: $thumbActiveOpacity;\n\t\t\t}\n\t\t}\n\t\t&::-ms-tooltip {\n\t\t\tdisplay: none;\n\t\t}\n\t}\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!./ViewerImageScroll.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!./ViewerImageScroll.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./ViewerImageScroll.vue?vue&type=template&id=96eeccce&scoped=true\"\nimport script from \"./ViewerImageScroll.vue?vue&type=script&lang=js\"\nexport * from \"./ViewerImageScroll.vue?vue&type=script&lang=js\"\nimport style0 from \"./ViewerImageScroll.vue?vue&type=style&index=0&id=96eeccce&prod&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  \"96eeccce\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}