mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
Merge pull request #157 from AykutSarac/editor-perf
Improve Editor Rerender Performance
This commit is contained in:
commit
d7d90ad742
@ -6,7 +6,9 @@ import * as Styled from "./styles";
|
||||
|
||||
const inViewport = true;
|
||||
|
||||
const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
|
||||
type ObjectNodeProps = CustomNodeProps<[string, string][]>;
|
||||
|
||||
const ObjectNode: React.FC<ObjectNodeProps> = ({
|
||||
width,
|
||||
height,
|
||||
value,
|
||||
@ -46,4 +48,8 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default ObjectNode;
|
||||
function propsAreEqual(prev: ObjectNodeProps, next: ObjectNodeProps) {
|
||||
return prev.width === next.width && prev.height === next.height;
|
||||
}
|
||||
|
||||
export default React.memo(ObjectNode, propsAreEqual);
|
||||
|
@ -35,9 +35,12 @@ const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TextNode: React.FC<
|
||||
CustomNodeProps<string> & { node: NodeData; hasCollapse: boolean }
|
||||
> = ({
|
||||
type TextNodeProps = CustomNodeProps<string> & {
|
||||
node: NodeData;
|
||||
hasCollapse: boolean;
|
||||
};
|
||||
|
||||
const TextNode: React.FC<TextNodeProps> = ({
|
||||
node,
|
||||
width,
|
||||
height,
|
||||
@ -99,4 +102,8 @@ const TextNode: React.FC<
|
||||
);
|
||||
};
|
||||
|
||||
export default TextNode;
|
||||
function propsAreEqual(prev: TextNodeProps, next: TextNodeProps) {
|
||||
return prev.value === next.value;
|
||||
}
|
||||
|
||||
export default React.memo(TextNode, propsAreEqual);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { Label, Node, NodeProps } from "reaflow";
|
||||
import { Node, NodeProps } from "reaflow";
|
||||
import ObjectNode from "./ObjectNode";
|
||||
import TextNode from "./TextNode";
|
||||
|
||||
@ -12,17 +12,11 @@ export interface CustomNodeProps<T> {
|
||||
y: number;
|
||||
}
|
||||
|
||||
const baseLabelStyle = {
|
||||
fill: "transparent",
|
||||
stroke: "transparent",
|
||||
strokeWidth: 0,
|
||||
};
|
||||
|
||||
export const CustomNode = (nodeProps: NodeProps) => {
|
||||
const { properties } = nodeProps;
|
||||
|
||||
return (
|
||||
<Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
|
||||
<Node {...nodeProps} label={<React.Fragment />}>
|
||||
{({ width, height, x, y, node }) => {
|
||||
if (Array.isArray(properties.text)) {
|
||||
return (
|
||||
|
Loading…
x
Reference in New Issue
Block a user