@qispace/vue3-player 0.0.16 → 0.1.1

package/src/components/shared/QiZoomBox.vue

@@ -1,322 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-<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

@@ -1,73 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-<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>