From e5acb69421be7d9f87eafb8ab58b458bb10d4874 Mon Sep 17 00:00:00 2001
From: mistic100 <contact@git.strangeplanet.fr>
Date: Mon, 15 Jul 2024 13:25:40 +0200
Subject: [PATCH] Fix #1374 compatibility between gallery & virtual-tour

---
 .../virtual-tour-plugin/src/ArrowsRenderer.ts | 30 +++++++++++++++++--
 .../src/VirtualTourPlugin.ts                  |  2 ++
 packages/virtual-tour-plugin/src/style.scss   |  1 +
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/virtual-tour-plugin/src/ArrowsRenderer.ts b/packages/virtual-tour-plugin/src/ArrowsRenderer.ts
index 02f7ff56e..0627cebeb 100644
--- a/packages/virtual-tour-plugin/src/ArrowsRenderer.ts
+++ b/packages/virtual-tour-plugin/src/ArrowsRenderer.ts
@@ -1,4 +1,5 @@
 import { AbstractComponent, events, Position, utils, type Viewer } from '@photo-sphere-viewer/core';
+import type { GalleryPlugin, events as GalleryEvents } from '@photo-sphere-viewer/gallery-plugin';
 import { MathUtils, PerspectiveCamera, Scene } from 'three';
 import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
@@ -23,6 +24,8 @@ export class ArrowsRenderer extends AbstractComponent {
     private scene: Scene;
     private camera: PerspectiveCamera;
 
+    private gallery?: GalleryPlugin;
+
     get is3D() {
         return this.plugin.is3D;
     }
@@ -60,6 +63,13 @@ export class ArrowsRenderer extends AbstractComponent {
         this.container.addEventListener('mousemove', this, true);
     }
 
+    init() {
+        this.gallery = this.viewer.getPlugin('gallery');
+
+        this.gallery?.addEventListener('show-gallery', this);
+        this.gallery?.addEventListener('hide-gallery', this);
+    }
+
     override destroy(): void {
         this.viewer.removeEventListener(events.ReadyEvent.type, this);
         this.viewer.removeEventListener(events.PositionUpdatedEvent.type, this);
@@ -67,6 +77,9 @@ export class ArrowsRenderer extends AbstractComponent {
         this.viewer.removeEventListener(events.RenderEvent.type, this);
         this.viewer.removeEventListener(events.ClickEvent.type, this);
 
+        this.gallery?.removeEventListener('show-gallery', this);
+        this.gallery?.removeEventListener('hide-gallery', this);
+
         super.destroy();
     }
 
@@ -94,7 +107,6 @@ export class ArrowsRenderer extends AbstractComponent {
                 }
                 break;
             }
-                break;
             case 'mouseleave': {
                 const link = this.getTargetLink(e.target as HTMLElement);
                 if (link) {
@@ -102,7 +114,6 @@ export class ArrowsRenderer extends AbstractComponent {
                 }
                 break;
             }
-                break;
             case 'mousemove': {
                 const link = this.getTargetLink(e.target as HTMLElement, true);
                 if (link) {
@@ -110,6 +121,13 @@ export class ArrowsRenderer extends AbstractComponent {
                 }
                 break;
             }
+            case 'hide-gallery':
+                this.__onToggleGallery(false);
+                break;
+            case 'show-gallery':
+                if (!(e as GalleryEvents.ShowGalleryEvent).fullscreen) {
+                    this.__onToggleGallery(true);
+                }
                 break;
         }
     }
@@ -247,4 +265,12 @@ export class ArrowsRenderer extends AbstractComponent {
         return target2 ? (target2 as any)[LINK_DATA] : undefined;
     }
 
+    private __onToggleGallery(visible: boolean) {
+        if (!visible) {
+            this.container.style.marginBottom = '';
+        } else {
+            this.container.style.marginBottom = (this.viewer.container.querySelector<HTMLElement>('.psv-gallery').offsetHeight) + 'px';
+        }
+    }
+
 }
diff --git a/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts b/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts
index edf0f4bf2..9d9a5f0ee 100644
--- a/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts
+++ b/packages/virtual-tour-plugin/src/VirtualTourPlugin.ts
@@ -165,6 +165,8 @@ export class VirtualTourPlugin extends AbstractConfigurablePlugin<
     override init() {
         super.init();
 
+        this.arrowsRenderer.init();
+
         utils.checkStylesheet(this.viewer.container, 'virtual-tour-plugin');
 
         this.markers = this.viewer.getPlugin('markers');
diff --git a/packages/virtual-tour-plugin/src/style.scss b/packages/virtual-tour-plugin/src/style.scss
index 3436ca25d..aafed504b 100644
--- a/packages/virtual-tour-plugin/src/style.scss
+++ b/packages/virtual-tour-plugin/src/style.scss
@@ -58,6 +58,7 @@ $psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !defau
     left: 0;
     filter: $psv-virtual-tour-link-shadow;
     pointer-events: none;
+    transition: margin ease-in-out 0.3s;
 
     .psv-virtual-tour-link {
         transition: opacity linear .2s;