From 462de8d93dced0fc4c76773145f9cc242fbe9c21 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 27 Dec 2019 22:45:06 +0000 Subject: [PATCH] Radar can now be moved, viewport clamping for remote and radar --- nui/radar.css | 10 +++++++--- nui/radar.html | 8 +++++--- nui/radar.js | 50 ++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 54 insertions(+), 14 deletions(-) diff --git a/nui/radar.css b/nui/radar.css index 3cee8d8..1a9a92d 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -16,7 +16,8 @@ * { font-family: 'Heebo', Verdana, Geneva, Tahoma, sans-serif; font-size: 13px; - box-sizing: border-box; + box-sizing: border-box; + user-select: none; } body { @@ -41,13 +42,16 @@ button:focus { outline: none; } height: 230px; position: absolute; - margin: auto; + margin: auto; + + top: calc( ( 100% - 10px ) - 230px ); + left: calc( ( 100% - 10px ) - 715px ); background-image: url( "images/frame.png" ); /* Settings for scaling */ transform: scale( 1.0 ); - transform-origin: bottom right; + transform-origin: 0 0; z-index: 1; } diff --git a/nui/radar.html b/nui/radar.html index 32c333f..83b1657 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -1,11 +1,13 @@ + + - - -
+ + +
diff --git a/nui/radar.js b/nui/radar.js index b1ae0a8..f7f174c 100644 --- a/nui/radar.js +++ b/nui/radar.js @@ -132,7 +132,7 @@ const dirs = /*------------------------------------------------------------------------------------ Hide elements ------------------------------------------------------------------------------------*/ -elements.radar.hide(); +// elements.radar.hide(); // elements.remote.hide(); elements.uiSettingsBox.hide(); elements.keyLock.hide(); @@ -429,23 +429,57 @@ elements.remote.mouseup( function( event ) { remoteMoving = false; } ) +// Radar mouse down and up event +elements.radar.mousedown( function( event ) { + radarMoving = true; + + let offset = $( this ).offset(); + + radarOffset = [ + offset.left - event.clientX, + offset.top - event.clientY + ] +} ) + +elements.radar.mouseup( function( event ) { + radarMoving = false; +} ) + $( document ).mousemove( function( event ) { event.preventDefault(); + let x = event.clientX; + let y = event.clientY; + if ( remoteMoving ) { - let x = event.clientX; - let y = event.clientY; + let maxWidth = $( window ).width() - elements.remote.outerWidth(); + let maxHeight = $( window ).height() - elements.remote.outerHeight(); - elements.remote.css( "left", ( x + remoteOffset[0] ) + "px" ); - elements.remote.css( "top", ( y + remoteOffset[1] ) + "px" ); + let left = clamp( x + remoteOffset[0], 0, maxWidth ); + let top = clamp( y + remoteOffset[1], 0, maxHeight ); + + elements.remote.css( "left", left + "px" ); + elements.remote.css( "top", top + "px" ); + } + + if ( radarMoving ) + { + let maxWidth = $( window ).width() - ( elements.radar.outerWidth() * radarScale ); + let maxHeight = $( window ).height() - ( elements.radar.outerHeight() * radarScale ); + + let left = clamp( x + radarOffset[0], 0, maxWidth ); + let top = clamp( y + radarOffset[1], 0, maxHeight ); + + elements.radar.css( "left", left + "px" ); + elements.radar.css( "top", top + "px" ); } } ) function setUISettingsVisible( state, remote ) { state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut(); - if ( remote ) { setRemoteVisible( !state ); } + // if ( remote ) { setRemoteVisible( !state ); } } function hideUISettings() @@ -471,7 +505,7 @@ function clamp( num, min, max ) /*------------------------------------------------------------------------------------ Button click event assigning ------------------------------------------------------------------------------------*/ -elements.uiSettingsBox.find( "button" ).each( function( i, obj ) { +/* elements.uiSettingsBox.find( "button" ).each( function( i, obj ) { if ( $( this ).attr( "data-value" ) && $( this ).attr( "data-scale" ) ) { $( this ).click( function() { let align = $( this ).data( "value" ); @@ -481,7 +515,7 @@ elements.uiSettingsBox.find( "button" ).each( function( i, obj ) { elements.radar.css( "transform-origin", origin ); } ) } -} ); +} ); */ // This runs when the JS file is loaded, loops through all of the remote buttons and assigns them an onclick function elements.remote.find( "button" ).each( function( i, obj ) {