Watching the heap snapshot while have created 200+ nodes and their respective edges, total heap size grows up to 1GB
and navigation (alongside any other functionality in the flow pane) is also lagging. That behavior is also noticeable in the "Empty" example of the Vue flow, while adding many nodes.

For example: when a node is connected by multiple polylines in the same direction, how to merge the paths to display more beautifully.

Thanks for a great project.
Do you plan to support nesting nodes?
There are two types of nesting:

1. When we need to find out and display which block (group) the nodes belong to.
   
2. When we need to be able to connect groups in each other

NodeWrapper events (onMouseEnter, onMouseMove, onMouseLeave) not being emitted

In the file NodeWrapper.vue, it seems like the following methods: onMouseEnter, onMouseMove and onMouseLeave will never be able to trigger the event since "dragging" is a ref object and will always result to be true.

It should be changed to "dragging.value" so that it is correctly evaluated.

Example:

const onMouseEnter = (event: MouseEvent) => {
  if (!dragging.value) {
    emit.mouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
  }
}

Thank you

https://github.com/bcakmakoglu/vue-flow/blob/master/docs/src/guide/utils/graph.md

Most of the header links in the guide are broken.

In the previous version, you mentioned using dagre to do auto layout, but in the recent version, I can't find this piece of content. And in my practice, dagre doesn't seem to work with custom nodes.
So, do you have plans to support auto layout?

Hi!
got o.value is undefined when trying to delete node... Even on the basic example
here is the code:

<template>
  <q-page style="height: 80vh">
    <VueFlow class="vue-flow-basic-example">
      <MiniMap />
      <Controls />
      <Background color="#aaa" :gap="8" />
      <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
        <button class="button" @click="resetTransform">reset transform</button>
        <button class="button" @click="updatePos">change pos</button>
        <button class="button" @click="toggleClassnames">
          toggle classnames
        </button>
        <button class="button" @click="logToObject">toObject</button>
      </div>
    </VueFlow>
  </q-page>
</template>

<script setup>
// script setup
import {
  VueFlow,
  MiniMap,
  Controls,
  Background,
  useVueFlow,
} from "@braks/vue-flow";
const initialNodes = [
  // input node
  { id: "1", type: "input", label: "Node 1", position: { x: 250, y: 5 } },

  // default node(s)
  { id: "2", label: "Node 2", position: { x: 100, y: 100 } },
  { id: "3", label: "Node 3", position: { x: 400, y: 100 } },
  { id: "4", label: "Node 4", position: { x: 400, y: 200 } },
];

const initialEdges = [
  // animated edge
  { id: "e1-2", source: "1", target: "2", animated: true },

  // default edge
  { id: "e1-3", source: "1", target: "3" },
];

/**
 * Initialize your graph with the useVueFlow composable.
 * The composable accepts the same options as the VueFlow component.
 * It returns event hooks, a store instance and convenience functions like addEdges or addNodes for easy
 * access to the internal state of VueFlow.
 * As an added bonus everything is typed, so your TypeScript experience should be a lot smoother than it is
 * using the options-API where a lot has to be type-casted.
 **/
const {
  instance,
  nodes,
  addEdges,
  onPaneReady,
  onConnect,
  onNodesChange,
  onNodeDragStop,
  onNodeClick,
} = useVueFlow({
  nodes: initialNodes,
  edges: initialEdges,
  defaultZoom: 1.5,
  minZoom: 0.2,
  maxZoom: 4,
  zoomOnScroll: false,
});
onNodeDragStop(({ node }) => console.log("drag stop", node));
onNodeClick(({ node }) => console.log("click", node));
onNodesChange((changes) => changes.forEach((change) => console.log(change)));
onConnect((params) => addEdges([params]));
onPaneReady(({ fitView }) => fitView({ padding: 0.75 }));

/**
 * You can manipulate the position of a nodes directly by changing it's values when accessed from the composable.
 * This can be done for any property in a node or edge.
 * See the "toggleClassnames" function below for another example on changing properties of nodes.
 **/
const updatePos = () => {
  nodes.value.forEach((el) => {
    el.position = {
      x: Math.random() * 400,
      y: Math.random() * 400,
    };
  });
};

const logToObject = () => console.log(instance.value?.toObject());
const resetTransform = () =>
  instance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () =>
  nodes.value.forEach(
    (el) => (el.class = el.class === "dark" ? "light" : "dark")
  );
</script>

Hi,
Just found one issue that making connectors pretty unusable.
The SVG group element (with classes .vue-flow__edges .vue-flow__container) is holding all the connectors and has a size of Flow visible area. When the flow diagram is not fitting the screen size nodes are displayed properly, but all connectors are getting cut by initial view frame.
To reproduce it you would need to have two nodes and one connector between them. One node should be located outside of the visible view below. Connector will get cut by the screen view even by panning and zooming.
I hope my explanation is making sense.
Best

Expected Behavior

Snap grid should snap all nodes to multiples of the grid resolution.

Current Behavior

The elements snap but it seems to be based on their starting position, hence, it is possible for two elements to be slightly misaligned.

Steps to Reproduce

1. In interaction example: https://vueflow.dev/examples/interaction.html
2. Add :snap-to-grid="true" in editor to VueFlow element
3. Try to move Node 2 or Node 3 to the same y as Node 1

Context (Environment)

I think that the main idea of a snap grid is that you can properly align elements because for most people it is mildly annoying if elements are slightly misaligned.

Possible Implementation

Snap the position to the resolution rather than the delta which is what I assume is done now.

Thanks

Should also be said: Thank you for working on this project. It's pretty cool, documentation is great and saved me a lot of work!

I'll try to use dragndrop example, but I'm getting many errors

I'm testing the library with laravel-mix, and when I try to compile gives me this error:

And the method onDrop it isn't fire,

I hope somebody can help me!

Regards

Hi @bcakmakoglu ,

Thank you for an amazing product. We want to integrate it in our own Vue3 project, which is not written in typescript. Is it possible to partially integrate this component, or shall we first convert the project to typescript?

And would you be OK to support us to integrate this plugin for our own custom needs? We would be more than happy to compensate for it.

Hello!

I'm creating a new Nuxt 3 app using vue-flow and while everything works correctly, I'm getting the below warning (sorry for the low resolution, click to view) :

Discussed in #180

Hey There,

Thanks for the amazing library! Wondering if it's possible to allow edges to connect to more than one position / side of a node. I have a complex workflow where I want nodes coming in and exiting from both the tops / bottoms and sides and am unsure how to accomplish that currently.

Any help would be greatly appreciated.

I'm considering using this awesome component for the existing Vue2.x project, but I found that this component is written in Vue3 and is incompatible.
Do you think it will be compatible with Vue2.x?
thank you

🙏 Can you please make getEdgeId available to import? Or can you give me an advise how to modify an edge on connect? I mean to make it arrowed, colored, labeled, etc...

onConnect((params) => {
  console.log("on connect", params);
  console.log("on connect edge id", getEdgeId(params));
  addEdges([params]);
});

Issue tracker is ONLY used for reporting bugs.

New features should be discussed in the discussions.

Title

When deleting a node, the neighboring edge deletes also.

Expected Behavior

When you delete a node -- only edges, connected to it, should be deleted also.

Current Behavior

When deleting a node, the neighboring edge deletes also, but only visually. When you add new node or change something, it's appearing back.

Possible Solution

Steps to Reproduce

1. Create any type of node. Then create the four nodes below.
2. Create the edges from the first top node to the every bottom node, in order from left to right. So you should have one node on the top and four edges from it to the every bottom node
3. Start deleting bottom nodes, from left to right.
4. You will see what when node deleted, the edge to this node is also deleted (it is normal), but previously created edge from the top node to the neighbour node deletes also, and this is seems a bug.

Context (Environment)

Detailed Description

Possible Implementation

is it possible to add a gradient colored options line like in the picture below (line 1 -> 2 )

this feature is available in https://github.com/anseki/leader-line, it may helps you

hi~ Is scroll supported as a move option?

I run the example code, but it's not work. could you help me?

xyflow/xyflow#1417

test in chrome 95 (64)

tmpflow.zip

How to avoid overlapping lines，it will make the flow unclear

Connection Mode loose not working correctly

When using ConnectionMode.Loose edges are still created from target/source handles instead of any handle (which loose should enable)

Expected Behavior

Creating edges works from any handle and connects to that handle instead of another one

Current Behavior

Edges are only created at source/target positions.

https://vueflow.dev/examples/drag-n-drop

drag-n-drop doesn't seem to work

Hello,

I'd like to call addEdges([params]) function conditionaly, if the params is right, but as I see the edge creates regardless of this function call (so i can remove the addEdges() from the code and the new edges still will be created).

Please tell me how I can conditionaly create the new edges ( with nodes it is work: addNodes([newNode]) creates the new node and if the conditions isn't fit, i dont call the addNodes function and node doesn't create )

Hi,
I am trying to add vue-flow into a Quasar app and getting a strange error message as soon as I include VueFlow as a component to a vue template script:

ERROR in ./src/components/New.vue?vue&type=script&lang=ts (./node_modules/@quasar/app/lib/webpack/loader.js.transform-quasar-imports.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/New.vue?vue&type=script&lang=ts) 3:0-42

Module not found: Error: Default condition should be last one

The error looks a bit weird and google unable help me.. Do you have any idea how to solve this error?
The import code is taken from samples. and line components: {} breaks compilation:

import { VueFlow, Elements } from '@braks/vue-flow'

export default defineComponent({
  components: { VueFlow },

Thanks!

Hi there

Is it possible to have a dist for this that one can use in the <script> tag?

Thank you so much!

I started using this library a few days ago and it is wonderful.

I wanted to say thank you, really, this contribution to the Vue ecosystem is wonderful.

Thank you very much to you and to the contributors for this work, it's very enjoyable. ❤️

Hello,

First thanks for your project! It seems amazing and we really want to integrate it as the flow builder for our apps. However we are using Nuxt 3 and I can't find a way to make it work. I tried copying & pasting the minimal example that is in the GitHub main page, as well as the one from the documentation site (Basic.vue), but it just doesn't show anything on the page.

Is there anything specific I have to do to make it work with Nuxt 3? Thanks!

Discussed in #294

onEdgeUpdate(({ edge, connection }) => updateEdge(edge, connection))

<template>
  <VueFlow
    v-model="elements"
    :edges-updatable="true"
    :fit-view-on-init="true"
    :connection-mode="ConnectionMode.Strict"
  >
...

Hello!
I found a mistake in the code

Because of this, edges are not created if vue-flow is placed in shadow dom (vue custom element).

Title

I try to use vue-flow in popup (quasar dialog https://quasar.dev/vue-components/dialog), but component gets pane-ready event only after window resized

Expected Behavior

Vue-flow gets pane-ready event when a popup was show

Steps to Reproduce

Put vue-flow to a popup and open this popup

drag-n-drop example
Chrome browser Drag a node into the panel and an error will be reported in content.js

t.drop is not a function

Nice project. Setting up a discord server will help the community.

Have been trying to get in touch with you over email.

Sorry for multiple issues 💯
Is it possible to move handle with styling? Or maybe you can add more predefined positions: 'top-right', etc...
I trying to make something like this

What about a new feature: at node level we can specify a new property 'resize' with the following allowed values 'no', 'horizontal', 'vertical', 'both'.

When the value if not 'no', the user can change the node size using the mouse and related resize handle(s).

See this discussion for more details.

The use case flow:

1. The user select a node
2. The user can resize the node using the mouse (using for example the bottom right corner,
   that will display some kind of handle)

How this can be implemented ?

Adding a node to board, then try to delete it with BACKSPACE key.
Using vue-flow 0.4.35 and vite 3.0.4

Expected Behavior

I would delete the node

Current Behavior

Console errors

Cannot read properties of undefined (reading 'position')
    at _a2 (vue-flow.es.js:4218:30)
...
Cannot read properties of undefined (reading 'id')
    at vue-flow.es.js:3747:44

Steps to Reproduce

Minimal Github repo

1. Add a node to board
2. Select node
3. Press BACKSPACE key to delete it

Wrong Handle position on nodes with dynamic height

Expected Behavior

When node height changes, handle position will update

Current Behavior

When node height changes, handle position not changing and edge drawn from old position

Steps to Reproduce

Custom node with textarea which changes node height.

Handle component:

<Handle
            v-if="data.outputHandleId"
            :id="data.outputHandleId"
            :position="Position.Right"
            :connectable="true"
            type="source"
        />

Detailed Description

Screencast:

Thank you.

I tried the various examples using an iPad with Safari and no one is working.
Instead using Google Chrome all is ok.

I also tested the examples in my Mac with Safari and they are fines (i.e. the problems is only with Safari mobile)

I've used EdgeText to implement a label on an edge. And the static style of the label has been set. Now I want to set the style when the mouse is over the label. Something like 'hover' in css.
Is it supported by the project?

I've implemented my custom edge with desired style. I found, however, the default type was still used to form connections when I drag a handle to another when connecting. How can I solve it?

Expected Behavior

An arrow appears on the end of the edge when makerEnd property given.

Current Behavior

No arrows on edges.

Steps to Reproduce

https://vueflow.dev/examples/edges.html

{
  id: 'e5-7',
  ...someProperties,
  markerEnd: MarkerType.ArrowClosed,
}

But there is no arrow pointing to Output 7 from Node 5 on Preview.

Detailed Description

I noticed slight difference on type definition of markerEnd property when compared with React Flow. I've tried altering markerEnd: MarkerType.Arrow to markerEnd: { type: MarkerType.Arrow } as docs of React Flow suggest. Arrows still missing. I wonder if this has something to do with it.

Similar behavior on makerStart, too.

Or does it need some additional styling file or scripts to apply?

According to the node types example ,the only things i could change is the data property, but how can i present an image as Node background and add some action on the node?

Hi! Both my nodes and edges are custom.
When I modify the value of the data of the custom node, then connect the line, an error will be reported.

I found two issues:

1. When I put several nodes and edges into two array separately, and assign them to :nodes and :edges, also gave the nodes init position values, but the first (also the root) node is always located at (0,0), not the value I gave (340, 20);
   
2. If some of the edges are not visible(out of canvas) after the first init, they will keep invisible all the time even I drag them into canvas.
   

When I just gave the init position value(0, 0) to the first node , I found the second issue.

Hi Braks,

Thank you for creating this library for Vue! This library is awesome.

I recently found out a small issue when trying to work with custom node. I found that when I try to drag and connect from one handle of my custom node to another node, the connection line always got plotted from the first handle that I defined for my custom node. This behavior seems to happen in the demo/examples as well, so it should be straightforward to recreate.

I was trying to dive into the code a bit, I found that it may be because of the following logics of picking [0] if certain information is not available:

 const sourceHandle =
  store.connectionHandleId && store.connectionHandleType
    ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
    : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]

I will also try to dive into code, when you get a time, could you help take a look at this small issue?

Thanks!

Title

Creating a new edge creates another useless edge

Expected Behavior

Only created Edges are displayed.

Current Behavior

In addition to the created Edge, another Edge will be created at (0, 0) position.

Possible Solution

In src/utils/graph.ts, return of add Edge function fix.

export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) => {
  if (!edgeParams.source || !edgeParams.target) {
    console.warn("[vueflow]: Can't create edge. An edge needs a source and a target.")
    return elements
  }

  let edge
  if (isEdge(edgeParams)) {
    edge = { ...edgeParams }
  } else {
    edge = {
      ...edgeParams,
      id: getEdgeId(edgeParams),
    } as Edge
  }
  edge = parseEdge(edge, defaults)
  if (connectionExists(edge, elements)) return elements
  elements.push(edge)
  return elements
  // return [...elements, edge]
}

Hi! At first thanks for your work!
Can't understand what I'm doing wrong...

    const onConnect = (params) => {
      console.log("on connect", params);
      elements.value = addEdge(params, elements.value);
    };

and the console output is:

source: "3"​
sourceHandle: null​
target: "4"​
targetHandle: ""

Uncaught TypeError: t is undefined

my custom node:

<template>
  <Handle
    type="target"
    :position="Position.Left"
    :style="{
      background: '#fff',
      border: '1px solid',
      'border-color': getCssVar('warning'),
      width: '10px',
      height: '10px',
    }"
  />
  <q-card>
    <q-card-section class="bg-warning text-white text-h6">
      {{ node.label }}
    </q-card-section>
    <q-card-section>
      <q-input label="Sec" outlined="" v-model="node.value" />
    </q-card-section>
  </q-card>
  <Handle
    type="source"
    :position="Position.Right"
    :style="{
      background: '#fff',
      border: '1px solid',
      'border-color': getCssVar('warning'),
      width: '10px',
      height: '10px',
    }"
  />
</template>

<script>
import { defineComponent, ref } from "vue";
import { Handle, Position } from "@braks/vue-flow";

import { getCssVar } from "quasar";

export default defineComponent({
  name: "MessageNode",
  components: {
    Handle,
  },
  props: ["data"],
  setup(props) {
    const node = ref(props.data);
    return {
      getCssVar,
      Position,
      node,
    };
  },
});
</script>

Hi! Is it possible to connect multiple edges to one target handle? In my case it will be very useful.

I set the property zoom-on-pinch to false, but is it still possible to zoom in and out when pinching (touch or trackpad).
code example:

<vue-flow
    ref="vueFlow"
    @dragover="onDragOver"
    class="vue-flow-container"
    v-model="elements"
    :zoom-on-pinch="false"
    :zoom-on-double-click="false"
  >
    <template #edge-custom="props">
      <custom-edge v-bind="props" @handleAdd="handleAdd" @onDrop="btnOnDrop" />
    </template>
  </vue-flow>