The migration tool we used didn't take into account our formatting
standards so I'm bulk-formatting the SCSS files to bring them back up to
our standards. Basically this just changes the tab size for all the
files.
I added this debounce to delay the blurring of the background nodes when
a node was magnified to account for the animation, but it looks weird
for the ephemeral nodes since there's no animation when first showing
them. When we work on node creation animations maybe I'll add back this
delay
Ephemeral blocks can now be added to the LayoutModel for a tab. Only one
ephemeral block can exist at a time. It is placed above all other
blocks, including the magnified blocks.
Updates how magnified and ephemeral blocks overlay the other blocks.
Now, there's a blurred backdrop behind them that will obscure the other
blocks. As a result of this, the overlayed blocks are now translucent.
This was hard to debug. It manifested in nodes that had been collapsed
into their parent. When a node was dragged over the recently-collapsed
node, the placeholder would show the action as if the flex direction was
reversed. It turns out useDrag has trouble tracking changes to the
LayoutNode objects. For now, I am just finding the nodes again in the
computeMoveNode function. Later when I redo the drag system, I will fix
this better.
Rather than try to track the transition state, which was proving
unreliable, I am just directly tracking the node state and determining
whether to debounce the inner rect based on whether the user has the
prefers-reduced-motion setting or query, whether the node is resizing,
and whether it's currently magnified. I'm then using the actual
animation time setting to determine how long to debounce.
Adds a new setting for the gap size between tiles in a layout. Also
updates the resize handle calculations so they are dynamically generated
based on the gap size. Also updates the styling for the resize handles
to be more robust.
This also updates the default gap size to 3px.
This also slims out the Block Frame padding so it is just enough that
the blocks don't overlap when there's no gap.
This handles an edge case where a user deletes all unmagnified nodes,
leaving a final node that is still magnified. Because we ignore
magnify/unmagnify operations when there's only one leaf remaining, this
would result in the last node being stuck magnified until a new node is
added.
Also fixes a bug where the layout would not always update when a new
block was added.
Fixes an infinite loop in the layoutModel atom synchronization that
would cause the atom to update indefinitely when the root node is
deleted.
Also adds a dedicated `disabled` flag for the IconButton decl so we can
disable the onClick handler when the button is disabled.
Also updates the Magnify toggle button to use this new flag, so that
when there's only one leaf in a layout, the magnify button is disabed.
Adds a delay to the resize handle line first showing so it doesn't flicker when the mouse briefly passes over it. Also removes an unnecessary findNode call that was happening on every move. Also adjusts the pointer offset based on the display container bounding rect.
Rather than using a timeout to debounce changes to the
NodeModel.innerRect, I'll use a transition event on the display
container. This way, if the user disables transitions using the reduced
motion setting, changes to the innerRect value will not be debounced.
Adds a flag to the insert layout action to explicitly set the focus of a
newly inserted node. This also adds a flag in the starter layout to
focus on the terminal block.
Make the block content sizing update once when its node moves or becomes
magnified. By manually updating this inner sizing rather than letting
the block flow in the DOM, the animations of the block frames are much
smoother.
This also fixes an issue where two scrollbars were being rendered for
the Directory Preview widget.
This also sets zero padding on nodes when there's only a single node
being rendered.
