Add visual diffs to syncing (#603)

* Add user confirmation to initial sync * Use "Accept" instead of "Confirm" * Draw tree alphabetically for determinism * Add diff table dropdown * Add diff table to newly added objects * Unblock keybind workflow * Only show reject button when two way is enabled * Try to patch back to the files when changes are rejected * Improve text spacing of the prop diff table * Skip user confirmation of perfect syncs * Give instances names for debugging UI * Optimize tree building * Efficiency: dynamic virtual scrolling & lazy rendering * Simplify virtual scroller logic and avoid wasteful rerenders * Remove debug print * Consistent naming * Move new patch applied callback into accept * Pcall archivable * Keybinds open popup diff window * Theme rows in diff * Remove relic of prototype * Color value visuals and better component name * changeBatcher is not needed when no sync is active * Simplify popup roact entrypoint * Alphabetical prop lists and refactor * Add a stroke to color blot for contrast * Make color blots animate transparency with the rest of the page * StyLua formatting on newly added files * Remove wasteful table * Fix diffing custom properties * Display tables more meaningfully * Allow children in the button components * Create a rough tooltip component * Add tooltips to buttons * Use provider+trigger schema to avoid tooltip ZIndex issues * Add triangle point to tooltip * Tooltip underneath instead of covering * Cancel hovers when unmounting * Allow multiple canvases from one provider * Display above or below depending on available space * Move patch equality to PatchSet.isEqual * Use Container * Remove old submodules * Reduce false positives in diff * Add debug log * Fuzzy equals CFrame in diffs to avoid floating point in * Fix decodeValue usage * Support the .changedName patches * Fix content overlapping border * Fix tooltip tail alignment * Fix tooltip text fit * Whoops, fix it properly * Move PatchVisualizer to Components * Provide Connected info with full patch data * Avoid implicit nil return * Add patch visualizer to connected page * Make Current column invisible when visualizing applied patches * Avoid floating point diffs in a numbers and vectors
2023-04-01 23:17:23 -04:00
parent 7994bc4909
commit b5ed952d5c
19 changed files with 1618 additions and 81 deletions
--- a/plugin/src/App/Components/PatchVisualizer/DisplayValue.lua
+++ b/plugin/src/App/Components/PatchVisualizer/DisplayValue.lua
@@ -0,0 +1,107 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local e = Roact.createElement
+
+local function DisplayValue(props)
+	return Theme.with(function(theme)
+		local t = typeof(props.value)
+		if t == "Color3" then
+			-- Colors get a blot that shows the color
+			return Roact.createFragment({
+				Blot = e("Frame", {
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = props.value,
+					Size = UDim2.new(0, 20, 0, 20),
+					Position = UDim2.new(0, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0, 0.5),
+				}, {
+					Corner = e("UICorner", {
+						CornerRadius = UDim.new(0, 4),
+					}),
+					Stroke = e("UIStroke", {
+						Color = theme.BorderedContainer.BorderColor,
+						Transparency = props.transparency,
+					}),
+				}),
+				Label = e("TextLabel", {
+					Text = string.format("%d,%d,%d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
+					BackgroundTransparency = 1,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = props.transparency,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					Size = UDim2.new(1, -25, 1, 0),
+					Position = UDim2.new(0, 25, 0, 0),
+				}),
+			})
+
+		elseif t == "table" then
+			-- Showing a memory address for tables is useless, so we want to show the best we can
+			local textRepresentation = nil
+
+			local meta = getmetatable(props.value)
+			if meta and meta.__tostring then
+				-- If the table has a tostring metamethod, use that
+				textRepresentation = tostring(props.value)
+			elseif next(props.value) == nil then
+				-- If it's empty, show empty braces
+				textRepresentation = "{}"
+			else
+				-- If it has children, list them out
+				local out, i = {}, 0
+				for k, v in pairs(props.value) do
+					i += 1
+
+					-- Wrap strings in quotes
+					if type(k) == "string" then
+						k = "\"" .. k .. "\""
+					end
+					if type(v) == "string" then
+						v = "\"" .. v .. "\""
+					end
+
+					out[i] = string.format("[%s] = %s", tostring(k), tostring(v))
+				end
+				textRepresentation = "{ " .. table.concat(out, ", ") .. " }"
+			end
+
+			return e("TextLabel", {
+				Text = textRepresentation,
+				BackgroundTransparency = 1,
+				Font = Enum.Font.GothamMedium,
+				TextSize = 14,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+				TextTruncate = Enum.TextTruncate.AtEnd,
+				Size = UDim2.new(1, 0, 1, 0),
+			})
+		end
+
+		-- TODO: Maybe add visualizations to other datatypes?
+		-- Or special text handling tostring for some?
+		-- Will add as needed, let's see what cases arise.
+
+		return e("TextLabel", {
+			Text = string.gsub(tostring(props.value), "%s", " "),
+			BackgroundTransparency = 1,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 14,
+			TextColor3 = theme.Settings.Setting.DescriptionColor,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTransparency = props.transparency,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			Size = UDim2.new(1, 0, 1, 0),
+		})
+	end)
+end
+
+return DisplayValue