@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/apartmentChooser/QiApartmentChooserSvg.vue

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

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

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

@@ -1,312 +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="`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>