Is there an existing issue for this? <li class="

Two things, both aren't a bug here. If you wanna have a an edg

🐛 [BUG]: <title>Change the position of the connection handle of the node. The connection line does not change about vue-flow HOT 3 CLOSED

kzj0916 commented on June 12, 2024

🐛 [BUG]: Change the position of the connection handle of the node. The connection line does not change<p>from vue-flow.</p></section> </section> </article> <article> <h2 class="h2">Comments (3)</h2> <section class="issue-comment"> <section id="1862216315" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/78412429?v=4" alt="bcakmakoglu avatar" /> <a class="issue-username" href="/bcakmakoglu">bcakmakoglu</a> <span class="issue-time"> commented on June 12, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>2 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Two things, both aren't a bug here.</p> <ol dir="auto"> <li>If you wanna have a an edge that just connects to the same node, you'll have to use a custom edge and adjust the path, otherwise the edge will run through the node - default edges aren't meant for self-loops.</li> <li>If you update the position of your handles, you need to notify your node about this. This is documented right here: <a href="https://vueflow.dev/guide/node.html#working-with-dynamic-handle-positions-adding-handles-dynamically" rel="nofollow">https://vueflow.dev/guide/node.html#working-with-dynamic-handle-positions-adding-handles-dynamically</a><br> So in your case</li> </ol> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const onChange = () => { const node: any = nodes.value.find((n) => n.selected) if (!node) return node.targetPosition = node.targetPosition === 'left' ? 'top' : 'left' node.sourcePosition = node.sourcePosition === 'right' ? 'bottom' : 'right' setTimeout(() => { updateNodeInternals(['1']) }, 0) }"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">onChange</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">node</span>: <span class="pl-smi">any</span> <span class="pl-c1">=</span> <span class="pl-s1">nodes</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">n</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">n</span><span class="pl-kos">.</span><span class="pl-c1">selected</span><span class="pl-kos">)</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">node</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">targetPosition</span> <span class="pl-c1">=</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">targetPosition</span> <span class="pl-c1">===</span> <span class="pl-s">'left'</span> ? <span class="pl-s">'top'</span> : <span class="pl-s">'left'</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">sourcePosition</span> <span class="pl-c1">=</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">sourcePosition</span> <span class="pl-c1">===</span> <span class="pl-s">'right'</span> ? <span class="pl-s">'bottom'</span> : <span class="pl-s">'right'</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-en">updateNodeInternals</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'1'</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">Here's an example: <a href="https://codesandbox.io/p/devbox/sleepy-ritchie-p4yn9m?file=%2Fsrc%2FApp.vue%3A36%2C1-38%2C8" rel="nofollow">https://codesandbox.io/p/devbox/sleepy-ritchie-p4yn9m?file=%2Fsrc%2FApp.vue%3A36%2C1-38%2C8</a></p><p>from vue-flow.</p></section> </section> <section class="issue-comment"> <section id="1862260757" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/71442632?v=4" alt="kzj0916 avatar" /> <a class="issue-username" href="/kzj0916">kzj0916</a> <span class="issue-time"> commented on June 12, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Thank you, boss.</p><p>from vue-flow.</p></section> </section> <section class="issue-comment"> <section id="1862301233" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/78412429?v=4" alt="bcakmakoglu avatar" /> <a class="issue-username" href="/bcakmakoglu">bcakmakoglu</a> <span class="issue-time"> commented on June 12, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">This is a ReactFlow example for a self-connecting node but you can use the same concept for VueFlow: <a href="https://codesandbox.io/p/sandbox/sharp-orla-vyjqen" rel="nofollow">https://codesandbox.io/p/sandbox/sharp-orla-vyjqen</a></p><p>from vue-flow.</p></section> </section> </article> <section> <h2 class="h2">Related Issues (20)</h2> <div class="issue"> <ul> <li> <a href="/bcakmakoglu/vue-flow/issues/1310">🐛 [BUG]: Strange edge behaviour for type 'smoothstep' and 'step'</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1312">🐛 [BUG]: multi-selection-key-code property error</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1322">🐛 [BUG]: Background lines mode is invalid</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1332">🐛 [BUG]: <title> vue-flow is not hack with uniapp-h5-vue</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1334">🐛 [BUG]: [Vue warn]: Invalid prop name: "ref" is a reserved property. </a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1342">🐛 [BUG]: some event Types are missing (nodeClick, nodeDoubleClick, ...)</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 6</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1349">🐛 [BUG]: Register a custom component for repeated rendering</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1350">🐛 [BUG]: Nuxt3 Hydration attribute mismatch</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 9</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1352">🐛 [BUG]: Node added in `onMounted()` is not rendered</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1360">🐛 [BUG]: Canvas captures scroll even when all scroll-related features are disabled</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 16</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1366">🐛 [BUG]: useNodesData is not available in "@vue-flow/core" library, but is refernced in the documentaion, and also in examples</a> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1367">🐛 [BUG]: Devtool throws warning when using node resizer</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1368">🐛 [BUG]: `pathOptions` for default edges aren't applied</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1370">🐛 [BUG]: flickering on some phone browsers</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1380">🐛 [BUG]: Wrong edge position with dynamic handle id</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1385">🐛 [BUG]: When typing, CMD + Backspace or Shift + Backspace can delete selected element</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1387">🐛 [BUG]: Docs (vueflow.dev) hangs and never loads on iOS Safari</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1393">🐛 [BUG]: Auto-generated Handle ids change with position</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1394">🐛 [BUG]: <title> manual control <Handle /> graph line confusion</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/bcakmakoglu/vue-flow/issues/1395">🐛 [BUG]: manual control <Handle /> graph line confusion</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> </ul> </div> </section> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section>  <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> </div> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> </li> </ul> </section> </section> </div> </div>  <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Code Monkey  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>