feat(spatial): change line threshold in different states

mapillary · Jan 13, 2021 · de33a03 · de33a03
1 parent 36669be
commit de33a03
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/component/spatialdata/SpatialDataComponent.ts b/src/component/spatialdata/SpatialDataComponent.ts
@@ -171,13 +171,22 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                 publishReplay(1),
                 refCount());
 
+        const earth$ = this._navigator.stateService.state$.pipe(
+            map(
+                (state: State): boolean => {
+                    return state === State.Earth;
+                }),
+            distinctUntilChanged(),
+            publishReplay(1),
+            refCount());
+
+        earth$.subscribe(
+            (earth: boolean): void => {
+                this._scene.setLargeIntersectionThreshold(earth);
+            });
+
         const hashes$: Observable<string[]> = observableCombineLatest(
-            this._navigator.stateService.state$.pipe(
-                map(
-                    (state: State): boolean => {
-                        return state === State.Earth;
-                    }),
-                distinctUntilChanged()),
+            earth$,
             hash$,
             sequencePlay$,
             direction$).pipe(
@@ -403,10 +412,11 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
 
         this._setHoveredSubscription = observableCombineLatest(
             this._navigator.playService.playing$,
-            mouseHover$).pipe(
+            mouseHover$,
+            earth$).pipe(
                 switchMap(
                     ([playing, mouseHover]:
-                        [boolean, IntersectEvent])
+                        [boolean, IntersectEvent, boolean])
                         : Observable<[IntersectEvent, RenderCamera, ISpatialDataConfiguration]> => {
                         return !playing && mouseHover.type === "mouseenter" ?
                             observableCombineLatest(

diff --git a/src/component/spatialdata/SpatialDataScene.ts b/src/component/spatialdata/SpatialDataScene.ts
@@ -571,6 +571,9 @@ export class SpatialDataScene {
     private readonly _originalPointSize: number;
     private readonly _originalCameraSize: number;
 
+    private readonly _lineThreshold: number;
+    private readonly _largeLineThreshold: number;
+
     private _hoveredKey: string;
     private _selectedKey: string;
 
@@ -579,6 +582,9 @@ export class SpatialDataScene {
         this._originalPointSize = 2;
         this._originalCameraSize = 2;
 
+        this._lineThreshold = 0.1;
+        this._largeLineThreshold = 0.4;
+
         this._scene = !!scene ? scene : new THREE.Scene();
         const near = this._getNear(configuration.cameraSize);
         const far = 3000;
@@ -589,7 +595,7 @@ export class SpatialDataScene {
                 undefined,
                 near,
                 far);
-        this._raycaster.params.Line.threshold = 0.1;
+        this._raycaster.params.Line.threshold = this._lineThreshold;
 
         this._cameraColors = {};
         this._needsRender = false;
@@ -859,6 +865,12 @@ export class SpatialDataScene {
         this._needsRender = true;
     }
 
+    public setLargeIntersectionThreshold(large: boolean): void {
+        this._raycaster.params.Line.threshold = large ?
+            this._largeLineThreshold :
+            this._lineThreshold;
+    }
+
     public setHoveredKey(key?: string): void {
         key = key != null ? key : null;
         if (key != null && !(key in this._keyToCellId)) {