@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/buildingPicker/QiBuildingChooserSvg.vue

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

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

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

package/src/components/shared/QiFloatingCard.vue

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

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

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