60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { useEditor } from '@tldraw/tldraw';
|
|
import { createGraphShape, createUserNodeFromProfile } from '../../../cc-base/shape-helpers/graph-helpers';
|
|
import { ccGraphShapeProps, getDefaultCCUserNodeProps } from '../../../cc-base/cc-graph/cc-graph-props';
|
|
import { useNeoUser } from '../../../../../contexts/NeoUserContext';
|
|
import { logger } from '../../../../../debugConfig';
|
|
import './panel.css';
|
|
import { GraphShapeType } from '../../../cc-base/cc-graph/cc-graph-types';
|
|
|
|
export const CCGraphPanel = () => {
|
|
const editor = useEditor();
|
|
const { userNode } = useNeoUser();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const graphShapeTypes = Object.keys(ccGraphShapeProps);
|
|
|
|
const handleShapeSelect = (shapeType: GraphShapeType) => {
|
|
if (shapeType === 'cc-user-node') {
|
|
if (!userNode) {
|
|
logger.warn('graph-panel', '⚠️ Cannot create user node - no user data available')
|
|
return;
|
|
}
|
|
const defaultProps = getDefaultCCUserNodeProps();
|
|
createUserNodeFromProfile(editor, {
|
|
...defaultProps,
|
|
...userNode
|
|
});
|
|
} else {
|
|
createGraphShape(editor, shapeType);
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="panel-container">
|
|
<div className="panel-section">
|
|
<button
|
|
className="shape-button"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
Add Graph Node
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="panel-dropdown">
|
|
{graphShapeTypes.map((shapeType) => (
|
|
<button
|
|
key={shapeType}
|
|
className="shape-button"
|
|
onClick={() => handleShapeSelect(shapeType as GraphShapeType)}
|
|
>
|
|
{shapeType.replace('cc-', '').replace('-node', '')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|