@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/Control.tsx

@@ -1,510 +0,0 @@
-import { createElement as h, Component } from 'preact/compat'
-import { find, forEach, map, cloneDeep } from 'lodash-es'
-import { Rect } from './shape'
-import LogicFlow from '../LogicFlow'
-import { getNodeBBox, IDragParams, StepDrag, handleResize } from '../util'
-import { BaseNodeModel, GraphModel } from '../model'
-
-import NodeData = LogicFlow.NodeData
-import VectorData = LogicFlow.VectorData
-import { EventType } from '../constant'
-import ResizeNodeData = ResizeControl.ResizeNodeData
-import ResizeInfo = ResizeControl.ResizeInfo
-import ControlItemProps = ResizeControl.ControlItemProps
-
-export enum ResizeControlIndex {
-  LEFT_TOP = 0,
-  RIGHT_TOP = 1,
-  RIGHT_BOTTOM = 2,
-  LEFT_BOTTOM = 3,
-}
-
-export type IResizeControlProps = {
-  model: BaseNodeModel
-  graphModel: GraphModel
-} & ControlItemProps
-
-export type IResizeControlState = {
-  startX: number
-  startY: number
-  endX: number
-  endY: number
-  dragging: boolean
-}
-
-export class ResizeControl extends Component<
-  IResizeControlProps,
-  IResizeControlState
-> {
-  readonly index: ResizeControlIndex
-  readonly nodeModel: BaseNodeModel
-  readonly graphModel: GraphModel
-  readonly dragHandler: StepDrag
-
-  //判断Shift键状态
-  private isShiftPressed = false
-
-  constructor(props: IResizeControlProps) {
-    super()
-    const { index, model, graphModel } = props
-    this.index = index
-    this.nodeModel = model
-    this.graphModel = graphModel
-
-    this.dragHandler = new StepDrag({
-      onDragStart: this.onDragStart,
-      onDragging: this.onDragging,
-      onDragEnd: this.onDragEnd,
-      step: graphModel.gridSize,
-    })
-
-    this.bindKeyboardEvents()
-  }
-
-  //绑定键盘事件监听
-  bindKeyboardEvents = () => {
-    document.addEventListener('keydown', this.handleKeyDown)
-    document.addEventListener('keyup', this.handleKeyUp)
-  }
-
-  //处理键盘按下事件
-  handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Shift') {
-      this.isShiftPressed = true
-    }
-  }
-
-  handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Shift') {
-      this.isShiftPressed = false
-    }
-  }
-
-  componentWillUnmount() {
-    this.dragHandler.destroy()
-    document.removeEventListener('keydown', this.handleKeyDown)
-    document.removeEventListener('keyup', this.handleKeyUp)
-  }
-
-  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.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,
-          })
-        }
-      }
-    })
-  }
-
-  triggerResizeEvent = (
-    preNodeData: ResizeNodeData,
-    curNodeData: ResizeNodeData,
-    deltaX,
-    deltaY,
-    index,
-    nodeModel: BaseNodeModel,
-  ) => {
-    this.graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
-      preData: preNodeData,
-      data: curNodeData,
-      deltaX,
-      deltaY,
-      index,
-      model: nodeModel,
-    })
-  }
-
-  /**
-   * 计算 Control 拖动后，节点的高度信息
-   * @param index
-   * @param resizeInfo
-   * @param pct
-   * @param freezeWidth
-   * @param freezeHeight
-   */
-  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
-  }
-
-  resizeNode = ({ deltaX, deltaY }: VectorData) => {
-    const { index } = this
-    const { model, graphModel, x, y } = this.props
-    // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
-    handleResize({
-      x,
-      y,
-      deltaX,
-      deltaY,
-      index,
-      nodeModel: model,
-      graphModel,
-      forceProportional: this.isShiftPressed,
-      cancelCallback: () => {
-        this.dragHandler.cancelDrag()
-      },
-    })
-  }
-
-  onDragStart = () => {
-    this.graphModel.selectNodeById(this.nodeModel.id)
-  }
-
-  onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { transformModel } = this.graphModel
-    const [dx, dy] = transformModel.fixDeltaXY(deltaX, deltaY)
-    this.resizeNode({
-      deltaX: dx,
-      deltaY: dy,
-    })
-  }
-
-  // 由于将拖拽放大缩小改成丝滑模式，这个时候需要再拖拽结束的时候，将节点的位置更新到 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)
-    const x = this.nodeModel.x
-    const y = this.nodeModel.y
-    this.nodeModel.moveTo(x, y)
-
-    // 先触发 onDragging() -> 更新边 -> 再触发用户自定义的 getDefaultAnchor()，所以 onDragging()
-    // 拿到的 anchors 是滞后的，为了正确的设置最终的位置，应该在拖拽结束的时候，再设置一次边的 Point 位置，
-    // 此时拿到的 anchors 是最新的
-    this.updateEdgePointByAnchors()
-  }
-
-  onPointerDown = (e: PointerEvent) => {
-    e.stopPropagation()
-    this.dragHandler.handleMouseDown(e)
-  }
-
-  getViewPosition(direction, x, y) {
-    const { width = 8, height = 8 } = this.props.model.getResizeControlStyle()
-    switch (direction) {
-      case 'nw':
-        return {
-          x: x - width / 2,
-          y: y - height / 2,
-        }
-      case 'ne': {
-        return {
-          x: x + width / 2,
-          y: y - height / 2,
-        }
-      }
-      case 'se': {
-        return {
-          x: x + width / 2,
-          y: y + height / 2,
-        }
-      }
-      case 'sw': {
-        return {
-          x: x - width / 2,
-          y: y + height / 2,
-        }
-      }
-      default: {
-        return {
-          x,
-          y,
-        }
-      }
-    }
-  }
-
-  render(): h.JSX.Element {
-    const { x, y, direction, model } = this.props
-    const { width, height, ...restStyle } = model.getResizeControlStyle()
-    // 为了让调整点在视觉上在调整外框的中间，因此在渲染时转换一下
-    const { x: viewX, y: viewY } = this.getViewPosition(direction, x, y)
-    return (
-      <g className={`lf-resize-control lf-resize-control-${direction}`}>
-        <Rect
-          className="lf-resize-control-content"
-          x={viewX}
-          y={viewY}
-          width={width ?? 7}
-          height={height ?? 7}
-          {...restStyle}
-        />
-        <Rect
-          className="lf-resize-control-content"
-          x={viewX}
-          y={viewY}
-          width={width ? width + 5 : 25}
-          height={width ? width + 5 : 25}
-          fill="transparent"
-          stroke="transparent"
-          onPointerDown={this.onPointerDown}
-        />
-      </g>
-    )
-  }
-}
-
-interface IResizeControlGroupProps {
-  style: LogicFlow.CommonTheme
-  model: BaseNodeModel
-  graphModel: GraphModel
-}
-
-export class ResizeControlGroup extends Component<IResizeControlGroupProps> {
-  constructor() {
-    super()
-  }
-
-  getResizeControl(): h.JSX.Element[] {
-    const { model, graphModel } = this.props
-    const { minX, minY, maxX, maxY } = getNodeBBox(model)
-
-    const controlList: ControlItemProps[] = [
-      {
-        index: ResizeControlIndex.LEFT_TOP,
-        direction: 'nw',
-        x: minX,
-        y: minY,
-      }, // 左上角
-      {
-        index: ResizeControlIndex.RIGHT_TOP,
-        direction: 'ne',
-        x: maxX,
-        y: minY,
-      }, // 右上角
-      {
-        index: ResizeControlIndex.RIGHT_BOTTOM,
-        direction: 'se',
-        x: maxX,
-        y: maxY,
-      }, // 右下角
-      {
-        index: ResizeControlIndex.LEFT_BOTTOM,
-        direction: 'sw',
-        x: minX,
-        y: maxY,
-      }, // 左下角
-    ]
-
-    return map(controlList, (control) => (
-      <ResizeControl {...control} model={model} graphModel={graphModel} />
-    ))
-  }
-
-  getResizeOutline() {
-    const { model } = this.props
-    const { x, y, width, height } = model
-    const style = model.getResizeOutlineStyle()
-
-    return (
-      <Rect
-        {...style}
-        pointer-events="none"
-        x={x}
-        y={y}
-        // TODO：宽高padding后续改成配置化的
-        width={width + 10}
-        height={height + 10}
-      />
-    )
-  }
-
-  render(): h.JSX.Element {
-    return (
-      <g className="lf-resize-control-group">
-        {this.getResizeOutline()}
-        {this.getResizeControl()}
-      </g>
-    )
-  }
-}
-
-export namespace ResizeControl {
-  export type RectShapeResizeProps = {
-    width: number
-    height: number
-  }
-
-  export type PolygonShapeResizerProps = {
-    rx: number
-    ry: number
-  }
-  export type ResizeProps = RectShapeResizeProps | PolygonShapeResizerProps
-
-  export type ResizeInfo = {
-    width: number
-    height: number
-    deltaX: number
-    deltaY: number
-    PCTResizeInfo?: PCTResizeParams
-  }
-  export type ResizeNodeData = NodeData & Partial<ResizeProps>
-
-  export type Direction = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
-  export type ControlItemProps = {
-    index: ResizeControlIndex
-    direction: Direction
-    x: number
-    y: number
-  }
-
-  export type PCTResizeParams = {
-    ResizePCT: {
-      widthPCT: number
-      heightPCT: number
-    }
-    ResizeBasis: {
-      basisWidth: number
-      basisHeight: number
-    }
-    ScaleLimit: {
-      maxScaleLimit: number
-      minScaleLimit: number
-    }
-  }
-}
-
-export default ResizeControlGroup

package/src/view/Graph.tsx

@@ -1,141 +0,0 @@
-import { Component, ComponentType } from 'preact/compat'
-import { map, throttle } from 'lodash-es'
-import {
-  CanvasOverlay,
-  ToolOverlay,
-  BackgroundOverlay,
-  Grid,
-  SnaplineOverlay,
-  OutlineOverlay,
-  BezierAdjustOverlay,
-  ModificationOverlay,
-} from './overlay'
-import DnD from './behavior/dnd'
-import { observer } from '..'
-import Tool from '../tool'
-import { Options as LFOptions } from '../options'
-import {
-  GraphModel,
-  BaseEdgeModel,
-  BaseNodeModel,
-  SnaplineModel,
-} from '../model'
-import { EventType } from '../constant'
-
-type IGraphProps = {
-  getView: (type: string) => ComponentType<any> | undefined
-  tool: Tool
-  options: LFOptions.Definition
-  dnd: DnD
-  snaplineModel?: SnaplineModel
-  graphModel: GraphModel
-}
-
-type ContainerStyle = {
-  width?: string
-  height?: string
-}
-
-@observer
-class Graph extends Component<IGraphProps> {
-  private handleResize = () => {
-    const { graphModel, options } = this.props
-    const { width, height, isContainerWidth, isContainerHeight } = graphModel
-    let resizeWidth: number | undefined = width
-    let resizeHeight: number | undefined = height
-    let needUpdate = false
-    if (isContainerWidth) {
-      resizeWidth = undefined
-      needUpdate = true
-    }
-    if (isContainerHeight) {
-      resizeHeight = undefined
-      needUpdate = true
-    }
-    if (needUpdate) {
-      graphModel.resize(resizeWidth, resizeHeight)
-    }
-    options.width = width
-    options.height = height
-  }
-  private throttleResize = throttle(this.handleResize, 200)
-
-  componentDidMount() {
-    window.addEventListener('resize', this.throttleResize)
-  }
-
-  componentDidUpdate() {
-    const data = this.props.graphModel.modelToGraphData()
-    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, { data })
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.throttleResize)
-  }
-
-  getComponent(
-    model: BaseEdgeModel | BaseNodeModel,
-    graphModel: GraphModel,
-    overlay = 'canvas-overlay',
-  ) {
-    const { getView } = this.props
-    // https://juejin.cn/post/7046639346656493582 - 几种方式来声明React Component的类型
-    const View = getView(model.type)
-    if (View) {
-      return (
-        <View
-          key={model.id}
-          model={model}
-          graphModel={graphModel}
-          overlay={overlay}
-        />
-      )
-    }
-    return null
-  }
-
-  render() {
-    const { graphModel, tool, options, dnd, snaplineModel } = this.props
-    const style: ContainerStyle = {}
-    // 如果初始化的时候，不传宽高，则默认为父容器宽高。
-    if (options.width) {
-      style.width = `${graphModel.width}px`
-    }
-    if (options.height) {
-      style.height = `${graphModel.height}px`
-    }
-    const { fakeNode, editConfigModel, background } = graphModel
-    const { adjustEdge } = editConfigModel
-    return (
-      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
-        {/* 元素层 */}
-        <CanvasOverlay graphModel={graphModel} dnd={dnd}>
-          <g className="lf-base">
-            {map(graphModel.sortElements, (nodeModel) =>
-              this.getComponent(nodeModel, graphModel),
-            )}
-          </g>
-          {fakeNode ? this.getComponent(fakeNode, graphModel) : ''}
-        </CanvasOverlay>
-        {/* 虚线边框 */}
-        <ModificationOverlay graphModel={graphModel}>
-          <OutlineOverlay graphModel={graphModel} />
-          {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
-          {options.snapline !== false ? (
-            <SnaplineOverlay snaplineModel={snaplineModel} />
-          ) : (
-            ''
-          )}
-        </ModificationOverlay>
-        {/* 工具层：插件 */}
-        <ToolOverlay graphModel={graphModel} tool={tool} />
-        {/* 画布背景 */}
-        {background && <BackgroundOverlay background={background} />}
-        {/* 画布网格 */}
-        <Grid graphModel={graphModel} />
-      </div>
-    )
-  }
-}
-
-export default Graph