chore: lint styles and add deploy configurations

Author: 42arch

apps/viewer/netlify.toml

@@ -0,0 +1,17 @@
+# Netlify configuration file inside apps/viewer
+# Reference: https://docs.netlify.com/configure-builds/file-based-configuration/
+
+[build]
+  # Build command to run. Since Netlify handles workspace dependency resolution,
+  # we specify our specific app target build filter.
+  command = "pnpm --filter hdmap-viewer... build"
+
+  # Directory containing the static site assets to be published.
+  publish = "apps/viewer/dist"
+
+# Single Page Application (SPA) redirect rule
+# Redirects all requests to index.html for client-side routing
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

apps/viewer/package.json

@@ -2,13 +2,15 @@
   "name": "hdmap-viewer",
   "type": "module",
   "version": "0.0.5",
+  "private": true,
   "repository": {
     "type": "github",
     "url": "https://github.com/42arch/hdmap-viewer"
   },
-  "private": true,
   "scripts": {
     "dev": "vite",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },

apps/viewer/src/components/InfoPanel.vue

@@ -32,21 +32,14 @@ interface InfoState {
 }
 
 const store = useAppStore()
-const { viewer, openDrive, fileInfo } = storeToRefs(store)
+const { viewer, fileInfo } = storeToRefs(store)
 const state = reactive<InfoState>({
   basic: null,
   coordinate: null,
   predecessors: [],
   successors: [],
 })
 
-watch(openDrive, () => {
-  if (!openDrive.value)
-    return
-
-  console.warn(9999, openDrive.value?.header)
-})
-
 watch(viewer, () => {
   if (!viewer.value)
     return
@@ -82,7 +75,7 @@ watch(viewer, () => {
 </script>
 
 <template>
-  <NCard :class="['info-panel', { 'has-content': !!state.basic }]" content-style="padding: 0">
+  <NCard class="info-panel" :class="[{ 'has-content': !!state.basic }]" content-style="padding: 0">
     <div class="title">
       <NIcon size="12">
         <InfoCircle />

apps/viewer/src/components/OperatePanel.vue

@@ -25,8 +25,6 @@ const precisionOptions = [{
   value: 1,
 }]
 
-
-
 watch(precision, () => {
   if (!viewer.value)
     return
@@ -114,7 +112,8 @@ function nodeProps({ option }: { option: TreeOption }) {
       // viewer.value?.setSelectedLane(option.key as string)
     },
     onMouseover() {
-      if (!isVisible) return
+      if (!isVisible)
+        return
       if (highlightTimer)
         clearTimeout(highlightTimer)
       highlightTimer = setTimeout(() => {
@@ -152,7 +151,7 @@ function renderSuffix({ option }: { option: TreeOption }) {
         },
         {
           default: () => h(NIcon, { size: 12 }, { default: () => h(Crosshairs) }),
-        }
+        },
       ),
       h(
         NButton,
@@ -168,9 +167,9 @@ function renderSuffix({ option }: { option: TreeOption }) {
         },
         {
           default: () => h(NIcon, { size: 12 }, { default: () => h(isVisible ? Eye : EyeSlash) }),
-        }
+        },
       ),
-    ]
+    ],
   )
 }
 

apps/viewer/src/libs/highlight-manager.ts

@@ -1,5 +1,5 @@
 import type { Lane } from 'opendrive-parser'
-import type { Vector3 } from 'three'
+import type { BufferGeometry, Vector3 } from 'three'
 import type { Level, Source } from './types'
 import type { RoadMesh } from './viewer'
 import type Viewer from './viewer'
@@ -46,8 +46,9 @@ class HighlightManager {
 
   private getLaneFromId(laneId: string): Lane | undefined {
     const parts = laneId.split('_')
-    if (parts.length < 3) return undefined
-    
+    if (parts.length < 3)
+      return undefined
+
     // The format is roadId_sectionS_laneId.
     // However, roadId might contain underscores? Assuming standard format.
     // Better logic: last part is laneId, second last is sectionS, rest is roadId.
@@ -56,10 +57,12 @@ class HighlightManager {
     const rId = parts.join('_')
 
     const road = this.viewer.openDrive?.getRoadById(rId)
-    if (!road) return undefined
+    if (!road)
+      return undefined
 
     const section = road.getLaneSectionByS(Number(sS))
-    if (!section) return undefined
+    if (!section)
+      return undefined
 
     return section.getLaneById(lId)
   }
@@ -86,7 +89,8 @@ class HighlightManager {
     }
 
     const geometry = this.viewer.createLaneGeometry(lane)
-    if (!geometry) return
+    if (!geometry)
+      return
 
     const [roadKey, sectionKey] = laneId.split('_')
     this.setHighlightRoad(roadKey!)
@@ -124,19 +128,22 @@ class HighlightManager {
       return
     }
 
-    const laneGeometries = []
+    const laneGeometries: BufferGeometry[] = []
     const laneSections = road.getLaneSections()
-    
+
     for (const section of laneSections) {
-        for (const lane of section.getLanes()) {
-            const laneId = `${roadId}_${section.s}_${lane.id}`
-            if (!this.viewer.isLaneVisible(laneId)) continue
-            const geom = this.viewer.createLaneGeometry(lane)
-            if (geom) laneGeometries.push(geom)
-        }
+      for (const lane of section.getLanes()) {
+        const laneId = `${roadId}_${section.s}_${lane.id}`
+        if (!this.viewer.isLaneVisible(laneId))
+          continue
+        const geom = this.viewer.createLaneGeometry(lane)
+        if (geom)
+          laneGeometries.push(geom)
+      }
     }
 
-    if (laneGeometries.length === 0) return
+    if (laneGeometries.length === 0)
+      return
 
     const merged = BufferGeometryUtils.mergeGeometries(laneGeometries)
     const material = new MeshBasicMaterial({
@@ -179,17 +186,20 @@ class HighlightManager {
     if (!laneSection) {
       return
     }
-    const laneGeometries = []
+    const laneGeometries: BufferGeometry[] = []
     const lanes = laneSection.getLanes()
 
     for (const lane of lanes) {
       const laneId = `${roadId}_${sectionS}_${lane.id}`
-      if (!this.viewer.isLaneVisible(laneId)) continue
+      if (!this.viewer.isLaneVisible(laneId))
+        continue
       const geom = this.viewer.createLaneGeometry(lane)
-      if (geom) laneGeometries.push(geom)
+      if (geom)
+        laneGeometries.push(geom)
     }
 
-    if (laneGeometries.length === 0) return
+    if (laneGeometries.length === 0)
+      return
 
     const merged = BufferGeometryUtils.mergeGeometries(laneGeometries)
     const material = new MeshBasicMaterial({
@@ -208,16 +218,18 @@ class HighlightManager {
     const visibleLaneIds = laneIds.filter(id => this.viewer.isLaneVisible(id))
     if (visibleLaneIds.length === 0)
       return
-    const geometries = []
+    const geometries: BufferGeometry[] = []
     for (const laneId of visibleLaneIds) {
       const lane = this.getLaneFromId(laneId)
       if (lane) {
-          const geom = this.viewer.createLaneGeometry(lane)
-          if (geom) geometries.push(geom)
+        const geom = this.viewer.createLaneGeometry(lane)
+        if (geom)
+          geometries.push(geom)
       }
     }
 
-    if (geometries.length === 0) return
+    if (geometries.length === 0)
+      return
 
     const merged = BufferGeometryUtils.mergeGeometries(geometries)
     const material = new MeshBasicMaterial({
@@ -245,16 +257,18 @@ class HighlightManager {
     const visibleLaneIds = laneIds.filter(id => this.viewer.isLaneVisible(id))
     if (visibleLaneIds.length === 0)
       return
-    const geometries = []
+    const geometries: BufferGeometry[] = []
     for (const laneId of visibleLaneIds) {
       const lane = this.getLaneFromId(laneId)
       if (lane) {
-          const geom = this.viewer.createLaneGeometry(lane)
-          if (geom) geometries.push(geom)
+        const geom = this.viewer.createLaneGeometry(lane)
+        if (geom)
+          geometries.push(geom)
       }
     }
 
-    if (geometries.length === 0) return
+    if (geometries.length === 0)
+      return
 
     const merged = BufferGeometryUtils.mergeGeometries(geometries)
     const material = new MeshBasicMaterial({

apps/viewer/src/libs/viewer.ts

@@ -297,13 +297,13 @@ class Viewer {
           `attribute float laneVisible;
            varying float vLaneVisible;
            void main() {
-             vLaneVisible = laneVisible;`
+             vLaneVisible = laneVisible;`,
         )
         shader.fragmentShader = shader.fragmentShader.replace(
           'void main() {',
           `varying float vLaneVisible;
            void main() {
-             if (vLaneVisible < 0.5) discard;`
+             if (vLaneVisible < 0.5) discard;`,
         )
       }
     }

apps/viewer/src/store.ts

@@ -45,9 +45,9 @@ export const useAppStore = defineStore('app', () => {
     const roadId = parts.join('_')
     const sectionKey = `${roadId}_${sectionS}`
     return (
-      visibilityMap.value[roadId] !== false &&
-      visibilityMap.value[sectionKey] !== false &&
-      visibilityMap.value[key] !== false
+      visibilityMap.value[roadId] !== false
+      && visibilityMap.value[sectionKey] !== false
+      && visibilityMap.value[key] !== false
     )
   }
 
@@ -58,20 +58,23 @@ export const useAppStore = defineStore('app', () => {
   }
 
   function areAllVisible(): boolean {
-    if (!openDrive.value) return true
+    if (!openDrive.value)
+      return true
     const roads = openDrive.value.getRoads()
     return roads.every(road => visibilityMap.value[road.id] !== false)
   }
 
   function toggleAllVisibility() {
-    if (!openDrive.value) return
+    if (!openDrive.value)
+      return
     const roads = openDrive.value.getRoads()
     const allVisible = areAllVisible()
     if (allVisible) {
-      roads.forEach(road => {
+      roads.forEach((road) => {
         visibilityMap.value[road.id] = false
       })
-    } else {
+    }
+    else {
       visibilityMap.value = {}
     }
     viewer.value?.updateVisibility(visibilityMap.value)

apps/viewer/tsconfig.app.json

@@ -11,6 +11,7 @@
     /* Linting */
     "strict": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,

apps/viewer/vercel.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm --filter hdmap-viewer... build",
+  "outputDirectory": "dist",
+  "framework": "vite",
+  "cleanUrls": true,
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}