# How can I implement hover highlight before picking?

**URL:** <https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168>\
**Category:** HOOPS Visualize Web\
**Tags:** how-to\
**Created:** [November 3, 2024, 4:03pm UTC](https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168 "2024-11-03T16:03:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zak](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/zak/32/1678_2.png) [@zak](https://forum.techsoft3d.com/u/zak)\
**Post date:** [November 3, 2024, 4:03pm UTC](https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168/1 "2024-11-03T16:03:15Z")

</div>

I want to implement picking entities from a scene, but have the scene outline the entity on mouseover, then on click add to a selection set (and highlight). I’ve worked out how to do these things independently, but not all together.

It’s almost like I want two selection managers?

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [November 3, 2024, 5:09pm UTC](https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168/2 "2024-11-03T17:09:04Z")

</div>

Hello @zak,

The geometry of the [HandleOperator](https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Operators.HandleOperator.html#handleoperator) is highlighted during a mouse move (hover) operation. As a helpful reference, we provide the source code as part of the Communicator package which you can find in the directory _HOOPS\_Communicator\_2024.7.0\web\_viewer\deprecated\typescript\operators\HandleOperator.ts_.

The function of interest is:

```auto
public async onMouseMove(event: Event.MouseInputEvent): Promise<void> {
            super.onMouseMove(event);

            if (this._draggingHandle && this._activeHandleNodeId !== null) {
                this._onHandleDrag();
            } else {
                // If we are not dragging, highlight the handles as we mouse over them.
                const selection = await this._viewer.view.pickFromPoint(
                    event.getPosition(),
                    this._pickConfig,
                );
                await this._highlightHandle(selection);
            }
        }

```

Thanks,  
Tino

---

<div class="post-metadata">

**Author:** ![zak](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/zak/32/1678_2.png) [@zak](https://forum.techsoft3d.com/u/zak)\
**Post date:** [November 3, 2024, 5:33pm UTC](https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168/3 "2024-11-03T17:33:26Z")

</div>

Thanks Tino,

So if I understand correctly there is no way to have multiple selection managers, and so I must effectively implement my own and colour the model manually?

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [November 3, 2024, 5:42pm UTC](https://forum.techsoft3d.com/t/how-can-i-implement-hover-highlight-before-picking/4168/4 "2024-11-03T17:42:09Z")

</div>

A Web Viewer object only has one selection manager so you won’t be able to create multiple `SelectionManager` objects assigned to a Web Viewer.