@logicflow/core 2.0.6 → 2.0.7

package/src/view/behavior/dnd.ts

@@ -67,6 +67,7 @@ export class Dnd {
       this.lf.setNodeSnapLine(nodeData)
       this.lf.graphModel.eventCenter.emit(EventType.NODE_DND_DRAG, {
         data: nodeData,
+        e,
       })
     }
     return false

package/src/view/edge/BaseEdge.tsx

@@ -29,6 +29,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
 > {
   static isObserved: boolean = false
   static extendsKey?: string
+  mouseUpDrag?: boolean
 
   startTime?: number
   contextMenuTime?: number
@@ -385,13 +386,16 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     e.stopPropagation()
     this.startTime = new Date().getTime()
   }
+  handleMouseUp = () => {
+    const { model } = this.props
+    this.mouseUpDrag = model.isDragging
+  }
   /**
    * 不支持重写
    */
-  handleMouseUp = (e: MouseEvent) => {
+  handleClick = (e: MouseEvent) => {
     if (!this.startTime) return
-    const time = new Date().getTime() - this.startTime
-    if (time > 200) return // 事件大于200ms，认为是拖拽。
+    if (this.mouseUpDrag) return // 如果是拖拽，不触发click事件。
     const isRightClick = e.button === 2
     if (isRightClick) return
     // 这里 IE 11不能正确显示
@@ -490,6 +494,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
             .join(' ')}
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
+          onClick={this.handleClick}
           onContextMenu={this.handleContextMenu}
           onMouseOver={this.setHoverOn}
           onMouseEnter={this.setHoverOn}

package/src/view/overlay/Grid.tsx

@@ -5,19 +5,24 @@ import { createUuid } from '../../util'
 import { GraphModel } from '../../model'
 import { DEFAULT_GRID_SIZE } from '../../constant'
 
-import GridOptions = Grid.GridOptions
-
-type IProps = GridOptions & {
+type IProps = {
   graphModel: GraphModel
 }
 
 @observer
 export class Grid extends Component<IProps> {
+  gridOptions: Grid.GridOptions
+
   readonly id = createUuid()
 
+  constructor(props: IProps) {
+    super(props)
+    this.gridOptions = this.props.graphModel.grid
+  }
+
   // 网格类型为点状
   renderDot() {
-    const { config, size = 1, visible } = this.props
+    const { config, size = 1, visible } = this.gridOptions
 
     const { color, thickness = 2 } = config ?? {}
 
@@ -37,7 +42,7 @@ export class Grid extends Component<IProps> {
   // 网格类型为交叉线
   // todo: 采用背景缩放的方式，实现更好的体验
   renderMesh() {
-    const { config, size = 1, visible } = this.props
+    const { config, size = 1, visible } = this.gridOptions
     const { color, thickness = 1 } = config ?? {}
 
     // 对于交叉线网格，线的宽度不能大于网格大小的一半
@@ -48,7 +53,7 @@ export class Grid extends Component<IProps> {
       <path
         d={d}
         stroke={color}
-        strokeWidth={strokeWidth}
+        strokeWidth={strokeWidth / 2}
         opacity={opacity}
         fill="transparent"
       />
@@ -57,10 +62,9 @@ export class Grid extends Component<IProps> {
 
   render() {
     const {
-      type,
-      size = 1,
       graphModel: { transformModel },
     } = this.props
+    const { type, size = 1 } = this.gridOptions
     const { SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } =
       transformModel
     const matrixString = [
@@ -124,7 +128,7 @@ export namespace Grid {
       /**
        * 网格的颜色
        */
-      color: string
+      color?: string
       /**
        * 网格的宽度
        * - 对于 `dot` 点状网格，表示点的大小

package/src/view/text/BaseText.tsx

@@ -91,7 +91,7 @@ export class BaseText<
       graphModel: { transformModel },
     } = this.props
 
-    if (deltaX && deltaY) {
+    if (deltaX || deltaY) {
       const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
       model.moveText(curDeltaX, curDeltaY)
     }