Retro Game Programming Kenwright Description Resizeable rotatable and draggable div element Dynamically added on the fly click button to add more elements to the screen html head head body script const maxobjs 100 var numobjs2 0 var objs function cleardraw2 numobjs2 0 for let i 0 i objs length i objs i style left 1000px function setupdraw numobjs2 0 for let i 0 i maxobjs i let div document createElement div document body appendChild div objs push div setupdraw helper function for drawing lines using div elements use a bit of trigonometry to set the size and orientation to create a line function drawLine s0 s1 col blue let ax s0 x let ay s0 y let bx s1 x let by s1 y console log numobjs2 console assert numobjs2 maxobjs let div objs numobjs2 numobjs2 if div 0 div document createElement div document body appendChild div div style position absolute if ay by bx ax bx ax bx ax bx bx ax by ay by ay by ay by by ay let calc Math atan ax bx by ay calc calc 180 0 Math PI let length Math sqrt ax bx ax bx ay by ay by div style height length px div style width 2 px div style left ax px div style top ay px div style transform rotate calc deg div style transformOrigin 0 0 div style backgroundColor col blue div style z index 999 function drawCross v0 s 20 col green drawLine x v0 x s y v0 y x v0 x s y v0 y col drawLine x v0 x y v0 y s x v0 x y v0 y s col function vec2 x y this x x this y y this set function x y this x x this y y vec2 add function v0 v1 return new vec2 v0 x v1 x v0 y v1 y vec2 sub function v0 v1 return new vec2 v0 x v1 x v0 y v1 y vec2 scale function v0 s return new vec2 v0 x s v0 y s vec2 cross function v0 v1 return v0 x v1 y v0 y v1 x vec2 dot function v0 v1 return v0 x v1 x v0 y v1 y note you can t use length word vec2 length function v0 return Math sqrt v0 x v0 x v0 y v0 y vec2 dist function v0 return Math sqrt v0 x v0 x v0 y v0 y vec2 norm function v0 let ln Math sqrt v0 x v0 x v0 y v0 y return vec2 scale v0 1 0 ln vec2 perp function n return new vec2 n y n x vec2 rot function v ang let ca Math cos ang radians let sa Math sin ang return new vec2 ca v x sa v y sa v x ca v y script style resizable background orange width 100px height 100px position absolute top 100px left 100px transform rotate 0rad cursor move z index 10 resizers width 100 height 100 border 3px solid 4286f4 box sizing border box resizer width 10px height 10px border radius 50 background white border 3px solid 4286f4 position absolute resizable resizers resizer width 10px height 10px border radius 50 background white border 3px solid 4286f4 position absolute resizable resizers resizer top middle left 50 top 5px cursor pointer transform translateX 50 resizable resizers resizer top left left 5px top 5px cursor crosshair resizable resizers resizer top right right 5px top 5px cursor crosshair resizable resizers resizer bottom left left 5px bottom 5px cursor crosshair resizable resizers resizer bottom right right 5px bottom 5px cursor crosshair style div style border 2px solid black width 90 height 20 text align center cursor pointer onclick addResizer Add Resizer div div id bob class resizable style left 550px top 200px div class resizers div id ss class resizer top middle div div id r1 class resizer top left div div id r2 class resizer top right div div id r3 class resizer bottom left div div id r4 class resizer bottom right div div div div id bob2 class resizable style left 250px top 200px background green div class resizers div id ss class resizer top middle div div id r1 class resizer top left div div id r2 class resizer top right div div id r3 class resizer bottom left div div id r4 class resizer bottom right div div div script function addResizer let p document getElementById bob let bob3 p cloneNode true bob3 style left 10 100 Math random px bob3 style top 10 100 Math random px bob3 style transform rotate 0 rad bob3 style transform origin left top bob3 ang 0 bob3 style width 100px bob3 style height 100px var randomColor Math floor Math random 16777215 toString 16 bob3 style background randomColor document body appendChild bob3 setupResize bob3 function setupResize bobdiv let els bobdiv getElementsByTagName div for let k 0 k els length k if els k className resizer top middle bobdiv r0 els k if els k className resizer top left bobdiv r1 els k if els k className resizer top right bobdiv r2 els k if els k className resizer bottom right bobdiv r3 els k if els k className resizer bottom left bobdiv r4 els k bobdiv ang 0 bobdiv onmousedown mouseDownDrag bobdiv r0 onmousedown mouseDownRotate bobdiv r1 onmousedown mouseDownResize bobdiv r2 onmousedown mouseDownResize bobdiv r3 onmousedown mouseDownResize bobdiv r4 onmousedown mouseDownResize bobdiv style transform origin left top let divResizers document getElementsByClassName resizable for let rr 0 rr divResizers length rr var bobdiv document getElementById bob let div divResizers rr setupResize div let center x 0 y 0 let offset x 0 y 0 let pos x 0 y 0 let size w 0 h 0 let seldrag 0 let selrot 0 let selres 0 window onmousemove mouseMoveRotate window onmousemove mouseMoveResize window onmousemove mouseMoveDrag window addEventListener mousemove mouseMoveRotate window addEventListener mousemove mouseMoveResize window addEventListener mousemove mouseMoveDrag window onmouseup function e seldrag 0 selrot 0 selres 0 function mouseDownResize event event preventDefault event stopImmediatePropagation selres event target let div selres parentNode parentNode if div style transform origin left top div style transform origin left top let w div offsetWidth let h div offsetHeight console log w w h h let p new vec2 w 0 5 h 0 5 let d new vec2 w 0 5 h 0 5 p vec2 rot d div ang let poff vec2 sub p p let topleft x 0 y 0 topleft x parseFloat div style left topleft y parseFloat div style top div style left topleft x poff x px div style top topleft y poff y px pos x selres offsetParent offsetLeft pos y selres offsetParent offsetTop size w selres offsetParent offsetWidth size h selres offsetParent offsetHeight let mid x pos x size w 0 5 y pos y size h 0 5 offset x event pageX offset y event pageY function mouseMoveResize event if selres 0 return let div selres parentNode parentNode console assert div style transform origin left top if selres className resizer top right let dxx event pageX offset x let dyy event pageY offset y let mp new vec2 event pageX event pageY let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let tr div r1 let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if width 30 div style width width px if height 30 div style left pos x up x dy px div style top pos y up y dy px div style height height px if selres className resizer bottom right let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if width 30 div style width width px console log height if height 30 div style height height px return if selres className resizer bottom left let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if height 30 div style height height px if width 30 div style left pos x right x dx px div style top pos y right y dx px div style width width px return if selres className resizer top left let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy let left pos x let top pos y if width 30 width 30 dx width size w if height 30 height 30 dy height size h left left right x dx top top right y dx left left up x dy top top up y dy div style width width px div style height height px div style left left px div style top top px return function mouseDownRotate event event preventDefault event stopImmediatePropagation selrot event target let div selrot parentNode parentNode if div style transform origin center center div style transform origin center center let w div offsetWidth let h div offsetHeight let p new vec2 w 0 5 h 0 5 console log w w h h let d new vec2 w 0 5 h 0 5 p vec2 rot d div ang let poff vec2 sub p p let topleft x 0 y 0 topleft x parseFloat div style left topleft y parseFloat div style top div style left topleft x poff x px div style top topleft y poff y px pos x selrot offsetParent offsetLeft pos y selrot offsetParent offsetTop center x div offsetLeft div offsetWidth 0 5 center y div offsetTop div offsetHeight 0 5 offset x event pageX offset y event pageY drawCross offset 40 drawCross pos 30 function mouseMoveRotate event if selrot 0 return let div selrot parentNode parentNode console assert div style transform origin center center let vref x 0 y 1 let v1 x center x event pageX y center y event pageY v1 vec2 norm v1 v2 vref let ang Math atan2 v1 y v1 x Math atan2 v2 y v2 x div style transform rotate ang rad div ang ang function mouseDownDrag event event preventDefault event stopImmediatePropagation seldrag event target let div seldrag parentNode let px div offsetLeft let py div offsetTop let shiftX event pageX px let shiftY event pageY py offset x shiftX offset y shiftY function mouseMoveDrag event if seldrag 0 return let div seldrag parentNode div style left event pageX offset x px div style top event pageY offset y px script body html
ndow onmousemove mouseMoveDrag window addEventListener mousemove mouseMoveRotate window addEventListener mousemove mouseMoveResize window addEventListener mousemove mouseMoveDrag window onmouseup function e seldrag 0 selrot 0 selres 0 function mouseDownResize event event preventDefault event stopImmediatePropagation selres event target let div selres parentNode parentNode if div style transform origin left top div style transform origin left top let w div offsetWidth let h div offsetHeight console log w w h h let p new vec2 w 0 5 h 0 5 let d new vec2 w 0 5 h 0 5 p vec2 rot d div ang let poff vec2 sub p p let topleft x 0 y 0 topleft x parseFloat div style left topleft y parseFloat div style top div style left topleft x poff x px div style top topleft y poff y px pos x selres offsetParent offsetLeft pos y selres offsetParent offsetTop size w selres offsetParent offsetWidth size h selres offsetParent offsetHeight let mid x pos x size w 0 5 y pos y size h 0 5 offset x event pageX offset y event pageY function mouseMoveResize event if selres 0 return let div selres parentNode parentNode console assert div style transform origin left top if selres className resizer top right let dxx event pageX offset x let dyy event pageY offset y let mp new vec2 event pageX event pageY let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let tr div r1 let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if width 30 div style width width px if height 30 div style left pos x up x dy px div style top pos y up y dy px div style height height px if selres className resizer bottom right let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if width 30 div style width width px console log height if height 30 div style height height px return if selres className resizer bottom left let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy if height 30 div style height height px if width 30 div style left pos x right x dx px div style top pos y right y dx px div style width width px return if selres className resizer top left let up vec2 rot new vec2 0 1 div ang let right vec2 rot new vec2 1 0 div ang let dx vec2 dot right new vec2 event pageX offset x event pageY offset y let dy vec2 dot up new vec2 event pageX offset x event pageY offset y let width size w dx let height size h dy let left pos x let top pos y if width 30 width 30 dx width size w if height 30 height 30 dy height size h left left right x dx top top right y dx left left up x dy top top up y dy div style width width px div style height height px div style left left px div style top top px return function mouseDownRotate event event preventDefault event stopImmediatePropagation selrot event target let div selrot parentNode parentNode if div style transform origin center center div style transform origin center center let w div offsetWidth let h div offsetHeight let p new vec2 w 0 5 h 0 5 console log w w h h let d new vec2 w 0 5 h 0 5 p vec2 rot d div ang let poff vec2 sub p p let topleft x 0 y 0 topleft x parseFloat div style left topleft y parseFloat div style top div style left topleft x poff x px div style top topleft y poff y px pos x selrot offsetParent offsetLeft pos y selrot offsetParent offsetTop center x div offsetLeft div offsetWidth 0 5 center y div offsetTop div offsetHeight 0 5 offset x event pageX offset y event pageY drawCross offset 40 drawCross pos 30 function mouseMoveRotate event if selrot 0 return let div selrot parentNode parentNode console assert div style transform origin center center let vref x 0 y 1 let v1 x center x event pageX y center y event pageY v1 vec2 norm v1 v2 vref let ang Math atan2 v1 y v1 x Math atan2 v2 y v2 x div style transform rotate ang rad div ang ang function mouseDownDrag event event preventDefault event stopImmediatePropagation seldrag event target let div seldrag parentNode let px div offsetLeft let py div offsetTop let shiftX event pageX px let shiftY event pageY py offset x shiftX offset y shiftY function mouseMoveDrag event if seldrag 0 return let div seldrag parentNode div style left event pageX offset x px div style top event pageY offset y px script body html