fix: typecast edges and nodes

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

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,