@logicflow/core 2.2.0-alpha.2 → 2.2.0-alpha.4

package/src/model/GraphModel.ts

@@ -1,4 +1,5 @@
 import {
+  assign,
   find,
   forEach,
   map,
@@ -26,6 +27,8 @@ import {
   ModelType,
   OverlapMode,
   TextMode,
+  backgroundModeMap,
+  gridModeMap,
 } from '../constant'
 import LogicFlow from '../LogicFlow'
 import { Options as LFOptions } from '../options'
@@ -43,8 +46,6 @@ import {
   setupTheme,
   snapToGrid,
   updateTheme,
-  backgroundModeMap,
-  gridModeMap,
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
 import { Grid } from '../view/overlay'
@@ -69,8 +70,9 @@ export class GraphModel {
 
   // 流程图主题配置
   @observable theme: LogicFlow.Theme
+  @observable themeMode: LogicFlow.ThemeMode | string = 'default'
   // 初始化样式
-  customStyles: object
+  customStyles: LogicFlow.Theme
   // 网格配置
   @observable grid: Grid.GridOptions
   // 事件中心
@@ -167,6 +169,10 @@ export class GraphModel {
       customTrajectory,
       customTargetAnchor,
     } = options
+    this.themeMode = options.themeMode || 'default'
+    const initialGrid = gridModeMap[this.themeMode] || gridModeMap['default']
+    const initialBackground =
+      backgroundModeMap[this.themeMode] || backgroundModeMap['default']
     this.rootEl = container
     this.partial = !!partial
     this.background = background
@@ -175,11 +181,16 @@ export class GraphModel {
       // TODO：需要让用户设置成 0 吗？后面可以讨论一下
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
-    this.customStyles = options.style || {}
-    this.grid = Grid.getGridOptions(grid ?? false)
+    this.customStyles = (options.style || {}) as LogicFlow.Theme
     this.theme = setupTheme(options.style, options.themeMode)
+    this.grid = Grid.getGridOptions(assign({}, initialGrid, grid))
     this.theme.grid = cloneDeep(this.grid)
-    this.theme.background = cloneDeep(this.background)
+    if (background) {
+      this.background = cloneDeep(assign({}, initialBackground, background))
+      this.theme.background = cloneDeep(
+        assign({}, initialBackground, background),
+      )
+    }
     this.edgeType = options.edgeType || 'polyline'
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
@@ -195,6 +206,9 @@ export class GraphModel {
         ((entries) => {
           for (const entry of entries) {
             if (entry.target === this.rootEl) {
+              // 检查元素是否仍在DOM中
+              const isElementInDOM = document.body.contains(this.rootEl)
+              if (!isElementInDOM) return
               this.resize()
               this.eventCenter.emit('graph:resize', {
                 target: this.rootEl,
@@ -1516,9 +1530,10 @@ export class GraphModel {
    */
   @action setTheme(
     style: Partial<LogicFlow.Theme>,
-    themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string,
+    themeMode?: LogicFlow.ThemeMode | string,
   ) {
     if (themeMode) {
+      this.themeMode = themeMode
       // 修改背景颜色
       backgroundModeMap[themeMode] &&
         this.updateBackgroundOptions({
@@ -1589,15 +1604,32 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width ?? this.rootEl.getBoundingClientRect().width
-    this.isContainerWidth = isNil(width)
-    this.height = height ?? this.rootEl.getBoundingClientRect().height
-    this.isContainerHeight = isNil(height)
-
-    if (!this.width || !this.height) {
-      console.warn(
-        '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
-      )
+    // 检查当前实例是否已被销毁或rootEl不存在
+    if (!this.rootEl) return
+
+    // 检查元素是否仍在DOM中
+    const isElementInDOM = document.body.contains(this.rootEl)
+    if (!isElementInDOM) return
+
+    // 检查元素是否可见
+    const isVisible = this.rootEl.offsetParent !== null
+    if (!isVisible) return
+
+    try {
+      this.width = width ?? this.rootEl.getBoundingClientRect().width
+      this.isContainerWidth = isNil(width)
+      this.height = height ?? this.rootEl.getBoundingClientRect().height
+      this.isContainerHeight = isNil(height)
+
+      // 只有在元素可见且应该有宽高的情况下才显示警告
+      if (isVisible && (!this.width || !this.height)) {
+        console.warn(
+          '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
+        )
+      }
+    } catch (error) {
+      // 捕获可能的DOM操作错误
+      console.warn('获取画布宽高时发生错误:', error)
     }
   }
 

package/src/model/TransformModel.ts

@@ -46,15 +46,15 @@ const translateLimitsMap = {
 }
 
 export class TransformModel implements TransformInterface {
-  MINI_SCALE_SIZE = 0.2
-  MAX_SCALE_SIZE = 16
-  @observable SCALE_X = 1
-  @observable SKEW_Y = 0
-  @observable SKEW_X = 0
-  @observable SCALE_Y = 1
-  @observable TRANSLATE_X = 0
-  @observable TRANSLATE_Y = 0
-  @observable ZOOM_SIZE = 0.04
+  MINI_SCALE_SIZE = 0.2 // 缩小的最小值
+  MAX_SCALE_SIZE = 16 // 放大的最大值
+  @observable SCALE_X = 1 // x轴缩放比例
+  @observable SKEW_Y = 0 // y轴倾斜角度
+  @observable SKEW_X = 0 // x轴倾斜角度
+  @observable SCALE_Y = 1 // y轴缩放比例
+  @observable TRANSLATE_X = 0 // x轴平移距离
+  @observable TRANSLATE_Y = 0 // y轴平移距离
+  @observable ZOOM_SIZE = 0.04 // 缩放比例变化量
   eventCenter: EventEmitter
 
   // 限制画布可移动区域

package/src/model/edge/BaseEdgeModel.ts

@@ -265,8 +265,16 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
    */
   getOutlineStyle(): LogicFlow.OutlineTheme {
     const { graphModel } = this
-    const { outline } = graphModel.theme
-    return cloneDeep(outline)
+    const { edgeOutline } = graphModel.theme
+    let attributes = { ...edgeOutline }
+    if (this.isHovered) {
+      const hoverStyle = edgeOutline.hover || {}
+      attributes = {
+        ...attributes,
+        ...hoverStyle,
+      }
+    }
+    return cloneDeep(attributes)
   }
 
   /**

package/src/model/edge/PolylineEdgeModel.ts

@@ -34,13 +34,38 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   @observable dbClickPosition?: Point
 
   initEdgeData(data: LogicFlow.EdgeConfig): void {
-    this.offset = get(data, 'properties.offset', 30)
+    const providedOffset = get(data, 'properties.offset')
+    // 当用户未传入 offset 时，按“箭头与折线重叠长度 + 5”作为默认值
+    // 其中“重叠长度”采用箭头样式中的 offset（沿边方向的长度）
+    this.offset =
+      typeof providedOffset === 'number'
+        ? providedOffset
+        : this.getDefaultOffset()
     if (data.pointsList) {
       this.pointsList = data.pointsList
     }
     super.initEdgeData(data)
   }
 
+  setAttributes() {
+    const { offset: newOffset } = this.properties
+    if (newOffset && newOffset !== this.offset) {
+      this.offset = newOffset
+      this.updatePoints()
+    }
+  }
+
+  /**
+   * 计算默认 offset：箭头与折线重叠长度 + 5
+   * 重叠长度采用箭头样式中的 offset（沿边方向的长度）
+   */
+  private getDefaultOffset(): number {
+    const arrowStyle = this.getArrowStyle()
+    const arrowOverlap =
+      typeof arrowStyle.offset === 'number' ? arrowStyle.offset : 0
+    return arrowOverlap + 5
+  }
+
   getEdgeStyle() {
     const { polyline } = this.graphModel.theme
     const style = super.getEdgeStyle()

package/src/model/node/BaseNodeModel.ts

@@ -57,8 +57,7 @@ export interface IBaseNodeModel<P extends PropertiesType>
 }
 
 export class BaseNodeModel<P extends PropertiesType = PropertiesType>
-  implements IBaseNodeModel<P>
-{
+  implements IBaseNodeModel<P> {
   readonly BaseType = ElementType.NODE
   static BaseType: ElementType = ElementType.NODE
 
@@ -226,7 +225,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    *
    * @overridable 支持重写
    */
-  public setAttributes() {}
+  public setAttributes() { }
 
   /**
    * @overridable 支持重写，自定义此类型节点默认生成方式
@@ -307,7 +306,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   }
 
   // TODO: 等比例缩放
-  proportionalResize() {}
+  proportionalResize() { }
 
   /**
    * 获取被保存时返回的数据
@@ -433,7 +432,15 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
 
   getResizeOutlineStyle() {
     const { resizeOutline } = this.graphModel.theme
-    return cloneDeep(resizeOutline)
+    let attributes = { ...resizeOutline }
+    if (this.isHovered) {
+      const hoverStyle = resizeOutline.hover || {}
+      attributes = {
+        ...attributes,
+        ...hoverStyle,
+      }
+    }
+    return cloneDeep(attributes)
   }
 
   /**

package/src/model/node/HtmlNodeModel.ts

@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash-es'
 import BaseNodeModel from './BaseNodeModel'
 import { Model } from '../BaseModel'
 import { ModelType } from '../../constant'
@@ -45,6 +46,19 @@ export class HtmlNodeModel<
       { x: x - width / 2, y, id: `${this.id}_3` },
     ]
   }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const { baseNode, html } = this.graphModel.theme
+    const { style: customStyle = {} } = this.properties
+    const finalStyle = {
+      ...style,
+      ...cloneDeep(baseNode),
+      ...cloneDeep(html),
+      ...cloneDeep(customStyle),
+    }
+    return finalStyle
+  }
 }
 
 export default HtmlNodeModel

package/src/model/node/PolygonNodeModel.ts

@@ -67,12 +67,14 @@ export class PolygonNodeModel<
     const {
       graphModel: {
         theme: { polygon },
+        customStyles: { polygon: customPolygon },
       },
     } = this
     const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polygon),
+      ...cloneDeep(customPolygon),
       ...cloneDeep(customStyle),
     }
   }

package/src/options.ts

@@ -110,7 +110,7 @@ export namespace Options {
 
     customTargetAnchor?: customTargetAnchorType
     customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
-    themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
+    themeMode?: LogicFlow.ThemeMode // 主题模式
 
     parentTransform?: TransformModel // 父级变换模型，用于嵌套变换
 

package/src/style/index.less

@@ -215,8 +215,9 @@
 
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed #187dffcc;
-  box-shadow: 0 0 3px 0 #187dff80;
+  border: 2px dashed #4271dfcc;
+  border-radius: 12px;
+  box-shadow: 0 0 3px 0 #4271df80;
   cursor: move;
 }
 

package/src/style/raw.ts

@@ -183,8 +183,9 @@ export const content = `.lf-graph {
 }
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed #187dffcc;
-  box-shadow: 0 0 3px 0 #187dff80;
+  border: 2px dashed #4271dfcc;
+  border-radius: 12px;
+  box-shadow: 0 0 3px 0 #4271df80;
   cursor: move;
 }
 .lf-edge-adjust-point {

package/src/tool/MultipleSelectTool.tsx

@@ -27,6 +27,13 @@ export default class MultipleSelect extends Component<IToolProps> {
   }
 
   handleMouseDown = (ev: PointerEvent) => {
+    // 多选区域的拖拽步长随缩放变化
+    const {
+      graphModel: { gridSize },
+      lf,
+    } = this.props
+    const { SCALE_X } = lf.getTransform()
+    this.stepDrag.setStep(gridSize * SCALE_X)
     this.stepDrag.handleMouseDown(ev)
   }
   // 使多选区域的滚轮事件可以触发画布的滚轮事件
@@ -86,9 +93,10 @@ export default class MultipleSelect extends Component<IToolProps> {
 
   render() {
     const {
-      graphModel: { selectElements, transformModel },
+      graphModel: { selectElements, transformModel, theme },
     } = this.props
     const { SCALE_X, SCALE_Y } = this.props.lf.getTransform()
+    const { xPadding = 8, yPadding = 8 } = theme.multiSelect || {}
     if (selectElements.size <= 1) return
     let x = Number.MAX_SAFE_INTEGER
     let y = Number.MAX_SAFE_INTEGER
@@ -113,10 +121,10 @@ export default class MultipleSelect extends Component<IToolProps> {
     ;[x, y] = transformModel.CanvasPointToHtmlPoint([x, y])
     ;[x1, y1] = transformModel.CanvasPointToHtmlPoint([x1, y1])
     const style = {
-      left: `${x - (20 * SCALE_X) / 2}px`,
-      top: `${y - (20 * SCALE_Y) / 2}px`,
-      width: `${x1 - x + 20 * SCALE_X}px`,
-      height: `${y1 - y + 20 * SCALE_Y}px`,
+      left: `${x - (20 * SCALE_X) / 2 - xPadding / 2}px`,
+      top: `${y - (20 * SCALE_Y) / 2 - yPadding / 2}px`,
+      width: `${x1 - x + 20 * SCALE_X + xPadding}px`,
+      height: `${y1 - y + 20 * SCALE_Y + yPadding}px`,
       'border-width': `${2 * SCALE_X}px`,
     }
     return (

package/src/util/edge.ts

@@ -159,6 +159,7 @@ export const mergeBBox = (b1: BoxBounds, b2: BoxBounds): BoxBounds => {
 export const getBBoxOfPoints = (
   points: Point[] = [],
   offset?: number,
+  heightOffset?: number,
 ): BoxBounds => {
   const xList: number[] = []
   const yList: number[] = []
@@ -174,7 +175,7 @@ export const getBBoxOfPoints = (
   let height = maxY - minY
   if (offset) {
     width += offset
-    height += offset
+    height += heightOffset || offset
   }
   return {
     centerX: (minX + maxX) / 2,

package/src/util/geometry.ts

@@ -1,5 +1,6 @@
 import LogicFlow from '../LogicFlow'
 import PointTuple = LogicFlow.PointTuple
+import Point = LogicFlow.Point
 
 export function snapToGrid(point: number, gridSize: number, snapGrid: boolean) {
   // 开启节网格对齐时才根据网格尺寸校准坐标
@@ -53,3 +54,101 @@ export function normalizePolygon(
   // 缩放顶点
   return translatedPoints.map(([x, y]) => [x * scaleFactor, y * scaleFactor])
 }
+
+/**
+ * 通用圆角生成：为菱形、多边形、折线在转折处生成与矩形视觉一致的圆角
+ * - 圆角基于角平分线，切点距顶点的距离 t = r * tan(theta/2)
+ * - 半径会根据相邻边长度进行钳制，避免超过边长造成断裂
+ * - 多边形/菱形保持闭合；折线保持开口
+ */
+
+export const generateRoundedCorners = (
+  points: Point[],
+  radius: number,
+  isClosedShape: boolean, // 是否是闭合图形
+): Point[] => {
+  const n = points.length
+  if (n < 2 || radius <= 0) return points.slice()
+
+  const toVec = (a: Point, b: Point) => ({ x: b.x - a.x, y: b.y - a.y })
+  const len = (v: { x: number; y: number }) => Math.hypot(v.x, v.y)
+  const norm = (v: { x: number; y: number }) => {
+    const l = len(v) || 1
+    return { x: v.x / l, y: v.y / l }
+  }
+
+  const result: Point[] = []
+
+  // 用二次贝塞尔近似圆角，控制点取角点，避免复杂圆心计算
+  const makeRoundCorner = (prev: Point, curr: Point, next: Point): Point[] => {
+    const vPrev = toVec(curr, prev)
+    const vNext = toVec(curr, next)
+    const dPrev = len(vPrev)
+    const dNext = len(vNext)
+    if (dPrev < 1e-6 || dNext < 1e-6) return [curr]
+
+    const uPrev = norm(vPrev)
+    const uNext = norm(vNext)
+    const t = Math.min(radius, dPrev * 0.45, dNext * 0.45)
+
+    const start = { x: curr.x + uPrev.x * t, y: curr.y + uPrev.y * t }
+    const end = { x: curr.x + uNext.x * t, y: curr.y + uNext.y * t }
+
+    // 二次贝塞尔采样：B(s) = (1-s)^2*start + 2(1-s)s*curr + s^2*end
+    const steps = 10 // 3段近似，简洁且效果稳定
+    const pts: Point[] = [start]
+    for (let k = 1; k < steps; k++) {
+      const s = k / steps
+      const a = 1 - s
+      pts.push({
+        x: a * a * start.x + 2 * a * s * curr.x + s * s * end.x,
+        y: a * a * start.y + 2 * a * s * curr.y + s * s * end.y,
+      })
+    }
+    pts.push(end)
+    return pts
+  }
+
+  for (let i = 0; i < n; i++) {
+    const prevIdx = i === 0 ? (isClosedShape ? n - 1 : 0) : i - 1
+    const nextIdx = i === n - 1 ? (isClosedShape ? 0 : n - 1) : i + 1
+    const prev = points[prevIdx]
+    const curr = points[i]
+    const next = points[nextIdx]
+
+    const isEndpoint = !isClosedShape && (i === 0 || i === n - 1)
+    if (isEndpoint) {
+      // 折线两端不处理圆角
+      result.push(curr)
+    } else {
+      const arc = makeRoundCorner(prev, curr, next)
+      arc.forEach((p) => result.push(p))
+    }
+  }
+
+  // 去重处理：避免连续重复点
+  const dedup: Point[] = []
+  for (let i = 0; i < result.length; i++) {
+    const p = result[i]
+    if (
+      dedup.length === 0 ||
+      Math.hypot(
+        p.x - dedup[dedup.length - 1].x,
+        p.y - dedup[dedup.length - 1].y,
+      ) > 1e-6
+    ) {
+      dedup.push(p)
+    }
+  }
+
+  // 闭合图形：确保首尾不重复闭合
+  if (isClosedShape && dedup.length > 1) {
+    const first = dedup[0]
+    const last = dedup[dedup.length - 1]
+    if (Math.hypot(first.x - last.x, first.y - last.y) < 1e-6) {
+      dedup.pop()
+    }
+  }
+
+  return dedup
+}