🐛 [BUG]: manual control <Handle /> graph line confusion

[AlphaYoung111]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

desc

I use dragStatus to show diffrent stauts of render Handle

true status

line is correctly out of Node1's left and connect in Node's right

false status

from top to bottom

App.vue

<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { initialEdges, initialNodes } from './initial-elements.js'
import Node from './Node.vue'

/**
 * useVueFlow provides all event handlers and store properties
 * You can pass the composable an object that has the same properties as the VueFlow component props
 */
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()

const nodes = ref(initialNodes)

const edges = ref(initialEdges)

onPaneReady(({ fitView }) => {
  fitView()
})

const dragStatus = ref(false)
</script>

<template>
  <button @click="dragStatus = !dragStatus">
    toggle drag
  </button>
  <VueFlow
    :nodes="nodes"
    :edges="edges"
    :class="{ dark }"
    class="basicflow"
    :default-viewport="{ zoom: 1.5 }"
    :min-zoom="0.2"
    :max-zoom="4"
  >
    <template #node-custom="data">
      <Node :name="data.label" :dragStatus="dragStatus" />
    </template>

    <Background pattern-color="#aaa" :gap="16" />
  </VueFlow>
</template>

init-element.js

import { MarkerType } from '@vue-flow/core'

export const initialNodes = [
  { id: '1', type: 'custom', label: 'Node 1', position: { x: 250, y: 0 }, class: 'light' },
  { id: '2', type: 'custom', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
  { id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
]

export const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', animated: true, sourceHandle: '1__handle-right', targetHandle:'2__handle-left' },
  { id: 'e1-3', label: 'edge with arrowhead', source: '1', target: '3', markerEnd: MarkerType.ArrowClosed },
]

Node.vue

<script setup lang="ts">
  import { Handle, Position } from '@vue-flow/core'

defineProps({
  name: String,
  dragStatus: Boolean
})
</script>

<template>
  <div style="border: 1px solid red">
    123 - {{ name }}

    <Handle
      v-if="dragStatus"
      :position="Position.Left"
    />

    <Handle
      v-if="dragStatus"
      :position="Position.Right"
    />
  </div>
</template>

Expected Behavior

i want to munual control handle show to realize :

in hover status:

1. for hover node show handle
2. for other can connecet from the hover node also show handle
3. else node do not show handle
4. all the connect line 's position do not change, i set edge's type to step, the line show be like this but not like this

in common status

1. all of nodes do not show handle

Steps To Reproduce

No response

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

As mentioned in the previous issue that you opened: Using multiple handles of the same type (you didn't specify the type so both will fall back to source) requires you to set an id on the handles!.

And as mentioned in the previous issue, this one also doesn't describe in any detail what the issue is. Please take some time before filling out these issues, the code is appreciated but if you have trouble filling out issues in English use some translation tool or something but these issues say barely anything and seem more like questions and not bug reports.

Sorry but also closed for insufficient info.

[bcakmakoglu]

If you need support, maybe start a Discussion Thread instead or join the Discord to ask your question but please refrain from opening half-baked issues like this, thank you.