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 <[email protected]>

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",

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<void> {
     await Promise.resolve();

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<void> {

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<void> {
@@ -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);
   };

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<void> {
+  public override async onHoverByDebounce(event: PointerEvent): Promise<void> {
     const { _creator: creator } = this;
     if (creator !== undefined) {
       const ray = this.getRay(event);

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<void> {
+  public override async onHoverByDebounce(event: PointerEvent): Promise<void> {
     const intersection = this.getSpecificIntersection(event, isAnnotationsOrGizmo);
     const domainObject = AnnotationsSelectTool.getIntersectedAnnotationsDomainObject(intersection);
     const intersectInfo = getIntersectedAnnotation(intersection);

react-components/src/architecture/concrete/example/ExampleTool.ts

@@ -78,7 +78,7 @@ export class ExampleTool extends BaseEditTool {
     }
   }
 
-  public override async onHover(event: PointerEvent): Promise<void> {
+  public override async onHoverByDebounce(event: PointerEvent): Promise<void> {
     const intersection = await this.getIntersection(event);
     // Just set the cursor
     const domainObject = this.getIntersectedSelectableDomainObject(intersection);

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<void> {
+  public override async onHoverByDebounce(event: PointerEvent): Promise<void> {
     // Handle when creator is set first
     if (!this.isEdit) {
       if (this._creator !== undefined) {

react-components/src/components/Architecture/FilterButton.tsx

@@ -155,6 +155,7 @@ const FilterMenu = ({
               event.stopPropagation();
               event.preventDefault();
               props.onClick(event);
+              setOpen(!isOpen);
             }}
           />
         </CogsTooltip>
@@ -180,7 +181,7 @@ const FilterDropdown = ({
   return (
     <StyledDropdownRow>
       <label>{label}</label>
-      <StyledSelectPanel appendTo={'parent'} placement={'right-end'}>
+      <StyledSelectPanel appendTo={'parent'} placement={'right-end'} hideOnOutsideClick>
         <SelectPanel.Trigger>
           <Button
             color="#000044"

react-components/src/components/Architecture/SettingsButton.tsx

@@ -74,6 +74,9 @@ export const SettingsButton = ({
     <StyledMenu
       hideOnSelect={false}
       onOpenChange={(open: boolean) => {
+        for (const child of children) {
+          child.update();
+        }
         setOpen(open);
       }}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}