File size: 1,607 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 |
import React from "react";
import dynamic from "next/dynamic";
import { NodeProps } from "reaflow";
import useGraph from "src/store/useGraph";
import useModal from "src/store/useModal";
import { NodeData } from "src/types/graph";
import { ObjectNode } from "./ObjectNode";
import { TextNode } from "./TextNode";
const Node = dynamic(() => import("reaflow").then(r => r.Node), {
ssr: false,
});
export interface CustomNodeProps {
node: NodeData;
x: number;
y: number;
hasCollapse?: boolean;
}
const rootProps = {
rx: 50,
ry: 50,
};
const CustomNodeWrapper = (nodeProps: NodeProps<NodeData["data"]>) => {
const data = nodeProps.properties.data;
const setSelectedNode = useGraph(state => state.setSelectedNode);
const setVisible = useModal(state => state.setVisible);
const handleNodeClick = React.useCallback(
(_: React.MouseEvent<SVGGElement, MouseEvent>, data: NodeData) => {
if (setSelectedNode) setSelectedNode(data);
setVisible("node")(true);
},
[setSelectedNode, setVisible]
);
return (
<Node
{...nodeProps}
{...(data?.isEmpty && rootProps)}
onClick={handleNodeClick as any}
animated={false}
label={null as any}
>
{({ node, x, y }) => {
if (Array.isArray(nodeProps.properties.text)) {
if (data?.isEmpty) return null;
return <ObjectNode node={node as NodeData} x={x} y={y} />;
}
return <TextNode node={node as NodeData} hasCollapse={!!data?.childrenCount} x={x} y={y} />;
}}
</Node>
);
};
export const CustomNode = React.memo(CustomNodeWrapper);
|