fix: useNode

sumbatx15 · Jun 2, 2023 · d9bdd0f · d9bdd0f
1 parent 0fff870
commit d9bdd0f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>