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端口：类型（输入，输出）没有得到设置

回答

相关问题