@qispace/vue3-player 0.0.5

package/src/components/apartmentChooser/QiApartmentChooserRaster.vue

@@ -0,0 +1,408 @@
+<template>
+  <div id="canvas">
+    <canvas
+      v-show="!viewModel.isRotating"
+      id="canvas-mask"
+      ref="canvasMask"
+      :style="canvasStyle"
+      @click="clickCanvas"
+    ></canvas>
+    <qi-hover-probe ref="hoverProbe" />
+  </div>
+</template>
+
+<script>
+import { ResourceLoader } from "@/lib/shared/ResourceLoader";
+import QiHoverProbe from "@/components/shared/QiHoverProbe.vue";
+import throttle from "@/lib/apartmentChooser/throttle";
+
+export default {
+  name: "QiApartmentChooserRaster",
+  components: { QiHoverProbe },
+  mixins: [throttle],
+  props: {
+    cdnFileResolver: { type: Function, required: true },
+    viewModel: { type: Object, required: true },
+    selectedUnitId: { type: String, default: null },
+    unitCallback: { type: Function, default: (aptId) => aptId },
+    canGoToUnitCallback: { type: Function, default: () => true },
+    sceneData: { type: Array, default: [] },
+    colorCallback: {
+      type: Function,
+      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
+    },
+    drawObserver: {
+      type: [Object, Array, String, Number, Boolean],
+      default: null,
+    },
+  },
+  emits: ["select-unit", "go-to-unit", "hover-over", "hover-out"],
+  data() {
+    return {
+      pos: { x: 0, y: 0, width: 0, height: 0 },
+      canvas: null,
+      canvasBg: null,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      context: null,
+      contextBg: null,
+      image: null,
+      imageData: null,
+      originalImageData: null,
+      hoverApartmentIndex: -1,
+      showApartmentCard: false,
+      cursorX: null,
+      cursorY: null,
+      rasterImages: {},
+      vueCanvasCursor: "auto",
+      timeout: null,
+      windowListener: undefined,
+      resourceLoader: new ResourceLoader(),
+      apartmentIndexRasterMap: {},
+    };
+  },
+  computed: {
+    isHoverable() {
+      return this.$refs.hoverProbe.isHoverEnabled;
+    },
+    rasterUrl() {
+      return this.cdnFileResolver(
+        `/scenedata${this.viewModel.currentScene}.png`
+      );
+    },
+    rasterImage() {
+      return this.rasterUrl in this.rasterImages
+        ? this.rasterImages[this.rasterUrl]
+        : null;
+    },
+    hoverApartment() {
+      if (this.hoverApartmentIndex < 0) {
+        return false;
+      }
+
+      const apartment = this.sceneData.find(
+        (x) => x.index === this.hoverApartmentIndex
+      );
+
+      if (apartment) {
+        return this.unitCallback
+          ? this.unitCallback(apartment.apartmentId)
+          : apartment.apartmentId;
+      } else {
+        return false;
+      }
+    },
+    canvasStyle() {
+      return {
+        width: this.canvasWidth + "px",
+        height: this.canvasHeight + "px",
+        cursor: this.vueCanvasCursor,
+      };
+    },
+    hoverBehaviourIdentifier() {
+      return `hover-${this.showApartmentCard ? "over" : "out"}-${
+        this.hoverApartment
+          ? typeof this.hoverApartment === "object" &&
+            "unitId" in this.hoverApartment
+            ? this.hoverApartment.unitId
+            : this.hoverApartment
+          : ""
+      }`;
+    },
+  },
+  watch: {
+    rasterUrl: {
+      handler() {
+        if (!this.rasterImages[this.rasterUrl]) {
+          this.resourceLoader
+            .loadImageData(this.rasterUrl)
+            .then((objectURL) => {
+              this.rasterImages = {
+                ...this.rasterImages,
+                [this.rasterUrl]: objectURL,
+              };
+            });
+        }
+      },
+      immediate: true,
+    },
+    rasterImage() {
+      if (this.rasterImage) {
+        this.init();
+      }
+    },
+    "viewModel.currentScene": {
+      handler() {
+        this.draw();
+      },
+      immediate: true,
+    },
+    "viewModel.isRotating"() {
+      this.draw();
+    },
+    drawObserver() {
+      // This is here to trigger redraws on change, nothing else
+      this.draw();
+    },
+    selectedUnitId() {
+      this.draw();
+    },
+    hoverApartment() {
+      this.draw();
+      if (this.hoverApartment) {
+        this.vueCanvasCursor = "pointer";
+      } else {
+        this.vueCanvasCursor = "auto";
+      }
+    },
+    hoverBehaviourIdentifier() {
+      this.$emit(this.showApartmentCard ? "hover-over" : "hover-out", {
+        hoverApartment: this.hoverApartment,
+        closeHandler: () => this.closeDialog(),
+      });
+    },
+    pos() {
+      this.$emit("pos", this.pos);
+    },
+  },
+  mounted() {
+    this.windowListener = () => {
+      clearTimeout(this.timeout);
+      this.updateCanvasSize();
+      // resize needs to happen one more time after last event to make sure everything is synced
+      // could check if widths align document.getElementById('canvas').offsetWidth and rerun if needed
+      this.timeout = setTimeout(() => {
+        this.updateCanvasSize();
+      }, 50);
+    };
+    window.addEventListener("resize", this.windowListener);
+    this.updateCanvasSize();
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.windowListener);
+    for (const key in this.rasterImages) {
+      URL.revokeObjectURL(this.rasterImages[key]);
+    }
+  },
+  methods: {
+    init() {
+      this.canvas = this.$refs.canvasMask;
+      this.context = this.canvas.getContext("2d", { willReadFrequently: true });
+      this.image = new Image();
+      this.image.onload = () => {
+        this.setupDraw();
+        this.canvas.addEventListener(
+          "mousemove",
+          this.throttle(this.handleMouseMove, 50)
+        );
+      };
+      this.image.src = this.rasterImage;
+    },
+    handleMouseMove(e) {
+      const index = this.getApartmentIndexByCursorPosition(
+        e.offsetX,
+        e.offsetY
+      );
+      this.showApartmentCard = index >= 0;
+      this.hoverApartmentIndex = index;
+      this.pos = {
+        x: e.offsetX,
+        y: e.offsetY,
+        width: this.canvasWidth,
+        height: this.canvasHeight,
+      };
+    },
+    clickCanvas(e) {
+      const index = this.getApartmentIndexByCursorPosition(
+        e.offsetX,
+        e.offsetY
+      );
+      if (index < 0) return;
+      if (this.isHoverable) {
+        this.goToApartmentByIndex(index);
+      }
+    },
+    setImageData() {
+      if (this.image && this.image.width) {
+        this.canvas.width = this.image.width;
+        this.canvas.height = this.image.height;
+        this.context.drawImage(
+          this.image,
+          0,
+          0,
+          this.image.width,
+          this.image.height
+        );
+        this.originalImageData = this.context.getImageData(
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+        this.imageData = this.context.getImageData(
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+
+        const data = this.originalImageData.data;
+        this.apartmentIndexRasterMap = {};
+        for (let i = 0; i < data.length; i += 4) {
+          this.apartmentIndexRasterMap[data[i]] = [];
+        }
+        for (let i = 3; i < data.length; i += 4) {
+          if (data[i] === 255 && data[i - 3] in this.apartmentIndexRasterMap) {
+            this.apartmentIndexRasterMap[data[i - 3]].push(i - 3);
+          }
+        }
+      }
+    },
+    getApartmentIndexByCursorPosition(x, y) {
+      this.cursorX = x;
+      this.cursorY = y;
+
+      const widthScale = this.canvas.offsetWidth / this.canvas.width;
+      const heightScale = this.canvas.offsetHeight / this.canvas.height;
+      const rasterCursorX = (x / widthScale).toFixed();
+      const rasterCursorY = (y / heightScale).toFixed();
+
+      const index = rasterCursorY * (this.canvas.width * 4) + rasterCursorX * 4;
+      const apartmentIndex = this.originalImageData.data[index];
+      const isApartment = this.originalImageData.data[index + 3] > 0;
+      return isApartment ? apartmentIndex : -1;
+    },
+    getApartmentIndexById(id) {
+      const apartment = this.sceneData.find((x) => x.apartmentId === id);
+      return !apartment ? -1 : apartment.index;
+    },
+    highlightApartments() {
+      const apartments = this.getApartmentsInRaster();
+      apartments.forEach((apartment) => {
+        if (apartment.index >= 0) {
+          const pixels = this.getApartmentPixelsByIndex(apartment.index);
+          const aptId = this.getApartmentIdByIndex(apartment.index);
+          let type = "idle";
+          if (
+            !this.hoverApartment &&
+            this.selectedUnitId &&
+            aptId === this.selectedUnitId
+          ) {
+            type = "selected";
+          } else if (
+            this.hoverApartment &&
+            this.hoverApartmentIndex === apartment.index
+          ) {
+            type = "hover";
+          }
+          const unit = this.unitCallback ? this.unitCallback(aptId) : aptId;
+          if (unit) {
+            const color = this.colorCallback(unit, type);
+            if (color) {
+              for (let i = 0; i < pixels.length; i++) {
+                this.imageData.data[pixels[i]] = color.r; // R
+                this.imageData.data[pixels[i] + 1] = color.g; // G
+                this.imageData.data[pixels[i] + 2] = color.b; // B
+                this.imageData.data[pixels[i] + 3] = color.a; // A
+              }
+            }
+          }
+        }
+      });
+    },
+    // GETTING APARTMENT DATA
+    // Returns the index of each RGBA value of a given apartment
+    getApartmentPixelsByIndex(apartmentIndex) {
+      return !this.originalImageData
+        ? false
+        : this.apartmentIndexRasterMap[apartmentIndex];
+    },
+    getApartmentIdByIndex(apartmentIndex) {
+      const apartment = this.sceneData.find((x) => x.index === apartmentIndex);
+      return apartment && apartment.apartmentId;
+    },
+    getApartmentsInRaster() {
+      if (this.originalImageData) {
+        const uniqueIndices = Object.keys(this.apartmentIndexRasterMap).map(
+          (i) => parseInt(i)
+        );
+        // Filter scenedata down to only one object per unique apartment
+        const filteredSceneData = this.sceneData.filter((x) =>
+          uniqueIndices.includes(x.index)
+        );
+        return filteredSceneData;
+      } else {
+        return [];
+      }
+    },
+    goToApartmentByIndex(index) {
+      const apartmentId = this.getApartmentIdByIndex(index);
+      this.goToApartmentById(apartmentId);
+    },
+    goToApartmentById(apartmentId) {
+      const arg = this.unitCallback
+        ? this.unitCallback(apartmentId)
+        : apartmentId;
+      this.$emit("select-unit", arg);
+      if (arg && this.canGoToUnitCallback(arg)) {
+        this.$emit("go-to-unit", arg);
+      }
+    },
+    setAlpha(alpha = 0) {
+      if (!this.imageData) {
+        return;
+      }
+
+      const data = this.imageData.data;
+      for (let i = 3; i < data.length; i += 4) {
+        data[i] = alpha;
+      }
+    },
+    updateCanvasSize() {
+      if (!this.$el) {
+        return false;
+      }
+
+      this.canvasWidth = this.$el.offsetWidth;
+      this.canvasHeight = this.$el.offsetHeight;
+    },
+    setupDraw() {
+      this.setImageData();
+      this.draw();
+    },
+    draw() {
+      this.setAlpha();
+      this.highlightApartments();
+      if (this.context && this.imageData) {
+        this.context.putImageData(this.imageData, 0, 0);
+      }
+    },
+    closeDialog() {
+      this.showApartmentCard = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+#canvas {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  user-select: none;
+  touch-action: none;
+  padding-top: 56.25%;
+}
+#canvas-mask {
+  position: absolute;
+  top: 0;
+  max-width: 100%;
+  z-index: 4;
+  user-select: none;
+}
+@media only screen and (min-width: 1280px) {
+  #canvas {
+    border-radius: 10px;
+  }
+}
+</style>

package/src/components/apartmentChooser/QiApartmentChooserRotator.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div
+      v-if="loadTracker.isError"
+      class="fill-parent d-flex justify-center align-center blue-grey lighten-5"
+    >
+      <v-icon x-large>mdi-alert-circle-outline</v-icon>
+    </div>
+    <div v-else-if="!isPreloaded" class="frame-container">
+      <picture class="frame-image">
+        <source :srcset="activeFrame.sourceSet" :type="activeFrame.type" />
+        <img
+          :src="activeFrame.defaultPath"
+          @load="isPreloaded = true"
+          @error="loadTracker.errorDetected()"
+        />
+      </picture>
+    </div>
+    <div v-else id="image-stack" class="frame-container">
+      <picture
+        v-for="img in images"
+        :key="img.index"
+        :alt="img.index"
+        :class="{ 'frame-image': true, show: img.show }"
+      >
+        <source :srcset="img.sourceSet" type="image/jpeg" />
+        <img
+          :src="img.defaultPath"
+          alt="Building image"
+          @load="loadTracker.partLoaded()"
+          @error="loadTracker.errorDetected()"
+        />
+      </picture>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BatchLoadTracker } from '@/lib/shared/BatchLoadTracker'
+import { SceneRotator } from '@/lib/apartmentChooser/SceneRotator'
+
+const totalFrameCount = 64
+const totalScenesCount = 4
+const fps = 120
+
+export default {
+  name: 'QiApartmentChooserRotator',
+  props: {
+    viewModel: { type: Object, required: true },
+    build: { type: String, default: '' },
+    cdnFileResolver: { type: Function, required: true },
+    cardinalFrames: { type: Array, required: true },
+  },
+  emits: ['loaded', 'error', 'progress'],
+  data() {
+    const frames = this.createFrames()
+    return {
+      loadTracker: new BatchLoadTracker(frames.length)
+        .onLoadFinished(() => this.$emit('loaded'))
+        .onLoadProgress((percent) => this.$emit('progress', percent))
+        .onLoadError(() => this.$emit('error')),
+      sceneRotator: new SceneRotator(this.cardinalFrames, totalFrameCount),
+      images: frames,
+      isPreloaded: false,
+    }
+  },
+  computed: {
+    activeFrame() {
+      return this.images.find((f) => f.show)
+    },
+  },
+  watch: {
+    'viewModel.currentScene'(newVal, oldVal) {
+      const direction = this.getDirection(oldVal, newVal)
+      const sceneCount = this.getSceneCountBetween(oldVal, newVal)
+      this.rotateInDirection(oldVal, direction, sceneCount)
+    },
+  },
+  created() {
+    this.rotateComplete()
+  },
+  methods: {
+    rotateInDirection(fromScene, direction, sceneCount) {
+      if (this.viewModel.isRotating) {
+        return
+      }
+
+      this.viewModel.isRotating = true
+      this.rotationStep(
+        this.sceneRotator.start(
+          direction,
+          fromScene % totalScenesCount,
+          sceneCount
+        )
+      )
+    },
+    rotationStep(step) {
+      setTimeout(() => {
+        this.images[step.frameIndex].show = false
+        const nextStep = step.nextFrame()
+        this.images[nextStep.frameIndex].show = true
+        if (nextStep.atEnd) {
+          this.rotateComplete()
+        } else {
+          window.requestAnimationFrame(() => this.rotationStep(nextStep))
+        }
+      }, 1000 / fps)
+    },
+    rotateComplete() {
+      const finalFrameIndex = this.sceneRotator.startFrameIndexForScene(
+        this.viewModel.currentScene % totalScenesCount
+      )
+      if (finalFrameIndex in this.images) {
+        this.images[finalFrameIndex].show = true
+      }
+      this.viewModel.isRotating = false
+    },
+    createFrames() {
+      const arr = []
+      for (let i = 0; i < totalFrameCount; i++) {
+        const { sourceSet, defaultPath } = this.frameImageSource(i)
+        arr.push({
+          index: i,
+          sourceSet,
+          defaultPath,
+          show: false,
+        })
+      }
+      return arr
+    },
+    frameImageSource(frameIndex) {
+      const filename = ('0000' + (frameIndex + 1)).slice(-4)
+      const buildSuffix = this.build ? `?v=${this.build}` : ''
+      const sourceSet = [
+        `${this.cdnFileResolver(`/480/${filename}.jpg${buildSuffix}`)} 480w`,
+        `${this.cdnFileResolver(`/960/${filename}.jpg${buildSuffix}`)} 960w`,
+        `${this.cdnFileResolver(`/1280/${filename}.jpg${buildSuffix}`)} 1280w`,
+      ].join(',')
+      const defaultPath = this.cdnFileResolver(
+        `/480/${filename}.jpg${buildSuffix}`
+      )
+      return { sourceSet, defaultPath }
+    },
+    getSceneCountBetween(fromScene, toScene) {
+      const halfCircle = totalScenesCount / 2
+      const absDistance = Math.abs(fromScene - toScene)
+      return absDistance > halfCircle
+        ? totalScenesCount - absDistance
+        : absDistance
+    },
+    getDirection(fromScene, toScene) {
+      if (fromScene === toScene) {
+        return 0
+      }
+
+      const distance = Math.abs(fromScene - toScene)
+      const internal = distance < totalScenesCount / 2
+      return (internal && fromScene < toScene) ||
+        (!internal && fromScene > toScene)
+        ? 1
+        : -1
+    },
+  },
+}
+</script>
+
+<style scoped>
+.frame-container {
+  position: relative;
+  max-width: 100%;
+  top: 0;
+  left: 0;
+  bottom: 185px;
+  padding-top: 56%;
+  z-index: 1;
+  overflow: hidden;
+}
+.frame-image {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.frame-image img {
+  min-width: 100%;
+  max-width: 100%;
+  z-index: 0;
+}
+#image-stack picture {
+  visibility: hidden;
+}
+#image-stack picture.show {
+  visibility: visible;
+}
+.fill-parent {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>