0

将工具视图添加到单击链接上的链接后，我无法获得链接的双击事件。我正在使用 react 开发一个使用 RappidJS 库的交互式图形应用程序。请帮忙。

我正在使用 link:pointerup 将工具视图添加到链接，如下所示::

 this.paper.on('link:pointerup',  (linkView) => {
            var tools;
            var ns = joint.linkTools;


            var toolsView = new joint.dia.ToolsView({
                name: 'link:pointerup',
                tools: [
                    new ns.Vertices(),
                    new ns.Remove({ focusOpacity: 0.5,
                             distance: 5,
                            offset: 10}),
                    new ns.TargetArrowhead(),
                    new ns.Segments(),
                    new ns.Boundary({ padding: 10 }),
                ]
            });

            joint.ui.Halo.clear(this.paper);
            joint.ui.FreeTransform.clear(this.paper);
            this.paper.removeTools();
            linkView.addTools(toolsView);

        });

对于链接创建:::

 export class Link2 extends joint.shapes.standard.Link  {

        defaults() {
            return joint.util.defaultsDeep({
                router: {
                    name: 'normal',
                },
                connector: {
                    name: 'normal',

                },
                labels: [],
                attrs: {
                    line: {
                        stroke: '#284f96',
                        strokeDasharray: '0',
                        strokeWidth: 1,
                        fill: 'none',
                        sourceMarker: {
                            d: 'M 0 0 0 0',
                            fill: {
                                type: 'color-palette',
                                group: 'marker-source',
                                when: { ne: { 'attrs/line/sourceMarker/d': 'M 0 0 0 0' } },
                                index: 2
                            },

                        },
                        targetMarker: {
                            d: ' M 0 -3 -6 0 0 3 z',
                            },

                        }
                }
            }, joint.shapes.standard.Link.prototype.defaults);
        }

        defaultLabel = {
            attrs: {
                rect: {
                    fill: '#ffffff',
                    stroke: '#8f8f8f',
                    strokeWidth: 2,
                    refWidth: 10,
                    refHeight: 10,
                    refX: 0,
                    refY: 0
                }
            }
        };



        getMarkerWidth(type: any) {
            const d = (type === 'source') ? this.attr('line/sourceMarker/d') : this.attr('line/targetMarker/d');
            console.log("marker width", this.getDataWidth(d));
            return this.getDataWidth(d);
        }

        getDataWidth = memoize(function (d: any) {
            return (new joint.g.Rect(d)).bbox().width;
        });

        static connectionPoint(line: any, view: any, magnet: any, opt: any, type: any, linkView: any) {
            // const markerWidth = linkView.model.getMarkerWidth(type);
            opt = { offset: 5, stroke: true };
            // connection point for UML shapes lies on the root group containg all the shapes components
            const modelType = view.model.get('type');
            if (modelType.indexOf('uml') === 0) opt.selector = 'root';
            // taking the border stroke-width into account
            if (modelType === 'standard.InscribedImage') opt.selector = 'border';
            return joint.connectionPoints.boundary.call(this, line, view, magnet, opt, type, linkView);
        }
    }

我正在使用以下代码在 Link::: 上获取双击事件

 this.rappid.paper.on(
      "link:pointerdblclick", (linkView) => {
        // linkView.model.attr("priority",0);
        console.log("linkview", linkView);
        // this.currentLink = linkView
        this.setState({ modalView: "lableModal", visible: true, currentLink: linkView });

      });
4

0 回答 0