@logicflow/core 2.2.0 → 2.2.1

package/src/view/Rotate.tsx

@@ -1,113 +0,0 @@
-import { Component } from 'preact/compat'
-import { map, reduce } from 'lodash-es'
-import Circle from './shape/Circle'
-import LogicFlow from '../LogicFlow'
-import { EventType } from '../constant'
-import EventEmitter from '../event/eventEmitter'
-import { GraphModel, BaseNodeModel } from '../model'
-import { StepDrag, TranslateMatrix, Vector } from '../util'
-
-interface IRotateControlProps {
-  graphModel: GraphModel
-  nodeModel: BaseNodeModel
-  eventCenter: EventEmitter
-  style: LogicFlow.CommonTheme
-}
-
-class RotateControlPoint extends Component<IRotateControlProps> {
-  readonly style = {}
-  private defaultAngle!: number
-  normal!: Vector
-  stepperDrag: any
-
-  constructor(props: IRotateControlProps) {
-    super(props)
-    this.style = props.style
-    this.stepperDrag = new StepDrag({
-      onDragging: this.onDragging,
-    })
-  }
-
-  onDragging = ({ event }: any) => {
-    const { graphModel, nodeModel, eventCenter } = this.props
-    const { selectNodes } = graphModel
-    const { x, y } = nodeModel
-    const { clientX, clientY } = event
-    const {
-      canvasOverlayPosition: { x: cx, y: cy },
-    } = graphModel.getPointByClient({
-      x: clientX,
-      y: clientY,
-    })
-    const v = new Vector(cx - x, cy - y)
-    const angle = this.normal?.angle(v) - this.defaultAngle
-    const matrix = new TranslateMatrix(-x, -y)
-      .rotate(angle)
-      .translate(x, y)
-      .toString()
-    nodeModel.transform = matrix
-    nodeModel.rotate = angle
-
-    let nodeIds = map(selectNodes, (node) => node.id)
-    if (nodeIds.indexOf(nodeModel.id) === -1) {
-      nodeIds = [nodeModel.id]
-    }
-    const nodeIdMap = reduce(
-      nodeIds,
-      (acc, nodeId) => {
-        const node = graphModel.getNodeModelById(nodeId)
-        acc[nodeId] = node?.getMoveDistance(0, 0, false)
-        return acc
-      },
-      {},
-    )
-    nodeIds.forEach((nodeId) => {
-      const edges = graphModel.getNodeEdges(nodeId)
-      edges.forEach((edge) => {
-        if (nodeIdMap[edge.sourceNodeId]) {
-          const model = graphModel.getNodeModelById(edge.sourceNodeId)
-          const anchor = model!.anchors.find(
-            (item) => item.id === edge.sourceAnchorId,
-          )!
-          edge.updateStartPoint(anchor)
-        }
-        if (nodeIdMap[edge.targetNodeId]) {
-          const model = graphModel.getNodeModelById(edge.targetNodeId)
-          const anchor = model!.anchors.find(
-            (item) => item.id === edge.targetAnchorId,
-          )!
-          edge.updateEndPoint(anchor)
-        }
-      })
-    })
-
-    eventCenter.emit(EventType.NODE_ROTATE, {
-      e: event,
-      model: nodeModel,
-      data: nodeModel.getData(),
-    })
-  }
-
-  render() {
-    const { nodeModel } = this.props
-    const { x, y, width, height } = nodeModel
-    const cx = x + width / 2 + 20
-    const cy = y - height / 2 - 20
-    this.normal = new Vector(1, 0)
-    this.defaultAngle = this.normal.angle(new Vector(cx - x, cy - y))
-    nodeModel.defaultAngle = this.defaultAngle
-    return (
-      <g className="lf-rotate-control">
-        <g
-          onPointerDown={(ev) => {
-            this.stepperDrag.handleMouseDown(ev)
-          }}
-        >
-          <Circle {...this.style} cx={cx} cy={cy} />
-        </g>
-      </g>
-    )
-  }
-}
-
-export default RotateControlPoint

package/src/view/behavior/dnd.ts

@@ -1,162 +0,0 @@
-import { get } from 'lodash-es'
-import LogicFlow from '../../LogicFlow'
-import { BaseNodeModel } from '../../model'
-import { snapToGrid } from '../../util'
-import { EventType } from '../../constant'
-
-import Position = LogicFlow.Position
-import OnDragNodeConfig = LogicFlow.OnDragNodeConfig
-
-export class Dnd {
-  nodeConfig: OnDragNodeConfig | null = null
-  lf: LogicFlow
-  fakeNode: BaseNodeModel | null = null
-  docPointerMove?: (e: PointerEvent) => void
-  docPointerUp?: (e: PointerEvent) => void
-
-  constructor(params: { lf: LogicFlow }) {
-    const { lf } = params
-    this.lf = lf
-  }
-
-  clientToLocalPoint({ x, y }: Position): Position {
-    const gridSize = get(this.lf.options, ['grid', 'size'])
-    // 处理 container 的 offset 等
-    const position = this.lf.graphModel.getPointByClient({
-      x,
-      y,
-    })
-    // 处理缩放和偏移
-    const { x: x1, y: y1 } = position.canvasOverlayPosition
-    const {
-      editConfigModel: { snapGrid },
-    } = this.lf.graphModel
-    // x, y 对齐到网格的 size
-    return {
-      x: snapToGrid(x1, gridSize, snapGrid),
-      y: snapToGrid(y1, gridSize, snapGrid),
-    }
-  }
-
-  isInsideCanvas(e: PointerEvent): boolean {
-    const overlay = this.lf.graphModel.rootEl.querySelector(
-      '[name="canvas-overlay"]',
-    ) as HTMLElement | null
-    const topEl = window.document.elementFromPoint(
-      e.clientX,
-      e.clientY,
-    ) as HTMLElement | null
-    return (
-      topEl === overlay ||
-      (topEl !== null && !!overlay && overlay.contains(topEl))
-    )
-  }
-  startDrag(nodeConfig: OnDragNodeConfig) {
-    const { editConfigModel } = this.lf.graphModel
-    if (editConfigModel?.isSilentMode) return
-    this.nodeConfig = nodeConfig
-    // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
-    this.docPointerMove = (e: PointerEvent) => {
-      if (!this.nodeConfig) return
-      // 离开画布：清理吸附线与假节点
-      if (!this.isInsideCanvas(e)) {
-        this.onDragLeave()
-        return
-      }
-      // 首次进入画布：创建假节点并初始化位置
-      if (!this.fakeNode) {
-        this.dragEnter(e)
-        return
-      }
-      // 在画布内移动：更新假节点位置与吸附线
-      this.onDragOver(e)
-    }
-    // 指针抬起：在画布内落点生成节点，否则清理假节点
-    this.docPointerUp = (e: PointerEvent) => {
-      if (!this.nodeConfig) return
-      if (this.isInsideCanvas(e)) {
-        this.onDrop(e)
-      } else {
-        this.onDragLeave()
-      }
-      // 阻止默认行为与冒泡，避免滚动/点击穿透
-      e.preventDefault()
-      e.stopPropagation()
-      // 结束拖拽并移除监听
-      this.stopDrag()
-    }
-    window.document.addEventListener('pointermove', this.docPointerMove)
-    window.document.addEventListener('pointerup', this.docPointerUp)
-  }
-
-  stopDrag = () => {
-    this.nodeConfig = null
-    if (this.docPointerMove) {
-      window.document.removeEventListener('pointermove', this.docPointerMove)
-    }
-    if (this.docPointerUp) {
-      window.document.removeEventListener('pointerup', this.docPointerUp)
-    }
-  }
-  dragEnter = (e: PointerEvent) => {
-    if (!this.nodeConfig || this.fakeNode) return
-    this.fakeNode = this.lf.createFakeNode({
-      ...this.nodeConfig,
-      ...this.clientToLocalPoint({
-        x: e.clientX,
-        y: e.clientY,
-      }),
-    })
-  }
-  onDragOver = (e: MouseEvent) => {
-    this.lf.graphModel.eventCenter.emit(EventType.BLANK_CANVAS_MOUSEMOVE, {
-      e,
-    })
-    e.preventDefault()
-    if (this.fakeNode) {
-      const { x, y } = this.clientToLocalPoint({
-        x: e.clientX,
-        y: e.clientY,
-      })
-      this.fakeNode.moveTo(x, y)
-      const nodeData = this.fakeNode.getData()
-      this.lf.setNodeSnapLine(nodeData)
-      this.lf.graphModel.eventCenter.emit(EventType.NODE_DND_DRAG, {
-        data: nodeData,
-        e,
-      })
-    }
-    return false
-  }
-  onDragLeave = () => {
-    if (this.fakeNode) {
-      this.lf.removeNodeSnapLine()
-      this.lf.graphModel.removeFakeNode()
-      this.fakeNode = null
-    }
-  }
-  onDrop = (e: MouseEvent) => {
-    if (!this.lf.graphModel || !e || !this.nodeConfig) {
-      return
-    }
-    this.lf.addNode(
-      {
-        ...this.nodeConfig,
-        ...this.clientToLocalPoint({
-          x: e.clientX,
-          y: e.clientY,
-        }),
-      },
-      EventType.NODE_DND_ADD,
-      e,
-    )
-    e.preventDefault()
-    e.stopPropagation()
-    this.nodeConfig = null
-    this.lf.removeNodeSnapLine()
-    this.lf.graphModel.removeFakeNode()
-    this.fakeNode = null
-  }
-}
-
-export default Dnd

package/src/view/behavior/index.ts

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

package/src/view/behavior/snapline.ts

@@ -1,16 +0,0 @@
-import EventEmitter from '../../event/eventEmitter'
-import SnaplineModel from '../../model/SnaplineModel'
-
-export function snapline(
-  eventCenter: EventEmitter,
-  snaplineModel: SnaplineModel,
-): void {
-  // 节点拖动时启动对齐线计算
-  eventCenter.on('node:mousemove', ({ data }) => {
-    snaplineModel.setNodeSnapLine(data)
-  })
-  // 节点拖动结束时，对齐线消失
-  eventCenter.on('node:mouseup', () => {
-    snaplineModel.clearSnapline()
-  })
-}