Search code examples
svgshapesportsjointjs

Changing Port Location in custom element in JointJS

I was able to create a custom element utilizing answers from this question: Using predefined SVG file for creating a custom JointJS shape with ports

After reviewing the tutorials for JointJS I don't see how to move the ports to different locations on the element.

Thanks

Example code: http://jsfiddle.net/jshubert/9a8brrun/

var el1 = new joint.shapes.devs.Model({
  markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 50,
    y: 75
  },
  attrs: {
   '.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01},
    '.body': {
      width: 1024,
      height: 768,
      'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
      preserveAspectRatio: 'none'
    }
  },
  inPorts: ['1'],
  outPorts: ['2']
});
Solution

  • ref-x, ref-y applied on appropriate selector can do the trick eg.

    '.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}

    http://jsfiddle.net/9a8brrun/1/