從“joint.shapes.devs.Model”JointJS 動態移除端口

Question

我正在嘗試從 joitJS 的單元格中動態刪除端口，所以我有一個元素：

var em = new joint.shapes.devs.Model({
                    position: {x: ev.offsetX, y: ev.offsetY},
                    size: {width: 100, height: 40},
                    attrs: {
                        '.label': {text: bname, fill: 'white'},
                        rect: {fill: '#1ABC9C', stroke: "#000","stroke-width": 0},
                        '.inPorts circle': {
                            fill: '#16A085',
                            magnet: 'passive',
                            type: 'input',
                            'stroke-width': 0,
                            r: 8
                        },
                        '.outPorts circle': {fill: '#E74C3C', type: 'output',"stroke-width": 0, stroke: "#000",r: 8}
                    },
                    file: bname + ".txt",
                    input: "url",
                    name: bname,
                    inPorts: [''],
                    outPorts: [''],
                    output: "txt"
  });

我正在使用此功能動態添加它，並將端口添加到：

function addInPort(name, opt){
    var portsArray = currCell.model.get('inPorts') || [];
    currCell.model.set('inPorts', portsArray.concat([name]), opt);
}

這是刪除的：

function removeInPort(opt){
    var portsArray = currCell.model.get('inPorts') || [];
    portsArray.shift();
    console.log(portsArray);
    currCell.model.set('inPorts',portsArray, opt);
}

當我嘗試從端口數組中刪除端口時，它不會渲染端口，而是從數組中刪除它們，但不會渲染它們。

我試過array.slice()、array.shift()，但它們不渲染，切片它可以，但它刪除了所有端口。

我怎么能做到？

Answer 1

請參閱https://groups.google.com/g/jointjs/c/9oVtclUXDxU/m/I1iN0-LPAgAJ 。

TL/DR：既然您使用了joint.shapes.devs，請堅持使用它提供的API。 不要將它與元素端口 API 結合使用，例如 addPort、removePort。 devs形狀將端口存儲在inPorts和outPorts屬性中； 當您嘗試使用 Element Port API 更改端口時，這些端口不會更新。 請參閱https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#shapes.devs