@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/apartmentChooser/QiApartmentChooserRaster.vue

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

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