update: Remove wrapEdge and wrapNode files

* implement Edge.tsx and Node.vue to wrap the components accordingly
refactor!: Removing callbacks from props in favor of events
chore: upgrade vue and vite vue plugin

examples/Basic/Basic.vue

@@ -5,6 +5,7 @@
     :onElementsRemove="onElementsRemove"
     :onConnect="onConnect"
     :onNodeDragStop="onNodeDragStop"
+    :onNodeClick="onElementClick"
     :defaultZoom="1.5"
     :minZoom="0.2"
     :maxZoom="4"
@@ -15,10 +16,10 @@
     <Controls />
     <Background color="#aaa" :gap="8" />
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button :onClick="resetTransform" style="margin-right: 5px">reset transform</button>
+      <button @click="resetTransform" style="margin-right: 5px">reset transform</button>
-      <button :onClick="updatePos" style="margin-right: 5px">change pos</button>
+      <button @click="updatePos" style="margin-right: 5px">change pos</button>
-      <button :onClick="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
+      <button @click="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
-      <button :onClick="logToObject">toObject</button>
+      <button @click="logToObject">toObject</button>
     </div>
   </RevueFlow>
 </template>
@@ -31,7 +32,6 @@ import RevueFlow, {
   Edge,
   Elements,
   FlowElement,
-  Node,
   OnLoadParams,
   addEdge,
   isNode,
@@ -42,8 +42,8 @@ import { defineComponent, ref } from 'vue';
 const BasicFlow = defineComponent({
   components: { RevueFlow, MiniMap, Controls, Background },
   setup() {
-    const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+    const onNodeDragStop = ({ node }) => console.log('drag stop', node);
-    const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+    const onElementClick = ({ node }) => console.log('click', node);
     const elements = ref<Elements>([
       { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
       { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
@@ -51,7 +51,7 @@ const BasicFlow = defineComponent({
       { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
       { id: 'e1-2', source: '1', target: '2', animated: true },
       { id: 'e1-3', source: '1', target: '3' }
-    ]);
+    ] as Elements);
     const rfInstance = ref<OnLoadParams | null>(null);
     const onElementsRemove = (elementsToRemove: Elements) =>
       (elements.value = removeElements(elementsToRemove, elements.value as Elements));

package.json

@@ -45,10 +45,10 @@
     "@rollup/plugin-replace": "^2.4.2",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
-    "@vitejs/plugin-vue": "^1.2.3",
+    "@vitejs/plugin-vue": "^1.2.5",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "^3.2.0-beta.5",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.6",
     "babel-eslint": "latest",
@@ -72,7 +72,7 @@
     "typescript": "^4.3.5",
     "vite": "^2.3.8",
     "vite-svg-loader": "^2.1.0",
-    "vue": "^3.0.5",
+    "vue": "^3.2.0-beta.5",
     "vue-router": "4",
     "vue-tsc": "^0.0.24"
   },

src/additional-components/MiniMap/index.tsx

@@ -100,8 +100,8 @@ const MiniMap = defineComponent({
               key={node.id}
               x={node.__rf.position.x}
               y={node.__rf.position.y}
-              width={node.__rf.width}
+              width={node.__rf.width || 0}
-              height={node.__rf.height}
+              height={node.__rf.height || 0}
               style={node.style}
               class={nodeClassNameFunc.value(node)}
               color={nodeColorFunc.value(node)}

src/components/ConnectionLine/ConnectionLine.vue

@@ -0,0 +1,133 @@
+<template>
+  <g v-show="sourceNode && nodesConnectable" class="revue-flow__connection">
+    <g v-if="CustomConnectionLineComponent" class="revue-flow__connection">
+      <component
+        :is="CustomConnectionLineComponent"
+        :sourceX="sourceX"
+        :sourceY="sourceY"
+        :sourcePosition="sourceHandle.position"
+        :targetX="targetX"
+        :targetY="targetY"
+        :targetPosition="targetPosition"
+        :connectionLineType="connectionLineType"
+        :connectionLineStyle="connectionLineStyle"
+      />
+    </g>
+    <path v-else class="revue-flow__connection-path" :d="dAttr" :style="connectionLineStyle" />
+  </g>
+</template>
+<script lang="ts">
+import { ref, defineComponent, CSSProperties, PropType, computed, inject } from 'vue';
+
+import { getBezierPath } from '../Edges/BezierEdge';
+import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
+import { Node, HandleElement, Position, ConnectionLineType, ConnectionLineComponent, RevueFlowStore } from '../../types';
+
+interface ConnectionLineProps {
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
+  CustomConnectionLineComponent?: ConnectionLineComponent;
+}
+
+const ConnectionLine = defineComponent({
+  props: {
+    connectionLineType: {
+      type: String as PropType<ConnectionLineProps['connectionLineType']>,
+      required: false,
+      default: ConnectionLineType.Bezier
+    },
+    connectionLineStyle: {
+      type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
+      required: false,
+      default: () => {}
+    },
+    CustomConnectionLineComponent: {
+      type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const sourceNode = ref<Node | null>(store.nodes.find((n) => n.id === store.connectionNodeId) || null);
+    const nodesConnectable = computed(() => store.nodesConnectable);
+
+    const sourceHandle = computed(() =>
+      store.connectionHandleId && store.connectionHandleType
+        ? sourceNode.value?.__rf.handleBounds[store.connectionHandleType].find(
+            (d: HandleElement) => d.id === store.connectionHandleId
+          )
+        : store.connectionHandleType && sourceNode.value?.__rf.handleBounds[store.connectionHandleType][0]
+    );
+    const sourceHandleX = computed(() =>
+      sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : (sourceNode.value?.__rf.width as number) / 2
+    );
+    const sourceHandleY = computed(() =>
+      sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
+    );
+    const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
+    const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
+
+    const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2]);
+    const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2]);
+
+    const isRightOrLeft = computed(
+      () => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
+    );
+    const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
+
+    let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
+
+    if (props.connectionLineType === ConnectionLineType.Bezier) {
+      dAttr = computed(() =>
+        getBezierPath({
+          sourceX: sourceX.value,
+          sourceY: sourceY.value,
+          sourcePosition: sourceHandle.value?.position,
+          targetX: targetX.value,
+          targetY: targetY.value,
+          targetPosition: targetPosition.value
+        })
+      );
+    } else if (props.connectionLineType === ConnectionLineType.Step) {
+      dAttr = computed(() =>
+        getSmoothStepPath({
+          sourceX: sourceX.value,
+          sourceY: sourceY.value,
+          sourcePosition: sourceHandle.value?.position,
+          targetX: targetX.value,
+          targetY: targetY.value,
+          targetPosition: targetPosition.value,
+          borderRadius: 0
+        })
+      );
+    } else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
+      dAttr = computed(() =>
+        getSmoothStepPath({
+          sourceX: sourceX.value,
+          sourceY: sourceY.value,
+          sourcePosition: sourceHandle.value?.position,
+          targetX: targetX.value,
+          targetY: targetY.value,
+          targetPosition: targetPosition.value
+        })
+      );
+    }
+
+    return {
+      dAttr,
+      targetX,
+      targetY,
+      sourceX,
+      sourceY,
+      sourceHandle,
+      sourceNode,
+      sourceHandleX,
+      sourceHandleY,
+      nodesConnectable
+    };
+  }
+});
+
+export default ConnectionLine;
+</script>

src/components/ConnectionLine/index.tsx

@@ -1,181 +0,0 @@
-import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
-
-import { getBezierPath } from '../Edges/BezierEdge';
-import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
-import {
-  ElementId,
-  Node,
-  Transform,
-  HandleElement,
-  Position,
-  ConnectionLineType,
-  ConnectionLineComponent,
-  HandleType
-} from '../../types';
-
-interface ConnectionLineProps {
-  connectionNodeId: ElementId;
-  connectionHandleId: ElementId | null;
-  connectionHandleType: HandleType;
-  connectionPositionX: number;
-  connectionPositionY: number;
-  connectionLineType: ConnectionLineType;
-  nodes: Node[];
-  transform: Transform;
-  isConnectable: boolean;
-  connectionLineStyle?: CSSProperties;
-  CustomConnectionLineComponent?: ConnectionLineComponent;
-}
-
-const ConnectionLine = defineComponent({
-  props: {
-    connectionNodeId: {
-      type: String as PropType<ConnectionLineProps['connectionNodeId']>,
-      required: true
-    },
-    connectionHandleId: {
-      type: String as PropType<ConnectionLineProps['connectionHandleId']>,
-      required: true
-    },
-    connectionHandleType: {
-      type: String as PropType<ConnectionLineProps['connectionHandleType']>,
-      required: true
-    },
-    connectionLineStyle: {
-      type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
-      required: false,
-      default: () => ({})
-    },
-    connectionPositionX: {
-      type: Number as PropType<ConnectionLineProps['connectionPositionX']>,
-      required: false,
-      default: 0
-    },
-    connectionPositionY: {
-      type: Number as PropType<ConnectionLineProps['connectionPositionY']>,
-      required: false,
-      default: 0
-    },
-    connectionLineType: {
-      type: String as PropType<ConnectionLineProps['connectionLineType']>,
-      required: false,
-      default: ConnectionLineType.Bezier
-    },
-    nodes: {
-      type: Array as PropType<ConnectionLineProps['nodes']>,
-      required: true,
-      default: () => []
-    },
-    transform: {
-      type: Object as PropType<ConnectionLineProps['transform']>,
-      required: false,
-      default: () => ({})
-    },
-    isConnectable: {
-      type: Boolean as PropType<ConnectionLineProps['isConnectable']>,
-      required: false,
-      default: false
-    },
-    CustomConnectionLineComponent: {
-      type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props) {
-    const sourceNode = ref<Node | null>(props.nodes.find((n) => n.id === props.connectionNodeId) || null);
-
-    if (!sourceNode.value || !props.isConnectable) {
-      return null;
-    }
-
-    const sourceHandle = computed(() =>
-      props.connectionHandleId
-        ? sourceNode.value?.__rf.handleBounds[props.connectionHandleType].find(
-            (d: HandleElement) => d.id === props.connectionHandleId
-          )
-        : sourceNode.value?.__rf.handleBounds[props.connectionHandleType][0]
-    );
-    const sourceHandleX = computed(() =>
-      sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : sourceNode.value?.__rf.width / 2
-    );
-    const sourceHandleY = computed(() =>
-      sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
-    );
-    const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
-    const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
-
-    const targetX = computed(() => (props.connectionPositionX - props.transform[0]) / props.transform[2]);
-    const targetY = computed(() => (props.connectionPositionY - props.transform[1]) / props.transform[2]);
-
-    const isRightOrLeft = computed(
-      () => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
-    );
-    const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
-
-    if (props.CustomConnectionLineComponent) {
-      // eslint-disable-next-line vue/no-setup-props-destructure
-      const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
-      return () => (
-        <g class="revue-flow__connection">
-          <ConnectionLineComponent
-            sourceX={sourceX.value}
-            sourceY={sourceY.value}
-            sourcePosition={sourceHandle.value?.position}
-            targetX={targetX.value}
-            targetY={targetY.value}
-            targetPosition={targetPosition.value}
-            connectionLineType={props.connectionLineType}
-            connectionLineStyle={props.connectionLineStyle}
-          />
-        </g>
-      );
-    }
-
-    let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
-
-    if (props.connectionLineType === ConnectionLineType.Bezier) {
-      dAttr = computed(() =>
-        getBezierPath({
-          sourceX: sourceX.value,
-          sourceY: sourceY.value,
-          sourcePosition: sourceHandle.value?.position,
-          targetX: targetX.value,
-          targetY: targetY.value,
-          targetPosition: targetPosition.value
-        })
-      );
-    } else if (props.connectionLineType === ConnectionLineType.Step) {
-      dAttr = computed(() =>
-        getSmoothStepPath({
-          sourceX: sourceX.value,
-          sourceY: sourceY.value,
-          sourcePosition: sourceHandle.value?.position,
-          targetX: targetX.value,
-          targetY: targetY.value,
-          targetPosition: targetPosition.value,
-          borderRadius: 0
-        })
-      );
-    } else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
-      dAttr = computed(() =>
-        getSmoothStepPath({
-          sourceX: sourceX.value,
-          sourceY: sourceY.value,
-          sourcePosition: sourceHandle.value?.position,
-          targetX: targetX.value,
-          targetY: targetY.value,
-          targetPosition: targetPosition.value
-        })
-      );
-    }
-
-    return () => (
-      <g class="revue-flow__connection">
-        <path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
-      </g>
-    );
-  }
-});
-
-export default ConnectionLine;

src/components/Edges/BezierEdge.tsx

@@ -46,44 +46,46 @@ export function getBezierPath({
 }
 
 const BezierEdge = defineComponent({
+  inheritAttrs: false,
   props: {
     sourceX: {
       type: Number,
-      required: true,
+      required: false,
       default: 0
     },
     sourceY: {
       type: Number,
-      required: true,
+      required: false,
       default: 0
     },
     targetX: {
       type: Number,
-      required: true,
+      required: false,
       default: 0
     },
     targetY: {
       type: Number,
-      required: true,
+      required: false,
       default: 0
     },
     sourcePosition: {
       type: String as PropType<Position>,
-      required: true,
+      required: false,
       default: Position.Bottom
     },
     targetPosition: {
       type: String as PropType<Position>,
-      required: true,
+      required: false,
       default: Position.Top
     },
     label: {
       type: String,
-      required: true
+      required: false,
+      default: undefined
     },
     labelStyle: {
       type: Object,
-      required: true,
+      required: false,
       default: undefined
     },
     labelShowBg: {
@@ -93,7 +95,8 @@ const BezierEdge = defineComponent({
     },
     labelBgStyle: {
       type: String,
-      required: true
+      required: false,
+      default: undefined
     },
     labelBgPadding: {
       type: Array as unknown as PropType<[number, number]>,
@@ -106,12 +109,14 @@ const BezierEdge = defineComponent({
       default: 0
     },
     arrowHeadType: {
-      type: Object as PropType<ArrowHeadType>,
+      type: String as PropType<ArrowHeadType>,
-      required: true
+      required: false,
+      default: undefined
     },
     markerEndId: {
       type: String,
-      required: true
+      required: false,
+      default: undefined
     },
     style: {
       type: Object as PropType<CSSProperties>,

src/components/Edges/Edge.vue

@@ -0,0 +1,278 @@
+<template>
+  <g
+    :class="edgeClasses"
+    @click="onEdgeClick"
+    @contextmenu="onEdgeContextMenu"
+    @mouseenter="onEdgeMouseEnter"
+    @mousemove="onEdgeMouseMove"
+    @mouseleave="onEdgeMouseLeave"
+  >
+    <component
+      :is="type"
+      :id="edge.id"
+      :source="edge.source"
+      :target="edge.target"
+      :selected="isSelected"
+      :animated="edge.animated"
+      :label="edge.label"
+      :label-style="edge.labelStyle"
+      :label-show-bg="edge.labelShowBg"
+      :label-bg-style="edge.labelBgStyle"
+      :label-bg-padding="edge.labelBgPadding"
+      :label-bg-borderRadius="edge.labelBgBorderRadius"
+      :data="edge.data"
+      :style="edge.style"
+      :arrow-head-type="edge.arrowHeadType"
+      :source-x="edgePositions.sourceX"
+      :source-y="edgePositions.sourceY"
+      :target-x="edgePositions.targetX"
+      :target-y="edgePositions.targetY"
+      :source-position="sourcePosition"
+      :target-position="targetPosition"
+      :marker-end-id="markerEndId"
+      :source-handle-id="edge.sourceHandle"
+      :target-handle-id="edge.targetHandle"
+    />
+    <g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
+      <EdgeAnchor
+        :position="sourcePosition"
+        :center-x="edgePositions.sourceX"
+        :center-y="edgePositions.sourceY"
+        :radius="edgeUpdaterRadius"
+      />
+    </g>
+    <g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
+      <EdgeAnchor
+        :position="sourcePosition"
+        :center-x="edgePositions.sourceX"
+        :center-y="edgePositions.sourceY"
+        :radius="edgeUpdaterRadius"
+      />
+    </g>
+  </g>
+</template>
+<script lang="ts">
+import { EdgeAnchor } from './EdgeAnchor';
+import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
+import { isEdge } from '../../utils/graph';
+import { onMouseDown } from '../Handle/handler';
+
+interface EdgeProps {
+  edge: Edge;
+  nodes: Node[];
+  selectedElements: Elements | null;
+  elementsSelectable: boolean;
+  transform: Transform;
+  width: number;
+  height: number;
+  onlyRenderVisibleElements: boolean;
+  connectionMode?: ConnectionMode;
+  markerEndId?: string;
+  edgeUpdaterRadius?: number;
+}
+
+export default defineComponent({
+  components: { EdgeAnchor },
+  props: {
+    edge: {
+      type: Object as PropType<EdgeProps['edge']>,
+      required: true
+    },
+    markerEndId: {
+      type: Object as PropType<EdgeProps['markerEndId']>,
+      required: false,
+      default: undefined
+    },
+    edgeUpdaterRadius: {
+      type: Number as PropType<EdgeProps['edgeUpdaterRadius']>,
+      required: false,
+      default: undefined
+    },
+    type: {
+      type: Object,
+      required: true
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<EdgeProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: false
+    },
+    connectionMode: {
+      type: String as PropType<EdgeProps['connectionMode']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    const nodes = computed(() => getSourceTargetNodes(props.edge, store.nodes));
+
+    hooks.connect.on((connection) => {
+      hooks.edgeUpdate.trigger({ edge: props.edge, connection });
+    });
+
+    if (!nodes.value.sourceNode) {
+      console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
+    }
+
+    if (!nodes.value.targetNode) {
+      console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
+    }
+
+    const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
+    // when connection type is loose we can define all handles as sources
+    const targetNodeHandles = computed(() =>
+      props.connectionMode === ConnectionMode.Strict
+        ? targetNodeBounds.value?.target
+        : targetNodeBounds.value?.target || targetNodeBounds.value?.source
+    );
+    const sourceHandle = computed(
+      () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
+    );
+    const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
+    const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
+    const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
+
+    const edgePositions = computed<{
+      sourceX: number;
+      sourceY: number;
+      targetX: number;
+      targetY: number;
+    }>(() => {
+      return (
+        nodes.value.sourceNode &&
+        nodes.value.targetNode &&
+        getEdgePositions(
+          nodes.value.sourceNode,
+          sourceHandle.value,
+          sourcePosition.value,
+          nodes.value.targetNode,
+          targetHandle.value,
+          targetPosition.value
+        ) || {}
+      );
+    });
+
+    const isVisible = computed(() => {
+      return props.onlyRenderVisibleElements
+        ? edgePositions.value &&
+            isEdgeVisible({
+              sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
+              targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
+              width: store.width || 0,
+              height: store.height || 0,
+              transform: store.transform
+            })
+        : true;
+    });
+
+    const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
+
+    const updating = ref<boolean>(false);
+    const inactive = computed(() => !store.elementsSelectable);
+    const edgeClasses = computed(() => [
+      'revue-flow__edge',
+      `revue-flow__edge-${props.type}`,
+      { selected: isSelected.value, animated: props.edge.animated, inactive: inactive.value, updating: updating.value }
+    ]);
+
+    const edgeElement = computed<Edge>(() => {
+      const el: Edge = {
+        id: props.edge.id || '',
+        source: props.edge.source,
+        target: props.edge.target,
+        type: props.edge.type
+      };
+
+      if (props.edge.sourceHandle) {
+        el.sourceHandle = props.edge.sourceHandle;
+      }
+
+      if (props.edge.targetHandle) {
+        el.targetHandle = props.edge.targetHandle;
+      }
+
+      if (typeof props.edge.data !== 'undefined') {
+        el.data = props.edge.data;
+      }
+
+      return el;
+    });
+
+    const onEdgeClick = (event: MouseEvent) => {
+      if (store.elementsSelectable) {
+        store.unsetNodesSelection();
+        store.addSelectedElements(edgeElement.value as any);
+      }
+
+      hooks.edgeClick.trigger({ event, edge: edgeElement.value });
+    };
+
+    const onEdgeContextMenu = (event: MouseEvent) =>
+      hooks.edgeContextMenu.trigger({
+        event,
+        edge: edgeElement.value
+      });
+
+    const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value });
+
+    const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value });
+
+    const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value });
+
+    const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
+      const nodeId = isSourceHandle ? props.edge.target : props.edge.source;
+      const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle;
+      const isValidConnection = () => true;
+      const isTarget = isSourceHandle;
+
+      hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value });
+      onMouseDown(
+        event,
+        store,
+        hooks,
+        handleId as string,
+        nodeId,
+        isTarget,
+        isValidConnection,
+        isSourceHandle ? 'target' : 'source'
+      );
+    };
+
+    const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
+      handleEdgeUpdater(event, true);
+    };
+
+    const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
+      handleEdgeUpdater(event, false);
+    };
+
+    const onEdgeUpdaterMouseEnter = () => (updating.value = true);
+    const onEdgeUpdaterMouseOut = () => (updating.value = false);
+
+    return {
+      isSelected,
+      isVisible,
+      edgePositions,
+      sourceHandle,
+      targetHandle,
+      sourcePosition,
+      targetPosition,
+      edgeClasses,
+      onEdgeClick,
+      onEdgeMouseEnter,
+      onEdgeMouseMove,
+      onEdgeMouseLeave,
+      onEdgeUpdaterSourceMouseDown,
+      onEdgeUpdaterTargetMouseDown,
+      onEdgeUpdaterMouseEnter,
+      onEdgeUpdaterMouseOut,
+      onEdgeContextMenu
+    };
+  }
+});
+</script>

src/components/Edges/SmoothStepEdge.tsx

@@ -93,6 +93,7 @@ export function getSmoothStepPath({
 }
 
 const SmoothStepEdge = defineComponent({
+  inheritAttrs: false,
   props: EdgeSmoothStepProps,
   setup(props) {
     const [centerX, centerY] = getCenter({

src/components/Edges/StepEdge.tsx

@@ -4,6 +4,7 @@ import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
 
 const StepEdge = defineComponent({
+  inheritAttrs: false,
   components: { SmoothStepEdge },
   props: EdgeSmoothStepProps,
   setup(props) {

src/components/Edges/StraightEdge.tsx

@@ -5,6 +5,7 @@ import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 const StraightEdge = defineComponent({
+  inheritAttrs: false,
   props: EdgeProps,
   setup(props) {
     const yOffset = Math.abs(props.targetY - props.sourceY) / 2;

src/components/Edges/wrapEdge.tsx

@@ -1,355 +0,0 @@
-import { computed, DefineComponent, defineComponent, inject, PropType, ref } from 'vue';
-import { Edge, Position, RevueFlowStore, WrapEdgeProps } from '../../types';
-import { onMouseDown } from '../Handle/handler';
-import { EdgeAnchor } from './EdgeAnchor';
-
-export default (EdgeComponent: DefineComponent<WrapEdgeProps>) => {
-  return defineComponent({
-    components: { EdgeComponent },
-    props: {
-      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 as unknown as PropType<WrapEdgeProps['onClick']>,
-        required: false,
-        default: undefined
-      },
-      onEdgeDoubleClick: {
-        type: Function as unknown 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 unknown as PropType<WrapEdgeProps['onContextMenu']>,
-        required: false,
-        default: undefined
-      },
-      onMouseEnter: {
-        type: Function as unknown as PropType<WrapEdgeProps['onMouseEnter']>,
-        required: false,
-        default: undefined
-      },
-      onMouseMove: {
-        type: Function as unknown as PropType<WrapEdgeProps['onMouseMove']>,
-        required: false,
-        default: undefined
-      },
-      onMouseLeave: {
-        type: Function as unknown as PropType<WrapEdgeProps['onMouseLeave']>,
-        required: false,
-        default: undefined
-      },
-      edgeUpdaterRadius: {
-        type: Number as PropType<WrapEdgeProps['edgeUpdaterRadius']>,
-        required: false,
-        default: undefined
-      },
-      onEdgeUpdateStart: {
-        type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateStart']>,
-        required: false,
-        default: undefined
-      },
-      onEdgeUpdateEnd: {
-        type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateEnd']>,
-        required: false,
-        default: undefined
-      }
-    },
-    setup(props) {
-      const store = inject<RevueFlowStore>('store')!;
-      const updating = ref<boolean>(false);
-      const inactive = computed(() => !props.elementsSelectable && !props.onClick);
-      const edgeClasses = computed(() => [
-        'revue-flow__edge',
-        `revue-flow__edge-${props.type}`,
-        { selected: props.selected, animated: props.animated, inactive, updating: updating.value }
-      ]);
-
-      const edgeElement = computed<Edge>(() => {
-        const el: Edge = {
-          id: props.id as string,
-          source: props.source,
-          target: props.target,
-          type: props.type
-        };
-
-        if (props.sourceHandleId) {
-          el.sourceHandle = props.sourceHandleId;
-        }
-
-        if (props.targetHandleId) {
-          el.targetHandle = props.targetHandleId;
-        }
-
-        if (typeof props.data !== 'undefined') {
-          el.data = props.data;
-        }
-
-        return el;
-      });
-
-      const onEdgeClick = (event: MouseEvent) => {
-        if (props.elementsSelectable) {
-          store.unsetNodesSelection();
-          store.addSelectedElements(edgeElement.value as any);
-        }
-
-        if (typeof props.onClick === 'function') props.onClick(event, edgeElement.value);
-      };
-
-      const onEdgeContextMenu = (event: MouseEvent) => {
-        if (typeof props.onContextMenu === 'function') props.onContextMenu(event, edgeElement.value);
-      };
-
-      const onEdgeMouseEnter = (event: MouseEvent) => {
-        if (typeof props.onMouseEnter === 'function') props.onMouseEnter(event, edgeElement.value);
-      };
-
-      const onEdgeMouseMove = (event: MouseEvent) => {
-        if (typeof props.onMouseMove === 'function') props.onMouseMove(event, edgeElement.value);
-      };
-
-      const onEdgeMouseLeave = (event: MouseEvent) => {
-        if (typeof props.onMouseLeave === 'function') props.onMouseLeave(event, edgeElement.value);
-      };
-
-      const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-        const nodeId = isSourceHandle ? props.target : props.source;
-        const handleId = isSourceHandle ? props.targetHandleId : props.sourceHandleId;
-        const isValidConnection = () => true;
-        const isTarget = isSourceHandle;
-
-        props.onEdgeUpdateStart?.(event, edgeElement.value);
-
-        const _onEdgeUpdate = props.onEdgeUpdateEnd
-          ? (evt: MouseEvent) => {
-              if (props.onEdgeUpdateEnd) props.onEdgeUpdateEnd(evt, edgeElement.value);
-            }
-          : undefined;
-
-        onMouseDown(
-          event,
-          handleId,
-          nodeId,
-          store.setConnectionNodeId,
-          store.setConnectionPosition,
-          props.onConnectEdge as any,
-          isTarget,
-          isValidConnection,
-          store.connectionMode,
-          isSourceHandle ? 'target' : 'source',
-          _onEdgeUpdate
-        );
-      };
-
-      const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
-        handleEdgeUpdater(event, true);
-      };
-
-      const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
-        handleEdgeUpdater(event, false);
-      };
-
-      const onEdgeUpdaterMouseEnter = () => (updating.value = true);
-      const onEdgeUpdaterMouseOut = () => (updating.value = false);
-
-      if (props.isHidden) {
-        return null;
-      }
-
-      return () => (
-        <g
-          class={edgeClasses.value}
-          onClick={onEdgeClick}
-          onContextmenu={onEdgeContextMenu}
-          onMouseenter={onEdgeMouseEnter}
-          onMousemove={onEdgeMouseMove}
-          onMouseleave={onEdgeMouseLeave}
-        >
-          <EdgeComponent
-            id={props.id}
-            source={props.source}
-            target={props.target}
-            selected={props.selected}
-            animated={props.animated}
-            label={props.label}
-            labelStyle={props.labelStyle}
-            labelShowBg={props.labelShowBg}
-            labelBgStyle={props.labelBgStyle}
-            labelBgPadding={props.labelBgPadding}
-            labelBgBorderRadius={props.labelBgBorderRadius}
-            data={props.data}
-            style={props.style}
-            arrowHeadType={props.arrowHeadType}
-            sourceX={props.sourceX}
-            sourceY={props.sourceY}
-            targetX={props.targetX}
-            targetY={props.targetY}
-            sourcePosition={props.sourcePosition}
-            targetPosition={props.targetPosition}
-            markerEndId={props.markerEndId}
-            sourceHandleId={props.sourceHandleId}
-            targetHandleId={props.targetHandleId}
-          />
-          {props.handleEdgeUpdate && (
-            <g
-              onMousedown={onEdgeUpdaterSourceMouseDown}
-              onMouseenter={onEdgeUpdaterMouseEnter}
-              onMouseout={onEdgeUpdaterMouseOut}
-            >
-              <EdgeAnchor
-                position={props.sourcePosition as Position}
-                centerX={props.sourceX as number}
-                centerY={props.sourceY as number}
-                radius={props.edgeUpdaterRadius}
-              />
-            </g>
-          )}
-          {props.handleEdgeUpdate && (
-            <g
-              onMousedown={onEdgeUpdaterTargetMouseDown}
-              onMouseenter={onEdgeUpdaterMouseEnter}
-              onMouseout={onEdgeUpdaterMouseOut}
-            >
-              <EdgeAnchor
-                position={props.sourcePosition as Position}
-                centerX={props.sourceX as number}
-                centerY={props.sourceY as number}
-                radius={props.edgeUpdaterRadius}
-              />
-            </g>
-          )}
-        </g>
-      );
-    }
-  });
-};

src/components/Handle/Handle.ts

@@ -0,0 +1,70 @@
+import { ElementId, Position, RevueFlowStore } from '../../types';
+import { onMouseDown, ValidConnectionFunc } from './handler';
+import { computed, defineComponent, h, inject, PropType } from 'vue';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+const alwaysValid = () => true;
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'source'
+    },
+    position: {
+      type: String as PropType<Position>,
+      required: false,
+      default: Position.Top
+    },
+    isValidConnection: {
+      type: Function as PropType<ValidConnectionFunc>,
+      required: false,
+      default: alwaysValid
+    },
+    isConnectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props, { slots }) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
+    const isTarget = computed(() => props.type === 'target');
+
+    const onMouseDownHandler = (event: MouseEvent) => {
+      onMouseDown(event, store, hooks, props.id || '', nodeId, isTarget.value, props.isValidConnection);
+    };
+
+    const handleClasses = computed(() => [
+      'revue-flow__handle',
+      `revue-flow__handle-${props.position}`,
+      'nodrag',
+      {
+        source: !isTarget.value,
+        target: isTarget.value,
+        connectable: props.isConnectable
+      }
+    ]);
+
+    return () =>
+      h(
+        'div',
+        {
+          dataHandleid: props.id,
+          dataNodeid: nodeId,
+          dataHandlepos: props.position,
+          class: handleClasses.value,
+          onMouseDown: onMouseDownHandler
+        },
+        slots.default?.()
+      );
+  }
+});

src/components/Handle/handler.ts

@@ -1,15 +1,5 @@
 import { getHostForElement } from '../../utils';
-
+import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
-import {
-  ElementId,
-  XYPosition,
-  OnConnectFunc,
-  ConnectionMode,
-  SetConnectionId,
-  Connection,
-  HandleType,
-  RevueFlowStore
-} from '../../types';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
@@ -89,14 +79,14 @@ export function onMouseDown(
     connectStart: RevueFlowHooks['connectStart'];
     connectStop: RevueFlowHooks['connectStop'];
     connectEnd: RevueFlowHooks['connectEnd'];
+    connect: RevueFlowHooks['connect'];
+    edgeUpdateEnd: RevueFlowHooks['edgeUpdateEnd'];
   },
   handleId: ElementId | null,
   nodeId: ElementId,
-  onConnect: OnConnectFunc,
   isTarget: boolean,
   isValidConnection: ValidConnectionFunc,
-  elementEdgeUpdaterType?: HandleType,
+  elementEdgeUpdaterType?: HandleType
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void
 ): void {
   const revueFlowNode = (event.target as Element).closest('.revue-flow');
   // when revue-flow is used inside a shadow root we can't use document
@@ -169,13 +159,13 @@ export function onMouseDown(
     hooks.connectStop.trigger(event);
 
     if (isValid) {
-      onConnect?.(connection);
+      hooks.connect.trigger(connection);
     }
 
     hooks.connectEnd.trigger(event);
 
-    if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
+    if (elementEdgeUpdaterType) {
-      onEdgeUpdateEnd(event);
+      hooks.edgeUpdateEnd.trigger({ event } as any);
     }
 
     resetRecentHandle(recentHoveredHandle);

src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
+import { ElementId, Position, RevueFlowStore } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
 import { computed, defineComponent, inject, PropType } from 'vue';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
@@ -43,26 +43,10 @@ const Handle = defineComponent({
     const hooks = inject<RevueFlowHooks>('hooks')!;
     const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
     const isTarget = computed(() => props.type === 'target');
-    const onConnect = computed(() => store.onConnect);
-
-    const onConnectExtended = (params: Connection) => {
-      onConnect.value?.(params);
-      props.onConnect?.(params);
-    };
 
     const onMouseDownHandler = (event: MouseEvent) => {
-      onMouseDown(
+      console.log('mousedown');
-        event,
+      onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
-        store,
-        hooks,
-        props.id as string,
-        nodeId,
-        onConnectExtended,
-        isTarget.value,
-        props.isValidConnection,
-        undefined,
-        undefined
-      );
     };
 
     const handleClasses = computed(() => [

src/components/Nodes/DefaultNode.tsx

@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const DefaultNode = defineComponent({
   name: 'DefaultNode',
   components: { Handle },
+  inheritAttrs: false,
   props: {
     data: {
       type: Object as PropType<NodeProps['data']>,
@@ -29,11 +30,11 @@ const DefaultNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <div>
+      <>
         <Handle type="target" position={props.targetPosition} isConnectable={props.isConnectable} />
         {props.data?.label}
         <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
     );
   }
 });

src/components/Nodes/InputNode.tsx

@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const InputNode = defineComponent({
   name: 'InputNode',
   components: { Handle },
+  inheritAttrs: false,
   props: {
     data: {
       type: Object as PropType<NodeProps['data']>,
@@ -24,10 +25,10 @@ const InputNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <div>
+      <>
         {props.data?.label}
         <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
     );
   }
 });

src/components/Nodes/Node.vue

@@ -0,0 +1,258 @@
+<template>
+  <DraggableCore
+    cancel=".nodrag"
+    :scale="transform[2]"
+    :disabled="!isDraggable"
+    :grid="grid"
+    :enableUserSelectHack="false"
+    @start="onDragStart"
+    @move="onDrag"
+    @stop="onDragStop"
+  >
+    <div
+      ref="nodeElement"
+      :class="nodeClasses"
+      :style="nodeStyle"
+      :data-id="node.id"
+      @mouseenter="onMouseEnterHandler"
+      @mousemove="onMouseMoveHandler"
+      @mouseleave="onMouseLeaveHandler"
+      @contextmenu="onContextMenuHandler"
+      @click="onSelectNodeHandler"
+    >
+      <component
+        :is="type"
+        :data="node.data"
+        :type="node.type"
+        :x-pos="node.__rf.position.x"
+        :y-pos="node.__rf.position.y"
+        :selected="selected"
+        :is-connectable="isConnectable"
+        :source-position="node.sourcePosition"
+        :target-position="node.targetPosition"
+        :is-dragging="node.__rf.isDragging"
+      />
+    </div>
+  </DraggableCore>
+</template>
+<script lang="ts">
+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 { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+interface NodeProps {
+  nodeTypes: NodeTypesType;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+  selectNodesOnDrag: boolean;
+}
+
+export default defineComponent({
+  components: { DraggableCore },
+  props: {
+    node: {
+      type: Object as PropType<Node>,
+      required: true
+    },
+    type: {
+      type: Object,
+      required: true
+    },
+    snapToGrid: {
+      type: Boolean as PropType<NodeProps['snapToGrid']>,
+      required: false,
+      default: undefined
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<NodeProps['snapGrid']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<NodeProps['selectNodesOnDrag']>,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    provide('NodeIdContext', props.node.id);
+
+    const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
+
+    const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
+    const transform = computed(() => store.transform);
+    const isDraggable = computed(
+      () => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined')
+    );
+    const isSelectable = computed(
+      () => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined')
+    );
+    const isConnectable = computed(
+      () => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined')
+    );
+
+    const node = computed(
+      () =>
+        ({
+          id: props.node.id,
+          type: props.node.type,
+          position: { x: props.node.__rf.position.x, y: props.node.__rf.position.y },
+          data: props.node.data
+        } as Node)
+    );
+    const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
+    const initialized = computed(() => props.node.__rf.width !== null && props.node.__rf.height !== null);
+
+    const nodeStyle = computed<CSSProperties>(() => ({
+      zIndex: selected.value ? 10 : 3,
+      transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
+      pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
+      opacity: initialized.value ? 1 : 0,
+      ...props.node.style
+    }));
+    const onMouseEnterHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node.value });
+    };
+
+    const onMouseMoveHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node.value });
+    };
+
+    const onMouseLeaveHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node.value });
+    };
+
+    const onContextMenuHandler = () => {
+      return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node.value });
+    };
+
+    const onSelectNodeHandler = (event: MouseEvent) => {
+      if (!isDraggable.value) {
+        if (isSelectable.value) {
+          store.unsetNodesSelection();
+
+          if (!selected.value) {
+            store.addSelectedElements([node.value]);
+          }
+        }
+
+        hooks.nodeClick.trigger({ event, node: node.value });
+      }
+    };
+
+    const onDragStart: DraggableEventListener = ({ event }) => {
+      hooks.nodeDragStart.trigger({ event, node: node.value });
+
+      if (props.selectNodesOnDrag && isSelectable.value) {
+        store.unsetNodesSelection();
+
+        if (!selected.value) {
+          store.addSelectedElements([node.value]);
+        }
+      } else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
+        store.unsetNodesSelection();
+        store.addSelectedElements([]);
+      }
+    };
+
+    const onDrag: DraggableEventListener = ({ event, data }) => {
+      node.value.position.x += data.deltaX;
+      node.value.position.y += data.deltaY;
+      hooks.nodeDrag.trigger({ event, node: node.value });
+
+      store?.updateNodePosDiff({
+        id: props.node.id as string,
+        diff: {
+          x: data.deltaX,
+          y: data.deltaY
+        },
+        isDragging: true
+      });
+    };
+
+    const onDragStop: DraggableEventListener = ({ event }) => {
+      // onDragStop also gets called when user just clicks on a node.
+      // Because of that we set dragging to true inside the onDrag handler and handle the click here
+      if (!props.node.__rf.isDragging) {
+        if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
+          store.addSelectedElements([node.value]);
+        }
+
+        hooks.nodeClick.trigger({ event, node: node.value });
+
+        return;
+      }
+
+      store.updateNodePosDiff({
+        id: node.value.id || '',
+        isDragging: false
+      });
+
+      hooks.nodeDragStop.trigger({ event, node: node.value });
+    };
+
+    useResizeObserver(nodeElement, (entries) => {
+      const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
+        id: entry.target.getAttribute('data-id') || '',
+        nodeElement: entry.target as HTMLDivElement
+      }));
+
+      store.updateNodeDimensions(updates);
+    });
+
+    tryOnMounted(() => {
+      store.updateNodeDimensions([
+        {
+          id: props.node.id || '',
+          nodeElement: nodeElement.value,
+          forceUpdate: true
+        }
+      ]);
+    });
+
+    const nodeClasses = computed(() => [
+      'revue-flow__node',
+      `revue-flow__node-${props.node.type}`,
+      {
+        selected: selected.value,
+        selectable: isSelectable.value
+      }
+    ]);
+
+    return {
+      nodeClasses,
+      grid,
+      nodeStyle,
+      nodeElement,
+      onDragStart,
+      onDrag,
+      onDragStop,
+      onContextMenuHandler,
+      onMouseEnterHandler,
+      onMouseLeaveHandler,
+      onMouseMoveHandler,
+      onSelectNodeHandler,
+      transform,
+      isConnectable,
+      isDraggable,
+      selected
+    };
+  }
+});
+</script>

src/components/Nodes/OutputNode.tsx

@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const OutputNode = defineComponent({
   name: 'OutputNode',
   components: { Handle },
+  inheritAttrs: false,
   props: {
     data: {
       type: Object as PropType<NodeProps['data']>,
@@ -24,10 +25,10 @@ const OutputNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <div>
+      <>
         {props.data?.label}
         <Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
     );
   }
 });

src/components/Nodes/wrapNode.tsx

@@ -1,204 +0,0 @@
-import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, onUpdated, provide, ref } from 'vue';
-import { DraggableEventHandler, DraggableCore } from '@braks/revue-draggable';
-
-export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
-  return defineComponent({
-    props: WrapNodeProps,
-    setup(props) {
-      const store = inject<RevueFlowStore>('store')!;
-      provide('NodeIdContext', props.id);
-
-      const nodeElement = ref<HTMLDivElement | undefined>();
-
-      const node = computed(() => ({
-        id: props.id,
-        type: props.type,
-        position: { x: props.xPos, y: props.yPos },
-        data: props.data
-      }));
-      const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
-
-      const nodeStyle = computed<CSSProperties>(() => ({
-        zIndex: props.selected ? 10 : 3,
-        transform: `translate(${props.xPos}px,${props.yPos}px)`,
-        pointerEvents:
-          props.isSelectable ||
-          props.isDraggable ||
-          props.onClick ||
-          props.onMouseEnter ||
-          props.onMouseMove ||
-          props.onMouseLeave
-            ? 'all'
-            : 'none',
-        // prevents jumping of nodes on start
-        opacity: props.isInitialized ? 1 : 0,
-        ...props.style
-      }));
-      const onMouseEnterHandler = () => {
-        if (!props.onMouseEnter || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseEnter && props.onMouseEnter(event, node.value as Node);
-      };
-
-      const onMouseMoveHandler = () => {
-        if (!props.onMouseMove || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseMove && props.onMouseMove(event, node.value as Node);
-      };
-
-      const onMouseLeaveHandler = () => {
-        if (!props.onMouseLeave || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseLeave && props.onMouseLeave(event, node.value as Node);
-      };
-
-      const onContextMenuHandler = () => {
-        if (!props.onContextMenu) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onContextMenu && props.onContextMenu(event, node.value as Node);
-      };
-
-      const onSelectNodeHandler = (event: MouseEvent) => {
-        if (!props.isDraggable) {
-          if (props.isSelectable) {
-            store?.unsetNodesSelection();
-
-            if (!props.selected) {
-              store?.addSelectedElements([node.value as Node]);
-            }
-          }
-
-          props.onClick?.(event, node.value as Node);
-        }
-      };
-
-      const onDragStart: DraggableEventHandler = (event) => {
-        props.onNodeDragStart?.(event as MouseEvent, node.value as Node);
-
-        if (props.selectNodesOnDrag && props.isSelectable) {
-          store?.unsetNodesSelection();
-
-          if (!props.selected) {
-            store?.addSelectedElements([node.value as Node]);
-          }
-        } else if (!props.selectNodesOnDrag && !props.selected && props.isSelectable) {
-          store?.unsetNodesSelection();
-          store?.addSelectedElements([]);
-        }
-      };
-
-      const onDrag: DraggableEventHandler = (event, draggableData) => {
-        if (props.onNodeDrag) {
-          node.value.position.x += draggableData.deltaX;
-          node.value.position.y += draggableData.deltaY;
-          props.onNodeDrag(event as MouseEvent, node.value as Node);
-        }
-
-        store?.updateNodePosDiff({
-          id: props.id as string,
-          diff: {
-            x: draggableData.deltaX,
-            y: draggableData.deltaY
-          },
-          isDragging: true
-        });
-      };
-
-      const onDragStop: DraggableEventHandler = (event) => {
-        // onDragStop also gets called when user just clicks on a node.
-        // Because of that we set dragging to true inside the onDrag handler and handle the click here
-        if (!props.isDragging) {
-          if (props.isSelectable && !props.selectNodesOnDrag && !props.selected) {
-            store?.addSelectedElements([node.value as Node]);
-          }
-
-          props.onClick?.(event, node.value as Node);
-
-          return;
-        }
-
-        store?.updateNodePosDiff({
-          id: node.value.id as string,
-          isDragging: false
-        });
-
-        props.onNodeDragStop?.(event as MouseEvent, node.value as Node);
-      };
-
-      onUpdated(() => {
-        if (nodeElement.value && !props.isHidden) {
-          store?.updateNodeDimensions([{ id: props.id || '', nodeElement: nodeElement.value, forceUpdate: true }]);
-        }
-      });
-
-      onMounted(() => {
-        if (nodeElement.value && typeof props.resizeObserver?.observe === 'function') {
-          const currNode = nodeElement.value;
-          props.resizeObserver?.observe(currNode);
-
-          return () => props.resizeObserver?.unobserve(currNode);
-        }
-      });
-
-      if (props.isHidden) {
-        return null;
-      }
-
-      const nodeClasses = computed(() => [
-        'revue-flow__node',
-        `revue-flow__node-${props.type}`,
-        {
-          selected: props.selected,
-          selectable: props.isSelectable
-        }
-      ]);
-
-      return () => (
-        <DraggableCore
-          start={onDragStart}
-          move={onDrag}
-          stop={onDragStop}
-          scale={store.transform[2]}
-          disabled={!props.isDraggable}
-          cancel=".nodrag"
-          grid={grid.value}
-          enableUserSelectHack={false}
-        >
-          <div
-            class={nodeClasses.value}
-            ref={nodeElement}
-            style={nodeStyle.value}
-            onMouseenter={onMouseEnterHandler}
-            onMousemove={onMouseMoveHandler}
-            onMouseleave={onMouseLeaveHandler}
-            onContextmenu={onContextMenuHandler}
-            onClick={onSelectNodeHandler}
-            data-id={props.id}
-          >
-            <NodeComponent
-              id={props.id}
-              data={props.data}
-              type={props.type}
-              xPos={props.xPos}
-              yPos={props.yPos}
-              selected={props.selected}
-              isConnectable={props.isConnectable}
-              sourcePosition={props.sourcePosition}
-              targetPosition={props.targetPosition}
-              isDragging={props.isDragging}
-            />
-          </div>
-        </DraggableCore>
-      );
-    }
-  });
-};

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -0,0 +1,118 @@
+<template>
+  <svg :width="width" :height="height" class="revue-flow__edges">
+    <MarkerDefinitions :color="arrowHeadColor" />
+    <g :transform="transformStyle">
+      <template v-for="edge of edges" :key="edge.id">
+        <Edge
+          :edge="edge"
+          :marker-end-id="markerEndId"
+          :onlyRenderVisibleElements="onlyRenderVisibleElements"
+          :type="edgeTypes[edge.type]"
+        />
+        <ConnectionLine
+          v-if="renderConnectionLine"
+          :connectionLineStyle="connectionLineStyle"
+          :connectionLineType="connectionLineType"
+          :CustomConnectionLineComponent="connectionLineComponent"
+        />
+      </template>
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
+import Edge from '../../components/Edges/Edge.vue';
+import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue';
+import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
+import MarkerDefinitions from './MarkerDefinitions.vue';
+
+interface EdgeRendererProps {
+  edgeTypes: any;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
+  connectionLineComponent?: ConnectionLineComponent;
+  connectionMode?: ConnectionMode;
+  arrowHeadColor: string;
+  markerEndId?: string;
+  onlyRenderVisibleElements: boolean;
+  edgeUpdaterRadius?: number;
+}
+
+const EdgeRenderer = defineComponent({
+  name: 'EdgeRenderer',
+  components: {
+    Edge,
+    ConnectionLine,
+    MarkerDefinitions
+  },
+  props: {
+    edgeTypes: {
+      type: Object,
+      required: false,
+      default: undefined
+    },
+    connectionLineType: {
+      type: String as PropType<EdgeRendererProps['connectionLineType']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineStyle: {
+      type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineComponent: {
+      type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
+      required: false,
+      default: undefined
+    },
+    connectionMode: {
+      type: String as PropType<EdgeRendererProps['connectionMode']>,
+      required: false,
+      default: undefined
+    },
+    arrowHeadColor: {
+      type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
+      required: false,
+      default: undefined
+    },
+    markerEndId: {
+      type: String as PropType<EdgeRendererProps['markerEndId']>,
+      required: false,
+      default: undefined
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: undefined
+    },
+    edgeUpdaterRadius: {
+      type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup() {
+    const store = inject<RevueFlowStore>('store')!;
+    const edges = computed(() => store.edges);
+    const transform = computed(() => store.transform);
+    const transformStyle = computed(() => {
+      return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
+    });
+    const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
+    const width = computed(() => store.width);
+    const height = computed(() => store.height);
+
+    return {
+      transform,
+      transformStyle,
+      renderConnectionLine,
+      edges,
+      width,
+      height
+    };
+  }
+});
+
+export default EdgeRenderer;
+</script>

src/container/EdgeRenderer/Marker.vue

@@ -0,0 +1,30 @@
+<template>
+  <marker
+    :id="id"
+    class="revue-flow__arrowhead"
+    markerWidth="12.5"
+    markerHeight="12.5"
+    viewBox="-10 -10 20 20"
+    orient="auto"
+    refX="0"
+    refY="0"
+  >
+    <slot></slot>
+  </marker>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+interface MarkerProps {
+  id: string;
+}
+
+export default defineComponent({
+  props: {
+    id: {
+      type: String as PropType<MarkerProps['id']>,
+      required: true
+    }
+  }
+});
+</script>

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,72 +0,0 @@
-import { defineComponent, PropType } from 'vue';
-
-interface MarkerProps {
-  id: string;
-}
-
-const Marker = defineComponent({
-  props: {
-    id: {
-      type: String as PropType<MarkerProps['id']>,
-      required: true
-    }
-  },
-  setup(props, { slots }) {
-    return () => (
-      <marker
-        class="revue-flow__arrowhead"
-        id={props.id}
-        markerWidth="12.5"
-        markerHeight="12.5"
-        viewBox="-10 -10 20 20"
-        orient="auto"
-        refX="0"
-        refY="0"
-      >
-        {slots.default ? slots.default() : ''}
-      </marker>
-    );
-  }
-});
-
-interface MarkerDefinitionsProps {
-  color: string;
-}
-
-const MarkerDefinitions = defineComponent({
-  name: 'MarkerDefinitions',
-  props: {
-    color: {
-      type: String as PropType<MarkerDefinitionsProps['color']>,
-      required: true
-    }
-  },
-  setup(props) {
-    return () => (
-      <defs>
-        <Marker id="revue-flow__arrowclosed">
-          <polyline
-            stroke={props.color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1"
-            fill={props.color}
-            points="-5,-4 0,0 -5,4 -5,-4"
-          />
-        </Marker>
-        <Marker id="revue-flow__arrow">
-          <polyline
-            stroke={props.color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            fill="none"
-            points="-5,-4 0,0 -5,4"
-          />
-        </Marker>
-      </defs>
-    );
-  }
-});
-
-export default MarkerDefinitions;

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -0,0 +1,45 @@
+<template>
+  <defs>
+    <Marker id="revue-flow__arrowclosed">
+      <polyline
+        :stroke="color"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1"
+        :fill="color"
+        points="-5,-4 0,0 -5,4 -5,-4"
+      />
+    </Marker>
+    <Marker id="revue-flow__arrow">
+      <polyline
+        :stroke="color"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+        fill="none"
+        points="-5,-4 0,0 -5,4"
+      />
+    </Marker>
+  </defs>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import Marker from './Marker.vue';
+
+interface MarkerDefinitionsProps {
+  color: string;
+}
+
+const MarkerDefinitions = defineComponent({
+  name: 'MarkerDefinitions',
+  components: { Marker },
+  props: {
+    color: {
+      type: String as PropType<MarkerDefinitionsProps['color']>,
+      required: true
+    }
+  }
+});
+
+export default MarkerDefinitions;
+</script>

src/container/EdgeRenderer/index.tsx

@@ -1,363 +0,0 @@
-import ConnectionLine from '../../components/ConnectionLine/index';
-import { isEdge } from '../../utils/graph';
-import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
-import {
-  Position,
-  Edge,
-  Node,
-  Elements,
-  Connection,
-  ConnectionLineType,
-  ConnectionLineComponent,
-  ConnectionMode,
-  Transform,
-  OnEdgeUpdateFunc,
-  RevueFlowStore,
-  HandleType
-} from '../../types';
-import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
-import MarkerDefinitions from './MarkerDefinitions';
-
-interface EdgeRendererProps {
-  edgeTypes: any;
-  connectionLineType: ConnectionLineType;
-  connectionLineStyle?: CSSProperties;
-  connectionLineComponent?: ConnectionLineComponent;
-  connectionMode?: ConnectionMode;
-  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
-  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
-  arrowHeadColor: string;
-  markerEndId?: string;
-  onlyRenderVisibleElements: boolean;
-  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;
-  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
-  edgeUpdaterRadius?: number;
-}
-
-interface EdgeWrapperProps {
-  edge: Edge;
-  props: EdgeRendererProps;
-  nodes: Node[];
-  selectedElements: Elements | null;
-  elementsSelectable: boolean;
-  transform: Transform;
-  width: number;
-  height: number;
-  onlyRenderVisibleElements: boolean;
-  connectionMode?: ConnectionMode;
-}
-
-const EdgeCmp = defineComponent({
-  props: {
-    edge: {
-      type: Object as PropType<EdgeWrapperProps['edge']>,
-      required: true
-    },
-    props: {
-      type: Object as PropType<EdgeWrapperProps['props']>,
-      required: true
-    },
-    nodes: {
-      type: Array as unknown as PropType<EdgeWrapperProps['nodes']>,
-      required: true
-    },
-    selectedElements: {
-      type: Array as unknown as PropType<EdgeWrapperProps['selectedElements']>,
-      required: false,
-      default: undefined
-    },
-    elementsSelectable: {
-      type: Boolean as PropType<EdgeWrapperProps['elementsSelectable']>,
-      required: false,
-      default: false
-    },
-    transform: {
-      type: Array as unknown as PropType<EdgeWrapperProps['transform']>,
-      required: false,
-      default: () => []
-    },
-    width: {
-      type: Number as PropType<EdgeWrapperProps['width']>,
-      required: false,
-      default: undefined
-    },
-    height: {
-      type: Number as PropType<EdgeWrapperProps['height']>,
-      required: false,
-      default: undefined
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<EdgeWrapperProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: false
-    },
-    connectionMode: {
-      type: String as PropType<EdgeWrapperProps['connectionMode']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props) {
-    const nodes = computed(() => getSourceTargetNodes(props.edge, props.nodes));
-
-    const onConnectEdge = (connection: Connection) => {
-      props.props.onEdgeUpdate?.(props.edge, connection);
-    };
-
-    if (!nodes.value.sourceNode) {
-      console.log(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
-      return () => null;
-    }
-
-    if (!nodes.value.targetNode) {
-      console.log(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
-      return () => null;
-    }
-
-    const EdgeComponent: any = props.props.edgeTypes[props.edge.type as string] || props.props.edgeTypes.default;
-    const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
-    // when connection type is loose we can define all handles as sources
-    const targetNodeHandles = computed(() =>
-      props.connectionMode === ConnectionMode.Strict
-        ? targetNodeBounds.value?.target
-        : targetNodeBounds.value?.target || targetNodeBounds.value?.source
-    );
-    const sourceHandle = computed(
-      () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
-    );
-    const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
-    const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
-    const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
-
-    const edgePositions = computed(() => {
-      return (
-        nodes.value.sourceNode &&
-        nodes.value.targetNode &&
-        getEdgePositions(
-          nodes.value.sourceNode,
-          sourceHandle.value,
-          sourcePosition.value,
-          nodes.value.targetNode,
-          targetHandle.value,
-          targetPosition.value
-        )
-      );
-    });
-
-    const isVisible = computed(() => {
-      return props.onlyRenderVisibleElements
-        ? edgePositions.value &&
-            isEdgeVisible({
-              sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
-              targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
-              width: props.width || 0,
-              height: props.height || 0,
-              transform: props.transform
-            })
-        : true;
-    });
-
-    if (!isVisible.value) {
-      return null;
-    }
-
-    const isSelected = computed(() => props.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
-
-    return () => (
-      <EdgeComponent
-        key={props.edge.id}
-        id={props.edge.id}
-        class={props.edge.className}
-        type={props.edge.type}
-        data={props.edge.data}
-        onClick={props.props.onElementClick}
-        selected={isSelected}
-        animated={props.edge.animated}
-        label={props.edge.label}
-        labelStyle={props.edge.labelStyle}
-        labelShowBg={props.edge.labelShowBg}
-        labelBgStyle={props.edge.labelBgStyle}
-        labelBgPadding={props.edge.labelBgPadding}
-        labelBgBorderRadius={props.edge.labelBgBorderRadius}
-        style={props.edge.style}
-        arrowHeadType={props.edge.arrowHeadType}
-        source={props.edge.source}
-        target={props.edge.target}
-        sourceHandleId={props.edge.sourceHandle}
-        targetHandleId={props.edge.targetHandle}
-        sourceX={edgePositions.value?.sourceX}
-        sourceY={edgePositions.value?.sourceY}
-        targetX={edgePositions.value?.targetX}
-        targetY={edgePositions.value?.targetY}
-        sourcePosition={sourcePosition}
-        targetPosition={targetPosition}
-        elementsSelectable={props.elementsSelectable}
-        markerEndId={props.props.markerEndId}
-        isHidden={props.edge.isHidden}
-        onConnectEdge={onConnectEdge}
-        handleEdgeUpdate={typeof props.props.onEdgeUpdate !== 'undefined'}
-        onContextMenu={props.props.onEdgeContextMenu}
-        onMouseEnter={props.props.onEdgeMouseEnter}
-        onMouseMove={props.props.onEdgeMouseMove}
-        onMouseLeave={props.props.onEdgeMouseLeave}
-        edgeUpdaterRadius={props.props.edgeUpdaterRadius}
-        onEdgeDoubleClick={props.props.onEdgeDoubleClick}
-        onEdgeUpdateStart={props.props.onEdgeUpdateStart}
-        onEdgeUpdateEnd={props.props.onEdgeUpdateEnd}
-      />
-    );
-  }
-});
-
-const EdgeRenderer = defineComponent({
-  name: 'EdgeRenderer',
-  components: {
-    EdgeCmp,
-    ConnectionLine,
-    MarkerDefinitions
-  },
-  props: {
-    edgeTypes: {
-      type: Object,
-      required: false,
-      default: undefined
-    },
-    connectionLineType: {
-      type: String as PropType<EdgeRendererProps['connectionLineType']>,
-      required: false,
-      default: undefined
-    },
-    connectionLineStyle: {
-      type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
-      required: false,
-      default: undefined
-    },
-    connectionLineComponent: {
-      type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
-      required: false,
-      default: undefined
-    },
-    connectionMode: {
-      type: String as PropType<EdgeRendererProps['connectionMode']>,
-      required: false,
-      default: undefined
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<EdgeRendererProps['onElementClick']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeDoubleClick: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    arrowHeadColor: {
-      type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
-      required: false,
-      default: undefined
-    },
-    markerEndId: {
-      type: String as PropType<EdgeRendererProps['markerEndId']>,
-      required: false,
-      default: undefined
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdate: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdate']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeContextMenu: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseEnter: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseMove: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseLeave: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateStart: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdateStart']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateEnd: {
-      type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdateEnd']>,
-      required: false,
-      default: undefined
-    },
-    edgeUpdaterRadius: {
-      type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store');
-    const transform = computed(() => store?.transform);
-    const transformStyle = computed(() => {
-      return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
-    });
-    const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
-
-    return () => (
-      <svg width={store?.width} height={store?.height} class="revue-flow__edges">
-        <MarkerDefinitions color={props.arrowHeadColor as string} />
-        <g transform={transformStyle.value}>
-          {store?.edges.map((edge: Edge) => (
-            <EdgeCmp
-              key={edge.id}
-              edge={edge}
-              props={props as any}
-              nodes={store?.nodes}
-              selectedElements={store?.selectedElements}
-              elementsSelectable={store?.elementsSelectable}
-              transform={store?.transform}
-              width={store?.width}
-              height={store?.height}
-              onlyRenderVisibleElements={props.onlyRenderVisibleElements}
-            />
-          ))}
-          {renderConnectionLine.value && (
-            <ConnectionLine
-              nodes={store?.nodes}
-              connectionNodeId={store?.connectionNodeId as string}
-              connectionHandleId={store?.connectionHandleId as string}
-              connectionHandleType={store?.connectionHandleType as HandleType}
-              connectionPositionX={store?.connectionPosition.x}
-              connectionPositionY={store?.connectionPosition.y}
-              transform={store?.transform}
-              connectionLineStyle={props.connectionLineStyle}
-              connectionLineType={props.connectionLineType}
-              isConnectable={store?.nodesConnectable}
-              CustomConnectionLineComponent={props.connectionLineComponent}
-            />
-          )}
-        </g>
-      </svg>
-    );
-  }
-});
-
-export default EdgeRenderer;

src/container/EdgeRenderer/utils.ts

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

src/container/FlowRenderer/FlowRenderer.vue

@@ -1,8 +1,5 @@
 <template>
   <ZoomPane
-    :onMove="onMove"
-    :onMoveStart="onMoveStart"
-    :onMoveEnd="onMoveEnd"
     :selectionKeyPressed="keyPressed"
     :elementsSelectable="elementsSelectable"
     :zoomOnScroll="zoomOnScroll"
@@ -19,13 +16,7 @@
   >
     <slot></slot>
     <UserSelection v-if="keyPressed" />
-    <NodesSelection
+    <NodesSelection v-if="selectionActive" />
-      v-if="selectionActive"
-      :onSelectionDragStart="onSelectionDragStart"
-      :onSelectionDrag="onSelectionDrag"
-      :onSelectionDragStop="onSelectionDragStop"
-      :onSelectionContextMenu="onSelectionContextMenu"
-    />
     <div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
   </ZoomPane>
 </template>
@@ -56,61 +47,6 @@ const FlowRenderer = defineComponent({
   name: 'FlowRenderer',
   components: { UserSelection, ZoomPane, NodesSelection },
   props: {
-    onPaneClick: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
-      required: false,
-      default: undefined
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
-      required: false,
-      default: undefined
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
-      required: false,
-      default: undefined
-    },
-    onMove: {
-      type: Function as unknown as PropType<FlowRendererProps['onMove']>,
-      required: false,
-      default: undefined
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
-      required: false,
-      default: undefined
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined
-    },
     deleteKeyCode: {
       type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
       required: false,
@@ -194,9 +130,9 @@ const FlowRenderer = defineComponent({
 
     useGlobalKeyHandler({
       store,
-      onElementsRemove: props.onElementsRemove,
+      onElementsRemove: hooks.elementsRemove.trigger,
-      deleteKeyCode: props.deleteKeyCode,
+      deleteKeyCode: props.deleteKeyCode || '',
-      multiSelectionKeyCode: props.multiSelectionKeyCode
+      multiSelectionKeyCode: props.multiSelectionKeyCode || ''
     });
 
     const onClick = (event: MouseEvent) => {

src/container/FlowRenderer/index.tsx

@@ -1,217 +0,0 @@
-import { defineComponent, inject, PropType } from 'vue';
-import ZoomPane from '../ZoomPane';
-import UserSelection from '../../components/UserSelection';
-import NodesSelection from '../../components/NodesSelection';
-import { RevueFlowStore, GraphViewProps } from '../../types';
-import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
-import useKeyPress from '../../hooks/useKeyPress';
-
-type FlowRendererProps = Omit<
-  GraphViewProps,
-  | 'elements'
-  | 'snapToGrid'
-  | 'nodeTypes'
-  | 'edgeTypes'
-  | 'snapGrid'
-  | 'connectionLineType'
-  | 'arrowHeadColor'
-  | 'onlyRenderVisibleElements'
-  | 'selectNodesOnDrag'
->;
-
-const FlowRenderer = defineComponent({
-  name: 'FlowRenderer',
-  components: { UserSelection, ZoomPane, NodesSelection },
-  props: {
-    onPaneClick: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
-      required: false,
-      default: undefined
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
-      required: false,
-      default: undefined
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
-      required: false,
-      default: undefined
-    },
-    onMove: {
-      type: Function as unknown as PropType<FlowRendererProps['onMove']>,
-      required: false,
-      default: undefined
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
-      required: false,
-      default: undefined
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    deleteKeyCode: {
-      type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    selectionKeyCode: {
-      type: [Number, String] as PropType<FlowRendererProps['selectionKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    multiSelectionKeyCode: {
-      type: [Number, String] as PropType<FlowRendererProps['multiSelectionKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    zoomActivationKeyCode: {
-      type: [Number, String] as PropType<FlowRendererProps['zoomActivationKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    elementsSelectable: {
-      type: Boolean as PropType<FlowRendererProps['elementsSelectable']>,
-      required: false,
-      default: false
-    },
-    zoomOnScroll: {
-      type: Boolean as PropType<FlowRendererProps['zoomOnScroll']>,
-      required: false,
-      default: false
-    },
-    zoomOnPinch: {
-      type: Boolean as PropType<FlowRendererProps['zoomOnPinch']>,
-      required: false,
-      default: false
-    },
-    panOnScroll: {
-      type: Boolean as PropType<FlowRendererProps['panOnScroll']>,
-      required: false,
-      default: false
-    },
-    panOnScrollSpeed: {
-      type: Number as PropType<FlowRendererProps['panOnScrollSpeed']>,
-      required: false,
-      default: undefined
-    },
-    panOnScrollMode: {
-      type: String as PropType<FlowRendererProps['panOnScrollMode']>,
-      required: false,
-      default: undefined
-    },
-    zoomOnDoubleClick: {
-      type: Boolean as PropType<FlowRendererProps['zoomOnDoubleClick']>,
-      required: false,
-      default: false
-    },
-    paneMoveable: {
-      type: Boolean as PropType<FlowRendererProps['paneMoveable']>,
-      required: false,
-      default: false
-    },
-    defaultPosition: {
-      type: Array as unknown as PropType<FlowRendererProps['defaultPosition']>,
-      required: false,
-      default: undefined
-    },
-    defaultZoom: {
-      type: Number as PropType<FlowRendererProps['defaultZoom']>,
-      required: false,
-      default: undefined
-    },
-    translateExtent: {
-      type: Array as unknown as PropType<FlowRendererProps['translateExtent']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props, { slots }) {
-    const store = inject<RevueFlowStore>('store')!;
-    const keyPressed = useKeyPress(props.selectionKeyCode);
-
-    useGlobalKeyHandler({
-      store,
-      onElementsRemove: props.onElementsRemove,
-      deleteKeyCode: props.deleteKeyCode as string,
-      multiSelectionKeyCode: props.multiSelectionKeyCode as string
-    });
-
-    const onClick = (event: MouseEvent) => {
-      props.onPaneClick?.(event);
-      store?.unsetNodesSelection();
-      store?.resetSelectedElements();
-    };
-
-    const onContextMenu = (event: MouseEvent) => {
-      props.onPaneContextMenu?.(event);
-    };
-
-    const onWheel = (event: WheelEvent) => {
-      props.onPaneScroll?.(event);
-    };
-
-    return () => (
-      <ZoomPane
-        onMove={props.onMove}
-        onMoveStart={props.onMoveStart}
-        onMoveEnd={props.onMoveEnd}
-        selectionKeyPressed={keyPressed.value}
-        elementsSelectable={props.elementsSelectable}
-        zoomOnScroll={props.zoomOnScroll}
-        zoomOnPinch={props.zoomOnPinch}
-        panOnScroll={props.panOnScroll}
-        panOnScrollSpeed={props.panOnScrollSpeed}
-        panOnScrollMode={props.panOnScrollMode}
-        zoomOnDoubleClick={props.zoomOnDoubleClick}
-        paneMoveable={props.paneMoveable}
-        defaultPosition={props.defaultPosition}
-        defaultZoom={props.defaultZoom}
-        translateExtent={props.translateExtent}
-        zoomActivationKeyCode={props.zoomActivationKeyCode}
-      >
-        {slots.default ? slots.default() : ''}
-        {keyPressed.value ? <UserSelection /> : ''}
-        {store?.nodesSelectionActive && (
-          <NodesSelection
-            onSelectionDragStart={props.onSelectionDragStart}
-            onSelectionDrag={props.onSelectionDrag}
-            onSelectionDragStop={props.onSelectionDragStop}
-            onSelectionContextMenu={props.onSelectionContextMenu}
-          />
-        )}
-        <div class="revue-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
-      </ZoomPane>
-    );
-  }
-});
-
-export default FlowRenderer;

src/container/GraphView/GraphView.vue

@@ -1,17 +1,10 @@
 <template>
   <FlowRenderer
-    :onPaneClick="onPaneClick"
-    :onPaneContextMenu="onPaneContextMenu"
-    :onPaneScroll="onPaneScroll"
-    :onElementsRemove="onElementsRemove"
     :deleteKeyCode="deleteKeyCode"
     :selectionKeyCode="selectionKeyCode"
     :multiSelectionKeyCode="multiSelectionKeyCode"
     :zoomActivationKeyCode="zoomActivationKeyCode"
     :elementsSelectable="elementsSelectable"
-    :onMove="onMove"
-    :onMoveStart="onMoveStart"
-    :onMoveEnd="onMoveEnd"
     :zoomOnScroll="zoomOnScroll"
     :zoomOnPinch="zoomOnPinch"
     :zoomOnDoubleClick="zoomOnDoubleClick"
@@ -22,22 +15,9 @@
     :defaultPosition="defaultPosition"
     :defaultZoom="defaultZoom"
     :translateExtent="translateExtent"
-    :onSelectionDragStart="onSelectionDragStart"
-    :onSelectionDrag="onSelectionDrag"
-    :onSelectionDragStop="onSelectionDragStop"
-    :onSelectionContextMenu="onSelectionContextMenu"
   >
     <NodeRenderer
       :nodeTypes="nodeTypes"
-      :onElementClick="onElementClick"
-      :onNodeDoubleClick="onNodeDoubleClick"
-      :onNodeMouseEnter="onNodeMouseEnter"
-      :onNodeMouseMove="onNodeMouseMove"
-      :onNodeMouseLeave="onNodeMouseLeave"
-      :onNodeContextMenu="onNodeContextMenu"
-      :onNodeDragStop="onNodeDragStop"
-      :onNodeDrag="onNodeDrag"
-      :onNodeDragStart="onNodeDragStart"
       :selectNodesOnDrag="selectNodesOnDrag"
       :snapToGrid="snapToGrid"
       :snapGrid="snapGrid"
@@ -45,22 +25,13 @@
     />
     <EdgeRenderer
       :edgeTypes="edgeTypes"
-      :onElementClick="onElementClick"
-      :onEdgeDoubleClick="onEdgeDoubleClick"
       :connectionLineType="connectionLineType"
       :connectionLineStyle="connectionLineStyle"
       :connectionLineComponent="connectionLineComponent"
       :connectionMode="connectionMode"
       :arrowHeadColor="arrowHeadColor"
       :markerEndId="markerEndId"
-      :onEdgeUpdate="onEdgeUpdate"
       :onlyRenderVisibleElements="onlyRenderVisibleElements"
-      :onEdgeContextMenu="onEdgeContextMenu"
-      :onEdgeMouseEnter="onEdgeMouseEnter"
-      :onEdgeMouseMove="onEdgeMouseMove"
-      :onEdgeMouseLeave="onEdgeMouseLeave"
-      :onEdgeUpdateStart="onEdgeUpdateStart"
-      :onEdgeUpdateEnd="onEdgeUpdateEnd"
       :edgeUpdaterRadius="edgeUpdaterRadius"
     />
   </FlowRenderer>
@@ -68,8 +39,8 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
 import FlowRenderer from '../FlowRenderer/FlowRenderer.vue';
-import NodeRenderer from '../NodeRenderer';
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue';
-import EdgeRenderer from '../EdgeRenderer';
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import { GraphViewProps, RevueFlowStore } from '../../types';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
@@ -89,106 +60,6 @@ const GraphView = defineComponent({
       required: false,
       default: undefined
     },
-    onMove: {
-      type: Function as unknown as PropType<GraphViewProps['onMove']>,
-      required: false,
-      default: undefined
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
-      required: false,
-      default: undefined
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
-      required: false,
-      default: undefined
-    },
-    onLoad: {
-      type: Function as unknown as PropType<GraphViewProps['onLoad']>,
-      required: false,
-      default: undefined
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDoubleClick: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeDoubleClick: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseEnter: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseMove: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseLeave: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onNodeContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStart: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDrag: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStop: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
-      required: false,
-      default: undefined
-    },
-    onConnect: {
-      type: Function as unknown as PropType<GraphViewProps['onConnect']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStart: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStop: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
-      required: false,
-      default: undefined
-    },
-    onConnectEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
-      required: false,
-      default: undefined
-    },
     connectionMode: {
       type: String as PropType<GraphViewProps['connectionMode']>,
       required: false,
@@ -339,71 +210,6 @@ const GraphView = defineComponent({
       required: false,
       default: undefined
     },
-    onPaneClick: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
-      required: false,
-      default: undefined
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
-      required: false,
-      default: undefined
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdate: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseEnter: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseMove: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseLeave: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateStart: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined
-    },
     edgeUpdaterRadius: {
       type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
       required: false,

src/container/GraphView/index.tsx

@@ -1,477 +0,0 @@
-import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
-import FlowRenderer from '../FlowRenderer';
-import NodeRenderer from '../NodeRenderer';
-import EdgeRenderer from '../EdgeRenderer';
-import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
-import { GraphViewProps, RevueFlowStore } from '../../types';
-import useZoomPanHelper from '../../hooks/useZoomPanHelper';
-
-const GraphView = defineComponent({
-  name: 'GraphView',
-  components: { NodeRenderer, EdgeRenderer },
-  props: {
-    nodeTypes: {
-      type: Object as PropType<GraphViewProps['nodeTypes']>,
-      required: false,
-      default: undefined
-    },
-    edgeTypes: {
-      type: Object as PropType<GraphViewProps['edgeTypes']>,
-      required: false,
-      default: undefined
-    },
-    onMove: {
-      type: Function as unknown as PropType<GraphViewProps['onMove']>,
-      required: false,
-      default: undefined as any
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
-      required: false,
-      default: undefined as any
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
-      required: false,
-      default: undefined as any
-    },
-    onLoad: {
-      type: Function as unknown as PropType<GraphViewProps['onLoad']>,
-      required: false,
-      default: undefined as any
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeDoubleClick: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeDoubleClick: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeMouseEnter: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeMouseMove: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeMouseLeave: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeDragStart: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeDrag: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
-      required: false,
-      default: undefined as any
-    },
-    onNodeDragStop: {
-      type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
-      required: false,
-      default: undefined as any
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined as any
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
-      required: false,
-      default: undefined as any
-    },
-    onConnect: {
-      type: Function as unknown as PropType<GraphViewProps['onConnect']>,
-      required: false,
-      default: undefined as any
-    },
-    onConnectStart: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
-      required: false,
-      default: undefined as any
-    },
-    onConnectStop: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
-      required: false,
-      default: undefined as any
-    },
-    onConnectEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
-      required: false,
-      default: undefined as any
-    },
-    connectionMode: {
-      type: String as PropType<GraphViewProps['connectionMode']>,
-      required: false,
-      default: undefined
-    },
-    connectionLineType: {
-      type: String as PropType<GraphViewProps['connectionLineType']>,
-      required: false,
-      default: undefined
-    },
-    connectionLineStyle: {
-      type: Object as PropType<GraphViewProps['connectionLineStyle']>,
-      required: false,
-      default: () => ({} as CSSProperties)
-    },
-    connectionLineComponent: {
-      type: Object as PropType<GraphViewProps['connectionLineComponent']>,
-      required: false,
-      default: undefined as any
-    },
-    selectionKeyCode: {
-      type: [Number, String] as PropType<GraphViewProps['selectionKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    multiSelectionKeyCode: {
-      type: [Number, String] as PropType<GraphViewProps['multiSelectionKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    zoomActivationKeyCode: {
-      type: [Number, String] as PropType<GraphViewProps['zoomActivationKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    deleteKeyCode: {
-      type: [Number, String] as PropType<GraphViewProps['deleteKeyCode']>,
-      required: false,
-      default: undefined
-    },
-    snapToGrid: {
-      type: Boolean as PropType<GraphViewProps['snapToGrid']>,
-      required: false,
-      default: undefined
-    },
-    snapGrid: {
-      type: Array as unknown as PropType<GraphViewProps['snapGrid']>,
-      required: false,
-      default: undefined
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<GraphViewProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: undefined
-    },
-    nodesDraggable: {
-      type: Boolean as PropType<GraphViewProps['nodesDraggable']>,
-      required: false,
-      default: undefined
-    },
-    nodesConnectable: {
-      type: Boolean as PropType<GraphViewProps['nodesConnectable']>,
-      required: false,
-      default: undefined
-    },
-    elementsSelectable: {
-      type: Boolean as PropType<GraphViewProps['elementsSelectable']>,
-      required: false,
-      default: undefined
-    },
-    selectNodesOnDrag: {
-      type: Boolean as PropType<GraphViewProps['selectNodesOnDrag']>,
-      required: false,
-      default: undefined
-    },
-    minZoom: {
-      type: Number as PropType<GraphViewProps['minZoom']>,
-      required: false,
-      default: undefined
-    },
-    maxZoom: {
-      type: Number as PropType<GraphViewProps['maxZoom']>,
-      required: false,
-      default: undefined
-    },
-    defaultZoom: {
-      type: Number as PropType<GraphViewProps['defaultZoom']>,
-      required: false,
-      default: undefined
-    },
-    defaultPosition: {
-      type: Array as unknown as PropType<GraphViewProps['defaultPosition']>,
-      required: false,
-      default: undefined
-    },
-    translateExtent: {
-      type: Array as unknown as PropType<GraphViewProps['translateExtent']>,
-      required: false,
-      default: undefined
-    },
-    nodeExtent: {
-      type: Array as unknown as PropType<GraphViewProps['nodeExtent']>,
-      required: false,
-      default: undefined
-    },
-    arrowHeadColor: {
-      type: String as PropType<GraphViewProps['arrowHeadColor']>,
-      required: false,
-      default: undefined
-    },
-    markerEndId: {
-      type: String as PropType<GraphViewProps['markerEndId']>,
-      required: false,
-      default: undefined
-    },
-    zoomOnScroll: {
-      type: Boolean as PropType<GraphViewProps['zoomOnScroll']>,
-      required: false,
-      default: undefined
-    },
-    zoomOnPinch: {
-      type: Boolean as PropType<GraphViewProps['zoomOnPinch']>,
-      required: false,
-      default: undefined
-    },
-    panOnScroll: {
-      type: Boolean as PropType<GraphViewProps['panOnScroll']>,
-      required: false,
-      default: undefined
-    },
-    panOnScrollSpeed: {
-      type: Number as PropType<GraphViewProps['panOnScrollSpeed']>,
-      required: false,
-      default: undefined
-    },
-    panOnScrollMode: {
-      type: String as PropType<GraphViewProps['panOnScrollMode']>,
-      required: false,
-      default: undefined
-    },
-    zoomOnDoubleClick: {
-      type: Boolean as PropType<GraphViewProps['zoomOnDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    paneMoveable: {
-      type: Boolean as PropType<GraphViewProps['paneMoveable']>,
-      required: false,
-      default: undefined
-    },
-    onPaneClick: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
-      required: false,
-      default: undefined as any
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
-      required: false,
-      default: undefined as any
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeUpdate: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeMouseEnter: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeContextMenu: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeMouseMove: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeMouseLeave: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeUpdateEnd: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
-      required: false,
-      default: undefined as any
-    },
-    onEdgeUpdateStart: {
-      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
-      required: false,
-      default: undefined as any
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined as any
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
-      required: false,
-      default: undefined as any
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined as any
-    },
-    edgeUpdaterRadius: {
-      type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store')!;
-
-    const { onReady } = useZoomPanHelper(store);
-    onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
-      if (initialized) {
-        if (props.onLoad && store) {
-          props.onLoad({
-            fitView: (params = { padding: 0.1 }) => fitView(params),
-            zoomIn,
-            zoomOut,
-            zoomTo,
-            setTransform: transform,
-            project: onLoadProject(store),
-            getElements: onLoadGetElements(store),
-            toObject: onLoadToObject(store)
-          });
-        }
-      }
-    });
-
-    onMounted(() => {
-      if (typeof props.nodesConnectable !== 'undefined') {
-        store.nodesConnectable = !!props.nodesConnectable;
-      }
-      if (typeof props.elementsSelectable !== 'undefined') {
-        store.elementsSelectable = !!props.elementsSelectable;
-      }
-      if (typeof props.nodesDraggable !== 'undefined') {
-        store.nodesDraggable = !!props.nodesDraggable;
-      }
-
-      if (typeof props.connectionMode !== 'undefined') {
-        store.connectionMode = props.connectionMode;
-      }
-    });
-
-    onBeforeMount(() => {
-      if (typeof props.snapToGrid !== 'undefined') {
-        store.snapToGrid = props.snapToGrid;
-      }
-
-      if (typeof props.snapGrid !== 'undefined') {
-        store.snapGrid = props.snapGrid;
-      }
-
-      if (typeof props.minZoom !== 'undefined') {
-        store?.setMinZoom(props.minZoom);
-      }
-
-      if (typeof props.maxZoom !== 'undefined') {
-        store?.setMaxZoom(props.maxZoom);
-      }
-
-      if (typeof props.translateExtent !== 'undefined') {
-        store?.setTranslateExtent(props.translateExtent);
-      }
-
-      if (typeof props.nodeExtent !== 'undefined') {
-        store?.setNodeExtent(props.nodeExtent);
-      }
-    });
-
-    return () => (
-      <FlowRenderer
-        onPaneClick={props.onPaneClick}
-        onPaneContextMenu={props.onPaneContextMenu}
-        onPaneScroll={props.onPaneScroll}
-        onElementsRemove={props.onElementsRemove}
-        deleteKeyCode={props.deleteKeyCode}
-        selectionKeyCode={props.selectionKeyCode}
-        multiSelectionKeyCode={props.multiSelectionKeyCode}
-        zoomActivationKeyCode={props.zoomActivationKeyCode}
-        elementsSelectable={props.elementsSelectable}
-        onMove={props.onMove}
-        onMoveStart={props.onMoveStart}
-        onMoveEnd={props.onMoveEnd}
-        zoomOnScroll={props.zoomOnScroll}
-        zoomOnPinch={props.zoomOnPinch}
-        zoomOnDoubleClick={props.zoomOnDoubleClick}
-        panOnScroll={props.panOnScroll}
-        panOnScrollSpeed={props.panOnScrollSpeed}
-        panOnScrollMode={props.panOnScrollMode}
-        paneMoveable={props.paneMoveable}
-        defaultPosition={props.defaultPosition}
-        defaultZoom={props.defaultZoom}
-        translateExtent={props.translateExtent}
-        onSelectionDragStart={props.onSelectionDragStart}
-        onSelectionDrag={props.onSelectionDrag}
-        onSelectionDragStop={props.onSelectionDragStop}
-        onSelectionContextMenu={props.onSelectionContextMenu}
-      >
-        <NodeRenderer
-          nodeTypes={props.nodeTypes}
-          onElementClick={props.onElementClick}
-          onNodeDoubleClick={props.onNodeDoubleClick}
-          onNodeMouseEnter={props.onNodeMouseEnter}
-          onNodeMouseMove={props.onNodeMouseMove}
-          onNodeMouseLeave={props.onNodeMouseLeave}
-          onNodeContextMenu={props.onNodeContextMenu}
-          onNodeDragStop={props.onNodeDragStop}
-          onNodeDrag={props.onNodeDrag}
-          onNodeDragStart={props.onNodeDragStart}
-          selectNodesOnDrag={props.selectNodesOnDrag}
-          snapToGrid={props.snapToGrid}
-          snapGrid={props.snapGrid}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
-        />
-        <EdgeRenderer
-          edgeTypes={props.edgeTypes}
-          onElementClick={props.onElementClick}
-          onEdgeDoubleClick={props.onEdgeDoubleClick}
-          connectionLineType={props.connectionLineType}
-          connectionLineStyle={props.connectionLineStyle}
-          connectionLineComponent={props.connectionLineComponent}
-          connectionMode={props.connectionMode}
-          arrowHeadColor={props.arrowHeadColor}
-          markerEndId={props.markerEndId}
-          onEdgeUpdate={props.onEdgeUpdate}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
-          onEdgeContextMenu={props.onEdgeContextMenu}
-          onEdgeMouseEnter={props.onEdgeMouseEnter}
-          onEdgeMouseMove={props.onEdgeMouseMove}
-          onEdgeMouseLeave={props.onEdgeMouseLeave}
-          onEdgeUpdateStart={props.onEdgeUpdateStart}
-          onEdgeUpdateEnd={props.onEdgeUpdateEnd}
-          edgeUpdaterRadius={props.edgeUpdaterRadius}
-        />
-      </FlowRenderer>
-    );
-  }
-});
-
-export default GraphView;

src/container/NodeRenderer/NodeRenderer.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="revue-flow__nodes" :style="transformStyle">
+    <template v-for="(node, i) of visibleNodes" :key="`node-${i}`">
+      <Node
+        :node="node"
+        :snap-grid="snapGrid"
+        :snap-to-grid="snapToGrid"
+        :select-nodes-on-drag="selectNodesOnDrag"
+        :type="nodeTypes[node.type]"
+      />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { getNodesInside } from '../../utils/graph';
+import { NodeTypesType, RevueFlowStore } from '../../types';
+import { computed, defineComponent, inject, PropType } from 'vue';
+import Node from '../../components/Nodes/Node.vue';
+
+interface NodeRendererProps {
+  nodeTypes: NodeTypesType;
+  selectNodesOnDrag: boolean;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+  onlyRenderVisibleElements: boolean;
+}
+
+const NodeRenderer = defineComponent({
+  name: 'NodeRenderer',
+  components: { Node },
+  props: {
+    nodeTypes: {
+      type: Object as PropType<NodeRendererProps['nodeTypes']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
+      required: false,
+      default: undefined
+    },
+    snapToGrid: {
+      type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
+      required: false,
+      default: undefined
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
+      required: false,
+      default: undefined
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+
+    const visibleNodes = computed(() => {
+      return props.onlyRenderVisibleElements
+        ? store.nodes &&
+            getNodesInside(
+              store.nodes,
+              {
+                x: 0,
+                y: 0,
+                width: store?.width,
+                height: store?.height
+              },
+              store.transform,
+              true
+            )
+        : store.nodes;
+    });
+
+    const transformStyle = computed(() => ({
+      transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
+    }));
+
+    return {
+      transformStyle,
+      visibleNodes
+    };
+  }
+});
+
+export default NodeRenderer;
+</script>

src/container/NodeRenderer/index.tsx

@@ -1,189 +0,0 @@
-import { getNodesInside } from '../../utils/graph';
-import { Node, NodeTypesType, Edge, RevueFlowStore } from '../../types';
-import { computed, defineComponent, inject, PropType } from 'vue';
-
-interface NodeRendererProps {
-  nodeTypes: NodeTypesType;
-  selectNodesOnDrag: boolean;
-  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
-  onNodeDoubleClick?: (event: MouseEvent, element: 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;
-  snapToGrid: boolean;
-  snapGrid: [number, number];
-  onlyRenderVisibleElements: boolean;
-}
-
-const NodeRenderer = defineComponent({
-  name: 'NodeRenderer',
-  props: {
-    nodeTypes: {
-      type: Object as PropType<NodeRendererProps['nodeTypes']>,
-      required: false,
-      default: undefined
-    },
-    selectNodesOnDrag: {
-      type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
-      required: false,
-      default: undefined
-    },
-    snapToGrid: {
-      type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
-      required: false,
-      default: undefined
-    },
-    snapGrid: {
-      type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
-      required: false,
-      default: undefined
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: undefined
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<NodeRendererProps['onElementClick']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeDoubleClick: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeDoubleClick']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeMouseEnter: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeMouseEnter']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeMouseMove: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeMouseMove']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeMouseLeave: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeMouseLeave']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeContextMenu: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeContextMenu']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeDrag: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeDrag']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeDragStart: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeDragStart']>,
-      required: false,
-      default: () => {}
-    },
-    onNodeDragStop: {
-      type: Function as unknown as PropType<NodeRendererProps['onNodeDragStop']>,
-      required: false,
-      default: () => {}
-    }
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store')!;
-
-    const visibleNodes = computed(() => {
-      return props.onlyRenderVisibleElements
-        ? store.nodes &&
-            getNodesInside(
-              store.nodes,
-              {
-                x: 0,
-                y: 0,
-                width: store?.width,
-                height: store?.height
-              },
-              store.transform,
-              true
-            )
-        : store.nodes;
-    });
-
-    const transformStyle = computed(() => ({
-      transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
-    }));
-
-    const resizeObserver = computed(() => {
-      if (typeof ResizeObserver === 'undefined') {
-        return null;
-      }
-
-      return new ResizeObserver((entries: ResizeObserverEntry[]) => {
-        const updates = entries.map((entry: ResizeObserverEntry) => ({
-          id: entry.target.getAttribute('data-id') as string,
-          nodeElement: entry.target as HTMLDivElement
-        }));
-
-        store.updateNodeDimensions(updates);
-      });
-    });
-
-    return () => (
-      <div class="revue-flow__nodes" style={transformStyle.value}>
-        {visibleNodes.value?.map((node) => {
-          const nodeType = node.type || 'default';
-          if (props.nodeTypes) {
-            const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
-            if (!props.nodeTypes[nodeType]) {
-              console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
-            }
-
-            const isDraggable = !!(node.draggable || (store?.nodesDraggable && typeof node.draggable === 'undefined'));
-            const isSelectable = !!(node.selectable || (store?.elementsSelectable && typeof node.selectable === 'undefined'));
-            const isConnectable = !!(node.connectable || (store?.nodesConnectable && typeof node.connectable === 'undefined'));
-
-            return (
-              <NodeComponent
-                key={node.id}
-                id={node.id}
-                type={nodeType}
-                data={node.data}
-                sourcePosition={node.sourcePosition}
-                targetPosition={node.targetPosition}
-                isHidden={node.isHidden}
-                xPos={node.__rf.position.x}
-                yPos={node.__rf.position.y}
-                isDragging={node.__rf.isDragging}
-                isInitialized={node.__rf.width !== null && node.__rf.height !== null}
-                snapGrid={props.snapGrid}
-                snapToGrid={props.snapToGrid}
-                selectNodesOnDrag={props.selectNodesOnDrag}
-                onClick={props.onElementClick}
-                onMouseEnter={props.onNodeMouseEnter}
-                onMouseMove={props.onNodeMouseMove}
-                onMouseLeave={props.onNodeMouseLeave}
-                onContextMenu={props.onNodeContextMenu}
-                onNodeDoubleClick={props.onNodeDoubleClick}
-                onNodeDragStart={props.onNodeDragStart}
-                onNodeDrag={props.onNodeDrag}
-                onNodeDragStop={props.onNodeDragStop}
-                scale={store?.transform[2]}
-                selected={store?.selectedElements?.some(({ id }) => id === node.id) || false}
-                isDraggable={isDraggable}
-                isSelectable={isSelectable}
-                isConnectable={isConnectable}
-                resizeObserver={resizeObserver.value}
-              />
-            );
-          }
-        })}
-      </div>
-    );
-  }
-});
-
-export default NodeRenderer;

src/container/NodeRenderer/utils.ts

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

src/container/RevueFlow/RevueFlow.vue

@@ -1,19 +1,6 @@
 <template>
   <div class="revue-flow">
     <GraphView
-      :onLoad="onLoad"
-      :onMove="onMove"
-      :onMoveStart="onMoveStart"
-      :onMoveEnd="onMoveEnd"
-      :onElementClick="onElementClick"
-      :onNodeMouseEnter="onNodeMouseEnter"
-      :onNodeMouseMove="onNodeMouseMove"
-      :onNodeMouseLeave="onNodeMouseLeave"
-      :onNodeContextMenu="onNodeContextMenu"
-      :onNodeDoubleClick="onNodeDoubleClick"
-      :onNodeDragStart="onNodeDragStart"
-      :onNodeDrag="onNodeDrag"
-      :onNodeDragStop="onNodeDragStop"
       :nodeTypes="nodeTypesParsed"
       :edgeTypes="edgeTypesParsed"
       :connectionMode="connectionMode"
@@ -21,14 +8,9 @@
       :connectionLineStyle="connectionLineStyle"
       :connectionLineComponent="connectionLineComponent"
       :selectionKeyCode="selectionKeyCode"
-      :onElementsRemove="onElementsRemove"
       :deleteKeyCode="deleteKeyCode"
       :multiSelectionKeyCode="multiSelectionKeyCode"
       :zoomActivationKeyCode="zoomActivationKeyCode"
-      :onConnect="onConnect"
-      :onConnectStart="onConnectStart"
-      :onConnectStop="onConnectStop"
-      :onConnectEnd="onConnectEnd"
       :snapToGrid="snapToGrid"
       :snapGrid="snapGrid"
       :onlyRenderVisibleElements="onlyRenderVisibleElements"
@@ -51,21 +33,6 @@
       :panOnScrollSpeed="panOnScrollSpeed"
       :panOnScrollMode="panOnScrollMode"
       :paneMoveable="paneMoveable"
-      :onPaneClick="onPaneClick"
-      :onPaneScroll="onPaneScroll"
-      :onPaneContextMenu="onPaneContextMenu"
-      :onSelectionDragStart="onSelectionDragStart"
-      :onSelectionDrag="onSelectionDrag"
-      :onSelectionDragStop="onSelectionDragStop"
-      :onSelectionContextMenu="onSelectionContextMenu"
-      :onEdgeUpdate="onEdgeUpdate"
-      :onEdgeContextMenu="onEdgeContextMenu"
-      :onEdgeDoubleClick="onEdgeDoubleClick"
-      :onEdgeMouseEnter="onEdgeMouseEnter"
-      :onEdgeMouseMove="onEdgeMouseMove"
-      :onEdgeMouseLeave="onEdgeMouseLeave"
-      :onEdgeUpdateStart="onEdgeUpdateStart"
-      :onEdgeUpdateEnd="onEdgeUpdateEnd"
       :edgeUpdaterRadius="edgeUpdaterRadius"
     />
     <slot></slot>
@@ -101,12 +68,13 @@ const defaultEdgeTypes = {
   smoothstep: SmoothStepEdge
 };
 
+const eventHooks = useRevueFlow();
 const RevueFlow = defineComponent({
   name: 'RevueFlow',
   components: { GraphView },
   props: {
     modelValue: {
-      type: Array as PropType<RevueFlowProps['elements']>,
+      type: Array as PropType<RevueFlowProps['modelValue']>,
       required: false,
       default: () => []
     },
@@ -130,106 +98,6 @@ const RevueFlow = defineComponent({
       required: false,
       default: () => defaultEdgeTypes
     },
-    onMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onMove']>,
-      required: false,
-      default: undefined
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
-      required: false,
-      default: undefined
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
-      required: false,
-      default: undefined
-    },
-    onLoad: {
-      type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
-      required: false,
-      default: undefined
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDoubleClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeDoubleClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseEnter: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseLeave: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onNodeContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDrag: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
-      required: false,
-      default: undefined
-    },
-    onConnect: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
-      required: false,
-      default: undefined
-    },
-    onConnectEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
-      required: false,
-      default: undefined
-    },
     connectionMode: {
       type: String as PropType<RevueFlowProps['connectionMode']>,
       required: false,
@@ -380,87 +248,18 @@ const RevueFlow = defineComponent({
       required: false,
       default: true
     },
-    onPaneClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
-      required: false,
-      default: undefined
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
-      required: false,
-      default: undefined
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdate: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseEnter: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseLeave: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionChange: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
-      required: false,
-      default: undefined
-    },
     edgeUpdaterRadius: {
       type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
       required: false,
       default: 10
     }
   },
-  emits: ['', 'load'],
+  emits: Object.keys(eventHooks),
   setup(props, { emit }) {
     const store = configureStore(initialState)();
     provide<RevueFlowStore>('store', store);
-    provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
+    eventHooks.bind(emit);
+    provide<RevueFlowHooks>('hooks', eventHooks);
     const elements = useVModel(props, 'modelValue', emit);
 
     store.setElements(elements.value);
@@ -469,7 +268,6 @@ const RevueFlow = defineComponent({
     });
 
     onUpdated(() => {
-      console.log('updated');
       store.setElements(elements.value);
     });
 
@@ -478,12 +276,16 @@ const RevueFlow = defineComponent({
       store.setElements([]);
     });
 
-    const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
+    const nodeTypesParsed = computed(
-    const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
+      () => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes } as any)
+    );
+    const edgeTypesParsed = computed(
+      () => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes } as any)
+    );
 
     return {
-      nodeTypesParsed: nodeTypesParsed.value,
+      nodeTypesParsed,
-      edgeTypesParsed: edgeTypesParsed.value
+      edgeTypesParsed
     };
   }
 });

src/container/RevueFlow/index.tsx

@@ -1,538 +0,0 @@
-import { computed, defineComponent, onBeforeUnmount, PropType, provide, watch } from 'vue';
-import '../../style.css';
-import '../../theme-default.css';
-import GraphView from '../GraphView';
-import DefaultNode from '../../components/Nodes/DefaultNode';
-import InputNode from '../../components/Nodes/InputNode';
-import OutputNode from '../../components/Nodes/OutputNode';
-import { createNodeTypes } from '../NodeRenderer/utils';
-import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import { ConnectionMode, ConnectionLineType, PanOnScrollMode, RevueFlowStore, RevueFlowProps } from '../../types';
-import { initialState } from '../../store';
-import configureStore from '../../store/configure-store';
-
-const defaultNodeTypes = {
-  input: InputNode,
-  default: DefaultNode,
-  output: OutputNode
-};
-
-const defaultEdgeTypes = {
-  default: BezierEdge,
-  straight: StraightEdge,
-  step: StepEdge,
-  smoothstep: SmoothStepEdge
-};
-
-const RevueFlow = defineComponent({
-  name: 'RevueFlow',
-  components: { GraphView },
-  props: {
-    elements: {
-      type: Array as PropType<RevueFlowProps['elements']>,
-      required: true
-    },
-    nodeTypesId: {
-      type: String as PropType<RevueFlowProps['nodeTypesId']>,
-      required: false,
-      default: '1'
-    },
-    edgeTypesId: {
-      type: String as PropType<RevueFlowProps['edgeTypesId']>,
-      required: false,
-      default: '1'
-    },
-    nodeTypes: {
-      type: Object as PropType<RevueFlowProps['nodeTypes']>,
-      required: false,
-      default: () => defaultNodeTypes
-    },
-    edgeTypes: {
-      type: Object as PropType<RevueFlowProps['edgeTypes']>,
-      required: false,
-      default: () => defaultEdgeTypes
-    },
-    onMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onMove']>,
-      required: false,
-      default: undefined
-    },
-    onMoveStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
-      required: false,
-      default: undefined
-    },
-    onMoveEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
-      required: false,
-      default: undefined
-    },
-    onLoad: {
-      type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
-      required: false,
-      default: undefined
-    },
-    onElementClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDoubleClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeDoubleClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseEnter: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onNodeMouseLeave: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onNodeContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDrag: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
-      required: false,
-      default: undefined
-    },
-    onNodeDragStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onElementsRemove: {
-      type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
-      required: false,
-      default: undefined
-    },
-    onConnect: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
-      required: false,
-      default: undefined
-    },
-    onConnectStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
-      required: false,
-      default: undefined
-    },
-    onConnectEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
-      required: false,
-      default: undefined
-    },
-    connectionMode: {
-      type: String as PropType<RevueFlowProps['connectionMode']>,
-      required: false,
-      default: ConnectionMode.Strict
-    },
-    connectionLineType: {
-      type: String as PropType<RevueFlowProps['connectionLineType']>,
-      required: false,
-      default: ConnectionLineType.Bezier
-    },
-    connectionLineStyle: {
-      type: Object as PropType<RevueFlowProps['connectionLineStyle']>,
-      required: false,
-      default: undefined
-    },
-    connectionLineComponent: {
-      type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
-      required: false,
-      default: undefined
-    },
-    selectionKeyCode: {
-      type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
-      required: false,
-      default: 'Shift'
-    },
-    multiSelectionKeyCode: {
-      type: [Number, String] as PropType<RevueFlowProps['multiSelectionKeyCode']>,
-      required: false,
-      default: 'Meta'
-    },
-    zoomActivationKeyCode: {
-      type: [Number, String] as PropType<RevueFlowProps['zoomActivationKeyCode']>,
-      required: false,
-      default: 'Meta'
-    },
-    deleteKeyCode: {
-      type: [Number, String] as PropType<RevueFlowProps['deleteKeyCode']>,
-      required: false,
-      default: 'Backspace'
-    },
-    snapToGrid: {
-      type: Boolean as PropType<RevueFlowProps['snapToGrid']>,
-      required: false,
-      default: false
-    },
-    snapGrid: {
-      type: Array as unknown as PropType<RevueFlowProps['snapGrid']>,
-      required: false,
-      default: () => [15, 15]
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<RevueFlowProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: false
-    },
-    nodesDraggable: {
-      type: Boolean as PropType<RevueFlowProps['nodesDraggable']>,
-      required: false,
-      default: undefined
-    },
-    nodesConnectable: {
-      type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
-      required: false,
-      default: undefined
-    },
-    elementsSelectable: {
-      type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
-      required: false,
-      default: undefined
-    },
-    selectNodesOnDrag: {
-      type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
-      required: false,
-      default: true
-    },
-    minZoom: {
-      type: Number as PropType<RevueFlowProps['minZoom']>,
-      required: false,
-      default: undefined
-    },
-    maxZoom: {
-      type: Number as PropType<RevueFlowProps['maxZoom']>,
-      required: false,
-      default: undefined
-    },
-    defaultZoom: {
-      type: Number as PropType<RevueFlowProps['defaultZoom']>,
-      required: false,
-      default: 1
-    },
-    defaultPosition: {
-      type: Array as unknown as PropType<RevueFlowProps['defaultPosition']>,
-      required: false,
-      default: () => [0, 0]
-    },
-    translateExtent: {
-      type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
-      required: false,
-      default: undefined
-    },
-    nodeExtent: {
-      type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
-      required: false,
-      default: undefined
-    },
-    arrowHeadColor: {
-      type: String as PropType<RevueFlowProps['arrowHeadColor']>,
-      required: false,
-      default: '#b1b1b7'
-    },
-    markerEndId: {
-      type: String as PropType<RevueFlowProps['markerEndId']>,
-      required: false,
-      default: undefined
-    },
-    zoomOnScroll: {
-      type: Boolean as PropType<RevueFlowProps['zoomOnScroll']>,
-      required: false,
-      default: true
-    },
-    zoomOnPinch: {
-      type: Boolean as PropType<RevueFlowProps['zoomOnPinch']>,
-      required: false,
-      default: true
-    },
-    panOnScroll: {
-      type: Boolean as PropType<RevueFlowProps['panOnScroll']>,
-      required: false,
-      default: false
-    },
-    panOnScrollSpeed: {
-      type: Number as PropType<RevueFlowProps['panOnScrollSpeed']>,
-      required: false,
-      default: 0.5
-    },
-    panOnScrollMode: {
-      type: String as PropType<RevueFlowProps['panOnScrollMode']>,
-      required: false,
-      default: PanOnScrollMode.Free
-    },
-    zoomOnDoubleClick: {
-      type: Boolean as PropType<RevueFlowProps['zoomOnDoubleClick']>,
-      required: false,
-      default: true
-    },
-    paneMoveable: {
-      type: Boolean as PropType<RevueFlowProps['paneMoveable']>,
-      required: false,
-      default: true
-    },
-    onPaneClick: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
-      required: false,
-      default: undefined
-    },
-    onPaneScroll: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
-      required: false,
-      default: undefined
-    },
-    onPaneContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdate: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseEnter: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeContextMenu: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseMove: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeMouseLeave: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateEnd: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
-      required: false,
-      default: undefined
-    },
-    onEdgeUpdateStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStart: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDrag: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionDragStop: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
-      required: false,
-      default: undefined
-    },
-    onSelectionChange: {
-      type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
-      required: false,
-      default: undefined
-    },
-    edgeUpdaterRadius: {
-      type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
-      required: false,
-      default: 10
-    },
-    onDrop: {
-      type: Function as unknown as PropType<(e: DragEvent) => any>,
-      required: false,
-      default: undefined
-    },
-    onDragover: {
-      type: Function as unknown as PropType<(e: DragEvent) => any>,
-      required: false,
-      default: undefined
-    }
-
-    /*  // focus events
-      onFocus: FocusEvent,
-      onFocusin: FocusEvent,
-      onFocusout: FocusEvent,
-      onBlur: FocusEvent,
-
-      // keyboard events
-      onKeydown: KeyboardEvent,
-      onKeypress: KeyboardEvent,
-      onKeyup: KeyboardEvent,
-
-      // mouse events
-      onAuxclick: MouseEvent,
-      onClick: MouseEvent,
-      onContextmenu: MouseEvent,
-      onDblclick: MouseEvent,
-      onMousedown: MouseEvent,
-      onMouseenter: MouseEvent,
-      onMouseleave: MouseEvent,
-      onMousemove: MouseEvent,
-      onMouseout: MouseEvent,
-      onMouseover: MouseEvent,
-      onMouseup: MouseEvent,
-
-      // selection events
-      onSelect: Event,
-
-      // UI events
-      onScroll: UIEvent,
-
-      // touch events
-      onTouchcancel: TouchEvent,
-      onTouchend: TouchEvent,
-      onTouchmove: TouchEvent,
-      onTouchstart: TouchEvent,
-
-      // pointer events
-      onPointerdown: PointerEvent,
-      onPointermove: PointerEvent,
-      onPointerup: PointerEvent,
-      onPointercancel: PointerEvent,
-      onPointerenter: PointerEvent,
-      onPointerleave: PointerEvent,
-      onPointerover: PointerEvent,
-      onPointerout: PointerEvent,
-
-      // wheel events
-      onWheel: WheelEvent,
-
-      // transition events
-      onTransitionend: TransitionEvent,
-      onTransitionstart: TransitionEvent,
-     */
-  },
-  setup(props, { slots }) {
-    const store = configureStore(initialState)();
-    provide<RevueFlowStore>('store', store);
-    store.setElements(props.elements);
-
-    watch(props, () => {
-      store.setElements(props.elements);
-    });
-
-    onBeforeUnmount(() => {
-      store.$reset();
-      store.setElements([]);
-    });
-
-    const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
-    const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
-
-    return () => (
-      <div onDrop={props.onDrop} onDragover={props.onDragover} class="revue-flow">
-        <GraphView
-          onLoad={props.onLoad}
-          onMove={props.onMove}
-          onMoveStart={props.onMoveStart}
-          onMoveEnd={props.onMoveEnd}
-          onElementClick={props.onElementClick}
-          onNodeMouseEnter={props.onNodeMouseEnter}
-          onNodeMouseMove={props.onNodeMouseMove}
-          onNodeMouseLeave={props.onNodeMouseLeave}
-          onNodeContextMenu={props.onNodeContextMenu}
-          onNodeDoubleClick={props.onNodeDoubleClick}
-          onNodeDragStart={props.onNodeDragStart}
-          onNodeDrag={props.onNodeDrag}
-          onNodeDragStop={props.onNodeDragStop}
-          nodeTypes={nodeTypesParsed.value}
-          edgeTypes={edgeTypesParsed.value}
-          connectionMode={props.connectionMode}
-          connectionLineType={props.connectionLineType}
-          connectionLineStyle={props.connectionLineStyle}
-          connectionLineComponent={props.connectionLineComponent}
-          selectionKeyCode={props.selectionKeyCode}
-          onElementsRemove={props.onElementsRemove}
-          deleteKeyCode={props.deleteKeyCode}
-          multiSelectionKeyCode={props.multiSelectionKeyCode}
-          zoomActivationKeyCode={props.zoomActivationKeyCode}
-          onConnect={props.onConnect}
-          onConnectStart={props.onConnectStart}
-          onConnectStop={props.onConnectStop}
-          onConnectEnd={props.onConnectEnd}
-          snapToGrid={props.snapToGrid}
-          snapGrid={props.snapGrid}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
-          nodesDraggable={props.nodesDraggable}
-          nodesConnectable={props.nodesConnectable}
-          elementsSelectable={props.elementsSelectable}
-          selectNodesOnDrag={props.selectNodesOnDrag}
-          minZoom={props.minZoom}
-          maxZoom={props.maxZoom}
-          defaultZoom={props.defaultZoom}
-          defaultPosition={props.defaultPosition}
-          translateExtent={props.translateExtent}
-          nodeExtent={props.nodeExtent}
-          arrowHeadColor={props.arrowHeadColor}
-          markerEndId={props.markerEndId}
-          zoomOnScroll={props.zoomOnScroll}
-          zoomOnPinch={props.zoomOnPinch}
-          zoomOnDoubleClick={props.zoomOnDoubleClick}
-          panOnScroll={props.panOnScroll}
-          panOnScrollSpeed={props.panOnScrollSpeed}
-          panOnScrollMode={props.panOnScrollMode}
-          paneMoveable={props.paneMoveable}
-          onPaneClick={props.onPaneClick}
-          onPaneScroll={props.onPaneScroll}
-          onPaneContextMenu={props.onPaneContextMenu}
-          onSelectionDragStart={props.onSelectionDragStart}
-          onSelectionDrag={props.onSelectionDrag}
-          onSelectionDragStop={props.onSelectionDragStop}
-          onSelectionContextMenu={props.onSelectionContextMenu}
-          onEdgeUpdate={props.onEdgeUpdate}
-          onEdgeContextMenu={props.onEdgeContextMenu}
-          onEdgeDoubleClick={props.onEdgeDoubleClick}
-          onEdgeMouseEnter={props.onEdgeMouseEnter}
-          onEdgeMouseMove={props.onEdgeMouseMove}
-          onEdgeMouseLeave={props.onEdgeMouseLeave}
-          onEdgeUpdateStart={props.onEdgeUpdateStart}
-          onEdgeUpdateEnd={props.onEdgeUpdateEnd}
-          edgeUpdaterRadius={props.edgeUpdaterRadius}
-        />
-        {slots.default ? slots.default() : ''}
-      </div>
-    );
-  }
-});
-export default RevueFlow;

src/hooks/RevueFlowHooks.ts

@@ -1,12 +1,12 @@
 // global hooks
 import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types';
 import { createEventHook, EventHook } from '@vueuse/core';
-import { SetupContext } from 'vue';
 
 export interface RevueFlowHooks {
   elementClick: EventHook<{ event: MouseEvent; element: Node | Edge }>;
   elementsRemove: EventHook<Elements>;
   nodeDoubleClick: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeClick: EventHook<{ event: MouseEvent; node: Node }>;
   nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>;
   nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>;
   nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>;
@@ -14,7 +14,7 @@ export interface RevueFlowHooks {
   nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>;
   nodeDrag: EventHook<{ event: MouseEvent; node: Node }>;
   nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>;
-  connect: EventHook<Edge | Connection>;
+  connect: EventHook<Connection>;
   connectStart: EventHook<{
     event: MouseEvent;
     params: OnConnectStartParams;
@@ -33,21 +33,23 @@ export interface RevueFlowHooks {
   paneScroll: EventHook<WheelEvent | undefined>;
   paneClick: EventHook<MouseEvent>;
   paneContextMenu: EventHook<MouseEvent>;
-  edgeUpdate: EventHook<{ oldEdge: Edge; newConnection: Connection }>;
+  edgeUpdate: EventHook<{ edge: Edge; connection: Connection }>;
   edgeContextMenu: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeMouseEnter: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeMouseMove: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeMouseLeave: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeDoubleClick: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeClick: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>;
   edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>;
 }
 
-export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
+export const useRevueFlow = (): RevueFlowHooks & { bind: (emit: (event: string, ...args: any[]) => void) => void } => {
   const eventHooks: RevueFlowHooks = {
     elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
     elementsRemove: createEventHook<Elements>(),
     nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeClick: createEventHook<{ event: MouseEvent; node: Node }>(),
     nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
     nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
     nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
@@ -55,7 +57,7 @@ export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
     nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
     nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
     nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
-    connect: createEventHook<Edge | Connection>(),
+    connect: createEventHook<Connection>(),
     connectStart: createEventHook<{
       event: MouseEvent;
       params: OnConnectStartParams;
@@ -74,23 +76,27 @@ export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
     paneScroll: createEventHook<WheelEvent | undefined>(),
     paneClick: createEventHook<MouseEvent>(),
     paneContextMenu: createEventHook<MouseEvent>(),
-    edgeUpdate: createEventHook<{ oldEdge: Edge; newConnection: Connection }>(),
+    edgeUpdate: createEventHook<{ edge: Edge; connection: Connection }>(),
     edgeContextMenu: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeMouseEnter: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeMouseMove: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeMouseLeave: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeDoubleClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
     edgeUpdateEnd: createEventHook<{ event: MouseEvent; edge: Edge }>()
   };
 
-  for (const [key, value] of Object.entries(eventHooks)) {
+  const bind = (emit: (event: string, args: any) => void) => {
-    value.on((data: any) => {
+    for (const [key, value] of Object.entries(eventHooks)) {
-      emit(key, data);
+      value.on((data: any) => {
-    });
+        emit(key, data);
-  }
+      });
+    }
+  };
 
   return {
-    ...eventHooks
+    ...eventHooks,
+    bind
   };
 };

src/types/index.ts

@@ -40,7 +40,13 @@ export interface Node<T = any> {
   id: ElementId;
   position: XYPosition;
   type?: string;
-  __rf?: any;
+  __rf: {
+    position: XYPosition;
+    isDragging?: boolean;
+    width: number | null;
+    height: number | null;
+    handleBounds?: any;
+  };
   data?: T;
   style?: any;
   className?: string;
@@ -499,152 +505,6 @@ export interface NodeComponentProps<T = any> {
   isDragging?: boolean;
 }
 
-export const WrapNodeProps = {
-  id: {
-    type: String as PropType<WrapNodeProps['id']>,
-    required: true
-  },
-  type: {
-    type: String as PropType<WrapNodeProps['type']>,
-    required: true
-  },
-  data: {
-    type: Object as PropType<WrapNodeProps['data']>,
-    required: false,
-    default: undefined as any
-  },
-  selected: {
-    type: Boolean as PropType<WrapNodeProps['selected']>,
-    required: false,
-    default: false
-  },
-  scale: {
-    type: Number as PropType<WrapNodeProps['scale']>,
-    required: false,
-    default: undefined
-  },
-  xPos: {
-    type: Number as PropType<WrapNodeProps['xPos']>,
-    required: false,
-    default: 0
-  },
-  yPos: {
-    type: Number as PropType<WrapNodeProps['yPos']>,
-    required: false,
-    default: 0
-  },
-  isSelectable: {
-    type: Boolean as PropType<WrapNodeProps['isSelectable']>,
-    required: false,
-    default: undefined
-  },
-  isDraggable: {
-    type: Boolean as PropType<WrapNodeProps['isDraggable']>,
-    required: false,
-    default: undefined
-  },
-  isConnectable: {
-    type: Boolean as PropType<WrapNodeProps['isConnectable']>,
-    required: false,
-    default: undefined
-  },
-  selectNodesOnDrag: {
-    type: Boolean as PropType<WrapNodeProps['selectNodesOnDrag']>,
-    required: false,
-    default: undefined
-  },
-  onClick: {
-    type: Function() as PropType<WrapNodeProps['onClick']>,
-    required: false,
-    default: undefined
-  },
-  onNodeDoubleClick: {
-    type: Function() as PropType<WrapNodeProps['onNodeDoubleClick']>,
-    required: false,
-    default: undefined
-  },
-  onMouseEnter: {
-    type: Function() as PropType<WrapNodeProps['onMouseEnter']>,
-    required: false,
-    default: undefined
-  },
-  onMouseMove: {
-    type: Function() as PropType<WrapNodeProps['onMouseMove']>,
-    required: false,
-    default: undefined
-  },
-  onMouseLeave: {
-    type: Function() as PropType<WrapNodeProps['onMouseLeave']>,
-    required: false,
-    default: undefined
-  },
-  onContextMenu: {
-    type: Function() as PropType<WrapNodeProps['onContextMenu']>,
-    required: false,
-    default: undefined
-  },
-  onNodeDragStart: {
-    type: Function() as PropType<WrapNodeProps['onNodeDragStart']>,
-    required: false,
-    default: undefined
-  },
-  onNodeDrag: {
-    type: Function() as PropType<WrapNodeProps['onNodeDrag']>,
-    required: false,
-    default: undefined
-  },
-  onNodeDragStop: {
-    type: Function() as PropType<WrapNodeProps['onNodeDragStop']>,
-    required: false,
-    default: undefined
-  },
-  style: {
-    type: Object as PropType<WrapNodeProps['style']>,
-    required: false,
-    default: undefined as any
-  },
-  sourcePosition: {
-    type: String as PropType<WrapNodeProps['sourcePosition']>,
-    required: false,
-    default: undefined
-  },
-  targetPosition: {
-    type: String as PropType<WrapNodeProps['targetPosition']>,
-    required: false,
-    default: undefined
-  },
-  isHidden: {
-    type: Boolean as PropType<WrapNodeProps['isHidden']>,
-    required: false,
-    default: undefined
-  },
-  isInitialized: {
-    type: Boolean as PropType<WrapNodeProps['isInitialized']>,
-    required: false,
-    default: undefined
-  },
-  snapToGrid: {
-    type: Boolean as PropType<WrapNodeProps['snapToGrid']>,
-    required: false,
-    default: undefined
-  },
-  snapGrid: {
-    type: Object as PropType<WrapNodeProps['snapGrid']>,
-    required: false,
-    default: undefined
-  },
-  isDragging: {
-    type: Boolean as PropType<WrapNodeProps['isDragging']>,
-    required: false,
-    default: undefined
-  },
-  resizeObserver: {
-    type: Object as PropType<WrapNodeProps['resizeObserver']>,
-    required: false,
-    default: undefined
-  }
-};
-
 export interface WrapNodeProps<T = any> {
   id: ElementId;
   type: string;
@@ -894,8 +754,7 @@ export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void;
 
-export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
+export interface RevueFlowEvents {
-  elements: Elements;
   onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
   onNodeDoubleClick?: (event: MouseEvent, node: Node) => void;
@@ -930,6 +789,10 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   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;
   connectionMode?: ConnectionMode;

src/utils/graph.ts

@@ -202,7 +202,7 @@ export const getRectOfNodes = (nodes: Node[]): Rect => {
           ...position,
           width,
           height
-        })
+        } as any)
       ),
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
   );
@@ -224,7 +224,7 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
   });
 
   return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
-    const nBox = rectToBox({ ...position, width, height });
+    const nBox = rectToBox({ ...position, width, height } as any);
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
     const overlappingArea = Math.ceil(xOverlap * yOverlap);
@@ -257,7 +257,7 @@ const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
 
       n.position = n.__rf.position;
 
-      delete n.__rf;
+      n.__rf = {} as any;
       return n;
     }),
     ...edges.map((e) => ({ ...e }))

tsconfig.json

@@ -21,6 +21,7 @@
     "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
+    "types": ["node"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules", "build", "dist", "example"]

vite.config.ts

@@ -10,9 +10,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
-    vueJsx({
+    vueJsx(),
-      // options are passed on to @vue/babel-plugin-jsx
-    }),
     svgLoader()
   ]
 });

yarn.lock

@@ -796,10 +796,10 @@
     "@vue/babel-plugin-jsx" "^1.0.6"
     hash-sum "^2.0.0"
 
-"@vitejs/plugin-vue@^1.2.3":
+"@vitejs/plugin-vue@^1.2.5":
-  version "1.2.4"
+  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.4.tgz#a7aa6e6a31c556a8b781de730316deeecf7f56f2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.5.tgz#ef7dc4a92e53fe866b54bcc1266788513262ac09"
-  integrity sha512-D/3H9plevPQGgQGwmV6eecvOnooLTecPR63HPffVVWPEhbfvmtYLWgznzs456NBb2DItiRTCIa1yWxvGqC+I8A==
+  integrity sha512-GIR31mdXTEfvElmBUaRhDc5v7lfdkEdawWQqJRiaRL/5qKsH+xusukglkvJz5y7+c6dEpxgmvcATv2BbB7+fzQ==
 
 "@vue/babel-helper-vue-transform-on@^1.0.2":
   version "1.0.2"
@@ -832,6 +832,17 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.0-beta.5":
+  version "3.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.0-beta.5.tgz#6f331c5c1befd7a102f861de19ee08d1da43d41e"
+  integrity sha512-EjOvdpTcPEWgsNufn0qI9lbEiX3kztuKwxUR3YSGUKyB8gmyowP9/Z4uBziawR/Rd3AdDF9RarURd/bpmsQg7w==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/shared" "3.2.0-beta.5"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.1.4":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.4.tgz#bf3795e1449f32c965d38c4ea6d808ca05fdfc97"
@@ -840,7 +851,15 @@
     "@vue/compiler-core" "3.1.4"
     "@vue/shared" "3.1.4"
 
-"@vue/compiler-sfc@^3.0.11", "@vue/compiler-sfc@^3.0.5":
+"@vue/compiler-dom@3.2.0-beta.5":
+  version "3.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.5.tgz#e43c25166c2cd94745d06da2786d95e03a4a6180"
+  integrity sha512-1jdWiXyPAvNh2FXkh2nm/uYFQnmGewldVAeMaw2l9FUbRtFc9itwZTAh/7Dp1xTIRqXoJ1by9xYaAsawJugJ/Q==
+  dependencies:
+    "@vue/compiler-core" "3.2.0-beta.5"
+    "@vue/shared" "3.2.0-beta.5"
+
+"@vue/compiler-sfc@^3.0.11":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.4.tgz#93e87db950e0711339c18baa7bb7d28d3522d7bc"
   integrity sha512-4KDQg60Khy3SgnF+V/TB2NZqzmM4TyGRmzsxqG1SebGdMSecCweFDSlI/F1vDYk6dKiCHgmpoT9A1sLxswkJ0A==
@@ -863,6 +882,29 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.2.0-beta.5":
+  version "3.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.0-beta.5.tgz#9de430dbb3307f56759404151f51c6bf20291f69"
+  integrity sha512-9JJ22GsQJKsBP7925t5q1ZPyFUjH5zKXrnuy3HA7gXxtz47LHJwK7WjsLb1mY106pVyCkm0KDbvNZWymoIOX6g==
+  dependencies:
+    "@babel/parser" "^7.13.9"
+    "@babel/types" "^7.13.0"
+    "@types/estree" "^0.0.48"
+    "@vue/compiler-core" "3.2.0-beta.5"
+    "@vue/compiler-dom" "3.2.0-beta.5"
+    "@vue/compiler-ssr" "3.2.0-beta.5"
+    "@vue/shared" "3.2.0-beta.5"
+    consolidate "^0.16.0"
+    estree-walker "^2.0.1"
+    hash-sum "^2.0.0"
+    lru-cache "^5.1.1"
+    magic-string "^0.25.7"
+    merge-source-map "^1.1.0"
+    postcss "^8.1.10"
+    postcss-modules "^4.0.0"
+    postcss-selector-parser "^6.0.4"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.1.4":
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.4.tgz#7f6eaac5b1851fc15c82c083e8179eb1216b303c"
@@ -871,6 +913,14 @@
     "@vue/compiler-dom" "3.1.4"
     "@vue/shared" "3.1.4"
 
+"@vue/compiler-ssr@3.2.0-beta.5":
+  version "3.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.0-beta.5.tgz#84035f5c9a11e1a8c90d6704a33c324133a943d3"
+  integrity sha512-8TaR908AEWyCwzYzox1MF+1rD1ycoXYKJXVDk+hLK7NGCVkm9Z3HWDuajYhz/kB0w2CeYW2MBno850kmwsTNjg==
+  dependencies:
+    "@vue/compiler-dom" "3.2.0-beta.5"
+    "@vue/shared" "3.2.0-beta.5"
+
 "@vue/devtools-api@^6.0.0-beta.14":
   version "6.0.0-beta.15"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
@@ -883,28 +933,28 @@
   dependencies:
     vue-eslint-parser "^7.0.0"
 
-"@vue/reactivity@3.1.4":
+"@vue/reactivity@3.2.0-beta.5":
-  version "3.1.4"
+  version "3.2.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.4.tgz#d926ed46fb0d48582ccf8665b062d37b5d35ba99"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.0-beta.5.tgz#feb93dff247700213fec4c52569b901186850e16"
-  integrity sha512-YDlgii2Cr9yAoKVZFzgY4j0mYlVT73986X3e5SPp6ifqckSEoFSUWXZK2Tb53TB/9qO29BEEbspnKD3m3wAwkA==
+  integrity sha512-MI+C+96B+GML1vWprH8N02blLpVWtkmcyg7ptP5dB6TDFooRA2MRfR4SMTi4rY6kKVR7qc5nc0CxpQ1XoPqFpA==
   dependencies:
-    "@vue/shared" "3.1.4"
+    "@vue/shared" "3.2.0-beta.5"
 
-"@vue/runtime-core@3.1.4":
+"@vue/runtime-core@3.2.0-beta.5":
-  version "3.1.4"
+  version "3.2.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.4.tgz#3e30ae6ecbfff06df5adc9414491143191a375ba"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.0-beta.5.tgz#33046b0fe257e804c86c93e54291304aa3fa4e58"
-  integrity sha512-qmVJgJuFxfT7M4qHQ4M6KqhKC66fjuswK+aBivE8dWiZ2rtIGl9gtJGpwqwjQEcKEBTOfvvrtrwBncYArJUO8Q==
+  integrity sha512-LcSrZu5bXBhzQuXAih5HqLpoYNrjYgYjTVp9wJyR6AUCxz65qAVRjilxYJ5oTsZce578oVg+wfMRJ22rt/rC5A==
   dependencies:
-    "@vue/reactivity" "3.1.4"
+    "@vue/reactivity" "3.2.0-beta.5"
-    "@vue/shared" "3.1.4"
+    "@vue/shared" "3.2.0-beta.5"
 
-"@vue/runtime-dom@3.1.4":
+"@vue/runtime-dom@3.2.0-beta.5":
-  version "3.1.4"
+  version "3.2.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.4.tgz#acfeee200d5c45fc2cbdf7058cda1498f9b45849"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.0-beta.5.tgz#f8afa19ea8d9c435c5437b4517c0fc23336933ec"
-  integrity sha512-vbmwgTxku1BU87Kw7r29adv0OIrDXCW0PslOPQT0O/9R5SqcXgS94Yj6zsztDjvghegenwIAPNLlDR1Auh5s+w==
+  integrity sha512-m/0u7avR7r7mcGqlNnRUPWECeSNXkc2tcc5URnBKn7BN8pcAoJp3M0kZ5/dZQANjek4/8EXiEPazDY9+4EJhJA==
   dependencies:
-    "@vue/runtime-core" "3.1.4"
+    "@vue/runtime-core" "3.2.0-beta.5"
-    "@vue/shared" "3.1.4"
+    "@vue/shared" "3.2.0-beta.5"
     csstype "^2.6.8"
 
 "@vue/shared@3.1.4":
@@ -912,6 +962,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3"
   integrity sha512-6O45kZAmkLvzGLToBxEz4lR2W6kXohCtebV2UxjH9GXjd8X9AhEn68FN9eNanFtWNzvgw1hqd6HkPRVQalqf7Q==
 
+"@vue/shared@3.2.0-beta.5":
+  version "3.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.0-beta.5.tgz#c2752bac51476bfd9c6050f4a5e97c28eb66f27a"
+  integrity sha512-DprP8v3vg/nnfl4b93hJ+ujojiFAMwXbng8N9NpNDSuFMZG0zFO3Tqh3X1JQgaE7jUgYoQzR2TTGCKNb/4+QGA==
+
 "@vueuse/core@^5.1.3", "@vueuse/core@^5.1.4":
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.1.4.tgz#c590bd1ff5cdd3d2caa033b65ed8cb42fc12a534"
@@ -5691,14 +5746,14 @@ vue-tsc@^0.0.24:
   dependencies:
     unzipper "0.10.11"
 
-vue@^3.0.5:
+vue@^3.2.0-beta.5:
-  version "3.1.4"
+  version "3.2.0-beta.5"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.4.tgz#120d6818c51eaa35d0879e5bc1cff60135bc69fd"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.0-beta.5.tgz#113b6ac8db10eb7f5880851fcbd38d8eecca9fc4"
-  integrity sha512-p8dcdyeCgmaAiZsbLyDkmOLcFGZb/jEVdCLW65V68LRCXTNX8jKsgah2F7OZ/v/Ai2V0Fb1MNO0vz/GFqsPVMA==
+  integrity sha512-WeXugURsTr0TaFKMkh+bTebw/gIYacyKnuF7sJAthhLd6dsf02qQ5tBJKSV22aieOnGBGMj2yJgreVwacVwrrQ==
   dependencies:
-    "@vue/compiler-dom" "3.1.4"
+    "@vue/compiler-dom" "3.2.0-beta.5"
-    "@vue/runtime-dom" "3.1.4"
+    "@vue/runtime-dom" "3.2.0-beta.5"
-    "@vue/shared" "3.1.4"
+    "@vue/shared" "3.2.0-beta.5"
 
 which-boxed-primitive@^1.0.2:
   version "1.0.2"