π [BUG]: manual control <Handle /> graph line confusion
AlphaYoung111 opened this issue Β· comments
Is there an existing issue for this?
- 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
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:
- for hover node show handle
- for other can connecet from the hover node also show handle
- else node do not show handle
- 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
- all of nodes do not show handle
Steps To Reproduce
No response
Relevant log output
No response
Anything else?
No response
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.
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.