update(types): remove null types and use undefined

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/EdgeWrapper.vue

@@ -10,8 +10,9 @@ import {
   SourceTargetNode,
   Position,
   FlowEvents,
+  EdgePositions,
 } from '../../types'
-import { isEdge, getEdgePositions, getHandle } from '../../utils'
+import { isEdge, getEdgePositions, getHandle, isEdgeVisible } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
@@ -22,8 +23,8 @@ interface EdgeWrapper {
   component?: any
   source: ElementId
   target: ElementId
-  sourceHandle?: ElementId | null
-  targetHandle?: ElementId | null
+  sourceHandle?: ElementId
+  targetHandle?: ElementId
   selected?: boolean
   sourcePosition?: Position
   targetPosition?: Position
@@ -153,12 +154,12 @@ const sourceHandle = controlledComputed(
   () => props.sourceTargetNodes,
   () => {
     if (props.sourceTargetNodes.sourceNode && props.sourceTargetNodes.sourceNode.__vf.handleBounds.source)
-      return getHandle(props.sourceTargetNodes.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
+      return getHandle(props.sourceTargetNodes.sourceNode.__vf.handleBounds.source, props.sourceHandle)
     else return null
   },
 )
 const targetHandle = computed(() => {
-  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.targetHandle ?? null)
+  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.targetHandle)
   else return null
 })
 const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -178,6 +179,17 @@ const edgePos = computed(() =>
     targetPosition.value,
   ),
 )
+
+const isVisible = ({ sourceX, sourceY, targetX, targetY }: EdgePositions) =>
+  store.onlyRenderVisibleElements
+    ? isEdgeVisible({
+        sourcePos: { x: sourceX, y: sourceY },
+        targetPos: { x: targetX, y: targetY },
+        width: store.dimensions.width,
+        height: store.dimensions.height,
+        transform: store.transform,
+      })
+    : true
 </script>
 <script lang="ts">
 export default {
@@ -186,6 +198,7 @@ export default {
 </script>
 <template>
   <g
+    v-show="isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.type || 'default'}`,

src/container/VueFlow/VueFlow.vue

@@ -236,6 +236,7 @@ const transitionName = computed(() => {
                     :edges="store.getEdges"
                     :edge-types="store.getEdgeTypes"
                     :nodes="store.getNodes"
+                    :selected-elements="store.selectedElements"
                     :elements-selectable="store.elementsSelectable"
                     :connection-node-id="store.connectionNodeId"
                     :connction-handle-id="store.connectionHandleId"
@@ -247,6 +248,7 @@ const transitionName = computed(() => {
                     :connection-line-style="store.connectionLineStyle"
                     :arrow-head-color="store.arrowHeadColor"
                     :marker-end-id="store.markerEndId"
+                    :only-render-visible-elements="store.onlyRenderVisibleElements"
                   >
                     <template
                       v-for="edgeName of Object.keys(store.getEdgeTypes)"

src/types/components.ts

@@ -1,4 +1,4 @@
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
 import { Connection } from './connection'
 import { Node } from './node'
@@ -6,7 +6,7 @@ import { Node } from './node'
 export type HandleType = 'source' | 'target'
 
 export interface HandleElement extends XYPosition, Dimensions {
-  id?: ElementId | null
+  id?: ElementId
   position: Position
 }
 
@@ -64,7 +64,7 @@ export interface EdgeTextProps {
     | string
     | {
         component: any
-        props?: Record<string, any>
+        props?: any
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/types/connection.ts

@@ -9,10 +9,10 @@ export enum ConnectionLineType {
 }
 
 export interface Connection {
-  source: ElementId | null
-  target: ElementId | null
-  sourceHandle: ElementId | null
-  targetHandle: ElementId | null
+  source: ElementId
+  target: ElementId
+  sourceHandle: ElementId
+  targetHandle: ElementId
 }
 
 export type ConnectionLineProps = {

src/types/edge.ts

@@ -7,8 +7,8 @@ export interface Edge<T = any> {
   type?: string
   source: ElementId
   target: ElementId
-  sourceHandle?: ElementId | null
-  targetHandle?: ElementId | null
+  sourceHandle?: ElementId
+  targetHandle?: ElementId
   selected?: boolean
   sourcePosition?: Position
   targetPosition?: Position

src/types/node.ts

@@ -8,8 +8,8 @@ export interface VFInternals {
   width: number
   height: number
   handleBounds: {
-    source: HandleElement[] | null
-    target: HandleElement[] | null
+    source?: HandleElement[]
+    target?: HandleElement[]
   }
 }
 

src/utils/edge.ts

@@ -41,7 +41,7 @@ export function getHandlePosition(position: Position, node: GraphNode, handle: a
   }
 }
 
-export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | undefined {
+export function getHandle(bounds: HandleElement[], handleId?: ElementId): HandleElement | undefined {
   if (!bounds) return undefined
 
   // there is no handleId when there are no multiple handles/ handles with ids
@@ -53,7 +53,7 @@ export function getHandle(bounds: HandleElement[], handleId: ElementId | null):
     handle = bounds.find((d) => d.id === handleId)
   }
 
-  return typeof handle === 'undefined' ? undefined : handle
+  return !handle ? undefined : handle
 }
 
 export const getEdgePositions = (

src/utils/graph.ts

@@ -171,8 +171,8 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
     width: 0,
     height: 0,
     handleBounds: {
-      source: null,
-      target: null,
+      source: undefined,
+      target: undefined,
     },
     isDragging: false,
   },
@@ -182,8 +182,8 @@ export const parseEdge = (edge: Edge): Edge => ({
   ...edge,
   source: edge.source.toString(),
   target: edge.target.toString(),
-  sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : null,
-  targetHandle: edge.targetHandle ? edge.targetHandle.toString() : null,
+  sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
+  targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
   id: edge.id.toString(),
   type: edge.type || 'default',
 })

src/utils/node.ts

@@ -18,7 +18,7 @@ export const getHandleBoundsByHandleType = (
   return handlesArray.map((handle): HandleElement => {
     const bounds = handle.getBoundingClientRect()
     const dimensions = getDimensions(handle)
-    const handleId = handle.getAttribute('data-handleid')
+    const handleId = handle.getAttribute('data-handleid') ?? undefined
     const handlePosition = handle.getAttribute('data-handlepos') as Position
 
     return {
@@ -35,7 +35,7 @@ export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
   const bounds = nodeElement.getBoundingClientRect()
 
   return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
+    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale) ?? undefined,
+    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale) ?? undefined,
   }
 }