Fix #1374 compatibility between gallery & virtual-tour

mistic100 · Jul 15, 2024 · e5acb69 · e5acb69
1 parent 4ad08ef
commit e5acb69
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git 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,13 +63,23 @@ 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);
         this.viewer.removeEventListener(events.SizeUpdatedEvent.type, this);
         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,22 +107,27 @@ export class ArrowsRenderer extends AbstractComponent {
                 }
                 break;
             }
-                break;
             case 'mouseleave': {
                 const link = this.getTargetLink(e.target as HTMLElement);
                 if (link) {
                     this.plugin.__onLeaveArrow(link);
                 }
                 break;
             }
-                break;
             case 'mousemove': {
                 const link = this.getTargetLink(e.target as HTMLElement, true);
                 if (link) {
                     this.plugin.__onHoverArrow(e as MouseEvent);
                 }
                 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
@@ -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
@@ -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;