fix: typecast edges and nodes

* make GraphView props all required
refactor: renamed "NodesTypeType" to "NodeType" and "EdgesTypeType" to "EdgeType"

src/components/Edges/BezierEdge.tsx

@@ -1,9 +1,8 @@
-import { computed, CSSProperties, defineComponent, PropType } from 'vue';
-
+import { defineComponent } from 'vue';
 import EdgeText from './EdgeText';
-
-import { getMarkerEnd, getCenter } from './utils';
-import { ArrowHeadType, Position } from '../../types';
+import { getMarkerEnd, getCenter, GetCenterParams, DefaultEdgeProps } from './utils';
+import { ArrowHeadType, EdgeType, Position } from '../../types';
+import { reactify } from '@vueuse/core';
 
 interface GetBezierPathParams {
   sourceX: number;
@@ -48,104 +47,34 @@ export function getBezierPath({
 export default defineComponent({
   inheritAttrs: false,
   props: {
-    sourceX: {
-      type: Number,
-      required: true
-    },
-    sourceY: {
-      type: Number,
-      required: true
-    },
-    targetX: {
-      type: Number,
-      required: true
-    },
-    targetY: {
-      type: Number,
-      required: true
-    },
-    sourcePosition: {
-      type: String as PropType<Position>,
-      required: false,
-      default: Position.Bottom
-    },
-    targetPosition: {
-      type: String as PropType<Position>,
-      required: false,
-      default: Position.Top
-    },
-    label: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    labelStyle: {
-      type: Object,
-      required: false,
-      default: undefined
-    },
-    labelShowBg: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    labelBgStyle: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    labelBgPadding: {
-      type: Array as unknown as PropType<[number, number]>,
-      required: false,
-      default: () => [0, 0]
-    },
-    labelBgBorderRadius: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    arrowHeadType: {
-      type: String as PropType<ArrowHeadType>,
-      required: false,
-      default: undefined
-    },
-    markerEndId: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    style: {
-      type: Object as PropType<CSSProperties>,
-      required: false,
-      default: () => {}
-    }
+    ...DefaultEdgeProps
   },
   setup(props) {
-    const centered = computed(() => {
+    const centered = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetCenterParams) => {
       return getCenter({
-        sourceX: props.sourceX,
-        sourceY: props.sourceY,
-        targetX: props.targetX,
-        targetY: props.targetY,
-        sourcePosition: props.sourcePosition,
-        targetPosition: props.targetPosition
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition
       });
     });
-    const path = computed(() => {
+    const path = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetBezierPathParams) => {
       return getBezierPath({
-        sourceX: props.sourceX,
-        sourceY: props.sourceY,
-        targetX: props.targetX,
-        targetY: props.targetY,
-        targetPosition: props.targetPosition,
-        sourcePosition: props.sourcePosition
+        sourceX: sourceX,
+        sourceY: sourceY,
+        targetX: targetX,
+        targetY: targetY,
+        targetPosition: targetPosition,
+        sourcePosition: sourcePosition
       });
     });
 
     const text = props.label ? (
       <EdgeText
-        x={centered.value[0]}
-        y={centered.value[1]}
+        x={centered({ ...props }).value[0]}
+        y={centered({ ...props }).value[1]}
         label={props.label}
         labelStyle={props.labelStyle}
         labelShowBg={props.labelShowBg}
@@ -155,13 +84,18 @@ export default defineComponent({
       />
     ) : null;
 
-    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
+    const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
 
     return () => (
       <>
-        <path style={props.style} d={path.value} class="revue-flow__edge-path" marker-end={markerEnd.value} />
+        <path
+          class="revue-flow__edge-path"
+          style={props.style}
+          d={path({ ...props }).value}
+          marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
+        />
         {text}
       </>
     );
   }
-});
+}) as EdgeType;

src/components/Edges/Edge.tsx

@@ -1,6 +1,6 @@
-import { EdgeAnchor } from './EdgeAnchor';
-import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
 import { computed, defineComponent, h, inject, PropType, ref } from 'vue';
+import EdgeAnchor from './EdgeAnchor';
+import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
 import { isEdge } from '../../utils/graph';

src/components/Edges/EdgeAnchor.tsx

@@ -20,7 +20,7 @@ export interface EdgeAnchorProps extends HTMLAttributes {
   radius?: number;
 }
 
-export const EdgeAnchor = defineComponent({
+export default defineComponent({
   props: {
     position: {
       type: String as PropType<EdgeAnchorProps['position']>,

src/components/Edges/EdgeText.tsx

@@ -1,7 +1,7 @@
 import { EdgeTextProps, Rect } from '../../types';
 import { defineComponent, PropType, ref, watch } from 'vue';
 
-const EdgeText = defineComponent({
+export default defineComponent({
   props: {
     x: {
       type: Number as PropType<EdgeTextProps['x']>,
@@ -83,5 +83,3 @@ const EdgeText = defineComponent({
     );
   }
 });
-
-export default EdgeText;

src/components/Edges/SmoothStepEdge.tsx

@@ -1,8 +1,8 @@
-import { defineComponent } from 'vue';
-
+import { computed, defineComponent } from 'vue';
 import EdgeText from './EdgeText';
-import { getMarkerEnd, getCenter } from './utils';
-import { EdgeSmoothStepProps, Position } from '../../types';
+import { getMarkerEnd, getCenter, EdgeSmoothProps } from './utils';
+import { ArrowHeadType, EdgeType, Position } from '../../types';
+import { reactify } from '@vueuse/core';
 
 // These are some helper methods for drawing the round corners
 // The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -92,35 +92,41 @@ export function getSmoothStepPath({
   return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
 }
 
-const SmoothStepEdge = defineComponent({
+export default defineComponent({
   inheritAttrs: false,
-  props: EdgeSmoothStepProps,
+  props: {
+    ...EdgeSmoothProps
+  },
   setup(props) {
-    const [centerX, centerY] = getCenter({
-      sourceX: props.sourceX,
-      sourceY: props.sourceY,
-      targetX: props.targetX,
-      targetY: props.targetY,
-      sourcePosition: props.sourcePosition,
-      targetPosition: props.targetPosition
+    const centered = computed(() => {
+      return getCenter({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        sourcePosition: props.sourcePosition,
+        targetPosition: props.targetPosition
+      });
     });
 
-    const path = getSmoothStepPath({
-      sourceX: props.sourceX,
-      sourceY: props.sourceY,
-      targetX: props.targetX,
-      targetY: props.targetY,
-      sourcePosition: props.sourcePosition,
-      targetPosition: props.targetPosition,
-      borderRadius: props.borderRadius
+    const path = computed(() => {
+      return getSmoothStepPath({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        sourcePosition: props.sourcePosition,
+        targetPosition: props.targetPosition,
+        borderRadius: props.borderRadius
+      });
     });
 
-    const markerEnd = getMarkerEnd(props.arrowHeadType, props.markerEndId);
+    const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
 
     const text = props.label ? (
       <EdgeText
-        x={centerX}
-        y={centerY}
+        x={centered.value[0]}
+        y={centered.value[1]}
         label={props.label}
         labelStyle={props.labelStyle}
         labelShowBg={props.labelShowBg}
@@ -132,11 +138,14 @@ const SmoothStepEdge = defineComponent({
 
     return (
       <>
-        <path style={props.style} class="revue-flow__edge-path" d={path} marker-end={markerEnd} />
+        <path
+          class="revue-flow__edge-path"
+          style={props.style}
+          d={path.value}
+          marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
+        />
         {text}
       </>
     );
   }
-});
-
-export default SmoothStepEdge;
+}) as unknown as EdgeType;

src/components/Edges/StepEdge.tsx

@@ -1,15 +1,15 @@
 import { defineComponent } from 'vue';
-
-import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
+import { EdgeSmoothProps } from './utils';
+import { EdgeType } from '../../types';
 
-const StepEdge = defineComponent({
-  inheritAttrs: false,
+export default defineComponent({
   components: { SmoothStepEdge },
-  props: EdgeSmoothStepProps,
+  inheritAttrs: false,
+  props: {
+    ...EdgeSmoothProps
+  },
   setup(props) {
     return () => <SmoothStepEdge {...props} borderRadius={0} />;
   }
-});
-
-export default StepEdge;
+}) as EdgeType;

src/components/Edges/StraightEdge.tsx

@@ -1,24 +1,28 @@
 import { defineComponent } from 'vue';
-
 import EdgeText from './EdgeText';
-import { getMarkerEnd } from './utils';
-import { EdgeProps } from '../../types';
+import { getMarkerEnd, DefaultEdgeProps } from './utils';
+import { reactify } from '@vueuse/core';
+import { ArrowHeadType, EdgeType } from '../../types';
 
-const StraightEdge = defineComponent({
+export default defineComponent({
   inheritAttrs: false,
-  props: EdgeProps,
+  props: {
+    ...DefaultEdgeProps
+  },
   setup(props) {
-    const yOffset = Math.abs(props.targetY - props.sourceY) / 2;
-    const centerY = props.targetY < props.sourceY ? props.targetY + yOffset : props.targetY - yOffset;
-
-    const xOffset = Math.abs(props.targetX - props.sourceX) / 2;
-    const centerX = props.targetX < props.sourceX ? props.targetX + xOffset : props.targetX - xOffset;
-    const markerEnd = getMarkerEnd(props.arrowHeadType, props.markerEndId);
+    const centerY = reactify((targetY: number, sourceY: number) => {
+      const yOffset = Math.abs(targetY - sourceY) / 2;
+      return targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    });
+    const centerX = reactify((targetX: number, sourceX: number) => {
+      const xOffset = Math.abs(targetX - sourceX) / 2;
+      return targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    });
 
     const text = props.label ? (
       <EdgeText
-        x={centerX}
-        y={centerY}
+        x={centerX(props.targetX, props.sourceX).value}
+        y={centerY(props.targetY, props.sourceY).value}
         label={props.label}
         labelStyle={props.labelStyle}
         labelShowBg={props.labelShowBg}
@@ -28,18 +32,18 @@ const StraightEdge = defineComponent({
       />
     ) : null;
 
+    const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
+
     return (
       <>
         <path
           style={props.style}
           class="revue-flow__edge-path"
           d={`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`}
-          marker-end={markerEnd}
+          marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
         />
         {text}
       </>
     );
   }
-});
-
-export default StraightEdge;
+}) as unknown as EdgeType;

src/components/Edges/utils.ts

@@ -1,4 +1,5 @@
-import { ArrowHeadType, Position } from '../../types';
+import { ArrowHeadType, Position, EdgeProps, EdgeSmoothStepProps } from '../../types';
+import { PropType } from 'vue';
 
 export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {
@@ -52,3 +53,110 @@ export const getCenter = ({
 
   return [centerX, centerY, xOffset, yOffset];
 };
+
+export const DefaultEdgeProps = {
+  id: {
+    type: String as PropType<EdgeProps['id']>,
+    required: true,
+    default: 0
+  },
+  sourceX: {
+    type: Number as PropType<EdgeProps['sourceX']>,
+    required: true,
+    default: 0
+  },
+  sourceY: {
+    type: Number as PropType<EdgeProps['sourceY']>,
+    required: true,
+    default: 0
+  },
+  targetX: {
+    type: Number as PropType<EdgeProps['targetX']>,
+    required: true,
+    default: 0
+  },
+  targetY: {
+    type: Number as PropType<EdgeProps['targetY']>,
+    required: true,
+    default: 0
+  },
+  sourcePosition: {
+    type: String as PropType<EdgeProps['sourcePosition']>,
+    required: false,
+    default: Position.Bottom
+  },
+  targetPosition: {
+    type: String as PropType<EdgeProps['targetPosition']>,
+    required: false,
+    default: Position.Top
+  },
+  label: {
+    type: String as PropType<EdgeProps['label']>,
+    required: false,
+    default: undefined
+  },
+  labelStyle: {
+    type: Object as PropType<EdgeProps['labelStyle']>,
+    required: false,
+    default: undefined
+  },
+  labelShowBg: {
+    type: Boolean as PropType<EdgeProps['labelShowBg']>,
+    required: false,
+    default: false
+  },
+  labelBgStyle: {
+    type: String as PropType<EdgeProps['labelBgStyle']>,
+    required: false,
+    default: undefined
+  },
+  labelBgPadding: {
+    type: Array as unknown as PropType<[number, number]>,
+    required: false,
+    default: undefined
+  },
+  labelBgBorderRadius: {
+    type: Number as PropType<EdgeProps['labelBgBorderRadius']>,
+    required: false,
+    default: undefined
+  },
+  arrowHeadType: {
+    type: Object as PropType<EdgeProps['arrowHeadType']>,
+    required: false,
+    default: undefined
+  },
+  markerEndId: {
+    type: String as PropType<EdgeProps['markerEndId']>,
+    required: false,
+    default: undefined
+  },
+  style: {
+    type: Object as PropType<EdgeProps['style']>,
+    required: false,
+    default: undefined
+  },
+  data: {
+    type: Object as PropType<EdgeProps['data']>,
+    required: false,
+    default: undefined
+  },
+  sourceHandleId: {
+    type: String as PropType<EdgeProps['sourceHandleId']>,
+    required: false,
+    default: undefined
+  },
+  targetHandleId: {
+    type: String as PropType<EdgeProps['targetHandleId']>,
+    required: false,
+    default: undefined
+  }
+};
+
+export const EdgeSmoothProps = {
+  ...DefaultEdgeProps,
+  borderRadius: {
+    type: Number as PropType<EdgeSmoothStepProps['borderRadius']>,
+    required: false,
+    default: 5
+  }
+};

src/components/Handle/index.tsx

@@ -31,11 +31,6 @@ export default defineComponent({
       type: String,
       required: false,
       default: undefined
-    },
-    onConnect: {
-      type: Function,
-      required: false,
-      default: undefined
     }
   },
   setup(props, { slots }) {

src/components/Nodes/DefaultNode.tsx

@@ -1,8 +1,8 @@
-import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
 import { defineComponent, PropType } from 'vue';
+import Handle from '../../components/Handle';
+import { NodeProps, NodeType, Position } from '../../types';
 
-const DefaultNode = defineComponent({
+export default defineComponent({
   name: 'DefaultNode',
   components: { Handle },
   inheritAttrs: false,
@@ -37,6 +37,4 @@ const DefaultNode = defineComponent({
       </>
     );
   }
-});
-
-export default DefaultNode;
+}) as NodeType;

src/components/Nodes/InputNode.tsx

@@ -1,8 +1,8 @@
 import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
+import { NodeProps, NodeType, Position } from '../../types';
 import { defineComponent, PropType } from 'vue';
 
-const InputNode = defineComponent({
+export default defineComponent({
   name: 'InputNode',
   components: { Handle },
   inheritAttrs: false,
@@ -31,6 +31,4 @@ const InputNode = defineComponent({
       </>
     );
   }
-});
-
-export default InputNode;
+}) as NodeType;

src/components/Nodes/Node.vue

@@ -39,11 +39,11 @@
 import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
 import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
 import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
-import { Node, NodeDimensionUpdate, NodeTypesType, RevueFlowStore } from '../../types';
+import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 interface NodeProps {
-  nodeTypes: NodeTypesType;
+  nodeTypes: Record<string, NodeType>;
   snapToGrid: boolean;
   snapGrid: [number, number];
   selectNodesOnDrag: boolean;

src/components/Nodes/OutputNode.tsx

@@ -1,8 +1,8 @@
 import Handle from '../../components/Handle';
-import { NodeProps, Position } from '../../types';
+import { NodeProps, NodeType, Position } from '../../types';
 import { defineComponent, PropType } from 'vue';
 
-const OutputNode = defineComponent({
+export default defineComponent({
   name: 'OutputNode',
   components: { Handle },
   inheritAttrs: false,
@@ -31,6 +31,4 @@ const OutputNode = defineComponent({
       </>
     );
   }
-});
-
-export default OutputNode;
+}) as NodeType;

src/components/NodesSelection/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * The nodes selection rectangle gets displayed when a user
  * made a selectio  with on or several nodes

src/container/EdgeRenderer/utils.ts

@@ -1,17 +1,17 @@
 import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
 import { rectToBox } from '../../utils/graph';
-import { EdgeTypesType, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge } from '../../types';
+import { Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, EdgeType } from '../../types';
 
-export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
-  const standardTypes: EdgeTypesType = {
+export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
+  const standardTypes: Record<string, EdgeType> = {
     default: edgeTypes.default || BezierEdge,
     straight: edgeTypes.bezier || StraightEdge,
     step: edgeTypes.step || StepEdge,
     smoothstep: edgeTypes.step || SmoothStepEdge
   };
 
-  const wrappedTypes = {} as EdgeTypesType;
-  const specialTypes: EdgeTypesType = Object.keys(edgeTypes)
+  const wrappedTypes = {} as Record<string, EdgeType>;
+  const specialTypes: Record<string, EdgeType> = Object.keys(edgeTypes)
     .filter((k) => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
       res[key] = edgeTypes[key] || BezierEdge;

src/container/GraphView/GraphView.vue

@@ -37,7 +37,7 @@
   </FlowRenderer>
 </template>
 <script lang="ts">
-import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
+import { defineComponent, inject, PropType, watchEffect } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -52,13 +52,11 @@ export default defineComponent({
   props: {
     nodeTypes: {
       type: Object as PropType<GraphViewProps['nodeTypes']>,
-      required: false,
-      default: undefined
+      required: true
     },
     edgeTypes: {
       type: Object as PropType<GraphViewProps['edgeTypes']>,
-      required: false,
-      default: undefined
+      required: true
     },
     connectionMode: {
       type: String as PropType<GraphViewProps['connectionMode']>,
@@ -73,7 +71,7 @@ export default defineComponent({
     connectionLineStyle: {
       type: Object as PropType<GraphViewProps['connectionLineStyle']>,
       required: false,
-      default: () => ({} as CSSProperties)
+      default: () => {}
     },
     connectionLineComponent: {
       type: Object as PropType<GraphViewProps['connectionLineComponent']>,

src/container/NodeRenderer/index.tsx

@@ -1,10 +1,10 @@
 import { computed, defineComponent, inject, PropType } from 'vue';
 import Node from '../../components/Nodes/Node.vue';
 import { getNodesInside } from '../../utils/graph';
-import { NodeTypesType, RevueFlowStore } from '../../types';
+import { NodeType, RevueFlowStore } from '../../types';
 
 interface NodeRendererProps {
-  nodeTypes: NodeTypesType;
+  nodeTypes: Record<string, NodeType>;
   selectNodesOnDrag: boolean;
   snapToGrid: boolean;
   snapGrid: [number, number];

src/container/NodeRenderer/utils.ts

@@ -1,20 +1,19 @@
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
-import { NodeTypesType } from '../../types';
+import { NodeType } from '../../types';
 
-export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
-  const standardTypes: NodeTypesType = {
+export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
+  const standardTypes: Record<string, NodeType> = {
     input: nodeTypes.input || InputNode,
     default: nodeTypes.default || DefaultNode,
     output: nodeTypes.output || OutputNode
   };
 
-  const wrappedTypes = {} as NodeTypesType;
-  const specialTypes: NodeTypesType = Object.keys(nodeTypes)
+  const wrappedTypes = {} as NodeType;
+  const specialTypes: NodeType = Object.keys(nodeTypes)
     .filter((k) => !['input', 'default', 'output'].includes(k))
     .reduce((res, key) => {
-      // @ts-ignore
       res[key] = nodeTypes[key] || DefaultNode;
 
       return res;

src/container/RevueFlow/RevueFlow.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="revue-flow">
     <GraphView
-      :node-types="nodeTypesParsed"
-      :edge-types="edgeTypesParsed"
+      :node-types="nodeTypesParsed().value"
+      :edge-types="edgeTypesParsed().value"
       :connection-mode="connectionMode"
       :connection-line-type="connectionLineType"
       :connection-line-style="connectionLineStyle"
@@ -39,8 +39,8 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
-import { useVModel } from '@vueuse/core';
+import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
+import { reactify, useVModel } from '@vueuse/core';
 import '../../style.css';
 import '../../theme-default.css';
 import GraphView from '../GraphView/GraphView.vue';
@@ -160,12 +160,12 @@ export default defineComponent({
     nodesConnectable: {
       type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
       required: false,
-      default: undefined
+      default: true
     },
     elementsSelectable: {
       type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
       required: false,
-      default: undefined
+      default: true
     },
     selectNodesOnDrag: {
       type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
@@ -175,12 +175,12 @@ export default defineComponent({
     minZoom: {
       type: Number as PropType<RevueFlowProps['minZoom']>,
       required: false,
-      default: undefined
+      default: 0.5
     },
     maxZoom: {
       type: Number as PropType<RevueFlowProps['maxZoom']>,
       required: false,
-      default: undefined
+      default: 2
     },
     defaultZoom: {
       type: Number as PropType<RevueFlowProps['defaultZoom']>,
@@ -195,12 +195,18 @@ export default defineComponent({
     translateExtent: {
       type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
       required: false,
-      default: undefined
+      default: () => [
+        [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+        [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
+      ]
     },
     nodeExtent: {
       type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
       required: false,
-      default: undefined
+      default: () => [
+        [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+        [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
+      ]
     },
     arrowHeadColor: {
       type: String as PropType<RevueFlowProps['arrowHeadColor']>,
@@ -275,12 +281,8 @@ export default defineComponent({
       store.setElements([]);
     });
 
-    const nodeTypesParsed = computed(
-      () => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes } as any)
-    );
-    const edgeTypesParsed = computed(
-      () => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes } as any)
-    );
+    const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
+    const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
 
     return {
       nodeTypesParsed,

src/types/index.ts

@@ -1,5 +1,5 @@
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { CSSProperties, DefineComponent, HTMLAttributes, PropType, VNode } from 'vue';
+import { CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue';
 import { Store } from 'pinia';
 
 export type ElementId = string;
@@ -91,9 +91,9 @@ export enum BackgroundVariant {
 
 export type HandleType = 'source' | 'target';
 
-export type NodeTypesType = { [key: string]: DefineComponent<WrapNodeProps> };
+export type NodeType = DefineComponent<NodeProps>;
 
-export type EdgeTypesType = { [key: string]: DefineComponent<WrapEdgeProps> };
+export type EdgeType = DefineComponent<EdgeSmoothStepProps>;
 
 export interface SelectionRect extends Rect {
   startX: number;
@@ -101,226 +101,6 @@ export interface SelectionRect extends Rect {
   draw: boolean;
 }
 
-export interface WrapEdgeProps<T = any> {
-  id: ElementId;
-  className?: string;
-  type: string;
-  data?: T;
-  onClick?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
-  selected: boolean;
-  animated?: boolean;
-  label?: string | VNode;
-  labelStyle?: any;
-  labelShowBg?: boolean;
-  labelBgStyle?: any;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-  style?: any;
-  arrowHeadType?: ArrowHeadType;
-  source: ElementId;
-  target: ElementId;
-  sourceHandleId: ElementId | null;
-  targetHandleId: ElementId | null;
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  sourcePosition: Position;
-  targetPosition: Position;
-  elementsSelectable?: boolean;
-  markerEndId?: string;
-  isHidden?: boolean;
-  handleEdgeUpdate: boolean;
-  onConnectEdge: OnConnectFunc;
-  onContextMenu?: (event: MouseEvent, edge: Edge) => void;
-  onMouseEnter?: (event: MouseEvent, edge: Edge) => void;
-  onMouseMove?: (event: MouseEvent, edge: Edge) => void;
-  onMouseLeave?: (event: MouseEvent, edge: Edge) => void;
-  edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
-}
-
-export const WrapEdgeProps = {
-  id: {
-    type: String as PropType<WrapEdgeProps['id']>,
-    required: false,
-    default: undefined
-  },
-  type: {
-    type: String as PropType<WrapEdgeProps['type']>,
-    required: true
-  },
-  data: {
-    type: String as PropType<WrapEdgeProps['data']>,
-    required: false,
-    default: undefined
-  },
-  onClick: {
-    type: Function('event', 'edge') as PropType<WrapEdgeProps['onClick']>,
-    required: false,
-    default: undefined
-  },
-  onEdgeDoubleClick: {
-    type: Function('event', 'edge') as PropType<WrapEdgeProps['onEdgeDoubleClick']>,
-    required: false,
-    default: undefined
-  },
-  selected: {
-    type: Boolean as PropType<WrapEdgeProps['selected']>,
-    required: true,
-    default: false
-  },
-  animated: {
-    type: Boolean as PropType<WrapEdgeProps['animated']>,
-    required: false,
-    default: false
-  },
-  label: {
-    type: Object as PropType<WrapEdgeProps['label']>,
-    required: false,
-    default: undefined
-  },
-  labelStyle: {
-    type: Object as PropType<WrapEdgeProps['labelStyle']>,
-    required: false,
-    default: undefined
-  },
-  labelShowBg: {
-    type: Boolean as PropType<WrapEdgeProps['labelShowBg']>,
-    required: false,
-    default: false
-  },
-  labelBgStyle: {
-    type: Object as PropType<WrapEdgeProps['labelBgStyle']>,
-    required: false,
-    default: undefined
-  },
-  labelBgPadding: {
-    type: Array as unknown as PropType<WrapEdgeProps['labelBgPadding']>,
-    required: false,
-    default: undefined
-  },
-  labelBgBorderRadius: {
-    type: Number as PropType<WrapEdgeProps['labelBgBorderRadius']>,
-    required: false,
-    default: undefined
-  },
-  style: {
-    type: Object as PropType<WrapEdgeProps['style']>,
-    required: false,
-    default: undefined
-  },
-  arrowHeadType: {
-    type: String as PropType<WrapEdgeProps['arrowHeadType']>,
-    required: false,
-    default: undefined
-  },
-  source: {
-    type: String as PropType<WrapEdgeProps['source']>,
-    required: true
-  },
-  target: {
-    type: String as PropType<WrapEdgeProps['target']>,
-    required: true
-  },
-  sourceHandleId: {
-    type: String as PropType<WrapEdgeProps['sourceHandleId']>,
-    required: true,
-    default: null
-  },
-  targetHandleId: {
-    type: String as PropType<WrapEdgeProps['targetHandleId']>,
-    required: true,
-    default: null
-  },
-  sourceX: {
-    type: Number as PropType<WrapEdgeProps['sourceX']>,
-    required: true
-  },
-  sourceY: {
-    type: Number as PropType<WrapEdgeProps['sourceY']>,
-    required: true
-  },
-  targetX: {
-    type: Number as PropType<WrapEdgeProps['targetX']>,
-    required: true
-  },
-  targetY: {
-    type: Number as PropType<WrapEdgeProps['targetY']>,
-    required: true
-  },
-  sourcePosition: {
-    type: String as PropType<WrapEdgeProps['sourcePosition']>,
-    required: true
-  },
-  targetPosition: {
-    type: String as PropType<WrapEdgeProps['targetPosition']>,
-    required: true
-  },
-  elementsSelectable: {
-    type: Boolean as PropType<WrapEdgeProps['elementsSelectable']>,
-    required: false,
-    default: false
-  },
-  markerEndId: {
-    type: String as PropType<WrapEdgeProps['markerEndId']>,
-    required: false,
-    default: undefined
-  },
-  isHidden: {
-    type: Boolean as PropType<WrapEdgeProps['isHidden']>,
-    required: false,
-    default: false
-  },
-  handleEdgeUpdate: {
-    type: Boolean as PropType<WrapEdgeProps['handleEdgeUpdate']>,
-    required: false,
-    default: false
-  },
-  onConnectEdge: {
-    type: Function() as PropType<WrapEdgeProps['onConnectEdge']>,
-    required: false,
-    default: undefined
-  },
-  onContextMenu: {
-    type: Function() as PropType<WrapEdgeProps['onContextMenu']>,
-    required: false,
-    default: undefined
-  },
-  onMouseEnter: {
-    type: Function() as PropType<WrapEdgeProps['onMouseEnter']>,
-    required: false,
-    default: undefined
-  },
-  onMouseMove: {
-    type: Function() as PropType<WrapEdgeProps['onMouseMove']>,
-    required: false,
-    default: undefined
-  },
-  onMouseLeave: {
-    type: Function() as PropType<WrapEdgeProps['onMouseLeave']>,
-    required: false,
-    default: undefined
-  },
-  edgeUpdaterRadius: {
-    type: Number as PropType<WrapEdgeProps['edgeUpdaterRadius']>,
-    required: false,
-    default: undefined
-  },
-  onEdgeUpdateStart: {
-    type: Function() as PropType<WrapEdgeProps['onEdgeUpdateStart']>,
-    required: false,
-    default: undefined
-  },
-  onEdgeUpdateEnd: {
-    type: Function() as PropType<WrapEdgeProps['onEdgeUpdateEnd']>,
-    required: false,
-    default: undefined
-  }
-};
-
 export interface EdgeProps<T = any> {
   id: ElementId;
   source: ElementId;
@@ -351,112 +131,6 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number;
 }
 
-export const EdgeProps = {
-  id: {
-    type: String as PropType<EdgeSmoothStepProps['id']>,
-    required: true
-  },
-  sourceX: {
-    type: Number as PropType<EdgeSmoothStepProps['sourceX']>,
-    required: true,
-    default: 0
-  },
-  sourceY: {
-    type: Number as PropType<EdgeSmoothStepProps['sourceY']>,
-    required: true,
-    default: 0
-  },
-  targetX: {
-    type: Number as PropType<EdgeSmoothStepProps['targetX']>,
-    required: true,
-    default: 0
-  },
-  targetY: {
-    type: Number as PropType<EdgeSmoothStepProps['targetY']>,
-    required: true,
-    default: 0
-  },
-  sourcePosition: {
-    type: String as PropType<EdgeSmoothStepProps['sourcePosition']>,
-    required: true,
-    default: Position.Bottom
-  },
-  targetPosition: {
-    type: String as PropType<EdgeSmoothStepProps['targetPosition']>,
-    required: true,
-    default: Position.Top
-  },
-  label: {
-    type: String as PropType<EdgeSmoothStepProps['label']>,
-    required: false,
-    default: undefined
-  },
-  labelStyle: {
-    type: Object as PropType<EdgeSmoothStepProps['labelStyle']>,
-    required: true,
-    default: undefined
-  },
-  labelShowBg: {
-    type: Boolean as PropType<EdgeSmoothStepProps['labelShowBg']>,
-    required: false,
-    default: false
-  },
-  labelBgStyle: {
-    type: String as PropType<EdgeSmoothStepProps['labelBgStyle']>,
-    required: false,
-    default: undefined
-  },
-  labelBgPadding: {
-    type: [0, 0] as any as PropType<[number, number]>,
-    required: false,
-    default: undefined
-  },
-  labelBgBorderRadius: {
-    type: Number as PropType<EdgeSmoothStepProps['labelBgBorderRadius']>,
-    required: false,
-    default: undefined
-  },
-  arrowHeadType: {
-    type: Object as PropType<EdgeSmoothStepProps['arrowHeadType']>,
-    required: false,
-    default: undefined
-  },
-  markerEndId: {
-    type: String as PropType<EdgeSmoothStepProps['markerEndId']>,
-    required: false,
-    default: undefined
-  },
-  style: {
-    type: Object as PropType<EdgeSmoothStepProps['style']>,
-    required: false,
-    default: undefined
-  },
-  data: {
-    type: Object as PropType<EdgeSmoothStepProps['data']>,
-    required: false,
-    default: undefined
-  },
-  sourceHandleId: {
-    type: Object as PropType<EdgeSmoothStepProps['sourceHandleId']>,
-    required: false,
-    default: undefined
-  },
-  targetHandleId: {
-    type: Object as PropType<EdgeSmoothStepProps['targetHandleId']>,
-    required: false,
-    default: undefined
-  }
-};
-
-export const EdgeSmoothStepProps = {
-  ...EdgeProps,
-  borderRadius: {
-    type: Number as PropType<EdgeSmoothStepProps['borderRadius']>,
-    required: false,
-    default: 5
-  }
-};
-
 export interface EdgeTextProps extends HTMLAttributes {
   x: number;
   y: number;
@@ -481,62 +155,6 @@ export interface NodeProps<T = any> {
   isDragging?: boolean;
 }
 
-export interface NodeComponentProps<T = any> {
-  id: ElementId;
-  type: string;
-  data: T;
-  selected?: boolean;
-  isConnectable: boolean;
-  transform?: Transform;
-  xPos?: number;
-  yPos?: number;
-  targetPosition?: Position;
-  sourcePosition?: Position;
-  onClick?: (node: Node) => void;
-  onNodeDoubleClick?: (node: Node) => void;
-  onMouseEnter?: (node: Node) => void;
-  onMouseMove?: (node: Node) => void;
-  onMouseLeave?: (node: Node) => void;
-  onContextMenu?: (node: Node) => void;
-  onNodeDragStart?: (node: Node) => void;
-  onNodeDrag?: (node: Node) => void;
-  onNodeDragStop?: (node: Node) => void;
-  style?: any;
-  isDragging?: boolean;
-}
-
-export interface WrapNodeProps<T = any> {
-  id: ElementId;
-  type: string;
-  data: T;
-  selected: boolean;
-  scale: number;
-  xPos: number;
-  yPos: number;
-  isSelectable: boolean;
-  isDraggable: boolean;
-  isConnectable: boolean;
-  selectNodesOnDrag: boolean;
-  onClick?: (event: MouseEvent, node: Node) => void;
-  onNodeDoubleClick?: (event: MouseEvent, node: Node) => void;
-  onMouseEnter?: (event: MouseEvent, node: Node) => void;
-  onMouseMove?: (event: MouseEvent, node: Node) => void;
-  onMouseLeave?: (event: MouseEvent, node: Node) => void;
-  onContextMenu?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
-  onNodeDrag?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
-  style?: any;
-  sourcePosition?: Position;
-  targetPosition?: Position;
-  isHidden?: boolean;
-  isInitialized?: boolean;
-  snapToGrid?: boolean;
-  snapGrid?: SnapGrid;
-  isDragging?: boolean;
-  resizeObserver: ResizeObserver | null;
-}
-
 export type FitViewParams = {
   padding?: number;
   includeHiddenNodes?: boolean;
@@ -753,47 +371,10 @@ export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void;
 
-export interface RevueFlowEvents {
-  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
-  onElementsRemove?: (elements: Elements) => void;
-  onNodeDoubleClick?: (event: MouseEvent, node: Node) => void;
-  onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
-  onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
-  onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
-  onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
-  onNodeDrag?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
-  onConnect?: (connection: Edge | Connection) => void;
-  onConnectStart?: OnConnectStartFunc;
-  onConnectStop?: OnConnectStopFunc;
-  onConnectEnd?: OnConnectEndFunc;
-  onLoad?: OnLoadFunc;
-  onMove?: (flowTransform?: FlowTransform) => void;
-  onMoveStart?: (flowTransform?: FlowTransform) => void;
-  onMoveEnd?: (flowTransform?: FlowTransform) => void;
-  onSelectionChange?: (elements: Elements | null) => void;
-  onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
-  onPaneScroll?: (event?: WheelEvent) => void;
-  onPaneClick?: (event: MouseEvent) => void;
-  onPaneContextMenu?: (event: MouseEvent) => void;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
-}
-
 export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   modelValue: Elements;
-  nodeTypes?: NodeTypesType;
-  edgeTypes?: EdgeTypesType;
+  nodeTypes?: Record<string, NodeType>;
+  edgeTypes?: Record<string, EdgeType>;
   connectionMode?: ConnectionMode;
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
@@ -829,9 +410,7 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   edgeTypesId?: string;
 }
 
-export interface GraphViewProps extends Omit<RevueFlowProps, 'onSelectionChange' | 'elements'> {
-  nodeTypes: NodeTypesType;
-  edgeTypes: EdgeTypesType;
+export interface GraphViewProps extends Required<RevueFlowProps> {
   selectionKeyCode: KeyCode;
   deleteKeyCode: KeyCode;
   multiSelectionKeyCode: KeyCode;