Patch visualizer redesign (#883)

CHANGELOG.md

@@ -4,6 +4,7 @@
 * Added Never option to Confirmation ([#893])
 * Added popout diff visualizer for table properties like Attributes and Tags ([#834])
 * Updated Theme to use Studio colors ([#838])
+* Improved patch visualizer UX ([#883])
 * Added experimental setting for Auto Connect in playtests ([#840])
 * Projects may now specify rules for syncing files as if they had a different file extension. ([#813])
  	This is specified via a new field on project files, `syncRules`:
@@ -56,6 +57,7 @@
 [#834]: https://github.com/rojo-rbx/rojo/pull/834
 [#838]: https://github.com/rojo-rbx/rojo/pull/838
 [#840]: https://github.com/rojo-rbx/rojo/pull/840
+[#883]: https://github.com/rojo-rbx/rojo/pull/883
 [#893]: https://github.com/rojo-rbx/rojo/pull/893
 
 ## [7.4.1] - February 20, 2024

plugin/src/App/Components/ClassIcon.lua

@@ -0,0 +1,126 @@
+local StudioService = game:GetService("StudioService")
+local AssetService = game:GetService("AssetService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = require(Plugin.App.Components.EditableImage)
+
+local imageCache = {}
+local function getImageSizeAndPixels(image)
+	if not imageCache[image] then
+		local editableImage = AssetService:CreateEditableImageAsync(image)
+		imageCache[image] = {
+			Size = editableImage.Size,
+			Pixels = editableImage:ReadPixels(Vector2.zero, editableImage.Size),
+		}
+	end
+
+	return imageCache[image].Size, table.clone(imageCache[image].Pixels)
+end
+
+local function getRecoloredClassIcon(className, color)
+	local iconProps = StudioService:GetClassIcon(className)
+
+	if iconProps and color then
+		local success, editableImageSize, editableImagePixels = pcall(function()
+			local size, pixels = getImageSizeAndPixels(iconProps.Image)
+
+			local minVal, maxVal = math.huge, -math.huge
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
+
+				minVal = math.min(minVal, pixelVal)
+				maxVal = math.max(maxVal, pixelVal)
+			end
+
+			local hue, sat, val = color:ToHSV()
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
+				local newVal = val
+				if minVal < maxVal then
+					-- Remap minVal - maxVal to val*0.9 - val
+					newVal = val * (0.9 + 0.1 * (pixelVal - minVal) / (maxVal - minVal))
+				end
+
+				local newPixelColor = Color3.fromHSV(hue, sat, newVal)
+				pixels[i], pixels[i + 1], pixels[i + 2] = newPixelColor.R, newPixelColor.G, newPixelColor.B
+			end
+			return size, pixels
+		end)
+		if success then
+			iconProps.EditableImagePixels = editableImagePixels
+			iconProps.EditableImageSize = editableImageSize
+		end
+	end
+
+	return iconProps
+end
+
+local ClassIcon = Roact.PureComponent:extend("ClassIcon")
+
+function ClassIcon:init()
+	self.state = {
+		iconProps = nil,
+	}
+end
+
+function ClassIcon:updateIcon()
+	local props = self.props
+	local iconProps = getRecoloredClassIcon(props.className, props.color)
+	self:setState({
+		iconProps = iconProps,
+	})
+end
+
+function ClassIcon:didMount()
+	self:updateIcon()
+end
+
+function ClassIcon:didUpdate(lastProps)
+	if lastProps.className ~= self.props.className or lastProps.color ~= self.props.color then
+		self:updateIcon()
+	end
+end
+
+function ClassIcon:render()
+	local iconProps = self.state.iconProps
+	if not iconProps then
+		return nil
+	end
+
+	return e(
+		"ImageLabel",
+		{
+			Size = self.props.size,
+			Position = self.props.position,
+			LayoutOrder = self.props.layoutOrder,
+			AnchorPoint = self.props.anchorPoint,
+			ImageTransparency = self.props.transparency,
+			Image = iconProps.Image,
+			ImageRectOffset = iconProps.ImageRectOffset,
+			ImageRectSize = iconProps.ImageRectSize,
+			BackgroundTransparency = 1,
+		},
+		if iconProps.EditableImagePixels
+			then e(EditableImage, {
+				size = iconProps.EditableImageSize,
+				pixels = iconProps.EditableImagePixels,
+			})
+			else nil
+	)
+end
+
+return ClassIcon

plugin/src/App/Components/EditableImage.lua

@@ -0,0 +1,41 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = Roact.PureComponent:extend("EditableImage")
+
+function EditableImage:init()
+	self.ref = Roact.createRef()
+end
+
+function EditableImage:writePixels()
+	local image = self.ref.current
+	if not image then
+		return
+	end
+	if not self.props.pixels then
+		return
+	end
+
+	image:WritePixels(Vector2.zero, self.props.size, self.props.pixels)
+end
+
+function EditableImage:render()
+	return e("EditableImage", {
+		Size = self.props.size,
+		[Roact.Ref] = self.ref,
+	})
+end
+
+function EditableImage:didMount()
+	self:writePixels()
+end
+
+function EditableImage:didUpdate()
+	self:writePixels()
+end
+
+return EditableImage

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -155,7 +155,7 @@ function ChangeList:render()
 
 		local headerRow = changes[1]
 		local headers = e("Frame", {
-			Size = UDim2.new(1, 0, 0, 30),
+			Size = UDim2.new(1, 0, 0, 24),
 			BackgroundTransparency = rowTransparency,
 			BackgroundColor3 = theme.Diff.Row,
 			LayoutOrder = 0,
@@ -214,7 +214,7 @@ function ChangeList:render()
 			local isWarning = metadata.isWarning
 
 			rows[row] = e("Frame", {
-				Size = UDim2.new(1, 0, 0, 30),
+				Size = UDim2.new(1, 0, 0, 24),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
 				BackgroundColor3 = theme.Diff.Row,
 				BorderSizePixel = 0,
@@ -269,8 +269,8 @@ function ChangeList:render()
 		}, {
 			Headers = headers,
 			Values = e(ScrollingFrame, {
-				size = UDim2.new(1, 0, 1, -30),
-				position = UDim2.new(0, 0, 0, 30),
+				size = UDim2.new(1, 0, 1, -24),
+				position = UDim2.new(0, 0, 0, 24),
 				contentSize = self.contentSize,
 				transparency = props.transparency,
 			}, rows),