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 &&
}