feat: 添加数据类型

src/types/mxgraph.d.ts

@@ -15,3 +15,29 @@ export interface CellGeometry {
   width: number
   height: number
 }
+interface MxCellGeometry {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+interface MxCell {
+  id: string
+  value?: string
+  title?: string
+  parent?: MxCell
+  geometry?: MxCellGeometry
+  vertex?: boolean
+  edge?: boolean
+  isGroup?: boolean
+  style?: string
+  [key: string]: any
+}
+interface GraphData {
+  cells: {
+    nodes: MxCell[]
+    groups: MxCell[]
+  }
+  edges: MxCell[]
+}

src/views/components/MyMxGraph/index.vue

@@ -96,9 +96,9 @@ import {
   myMxConnectionConstraint,
   myMxPolyline
 } from '@/graph/mxGraph'
-import { CellGeometry } from '@/types/mxgraph'
+import { CellGeometry, GraphData } from '@/types/mxgraph'
 import { shapes } from '@/views/components/MyMxGraph/graph_shapes'
-import _ from 'lodash'
+import { pick } from 'lodash-es'
 import * as R from 'ramda'
 const graphContainerRef = ref<HTMLElement | null>(null)
 const baseShapeRef = ref<HTMLElement[]>([])
@@ -115,7 +115,7 @@ const edgeStyle = ref('orthogonalEdgeStyle')
 
 const graphX = ref(100)
 const graphY = ref(10)
-const jsonData = ref({
+const jsonData = ref<GraphData>({
   cells: {
     nodes: [],
     groups: []
@@ -490,21 +490,17 @@ const eventCenter = () => {
   // 新增节点事件
   graph.value.addListener(myMxEvent.ADD_CELLS, (_sender: any, evt: any) => {
     nextTick(() => {
-      console.log('添加节点')
-
       const addCell = evt.properties.cells[0]
       if (addCell.vertex) {
-        // 判断是否为组节点
         if (addCell.isGroup) {
-          const groupObj = _.pick(addCell, ['id', 'title', 'parent', 'geometry'])
+          const groupObj = pick(addCell, ['id', 'title', 'parent', 'geometry'])
           jsonData.value.cells.groups.push(groupObj)
         } else {
-          const nodeObj = _.pick(addCell, ['id', 'title', 'parent', 'geometry'])
+          const nodeObj = pick(addCell, ['id', 'title', 'parent', 'geometry'])
           jsonData.value.cells.nodes.push(nodeObj)
         }
       } else if (addCell.edge) {
-        console.log(addCell)
-        const lineObj = _.pick(addCell, ['id', 'edge', 'source', 'parent', 'geometry', 'value'])
+        const lineObj = pick(addCell, ['id', 'edge', 'source', 'parent', 'geometry', 'value'])
         jsonData.value.edges.push(lineObj)
       }
     })