1

@@ -15,21 +15,18 @@
     "bpmn-js-properties-panel": "^0.37.2",
     "bpmn-js-token-simulation": "^0.10.0",
     "core-js": "^3.6.5",
-    "dat.gui": "^0.7.9",
     "diagram-js": "^6.8.2",
     "js-cookie": "2.2.0",
     "lodash": "^4.17.21",
+    "mxdraw": "^0.1.157",
     "node-sass": "^4.14.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "oimo": "^1.0.9",
-    "three": "^0.152.2",
     "vue": "2.6.10",
     "vue-json-editor": "^1.4.3",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.2",
     "vue-seamless-scroll": "^1.1.23",
-    "vue-threejs": "^0.2.0-alpha.1",
     "vuex": "3.1.0",
     "x2js": "^3.4.4"
   },

 /*
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-30 15:28:52
+ * @LastEditTime: 2023-05-31 16:00:26
  */
 import Vue from 'vue'
 import App from './App'

+<!--
+  功能：初始化功能描述
+  作者：calliope
+-->
 <template>
-  <div ref="canvas"></div>
+  <canvas id="mxcad">
+  </canvas>
 </template>
-
 <script>
-  import * as THREE from 'three'
-  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-  import { VueThreejs } from 'vue-threejs'
-
+  import Mx from "mxdraw"
   export default {
-    mixins: [VueThreejs],
-
     mounted () {
-      this.initCADViewer()
-    },
-
-    methods: {
-      initCADViewer () {
-        const container = this.$refs.canvas
-
-        // 创建场景
-        const scene = new THREE.Scene()
-
-        // 创建相机
-        const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000)
-        camera.position.set(0, 0, 10)
-
-        // 创建渲染器
-        const renderer = new THREE.WebGLRenderer({ antialias: true })
-        renderer.setSize(container.offsetWidth, container.offsetHeight)
-        container.appendChild(renderer.domElement)
-
-        // 添加灯光
-        const light = new THREE.DirectionalLight(0xffffff, 1)
-        light.position.set(0, 0, 1)
-        scene.add(light)
-
-        // 加载CAD文件
-        const loader = new GLTFLoader()
-        loader.load('./cad.dwg', (gltf) => {
-          scene.add(gltf.scene)
-          renderer.render(scene, camera)
+      // 动态加载 js库核心代码
+      Mx.loadCoreCode().then(() => {
+        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
+        // 创建控件对象
+        Mx.MxFun.createMxObject({
+          canvasId: "mxcad", // canvas元素的id
+          cadFile: "./cad.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸
+          // cadFile: "test2.dwg", //  socket通信方式请直接提供图纸名称 如：text.dwg
+          callback: (mxDraw, {
+            canvas,
+            canvasParent
+          }) => {
+            // 可以拿到canvas元素和它的父级元素
+            console.log(canvas, canvasParent)
+            console.log(mxDraw)
+            // 拿到图层数据
+            mxDraw.addEvent('uiSetLayerData', (listLayer) => {
+              console.log(listLayer)
+            })
+          },
+          isNewFile: true // 是否新建文件
         })
-
-        // 动画循环
-        const animate = () => {
-          requestAnimationFrame(animate)
-          renderer.render(scene, camera)
-        }
-        animate()
-      }
+      })
     }
   }
 </script>
-
-<style>
-  div {
+<style scoped lang='scss'>
+  #cad-container {
     width: 100%;
     height: 100%;
   }