@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/dynamic-group/node.ts

@@ -1,288 +0,0 @@
-import LogicFlow, {
-  GraphModel,
-  h,
-  RectNode,
-  handleResize,
-  CallbackArgs,
-} from '@logicflow/core'
-import { forEach } from 'lodash-es'
-import { DynamicGroupNodeModel } from './model'
-
-import Position = LogicFlow.Position
-import { rotatePointAroundCenter } from '../tools/label/utils'
-
-export interface IDynamicGroupNodeProps {
-  model: DynamicGroupNodeModel
-  graphModel: GraphModel
-}
-
-export class DynamicGroupNode<
-  P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps,
-> extends RectNode<P> {
-  childrenPositionMap: Map<string, Position> = new Map()
-
-  onNodeRotate = ({
-    model,
-  }: Omit<CallbackArgs<'node:rotate'>, 'e' | 'position'>) => {
-    const { model: curGroup, graphModel } = this.props
-    const { transformWithContainer, isRestrict } = curGroup
-    const childrenPositionMap = this.childrenPositionMap
-    if (!transformWithContainer || isRestrict) {
-      // isRestrict限制模式下，当前model resize时不能小于占地面积
-      // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
-      // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
-      // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
-      // 由于transformWidthContainer是控制rotate+resize，为保持transformWidthContainer本来的含义
-      // parent:resize=>child:resize不支持，那么parent:rotate=>child:rotate也不支持
-      return
-    }
-    // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
-    if (model.id === curGroup.id) {
-      const center = { x: curGroup.x, y: curGroup.y }
-      forEach(Array.from(curGroup.children), (childId) => {
-        const child = graphModel.getNodeModelById(childId)
-        if (child) {
-          let point: Position = { x: child.x, y: child.y }
-          if (childrenPositionMap.has(child.id)) {
-            point = childrenPositionMap.get(child.id)!
-          } else {
-            childrenPositionMap.set(child.id, point)
-          }
-
-          // 弧度转角度
-          let theta = model.rotate * (180 / Math.PI)
-          if (theta < 0) theta += 360
-          const radian = theta * (Math.PI / 180)
-
-          const newPoint = rotatePointAroundCenter(point, center, radian)
-
-          child.moveTo(newPoint.x, newPoint.y)
-          child.rotate = model.rotate
-          console.log('childInfo', child)
-        }
-      })
-    }
-  }
-
-  onNodeResize = ({
-    deltaX,
-    deltaY,
-    index,
-    model,
-    preData,
-  }: Omit<CallbackArgs<'node:resize'>, 'e' | 'position'>) => {
-    const { model: curGroup, graphModel } = this.props
-    const { transformWithContainer, isRestrict } = curGroup
-    if (!transformWithContainer || isRestrict) {
-      // isRestrict限制模式下，当前model resize时不能小于占地面积
-      // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
-      // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
-      // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
-      return
-    }
-    if (model.id === curGroup.id) {
-      // node:resize是group已经改变width和height后的回调
-      // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model
-      const { properties } = preData
-      const { width: groupWidth, height: groupHeight } = properties || {}
-      forEach(Array.from(curGroup.children), (childId) => {
-        const child = graphModel.getNodeModelById(childId)
-        if (child) {
-          // 根据比例去控制缩放dx和dy
-          const childDx = (child.width / groupWidth!) * deltaX
-          const childDy = (child.height / groupHeight!) * deltaY
-
-          // child.rotate = model.rotate
-          handleResize({
-            deltaX: childDx,
-            deltaY: childDy,
-            index,
-            nodeModel: child,
-            graphModel,
-            cancelCallback: () => {},
-          })
-        }
-      })
-    }
-  }
-
-  onNodeMouseMove = () =>
-    // {
-    // deltaX,
-    // deltaY,
-    // data,
-    // }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>
-    {
-      // console.log(data,deltaX,deltaY,'111')
-      // const { model: curGroup, graphModel } = this.props
-      // const { transformModel } = graphModel
-      // const { SCALE_X, SCALE_Y } = transformModel
-      // if (data.id === curGroup.id) {
-      //   const nodeIds = this.getNodesInGroup(curGroup, graphModel)
-      //   // https://github.com/didi/LogicFlow/issues/1914
-      //   // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
-      //   // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
-      //   // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
-      //   // 因此这里需要增加SCALE的处理
-      //   graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
-      // }
-    }
-
-  graphRendered = () => {
-    const { model } = this.props
-    // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-    if (model.isCollapsed) {
-      // https://github.com/didi/LogicFlow/issues/1918
-      // 当lf.render({nodes:[{分组节点}, {普通节点}]})时，由于是顺序遍历
-      // 会先触发分组Group节点的new Model => toggleCollapse()
-      // => 此时在graphModel.elementsModelMap找不到它的children，因为还没初始化，因此无法正确折叠子元素
-      // --------------------
-      // 当lf.render({nodes:[{普通节点}, {分组节点}]})时，
-      // 会先触发普通节点的new Model => graphModel.elementsModelMap.set(id, new Model())
-      // 然后再触发分组Group节点的new Model => toggleCollapse() =>
-      // 此时在graphModel.elementsModelMap能找到它的children了，因此可以正确折叠子元素
-      // --------------------
-      // 因此将整个初始化判断是否【主动触发一次折叠操作】放在"graph:rendered"全部渲染完成后再执行
-      model.toggleCollapse(true)
-    }
-  }
-
-  componentDidMount() {
-    super.componentDidMount()
-    const { eventCenter } = this.props.graphModel
-    // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-    eventCenter.on('node:rotate', this.onNodeRotate)
-    // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-    eventCenter.on('node:resize', this.onNodeResize)
-    // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
-    eventCenter.on('node:mousemove', this.onNodeMouseMove)
-    // 全部渲染完成后，判断是否【主动触发一次折叠操作】
-    eventCenter.on('graph:rendered', this.graphRendered)
-  }
-
-  componentWillUnmount() {
-    super.componentWillUnmount()
-    const { eventCenter } = this.props.graphModel
-    eventCenter.off('node:rotate', this.onNodeRotate)
-    eventCenter.off('node:resize', this.onNodeResize)
-    eventCenter.off('node:mousemove', this.onNodeMouseMove)
-    eventCenter.off('graph:rendered', this.graphRendered)
-  }
-
-  /**
-   * 获取分组内的节点
-   * @param groupModel
-   * @param graphModel
-   */
-  getNodesInGroup(
-    groupModel: DynamicGroupNodeModel,
-    graphModel: GraphModel,
-  ): string[] {
-    let nodeIds: string[] = []
-    if (groupModel.isGroup) {
-      forEach(Array.from(groupModel.children), (nodeId: string) => {
-        nodeIds.push(nodeId)
-
-        const nodeModel = graphModel.getNodeModelById(nodeId)
-        if (nodeModel?.isGroup) {
-          nodeIds = nodeIds.concat(
-            this.getNodesInGroup(
-              nodeModel as DynamicGroupNodeModel,
-              graphModel,
-            ),
-          )
-        }
-      })
-    }
-    return nodeIds
-  }
-
-  getResizeControl(): h.JSX.Element | null {
-    const { resizable, isCollapsed } = this.props.model
-    const showResizeControl = resizable && !isCollapsed
-    return showResizeControl ? super.getResizeControl() : null
-  }
-
-  getAppendAreaShape(): h.JSX.Element | null {
-    // DONE: 此区域用于初始化 group container, 即元素拖拽进入感应区域
-    const { model } = this.props
-    const { width, height, x, y, radius, groupAddable } = model
-    if (!groupAddable) return null
-
-    const { strokeWidth = 0 } = model.getNodeStyle()
-    const style = model.getAddableOutlineStyle()
-
-    const newWidth = width + strokeWidth + 8
-    const newHeight = height + strokeWidth + 8
-    return h('rect', {
-      ...style,
-      width: newWidth,
-      height: newHeight,
-      x: x - newWidth / 2,
-      y: y - newHeight / 2,
-      rx: radius,
-      ry: radius,
-    })
-  }
-
-  getCollapseIcon(sx: number, sy: number): string {
-    return `M ${sx + 3},${sy + 6} ${sx + 11},${sy + 6} M${sx + 7},${sy + 2} ${
-      sx + 7
-    },${sy + 10}`
-  }
-
-  getExpandIcon(sx: number, sy: number): string {
-    return `M ${sx + 3},${sy + 6} ${sx + 11},${sy + 6} `
-  }
-
-  // 获取操作图标（收起或展开）
-  getOperateIcon(): h.JSX.Element | null {
-    const { model } = this.props
-    const { x, y, width, height } = model
-    const sx = x - width / 2 + 10
-    const sy = y - height / 2 + 10
-
-    if (!model.collapsible) return null
-    const iconPath = model?.isCollapsed
-      ? this.getCollapseIcon(sx, sy)
-      : this.getExpandIcon(sx, sy)
-
-    const operateIcon = h('path', {
-      fill: 'none',
-      stroke: '#818281',
-      strokeWidth: 2,
-      'pointer-events': 'none',
-      d: iconPath,
-    })
-
-    return h('g', {}, [
-      h('rect', {
-        height: 12,
-        width: 14,
-        rx: 2,
-        ry: 2,
-        strokeWidth: 1,
-        fill: '#f4f5f6',
-        stroke: '#cecece',
-        cursor: 'pointer',
-        x: sx,
-        y: sy,
-        onClick: () => {
-          // DONE: 抛出折叠或展开事件 -> 在 toggleCollapse 方法中抛出
-          model.toggleCollapse(!model.isCollapsed)
-        },
-      }),
-      operateIcon,
-    ])
-  }
-
-  getShape(): h.JSX.Element | null {
-    return h('g', {}, [
-      this.getAppendAreaShape(),
-      super.getShape(),
-      this.getOperateIcon(),
-    ])
-  }
-}
-
-export default DynamicGroupNode

package/src/dynamic-group/utils.ts

@@ -1,46 +0,0 @@
-import { BaseNodeModel, Model } from '@logicflow/core'
-import BoxBoundsPoint = Model.BoxBoundsPoint
-
-/**
- *
- * @param bounds
- * @param group
- */
-export function isBoundsInGroup(bounds: BoxBoundsPoint, group: BaseNodeModel) {
-  const { minX, minY, maxX, maxY } = bounds
-  const { x, y, width, height } = group
-  return (
-    minX >= x - width / 2 &&
-    maxX <= x + width / 2 &&
-    minY >= y - height / 2 &&
-    maxY <= y + height / 2
-  )
-}
-
-/**
- * 判断 bounds 是否可以移动到下一个范围
- * @param groupBounds
- * @param node
- * @param deltaX
- * @param deltaY
- */
-export function isAllowMoveTo(
-  groupBounds: BoxBoundsPoint,
-  node: BaseNodeModel,
-  deltaX: number,
-  deltaY: number,
-) {
-  const { minX, minY, maxX, maxY } = groupBounds
-  const { x, y, width, height } = node
-
-  // DONE: 计算节点坐标 (x, y) 可移动的范围，并判断 x + deltaX, y + deltaY 是否在范围内
-  const allowMoveMinX = minX + width / 2
-  const allowMoveMinY = minY + height / 2
-  const allowMoveMaxX = maxX - width / 2
-  const allowMoveMaxY = maxY - height / 2
-
-  return {
-    x: x + deltaX >= allowMoveMinX && x + deltaX <= allowMoveMaxX,
-    y: y + deltaY >= allowMoveMinY && y + deltaY <= allowMoveMaxY,
-  }
-}

package/src/index.less

@@ -1 +0,0 @@
-@import url('./style/index.less');

package/src/index.ts

@@ -1,47 +0,0 @@
-// BPMN 相关
-export * from './bpmn'
-export * from './bpmn-adapter'
-export * from './bpmn-elements'
-export * from './bpmn-elements-adapter'
-export * from './bpmn-adapter/xml2json'
-export * from './bpmn-adapter/json2xml'
-
-// Adapter
-export * from './turbo-adapter'
-
-// 泳道相关
-export * from './pool'
-// 新版 Group
-export * from './dynamic-group'
-// 折线上动态插入节点
-export * from './insert-node-in-polyline'
-
-// Tools -> 流程图辅助工具
-export * from './tools/label'
-export * from './tools/snapshot'
-export * from './tools/flow-path'
-export * from './tools/auto-layout'
-export * from './tools/proximity-connect'
-
-// Component -> 流程图中交互组件
-export * from './components/control'
-export * from './components/menu'
-export * from './components/context-menu'
-export * from './components/dnd-panel'
-export * from './components/mini-map'
-export * from './components/selection-select'
-export * from './components/highlight'
-
-// materials -> 拓展物料
-export * from './materials/curved-edge'
-export * from './materials/node-selection'
-
-/**
- * @deprecated
- * 2.0 版本废弃该插件
- */
-export * from './NodeResize'
-export * from './materials/group'
-
-// 迷之插件
-export * from './rect-label-node'

package/src/insert-node-in-polyline/edge.ts

@@ -1,175 +0,0 @@
-import LogicFlow, { PolylineEdgeModel, BaseNodeModel } from '@logicflow/core'
-
-import Point = LogicFlow.Point
-
-// 这个里面的函数有些在core中已经存在，为了解耦关系，没有引用
-
-enum SegmentDirection {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical',
-}
-
-/**
- * 判断一个点是否在线段中
- * @param point 判断的点
- * @param start 线段的起点
- * @param end 线段的终点
- * @param deviation 误差范围
- * @returns boolean
- */
-export const isInSegment = (point, start, end, deviation = 0) => {
-  const distance = distToSegment(point, start, end)
-  return distance <= deviation
-}
-
-function sqr(x) {
-  return x * x
-}
-
-function dist2(v, w) {
-  return sqr(v.x - w.x) + sqr(v.y - w.y)
-}
-
-export const distToSegmentSquared = (p, v, w) => {
-  const l2 = dist2(v, w)
-  if (l2 === 0) return dist2(p, v)
-  let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
-  t = Math.max(0, Math.min(1, t))
-  return dist2(p, {
-    x: v.x + t * (w.x - v.x),
-    y: v.y + t * (w.y - v.y),
-  })
-}
-
-export const distToSegment = (point: Point, start: Point, end: Point) =>
-  Math.sqrt(distToSegmentSquared(point, start, end))
-
-/* 获取节点bbox */
-const getNodeBBox = (node: BaseNodeModel) => {
-  const { x, y, width, height } = node
-  const bBox = {
-    minX: x - width / 2,
-    minY: y - height / 2,
-    maxX: x + width / 2,
-    maxY: y + height / 2,
-    x,
-    y,
-    width,
-    height,
-    centerX: x,
-    centerY: y,
-  }
-  return bBox
-}
-
-/* 判断线段的方向 */
-const segmentDirection = (start: Point, end: Point) => {
-  let direction
-  if (start.x === end.x) {
-    direction = SegmentDirection.VERTICAL
-  } else if (start.y === end.y) {
-    direction = SegmentDirection.HORIZONTAL
-  }
-  return direction
-}
-
-// 节点是够在线段内，求出节点与线段的交点
-export const crossPointInSegment = (
-  node: BaseNodeModel,
-  start: Point,
-  end: Point,
-) => {
-  const bBox = getNodeBBox(node)
-  const direction = segmentDirection(start, end)
-  const maxX = Math.max(start.x, end.x)
-  const minX = Math.min(start.x, end.x)
-  const maxY = Math.max(start.y, end.y)
-  const minY = Math.min(start.y, end.y)
-  const { x, y, width, height } = node
-  if (direction === SegmentDirection.HORIZONTAL) {
-    // 同一水平线
-    if (maxX >= bBox.maxX && minX <= bBox.minX) {
-      return {
-        startCrossPoint: {
-          x: start.x > end.x ? x + width / 2 : x - width / 2,
-          y: start.y,
-        },
-        endCrossPoint: {
-          x: start.x > end.x ? x - width / 2 : x + width / 2,
-          y: start.y,
-        },
-      }
-    }
-  } else if (direction === SegmentDirection.VERTICAL) {
-    // 同一垂直线
-    if (maxY >= bBox.maxY && minY <= bBox.minY) {
-      return {
-        startCrossPoint: {
-          x: start.x,
-          y: start.y > end.y ? y + height / 2 : y - height / 2,
-        },
-        endCrossPoint: {
-          x: start.x,
-          y: start.y > end.y ? y - height / 2 : y + height / 2,
-        },
-      }
-    }
-  }
-}
-
-interface SegmentCross {
-  crossIndex: number
-  crossPoints: {
-    startCrossPoint: Point
-    endCrossPoint: Point
-  }
-}
-
-// 节点是否在线段内
-// eslint-disable-next-line max-len
-export const isNodeInSegment = (
-  node: BaseNodeModel,
-  polyline: PolylineEdgeModel,
-  deviation = 0,
-): SegmentCross => {
-  const { x, y } = node
-  const { pointsList } = polyline
-  for (let i = 0; i < pointsList.length - 1; i++) {
-    if (
-      isInSegment(
-        {
-          x,
-          y,
-        },
-        pointsList[i],
-        pointsList[i + 1],
-        deviation,
-      )
-    ) {
-      const bBoxCross = crossPointInSegment(
-        node,
-        pointsList[i],
-        pointsList[i + 1],
-      )
-      if (bBoxCross) {
-        return {
-          crossIndex: i + 1,
-          crossPoints: bBoxCross,
-        }
-      }
-    }
-  }
-  return {
-    crossIndex: -1,
-    crossPoints: {
-      startCrossPoint: {
-        x: 0,
-        y: 0,
-      },
-      endCrossPoint: {
-        x: 0,
-        y: 0,
-      },
-    },
-  }
-}