refactor node

src/components/nodes/RenderingNode.tsx

@@ -1,6 +1,10 @@
-import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import nunjucks from 'nunjucks'
-import FlowContext from '../../lib/flowContext'
+import {
+    AbstractNodeProps,
+    createAbstractNodeComponent,
+    useAbstractNode,
+} from '../../lib/abstractNode'
 import { getConfigContent, getConfigType, getConfigTypeId } from '../../lib/configTypes'
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty'
 import {
@@ -9,7 +13,7 @@ import {
     BaseNodeFooter,
     BaseNodeHeaderRow,
 } from '../base/BaseNode'
-import { getDefaultDataForType, getNextNodeId, nodePropsAreEqual } from '../../lib/flowUtils'
+import { getDefaultDataForType, getNextNodeId } from '../../lib/flowUtils'
 import { getDefaultStyle } from '../../lib/nodeRegistry'
 import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
@@ -19,27 +23,20 @@ import { MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSu
 import { Sparkles } from 'lucide-react'
 import { InputHandle } from '../base/NodeHandles'
 
-type Props = {
-    id: string
-    data?: any
-    style?: React.CSSProperties
-}
+export type RenderingNodeData = Record<string, unknown>
 
-export const RenderingNode = memo(function RenderingNode({ id, width, height }: Props) {
+type Props = AbstractNodeProps<RenderingNodeData>
+
+function RenderingNodeComponent({ id, width, height }: Props) {
     const [renderedContent, setRenderedContent] = useState<string | null>(null)
     const [error, setError] = useState<null | { kind: string; message: string }>(null)
     const [loading, setLoading] = useState(false)
     const runIdRef = useRef(0)
     const loadingStartedAtRef = useRef<number | null>(null)
     const minLoadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    const ctx = useContext(FlowContext)
-    const nodes = ctx?.nodes ?? []
-    const edges = ctx?.edges ?? []
-    const setNodes = ctx?.setNodes
-    const setEdges = ctx?.setEdges
+    const { nodes, edges, setNodes, setEdges, sourceIds } = useAbstractNode<RenderingNodeData>(id, {})
 
-    const incomingEdges = useMemo(() => edges.filter((e: any) => e.target === id), [edges, id])
-    const incomingIds = useMemo(() => incomingEdges.map((e: any) => e.source).sort(), [incomingEdges])
+    const incomingIds = sourceIds
     const srcId = incomingIds.length > 0 ? incomingIds[0] : null
     const srcNode = nodes.find((n: any) => n.id === srcId)
     const configTypeId = srcNode?.type === 'config' ? getConfigTypeId(srcNode.data) : 'plantuml'
@@ -619,8 +616,11 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
             </BaseNode>
         </NodeStatusIndicator>
     )
-}, nodePropsAreEqual)
+}
 
-RenderingNode.displayName = 'RenderingNode'
+export const RenderingNode = createAbstractNodeComponent<RenderingNodeData>(
+    'RenderingNode',
+    RenderingNodeComponent
+)
 
 export default RenderingNode