{"version":3,"sources":["webpack:////Users/owenli/Documents/workspace/awi-wool-fe/src/views/blocks/woolFlystrikeWheelBlock/js/woolFlystrikeWheelBlock.js"],"names":["WoolFlystrikeWheelBlock","element","_this","this","_classCallCheck","$element","$","imgOne","data","imgTwo","imgThree","imgFour","$canvas","find","canvasContext","getContext","centerX","width","centerY","height","layers","resizeCanvas","window","addEventListener","layerImages","src","radius","baseSize","angle","rotationStep","Promise","all","map","layer","loadImage","then","img","_objectSpread","loadedLayers","clearRect","forEach","save","translate","rotate","drawImage","restore","event","_this$getMousePos","getMousePos","x","y","dist","Math","sqrt","pow","clickedLayer","_toConsumableArray","reverse","animateRotation","PI","key","value","_this2","parent","parentElement","size","min","offsetWidth","targetAngleDelta","_this3","targetAngle","start","performance","now","animate","current","elapsed","changeAngle","requestAnimationFrame","rect","getBoundingClientRect","clientX","left","clientY","top","resolve","reject","Image","onload"],"mappings":"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","file":"block-38.1bd94366870a71a61540.js","sourcesContent":["const NS = 'WoolFlystrikeWheelBlock';\nconst CLS = 'woolFlystrikeWheelBlock';\n\nexport class WoolFlystrikeWheelBlock {\n    constructor(element) {\n        this.element = element;\n        this.$element = $(element);\n        this.imgOne = this.$element.data('imgone');\n        this.imgTwo = this.$element.data('imgtwo');\n        this.imgThree = this.$element.data('imgthree');\n        this.imgFour = this.$element.data('imgfour');\n        this.$canvas = this.$element.find(`#wheelCanvas`)[0];\n        this.canvasContext = this.$canvas.getContext('2d');\n        this.centerX = this.$canvas.width / 2;\n        this.centerY = this.$canvas.height / 2;\n        this.layers = [];\n\n        this.resizeCanvas();\n        window.addEventListener(\"resize\", () => this.resizeCanvas());\n        \n\n        const layerImages = [\n            { src: this.imgOne, radius: this.baseSize * 1, angle: 0, rotationStep: 60 },\n            { src: this.imgTwo, radius: this.baseSize * 0.84, angle: 0, rotationStep: 72 },\n            { src: this.imgThree, radius: this.baseSize * 0.68, angle: 0, rotationStep: 60 },\n            { src: this.imgFour, radius: this.baseSize * 0.52, angle: 0, rotationStep: 90 },\n        ];\n\n\t\tPromise.all(layerImages.map(layer => this.loadImage(layer.src).then(img => ({ ...layer, img }))))\n            .then(loadedLayers => {\n                this.layers = loadedLayers;\n                this.canvasContext.clearRect(0, 0, this.$canvas.width, this.$canvas.height);\n\t\t\t\tloadedLayers.forEach(layer => {\n\t\t\t\t\tvar { img, radius, angle } = layer;\n\t\t\t\t\t\tthis.canvasContext.save();\n\t\t\t\t\t\tthis.canvasContext.translate(this.centerX, this.centerY);\n\t\t\t\t\t\tthis.canvasContext.rotate(angle);\n\t\t\t\t\t\tthis.canvasContext.drawImage(img, -radius, -radius, radius * 2, radius * 2);\n\t\t\t\t\t\tthis.canvasContext.restore();\n\t\t\t\t});\n            });\n\n        this.$canvas.addEventListener('mousedown', (event) => {\n            var { x, y } = this.getMousePos(event);\n            var dist = Math.sqrt((x - this.centerX) ** 2 + (y - this.centerY) ** 2);\n            var clickedLayer = [...this.layers].reverse().find(layer => dist <= layer.radius);\n            if (clickedLayer) {\n                console.log(clickedLayer);\n                this.animateRotation(clickedLayer, (clickedLayer.rotationStep * Math.PI) / 180); \n            }\n        });\n    }\n\n    resizeCanvas() {\n        let parent = this.$canvas.parentElement;\n        let size = Math.min(parent.offsetWidth, 650); \n        this.$canvas.width = size;\n        this.$canvas.height = size;\n        this.baseSize = size / 2;\n        this.centerX = size / 2;\n        this.centerY = size / 2;\n        this.canvasContext.clearRect(0, 0, this.$canvas.width, this.$canvas.height);\n        this.layers.forEach(layer => {\n            let { img, radius, angle } = layer;\n            if (img) {\n                this.canvasContext.save();\n                this.canvasContext.translate(this.centerX, this.centerY);\n                this.canvasContext.rotate(angle);\n                this.canvasContext.drawImage(img, -radius, -radius, radius * 2, radius * 2);\n                this.canvasContext.restore();\n            }\n        });\n    }\n\n\tanimateRotation(layer, targetAngleDelta) {\n        let targetAngle = layer.angle + targetAngleDelta;\n\t\tlet start = performance.now();\n        var animate = (current) => {\n            var elapsed = current - start;\n            var changeAngle = Math.min(elapsed / 650, 1);\n            layer.angle = layer.angle + (targetAngle - layer.angle) * changeAngle;\n\n            this.canvasContext.clearRect(0, 0, this.$canvas.width, this.$canvas.height);\n\t\t\tthis.layers.forEach(layer => {\n\t\t\t\tvar { img, radius, angle } = layer;\n\t\t\t\tif (img) {\n\t\t\t\t\tthis.canvasContext.save();\n\t\t\t\t\tthis.canvasContext.translate(this.centerX, this.centerY);\n\t\t\t\t\tthis.canvasContext.rotate(angle);\n\t\t\t\t\tthis.canvasContext.drawImage(img, -radius, -radius, radius * 2, radius * 2);\n\t\t\t\t\tthis.canvasContext.restore();\n\t\t\t\t}\n\t\t\t});\n\n            if (changeAngle < 1) {\n                requestAnimationFrame(animate);\n            }\n        };\n\n        requestAnimationFrame(animate);\n    }\n\n    getMousePos(event) {\n        var rect = this.$canvas.getBoundingClientRect();\n        return {\n            x: event.clientX - rect.left,\n            y: event.clientY - rect.top\n        };\n    }\n\n    loadImage(src) {\n        return new Promise((resolve, reject) => {\n            var img = new Image();\n            img.onload = () => resolve(img);\n            img.src = src;\n        });\n    }\n}\n"],"sourceRoot":""}