Fix #1372 compatibility between gallery, plan & map

docs/plugins/map.md

@@ -409,6 +409,10 @@ Switches between closed and opened mode.
 
 Switches between maximized and minimized views. (Has no effect if the map is closed).
 
+#### `setZoom(level)`
+
+Changes the current zoom level (between `minZoom` and `maxZoom`).
+
 ## Events
 
 #### `select-hotspot(hotspotId)`
@@ -420,3 +424,7 @@ mapPlugin.addEventListener('select-hotspot', ({ hotspotId }) => {
     console.log(`Clicked on hotspot ${hotspotId}`);
 });
 ```
+
+#### `view-changed(view)`
+
+Triggered when the map is maximized (`view=maximized`), minimized or opened (`view=normal`) or closed (`view=closed`).

docs/plugins/plan.md

@@ -395,6 +395,10 @@ Switches between maximized and minimized views. (Has no effect if the map is clo
 
 Returns the Leaflet instance.
 
+#### `setZoom(level)`
+
+Changes the current zoom level.
+
 ## Events
 
 #### `select-hotspot(hotspotId)`
@@ -406,3 +410,7 @@ planPlugin.addEventListener('select-hotspot', ({ hotspotId }) => {
     console.log(`Clicked on hotspot ${hotspotId}`);
 });
 ```
+
+#### `view-changed(view)`
+
+Triggered when the map is maximized (`view=maximized`), minimized or opened (`view=normal`) or closed (`view=closed`).

examples/plugin-map.html

@@ -119,6 +119,16 @@
                 console.log(`Click hotspot ${hotspotId}`);
             });
 
+            map.addEventListener('view-changed', ({ view }) => {
+                console.log(`View size: ${view}`);
+
+                if (view === 'maximized') {
+                    map.setZoom(100);
+                } else if (view === 'normal') {
+                    map.setZoom(40);
+                }
+            });
+
             function changeMap() {
                 viewer.textureLoader.loadImage(baseUrl + 'map.jpg').then((image) => {
                     const canvas = document.createElement('canvas');

examples/plugin-plan.html

@@ -135,6 +135,16 @@
                 console.log(`Click hotspot ${hotspotId}`);
             });
 
+            plan.addEventListener('view-changed', ({ view }) => {
+                console.log(`View size: ${view}`);
+
+                if (view === 'maximized') {
+                    plan.setZoom(16);
+                } else if (view === 'normal') {
+                    plan.setZoom(14);
+                }
+            });
+
             window.viewer = viewer;
         </script>
     </body>

packages/compass-plugin/src/style.scss

@@ -9,7 +9,7 @@ $psv-compass-margin: 10px !default;
 .psv-compass {
     position: absolute;
     margin: $psv-compass-margin;
-    z-index: $psv-compass-zindex;
+    z-index: $psv-ui-zindex;
     cursor: default;
 
     @at-root .psv--has-navbar & {

packages/gallery-plugin/src/GalleryComponent.ts

@@ -18,6 +18,10 @@ export class GalleryComponent extends AbstractComponent {
     private readonly observer: IntersectionObserver;
     private readonly items: HTMLElement;
 
+    get isAboveBreakpoint() {
+        return window.innerWidth > this.state.breakpoint;
+    }
+
     constructor(
         private readonly plugin: GalleryPlugin,
         viewer: Viewer
@@ -80,11 +84,9 @@ export class GalleryComponent extends AbstractComponent {
      * @internal
      */
     handleEvent(e: Event) {
-        const isAboveBreakpoint = window.innerWidth > this.state.breakpoint;
-
         switch (e.type) {
             case 'wheel': {
-                if (isAboveBreakpoint) {
+                if (this.isAboveBreakpoint) {
                     const evt = e as WheelEvent;
                     const scrollAmount = this.plugin.config.thumbnailSize.width + (this.state.itemMargin ?? 0);
                     this.items.scrollLeft += (evt.deltaY / Math.abs(evt.deltaY)) * scrollAmount;
@@ -95,7 +97,7 @@ export class GalleryComponent extends AbstractComponent {
 
             case 'mousedown':
                 this.state.mousedown = true;
-                if (isAboveBreakpoint) {
+                if (this.isAboveBreakpoint) {
                     this.state.initMouse = (e as MouseEvent).clientX;
                 } else {
                     this.state.initMouse = (e as MouseEvent).clientY;
@@ -105,7 +107,7 @@ export class GalleryComponent extends AbstractComponent {
 
             case 'mousemove':
                 if (this.state.mousedown) {
-                    if (isAboveBreakpoint) {
+                    if (this.isAboveBreakpoint) {
                         const delta = this.state.mouse - (e as MouseEvent).clientX;
                         this.items.scrollLeft += delta;
                         this.state.mouse = (e as MouseEvent).clientX;
@@ -125,7 +127,7 @@ export class GalleryComponent extends AbstractComponent {
 
             case 'click': {
                 // prevent click on drag
-                const currentMouse = isAboveBreakpoint ? (e as MouseEvent).clientX : (e as MouseEvent).clientY;
+                const currentMouse = this.isAboveBreakpoint ? (e as MouseEvent).clientX : (e as MouseEvent).clientY;
                 if (Math.abs(this.state.initMouse - currentMouse) < 10) {
                     const item = utils.getClosest(e.target as HTMLElement, `[data-${GALLERY_ITEM_DATA_KEY}]`);
                     if (item) {

packages/gallery-plugin/src/GalleryPlugin.ts

@@ -1,5 +1,7 @@
 import type { Viewer } from '@photo-sphere-viewer/core';
 import { AbstractConfigurablePlugin, events, PSVError, utils } from '@photo-sphere-viewer/core';
+import type { MapPlugin } from '@photo-sphere-viewer/map-plugin';
+import type { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';
 import { GalleryPluginEvents, HideGalleryEvent, ShowGalleryEvent } from './events';
 import { GalleryButton } from './GalleryButton';
 import { GalleryComponent } from './GalleryComponent';
@@ -35,6 +37,9 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
     private handler?: (id: GalleryItem['id']) => void;
     private currentId?: GalleryItem['id'];
 
+    private map?: MapPlugin;
+    private plan?: PlanPlugin;
+
     constructor(viewer: Viewer, config: GalleryPluginConfig) {
         super(viewer, config);
 
@@ -49,6 +54,9 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
 
         utils.checkStylesheet(this.viewer.container, 'gallery-plugin');
 
+        this.map = this.viewer.getPlugin('map');
+        this.plan = this.viewer.getPlugin('plan');
+
         this.viewer.addEventListener(events.PanoramaLoadedEvent.type, this);
         this.viewer.addEventListener(events.ShowPanelEvent.type, this);
 
@@ -102,7 +110,10 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
      * Shows the gallery
      */
     show() {
-        this.dispatchEvent(new ShowGalleryEvent());
+        this.map?.minimize();
+        this.plan?.minimize();
+
+        this.dispatchEvent(new ShowGalleryEvent(!this.gallery.isAboveBreakpoint));
         return this.gallery.show();
     }
 
@@ -125,6 +136,10 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
         }
     }
 
+    isVisible() {
+        return this.gallery.isVisible();
+    }
+
     /**
      * Sets the list of items
      * @param items

packages/gallery-plugin/src/events.ts

@@ -9,7 +9,7 @@ export class ShowGalleryEvent extends TypedEvent<GalleryPlugin> {
     override type: 'show-gallery';
 
     /** @internal */
-    constructor() {
+    constructor(public readonly fullscreen: boolean) {
         super(ShowGalleryEvent.type);
     }
 }
@@ -23,7 +23,7 @@ export class HideGalleryEvent extends TypedEvent<GalleryPlugin> {
 
     /** @internal */
     constructor() {
-        super(ShowGalleryEvent.type);
+        super(HideGalleryEvent.type);
     }
 }
 

packages/gallery-plugin/src/style.scss

@@ -27,7 +27,7 @@ $psv-gallery-breakpoint: 500px !default;
     overflow: hidden;
     transition: transform ease-in-out 0.1s;
     transform: translateY(100%);
-    z-index: $psv-navbar-zindex;
+    z-index: $psv-ui-zindex;
     cursor: default;
 
     @at-root .psv--has-navbar & {

packages/map-plugin/src/MapPlugin.ts

@@ -93,6 +93,8 @@ export class MapPlugin extends AbstractConfigurablePlugin<
 
         utils.checkStylesheet(this.viewer.container, 'map-plugin');
 
+        this.component.init();
+
         this.markers = this.viewer.getPlugin('markers');
 
         this.viewer.addEventListener(events.PositionUpdatedEvent.type, this);

packages/map-plugin/src/components/MapComponent.ts

@@ -1,6 +1,7 @@
 import type { Point, Tooltip, Viewer } from '@photo-sphere-viewer/core';
 import { AbstractComponent, CONSTANTS, events, SYSTEM, utils } from '@photo-sphere-viewer/core';
 import type { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
+import type { GalleryPlugin, events as GalleryEvents } from '@photo-sphere-viewer/gallery-plugin';
 import { MathUtils } from 'three';
 import { HOTSPOT_MARKER_ID, MAP_SHADOW_BLUR, PIN_SHADOW_BLUR, PIN_SHADOW_OFFSET } from '../constants';
 import { SelectHotspot, ViewChanged } from '../events';
@@ -29,6 +30,7 @@ export class MapComponent extends AbstractComponent {
         visible: false,
         maximized: false,
         collapsed: false,
+        galleryWasVisible: false,
 
         imgScale: 1,
         zoom: this.config.defaultZoom,
@@ -52,6 +54,8 @@ export class MapComponent extends AbstractComponent {
         images: {} as Record<string, { loading: boolean; value: ImageSource }>,
     };
 
+    private gallery?: GalleryPlugin;
+
     private readonly canvas: HTMLCanvasElement;
     private readonly overlay: HTMLElement;
     private readonly resetButton: MapResetButton;
@@ -141,6 +145,13 @@ export class MapComponent extends AbstractComponent {
         }
     }
 
+    init() {
+        this.gallery = this.viewer.getPlugin('gallery');
+
+        this.gallery?.addEventListener('show-gallery', this);
+        this.gallery?.addEventListener('hide-gallery', this);
+    }
+
     override destroy(): void {
         this.canvas.width = 0;
         this.canvas.height = 0;
@@ -151,6 +162,9 @@ export class MapComponent extends AbstractComponent {
         window.removeEventListener('mouseup', this);
         this.viewer.removeEventListener(events.KeypressEvent.type, this);
 
+        this.gallery?.removeEventListener('show-gallery', this);
+        this.gallery?.removeEventListener('hide-gallery', this);
+
         cancelAnimationFrame(this.state.renderLoop);
 
         super.destroy();
@@ -258,6 +272,14 @@ export class MapComponent extends AbstractComponent {
                 this.state.forceRender = false;
                 this.update();
                 break;
+            case 'hide-gallery':
+                this.__onToggleGallery(false);
+                break;
+            case 'show-gallery':
+                if (!(e as GalleryEvents.ShowGalleryEvent).fullscreen) {
+                    this.__onToggleGallery(true);
+                }
+                break;
         }
     }
 
@@ -381,10 +403,18 @@ export class MapComponent extends AbstractComponent {
         utils.toggleClass(this.container, 'psv-map--maximized', this.state.maximized);
 
         if (this.state.maximized) {
+            this.state.galleryWasVisible = this.gallery?.isVisible();
+            this.gallery?.hide();
+
             this.overlay.style.display = 'none';
             this.plugin.dispatchEvent(new ViewChanged('maximized'));
-        } else if (dispatchMinimizeEvent) {
-            this.plugin.dispatchEvent(new ViewChanged('normal'));
+        } else {
+            if (this.state.galleryWasVisible) {
+                this.gallery.show();
+            }
+            if (dispatchMinimizeEvent) {
+                this.plugin.dispatchEvent(new ViewChanged('normal'));
+            }
         }
 
         this.maximizeButton?.update();
@@ -787,4 +817,12 @@ export class MapComponent extends AbstractComponent {
     private __setCursor(cursor: string) {
         this.canvas.style.cursor = cursor;
     }
+
+    private __onToggleGallery(visible: boolean) {
+        if (!visible) {
+            this.container.style.marginBottom = '';
+        } else {
+            this.container.style.marginBottom = (this.viewer.container.querySelector<HTMLElement>('.psv-gallery').offsetHeight + 10) + 'px';
+        }
+    }
 }

packages/map-plugin/src/style.scss

@@ -22,13 +22,9 @@ $psv-map-transition: ease-in-out 0.3s !default;
 .psv-map {
     position: absolute;
     margin: $psv-map-margin;
-    z-index: $psv-compass-zindex;
+    z-index: $psv-ui-zindex - 1; // under gallery
     transition: all $psv-map-transition;
 
-    @at-root .psv--has-navbar & {
-        margin-bottom: calc(#{$psv-navbar-height} + #{$psv-map-margin});
-    }
-
     &__container {
         position: absolute;
         top: 0;
@@ -135,13 +131,12 @@ $psv-map-transition: ease-in-out 0.3s !default;
     }
 
     &--maximized {
-        margin: 0;
+        margin: 0 !important;
         width: 100% !important;
         height: 100% !important;
 
         @at-root .psv--has-navbar & {
             height: calc(100% - #{$psv-navbar-height}) !important;
-            margin-bottom: $psv-navbar-height;
         }
     }
 
@@ -201,10 +196,18 @@ $psv-map-transition: ease-in-out 0.3s !default;
     &--bottom-left {
         bottom: 0;
         left: 0;
+
+        @at-root .psv--has-navbar & {
+            bottom: #{$psv-navbar-height};
+        }
     }
 
     &--bottom-right {
         bottom: 0;
         right: 0;
+
+        @at-root .psv--has-navbar & {
+            bottom: #{$psv-navbar-height};
+        }
     }
 }

packages/plan-plugin/src/PlanPlugin.ts

@@ -87,6 +87,8 @@ export class PlanPlugin extends AbstractConfigurablePlugin<
 
         utils.checkStylesheet(this.viewer.container, 'plan-plugin');
 
+        this.component.init();
+
         this.markers = this.viewer.getPlugin('markers');
 
         this.viewer.addEventListener(events.PositionUpdatedEvent.type, this);
@@ -164,6 +166,13 @@ export class PlanPlugin extends AbstractConfigurablePlugin<
         this.component.show();
     }
 
+    /**
+     * Changes the current zoom level
+     */
+    setZoom(level: number) {
+        this.component.zoom(level);
+    }
+
     /**
      * Closes the map
      */