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

Merge pull request #52 from AykutSarac/optimize-rendering

Browse Source 
Optimize Rendering Performance
This commit is contained in:
Aykut Saraç 2022-06-09 21:09:56 +03:00 committed by GitHub
commit f68c2e3f5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -21,6 +21,7 @@
"react-dom": "^18.0.0",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-render-if-visible": "^2.1.0",
"react-zoom-pan-pinch": "^2.1.3",
"reaflow": "^5.0.4",
"save-html-as-image": "^1.7.1",

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

@ -1,4 +1,5 @@
import React from "react";
import RenderIfVisible from "react-render-if-visible";
import { CustomNodeProps } from ".";
import * as Styled from "./styles";
@ -11,25 +12,27 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
}) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
{value.map(
(val, idx) =>
val[1] && (
<Styled.StyledRow
data-key={val[1]}
data-x={x}
data-y={y}
key={idx}
width={width}
>
<Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
{val[1]}
</Styled.StyledRow>
)
)}
</Styled.StyledText>
</Styled.StyledTextWrapper>
<RenderIfVisible>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
{value.map(
(val, idx) =>
val[1] && (
<Styled.StyledRow
data-key={val[1]}
data-x={x}
data-y={y}
key={idx}
width={width}
>
<Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
{val[1]}
</Styled.StyledRow>
)
)}
</Styled.StyledText>
</Styled.StyledTextWrapper>
</RenderIfVisible>
</Styled.StyledForeignObject>
);
};

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

@ -1,4 +1,5 @@
import React from "react";
import RenderIfVisible from "react-render-if-visible";
import { CustomNodeProps } from ".";
import * as Styled from "./styles";
@ -8,15 +9,24 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
value,
isParent = false,
x,
y
y,
}) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
<Styled.StyledKey data-x={x} data-y={y} data-key={value} parent={isParent}>{value}</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
<RenderIfVisible>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
<Styled.StyledKey
data-x={x}
data-y={y}
data-key={value}
parent={isParent}
>
{value}
</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
</RenderIfVisible>
</Styled.StyledForeignObject>
);
};

23
src/components/CustomNode/index.tsx
View File

@ -19,34 +19,33 @@ const baseLabelStyle = {
};
export const CustomNode = (nodeProps: NodeProps) => {
const { properties: data } = nodeProps;
const { properties } = nodeProps;
return (
<Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
{() => {
const { width, height } = nodeProps;
{({ width, height, x, y }) => {
if (properties.text instanceof Object) {
const entries = Object.entries<string>(properties.text);
if (data.text instanceof Object) {
const entries = Object.entries<string>(data.text);
return (
<ObjectNode
x={nodeProps.x}
y={nodeProps.y}
value={entries}
width={width}
height={height}
value={entries}
x={x}
y={y}
/>
);
}
return (
<TextNode
isParent={data.data.isParent}
isParent={properties.data.isParent}
value={properties.text}
width={width}
height={height}
value={data.text}
x={nodeProps.x}
y={nodeProps.y}
x={x}
y={y}
/>
);
}}

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

@ -3,7 +3,7 @@ import React from "react";
const isDevelopment = process.env.NODE_ENV === "development";
export const GoogleAnalytics = () => {
export const GoogleAnalytics: React.FC = () => {
if (isDevelopment) return null;
return (

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

@ -4,7 +4,7 @@ import { CustomNode } from "src/components/CustomNode";
import { useConfig } from "src/hocs/config";
import { getEdgeNodes } from "src/containers/LiveEditor/helpers";
export const Graph = () => {
export const Graph: React.FC = () => {
const { json, settings } = useConfig();
const [nodes, setNodes] = React.useState<NodeData[]>([]);
const [edges, setEdges] = React.useState<EdgeData[]>([]);

5
yarn.lock
View File

@ -5367,6 +5367,11 @@ react-is@^18.0.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
react-render-if-visible@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-render-if-visible/-/react-render-if-visible-2.1.0.tgz#2a8d3c3e2f32394c78967bb58ee7546666831605"
integrity sha512-mOLrj0eDezdTB9zxjBaOOP+cOHVKhoCQCk6qZlHev9a6Edb0eQs2CfHqBa1PNq3kfCW28NAS8QJMXXMJsUonxw==
react-scrolllock@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-5.0.1.tgz#da1cfb7b6d55c86ae41dbad5274b778c307752b7"