useHideNodes.tsx 1009 B

123456789101112131415161718192021222324252627282930313233
  1. import React from "react";
  2. import useGraph from "src/store/useGraph";
  3. const useHideNodes = () => {
  4. const collapsedNodes = useGraph(state => state.collapsedNodes);
  5. const collapsedEdges = useGraph(state => state.collapsedEdges);
  6. const nodeList = React.useMemo(
  7. () => collapsedNodes.map(id => `[id$="node-${id}"]`),
  8. [collapsedNodes]
  9. );
  10. const edgeList = React.useMemo(
  11. () => collapsedEdges.map(id => `[class$="edge-${id}"]`),
  12. [collapsedEdges]
  13. );
  14. const checkNodes = () => {
  15. const hiddenItems = document.querySelectorAll(".hide");
  16. hiddenItems.forEach(item => item.classList.remove("hide"));
  17. if (nodeList.length > 1) {
  18. const selectedNodes = document.querySelectorAll(nodeList.join(","));
  19. const selectedEdges = document.querySelectorAll(edgeList.join(","));
  20. selectedNodes.forEach(node => node.classList.add("hide"));
  21. selectedEdges.forEach(edge => edge.classList.add("hide"));
  22. }
  23. };
  24. return { checkNodes };
  25. };
  26. export default useHideNodes;