@qispace/vue3-player 0.0.15 → 0.1.1

package/src/components/apartmentChooser/QiApartmentChooser.vue

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

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