@qispace/vue3-player 0.0.5

package/src/lib/apartmentChooser/SceneRotator.js

@@ -0,0 +1,25 @@
+import { RotationStep } from './RotationStep'
+
+export class SceneRotator {
+  constructor(cardinalFrames, totalFrameCount) {
+    this._cardinalFrames = cardinalFrames
+    this._totalFrameCount = totalFrameCount
+  }
+
+  start(direction, fromScene, sceneCount) {
+    const startFrame = this.startFrameIndexForScene(fromScene)
+    return new RotationStep(this, direction, startFrame, sceneCount)
+  }
+
+  isCardinalFrame(frameIndex) {
+    return this._cardinalFrames.includes(frameIndex)
+  }
+
+  clampFrameIndex(frameIndex) {
+    return (this._totalFrameCount + frameIndex) % this._totalFrameCount
+  }
+
+  startFrameIndexForScene(sceneIndex) {
+    return this._cardinalFrames[sceneIndex]
+  }
+}

package/src/lib/apartmentChooser/index.js

@@ -0,0 +1,3 @@
+export { BuildingViewerModel } from './BuildingViewerModel'
+export { SceneRotator } from './SceneRotator'
+export { default as throttle } from './throttle'

package/src/lib/apartmentChooser/throttle.js

@@ -0,0 +1,15 @@
+export default {
+  methods: {
+    throttle(callback, interval) {
+      let enableCall = true
+
+      return function (...args) {
+        if (!enableCall) return
+
+        enableCall = false
+        callback.apply(this, args)
+        setTimeout(() => (enableCall = true), interval)
+      }
+    },
+  },
+}

package/src/lib/buildingPicker/BuildingMap.js

@@ -0,0 +1,24 @@
+export class BuildingMap {
+  static empty() {
+    return new BuildingMap([])
+  }
+
+  constructor(buildingIds) {
+    this._buildingIds = buildingIds
+  }
+
+  getBuildingId(raster, x, y) {
+    const index = this._getBuildingIndex(raster, x, y)
+    if (index === undefined) return undefined
+    return this._buildingIds[index]
+  }
+
+  _getBuildingIndex(raster, x, y) {
+    const [r, g, b, a] = raster.getPixel(x, y)
+    if (a === 255 && r === g && g === b) {
+      return r
+    } else {
+      return undefined
+    }
+  }
+}

package/src/lib/buildingPicker/BuildingPickerResourceProvider.js

@@ -0,0 +1,97 @@
+import { ResourceLoader } from '../shared/ResourceLoader'
+
+const CONFIG_FILENAME = 'buildingChooser.json'
+const DEFAULT_DAY_OF_YEAR = 180
+
+export class BuildingPickerResourceProvider {
+  constructor(cdnFileResolver) {
+    this._cdnFileResolver = cdnFileResolver
+    this._resourceLoader = new ResourceLoader()
+  }
+
+  constructFileUrl(filename) {
+    return this._cdnFileResolver ? this._cdnFileResolver(`/${filename}`) : null
+  }
+
+  loadConfigFile() {
+    const url = this.constructFileUrl(CONFIG_FILENAME)
+    return url ? this._resourceLoader.loadJson(url) : null
+  }
+
+  loadBuildingMapImage(config) {
+    const url = this.constructFileUrl(config.lookupFilename)
+    return url ? this._resourceLoader.loadImage(url) : null
+  }
+
+  getViewLongitude(config) {
+    return config.cameraRotation && config.cameraRotation.y + 270
+  }
+
+  getBuildingData(config) {
+    const buildings = config ? config.buildings : []
+    const buildingIds = buildings.map((b) => b.id)
+    const buildingOverlays = buildings.map((b) => ({
+      id: b.id,
+      url: this.constructFileUrl(b.overlayFilename),
+    }))
+    return { buildingIds, buildingOverlays }
+  }
+
+  getBackgroundImageData(config) {
+    if ('days' in config) {
+      return this.processMultipleDays(config.days)
+    } else {
+      const defaultDayBackgrounds = this.processTimeSamples(
+        DEFAULT_DAY_OF_YEAR,
+        config.timeSamples
+      )
+      return [defaultDayBackgrounds]
+    }
+  }
+
+  processMultipleDays(dayRecords) {
+    return dayRecords.map((record) =>
+      this.processTimeSamples(record.dayOfYear, record.timeSamples)
+    )
+  }
+
+  processTimeSamples(dayOfYear, timeSamples) {
+    const imageUrls = timeSamples.map((ts) =>
+      this.constructFileUrl(ts.filename)
+    )
+    return {
+      urls: imageUrls,
+      referenceDate: this.makeReferenceDate(dayOfYear),
+    }
+  }
+
+  makeReferenceDate(dayOfYear) {
+    const refDate = new Date(0)
+    refDate.setUTCDate(dayOfYear)
+    return refDate
+  }
+
+  async loadBuildingChooser() {
+    try {
+      const config = await this.loadConfigFile()
+      if (config) {
+        const mapImage = await this.loadBuildingMapImage(config)
+        if (mapImage) {
+          const viewLongitude = this.getViewLongitude(config)
+          const { buildingIds, buildingOverlays } = this.getBuildingData(config)
+          const backgrounds = this.getBackgroundImageData(config)
+          return {
+            mapImage,
+            viewLongitude,
+            buildingIds,
+            buildingOverlays,
+            backgrounds,
+          }
+        }
+      }
+      return null
+    } catch {
+      return null
+    }
+  }
+}

package/src/lib/buildingPicker/CanvasRaster.js

@@ -0,0 +1,29 @@
+export class CanvasRaster {
+  static empty() {
+    return new CanvasRaster(null)
+  }
+
+  constructor(mapImage) {
+    this._mapImage = mapImage
+    this._context = null
+  }
+
+  update(canvas) {
+    if (!this._mapImage) return
+
+    this._context = canvas.getContext('2d', { willReadFrequently: true })
+    this._context.drawImage(this._mapImage, 0, 0, canvas.width, canvas.height)
+  }
+
+  getPixel(x, y) {
+    try {
+      if (!this._context) {
+        return [0, 0, 0, 0]
+      } else {
+        return this._context.getImageData(x, y, 1, 1).data
+      }
+    } catch {
+      return [0, 0, 0, 0]
+    }
+  }
+}

package/src/lib/buildingPicker/DayOfYearSelector.js

@@ -0,0 +1,36 @@
+const DEFAULT_DATE = new Date(0)
+
+export class DayOfYearSelector {
+  static empty() {
+    return new DayOfYearSelector([{ referenceDate: DEFAULT_DATE, urls: [] }])
+  }
+
+  constructor(imagesByDay) {
+    this._imagesByDay = imagesByDay
+    this._state = { selectedIndex: 0 }
+  }
+
+  selectIndex(value) {
+    if (value < this._imagesByDay.length) this._state.selectedIndex = value
+  }
+
+  get dates() {
+    return this._imagesByDay.map((it) => it.referenceDate)
+  }
+
+  get hasMultipleDates() {
+    return this._imagesByDay.length > 1
+  }
+
+  get selectedIndex() {
+    return this._state.selectedIndex
+  }
+
+  get selectedDate() {
+    return this._imagesByDay[this.selectedIndex].referenceDate
+  }
+
+  get imageUrls() {
+    return this._imagesByDay[this.selectedIndex].urls
+  }
+}

package/src/lib/buildingPicker/SampleRaster.js

@@ -0,0 +1,14 @@
+export class SampleRaster {
+    constructor(data) {
+      this._data = data
+    }
+  
+    getPixel(x, y) {
+      const pixel = this._data[x][y]
+      if (pixel !== ' ') {
+        const value = Number.parseInt(pixel)
+        return [value, value, value, 255]
+      } else return [0, 0, 0, 0]
+    }
+  }
+  

package/src/lib/buildingPicker/index.js

@@ -0,0 +1,5 @@
+export { BuildingMap } from './BuildingMap'
+export { BuildingPickerResourceProvider } from './BuildingPickerResourceProvider'
+export { CanvasRaster } from './CanvasRaster'
+export { DayOfYearSelector } from './DayOfYearSelector'
+export { SampleRaster } from './SampleRaster'

package/src/lib/index.js

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

package/src/lib/shared/BatchLoadTracker.js

@@ -0,0 +1,52 @@
+export class BatchLoadTracker {
+  constructor(numParts) {
+    this._numParts = numParts
+    this._loadedCount = 0
+    this._isError = false
+    this._finishedAction = () => {}
+    this._errorAction = () => {}
+    this._loadProgressAction = () => {}
+  }
+
+  onLoadFinished(action) {
+    this._finishedAction = action
+    return this
+  }
+
+  onLoadError(action) {
+    this._errorAction = action
+    return this
+  }
+
+  onLoadProgress(action) {
+    this._loadProgressAction = action
+    return this
+  }
+
+  partLoaded() {
+    if (this.isFinished) return
+
+    this._loadedCount++
+    this._loadProgressAction(this.percentLoaded)
+    if (this.isFinished) this._finishedAction()
+  }
+
+  errorDetected() {
+    if (this._isError) return
+
+    this._isError = true
+    this._errorAction()
+  }
+
+  get isFinished() {
+    return this._loadedCount >= this._numParts
+  }
+
+  get isError() {
+    return this._isError
+  }
+
+  get percentLoaded() {
+    return Math.round((this._loadedCount * 100) / this._numParts)
+  }
+}

package/src/lib/shared/I18N.js

@@ -0,0 +1,65 @@
+const defaultLabels = {
+  // virtual tour default labels
+  interior: 'Interiør',
+  'see-a-selection-of-the-options-in-the-project':
+    'Se et utvalg av tilvalgsmulighetene i prosjektet.',
+  'floor-plan': 'Planløsning',
+  'all-illustrations-are-indicative-deviations-may-occur':
+    { nb: 'Alle illustrasjoner er veiledende. Avvik kan forekomme.', en: 'All illustrations are indicative. Discrepancies may exist.' },
+  'read-more-here': 'Les mer her',
+  'i-understand': { nb: 'Jeg forstår', en: "I understand" },
+  share: 'Share',
+  'share-to-facebook': 'Share to Facebook',
+  'share-to-linkedin': 'Share to Linkedin',
+  'share-to-twitter': 'Share to Twitter',
+  'share-via-email': 'Share via Email',
+  'copy-link': 'Copy link',
+  'virtual-view': 'Virtuell Visning',
+  'slide-show': 'Slide Show',
+  // building chooser default labels
+  room: 'Room',
+  floor: 'Floor',
+  'see-apartments': 'See apartments',
+  // apartment chooser default labels
+  'see-apartment': 'See apartment',
+
+  "click-and-drag-to-look-around": { en: "Click and drag to look around", nb: "Klikk og dra for å se deg rundt" },
+  "click-on-the-cricles-to-move-around": { en: "Click on the circles to move around", nb: "Klikk på sirkelene for å gå rundt" },
+  "use-the-mouse-wheel-to-zoom": { en: "Use the mouse wheel to zoom", nb: "Bruk mushjulet for å zoome" },
+  "you-can-also-use-the-arrow-keys-to-move-around": { en: "You can also use the arrow keys to move around", nb: "Du kan også bruke pilene på tastaturet for å gå rundt" },
+  "tap-and-drag-to-look-around": { en: "Tap and drag to look around", nb: "Trykk og dra for å se deg rundt" },
+  "tap-on-the-circles-to-move-around": { en: "Tap on the circles to move around", nb: "Trykk på sirkelene for å gå rundt" },
+  "use-two-fingers-to-zoom": { en: "Use two fingers to zoom", nb: "Bruk to fingre for å zoome" },
+  "dont-show-again": { en: "Don't Show Again", nb: "Ikke vis igjen" }
+
+
+}
+
+export class I18N {
+  constructor(labels, language) {
+    this._labels = { ...defaultLabels, ...(labels || {}) }
+    this._language = language || 'en'
+  }
+
+  getLabel(key) {
+    if (key in this._labels) {
+      return this.get(this._labels[key])
+    }
+    return key
+  }
+
+  get(i18nObject) {
+    if (typeof i18nObject === 'string') {
+      return i18nObject
+    } else if (this._language in i18nObject && i18nObject[this._language]) {
+      return i18nObject[this._language]
+    } else {
+      for (const fallbackLocale in i18nObject) {
+        if (i18nObject[fallbackLocale]) {
+          return i18nObject[fallbackLocale]
+        }
+      }
+    }
+    return ''
+  }
+}

package/src/lib/shared/ResourceLoader.js

@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+export class ResourceLoader {
+  async loadJson(url) {
+    return (await axios.get(url)).data
+  }
+
+  async loadImage(url) {
+    return new Promise((resolve, reject) => {
+      const tmpImage = new Image()
+      tmpImage.crossOrigin = 'anonymous'
+      tmpImage.onload = () => {
+        resolve(tmpImage)
+      }
+      tmpImage.onerror = reject
+      tmpImage.src = url
+    })
+  }
+
+  async loadImageData(url) {
+    const image = await this.loadImage(url)
+    const canvas = document.createElement('canvas')
+    try {
+      const ctx = canvas.getContext('2d')
+      canvas.width = image.width
+      canvas.height = image.height
+      ctx.drawImage(image, 0, 0)
+      return canvas.toDataURL('image/png')
+    } finally {
+      canvas.remove()
+    }
+  }
+}

package/src/lib/shared/index.js

@@ -0,0 +1,3 @@
+export { ResourceLoader } from './ResourceLoader'
+export { I18N } from './I18N'
+export { BatchLoadTracker } from './BatchLoadTracker'

package/src/lib/virtualTour/CameraSnapshot.js

@@ -0,0 +1,42 @@
+function padded(num) {
+  return ('0' + num).slice(-2)
+}
+
+// Makes a string in the format of YYYYMMDD HHMMSS
+function makeTimestampString() {
+  const now = new Date()
+  return [
+    now.getFullYear().toString(),
+    padded(now.getMonth() + 1),
+    padded(now.getDate()),
+    ' ',
+    padded(now.getHours()),
+    padded(now.getMinutes()),
+    padded(now.getSeconds()),
+  ].join('')
+}
+
+function makeDefaultFilename() {
+  return 'Visuado-Snapshot-' + makeTimestampString()
+}
+
+export class CameraSnapshot {
+  constructor(data, cameraParams) {
+    this.data = data
+    this.cameraParams = cameraParams
+  }
+
+  download(filename = null) {
+    filename = filename || makeDefaultFilename()
+    const link = document.createElement('a')
+    if (typeof link.download === 'string') {
+      document.body.appendChild(link) //Firefox requires the link to be in the body
+      link.download = filename
+      link.href = this.data
+      link.click()
+      document.body.removeChild(link)
+    } else {
+      location.replace(uri)
+    }
+  }
+}

package/src/lib/virtualTour/FullscreenModel.js

@@ -0,0 +1,69 @@
+export class FullscreenModel {
+  constructor(document, elemId) {
+    this._doc = document
+    this._elemId = elemId
+    this._state = { isActive: false }
+  }
+
+  get isActive() {
+    return this._state.isActive
+  }
+
+  setup() {
+    const events = [
+      'fullscreenchange',
+      'webkitfullscreenchange',
+      'mozfullscreenchange',
+      'msfullscreenchange',
+    ]
+    const element = this._getElement()
+    events.forEach((event) => {
+      element.addEventListener(event, this._toggle.bind(this), false)
+    })
+  }
+
+  toggle() {
+    if (this.isActive) this._exit()
+    else this._enter()
+  }
+
+  _enter() {
+    
+    const elem = this._getElement()
+    const method =
+      elem.requestFullscreen ||
+      elem.webkitRequestFullscreen ||
+      elem.mozRequestFullscreen ||
+      elem.msRequestFullscreen
+
+    if (method) {
+      method.apply(elem)
+    }
+    
+  }
+
+  _exit() {
+    const method =
+      this._doc.exitFullscreen ||
+      this._doc.webkitExitFullscreen ||
+      this._doc.mozExitFullscreen ||
+      this._doc.document.msExitFullscreen
+    if (method) {
+      method.apply(document)
+    }
+  }
+
+  _getElement() {
+    return this._doc.getElementById(this._elemId)
+  }
+
+  _toggle() {
+    const activeState = !!(
+      this._doc.fullscreenElement ||
+      this._doc.webkitFullscreenElement ||
+      this._doc.mozFullscreenElement ||
+      this._doc.msFullscreenElement
+    )
+    this._state.isActive = activeState
+  }
+}

package/src/lib/virtualTour/textures/floor-1.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.98034 14.7993L1.54055 10.3376L8.98034 5.87599L16.4201 10.3376L8.98034 14.7993Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M8.98034 10.3472L1.54055 5.8855L8.98034 1.42384L16.4201 5.8855L8.98034 10.3472Z" fill="white" stroke="#999999" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

package/src/lib/virtualTour/textures/floor-2.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.76135 14.7993L2.32155 10.3376L9.76135 5.87599L17.2011 10.3376L9.76135 14.7993Z" fill="white" stroke="#999999" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M9.76135 10.3472L2.32155 5.8855L9.76135 1.42384L17.2011 5.8855L9.76135 10.3472Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

package/src/lib/virtualTour__/ApartmentConfig.ts

@@ -0,0 +1,80 @@
+import { ProjectFiles } from './ApartmentFiles'
+
+type CameraConfig = object
+
+type TimeOfDay = {
+  hours: number
+  minutes: number
+}
+
+type ApartmentConfigJson = {
+  cameras: CameraConfig[]
+  timeInHours?: number
+}
+
+type ThumbnailsConfigJson = {
+  cameras: CameraConfig[]
+}
+
+const DEFAULT_APARTMENT_CONFIG: ApartmentConfigJson = { cameras: [] }
+const DEFAULT_THUMBNAILS_CONFIG: ThumbnailsConfigJson = { cameras: [] }
+
+export class ApartmentConfig {
+  static async load(files: ProjectFiles) {
+    const [apartmentJson, thumbnailsJson] = await Promise.all([
+      this.loadApartmentJson(files),
+      this.loadThumbnailsJson(files),
+    ])
+    return new ApartmentConfig(apartmentJson, thumbnailsJson)
+  }
+
+  constructor(
+    private readonly apartmentJson: ApartmentConfigJson,
+    private readonly thumbnailsJson: ThumbnailsConfigJson
+  ) {}
+
+  get timeOfDay(): TimeOfDay | undefined {
+    return this.parseTimeOfDay(this.apartmentJson.timeInHours)
+  }
+
+  get cameras(): CameraConfig[] {
+    return this.apartmentJson.cameras
+  }
+
+  get thumbnailCameras(): CameraConfig[] {
+    return this.thumbnailsJson.cameras
+  }
+
+  private parseTimeOfDay(floatValue?: number): TimeOfDay | undefined {
+    if (!floatValue) return undefined
+
+    const hours = Math.floor(floatValue)
+    const minutes = Math.floor((hours - floatValue) * 60)
+    return { hours, minutes }
+  }
+
+  private static loadApartmentJson(files: ProjectFiles) {
+    return this.loadJson<ApartmentConfigJson>(
+      files,
+      'apartment.json',
+      DEFAULT_APARTMENT_CONFIG
+    )
+  }
+
+  private static async loadThumbnailsJson(files: ProjectFiles) {
+    return this.loadJson<ThumbnailsConfigJson>(
+      files,
+      'thumbs.json',
+      DEFAULT_THUMBNAILS_CONFIG
+    )
+  }
+
+  private static async loadJson<T>(
+    files: ProjectFiles,
+    filename: string,
+    defaultValue: T
+  ) {
+    const jsonFile = files.makeFile(filename)
+    return (await jsonFile.readJson<T>()) ?? defaultValue
+  }
+}

package/src/lib/virtualTour__/ApartmentFiles.ts

@@ -0,0 +1,8 @@
+export interface ProjectFile {
+  readJson<T>(): Promise<T | undefined>
+  toPath(): string
+}
+
+export interface ProjectFiles {
+  makeFile(...parts: string[]): ProjectFile
+}