update UI

Author: 42arch

apps/viewer/src/App.vue

@@ -27,6 +27,18 @@ const themeOverrides: GlobalThemeOverrides = {
   Checkbox: {
     fontSizeSmall: '12px',
   },
+  Dropdown: {
+    fontSizeMedium: '12px',
+    fontSizeSmall: '12px',
+    padding: '0px',
+    optionHeightSmall: '20px',
+    optionPrefixWidthSmall: '4px',
+    optionSuffixWidthSmall: '4px',
+    optionIconSizeSmall: '0px',
+    optionIconSuffixWidthSmall: '0px',
+    optionIconPrefixWidthSmall: '0px',
+
+  },
 }
 </script>
 

apps/viewer/src/components/InfoPanel.vue

@@ -32,7 +32,7 @@ interface InfoState {
 }
 
 const store = useAppStore()
-const { viewer, openDrive } = storeToRefs(store)
+const { viewer, openDrive, fileInfo } = storeToRefs(store)
 const state = reactive<InfoState>({
   basic: null,
   coordinate: null,
@@ -87,7 +87,7 @@ watch(viewer, () => {
       <NIcon size="12">
         <InfoCircle />
       </NIcon>
-      <span>Info</span>
+      <span>{{ fileInfo?.name }}</span>
     </div>
 
     <NDivider />

apps/viewer/src/components/OperatePanel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { TreeOption, UploadFileInfo } from 'naive-ui'
 import type { Level } from '@/libs/types'
-import { CaretRight } from '@vicons/fa'
-import { NButton, NCard, NCheckbox, NCollapse, NCollapseItem, NGrid, NGridItem, NIcon, NScrollbar, NSelect, NTree, NUpload, useMessage } from 'naive-ui'
+import { CaretRight, EllipsisH } from '@vicons/fa'
+import { NButton, NCard, NCheckbox, NCollapse, NCollapseItem, NDropdown, NGrid, NGridItem, NIcon, NScrollbar, NSelect, NTree, NUpload, useMessage } from 'naive-ui'
 import OpenDrive from 'opendrive-parser'
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, h, ref, watch } from 'vue'
 import { useAppStore } from '@/store'
 import AppTitle from './AppTitle.vue'
 
@@ -25,6 +25,26 @@ const precisionOptions = [{
   value: 1,
 }]
 
+const dropdownOptions = [
+  {
+    label: 'Zoom to',
+    key: 'zoom-to',
+  },
+  {
+    label: 'Toogle',
+    key: 'toogle',
+  },
+]
+
+function handleSelect(key: string | number, option: TreeOption) {
+  if (key === 'zoom-to') {
+    viewer.value?.zoomTo(option.level as Level, option.key as string)
+  }
+  // if (key === 'toogle') {
+  //   viewer.value?.toggle(option.level as Level, option.key as string)
+  // }
+}
+
 watch(precision, () => {
   if (!viewer.value)
     return
@@ -46,6 +66,10 @@ async function loadDefaultMap() {
     const res = await fetch('/data/Town04_Opt.xodr')
     const content = await res.text()
     if (content && viewer.value) {
+      store.setFileInfo({
+        name: 'Town04_Opt.xodr',
+        size: 0,
+      })
       store.setOpenDriveContent(content)
       const openDrive = parseOpenDrive(content, precision.value)
       store.setOpenDrive(openDrive)
@@ -71,12 +95,17 @@ function handleChange({ file }: { file: UploadFileInfo }) {
   loading.value = true
   const t1 = performance.now()
   const reader = new FileReader()
+
+  store.clear()
+  store.setFileInfo({
+    name: file.name,
+    size: file.file?.size || 0,
+  })
   reader.onload = (event) => {
     if (!viewer.value)
       return
     const content = event.target?.result as string
     if (content) {
-      store.clear()
       store.setOpenDriveContent(content)
       const openDrive = parseOpenDrive(content, precision.value)
       store.setOpenDrive(openDrive)
@@ -106,6 +135,34 @@ function nodeProps({ option }: { option: TreeOption }) {
   }
 }
 
+function renderSuffix({ option }: { option: TreeOption }) {
+  return h(
+    NDropdown,
+    {
+      trigger: 'click',
+      size: 'small',
+      placement: 'left-start',
+      options: dropdownOptions,
+      onSelect: (key: string | number) => handleSelect(key, option),
+    },
+    {
+      default: () => h(
+        NButton,
+        {
+          text: true,
+          style: 'margin-left: 4px; display: flex; align-items: center;',
+          onClick: (e: MouseEvent) => {
+            e.stopPropagation()
+          },
+        },
+        {
+          default: () => h(NIcon, { size: 12 }, { default: () => h(EllipsisH) }),
+        },
+      ),
+    },
+  )
+}
+
 const roadNetworkData = computed(() => {
   if (!openDrive.value)
     return []
@@ -192,7 +249,8 @@ function handlePerfMonitor(v: boolean) {
         <NScrollbar style="max-height: 320px;">
           <NTree
             block-line :data="roadNetworkData" :indent="14" :show-line="true"
-            :node-props="nodeProps"
+            expand-on-click :selectable="false"
+            :node-props="nodeProps" :render-suffix="renderSuffix"
           />
         </NScrollbar>
       </NCollapseItem>

apps/viewer/src/libs/converter.ts

@@ -89,10 +89,17 @@ class ViewManager {
   }
 
   fitToCamera() {
+    const box = this.calculateBoundingBox()
+    this.fitToBox(box)
+  }
+
+  fitToBox(box: Box3) {
+    if (box.isEmpty())
+      return
+
     const camera = this.viewer.camera
     const controls = this.viewer.controls
 
-    const box = this.calculateBoundingBox()
     const size = box.getSize(new Vector3())
     const center = box.getCenter(new Vector3())
     const offset = 1.2
@@ -101,13 +108,11 @@ class ViewManager {
     const fov = MathUtils.degToRad(camera.fov)
     const distance = (maxSize / 2) / Math.tan(fov / 2) * offset
 
-    const dir = new Vector3()
-      .subVectors(camera.position, controls?.target ?? center)
-      .normalize()
+    const currentPos = camera.position.clone()
+    const currentTarget = controls?.target.clone() ?? new Vector3()
+    const direction = currentPos.sub(currentTarget).normalize()
 
-    camera.position.copy(
-      dir.multiplyScalar(distance).add(center),
-    )
+    camera.position.copy(direction.multiplyScalar(distance).add(center))
 
     camera.near = distance / 100
     camera.far = distance * 100
@@ -118,7 +123,8 @@ class ViewManager {
       controls.update()
     }
 
-    this.addHelper(size, center)
+    // Update helpers if needed, but maybe not for specific zoom
+    // this.addHelper(size, center)
   }
 
   clear() {

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

@@ -1,6 +1,7 @@
 import type { Lane, OpenDrive, ReferenceLine, Road } from 'opendrive-parser'
 import type { Material } from 'three'
-import { BufferAttribute, BufferGeometry, DoubleSide, Float32BufferAttribute, Group, LineBasicMaterial, LineSegments, Mesh, MeshBasicMaterial, NormalBlending, PerspectiveCamera, Raycaster, Scene, Vector2, Vector3, WebGLRenderer } from 'three'
+import type { Level } from './types'
+import { Box3, BufferAttribute, BufferGeometry, DoubleSide, Float32BufferAttribute, Group, LineBasicMaterial, LineSegments, Mesh, MeshBasicMaterial, NormalBlending, PerspectiveCamera, Raycaster, Scene, Vector2, Vector3, WebGLRenderer } from 'three'
 import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
 import { BufferGeometryUtils, OrbitControls } from 'three/examples/jsm/Addons.js'
 import HighlightManager from './highlight-manager'
@@ -164,6 +165,83 @@ class Viewer {
     this.addRoads(openDrive.getRoads())
   }
 
+  public getLaneFromId(laneId: string): Lane | undefined {
+    const parts = laneId.split('_')
+    if (parts.length < 3)
+      return undefined
+
+    const lId = parts.pop()!
+    const sS = parts.pop()!
+    const rId = parts.join('_')
+
+    const road = this.openDrive?.getRoadById(rId)
+    if (!road)
+      return undefined
+
+    const section = road.getLaneSectionByS(Number(sS))
+    if (!section)
+      return undefined
+
+    return section.getLaneById(lId)
+  }
+
+  public getElementBox(level: Level, key: string): Box3 {
+    const box = new Box3()
+    if (!this.openDrive)
+      return box
+
+    if (level === 'lane') {
+      const lane = this.getLaneFromId(key)
+      if (lane) {
+        const geom = this.createLaneGeometry(lane)
+        if (geom) {
+          geom.computeBoundingBox()
+          box.union(geom.boundingBox!)
+          geom.dispose()
+        }
+      }
+    }
+    else if (level === 'section') {
+      const parts = key.split('_')
+      const sS = parts.pop()
+      const rId = parts.join('_')
+      const road = this.openDrive.getRoadById(rId)
+      const section = road?.getLaneSectionByS(Number(sS))
+      if (section) {
+        for (const lane of section.getLanes()) {
+          const geom = this.createLaneGeometry(lane)
+          if (geom) {
+            geom.computeBoundingBox()
+            box.union(geom.boundingBox!)
+            geom.dispose()
+          }
+        }
+      }
+    }
+    else if (level === 'road') {
+      const road = this.openDrive.getRoadById(key)
+      if (road) {
+        for (const section of road.getLaneSections()) {
+          for (const lane of section.getLanes()) {
+            const geom = this.createLaneGeometry(lane)
+            if (geom) {
+              geom.computeBoundingBox()
+              box.union(geom.boundingBox!)
+              geom.dispose()
+            }
+          }
+        }
+      }
+    }
+
+    return box
+  }
+
+  public zoomTo(level: Level, key: string) {
+    const box = this.getElementBox(level, key)
+    this.vm.fitToBox(box)
+  }
+
   addReferenceLines(referenceLines: ReferenceLine[]): void {
     const material = new LineBasicMaterial({
       color: 0xE68816, // #e68816ff

apps/viewer/src/libs/viewer.ts

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 export const useAppStore = defineStore('app', () => {
+  const fileInfo = ref<{ name: string, size: number } | null>(null)
   const openDriveContent = ref<string | null>(null)
   const openDrive = ref<OpenDrive | null>(null)
   const viewer = ref<Viewer | null>(null)
@@ -13,6 +14,10 @@ export const useAppStore = defineStore('app', () => {
     viewer.value = v
   }
 
+  function setFileInfo(info: { name: string, size: number }) {
+    fileInfo.value = info
+  }
+
   function setSelectedLane(l: Lane | null) {
     selectedLane.value = l
   }
@@ -30,7 +35,8 @@ export const useAppStore = defineStore('app', () => {
     selectedLane.value = null
     openDrive.value = null
     openDriveContent.value = null
+    fileInfo.value = null
   }
 
-  return { openDriveContent, setOpenDriveContent, viewer, setViewer, selectedLane, setSelectedLane, openDrive, setOpenDrive, clear }
+  return { fileInfo, setFileInfo, openDriveContent, setOpenDriveContent, viewer, setViewer, selectedLane, setSelectedLane, openDrive, setOpenDrive, clear }
 })

apps/viewer/src/store.ts

@@ -25,4 +25,13 @@ body {
 
 .n-divider:not(.n-divider--vertical) {
   margin: 8px 0px;
+}
+
+.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix {
+  display: none !important;
+  padding: 0 !important;
+}
+
+.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix {
+  display: none !important;
 }