diff --git a/src/App.css b/src/App.css index 6e6a4b1..7694195 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,8 @@ +html, +body { + margin: 0; + padding: 0; +} .node { border-radius: 4px; position: relative; diff --git a/src/App.tsx b/src/App.tsx index b68b4fd..772da5e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -48,27 +48,21 @@ function App() { }; return ( -
-
- -
- - - - -
- -
-
+
+ +
+ + + + +
+ +
); } diff --git a/src/components/Diagram/WrappedNode.tsx b/src/components/Diagram/WrappedNode.tsx index af6d045..c57b3ff 100644 --- a/src/components/Diagram/WrappedNode.tsx +++ b/src/components/Diagram/WrappedNode.tsx @@ -25,13 +25,24 @@ const NodeContextProvider: React.FC<{ ); }; -export const useNode = (selector?: (node: DiagramNode) => T) => { +// overload when selector is provided +export function useNode any>( + selector: T +): ReturnType; + +// overload when selector is not provided +export function useNode(selector?: undefined): DiagramNode; + +// implementation +export function useNode any | undefined>( + selector?: T +) { const { nodeId } = useNodeContext(); const useDiagram = useGetDiagramStore(); return useDiagram((state) => selector ? selector(state.getNode(nodeId)!) : state.getNode(nodeId) - ) as T extends unknown ? DiagramNode : T; -}; + ); +} export const useNodeData = () => { const { nodeId } = useNodeContext(); @@ -49,7 +60,7 @@ export const useNodeData = () => { export const useNodePosition = () => { const { nodeId } = useNodeContext(); const useDiagram = useGetDiagramStore(); - + const position = useDiagram((state) => state.nodePositions[nodeId]); const setter = useMemo( () => useDiagram.getState().updateNodePosition.bind(null, nodeId), diff --git a/src/components/Node/CustomNode.tsx b/src/components/Node/CustomNode.tsx index a8b7f1b..265d466 100644 --- a/src/components/Node/CustomNode.tsx +++ b/src/components/Node/CustomNode.tsx @@ -15,14 +15,17 @@ const Inp = () => { }; export const CustomNode: NodeFC = ({ id }) => { const [show, toggle] = useToggle(true); + const node = useNode(); + console.log("node:", node); + return (
{show && } @@ -31,7 +34,6 @@ export const CustomNode: NodeFC = ({ id }) => {

CustomNode - {id}

-

Heloo

{show && }