@logicflow/core 2.0.0-beta.1 → 2.0.0-beta.11

package/src/util/edge.ts

@@ -1,10 +1,13 @@
-import { pick } from 'lodash-es'
+import { pick, forEach } from 'lodash-es'
 import { getNodeBBox, isInNode, distance, sampleCubic } from '.'
 import LogicFlow from '../LogicFlow'
 import { Options } from '../options'
 import { SegmentDirection } from '../constant'
-import { getVerticalPointOfLine } from '../algorithm'
-import { getCrossPointOfLine, isInSegment } from '../algorithm/edge'
+import {
+  getVerticalPointOfLine,
+  getCrossPointOfLine,
+  isInSegment,
+} from '../algorithm'
 import {
   Model,
   BaseNodeModel,
@@ -397,7 +400,7 @@ export const getNextNeighborPoints = (
   return filterRepeatPoints(neighbors)
 }
 
-/* 路径查找,Astart查找+曼哈顿距离
+/* 路径查找,AStar查找+曼哈顿距离
  * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
  * 方法无法复用，且调用了很多polyline相关的方法，暂不抽离到src/algorithm中
  */
@@ -590,10 +593,10 @@ export const getPolylinePoints = (
  * @param pointsList 多个点组成的数组
  */
 export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
-  let points
   if (pointsList.length === 1) {
-    points = [pointsList[0], pointsList[0]]
-  } else if (pointsList.length >= 2) {
+    const [point] = pointsList
+    return [point, point]
+  } else {
     let point1 = pointsList[0]
     let point2 = pointsList[1]
     let edgeLength = distance(point1.x, point1.y, point2.x, point2.y)
@@ -612,9 +615,8 @@ export const getLongestEdge = (pointsList: Point[]): [Point, Point] => {
         point2 = newPoint2
       }
     }
-    points = [point1, point2]
+    return [point1, point2]
   }
-  return points
 }
 
 /* 线段是否在节点内部，被包含了 */
@@ -650,8 +652,7 @@ export const getCrossPointInRect = (
   start: Point,
   end: Point,
   node: BaseNodeModel,
-): Point => {
-  let point
+): Point | false | undefined => {
   let crossSegments: [Point, Point] | undefined = undefined
   const nodeBox = getNodeBBox(node)
   const points = getPointsFromBBox(nodeBox)
@@ -667,9 +668,8 @@ export const getCrossPointInRect = (
     }
   }
   if (crossSegments) {
-    point = getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
+    return getCrossPointOfLine(start, end, crossSegments[0], crossSegments[1])
   }
-  return point
 }
 /* 判断线段的方向 */
 export const segmentDirection = (
@@ -915,6 +915,7 @@ export const getEndTangent = (
  * 获取移动边后，文本位置距离边上的最近的一点
  * @param point 边上文本的位置
  * @param points 边的各个拐点
+ * TODO: Label实验没问题后统一改成新的计算方式，把这个方法废弃
  */
 export const getClosestPointOfPolyline = (
   point: Point,
@@ -1032,3 +1033,28 @@ export function createEdgeGenerator(
     return Object.assign({ type: result }, currentEdge)
   }
 }
+
+// 获取 Svg 标签文案高度，自动换行
+export type IGetSvgTextSizeParams = {
+  rows: string[]
+  rowsLength: number
+  fontSize: number
+}
+export const getSvgTextSize = ({
+  rows,
+  rowsLength,
+  fontSize,
+}: IGetSvgTextSizeParams): LogicFlow.RectSize => {
+  let longestBytes = 0
+  forEach(rows, (row) => {
+    const rowBytesLength = getBytesLength(row)
+    longestBytes = rowBytesLength > longestBytes ? rowBytesLength : longestBytes
+  })
+
+  // 背景框宽度，最长一行字节数/2 * fontsize + 2
+  // 背景框宽度， 行数 * fontsize + 2
+  return {
+    width: Math.ceil(longestBytes / 2) * fontSize + fontSize / 4,
+    height: rowsLength * (fontSize + 2) + fontSize / 4,
+  }
+}

package/src/util/index.ts

@@ -9,6 +9,7 @@ export * from './matrix'
 export * from './mobx'
 export * from './node'
 export * from './raf'
+export * from './resize'
 export * from './sampling'
 export * from './theme'
 export * from './uuid'

package/src/util/node.ts

@@ -1,4 +1,5 @@
 import { pick } from 'lodash-es'
+import { createElement as h } from 'preact/compat'
 import { getBytesLength } from './edge'
 import LogicFlow from '../LogicFlow'
 import {
@@ -18,6 +19,7 @@ import Direction = LogicFlow.Direction
 import NodeConfig = LogicFlow.NodeConfig
 import LineSegment = LogicFlow.LineSegment
 import AnchorInfo = Model.AnchorInfo
+import BoxBoundsPoint = Model.BoxBoundsPoint
 
 /* 获取所有锚点 */
 export const getAnchors = (data: BaseNodeModel) => {
@@ -144,13 +146,9 @@ export type NodeBBox = {
   y: number
   width: number
   height: number
-  minX: number
-  minY: number
-  maxX: number
-  maxY: number
   centerX: number
   centerY: number
-}
+} & BoxBoundsPoint
 
 /* 获取节点bbox */
 export const getNodeBBox = (node: BaseNodeModel): NodeBBox => {
@@ -411,9 +409,14 @@ export const pickNodeConfig = (data: NodeConfig): NodeConfig => {
     'x',
     'y',
     'text',
+    'label',
     'properties',
     'virtual', // 区域节点是否为dnd添加的虚拟节点
     'rotate',
+
+    // TODO: 确认是否可以加到此处
+    'resizable',
+    'rotatable',
   ])
   return nodeData
 }
@@ -444,7 +447,26 @@ export const getNodeAnchorPosition = (
   }
 }
 
-// 获取文案高度，自动换行，利用dom计算高度
+/*********************************************************
+ * Text 节点文本相关工具函数
+ ********************************************************/
+// Text 相关节点工具函数
+// TODO: 获取文案高度，设置自动换行，利用 dom 计算高度
+// function getTextHeight(text: string, font: string): number {
+//   const span = document.createElement('span');
+//   span.textContent = text;
+//   span.style.font = font;
+
+//   const range = document.createRange();
+//   range.selectNodeContents(span);
+
+//   const rect = range.getBoundingClientRect();
+//   const height = rect.height;
+
+//   return height;
+// }
+
+// 获取文案高度，自动换行，利用 dom 计算高度
 export const getHtmlTextHeight = ({
   rows,
   style,
@@ -452,18 +474,18 @@ export const getHtmlTextHeight = ({
   className,
 }: {
   rows: string[]
-  style: any // TODO: 完善类型
+  style: h.JSX.CSSProperties
   rowsLength: number
   className: string
 }) => {
   const dom = document.createElement('div')
-  dom.style.fontSize = style.fontSize
-  dom.style.width = style.width
   dom.className = className
-  dom.style.lineHeight = style.lineHeight
-  dom.style.padding = style.padding
+  dom.style.fontSize = `${style.fontSize}`
+  dom.style.width = `${style.width}`
+  dom.style.lineHeight = `${style.lineHeight}`
+  dom.style.padding = `${style.padding}`
   if (style.fontFamily) {
-    dom.style.fontFamily = style.fontFamily
+    dom.style.fontFamily = `${style.fontFamily}`
   }
   if (rowsLength > 1) {
     rows.forEach((row) => {
@@ -479,6 +501,7 @@ export const getHtmlTextHeight = ({
   document.body.removeChild(dom)
   return height
 }
+
 // 获取文案高度，自动换行，利用dom计算高度
 export const getSvgTextWidthHeight = ({
   rows,
@@ -506,7 +529,7 @@ export const getSvgTextWidthHeight = ({
 /**
  * @description 格式化边校验信息
  */
-export const formateAnchorConnectValidateData = (
+export const formatAnchorConnectValidateData = (
   data: Model.ConnectRuleResult,
 ) => {
   if (typeof data !== 'object') {

package/src/util/resize.ts

@@ -0,0 +1,286 @@
+import { ResizeControl, ResizeControlIndex } from '../view/Control'
+import { cloneDeep, find, forEach } from 'lodash-es'
+import { BaseNodeModel, GraphModel } from '../model'
+import { EventType } from '../constant'
+
+import ResizeInfo = ResizeControl.ResizeInfo
+import ResizeNodeData = ResizeControl.ResizeNodeData
+
+/**
+ * 计算 Control 拖动后，节点的高度信息
+ * @param index
+ * @param resizeInfo
+ * @param pct
+ * @param freezeWidth
+ * @param freezeHeight
+ */
+export const 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
+}
+
+export const updateEdgePointByAnchors = (
+  nodeModel: BaseNodeModel,
+  graphModel: GraphModel,
+) => {
+  // 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 } = nodeModel
+  const edges = 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,
+        })
+      }
+    }
+  })
+}
+
+export const triggerResizeEvent = (
+  preNodeData: ResizeNodeData,
+  curNodeData: ResizeNodeData,
+  deltaX: number,
+  deltaY: number,
+  index: number,
+  nodeModel: BaseNodeModel,
+  graphModel: GraphModel,
+) => {
+  graphModel.eventCenter.emit(EventType.NODE_RESIZE, {
+    preData: preNodeData,
+    data: curNodeData,
+    deltaX,
+    deltaY,
+    index,
+    model: nodeModel,
+  })
+}
+
+// TODO：确认 handleResize 函数的类型定义
+// export type IHandleResizeParams = {
+//   deltaX: number
+//   deltaY: number
+//   index: ResizeControlIndex
+//   nodeModel: BaseNodeModel
+//   graphModel: GraphModel
+//   cancelCallback?: () => void
+// }
+
+/**
+ * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
+ * @param deltaX
+ * @param deltaY
+ * @param index
+ * @param nodeModel
+ * @param graphModel
+ * @param cancelCallback
+ */
+export const handleResize = ({
+  deltaX,
+  deltaY,
+  index,
+  nodeModel,
+  graphModel,
+  cancelCallback,
+}) => {
+  const {
+    r, // circle
+    rx, // ellipse/diamond
+    ry,
+    width, // rect/html
+    height,
+    PCTResizeInfo,
+
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+  } = nodeModel
+  const isFreezeWidth = minWidth === maxWidth
+  const isFreezeHeight = minHeight === maxHeight
+
+  const resizeInfo = {
+    width: r || rx || width,
+    height: r || ry || height,
+    deltaX,
+    deltaY,
+    PCTResizeInfo,
+  }
+
+  const pct = r || (rx && ry) ? 1 / 2 : 1
+  const nextSize = recalcResizeInfo(
+    index,
+    resizeInfo,
+    pct,
+    isFreezeWidth,
+    isFreezeHeight,
+  )
+
+  // 限制放大缩小的最大最小范围
+  if (
+    nextSize.width < minWidth ||
+    nextSize.width > maxWidth ||
+    nextSize.height < minHeight ||
+    nextSize.height > maxHeight
+  ) {
+    // this.dragHandler.cancelDrag()
+    cancelCallback?.()
+    return
+  }
+  // 如果限制了宽高不变，对应的 x/y 不产生位移
+  nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
+  nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
+
+  const preNodeData = nodeModel.getData()
+  const curNodeData = nodeModel.resize(nextSize)
+
+  // 更新边
+  updateEdgePointByAnchors(nodeModel, graphModel)
+  // 触发 resize 事件
+  triggerResizeEvent(
+    preNodeData,
+    curNodeData,
+    deltaX,
+    deltaY,
+    index,
+    nodeModel,
+    graphModel,
+  )
+}

package/src/view/Anchor.tsx

@@ -6,7 +6,7 @@ import { ElementState, EventType } from '../constant'
 import { GraphModel, BaseNodeModel, Model } from '../model'
 import {
   StepDrag,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
   targetNodeInfo,
   distance,
   cancelRaf,
@@ -29,7 +29,7 @@ interface IProps {
   anchorIndex: number
   graphModel: GraphModel
   nodeModel: BaseNodeModel
-  setHoverOFF: (e: MouseEvent) => void
+  setHoverOff: (e: MouseEvent) => void
 }
 
 interface IState {
@@ -116,7 +116,7 @@ class Anchor extends Component<IProps, IState> {
       endY: anchorData.y,
     })
   }
-  onDragging = ({ event }) => {
+  onDragging = ({ event }: IDragParams) => {
     const { graphModel, nodeModel, anchorData } = this.props
     const {
       transformModel,
@@ -125,6 +125,8 @@ class Anchor extends Component<IProps, IState> {
       height,
       editConfigModel: { autoExpand, stopMoveGraph },
     } = graphModel
+    // TODO：确认该方法是否有影响！理论上 onDragging 时 event 必有值
+    if (!event) return
     const { clientX, clientY } = event
     const {
       domOverlayPosition: { x, y },
@@ -326,11 +328,11 @@ class Anchor extends Component<IProps, IState> {
         )
         this.sourceRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(sourceRuleResult),
+          formatAnchorConnectValidateData(sourceRuleResult),
         )
         this.targetRuleResults.set(
           targetInfoId,
-          formateAnchorConnectValidateData(targetRuleResult),
+          formatAnchorConnectValidateData(targetRuleResult),
         )
       }
       const { isAllPass: isSourcePass } =