时间戳

首页 > 解决方案 > 动态添加的端口不能在jointjs中克隆？

javascript - 动态添加的端口不能在jointjs中克隆？

问题描述

单击按钮时，我向元素添加了端口。

这是我的代码

joint.shapes.devs.Jointpoint = {}; 
joint.shapes.devs.Jointpoint = joint.shapes.devs.Model
.extend({
    markup : '<g class="rotatable"><g class="scalable"><ellipse class="bianyaqiOO" ry="30" rx="30" id="svg_1" cy="30" cx="30" stroke-width="1.5" stroke="#222" fill="none"/></g></g>',
    //portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>',
    defaults : joint.util.deepSupplement({
        type : 'devs.Jointpoint',

        ports : {
            groups : {
                'in' : {
                    position : {
                        name : 'top'
                    },
                    attrs : {
                        '.port-label' : {
                            fill : '#000'
                        },
                        '.port-body' : {
                            'fill-opacity' : 0.5,
                            'stroke-opacity' : 0.5,
                            r : 2,
                            magnet : true
                        }
                    },
                    label : {
                        position : {
                            name : 'top',
                            args : {
                                y : -10
                            }
                        }
                    }
                },
            }
        }
    }, joint.shapes.devs.Model.prototype.defaults)
});

joint.shapes.devs.BianyaqiOOView = joint.shapes.devs.ModelView;

var Jointpointicon = new joint.shapes.devs.Jointpoint({
position : {
x : 500,
y : 16
},
size : {
width : 20,
height : 20
},
isInteractive : false,
});
Jointpointicon.addTo(graph);
var selected;
paper.on('cell:pointerup', function (cellView) {
                selected = cellView.model
           if(cellView.model.get('name') == 'addPort'){
                selected.addPort({group:'in');
       });

paper.on('blank:pointerup', function (evt, x, y) {
                graph.addCell(selected.clone());
       });

当我单击添加端口按钮时，我可以为所选元素添加一个端口，但是当我单击纸上的空白区域时，我克隆了所选元素，但是没有端口，我不确定发生了什么，但是如果我改变它像这样 ：

var Jointpointicon = new joint.shapes.devs.Jointpoint({
position : {
x : 500,
y : 16
},
size : {
width : 20,
height : 20
},
isInteractive : false,
inPorts : [ 'in' ],
});

加载后会有一个'in'端口，可以克隆，但是如果我通过单击addPort按钮添加一些新端口，所有添加的端口都不会被克隆，我做错了什么吗？

标签： javascriptportclonejointjs

解决方案

最后我弄清楚问题是什么。我使用 addInPort(portname) 和 addOutPort(portname) 而不是 addPort()。它工作得很好。

似乎 addPort() 无法将端口添加到“输入”或“输出”，它可能会将端口添加到新数组。所以当克隆一个添加了端口的新单元时，它只克隆“in”和“out”数组中的端口，新添加的端口被添加到一个无名数组中，所以它可能不会被克隆。无论如何使用 addInPort(portname) 和 addOutPort(portname) 是好方法。

推荐阅读