@qispace/vue3-player 0.0.5

package/src/components/buildingPicker/QiBuildingChooserSvg.vue

@@ -0,0 +1,414 @@
+<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="`height: ${canvasDimensions.height}px; position: relative`"
+    class="image-container"
+  >
+    <qi-zoom-box :desktop="interactiveDesktop" :mobile="interactiveMobile">
+      <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-if="svgObjects" v-show="sceneState.preloaded">
+          <div class="svg-container">
+            <svg :viewBox="svgViewBox">
+              <g
+                v-for="({ id, svg }, index) of svgObjects"
+                :key="index"
+                v-html="svg"
+                :data-building-id="id"
+                :class="getGClass(id)"
+                :style="getGStyle(id)"
+                @mouseover="onBuildingMouseOver($event, id)"
+                @mouseout="onBuildingMouseOut($event, id)"
+                @mousemove="onBuildingMouseMove($event, id)"
+                @click="onBuildingClick(id)"
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          v-show="sceneState.preloaded"
+          class="custom-overlay-layer"
+          v-html="customOverlayContent"
+        ></div>
+      </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 && hoverBuilding">
+      <qi-floating-card
+        :is-hoverable="isHoverable"
+        :pos="pos"
+        @outside="() => (hoverBuildingId = undefined)"
+      >
+        <slot
+          :building="hoverBuilding"
+          :can-go-to-building="canGoToBuildingCallback(hoverBuilding)"
+          :go-to-building="
+            () =>
+              canGoToBuildingCallback(hoverBuilding) &&
+              $emit('go-to-building', hoverBuilding)
+          "
+          :pos="pos"
+          :is-hoverable="isHoverable"
+          :close="() => (hoverBuildingId = undefined)"
+        />
+      </qi-floating-card>
+    </template>
+    <qi-hover-probe ref="hoverProbe" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import QiNorthDirection from "@/components/shared/QiNorthDirection.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 { ResourceLoader } from "@/lib/shared/ResourceLoader.js";
+import { BuildingPickerResourceProvider } from "@/lib/buildingPicker/BuildingPickerResourceProvider.js";
+import { BuildingMap } from "@/lib/buildingPicker/BuildingMap.js";
+import { CanvasRaster } from "@/lib/buildingPicker/CanvasRaster.js";
+import { DayOfYearSelector } from "@/lib/buildingPicker/DayOfYearSelector.js";
+import { I18N } from "@/lib/shared/I18N";
+
+export default defineComponent({
+  setup() {
+    const daysOfYear = ref({});
+  },
+  name: "QiBuildingChooserSvg",
+  components: {
+    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,
+      hoverBuildingId: undefined,
+      halfHourMark:
+        new Date().getHours() * 2 + (new Date().getMinutes() < 30 ? 0 : 1),
+      error: false,
+      resourceLoader: new ResourceLoader(),
+      svgObjects: undefined,
+      svgViewBox: "0 0 0 0",
+    };
+  },
+  computed: {
+    isHoverable() {
+      return this.$refs.hoverProbe.isHoverEnabled;
+    },
+    hoverBuilding() {
+      return this.getBuildingData(this.hoverBuildingId);
+    },
+  },
+  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,
+    },
+    hoverBuildingId(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,
+      };
+
+      const svgObjects = [];
+      for (let { id, url } of configData.buildingOverlays) {
+        this.resourceLoader
+          .loadJson(url.replace(".png", ".svg"))
+          .then((markup) => {
+            const parser = new DOMParser();
+            const dom = parser
+              .parseFromString(markup, "image/svg+xml")
+              .getElementsByTagName("svg")[0];
+            this.svgViewBox = dom.getAttribute("viewBox");
+            svgObjects.push({
+              id,
+              svg: dom.innerHTML,
+            });
+          });
+      }
+      this.svgObjects = svgObjects;
+    } else {
+      this.error = true;
+    }
+  },
+  methods: {
+    resizeScene({ width, height }) {
+      this.canvasDimensions.width = width;
+      this.canvasDimensions.height = height;
+    },
+    sceneReset() {
+      this.sceneState = { preloaded: false, ready: false };
+    },
+    getBuildingData(buildingId) {
+      return this.buildingCallback
+        ? this.buildingCallback(buildingId)
+        : buildingId;
+    },
+    getColor(buildingId) {
+      return this.colorCallback(
+        this.getBuildingData(buildingId),
+        buildingId === this.hoverBuildingId ? "hover" : "idle"
+      );
+    },
+    getGClass(buildingId) {
+      const building = this.getBuildingData(buildingId);
+      const color = this.colorCallback(
+        building,
+        buildingId === this.hoverBuildingId ? "hover" : "idle"
+      );
+      const classes = [];
+      if (buildingId === this.hoverBuildingId) {
+        classes.push("hover");
+      } else {
+        classes.push("idle");
+      }
+      if (color && this.canGoToBuildingCallback(building)) {
+        classes.push("clickable");
+      } else {
+        classes.push("restricted");
+      }
+      return classes.join(" ");
+    },
+    getGStyle(buildingId) {
+      const building = this.getBuildingData(buildingId);
+      const color = this.colorCallback(
+        building,
+        buildingId === this.hoverBuildingId ? "hover" : "idle"
+      );
+      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.canGoToBuildingCallback(building) ? "cursor" : "default"
+          } !important`,
+        };
+      } else {
+        return {
+          strokeWidth: 0,
+          stroke: "white",
+          strokeOpacity: 0,
+          fill: "white",
+          fillOpacity: 0,
+          cursor: "default !important",
+        };
+      }
+    },
+    onBuildingMouseOver(event, id) {
+      if (this.isHoverable) {
+        this.pos = {
+          x: event.layerX,
+          y: event.layerY,
+          width: this.canvasDimensions.width,
+          height: this.canvasDimensions.height,
+        };
+        this.hoverBuildingId = id;
+        this.$emit("hover-over-building", this.getBuildingData(id));
+      }
+    },
+    onBuildingMouseOut(event, id) {
+      if (this.isHoverable) {
+        this.pos = {
+          x: event.layerX,
+          y: event.layerY,
+          width: this.canvasDimensions.width,
+          height: this.canvasDimensions.height,
+        };
+        this.hoverBuildingId = undefined;
+        this.$emit("hover-out-building", this.getBuildingData(id));
+      }
+    },
+    onBuildingMouseMove(event) {
+      if (this.isHoverable) {
+        this.pos = {
+          x: event.layerX,
+          y: event.layerY,
+          width: this.canvasDimensions.width,
+          height: this.canvasDimensions.height,
+        };
+      }
+    },
+    onBuildingClick(id) {
+      this.hoverBuildingId = id;
+      if (
+        this.isHoverable &&
+        this.hoverBuilding &&
+        this.canGoToBuildingCallback(this.hoverBuilding)
+      ) {
+        this.$emit("go-to-building", this.hoverBuilding);
+      }
+    },
+  },
+});
+</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;
+}
+.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;
+}
+svg g.restricted :deep(path) {
+  cursor: default !important;
+}
+@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;
+  }
+}
+
+/* .custom-overlay-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+} */
+</style>

package/src/components/buildingPicker/index.js

@@ -0,0 +1,6 @@
+export { default as QiBuildingChooser } from './QiBuildingChooser.vue'
+export { default as QiBuildingChooserRasterOverlay } from './QiBuildingChooserRasterOverlay.vue'
+export { default as QiBuildingChooserRaster } from './QiBuildingChooserRaster.vue'
+export { default as QiBuildingChooserSceneImageStack } from './QiBuildingChooserSceneImageStack.vue'
+export { default as QiBuildingChooserSunSimControl } from './QiBuildingChooserSunSimControl.vue'
+export { default as QiBuildingChooserSvg } from './QiBuildingChooserSvg.vue'

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './apartmentChooser'
+export * from './buildingPicker'
+export * from './shared'
+export * from './virtualTourV2'

package/src/components/shared/QiFloatingCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-fade-transition :origin="q.replace('-', ' ') + ' ' + pos.x + ' ' + pos.y">
+    <div
+      v-if="isHoverable"
+      :class="['floating-card', q]"
+      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, pointerEvents: 'none' }"
+    >
+      <slot :is-hoverable="isHoverable" />
+    </div>
+    <v-dialog
+      v-else
+      :value="true"
+      width="auto"
+      @click:outside="$emit('outside', $event)"
+    >
+      <slot :is-hoverable="isHoverable" />
+    </v-dialog>
+  </v-fade-transition>
+</template>
+
+<script>
+export default {
+  name: 'FloatingCard',
+  props: {
+    pos: { type: Object, required: true },
+    isHoverable: Boolean,
+  },
+  computed: {
+    q() {
+      const qh = this.pos.x <= this.pos.width / 2 ? 'left' : 'right'
+      const qv = this.pos.y <= this.pos.height / 2 ? 'top' : 'bottom'
+      return `${qv}-${qh}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+.floating-card {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  display: flex;
+}
+
+.is-not-hoverable {
+  position: relative;
+  width: 100%;
+}
+
+.top-left {
+  transform-origin: top left;
+  transform: translateX(8px) translateY(8px) scale(0.9);
+}
+
+.top-right {
+  transform-origin: top right;
+  transform: translateX(-100%) translateX(-8px) translateY(8px) scale(0.9);
+}
+
+.bottom-left {
+  transform-origin: bottom left;
+  transform: translateY(-100%) translateX(8px) translateY(-8px) scale(0.9);
+}
+
+.bottom-right {
+  transform-origin: bottom right;
+  transform: translateY(-100%) translateX(-100%) translateX(-8px)
+    translateY(-8px) scale(0.9);
+}
+
+.v-dialog__content {
+  align-items: flex-start;
+}
+</style>

package/src/components/shared/QiHoverProbe.vue

@@ -0,0 +1,22 @@
+<template>
+  <div ref="hoverCheck" class="hover-check" />
+</template>
+
+<script>
+export default {
+  name: 'QiHoverProbe',
+  computed: {
+    isHoverEnabled() {
+      return window.getComputedStyle(this.$refs.hoverCheck).display === 'none'
+    },
+  },
+}
+</script>
+
+<style scoped>
+@media (hover: hover) {
+  .hover-check {
+    display: none;
+  }
+}
+</style>

package/src/components/shared/QiNorthDirection.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-img :src="compassNeedle" :style="needleRotation" />
+</template>
+
+<script>
+import compassNeedle from '@/lib/virtualTour/textures/compass-north.png'
+
+export default {
+  name: 'QiNorthDirection',
+  props: {
+    longitude: { type: Number, default: () => 0 },
+  },
+  data() {
+    return {
+      compassNeedle: compassNeedle,
+    }
+  },
+  computed: {
+    needleRotation() {
+      return {
+        transform: `rotate(${90 - this.longitude}deg)`,
+        transition: ` transform 0.5s ease-in`,
+      }
+    },
+  },
+}
+</script>