plan: improvements

docs/plugins/map.md

@@ -119,9 +119,9 @@ URL of the image to use as map.
 #### `center` (required)
 
 -   type: `{ x: number, y: number }`
--   updatable: no, use `setCenter()` method
+-   updatable: yes
 
-The position of the panorama on the map, in pixels.
+The position of the panorama on the map, in pixels. You can also use `setCenter()` method.
 
 #### `rotation`
 
@@ -199,9 +199,9 @@ Size of the cone of the compass.
 
 -   type: `MapHotspot[]`
 -   default: `null`
--   updatable: no, use `setHotspots()` method
+-   updatable: yes
 
-Small dots visible on the map. See bellow.
+Small dots visible on the map. See bellow. You can also use `setHotspots()` method.
 
 #### `spotStyle`
 

docs/plugins/plan.md

@@ -25,6 +25,10 @@ const viewer = new PhotoSphereViewer.Viewer({
 });
 ```
 
+::: warning
+Do not forget to import Leaflet JS and CSS files.
+:::
+
 ## Example
 
 ::: code-demo
@@ -118,9 +122,9 @@ const viewer = new Viewer({
 #### `coordinates` (required)
 
 -   type: `[number, number]`
--   updatable: no, use `setCoordinates()` method
+-   updatable: yes
 
-GPS position of the panorama (longitude, latitude).
+GPS position of the panorama (longitude, latitude). You can also use `setCoordinates()` method.
 
 #### `layers`
 
@@ -185,30 +189,30 @@ Position of the widget, accepted positions are combinations of `top`, `bottom` a
 
 -   type: `string`
 -   default: default SVG
--   updatable: no
+-   updatable: yes
 
 SVG or image URL used for the central pin.
 
 #### `pinSize`
 
 -   type: `number`
 -   default: `35`
--   updatable: no
+-   updatable: yes
 
 Size of the central pin.
 
 #### `hotspots`
 
 -   type: `PlanHotspot[]`
 -   default: `null`
--   updatable: no, use `setHotspots()` method
+-   updatable: yes
 
-Markers visible on the map. See bellow.
+Markers visible on the map. See bellow. You can also use `setHotspots()` method.
 
 #### `spotStyle`
 
 -   type: `object`
--   updatable: no
+-   updatable: yes
 
 Style of hotspots.
 

examples/plugin-map.html

@@ -46,6 +46,7 @@
                         rotation: '135deg',
                         defaultZoom: 40,
                         // position: 'top left',
+                        // size: '300px',
                         // maxZoom: 300,
                         // overlayImage: null,
                         // static: true,

examples/plugin-plan.html

@@ -44,6 +44,10 @@
                     [PlanPlugin, {
                         // position: 'top left',
                         // visibleOnLoad: false,
+                        // size: {
+                        //     width: '300px',
+                        //     height: '300px',
+                        // },
                         defaultZoom: 14,
                         coordinates: [6.78677, 44.58241],
 
@@ -84,6 +88,11 @@
                             // image: baseUrl + 'pictos/pin-blue.png',
                             // hoverImage: baseUrl + 'pictos/pin-red.png',
                         },
+                        buttons: {
+                            // maximize: false,
+                            // close: false,
+                            // reset: false,
+                        },
 
                         hotspots: [
                             {

packages/map-plugin/src/MapPlugin.ts

@@ -71,10 +71,8 @@ export class MapPlugin extends AbstractConfigurablePlugin<
     static override readonly configParser = getConfig;
     static override readonly readonlyOptions: Array<keyof MapPluginConfig> = [
         'imageUrl',
-        'center',
         'visibleOnLoad',
         'defaultZoom',
-        'hotspots',
         'buttons',
     ];
 
@@ -150,6 +148,14 @@ export class MapPlugin extends AbstractConfigurablePlugin<
 
     override setOptions(options: Partial<UpdatableMapPluginConfig>) {
         super.setOptions(options);
+
+        if (options.center) {
+            this.component.recenter();
+        }
+        if (options.hotspots !== undefined) {
+            this.setHotspots(options.hotspots);
+        }
+
         this.component.applyConfig();
     }
 

packages/map-plugin/src/model.ts

@@ -174,9 +174,7 @@ export type ParsedMapPluginConfig = Omit<MapPluginConfig, 'position' | 'rotation
 export type UpdatableMapPluginConfig = Omit<
     MapPluginConfig,
     | 'imageUrl'
-    | 'center' 
     | 'visibleOnLoad' 
     | 'defaultZoom' 
-    | 'hotspots'
     | 'buttons'
 >;

packages/plan-plugin/src/PlanPlugin.ts

@@ -61,15 +61,10 @@ export class PlanPlugin extends AbstractConfigurablePlugin<
     static override readonly VERSION = PKG_VERSION;
     static override readonly configParser = getConfig;
     static override readonly readonlyOptions: Array<keyof PlanPluginConfig> = [
-        'coordinates',
         'visibleOnLoad',
-        'pinImage',
-        'pinSize',
-        'spotStyle',
         'defaultZoom',
         'layers',
         'configureLeaflet',
-        'hotspots',
         'buttons',
     ];
 
@@ -128,6 +123,20 @@ export class PlanPlugin extends AbstractConfigurablePlugin<
 
     override setOptions(options: Partial<PlanPluginConfig>) {
         super.setOptions(options);
+
+        if (options.coordinates) {
+            this.component.recenter();
+        }
+        if (options.pinImage || options.pinSize) {
+            this.component.updatePin();
+        }
+        if (options.spotStyle) {
+            this.component.updateSpots();
+        }
+        if (options.hotspots !== undefined) {
+            this.setHotspots(options.hotspots);
+        }
+
         this.component.applyConfig();
     }
 

packages/plan-plugin/src/components/PlanComponent.ts

@@ -183,6 +183,25 @@ export class PlanComponent extends AbstractComponent {
         this.state.needsUpdate = true;
     }
 
+    /**
+     * Force re-creation of the central pin
+     */
+    updatePin() {
+        if (this.state.pinMarker) {
+            this.state.pinMarker.remove();
+            this.state.pinMarker = null;
+        }
+        this.recenter();
+    }
+
+    /**
+     * Force re-creation of hotspots
+     */
+    updateSpots() {
+        this.setHotspots(Object.values(this.state.hotspots).filter(({ isMarker }) => !isMarker).map(({ hotspot }) => hotspot));
+        this.setMarkers(Object.values(this.state.hotspots).filter(({ isMarker }) => isMarker).map(({ hotspot }) => hotspot));
+    }
+
     override isVisible(): boolean {
         return this.state.visible && !this.state.collapsed;
     }

packages/plan-plugin/src/model.ts

@@ -153,14 +153,9 @@ export type ParsedPlanPluginConfig = Omit<PlanPluginConfig, 'position'> & {
 
 export type UpdatablePlanPluginConfig = Omit<
     PlanPluginConfig,
-    | 'coordinates'
     | 'visibleOnLoad'
-    | 'pinImage'
-    | 'pinSize'
-    | 'spotStyle'
     | 'defaultZoom'
     | 'layers'
     | 'configureLeaflet'
-    | 'hotspots'
     | 'buttons'
 >;

packages/plan-plugin/src/style.scss

@@ -22,9 +22,12 @@ $psv-plan-transition: ease-in-out 0.3s !default;
     border-radius: $psv-plan-radius;
     transition: all $psv-plan-transition;
     box-shadow: $psv-plan-shadow;
+    max-width: calc(100% - #{$psv-plan-margin * 2});
+    max-height: calc(100% - #{$psv-plan-margin * 2});
 
     @at-root .psv--has-navbar & {
         margin-bottom: calc(#{$psv-navbar-height} + #{$psv-plan-margin});
+        max-height: calc(100% - #{$psv-plan-margin * 2} - #{$psv-navbar-height});
     }
 
     &__container {
@@ -86,6 +89,21 @@ $psv-plan-transition: ease-in-out 0.3s !default;
         @at-root .psv--has-navbar & {
             height: calc(100% - #{$psv-navbar-height} - #{$psv-plan-margin * 2}) !important;
         }
+
+        @media screen and (width < 500px) {
+            margin: 0;
+            width: 100% !important;
+            height: 100% !important;
+            max-width: none;
+            max-height: none;
+            border-radius: 0;
+
+            @at-root .psv--has-navbar & {
+                margin-bottom: $psv-navbar-height;
+                height: calc(100% - #{$psv-navbar-height}) !important;
+                max-height: calc(100% - #{$psv-navbar-height});
+            }
+        }
     }
 
     &--collapsed {