fix: 修复 GraphModel 中 getAreaElement 方法的 bug 及一些其他类型定义的优化

Author: boyongjiong

packages/core/src/LogicFlow.tsx

@@ -1,5 +1,6 @@
 import { createElement as h, render, Component } from 'preact/compat'
 import { observer } from 'mobx-preact'
+import { cloneDeep, forEach } from 'lodash-es'
 import { Options as LFOptions } from './options'
 import {
   BaseNodeModel,
@@ -741,15 +742,15 @@ export class LogicFlow {
       nodes: [],
       edges: [],
     }
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i]
+    forEach(nodes, (node) => {
       const preId = node.id
       const nodeModel = this.addNode(node)
       if (!nodeModel) return
       if (preId) nodeIdMap[preId] = nodeModel.id
       elements.nodes.push(nodeModel)
-    }
-    edges.forEach((edge) => {
+    })
+
+    forEach(edges, (edge) => {
       let sourceId = edge.sourceNodeId
       let targetId = edge.targetNodeId
       if (nodeIdMap[sourceId]) sourceId = nodeIdMap[sourceId]
@@ -1246,10 +1247,11 @@ export class LogicFlow {
    * @param graphData 图数据
    */
   render(graphData: GraphConfigData) {
+    let graphRawData = cloneDeep(graphData)
     if (this.adapterIn) {
-      graphData = this.adapterIn(graphData)
+      graphRawData = this.adapterIn(graphRawData)
     }
-    this.renderRawData(graphData)
+    this.renderRawData(graphRawData)
   }
 
   /**
@@ -1339,8 +1341,8 @@ export namespace LogicFlow {
   }
 
   export interface GraphConfigData {
-    nodes: NodeConfig[]
-    edges: EdgeConfig[]
+    nodes?: NodeConfig[]
+    edges?: EdgeConfig[]
   }
 
   export interface GraphData {
@@ -1383,7 +1385,7 @@ export namespace LogicFlow {
 
   export interface EdgeConfig {
     id?: string
-    type: string // TODO: 将所有类型选项列出来；LogicFlow 内部默认为 polyline
+    type?: string // TODO: 将所有类型选项列出来；LogicFlow 内部默认为 polyline
 
     sourceNodeId: string
     sourceAnchorId?: string
@@ -1404,6 +1406,8 @@ export namespace LogicFlow {
     type: string
     text?: TextConfig
 
+    startPoint: Point
+    endPoint: Point
     [key: string]: unknown
   }
 

packages/core/src/model/GraphModel.ts

@@ -275,7 +275,7 @@ export class GraphModel {
         wholeEdge,
         wholeNode,
       )
-      if (!ignoreHideElement || (element.visible && isElementInArea)) {
+      if ((!ignoreHideElement || element.visible) && isElementInArea) {
         areaElements.push(element)
       }
     })
@@ -396,7 +396,7 @@ export class GraphModel {
    * 注意：将会清除画布上所有已有的节点和边
    * @param { object } graphData 图数据
    */
-  graphDataToModel(graphData: LogicFlow.GraphConfigData) {
+  graphDataToModel(graphData: Partial<LogicFlow.GraphConfigData>) {
     if (!this.width || !this.height) {
       this.resize()
     }
@@ -414,7 +414,7 @@ export class GraphModel {
     }
     if (graphData.edges) {
       this.edges = map(graphData.edges, (edge) => {
-        const Model = this.getModel(edge.type)
+        const Model = this.getModel(edge.type ?? '')
         if (!Model) {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
@@ -875,6 +875,8 @@ export class GraphModel {
       },
       this,
     )
+    console.log('edgeModel', edgeModel)
+
     const edgeData = edgeModel.getData()
     this.edges.push(edgeModel)
     this.eventCenter.emit(EventType.EDGE_ADD, { data: edgeData })

packages/core/src/model/edge/BaseEdgeModel.ts

@@ -52,8 +52,8 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable type = ''
   @observable sourceNodeId = ''
   @observable targetNodeId = ''
-  @observable startPoint: Point = { x: 0, y: 0 }
-  @observable endPoint: Point = { x: 0, y: 0 }
+  @observable startPoint!: Point
+  @observable endPoint!: Point
 
   @observable text = {
     value: '',
@@ -325,6 +325,8 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       )
     }
     targetAnchors.forEach((anchor) => {
+      if (!this.startPoint) return // 如果此时 this.startPoint 为 undefined，直接返回
+
       const distance = twoPointDistance(anchor, this.startPoint)
       if (minDistance === undefined) {
         minDistance = distance
@@ -623,8 +625,10 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   @action
   moveStartPoint(deltaX, deltaY): void {
-    this.startPoint.x += deltaX
-    this.startPoint.y += deltaY
+    if (this.startPoint) {
+      this.startPoint.x += deltaX
+      this.startPoint.y += deltaY
+    }
   }
 
   @action
@@ -634,8 +638,10 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   @action
   moveEndPoint(deltaX, deltaY): void {
-    this.endPoint.x += deltaX
-    this.endPoint.y += deltaY
+    if (this.endPoint) {
+      this.endPoint.x += deltaX
+      this.endPoint.y += deltaY
+    }
   }
 
   @action

packages/core/src/view/edge/BaseEdge.tsx

@@ -104,6 +104,8 @@ export class BaseEdge extends Component<IProps> {
     const { id } = model
     const { refY = 0, refX = 2 } = model.getArrowStyle()
     const [start, end] = this.getLastTwoPoints()
+    console.log('start', start)
+    console.log('end', end)
     let theta: string | number = 'auto'
     if (start !== null && end !== null) {
       theta = degrees(
@@ -114,6 +116,7 @@ export class BaseEdge extends Component<IProps> {
         }),
       )
     }
+    console.log('theta', theta)
     return (
       <g>
         <defs>