@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.10

package/src/util/resize.ts

@@ -0,0 +1,286 @@
+import { ResizeControl, ResizeControlIndex } from '../view/Control'
+import { cloneDeep, find, forEach } from 'lodash-es'
+import { BaseNodeModel, GraphModel } from '../model'
+import { EventType } from '../constant'
+
+import ResizeInfo = ResizeControl.ResizeInfo
+import ResizeNodeData = ResizeControl.ResizeNodeData
+
+/**
+ * 计算 Control 拖动后，节点的高度信息
+ * @param index
+ * @param resizeInfo
+ * @param pct
+ * @param freezeWidth
+ * @param freezeHeight
+ */
+export const recalcResizeInfo = (
+  index: ResizeControlIndex,
+  resizeInfo: ResizeInfo,
+  pct = 1,
+  freezeWidth = false,
+  freezeHeight = false,
+): ResizeInfo => {
+  const nextResizeInfo = cloneDeep(resizeInfo)
+  let { deltaX, deltaY } = nextResizeInfo
+  const { width, height, PCTResizeInfo } = nextResizeInfo
+  if (PCTResizeInfo) {
+    const sensitivity = 4 // 越低越灵敏
+    let deltaScale = 0
+    let combineDelta = 0
+    switch (index) {
+      case ResizeControlIndex.LEFT_TOP:
+        combineDelta = (deltaX * -1 - deltaY) / sensitivity
+        break
+      case ResizeControlIndex.RIGHT_TOP:
+        combineDelta = (deltaX - deltaY) / sensitivity
+        break
+      case ResizeControlIndex.RIGHT_BOTTOM:
+        combineDelta = (deltaX + deltaY) / sensitivity
+        break
+      case ResizeControlIndex.LEFT_BOTTOM:
+        combineDelta = (deltaX * -1 + deltaY) / sensitivity
+        break
+      default:
+        break
+    }
+
+    if (combineDelta !== 0) {
+      deltaScale =
+        Math.round(
+          (combineDelta / PCTResizeInfo.ResizeBasis.basisHeight) * 100000,
+        ) / 1000
+    }
+
+    PCTResizeInfo.ResizePCT.widthPCT = Math.max(
+      Math.min(
+        PCTResizeInfo.ResizePCT.widthPCT + deltaScale,
+        PCTResizeInfo.ScaleLimit.maxScaleLimit,
+      ),
+      PCTResizeInfo.ScaleLimit.minScaleLimit,
+    )
+    PCTResizeInfo.ResizePCT.heightPCT = Math.max(
+      Math.min(
+        PCTResizeInfo.ResizePCT.heightPCT + deltaScale,
+        PCTResizeInfo.ScaleLimit.maxScaleLimit,
+      ),
+      PCTResizeInfo.ScaleLimit.minScaleLimit,
+    )
+
+    const spcWidth = Math.round(
+      (PCTResizeInfo.ResizePCT.widthPCT *
+        PCTResizeInfo.ResizeBasis.basisWidth) /
+        100,
+    )
+    const spcHeight = Math.round(
+      (PCTResizeInfo.ResizePCT.heightPCT *
+        PCTResizeInfo.ResizeBasis.basisHeight) /
+        100,
+    )
+
+    switch (index) {
+      case ResizeControlIndex.LEFT_TOP:
+        deltaX = width - spcWidth
+        deltaY = height - spcHeight
+        break
+      case ResizeControlIndex.RIGHT_TOP:
+        deltaX = spcWidth - width
+        deltaY = height - spcHeight
+        break
+      case ResizeControlIndex.RIGHT_BOTTOM:
+        deltaX = spcWidth - width
+        deltaY = spcHeight - height
+        break
+      case ResizeControlIndex.LEFT_BOTTOM:
+        deltaX = width - spcWidth
+        deltaY = spcHeight - height
+        break
+      default:
+        break
+    }
+    return nextResizeInfo
+  }
+
+  // 如果限制了宽/高不变，对应的 width/height 保持一致
+  switch (index) {
+    case ResizeControlIndex.LEFT_TOP:
+      nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct
+      nextResizeInfo.height = freezeHeight ? height : height - deltaY * pct
+      break
+    case ResizeControlIndex.RIGHT_TOP:
+      nextResizeInfo.width = freezeWidth ? width : width + deltaX * pct
+      nextResizeInfo.height = freezeHeight ? height : height - deltaY * pct
+      break
+    case ResizeControlIndex.RIGHT_BOTTOM:
+      nextResizeInfo.width = freezeWidth ? width : width + deltaX * pct
+      nextResizeInfo.height = freezeHeight ? height : height + deltaY * pct
+      break
+    case ResizeControlIndex.LEFT_BOTTOM:
+      nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct
+      nextResizeInfo.height = freezeHeight ? height : height + deltaY * pct
+      break
+    default:
+      break
+  }
+
+  return nextResizeInfo
+}
+
+export const updateEdgePointByAnchors = (
+  nodeModel: BaseNodeModel,
+  graphModel: GraphModel,
+) => {
+  // https://github.com/didi/LogicFlow/issues/807
+  // https://github.com/didi/LogicFlow/issues/875
+  // 之前的做法，比如Rect是使用getRectResizeEdgePoint()计算边的point缩放后的位置
+  // getRectResizeEdgePoint()考虑了瞄点在四条边以及在4个圆角的情况
+  // 使用的是一种等比例缩放的模式，比如：
+  // const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+  // afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+  // 但是用户自定义的getDefaultAnchor()不一定是按照比例编写的
+  // 它可能是 x: x + 20：每次缩放都会保持在x右边20的位置，因此用户自定义瞄点时，然后产生无法跟随的问题
+  // 现在的做法是：直接获取用户自定义瞄点的位置，然后用这个位置作为边的新的起点，而不是自己进行计算
+  const { id, anchors } = nodeModel
+  const edges = graphModel.getNodeEdges(id)
+  // 更新边
+  forEach(edges, (edge) => {
+    if (edge.sourceNodeId === id) {
+      // 边是以该节点为 sourceNode 时
+      const anchorItem = find(
+        anchors,
+        (anchor) => anchor.id === edge.sourceAnchorId,
+      )
+
+      if (anchorItem) {
+        edge.updateStartPoint({
+          x: anchorItem.x,
+          y: anchorItem.y,
+        })
+      }
+    } else if (edge.targetNodeId === id) {
+      // 边是以该节点为 targetNode 时
+      const anchorItem = find(
+        anchors,
+        (anchor) => anchor.id === edge.targetAnchorId,
+      )
+
+      if (anchorItem) {
+        edge.updateEndPoint({
+          x: anchorItem.x,
+          y: anchorItem.y,
+        })
+      }
+    }
+  })
+}
+
+export const triggerResizeEvent = (
+  preNodeData: ResizeNodeData,
+  curNodeData: ResizeNodeData,
+  deltaX: number,
+  deltaY: number,
+  index: number,
+  nodeModel: BaseNodeModel,
+  graphModel: GraphModel,
+) => {
+  graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
+    preData: preNodeData,
+    data: curNodeData,
+    deltaX,
+    deltaY,
+    index,
+    model: nodeModel,
+  })
+}
+
+// TODO：确认 handleResize 函数的类型定义
+// export type IHandleResizeParams = {
+//   deltaX: number
+//   deltaY: number
+//   index: ResizeControlIndex
+//   nodeModel: BaseNodeModel
+//   graphModel: GraphModel
+//   cancelCallback?: () => void
+// }
+
+/**
+ * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
+ * @param deltaX
+ * @param deltaY
+ * @param index
+ * @param nodeModel
+ * @param graphModel
+ * @param cancelCallback
+ */
+export const handleResize = ({
+  deltaX,
+  deltaY,
+  index,
+  nodeModel,
+  graphModel,
+  cancelCallback,
+}) => {
+  const {
+    r, // circle
+    rx, // ellipse/diamond
+    ry,
+    width, // rect/html
+    height,
+    PCTResizeInfo,
+
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+  } = nodeModel
+  const isFreezeWidth = minWidth === maxWidth
+  const isFreezeHeight = minHeight === maxHeight
+
+  const resizeInfo = {
+    width: r || rx || width,
+    height: r || ry || height,
+    deltaX,
+    deltaY,
+    PCTResizeInfo,
+  }
+
+  const pct = r || (rx && ry) ? 1 / 2 : 1
+  const nextSize = recalcResizeInfo(
+    index,
+    resizeInfo,
+    pct,
+    isFreezeWidth,
+    isFreezeHeight,
+  )
+
+  // 限制放大缩小的最大最小范围
+  if (
+    nextSize.width < minWidth ||
+    nextSize.width > maxWidth ||
+    nextSize.height < minHeight ||
+    nextSize.height > maxHeight
+  ) {
+    // this.dragHandler.cancelDrag()
+    cancelCallback?.()
+    return
+  }
+  // 如果限制了宽高不变，对应的 x/y 不产生位移
+  nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
+  nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
+
+  const preNodeData = nodeModel.getData()
+  const curNodeData = nodeModel.resize(nextSize)
+
+  // 更新边
+  updateEdgePointByAnchors(nodeModel, graphModel)
+  // 触发 resize 事件
+  triggerResizeEvent(
+    preNodeData,
+    curNodeData,
+    deltaX,
+    deltaY,
+    index,
+    nodeModel,
+    graphModel,
+  )
+}

package/src/view/Anchor.tsx

@@ -6,7 +6,7 @@ import { ElementState, EventType } from '../constant'
 import { GraphModel, BaseNodeModel, Model } from '../model'
 import {
   StepDrag,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
   targetNodeInfo,
   distance,
   cancelRaf,
@@ -29,7 +29,7 @@ interface IProps {
   anchorIndex: number
   graphModel: GraphModel
   nodeModel: BaseNodeModel
-  setHoverOFF: (e: MouseEvent) => void
+  setHoverOff: (e: MouseEvent) => void
 }
 
 interface IState {
@@ -116,7 +116,7 @@ class Anchor extends Component<IProps, IState> {
       endY: anchorData.y,
     })
   }
-  onDragging = ({ event }) => {
+  onDragging = ({ event }: IDragParams) => {
     const { graphModel, nodeModel, anchorData } = this.props
     const {
       transformModel,
@@ -125,6 +125,8 @@ class Anchor extends Component<IProps, IState> {
       height,
       editConfigModel: { autoExpand, stopMoveGraph },
     } = graphModel
+    // TODO：确认该方法是否有影响！理论上 onDragging 时 event 必有值
+    if (!event) return
     const { clientX, clientY } = event
     const {
       domOverlayPosition: { x, y },
@@ -326,11 +328,11 @@ class Anchor extends Component<IProps, IState> {
         )
         this.sourceRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(sourceRuleResult),
+          formatAnchorConnectValidateData(sourceRuleResult),
         )
         this.targetRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(targetRuleResult),
+          formatAnchorConnectValidateData(targetRuleResult),
         )
       }
       const { isAllPass: isSourcePass } =

package/src/view/Control.tsx

@@ -2,7 +2,7 @@ import { createElement as h, Component } from 'preact/compat'
 import { cloneDeep, find, forEach, map } from 'lodash-es'
 import { Rect } from './shape'
 import LogicFlow from '../LogicFlow'
-import { getNodeBBox, IDragParams, StepDrag } from '../util'
+import { getNodeBBox, IDragParams, StepDrag, handleResize } from '../util'
 import { BaseNodeModel, GraphModel } from '../model'
 
 import NodeData = LogicFlow.NodeData
@@ -103,11 +103,19 @@ export class ResizeControl extends Component<
 
   triggerResizeEvent = (
     preNodeData: ResizeNodeData,
-    nextNodeData: ResizeNodeData,
+    curNodeData: ResizeNodeData,
+    deltaX,
+    deltaY,
+    index,
+    nodeModel: BaseNodeModel,
   ) => {
     this.graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
-      preNodeData,
-      nextNodeData,
+      preData: preNodeData,
+      data: curNodeData,
+      deltaX,
+      deltaY,
+      index,
+      model: nodeModel,
     })
   }
 
@@ -232,64 +240,75 @@ export class ResizeControl extends Component<
   }
 
   resizeNode = ({ deltaX, deltaY }: VectorData) => {
-    // TODO: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
-    // 1. 计算当前 Control 的一些信息，
-    const {
-      r, // circle
-      rx, // ellipse/diamond
-      ry,
-      width, // rect/html
-      height,
-      PCTResizeInfo,
-
-      minWidth,
-      minHeight,
-      maxWidth,
-      maxHeight,
-    } = this.nodeModel
-    const isFreezeWidth = minWidth === maxWidth
-    const isFreezeHeight = minHeight === maxHeight
-
-    const resizeInfo = {
-      width: r || rx || width,
-      height: r || ry || height,
+    const { index } = this
+    const { model, graphModel } = this.props
+
+    // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
+    handleResize({
       deltaX,
       deltaY,
-      PCTResizeInfo,
-    }
-
-    const pct = r || (rx && ry) ? 1 / 2 : 1
-    const nextSize = this.recalcResizeInfo(
-      this.index,
-      resizeInfo,
-      pct,
-      isFreezeWidth,
-      isFreezeHeight,
-    )
-
-    // 限制放大缩小的最大最小范围
-    if (
-      nextSize.width < minWidth ||
-      nextSize.width > maxWidth ||
-      nextSize.height < minHeight ||
-      nextSize.height > maxHeight
-    ) {
-      this.dragHandler.cancelDrag()
-      return
-    }
-    // 如果限制了宽高不变，对应的 x/y 不产生位移
-    nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
-    nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
-
-    const preNodeData = this.nodeModel.getData()
-    const nextNodeData = this.nodeModel.resize(nextSize)
-
-    console.log('nextNodeData ===>>>', nextNodeData)
-
-    // 更新边
-    this.updateEdgePointByAnchors()
-    // 触发 resize 事件
-    this.triggerResizeEvent(preNodeData, nextNodeData)
+      index,
+      nodeModel: model,
+      graphModel,
+      cancelCallback: () => {
+        this.dragHandler.cancelDrag()
+      },
+    })
+    // 1. 计算当前 Control 的一些信息，
+    // const {
+    //   r, // circle
+    //   rx, // ellipse/diamond
+    //   ry,
+    //   width, // rect/html
+    //   height,
+    //   PCTResizeInfo,
+    //
+    //   minWidth,
+    //   minHeight,
+    //   maxWidth,
+    //   maxHeight,
+    // } = this.nodeModel
+    // const isFreezeWidth = minWidth === maxWidth
+    // const isFreezeHeight = minHeight === maxHeight
+    //
+    // const resizeInfo = {
+    //   width: r || rx || width,
+    //   height: r || ry || height,
+    //   deltaX,
+    //   deltaY,
+    //   PCTResizeInfo,
+    // }
+    //
+    // const pct = r || (rx && ry) ? 1 / 2 : 1
+    // const nextSize = this.recalcResizeInfo(
+    //   this.index,
+    //   resizeInfo,
+    //   pct,
+    //   isFreezeWidth,
+    //   isFreezeHeight,
+    // )
+    //
+    // // 限制放大缩小的最大最小范围
+    // if (
+    //   nextSize.width < minWidth ||
+    //   nextSize.width > maxWidth ||
+    //   nextSize.height < minHeight ||
+    //   nextSize.height > maxHeight
+    // ) {
+    //   this.dragHandler.cancelDrag()
+    //   return
+    // }
+    // // 如果限制了宽高不变，对应的 x/y 不产生位移
+    // nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
+    // nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
+    //
+    // const preNodeData = this.nodeModel.getData()
+    // const curNodeData = this.nodeModel.resize(nextSize)
+    //
+    // // 更新边
+    // this.updateEdgePointByAnchors()
+    // // 触发 resize 事件
+    // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
   }
 
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
@@ -304,6 +323,7 @@ export class ResizeControl extends Component<
 
   // 由于将拖拽放大缩小改成丝滑模式，这个时候需要再拖拽结束的时候，将节点的位置更新到 grid 上。
   onDragEnd = () => {
+    // TODO: 确认下面该代码是否还需要（应该是默认让节点拖拽以 gridSize 为步长移动）
     // const { gridSize = 1 } = this.graphModel
     // const x = gridSize * Math.round(this.nodeModel.x / gridSize)
     // const y = gridSize * Math.round(this.nodeModel.y / gridSize)
@@ -319,14 +339,25 @@ export class ResizeControl extends Component<
 
   render(): h.JSX.Element {
     const { x, y, direction, model } = this.props
-    const style = model.getResizeControlStyle()
+    const { width, height, ...restStyle } = model.getResizeControlStyle()
     return (
       <g className={`lf-resize-control lf-resize-control-${direction}`}>
         <Rect
           className="lf-resize-control-content"
           x={x}
           y={y}
-          {...style}
+          width={width ?? 7}
+          height={height ?? 7}
+          {...restStyle}
+        />
+        <Rect
+          className="lf-resize-control-content"
+          x={x}
+          y={y}
+          width={25}
+          height={25}
+          fill="transparent"
+          stroke="transparent"
           onMouseDown={this.dragHandler.handleMouseDown}
         />
       </g>

package/src/view/Graph.tsx

@@ -1,5 +1,5 @@
 import { Component, ComponentType } from 'preact/compat'
-import { map } from 'lodash-es'
+import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
   ToolOverlay,
@@ -12,14 +12,15 @@ import {
 } from './overlay'
 import DnD from './behavior/dnd'
 import { observer } from '..'
+import Tool from '../tool'
 import { Options as LFOptions } from '../options'
-import Tool from '../tool/tool'
 import {
   GraphModel,
   BaseEdgeModel,
   BaseNodeModel,
   SnaplineModel,
 } from '../model'
+import { EventType } from '../constant'
 
 type IGraphProps = {
   getView: (type: string) => ComponentType<any> | undefined
@@ -37,6 +38,23 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
+  handleResize = () => {
+    this.props.graphModel.resize()
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', throttle(this.handleResize, 200))
+  }
+
+  componentDidUpdate() {
+    const data = this.props.graphModel.modelToGraphData()
+    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, { data })
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', throttle(this.handleResize, 200))
+  }
+
   getComponent(
     model: BaseEdgeModel | BaseNodeModel,
     graphModel: GraphModel,
@@ -68,12 +86,11 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const grid = options.grid as any // TODO: fix type
+    const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
-
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
+      <div className="lf-graph" flow-id={graphModel.flowId}>
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
@@ -95,7 +112,7 @@ class Graph extends Component<IGraphProps> {
         {options.background && (
           <BackgroundOverlay background={options.background} />
         )}
-        {options.grid && <Grid {...grid} graphModel={graphModel} />}
+        {grid && <Grid {...grid} graphModel={graphModel} />}
       </div>
     )
   }

package/src/view/Rotate.tsx

@@ -83,7 +83,8 @@ class RotateControlPoint extends Component<IRotateControlProps> {
 
     eventCenter.emit(EventType.NODE_ROTATE, {
       e: event,
-      nodeModel,
+      model: nodeModel,
+      data: nodeModel.getData(),
     })
   }
 

package/src/view/behavior/index.ts

@@ -0,0 +1,2 @@
+export * from './dnd'
+export * from './snapline'

package/src/{tool → view/behavior}/snapline.ts

@@ -1,13 +1,12 @@
-import EventEmitter from '../event/eventEmitter'
-import SnaplineModel from '../model/SnaplineModel'
+import EventEmitter from '../../event/eventEmitter'
+import SnaplineModel from '../../model/SnaplineModel'
 
 export function snapline(
   eventCenter: EventEmitter,
   snaplineModel: SnaplineModel,
 ): void {
   // 节点拖动时启动对齐线计算
-  eventCenter.on('node:mousemove', ({ data }: any) => {
-    // TODO: 取消注释，定义 data 类型，解决编译问题
+  eventCenter.on('node:mousemove', ({ data }) => {
     snaplineModel.setNodeSnapLine(data)
   })
   // 节点拖动结束时，对齐线消失