JointJs 顶部底部端口

Question

我正在尝试将 JointJS 与端口功能一起使用:

(...)
var model = joint.shapes.devs.Model({                
            size: { width: width, height: height },
            label: node.label,
            inPorts: node.inputPorts,
            outPorts: node.outputPorts,
            attrs: {
                '.label': { text: node.label, 'ref-x': .4, 'ref-y': .2 },
                rect: { fill: '#2ECC71' },
                '.inPorts circle': { fill: '#16A085' },
                '.outPorts circle': { fill: '#E74C3C' }
            }
(...)

但是输入端口出现在左边，输出端口出现在右边。我想要顶部的输入端口和底部的输出端口。

使用 joint.shapes.devs.Model 将端口位置更改为 Top-Bottom 的最佳方法是什么？

提前致谢。

Answer 1

端口的位置在 devs.Model.prototype.getPortAttrs 中计算。您可以做的只是交换 x 和 y 端口坐标，如下例所示。

joint.shapes.devs.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {

   markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
   portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

   defaults: joint.util.deepSupplement({

       type: 'devs.Model',
       size: { width: 1, height: 1 },

       inPorts: [],
       outPorts: [],

       attrs: {
            '.': { magnet: false },
           '.body': {
               width: 150, height: 250,
               stroke: 'black'
           },
           '.port-body': {
               r: 10,
               magnet: true,
               stroke: 'black'
           },
           text: {
               fill: 'black',
               'pointer-events': 'none'
           },
           '.label': { text: 'Model', 'ref-x': 10, 'ref-y': .2, 'ref': '.body' },

           // CHANGED: find better positions for port labels 
           '.inPorts .port-label': { dy:-30, x: 4 },
           '.outPorts .port-label':{ dy: 15, x: 4 }
           //
       }

   }, joint.shapes.basic.Generic.prototype.defaults),

   getPortAttrs: function(portName, index, total, selector, type) {

       var attrs = {};

       var portClass = 'port' + index;
       var portSelector = selector + '>.' + portClass;
       var portLabelSelector = portSelector + '>.port-label';
       var portBodySelector = portSelector + '>.port-body';

       attrs[portLabelSelector] = { text: portName };
       attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };

       // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
       attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
       // ('ref-dx' => 'ref-dy')
       if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
       //

       return attrs;
   }
}));

JS fiddle :http://jsfiddle.net/kumilingus/L2f73cbf/

更新:

这是一个如何使用 JointJS v1.0.1+ 实现相同功能的示例。

不再需要使用 PortsModelInterface 扩展类。端口 API 现在由 joint.dia.Element 实现，即可以轻松地使用端口丰富任意元素。

var shape = new joint.shapes.devs.Model({
    inPorts: ['in1', 'in2'],
    outPorts: ['out1', 'out2'],
    ports: {
        groups: {
            'in': { position: 'top'},
            'out': { position: 'bottom' }
        }
    }
});

JSFiddle:http://jsfiddle.net/kumilingus/trk63agg/

有关更多信息，请参阅文档:

• ports API
• port layouts