Question

当与重新显示一起使用时，链接不会在指针上释放鼠标。我不确定会出现什么问题，我仍然是联合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()未定义链接。

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

解决方案可以是检查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
});

与重新显示一起使用时，链接无法正常工作

1 个答案: