Merge pull request #157 from AykutSarac/editor-perf

Improve Editor Rerender Performance
This commit is contained in:
Aykut Saraç 2022-09-11 13:24:25 +03:00 committed by GitHub
commit d7d90ad742
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 14 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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 (