From 1b288f233cd0c3f38256d05ace4bebccd0f97ea3 Mon Sep 17 00:00:00 2001 From: Nils Petter Fremming <35219649+nilscognite@users.noreply.github.com> Date: Mon, 4 Nov 2024 16:28:19 +0100 Subject: [PATCH] fix(react-components): Fix update issue when open SettingsButton and fix slow hover on 360 images (#4842) * Initial commit * hide filter menu on clicking outside * Update FilterButton.tsx * Update package.json * Fix according to code review --------- Co-authored-by: Pramod S --- react-components/package.json | 2 +- .../src/architecture/base/commands/BaseTool.ts | 9 ++++++++- .../base/concreteCommands/NavigationTool.ts | 6 ++++-- .../base/renderTarget/CommandsController.ts | 11 ++++++++++- .../annotations/commands/AnnotationsCreateTool.ts | 2 +- .../annotations/commands/AnnotationsSelectTool.ts | 2 +- .../src/architecture/concrete/example/ExampleTool.ts | 2 +- .../concrete/primitives/tools/PrimitiveEditTool.ts | 2 +- .../src/components/Architecture/FilterButton.tsx | 3 ++- .../src/components/Architecture/SettingsButton.tsx | 3 +++ 10 files changed, 32 insertions(+), 10 deletions(-) diff --git a/react-components/package.json b/react-components/package.json index 0dbe39e435d..a0c46140534 100644 --- a/react-components/package.json +++ b/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@cognite/reveal-react-components", - "version": "0.64.1", + "version": "0.64.2", "exports": { ".": { "import": "./dist/index.js", diff --git a/react-components/src/architecture/base/commands/BaseTool.ts b/react-components/src/architecture/base/commands/BaseTool.ts index 31296e487e6..6a8b9c19c22 100644 --- a/react-components/src/architecture/base/commands/BaseTool.ts +++ b/react-components/src/architecture/base/commands/BaseTool.ts @@ -85,7 +85,14 @@ export abstract class BaseTool extends RenderTargetCommand { // Override this to clear any temporary objects in the tool, like the dragger } - public onHover(_event: PointerEvent): void {} + public onHover(_event: MouseEvent): void { + // Fast. Use this for hover effects when not + // doing intersection with CAD models and other large models + } + + public onHoverByDebounce(_event: PointerEvent): void { + // Debounce version. Use this when doing intersection with CAD models and other large models + } public async onClick(_event: PointerEvent): Promise { await Promise.resolve(); diff --git a/react-components/src/architecture/base/concreteCommands/NavigationTool.ts b/react-components/src/architecture/base/concreteCommands/NavigationTool.ts index faad9597fdd..a741c009e06 100644 --- a/react-components/src/architecture/base/concreteCommands/NavigationTool.ts +++ b/react-components/src/architecture/base/concreteCommands/NavigationTool.ts @@ -33,8 +33,10 @@ export class NavigationTool extends BaseTool { return { key: 'NAVIGATION', fallback: 'Navigation' }; } - public override onHover(event: PointerEvent): void { - this.renderTarget.viewer.onHover360Images(event); + public override onHoverByDebounce(_event: PointerEvent): void {} + + public override onHover(event: MouseEvent): void { + this.renderTarget.viewer.onHover360Images(event as PointerEvent); } public override async onClick(event: PointerEvent): Promise { diff --git a/react-components/src/architecture/base/renderTarget/CommandsController.ts b/react-components/src/architecture/base/renderTarget/CommandsController.ts index 0c259a38d95..27edb4766d5 100644 --- a/react-components/src/architecture/base/renderTarget/CommandsController.ts +++ b/react-components/src/architecture/base/renderTarget/CommandsController.ts @@ -55,7 +55,8 @@ export class CommandsController extends PointerEvents { } public override onHover(event: PointerEvent): void { - this.activeTool?.onHover(event); + // This override is actually with Debounce + this.activeTool?.onHoverByDebounce(event); } public override async onClick(event: PointerEvent): Promise { @@ -206,6 +207,7 @@ export class CommandsController extends PointerEvents { public addEventListeners(): void { // https://www.w3schools.com/jsref/obj_mouseevent.asp const domElement = this._domElement; + domElement.addEventListener('mousemove', this._onMouseMove); domElement.addEventListener('keydown', this._onKeyDown); domElement.addEventListener('keyup', this._onKeyUp); domElement.addEventListener('wheel', this._onWheel); @@ -217,6 +219,7 @@ export class CommandsController extends PointerEvents { public removeEventListeners(): void { const domElement = this._domElement; + domElement.removeEventListener('mousemove', this._onMouseMove); domElement.removeEventListener('keydown', this._onKeyDown); domElement.removeEventListener('keyup', this._onKeyUp); domElement.removeEventListener('wheel', this._onWheel); @@ -233,6 +236,12 @@ export class CommandsController extends PointerEvents { // INSTANCE METHODS: Events // ================================================== + private readonly _onMouseMove = (event: MouseEvent): void => { + if (event.buttons === 0) { + this.activeTool?.onHover(event); + } + }; + private readonly _onKeyDown = (event: KeyboardEvent): void => { this.onKey(event, true); }; diff --git a/react-components/src/architecture/concrete/annotations/commands/AnnotationsCreateTool.ts b/react-components/src/architecture/concrete/annotations/commands/AnnotationsCreateTool.ts index 0ee96e93005..b3eda1ac6de 100644 --- a/react-components/src/architecture/concrete/annotations/commands/AnnotationsCreateTool.ts +++ b/react-components/src/architecture/concrete/annotations/commands/AnnotationsCreateTool.ts @@ -87,7 +87,7 @@ export class AnnotationsCreateTool extends NavigationTool { } } - public override async onHover(event: PointerEvent): Promise { + public override async onHoverByDebounce(event: PointerEvent): Promise { const { _creator: creator } = this; if (creator !== undefined) { const ray = this.getRay(event); diff --git a/react-components/src/architecture/concrete/annotations/commands/AnnotationsSelectTool.ts b/react-components/src/architecture/concrete/annotations/commands/AnnotationsSelectTool.ts index b1b3c2a5ec8..f7beca46c0d 100644 --- a/react-components/src/architecture/concrete/annotations/commands/AnnotationsSelectTool.ts +++ b/react-components/src/architecture/concrete/annotations/commands/AnnotationsSelectTool.ts @@ -80,7 +80,7 @@ export class AnnotationsSelectTool extends BaseEditTool { this.deselectedAnnotationInteractive(); } - public override async onHover(event: PointerEvent): Promise { + public override async onHoverByDebounce(event: PointerEvent): Promise { const intersection = this.getSpecificIntersection(event, isAnnotationsOrGizmo); const domainObject = AnnotationsSelectTool.getIntersectedAnnotationsDomainObject(intersection); const intersectInfo = getIntersectedAnnotation(intersection); diff --git a/react-components/src/architecture/concrete/example/ExampleTool.ts b/react-components/src/architecture/concrete/example/ExampleTool.ts index 308e9d6e65e..6c87e8a0f5b 100644 --- a/react-components/src/architecture/concrete/example/ExampleTool.ts +++ b/react-components/src/architecture/concrete/example/ExampleTool.ts @@ -78,7 +78,7 @@ export class ExampleTool extends BaseEditTool { } } - public override async onHover(event: PointerEvent): Promise { + public override async onHoverByDebounce(event: PointerEvent): Promise { const intersection = await this.getIntersection(event); // Just set the cursor const domainObject = this.getIntersectedSelectableDomainObject(intersection); diff --git a/react-components/src/architecture/concrete/primitives/tools/PrimitiveEditTool.ts b/react-components/src/architecture/concrete/primitives/tools/PrimitiveEditTool.ts index e05db8fe132..557e7582579 100644 --- a/react-components/src/architecture/concrete/primitives/tools/PrimitiveEditTool.ts +++ b/react-components/src/architecture/concrete/primitives/tools/PrimitiveEditTool.ts @@ -71,7 +71,7 @@ export abstract class PrimitiveEditTool extends BaseEditTool { } } - public override async onHover(event: PointerEvent): Promise { + public override async onHoverByDebounce(event: PointerEvent): Promise { // Handle when creator is set first if (!this.isEdit) { if (this._creator !== undefined) { diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx index 177e1d2372c..56e4f2daf86 100644 --- a/react-components/src/components/Architecture/FilterButton.tsx +++ b/react-components/src/components/Architecture/FilterButton.tsx @@ -155,6 +155,7 @@ const FilterMenu = ({ event.stopPropagation(); event.preventDefault(); props.onClick(event); + setOpen(!isOpen); }} /> @@ -180,7 +181,7 @@ const FilterDropdown = ({ return ( - +