Add socket position view to trader

src/Classes/ItemSlotControl.lua

@@ -7,6 +7,7 @@ local pairs = pairs
 local t_insert = table.insert
 local m_min = math.min
 
+local itemSlotHelper = LoadModule("Modules/ItemSlotHelper")
 local ItemSlotClass = newClass("ItemSlotControl", "DropDownControl", function(self, anchor, x, y, itemsTab, slotName, slotLabel, nodeId)
 	self.DropDownControl(anchor, {x, y, 310, 20}, { }, function(index, value)
 		if self.items[index] ~= self.selItemId then
@@ -139,30 +140,15 @@ function ItemSlotClass:Draw(viewPort)
 	self.DropDownControl:Draw(viewPort)
 	self:DrawControls(viewPort)
 	if not main.popups[1] and self.nodeId and (self.dropped or (self:IsMouseOver() and (self.otherDragSource or not self.itemsTab.selControl))) then
-		SetDrawLayer(nil, 15)
+		local width = 308
+		local height = 280
 		local viewerY
 		if self.DropDownControl.dropUp and self.DropDownControl.dropped then
 			viewerY = y + 20
 		else
-			viewerY = m_min(y - 300 - 5, viewPort.y + viewPort.height - 304)
+			viewerY = m_min(y - height - 4, viewPort.y + viewPort.height - height)
 		end
-		local viewerX = x
-		SetDrawColor(1, 1, 1)
-		DrawImage(nil, viewerX, viewerY, 304, 304)
-		local viewer = self.itemsTab.socketViewer
-		local node = self.itemsTab.build.spec.nodes[self.nodeId]
-		viewer.zoom = 20
-		local scale = self.itemsTab.build.spec.tree.size / 6000
-		viewer.zoomX = -node.x / scale
-		viewer.zoomY = -node.y / scale
-		SetViewport(viewerX + 2, viewerY + 2, 300, 300)
-		viewer:Draw(self.itemsTab.build, { x = 0, y = 0, width = 300, height = 300 }, { })
-		SetDrawLayer(nil, 30)
-		SetDrawColor(1, 1, 1, 0.2)
-		DrawImage(nil, 149, 0, 2, 300)
-		DrawImage(nil, 0, 149, 300, 2)
-		SetViewport()
-		SetDrawLayer(nil, 0)
+		itemSlotHelper.DrawViewer(self.itemsTab, self.nodeId, x, viewerY, width, height)
 	end
 end
 

src/Classes/TradeQuery.lua

@@ -6,6 +6,7 @@
 
 
 local dkjson = require "dkjson"
+local itemSlotHelper = LoadModule("Modules/ItemSlotHelper")
 
 local get_time = os.time
 local t_insert = table.insert
@@ -1042,6 +1043,22 @@ function TradeQueryClass:PriceItemRowDisplay(row_idx, top_pane_alignment_ref, ro
 Note that even if you are authenticated, you can click this button again to show the search link.
 If you have additional requirements that the trade tool doesn't cover (e.g. Adorned Magic jewels),
 you can add them, copy the link here, and press "Price Item" to evaluate the items.]]
+	controls["bestButton" .. row_idx].onHover = function()
+		local button = controls["bestButton" .. row_idx]
+
+		local x, y = button:GetPos()
+		local buttonWidth, _ = button:GetSize()
+
+		local nodeId = slotTbl.nodeId
+
+		if not nodeId then return end
+
+		local boxSize = 250
+		-- anchor bottom to top of button
+		local viewerY = y - boxSize - 4
+		local viewerX = x - boxSize / 2 + buttonWidth / 2
+		itemSlotHelper.DrawViewer(self.itemsTab, nodeId, viewerX, viewerY, boxSize, boxSize)
+	end
 	local pbURL
 	controls["uri"..row_idx] = new("EditControl", { "TOPLEFT", controls["bestButton"..row_idx], "TOPRIGHT"}, {8, 0, 514, row_height}, nil, nil, "^%C\t\n", nil, function(buf)
 		local subpath = buf:match(self.hostName .. "trade2/search/(.+)$") or ""

src/Modules/ItemSlotHelper.lua

@@ -0,0 +1,38 @@
+local M = {}
+
+-- draws a small display window of a jewel socket's position
+---@param nodeId integer
+---@param x integer
+---@param y integer
+---@param w integer
+---@param h integer
+function M.DrawViewer(itemsTab, nodeId, x, y, w, h)
+	SetDrawLayer(nil, 15)
+	SetDrawColor(1, 1, 1)
+
+	local borderWidth = 1
+	DrawImage(nil, x, y, w + 2 * borderWidth, h + 2 * borderWidth)
+
+	local viewer = itemsTab.socketViewer
+	local node = itemsTab.build.spec.nodes[nodeId]
+
+	viewer.zoom = 17
+
+	local viewPortSize = math.min(w, h)
+	local scale = itemsTab.build.spec.tree.size / (viewPortSize * viewer.zoom)
+	viewer.zoomX = -node.x / scale
+	viewer.zoomY = -node.y / scale
+	-- offset viewport to be inside borders
+	SetViewport(x + borderWidth, y + borderWidth, w, h)
+	-- draw the actual image
+	viewer:Draw(itemsTab.build, { x = 0, y = 0, width = w, height = h }, {})
+	SetDrawLayer(nil, 30)
+	SetDrawColor(1, 1, 1, 0.2)
+	-- draw crosshair
+	DrawImage(nil, math.floor(w / 2) - 1, 0, 2, w)
+	DrawImage(nil, 0, math.floor(h / 2) - 1, h, 2)
+	SetViewport()
+	SetDrawLayer(nil, 0)
+end
+
+return M