{"version":3,"sources":["webpack:///./src/views/coursebuilder/QuizDragAndDropPreview.vue?dce9","webpack:///./src/views/coursebuilder/jquery.canvasAreaDrawDragAndDrop.js","webpack:///./src/views/coursebuilder/QuizDragAndDropPreview.vue?a623","webpack:///src/views/coursebuilder/QuizDragAndDropPreview.vue","webpack:///./src/views/coursebuilder/QuizDragAndDropPreview.vue?04eb","webpack:///./src/views/coursebuilder/QuizDragAndDropPreview.vue","webpack:///./src/views/coursebuilder/draggable.js"],"names":["draw","$","fn","canvasAreaDraw","options","this","each","index","element","init","apply","input","points","settings","$reset","$addPointCanvas","$canvas","ctx","image","mousedown","stopdrag","moveall","resize","reset","rightclick","record","startpoint","extend","imageUrl","attr","v","val","replace","length","split","map","point","parseInt","getContext","Image","height","width","load","src","loaded","css","background","after","e","offsetX","pageX","target","offset","left","offsetY","pageY","top","x","Math","round","y","sdvpoint","i","off","preventDefault","dis","sqrt","pow","splice","insertAt","which","c","getCenter","fillRect","on","document","find","canvas","globalCompositeOperation","fillStyle","strokeStyle","lineWidth","beginPath","moveTo","strokeRect","lineTo","closePath","fill","stroke","join","ptc","push","first","last","p1","p2","f","twicearea","nptc","j","drawsquare","click","jQuery","render","_vm","_h","$createElement","_c","_self","style","staticClass","_l","questionData","item","key","scale","margin","attrs","overflow","draggableImageUrl","staticStyle","ref","canvasWidth","canvasHeight","staticRenderFns","component","root","factory","module","exports","defaults","grid","filterTarget","limit","threshold","setCursor","setPosition","smoothDrag","useGPU","onDrag","noop","onDragStart","onDragEnd","env","transform","prefixes","body","n","property","util","assign","obj","arguments","count","argument","bind","context","addEvent","ee","removeEvent","isArray","Element","prototype","attachEvent","addEventListener","detachEvent","removeEventListener","Draggable","me","start","drag","stop","isElement","TypeError","handle","handlers","touchstart","move","mousemove","mouseup","touchmove","touchend","initialize","parse","string","getStyle","currentStyle","getComputedStyle","thing","Array","isDefined","HTMLDocument","isFunction","Function","setOption","value","get","dragEvent","set","original","started","oldTransform","compStyle","_dimensions","offsetHeight","offsetLeft","offsetTop","offsetWidth","display","bottom","right","position","cursor","setLimit","getCursor","useTarget","srcElement","getAttribute","returnValue","oldZindex","zIndex","setZoom","initialCursor","_cursor","initialPosition","zoom","abs","pos","targetTouches","clientX","clientY","xy","_true","draggableSize","scrollHeight","scrollWidth","defined","offsetParent","z","destroy"],"mappings":"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","file":"js/chunk-55242cab.02880319.js","sourcesContent":["export * from \"-!../../../node_modules/@vue/cli-service/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/lib/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!./QuizDragAndDropPreview.vue?vue&type=style&index=0&lang=scss&\"","var draw;\r\n(function ($) {\r\n\r\n    $.fn.canvasAreaDraw = function (options) {\r\n\r\n        this.each(function (index, element) {\r\n            init.apply(element, [index, element, options]);\r\n        });\r\n\r\n    }\r\n\r\n    var init = function (index, input, options) {\r\n\r\n        var points, activePoint, settings;\r\n        var $reset, $addPointCanvas, $canvas, ctx, image;\r\n        var mousedown, stopdrag, move, moveall, resize, reset, rightclick, record;\r\n        var dragpoint;\r\n        var startpoint = false;\r\n\r\n        settings = $.extend({\r\n            imageUrl: $(this).attr('sceneUrl')\r\n        }, options);\r\n\r\n        var v = $(input).val().replace(/[^0-9\\,]/ig, '');\r\n        if (v.length) {\r\n            points = v.split(',').map(function (point) {\r\n                return parseInt(point, 10);\r\n            });\r\n        } else {\r\n            points = [];\r\n        }\r\n\r\n        $reset = $('<button id=\"resetCanvas\" type=\"button\" class=\"btn\" style=\"display: none\">Reset</button>');\r\n        $addPointCanvas = $('<button id=\"addPointCanvas\" type=\"button\" class=\"btn\" style=\"display: none\">Add Point Canvas</button>');\r\n        $canvas = $('<canvas>');\r\n        ctx = $canvas[0].getContext('2d');\r\n\r\n        image = new Image();\r\n        resize = function () {\r\n            $canvas.attr('height', image.height).attr('width', image.width);\r\n            draw();\r\n        };\r\n        $(image).load(resize);\r\n        image.src = settings.imageUrl;\r\n        if (image.loaded) {\r\n            resize();\r\n        }\r\n        $canvas.css({ background: 'url(' + image.src + ')' });\r\n\r\n        $(input).after($canvas, '<br>', $reset);\r\n        $(input).after($canvas, '<br>', $addPointCanvas);\r\n\r\n        reset = function () {\r\n            points = [];\r\n            draw();\r\n        };\r\n\r\n        moveall = function (e) {\r\n            if (!e.offsetX) {\r\n                e.offsetX = (e.pageX - $(e.target).offset().left);\r\n                e.offsetY = (e.pageY - $(e.target).offset().top);\r\n            }\r\n            if (!startpoint) {\r\n                startpoint = { x: Math.round(e.offsetX), y: Math.round(e.offsetY) };\r\n            }\r\n            var sdvpoint = { x: Math.round(e.offsetX), y: Math.round(e.offsetY) };\r\n            for (var i = 0; i < points.length; i++) {\r\n                points[i] = (sdvpoint.x - startpoint.x) + points[i];\r\n                points[++i] = (sdvpoint.y - startpoint.y) + points[i];\r\n            }\r\n            startpoint = sdvpoint;\r\n            draw();\r\n        };\r\n\r\n        stopdrag = function () {\r\n            $(this).off('mousemove');\r\n            record();\r\n            activePoint = null;\r\n        };\r\n\r\n        rightclick = function (e) {\r\n            e.preventDefault();\r\n            if (!e.offsetX) {\r\n                e.offsetX = (e.pageX - $(e.target).offset().left);\r\n                e.offsetY = (e.pageY - $(e.target).offset().top);\r\n            }\r\n            var x = e.offsetX, y = e.offsetY;\r\n            for (var i = 0; i < points.length; i += 2) {\r\n                var dis = Math.sqrt(Math.pow(x - points[i], 2) + Math.pow(y - points[i + 1], 2));\r\n                if (dis < 6) {\r\n                    points.splice(i, 2);\r\n                    draw();\r\n                    record();\r\n                    return false;\r\n                }\r\n            }\r\n            return false;\r\n        };\r\n\r\n        mousedown = function (e) {\r\n            var x, y, dis, lineDis, insertAt = points.length;\r\n\r\n            if (e.which === 3) {\r\n                return false;\r\n            }\r\n\r\n            e.preventDefault();\r\n            if (!e.offsetX) {\r\n                e.offsetX = (e.pageX - $(e.target).offset().left);\r\n                e.offsetY = (e.pageY - $(e.target).offset().top);\r\n            }\r\n            x = e.offsetX;\r\n            y = e.offsetY;\r\n\r\n            if (points.length >= 6) {\r\n                var c = getCenter();\r\n                ctx.fillRect(c.x - 4, c.y - 4, 8, 8);\r\n                dis = Math.sqrt(Math.pow(x - c.x, 2) + Math.pow(y - c.y, 2));\r\n                if (dis < 6) {\r\n                    startpoint = false;\r\n                    $(this).on('mousemove', moveall);\r\n                    return false;\r\n                }\r\n            }\r\n\r\n            activePoint = insertAt;\r\n\r\n            draw();\r\n            record();\r\n\r\n            return false;\r\n        };\r\n        $(document).find($canvas).on('mousedown', mousedown);\r\n        \r\n\r\n        draw = function () {\r\n            ctx.canvas.width = ctx.canvas.width;\r\n\r\n            record();\r\n            if (points.length < 2) {\r\n                return;\r\n            }\r\n            ctx.globalCompositeOperation = 'destination-over';\r\n            ctx.fillStyle = 'rgb(255,255,255)';\r\n            ctx.strokeStyle = 'rgb(255,20,20)';\r\n            ctx.lineWidth = 1;\r\n            if (points.length >= 6) {\r\n                var c = getCenter();\r\n                ctx.fillRect(c.x - 4, c.y - 4, 8, 8);\r\n            }\r\n            ctx.beginPath();\r\n            ctx.moveTo(points[0], points[1]);\r\n            for (var i = 0; i < points.length; i += 2) {\r\n                ctx.fillRect(points[i] - 2, points[i + 1] - 2, 4, 4);\r\n                ctx.strokeRect(points[i] - 2, points[i + 1] - 2, 4, 4);\r\n                if (points.length > 2 && i > 1) {\r\n                    ctx.lineTo(points[i], points[i + 1]);\r\n                }\r\n            }\r\n            ctx.closePath();\r\n            ctx.fillStyle = 'rgba(255,0,0,0.3)';\r\n            ctx.fill();\r\n            ctx.stroke();\r\n\r\n        };\r\n\r\n        record = function () {\r\n            $(input).val(points.join(','));\r\n        };\r\n\r\n        var getCenter = function () {\r\n            var ptc = [];\r\n            for (i = 0; i < points.length; i++) {\r\n                ptc.push({ x: points[i], y: points[++i] });\r\n            }\r\n            var first = ptc[0], last = ptc[ptc.length - 1];\r\n            if (first.x != last.x || first.y != last.y) ptc.push(first);\r\n            var twicearea = 0,\r\n                x = 0, y = 0,\r\n                nptc = ptc.length,\r\n                p1, p2, f;\r\n            for (var i = 0, j = nptc - 1; i < nptc; j = i++) {\r\n                p1 = ptc[i];\r\n                p2 = ptc[j];\r\n                f = p1.x * p2.y - p2.x * p1.y;\r\n                twicearea += f;\r\n                x += (p1.x + p2.x) * f;\r\n                y += (p1.y + p2.y) * f;\r\n            }\r\n            f = twicearea * 3;\r\n            return { x: x / f, y: y / f };\r\n        };\r\n\r\n        $(input).on('change', function () {\r\n            var v = $(input).val().replace(/[^0-9\\,]/ig, '');\r\n            if (v.length) {\r\n                points = v.split(',').map(function (point) {\r\n                    return parseInt(point, 10);\r\n                });\r\n            } else {\r\n                points = [];\r\n            }\r\n            draw();\r\n        });\r\n\r\n        points = [];\r\n\r\n        var drawsquare = function () {\r\n            points.push(100);\r\n            points.push(100);\r\n            points.push(100);\r\n            points.push(200);\r\n            points.push(200);\r\n            points.push(200);\r\n            points.push(200);\r\n            points.push(100);\r\n    \r\n            draw();\r\n            record();\r\n        }\r\n\r\n        $(document).find($reset).click(reset);\r\n        $(document).find($addPointCanvas).click(drawsquare);\r\n        $(document).find($canvas).on('contextmenu', rightclick);\r\n        $(document).find($canvas).on('mouseup', stopdrag);\r\n    };\r\n\r\n    var dotLineLength = function (x, y, x0, y0, x1, y1, o) {\r\n        function lineLength(x, y, x0, y0) {\r\n            return Math.sqrt((x -= x0) * x + (y -= y0) * y);\r\n        }\r\n\r\n        if (o && !(o = function (x, y, x0, y0, x1, y1) {\r\n            if (!(x1 - x0)) return { x: x0, y: y };\r\n            else if (!(y1 - y0)) return { x: x, y: y0 };\r\n            var left, tg = -1 / ((y1 - y0) / (x1 - x0));\r\n            return {\r\n                x: left = (x1 * (x * tg - y + y0) + x0 * (x * -tg + y - y1)) / (tg * (x1 - x0) + y0 - y1),\r\n                y: tg * left - tg * x + y\r\n            };\r\n        }(x, y, x0, y0, x1, y1), o.x >= Math.min(x0, x1) && o.x <= Math.max(x0, x1) && o.y >= Math.min(y0, y1) && o.y <= Math.max(y0, y1))) {\r\n            var l1 = lineLength(x, y, x0, y0), l2 = lineLength(x, y, x1, y1);\r\n            return l1 > l2 ? l2 : l1;\r\n        }\r\n        else {\r\n            var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;\r\n            return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b);\r\n        }\r\n    };\r\n})(jQuery);","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{style:(_vm.imageDivStyling)},[_c('div',{staticClass:\"overflow-draggable-div\"},_vm._l((_vm.questionData.mappedLocations),function(item,index){return _c('div',{key:index,style:({height: (100 * _vm.scale) + 10 + 'px', width: (100 * _vm.scale) + 10 + 'px', margin: 0 + 'px !important'})},[_c('div',{attrs:{\"id\":'draggableimagediv_' + index}},[_c('img',{style:({ width: 100 * _vm.scale + 'px', height: 100 * _vm.scale + 'px', overflow: 'visible'}),attrs:{\"src\":item.draggableImageUrl}})])])}),0)]),_c('vs-divider',{staticStyle:{\"padding-top\":\"10px\"}}),_c('div',{staticClass:\"canvas-div-drag-and-drop\"},[_c('canvas',{ref:\"studentCanvasRef\",staticClass:\"student-canvas-background\",style:(_vm.canvasBackgroundStyle),attrs:{\"id\":\"studentCanvas\",\"width\":_vm.canvasWidth,\"height\":_vm.canvasHeight}})])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div :style=\"imageDivStyling\">\r\n\r\n      <div  class=\"overflow-draggable-div\">\r\n        <div :style=\"{height: (100 * scale) + 10 + 'px', width: (100 * scale) + 10 + 'px', margin: 0 + 'px !important'}\" v-for=\"(item, index) in questionData.mappedLocations\" :key=\"index\">\r\n          <div :id=\"'draggableimagediv_' + index\">\r\n            <img\r\n              :style=\"{ width: 100 * scale + 'px', height: 100 * scale + 'px', overflow: 'visible'} \" \r\n              :src=\"item.draggableImageUrl\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n      <vs-divider style=\"padding-top: 10px\"></vs-divider>\r\n\r\n    <!-- <canvas id=\"studentCanvas\" :style=\"previewCanvasStyle\"></canvas> -->\r\n\r\n    <div class=\"canvas-div-drag-and-drop\">\r\n      <canvas \r\n        id=\"studentCanvas\" \r\n        ref=\"studentCanvasRef\"\r\n        :width=\"canvasWidth\" \r\n        :height=\"canvasHeight\" \r\n        :style=\"canvasBackgroundStyle\"\r\n        class=\"student-canvas-background\"\r\n        >\r\n      </canvas>\r\n    </div>\r\n    \r\n\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import index from 'vue-youtube-embed';\r\n  import Draggable from './draggable';\r\n  import jQuery from './jquery';\r\n  import canvas from './jquery.canvasAreaDrawDragAndDrop';\r\n\r\n  export default {\r\n    components: {\r\n\r\n      },\r\n    data() {\r\n      return {\r\n        mappedLocations: {},\r\n        canvasHeight: '',\r\n        canvasWidth: '',\r\n        scale: 0,\r\n        windowWidth: window.innerWidth,\r\n        fixWidth: false,\r\n        canvasStyle: '',\r\n        canvasBackgroundStyle: '',\r\n        imageDivStyling: \"img { height: (100 * scale) + 'px', width: (100 * scale) + 'px' , overflow: 'visible'}\"\r\n      }\r\n    },\r\n    computed: {\r\n      \r\n    },\r\n    watch: {\r\n      windowHeight(newHeight, oldHeight) {\r\n        this.setScale();\r\n      }\r\n    },\r\n    methods: {\r\n      showBlocksOnCanvas(){\r\n        var self = this;     \r\n        var canvas = document.getElementById(\"studentCanvas\");\r\n\r\n        if (canvas.getContext) {\r\n          var ctx = canvas.getContext(\"2d\");\r\n\r\n          self.setScale();\r\n\r\n          self.questionData.mappedLocations.forEach(element => {\r\n            ctx.strokeStyle = element.color;\r\n            ctx.strokeRect(parseInt(element.xCoordinate * self.scale), parseInt(element.yCoordinate * self.scale), parseInt(100 * self.scale) , parseInt(100 * self.scale));\r\n            ctx.stroke();\r\n          });\r\n\r\n          if(self.isMobile()){\r\n            self.canvasBackgroundStyle = { background: 'url(' + self.questionData.imageUrl + ')', width: '200%' };\r\n          } else {\r\n            self.canvasBackgroundStyle = { background: 'url(' + self.questionData.imageUrl + ')' };\r\n          }\r\n        }\r\n      },\r\n      makeImagesDraggable(){\r\n        var self = this;\r\n\r\n        window.d = [];\r\n\r\n        self.questionData.mappedLocations.forEach(function arrayToImage(element, index){\r\n          var localElement = document.getElementById('draggableimagediv_' + index);\r\n        \r\n          var options = {\r\n            onDragEnd: self.onDragEndFunction(self),\r\n            onDragStart:  self.onDragStartFunction(self),\r\n            setCursor: true\r\n          };\r\n\r\n          window.d[index] = new Draggable (localElement, options);\r\n\r\n          document.getElementById('draggableimagediv_' + index).style[\"position\"] = \"relative\";\r\n          document.getElementById('draggableimagediv_' + index).style[\"inset\"] = \"unset\";\r\n\r\n          document.getElementById('draggableimagediv_' + index).style[\"top\"] = \"0px\";\r\n          document.getElementById('draggableimagediv_' + index).style[\"bottom\"] = \"unset\";\r\n          document.getElementById('draggableimagediv_' + index).style[\"left\"] = \"unset\";\r\n          document.getElementById('draggableimagediv_' + index).style[\"right\"] = \"unset\";\r\n        });\r\n      },\r\n      onDragStartFunction (myself) {\r\n        return function (element, x, y) {\r\n          element.style[\"position\"] = \"absolute\";\r\n        };\r\n      },\r\n      onDragEndFunction (myself) {\r\n        return function (element, x, y) {\r\n\r\n          const between = (x, min, max) => {\r\n            return x >= min && x <= max;\r\n          }\r\n\r\n          var imageNumber = element.id.substring(18, element.id.length);\r\n\r\n          myself.questionData.mappedLocations[imageNumber].xCoordinates = x - myself.$refs.studentCanvasRef.offsetLeft;\r\n          myself.questionData.mappedLocations[imageNumber].yCoordinates = y - myself.$refs.studentCanvasRef.offsetTop;\r\n\r\n          var xCo = myself.questionData.mappedLocations[imageNumber].xCoordinates;\r\n          var yCo = myself.questionData.mappedLocations[imageNumber].yCoordinates;\r\n\r\n          var itFits = false;\r\n\r\n          myself.questionData.mappedLocations.forEach(function arrayToImage(elementLocal, index){\r\n            myself.setScale();\r\n\r\n            var scale = myself.scale;\r\n\r\n            if(between(xCo, (elementLocal.xCoordinate * scale)  - 50, (elementLocal.xCoordinate * scale) + 50) \r\n              && between(yCo, (elementLocal.yCoordinate * scale) - 50, (elementLocal.yCoordinate * scale) + 50)){\r\n              window.d[imageNumber].set((elementLocal.xCoordinate * scale) + myself.$refs.studentCanvasRef.offsetLeft , (elementLocal.yCoordinate * scale) + myself.$refs.studentCanvasRef.offsetTop);\r\n\r\n              myself.questionData.mappedLocations[imageNumber].xCoordinates = x - myself.$refs.studentCanvasRef.offsetLeft;\r\n              myself.questionData.mappedLocations[imageNumber].yCoordinates = y - myself.$refs.studentCanvasRef.offsetTop;\r\n              itFits = true;\r\n              element.style[\"position\"] = \"absolute\";\r\n            }\r\n\r\n            if(!itFits){\r\n              element.style[\"position\"] = \"relative\";\r\n              element.style[\"inset\"] = \"unset\";\r\n              element.style[\"top\"] = \"0px\";\r\n              element.style[\"bottom\"] = \"unset\";\r\n              element.style[\"left\"] = \"unset\";\r\n              element.style[\"right\"] = \"unset\";\r\n            }\r\n          });\r\n        }\r\n      },\r\n      setScale(){\r\n        var self = this;\r\n\r\n        if(self.isMobile()){\r\n          var origionalImgWidth = self.questionData.imageUrlWidth;\r\n\r\n          var currentWidth = $('canvas')[0].clientWidth / 2;\r\n\r\n          self.scale = currentWidth / origionalImgWidth;\r\n        }\r\n      },\r\n      onResize() {\r\n        this.setScale();\r\n      }\r\n    },\r\n    created(){\r\n      this.questionData = JSON.parse(localStorage.getItem(\"questionData\"));\r\n\r\n      window.addEventListener('resize', this.onResize);\r\n    },\r\n    beforeDestroy() { \r\n      window.removeEventListener('resize', this.onResize); \r\n    },\r\n    mounted(){\r\n      var self = this;\r\n\r\n      if(!self.isMobile()){\r\n        self.canvasHeight = self.questionData.imageUrlWidth + 'px';\r\n        self.canvasWidth = self.questionData.imageUrlWidth + 'px';\r\n        self.scale = 1;\r\n        setTimeout(() => {\r\n          self.makeImagesDraggable();\r\n          setTimeout(() => {\r\n            self.showBlocksOnCanvas();\r\n          }, 70);\r\n        }, 69);\r\n      } else {\r\n        setTimeout(() => {\r\n          self.setScale();\r\n          self.makeImagesDraggable();\r\n          setTimeout(() => {\r\n            self.showBlocksOnCanvas();\r\n          }, 70);\r\n          setTimeout(() => {\r\n            self.setScale();\r\n          }, 100);\r\n        }, 69);\r\n      }\r\n\r\n      window.addEventListener('resize', this.onResize);\r\n    }\r\n  }\r\n\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\r\n.h-scroll{\r\n  margin: 4px, 4px;\r\n  padding: 4px;\r\n  background-color: #08c708;\r\n  width: 100%;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  white-space: nowrap;\r\n}\r\n\r\n.student-canvas-background{\r\n  background-size: contain !important;\r\n  background-repeat: no-repeat !important;\r\n}\r\n\r\n.overflow-draggable-div{\r\n  display: flex;\r\n  overflow-x: auto;\r\n  width: 100%;\r\n}\r\n\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./QuizDragAndDropPreview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./QuizDragAndDropPreview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./QuizDragAndDropPreview.vue?vue&type=template&id=9174ca82&\"\nimport script from \"./QuizDragAndDropPreview.vue?vue&type=script&lang=js&\"\nexport * from \"./QuizDragAndDropPreview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./QuizDragAndDropPreview.vue?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports","(function (root, factory) {\r\n  if (typeof exports === 'object') {\r\n    module.exports = factory();\r\n  } else if (typeof define === 'function' && define.amd) {\r\n    define([], factory);\r\n  } else {\r\n    root.Draggable = factory();\r\n  }\r\n}(this, function () {\r\n\r\n'use strict';\r\n\r\nvar defaults = {\r\n\r\n  // settings\r\n  grid: 0,                // grid cell size for snapping to on drag\r\n  filterTarget: null,     // disallow drag when target passes this test\r\n  limit: {                // limit the drag bounds\r\n    x: null,              // [minimum position, maximum position] || position\r\n    y: null               // [minimum position, maximum position] || position\r\n  },\r\n  threshold: 0,           // threshold to move before drag begins (in px)\r\n\r\n  // flags\r\n  setCursor: false,       // change cursor to reflect draggable?\r\n  setPosition: true,      // change draggable position to absolute?\r\n  smoothDrag: true,       // snap to grid when dropped, but not during\r\n  useGPU: true,           // move graphics calculation/composition to the GPU\r\n\r\n  // event hooks\r\n  onDrag: noop,           // function(element, X, Y, event)\r\n  onDragStart: noop,      // function(element, X, Y, event)\r\n  onDragEnd: noop         // function(element, X, Y, event)\r\n\r\n};\r\n\r\nvar env = {\r\n\r\n  // CSS vendor-prefixed transform property\r\n  transform: (function(){\r\n\r\n    var prefixes = ' -o- -ms- -moz- -webkit-'.split(' ');\r\n    var style = document.body.style;\r\n\r\n    for (var n = prefixes.length; n--;) {\r\n      var property = prefixes[n] + 'transform';\r\n      if (property in style) {\r\n        return property;\r\n      }\r\n    }\r\n\r\n  })()\r\n\r\n};\r\n\r\nvar util = {\r\n\r\n  assign: function () {\r\n\r\n    var obj = arguments[0];\r\n    var count = arguments.length;\r\n\r\n    for ( var n = 1; n < count; n++ ) {\r\n      var argument = arguments[n];\r\n      for ( var key in argument ) {\r\n        obj[key] = argument[key];\r\n      }\r\n    }\r\n\r\n    return obj;\r\n\r\n  },\r\n\r\n  bind: function (fn, context) {\r\n    return function() {\r\n      fn.apply(context, arguments);\r\n    }\r\n  },\r\n\r\n  on: function (element, e, fn) {\r\n    if (e && fn) {\r\n      util.addEvent (element, e, fn);\r\n    } else if (e) {\r\n      for (var ee in e) {\r\n        util.addEvent (element, ee, e[ee]);\r\n      }\r\n    }\r\n  },\r\n\r\n  off: function (element, e, fn) {\r\n    if (e && fn) {\r\n      util.removeEvent (element, e, fn);\r\n    } else if (e) {\r\n      for (var ee in e) {\r\n        util.removeEvent (element, ee, e[ee]);\r\n      }\r\n    }\r\n  },\r\n\r\n  // Example:\r\n  //\r\n  //     util.limit(x, limit.x)\r\n  limit: function (n, limit) {\r\n    // {Array} limit.x\r\n    if (isArray(limit)) {\r\n      limit = [+limit[0], +limit[1]];\r\n      if (n < limit[0]) n = limit[0];\r\n      else if (n > limit[1]) n = limit[1];\r\n    // {Number} limit.x\r\n    } else {\r\n      n = +limit;\r\n    }\r\n\r\n    return n;\r\n  },\r\n\r\n  addEvent: ('attachEvent' in Element.prototype)\r\n    ? function (element, e, fn) { element.attachEvent('on'+e, fn) }\r\n    : function (element, e, fn) { element.addEventListener(e, fn, false) },\r\n\r\n  removeEvent: ('attachEvent' in Element.prototype)\r\n    ? function (element, e, fn) { element.detachEvent('on'+e, fn) }\r\n    : function (element, e, fn) { element.removeEventListener(e, fn) }\r\n\r\n};\r\n\r\n/*\r\n  usage:\r\n\r\n  new Draggable (element, options)\r\n    - or -\r\n  new Draggable (element)\r\n*/\r\n\r\nfunction Draggable (element, options) {\r\n\r\n  var me = this,\r\n    start = util.bind(me.start, me),\r\n    drag = util.bind(me.drag, me),\r\n    stop = util.bind(me.stop, me);\r\n\r\n  // sanity check\r\n  if (!isElement(element)) {\r\n    throw new TypeError('Draggable expects argument 0 to be an Element');\r\n  }\r\n\r\n  options = util.assign({}, defaults, options);\r\n\r\n  // set instance properties\r\n  util.assign(me, {\r\n\r\n    // DOM element\r\n    element: element,\r\n    handle: (options.handle && isElement(options.handle))\r\n            ? options.handle\r\n            : element,\r\n\r\n    // DOM event handlers\r\n    handlers: {\r\n      start: {\r\n        mousedown: start,\r\n        touchstart: start\r\n      },\r\n      move: {\r\n        mousemove: drag,\r\n        mouseup: stop,\r\n        touchmove: drag,\r\n        touchend: stop\r\n      }\r\n    },\r\n\r\n    // options\r\n    options: options\r\n\r\n  });\r\n\r\n  // initialize\r\n  me.initialize();\r\n\r\n}\r\n\r\nutil.assign (Draggable.prototype, {\r\n\r\n  // public\r\n\r\n  setOption: function (property, value) {\r\n\r\n    var me = this;\r\n\r\n    me.options[property] = value;\r\n    me.initialize();\r\n\r\n    return me;\r\n\r\n  },\r\n\r\n  get: function() {\r\n\r\n    var dragEvent = this.dragEvent;\r\n\r\n    return {\r\n      x: dragEvent.x,\r\n      y: dragEvent.y\r\n    };\r\n\r\n  },\r\n\r\n  set: function (x, y) {\r\n\r\n    var me = this,\r\n      dragEvent = me.dragEvent;\r\n\r\n    dragEvent.original = {\r\n      x: dragEvent.x,\r\n      y: dragEvent.y\r\n    };\r\n\r\n    me.move(x, y);\r\n\r\n    return me;\r\n\r\n  },\r\n\r\n  // internal\r\n\r\n  dragEvent: {\r\n    started: false,\r\n    x: 0,\r\n    y: 0\r\n  },\r\n\r\n  initialize: function() {\r\n\r\n    var me = this,\r\n      element = me.element,\r\n      handle = me.handle,\r\n      style = element.style,\r\n      compStyle = getStyle(element),\r\n      options = me.options,\r\n      transform = env.transform,\r\n      oldTransform;\r\n\r\n    // cache element dimensions (for performance)\r\n\r\n    var _dimensions = me._dimensions = {\r\n      height: element.offsetHeight,\r\n      left: element.offsetLeft,\r\n      top: element.offsetTop,\r\n      width: element.offsetWidth\r\n    };\r\n\r\n    // shift compositing over to the GPU if the browser supports it (for performance)\r\n\r\n    if (options.useGPU && transform) {\r\n\r\n      // concatenate to any existing transform\r\n      // so we don't accidentally override it\r\n      oldTransform = compStyle[transform];\r\n\r\n      if (oldTransform === 'none') {\r\n        oldTransform = '';\r\n      }\r\n\r\n      style[transform] = oldTransform + ' translate3d(0,0,0)';\r\n    }\r\n\r\n    // optional styling\r\n\r\n    if (options.setPosition) {\r\n      style.display = 'block';\r\n      style.left = _dimensions.left + 'px';\r\n      style.top = _dimensions.top + 'px';\r\n      style.width = _dimensions.width + 'px';\r\n      style.height = _dimensions.height + 'px';\r\n      style.bottom = style.right = 'auto';\r\n      style.margin = 0;\r\n      style.position = 'absolute';\r\n    }\r\n\r\n    if (options.setCursor) {\r\n      style.cursor = 'move';\r\n    }\r\n\r\n    // set limit\r\n    me.setLimit(options.limit);\r\n\r\n    // set position in model\r\n    util.assign(me.dragEvent, {\r\n      x: _dimensions.left,\r\n      y: _dimensions.top\r\n    });\r\n\r\n    // attach mousedown event\r\n    util.on(me.handle, me.handlers.start);\r\n\r\n  },\r\n\r\n  start: function (e) {\r\n\r\n    var me = this;\r\n    var cursor = me.getCursor(e);\r\n    var element = me.element;\r\n\r\n    // filter the target?\r\n    if (!me.useTarget(e.target || e.srcElement)) {\r\n      return;\r\n    }\r\n\r\n    // prevent browsers from visually dragging the element's outline\r\n    if (e.preventDefault && !e.target.getAttribute('contenteditable')) {\r\n      e.preventDefault();\r\n    } else if (!e.target.getAttribute('contenteditable')) {\r\n      e.returnValue = false; // IE10\r\n    }\r\n\r\n    // set a high z-index, just in case\r\n    me.dragEvent.oldZindex = element.style.zIndex;\r\n    element.style.zIndex = 10000;\r\n\r\n    // set initial position\r\n    me.setCursor(cursor);\r\n    me.setPosition();\r\n    me.setZoom();\r\n\r\n    // add event listeners\r\n    util.on(document, me.handlers.move);\r\n\r\n  },\r\n\r\n  drag: function (e) {\r\n\r\n    var me = this,\r\n      dragEvent = me.dragEvent,\r\n      element = me.element,\r\n      initialCursor = me._cursor,\r\n      initialPosition = me._dimensions,\r\n      options = me.options,\r\n      zoom = initialPosition.zoom,\r\n      cursor = me.getCursor(e),\r\n      threshold = options.threshold,\r\n      x = (cursor.x - initialCursor.x)/zoom + initialPosition.left,\r\n      y = (cursor.y - initialCursor.y)/zoom + initialPosition.top;\r\n\r\n    // check threshold\r\n    if (!dragEvent.started && threshold &&\r\n      (Math.abs(initialCursor.x - cursor.x) < threshold) &&\r\n      (Math.abs(initialCursor.y - cursor.y) < threshold)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    // save original position?\r\n    if (!dragEvent.original) {\r\n      dragEvent.original = { x: x, y: y };\r\n    }\r\n\r\n    // trigger start event?\r\n    if (!dragEvent.started) {\r\n      options.onDragStart(element, x, y, e);\r\n      dragEvent.started = true;\r\n    }\r\n\r\n    // move the element\r\n    if (me.move(x, y)) {\r\n\r\n      // trigger drag event\r\n      options.onDrag(element, dragEvent.x, dragEvent.y, e);\r\n    }\r\n\r\n  },\r\n\r\n  move: function (x, y) {\r\n\r\n    var me = this,\r\n      dragEvent = me.dragEvent,\r\n      options = me.options,\r\n      grid = options.grid,\r\n      style = me.element.style,\r\n      pos = me.limit(x, y, dragEvent.original.x, dragEvent.original.y);\r\n\r\n    // snap to grid?\r\n    if (!options.smoothDrag && grid) {\r\n      pos = me.round (pos, grid);\r\n    }\r\n\r\n    // move it\r\n    if (pos.x !== dragEvent.x || pos.y !== dragEvent.y) {\r\n\r\n      dragEvent.x = pos.x;\r\n      dragEvent.y = pos.y;\r\n      style.left = pos.x + 'px';\r\n      style.top = pos.y + 'px';\r\n\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n\r\n  },\r\n\r\n  stop: function (e) {\r\n\r\n    var me = this,\r\n      dragEvent = me.dragEvent,\r\n      element = me.element,\r\n      options = me.options,\r\n      grid = options.grid,\r\n      pos;\r\n\r\n    // remove event listeners\r\n    util.off(document, me.handlers.move);\r\n\r\n    // resent element's z-index\r\n    element.style.zIndex = dragEvent.oldZindex;\r\n\r\n    // snap to grid?\r\n    if (options.smoothDrag && grid) {\r\n      pos = me.round({ x: dragEvent.x, y: dragEvent.y }, grid);\r\n      me.move(pos.x, pos.y);\r\n      util.assign(me.dragEvent, pos);\r\n    }\r\n\r\n    // trigger dragend event\r\n    if (me.dragEvent.started) {\r\n      options.onDragEnd(element, dragEvent.x, dragEvent.y, e);\r\n    }\r\n\r\n    // clear temp vars\r\n    me.reset();\r\n\r\n  },\r\n\r\n  reset: function() {\r\n\r\n    this.dragEvent.started = false;\r\n\r\n  },\r\n\r\n  round: function (pos) {\r\n\r\n    var grid = this.options.grid;\r\n\r\n    return {\r\n      x: grid * Math.round(pos.x/grid),\r\n      y: grid * Math.round(pos.y/grid)\r\n    };\r\n\r\n  },\r\n\r\n  getCursor: function (e) {\r\n\r\n    return {\r\n      x: (e.targetTouches ? e.targetTouches[0] : e).clientX,\r\n      y: (e.targetTouches ? e.targetTouches[0] : e).clientY\r\n    };\r\n\r\n  },\r\n\r\n  setCursor: function (xy) {\r\n\r\n    this._cursor = xy;\r\n\r\n  },\r\n\r\n  setLimit: function (limit) {\r\n\r\n    var me = this,\r\n      _true = function (x, y) {\r\n        return { x:x, y:y };\r\n      };\r\n\r\n    // limit is a function\r\n    if (isFunction(limit)) {\r\n\r\n      me.limit = limit;\r\n\r\n    }\r\n\r\n    // limit is an element\r\n    else if (isElement(limit)) {\r\n\r\n      var draggableSize = me._dimensions,\r\n        height = limit.scrollHeight - draggableSize.height,\r\n        width = limit.scrollWidth - draggableSize.width;\r\n\r\n      me.limit = function (x, y) {\r\n        return {\r\n          x: util.limit(x, [0, width]),\r\n          y: util.limit(y, [0, height])\r\n        }\r\n      };\r\n\r\n    }\r\n\r\n    // limit is defined\r\n    else if (limit) {\r\n\r\n      var defined = {\r\n        x: isDefined(limit.x),\r\n        y: isDefined(limit.y)\r\n      };\r\n      var _x, _y;\r\n\r\n      // {Undefined} limit.x, {Undefined} limit.y\r\n      if (!defined.x && !defined.y) {\r\n\r\n        me.limit = _true;\r\n\r\n      } else {\r\n\r\n        me.limit = function (x, y) {\r\n          return {\r\n            x: defined.x ? util.limit(x, limit.x) : x,\r\n            y: defined.y ? util.limit(y, limit.y) : y\r\n          };\r\n        };\r\n\r\n      }\r\n    }\r\n\r\n    // limit is `null` or `undefined`\r\n    else {\r\n\r\n      me.limit = _true;\r\n\r\n    }\r\n\r\n  },\r\n\r\n  setPosition: function() {\r\n\r\n    var me = this,\r\n      element = me.element,\r\n      style = element.style;\r\n\r\n    util.assign(me._dimensions, {\r\n      left: parse(style.left) || element.offsetLeft,\r\n      top: parse(style.top) || element.offsetTop\r\n    });\r\n\r\n  },\r\n\r\n  setZoom: function() {\r\n\r\n    var me = this;\r\n    var element = me.element;\r\n    var zoom = 1;\r\n\r\n    while (element = element.offsetParent) {\r\n\r\n      var z = getStyle(element).zoom;\r\n\r\n      if (z && z !== 'normal') {\r\n        zoom = z;\r\n        break;\r\n      }\r\n\r\n    }\r\n\r\n    me._dimensions.zoom = zoom;\r\n\r\n  },\r\n\r\n  useTarget: function (element) {\r\n\r\n    var filterTarget = this.options.filterTarget;\r\n\r\n    if (filterTarget instanceof Function) {\r\n      return filterTarget(element);\r\n    }\r\n\r\n    return true;\r\n\r\n  },\r\n\r\n  destroy: function () {\r\n\r\n    util.off(this.handle, this.handlers.start);\r\n    util.off(document, this.handlers.move);\r\n\r\n  }\r\n\r\n});\r\n\r\n// helpers\r\n\r\nfunction parse (string) {\r\n  return parseInt(string, 10);\r\n}\r\n\r\nfunction getStyle (element) {\r\n  return 'currentStyle' in element ? element.currentStyle : getComputedStyle(element);\r\n}\r\n\r\nfunction isArray (thing) {\r\n  return thing instanceof Array; // HTMLElement\r\n}\r\n\r\nfunction isDefined (thing) {\r\n  return thing !== void 0 && thing !== null;\r\n}\r\n\r\nfunction isElement (thing) {\r\n  return thing instanceof Element || typeof HTMLDocument !== 'undefined' && thing instanceof HTMLDocument;\r\n}\r\n\r\nfunction isFunction (thing) {\r\n  return thing instanceof Function;\r\n}\r\n\r\nfunction noop (){};\r\n\r\nreturn Draggable;\r\n\r\n}));\r\n"],"sourceRoot":""}