From b00d78c9525cd76d9342b51cfb9ffa6b68537313 Mon Sep 17 00:00:00 2001 From: Nikita Rokotyan Date: Thu, 21 Nov 2024 16:20:51 -0800 Subject: [PATCH 1/2] Component | Graph: Fix pointer-events issues; Add link label group selector This commits aims to solve frequent problems with node mouseover / click events not being triggered (link events were triggered instead). - Adds a new `linkLabel` selector to the Graph component to target the link label group - Removes the `pointer-events: all` style from the `linkLabelGroup` to prevent link hover highlight from interfering with link label interactions --- packages/ts/src/components/graph/index.ts | 8 +------- packages/ts/src/components/graph/modules/link/style.ts | 2 -- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/ts/src/components/graph/index.ts b/packages/ts/src/components/graph/index.ts index 6014cc863..4a723d99a 100644 --- a/packages/ts/src/components/graph/index.ts +++ b/packages/ts/src/components/graph/index.ts @@ -58,6 +58,7 @@ export class Graph< dimmedNode: nodeSelectors.greyedOutNode, link: linkSelectors.gLink, linkLine: linkSelectors.link, + linkLabel: linkSelectors.linkLabelGroup, dimmedLink: linkSelectors.greyedOutLink, panel: panelSelectors.gPanel, panelRect: panelSelectors.panel, @@ -295,13 +296,6 @@ export class Graph< if (disableZoom) this.g.on('.zoom', null) else this.g.call(this._zoomBehavior).on('dblclick.zoom', null) - // While the graph is animating we disable pointer events on the graph group - if (animDuration) { this._graphGroup.attr('pointer-events', 'none') } - smartTransition(this._graphGroup, animDuration) - .on('end interrupt', () => { - this._graphGroup.attr('pointer-events', null) - }) - // We need to set up events and attributes again because the rendering might have been delayed by the layout // calculation and they were not set up properly (see the render function of `ComponentCore`) this._setUpComponentEventsThrottled() diff --git a/packages/ts/src/components/graph/modules/link/style.ts b/packages/ts/src/components/graph/modules/link/style.ts index 7a97f8eab..73d883e06 100644 --- a/packages/ts/src/components/graph/modules/link/style.ts +++ b/packages/ts/src/components/graph/modules/link/style.ts @@ -40,7 +40,6 @@ export const linkSupport = css` fill: none; stroke-linecap: round; - pointer-events: stroke; stroke-width: var(--vis-graph-link-support-stroke-width); stroke-opacity: 0; stroke: var(--vis-graph-link-stroke-color); @@ -108,7 +107,6 @@ export const flowCircle = css` export const linkLabelGroup = css` label: label-group; - pointer-events: all; ` export const linkLabelBackground = css` From 2e42baa34cadffce10807d010472c5eabb199e82 Mon Sep 17 00:00:00 2001 From: Nikita Rokotyan Date: Fri, 22 Nov 2024 14:14:15 -0800 Subject: [PATCH 2/2] Component | Graph: Config option to disable link highlight on hover - Adds a new `linkHighlightOnHover` config option to the Graph component to enable/disable link hover highlight - Updates the `_onLinkMouseOver` method to only set the `hovered` state if `linkHighlightOnHover` is true --- packages/ts/src/components/graph/config.ts | 3 +++ packages/ts/src/components/graph/index.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ts/src/components/graph/config.ts b/packages/ts/src/components/graph/config.ts index 2e04c9728..d38b44d29 100644 --- a/packages/ts/src/components/graph/config.ts +++ b/packages/ts/src/components/graph/config.ts @@ -145,6 +145,8 @@ export interface GraphConfigInterface; + /** Highlight links on hover. Default: `true` */ + linkHighlightOnHover?: boolean; /** Set selected link by its unique id. Default: `undefined` */ selectedLinkId?: number | string; @@ -316,6 +318,7 @@ export const GraphDefaultConfig: GraphConfigInterface): void { if (this._isDragging) return - d._state.hovered = true + if (this.config.linkHighlightOnHover) d._state.hovered = true this._updateNodesLinksPartial() }