svg - Changing Port Location in custom element in JointJS -
i able create custom element utilizing answers question: using predefined svg file creating custom jointjs shape ports
after reviewing tutorials jointjs don't see how move ports different locations on 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'] });
ref-x
, ref-y
applied on appropriate selector can trick eg.
'.inports .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}
Comments
Post a Comment