in src/components/node-text.js [45:100]
function NodeText({
data,
nodeTypes,
isSelected,
maxTitleChars = DEFAULT_NODE_TEXT_MAX_TITLE_CHARS,
lineOffset = DEFAULT_NODE_TEXT_LINE_OFFSET,
}: INodeTextProps) {
const nodeTextRef = useRef();
const title = data.title;
const className = useMemo(
() =>
GraphUtils.classNames('node-text', {
selected: isSelected,
}),
[isSelected]
);
// prevents the SVG click event from firing when the node text is selected
const handleTextClick = useCallback((event: any) => {
event.stopPropagation();
}, []);
const typeText = useMemo(() => getTypeText(data, nodeTypes), [
data,
nodeTypes,
]);
useEffect(() => {
d3.select(nodeTextRef.current).on('click', () => handleTextClick(d3.event));
}, [handleTextClick]);
return (
<text
ref={nodeTextRef}
className={className}
textAnchor="middle"
xmlns="http://www.w3.org/2000/svg"
>
{!!typeText && <tspan opacity="0.5">{typeText}</tspan>}
{title && (
<tspan
x={0}
dy={lineOffset}
fontSize="10px"
xmlns="http://www.w3.org/2000/svg"
>
{title.length > maxTitleChars
? title.substr(0, maxTitleChars)
: title}
</tspan>
)}
{title && <title>{title}</title>}
</text>
);
}