@3dwayfinder/wayfinder-vue-components 1.24.13 → 1.24.15

package/dist/wayfinder-vue-components.esm.js

@@ -1431,6 +1431,10 @@ var script$D = {
       type: Boolean,
       default: true
     },
+    positionFloorChangePopup: {
+      type: Boolean,
+      default: false
+    },
     POIPopupEnabled: {
       type: Boolean,
       default: false
@@ -1469,7 +1473,16 @@ var script$D = {
     }
   },
   computed: {
-    ...mapState('wf', ['language'])
+    ...mapState('wf', ['language']),
+    pathTextPositionStyle() {
+      if (!this.positionFloorChangePopup || !this.pathTextPosition) {
+        return null;
+      }
+      return {
+        left: this.pathTextPosition[0] + "px",
+        top: this.pathTextPosition[1] + "px"
+      };
+    }
   },
   mounted() {
     this.load();
@@ -1569,11 +1582,17 @@ var script$D = {
       wayfinder.events.on('language-change', () => {
         this.update(wayfinder);
       });
-      wayfinder.events.on("floor-change-before", (currentFloor, nextFloor, destinationFloor) => {
+      wayfinder.events.on("floor-change-before", (currentFloor, nextFloor, destinationFloor, spot) => {
         this.pathText = wayfinder.translator.get("go_to_floor", [currentFloor.getName(wayfinder.getLanguage()), destinationFloor.getName(wayfinder.getLanguage()), nextFloor.getName(wayfinder.getLanguage())]);
+        this.floorChangePosition = spot && spot.position ? spot.position : null;
+        console.log('spot', spot);
+        this.updatePathTextPosition();
         this.pathTextVisible = true;
       });
       wayfinder.events.on("map-update", () => {
+        if (this.pathTextVisible) {
+          this.updatePathTextPosition();
+        }
         if (this.POIPopupEnabled && this.poiPopupVisible && this.popupPOI) {
           this.showPOIPopup(this.popupPOI);
         }
@@ -1639,7 +1658,9 @@ var script$D = {
       this.updateStoreGetter("wf/xFloors", this.$store.state);
       if (Vue$1.prototype.$wayfinder && typeof Vue$1.prototype.$wayfinder.getCurrentBuilding === "function") {
         const building = Vue$1.prototype.$wayfinder.getCurrentBuilding();
+        const floor = Vue$1.prototype.$wayfinder.getCurrentFloor();
         this.$store.dispatch('wf/SET_CURRENT_BUILDING', building && typeof building.copy === "function" ? building.copy() : building);
+        this.$store.dispatch('wf/SET_CURRENT_FLOOR', floor && typeof building.copy === "function" ? floor.copy() : floor);
       }
     },
     updateStoreGetter(key, state) {
@@ -1677,6 +1698,16 @@ var script$D = {
       this.poiPopupVisible = false;
       this.$emit('showInfo', poi);
     },
+    updatePathTextPosition() {
+      this.pathTextPosition = null;
+      if (!this.positionFloorChangePopup || typeof wayfinder.getNodeScreenPosition !== "function") {
+        return;
+      }
+      let position = wayfinder.getNodeScreenPosition(this.floorChangePosition);
+      if (position) {
+        this.pathTextPosition = position;
+      }
+    },
     showPOIPopup(poi, _width, _height) {
       this.popupPOI = Object.freeze(poi);
       if (this.POIPopupEnabled && this.popupPOI && this.$refs.poiPopup && poi.getNode()) {
@@ -1732,6 +1763,8 @@ var script$D = {
       loaded: false,
       pathTextVisible: false,
       pathText: '',
+      pathTextPosition: null,
+      floorChangePosition: null,
       poiPopupVisible: false,
       popupPOI: null
     };
@@ -1772,7 +1805,11 @@ var __vue_render__$D = function () {
       value: _vm.showPathText && _vm.pathTextVisible,
       expression: "showPathText && pathTextVisible"
     }],
-    staticClass: "wf-map-path-text"
+    staticClass: "wf-map-path-text",
+    class: {
+      'wf-map-path-text-positioned': _vm.positionFloorChangePopup && _vm.pathTextPosition
+    },
+    style: _vm.pathTextPositionStyle
   }, [_vm._v("\n    " + _vm._s(_vm.pathText) + "\n  ")]), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
@@ -1810,14 +1847,14 @@ var __vue_staticRenderFns__$D = [];
 /* style */
 const __vue_inject_styles__$D = function (inject) {
   if (!inject) return;
-  inject("data-v-fe48f61a_0", {
-    source: ".wf-map-container[data-v-fe48f61a]{position:relative;width:100%;height:100%}.wf-map-container canvas[data-v-fe48f61a]{width:100%;height:100%;position:relative}.wf-map-container .wf-map-path-text[data-v-fe48f61a]{width:30ch;text-align:center;background-color:#fff;position:absolute;bottom:25%;margin:auto;left:50%;margin-left:-15ch;padding:.5em}#wf-poi-popup[data-v-fe48f61a]{position:absolute;top:0;left:0;z-index:10;width:15.5rem;height:auto;background-color:#fff;text-align:center;transform-origin:bottom;animation-duration:.5s;animation-iteration-count:2;cursor:pointer}.wf-poi-popup-content[data-v-fe48f61a]{display:flex;flex-direction:column;justify-content:stretch;height:100%}.wf-poi-popup-content>label[data-v-fe48f61a]{flex-grow:1;font-size:1.6rem;margin-top:.6rem;text-align:center;line-height:1.2;font-weight:600;margin-bottom:1.6rem}.wf-pin-down[data-v-fe48f61a]{background-color:#fff;width:1rem;height:1rem;position:absolute;bottom:-.5rem;border-radius:1rem 0 0 0;transform:rotate(45deg);left:50%;margin-left:-.75rem}.wf-pin-left .wf-pin-down[data-v-fe48f61a]{left:1rem}.wf-pin-right .wf-pin-down[data-v-fe48f61a]{right:1rem;left:auto}.wf-pin-up .wf-poi-popup-content[data-v-fe48f61a]{margin-bottom:0}.wf-pin-up .wf-pin-down[data-v-fe48f61a]{top:-.5rem;bottom:auto;transform:rotate(-45deg)}",
+  inject("data-v-378fdbc7_0", {
+    source: ".wf-map-container[data-v-378fdbc7]{position:relative;width:100%;height:100%}.wf-map-container canvas[data-v-378fdbc7]{width:100%;height:100%;position:relative}.wf-map-container .wf-map-path-text[data-v-378fdbc7]{width:30ch;text-align:center;background-color:#fff;position:absolute;bottom:25%;margin:auto;left:50%;margin-left:-15ch;padding:.5em}.wf-map-container .wf-map-path-text.wf-map-path-text-positioned[data-v-378fdbc7]{bottom:auto;margin-left:0;transform:translate(-50%,calc(-100% - .5em))}#wf-poi-popup[data-v-378fdbc7]{position:absolute;top:0;left:0;z-index:10;width:15.5rem;height:auto;background-color:#fff;text-align:center;transform-origin:bottom;animation-duration:.5s;animation-iteration-count:2;cursor:pointer}.wf-poi-popup-content[data-v-378fdbc7]{display:flex;flex-direction:column;justify-content:stretch;height:100%}.wf-poi-popup-content>label[data-v-378fdbc7]{flex-grow:1;font-size:1.6rem;margin-top:.6rem;text-align:center;line-height:1.2;font-weight:600;margin-bottom:1.6rem}.wf-pin-down[data-v-378fdbc7]{background-color:#fff;width:1rem;height:1rem;position:absolute;bottom:-.5rem;border-radius:1rem 0 0 0;transform:rotate(45deg);left:50%;margin-left:-.75rem}.wf-pin-left .wf-pin-down[data-v-378fdbc7]{left:1rem}.wf-pin-right .wf-pin-down[data-v-378fdbc7]{right:1rem;left:auto}.wf-pin-up .wf-poi-popup-content[data-v-378fdbc7]{margin-bottom:0}.wf-pin-up .wf-pin-down[data-v-378fdbc7]{top:-.5rem;bottom:auto;transform:rotate(-45deg)}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__$D = "data-v-fe48f61a";
+const __vue_scope_id__$D = "data-v-378fdbc7";
 /* module identifier */
 const __vue_module_identifier__$D = undefined;
 /* functional template */