@logicflow/extension 2.2.0-alpha.5 → 2.2.0-alpha.7

package/lib/pool/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAllowMoveTo = exports.isBoundsInLane = void 0;
+/**
+ *
+ * @param bounds
+ * @param group
+ */
+function isBoundsInLane(bounds, group) {
+    var minX = bounds.minX, minY = bounds.minY, maxX = bounds.maxX, maxY = bounds.maxY;
+    var x = group.x, y = group.y, width = group.width, height = group.height;
+    return (minX >= x - width / 2 &&
+        maxX <= x + width / 2 &&
+        minY >= y - height / 2 &&
+        maxY <= y + height / 2);
+}
+exports.isBoundsInLane = isBoundsInLane;
+/**
+ * 判断 bounds 是否可以移动到下一个范围
+ * @param groupBounds
+ * @param node
+ * @param deltaX
+ * @param deltaY
+ */
+function isAllowMoveTo(groupBounds, node, deltaX, deltaY) {
+    var minX = groupBounds.minX, minY = groupBounds.minY, maxX = groupBounds.maxX, maxY = groupBounds.maxY;
+    var x = node.x, y = node.y, width = node.width, height = node.height;
+    // DONE: 计算节点坐标 (x, y) 可移动的范围，并判断 x + deltaX, y + deltaY 是否在范围内
+    var allowMoveMinX = minX + width / 2;
+    var allowMoveMinY = minY + height / 2;
+    var allowMoveMaxX = maxX - width / 2;
+    var allowMoveMaxY = maxY - height / 2;
+    return {
+        x: x + deltaX >= allowMoveMinX && x + deltaX <= allowMoveMaxX,
+        y: y + deltaY >= allowMoveMinY && y + deltaY <= allowMoveMaxY,
+    };
+}
+exports.isAllowMoveTo = isAllowMoveTo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.2.0-alpha.5",
+  "version": "2.2.0-alpha.7",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.2.0-alpha.5",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.5"
+    "@logicflow/vue-node-registry": "1.2.0-alpha.6",
+    "@logicflow/core": "2.2.0-alpha.6"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.2.0-alpha.5",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.5"
+    "@logicflow/core": "2.2.0-alpha.6",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.6"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/bpmn-elements-adapter/json2xml.ts

@@ -24,6 +24,17 @@ function handleAttributes(obj: any): any {
   return obj
 }
 
+function escapeXml(text: string) {
+  if (text == null) return ''
+  return text
+    .toString()
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
 function getAttributes(obj: any) {
   let tmp = obj
   try {
@@ -33,7 +44,7 @@ function getAttributes(obj: any) {
   } catch (error) {
     tmp = JSON.stringify(handleAttributes(obj)).replace(/"/g, "'")
   }
-  return tmp
+  return escapeXml(String(tmp))
 }
 
 const tn = '\t\n'
@@ -44,8 +55,11 @@ function toXml(obj: any, name: string, depth: number) {
   let str = ''
   const prefix = tn + frontSpace
   if (name === '-json') return ''
+  if (obj !== 0 && obj !== false && !obj) {
+    return `${prefix}<${name} />`
+  }
   if (name === '#text') {
-    return prefix + obj
+    return prefix + escapeXml(String(obj))
   }
   if (name === '#cdata-section') {
     return `${prefix}<![CDATA[${obj}]]>`
@@ -74,7 +88,7 @@ function toXml(obj: any, name: string, depth: number) {
     str +=
       attributes + (children !== '' ? `>${children}${prefix}</${name}>` : ' />')
   } else {
-    str += `${prefix}<${name}>${obj.toString()}</${name}>`
+    str += `${prefix}<${name}>${escapeXml(String(obj))}</${name}>`
   }
 
   return str
@@ -88,4 +102,4 @@ function lfJson2Xml(obj: any) {
   return xmlStr
 }
 
-export { lfJson2Xml, handleAttributes }
+export { lfJson2Xml, handleAttributes, escapeXml }

package/src/bpmn-elements-adapter/xml2json.ts

@@ -6,6 +6,7 @@
 // @ts-nocheck
 
 import { has } from 'lodash-es'
+import { escapeXml } from './json2xml'
 // ========================================================================
 //  XML.ObjTree -- XML source code from/to JavaScript object like E4X
 // ========================================================================
@@ -287,14 +288,7 @@ XML.ObjTree.prototype.scalar_to_xml = function (name, text) {
 }
 
 //  method: xml_escape( text )
-
-XML.ObjTree.prototype.xml_escape = function (text) {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '<')
-    .replace(/>/g, '>')
-    .replace(/"/g, '"')
-}
+XML.ObjTree.prototype.xml_escape = escapeXml
 
 /*
 // ========================================================================

package/src/components/control/index.ts

@@ -130,13 +130,13 @@ export class Control {
       } else {
         itemContainer.append(icon)
       }
-      switch (item.text) {
-        case '上一步':
+      switch (item.key) {
+        case 'undo':
           this.lf.on('history:change', ({ data: { undoAble } }: any) => {
             itemContainer.className = undoAble ? NORMAL : DISABLED
           })
           break
-        case '下一步':
+        case 'redo':
           this.lf.on('history:change', ({ data: { redoAble } }: any) => {
             itemContainer.className = redoAble ? NORMAL : DISABLED
           })

package/src/dynamic-group/index.ts

@@ -328,7 +328,6 @@ export class DynamicGroup {
   }: Omit<CallbackArgs<'node:click'>, 'e' | 'position'>) => {
     const nodeModel = this.lf.getNodeModelById(node.id)
     this.sendNodeToFront(nodeModel)
-
     // 重置所有 group 的 zIndex，防止 group 节点 zIndex 增长为正数（目的是保持 group 节点在最底层）
     if (this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
       const { nodes } = this.lf.graphModel

package/src/index.ts

@@ -9,6 +9,8 @@ export * from './bpmn-adapter/json2xml'
 // Adapter
 export * from './turbo-adapter'
 
+// 泳道相关
+export * from './pool'
 // 新版 Group
 export * from './dynamic-group'
 // 折线上动态插入节点

package/src/materials/curved-edge/index.ts

@@ -97,50 +97,67 @@ function getMidPoints(
   }
 }
 
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
 function getPartialPath(
-  prev: PointTuple,
-  cur: PointTuple,
-  next: PointTuple,
-  radius: number,
+  prevPoint: PointTuple,
+  cornerPoint: PointTuple,
+  nextPoint: PointTuple,
+  cornerRadius: number,
 ): string {
-  // 定义误差容错变量
-  const tolerance = 1
-
-  let dir1: DirectionType = ''
-  let dir2: DirectionType = ''
-
-  if (Math.abs(prev[0] - cur[0]) <= tolerance) {
-    // 垂直方向
-    dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
-    // 水平方向
-    dir1 = prev[0] > cur[0] ? 'l' : 'r'
+  // 轴对齐容差（像素），用于消除微小误差
+  const epsilon = 1
+
+  const resolveDir = (a: PointTuple, b: PointTuple): DirectionType => {
+    const dx = b[0] - a[0]
+    const dy = b[1] - a[1]
+    const adx = Math.abs(dx)
+    const ady = Math.abs(dy)
+    if (ady <= epsilon && adx > epsilon) {
+      return dx < 0 ? 'l' : 'r'
+    }
+    if (adx <= epsilon && ady > epsilon) {
+      return dy < 0 ? 't' : 'b'
+    }
+    if (adx <= epsilon && ady <= epsilon) {
+      return ''
+    }
+    // 非严格对齐时，选择更接近的轴
+    return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b'
   }
 
-  if (Math.abs(cur[0] - next[0]) <= tolerance) {
-    dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (Math.abs(cur[1] - next[1]) <= tolerance) {
-    dir2 = cur[0] > next[0] ? 'l' : 'r'
-  }
+  const dir1: DirectionType = resolveDir(prevPoint, cornerPoint)
+  const dir2: DirectionType = resolveDir(cornerPoint, nextPoint)
 
   const r =
     Math.min(
-      Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2,
-      Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2,
-      radius,
-    ) || (1 / 5) * radius
+      Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2,
+      Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2,
+      cornerRadius,
+    ) || (1 / 5) * cornerRadius
 
   const key = `${dir1}${dir2}`
   const orientation: ArcQuadrantType = directionMap[key] || '-'
-  let path = `L ${prev[0]} ${prev[1]}`
+  let path = ''
 
   if (orientation === '-') {
-    path += `L ${cur[0]} ${cur[1]} L ${next[0]} ${next[1]}`
+    // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+    path += `L ${cornerPoint[0]} ${cornerPoint[1]}`
   } else {
-    const [mid1, mid2] = getMidPoints(cur, key, orientation, r)
+    const [mid1, mid2] = getMidPoints(cornerPoint, key, orientation, r)
     if (mid1 && mid2) {
-      path += `L ${mid1[0]} ${mid1[1]} Q ${cur[0]} ${cur[1]} ${mid2[0]} ${mid2[1]}`
-      ;[cur[0], cur[1]] = mid2
+      path += `L ${mid1[0]} ${mid1[1]} Q ${cornerPoint[0]} ${cornerPoint[1]} ${mid2[0]} ${mid2[1]}`
+      ;[cornerPoint[0], cornerPoint[1]] = mid2
     }
   }
   return path

package/src/pool/LaneModel.ts

@@ -0,0 +1,226 @@
+/**
+ * 基于DynamicGroup重新实现的泳道节点组件
+ * 继承DynamicGroupNodeModel和DynamicGroupNode，提供泳道特定功能
+ */
+import LogicFlow from '@logicflow/core'
+import { DynamicGroupNodeModel } from '../dynamic-group'
+import { forEach } from 'lodash-es'
+import { laneConfig } from './constant'
+
+export class LaneModel extends DynamicGroupNodeModel {
+  readonly isLane: boolean = true
+  defaultZIndex: number = -1
+
+  initNodeData(data: LogicFlow.NodeConfig) {
+    super.initNodeData(data)
+    // 泳道特定配置
+    this.width = data.width || laneConfig.defaultWidth
+    this.height = data.height || laneConfig.defaultHeight
+    this.draggable = true // 允许拖拽（实际拖拽逻辑由泳池控制）
+    this.resizable = true // 允许调整大小
+    this.rotatable = false // 禁止旋转
+
+    // 设置泳道层级
+    // 如果传入了zIndex，使用传入的值，否则默认为2
+    // 泳道层级应该比所属泳池高，确保显示在泳池上方
+    this.defaultZIndex = data.zIndex || -1
+    this.setZIndex(this.defaultZIndex)
+    this.autoToFront = true
+
+    this.text.editable = true
+    this.style.stroke = '#000'
+    this.style.strokeWidth = 1
+
+    // 泳道属性配置
+    this.properties = {
+      ...this.properties,
+      processRef: '', // 流程引用标识
+      panels: ['processRef'], // 可配置面板
+      direction: data.properties?.direction || 'vertical',
+    }
+
+    // 设置折叠尺寸（泳道不支持折叠，设置为与正常尺寸相同）
+    this.collapsedWidth = this.width
+    this.collapsedHeight = this.height
+    this.expandWidth = this.width
+    this.expandHeight = this.height
+  }
+
+  setAttributes(): void {
+    super.setAttributes()
+    this.updateTextPosition()
+  }
+
+  setZIndex(zIndex: number) {
+    this.zIndex = Math.min(zIndex, this.defaultZIndex) || this.defaultZIndex
+  }
+
+  /**
+   * 重写折叠方法 - 泳道不支持折叠
+   */
+  toggleCollapse() {
+    // 泳道不支持折叠功能，保持展开状态
+    this.isCollapsed = false
+    this.setProperties({ isCollapsed: false })
+  }
+
+  /**
+   * 获取所属泳池ID
+   */
+  getPoolId(): string | null {
+    try {
+      // 检查graphModel是否存在
+      if (!this.graphModel) {
+        console.warn('GraphModel is not available')
+        return null
+      }
+
+      // 安全地获取泳池ID
+      const poolModel = this.graphModel.nodes.find((node) => {
+        return node.children && node.children.has(this.id)
+      })
+      return poolModel?.id || null
+    } catch (error) {
+      console.error('Error getting pool ID:', error)
+      return null
+    }
+  }
+
+  /**
+   * 获取所属泳池模型
+   */
+  getPoolModel(): any {
+    try {
+      const poolId = this.getPoolId()
+      if (!poolId) {
+        return null
+      }
+
+      // 检查graphModel是否存在
+      if (!this.graphModel) {
+        console.warn('GraphModel is not available for getting pool model')
+        return null
+      }
+
+      const poolModel = this.graphModel.getNodeModelById(poolId)
+      return poolModel || null
+    } catch (error) {
+      console.error('Error getting pool model:', error)
+      return null
+    }
+  }
+
+  /**
+   * 动态修改泳道属性
+   */
+  changeAttribute({ width, height, x, y }: any) {
+    if (width) this.width = width // 更新宽度
+    if (height) this.height = height // 更新高度
+    if (x) this.x = x // 更新X坐标
+    if (y) this.y = y // 更新Y坐标
+  }
+
+  /**
+   * 重写获取数据方法，添加泳道特定属性
+   */
+  getData(): LogicFlow.NodeData {
+    const data = super.getData()
+    // const poolModel = this.getPoolModel()
+    return {
+      ...data,
+      properties: {
+        ...data.properties,
+        width: this.width,
+        height: this.height,
+        processRef: this.properties.processRef,
+        direction: this.properties.direction,
+      },
+    }
+  }
+  /**
+   * 重写 isAllowAppendIn，禁止 Lane 嵌套
+   */
+  isAllowAppendIn(nodeData: LogicFlow.NodeData): boolean {
+    // 禁止 Lane 节点被添加到 Lane 中
+    return String(nodeData.type) !== 'lane'
+  }
+
+  /**
+   * 获取需要移动的节点
+   * @param groupModel
+   */
+  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
+    const nodeIds: string[] = []
+    const {
+      properties: { parent },
+      isDragging,
+    } = groupModel
+    if (isDragging && parent) {
+      nodeIds.push(parent as string)
+    }
+    forEach(Array.from(groupModel.children), (nodeId: string) => {
+      const nodeModel = this.graphModel.getNodeModelById(nodeId)
+      // 只有非 Lane 类型的节点才会被带动
+      if (
+        nodeModel &&
+        !nodeModel.isDragging &&
+        String(nodeModel.type) !== 'lane'
+      ) {
+        nodeIds.push(nodeId)
+      }
+    })
+    return nodeIds
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    style.strokeWidth = 2
+    return style
+  }
+  /**
+   * 获取文本样式
+   */
+  getTextStyle() {
+    const { isHorizontal = false } = this.properties
+    const style = super.getTextStyle()
+    style.overflowMode = 'ellipsis'
+    style.strokeWidth = 2
+    style.textWidth = isHorizontal ? this.height : this.width
+    style.textHeight = isHorizontal ? this.width : this.height
+    if (isHorizontal) {
+      style.transform = 'rotate(-90deg)'
+      style.textAlign = 'center'
+    }
+    return style
+  }
+
+  /**
+   * 获取子泳道
+   */
+  getSubNodes() {
+    const children: any[] = []
+    Array.from(this.children).forEach((childId) => {
+      const childModel = this.graphModel.getNodeModelById(childId)
+      if (childModel) {
+        children.push(childModel)
+      }
+    })
+    return children
+  }
+
+  /**
+   * 初始化文本位置 - 根据布局方向设置文本位置
+   */
+  updateTextPosition() {
+    if (this.properties.isHorizontal) {
+      // 横向泳池：文本显示在左侧标题区域
+      this.text.x = this.x - this.width / 2 + laneConfig.titleSize / 2
+      this.text.y = this.y
+    } else {
+      // 纵向泳池：文本显示在顶部标题区域
+      this.text.x = this.x
+      this.text.y = this.y - this.height / 2 + laneConfig.titleSize / 2
+    }
+  }
+}
+
+export default null