File size: 3,749 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import React from "react";
import styled from "styled-components";
import { MdLink, MdLinkOff } from "react-icons/md";
import { CustomNodeProps } from "src/containers/Views/GraphView/CustomNode";
import useToggleHide from "src/hooks/useToggleHide";
import { isContentImage } from "src/lib/utils/graph/calculateNodeSize";
import useConfig from "src/store/useConfig";
import useGraph from "src/store/useGraph";
import { TextRenderer } from "./TextRenderer";
import * as Styled from "./styles";
const StyledExpand = styled.button`
pointer-events: all;
display: inline-flex;
align-items: center;
justify-content: center;
color: ${({ theme }) => theme.TEXT_NORMAL};
background: rgba(0, 0, 0, 0.1);
height: 100%;
width: 40px;
border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
&:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}
`;
const StyledTextNodeWrapper = styled.span<{ $hasCollapse: boolean }>`
display: flex;
justify-content: ${({ $hasCollapse }) => ($hasCollapse ? "space-between" : "center")};
align-items: center;
height: 100%;
width: 100%;
`;
const StyledImageWrapper = styled.div`
padding: 5px;
`;
const StyledImage = styled.img`
border-radius: 2px;
object-fit: contain;
background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
`;
const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
const {
id,
text,
width,
height,
data: { isParent, childrenCount, type },
} = node;
const { validateHiddenNodes } = useToggleHide();
const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
const childrenCountVisible = useConfig(state => state.childrenCountVisible);
const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
const expandNodes = useGraph(state => state.expandNodes);
const collapseNodes = useGraph(state => state.collapseNodes);
const isExpanded = useGraph(state => state.collapsedParents.includes(id));
const isImage = imagePreviewEnabled && isContentImage(text as string);
const value = JSON.stringify(text).replaceAll('"', "");
const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (!isExpanded) collapseNodes(id);
else expandNodes(id);
validateHiddenNodes();
};
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
{isImage ? (
<StyledImageWrapper>
<StyledImage src={text as string} width="70" height="70" loading="lazy" />
</StyledImageWrapper>
) : (
<StyledTextNodeWrapper
data-x={x}
data-y={y}
data-key={JSON.stringify(text)}
$hasCollapse={isParent && collapseButtonVisible}
>
<Styled.StyledKey $value={value} $parent={isParent} $type={type}>
<TextRenderer>{value}</TextRenderer>
</Styled.StyledKey>
{isParent && childrenCount > 0 && childrenCountVisible && (
<Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>
)}
{isParent && hasCollapse && collapseButtonVisible && (
<StyledExpand aria-label="Expand" onClick={handleExpand}>
{isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
</StyledExpand>
)}
</StyledTextNodeWrapper>
)}
</Styled.StyledForeignObject>
);
};
function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
return (
prev.node.text === next.node.text &&
prev.node.width === next.node.width &&
prev.node.data.childrenCount === next.node.data.childrenCount
);
}
export const TextNode = React.memo(Node, propsAreEqual);
|