3

我在 JointJS 中的自定义元素上连接端口时遇到问题。我使用以下代码定义元素：

function defineElement(id, parentID, type, elementLabel, toolName, timeRequired, userAccessing, IPInfo, notes) {
  this.id = id;
  this.parentID = parentID;
  this.elementType = type;
  this.label = elementLabel;
  this.toolName = toolName;
  this.timeRequired = timeRequired;
  this.userAccessing = userAccessing;
  this.IPInfo = IPInfo;
  this.notes = notes;
}

function makeElement(element) {

    var maxLineLength = _.max(element.label.split('\n'), function(l) { return l.length; }).length;

    var letterSize = 8;
    var width = 1.6 * (letterSize * (0.6 * maxLineLength + 1));
    var height = 2 * ((element.label.split('\n').length + 1) * letterSize);

    var newElement;

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


        markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="body-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.flowchartProcess',
        attrs: {
            '.body': { stroke: 'black' },
            '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' },
            '.port-body': { r: 6, magnet: 'active' },
            '.inPorts .port-body': { stroke: 'gray', fill: 'red' },
            '.outPorts .port-body': { stroke: 'gray', fill: 'green'},
            '.inPorts .port-label': { },
            '.outPorts .port-label': { }
        }

    }, joint.shapes.devs.Model.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;
        }
    }));

    joint.shapes.devs.flowchartProcessView = joint.shapes.devs.ModelView;


            newElement =  new joint.shapes.devs.flowchartProcess ({
                id: element.id,
                size: { width: width, height: height },
                inPorts: ['in'],
                outPorts: ['out'],
                attrs: {
                    text: { text: element.label }
                }
            });
            newElement.attr('rect/fill', { type: 'linearGradient', stops: [{ offset: '0%', color: '#00fdff' },{ offset: '100%', color: '#049a9b' }] });
            newElement.attr('rect/fill/attrs', { x1: '0%', y1: '0%', x2: '0%', y2: '100%' });

    newElement.set('parentID', element.parentID);   
    newElement.set('label', element.label); 

    newElement.attr('text', { fill: '#111111' });   
    newElement.attr('rect/filter', { name: 'dropShadow', args: { dx: 1, dy: 3, blur: 1, opacity: 0.75 } });

    return newElement;

}

然后尝试使用以下代码链接它们：

function makeLink(parent, child) {

    var thislink = new joint.shapes.devs.Link({
        source: { id: parent.id, selector: parent.getPortSelector('out') },
        target: { id: child.id, selector: child.getPortSelector('in')  },
        attrs: { '.marker-target': { d: 'M 8 0 L 0 4 L 8 8 z' } },
        smooth: false
    });

    thislink.set('router', { name: 'metro' });

    return thislink;

}

但我收到一条错误消息，说“getPortSelector”不是函数。有任何想法吗？提前谢谢了！

4

1 回答 1

0

因此，我通过添加不必要的实例化层为自己造成了问题，因此方法的范围与预期不符。不需要defineElement 步骤，它是为了搅浑水。

我简化了我的元素实例化代码，现在一切都很好。

于 2015-10-14T15:38:44.150 回答