MapComplete/src/UI/Test.svelte

<script lang="ts">

  import { onMount } from "svelte"

  export let imageInfo
  // Tiles of the panorama, not geotiles
  let tilemeta = imageInfo?.asset_templates?.tiles_webp || imageInfo?.asset_templates?.tiles

  import "@photo-sphere-viewer/core/index.css"
  // import "@photo-sphere-viewer/virtual-tour-plugin/index.css"
  // import "@photo-sphere-viewertileUrl/gallery-plugin/index.css"
  // import "@photo-sphere-viewer/markers-plugin/index.css"


  import { AbstractAdapter, Viewer as PSViewer } from "photo-sphere-viewer"
  import { PhotoAdapter } from "./Image/photoAdapter"

  export const PSV_DEFAULT_ZOOM = 30
  export const PSV_ANIM_DURATION = 250
  export const PIC_MAX_STAY_DURATION = 3000

  const BASE_PANORAMA = {
    baseUrl: "./assets/loader_base.jpg",
    width: 1280,
    cols: 2,
    rows: 1,
    tileUrl: () => null
  }


  let container: HTMLElement

  let isSmall = () => container?.offsetWidth < 576
  let shouldGoFast = () => true

  function constructPanoramaInfo() {
    const f = imageInfo

    const hdUrl = (Object.values(f.assets).find(a => a?.roles?.includes("data")) || {}).href
    const matrix = f?.properties?.["tiles:tile_matrix_sets"]?.geovisio
    const baseUrlWebp = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/webp")
    const baseUrlJpeg = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/jpeg")
    const baseUrl = (baseUrlWebp || baseUrlJpeg).href
    const thumbUrl = (Object.values(f.assets).find(a => a.roles?.includes("thumbnail") && a.type === "image/jpeg"))?.href

    let panorama = {
      baseUrl,
      origBaseUrl: baseUrl,
      basePanoData: (img) => ({
        fullWidth: img.width,
        fullHeight: img.height
      }),
      hdUrl,
      thumbUrl,
      cols: matrix && matrix.tileMatrix[0].matrixWidth,
      rows: matrix && matrix.tileMatrix[0].matrixHeight,
      width: matrix && (matrix.tileMatrix[0].matrixWidth * matrix.tileMatrix[0].tileWidth),
      tileUrl: matrix && ((col, row) => tilemeta.href.replace(/\{TileCol}/g, col).replace(/\{TileRow}/g, row))
    }
    return panorama
  }


  PSViewer["useNewAnglesOrder"] = true

  onMount(() => {
    const viewer = new PSViewer({
      container,

      panorama: BASE_PANORAMA.baseUrl,

      adapter: [{ PhotoAdapter, prototype: AbstractAdapter }
        , {
          showErrorTile: false,
          baseBlur: false,
          resolution: isSmall() ? 32 : 64
          // shouldGoFast
        }],

      //withCredentials: parent._options?.fetchOptions?.credentials == "include",
      //requestHeaders: parent._options?.fetchOptions?.headers,
      //lang: parent._t.psv,
      minFov: 5,
      loadingTxt: "&nbsp;",
      navbar: null
    })


    const panorama = constructPanoramaInfo()
    console.log(panorama, container)

    viewer.setOptions({
      adapter: [PhotoAdapter, {
        showErrorTile: false,
        baseBlur: false,
        resolution: isSmall() ? 32 : 64
      }]
    })
    viewer.setPanorama(panorama.hdUrl, {
      zoom: 0, longitude: 45, latitude: -45
    })

    window.setTimeout(() => {
      console.log(viewer.getPosition())
    }, 2000)

  })

</script>


<div bind:this={container} class="h-screen w-screen"></div>