forked from rojo-rbx/rojo
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
This commit is contained in:
boatbomber
GitHub
156
plugin/src/App/Components/VirtualScroller.lua
Normal file
156
plugin/src/App/Components/VirtualScroller.lua
Normal file
@@ -0,0 +1,156 @@
|
||||
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 bindingUtil = require(Plugin.App.bindingUtil)
|
||||
|
||||
local e = Roact.createElement
|
||||
|
||||
local VirtualScroller = Roact.Component:extend("VirtualScroller")
|
||||
|
||||
function VirtualScroller:init()
|
||||
self.scrollFrameRef = Roact.createRef()
|
||||
self:setState({
|
||||
WindowSize = Vector2.new(),
|
||||
CanvasPosition = Vector2.new(),
|
||||
})
|
||||
|
||||
self.totalCanvas, self.setTotalCanvas = Roact.createBinding(0)
|
||||
self.padding, self.setPadding = Roact.createBinding(0)
|
||||
|
||||
self:refresh()
|
||||
if self.props.updateEvent then
|
||||
self.connection = self.props.updateEvent:Connect(function()
|
||||
self:refresh()
|
||||
end)
|
||||
end
|
||||
end
|
||||
|
||||
function VirtualScroller:didMount()
|
||||
local rbx = self.scrollFrameRef:getValue()
|
||||
|
||||
local windowSizeSignal = rbx:GetPropertyChangedSignal("AbsoluteWindowSize")
|
||||
self.windowSizeChanged = windowSizeSignal:Connect(function()
|
||||
self:setState({ WindowSize = rbx.AbsoluteWindowSize })
|
||||
self:refresh()
|
||||
end)
|
||||
|
||||
local canvasPositionSignal = rbx:GetPropertyChangedSignal("CanvasPosition")
|
||||
self.canvasPositionChanged = canvasPositionSignal:Connect(function()
|
||||
if math.abs(rbx.CanvasPosition.Y - self.state.CanvasPosition.Y) > 5 then
|
||||
self:setState({ CanvasPosition = rbx.CanvasPosition })
|
||||
self:refresh()
|
||||
end
|
||||
end)
|
||||
|
||||
self:refresh()
|
||||
end
|
||||
|
||||
function VirtualScroller:willUnmount()
|
||||
self.windowSizeChanged:Disconnect()
|
||||
self.canvasPositionChanged:Disconnect()
|
||||
if self.connection then
|
||||
self.connection:Disconnect()
|
||||
self.connection = nil
|
||||
end
|
||||
end
|
||||
|
||||
function VirtualScroller:refresh()
|
||||
local props = self.props
|
||||
local state = self.state
|
||||
|
||||
local count = props.count
|
||||
local windowSize, canvasPosition = state.WindowSize.Y, state.CanvasPosition.Y
|
||||
local bottom = canvasPosition + windowSize
|
||||
|
||||
local minIndex, maxIndex = 1, count
|
||||
local padding, canvasSize = 0, 0
|
||||
|
||||
local pos = 0
|
||||
for i = 1, count do
|
||||
local height = props.getHeightBinding(i):getValue()
|
||||
canvasSize += height
|
||||
|
||||
if pos > bottom then
|
||||
-- Below window
|
||||
if maxIndex > i then
|
||||
maxIndex = i
|
||||
end
|
||||
end
|
||||
|
||||
pos += height
|
||||
|
||||
if pos < canvasPosition then
|
||||
-- Above window
|
||||
minIndex = i
|
||||
padding = pos - height
|
||||
end
|
||||
end
|
||||
|
||||
self.setPadding(padding)
|
||||
self.setTotalCanvas(canvasSize)
|
||||
self:setState({
|
||||
Start = minIndex,
|
||||
End = maxIndex,
|
||||
})
|
||||
end
|
||||
|
||||
function VirtualScroller:render()
|
||||
local props, state = self.props, self.state
|
||||
|
||||
local items = {}
|
||||
for i = state.Start, state.End do
|
||||
items["Item" .. i] = e("Frame", {
|
||||
LayoutOrder = i,
|
||||
Size = props.getHeightBinding(i):map(function(height)
|
||||
return UDim2.new(1, 0, 0, height)
|
||||
end),
|
||||
BackgroundTransparency = 1,
|
||||
}, props.render(i))
|
||||
end
|
||||
|
||||
return Theme.with(function(theme)
|
||||
return e("ScrollingFrame", {
|
||||
Size = props.size,
|
||||
Position = props.position,
|
||||
AnchorPoint = props.anchorPoint,
|
||||
BackgroundTransparency = props.backgroundTransparency or 1,
|
||||
BackgroundColor3 = props.backgroundColor3,
|
||||
BorderColor3 = props.borderColor3,
|
||||
CanvasSize = self.totalCanvas:map(function(s)
|
||||
return UDim2.fromOffset(0, s)
|
||||
end),
|
||||
ScrollBarThickness = 9,
|
||||
ScrollBarImageColor3 = theme.ScrollBarColor,
|
||||
ScrollBarImageTransparency = props.transparency:map(function(value)
|
||||
return bindingUtil.blendAlpha({ 0.65, value })
|
||||
end),
|
||||
TopImage = Assets.Images.ScrollBar.Top,
|
||||
MidImage = Assets.Images.ScrollBar.Middle,
|
||||
BottomImage = Assets.Images.ScrollBar.Bottom,
|
||||
|
||||
ElasticBehavior = Enum.ElasticBehavior.Always,
|
||||
ScrollingDirection = Enum.ScrollingDirection.Y,
|
||||
VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
|
||||
[Roact.Ref] = self.scrollFrameRef,
|
||||
}, {
|
||||
Layout = e("UIListLayout", {
|
||||
Padding = UDim.new(0, 0),
|
||||
SortOrder = Enum.SortOrder.LayoutOrder,
|
||||
FillDirection = Enum.FillDirection.Vertical,
|
||||
}),
|
||||
Padding = e("UIPadding", {
|
||||
PaddingTop = self.padding:map(function(p)
|
||||
return UDim.new(0, p)
|
||||
end),
|
||||
}),
|
||||
Content = Roact.createFragment(items),
|
||||
})
|
||||
end)
|
||||
end
|
||||
|
||||
return VirtualScroller
|
||||
Reference in New Issue
Block a user