addTools 在 rappidjs 中给出异常

Question

在我的一项作业中，我试图使用 RappidJS。我正在尝试通过将元素放在另一个元素上来连接元素的以下代码。 https://resources.jointjs.com/tutorial/connecting-by-dropping 但我收到如下异常

rappid.min.js:14 Uncaught TypeError: Cannot read property 'start' of null
at child.update (rappid.min.js:14)
at child.onRender (rappid.min.js:14)
at child.e.render (rappid.min.js:14)
at child.configure (rappid.min.js:14)
at child.addTools (rappid.min.js:14)
at child.element:pointerup (diagram.js:106)
at triggerEvents (backbone.js:338)
at triggerApi (backbone.js:322)
at eventsApi (backbone.js:110)
at child.Events.trigger (backbone.js:312)

下面我也参考了link https://resources.jointjs.com/tutorial/link-tools。谁能告诉我我在这里做错了什么。我的代码片段如下

 function attachLinks(paper) {
                paper.on({
            'element:pointerdown': function (elementView, event) {
                event.data = elementView.model.position();
            },
            'element:pointerup': function (elementView, event, x, y) {
                var coordinates = new joint.g.Point(x, y);
                var elementAbove = elementView.model;
                var elementBelow = this.model.findModelsFromPoint(coordinates).find(function (el) {
                    return (el.id !== elementAbove.id);
                });
                // If the two elements are connected already, don't
                // connect them again (this is application-specific though).
                if (elementBelow && self.graph.getNeighbors(elementBelow).indexOf(elementAbove) === -1) {

                    // Move the element to the position before dragging.
                    elementAbove.position(event.data.x, event.data.y);
                    // Create a connection between elements.
                    var link = new joint.shapes.standard.Link();
                    link.source(elementAbove);
                    link.target(elementBelow);
                    link.addTo(this.model);
                    // Add remove button to the link.
                    var removeLinkTool = new joint.linkTools.Remove();

                    var tools = new joint.dia.ToolsView({
                           tools: [ removeLinkTool]
                    });

                    var linkView = link.findView(this);
                    linkView.addTools(tools); // getting exception at this place.
                }
            }
        });
        }

Answer 1

This issue is reproducible only in the paper async mode.

确保在添加 link 工具时呈现 link 的视图。为此，请使用 joint.dia.Paper.prototype.requireView().

// It is fine to use the method in the `sync` mode as the view is rendered/updated
// synchronously as soon as the link is added to the graph.
var linkView = link.findView(paper);

// This method makes sure the view is ready to use in the `async` mode.
// It forces the view to render/update synchronously.
var linkView = paper.requireView(link);

或者，您可以在向图表添加 link 时传递 async = false 标志，以告知论文同步呈现特定视图。

link.addTo(graph, { 'async': false });

addTools 在 rappidjs 中给出异常

addTools is giving exception in rappidjs

jointjs