Merge pull request #238 from shivam1646/main

Fix: persist hidden nodes on rotate
This commit is contained in:
Aykut Saraç 2022-10-12 19:49:01 +03:00 committed by GitHub
commit 0737bcbbbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 2 deletions

View File

@ -47,6 +47,7 @@ const GraphComponent = ({
}: LayoutProps) => {
const [minScale, setMinScale] = React.useState(0.4);
const setGraphValue = useGraph(state => state.setGraphValue);
const setLoading = useGraph(state => state.setLoading);
const setConfig = useConfig(state => state.setConfig);
const centerView = useConfig(state => state.centerView);
const loading = useGraph(state => state.loading);
@ -85,12 +86,13 @@ const GraphComponent = ({
const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
setLoading(true);
setMinScale(scale);
setSize({ width: layout.width + 400, height: layout.height + 400 });
requestAnimationFrame(() => {
setTimeout(() => {
setGraphValue("loading", false);
setLoading(false);
setTimeout(() => changeRatio > 100 && centerView(), 0);
}, 0);
});

View File

@ -11,6 +11,7 @@ export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
const collapsedNodes = useGraph(state => state.collapsedNodes);
const collapsedEdges = useGraph(state => state.collapsedEdges);
const loading = useGraph(state => state.loading);
React.useEffect(() => {
const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
@ -26,7 +27,7 @@ export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
selectedNodes.forEach(node => node.classList.add("hide"));
selectedEdges.forEach(edge => edge.classList.add("hide"));
}
}, [collapsedNodes, collapsedEdges]);
}, [collapsedNodes, collapsedEdges, loading]);
return (
<>

View File

@ -17,6 +17,7 @@ export type Graph = typeof initialStates;
interface GraphActions {
setGraphValue: (key: keyof Graph, value: any) => void;
setLoading: (loading: boolean) => void;
expandNodes: (nodeId: string) => void;
collapseNodes: (nodeId: string) => void;
collapseGraph: () => void;
@ -32,6 +33,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
collapsedEdges: [],
[key]: value,
}),
setLoading: loading => set({ loading }),
expandNodes: nodeId => {
const [childrenNodes, matchingNodes] = getOutgoers(
nodeId,