const collisionWithRectangle = ( rectangle1 , rectangle2 ) => { return ! ! ( rectangle1 . x < rectangle2 . x + rectangle2 . width && rectangle1 . x + rectangle1 . width > rectangle2 . x && rectangle1 . y < rectangle2 . y + rectangle2 . height && rectangle1 . y + rectangle1 . height > rectangle2 . y ) ; } ; const reCalcWithoutPixelString = ( mousePosition ) => { let x3 = Math . min ( mousePosition . x1 , mousePosition . x2 ) ; let x4 = Math . max ( mousePosition . x1 , mousePosition . x2 ) ; let y3 = Math . min ( mousePosition . y1 , mousePosition . y2 ) ; let y4 = Math . max ( mousePosition . y1 , mousePosition . y2 ) ; let left = x3 ; let top = y3 ; let width = x4 - x3 ; let height = y4 - y3 ; return { x : left , y : top , width : width , height : height } ; } ; const collisionDetection = ( mousePosition ) => { const rectangle1 = reCalcWithoutPixelString ( mousePosition ) ; const elements = document . getElementsByTagName ( 'canvas' ) ; let collisions = [ ] ; for ( let i = 0 ; i < elements . length ; i ++ ) { const element = elements [ i ] ; const rectangle2 = element . getBoundingClientRect ( ) ; const imageId = element . getAttribute ( 'imgid' ) ; const collisionDetected = collisionWithRectangle ( rectangle1 , rectangle2 ) ; if ( collisionDetected ) { collisions . push ( imageId ) ; } } return collisions ; } ; const reCalc = ( mousePosition ) => { let x3 = Math . min ( mousePosition . x1 , mousePosition . x2 ) ; let x4 = Math . max ( mousePosition . x1 , mousePosition . x2 ) ; let y3 = Math . min ( mousePosition . y1 , mousePosition . y2 ) ; let y4 = Math . max ( mousePosition . y1 , mousePosition . y2 ) ; let left = x3 + 'px' ; let top = y3 + 'px' ; let width = x4 - x3 + 'px' ; let height = y4 - y3 + 'px' ; return { left : left , top : top , width : width , height : height } ; } ; export { collisionDetection , reCalc , reCalcWithoutPixelString } ;