GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix node collapse on shrink

Browse Source
This commit is contained in:
AykutSarac 2022-08-27 18:23:59 +03:00
parent 00fe7ac548
commit 48c827a25a
3 changed files with 5 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/CustomNode/TextNode.tsx
View File

@ -37,24 +37,17 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
}) => {
const performanceMode = useConfig((state) => state.performanceMode);
const hideCollapse = useStored((state) => state.hideCollapse);
const expand = useConfig((state) => state.expand);
const expandNodes = useGraph((state) => state.expandNodes);
const collapseNodes = useGraph((state) => state.collapseNodes);
const [isExpanded, setIsExpanded] = React.useState(!expand);
const [isExpanded, setIsExpanded] = React.useState(true);
const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
setIsExpanded(!isExpanded);
};
React.useEffect(() => {
setIsExpanded(!expand);
}, [expand]);
React.useEffect(() => {
if (isExpanded) collapseNodes(node.id);
else expandNodes(node.id);
}, [collapseNodes, expand, expandNodes, isExpanded, node.id]);
};
return (
<Styled.StyledForeignObject

7
src/components/Graph/index.tsx
View File

@ -136,11 +136,8 @@ export const Graph = ({ isWidget = false }: { isWidget?: boolean }) => {
const nodeList = collapsedNodes.map((id) => `[id*="node-${id}"]`);
const edgeList = collapsedEdges.map((id) => `[class*="edge-${id}"]`);
const nodes = document.querySelectorAll('[id*="node-"]');
const edges = document.querySelectorAll('[class*="edge-"]');
nodes.forEach((node) => node.classList.remove("hide"));
edges.forEach((edges) => edges.classList.remove("hide"));
const hiddenItems = document.querySelectorAll("hide");
hiddenItems.forEach((item) => item.classList.remove("hide"));
if (nodeList.length) {
const selectedNodes = document.querySelectorAll(nodeList.join(","));

32
src/components/Sidebar/index.tsx
View File

@ -4,11 +4,7 @@ import Link from "next/link";
import styled from "styled-components";
import { CanvasDirection } from "reaflow";
import { TiFlowMerge } from "react-icons/ti";
import {
CgArrowsMergeAltH,
CgArrowsShrinkH,
CgPerformance,
} from "react-icons/cg";
import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
import {
AiOutlineDelete,
AiFillGithub,
@ -51,28 +47,6 @@ const StyledElement = styled.div<{ beta?: boolean }>`
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
cursor: pointer;
${({ theme, beta }) =>
beta &&
`
&::after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
right: 0;
content: 'Beta';
font-size: 10px;
font-weight: 500;
background: ${theme.BLURPLE};
border-radius: 4px;
color: ${theme.FULL_WHITE};
padding: 2px;
height: 14px;
z-index: 0;
}
`};
svg {
padding: 8px;
vertical-align: middle;
@ -132,10 +106,6 @@ function rotateLayout(layout: CanvasDirection) {
return 360;
}
const StyledAlertIcon = styled(IoAlertCircleSharp)`
color: ${({ theme }) => theme.ORANGE};
`;
export const Sidebar: React.FC = () => {
const getJson = useConfig((state) => state.getJson);
const setConfig = useConfig((state) => state.setConfig);