Merge pull request #80 from mapswipe/street-panoramax

Add Panoramax as image provider in View Streets projects

Author: ofr1tz

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@panoramax/web-viewer": "^4.1.0",
     "@togglecorp/fujs": "^2.2.0",
     "@turf/bbox": "^7.2.0",
     "base-64": "^1.0.0",

src/components/StreetProject.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import createInformationPages from '@/utils/createInformationPages'
 import StreetProjectTask from './StreetProjectTask.vue'
+import StreetProjectTaskPanoramax from './StreetProjectTaskPanoramax.vue'
 import StreetProjectTutorial from '@/components/StreetProjectTutorial.vue'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
@@ -14,6 +15,7 @@ export default defineComponent({
   components: {
     streetProjectInstructions: StreetProjectInstructions,
     streetProjectTask: StreetProjectTask,
+    streetProjectTaskPanoramax: StreetProjectTaskPanoramax,
     streetProjectTutorial: StreetProjectTutorial,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
@@ -93,6 +95,7 @@ export default defineComponent({
     saveResults: 'saveResults',
     showSnackbar: 'showSnackbar',
   },
+  emits: ['created'],
   computed: {
     mission() {
       const message = isDefined(this.project.projectInstruction)
@@ -131,7 +134,6 @@ export default defineComponent({
       this.errorLoading = true
       this.addResult(null)
       this.showSnackbar(this.$t('streetProject.couldNotLoadImage'), 'error', 1200)
-      this.forward()
     },
     isAnswered() {
       const result = this.results[this.taskId]
@@ -170,10 +172,19 @@ export default defineComponent({
       </template>
     </project-info>
   </project-header>
+  <street-project-task-panoramax
+    v-if="project.tileServer?.name == 'panoramax'"
+    :taskId="taskId"
+    :endpoint="project.tileServer?.url"
+    @dataloading="(e) => (isLoading = e)"
+    @imageError="handleImageError()"
+    style="position: relative; height: calc(100vh - 390px)"
+  />
   <street-project-task
+    v-else
     :taskId="taskId"
     @dataloading="(e) => (isLoading = e.loading)"
-    @imageError="handleImageError(taskId)"
+    @imageError="handleImageError()"
     style="position: relative; height: calc(100vh - 390px)"
   />
   <option-buttons

src/components/StreetProjectTask.vue

@@ -14,7 +14,6 @@ export default defineComponent({
     containerId: {
       type: String,
       default: 'mapillary',
-      required: true,
     },
     taskId: {
       type: String,

src/components/StreetProjectTaskPanoramax.vue

@@ -0,0 +1,68 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import '@panoramax/web-viewer/build/index.css'
+import '@panoramax/web-viewer'
+
+export default defineComponent({
+  props: {
+    containerId: {
+      type: String,
+      default: 'panoramax',
+    },
+    taskId: { type: String, required: true },
+    endpoint: { type: String, default: 'https://api.panoramax.xyz/api' },
+  },
+  data() {
+    return {
+      viewer: null as HTMLElement | null,
+    }
+  },
+  watch: {
+    taskId(newTaskId) {
+      this.moveViewer(newTaskId)
+    },
+  },
+  methods: {
+    initialiseViewer() {
+      this.viewer = this.$refs.viewer as HTMLElement
+      this.viewer.addEventListener('ready', () => {
+        this.removeArrows()
+      })
+      this.viewer.addEventListener('psv:picture-loading', () => {
+        this.$emit('dataloading', true)
+      })
+      this.viewer.addEventListener('psv:picture-loaded', () => {
+        this.$emit('dataloading', false)
+      })
+      this.viewer.addEventListener('broken', () => {
+        this.$emit('imageError', this.taskId)
+      })
+    },
+    moveViewer(pictureId) {
+      this.viewer.select(undefined, pictureId, true)
+    },
+    removeArrows() {
+      const arrows = this.viewer.querySelector('.psv-virtual-tour-arrows')
+      if (arrows) arrows.remove()
+    },
+  },
+  mounted() {
+    this.initialiseViewer()
+    this.moveViewer(this.taskId)
+  },
+})
+</script>
+
+<template>
+  <v-container :id="`${containerId}`" class="ma-0 pa-0">
+    <pnx-photo-viewer
+      ref="viewer"
+      :endpoint="endpoint"
+      widgets="false"
+      url-parameters="false"
+      keyboard-shortcuts="false"
+    />
+  </v-container>
+</template>
+
+<style scoped></style>

src/components/StreetProjectTutorial.vue

@@ -4,6 +4,7 @@ import matchIcon from '@/utils/matchIcon'
 import OptionButtons from '@/components/OptionButtons.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import StreetProjectTask from '@/components/StreetProjectTask.vue'
+import StreetProjectTaskPanoramax from '@/components/StreetProjectTaskPanoramax.vue'
 import TutorialCompletionCard from './TutorialCompletionCard.vue'
 import { isDefined } from '@/utils/common'
 
@@ -42,6 +43,7 @@ interface Tutorial {
 export default defineComponent({
   components: {
     StreetProjectTask,
+    StreetProjectTaskPanoramax,
     OptionButtons,
     TaskProgress,
     TutorialCompletionCard,
@@ -215,8 +217,17 @@ export default defineComponent({
     </v-row>
     <v-row justify="center">
       <v-col>
+        <street-project-task-panoramax
+          v-if="taskId && tutorial && tutorial.tileServer?.name == 'panoramax'"
+          :key="taskId"
+          :taskId="taskId"
+          :endpoint="tutorial.tileServer?.url"
+          :containerId="'panoramax_tutorial'"
+          @dataloading="(e) => (isLoading = e)"
+          style="position: relative; height: calc(70vh - 390px)"
+        />
         <street-project-task
-          v-if="taskId && tutorial"
+          v-else-if="taskId && tutorial"
           :key="taskId"
           :taskId="taskId"
           :containerId="'mapillary_tutorial'"

vite.config.ts

@@ -11,7 +11,14 @@ export default defineConfig({
   base: './',
   plugins: [
     ValidateEnv(),
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          // Treat pnx-* as custom elements (prevents warnings)
+          isCustomElement: (tag) => tag.startsWith('pnx-')
+        }
+      }
+    }),
     vueJsx(),
     VueI18nPlugin({
       runtimeOnly: false,