悬停特定的jsplumb连接时如何禁用鼠标悬停

Question

我使用 JSPlumb 社区版从数据库动态构建流程图。

在这些流程图中，某些连接器不应是可点击的。

我已经能够通过注册两种不同的连接器类型来改变这些连接器的颜色，因此用户可以提示连接是否可点击。

            // define connection types
            const updatableHoverCSS = {
                strokeWidth: 3,
                stroke: '#876C4E',
                outlineWidth: 5,
                outlineStroke: 'white'
            };
            this.graphInstance.registerConnectionTypes({
                updatablePrerequisite: {
                    paintStyle: {
                        strokeWidth: 2,
                        stroke: '#FF9201',
                        outlineStroke: 'white'
                    },
                    hoverPaintStyle: updatableHoverCSS
                },
                notUpdatablePrerequisite: {
                    paintStyle: {
                        strokeWidth: 2,
                        stroke: '#8E1E07',
                        outlineStroke: 'white'
                    }
                }
            });

但我不知道如何禁用鼠标悬停效果，即鼠标从默认更改为指针，用于类型名为“notUpdatablePrerequisite”的连接器。

关于可点击虚线的问题，这是我在 ngInit 上的代码：

        this.graphInstance = newInstance({
            // default drag options
            dragOptions: {
                cursor: 'pointer',
                zIndex: 2000,
                grid: [20, 20],
                containment: 'notNegative'
            },
            // overlays to decorate each connection with
            connectionOverlays: [
                {
                    type: 'Arrow',
                    options: {
                        location: 1,
                        visible: true,
                        width: 11,
                        length: 11,
                        id: 'ARROW'
                    }
                }
            ],
            container: document.getElementById('canvas')
        });
        // paint style for the connections hover style.
        const endpointHoverCSS = {
            fill: '#876C4E',
            stroke: '#876C4E'
        };
        // definition of source endpoints
        this.sourceEndpoint = {
            endpoint: DotEndpoint.type,
            paintStyle: {
                stroke: '#FF9201',
                fill: 'transparent',
                radius: 7,
                strokeWidth: 1
            },
            isSource: true,
            connector: { type: 'Flowchart', options: { stub: [40, 60], gap: 8, cornerRadius: 5, alwaysRespectStubs: false } },
            hoverPaintStyle: endpointHoverCSS,
            maxConnections: -1,
            dragOptions: {}
        };
        // definition of target endpoints (will appear when the user drags a connection)
        this.targetEndpoint = {
            endpoint: DotEndpoint.type,
            paintStyle: { fill: '#FF9201', radius: 7 },
            hoverPaintStyle: endpointHoverCSS,
            maxConnections: -1,
            dropOptions: { hoverClass: 'hover', activeClass: 'active' },
            isTarget: true
        };

下面是更新包含图形实例的 div 时执行的代码：

                // define and style Connection Types
                const updatableOpenHoverCSS = {
                    stroke: '#FF9201'
                };
                const updatableLockedHoverCSS = {
                    stroke: '#FF9201',
                    dashstyle: '2 2'
                };
                const notUpdatableHoverCSS = {
                    stroke: '#FF9201',
                };
                this.graphInstance.registerConnectionTypes({
                    updatableOpenPrerequisite: {
                        paintStyle: {
                            strokeWidth: 2,
                            stroke: 'green'
                        },
                        hoverPaintStyle: updatableOpenHoverCSS
                    },
                    updatableLockedPrerequisite: {
                        paintStyle: {
                            strokeWidth: 2,
                            stroke: 'red',
                            dashstyle: '2 2'
                        },
                        hoverPaintStyle: updatableLockedHoverCSS
                    },
                    notUpdatableOpenPrerequisite: {
                        paintStyle: {
                            strokeWidth: 2,
                            stroke: '#8E1E07'
                        },
                        hoverPaintStyle: notUpdatableHoverCSS
                    },
                    notUpdatableLockedPrerequisite: {
                        paintStyle: {
                            strokeWidth: 2,
                            stroke: '#8E1E07',
                            dashstyle: '2 2'
                        },
                        hoverPaintStyle: notUpdatableHoverCSS
                    }

另外，我没有在您提到的演示中看到虚线连接器。

这是我的代码绘制的图表的屏幕副本，其中连接是否虚线取决于从数据库检索到的布尔值。

在第一个虚线连接器上，鼠标悬停效果仅出现在虚线上，而不是在虚线之间。

Answer 1

鼠标变为pointer 是一个CSS 问题，与您所拥有的任何绘画样式无关。看起来您的 CSS 中某处有一些 :hover 指令。它会是这样的：

.jtk-connector path:hover {
  cursor:pointer;
}