@logicflow/core 2.0.16 → 2.1.1

package/src/model/SnaplineModel.ts

@@ -19,8 +19,10 @@ export class SnaplineModel {
   @observable isShowVertical: boolean
   // 对齐线的中心位置，目前仅展示中心对齐的情况，后面可以考虑多种对齐策略
   @observable position: Position
+  // 对齐线显示的阈值距离
+  epsilon: number
 
-  constructor(graphModel: GraphModel) {
+  constructor(graphModel: GraphModel, epsilon: number = 1) {
     this.isShowHorizontal = false
     this.isShowVertical = false
     this.position = {
@@ -28,6 +30,7 @@ export class SnaplineModel {
       y: 0,
     }
     this.graphModel = graphModel
+    this.epsilon = epsilon
   }
 
   getStyle() {
@@ -48,10 +51,10 @@ export class SnaplineModel {
       const item = nodes[i]
       // 排除当前节点
       if (item.id !== draggingNode.id) {
-        if (x === item.x) {
+        if (equal(x, item.x, this.epsilon)) {
           isShowVertical = true
         }
-        if (y === item.y) {
+        if (equal(y, item.y, this.epsilon)) {
           isShowHorizontal = true
         }
         // 如果水平垂直都显示，则停止循环。减少不必要的遍历
@@ -95,10 +98,11 @@ export class SnaplineModel {
       // 排除当前节点
       if (item.id !== draggingNode.id) {
         const itemData = getNodeBBox(item)
+
         // 如果节点的最大最小Y轴坐标与节点的最大最小Y轴坐标相等，展示水平线
         if (
-          itemData.minY === draggingData?.minY ||
-          itemData.maxY === draggingData?.minY
+          equal(itemData.minY, draggingData?.minY, this.epsilon) ||
+          equal(itemData.maxY, draggingData?.minY, this.epsilon)
         ) {
           // 找到则停止循环。减少不必要的遍历
           isShowHorizontal = true
@@ -106,8 +110,8 @@ export class SnaplineModel {
           break
         }
         if (
-          itemData.minY === draggingData?.maxY ||
-          itemData.maxY === draggingData?.maxY
+          equal(itemData.minY, draggingData?.maxY, this.epsilon) ||
+          equal(itemData.maxY, draggingData?.maxY, this.epsilon)
         ) {
           isShowHorizontal = true
           horizontalY = draggingData.maxY
@@ -145,15 +149,21 @@ export class SnaplineModel {
         }
       }
     }
+
     for (let i = 0; i < nodes.length; i++) {
       const item = nodes[i]
       // 排除当前节点
       if (item.id !== draggingNode.id) {
         const itemData = getNodeBBox(item)
         // 如果节点的最大最小X轴坐标与节点的最大最小X轴坐标相等，展示垂直线
+        if (equal(itemData.minX, draggingData?.minX, this.epsilon)) {
+          isShowVertical = true
+          verticalX = draggingData.minX
+          break
+        }
         if (
-          itemData.minX === draggingData?.minX ||
-          itemData.maxX === draggingData?.minX
+          equal(itemData.minX, draggingData?.minX, this.epsilon) ||
+          equal(itemData.maxX, draggingData?.minX, this.epsilon)
         ) {
           // 找到则停止循环。减少不必要的遍历
           isShowVertical = true
@@ -161,8 +171,8 @@ export class SnaplineModel {
           break
         }
         if (
-          itemData.minX === draggingData?.maxX ||
-          itemData.maxX === draggingData?.maxX
+          equal(itemData.minX, draggingData?.maxX, this.epsilon) ||
+          equal(itemData.maxX, draggingData?.maxX, this.epsilon)
         ) {
           isShowVertical = true
           verticalX = draggingData.maxX
@@ -235,4 +245,12 @@ export class SnaplineModel {
   }
 }
 
+function equal(num1: number, num2: number, epsilon: number) {
+  if (Math.abs(num1 - num2) <= epsilon) {
+    return true
+  } else {
+    return false
+  }
+}
+
 export default SnaplineModel

package/src/options.ts

@@ -88,6 +88,7 @@ export namespace Options {
     history?: boolean
     outline?: boolean
     snapline?: boolean
+    snaplineEpsilon?: number
     textEdit?: boolean
 
     guards?: GuardsConfig

package/src/util/resize.ts

@@ -12,6 +12,117 @@ import {
 } from '../algorithm/rotate'
 import type { SimplePoint } from '../algorithm/rotate'
 
+export function calculateWidthAndHeight(
+  startRotatedTouchControlPoint: SimplePoint,
+  endRotatedTouchControlPoint: SimplePoint,
+  oldCenter: SimplePoint,
+  angle: number,
+  freezeWidth = false,
+  freezeHeight = false,
+  oldWidth: number,
+  oldHeight: number,
+) {
+  // 假设目前触摸的是右下角的control点
+  // 计算出来左上角的control坐标，resize过程左上角的control坐标保持不变
+  const freezePoint: SimplePoint = {
+    x: oldCenter.x - (startRotatedTouchControlPoint.x - oldCenter.x),
+    y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
+  }
+  // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
+  const newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
+
+  // 得到【touchEndPoint】右下角-没有transform的坐标
+  let endZeroTouchControlPoint: SimplePoint = calculatePointAfterRotateAngle(
+    endRotatedTouchControlPoint,
+    newCenter,
+    -angle,
+  )
+
+  // ---------- 使用transform之前的坐标计算出新的width和height ----------
+
+  // 得到左上角---没有transform的坐标
+  let zeroFreezePoint: SimplePoint = calculatePointAfterRotateAngle(
+    freezePoint,
+    newCenter,
+    -angle,
+  )
+
+  if (freezeWidth) {
+    // 如果固定width，那么不能单纯使用endZeroTouchControlPoint.x=startZeroTouchControlPoint.x
+    // 因为去掉transform的左上角不一定是重合的，我们要保证的是transform后的左上角重合
+    const newWidth = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x)
+    const widthDx = newWidth - oldWidth
+
+    // 点击的是左边锚点，是+widthDx/2，点击是右边锚点，是-widthDx/2
+    if (newCenter.x > endZeroTouchControlPoint.x) {
+      // 当前触摸的是左边锚点
+      newCenter.x = newCenter.x + widthDx / 2
+    } else {
+      // 当前触摸的是右边锚点
+      newCenter.x = newCenter.x - widthDx / 2
+    }
+  }
+  if (freezeHeight) {
+    const newHeight = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y)
+    const heightDy = newHeight - oldHeight
+    if (newCenter.y > endZeroTouchControlPoint.y) {
+      // 当前触摸的是上边锚点
+      newCenter.y = newCenter.y + heightDy / 2
+    } else {
+      newCenter.y = newCenter.y - heightDy / 2
+    }
+  }
+
+  if (freezeWidth || freezeHeight) {
+    // 如果调整过transform之前的坐标，那么transform后的坐标也会改变，那么算出来的newCenter也得调整
+    // 由于无论如何rotate，中心点都是不变的，因此我们可以使用transform之前的坐标算出新的中心点
+    const nowFreezePoint = calculatePointAfterRotateAngle(
+      zeroFreezePoint,
+      newCenter,
+      angle,
+    )
+
+    // 得到当前新rect的左上角与实际上transform后的左上角的偏移量
+    const dx = nowFreezePoint.x - freezePoint.x
+    const dy = nowFreezePoint.y - freezePoint.y
+
+    // 修正不使用transform的坐标: 左上角、右下角、center
+    newCenter.x = newCenter.x - dx
+    newCenter.y = newCenter.y - dy
+    zeroFreezePoint = calculatePointAfterRotateAngle(
+      freezePoint,
+      newCenter,
+      -angle,
+    )
+    endZeroTouchControlPoint = {
+      x: newCenter.x - (zeroFreezePoint.x - newCenter.x),
+      y: newCenter.y - (zeroFreezePoint.y - newCenter.y),
+    }
+  }
+
+  // transform之前的坐标的左上角+右下角计算出宽度和高度
+  let width = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x)
+  let height = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y)
+
+  // ---------- 使用transform之前的坐标计算出新的width和height ----------
+
+  if (freezeWidth) {
+    // 理论计算出来的width应该等于oldWidth
+    // 但是有误差，比如oldWidth = 100; newWidth=100.000000000001
+    // 会在handleResize()限制放大缩小的最大最小范围中被阻止滑动
+    width = oldWidth
+  }
+  if (freezeHeight) {
+    height = oldHeight
+  }
+
+  return {
+    width,
+    height,
+    center: newCenter,
+  }
+}
+
 function recalcRotatedResizeInfo(
   pct: number,
   resizeInfo: ResizeInfo,
@@ -89,10 +200,12 @@ export const recalcResizeInfo = (
   controlY: number | undefined,
   oldCenterX: number,
   oldCenterY: number,
+  forceProportional = false,
 ): ResizeInfo => {
   const nextResizeInfo = cloneDeep(resizeInfo)
   let { deltaX, deltaY } = nextResizeInfo
   const { width, height, PCTResizeInfo } = nextResizeInfo
+
   if (PCTResizeInfo) {
     const sensitivity = 4 // 越低越灵敏
     let deltaScale = 0
@@ -190,7 +303,88 @@ export const recalcResizeInfo = (
     )
   }
 
-  // 如果限制了宽/高不变，对应的 width/height 保持一致
+  //Shift键等比缩放逻辑
+  if (forceProportional) {
+    // 计算当前的宽高比
+    const aspectRatio = width / height
+
+    // 根据拖拽方向确定主要的缩放参考
+    let primaryDelta = 0
+    let newWidth = width
+    let newHeight = height
+
+    switch (index) {
+      case ResizeControlIndex.LEFT_TOP:
+        // 取绝对值较大的delta作为主要缩放参考
+        primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? -deltaX : -deltaY
+        if (aspectRatio >= 1) {
+          // 宽度大于等于高度，以宽度为基准
+          newWidth = width + primaryDelta
+          newHeight = newWidth / aspectRatio
+        } else {
+          // 高度大于宽度，以高度为基准
+          newHeight = height + primaryDelta
+          newWidth = newHeight * aspectRatio
+        }
+        nextResizeInfo.width = newWidth
+        nextResizeInfo.height = newHeight
+        nextResizeInfo.deltaX = width - newWidth
+        nextResizeInfo.deltaY = height - newHeight
+        break
+
+      case ResizeControlIndex.RIGHT_TOP:
+        primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : -deltaY
+        if (aspectRatio >= 1) {
+          newWidth = width + primaryDelta
+          newHeight = newWidth / aspectRatio
+        } else {
+          newHeight = height - primaryDelta
+          newWidth = newHeight * aspectRatio
+        }
+        nextResizeInfo.width = newWidth
+        nextResizeInfo.height = newHeight
+        nextResizeInfo.deltaX = newWidth - width
+        nextResizeInfo.deltaY = height - newHeight
+        break
+
+      case ResizeControlIndex.RIGHT_BOTTOM:
+        primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY
+        if (aspectRatio >= 1) {
+          newWidth = width + primaryDelta
+          newHeight = newWidth / aspectRatio
+        } else {
+          newHeight = height + primaryDelta
+          newWidth = newHeight * aspectRatio
+        }
+        nextResizeInfo.width = newWidth
+        nextResizeInfo.height = newHeight
+        nextResizeInfo.deltaX = newWidth - width
+        nextResizeInfo.deltaY = newHeight - height
+        break
+
+      case ResizeControlIndex.LEFT_BOTTOM:
+        primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? -deltaX : deltaY
+        if (aspectRatio >= 1) {
+          newWidth = width - primaryDelta
+          newHeight = newWidth / aspectRatio
+        } else {
+          newHeight = height + primaryDelta
+          newWidth = newHeight * aspectRatio
+        }
+        nextResizeInfo.width = newWidth
+        nextResizeInfo.height = newHeight
+        nextResizeInfo.deltaX = width - newWidth
+        nextResizeInfo.deltaY = newHeight - height
+        break
+
+      default:
+        break
+    }
+
+    return nextResizeInfo
+  }
+
+  // 原有的非等比缩放逻辑保持不变
   switch (index) {
     case ResizeControlIndex.LEFT_TOP:
       nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct
@@ -292,6 +486,7 @@ export type IHandleResizeParams = {
   nodeModel: BaseNodeModel
   graphModel: GraphModel
   cancelCallback?: () => void
+  forceProportional?: boolean
 }
 
 /**
@@ -304,6 +499,7 @@ export type IHandleResizeParams = {
  * @param nodeModel
  * @param graphModel
  * @param cancelCallback
+ * @param forceProportional
  */
 export const handleResize = ({
   x,
@@ -314,6 +510,7 @@ export const handleResize = ({
   nodeModel,
   graphModel,
   cancelCallback,
+  forceProportional = false,
 }: IHandleResizeParams) => {
   const {
     r, // circle
@@ -331,6 +528,7 @@ export const handleResize = ({
     x: oldCenterX,
     y: oldCenterY,
   } = nodeModel
+
   const isFreezeWidth = minWidth === maxWidth
   const isFreezeHeight = minHeight === maxHeight
 
@@ -356,6 +554,7 @@ export const handleResize = ({
     controlY,
     oldCenterX,
     oldCenterY,
+    forceProportional,
   )
 
   // 限制放大缩小的最大最小范围
@@ -405,114 +604,3 @@ export const handleResize = ({
     graphModel,
   )
 }
-
-export function calculateWidthAndHeight(
-  startRotatedTouchControlPoint: SimplePoint,
-  endRotatedTouchControlPoint: SimplePoint,
-  oldCenter: SimplePoint,
-  angle: number,
-  freezeWidth = false,
-  freezeHeight = false,
-  oldWidth: number,
-  oldHeight: number,
-) {
-  // 假设目前触摸的是右下角的control点
-  // 计算出来左上角的control坐标，resize过程左上角的control坐标保持不变
-  const freezePoint: SimplePoint = {
-    x: oldCenter.x - (startRotatedTouchControlPoint.x - oldCenter.x),
-    y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
-  }
-  // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
-  const newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
-
-  // 得到【touchEndPoint】右下角-没有transform的坐标
-  let endZeroTouchControlPoint: SimplePoint = calculatePointAfterRotateAngle(
-    endRotatedTouchControlPoint,
-    newCenter,
-    -angle,
-  )
-
-  // ---------- 使用transform之前的坐标计算出新的width和height ----------
-
-  // 得到左上角---没有transform的坐标
-  let zeroFreezePoint: SimplePoint = calculatePointAfterRotateAngle(
-    freezePoint,
-    newCenter,
-    -angle,
-  )
-
-  if (freezeWidth) {
-    // 如果固定width，那么不能单纯使用endZeroTouchControlPoint.x=startZeroTouchControlPoint.x
-    // 因为去掉transform的左上角不一定是重合的，我们要保证的是transform后的左上角重合
-    const newWidth = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x)
-    const widthDx = newWidth - oldWidth
-
-    // 点击的是左边锚点，是+widthDx/2，点击是右边锚点，是-widthDx/2
-    if (newCenter.x > endZeroTouchControlPoint.x) {
-      // 当前触摸的是左边锚点
-      newCenter.x = newCenter.x + widthDx / 2
-    } else {
-      // 当前触摸的是右边锚点
-      newCenter.x = newCenter.x - widthDx / 2
-    }
-  }
-  if (freezeHeight) {
-    const newHeight = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y)
-    const heightDy = newHeight - oldHeight
-    if (newCenter.y > endZeroTouchControlPoint.y) {
-      // 当前触摸的是上边锚点
-      newCenter.y = newCenter.y + heightDy / 2
-    } else {
-      newCenter.y = newCenter.y - heightDy / 2
-    }
-  }
-
-  if (freezeWidth || freezeHeight) {
-    // 如果调整过transform之前的坐标，那么transform后的坐标也会改变，那么算出来的newCenter也得调整
-    // 由于无论如何rotate，中心点都是不变的，因此我们可以使用transform之前的坐标算出新的中心点
-    const nowFreezePoint = calculatePointAfterRotateAngle(
-      zeroFreezePoint,
-      newCenter,
-      angle,
-    )
-
-    // 得到当前新rect的左上角与实际上transform后的左上角的偏移量
-    const dx = nowFreezePoint.x - freezePoint.x
-    const dy = nowFreezePoint.y - freezePoint.y
-
-    // 修正不使用transform的坐标: 左上角、右下角、center
-    newCenter.x = newCenter.x - dx
-    newCenter.y = newCenter.y - dy
-    zeroFreezePoint = calculatePointAfterRotateAngle(
-      freezePoint,
-      newCenter,
-      -angle,
-    )
-    endZeroTouchControlPoint = {
-      x: newCenter.x - (zeroFreezePoint.x - newCenter.x),
-      y: newCenter.y - (zeroFreezePoint.y - newCenter.y),
-    }
-  }
-
-  // transform之前的坐标的左上角+右下角计算出宽度和高度
-  let width = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x)
-  let height = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y)
-
-  // ---------- 使用transform之前的坐标计算出新的width和height ----------
-
-  if (freezeWidth) {
-    // 理论计算出来的width应该等于oldWidth
-    // 但是有误差，比如oldWidth = 100; newWidth=100.000000000001
-    // 会在handleResize()限制放大缩小的最大最小范围中被阻止滑动
-    width = oldWidth
-  }
-  if (freezeHeight) {
-    height = oldHeight
-  }
-
-  return {
-    width,
-    height,
-    center: newCenter,
-  }
-}

package/src/view/Control.tsx

@@ -1,5 +1,5 @@
 import { createElement as h, Component } from 'preact/compat'
-import { cloneDeep, find, forEach, map } from 'lodash-es'
+import { find, forEach, map, cloneDeep } from 'lodash-es'
 import { Rect } from './shape'
 import LogicFlow from '../LogicFlow'
 import { getNodeBBox, IDragParams, StepDrag, handleResize } from '../util'
@@ -8,8 +8,8 @@ import { BaseNodeModel, GraphModel } from '../model'
 import NodeData = LogicFlow.NodeData
 import VectorData = LogicFlow.VectorData
 import { EventType } from '../constant'
-import ResizeInfo = ResizeControl.ResizeInfo
 import ResizeNodeData = ResizeControl.ResizeNodeData
+import ResizeInfo = ResizeControl.ResizeInfo
 import ControlItemProps = ResizeControl.ControlItemProps
 
 export enum ResizeControlIndex {
@@ -41,6 +41,9 @@ export class ResizeControl extends Component<
   readonly graphModel: GraphModel
   readonly dragHandler: StepDrag
 
+  //判断Shift键状态
+  private isShiftPressed = false
+
   constructor(props: IResizeControlProps) {
     super()
     const { index, model, graphModel } = props
@@ -48,17 +51,39 @@ export class ResizeControl extends Component<
     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 = () => {
@@ -247,7 +272,6 @@ export class ResizeControl extends Component<
   resizeNode = ({ deltaX, deltaY }: VectorData) => {
     const { index } = this
     const { model, graphModel, x, y } = this.props
-
     // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
     handleResize({
       x,
@@ -257,6 +281,7 @@ export class ResizeControl extends Component<
       index,
       nodeModel: model,
       graphModel,
+      forceProportional: this.isShiftPressed,
       cancelCallback: () => {
         this.dragHandler.cancelDrag()
       },
@@ -325,7 +350,6 @@ export class ResizeControl extends Component<
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
     const { transformModel } = this.graphModel
     const [dx, dy] = transformModel.fixDeltaXY(deltaX, deltaY)
-
     this.resizeNode({
       deltaX: dx,
       deltaY: dy,

package/src/view/behavior/dnd.ts

@@ -59,6 +59,9 @@ export class Dnd {
     })
   }
   onDragOver = (e: MouseEvent) => {
+    this.lf.graphModel.eventCenter.emit(EventType.BLANK_CANVAS_MOUSEMOVE, {
+      e,
+    })
     e.preventDefault()
     if (this.fakeNode) {
       const { x, y } = this.clientToLocalPoint({