fix: Fixing 360 image bugs and connection to the new Architecture + U…

…pgrade to new version (#4832)

* Initial commit

* Update reveal.api.md

* Fixes

* Update Image360ApiHelper.ts

* Fixes

* Update Image360ApiHelper.ts

* Update package.json

* Revert

* Update package.json

* Update package.json

viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "WebGL based 3D viewer for CAD and point clouds processed in Cognite Data Fusion.",
   "homepage": "https://github.com/cognitedata/reveal/tree/master/viewer",
   "repository": {

viewer/packages/api/src/api-helpers/Image360ApiHelper.ts

@@ -80,7 +80,11 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
   private readonly _onBeforeSceneRenderedEvent: EventTrigger<BeforeSceneRenderedDelegate>;
   private _cachedCameraManager: CameraManager | undefined;
 
-  private readonly onKeyPressed = (event: KeyboardEvent) => this.exit360ImageOnEscape(event);
+  private readonly onKeyPressed = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.exit360ImageByTween();
+    }
+  };
   public readonly onHover = (event: MouseEvent): void => this.setHoverIconOnIntersect(event.offsetX, event.offsetY);
   public readonly onClick = (event: PointerEventData): Promise<boolean> => this.enter360ImageOnIntersect(event);
 
@@ -202,7 +206,7 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     ) {
       this.exit360Image();
     }
-
+    this._history.clear();
     await Promise.all(entities.map(entity => this._image360Facade.delete(entity as Image360Entity<DataSourceT>)));
     this._needsRedraw = true;
   }
@@ -215,8 +219,8 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
       this.exit360Image();
     }
 
+    this._history.clear();
     this._image360Facade.removeSet(collection as DefaultImage360Collection<DataSourceT>);
-
     this._needsRedraw = true;
   }
 
@@ -314,7 +318,9 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
       }
       this._transitionInProgress = false;
     }
-    this._domElement.addEventListener('keydown', this.onKeyPressed);
+    if (this._hasEventListeners) {
+      this._domElement.addEventListener('keydown', this.onKeyPressed);
+    }
     this.applyFullResolutionTextures(revisionToEnter);
 
     imageCollection.events.image360Entered.fire(image360Entity, revisionToEnter);
@@ -457,10 +463,10 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     }
   }
 
-  public exit360Image(): void {
+  public exit360Image(): boolean {
     this._image360Facade.allIconCullingScheme = 'clustered';
     if (this._interactionState.currentImage360Entered === undefined) {
-      return;
+      return false;
     }
     const imageCollection = this._image360Facade.getCollectionContainingEntity(
       this._interactionState.currentImage360Entered
@@ -485,7 +491,10 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
       this._activeCameraManager.setActiveCameraManager(this._cachedCameraManager);
       setCameraTarget1MeterInFrontOfCamera(this._activeCameraManager, position, rotation);
     }
-    this._domElement.removeEventListener('keydown', this.onKeyPressed);
+    if (this._hasEventListeners) {
+      this._domElement.removeEventListener('keydown', this.onKeyPressed);
+    }
+    return true;
 
     function setCameraTarget1MeterInFrontOfCamera(manager: CameraManager, position: Vector3, rotation: Quaternion) {
       manager.setCameraState({
@@ -495,7 +504,7 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     }
   }
 
-  public canDoAction(action: Image360Action): boolean {
+  public canDoImage360Action(action: Image360Action): boolean {
     const insideImage = this._interactionState.currentImage360Entered !== undefined;
     switch (action) {
       case Image360Action.Exit:
@@ -505,6 +514,7 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
         if (insideImage) {
           return false;
         }
+        break;
       default:
         if (!insideImage) {
           return false;
@@ -513,13 +523,13 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     return this._history.canDoAction(action);
   }
 
-  public async doAction(action: Image360Action): Promise<void> {
-    if (!this.canDoAction(action)) {
+  public async image360Action(action: Image360Action): Promise<void> {
+    if (!this.canDoImage360Action(action)) {
       return;
     }
     switch (action) {
       case Image360Action.Exit:
-        this.exit360Image();
+        await this.exit360ImageByTween();
         return;
       default:
         const image360 = this._history.doAction(action);
@@ -534,11 +544,11 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     this._onBeforeSceneRenderedEvent.unsubscribe(this.updateHoverStateOnRenderHandler);
     if (this._hasEventListeners) {
       this._domElement.removeEventListener('mousemove', this.onHover);
+      this._domElement.removeEventListener('keydown', this.onKeyPressed);
       if (this._inputHandler != undefined) {
         this._inputHandler.off('click', this.onClick);
       }
     }
-    this._domElement.removeEventListener('keydown', this.onKeyPressed);
 
     if (this._stationaryCameraManager && this._cachedCameraManager) {
       if (this._activeCameraManager.innerCameraManager === this._stationaryCameraManager) {
@@ -625,10 +635,7 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
     this._interactionState.currentImage360Hovered = entity;
   }
 
-  private async exit360ImageOnEscape(event: KeyboardEvent) {
-    if (event.key !== 'Escape') {
-      return;
-    }
+  private async exit360ImageByTween(): Promise<boolean> {
     const lastEntered = this._interactionState.currentImage360Entered;
     if (lastEntered !== undefined) {
       const transitionOutDuration = 600;
@@ -637,7 +644,7 @@ export class Image360ApiHelper<DataSourceT extends DataSourceType> {
       await this.tweenVisualizationAlpha(lastEntered, currentOpacity, 0, transitionOutDuration);
       lastEntered.image360Visualization.opacity = currentOpacity;
     }
-    this.exit360Image();
+    return this.exit360Image();
   }
 
   private getImageOpacity(): number {

viewer/packages/api/src/public/migration/Cognite3DViewer.ts

@@ -970,23 +970,23 @@ export class Cognite3DViewer<DataSourceT extends DataSourceType = ClassicDataSou
    * @param action The action to check if can be done.
    * @beta
    */
-  canDo360Action(action: Image360Action): boolean {
+  canDoImage360Action(action: Image360Action): boolean {
     if (this._cdfSdkClient === undefined || this._image360ApiHelper === undefined) {
       return false;
     }
-    return this._image360ApiHelper.canDoAction(action);
+    return this._image360ApiHelper.canDoImage360Action(action);
   }
 
   /**
    * Do a 360 image action.
    * @param action The action to do.
    * @beta
    */
-  async do360Action(action: Image360Action): Promise<void> {
+  async image360Action(action: Image360Action): Promise<void> {
     if (this._cdfSdkClient === undefined || this._image360ApiHelper === undefined) {
       throw new Error(`360 actions is only supported when connecting to Cognite Data Fusion`);
     }
-    await this._image360ApiHelper.doAction(action);
+    await this._image360ApiHelper.image360Action(action);
   }
 
   /**
@@ -1727,7 +1727,7 @@ export class Cognite3DViewer<DataSourceT extends DataSourceType = ClassicDataSou
   }
 
   /**
-   * Event function to to move the mouse.
+   * Event function to move the mouse.
    * @param event The event type.
    * @returns True if the event was handled, false otherwise.
    * @beta

viewer/reveal.api.md

@@ -444,14 +444,12 @@ export class Cognite3DViewer<DataSourceT extends DataSourceType = ClassicDataSou
     // (undocumented)
     get cameraManager(): CameraManager;
     // @beta
-    canDo360Action(action: Image360Action): boolean;
+    canDoImage360Action(action: Image360Action): boolean;
     get canvas(): HTMLCanvasElement;
     // @beta
     createCustomObjectIntersectInput(pixelCoords: THREE.Vector2): CustomObjectIntersectInput;
     determineModelType(modelId: number, revisionId: number): Promise<SupportedModelTypes | ''>;
     dispose(): void;
-    // @beta
-    do360Action(action: Image360Action): Promise<void>;
     get domElement(): HTMLElement;
     enter360Image(image360: Image360<DataSourceT>, revision?: Image360Revision<DataSourceT>): Promise<void>;
     exit360Image(): void;
@@ -480,6 +478,8 @@ export class Cognite3DViewer<DataSourceT extends DataSourceType = ClassicDataSou
     getViewState(): ViewerState;
     // @beta
     getVisualSceneBoundingBox(): THREE.Box3;
+    // @beta
+    image360Action(action: Image360Action): Promise<void>;
     loadCameraFromModel(model: CogniteModel<DataSourceT>): void;
     get models(): CogniteModel<DataSourceT>[];
     // (undocumented)