@logicflow/extension 1.2.26 → 2.0.0-beta.0

package/src/NodeResize/control/Control.tsx

@@ -0,0 +1,527 @@
+import {
+  h,
+  Component,
+  GraphModel,
+  BaseNodeModel,
+  BaseEdgeModel,
+  RectNodeModel,
+  DiamondNodeModel,
+  EllipseNodeModel,
+  ModelType,
+  Rect,
+  LogicFlowUtil,
+} from '@logicflow/core'
+import { RectResizeModel } from '../node'
+
+type VectorData = Record<'deltaX' | 'deltaY', number>
+
+const { StepDrag } = LogicFlowUtil
+
+interface IControlProps {
+  index: number
+  x: number
+  y: number
+  model: BaseNodeModel
+  graphModel: GraphModel
+  style?: CSSStyleDeclaration
+}
+
+interface IControlState {
+  startX: number
+  startY: number
+  endX: number
+  endY: number
+  dragging: boolean
+}
+
+class Control extends Component<IControlProps, IControlState> {
+  index: number
+  nodeModel: BaseNodeModel
+  graphModel: GraphModel
+  dragHandler: LogicFlowUtil.StepDrag
+
+  constructor(props: IControlProps) {
+    super()
+    this.index = props.index
+    this.nodeModel = props.model
+    this.graphModel = props.graphModel
+    // 为保证对齐线功能正常使用，step默认是网格grid的两倍，
+    // 没有网格设置，默认为2，保证坐标是整数
+    // let step = 2;
+    // if (gridSize > 1) {
+    //   step = 2 * gridSize;
+    // }
+    // if (this.nodeModel.gridSize) {
+    //   step = 2 * this.nodeModel.gridSize;
+    // }
+
+    this.dragHandler = new StepDrag({
+      onDragging: this.onDragging,
+      onDragEnd: this.onDragEnd,
+      step: 1,
+    })
+  }
+
+  getNodeEdges(nodeId: string) {
+    const { graphModel } = this
+    const { edges } = graphModel
+    const sourceEdges: BaseEdgeModel[] = []
+    const targetEdges: BaseEdgeModel[] = []
+    for (let i = 0; i < edges.length; i++) {
+      const edgeModel = edges[i]
+      if (edgeModel.sourceNodeId === nodeId) {
+        sourceEdges.push(edgeModel)
+      } else if (edges[i].targetNodeId === nodeId) {
+        targetEdges.push(edgeModel)
+      }
+    }
+    return {
+      sourceEdges,
+      targetEdges,
+    }
+  }
+
+  // 更新中心点位置，更新文案位置
+  updatePosition = ({ deltaX, deltaY }: VectorData) => {
+    const { x, y } = this.nodeModel
+    this.nodeModel.x = x + deltaX / 2
+    this.nodeModel.y = y + deltaY / 2
+    this.nodeModel.moveText(deltaX / 2, deltaY / 2)
+  }
+  // 计算control拖动后，节点的宽高
+  getResize = ({
+    index,
+    deltaX,
+    deltaY,
+    width,
+    height,
+    PCTResizeInfo,
+    pct = 1,
+    freezeWidth = false,
+    freezeHeight = false,
+  }: any) => {
+    // TODO: 定义 getResize 方法的参数类型
+    const resize = {
+      width,
+      height,
+      deltaX,
+      deltaY,
+    }
+    if (PCTResizeInfo) {
+      const sensitivity = 4 // 越低越灵敏
+      let deltaScale = 0
+      let combineDelta = 0
+      switch (index) {
+        case 0:
+          combineDelta = (deltaX * -1 - deltaY) / sensitivity
+          break
+        case 1:
+          combineDelta = (deltaX - deltaY) / sensitivity
+          break
+        case 2:
+          combineDelta = (deltaX + deltaY) / sensitivity
+          break
+        case 3:
+          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 0:
+          deltaX = width - spcWidth
+          deltaY = height - spcHeight
+          break
+        case 1:
+          deltaX = spcWidth - width
+          deltaY = height - spcHeight
+          break
+        case 2:
+          deltaX = spcWidth - width
+          deltaY = spcHeight - height
+          break
+        case 3:
+          deltaX = width - spcWidth
+          deltaY = spcHeight - height
+          break
+        default:
+          break
+      }
+      resize.width = spcWidth
+      resize.height = spcHeight
+      resize.deltaX = deltaX / pct
+      resize.deltaY = deltaY / pct
+      return resize
+    }
+    // 如果限制了宽/高不变，对应的width/height保持一致
+    switch (index) {
+      case 0:
+        resize.width = freezeWidth ? width : width - deltaX * pct
+        resize.height = freezeHeight ? height : height - deltaY * pct
+        break
+      case 1:
+        resize.width = freezeWidth ? width : width + deltaX * pct
+        resize.height = freezeHeight ? height : height - deltaY * pct
+        break
+      case 2:
+        resize.width = freezeWidth ? width : width + deltaX * pct
+        resize.height = freezeHeight ? height : height + deltaY * pct
+        break
+      case 3:
+        resize.width = freezeWidth ? width : width - deltaX * pct
+        resize.height = freezeHeight ? height : height + deltaY * pct
+        break
+      default:
+        break
+    }
+    return resize
+  }
+  updateEdgePointByAnchors = () => {
+    // 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 } = this.nodeModel
+    const edges = this.getNodeEdges(id)
+    // 更新边
+    edges.sourceEdges.forEach((item) => {
+      const anchorItem = anchors.find(
+        (anchor) => anchor.id === item.sourceAnchorId,
+      )
+      if (anchorItem) {
+        item.updateStartPoint({
+          x: anchorItem.x,
+          y: anchorItem.y,
+        })
+      }
+    })
+    edges.targetEdges.forEach((item) => {
+      const anchorItem = anchors.find(
+        (anchor) => anchor.id === item.targetAnchorId,
+      )
+      if (anchorItem) {
+        item.updateEndPoint({
+          x: anchorItem.x,
+          y: anchorItem.y,
+        })
+      }
+    })
+  }
+  // 矩形更新
+  updateRect = ({ deltaX, deltaY }: VectorData) => {
+    const { x, y, width, height, radius, PCTResizeInfo } = this
+      .nodeModel as RectNodeModel
+    const { minWidth, minHeight, maxWidth, maxHeight } = this
+      .nodeModel as RectResizeModel
+    // 更新中心点位置，更新文案位置
+    const { index } = this
+    const freezeWidth = minWidth === maxWidth
+    const freezeHeight = minHeight === maxHeight
+    const size = this.getResize({
+      index,
+      deltaX,
+      deltaY,
+      width,
+      height,
+      PCTResizeInfo,
+      pct: 1,
+      freezeWidth,
+      freezeHeight,
+    })
+    // 限制放大缩小的最大最小范围
+    if (
+      size.width < minWidth ||
+      size.width > maxWidth ||
+      size.height < minHeight ||
+      size.height > maxHeight
+    ) {
+      // 为了避免放到和缩小位置和鼠标不一致的问题
+      this.dragHandler.cancelDrag()
+      return
+    }
+    // 如果限制了宽/高不变，对应的x/y不产生位移
+    this.updatePosition({
+      deltaX: freezeWidth ? 0 : size.deltaX,
+      deltaY: freezeHeight ? 0 : size.deltaY,
+    })
+    // 更新宽高
+    this.nodeModel.width = size.width
+    this.nodeModel.height = size.height
+    this.nodeModel.setProperties({
+      nodeSize: {
+        width: size.width,
+        height: size.height,
+      },
+    })
+    // const edges = this.getNodeEdges(id)
+    const beforeNode = {
+      x,
+      y,
+      width,
+      height,
+      radius,
+    }
+    const afterNode = {
+      x: this.nodeModel.x,
+      y: this.nodeModel.y,
+      width: this.nodeModel.width,
+      height: this.nodeModel.height,
+      radius,
+    }
+    // 更新边
+    this.updateEdgePointByAnchors()
+    this.eventEmit({
+      beforeNode,
+      afterNode,
+    })
+  }
+  // 椭圆更新
+  updateEllipse = ({ deltaX, deltaY }: VectorData) => {
+    const { rx, ry, x, y, PCTResizeInfo } = this.nodeModel as EllipseNodeModel
+    const { index } = this
+    const { minWidth, minHeight, maxWidth, maxHeight } = this
+      .nodeModel as RectResizeModel
+    const freezeWidth = minWidth === maxWidth
+    const freezeHeight = minHeight === maxHeight
+    const width = rx
+    const height = ry
+    const size = this.getResize({
+      index,
+      deltaX,
+      deltaY,
+      width,
+      height,
+      PCTResizeInfo,
+      pct: 1 / 2,
+      freezeWidth,
+      freezeHeight,
+    })
+    // 限制放大缩小的最大最小范围
+    if (
+      size.width < minWidth / 2 ||
+      size.width > maxWidth / 2 ||
+      size.height < minHeight / 2 ||
+      size.height > maxHeight / 2
+    ) {
+      this.dragHandler.cancelDrag()
+      return
+    }
+    // 更新中心点位置，更新文案位置
+    // 如果限制了宽/高不变，对应的x/y不产生位移
+    this.updatePosition({
+      deltaX: freezeWidth ? 0 : size.deltaX,
+      deltaY: freezeHeight ? 0 : size.deltaY,
+    })
+    // 更新rx ry,宽高为计算属性自动更新
+    // @ts-ignore
+    this.nodeModel.rx = size.width
+    // @ts-ignore
+    this.nodeModel.ry = size.height
+    this.nodeModel.setProperties({
+      nodeSize: {
+        rx: size.width,
+        ry: size.height,
+      },
+    })
+
+    const beforeNode = {
+      x,
+      y,
+    }
+    const afterNode = {
+      rx: size.width,
+      ry: size.height,
+      x: this.nodeModel.x,
+      y: this.nodeModel.y,
+    }
+    // 更新边
+    this.updateEdgePointByAnchors()
+    this.eventEmit({
+      beforeNode: {
+        ...beforeNode,
+        rx,
+        ry,
+      },
+      afterNode,
+    })
+  }
+  // 菱形更新
+  updateDiamond = ({ deltaX, deltaY }: VectorData) => {
+    const { rx, ry, x, y, PCTResizeInfo } = this.nodeModel as DiamondNodeModel
+    const { index } = this
+    const { minWidth, minHeight, maxWidth, maxHeight } = this
+      .nodeModel as RectResizeModel
+    const freezeWidth = minWidth === maxWidth
+    const freezeHeight = minHeight === maxHeight
+    const width = rx
+    const height = ry
+    const size = this.getResize({
+      index,
+      deltaX,
+      deltaY,
+      width,
+      height,
+      PCTResizeInfo,
+      pct: 1 / 2,
+      freezeWidth,
+      freezeHeight,
+    })
+    // 限制放大缩小的最大最小范围
+    if (
+      size.width < minWidth / 2 ||
+      size.width > maxWidth / 2 ||
+      size.height < minHeight / 2 ||
+      size.height > maxHeight / 2
+    ) {
+      this.dragHandler.cancelDrag()
+      return
+    }
+    // 更新中心点位置，更新文案位置
+    // 如果限制了宽/高不变，对应的x/y不产生位移
+    this.updatePosition({
+      deltaX: freezeWidth ? 0 : size.deltaX,
+      deltaY: freezeHeight ? 0 : size.deltaY,
+    })
+    // 更新rx ry,宽高为计算属性自动更新
+    // @ts-ignore
+    this.nodeModel.rx = size.width
+    // @ts-ignore
+    this.nodeModel.ry = size.height
+    this.nodeModel.setProperties({
+      nodeSize: {
+        rx: size.width,
+        ry: size.height,
+      },
+    })
+    const beforeNode = {
+      x,
+      y,
+      rx,
+      ry,
+    }
+    const afterNode = {
+      rx: size.width,
+      ry: size.height,
+      x: this.nodeModel.x,
+      y: this.nodeModel.y,
+    }
+    // 更新边
+    this.updateEdgePointByAnchors()
+    this.eventEmit({
+      beforeNode,
+      afterNode,
+    })
+  }
+  eventEmit = ({ beforeNode, afterNode }: any) => {
+    const { id, modelType, type } = this.nodeModel
+    const oldNodeSize = {
+      id,
+      modelType,
+      type,
+      ...beforeNode,
+    }
+    const newNodeSize = {
+      id,
+      modelType,
+      type,
+      ...afterNode,
+    }
+    this.graphModel.eventCenter.emit('node:resize', {
+      oldNodeSize,
+      newNodeSize,
+    })
+  }
+  onDragging = ({ deltaX, deltaY }: VectorData) => {
+    const { transformModel } = this.graphModel
+    const { modelType } = this.nodeModel
+    ;[deltaX, deltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
+    // html和矩形的计算方式是一样的，共用一个方法
+    if (
+      modelType === ModelType.RECT_NODE ||
+      modelType === ModelType.HTML_NODE
+    ) {
+      this.updateRect({
+        deltaX,
+        deltaY,
+      })
+      // this.nodeModel.resize(deltaX, deltaY);
+    } else if (modelType === ModelType.ELLIPSE_NODE) {
+      this.updateEllipse({
+        deltaX,
+        deltaY,
+      })
+    } else if (modelType === ModelType.DIAMOND_NODE) {
+      this.updateDiamond({
+        deltaX,
+        deltaY,
+      })
+    }
+  }
+  /**
+   * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
+   */
+  onDragEnd = () => {
+    const { gridSize = 1 } = this.graphModel
+    const x = gridSize * Math.round(this.nodeModel.x / gridSize)
+    const y = gridSize * Math.round(this.nodeModel.y / gridSize)
+    this.nodeModel.moveTo(x, y)
+
+    // 先触发onDragging()->更新边->再触发用户自定义的getDefaultAnchor()，所以onDragging()拿到的anchors是滞后的
+    // 为了正确设置最终的位置，应该在拖拽结束的时候，再设置一次边的Point位置，此时拿到的anchors是最新的
+    this.updateEdgePointByAnchors()
+  }
+
+  render(): h.JSX.Element {
+    const { x, y, index, model } = this.props
+    const style = (model as RectResizeModel).getControlPointStyle()
+    return (
+      <g className={`lf-resize-control-${index}`}>
+        <Rect
+          className="lf-node-control"
+          x={x}
+          y={y}
+          {...style}
+          onMouseDown={this.dragHandler.handleMouseDown}
+        />
+      </g>
+    )
+  }
+}
+
+export default Control

package/src/NodeResize/control/ControlGroup.tsx

@@ -0,0 +1,76 @@
+import { h, Component, Rect, BaseNodeModel, GraphModel } from '@logicflow/core'
+import Control from './Control'
+import { GroupNodeModel } from '../../materials/group'
+
+interface IControlGroupProps {
+  model: BaseNodeModel
+  graphModel: GraphModel
+}
+
+class ControlGroup extends Component<IControlGroupProps> {
+  constructor() {
+    super()
+    this.state = {}
+  }
+
+  getResizeControl(): h.JSX.Element[] {
+    const { model, graphModel } = this.props
+    const { x, y, width, height } = model
+    const box = {
+      minX: x - width / 2,
+      minY: y - height / 2,
+      maxX: x + width / 2,
+      maxY: y + height / 2,
+    }
+    const { minX, minY, maxX, maxY } = box
+    const controlList = [
+      // 左上角
+      {
+        x: minX,
+        y: minY,
+      },
+      // 右上角
+      {
+        x: maxX,
+        y: minY,
+      },
+      // 右下角
+      {
+        x: maxX,
+        y: maxY,
+      },
+      // 左下角
+      {
+        x: minX,
+        y: maxY,
+      },
+    ]
+    return controlList.map((control, index) => (
+      <Control
+        index={index}
+        {...control}
+        model={model}
+        graphModel={graphModel}
+      />
+    ))
+  }
+
+  // 一般节点被选中了会有outline, 先不用这个
+  getGroupSolid() {
+    const { model } = this.props
+    const { x, y, width, height } = model
+    const style = (model as GroupNodeModel).getResizeOutlineStyle()
+    return <Rect {...style} x={x} y={y} width={width} height={height} />
+  }
+
+  render(): h.JSX.Element {
+    return (
+      <g className="lf-resize-control">
+        {this.getGroupSolid()}
+        {this.getResizeControl()}
+      </g>
+    )
+  }
+}
+
+export default ControlGroup