Hi, excuse me. Can you answer a few questions for me

[guminlianren]

1、VueFlow has added apply-default, causing the links between lines to become ineffective. I have configured onConnect(addEdges), and it has been mentioned that this property will be removed in the next version without indicating a replacement.

2、Is there an API that does not have zoom in/out functionality and background movement? Thank you

[guminlianren]

3、 After connecting, the onConnect function is called with (connection) => { addEdges(connection); });. How can I dynamically add markerEnd to this? Or create arrows dynamically

[bcakmakoglu]

VueFlow has added apply-default, causing the links between lines to become ineffective.

apply-default doesn't make any "link" (you mean edges?) "ineffective" (what is this supposed to mean?).

this property will be removed in the next version without indicating a replacement.

There won't be a replacement for it. It's going to be removed and that's it, no more "auto" application of changes.

Is there an API that does not have zoom in/out functionality and background movement?

No idea what this is supposed to mean.

How can I dynamically add markerEnd

Have you tried quite literally just adding a markerEnd to the edge? ^^

const onConnect = (conn) => {
	addEdges({ ...conn, markerEnd: MarkerType.Arrow })
}

[guminlianren]

Thank you for your reply. Here's the translation:

1、I have a requirement where I need to ask for confirmation before deleting. When the user deletes using the delete key, there is no confirmation. Can this confirmation functionality be added? After adding this property, the connecting lines in the background automatically disappear.

2、Are there properties to disable zooming, scaling, and moving the background?

3、If dynamically created components are maintained within a component, how can I access them from outside?

Let me know if you need further assistance with these topics!

[bcakmakoglu]

You can use this to get edges:

const { edges } = useVueFlow()

edges.value

If you're not using v-model:edges="edges" changes won't be propagated to your edges array, so you'll have to get them from the internal state instead.

[guminlianren]

You configured it like this: :min-zoom="1", :max-zoom="2", :default-viewport="{ zoom: 1 }". Why does it still zoom to twice the size after refreshing?

[bcakmakoglu]

I assume you're using fit view on init, which will, as the name implies, fit the view.

[guminlianren]

I'm not quite sure what you mean

[bcakmakoglu]

You're using fit-view-on-init and as I said, this prop will fit the view on initialization.
That means that VueFlow will try to fit around all nodes so that they're in the visible frame, which can result in the zoom level being changed.

[guminlianren]

https://vueflow.dev/examples/layout.html Hello, this example is too complicated, I don't need the animation in it. I need to automatically layout my nodes, there is no concise version of the code, thank you。

[guminlianren]

onConnect((connection) => {
addEdges({ ...connection, markerEnd: MarkerType.Arrow, type: 'animation' });
});I configured it this way. Why isn't it a straight line? Interface: DefaultEdgeTypes How do I use this?

[bcakmakoglu]

I need to automatically layout my nodes, there is no concise version of the code, thank you。

Read the example properly, please.
Everything you need for layouting is in useLayout.

I'm not writing an extra example just for you, sorry.

Why isn't it a straight line?

Why would it be? You haven't used type: 'straight'.

[guminlianren]

Ok, I'll look at the examples carefully 。https://vueflow.dev/examples/layout.html Because that's what we're using in this example " animated "{ id: 'e1-2', source: '1', target: '2', type: edgeType, animated: true }, I thought animated was a straight line ,
How do you do this straight line ?

Why is my place like this

[bcakmakoglu]

Why would animated mean straight line? 😅 It means "the line is animated".
If you want a straight line you simply use type: 'straight' as I said previously.

Why is my place like this

I don't know, you haven't given me any code or reproduction of your code to inspect.

[guminlianren]

1、

I want to add nodes up and down, left and right, so I'll write it like this. Click on the right line from above?
2、 set :delete-key-code="null" <VueFlow
ref="VueFlowRef"
:nodes="nodes"
:edges="edges"
:delete-key-code="null"
@keydown="handleKeydown"
>
Since then, when I monitored the keyboard incident, edges can't. Why? nodes can be monitored, so I can't delete this line

[bcakmakoglu]

Read the docs: https://vueflow.dev/guide/handle.html#multiple-handles

[guminlianren]

node-Toolbar can't be used by edges, right? What if edges want a toolbar

[bcakmakoglu]

Node toolbar is only for nodes but you can use the <EdgeLabelRenderer> to create a toolbar-like menu.

Check this example and open up the EdgeWithButton.vue file :)

[guminlianren]

To use slots, you must have type: custom. I want to keep type: 'step'. In this case, how to use slots? All lines can use slots

[bcakmakoglu]

custom is just an example key-word. Your type can be anything, you could call your custom edge type deezNuts and it's still ok.

If you want to use a custom edge as a (smooth)step edge, you can implement it using getSmoothStepPath which is exported by @vue-flow/core (or just use the <SmoothStepEdge> component that is also exported.

<VueFlow ...>
	<template #edge-deezNuts="props">
		<DeezNutsEdge v-bind="props />
	</template>
</VueFlow>

// DeezNutsEdge.vue
<script lang="ts" setup>
import type { EdgeProps } from '@vue-flow/core'
import { getSmoothStepPath } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const path = computed(() => getSmoothStepPath({
	...props,
	borderRadius: 0 // use 0 as the borderRadius if you want to have a *step* edge instead of a smoothstep one
}))
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
}
</script>

<template>
  <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
</template>

[guminlianren]

I don't want the node to be out of view of the current viewer? Do not want the background to drag (move)

[bcakmakoglu]

Please read the docs: https://vueflow.dev/guide/vue-flow/config.html#viewport-options

I am not your personal documentation chat-bot.
99% of what you're asking is documented, please READ the documentation first!

[bcakmakoglu]

I am closing this discussion since it devolved into just me answering questions that basically are all documented already.
If you have a specific issue that you can't handle even after having read the docs, open a new topic with a specific question.