@logicflow/core 2.1.3 → 2.1.5

package/src/model/edge/BaseEdgeModel.ts

@@ -144,10 +144,8 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     } = this.graphModel
     this.isShowAdjustPoint = adjustEdgeStartAndEnd
     assign(this, pickEdgeConfig(data))
-    const { overlapMode } = this.graphModel
-    if (overlapMode === OverlapMode.INCREASE) {
-      this.zIndex = data.zIndex || getZIndex()
-    }
+    const { overlapMode, eventCenter } = this.graphModel
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
     // 设置边的 anchors，也就是边的两个端点
     // 端点依赖于 edgeData 的 sourceNode 和 targetNode
     this.setAnchors()
@@ -155,6 +153,11 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     this.initPoints()
     // 文本位置依赖于边上的所有拐点
     this.formatText(data)
+
+    eventCenter.on('overlap:change', (data) => {
+      const { overlapMode: newMode } = data
+      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
+    })
   }
 
   /**
@@ -397,7 +400,13 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
+    // 因为默认模式和边在上模式下，对节点的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+    // 所以只在递增模式和静态模式下设置zIndex
+    if (
+      [OverlapMode.INCREASE, OverlapMode.STATIC].includes(
+        this.graphModel.overlapMode,
+      )
+    ) {
       data.zIndex = this.zIndex
     }
     const { x, y, value } = this.text
@@ -745,6 +754,24 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     this.updateStartPoint({ x: startPoint.x, y: startPoint.y })
     this.updateEndPoint({ x: endPoint.x, y: endPoint.y })
   }
+
+  // 堆叠模式变化时，更新zIndex
+  @action
+  updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex) {
+    switch (overlapMode) {
+      case OverlapMode.DEFAULT:
+        this.zIndex = 0
+        break
+      case OverlapMode.EDGE_TOP:
+        this.zIndex = 1
+        break
+      case OverlapMode.INCREASE:
+        this.zIndex = defaultZIndex
+        break
+      default:
+        break
+    }
+  }
 }
 
 export default BaseEdgeModel

package/src/model/node/BaseNodeModel.ts

@@ -206,10 +206,12 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
     assign(this, pickNodeConfig(data))
 
-    const { overlapMode } = this.graphModel
-    if (overlapMode === OverlapMode.INCREASE) {
-      this.zIndex = data.zIndex || getZIndex()
-    }
+    const { overlapMode, eventCenter } = this.graphModel
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
+    eventCenter.on('overlap:change', (data) => {
+      const { overlapMode: newMode } = data
+      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
+    })
   }
 
   /**
@@ -339,7 +341,13 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     if (this.rotate) {
       data.rotate = this.rotate
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
+    // 因为默认模式和节点在上模式下，对边的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+    // 所以只在递增模式和静态模式下设置zIndex
+    if (
+      [OverlapMode.INCREASE, OverlapMode.STATIC].includes(
+        this.graphModel.overlapMode,
+      )
+    ) {
       data.zIndex = this.zIndex
     }
     if (value) {
@@ -914,6 +922,23 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   @action updateAttributes(attributes: any) {
     assign(this, attributes)
   }
+  // 堆叠模式变化时，更新zIndex
+  @action
+  updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex) {
+    switch (overlapMode) {
+      case OverlapMode.DEFAULT:
+        this.zIndex = 1
+        break
+      case OverlapMode.EDGE_TOP:
+        this.zIndex = 0
+        break
+      case OverlapMode.INCREASE:
+        this.zIndex = defaultZIndex
+        break
+      default:
+        break
+    }
+  }
 }
 
 export namespace BaseNodeModel {

package/src/view/node/BaseNode.tsx

@@ -42,6 +42,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   mouseUpDrag?: boolean
   startTime?: number
   modelDisposer: IReactionDisposer
+  mouseDownPosition?: LogicFlow.Position
 
   constructor(props: IProps) {
     super()
@@ -249,6 +250,10 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     } = graphModel
     model.isDragging = true
     const { clientX, clientY } = event!
+    const { x: mouseDownX, y: mouseDownY } = this.mouseDownPosition!
+    if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+      model.isDragging = true
+    }
     let {
       canvasOverlayPosition: { x, y },
     } = graphModel.getPointByClient({
@@ -336,9 +341,17 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     // 节点拖拽进画布之后，不触发click事件相关emit
     // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
     const isDragging = this.mouseUpDrag === false
+    const curTime = new Date().getTime()
     if (!this.startTime) return
+    const timeInterval = curTime - this.startTime
     const { model, graphModel } = this.props
-    if (!isDragging) return // 如果是拖拽, 不触发click事件。
+    // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
+    // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
+    if (!isDragging && timeInterval > 300) return
+    if (!isDragging) {
+      this.onDragEnd()
+      this.handleMouseUp()
+    }
     // 节点数据，多为事件对象数据抛出
     const nodeData = model.getData()
     const position = graphModel.getPointByClient({
@@ -425,6 +438,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
 
   handleMouseDown = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
+    this.mouseDownPosition = { x: ev.clientX, y: ev.clientY }
     this.startTime = new Date().getTime()
     const { editConfigModel } = graphModel
     if (editConfigModel.adjustNodePosition && model.draggable) {
@@ -440,6 +454,8 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   }
 
   handleBlur = () => {
+    // 当节点通过自定义锚点实现节点删除时，这里props会变成undefined，需兼容一下
+    if (!this.props) return
     const { model, graphModel } = this.props
     graphModel.eventCenter.emit(EventType.NODE_BLUR, {
       data: model.getData(),