feat: update graph on new elements pushed

src/Basic.tsx

@@ -21,10 +21,7 @@ const BasicFlow = defineComponent({
     const rfInstance = ref<OnLoadParams | null>(null);
     const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
     const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
-    const onLoad = (reactFlowInstance: OnLoadParams) => {
+    const onLoad = (reactFlowInstance: OnLoadParams) => (rfInstance.value = reactFlowInstance);
-      console.log('loaded', reactFlowInstance);
-      rfInstance.value = reactFlowInstance;
-    };
 
     const updatePos = () => {
       elements.value = elements.value.map((el) => {

src/container/GraphView/index.tsx

@@ -4,7 +4,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import { ReactFlowProps } from '../RevueFlow';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
-import { CSSProperties, defineComponent, onMounted, PropType, ref } from 'vue';
+import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue';
 import store from '../../store';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
@@ -368,46 +368,58 @@ const GraphView = defineComponent({
       }
     });
 
-    onMounted(() => {
+    onBeforeMount(() => {
       if (props.onConnect) {
         pinia.setOnConnect(props.onConnect);
       }
-    });
 
-    onMounted(() => {
       if (props.onConnectStart) {
         pinia.setOnConnectStart(props.onConnectStart);
       }
-    });
 
-    onMounted(() => {
       if (props.onConnectStop) {
         pinia.setOnConnectStop(props.onConnectStop);
       }
-    });
 
-    onMounted(() => {
       if (props.onConnectEnd) {
         pinia.setOnConnectEnd(props.onConnectEnd);
       }
-    });
 
-    onMounted(() => {
       if (typeof props.snapToGrid !== 'undefined') {
         pinia.setSnapToGrid(props.snapToGrid);
       }
-    });
 
-    onMounted(() => {
       if (typeof props.snapGrid !== 'undefined') {
         pinia.setSnapGrid(props.snapGrid);
       }
-    });
 
-    onMounted(() => {
       if (typeof props.nodesDraggable !== 'undefined') {
         pinia.setNodesDraggable(!!props.nodesDraggable);
       }
+
+      if (typeof props.nodesConnectable !== 'undefined') {
+        pinia.setNodesConnectable(!!props.nodesConnectable);
+      }
+
+      if (typeof props.elementsSelectable !== 'undefined') {
+        pinia.setElementsSelectable(!!props.elementsSelectable);
+      }
+
+      if (typeof props.minZoom !== 'undefined') {
+        pinia.setMinZoom(props.minZoom as any);
+      }
+
+      if (typeof props.maxZoom !== 'undefined') {
+        pinia.setMaxZoom(props.maxZoom as any);
+      }
+
+      if (typeof props.translateExtent !== 'undefined') {
+        pinia.setTranslateExtent(props.translateExtent as any);
+      }
+
+      if (typeof props.nodeExtent !== 'undefined') {
+        pinia.setNodeExtent(props.nodeExtent as any);
+      }
     });
 
     onMounted(() => {
@@ -420,33 +432,7 @@ const GraphView = defineComponent({
       if (typeof props.elementsSelectable !== 'undefined') {
         pinia.setElementsSelectable(!!props.elementsSelectable);
       }
-    });
 
-    onMounted(() => {
-      if (typeof props.minZoom !== 'undefined') {
-        pinia.setMinZoom(props.minZoom as any);
-      }
-    });
-
-    onMounted(() => {
-      if (typeof props.maxZoom !== 'undefined') {
-        pinia.setMaxZoom(props.maxZoom as any);
-      }
-    });
-
-    onMounted(() => {
-      if (typeof props.translateExtent !== 'undefined') {
-        pinia.setTranslateExtent(props.translateExtent as any);
-      }
-    });
-
-    onMounted(() => {
-      if (typeof props.nodeExtent !== 'undefined') {
-        pinia.setNodeExtent(props.nodeExtent as any);
-      }
-    });
-
-    onMounted(() => {
       if (typeof props.connectionMode !== 'undefined') {
         pinia.setConnectionMode(props.connectionMode as any);
       }

src/container/RevueFlow/index.tsx

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, PropType } from 'vue';
+import {computed, CSSProperties, defineComponent, HTMLAttributes, onMounted, onUpdated, PropType, watch} from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -455,6 +455,9 @@ const RevueFlow = defineComponent({
   setup(props, { slots }) {
     const pinia = store();
     pinia.setElements(props.elements);
+    onUpdated(() => {
+      pinia.setElements(props.elements);
+    });
 
     const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
     const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));

src/store/configure-store.ts

@@ -31,6 +31,7 @@ export default function configureStore(
         this.onConnectStop = onConnectStop;
       },
       setElements(elements) {
+        console.log('setting elements');
         const propElements = elements;
         const nextElements: NextElements = {
           nextNodes: [],

src/utils/graph.ts

@@ -70,7 +70,7 @@ const connectionExists = (edge: Edge, elements: Elements) => {
 
 export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elements => {
   if (!edgeParams.source || !edgeParams.target) {
-    console.warn("Can't create edge. An edge needs a source and a target.");
+    console.log("Can't create edge. An edge needs a source and a target.");
     return elements;
   }
 
@@ -88,6 +88,8 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elem
     return elements;
   }
 
+  console.log(edge);
+
   return elements.concat(edge);
 };