与重新设置父级一起使用时，链接无法按要求工作

Question

当与重新设置父级一起使用时，链接不会在指针向上时释放鼠标。我不确定哪里出了问题，我还是 joint js 的新手。

代码：

 window.onload = function ()
            {
                var graph = new joint.dia.Graph;
                var paper = new joint.dia.Paper({
                    el: $('#myholder'),
                    width: 1000,
                    height: 680,
                    model: graph,
                    gridSize: 1,
                    defaultLink: new joint.dia.Link({
                        attrs: {'.marker-target': {d: 'M 10 0 L 0 5 L 10 10 z'}}
                    }),
                    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 loop linking
                        return (magnetS !== magnetT);
                        // Prevent linking to input ports.
                        return magnetT && magnetT.getAttribute('type') === 'input';
                    },
                    // Enable marking available cells & magnets
                    markAvailable: true
                            // Enable link snapping within 75px lookup radius
//                    snapLinks: {radius: 75}
                });

                var rect = new joint.shapes.basic.Rect({
                    position: {x: 10, y: 50},
                    size: {width: 51, height: 41},
                    attrs: {rect: {fill: 'white', stroke: '#7E7E7E'}}
                });

                var rectGroup0 = new joint.shapes.basic.Rect({
                    position: {x: 10, y: 420},
                    size: {width: 51, height: 41},
                    attrs: {rect: {fill: 'white', stroke: '#7E7E7E'}}
                });

                paper.on('cell:pointerdblclick', function (cellView, evt, x, y)
                {
                    var clone = cellView.model.clone();
                    if (rect.id === cellView.model.id)
                    {
                        clone = new joint.shapes.devs.Model({
                            position: {x: 100, y: 50},
                            size: {width: 51, height: 41},
                            inPorts: [''],
                            outPorts: [''],
                            attrs: {
                                '.': {magnet: false},
                                '.label': {text: '', 'ref-x': .4, 'ref-y': .2},
                                '.inPorts circle': {type: 'input'},
                                '.outPorts circle': {type: 'output'},
                                '.port-body': {r: 5}
                            }
                        });
                        graph.addCell(clone);
                    }

                    else if (rectGroup0.id === cellView.model.id)
                    {
                        clone = new joint.shapes.devs.Model({
                            position: {x: 160, y: 450},
                            size: {width: 551, height: 150},
                            outPorts: [''],
                            attrs: {
                                '.': {magnet: false},
                                '.label': {text: '', 'ref-x': .4, 'ref-y': .2},
                                '.port-body': {r: 0}
                            }
                        });
                        graph.addCell(clone);
                    }
                });
                // First, unembed the cell that has just been grabbed by the user.
                paper.on('cell:pointerdown', function (cellView, evt, x, y) {

                    var cell = cellView.model;
                    if (!cell.get('embeds') || cell.get('embeds').length === 0) {
                        // Show the dragged element above all the other cells (except when the
                        // element is a parent).
                        cell.toFront();
                    }

                    if (cell.get('parent')) {
                        graph.getCell(cell.get('parent')).unembed(cell);
                    }
                });
                // When the dragged cell is dropped over another cell, let it become a child of the
// element below.
                paper.on('cell:pointerup', function (cellView, evt, x, y) {

                    var cell = cellView.model;
                    var cellViewsBelow = paper.findViewsFromPoint(cell.getBBox().center());
                    if (cellViewsBelow.length) {
                        // Note that the findViewsFromPoint() returns the view for the `cell` itself.
                        var cellViewBelow = _.find(cellViewsBelow, function (c) {
                            return c.model.id !== cell.id
                        });
                        // Prevent recursive embedding.
                        if (cellViewBelow && cellViewBelow.model.get('parent') !== cell.id) {
                            cellViewBelow.model.embed(cell);
                        }
                    }
                });
                graph.addCells([rect,rectGroup0,]);
            };

Answer 1

元素和链接都触发了论文事件cell:pointerup。
getBBox() 没有为链接定义。

您正试图在 cell:pointerup 处理程序中调用未定义的方法 link.getBBox()。

解决方案可以是检查 cellView 是否是一个元素，而不是继续重新设置父级或改为听取 element:pointerup（在 jointjs v0.9.4 中引入）。

v0.9.3

paper.on('cell:pointerup', function (cellView, evt, x, y) {
    if (cellView.model.isLink()) return; // exit the handler when cell is a link
    // start reparenting
});

v0.9.4+

paper.on('element:pointerup', function (elementView, evt, x, y) {
    // start reparenting
});

与重新设置父级一起使用时，链接无法按要求工作

links not working as required when used with reparenting

jointjs