From d9bdd0f0fffbadc3da72b2876462f6961f641cb1 Mon Sep 17 00:00:00 2001
From: sumbatx15 <sumbat15@gmail.com>
Date: Fri, 2 Jun 2023 15:43:41 +0300
Subject: [PATCH] fix: useNode

---
 src/App.css                            |  5 ++++
 src/App.tsx                            | 36 +++++++++++---------------
 src/components/Diagram/WrappedNode.tsx | 19 +++++++++++---
 src/components/Node/CustomNode.tsx     |  6 +++--
 4 files changed, 39 insertions(+), 27 deletions(-)

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 (
-    <div>
-      <div style={{ width: "100vw", height: "150vh", padding: "100px" }}>
-        <DiagramView
-          id="diagram-1"
-          style={{
-            width: "1000px",
-            height: "600px",
-          }}
-          nodeTypes={{
-            custom: CustomNode,
-          }}
-        >
-          <div style={{ position: "absolute", zIndex: 100 }}>
-            <button onClick={handleAdd}>addnode</button>
-            <button onClick={addMore}>add more</button>
-            <button onClick={() => randomizePositions()}>randomize</button>
-            <button onClick={() => fitView()}>fitView</button>
-          </div>
-          <Background id="diagram-1" color="black" />
-        </DiagramView>
-      </div>
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <DiagramView
+        id="diagram-1"
+        nodeTypes={{
+          custom: CustomNode,
+        }}
+      >
+        <div style={{ position: "absolute", zIndex: 100 }}>
+          <button onClick={handleAdd}>addnode</button>
+          <button onClick={addMore}>add more</button>
+          <button onClick={() => randomizePositions()}>randomize</button>
+          <button onClick={() => fitView()}>fitView</button>
+        </div>
+        <Background id="diagram-1" color="black" />
+      </DiagramView>
     </div>
   );
 }
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 = <T,>(selector?: (node: DiagramNode) => T) => {
+// overload when selector is provided
+export function useNode<T extends (node: DiagramNode) => any>(
+  selector: T
+): ReturnType<T>;
+
+// overload when selector is not provided
+export function useNode(selector?: undefined): DiagramNode;
+
+// implementation
+export function useNode<T extends (node: DiagramNode) => 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 = <T,>() => {
   const { nodeId } = useNodeContext();
@@ -49,7 +60,7 @@ export const useNodeData = <T,>() => {
 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 (
     <div
-      // shadow="xl"
       style={{
         borderRadius: "4px",
         position: "relative",
         background: "#070708",
         padding: "16px",
+        boxShadow: "0 0 15px rgba(0,0,0,0.2)",
       }}
     >
       {show && <Handle id="in" type="target" placement="left" />}
@@ -31,7 +34,6 @@ export const CustomNode: NodeFC = ({ id }) => {
 
       <p /* onClick={toggle} */>CustomNode - {id}</p>
       <Inp />
-      <p>Heloo</p>
       <button onClick={toggle}>Toggle handles</button>
       {show && <Handle id="out" type="source" placement="right" />}
     </div>