ссылки не работают должным образом при использовании с переназначением

Ссылки не отпускают мышь при наведении указателя вверх при использовании вместе с переназначением. Я не уверен, что не так, и я все еще новичок в 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,]);
            };

person kittu    schedule 23.07.2015    source источник


Ответы (1)


  1. Событие бумаги cell:pointerup запускается как для элементов, так и для ссылок.
  2. 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
});
person Roman    schedule 24.07.2015
comment
Когда я пытаюсь с первым вариантом. Он говорит: Uncaught TypeError: cellView.isLink is not a function и со вторым вариантом нет ошибки, но переназначение не работает - person kittu; 24.07.2015
comment
Большое спасибо. Это сработало с первым вариантом, но один быстрый вопрос, который сбивает с толку: what is difference between cell, cellView and elementView ? I think cell and element are same? and elementView is for rendering if I am not wrong so then what is the use of elementView inside a function - person kittu; 24.07.2015
comment
Сэр, есть ли документация по добавлению портов в круг? - person kittu; 24.07.2015
comment
dia.Cell, dia.Element и dia.Link это Backbone.Model. dia.CellView, dia.ElementView и dia.LinkView это Backbone.View. Ячейка является либо элементом, либо ссылкой. - person Roman; 24.07.2015
comment
Не могли бы вы опубликовать еще один вопрос о добавлении портов в круг? Я не знаю документации для этого. - person Roman; 24.07.2015
comment
Ок так и сделаю. Спасибо - person kittu; 24.07.2015
comment
Опубликован новый вопрос: stackoverflow. com/questions/31606999/ - person kittu; 24.07.2015
comment
Я хочу добавить ссылки и к родителю. Мой плохой сэр, я не проверял это. Это только добавление форм. Как добавить ссылки в родительские? - person kittu; 24.07.2015
comment
Починил это! Удаление цвета заливки белого из прямоугольника сработало - person kittu; 24.07.2015
comment
Если cellView является ссылкой, вы можете использовать аргументы x, y для определения родителя, а затем вставить ссылку на родителя с помощью parent.embed(link), я думаю. - person Roman; 24.07.2015
comment
Ссылки отображаются за прямоугольником (родителем) при добавлении к родителю. Как это исправить? - person kittu; 26.07.2015
comment
Ссылки уходят за групповой прямоугольник. Вот предварительный просмотр postimg.org/image/tn3ql559z Как мне это исправить? пожалуйста помоги - person kittu; 27.07.2015
comment
Я пробовал с помощью вышеуказанного метода, но я не уверен, где именно он должен идти в коде. - person kittu; 28.07.2015
comment
привет, сэр, опубликовал новый вопрос для вышеуказанной проблемы: заголовок stackoverflow.com/questions/31667581/ - person kittu; 28.07.2015
comment
Здравствуйте, сэр, не могли бы вы ответить на этот вопрос. Я столкнулся с проблемой при рендеринге json из db в представление. stackoverflow.com/questions/31794098/ - person kittu; 03.08.2015