@qispace/vue3-player 0.0.5

package/src/components/apartmentChooser/QiApartmentChooserSvg.vue

@@ -0,0 +1,257 @@
+<template>
+  <div id="container" ref="container">
+    <div
+      v-show="!viewModel.isRotating"
+      class="svg-container"
+      :style="{
+        opacity: !currentSvgImage || !currentSvgImage.svgObjects ? 0 : 1,
+      }"
+    >
+      <svg
+        v-if="currentSvgImage && currentSvgImage.svgObjects"
+        :viewBox="currentSvgImage.viewBox"
+      >
+        <g
+          v-for="{ index, svg } of currentSvgImage.svgObjects"
+          :key="index"
+          v-html="svg"
+          :style="getGClass(index)"
+          @mouseenter="mouseEnter(index)"
+          @mouseleave="mouseLeave(index)"
+          @click="click(index)"
+        />
+      </svg>
+    </div>
+    <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: "QiApartmentChooserSvg",
+  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 },
+      hoverApartmentIndex: -1,
+      svgImages: {},
+      currentSvgImage: null,
+      resourceLoader: new ResourceLoader(),
+    };
+  },
+  computed: {
+    isHoverable() {
+      return this.$refs.hoverProbe.isHoverEnabled;
+    },
+  },
+  watch: {
+    "viewModel.currentScene": {
+      handler() {
+        if (this.viewModel.currentScene in this.svgImages) {
+          this.currentSvgImage = this.svgImages[this.viewModel.currentScene];
+        }
+      },
+      immediate: true,
+    },
+    svgImages: {
+      handler() {
+        if (this.viewModel.currentScene in this.svgImages) {
+          this.currentSvgImage = this.svgImages[this.viewModel.currentScene];
+        }
+      },
+      immediate: true,
+    },
+    pos() {
+      this.$emit("pos", this.pos);
+    },
+    hoverApartmentIndex(current, prev) {
+      if (current >= 0) {
+        const hoverApartment = this.getApartmentByIndex(current);
+        this.$emit("hover-over", {
+          hoverApartment,
+          closeHandler: () => {
+            this.hoverApartmentIndex = -1;
+          },
+        });
+      } else {
+        const hoverApartment = this.getApartmentByIndex(prev);
+        this.$emit("hover-out", {
+          hoverApartment,
+          closeHandler: () => {
+            this.hoverApartmentIndex = -1;
+          },
+        });
+      }
+    },
+  },
+  mounted() {
+    for (let i = 1; i <= 4; i++) {
+      const url = this.cdnFileResolver(`/scenedata${i}.svg`);
+      const svgImage = {};
+      this.resourceLoader.loadJson(url).then((markup) => {
+        svgImage.markup = markup;
+        const parser = new DOMParser();
+        const dom = parser
+          .parseFromString(markup, "image/svg+xml")
+          .getElementsByTagName("svg")[0];
+        svgImage.viewBox = dom.getAttribute("viewBox");
+        svgImage.svgObjects = Array.from(
+          dom.querySelectorAll("*[data-index]")
+        ).map((dom) => ({
+          index: parseInt(dom.getAttribute("data-index")),
+          svg: dom.innerHTML,
+        }));
+        this.svgImages = { ...this.svgImages, [i]: svgImage };
+      });
+    }
+    this.$refs.container.addEventListener(
+      "mousemove",
+      this.throttle(this.handleMouseMove, 50)
+    );
+  },
+  methods: {
+    handleMouseMove(e) {
+      this.pos = {
+        x: e.offsetX,
+        y: e.offsetY,
+        width: this.$el.offsetWidth,
+        height: this.$el.offsetHeight,
+      };
+    },
+    getApartmentIdByIndex(index) {
+      return this.sceneData.find((x) => x.index === parseInt(index))
+        ?.apartmentId;
+    },
+    getApartmentByIndex(index) {
+      const apartmentId = this.getApartmentIdByIndex(index);
+      return this.unitCallback ? this.unitCallback(apartmentId) : apartmentId;
+    },
+    mouseEnter(index) {
+      if (this.isHoverable) {
+        this.hoverApartmentIndex = index;
+      }
+    },
+    mouseLeave() {
+      if (this.isHoverable) {
+        this.hoverApartmentIndex = -1;
+      }
+    },
+    click(index) {
+      const clickApartment = this.getApartmentByIndex(index);
+      this.$emit("select-unit", clickApartment);
+      if (
+        this.isHoverable &&
+        clickApartment &&
+        this.canGoToUnitCallback(clickApartment)
+      ) {
+        this.$emit("go-to-unit", clickApartment);
+      } else {
+        this.hoverApartmentIndex = index;
+      }
+    },
+    getGClass(index) {
+      const apartmentId = this.getApartmentIdByIndex(index);
+      const apartment = this.getApartmentByIndex(index);
+      let type = "idle";
+      if (
+        this.hoverApartmentIndex < 0 &&
+        this.selectedUnitId &&
+        apartmentId === this.selectedUnitId
+      ) {
+        type = "selected";
+      } else if (
+        this.hoverApartmentIndex >= 0 &&
+        this.hoverApartmentIndex === index
+      ) {
+        type = "hover";
+      }
+      const color = this.colorCallback(apartment, type);
+      if (color) {
+        const { r, g, b, a, s } = color;
+        return {
+          strokeWidth: s !== undefined ? s : 2,
+          stroke: `rgb(${r}, ${g}, ${b})`,
+          strokeOpacity: 1,
+          fill: `rgb(${r}, ${g}, ${b})`,
+          fillOpacity: a / 255,
+          cursor: `${
+            this.canGoToUnitCallback(apartment) ? "cursor" : "default"
+          } !important`,
+        };
+      } else {
+        return {
+          strokeWidth: 0,
+          stroke: "white",
+          strokeOpacity: 0,
+          fill: "white",
+          fillOpacity: 0,
+          cursor: "default !important",
+        };
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+#container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  user-select: none;
+  touch-action: none;
+  padding-top: 56.25%;
+}
+.svg-container {
+  transition-property: opacity;
+  transition-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.svg-container,
+svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+}
+svg g :deep(path) {
+  cursor: pointer;
+  stroke-width: inherit !important;
+  stroke-opacity: inherit !important;
+  stroke: inherit !important;
+  fill: inherit !important;
+  fill-opacity: inherit !important;
+  transition-property: fill-opacity, fill;
+  transition-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@media only screen and (min-width: 1280px) {
+  #canvas {
+    border-radius: 10px;
+  }
+}
+</style>

package/src/components/apartmentChooser/index.js

@@ -0,0 +1,5 @@
+export { default as QiApartmentChooser } from './QiApartmentChooser.vue'
+export { default as QiApartmentChooserNavigation } from './QiApartmentChooserNavigation.vue'
+export { default as QiApartmentChooserSvg } from './QiApartmentChooserSvg.vue'
+export { default as QiApartmentChooserRaster } from './QiApartmentChooserRaster.vue'
+export { default as QiApartmentChooserRotator } from './QiApartmentChooserRotator.vue'

package/src/components/buildingPicker/QiBuildingChooser.vue

@@ -0,0 +1,61 @@
+<template>
+  <component
+    :is="component"
+    :show-cards="showCards"
+    :color-callback="colorCallback"
+    :building-callback="buildingCallback"
+    :cdn-file-resolver="cdnFileResolver"
+    :i18n="i18n"
+    :interactive-desktop="interactiveDesktop"
+    :interactive-mobile="interactiveMobile"
+    :building-chooser-time-of-day="buildingChooserTimeOfDay"
+    :can-go-to-building-callback="canGoToBuildingCallback"
+    :custom-overlay-content="customOverlayContent"
+    @go-to-building="$emit('go-to-building', $event)"
+    @hover-over-building="$emit('hover-over-building', $event)"
+    @hover-out-building="$emit('hover-out-building', $event)"
+  >
+    <template
+      v-for="slot in Object.keys($slots)"
+      :key="slot"
+      v-slot:[slot]="scope"
+    >
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </component>
+</template>
+
+<script>
+import QiBuildingChooserSvg from "./QiBuildingChooserSvg.vue";
+import QiBuildingChooserRaster from "./QiBuildingChooserRaster.vue";
+
+export default {
+  name: "QiBuildingChooser",
+  components: {
+    QiBuildingChooserSvg,
+    QiBuildingChooserRaster,
+  },
+  emits: ["go-to-building", "hover-over-building", "hover-out-building"],
+  props: {
+    showCards: { type: Boolean, default: () => true },
+    colorCallback: {
+      type: Function,
+      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
+    },
+    buildingCallback: { type: Function, default: (buildingId) => buildingId },
+    cdnFileResolver: { type: Function, required: true },
+    i18n: { type: Object, default: undefined },
+    interactiveDesktop: { type: Boolean, default: true },
+    interactiveMobile: { type: Boolean, default: true },
+    useSvg: { type: Boolean, default: false },
+    buildingChooserTimeOfDay: { type: String, default: null },
+    canGoToBuildingCallback: { type: Function, default: () => true },
+    customOverlayContent: { type: String, default: "" },
+  },
+  computed: {
+    component() {
+      return this.useSvg ? QiBuildingChooserSvg : QiBuildingChooserRaster;
+    },
+  },
+};
+</script>

package/src/components/buildingPicker/QiBuildingChooserRaster.vue

@@ -0,0 +1,312 @@
+<template>
+  <div
+    v-if="error"
+    style="height: 50vh"
+    class="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="pickerData"
+    :style="`cursor: ${selectedBuildingId ? 'pointer' : 'auto'};height: ${
+      canvasDimensions.height
+    }px; position: relative`"
+    class="image-container"
+  >
+    <qi-zoom-box
+      :desktop="interactiveDesktop"
+      :mobile="interactiveMobile"
+      @update="updateView"
+    >
+      <div class="image-instances">
+        <qi-building-chooser-scene-image-stack
+          :image-urls="daysOfYear.imageUrls"
+          :active-index="halfHourMark"
+          @resize="resizeScene"
+          @preloaded="sceneState.preloaded = true"
+          @ready="sceneState.ready = true"
+          @reset="sceneReset"
+        />
+        <div v-show="sceneState.preloaded">
+          <qi-building-chooser-raster-overlay
+            v-for="overlay of pickerData.buildingOverlays"
+            ref="overlays"
+            :key="overlay.id"
+            :image-url="overlay.url"
+            :dimensions="canvasDimensions"
+            :color="getColor(overlay.id)"
+          />
+        </div>
+      </div>
+      <canvas
+        v-bind="canvasDimensions"
+        ref="canvas"
+        :class="{ hover: !!selectedBuildingId }"
+        @click="onClick"
+        @mousemove="onMove"
+      />
+      <div
+        v-show="sceneState.preloaded"
+        class="custom-overlay-layer"
+        v-html="customOverlayContent"
+      ></div>
+    </qi-zoom-box>
+    <div v-show="sceneState.preloaded">
+      <qi-north-direction
+        v-if="pickerData.sceneLongitude"
+        class="north-indicator"
+        :longitude="pickerData.sceneLongitude"
+      />
+      <qi-building-chooser-sun-sim-control
+        v-model="halfHourMark"
+        :date-selector="daysOfYear"
+        :is-loading="!sceneState.ready"
+      />
+    </div>
+    <template v-if="showCards && selectedBuilding">
+      <qi-floating-card
+        :is-hoverable="isHoverable"
+        :pos="pos"
+        @outside="() => (selectedBuildingId = undefined)"
+      >
+        <slot
+          :building="selectedBuilding"
+          :can-go-to-building="canGoToBuildingCallback(selectedBuilding)"
+          :go-to-building="
+            () =>
+              canGoToBuildingCallback(selectedBuilding) &&
+              $emit('go-to-building', selectedBuilding)
+          "
+          :pos="pos"
+          :is-hoverable="isHoverable"
+          :close="() => (selectedBuildingId = undefined)"
+        />
+      </qi-floating-card>
+    </template>
+    <qi-hover-probe ref="hoverProbe" />
+  </div>
+</template>
+
+<script>
+import QiNorthDirection from "@/components/shared/QiNorthDirection.vue";
+import QiBuildingChooserRasterOverlay from "./QiBuildingChooserRasterOverlay.vue";
+import QiBuildingChooserSunSimControl from "./QiBuildingChooserSunSimControl.vue";
+import QiBuildingChooserSceneImageStack from "./QiBuildingChooserSceneImageStack.vue";
+import QiFloatingCard from "@/components/shared/QiFloatingCard.vue";
+import QiHoverProbe from "@/components/shared/QiHoverProbe.vue";
+import QiZoomBox from "@/components/shared/QiZoomBox.vue";
+import { BuildingPickerResourceProvider } from "@/lib/buildingPicker/BuildingPickerResourceProvider.js";
+import { BuildingMap } from "@/lib/buildingPicker/BuildingMap";
+import { CanvasRaster } from "@/lib/buildingPicker/CanvasRaster";
+import { DayOfYearSelector } from "@/lib/buildingPicker/DayOfYearSelector.js";
+import { defineComponent, ref } from "vue";
+import { I18N } from "@/lib/shared/I18N";
+
+export default defineComponent({
+  setup() {
+    const daysOfYear = ref({});
+  },
+  name: "QiBuildingChooserRaster",
+  components: {
+    QiBuildingChooserRasterOverlay,
+    QiBuildingChooserSunSimControl,
+    QiBuildingChooserSceneImageStack,
+    QiNorthDirection,
+    QiFloatingCard,
+    QiHoverProbe,
+    QiZoomBox,
+  },
+  emits: ["go-to-building", "hover-over-building", "hover-out-building"],
+  provide() {
+    const localizer = this.i18n
+      ? new I18N(this.i18n.labels, this.i18n.language)
+      : new I18N();
+    return {
+      i18n: localizer,
+    };
+  },
+  props: {
+    showCards: { type: Boolean, default: () => true },
+    colorCallback: {
+      type: Function,
+      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
+    },
+    buildingCallback: { type: Function, default: (buildingId) => buildingId },
+    canGoToBuildingCallback: { type: Function, default: () => true },
+    buildingChooserTimeOfDay: { type: String, default: null },
+    cdnFileResolver: { type: Function, required: true },
+    i18n: { type: Object, default: undefined },
+    interactiveDesktop: { type: Boolean, default: true },
+    interactiveMobile: { type: Boolean, default: true },
+    customOverlayContent: { type: String, default: "" },
+  },
+  data() {
+    return {
+      sceneState: { preloaded: false, ready: false },
+      canvasDimensions: { width: 0, height: 0 },
+      pos: { x: 0, y: 0, width: 0, height: 0 },
+      pickerData: undefined,
+      buildingMap: BuildingMap.empty(),
+      canvasRaster: CanvasRaster.empty(),
+      selectedBuildingId: undefined,
+      halfHourMark:
+        new Date().getHours() * 2 + (new Date().getMinutes() < 30 ? 0 : 1),
+      viewResolver: (x, y) => ({ x, y }),
+      error: false,
+    };
+  },
+  computed: {
+    isHoverable() {
+      return this.$refs.hoverProbe.isHoverEnabled;
+    },
+    selectedBuilding() {
+      return this.getBuildingData(this.selectedBuildingId);
+    },
+  },
+  watch: {
+    buildingChooserTimeOfDay: {
+      handler() {
+        if (this.buildingChooserTimeOfDay) {
+          const [_, hour, minutes] = /^(\d\d):(\d\d)$/.exec(
+            this.buildingChooserTimeOfDay
+          );
+          const ms = parseInt(minutes);
+          this.halfHourMark =
+            parseInt(hour) * 2 + (ms < 15 ? 0 : ms > 45 ? 2 : 1);
+        }
+      },
+      immediate: true,
+    },
+    selectedBuildingId(current, prev) {
+      if (current) {
+        this.$emit("hover-over-building", this.getBuildingData(current));
+      } else {
+        this.$emit("hover-out-building", this.getBuildingData(prev));
+      }
+    },
+  },
+  async mounted() {
+    const resourceProvider = new BuildingPickerResourceProvider(
+      this.cdnFileResolver
+    );
+    const configData = await resourceProvider.loadBuildingChooser();
+    if (configData) {
+      this.canvasRaster = new CanvasRaster(configData.mapImage);
+      this.buildingMap = new BuildingMap(configData.buildingIds);
+      this.daysOfYear = new DayOfYearSelector(configData.backgrounds);
+      this.pickerData = {
+        buildingOverlays: configData.buildingOverlays,
+        sceneLongitude: configData.viewLongitude,
+      };
+      this.resizeImages();
+    } else {
+      this.error = true;
+    }
+  },
+  methods: {
+    resizeScene({ width, height }) {
+      this.canvasDimensions.width = width;
+      this.canvasDimensions.height = height;
+      this.$nextTick(this.resizeImages);
+    },
+    sceneReset() {
+      this.sceneState = { preloaded: false, ready: false };
+    },
+    getBuildingData(buildingId) {
+      return this.buildingCallback
+        ? this.buildingCallback(buildingId)
+        : buildingId;
+    },
+    getBuildingId(event) {
+      const { x, y } = this.viewResolver(event.layerX, event.layerY);
+      return this.buildingMap.getBuildingId(this.canvasRaster, x, y);
+    },
+    resizeImages() {
+      if (!this.$refs.canvas) {
+        return;
+      }
+
+      this.canvasRaster.update(this.$refs.canvas);
+      if (this.$refs.overlays) {
+        for (const overlay of this.$refs.overlays) {
+          overlay.setupDraw();
+        }
+      }
+    },
+    onMove(evt) {
+      if (this.isHoverable) {
+        this.selectedBuildingId = this.getBuildingId(evt);
+
+        if (this.selectedBuildingId !== undefined) {
+          this.pos = {
+            x: evt.layerX,
+            y: evt.layerY,
+            width: this.canvasDimensions.width,
+            height: this.canvasDimensions.height,
+          };
+        }
+      }
+    },
+    onClick(evt) {
+      this.selectedBuildingId = this.getBuildingId(evt);
+      if (this.isHoverable && this.selectedBuilding) {
+        this.$emit("go-to-building", this.selectedBuilding);
+      }
+    },
+    getColor(buildingId) {
+      return this.colorCallback(
+        this.getBuildingData(buildingId),
+        buildingId === this.selectedBuildingId ? "hover" : "idle"
+      );
+    },
+    updateView({ resolve }) {
+      this.viewResolver = resolve;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.north-indicator {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 42px;
+  width: 42px;
+  margin-top: 12px;
+  margin-right: 8px;
+}
+.image-container {
+  position: relative;
+}
+.image-instances {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  opacity: 0;
+}
+.fill-parent {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape) {
+  div.image-container {
+    margin-top: 44px;
+  }
+}
+@media only screen and (max-width: 500px) {
+  div.image-container {
+    margin-top: 44px;
+    margin-bottom: 44px;
+  }
+}
+</style>