CODEWITHSUNDEEP
javascriptjointjs
Bronzdragon
Bronzdragon

Reputation: 355

JointJS ports are non-functional

Here is a JSFiddle showing the issue: https://jsfiddle.net/Bronzdragon/xpvt214o/399003/

graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 800,
    height: 600,
});

var rect = new joint.shapes.basic.Rect({
  attrs: {rect: {fill: 'lightblue'}},
  size: { width: 200, height: 100 },
  ports: {
    groups: {
      'inputs': {
        position: { name: 'left' },
        attrs: {circle: {fill: 'lightgreen'}},
        magnet: 'passive'
      },
      'outputs': {
        position: { name: 'right' },
        attrs: {circle: {fill: 'pink'}},
        magnet: true,
      }
    },
    items:[ { group: 'inputs' }, { group: 'outputs' } ]
  }
});
rect.position(100, 50);
rect.addTo(graph);

var rect2 = rect.clone();
rect2.position(400, 100);
rect2.addTo(graph);

I'm defining an JointJS element (called rect), with two ports on it, and adding them to the graph. The elements themselves are functional, but the ports aren't. When dragging off of an active magnet (the pink circle), it should create a link. Instead it moves the element.

I've followed the JointJS guide in creating a shape, and adding ports. These ports I've added seem to be completely inactive though. I do not know what I'm doing wrong.

Upvotes: 0

Views: 335

Answers (1)

Bronzdragon
Bronzdragon

Reputation: 355

I have emailed the JointJS team, and they came back to me with the following (Thank you very much, Roman!):

Thank you for reaching out to us! You were nearly there. The magnet attribute meant to be set on a specific shape DOM element. Similar to fill, refX, xlinkHref etc.

var rect = new joint.shapes.basic.Rect({
  attrs: {rect: {fill: 'lightblue' }, root: {  magnet: false }},
  size: { width: 200, height: 100 },
  ports: {
    groups: {
      'inputs': {
        position: { name: 'left' },
        attrs: {circle: {fill: 'green', magnet: 'passive' }},

      },
      'outputs': {
        position: { name: 'right' },
        attrs: {circle: {fill: 'red', magnet: true }},    
      }
    },
    items:[ { group: 'inputs' }, { group: 'outputs' } ]
  }
});

Also, If you are new to JointJS I recommend you to read our online tutorials (https://resources.jointjs.com/tutorial). I suggest using standard shapes over basic, as the standard shapes are newer and reflecting the best JointJS techniques.

Upvotes: 1

Related Questions