@qispace/vue3-player 0.0.5

package/src/components/virtualTourV2/WaypointCarousel.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="waypoint-carousel">
+    <v-slide-group
+      v-model="activeIndex"
+      active-class="active-apt"
+      selected-class="active-apt"
+      show-arrows
+      center-active
+      mandatory
+    >
+      <template #prev>
+        <v-hover v-slot="{ hover }">
+          <v-btn
+            elevation="0"
+            class="carousel-button"
+            :class="{ mobile: isMobile }"
+            @click="$emit('previous')"
+          >
+            <v-icon :color="hover ? '#999' : '#d2d2d2'" x-large>
+              mdi-chevron-left
+            </v-icon>
+          </v-btn>
+        </v-hover>
+      </template>
+      <template #next>
+        <v-hover v-slot="{ hover }">
+          <v-btn
+            elevation="0"
+            class="carousel-button"
+            :class="{ mobile: isMobile }"
+            @click="$emit('next')"
+          >
+            <v-icon :color="hover ? '#999' : '#d2d2d2'" x-large>
+              mdi-chevron-right
+            </v-icon>
+          </v-btn>
+        </v-hover>
+      </template>
+      <v-slide-group-item
+        v-for="thumb in thumbnails"
+        :key="thumb.id"
+        v-slot="{ toggle, selectedClass }"
+      >
+        <v-card
+          :class="['ma-2', selectedClass]"
+          align="center"
+          justify="center"
+          :height="isMobile ? 50 : 100"
+          :width="isMobile ? 80 : 160"
+          elevation="0"
+          style="overflow: hidden"
+          @click="goToCamera(thumb.id, toggle)"
+        >
+          <v-img max-height="100" max-width="160" :src="thumb.thumbnailUrl" />
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </div>
+</template>
+
+<script>
+const KEY_ARROW_LEFT = 37;
+const KEY_ARROW_RIGHT = 39;
+
+export default {
+  name: "WaypointCarousel",
+  props: {
+    thumbnails: { type: Array, required: true },
+    active: { type: Number, required: true },
+  },
+  data() {
+    return {
+      activeThumb: 0,
+    };
+  },
+  computed: {
+    activeIndex: {
+      get() {
+        return this.active;
+      },
+      set(value) {
+        this.activeThumb = value;
+      },
+    },
+    isMobile() {
+      return /Android|webOS|iPhone|iPad|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(
+        window.navigator.userAgent
+      );
+    },
+  },
+  mounted() {
+    window.addEventListener("keydown", this.keyNavigate);
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.keyNavigate);
+  },
+  methods: {
+    keyNavigate(e) {
+      switch (e.keyCode) {
+        case e.keyCode === KEY_ARROW_LEFT:
+          this.$emit("previous");
+        case e.keyCode === KEY_ARROW_RIGHT:
+          this.$emit("next");
+        default:
+          return;
+      }
+    },
+    goToCamera(cameraId, toggleEvent) {
+      toggleEvent();
+      this.$emit("goto", cameraId);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.v-card {
+  transition: box-shadow 0.3s ease-in-out;
+  border: 2px solid transparent;
+}
+:deep(.v-slide-group__content) {
+  justify-content: center;
+}
+:deep(.v-slide-group__next--disabled) {
+  pointer-events: all !important;
+}
+
+:deep(.v-slide-group__prev--disabled) {
+  pointer-events: all !important;
+}
+
+.carousel-button {
+  height: 108px !important;
+  min-width: 54px !important;
+  padding: 0 !important;
+  z-index: 2;
+  background-color: #fff !important;
+  border: 2px solid #d2d2d2;
+  color: #d2d2d2 !important;
+}
+.carousel-button.mobile {
+  height: 58px !important;
+  min-width: 38px !important;
+}
+.carousel-button:hover {
+  border: 2px solid #999 !important;
+  color: #999 !important;
+}
+.carousel-button:hover:before,
+.carousel-button:hover:after {
+  background-color: #fff !important;
+}
+.align-baseline {
+  align-items: baseline;
+}
+.active-apt {
+  border: 4px solid #4caf50 !important;
+}
+.v-image {
+  border-radius: 0 !important;
+}
+</style>

package/src/components/virtualTourV2/index.js

@@ -0,0 +1 @@
+export { default as ManualSlideShow } from './ManualSlideShow.vue'

package/src/components/virtualTourV2/minimapv2/MiniMapMap.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="minimap-wrapper d-flex align-stretch justify-space-between">
+    <div class="minimap-container">
+      <div class="web-minimap" :style="transformStyle">
+        <div class="minimap-background-image" :style="backgroundStyle"></div>
+        <div class="center-pivot" :style="centerPivotStyle">
+          <div
+            v-for="oneCamera in camerasWithRelativePosition"
+            :key="oneCamera.id"
+          >
+            <div
+              v-if="currentCameraObject.floorLevel === oneCamera.floorLevel"
+              class="single-camera-marker"
+              :style="cameraPositionStyle(oneCamera)"
+            ></div>
+            <rotation-marker-v2
+              v-if="currentCameraObject.id === oneCamera.id"
+              class="rotation-marker-component"
+              :rotation="rotationAngle"
+              :style="{ ...cameraPositionStyle(oneCamera) }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as THREE from "three";
+import RotationMarkerV2 from "./RotationMarkerV2.vue";
+
+function _rad(n) {
+  return THREE.MathUtils.degToRad(n);
+}
+
+export default {
+  name: "MiniMapMap",
+  components: { RotationMarkerV2 },
+  props: {
+    backgroundImage: {
+      type: String,
+      required: true,
+    },
+    allCameras: {
+      type: Array,
+      required: true,
+    },
+    minimapCamera: {
+      type: Object,
+      required: true,
+    },
+    currentCamera: {
+      type: String,
+      required: true,
+    },
+    rotation: {
+      type: Number,
+      required: true,
+    },
+    transformAngle: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      planeWidth: 512,
+      planeHeight: 384,
+      topLeftCorner: new THREE.Vector3(),
+      centerPivot: new THREE.Object3D(),
+      centerPivotStyle: {},
+      scale: 1,
+      resizeOverver: undefined,
+    };
+  },
+  computed: {
+    apartmentCameras() {
+      return this.allCameras;
+    },
+    currentCameraObject() {
+      return this.allCameras.find((item) => {
+        return item.id === this.currentCamera;
+      });
+    },
+    rotationAngle() {
+      return this.rotation;
+    },
+    minimapCameraPositionVector() {
+      return new THREE.Vector3(
+        this.minimapCamera.position.x,
+        this.minimapCamera.position.y,
+        this.minimapCamera.position.z
+      );
+    },
+    floorVerticalPosition() {
+      return parseFloat(this.currentCameraObject.floor_vertical_position);
+    },
+    camerasWithRelativePosition() {
+      return this.apartmentCameras.map((oneCamera) => {
+        const cameraPosition = oneCamera.uposition.split(",");
+
+        const position = new THREE.Vector3(
+          cameraPosition[0] - this.minimapCameraPositionVector.x,
+          0,
+          cameraPosition[2] - this.minimapCameraPositionVector.z
+        );
+
+        const toReturn = {
+          ...oneCamera,
+          ...this.relativePosition(this.topLeftCorner, position),
+        };
+
+        return toReturn;
+      });
+    },
+    backgroundStyle() {
+      return `background-image: url(${this.backgroundImage});`;
+    },
+    transformStyle() {
+      let actualScale = this.scale > 1 ? 1 : this.scale;
+      if (actualScale < 0.8) actualScale = 0.4;
+
+      return `scale: ${actualScale > 1 ? 1 : actualScale}; transform: rotate(${
+        this.transformAngle
+      }deg);`;
+    },
+  },
+  mounted() {
+    this.calculateRelativeValues();
+    this.upadteCenterPivot();
+    this.calcualteScale();
+
+    const element = document.getElementById("moveableDiv");
+    if (element)
+      this.resizeOverver = new ResizeObserver(this.calcualteScale).observe(
+        element
+      );
+  },
+  beforeUpdate() {
+    this.calculateRelativeValues();
+    this.upadteCenterPivot();
+  },
+  beforeUnmount() {
+    if (this.resizeOverver) {
+      this.resizeOverver.unobserve(document.getElementById("moveableDiv"));
+    }
+  },
+  methods: {
+    upadteCenterPivot() {
+      this.centerPivot.rotation.x = 180;
+      this.centerPivot.rotation.y = this.minimapCamera.rotation.y * -1;
+
+      this.centerPivotStyle = {
+        transform: `rotateZ(${this.centerPivot.rotation.y}deg) rotateX(${this.centerPivot.rotation.x}deg)`,
+      };
+    },
+    cameraPositionStyle(camera) {
+      return {
+        top: `${Math.abs(camera.top)}%`,
+        left: `${Math.abs(camera.left)}%`,
+      };
+    },
+    relativePosition(topLeftCorner, position) {
+      var direction = new THREE.Vector3();
+      const relativePosition = direction.subVectors(topLeftCorner, position);
+
+      return {
+        relativePosition,
+        left: (relativePosition.x / this.planeWidth) * 100,
+        top: (relativePosition.z / this.planeHeight) * 100,
+      };
+    },
+    calculateRelativeValues() {
+      const cameraHeight =
+        this.minimapCamera.position.y - this.floorVerticalPosition;
+      this.planeHeight =
+        2 * (cameraHeight * Math.tan(_rad(this.minimapCamera.fovY / 2)));
+      this.planeWidth = (512 / 384) * this.planeHeight;
+
+      const halfHeight = this.planeHeight / 2;
+      const halfWidth = this.planeWidth / 2;
+      const topLeftCorner = new THREE.Vector3(
+        halfWidth * -1,
+        0,
+        halfHeight * -1
+      );
+      this.topLeftCorner = topLeftCorner;
+    },
+    calcualteScale() {
+      const parentElement = document.getElementById("moveableDiv");
+
+      if (!parentElement) return;
+
+      const heightScale = (parentElement.offsetHeight / 384) * 0.8;
+      const widthScale = (parentElement.offsetWidth / 512) * 0.8;
+
+      if (parentElement.offsetHeight > parentElement.offsetWidth) {
+        this.scale = widthScale * 0.5;
+      } else {
+        this.scale = heightScale * 0.9;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.minimap-container {
+  position: relative;
+}
+
+.web-minimap {
+  position: relative;
+  width: 512px;
+  height: 385px;
+  overflow: hidden;
+  transition: transform 0.5s ease-in;
+}
+
+@media (max-width: 650px) {
+  .web-minimap {
+    scale: 0.7;
+  }
+}
+
+@media (max-width: 480px) {
+  .web-minimap {
+    scale: 0.5;
+  }
+}
+
+.minimap-background-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.single-camera-marker {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  background: #fff;
+  border-radius: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  border: 0px;
+}
+
+.rotation-marker-component {
+  z-index: 3;
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  transform: translate(-50%, -50%);
+}
+
+.center-pivot {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/virtualTourV2/minimapv2/MiniMapV2.vue

@@ -0,0 +1,110 @@
+<template>
+  <moveable @close="$emit('close')" @transform="transform">
+    <template v-slot:body>
+      <minimap-compass
+        :scale="scale"
+        :minimapCamera="minimapCamera"
+        :transformAngle="transformAngle"
+      />
+      <div>
+        <mini-map-map
+          :transformAngle="transformAngle"
+          :allCameras="allCameras"
+          :backgroundImage="backgroundImage"
+          :rotation="rotation"
+          :currentCamera="currentCamera"
+          :minimapCamera="minimapCamera"
+        />
+      </div>
+    </template>
+    <template v-slot:footer>
+      <sunsimulation-slider
+        :minimapJSON="minimapJSON"
+        :root="`${rootUrl}/minimap/`"
+        :level="level"
+        @set-background-image="setBackgroundImage"
+      />
+    </template>
+  </moveable>
+</template>
+<script>
+import MiniMapMap from './MiniMapMap.vue'
+import Moveable from './Moveable.vue'
+import MinimapCompass from './MinimapCompass.vue'
+import SunsimulationSlider from './SunsimulationSlider.vue'
+
+export default {
+  components: { MiniMapMap, Moveable, MinimapCompass, SunsimulationSlider },
+  name: 'MiniMapV2',
+  emits: ['close', 'set-background-image'],
+  props: {
+    minimapJSON: {
+      type: Array,
+      required: true,
+    },
+    rootUrl: {
+      type: String,
+      required: true,
+    },
+    backgroundImage: {
+      type: String,
+      required: true,
+    },
+    allCameras: {
+      type: Array,
+      required: true,
+    },
+    minimapCamera: {
+      type: Object,
+      required: true,
+    },
+    currentCamera: {
+      type: String,
+      required: true,
+    },
+    level: {
+      type: Number,
+      required: true,
+    },
+    rotation: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      transformAngle: 0,
+    }
+  },
+  computed: {
+    scale() {
+      let scale = 1
+      if (this.transformAngle !== 0) {
+        if (Math.abs(this.transformAngle) % 180 === 0) {
+          scale = 1
+        } else {
+          scale = -1
+        }
+      }
+
+      return scale
+    },
+  },
+  methods: {
+    setBackgroundImage(image) {
+      this.$emit('set-background-image', image)
+    },
+    transform() {
+      this.transformAngle = this.transformAngle + 90
+    },
+  },
+}
+</script>
+<style scoped>
+.minimap-compass {
+  position: absolute;
+  right: 5px;
+  top: 50px;
+  z-index: 11;
+}
+</style>

package/src/components/virtualTourV2/minimapv2/MinimapCompass.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="minimap-compass" :style="{ scale: scale }">
+    <qi-north-direction class="north-indicator" :longitude="northDirection" />
+  </div>
+</template>
+<script>
+import QiNorthDirection from '../../shared/QiNorthDirection.vue'
+
+export default {
+  name: 'MinimapCompass',
+  components: { QiNorthDirection },
+  props: {
+    scale: {
+      type: Number,
+      required: true,
+    },
+    minimapCamera: {
+      type: Object,
+      required: true,
+    },
+    transformAngle: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    northDirection() {
+      return this.minimapCamera.rotation
+        ? this.minimapCamera.rotation.y + this.transformAngle - 90
+        : 0
+    },
+  },
+}
+</script>
+<style scoped>
+.minimap-compass {
+  width: 50px;
+}
+</style>