Add hoverWidget, autoFocusHover in PickingPlugin

src/plugins/interaction/PickingPlugin.ts

@@ -15,6 +15,7 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
     static readonly PluginType = 'Picking'
     private _picker?: ObjectPicker
     private _widget?: SelectionWidget
+    private _hoverWidget?: SelectionWidget
     private _pickUi: boolean
 
     get hoverEnabled() {
@@ -27,7 +28,10 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
     }
 
     @serialize()
-        autoFocus = false
+        autoFocus
+
+    // @serialize()  // todo
+    autoFocusHover = false
 
     public setDirty() {
         this._viewer?.setDirty()
@@ -36,6 +40,11 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
         super()
         if (selection) {
             this._widget = new selection()
+            this._hoverWidget = new selection()
+            if (this._hoverWidget.lineMaterial) {
+                this._hoverWidget.lineMaterial.linewidth! /= 2
+                this._hoverWidget.lineMaterial.color!.set('#aa2222')
+            }
         }
         this._pickUi = pickUi
         this.autoFocus = autoFocus
@@ -75,9 +84,10 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
             return ret
         })
         if (this._widget) viewer.scene.addObject(this._widget, {addToRoot: true})
+        if (this._hoverWidget) viewer.scene.addObject(this._hoverWidget, {addToRoot: true})
 
         this._picker.addEventListener('selectedObjectChanged', this._selectedObjectChanged)
-        this._picker.addEventListener('hoverObjectChanged', this.dispatchEvent)
+        this._picker.addEventListener('hoverObjectChanged', this._hoverObjectChanged)
         this._picker.addEventListener('hitObject', this._onObjectHit)
 
         // on material drop on selected object
@@ -116,10 +126,11 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
         viewer.scene.removeEventListener('mainCameraChange', this._mainCameraChange)
 
         this._widget?.removeFromParent()
+        this._hoverWidget?.removeFromParent()
 
         if (this._picker) {
             this._picker.removeEventListener('selectedObjectChanged', this._selectedObjectChanged)
-            this._picker.removeEventListener('hoverObjectChanged', this.dispatchEvent)
+            this._picker.removeEventListener('hoverObjectChanged', this._hoverObjectChanged)
             this._picker.removeEventListener('hitObject', this._onObjectHit)
             this._picker.dispose()
             this._picker = undefined
@@ -130,6 +141,7 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
     dispose() {
         super.dispose()
         this._widget?.dispose()
+        this._hoverWidget?.dispose()
     }
 
     private _mainCameraChange = ()=>{
@@ -180,6 +192,28 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
         }
 
 
+    }
+
+    private _hoverObjectChanged = (e: any) => {
+        this.dispatchEvent(e)
+        const selected = this._picker?.hoverObject || undefined
+
+        const widget = this._hoverWidget
+        if (widget && this._enableWidget) {
+            if (selected) widget.attach(selected)
+            else widget.detach()
+        }
+
+        // if (selected) selected.dispatchEvent({type: 'selected', source: PickingPlugin.PluginType, object: selected})
+
+        this._viewer?.setDirty()
+
+        if (this.autoFocusHover) {
+            // this._viewer?.resetCamera({rootObject: selected, centerOffset: new Vector3(4, 4, 4)})
+            this.focusObject(selected)
+        }
+
+
     }
 
     private _onObjectHit = (e: any)=>{
@@ -216,9 +250,10 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
             label: 'Hover Enabled',
             type: 'checkbox',
             property: [this, 'hoverEnabled'],
+            onChange: ()=>this.uiConfig.uiRefresh?.(true), // for autoFocusHover
         },
         {
-            label: 'AutoFocus',
+            label: 'Auto Focus',
             type: 'checkbox',
             property: [this, 'autoFocus'],
             onChange: ()=>{
@@ -226,6 +261,12 @@ export class PickingPlugin extends AViewerPluginSync<'selectedObjectChanged'|'ho
                 if (this.autoFocus && o) this.setSelectedObject(o, true)
             },
         },
+        {
+            label: 'Auto Focus on Hover',
+            type: 'checkbox',
+            hidden: ()=>!this.hoverEnabled,
+            property: [this, 'autoFocusHover'],
+        },
     ]
 
     uiConfig: UiObjectConfig = {

src/three/utils/ObjectPicker.ts

@@ -88,7 +88,7 @@ export class ObjectPicker extends EventDispatcher<Event, 'hoverObjectChanged'|'s
         this.dispatchEvent({type: 'selectedObjectChanged', object: this.selectedObject})
     }
 
-    get hoverObject() {
+    get hoverObject(): IObject3D | null {
         return this._hovering.length > 0 ? this._hovering[0] : null
     }
 

src/three/utils/SelectionWidget.ts

@@ -1,10 +1,9 @@
 import {Group, Sphere, Vector2} from 'three'
 import {AnyOptions} from 'ts-browser-helpers'
 import {Box3B} from '../math/Box3B'
-import {IObject3D, IWidget} from '../../core'
+import {IMaterial, IObject3D, IWidget, LineMaterial2} from '../../core'
 import {LineSegments2} from 'three/examples/jsm/lines/LineSegments2.js'
 import {LineSegmentsGeometry} from 'three/examples/jsm/lines/LineSegmentsGeometry.js'
-import {LineMaterial2} from '../../core/material/LineMaterial2'
 
 export class SelectionWidget extends Group implements IWidget {
     isWidget = true as const
@@ -13,6 +12,8 @@ export class SelectionWidget extends Group implements IWidget {
     boundingScaleMultiplier = 1.
     setDirty?: (options?: AnyOptions) => void
 
+    lineMaterial?: IMaterial
+
     protected _updater() {
         const selected: IObject3D | null | undefined = this._object
         if (selected) {
@@ -54,6 +55,7 @@ export class SelectionWidget extends Group implements IWidget {
         if (!object) return this
         this._object = object
         this._object.addEventListener('objectUpdate', this._updater)
+        this._object.addEventListener('geometryUpdate', this._updater)
         this._updater()
         return this
     }
@@ -61,6 +63,7 @@ export class SelectionWidget extends Group implements IWidget {
     detach(): this {
         if (!this._object) return this
         this._object?.removeEventListener('objectUpdate', this._updater)
+        this._object?.removeEventListener('geometryUpdate', this._updater)
         this._object = null
         this._updater()
         return this
@@ -86,6 +89,7 @@ export class BoxSelectionWidget extends SelectionWidget {
             dashed: false,
             toneMapped: false,
         })
+        this.lineMaterial = matLine
 
         const ls = new LineSegmentsGeometry()
         ls.setPositions([1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1].map(v=>v - 0.5))