Add socket position view to trader

src/Classes/CompareTab.lua

@@ -14,6 +14,7 @@ local tradeHelpers = LoadModule("Classes/TradeHelpers")
 local buySimilar = LoadModule("Classes/CompareBuySimilar")
 local calcsHelpers = LoadModule("Classes/CompareCalcsHelpers")
 local buildListHelpers = LoadModule("Modules/BuildListHelpers")
+local itemSlotHelper = LoadModule("Modules/ItemSlotHelper")
 
 -- Node IDs below this value are normal passive tree nodes; IDs at or above are cluster jewel nodes
 local CLUSTER_NODE_OFFSET = 65536
@@ -3797,13 +3798,33 @@ function CompareTabClass:DrawItems(vp, compareEntry, inputEvents)
 			drawY = drawY + maxH + 6
 		else
 			-- === COMPACT MODE ===
+			local slot = self.primaryBuild.itemsTab.slots[equipSlotName]
+			local nodeId = slot.nodeId
+			local shouldUnderline = not not nodeId
 			local pHover, cHover, b1Hover, b2Hover, b3Hover, b2X, b2Y, b2W, b2H,
 				rowHoverItem, rowHoverItemsTab, rowHoverX, rowHoverY, rowHoverW, rowHoverH =
 				tradeHelpers.drawCompactSlotRow(drawY, label, pItem, cItem,
 					colWidth, cursorX, cursorY, labelW,
 					self.primaryBuild.itemsTab, compareEntry.itemsTab, pWarn, cWarn, slotMissing,
-					LAYOUT.itemsCopyBtnW, LAYOUT.itemsCopyBtnH, LAYOUT.itemsBuyBtnW, LAYOUT.itemsEquipBtnW, scrollOffsetX)
-
+					LAYOUT.itemsCopyBtnW, LAYOUT.itemsCopyBtnH, LAYOUT.itemsBuyBtnW, LAYOUT.itemsEquipBtnW, scrollOffsetX,
+					shouldUnderline)
+
+			local labelX = (scrollOffsetX or 0) + 10
+			-- draw passive tree view when hovering over the label, if the slot is a jewel socket
+			if labelX <= cursorX and cursorX <= (labelX + labelW)
+				and drawY < cursorY and cursorY <= (drawY + 20) then
+				if nodeId then
+					local boxSize = 250
+					-- anchor bottom left to label top left, keeping in mind what our viewport was
+					SetViewport()
+					local boxX = vp.x + labelX
+					local boxY = (vp.y + checkboxOffset) + drawY - boxSize
+					itemSlotHelper.DrawViewer(self.primaryBuild.itemsTab, nodeId, boxX, boxY, boxSize,
+						boxSize)
+					-- restore viewport
+					SetViewport(vp.x, vp.y + checkboxOffset, vp.width, scrollViewH)
+				end
+			end
 			if rowHoverItem then
 				hoverItem = rowHoverItem
 				hoverItemsTab = rowHoverItemsTab

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/TradeHelpers.lua

@@ -450,7 +450,7 @@ local ITEM_BOX_H = 20
 
 function M.drawCompactSlotRow(drawY, slotLabel, pItem, cItem,
 	colWidth, cursorX, cursorY, maxLabelW, primaryItemsTab, compareItemsTab, pWarn, cWarn, slotMissing,
-	copyBtnW, copyBtnH, buyBtnW, equipBtnW, xOffset)
+	copyBtnW, copyBtnH, buyBtnW, equipBtnW, xOffset, shouldUnderlineLabel)
 
 	xOffset = xOffset or 0
 	local pName = pItem and pItem.name or "(empty)"
@@ -480,7 +480,13 @@ function M.drawCompactSlotRow(drawY, slotLabel, pItem, cItem,
 
 	-- Draw slot label
 	SetDrawColor(1, 1, 1)
-	DrawString(labelX, drawY + 2, "LEFT", 16, "VAR", "^7" .. slotLabel .. ":")
+	local labelText = "^7" .. slotLabel .. ":"
+	DrawString(labelX, drawY + 2, "LEFT", 16, "VAR", labelText)
+
+	if shouldUnderlineLabel then
+		local labelW = DrawStringWidth(16, "VAR", labelText)
+		DrawImage(nil, labelX, drawY + 2 + 16, labelW, 1)
+	end
 
 	-- Draw primary item box
 	local pBorderGray = pHover and 0.5 or 0.33

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,39 @@
+local M = {}
+
+-- Draws a small display window of a jewel socket's position. Note that this will reset the
+-- viewport and the draw layer.
+---@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, h)
+	DrawImage(nil, 0, math.floor(h / 2) - 1, w, 2)
+	SetViewport()
+	SetDrawLayer(nil, 0)
+end
+
+return M