@logicflow/core 2.0.5 → 2.0.7

package/src/model/BaseModel.ts

@@ -56,6 +56,22 @@ export namespace Model {
     deltaY: number,
   ) => boolean | IsAllowMove
 
+  /**
+   * 限制节点resize规则
+   * model: 移动节点的 model
+   * deltaX: 中心点移动的 X 轴距离
+   * deltaY: 中心点移动的 Y 轴距离
+   * width: 中心点新的width
+   * height: 中心点新的height
+   */
+  export type NodeResizeRule = (
+    model: BaseNodeModel,
+    deltaX: number,
+    deltaY: number,
+    width: number,
+    height: number,
+  ) => boolean
+
   export type AdjustEdgeStartAndEndParams = {
     startPoint: LogicFlow.Point
     endPoint: LogicFlow.Point

package/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map } from 'lodash-es'
+import { find, forEach, map, merge } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -36,6 +36,7 @@ import {
   updateTheme,
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
+import { Grid } from '../view/overlay'
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
@@ -55,6 +56,8 @@ export class GraphModel {
 
   // 流程图主题配置
   theme: LogicFlow.Theme
+  // 网格配置
+  @observable grid: Grid.GridOptions
   // 事件中心
   readonly eventCenter: EventEmitter
   // 维护所有节点和边类型对应的 model
@@ -81,10 +84,15 @@ export class GraphModel {
 
   /**
    * 节点移动规则判断
-   * 在节点移动的时候，会出发此数组中的所有规则判断
+   * 在节点移动的时候，会触发此数组中的所有规则判断
    */
-
   nodeMoveRules: Model.NodeMoveRule[] = []
+  /**
+   * 节点resize规则判断
+   * 在节点resize的时候，会触发此数组中的所有规则判断
+   */
+  nodeResizeRules: Model.NodeResizeRule[] = []
+
   /**
    * 获取自定义连线轨迹
    */
@@ -137,6 +145,7 @@ export class GraphModel {
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
     this.theme = setupTheme(options.style)
+    this.grid = Grid.getGridOptions(grid ?? false)
     this.edgeType = options.edgeType || 'polyline'
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
@@ -1230,6 +1239,12 @@ export class GraphModel {
     }
   }
 
+  addNodeResizeRules(fn: Model.NodeResizeRule) {
+    if (!this.nodeResizeRules.includes(fn)) {
+      this.nodeResizeRules.push(fn)
+    }
+  }
+
   /**
    * 设置默认的边类型
    * 也就是设置在节点直接有用户手动绘制的连线类型。
@@ -1396,6 +1411,13 @@ export class GraphModel {
     this.theme = updateTheme({ ...this.theme, ...style })
   }
 
+  /**
+   * 更新网格配置
+   */
+  updateGridOptions(options: Partial<Grid.GridOptions>) {
+    merge(this.grid, options)
+  }
+
   /**
    * 重新设置画布的宽高
    */

package/src/model/edge/BaseEdgeModel.ts

@@ -87,6 +87,7 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
   // 边特有属性，动画及调整点
   @observable isAnimation = false
   @observable isShowAdjustPoint = false // 是否显示边两端的调整点
+  isDragging?: boolean
   // 引用属性
   graphModel: GraphModel
   @observable zIndex: number = 0

package/src/model/node/BaseNodeModel.ts

@@ -148,6 +148,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   targetRules: Model.ConnectRule[] = []
   sourceRules: Model.ConnectRule[] = []
   moveRules: Model.NodeMoveRule[] = [] // 节点移动之前的hook
+  resizeRules: Model.NodeResizeRule[] = [] // 节点resize之前的hook
   hasSetTargetRules = false // 用来限制rules的重复值
   hasSetSourceRules = false; // 用来限制rules的重复值
   [propName: string]: any // 支持用户自定义属性
@@ -281,6 +282,13 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    */
   resize(resizeInfo: ResizeInfo): ResizeNodeData {
     const { width, height, deltaX, deltaY } = resizeInfo
+
+    const isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height)
+
+    if (!isAllowResize) {
+      return this.getData()
+    }
+
     // 移动节点以及文本内容
     this.move(deltaX / 2, deltaY / 2)
 
@@ -761,6 +769,30 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     }
   }
 
+  @action addNodeResizeRules(fn: Model.NodeResizeRule) {
+    if (!this.resizeRules.includes(fn)) {
+      this.resizeRules.push(fn)
+    }
+  }
+
+  /**
+   * 内部方法
+   * 是否允许resize节点到新的位置
+   */
+  isAllowResizeNode(
+    deltaX: number,
+    deltaY: number,
+    width: number,
+    height: number,
+  ): boolean {
+    const rules = this.resizeRules.concat(this.graphModel.nodeResizeRules)
+    for (const rule of rules) {
+      const r = rule(this, deltaX, deltaY, width, height)
+      if (!r) return false
+    }
+    return true
+  }
+
   @action setSelected(flag = true): void {
     this.isSelected = flag
   }
@@ -803,7 +835,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     this.properties = nextProperties
     this.setAttributes()
 
-    // 触发更新节点 properties:change 的事件
+    // 触发更新节点 node:properties-change 的事件
     this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
       id: this.id,
       keys: updateKeys,

package/src/model/node/HtmlNodeModel.ts

@@ -6,7 +6,7 @@ import AnchorConfig = Model.AnchorConfig
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeProperties = {
+export interface IHtmlNodeProperties {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme

package/src/util/drag.ts

@@ -201,4 +201,16 @@ export class StepDrag {
     this.onDragEnd({ event: undefined })
     this.isDragging = false
   }
+
+  destroy = () => {
+    if (this.isStartDragging) {
+      // https://github.com/didi/LogicFlow/issues/1934
+      // https://github.com/didi/LogicFlow/issues/1926
+      // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+      // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+      // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+      // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+      this.cancelDrag()
+    }
+  }
 }

package/src/util/resize.ts

@@ -386,6 +386,12 @@ export const handleResize = ({
   const preNodeData = nodeModel.getData()
   const curNodeData = nodeModel.resize(nextSize)
 
+  // 检测preNodeData和curNodeData是否没变化
+  if (preNodeData.x === curNodeData.x && preNodeData.y === curNodeData.y) {
+    // 中心点x和y都没有变化，说明无法resize，阻止下面边的更新以及resize事件的emit
+    return
+  }
+
   // 更新边
   updateEdgePointByAnchors(nodeModel, graphModel)
   // 触发 resize 事件
@@ -417,7 +423,7 @@ export function calculateWidthAndHeight(
     y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
   }
   // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
-  let newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
+  const newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
 
   // 得到【touchEndPoint】右下角-没有transform的坐标
   let endZeroTouchControlPoint: SimplePoint = calculatePointAfterRotateAngle(

package/src/view/Anchor.tsx

@@ -189,14 +189,13 @@ class Anchor extends Component<IProps, IState> {
     this.sourceRuleResults.clear()
     this.targetRuleResults.clear()
     const { graphModel, nodeModel, anchorData } = this.props
-    if (edgeModel) {
-      graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
-        data: anchorData,
-        e: event!,
-        nodeModel,
-        edgeModel,
-      })
-    }
+
+    graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+      data: anchorData,
+      e: event!,
+      nodeModel,
+      edgeModel: edgeModel ?? undefined,
+    })
   }
 
   get customTrajectory() {

package/src/view/Control.tsx

@@ -57,7 +57,7 @@ export class ResizeControl extends Component<
   }
 
   componentWillUnmount() {
-    this.dragHandler.cancelDrag()
+    this.dragHandler.destroy()
   }
 
   updateEdgePointByAnchors = () => {

package/src/view/Graph.tsx

@@ -87,11 +87,10 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId}>
+      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
@@ -117,7 +116,7 @@ class Graph extends Component<IGraphProps> {
           <BackgroundOverlay background={options.background} />
         )}
         {/* 画布网格 */}
-        {grid && <Grid {...grid} graphModel={graphModel} />}
+        <Grid graphModel={graphModel} />
       </div>
     )
   }

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)
     }