From 470b9444eec171fb3ff0a5478d164115bb104ec6 Mon Sep 17 00:00:00 2001
From: kei711 <keiichi_yamada@caddi.jp>
Date: Fri, 4 Dec 2020 16:51:57 +0900
Subject: [PATCH 1/3] fix(@types): improve types of DiagramNode

---
 @types/DiagramSchema.ts | 11 +++++++----
 index-tests.tsx         |  5 ++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/@types/DiagramSchema.ts b/@types/DiagramSchema.ts
index 2639876..8261fc7 100644
--- a/@types/DiagramSchema.ts
+++ b/@types/DiagramSchema.ts
@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { ElementType, ReactElement, ReactNode } from 'react';
 
 export type PortAlignment = 'right' | 'left' | 'top' | 'bottom';
 
@@ -18,13 +18,16 @@ export type Node<P> = {
   inputs?: Port[];
   outputs?: Port[];
   type?: 'default';
-  render?: (
-    props: Omit<Node<P>, 'coordinates'>
-  ) => ElementType | ReactNode;
+  render?: (props: NodeRenderProps<P>) => ElementType | ReactNode;
   className?: string;
   data?: P;
 };
 
+export type NodeRenderProps<P> = Omit<
+  Node<P>,
+  'coordinates' | 'disableDrag' | 'inputs' | 'outputs'
+> & { inputs: ReactElement<Port>[]; outputs: ReactElement<Port>[] };
+
 export type Link = {
   input: string;
   output: string;
diff --git a/index-tests.tsx b/index-tests.tsx
index ab6b0c7..96d014d 100644
--- a/index-tests.tsx
+++ b/index-tests.tsx
@@ -48,19 +48,22 @@ export const UncontrolledDiagram2 = () => {
         schema.nodes[schema.nodes.length - 1].coordinates[0] + 10,
         schema.nodes[schema.nodes.length - 1].coordinates[1] + 20,
       ],
-      render: ({ content, data }) => (
+      render: ({ content, data, inputs, outputs }) => (
         <div
           onDoubleClick={data?.onDoubleClick}
           role='button'
           style={{ padding: '15px', background: 'purple' }}
         >
           {content}
+          {inputs?.map((input) => (<div>{input.props.id}</div>))}
+          {outputs?.map((output) => (<div>{output.props.id}</div>))}
         </div>
       ),
       data: {
         onDoubleClick: () => alert(`Schema length is: ${schema.nodes.length}`),
       },
       inputs: [{ id: `port-${schema.nodes.length + 1}` }],
+      outputs: [{ id: `port-${schema.nodes.length + 1}` }],
     });
 
   const removeLast = () => {

From 518158c7472d11ee3a8758f23443d7d9187465da Mon Sep 17 00:00:00 2001
From: Keiichi YAMADA <43733654+kei711@users.noreply.github.com>
Date: Fri, 4 Dec 2020 17:20:21 +0900
Subject: [PATCH 2/3] Update index-tests.tsx

Co-authored-by: Keisuke Kan <keisuke_kan@caddi.jp>
---
 index-tests.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index-tests.tsx b/index-tests.tsx
index 96d014d..2e5a99a 100644
--- a/index-tests.tsx
+++ b/index-tests.tsx
@@ -55,8 +55,8 @@ export const UncontrolledDiagram2 = () => {
           style={{ padding: '15px', background: 'purple' }}
         >
           {content}
-          {inputs?.map((input) => (<div>{input.props.id}</div>))}
-          {outputs?.map((output) => (<div>{output.props.id}</div>))}
+          {inputs.map((input) => (<div>{input.props.id}</div>))}
+          {outputs.map((output) => (<div>{output.props.id}</div>))}
         </div>
       ),
       data: {

From 57dbbff791a1096e43126299ce7c6f63bc1dc350 Mon Sep 17 00:00:00 2001
From: kei711 <keiichi_yamada@caddi.jp>
Date: Fri, 16 Apr 2021 18:27:27 +0900
Subject: [PATCH 3/3] fix(@types): improve the NodeRenderProps type

---
 @types/DiagramSchema.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/@types/DiagramSchema.ts b/@types/DiagramSchema.ts
index 8261fc7..ea49775 100644
--- a/@types/DiagramSchema.ts
+++ b/@types/DiagramSchema.ts
@@ -1,4 +1,4 @@
-import { ElementType, ReactElement, ReactNode } from 'react';
+import { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 export type PortAlignment = 'right' | 'left' | 'top' | 'bottom';
 
@@ -26,7 +26,10 @@ export type Node<P> = {
 export type NodeRenderProps<P> = Omit<
   Node<P>,
   'coordinates' | 'disableDrag' | 'inputs' | 'outputs'
-> & { inputs: ReactElement<Port>[]; outputs: ReactElement<Port>[] };
+> & {
+  inputs: ReactElement<Port & HTMLAttributes<HTMLDivElement>>[];
+  outputs: ReactElement<Port & HTMLAttributes<HTMLDivElement>>[];
+};
 
 export type Link = {
   input: string;