Jsplumb - Connectors

Question

Am trying to draw a flowchart. I create divs dynamically and have set a unique 'id' property for each div and connect them using Jsplumb connectors.

I get the source and destination id from database(note that 'id' property for div dynamically created is its ID from database) and store in 'connectors' json. Its format is Eg:

{[from:A,to:B], [from:A,to:C], [from:B,to:C]}

angular.forEach(connectors, function (connect) {
                        $scope.connection(connect.from, connect.to);
                    })

The jsplumb code is as follows

$scope.connection = function (s, t) {
var stateMachineConnector1 = {
                    connector: ["Flowchart", { stub: 25, midpoint: 0.001 }],
                    maxConnections: -1,
                    paintStyle: { lineWidth: 3, stroke: "#421111" },
                    endpoint: "Blank",
                    anchor: "Continuous",
                    anchors: [strt, end],
                    overlays: [["PlainArrow", { location: 1, width: 15, length: 12 }]]
                };
var firstInstance = jsPlumb.getInstance();
firstInstance.connect({ source: s.toString(), target: t.toString() }, stateMachineConnector1);
    }

THE PROBLEM:

What i have now is

Here the connector B to C overlaps existing A to C connector.

What i need is to separate the two connections like below

I could not find a solution for this anywhere. Any help? Thanks!

Abhilash Aruva · Answer 1 · 2017-09-22T07:54:24.523

1

Using anchor perimeter calculates the appropriate position for endpoints. jsfiddle demo for perimeter

jsPlumb.connect({
      source:$('#item1'),
      target:$("#item2"),
      endpoint:"Dot",
      connector: ["Flowchart", { stub: 25, midpoint: 0.001 }],
      anchors:[
          [ "Perimeter", { shape:"Square" } ],
          [ "Perimeter", { shape:"Square" } ]
      ]
  });

Jsplumb anchors

edited Sep 22 '17 at 07:54

answered Sep 21 '17 at 08:47

Abhilash Aruva

308
3
10

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/17401098) – MC Emperor Sep 21 '17 at 12:43
@MCEmperor yes, i have updated with a more accurate solution. (maybe) – Abhilash Aruva Sep 22 '17 at 07:57
That's way better! – MC Emperor Sep 22 '17 at 08:26

score 0 · Answer 2 · answered Jun 08 '17 at 13:24

What I suggest you to do, to exactly replicate your schema, would be to set 2 endpoints on on box on A, B and C

A Endpoints should be [0.25, 1, 0, 0, 0, 0] and [0.75, 1, 0, 0, 0, 0]

B and C Endpoints should be [0.25, 0, 0, 0, 0, 0] and [0.75, 0, 0, 0, 0, 0]

It basically works like this (I might be wrong for the 4 last one its been a while but you only need to worry about the x and y)

[x,y,offsetx, offsety, angle, angle]

For the x 0 is the extreme left and 1 extreme right

Same goes for y (0 is top and 1 is bottom).

Take care

Jsplumb - Connectors

2 Answers2