Flowchart connector is overlapping with node

Hi, @ajainarayanan, I have a problem like this, the connector is overlapping with the node。

the full settings is:

import { extend, clone } from 'lodash'

// globalTextColor
const globalGrayColor = '#90949c'
const whiteColor = '#fff'

// 基础设置
export const defaultSettings = {
  Connector: ['Flowchart', {
    alwaysRespectStubs: true,
    gap: 4,
    cornerRadius: 10,
    midpoint: 0.2,
    stub: 40
  }],
  ConnectionsDetachable: true
}

// 是否可 drop
export const dropNotAllowedStyle = {
  stroke: 'red',
  fill: 'red'
}

// 连接线样式
export const connectorStyle = {
  stroke: globalGrayColor,
  strokeWidth: 2
}

export const connectorOverlays = {
  connectorOverlays: [
    ['Arrow', { location: 1, length: 6, width: 12, height: 10, foldback: 1 }],
    ['Label', {
      location: 0.5,
      id: 'label',
      cssClass: 'aLabel',
      events: {
        click: (info) => console.log(info.label)
      }
    }]
  ]
}

export const disabledConnectorOverlays = {
  connectorOverlays: [
    [ 'Arrow', { location: 1, length: 6, width: 12, height: 10, foldback: 1 } ]
  ]
}

export const commonSettings = {
  endpoint: 'Dot',
  maxConnections: -1, // -1 means unlimited connections
  allowLoopback: false,
  paintStyle: {
    stroke: globalGrayColor,
    fill: whiteColor,
    radius: 4,
    lineWidth: 1
  },
  anchors: ['Static']
}

export const sourceSettings = extend({
  isSource: true,
  connectorStyle: connectorStyle,
  anchor: [1, 0.5, 0, 0, 0, 0]
}, commonSettings, {maxConnections: -1})

export const sinkSettings = extend({
  isTarget: true,
  anchor: [0, 0.5, 0, 0, 0, 0],
  connectorStyle: connectorStyle,
  onMaxConnections: function (info, e) {
    console.error('Maximum connections (' + info.maxConnections + ') reached') // eslint-disable-line
  },
  dropOptions: {
    // todo: dynamic检测
    // hoverClass: 'drop-hover',
    activeClass: 'drag-active'
  }
}, commonSettings, {maxConnections: -1})

export function getSettings (isDisabled = false) {
  let settings = {
    transformSource: {},
    transformSink: {}
  }
  if (isDisabled) {
    settings = {
      default: defaultSettings,
      commonSettings: extend(commonSettings, disabledConnectorOverlays),
      source: extend(sourceSettings, disabledConnectorOverlays),
      sink: extend(sinkSettings, disabledConnectorOverlays),
      transformSource: {},
      transformSink: {}
    }
  } else {
    settings = {
      default: defaultSettings,
      commonSettings: extend(commonSettings, connectorOverlays),
      source: extend(sourceSettings, connectorOverlays),
      sink: extend(sinkSettings, connectorOverlays),
      transformSource: {},
      transformSink: {}
    }
  }

  settings.transformSource = clone(settings.source)
  settings.transformSink = clone(settings.sink)

  return settings
}

do you have any advice on this?

[wulucxy]

@ajainarayanan yes。It’s not an issue with react-dag，and the author of jsplumb have solved my problem。

thanks for your awesome project。

[Venugopal46]

hacked a way to add the label.

1. added data to connections, like

{
  nodes: [],
  connections: [
    { sourceId: '1', targetId: '2', data: { label: 'my-label' }},
    ...
  ]
}

1. used the data in ConnectionOverlays, like

['Label', {
        label: con => con.component.getData().label,
        id: 'label',
        location: 0.5,
}]

Please let me know if there’s a better way. Thanks.