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} x={0}
y={0} y={0}
ref={ref} ref={ref}
isObject
> >
{(!performanceMode || inViewport) && ( {(!performanceMode || inViewport) &&
<Styled.StyledTextWrapper> value.map((val, idx) => (
<Styled.StyledText width={width} height={height}> <Styled.StyledRow
{value.map((val, idx) => ( data-key={JSON.stringify(val[1])}
<Styled.StyledRow data-x={x}
data-key={JSON.stringify(val[1])} data-y={y}
data-x={x} key={idx}
data-y={y} value={JSON.stringify(val[1])}
key={idx} >
width={`${width - 20}px`} <Styled.StyledKey objectKey>
value={JSON.stringify(val[1])} {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
> </Styled.StyledKey>
<Styled.StyledKey objectKey> <Styled.StyledLinkItUrl>
{JSON.stringify(val[0]).replaceAll('"', "")}:{" "} {JSON.stringify(val[1])}
</Styled.StyledKey> </Styled.StyledLinkItUrl>
<Styled.StyledLinkItUrl> </Styled.StyledRow>
{JSON.stringify(val[1])} ))}
</Styled.StyledLinkItUrl>
</Styled.StyledRow>
))}
</Styled.StyledText>
</Styled.StyledTextWrapper>
)}
</Styled.StyledForeignObject> </Styled.StyledForeignObject>
); );
}; };

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

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

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

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