Unable to drag the Drawflow nodes when there is a large number of nodes with the connections.

[Aravinda93]

@jerosoler

I am using the Drawflow library within my Vue 3 or Nuxt 3 project to design the complex nodes, and everything works fine but the only problem is that when I have a large number of nodes, I cannot drag the whole diagram to the left or right. When the number of nodes is less, everything works fine but only fails for the large set of nodes in Drawflow.

I have created a minimal reproduction project in CodeSandBox for your reference. Where you can import the following JSON content using the button and recreate the issue. Can you please let me know how to ensure the large diagram dragging works in all places? I have used some additional styles for the Drawflow and its present within /assets/css/DrawflowStyles.css

Drawflow Diagram Info Please save to file and import in Project

```json { "drawflowInfo": { "drawflow": { "Home": { "data": { "4": { "id": 4, "name": "NodeType2", "data": {}, "class": "Node6", "html": "NodeType2", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "5", "output": "input_1" } ] } }, "pos_x": -177, "pos_y": -150 }, "5": { "id": 5, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "4", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "6", "output": "input_1" } ] } }, "pos_x": 84, "pos_y": -141 }, "6": { "id": 6, "name": "NodeType1", "data": {}, "class": "Node4", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "5", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "7", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "9", "output": "input_2" } ] } }, "pos_x": 356, "pos_y": 42 }, "7": { "id": 7, "name": "NodeType2", "data": {}, "class": "Node6", "html": "NodeType2", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "6", "output": "input_2" } ] } }, "pos_x": -173, "pos_y": 66 }, "8": { "id": 8, "name": "NodeType3", "data": {}, "class": "Node7", "html": "NodeType3", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "9", "output": "input_1" } ] } }, "pos_x": 353, "pos_y": -136 }, "9": { "id": 9, "name": "NodeType1", "data": {}, "class": "Node5", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "8", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "6", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "10", "output": "input_1" } ] }, "output_2": { "connections": [ { "node": "11", "output": "input_1" } ] } }, "pos_x": 662, "pos_y": -36 }, "10": { "id": 10, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "9", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 941, "pos_y": -117 }, "11": { "id": 11, "name": "NodeType1", "data": {}, "class": "Node4", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "9", "input": "output_2" } ] }, "input_2": { "connections": [ { "node": "12", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "14", "output": "input_2" } ] } }, "pos_x": 956, "pos_y": 57.25 }, "12": { "id": 12, "name": "NodeType2", "data": {}, "class": "Node6", "html": "NodeType2", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "11", "output": "input_2" } ] } }, "pos_x": 668, "pos_y": 135 }, "13": { "id": 13, "name": "NodeType3", "data": {}, "class": "Node7", "html": "NodeType3", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "14", "output": "input_1" } ] } }, "pos_x": 954, "pos_y": -271 }, "14": { "id": 14, "name": "NodeType1", "data": {}, "class": "Node5", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "13", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "11", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "15", "output": "input_1" } ] }, "output_2": { "connections": [ { "node": "16", "output": "input_1" }, { "node": "17", "output": "input_2" } ] } }, "pos_x": 1238, "pos_y": -60 }, "15": { "id": 15, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "14", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 1492, "pos_y": -230 }, "16": { "id": 16, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "14", "input": "output_2" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "19", "output": "input_1" } ] } }, "pos_x": 1499, "pos_y": 210.75 }, "17": { "id": 17, "name": "NodeType1", "data": {}, "class": "Node2", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "18", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "14", "input": "output_2" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "21", "output": "input_2" } ] }, "output_2": { "connections": [] } }, "pos_x": 1893, "pos_y": 109.33333333333333 }, "18": { "id": 18, "name": "NodeType3", "data": {}, "class": "Node7", "html": "NodeType3", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "17", "output": "input_1" } ] } }, "pos_x": 1607.25, "pos_y": -64 }, "19": { "id": 19, "name": "NodeType1", "data": {}, "class": "Node4", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "16", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "20", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "25", "output": "input_1" } ] } }, "pos_x": 1767, "pos_y": 298 }, "20": { "id": 20, "name": "NodeType2", "data": {}, "class": "Node6", "html": "NodeType2", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "19", "output": "input_2" } ] } }, "pos_x": 1503, "pos_y": 391 }, "21": { "id": 21, "name": "NodeType1", "data": {}, "class": "Node5", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "22", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "17", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "23", "output": "input_1" } ] }, "output_2": { "connections": [ { "node": "24", "output": "input_1" } ] } }, "pos_x": 2189, "pos_y": 26 }, "22": { "id": 22, "name": "NodeType3", "data": {}, "class": "Node7", "html": "NodeType3", "typenode": "vue", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "21", "output": "input_1" } ] } }, "pos_x": 1887, "pos_y": -76 }, "23": { "id": 23, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "21", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 2469, "pos_y": -118 }, "24": { "id": 24, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "21", "input": "output_2" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 2479, "pos_y": 100 }, "25": { "id": 25, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "19", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 2086, "pos_y": 292 }, "26": { "id": 26, "name": "NodeType1", "data": {}, "class": "Node1", "html": "NodeType1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "25", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 3020, "pos_y": 350 } } } } } } ```

The following GIF provides the issue that I am facing, as you can see at certain places I can drag the diagram to the left or right easily but at certain places, I am unable to drag it even though I am clicking and dragging it:

[jerosoler]

The problem is this:

• 469

[Aravinda93]

@jerosoler

Thanks a lot for the quick response, as your your answer in provided link I need to add the Tailwind CSS class from Drawflow parent and I added them but still seeing the same issue:

<template>
  <div class="flex flex-col md:flex-row">
    <div
      class="w-full h-[90vh] bg-slate-100 border-muted-200 rounded-lg items-center border-muted-200 relative border transition-all duration-300 shadow-lg"
    >
      <div
        class="space-x-5 absolute top-4 right-4 z-10 flex items-center justify-center"
      >
        <!-- Upload button to upload Drawflow info -->
        <input
          ref="fileInput"
          type="file"
          class="hidden"
          accept=".json"
          @change="handleFileChange"
        />
        <button
          type="button"
          @click="$refs.fileInput.click()"
          class="hover:ring-slate-200 flex h-12 w-12 items-center justify-center rounded-full border border-slate-300 ring-1 ring-transparent transition-all duration-300 hover:ring-offset-4"
        >
          <span class="justify-center items-center">
            <Icon icon="ic:baseline-upload" width="20" height="20" />
          </span>
        </button>
      </div>

      <!-- Drawflow Canvas -->
      <div
        id="drawflow"
        ref="drawflowRef"
        class="w-full h-full border gridImage bg-slate-100 w-full h-[90vh] rounded-lg items-center relative transition-all duration-300 flex flex-col md:flex-row"
      />
    </div>
  </div>
</template>

[jerosoler]

<div
        id="drawflow"
        ref="drawflowRef"
        class="parent-drawflow w-full h-full border gridImage bg-slate-100 w-full h-[90vh] rounded-lg items-center relative transition-all duration-300 flex flex-col md:flex-row"
      />

[Aravinda93]

@jerosoler Many thanks for the response adding the parent-drawflow at the start of the class styles worked for me:

<!-- Drawflow Canvas -->
      <div
        id="drawflow"
        ref="drawflowRef"
        class="parent-drawflow w-full h-full border gridImage bg-slate-100"
      />
    </div>

Thanks a lot again, closing the issue as solved.