map: new option "shape", round or square

mistic100 · Jul 24, 2024 · 4744fd6 · 4744fd6
1 parent b4ae4a7
commit 4744fd6
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 46 deletions.
diff --git a/docs/plugins/map.md b/docs/plugins/map.md
@@ -128,7 +128,15 @@ The position of the panorama on the map, in pixels. You can also use `setCenter(
 -   default: `0`
 -   updatable: yes
 
-Rotation to apply to the map to make it match with the panorama.
+Rotation to apply to the map to make it match with the panorama, it can be declared in radians or in degrees (ex: `'45deg'`).
+
+#### `shape`
+
+-   type: `'round' | 'square'`
+-   default: `'round'`
+-   updatable: yes
+
+The shape of the widget.
 
 #### `size`
 
@@ -433,9 +441,12 @@ Triggered when the map is maximized (`view=maximized`), minimized or opened (`vi
 
 | variable | default | description |
 | -------- | ------- | ----------- |
+| $psv-map-radius | 8px | Corner radius of the widget (only if shape=square) |
+| $psv-map-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget |
 | $psv-map-background | rgba(61, 61, 61, .7) | Background color of the map |
-| $psv-map-button-size | 34px | Size of map buttons |
-| $psv-map-button-color | $psv-buttons-color | Color of map buttons |
+| $psv-map-button-size | 34px | Size of buttons |
+| $psv-map-button-background | rgba(0, 0, 0, .5) | Background color of buttons |
+| $psv-map-button-color | $psv-buttons-color | Color of buttons |
 | $psv-map-toolbar-font | 12px sans-serif | Font for the zoom indicator |
 | $psv-map-toolbar-text-color | white | Color of the zoom indicator |
 | $psv-map-toolbar-background | #222 | Background color of the zoom indicator |

diff --git a/docs/plugins/plan.md b/docs/plugins/plan.md
@@ -419,9 +419,9 @@ Triggered when the map is maximized (`view=maximized`), minimized or opened (`vi
 
 | variable | default | description |
 | -------- | ------- | ----------- |
-| $psv-plan-radius | 8px | Corner radius of the plan |
-| $psv-plan-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the plan |
-| $psv-plan-button-size | 34px | Size if plan buttons |
-| $psv-plan-button-background | rgba(0, 0, 0, .7) | Background color of buttons |
+| $psv-plan-radius | 8px | Corner radius of the widget |
+| $psv-plan-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the widget |
+| $psv-plan-button-size | 34px | Size of buttons |
+| $psv-plan-button-background | rgba(0, 0, 0, .5) | Background color of buttons |
 | $psv-plan-button-color | white | Icon color if buttons |
 | $psv-map-transition | ease-in-out .3s | Transition |
diff --git a/examples/plugin-map.html b/examples/plugin-map.html
@@ -46,6 +46,7 @@
                         rotation: '135deg',
                         defaultZoom: 40,
                         // position: 'top left',
+                        // shape: 'square',
                         // size: '300px',
                         // maxZoom: 300,
                         // overlayImage: null,

diff --git a/packages/core/src/styles/viewer.scss b/packages/core/src/styles/viewer.scss
@@ -1,8 +1,8 @@
 .psv-container {
     --psv-core-loaded: true;
+
     container-name: psv-container;
     container-type: size;
-
     width: 100%;
     height: 100%;
     margin: 0;

diff --git a/packages/map-plugin/src/MapPlugin.ts b/packages/map-plugin/src/MapPlugin.ts
@@ -4,7 +4,6 @@ import { Color } from 'three';
 import { MapComponent } from './components/MapComponent';
 import { HOTSPOT_GENERATED_ID, HOTSPOT_MARKER_ID, MARKER_DATA_KEY } from './constants';
 import { MapPluginEvents } from './events';
-import overlay from './overlay.svg';
 import pin from './icons/pin.svg';
 import { MapHotspot, MapPluginConfig, ParsedMapPluginConfig, UpdatableMapPluginConfig } from './model';
 
@@ -13,10 +12,11 @@ const getConfig = utils.getConfigParser<MapPluginConfig, ParsedMapPluginConfig>(
         imageUrl: null,
         center: null,
         rotation: 0,
+        shape: 'round',
         size: '200px',
         position: ['bottom', 'left'],
         visibleOnLoad: true,
-        overlayImage: overlay,
+        overlayImage: null,
         pinImage: pin,
         pinSize: 35,
         coneColor: '#1E78E6',

diff --git a/packages/map-plugin/src/components/MapComponent.ts b/packages/map-plugin/src/components/MapComponent.ts
@@ -24,6 +24,8 @@ import { MapCompassButton } from './MapCompassButton';
 import { MapMaximizeButton } from './MapMaximizeButton';
 import { MapResetButton } from './MapResetButton';
 import { MapZoomToolbar } from './MapZoomToolbar';
+import overlayRound from '../overlay-round.svg';
+import overlaySquare from '../overlay-square.svg';
 
 export class MapComponent extends AbstractComponent {
     protected override readonly state = {
@@ -288,14 +290,17 @@ export class MapComponent extends AbstractComponent {
             'psv-map--top-right',
             'psv-map--top-left',
             'psv-map--bottom-right',
-            'psv-map--bottom-left'
+            'psv-map--bottom-left',
+            'psv-map--round',
+            'psv-map--square',
         );
         this.container.classList.add(`psv-map--${this.config.position.join('-')}`);
+        this.container.classList.add(`psv-map--${this.config.shape}`);
 
         this.container.style.width = this.config.size;
         this.container.style.height = this.config.size;
 
-        this.overlay.innerHTML = getImageHtml(this.config.overlayImage);
+        this.overlay.innerHTML = getImageHtml(this.config.overlayImage ?? (this.config.shape === 'square' ? overlaySquare : overlayRound));
 
         this.resetButton?.applyConfig();
         this.closeButton?.applyConfig();
@@ -477,7 +482,9 @@ export class MapComponent extends AbstractComponent {
 
         // update UI
         if (!this.config.static) {
-            this.overlay.style.transform = `rotate(${-yawAndRotation}rad)`;
+            if (this.config.shape === 'round') {
+                this.overlay.style.transform = `rotate(${-yawAndRotation}rad)`;
+            }
             this.compassButton?.rotate(yawAndRotation);
         }
         this.zoomToolbar.setText(this.state.zoom);

diff --git a/packages/map-plugin/src/model.ts b/packages/map-plugin/src/model.ts
@@ -71,6 +71,11 @@ export type MapPluginConfig = {
      */
     rotation?: string | number;
 
+    /**
+     * @default 'round'
+     */
+    shape?: 'round' | 'square';
+
     /**
      * Size of the map
      * @default '200px'

diff --git a/packages/map-plugin/src/overlay.svg → packages/map-plugin/src/overlay-round.svg b/packages/map-plugin/src/overlay.svg → packages/map-plugin/src/overlay-round.svg
diff --git a/packages/map-plugin/src/overlay-square.svg b/packages/map-plugin/src/overlay-square.svg
diff --git a/packages/map-plugin/src/style.scss b/packages/map-plugin/src/style.scss
@@ -2,13 +2,16 @@
 @import '../../shared/vars';
 
 $psv-map-margin: 10px !default;
+$psv-map-radius: 8px !default;
+$psv-map-shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default;
 $psv-map-background: rgba(61, 61, 61, 0.7) !default;
 $psv-map-toolbar-font: 12px sans-serif !default;
 $psv-map-toolbar-background: #222 !default;
 $psv-map-toolbar-text-color: white !default;
 $psv-map-button-size: 34px !default;
 $psv-map-button-spacing: 3px !default;
 $psv-map-button-color: $psv-buttons-color !default;
+$psv-map-button-background: rgba(0, 0, 0, 0.5) !default;
 $psv-map-transition: ease-in-out 0.3s !default;
 
 @function round-to($value, $precision) {
@@ -34,7 +37,6 @@ $psv-map-transition: ease-in-out 0.3s !default;
         z-index: -1;
         background: $psv-map-background;
         overflow: hidden;
-        border-radius: 50%;
         transition: all $psv-map-transition;
 
         svg,
@@ -45,6 +47,17 @@ $psv-map-transition: ease-in-out 0.3s !default;
         }
     }
 
+    &--round &__container {
+        border-radius: 50%;
+        box-shadow: $psv-map-shadow;
+    }
+
+    &--square {
+        border-radius: $psv-map-radius;
+        box-shadow: $psv-map-shadow;
+        overflow: hidden;
+    }
+
     &__overlay {
         position: absolute;
         top: 0;
@@ -85,8 +98,7 @@ $psv-map-transition: ease-in-out 0.3s !default;
         width: $psv-map-button-size;
         aspect-ratio: 1;
         line-height: 0;
-        background: $psv-map-background;
-        border-radius: 50%;
+        background: $psv-map-button-background;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -99,37 +111,43 @@ $psv-map-transition: ease-in-out 0.3s !default;
             width: 60%;
         }
 
-        // "sigh"
-        $button-position: #{round-to((1 - math.cos(45deg)) * 50%, 1000)};
-        /* stylelint-disable max-line-length */
-        $button-offset: #{$psv-map-button-size - round-to((1 - math.cos(45deg)) * $psv-map-button-size * 0.5, 1000) + $psv-map-button-spacing};
-        /* stylelint-enable */
-
         &--top-left {
-            left: $button-position;
-            top: $button-position;
-            transform: translate(-$button-offset, -$button-offset);
+            left: 0;
+            top: 0;
+            border-bottom-right-radius: $psv-map-radius;
+            transform: translate(-$psv-map-button-spacing, -$psv-map-button-spacing);
         }
 
         &--top-right {
-            right: $button-position;
-            top: $button-position;
-            transform: translate($button-offset, -$button-offset);
+            right: 0;
+            top: 0;
+            border-bottom-left-radius: $psv-map-radius;
+            transform: translate($psv-map-button-spacing, -$psv-map-button-spacing);
         }
 
         &--bottom-left {
-            left: $button-position;
-            bottom: $button-position;
-            transform: translate(-$button-offset, $button-offset);
+            left: 0;
+            bottom: 0;
+            border-top-right-radius: $psv-map-radius;
+            transform: translate(-$psv-map-button-spacing, $psv-map-button-spacing);
         }
 
         &--bottom-right {
-            right: $button-position;
-            bottom: $button-position;
-            transform: translate($button-offset, $button-offset);
+            right: 0;
+            bottom: 0;
+            border-top-left-radius: $psv-map-radius;
+            transform: translate($psv-map-button-spacing, $psv-map-button-spacing);
         }
     }
 
+    &--round &__button {
+        border-radius: 50%;
+    }
+
+    &--square &__button {
+        transform: unset;
+    }
+
     &--maximized {
         margin: 0 !important;
         width: 100% !important;
@@ -140,31 +158,31 @@ $psv-map-transition: ease-in-out 0.3s !default;
         }
     }
 
-    &--maximized &__container {
+    &--maximized, &--maximized &__container {
         border-radius: 0;
     }
 
-    &--maximized &__button {
-        border: 2px solid currentcolor;
+    &--round#{&}--maximized &__button {
+        outline: 2px solid currentcolor;
 
         &--top-left {
-            left: $psv-map-button-size + $psv-map-margin;
-            top: $psv-map-button-size + $psv-map-margin;
+            left: $psv-map-margin;
+            top: $psv-map-margin;
         }
 
         &--top-right {
-            right: $psv-map-button-size + $psv-map-margin;
-            top: $psv-map-button-size + $psv-map-margin;
+            right: $psv-map-margin;
+            top: $psv-map-margin;
         }
 
         &--bottom-left {
-            left: $psv-map-button-size + $psv-map-margin;
-            bottom: $psv-map-button-size + $psv-map-margin;
+            left: $psv-map-margin;
+            bottom: $psv-map-margin;
         }
 
         &--bottom-right {
-            right: $psv-map-button-size + $psv-map-margin;
-            bottom: $psv-map-button-size + $psv-map-margin;
+            right: $psv-map-margin;
+            bottom: $psv-map-margin;
         }
     }
 

diff --git a/packages/plan-plugin/src/style.scss b/packages/plan-plugin/src/style.scss
@@ -5,7 +5,7 @@ $psv-plan-margin: 10px !default;
 $psv-plan-radius: 8px !default;
 $psv-plan-shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default;
 $psv-plan-button-size: 34px !default;
-$psv-plan-button-background: rgba(0, 0, 0, 0.7) !default;
+$psv-plan-button-background: rgba(0, 0, 0, 0.5) !default;
 $psv-plan-button-color: white !default;
 $psv-plan-transition: ease-in-out 0.3s !default;