@qispace/vue3-player 0.0.5

package/src/components/shared/QiZoomBox.vue

@@ -0,0 +1,322 @@
+<template>
+  <div ref="box" class="zoom-box-container">
+    <div
+      :style="{ 'transform-origin': 'top left', transform }"
+      class="zoom-box"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "QiZoomBox",
+  props: {
+    desktop: {
+      type: Boolean,
+      default: true,
+    },
+    mobile: {
+      type: Boolean,
+      default: true,
+    },
+    maxScale: {
+      type: Number,
+      default: 10,
+    },
+    consumeMouseClickWhenMoved: {
+      type: Boolean,
+      default: true,
+    },
+    consumeMouseUpWhenMoved: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      zoom: 100,
+      originX: 0,
+      originY: 0,
+      moving: false,
+      scaling: false,
+      lastEvent: undefined,
+      moved: false,
+    };
+  },
+  computed: {
+    transform() {
+      return `translateX(${this.originX}px) translateY(${this.originY}px) scale(${this.scale})`;
+    },
+    scale() {
+      return this.zoom / 100;
+    },
+    actualMaxScale() {
+      return this.maxScale * 100;
+    },
+  },
+  watch: {
+    scale() {
+      this.emitUpdate();
+    },
+    originX() {
+      this.emitUpdate();
+    },
+    originY() {
+      this.emitUpdate();
+    },
+    desktop() {
+      if (this.desktop) {
+        this.addDesktopHandlers();
+      } else {
+        this.removeDesktopHandlers();
+      }
+    },
+    mobile() {
+      if (this.mobile) {
+        this.addMobileHandlers();
+      } else {
+        this.removeMobileHandlers();
+      }
+    },
+  },
+  mounted() {
+    if (this.desktop) {
+      this.addDesktopHandlers();
+    }
+    if (this.mobile) {
+      this.addMobileHandlers();
+    }
+  },
+  beforeUnmount() {
+    if (this.desktop) {
+      this.removeDesktopHandlers();
+    }
+    if (this.mobile) {
+      this.removeMobileHandlers();
+    }
+  },
+  methods: {
+    addDesktopHandlers() {
+      this.$refs.box.addEventListener("wheel", this.wheelHandler, {
+        capture: true,
+      });
+      this.$refs.box.addEventListener("mousedown", this.mouseDownHandler, {
+        capture: true,
+      });
+      this.$refs.box.addEventListener("mousemove", this.mouseMoveHandler, {
+        capture: true,
+      });
+      window.addEventListener("mouseup", this.mouseUpHandler, {
+        capture: true,
+      });
+      window.addEventListener("click", this.mouseClickHandler, {
+        capture: true,
+      });
+    },
+    addMobileHandlers() {
+      this.$refs.box.addEventListener("touchstart", this.touchStartHandler, {
+        capture: true,
+      });
+      this.$refs.box.addEventListener("touchmove", this.touchMoveHandler, {
+        capture: true,
+      });
+      window.addEventListener("touchend", this.touchEndHandler, {
+        capture: true,
+      });
+      window.addEventListener("touchcancel", this.touchEndHandler, {
+        capture: true,
+      });
+    },
+    removeDesktopHandlers() {
+      this.$refs.box.removeEventListener("wheel", this.wheelHandler, {
+        capture: true,
+      });
+      this.$refs.box.removeEventListener("mousedown", this.mouseDownHandler, {
+        capture: true,
+      });
+      this.$refs.box.removeEventListener("mousemove", this.mouseMoveHandler, {
+        capture: true,
+      });
+      window.removeEventListener("mouseup", this.mouseUpHandler, {
+        capture: true,
+      });
+      window.removeEventListener("click", this.mouseClickHandler, {
+        capture: true,
+      });
+    },
+    removeMobileHandlers() {
+      this.$refs.box.removeEventListener("touchstart", this.touchStartHandler, {
+        capture: true,
+      });
+      this.$refs.box.removeEventListener("touchmove", this.touchMoveHandler, {
+        capture: true,
+      });
+      window.removeEventListener("touchend", this.touchEndHandler, {
+        capture: true,
+      });
+      window.removeEventListener("touchcancel", this.touchEndHandler, {
+        capture: true,
+      });
+    },
+    wheelHandler(e) {
+      const { x, y } = this.getOffsetCoordinates(e);
+      this.adjustZoom(-e.deltaY / 10, x, y);
+      e.preventDefault();
+    },
+    mouseDownHandler(e) {
+      this.moving = true;
+      this.moved = false;
+      this.lastEvent = e;
+    },
+    mouseMoveHandler(e) {
+      if (this.moving) {
+        const { x, y } = this.getOffsetCoordinates(e);
+        const { x: pX, y: pY } = this.getOffsetCoordinates(this.lastEvent);
+        const delta = {
+          x: x - pX,
+          y: y - pY,
+        };
+        this.adjustTranslateX(delta.x);
+        this.adjustTranslateY(delta.y);
+        this.moved = true;
+        this.lastEvent = e;
+      }
+    },
+    mouseUpHandler(e) {
+      if (this.moving) {
+        if (this.moved && this.consumeMouseUpWhenMoved) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+      }
+    },
+    mouseClickHandler(e) {
+      if (this.moving) {
+        if (this.moved && this.consumeMouseClickWhenMoved) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+        this.moving = false;
+      }
+    },
+    touchStartHandler(e) {
+      this.moving = e.touches.length === 1;
+      this.scaling = e.touches.length === 2;
+      this.lastEvent = e;
+    },
+    touchMoveHandler(e) {
+      if (this.moving) {
+        const { x, y } = this.getOffsetCoordinates(e.touches[0]);
+        const { x: pX, y: pY } = this.getOffsetCoordinates(
+          this.lastEvent.touches[0]
+        );
+        const delta = {
+          x: x - pX,
+          y: y - pY,
+        };
+        this.adjustTranslateX(delta.x);
+        this.adjustTranslateY(delta.y);
+      } else if (this.scaling && e.touches.length === 2) {
+        const { x: x0, y: y0 } = this.getOffsetCoordinates(e.touches[0]);
+        const { x: pX0, y: pY0 } = this.getOffsetCoordinates(
+          this.lastEvent.touches[0]
+        );
+        const { x: x1, y: y1 } = this.getOffsetCoordinates(e.touches[1]);
+        const { x: pX1, y: pY1 } = this.getOffsetCoordinates(
+          this.lastEvent.touches[1]
+        );
+        const prevDist = Math.hypot(pX0 - pX1, pY0 - pY1);
+        const currentDist = Math.hypot(x0 - x1, y0 - y1);
+        const centerX = (x1 + x0) / 2;
+        const centerY = (y1 + y0) / 2;
+        this.adjustZoom(currentDist - prevDist, centerX, centerY);
+      }
+      this.lastEvent = e;
+    },
+    touchEndHandler() {
+      this.moving = false;
+      this.scaling = false;
+    },
+    getOffsetCoordinates(e) {
+      const { left, top } = this.$refs.box.getBoundingClientRect();
+      return {
+        x: e.clientX - left,
+        y: e.clientY - top,
+      };
+    },
+    adjustTranslateX(delta) {
+      const bound = this.$refs.box.clientWidth;
+      const scaled = bound * this.scale;
+      this.originX = Math.max(
+        Math.min(0, this.originX + delta),
+        -(scaled - bound)
+      );
+    },
+    adjustTranslateY(delta) {
+      const bound = this.$refs.box.clientHeight;
+      const scaled = bound * this.scale;
+      this.originY = Math.max(
+        Math.min(0, this.originY + delta),
+        -(scaled - bound)
+      );
+    },
+    adjustZoom(delta, x, y) {
+      const boundX = this.$refs.box.clientWidth;
+      const boundY = this.$refs.box.clientHeight;
+      const scaledXBefore = boundX * this.scale;
+      const scaledYBefore = boundY * this.scale;
+      this.zoom = Math.min(
+        Math.max(100, this.zoom + delta),
+        this.actualMaxScale
+      );
+      const scaledXAfter = boundX * this.scale;
+      const scaledYAfter = boundY * this.scale;
+      const xDiff = scaledXAfter - scaledXBefore;
+      const yDiff = scaledYAfter - scaledYBefore;
+      this.originX -= (x / boundX) * xDiff;
+      this.originY -= (y / boundY) * yDiff;
+      this.adjustTranslateX(0);
+      this.adjustTranslateY(0);
+    },
+    emitUpdate() {
+      this.$emit("update", {
+        scale: this.scale,
+        x: this.originX,
+        y: this.originY,
+        resolve: (projectedX, projectedY) => {
+          const boundX = this.$refs.box.clientWidth;
+          const boundY = this.$refs.box.clientHeight;
+          const minX = this.originX / -this.scale;
+          const minY = this.originY / -this.scale;
+          const maxX = minX + boundX / this.scale;
+          const maxY = minY + boundY / this.scale;
+          const x = (projectedX / boundX) * (maxX - minX) + minX;
+          const y = (projectedY / boundY) * (maxY - minY) + minY;
+          return { x, y };
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.zoom-box-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+}
+.zoom-box {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  touch-action: none;
+}
+</style>

package/src/components/shared/index.js

@@ -0,0 +1,4 @@
+export { default as QiFloatingCard } from './QiFloatingCard.vue'
+export { default as QiHoverProbe } from './QiHoverProbe.vue'
+export { default as QiNorthDirection } from './QiNorthDirection.vue'
+export { default as QiZoomBox } from './QiZoomBox.vue'

package/src/components/virtualTourV2/Compass.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :style="compassBackground">
+    <v-img class="compass-needle" :src="needle" :style="needleRotation"></v-img>
+  </div>
+</template>
+
+<script>
+import compassBackground from '@/lib/virtualTour/textures/compass-bg.png'
+import compassNeedle from '@/lib/virtualTour/textures/compass-needle.png'
+
+export default {
+  name: 'Compass',
+  props: { rotation: { type: Number, required: true } },
+  data() {
+    return {
+      needle: compassNeedle,
+      compassBackground: {
+        backgroundImage: `url(${compassBackground})`,
+        backgroundSize: 'contain',
+      },
+    }
+  },
+  computed: {
+    needleRotation() {
+      return {
+        transform: `rotate(${-this.rotation + 180}deg)`,
+      }
+    },
+  },
+}
+</script>
+<style>
+.compass-needle {
+  transition: transform 0.5s;
+  transition-timing-function: ease-out;
+}
+</style>

package/src/components/virtualTourV2/Disclaimer.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition name="fade-transition">
+    <div v-if="isVisible" class="text-white disclaimer caption">
+      {{
+        i18n.getLabel("all-illustrations-are-indicative-deviations-may-occur")
+      }}
+      <span
+        @click="isVisible = false"
+        class="link-text text-decoration-underline"
+      >
+        {{ i18n.getLabel("i-understand") }}
+      </span>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: "Disclaimer",
+  inject: ["i18n"],
+  data() {
+    return {
+      isVisible: true,
+    };
+  },
+};
+</script>
+<style scoped>
+.disclaimer {
+  padding: 4px 10px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  line-height: 20px;
+}
+.disclaimer span {
+  cursor: pointer;
+  color: white;
+  text-decoration: underline;
+  pointer-events: all;
+}
+</style>

package/src/components/virtualTourV2/FloorLevel.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-tooltip right attach>
+    <template #activator="{ on: tooltip }">
+      <v-btn density="comfortable" elevation="1" icon v-on="{ ...tooltip }">
+        <svg
+          style="width: 24px; height: 24px"
+          viewBox="0 0 18 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.98034 10.3472L1.54055 5.8855L8.98034 1.42384L16.4201 5.8855L8.98034 10.3472Z"
+            fill="white"
+            :stroke="upperActive ? 'black' : '#999999'"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M8.98034 14.7993L1.54055 10.3376L8.98034 5.87599L16.4201 10.3376L8.98034 14.7993Z"
+            fill="white"
+            :stroke="lowerActive ? 'black' : '#999999'"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </v-btn>
+    </template>
+    <span class="floor-level-label">
+      {{ i18n.getLabel(lowerOrUpper) }} {{ i18n.getLabel("floor") }}
+    </span>
+  </v-tooltip>
+</template>
+<script>
+export default {
+  name: "FloorLevel",
+  inject: ["i18n"],
+  props: {
+    level: { type: Number, default: 0 },
+    floorLevels: { type: Array, default: [] },
+  },
+  computed: {
+    lowerOrUpper() {
+      const allFloorLevels = this.floorLevels;
+      allFloorLevels.sort();
+      if (allFloorLevels.indexOf(this.level) + 1 <= allFloorLevels.length / 2) {
+        return "Lower";
+      } else {
+        return "Upper";
+      }
+    },
+    lowerActive() {
+      return this.lowerOrUpper === "Lower";
+    },
+    upperActive() {
+      return this.lowerOrUpper === "Upper";
+    },
+  },
+};
+</script>
+<style scoped>
+.btn-placeholder {
+  width: 36px;
+  height: 36px;
+}
+.v-btn {
+  background-color: #fff;
+  pointer-events: all;
+  cursor: auto;
+}
+
+.floor-level-label {
+  text-transform: capitalize;
+}
+</style>

package/src/components/virtualTourV2/FullScreenButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="btn-fullscreen" class="btn-placeholder mr-2">
+    <v-btn
+      density="comfortable"
+      elevation="3"
+      :icon="isFullScreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+      @click="$emit('toggle-fullscreen')"
+    >
+    </v-btn>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isFullScreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ["toggle-fullscreen"],
+};
+</script>
+<style scoped></style>

package/src/components/virtualTourV2/InteriorSelector.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <v-menu
+      transition="slide-x-reverse-transition"
+      location="top end"
+      origin="end bottom"
+      elevation="0"
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn prepend-icon="mdi-palette-outline" rounded v-bind="props">
+          {{ i18n.getLabel("interior") }}
+        </v-btn>
+      </template>
+      <v-list class="interior-selector-list">
+        <v-list-item
+          density="compact"
+          v-for="(at, i) in availableArchetypes"
+          :key="`at-menuitem-${i}`"
+          @click="$emit('select-interior', at.archetypeID)"
+          :active="i === selectedIndex"
+          class="interior-selector-list-item"
+        >
+          <template v-slot:prepend>
+            <v-img
+              width="100"
+              max-width="100"
+              height="66"
+              :src="getUrl(at.url)"
+            />
+          </template>
+          <v-list-item-title class="text-caption py-2 px-4">
+            {{ i18n.get(at.title) }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InteriorSelector",
+  emits: ["select-interior"],
+  props: {
+    availableArchetypes: { type: Array, required: true },
+    selectedIndex: { type: Number, required: true },
+  },
+  inject: ["i18n", "localMode", "fileLoader"],
+  methods: {
+    getUrl(url) {
+      let actualUrl = url;
+
+      if (this.localMode) {
+        actualUrl = `${this.fileLoader.getURL(url)}`;
+      }
+
+      return actualUrl;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.v-image {
+  background-color: #aaa;
+}
+
+.interior-selector-list {
+  box-shadow: none !important;
+  padding: 10px;
+  background: transparent !important;
+}
+.interior-selector-list-item {
+  padding: 0;
+  padding-inline-start: 0 !important;
+  background-color: #fff;
+  border: 2px solid #fff;
+  transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  margin-top: 10px;
+}
+
+.interior-selector-list-item:hover {
+  transform: translateX(-5px);
+  border: 2px solid #4caf50;
+}
+
+.interior-selector-list-item .v-list-item-title {
+  word-break: break-word;
+}
+</style>