refactor: Refactor some jsx files to vue files

feat: add global hooks to emulate sort of an event bus between components
* global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient

src/container/FlowRenderer/FlowRenderer.vue

@@ -0,0 +1,225 @@
+<template>
+  <ZoomPane
+    :onMove="onMove"
+    :onMoveStart="onMoveStart"
+    :onMoveEnd="onMoveEnd"
+    :selectionKeyPressed="keyPressed"
+    :elementsSelectable="elementsSelectable"
+    :zoomOnScroll="zoomOnScroll"
+    :zoomOnPinch="zoomOnPinch"
+    :panOnScroll="panOnScroll"
+    :panOnScrollSpeed="panOnScrollSpeed"
+    :panOnScrollMode="panOnScrollMode"
+    :zoomOnDoubleClick="zoomOnDoubleClick"
+    :paneMoveable="paneMoveable"
+    :defaultPosition="defaultPosition"
+    :defaultZoom="defaultZoom"
+    :translateExtent="translateExtent"
+    :zoomActivationKeyCode="zoomActivationKeyCode"
+  >
+    <slot></slot>
+    <UserSelection v-if="keyPressed" />
+    <NodesSelection
+      v-if="selectionActive"
+      :onSelectionDragStart="onSelectionDragStart"
+      :onSelectionDrag="onSelectionDrag"
+      :onSelectionDragStop="onSelectionDragStop"
+      :onSelectionContextMenu="onSelectionContextMenu"
+    />
+    <div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
+  </ZoomPane>
+</template>
+<script lang="ts">
+import { computed, 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';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+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) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    const keyPressed = useKeyPress(props.selectionKeyCode);
+
+    useGlobalKeyHandler({
+      store,
+      onElementsRemove: props.onElementsRemove,
+      deleteKeyCode: props.deleteKeyCode,
+      multiSelectionKeyCode: props.multiSelectionKeyCode
+    });
+
+    const onClick = (event: MouseEvent) => {
+      hooks.paneClick.trigger(event);
+      store.unsetNodesSelection();
+      store.resetSelectedElements();
+    };
+
+    const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event);
+
+    const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event);
+
+    const selectionActive = computed(() => store.nodesSelectionActive);
+
+    return {
+      onClick,
+      onContextMenu,
+      onWheel,
+      keyPressed,
+      selectionActive
+    };
+  }
+});
+
+export default FlowRenderer;
+</script>

src/container/FlowRenderer/index.tsx

@@ -155,10 +155,11 @@ const FlowRenderer = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const store = inject<RevueFlowStore>('store');
+    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

src/container/GraphView/GraphView.vue

@@ -0,0 +1,480 @@
+<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"
+    :panOnScroll="panOnScroll"
+    :panOnScrollSpeed="panOnScrollSpeed"
+    :panOnScrollMode="panOnScrollMode"
+    :paneMoveable="paneMoveable"
+    :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"
+      :onlyRenderVisibleElements="onlyRenderVisibleElements"
+    />
+    <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>
+</template>
+<script lang="ts">
+import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
+import FlowRenderer from '../FlowRenderer/FlowRenderer.vue';
+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';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+const GraphView = defineComponent({
+  name: 'GraphView',
+  components: { NodeRenderer, EdgeRenderer, FlowRenderer },
+  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
+    },
+    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,
+      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
+    },
+    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
+    },
+    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,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+
+    const { onReady } = useZoomPanHelper(store);
+    onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
+      if (initialized) {
+        hooks.load.trigger({
+          fitView: (params = { padding: 0.1 }) => fitView(params),
+          zoomIn,
+          zoomOut,
+          zoomTo,
+          setTransform: transform,
+          project: onLoadProject(store),
+          getElements: onLoadGetElements(store),
+          toObject: onLoadToObject(store)
+        });
+      }
+    });
+
+    const init = () => {
+      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);
+      }
+
+      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;
+      }
+    };
+
+    watchEffect(() => {
+      init();
+    });
+  }
+});
+
+export default GraphView;
+</script>

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, onBeforeMount, onMounted, ref, PropType, CSSProperties } from 'vue';
+import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -342,13 +342,11 @@ const GraphView = defineComponent({
     }
   },
   setup(props) {
-    const store = inject<RevueFlowStore>('store');
-    const isInitialized = ref<boolean>(false);
+    const store = inject<RevueFlowStore>('store')!;
 
-    onMounted(() => {
-      const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
-
-      if (!isInitialized.value && initialized) {
+    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),
@@ -361,58 +359,32 @@ const GraphView = defineComponent({
             toObject: onLoadToObject(store)
           });
         }
-        isInitialized.value = true;
       }
     });
 
     onMounted(() => {
       if (typeof props.nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
+        store.nodesConnectable = !!props.nodesConnectable;
       }
       if (typeof props.elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store.elementsSelectable = !!props.elementsSelectable;
+      }
+      if (typeof props.nodesDraggable !== 'undefined') {
+        store.nodesDraggable = !!props.nodesDraggable;
       }
 
       if (typeof props.connectionMode !== 'undefined') {
-        store?.setConnectionMode(props.connectionMode);
+        store.connectionMode = props.connectionMode;
       }
     });
 
     onBeforeMount(() => {
-      if (props.onConnect) {
-        store?.setOnConnect(props.onConnect);
-      }
-
-      if (props.onConnectStart) {
-        store?.setOnConnectStart(props.onConnectStart);
-      }
-
-      if (props.onConnectStop) {
-        store?.setOnConnectStop(props.onConnectStop);
-      }
-
-      if (props.onConnectEnd) {
-        store?.setOnConnectEnd(props.onConnectEnd);
-      }
-
       if (typeof props.snapToGrid !== 'undefined') {
-        store?.setSnapToGrid(props.snapToGrid);
+        store.snapToGrid = props.snapToGrid;
       }
 
       if (typeof props.snapGrid !== 'undefined') {
-        store?.setSnapGrid(props.snapGrid);
-      }
-
-      if (typeof props.nodesDraggable !== 'undefined') {
-        store?.setNodesDraggable(!!props.nodesDraggable);
-      }
-
-      if (typeof props.nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
-      }
-
-      if (typeof props.elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store.snapGrid = props.snapGrid;
       }
 
       if (typeof props.minZoom !== 'undefined') {

src/container/RevueFlow/RevueFlow.vue

@@ -0,0 +1,491 @@
+<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"
+      :connectionLineType="connectionLineType"
+      :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"
+      :nodesDraggable="nodesDraggable"
+      :nodesConnectable="nodesConnectable"
+      :elementsSelectable="elementsSelectable"
+      :selectNodesOnDrag="selectNodesOnDrag"
+      :minZoom="minZoom"
+      :maxZoom="maxZoom"
+      :defaultZoom="defaultZoom"
+      :defaultPosition="defaultPosition"
+      :translateExtent="translateExtent"
+      :nodeExtent="nodeExtent"
+      :arrowHeadColor="arrowHeadColor"
+      :markerEndId="markerEndId"
+      :zoomOnScroll="zoomOnScroll"
+      :zoomOnPinch="zoomOnPinch"
+      :zoomOnDoubleClick="zoomOnDoubleClick"
+      :panOnScroll="panOnScroll"
+      :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>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
+import { useVModel } from '@vueuse/core';
+import '../../style.css';
+import '../../theme-default.css';
+import GraphView from '../GraphView/GraphView.vue';
+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';
+import { RevueFlowHooks, useRevueFlow } from '../../hooks/RevueFlowHooks';
+
+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: {
+    modelValue: {
+      type: Array as PropType<RevueFlowProps['elements']>,
+      required: false,
+      default: () => []
+    },
+    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
+    }
+  },
+  emits: ['', 'load'],
+  setup(props, { emit }) {
+    const store = configureStore(initialState)();
+    provide<RevueFlowStore>('store', store);
+    provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
+    const elements = useVModel(props, 'modelValue', emit);
+
+    store.setElements(elements.value);
+    watch(elements.value, () => {
+      store.setElements(elements.value);
+    });
+
+    onUpdated(() => {
+      console.log('updated');
+      store.setElements(elements.value);
+    });
+
+    onBeforeUnmount(() => {
+      store.$reset();
+      store.setElements([]);
+    });
+
+    const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
+    const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
+
+    return {
+      nodeTypesParsed: nodeTypesParsed.value,
+      edgeTypesParsed: edgeTypesParsed.value
+    };
+  }
+});
+export default RevueFlow;
+</script>

src/container/ZoomPane/index.tsx

@@ -198,7 +198,7 @@ const ZoomPane = defineComponent({
           store.d3Zoom.on('zoom', null);
         } else {
           store.d3Zoom.on('zoom', (event: any) => {
-            store.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
+            store.transform = [event.transform.x, event.transform.y, event.transform.k];
 
             if (props.onMove) {
               const flowTransform = eventToFlowTransform(event.transform);