Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove the debounce when setting the backdrop for the ephemeral nodes (#1280)

Browse Source 
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
This commit is contained in:
Evan Simkowitz 2024-11-13 18:49:03 -08:00 committed by GitHub
parent b429e967e6
commit 14249b33b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/layout/lib/TileLayout.tsx
View File

@ -139,20 +139,20 @@ function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
const [showMagnifiedBackdrop, setShowMagnifiedBackdrop] = useState(!!ephemeralNode); const [showMagnifiedBackdrop, setShowMagnifiedBackdrop] = useState(!!ephemeralNode);
const [showEphemeralBackdrop, setShowEphemeralBackdrop] = useState(!!magnifiedNodeId); const [showEphemeralBackdrop, setShowEphemeralBackdrop] = useState(!!magnifiedNodeId);
const debouncedCallback = useCallback( const debouncedSetMagnifyBackdrop = useCallback(
debounce(100, (callback: () => void) => callback()), debounce(100, () => setShowMagnifiedBackdrop(true)),
[] []
); );
useEffect(() => { useEffect(() => {
if (magnifiedNodeId && !showMagnifiedBackdrop) { if (magnifiedNodeId && !showMagnifiedBackdrop) {
debouncedCallback(() => setShowMagnifiedBackdrop(true)); debouncedSetMagnifyBackdrop();
} }
if (!magnifiedNodeId) { if (!magnifiedNodeId) {
setShowMagnifiedBackdrop(false); setShowMagnifiedBackdrop(false);
} }
if (ephemeralNode && !showEphemeralBackdrop) { if (ephemeralNode && !showEphemeralBackdrop) {
debouncedCallback(() => setShowEphemeralBackdrop(true)); setShowEphemeralBackdrop(true);
} }
if (!ephemeralNode) { if (!ephemeralNode) {
setShowEphemeralBackdrop(false); setShowEphemeralBackdrop(false);