Edges Position misplaced

[AkshayReddyEmmadi]

I have designed a flow and want to render that flow in a different component, but for the custom nodes it was unable to identify handle location.

"Source"

"Target"

Note : "The Parent component is not a popup"

[bcakmakoglu]

No code, no reproduction, nothing.
How am I supposed to know what you're doing and why it's not working if you provide 0 context to your question?

Please take the time to describe your issue properly and provide as much context as possible.

• What are you trying to do
• What have you tried
• What isn't working

You can find a code sandbox template here.

Otherwise I'll close this thread because of insufficient info.

[AkshayReddyEmmadi]

1. I have created a flow and exported nodes and edges data from there and passing to a component where these data will be passed as a props and whole flow will be in read only mode. Which means i am setting apply-default and nodes-connectable props as false.
2. this is the code

<template>
  <div style="width:100% !important;height: 100% !important;">
    <VueFlow :id="id" :apply-default="editMode" :nodes-connectable="editMode" max-zoom="2.5" min-zoom="0.6"
      :nodes="nodes" :edges="edges" :node-types="nodeTypes" delete-key-code="Delete" connection-mode="strict"
      :class="{ dark }" class="preview-flow" :default-viewport="{ zoom: 1.5 }">
      <Panel position="top-left">
        <slot name="panel-content"></slot>
      </Panel>
      <MiniMap pannable zoomable />
      <Controls :showInteractive=false :fit-view-params="FitViewOptions">
      </Controls>
      <Background variant="dots" size="0.3" :pattern-color="dark ? '#FFFFFB' : '#616161'" gap="8" />
      <MiniMap pannable zoomable />
      <template #edge-default="customEdgeProps">
        <CustomEdge :id="customEdgeProps.id" :source-x="customEdgeProps.sourceX" :source-y="customEdgeProps.sourceY"
          :target-x="customEdgeProps.targetX" :target-y="customEdgeProps.targetY"
          :source-position="customEdgeProps.sourcePosition" :target-position="customEdgeProps.targetPosition"
          :data="customEdgeProps.data" :marker-end="customEdgeProps.markerEnd" :style="customEdgeProps.style">
        </CustomEdge>
      </template>
    </VueFlow>
  </div>
</template>
<script setup>
import { watch, onMounted } from 'vue';
import { Panel, VueFlow, isNode, useVueFlow, MarkerType, Position } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { markRaw, ref } from 'vue';

import CustomEdge from './customEdges/customEdge.vue';

const nodeTypes = {
  customNode: markRaw(CustomNode),
}
const props = defineProps({
  id: String,
  nodes: Array,
  edges: Array,
  editMode: {
    default: false
  }
})
const { onPaneReady, onInit, onNodeDragStop, onConnect, addEdges, setTransform, toObject, addNodes, project, vueFlowRef, findNode, getNodes, getElements, getEdges, getNode, getIncomers, useNode, getConnectedEdges, fromObject, onNodeClick, updateNode } = useVueFlow({ id: props.id })

const FitViewOptions = ref({
  padding: 10,
  minZoom: 1.5,
  maxZoom: 3
})
</script>

3. The edges position should be ideally similar to the first pic, but the above code is showing in this format
   

4. This is the Custom Edge Code

<script setup>
import { BaseEdge, StraightEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
import { computed, ref } from 'vue'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  sourceX: {
    type: Number,
    required: true,
  },
  sourceY: {
    type: Number,
    required: true,
  },
  targetX: {
    type: Number,
    required: true,
  },
  targetY: {
    type: Number,
    required: true,
  },
  sourcePosition: {
    type: String,
    required: true,
  },
  targetPosition: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    required: false,
  },
  markerEnd: {
    type: String,
    required: false,
  },
  style: {
    type: Object,
    required: false,
  },
  selected: {
    required: false
  }
})

const path = computed(() => getBezierPath(props))

</script>

<script>
export default {
  inheritAttrs: false,
}
</script>

<template>
  <BaseEdge ondblclick="console.log('called')" :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" @dblclick="toggleEditing">
  </BaseEdge>
  <EdgeLabelRenderer>
    <div :style="{
      pointerEvents: 'all',
      position: 'absolute',
      transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
    }" class="nodrag nopan">
      <slot name="custom-edge-label"></slot>
    </div>
  </EdgeLabelRenderer>
</template>

4. I have validated core version, css and code from both source application and target. But I couldn't find any difference which may affect the CSS part.

5. Previously I was facing this issue when I am trying to render in a popup. But Misplaced egdes (Unaligned edges) #1365 solution worked. But in this case I am not rendering the flow in a popup.

6. Kindly let me know, if you need any additional information

<script setup>
    import { Position, Handle, useVueFlow } from '@vue-flow/core'
    import { onMounted, ref } from 'vue';
    import { onBeforeMount, computed } from 'vue';
    import { storeToRefs } from "pinia"

    import { watch } from 'vue';

    const { getNodes, findNode, updateNodeData } = useVueFlow();
    // props were passed from the slot using `v-bind="customNodeProps"`
    const prop = defineProps(['label', 'data', 'id', 'selected', 'isConfiguring'])
    const node = ref()
    const handleConnectableTarget = (node, connectedEdges) => {
        var allowTarget = true
        connectedEdges.forEach((edge) => {
            if (edge.target == node.id) {
                allowTarget = false
            }
        })
        return allowTarget;
    }
    const handleConnectableSource = (node, connectedEdges) => {
        var allowSource = true
        connectedEdges.forEach((edge) => {
            if (edge.source == node.id) {
                allowSource = false
            }
        })
        return allowSource;
    }
</script>

<template>
    <div :class="selected ? 'node-selected' : ''">
        <div class="customNode"
            :class="data.isRunning ? 'node-running' : data.isFinished ? 'node-completed' : data.isFailed ? 'node-failed' : data.isCancelled ? 'node-cancelled' : ''">

            <div style="display:flex;align-items: center;width: 100%;height:100%">
                <div class="nodeIcon">
                    <q-icon filled style="color:var(--q-grey-5);margin: 10px;" size="sm" :name="data.icon"></q-icon>
                </div>
                <div style="width: 60%; color:var(--light-dimmed-background);margin: auto;" :title="data.label">
                    <div class="node-label text-accent">{{ data.label }}</div>
                </div>
            </div>
            <Handle type="target" :position="Position.Left" :connectable="handleConnectableTarget" />
            <Handle type="source" :position="Position.Right" :connectable="handleConnectableSource" />
        </div>
    </div>
</template>

<style lang="scss">
    
</style>

[bcakmakoglu]

What does your custom node look like?

[AkshayReddyEmmadi]

The user Node i have provided in the picture

[bcakmakoglu]

What does the code of the custom node look like? 😐

[AkshayReddyEmmadi]

updated above message with custom node code

[bcakmakoglu]

Code looks fine from what I can tell.
I need a minimal reproduction of the issue for debugging.

You can find a code sandbox template here.

[AkshayReddyEmmadi]

It was unable to locate the handle position, so it was pointing to the default handle position i.e., Top and Bottom.
So I have got a workaround for this by passing id prop to the Handle as shown below.

<Handle :id="id + '__handle-left'" type="target" :position="Position.Left" :connectable="handleConnectableTarget" />
 <Handle :id="id+'__handle-right'" type="source" :position="Position.Right" :connectable="handleConnectableSource"/>