mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-04-21 05:06:29 +00:00
Visualize table changes (#834)
Implements a pop out diff view for table properties like Attributes and Tags
This commit is contained in:
boatbomber
GitHub
208
plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua
Normal file
208
plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua
Normal file
@@ -0,0 +1,208 @@
|
||||
local Rojo = script:FindFirstAncestor("Rojo")
|
||||
local Plugin = Rojo.Plugin
|
||||
local Packages = Rojo.Packages
|
||||
|
||||
local Roact = require(Packages.Roact)
|
||||
|
||||
local Assets = require(Plugin.Assets)
|
||||
local Theme = require(Plugin.App.Theme)
|
||||
|
||||
local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
|
||||
local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
|
||||
|
||||
local e = Roact.createElement
|
||||
|
||||
local Dictionary = Roact.Component:extend("Dictionary")
|
||||
|
||||
function Dictionary:init()
|
||||
self:setState({
|
||||
diff = self:calculateDiff(),
|
||||
})
|
||||
end
|
||||
|
||||
function Dictionary:calculateDiff()
|
||||
local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
|
||||
|
||||
-- Diff the two tables and find the added keys, removed keys, and changed keys
|
||||
local diff = {}
|
||||
|
||||
for key, oldValue in oldTable do
|
||||
local newValue = newTable[key]
|
||||
if newValue == nil then
|
||||
table.insert(diff, {
|
||||
key = key,
|
||||
patchType = "Remove",
|
||||
})
|
||||
elseif newValue ~= oldValue then
|
||||
-- Note: should this do some sort of deep comparison for various types?
|
||||
table.insert(diff, {
|
||||
key = key,
|
||||
patchType = "Edit",
|
||||
})
|
||||
else
|
||||
table.insert(diff, {
|
||||
key = key,
|
||||
patchType = "Remain",
|
||||
})
|
||||
end
|
||||
end
|
||||
for key in newTable do
|
||||
if oldTable[key] == nil then
|
||||
table.insert(diff, {
|
||||
key = key,
|
||||
patchType = "Add",
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
table.sort(diff, function(a, b)
|
||||
return a.key < b.key
|
||||
end)
|
||||
|
||||
return diff
|
||||
end
|
||||
|
||||
function Dictionary:didUpdate(previousProps)
|
||||
if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
|
||||
self:setState({
|
||||
diff = self:calculateDiff(),
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
function Dictionary:render()
|
||||
local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
|
||||
local diff = self.state.diff
|
||||
|
||||
return Theme.with(function(theme)
|
||||
local lines = table.create(#diff)
|
||||
for order, line in diff do
|
||||
local key = line.key
|
||||
local oldValue = oldTable[key]
|
||||
local newValue = newTable[key]
|
||||
|
||||
table.insert(
|
||||
lines,
|
||||
e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 25),
|
||||
LayoutOrder = order,
|
||||
BorderSizePixel = 0,
|
||||
BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
|
||||
BackgroundColor3 = if line.patchType == "Remain"
|
||||
then theme.Diff.Row
|
||||
else theme.Diff[line.patchType],
|
||||
}, {
|
||||
DiffIcon = if line.patchType ~= "Remain"
|
||||
then e("ImageLabel", {
|
||||
Image = Assets.Images.Diff[line.patchType],
|
||||
ImageColor3 = theme.AddressEntry.PlaceholderColor,
|
||||
ImageTransparency = self.props.transparency,
|
||||
BackgroundTransparency = 1,
|
||||
Size = UDim2.new(0, 15, 0, 15),
|
||||
Position = UDim2.new(0, 7, 0.5, 0),
|
||||
AnchorPoint = Vector2.new(0, 0.5),
|
||||
})
|
||||
else nil,
|
||||
KeyName = e("TextLabel", {
|
||||
Size = UDim2.new(0.3, -15, 1, 0),
|
||||
Position = UDim2.new(0, 30, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
Text = key,
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
Font = Enum.Font.GothamMedium,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
}),
|
||||
OldValue = e("Frame", {
|
||||
Size = UDim2.new(0.35, -7, 1, 0),
|
||||
Position = UDim2.new(0.3, 15, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
}, {
|
||||
e(DisplayValue, {
|
||||
value = oldValue,
|
||||
transparency = self.props.transparency,
|
||||
textColor = theme.Settings.Setting.DescriptionColor,
|
||||
}),
|
||||
}),
|
||||
NewValue = e("Frame", {
|
||||
Size = UDim2.new(0.35, -8, 1, 0),
|
||||
Position = UDim2.new(0.65, 8, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
}, {
|
||||
e(DisplayValue, {
|
||||
value = newValue,
|
||||
transparency = self.props.transparency,
|
||||
textColor = theme.Settings.Setting.DescriptionColor,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
)
|
||||
end
|
||||
|
||||
return Roact.createFragment({
|
||||
Headers = e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 25),
|
||||
BackgroundTransparency = self.props.transparency:map(function(t)
|
||||
return 0.95 + (0.05 * t)
|
||||
end),
|
||||
BackgroundColor3 = theme.Diff.Row,
|
||||
}, {
|
||||
ColumnA = e("TextLabel", {
|
||||
Size = UDim2.new(0.3, -15, 1, 0),
|
||||
Position = UDim2.new(0, 30, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
Text = "Key",
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
}),
|
||||
ColumnB = e("TextLabel", {
|
||||
Size = UDim2.new(0.35, -7, 1, 0),
|
||||
Position = UDim2.new(0.3, 15, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
Text = "Old",
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
}),
|
||||
ColumnC = e("TextLabel", {
|
||||
Size = UDim2.new(0.35, -8, 1, 0),
|
||||
Position = UDim2.new(0.65, 8, 0, 0),
|
||||
BackgroundTransparency = 1,
|
||||
Text = "New",
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
}),
|
||||
Separator = e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 1),
|
||||
Position = UDim2.new(0, 0, 1, 0),
|
||||
BackgroundTransparency = 0,
|
||||
BorderSizePixel = 0,
|
||||
BackgroundColor3 = theme.BorderedContainer.BorderColor,
|
||||
}),
|
||||
}),
|
||||
KeyValues = e(ScrollingFrame, {
|
||||
position = UDim2.new(0, 1, 0, 25),
|
||||
size = UDim2.new(1, -2, 1, -27),
|
||||
scrollingDirection = Enum.ScrollingDirection.Y,
|
||||
transparency = self.props.transparency,
|
||||
}, {
|
||||
Layout = e("UIListLayout", {
|
||||
SortOrder = Enum.SortOrder.LayoutOrder,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Top,
|
||||
}),
|
||||
Lines = Roact.createFragment(lines),
|
||||
}),
|
||||
})
|
||||
end)
|
||||
end
|
||||
|
||||
return Dictionary
|
||||
Reference in New Issue
Block a user