@qispace/vue3-player 0.0.16 → 0.1.1

package/src/components/buildingPicker/QiBuildingChooserRasterOverlay.vue

@@ -1,96 +0,0 @@
-<template>
-  <canvas ref="canvas" class="overlay" v-bind="dimensions" />
-</template>
-
-<script>
-import { ResourceLoader } from '@/lib/shared/ResourceLoader'
-
-export default {
-  name: 'QiBuildingChooserRasterOverlay',
-  props: {
-    imageUrl: { type: String, required: true },
-    dimensions: { type: Object, required: true },
-    color: {
-      type: Object,
-      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
-    },
-  },
-  data() {
-    return {
-      isLoaded: false,
-      overlayImage: undefined,
-      resourceLoader: new ResourceLoader(),
-      context: undefined,
-      imageData: undefined,
-      imageDataIndices: [],
-    }
-  },
-  watch: {
-    color(oldValue, newValue) {
-      if (
-        oldValue.r !== newValue.r ||
-        oldValue.g !== newValue.g ||
-        oldValue.b !== newValue.b ||
-        oldValue.a !== newValue.a
-      ) {
-        this.draw()
-      }
-    },
-  },
-  async mounted() {
-    this.overlayImage = await this.resourceLoader.loadImage(this.imageUrl)
-    this.setupDraw()
-  },
-  methods: {
-    setupDraw() {
-      if (!this.overlayImage || !this.$refs.canvas) {
-        return
-      }
-
-      const { width, height } = this.dimensions
-      if (width === 0 || height === 0) {
-        return
-      }
-
-      this.context = this.$refs.canvas.getContext('2d', {
-        willReadFrequently: true,
-      })
-      this.context.drawImage(this.overlayImage, 0, 0, width, height)
-      this.imageData = this.context.getImageData(0, 0, width, height)
-      for (let i = 3; i < this.imageData.data.length; i += 4) {
-        if (this.imageData.data[i] !== 0) {
-          this.imageDataIndices.push(i)
-        }
-      }
-      this.draw()
-      this.isLoaded = true
-    },
-    draw() {
-      if (this.context && this.imageData) {
-        this.applyColor()
-        this.context.putImageData(this.imageData, 0, 0)
-      }
-    },
-    applyColor() {
-      if (this.color) {
-        for (let i = 0; i < this.imageDataIndices.length; i++) {
-          this.imageData.data[this.imageDataIndices[i] - 3] = this.color.r
-          this.imageData.data[this.imageDataIndices[i] - 2] = this.color.g
-          this.imageData.data[this.imageDataIndices[i] - 1] = this.color.b
-          this.imageData.data[this.imageDataIndices[i]] = this.color.a
-        }
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-.overlay {
-  z-index: 1 !important;
-  opacity: 1;
-  transition-property: opacity;
-  transition-duration: 250ms;
-  transition-timing-function: ease-in-out;
-}
-</style>

package/src/components/buildingPicker/QiBuildingChooserSceneImageStack.vue

@@ -1,89 +0,0 @@
-<template>
-  <div>
-    <img
-      ref="baseImage"
-      class="image-instance zero"
-      :style="{ opacity: 1, borderRadius: 50 }"
-      @load="onPreloaded"
-    />
-    <div
-      v-if="state === 'preloaded' || state === 'loaded'"
-      v-show="state === `loaded`"
-    >
-      <img
-        v-for="(url, index) in imageUrls"
-        :key="index"
-        :class="{ 'image-instance': true, active: index === activeIndex }"
-        :src="url"
-        @load="loadTracker.partLoaded()"
-      />
-      Here
-    </div>
-  </div>
-</template>
-
-<script>
-import { BatchLoadTracker } from "@/lib/shared/BatchLoadTracker";
-import { defineComponent, ref } from "vue";
-
-export default defineComponent({
-  setup() {},
-  name: "QiBuildingChooserSceneImageStack",
-  props: {
-    imageUrls: { type: Array, required: true },
-    activeIndex: { type: Number, required: true },
-  },
-  emits: ["resize", "ready", "preloaded", "reset"],
-  data() {
-    return {
-      state: "init",
-      activeStates: ["preloaded", "loaded"],
-      loadTracker: new BatchLoadTracker(0),
-    };
-  },
-  watch: {
-    imageUrls(newImages) {
-      this.$emit("reset");
-      this.loadImages(newImages);
-    },
-  },
-  mounted() {
-    this.loadImages(this.imageUrls);
-    new ResizeObserver((entries) => {
-      window.requestAnimationFrame(() => {
-        const width = entries[0].contentRect.width;
-        const height = entries[0].contentRect.height;
-        this.$emit("resize", { width, height });
-      });
-    }).observe(this.$refs.baseImage);
-  },
-  methods: {
-    onPreloaded() {
-      this.state = "preloaded";
-      this.$emit("preloaded");
-    },
-    loadImages(imageUrls) {
-      this.state = "init";
-      this.$refs.baseImage.src = imageUrls[0];
-      this.loadTracker = new BatchLoadTracker(imageUrls.length).onLoadFinished(
-        () => {
-          this.state = "loaded";
-          this.$emit("ready");
-        }
-      );
-    },
-  },
-});
-</script>
-
-<style scoped>
-.image-instance {
-  position: absolute;
-  width: 100%;
-  opacity: 0;
-}
-
-.image-instance.active {
-  opacity: 1;
-}
-</style>

package/src/components/buildingPicker/QiBuildingChooserSunSimControl.vue

@@ -1,257 +0,0 @@
-<template>
-  <div class="sunsim-bar-wrapper">
-    <div class="sunsim-date d-flex align-center pl-5 pr-5">
-      <v-icon
-        color="black"
-        class="mr-2"
-        icon="mdi-calendar-blank-outline"
-      ></v-icon>
-      <v-select
-        v-if="dateSelector.hasMultipleDates"
-        v-model="currentDate"
-        :items="dates"
-        density="compact"
-        variant="underlined"
-        hide-details
-        class="day-selector"
-      />
-      <span v-else class="text-center text-body-1">{{ selectedDate }}</span>
-    </div>
-    <div class="sunsim-wrapper d-flex align-center px-3">
-      <span class="sunsim-time-label text-body-1 font-weight-normal ml-2">
-        {{ currentValueString }}
-      </span>
-      <v-icon medium class="ml-2 mr-2 icon">mdi-white-balance-sunny</v-icon>
-      <v-progress-linear
-        v-if="isLoading"
-        indeterminate
-        rounded
-        height="6"
-        color="grey lighten-1"
-        class="mr-2"
-      />
-      <v-slider
-        v-else
-        v-model="currentValue"
-        :min="0"
-        :max="47"
-        :step="1"
-        :thumb-label="false"
-        :hide-details="true"
-        thumb-color="white"
-        thumb-size="25"
-        track-size="7"
-        track-fill-color="transparent"
-        class="sunsim-slider mr-1"
-      ></v-slider>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from "vue";
-
-function formatDate(date) {
-  return date.toLocaleString("en-no", {
-    month: "short",
-    day: "numeric",
-  });
-}
-
-export default defineComponent({
-  setup() {},
-  name: "QiBuildingChooserSunSimControl",
-  props: {
-    modelValue: { type: Number, required: true },
-    dateSelector: { type: Object, required: true },
-    isLoading: { type: Boolean, default: false },
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      currentValue: this.modelValue,
-      currentDate: null,
-    };
-  },
-  computed: {
-    currentValueString() {
-      const hour = Math.floor(this.currentValue / 2)
-        .toString()
-        .padStart(2, "0");
-      const minutes = this.currentValue % 2 === 0 ? "00" : "30";
-      return `${hour}:${minutes}`;
-    },
-    dates() {
-      return this.dateSelector.dates.map(formatDate);
-    },
-    selectedDate: {
-      get() {
-        return formatDate(this.dateSelector.selectedDate);
-      },
-      set(value) {
-        this.dateSelector.selectIndex(this.dates.indexOf(value));
-      },
-    },
-  },
-  watch: {
-    currentValue(newValue) {
-      this.$emit("update:modelValue", newValue);
-    },
-    modelValue(newValue) {
-      this.currentValue = Math.floor(newValue);
-    },
-    dates: {
-      handler(newValue) {
-        this.currentDate = formatDate(this.dateSelector.selectedDate);
-      },
-      immediate: true,
-    },
-    currentDate(newValue) {
-      this.dateSelector.selectIndex(this.dates.indexOf(newValue));
-    },
-  },
-  methods: {},
-});
-</script>
-
-<style scoped>
-.sunsim-time-label {
-  color: #000;
-  vertical-align: top;
-}
-
-.sunsim-date {
-  background: #fff;
-  border-radius: 30px;
-  min-height: 36px;
-  min-width: 170px;
-  display: flex;
-  align-content: center;
-  white-space: nowrap;
-}
-
-.day-selector {
-  margin-top: 0px;
-}
-
-.day-selector :deep(.v-field__outline) {
-  display: none;
-}
-
-.day-selector :deep(.v-field__input) {
-  padding-top: 2px;
-}
-
-.day-selector :deep(.v-field__append-inner) {
-  padding-top: 5px !important;
-}
-
-.day-selector.v-text-field :deep(.v-input__control > .v-input__slot:before) {
-  border-style: none;
-}
-
-.day-selector.v-text-field :deep(.v-input__control > .v-input__slot:after) {
-  border-style: none;
-}
-
-.sunsim-slider :deep(.v-slider-track__background) {
-  background: linear-gradient(
-    270deg,
-    #8183c2 0%,
-    #ffb9b9 20.01%,
-    #b2dfff 40.1%,
-    #b2dfff 59.85%,
-    #ffba96 79.96%,
-    #8183c2 100%
-  ) !important;
-}
-</style>
-
-<style>
-.sunsim-bar-wrapper {
-  display: flex;
-  position: absolute;
-  width: calc(60%);
-  min-width: 400px;
-  top: 12px;
-  left: 0px;
-  z-index: 3;
-  touch-action: none;
-  pointer-events: none;
-}
-
-.sunsim-wrapper {
-  width: 100%;
-  background: #fff;
-  border-radius: 30px;
-  padding: 5px;
-  min-height: 16px;
-  z-index: 3;
-}
-.sunsim-bar-wrapper .sunsim-date {
-  margin-right: 12px;
-  margin-left: 12px;
-}
-.sunsim-wrapper,
-.sunsim-date {
-  touch-action: auto;
-  pointer-events: all;
-}
-
-.sunsim-wrapper .mdi-white-balance-sunny {
-  color: #ffab02;
-  vertical-align: baseline;
-  font-size: 20px;
-}
-
-@media only screen and (max-width: 980px) and (min-width: 500px) {
-  .sunsim-bar-wrapper {
-    top: 101%;
-    width: 100%;
-  }
-  .sunsim-bar-wrapper .sunsim-date {
-    margin-left: 0;
-  }
-}
-
-@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape) {
-  .sunsim-bar-wrapper {
-    top: calc(100% + 8px);
-    width: 100%;
-  }
-  .sunsim-bar-wrapper .sunsim-date {
-    margin-left: 0;
-  }
-  .sunsim-bar-wrapper .sunsim-date,
-  .sunsim-bar-wrapper .sunsim-wrapper {
-    box-shadow: 0px 0px 7px 1px #aaa;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .sunsim-bar-wrapper {
-    height: calc(100% + 84px);
-    top: 0;
-    width: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    margin: -42px 0 0 0;
-    padding: 0;
-    left: 0;
-    z-index: 0;
-    min-width: 100%;
-  }
-  .sunsim-bar-wrapper .sunsim-date {
-    margin-right: 0;
-    margin-left: 0;
-  }
-  .sunsim-bar-wrapper .sunsim-date,
-  .sunsim-bar-wrapper .sunsim-wrapper {
-    width: 100%;
-    border-radius: 0;
-    left: 0;
-    margin-left: 0 !important;
-    box-shadow: 0px 0px 7px 1px #aaa;
-  }
-}
-</style>