add DxfViewerComponent and integrate into ResultModal; update package dependencies

Author: BuJlJlu

components/DialogWrapper.vue

@@ -2,12 +2,8 @@
     <teleport to="body">
         <div v-if="isModalOpen" class="modal">
             <div class="modal__background" @click="closeModal"></div>
-
             <div class="modal__body modal-body">
-                <MainButton label="close modal" :isLabelShow=false :size="sizeType.s" :icon="iconType.close"
-                    @click="closeModal" class="modal-body__close" />
-
-                
+                <MainButton label="close modal" :isLabelShow=false :size="sizeType.s" :icon="iconType.close" @click="closeModal" class="modal-body__close" />
                 <slot />
             </div>
         </div>

components/DxfViewerComponent.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="dxf-viewer-container" ref="containerRef">
+        <div v-if="isLoading" class="loading-overlay">
+            <MainLoader  />
+        </div>
+        <div v-if="error" class="error-overlay">
+            Err
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    dxfUrl: {
+        type: String,
+        default: null
+    },
+    options: {
+        type: Object,
+        default: () => ({
+            autoResize: true,
+            colorCorrection: true,
+            clearColor: 0xE9E9E7,
+        })
+    }
+})
+const containerRef = ref(null)
+const isLoading = ref(false)
+const error = ref(null)
+let dxfViewer = null
+
+const loadDxf = async (url) => {
+    if (!url || !dxfViewer) return
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+        await dxfViewer.Load({ url })
+    } catch (err) {
+        console.error('DXF loading error:', err)
+        error.value = err.message || err.toString()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+const clearViewer = () => {
+    if (dxfViewer) {
+        dxfViewer.Clear()
+        error.value = null
+    }
+}
+
+onMounted(async () => {
+    await nextTick()
+    
+    if (process.client && containerRef.value) {
+        const [{ DxfViewer }, THREE] = await Promise.all([
+            import('dxf-viewer'),
+            import('three')
+        ])
+        const viewerOptions = {
+            ...props.options
+        }
+        if (props.options.clearColor !== undefined) {
+            viewerOptions.clearColor = new THREE.Color(props.options.clearColor)
+        }
+        dxfViewer = new DxfViewer(containerRef.value, viewerOptions)
+        if (props.dxfUrl) {
+            await loadDxf(props.dxfUrl)
+        }
+    }
+})
+
+onBeforeUnmount(() => {
+    if (dxfViewer) {
+        dxfViewer.Destroy()
+        dxfViewer = null
+    }
+})
+
+watch(() => props.dxfUrl, async (newUrl, oldUrl) => {
+    if (newUrl !== oldUrl) {
+        if (newUrl) {
+            await loadDxf(newUrl)
+        } else {
+            clearViewer()
+        }
+    }
+})
+
+defineExpose({
+    getViewer: () => dxfViewer,
+    loadDxf,
+    clearViewer
+})
+</script>
+
+<style scoped lang="scss">
+.dxf-viewer-container {
+    position: relative;
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    min-height: 320px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    canvas {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+    }
+}
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--fill-tertiary);
+    z-index: 10;
+    border-radius: 8px;
+}
+
+.error-overlay {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    background-color: var(--error-background);
+    border: solid 1px var(--error-border);
+    color: var(--label-primary);
+}
+</style>

components/ResultModal.vue

@@ -33,15 +33,15 @@
                     class="controls__next"
                 />
             </div>
+
             <div class="modal__wrapper">
                 <div v-if="isHaveError" :class="placeholderClasses" class="modal__placeholder">
                     Err
                 </div>
                 <template v-else-if="resultModalData.isMultiSheet">
-                    <SvgDisplay
-                        :src="resultModalData.svgs[activePart]" 
-                        :class="displayClasses" 
-                        @click="updateFullScreen"
+                    <DxfViewerComponent
+                        :dxfUrl="resultModalData.dxfs[activePart]"
+                        :class="displayClasses"
                         class="modal__display"
                     />
                     <MainButton
@@ -55,11 +55,10 @@
                         :theme="themeType.primary" 
                     />
                 </template>
-                <SvgDisplay
+                <DxfViewerComponent
                     v-else
-                    :src="resultModalData.svgs[0]" 
-                    :class="displayClasses" 
-                    @click="updateFullScreen"
+                    :dxfUrl="resultModalData.dxfs[0]"
+                    :class="displayClasses"
                     class="modal__display"
                 />
                 <MainButton v-if="!isHaveError" label="fullscreen" :size="sizeType.s" :theme="themeType.primary"
@@ -145,8 +144,15 @@ const updateFullScreen = () => {
     localStorage.setItem('isFullScreen', unref(isFullScreen))
 }
 onMounted(() => {
+    activePart.value = 0
     isFullScreen.value = localStorage.getItem('isFullScreen') === 'true'
 })
+
+watch(resultDialog, (isOpen) => {
+    if (isOpen) {
+        activePart.value = 0
+    }
+})
 const displayClasses = computed(() => ({
     'modal__display--is-fullscreen': unref(isFullScreen) && !unref(isHaveError)
 }))