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将端口位置更改为自上而下的最佳方法是什么？

提前谢谢。

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小提琴：http://jsfiddle.net/kumilingus/L2f73cbf/

更新：

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

不再需要用PortsModelInterface来扩展这个类。ports现在是由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

Answer 2

只需在joint.shapes.devs.Model创建中更改职位名称，如下所示：

new joint.shapes.devs.Model({
            position: { x: x, y: y },
            size: { width: 90, height: 90 },
            inPorts: ['in1'],
            outPorts:['out1'],
            attrs: {
                rect: { fill: '#2ECC71' },
                '.inPorts circle': {r:10, fill: '#16A085' },
                '.outPorts circle': { fill: '#E74C3C' }
            },
            ports: {
                groups: {
                    'in': {
                        position: {
                            name: 'top'
                        },
                        attrs: {
                            '.port-body': {
                                r: 1
                            }
                        }
                    },
                    'out': {
                        position: {
                            name: 'bottom'
                        },
                        attrs: {
                            '.port-body': {
                                r: 1
                            }
                        }
                    }
                }
            }
        });

考虑将职位名称更改为top和bottom