45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useMemo } from 'react';
|
||
|
|
import { Handle, Position } from 'reactflow';
|
||
|
|
|
||
|
|
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||
|
|
import { ISyntaxTreeNode } from '@/models/rslang';
|
||
|
|
import { colorBgSyntaxTree } from '@/styling/color';
|
||
|
|
import { labelSyntaxTree } from '@/utils/labels';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Represents graph AST node internal data.
|
||
|
|
*/
|
||
|
|
interface ASTNodeInternal {
|
||
|
|
id: string;
|
||
|
|
data: ISyntaxTreeNode;
|
||
|
|
dragging: boolean;
|
||
|
|
xPos: number;
|
||
|
|
yPos: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ASTNode(node: ASTNodeInternal) {
|
||
|
|
const { colors } = useConceptOptions();
|
||
|
|
const label = useMemo(() => labelSyntaxTree(node.data), [node.data]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
|
||
|
|
<div
|
||
|
|
className='w-full h-full cursor-default flex items-center justify-center rounded-full'
|
||
|
|
style={{ backgroundColor: colorBgSyntaxTree(node.data, colors) }}
|
||
|
|
/>
|
||
|
|
<Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
|
||
|
|
<div
|
||
|
|
className='font-math mt-1 w-fit px-1 text-center translate-x-[calc(-50%+20px)]'
|
||
|
|
style={{ backgroundColor: colors.bgDefault, fontSize: label.length > 3 ? 12 : 14 }}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ASTNode;
|