Always on top display fixes (#72)

Closes #19 

Since SelectionBox does not have AlwaysOnTop property I had to create custom one with BoxHandle and CylinderHandles

with this pr, all modes including `Outline` and `Box` have working AlwaysOnTop setting

![image](https://user-images.githubusercontent.com/34089907/184451387-dde6a538-5ffb-40aa-b7af-3b36de617ed4.png)

src/Components/WorldView/BoxAdorn.lua

@@ -1,23 +1,28 @@
 local Modules = script.Parent.Parent.Parent.Parent
 local Roact = require(Modules.Roact)
+local Util = require(Modules.Plugin.Util)
 
 local function BoxAdorn(props)
-	if props.Adornee.ClassName == "Attachment" then
-		return Roact.createElement("BoxHandleAdornment", {
-			Adornee = props.Adornee.Parent,
-			CFrame = props.Adornee.CFrame,
-			Size = Vector3.new(1.2, 1.2, 1.2),
-			Transparency = 0.3,
+	local children = {}
+	if props.AlwaysOnTop then
+		children = Util.GenerateOutline({
+			Size = if props.Adornee.ClassName == "Attachment"
+				then props.Adornee.Parent.Size
+				elseif props.Adornee.ClassName == "Model" then props.Adornee:GetExtentsSize()
+				else props.Adornee.Size,
+			Adornee = if props.Adornee.ClassName == "Attachment" then props.Adornee.Parent else props.Adornee,
 			Color3 = props.Color,
+			Box = true,
 		})
 	end
 	return Roact.createElement("SelectionBox", {
 		LineThickness = 0.03,
 		SurfaceTransparency = 0.7,
 		SurfaceColor3 = props.Color,
-		Adornee = props.Adornee,
+		Adornee = if props.Adornee.ClassName == "Attachment" then props.Adornee.Parent else props.Adornee,
 		Color3 = props.Color,
-	})
+		Visible = not props.AlwaysOnTop,
+	}, children)
 end
 
 return BoxAdorn

src/Components/WorldView/OutlineAdorn.lua

@@ -1,21 +1,25 @@
 local Modules = script.Parent.Parent.Parent.Parent
 local Roact = require(Modules.Roact)
+local Util = require(Modules.Plugin.Util)
 
 local function OutlineAdorn(props)
-	if props.Adornee.ClassName == "Attachment" then
-		return Roact.createElement("BoxHandleAdornment", {
-			Adornee = props.Adornee.Parent,
-			CFrame = props.Adornee.CFrame,
-			Size = Vector3.new(1.5, 1.5, 1.5),
-			Transparency = 0.3,
+	local children = {}
+	if props.AlwaysOnTop then
+		children = Util.GenerateOutline({
+			Size = if props.Adornee.ClassName == "Attachment"
+				then props.Adornee.Parent.Size
+				elseif props.Adornee.ClassName == "Model" then props.Adornee:GetExtentsSize()
+				else props.Adornee.Size,
+			Adornee = if props.Adornee.ClassName == "Attachment" then props.Adornee.Parent else props.Adornee,
 			Color3 = props.Color,
 		})
 	end
 	return Roact.createElement("SelectionBox", {
-		LineThickness = 0.05,
-		Adornee = props.Adornee,
+		LineThickness = 0.03,
+		Adornee = if props.Adornee.ClassName == "Attachment" then props.Adornee.Parent else props.Adornee,
 		Color3 = props.Color,
-	})
+		Visible = not props.AlwaysOnTop,
+	}, children)
 end
 
 return OutlineAdorn

src/Util.lua

@@ -113,8 +113,78 @@ local function merge(...)
 	return map
 end
 
+local function GenerateOutline(props)
+	local OutlineVertices = {
+		{ 1, 1, -1 },
+		{ -1, 1, -1 },
+		{ -1, 1, -1 },
+		{ -1, 1, 1 },
+		{ -1, 1, 1 },
+		{ 1, 1, 1 },
+		{ 1, 1, 1 },
+		{ 1, 1, -1 },
+		{ 1, -1, -1 },
+		{ -1, -1, -1 },
+		{ -1, -1, -1 },
+		{ -1, -1, 1 },
+		{ -1, -1, 1 },
+		{ 1, -1, 1 },
+		{ 1, -1, 1 },
+		{ 1, -1, -1 },
+		{ 1, 1, -1 },
+		{ 1, -1, -1 },
+		{ -1, -1, -1 },
+		{ -1, 1, -1 },
+		{ 1, 1, 1 },
+		{ 1, -1, 1 },
+		{ -1, -1, 1 },
+		{ -1, 1, 1 },
+	}
+	local Corners = {}
+	for _, Vector in OutlineVertices do
+		table.insert(
+			Corners,
+			(CFrame.new(props.Size.X / 2 * Vector[1], props.Size.Y / 2 * Vector[2], props.Size.Z / 2 * Vector[3])).Position
+		)
+	end
+	local Instances = {}
+	for i, _ in Corners do
+		if i % 2 == 0 then
+			continue
+		end
+		local displacement = Corners[i] - Corners[i + 1]
+		table.insert(
+			Instances,
+			Roact.createElement("CylinderHandleAdornment", {
+				Color3 = props.Color3,
+				Adornee = props.Adornee,
+				AlwaysOnTop = true,
+				Height = displacement.Magnitude,
+				CFrame = CFrame.lookAt(Corners[i], Corners[i + 1]) * CFrame.new(0, 0, -displacement.Magnitude / 2),
+				Radius = 0.033,
+				ZIndex = 0,
+			})
+		)
+	end
+	if props.Box then
+		table.insert(
+			Instances,
+			Roact.createElement("BoxHandleAdornment", {
+				Color3 = props.Color3,
+				Transparency = 0.7,
+				Adornee = props.Adornee,
+				AlwaysOnTop = true,
+				Size = props.Size,
+				ZIndex = 0,
+			})
+		)
+	end
+	return Instances
+end
+
 return {
 	findIf = findIf,
 	escapeTagName = escapeTagName,
 	merge = merge,
+	GenerateOutline = GenerateOutline,
 }