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

reduce nodes element count for performance

Browse Source
This commit is contained in:
AykutSarac 2022-09-03 18:32:29 +03:00
parent 29a217633b
commit 1f477e99d9
4 changed files with 45 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/CustomNode/ObjectNode.tsx
View File

@ -24,30 +24,25 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
x={0}
y={0}
ref={ref}
isObject
>
{(!performanceMode || inViewport) && (
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
{value.map((val, idx) => (
<Styled.StyledRow
data-key={JSON.stringify(val[1])}
data-x={x}
data-y={y}
key={idx}
width={`${width - 20}px`}
value={JSON.stringify(val[1])}
>
<Styled.StyledKey objectKey>
{JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
</Styled.StyledKey>
<Styled.StyledLinkItUrl>
{JSON.stringify(val[1])}
</Styled.StyledLinkItUrl>
</Styled.StyledRow>
))}
</Styled.StyledText>
</Styled.StyledTextWrapper>
)}
{(!performanceMode || inViewport) &&
value.map((val, idx) => (
<Styled.StyledRow
data-key={JSON.stringify(val[1])}
data-x={x}
data-y={y}
key={idx}
value={JSON.stringify(val[1])}
>
<Styled.StyledKey objectKey>
{JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
</Styled.StyledKey>
<Styled.StyledLinkItUrl>
{JSON.stringify(val[1])}
</Styled.StyledLinkItUrl>
</Styled.StyledRow>
))}
</Styled.StyledForeignObject>
);
};

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

@ -65,27 +65,21 @@ const TextNode: React.FC<
y={0}
data-nodeid={node.id}
ref={ref}
hideCollapse={hideCollapse}
hasCollapse={isParent && hasCollapse}
>
{(!performanceMode || inViewport) && (
<Styled.StyledTextWrapper>
<Styled.StyledText
hideCollapse={hideCollapse}
hasCollapse={isParent && hasCollapse}
width={width}
height={height}
>
<Styled.StyledKey
data-x={x}
data-y={y}
data-key={JSON.stringify(value)}
parent={isParent}
>
<Styled.StyledLinkItUrl>
{JSON.stringify(value).replaceAll('"', "")}
</Styled.StyledLinkItUrl>
</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
<Styled.StyledKey
data-x={x}
data-y={y}
data-key={JSON.stringify(value)}
parent={isParent}
hasToggle={hasCollapse}
>
<Styled.StyledLinkItUrl>
{JSON.stringify(value).replaceAll('"', "")}
</Styled.StyledLinkItUrl>
</Styled.StyledKey>
)}
{inViewport && isParent && hasCollapse && !hideCollapse && (

38
src/components/CustomNode/styles.tsx
View File

@ -12,35 +12,21 @@ export const StyledLinkItUrl = styled(LinkItUrl)`
pointer-events: all;
`;
export const StyledTextWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
`;
export const StyledText = styled.div<{
width: number;
height: number;
export const StyledForeignObject = styled.foreignObject<{
hasCollapse?: boolean;
hideCollapse?: boolean;
isObject?: boolean;
}>`
display: flex;
text-align: ${({ isObject }) => !isObject && "center"};
align-items: center;
justify-content: center;
font-size: 12px;
flex-direction: column;
width: ${({ width }) => width};
height: ${({ height }) => height};
min-height: 50;
overflow: hidden;
padding: 10px;
color: ${({ theme }) => theme.TEXT_NORMAL};
padding-right: ${({ hasCollapse, hideCollapse }) =>
hasCollapse && !hideCollapse && "20px"};
`;
export const StyledForeignObject = styled.foreignObject`
cursor: pointer;
pointer-events: none;
* {
@ -72,6 +58,7 @@ export const StyledForeignObject = styled.foreignObject`
export const StyledKey = styled.span<{
objectKey?: boolean;
parent?: boolean;
hasToggle?: boolean;
}>`
font-weight: 500;
color: ${({ theme, objectKey, parent }) =>
@ -81,18 +68,19 @@ export const StyledKey = styled.span<{
? theme.OBJECT_KEY
: theme.TEXT_POSITIVE};
font-size: ${({ parent }) => parent && "14px"};
padding-right: ${({ hasToggle }) => hasToggle && "30px"};
overflow: hidden;
text-overflow: ellipsis;
`;
export const StyledRow = styled.span.attrs<{
width: string;
value: string;
theme: DefaultTheme;
}>((props) => ({
style: {
width: props.width,
color: getTypeColor(props.value, props.theme),
},
}))<{ width: string; value: string; theme: DefaultTheme }>`
}))<{ value: string; theme: DefaultTheme }>`
height: 18px;
overflow: hidden;
text-overflow: ellipsis;

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

@ -26,7 +26,7 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
background-image: ${({ theme }) =>
`radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
background-size: 10px 10px;
background-size: 15px 15px;
:active {
cursor: move;