alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hide/unhide buttons to example

Browse Source
This commit is contained in:
peterkogo
2025-09-02 11:45:08 +02:00
parent 62fd1e0d9d
commit 086b28e3a0
2 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/Basic/index.tsx
+48 -38
View File
@@ -1,4 +1,4 @@
import { MouseEvent, useCallback } from 'react'; import { MouseEvent, useCallback, useState } from 'react';
import { import {
ReactFlow, ReactFlow,
MiniMap, MiniMap,
@@ -134,47 +134,57 @@ const BasicFlow = () => {
}); });
fitView(); fitView();
}; };
const [isHidden, setIsHidden] = useState(false);
const toggleVisibility = () => {
setIsHidden(!isHidden);
};
return ( return (
<ReactFlow <>
defaultNodes={initialNodes} <ReactFlow
defaultEdges={initialEdges} defaultNodes={initialNodes}
onNodesChange={console.log} defaultEdges={initialEdges}
onNodeClick={onNodeClick} onNodesChange={console.log}
onNodeDragStop={onNodeDragStop} onNodeClick={onNodeClick}
onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop}
onNodeDrag={onNodeDrag} onNodeDragStart={onNodeDragStart}
onSelectionDragStart={printSelectionEvent('selection drag start')} onNodeDrag={onNodeDrag}
onSelectionDrag={printSelectionEvent('selection drag')} onSelectionDragStart={printSelectionEvent('selection drag start')}
onSelectionDragStop={printSelectionEvent('selection drag stop')} onSelectionDrag={printSelectionEvent('selection drag')}
className="react-flow-basic-example" onSelectionDragStop={printSelectionEvent('selection drag stop')}
minZoom={0.2} className="react-flow-basic-example"
maxZoom={4} style={{ display: isHidden ? 'none' : 'block' }}
fitView minZoom={0.2}
fitViewOptions={fitViewOptions} maxZoom={4}
defaultEdgeOptions={defaultEdgeOptions} fitView
selectNodesOnDrag={false} fitViewOptions={fitViewOptions}
elevateEdgesOnSelect defaultEdgeOptions={defaultEdgeOptions}
elevateNodesOnSelect={false} selectNodesOnDrag={false}
nodeDragThreshold={0} elevateEdgesOnSelect
> elevateNodesOnSelect={false}
<Background variant={BackgroundVariant.Dots} /> nodeDragThreshold={0}
<MiniMap /> >
<Controls /> <Background variant={BackgroundVariant.Dots} />
<MiniMap />
<Controls />
<Panel position="top-right"> <Panel position="top-right">
<button onClick={resetTransform}>reset transform</button> <button onClick={resetTransform}>reset transform</button>
<button onClick={updatePos}>change pos</button> <button onClick={updatePos}>change pos</button>
<button onClick={toggleClassnames}>toggle classnames</button> <button onClick={toggleClassnames}>toggle classnames</button>
<button onClick={logToObject}>toObject</button> <button onClick={logToObject}>toObject</button>
<button onClick={deleteSelectedElements}>deleteSelectedElements</button> <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
<button onClick={deleteSomeElements}>deleteSomeElements</button> <button onClick={deleteSomeElements}>deleteSomeElements</button>
<button onClick={onSetNodes}>setNodes</button> <button onClick={onSetNodes}>setNodes</button>
<button onClick={onUpdateNode}>updateNode</button> <button onClick={onUpdateNode}>updateNode</button>
<button onClick={addNode}>addNode</button> <button onClick={addNode}>addNode</button>
</Panel> </Panel>
</ReactFlow> </ReactFlow>
<button onClick={toggleVisibility} style={{ position: 'absolute', zIndex: 10, right: 10, top: 100 }}>
{isHidden ? 'Show' : 'Hide'} Flow
</button>
</>
); );
}; };
examples/svelte/src/routes/examples/overview/Flow.svelte
+16
View File
@@ -155,6 +155,8 @@
// console.log(edges.map((edge) => ({ id: edge.id, selected: edge.selected }))); // console.log(edges.map((edge) => ({ id: edge.id, selected: edge.selected })));
edges.forEach((edge) => console.log({ id: edge.id, selected: edge.selected })); edges.forEach((edge) => console.log({ id: edge.id, selected: edge.selected }));
}); });
let hidden = $state(false);
</script> </script>
<!-- oninit={() => console.log('on init')} <!-- oninit={() => console.log('on init')}
@@ -197,6 +199,7 @@
}} --> }} -->
<SvelteFlow <SvelteFlow
style="display:{hidden ? 'none' : 'block'}"
bind:nodes bind:nodes
bind:edges bind:edges
{nodeTypes} {nodeTypes}
@@ -247,7 +250,20 @@
<InitTracker /> <InitTracker />
</SvelteFlow> </SvelteFlow>
<button
class="hide"
onclick={() => {
hidden = !hidden;
}}>Hide/Unhide</button
>
<style> <style>
.hide {
position: absolute;
top: 80px;
right: 15px;
}
:root { :root {
/* --background-color: #ffffdd; */ /* --background-color: #ffffdd; */
--background-pattern-color: #5050ff; --background-pattern-color: #5050ff;