JointJS端口：類型（輸入，輸出）沒有得到設置

我創建使用此代碼（包括移動端口到頂部部分和底部）端口元素：JointJS端口：類型（輸入，輸出）沒有得到設置

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: portRadius, magnet: 'active' }, 
     '.inPorts .port-body': { stroke: portBodyStroke, fill: inPortFill }, 
     '.outPorts .port-body': { stroke: portBodyStroke, fill: outPortFill}, 
     '.inPorts .port-label': { 'font-size': 0}, 
     '.outPorts .port-label': {'font-size': 0 } 
    }, 
    parentID: none 


}, 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: id, 
      size: { width: width, height: height }, 
      inPorts: ['in1'], 
      outPorts: ['out1'], 
      attrs: { 
       text: { text: elementLabel } 
      } 
     });

我遇到的問題是試圖驗證元素端口之間拖動的連接。我嘗試了基於API和教程的示例代碼：

validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) { 
    // Prevent linking from input ports. 
    if (magnetS && magnetS.getAttribute('type') === 'input') return false; 
    // Prevent linking from output ports to input ports within one element. 
    if (cellViewS === cellViewT) return false; 
    // Prevent linking to input ports. 
    return magnetT && magnetT.getAttribute('type') === 'input'; 
}

沒有鏈接正在驗證，所以我做了一些挖掘。然後我替換爲上面的代碼：

validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) { 

    console.log(cellViewS + " | " + magnetS.getAttribute('type') + " | " + cellViewT + " | " + magnetT.getAttribute('class') + " | " + end + " | " + linkView); 

    return true; 
}

從那裏，我看到了，有沒有「類型」屬性被設置，雖然「一流」爲目標端口的罰款。在Chrome瀏覽器中設置這些變量的手錶，證實該屬性不存在。

我的印象是使用devs.Model庫自動設置所有需要的東西的端口。是類型是輸入還是輸出端口，我仍然需要手動設置？我是否設法搞亂定義或實例化，阻止正確的屬性被定義？

非常感謝提前！

來源

2015-10-20 Mark Dyson

好的，自己解決了。這條線：

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

沒有在磁口模板的主要屬性設置類型，以便驗證碼：

if (magnetS && magnetS.getAttribute('type') === 'input') return false;

正在試圖獲得一個不存在的屬性。 'in'和'out'屬性存在於不同的地方，但不是磁鐵可以找到的地方。有可能是一個更深層次的修復，這將是更優雅，但這種變通辦法讓我重新滾動：

attrs: { 
    '.body': { stroke: 'black' }, 
    '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' }, 
    '.port-body': { r: portRadius, magnet: 'active' }, 
    '.inPorts .port-body': { stroke: portBodyStroke, fill: inPortFill, type: 'input' }, // add type here 
    '.outPorts .port-body': { stroke: portBodyStroke, fill: outPortFill, type: 'output' }, // and here 
    '.inPorts .port-label': { 'font-size': 0}, 
    '.outPorts .port-label': {'font-size': 0 } 
},

定義在適當的位置類型屬性的驗證碼找到它，一切都很好，然後。

來源

2015-10-22 15:56:45

JointJS端口：類型（輸入，輸出）沒有得到設置

回答

相關問題