JointJS無法連接端口，說「getPortSelector」不是函數

Question

我在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」不是一個函數。有任何想法嗎？提前謝謝了！

Answer 1

因此，我通過添加一個不必要的實例化層而導致自己的問題，所以方法的範圍並不像預期的那樣。 defineElement步驟不需要，並且是爲了使水域變得模糊。

我簡化了我的元素實例化代碼，現在一切正常。