@qispace/vue3-player 0.0.5

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

@@ -0,0 +1,208 @@
+<template>
+  <div
+    id="moveableDiv"
+    class="big d-flex justify-space-between flex-column align-center sizer"
+    :class="currentSize"
+  >
+    <v-btn
+      class="close-icon"
+      icon="mdi-window-close"
+      size="x-small"
+      @click="$emit('close')"
+    >
+    </v-btn>
+    <v-btn
+      class="resize-icon"
+      icon="mdi-image-size-select-small"
+      size="x-small"
+      @click="toggleSize"
+      title="Resize"
+    >
+    </v-btn>
+    <v-btn
+      class="rotate-icon"
+      size="x-small"
+      icon="mdi mdi-rotate-right"
+      @click="$emit('transform')"
+      title="Rotate"
+    >
+    </v-btn>
+
+    <!-- just a filler div to center elements  -->
+    <div id="filler-div"></div>
+
+    <div class="moveable-body" id="moveableDivheader">
+      <slot class="slot" name="body"></slot>
+    </div>
+
+    <div class="moveable-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Moveable",
+  emits: ["close"],
+  data() {
+    return {
+      currentSize: "big",
+    };
+  },
+  mounted() {
+    configureDraggable(document.getElementById("moveableDiv"));
+  },
+  methods: {
+    toggleSize() {
+      if (this.currentSize === "big") {
+        this.currentSize = "small";
+      } else {
+        this.currentSize = "big";
+      }
+    },
+  },
+};
+
+function configureDraggable(box) {
+  const element = document.getElementById(box.id + "header");
+  if (!element) return;
+
+  var pos1 = 0,
+    pos2 = 0,
+    pos3 = 0,
+    pos4 = 0;
+
+  element.addEventListener("touchstart", dragStart, { passive: false });
+  element.addEventListener("touchend", dragEnd, { passive: false });
+  element.addEventListener("mousedown", dragStart, { passive: false });
+  element.addEventListener("mouseup", dragEnd, { passive: false });
+
+  function dragStart(e) {
+    e = e || window.event;
+    e.preventDefault();
+    let event = e;
+    if (e.type === "touchstart") {
+      event = e.touches[0];
+    }
+
+    pos3 = event.clientX;
+    pos4 = event.clientY;
+
+    document.addEventListener("mouseup", dragEnd, { passive: false });
+    document.addEventListener("touchend", dragEnd, { passive: false });
+
+    document.addEventListener("mousemove", drag, { passive: false });
+    document.addEventListener("touchmove", drag, { passive: false });
+  }
+
+  function drag(e) {
+    e = e || window.event;
+    e.preventDefault();
+
+    let event = e;
+    if (e.type === "touchmove") {
+      event = e.touches[0];
+    }
+
+    pos1 = pos3 - event.clientX;
+    pos2 = pos4 - event.clientY;
+    pos3 = event.clientX;
+    pos4 = event.clientY;
+
+    box.style.top = box.offsetTop - pos2 + "px";
+    box.style.left = box.offsetLeft - pos1 + "px";
+  }
+
+  function dragEnd() {
+    document.removeEventListener("mouseup", dragEnd, false);
+    document.removeEventListener("mousemove", drag, false);
+    document.removeEventListener("touchend", dragEnd, false);
+    document.removeEventListener("touchmove", drag, false);
+  }
+}
+</script>
+<style scoped>
+#moveableDiv {
+  position: fixed;
+  z-index: 15;
+  background-color: #ffffff;
+  border: 1px solid #d3d3d3;
+}
+
+#moveableDivheader {
+  cursor: move;
+  z-index: 10;
+}
+
+.big {
+  width: 512px;
+  height: 440px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.small {
+  width: 250px;
+  height: 300px;
+  bottom: 10px;
+  right: 10px;
+  transform: translate(0%, 0%);
+}
+
+.sizer {
+  /* resize: both; */
+  overflow: hidden;
+  min-width: 250px;
+  min-height: 300px;
+  max-width: 700px;
+  max-height: 531px;
+}
+
+.resize-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 11;
+}
+
+.rotate-icon {
+  position: absolute;
+  top: 5px;
+  right: 45px;
+  z-index: 12;
+}
+
+.close-icon {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 11;
+}
+
+.moveable-body {
+  z-index: 1;
+}
+
+.moveable-footer {
+  width: 100%;
+  height: 50px;
+  margin-bottom: 10px;
+  background: #fff;
+  z-index: 2;
+}
+
+.filler-div {
+  display: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .sizer {
+    /* resize: both; */
+    overflow: hidden;
+
+    max-width: 90%;
+    max-height: 80vh;
+  }
+}
+</style>

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

@@ -0,0 +1,79 @@
+<template>
+  <svg
+    class="rotation-marker-svg"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <radialGradient id="Gradient" cx="0" cy="0" r="0.9" fx="0" fy="0">
+        <stop offset="0%" class="stop1" />
+        <stop offset="60%" class="stop2" />
+        <stop offset="90%" class="stop3" />
+      </radialGradient>
+
+      <linearGradient id="LineGradient" gradientTransform="rotate(90)">
+        <stop offset="0%" class="stop1" />
+        <stop offset="75%" class="stop2" />
+        <stop offset="100%" class="stop3" />
+      </linearGradient>
+    </defs>
+    <g transform-origin="20 20" :transform="`rotate(${+45 + rotation})`">
+      <rect
+        id="field-of-view-gradient"
+        x="20"
+        y="20"
+        width="38"
+        height="38"
+        transform="rotate(0)"
+        transform-origin="20 20"
+        fill="url(#Gradient)"
+      />
+      <rect
+        class="field-of-view-border"
+        x="20"
+        y="20"
+        width="1"
+        height="25"
+        fill="url(#LineGradient)"
+        transform="rotate(0)"
+        transform-origin="20 20"
+      />
+      <rect
+        class="field-of-view-border"
+        x="19"
+        y="19"
+        width="1"
+        height="25"
+        fill="url(#LineGradient)"
+        transform="rotate(-90)"
+        transform-origin="20 20"
+      />
+
+      <circle cx="20" cy="20" r="5" fill="white" />
+      <circle cx="20" cy="20" r="3" fill="red" />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    rotation: {
+      type: Number,
+      required: true,
+    },
+  },
+}
+</script>
+<style>
+.stop1 {
+  stop-color: white;
+}
+.stop2 {
+  stop-color: white;
+  stop-opacity: 0;
+}
+.stop3 {
+  stop-color: transparent;
+}
+</style>

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

@@ -0,0 +1,203 @@
+<template>
+  <div class="ss-wrapper">
+    <div class="slider">
+      <div class="minimap-sun-slider">
+        <v-progress-linear
+          v-if="imagesPreloading"
+          indeterminate
+          rounded
+          height="6"
+          color="grey lighten-1"
+          class="mr-2"
+        />
+        <v-slider
+          v-else
+          v-model="hourMark"
+          :min="0"
+          :max="23"
+          :step="1"
+          color="#373737"
+          track-color="#373737"
+          thumb-color="#373737"
+          :hide-details="true"
+        >
+          <template v-slot:prepend>
+            <v-icon color="#ffab02">mdi-white-balance-sunny</v-icon>
+          </template>
+        </v-slider>
+      </div>
+      <div v-if="!imagesPreloading" class="time-label">
+        {{ timeString }} {{ hourMarkString }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SunsimulationSlider",
+  emits: ["set-background-image"],
+  props: {
+    minimapJSON: { type: Array, required: true },
+    level: { type: Number, required: true },
+    root: { type: String, required: true },
+  },
+  inject: ["localMode", "fileLoader"],
+  data() {
+    return {
+      imageUrl: "",
+      imageHeight: 0,
+      hourMark: new Date().getHours(),
+      imagesPreloading: true,
+      loading: true,
+      firstImage: "",
+      preloadedSunSimImages: new Map(),
+    };
+  },
+  computed: {
+    minimapData() {
+      return this.minimapJSON[this.level];
+    },
+    hourMarkString() {
+      const hour = Math.floor(this.hourMark).toString().padStart(2, "0");
+      return `${hour}:00`;
+    },
+    timeString() {
+      if (this.minimapData.sunsimFilesTimeStamps[this.hourMark]) {
+        const date =
+          this.minimapData.sunsimFilesTimeStamps[this.hourMark].split(" ");
+
+        return `${date[0]} ${date[1]}`;
+      }
+
+      return "";
+    },
+  },
+  async mounted() {
+    this.firstImage = await this.fetchAndConvertToBase64(
+      this.minimapData.sunsimFiles[this.hourMark]
+    );
+
+    this.loading = false;
+
+    const backgroundImages = await this.preloadImages(this.minimapJSON);
+    this.preloadedSunSimImages = backgroundImages;
+    this.imagesPreloading = false;
+    this.$emit(
+      "set-background-image",
+      this.getImageUrl(this.level, this.hourMark)
+    );
+  },
+  watch: {
+    hourMark() {
+      const newImage = this.getImageUrl(this.level, this.hourMark);
+
+      this.$emit("set-background-image", newImage);
+    },
+    level: {
+      handler() {
+        this.$emit(
+          "set-background-image",
+          this.getImageUrl(this.level, this.hourMark)
+        );
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getImageUrl(level, hourMark) {
+      // if (this.imagesPreloading) return this.firstImage
+
+      if (this.preloadedSunSimImages.get(`sunsim${level}_${hourMark}`))
+        return this.preloadedSunSimImages.get(`sunsim${level}_${hourMark}`);
+      return "";
+    },
+    async preloadImages(minimapJSON) {
+      let images = new Map();
+
+      for (let i = 0; i < minimapJSON.length; i++) {
+        const sunsimFiles = minimapJSON[i].sunsimFiles;
+
+        for (let j = 0; j < sunsimFiles.length; j++) {
+          const element = sunsimFiles[j];
+
+          try {
+            const url = element;
+            const nameOnly = element.split(".");
+            const image = await this.fetchAndConvertToBase64(this.root + url);
+
+            images.set(nameOnly[0], image);
+          } catch (e) {
+            continue;
+            // ignore on fetch errors
+          }
+        }
+      }
+
+      return images;
+    },
+    async fetchAndConvertToBase64(url) {
+      let actualUrl = url;
+
+      if (this.localMode) {
+        actualUrl = `${this.fileLoader.getURL(url)}`;
+      }
+
+      const response = await fetch(actualUrl);
+      const blob = await response.blob();
+      const base64 = await this.convertToBase64(blob);
+      const base64Image = this.base64toImage(base64);
+      return base64Image;
+    },
+    base64toImage(base64) {
+      return "data:image/jpeg;base64," + base64;
+    },
+    async convertToBase64(blob) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const base64 = reader.result.split(",")[1];
+          resolve(base64);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ss-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 10px;
+  position: relative;
+  z-index: 100;
+}
+
+.sun-icon {
+  width: 10%;
+}
+
+.slider {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: 3px 0;
+}
+
+i.v-icon.notranslate.mdi.mdi-white-balance-sunny.theme--light {
+  font-size: 40px;
+  color: #ffab02;
+  padding: 5px;
+}
+
+.time-label {
+  padding: 0;
+  display: inline-block;
+  margin-top: -10px;
+  margin-left: 50px;
+}
+</style>

package/src/components/virtualTourV2/minimapv2/index.js

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

package/src/entry.esm.js

@@ -0,0 +1,17 @@
+// Import vue components
+import * as components from '@/components/index'
+
+// install function executed by Vue.use()
+const install = function installVisuadoVueComponents(Vue) {
+  Object.entries(components).forEach(([componentName, component]) => {
+    Vue.component(componentName, component)
+  })
+}
+
+// Create module definition for Vue.use()
+export default install
+
+// To allow individual component use, export components
+// each can be registered via Vue.component()
+export * from '@/components/index'
+export * from '@/lib/index'

package/src/entry.js

@@ -0,0 +1,13 @@
+// iife/cjs usage extends esm default export - so import it all
+import plugin, * as components from '@/entry.esm'
+
+// Attach named exports directly to plugin. IIFE/CJS will
+// only expose one global var, with component exports exposed as properties of
+// that global var (eg. plugin.component)
+Object.entries(components).forEach(([componentName, component]) => {
+  if (componentName !== 'default') {
+    plugin[componentName] = component
+  }
+})
+
+export default plugin

package/src/entry.ts_

@@ -0,0 +1,17 @@
+// Import vue components
+import * as components from '@/components/index'
+
+// install function executed by Vue.use()
+const install = function installQiSpaceVueComponents(Vue) {
+  Object.entries(components).forEach(([componentName, component]) => {
+    Vue.component(componentName, component)
+  })
+}
+
+// Create module definition for Vue.use()
+export default install
+
+// To allow individual component use, export components
+// each can be registered via Vue.component()
+export * from '@/components/index'
+export * from '@/lib/index'

package/src/lib/apartmentChooser/BuildingViewerModel.js

@@ -0,0 +1,60 @@
+export const SCENE_COUNT = 4
+
+export function nextScene(fromScene) {
+  return fromScene < SCENE_COUNT ? fromScene + 1 : 1
+}
+
+export function prevScene(fromScene) {
+  return fromScene > 1 ? fromScene - 1 : SCENE_COUNT
+}
+
+export class BuildingViewerModel {
+  constructor(scene) {
+    this._state = {
+      isRotating: false,
+      currentScene: scene,
+    }
+  }
+
+  get isRotating() {
+    return this._state.isRotating
+  }
+
+  set isRotating(value) {
+    this._state.isRotating = value
+  }
+
+  get navigator() {
+    return this._navigator
+  }
+
+  get sceneModel() {
+    return this._sceneModel
+  }
+
+  unlessRotatingDo(action) {
+    if (!this.isRotating) {
+      action()
+    }
+  }
+
+  get currentScene() {
+    return this._state.currentScene
+  }
+
+  set currentScene(value) {
+    this._state.currentScene = value
+  }
+
+  rotateCounterClockwise() {
+    this.unlessRotatingDo(() => {
+      this.currentScene = nextScene(this.currentScene)
+    })
+  }
+
+  rotateClockwise() {
+    this.unlessRotatingDo(() => {
+      this.currentScene = prevScene(this.currentScene)
+    })
+  }
+}

package/src/lib/apartmentChooser/CircularSlideshow.js

@@ -0,0 +1,66 @@
+import Vue from 'vue'
+
+export class CircularSlideshow {
+  static create(imageFetcher, limit = undefined) {
+    const slideshow = new CircularSlideshow(imageFetcher, limit)
+    slideshow.activate()
+    return slideshow
+  }
+
+  constructor(imageFetcher, limit) {
+    this._fetcher = imageFetcher
+    this._imageFetcher = imageFetcher
+    this._imageIndex = 0
+    this._limit = limit
+
+    this._state = Vue.observable({ isActive: false, image: undefined })
+  }
+
+  install(component, showInterval) {
+    const interval = setInterval(() => {
+      this.showNext()
+    }, showInterval)
+
+    component.$on('hook:beforeDestroy', () => {
+      clearInterval(interval)
+    })
+  }
+
+  async activate() {
+    this._imageIndex = 0
+    this._state.isActive = await this._fetchImage()
+      .then(() => true)
+      .catch(() => false)
+  }
+
+  async showNext() {
+    this._imageIndex++
+    if (this._limit) this._imageIndex = this._imageIndex % this._limit
+
+    try {
+      await this._fetchImage()
+    } catch {
+      this._limit = this._imageIndex - 1
+      await this._reset()
+    }
+  }
+
+  get isActive() {
+    return this._state.isActive
+  }
+
+  get image() {
+    return this._state.image
+  }
+
+  _fetchImage() {
+    return this._fetcher(this._imageIndex).then(
+      (image) => (this._state.image = image)
+    )
+  }
+
+  async _reset() {
+    this._imageIndex = 0
+    await this._fetchImage()
+  }
+}

package/src/lib/apartmentChooser/RotationStep.js

@@ -0,0 +1,31 @@
+export class RotationStep {
+  constructor(rotator, direction, frameIndex, sceneCount) {
+    this._rotator = rotator
+    this._direction = direction
+    this._frameIndex = frameIndex
+    this._sceneCount = sceneCount
+  }
+
+  get atEnd() {
+    return this._sceneCount === 0
+  }
+
+  get frameIndex() {
+    return this._frameIndex
+  }
+
+  nextFrame() {
+    const nextFrameIndex = this._rotator.clampFrameIndex(
+      this._frameIndex + this._direction
+    )
+    const sceneCount = this._rotator.isCardinalFrame(nextFrameIndex)
+      ? this._sceneCount - 1
+      : this._sceneCount
+    return new RotationStep(
+      this._rotator,
+      this._direction,
+      nextFrameIndex,
+      sceneCount
+    )
+  }
+}