@qispace/vue3-player 0.0.5

package/src/components/apartmentChooser/QiApartmentChooser.vue

@@ -0,0 +1,319 @@
+<template>
+  <div v-if="viewModel">
+    <div class="interactive-viewer">
+      <div class="fill-parent">
+        <qi-zoom-box
+          :desktop="loadState.isReady && interactiveDesktop"
+          :mobile="loadState.isReady && interactiveMobile"
+        >
+          <qi-apartment-chooser-rotator
+            :cdn-file-resolver="cdnFileResolver"
+            :view-model="viewModel"
+            :cardinal-frames="scenes"
+            :build="build"
+            @progress="loadState.progress = $event"
+            @loaded="loadState.isReady = true"
+            @error="loadState.isError = true"
+          />
+          <template v-if="loadState.isReady">
+            <div>
+              <component
+                :is="overlayComponent"
+                :cdn-file-resolver="cdnFileResolver"
+                :view-model="viewModel"
+                :selected-unit-id="selectedUnitId"
+                :scene-data="sceneData"
+                :color-callback="colorCallback"
+                :unit-callback="unitCallback"
+                :can-go-to-unit-callback="canGoToUnitCallback"
+                :draw-observer="drawObserver"
+                @select-unit="$emit('select-unit', $event)"
+                @go-to-unit="$emit('go-to-unit', $event)"
+                @hover-over="hoverOver"
+                @hover-out="hoverOut"
+                @pos="onPos"
+              >
+                <template #default="props">
+                  <slot v-bind="props" />
+                </template>
+              </component>
+            </div>
+          </template>
+        </qi-zoom-box>
+        <qi-floating-card
+          v-if="hoverApartment && showCards"
+          :is-hoverable="isHoverable"
+          :pos="pos"
+          @outside="closeHandler"
+        >
+          <slot
+            :unit="hoverApartment"
+            :can-go-to-unit="canGoToUnitCallback(hoverApartment)"
+            :go-to-unit="
+              () =>
+                canGoToUnitCallback(hoverApartment) &&
+                $emit('go-to-unit', hoverApartment)
+            "
+            :pos="pos"
+            :is-hoverable="isHoverable"
+            :close="closeHandler"
+          />
+        </qi-floating-card>
+        <template v-if="loadState.isReady">
+          <div class="navigation">
+            <qi-apartment-chooser-navigation
+              :can-go-to-unit-callback="canGoToUnitCallback"
+              :selected-unit="selectedUnit"
+              :prev-unit="prevUnit"
+              :next-unit="nextUnit"
+              :view-model="viewModel"
+              @go-to-unit="$emit('go-to-unit', $event)"
+              @prev-unit="$emit('nav-unit', prevUnit)"
+              @next-unit="$emit('nav-unit', nextUnit)"
+            />
+          </div>
+        </template>
+        <div v-else-if="!loadState.isError">
+          <v-progress-linear
+            :indeterminate="!loadState.progress"
+            :value="loadState.progress"
+          />
+        </div>
+      </div>
+    </div>
+    <qi-hover-probe ref="hoverProbe" />
+  </div>
+</template>
+
+<script>
+import QiApartmentChooserRaster from "./QiApartmentChooserRaster.vue";
+import QiApartmentChooserSvg from "./QiApartmentChooserSvg.vue";
+import QiApartmentChooserNavigation from "./QiApartmentChooserNavigation.vue";
+import QiApartmentChooserRotator from "./QiApartmentChooserRotator.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";
+import {
+  SCENE_COUNT,
+  nextScene,
+  BuildingViewerModel,
+} from "@/lib/apartmentChooser/BuildingViewerModel";
+import { I18N } from "@/lib/shared/I18N";
+
+const DEFAULT_SCENE = 4;
+const DEFAULT_CARDINAL_FRAMES = [0, 16, 32, 48];
+
+export default {
+  name: "QiApartmentChooser",
+  components: {
+    QiApartmentChooserRaster,
+    QiApartmentChooserSvg,
+    QiApartmentChooserNavigation,
+    QiApartmentChooserRotator,
+    QiFloatingCard,
+    QiHoverProbe,
+    QiZoomBox,
+  },
+  provide() {
+    const localizer = this.i18n
+      ? new I18N(this.i18n.labels, this.i18n.language)
+      : new I18N();
+    return {
+      i18n: localizer,
+    };
+  },
+  emits: [
+    "select-unit",
+    "go-to-unit",
+    "nav-unit",
+    "hover-over-unit",
+    "hover-out-unit",
+    "initialized",
+  ],
+  props: {
+    i18n: { type: Object, default: undefined },
+    showCards: { type: Boolean, default: true },
+    build: { type: String, default: "" },
+    buildingSceneDataResolver: { type: Function, default: null },
+    buildingScenesByApartmentResolver: { type: Function, default: null },
+    cdnFileResolver: { type: Function, required: true },
+    colorCallback: {
+      type: Function,
+      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
+    },
+    unitCallback: { type: Function, default: (unitId) => unitId },
+    canGoToUnitCallback: { type: Function, default: () => true },
+    selectedUnitId: { type: String, default: null },
+    nextUnit: { type: Object, default: null },
+    prevUnit: { type: Object, default: null },
+    drawObserver: {
+      type: [Object, Array, String, Number, Boolean],
+      default: null,
+    },
+    interactiveDesktop: { type: Boolean, default: true },
+    interactiveMobile: { type: Boolean, default: true },
+    useSvg: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      loadState: { isReady: false, isError: false, progress: undefined },
+      scenesByApartment: null,
+      sceneData: null,
+      scenes: null,
+      viewModel: undefined,
+      resourceLoader: new ResourceLoader(),
+      pos: { x: 0, y: 0, width: 0, height: 0 },
+      closeHandler: undefined,
+      hoverApartment: undefined,
+    };
+  },
+  computed: {
+    isHoverable() {
+      return this.$refs.hoverProbe.isHoverEnabled;
+    },
+    selectedUnit() {
+      return this.unitCallback
+        ? this.unitCallback(this.selectedUnitId)
+        : this.selectedUnitId;
+    },
+    overlayComponent() {
+      return this.useSvg ? QiApartmentChooserSvg : QiApartmentChooserRaster;
+    },
+  },
+  watch: {
+    selectedUnitId: {
+      handler() {
+        if (this.selectedUnitId && this.viewModel) {
+          const scene = this.scenesByApartment[this.selectedUnitId];
+          if (scene) {
+            this.viewModel.currentScene = scene;
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  async mounted() {
+    let sceneConfig = null;
+    try {
+      sceneConfig = await this.resourceLoader.loadJson(
+        this.cdnFileResolver("/apartmentChooser.json")
+      );
+    } catch {
+      console.info("apartmentChooser.json not found");
+    }
+
+    const scene =
+      sceneConfig && sceneConfig.startScene !== undefined
+        ? sceneConfig.startScene
+        : DEFAULT_SCENE;
+    this.scenes =
+      sceneConfig && sceneConfig.scenes !== undefined
+        ? sceneConfig.scenes
+        : DEFAULT_CARDINAL_FRAMES;
+    this.sceneData =
+      sceneConfig && sceneConfig.sceneData !== undefined
+        ? sceneConfig.sceneData.map((it) => ({
+            apartmentId: it.apartmentID,
+            index: it.index,
+          }))
+        : this.buildingSceneDataResolver
+        ? await this.buildingSceneDataResolver()
+        : [];
+    this.scenesByApartment =
+      sceneConfig && sceneConfig.sceneData !== undefined
+        ? sceneConfig.sceneData
+            .map((it) => {
+              // Weird conversion to assure back compatibility, needs to be examined and cleaned up
+              const bestScene = it.bestScene === 0 ? 4 : it.bestScene;
+              return { unitId: it.apartmentID, scene: bestScene };
+            })
+            .reduce((acc, it) => ({ ...acc, [it.unitId]: it.scene }), {})
+        : this.buildingScenesByApartmentResolver
+        ? await this.buildingScenesByApartmentResolver()
+        : [];
+
+    const unitsSceneSort = (units, key = "unitId") => {
+      let startScene = scene;
+      let sceneArray = [];
+      for (let count = 0; count < SCENE_COUNT; count++) {
+        sceneArray.push(startScene);
+        startScene = nextScene(startScene);
+      }
+      units.sort((a, b) => {
+        const sceneAIndex = sceneArray.findIndex(
+          (s) => s === this.scenesByApartment[a[key]]
+        );
+        const sceneBIndex = sceneArray.findIndex(
+          (s) => s === this.scenesByApartment[b[key]]
+        );
+        if (sceneAIndex < sceneBIndex) {
+          return -1;
+        } else if (sceneAIndex > sceneBIndex) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
+      return units;
+    };
+
+    const initialize = (s) => {
+      this.viewModel = new BuildingViewerModel(s);
+    };
+
+    this.$emit("initialized", {
+      scene,
+      scenes: this.scenes,
+      sceneData: this.sceneData,
+      scenesByApartment: this.scenesByApartment,
+      unitsSceneSort,
+      initialize,
+    });
+  },
+  methods: {
+    onPos(pos) {
+      this.pos = pos;
+    },
+    hoverOver({ hoverApartment, closeHandler }) {
+      this.hoverApartment = hoverApartment;
+      this.closeHandler = closeHandler;
+      this.$emit("hover-over-unit", hoverApartment);
+    },
+    hoverOut({ hoverApartment, closeHandler }) {
+      this.hoverApartment = null;
+      this.closeHandler = closeHandler;
+      this.$emit("hover-out-unit", hoverApartment);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.interactive-viewer {
+  padding-top: 56.65%;
+  position: relative;
+}
+.fill-parent {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.navigation {
+  position: absolute;
+  width: 100%;
+  bottom: 32px;
+  z-index: 99;
+  padding: 0 20px;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (max-width: 600px) {
+  .navigation {
+    bottom: 12px;
+  }
+}
+</style>

package/src/components/apartmentChooser/QiApartmentChooserNavigation.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <v-btn
+      elevation="1"
+      icon="mdi-rotate-right"
+      class="black darken-1"
+      @click="viewModel.rotateClockwise()"
+    >
+    </v-btn>
+    <v-btn
+      elevation="1"
+      plain
+      icon="mdi-chevron-left"
+      class="mr-sm-4 ml-sm-8 mr-3 ml-3 black darken-1"
+      :disabled="!prevUnit"
+      @click="$emit('prev-unit')"
+    >
+    </v-btn>
+    <v-btn
+      color="success darken-2"
+      elevation="1"
+      rounded
+      plain
+      :disabled="!selectedUnit || !canGoToUnitCallback(selectedUnit)"
+      @click="$emit('go-to-unit', selectedUnit)"
+    >
+      <span
+        v-if="selectedUnit && canGoToUnitCallback(selectedUnit)"
+        class="d-none d-md-flex"
+      >
+        {{ i18n.getLabel("see-apartment") }}&nbsp;
+      </span>
+      <span>
+        {{ selectedUnit && "title" in selectedUnit ? selectedUnit.title : "-" }}
+      </span>
+    </v-btn>
+    <v-btn
+      elevation="1"
+      plain
+      icon="mdi-chevron-right"
+      class="mr-sm-8 ml-sm-4 mr-3 ml-3 black darken-1"
+      :disabled="!nextUnit"
+      @click="$emit('next-unit')"
+    >
+    </v-btn>
+    <v-btn
+      elevation="1"
+      plain
+      icon="mdi-rotate-left"
+      class="black darken-1"
+      @click="viewModel.rotateCounterClockwise()"
+    >
+    </v-btn>
+  </div>
+</template>
+<script>
+export default {
+  name: "QiApartmentChooserNavigation",
+  inject: ["i18n"],
+  props: {
+    canGoToUnitCallback: { type: Function, default: () => true },
+    selectedUnit: { type: Object, default: null },
+    prevUnit: { type: Object, default: null },
+    nextUnit: { type: Object, default: null },
+    viewModel: { type: Object, required: true },
+  },
+  mounted() {
+    window.addEventListener("keydown", this.keyNavigate);
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.keyNavigate);
+  },
+  methods: {
+    keyNavigate(e) {
+      if (e.keyCode === 37) {
+        this.prevUnit && this.$emit("prev-unit");
+      } else if (e.keyCode === 39) {
+        this.nextUnit && this.$emit("next-unit");
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.v-btn {
+  background-color: #fff;
+}
+</style>