[editor_gui] Improved object preview (#692)

* [editor] Improved object preview

fixes:
- fixed object not appearing when selecting certain model ids
- object rotation in viewport is centered
- removed zoom out limit
- added doublesided property to previewed element

* Added doublesided button, better preview centering and zooming

Author: chris1384

[editor]/editor_gui/client/browser/browser.lua

@@ -20,12 +20,13 @@ function createBrowser()
 	browserGUI.window = guiCreateWindow 	( 0, 0, 0.25, 1, "Browse...", true )
 	guiSetVisible ( browserGUI.window, false )
 	browserGUI.dropdown = editingControl.dropdown:create{["x"]=12,["y"]=25,["width"]=screenX*0.25,["height"]=20,["dropWidth"]=screenX*0.25,["dropHeight"]=200,["relative"]=false,["parent"]=browserGUI.window,["rows"]={"All categories", "Favourites"}}
-	browserGUI.list = browserList:create( 12, 85, screenX*0.25, screenY*1-112, { {["Element"]=0.95-(60/(screenX*0.25))},{["[ID]"]=40/(screenX*0.25)}},false, browserGUI.window )
+	browserGUI.list = browserList:create( 12, 85, screenX*0.25, screenY*1-140, { {["Element"]=0.95-(60/(screenX*0.25))},{["[ID]"]=40/(screenX*0.25)}},false, browserGUI.window )
 	browserGUI.search = guiCreateEdit ( 12, 50, screenX*0.25, 30, "Search...", false, browserGUI.window )
 	browserGUI.ok = guiCreateButton ( 12, screenY-24, screenX*0.125 - 2, 40, "OK", false, browserGUI.window )
 	browserGUI.cancel = guiCreateButton ( screenX*0.125 + 12 + 2, screenY-24, screenX*0.125 - 2, 40, "Cancel", false, browserGUI.window )
 	browserGUI.searchProgress = guiCreateLabel ( 0, 0, 1, 0.1, "", true )
 	browserGUI.searchModel = guiCreateLabel ( 0, 0, 1, 0.1, "", true )
+	browserGUI.doubleside = guiCreateCheckBox ( 12, screenY-50, 110, 20, "Set doublesided", false, false, browserGUI.window )
 	guiSetVisible ( browserGUI.searchProgress, false )
 	guiSetVisible ( browserGUI.searchModel, false )
 	guiLabelSetColor ( browserGUI.searchProgress,0,0,0 )
@@ -37,6 +38,7 @@ function createBrowser()
 
 	addEventHandler ("onClientGUIClick",browserGUI.ok,browser.browserSelected,false)
 	addEventHandler ("onClientGUIClick",browserGUI.cancel,browser.browserCancelled,false)
+	addEventHandler ("onClientGUIClick",browserGUI.doubleside,browser.setDoublesided,false)
 end
 
 function browser.initiate ( theType, initialCat, initialModel )
@@ -67,6 +69,8 @@ function browser.initiate ( theType, initialCat, initialModel )
 	setPlayerHudComponentVisible ( "radar", false )
 	setSkyGradient(112,112,112,112,112,112)
 	setCameraInterior ( 14 )
+	setFarClipDistance(700)
+	setFogDistance(700)
 	guiSetVisible ( browserGUI.window, true )
 	--Output a default search
 	local results = elementSearch ( catNodes[initialCat],"" )
@@ -135,6 +139,8 @@ function browser.close()
 	removeEventHandler ( "onClientRender", root, rotateMesh )
 	setCameraInterior ( returnInterior )
 	resetSkyGradient()
+	resetFarClipDistance()
+	resetFogDistance()
 	setPlayerHudComponentVisible ( "radar", true )
 	if isElement ( browser.mainElement ) then
 		setElementAlpha(browser.mainElement, 255)
@@ -330,6 +336,11 @@ function browser.browserCancelled(button)
 	browser.close()
 end
 
+function browser.setDoublesided(button)
+	if button ~= "left" then return end
+	setElementDoubleSided(browser.mainElement, guiCheckBoxGetSelected(browserGUI.doubleside))
+end
+
 function setProgressText ( text )
 	guiSetText ( browserGUI.searchProgress, text )
 	local length = guiLabelGetTextExtent ( browserGUI.searchProgress )

[editor]/editor_gui/client/browser/freelook.lua

@@ -19,7 +19,7 @@ browserElementLookOptions = {
 	distance = 4,
 	minDistance = 2,
 	maxDistance = 40,
-	scrollUnits = 2,
+	scrollUnits = 5,
 	scrollSpeed = 0.1,
 	up = "mouse_wheel_up",
 	down = "mouse_wheel_down",
@@ -40,8 +40,8 @@ function elementLookFrame ()
 	local camAngleY = browserElementLookOptions.invertedY * rotY / 120
 
 	-- get the position of the target
-	local camTargetX, camTargetY, camTargetZ = getElementPosition ( browserElementLookOptions.target )  -- tx, ty, tz
-	camTargetZ = camTargetZ + browserElementLookOptions.camZOffset
+	local camTargetX, camTargetY, camTargetZ = tx, ty, tz
+
 	-- calculate a new positions for the camera
 	local distX = math.cos ( camAngleY ) * cameraDistance
 	local camPosX = camTargetX + ( ( math.cos ( camAngleX ) ) * distX )
@@ -86,11 +86,9 @@ function resetCamDist()
 	if cameraDistance < browserElementLookOptions.distance then
 		if cameraDistance + newDistance < browserElementLookOptions.distance then
 			cameraDistance = cameraDistance + newDistance
-		else cameraDistance = browserElementLookOptions.distance
 		end
 	elseif cameraDistance - newDistance > browserElementLookOptions.distance then
-			cameraDistance = cameraDistance - newDistance
-		else cameraDistance = browserElementLookOptions.distance
+		cameraDistance = cameraDistance - newDistance
 	end
 end
 
@@ -120,10 +118,7 @@ function math.round ( value )
 end
 
 function scrollDown()
-	if browserElementLookOptions.distance + browserElementLookOptions.scrollUnits < browserElementLookOptions.maxDistance
-		then browserElementLookOptions.distance = browserElementLookOptions.distance + browserElementLookOptions.scrollUnits
-		else browserElementLookOptions.distance = browserElementLookOptions.maxDistance
-	end
+	browserElementLookOptions.distance = browserElementLookOptions.distance + browserElementLookOptions.scrollUnits
 end
 
 function scrollUp()

[editor]/editor_gui/client/browser/previewelement.lua

@@ -1,4 +1,4 @@
-tx,ty,tz = 91,100,502 --The position of 	the element
+tx,ty,tz = 100,100,15000 --The position of 	the element
 local hideX,hideY,hideZ = 0,0,0 --where to hide the local player
 local rz = 0 -- The current rotation
 local maxRadius = 5
@@ -23,6 +23,7 @@ function browserSetElementModel ( elemID, model )
 		setModel[elemID](model)
 	end
 end
+
 function setModel.vehicleID ( model )
 	local randomOffset = ((getTickCount() % 20) / 100) + 0.001
 
@@ -60,26 +61,31 @@ function setModel.vehicleID ( model )
 	setCameraMatrix ( tx - realDistance, ty, tz + elevation + randomOffset,
 	                  tx, ty + moveLeft, tz + randomOffset)
 end
+
 function setModel.objectID ( model )
 	local randomOffset = ((getTickCount() % 20) / 100) + 0.001
 
 	if not browser.mainElement then
-		browser.mainElement = createObject(model, tx, ty, tz, 0, 0, rz)
+		browser.mainElement = createObject(model, tx, ty, tz, 0, 0, rz, true)
+		setElementDoubleSided(browser.mainElement, guiCheckBoxGetSelected(browserGUI.doubleside))
 		setElementDimension ( browser.mainElement, BROWSER_DIMENSION )
 		setElementInterior(browser.mainElement, 14)
 	else
 		setElementModel(browser.mainElement, model)
 	end
 
-	setElementPosition(browser.mainElement, tx, ty, tz + randomOffset)
+	setElementPosition(browser.mainElement, tx, ty, tz)
 	setElementAlpha(browser.mainElement, 255)
 
-	local radius = getElementRadius(browser.mainElement)
-	browserElementLookOptions.distance = 14
-	setObjectScale ( browser.mainElement, maxRadius / radius )
-	setCameraMatrix ( tx - 17, ty, tz + 3 + randomOffset,
-			  tx, ty + 2, tz + randomOffset)
+	local a,b,c,d,e,f = getElementBoundingBox(browser.mainElement)
+	local radius = math.max(7, getElementRadius(browser.mainElement)*2.1)
+	radius = math.max(radius, math.sqrt((c*c)+(f*f))*2)
+	browserElementLookOptions.distance = radius
+	local offset = radius * 0.2
+	setCameraMatrix ( tx - radius - offset, ty + offset, tz + radius * 0.25,
+			  tx - offset, ty + offset, tz)
 end
+
 function setModel.skinID ( model )
 	local randomOffset = (getTickCount() % 20) / 100
 
@@ -108,9 +114,27 @@ function rotateMesh ()
 	if ( initiatedType ) == "vehicleID" then
 		setElementRotation ( browser.mainElement,0,0,newRotation)
 	elseif ( initiatedType ) == "objectID" then
-		setElementRotation ( browser.mainElement,0,0,newRotation)
+		_previewRotate ( browser.mainElement,newRotation)
 	elseif ( initiatedType ) == "skinID" then
-		setPedRotation ( browser.mainElement,newRotation )
+		setPedRotation ( browser.mainElement,newRotation)
 	end
 end
 
+function _previewRotate(object, rotation)
+	-- https://github.com/multitheftauto/mtasa-resources/commit/117759a6df540c21515d2666794e05dcf9c76254
+	local a,b,c,d,e,f = getElementBoundingBox(object)
+
+	local halfCenterX = (a + d) * 0.25
+	local halfCenterY = (b + e) * 0.25
+	local halfCenterZ = (c + f) * 0.25
+
+	local rad = math.rad(rotation)
+	local cZ, sZ = math.cos(rad), math.sin(rad)
+
+	local oX = halfCenterX*cZ - halfCenterY*sZ
+	local oY = halfCenterX*sZ + halfCenterY*cZ
+	local oZ = halfCenterZ
+
+	setElementPosition(object, tx - oX, ty - oY, tz - oZ)
+	setElementRotation(object, 0, 0, rotation)
+end