@logicflow/extension 2.2.0 → 2.2.1

package/src/NodeResize/control/Control.tsx

@@ -1,537 +0,0 @@
-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({
-      deltaX,
-      deltaY,
-      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({
-      deltaX,
-      deltaY,
-      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({
-      deltaX,
-      deltaY,
-      beforeNode,
-      afterNode,
-    })
-  }
-  eventEmit = ({ deltaX, deltaY, 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', {
-      preData: oldNodeSize,
-      data: newNodeSize,
-      deltaX,
-      deltaY,
-      index: this.index,
-      model: this.nodeModel,
-    })
-  }
-  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

@@ -1,76 +0,0 @@
-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