OnClick - can't get .dxf metadata

[vincepv]

Hello,

I am currently using DXF-Viewer to visualize DXF files in 2D, and I’m pleased to report that it works effectively for my needs. However, I am encountering a challenge when it comes to extracting metadata, particularly the text data associated with the DXF files.

Here is my code (Vue.js 3)

<template>
  <div class="canvasContainer" ref="canvasContainer">
    <div v-if="isLoading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { DxfViewer } from 'dxf-viewer'
import * as THREE from 'three'

const props = defineProps({
  dxfUrl: {
    type: String,
    default: null,
    required: true
  },
  fonts: {
    type: Array,
    default: () => null,
    required: true
  },
  options: {
    type: Object,
    default: () => ({
      clearColor: new THREE.Color("#f6f6f6"),
      autoResize: true,
      colorCorrection: true,
      sceneOptions: {
        wireframeMesh: true
      }
    })
  }
})

const emit = defineEmits(['clickedOnMap'])


const error = ref(null)
const isLoading = ref(false)
const canvasContainer = ref(null)

// Do not use Vue js reactivity !
// Three js handle by itself reactivity
// Conflict if mixing Vue & Three
let dxfViewer = null

const loadDxf = async (url) => {
  isLoading.value = true
  error.value = null
  try {
    await dxfViewer.Load({
      url,
      fonts: props.fonts
    })
  } catch (err) {
    console.error(err)
    error.value = `Error occurred: ${err.message}`
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  dxfViewer = new DxfViewer(canvasContainer.value, props.options)

  // dxf-viewer events
  const subscribeEvent = (eventName) => {
    dxfViewer.Subscribe(eventName, (event) => {
      console.info(`Event ${eventName} triggered:`, event)
      emit('clickedOnMap', event)
    })
  }

  const events = [
    "loaded", "cleared", "destroyed",
    "pointerdown", "pointerup", "viewChanged", "message"
  ]
  events.forEach(eventName => subscribeEvent(eventName))


  if (props.dxfUrl) {
    loadDxf(props.dxfUrl)
  }
})


watch(() => props.dxfUrl, (newUrl) => {
  if (newUrl) {
    loadDxf(newUrl)
  } else {
    if (dxfViewer) {
      dxfViewer.Clear()
    }
    error.value = null
    isLoading.value = false
  }
})

onUnmounted(() => {
  if (dxfViewer) {
    dxfViewer.Destroy()
    dxfViewer = null
  }
})
</script>

Here you can find a .dxf sample

AcDbEntity
  8
CAR
  6
ByLayer
 62
  256
370
   -1
100
AcDbText
 10
7.36984085424286
 20
54.29409293320103
 30
0
 40
0.3
  1
TOYOTA
 50
0
 41
1
 51
0
  7
STANDARD
 71
    0
210
0
220
0
230
1
100

I want to extract from dxf : inside entity CAR , text content : TOYOTA.

Behavior expected : when user click on dxf inside vue.js app, meta data TOYOTA is emitted.

Could you please provide guidance or resources on how to retrieve this information? Any help would be greatly appreciated.

Thank you for your time, and I look forward to your response.

Best,
Vincent