@logicflow/extension 1.2.27 → 2.0.0-beta.1

package/src/bpmn-elements/presets/Flow/sequenceFlow.ts

@@ -0,0 +1,65 @@
+import LogicFlow, {
+  h,
+  GraphModel,
+  PolylineEdge,
+  PolylineEdgeModel,
+} from '@logicflow/core'
+import { genBpmnId } from '../../utils'
+
+import EdgeConfig = LogicFlow.EdgeConfig
+
+type SequenceFlowType = {
+  panels: string[]
+  [key: string]: any
+}
+
+export function sequenceFlowFactory(props?: any): {
+  type: string
+  model: any
+  view: any
+} {
+  class model extends PolylineEdgeModel {
+    static extendKey = 'SequenceFlowModel'
+
+    constructor(data: EdgeConfig, graphModel: GraphModel) {
+      if (!data.id) {
+        data.id = `Flow_${genBpmnId()}`
+      }
+      const properties: SequenceFlowType = {
+        ...(props || {}),
+        ...data.properties,
+        // panels: ['condition'],
+        isDefaultFlow: false,
+      }
+      data.properties = properties
+
+      super(data, graphModel)
+    }
+  }
+
+  class view extends PolylineEdge {
+    static extendKey = 'SequenceFlowEdge'
+
+    getStartArrow(): h.JSX.Element | null {
+      // eslint-disable-next-line no-shadow
+      const { model } = this.props
+      const { isDefaultFlow } = model.properties
+      return isDefaultFlow
+        ? h('path', {
+            refX: 15,
+            stroke: '#000000',
+            strokeWidth: 2,
+            d: 'M 20 5 10 -5 z',
+          })
+        : h('path', {
+            d: '',
+          })
+    }
+  }
+
+  return {
+    type: 'bpmn:sequenceFlow',
+    view,
+    model,
+  }
+}

package/src/bpmn-elements/presets/Gateway/gateway.ts

@@ -0,0 +1,107 @@
+import LogicFlow, {
+  h,
+  Polygon,
+  GraphModel,
+  PolygonNode,
+  PolygonNodeModel,
+} from '@logicflow/core'
+import { genBpmnId, groupRule } from '../../utils'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export const gateway = {
+  exclusive: 0,
+  inclusive: 1,
+  parallel: 2,
+}
+
+/**
+ * index 0 排他网关
+ * index 1 包容网关
+ * index 2 并行网关
+ */
+export const gatewayComposable = [
+  [1, 1, 0],
+  [0, 0, 1],
+  [0, 1, 1],
+]
+
+/**
+ * @param type 网关节点的type, 对应其XML定义中的节点名，如<bpmn:inclusiveGateway /> 其type为bpmn:inclusiveGateway
+ * @param icon 网关节点左上角的图标，可以是svg path，也可以是h函数生成的svg
+ * @param props (可选) 网关节点的属性
+ * @returns { type: string, model: any, view: any }
+ */
+export function GatewayNodeFactory(
+  type: string,
+  icon: string | object,
+  props?: any,
+): {
+  type: string
+  model: any
+  view: any
+} {
+  class view extends PolygonNode {
+    getShape() {
+      const { model } = this.props
+      const { x, y, width, height, points } = model as PolygonNodeModel
+      const style = model.getNodeStyle()
+      return h(
+        'g',
+        {
+          transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+        },
+        h(Polygon, {
+          ...style,
+          x,
+          y,
+          points,
+        }),
+        typeof icon === 'string'
+          ? h('path', {
+              d: icon,
+              ...style,
+              fill: 'rgb(34, 36, 42)',
+              strokeWidth: 1,
+            })
+          : icon,
+      )
+    }
+  }
+
+  class model extends PolygonNodeModel {
+    constructor(data: NodeConfig, graphModel: GraphModel) {
+      if (!data.id) {
+        data.id = `Gateway_${genBpmnId()}`
+      }
+      if (!data.text) {
+        data.text = ''
+      }
+      if (data.text && typeof data.text === 'string') {
+        data.text = {
+          value: data.text,
+          x: data.x,
+          y: data.y + 40,
+        }
+      }
+      data.properties = {
+        ...(props || {}),
+        ...data.properties,
+      }
+      super(data, graphModel)
+      this.points = [
+        [25, 0],
+        [50, 25],
+        [25, 50],
+        [0, 25],
+      ]
+      groupRule.call(this)
+    }
+  }
+
+  return {
+    type,
+    view,
+    model,
+  }
+}

package/src/bpmn-elements/presets/Gateway/index.ts

@@ -0,0 +1,23 @@
+import LogicFlow from '@logicflow/core'
+import { exclusiveIcon, parallelIcon, inclusiveIcon } from '../icons'
+import { GatewayNodeFactory } from './gateway'
+
+export function registerGatewayNodes(lf: LogicFlow) {
+  const ExclusiveGateway = GatewayNodeFactory(
+    'bpmn:exclusiveGateway',
+    exclusiveIcon,
+  )
+
+  const ParallelGateway = GatewayNodeFactory(
+    'bpmn:parallelGateway',
+    parallelIcon,
+  )
+
+  const InclusiveGateway = GatewayNodeFactory(
+    'bpmn:inclusiveGateway',
+    inclusiveIcon,
+  )
+  lf.register(ExclusiveGateway)
+  lf.register(InclusiveGateway)
+  lf.register(ParallelGateway)
+}

package/src/bpmn-elements/presets/Pool/Lane.ts

@@ -0,0 +1,211 @@
+import LogicFlow, { h } from '@logicflow/core'
+import { laneToJSON } from '.'
+import { GroupNode, GroupNodeModel } from '../../../materials/group'
+import { HorizontalLaneModel } from './Pool'
+
+// 泳道
+class LaneModel extends GroupNodeModel {
+  initNodeData(
+    data: LogicFlow.NodeConfig & Record<'width' | 'height', number>,
+  ) {
+    data.properties = {
+      ...data.properties,
+      processRef: '',
+      panels: ['processRef'],
+    }
+    super.initNodeData(data)
+    if (data.width) {
+      this.width = data.width
+    }
+    if (data.height) {
+      this.height = data.height
+    }
+    if (data.properties) {
+      this.properties = {
+        ...this.properties,
+        ...data.properties,
+      }
+    }
+    this.draggable = false
+    this.resizable = true
+    this.zIndex = 1
+    this.toJSON = laneToJSON
+  }
+
+  changeAttribute({ width, height, x, y }: any) {
+    if (width) this.width = width
+    if (height) this.height = height
+    if (x) this.x = x
+    if (y) this.y = y
+  }
+}
+
+class LaneView extends GroupNode {
+  getOperateIcon() {
+    const { model } = this.props
+    const { isSelected } = model
+    if (!isSelected) {
+      return null
+    }
+    return [this.addAboveIcon(), this.addBelowIcon(), this.deleteIcon()]
+  }
+
+  addAboveIcon() {
+    const { x, y, width, height, id } = this.props.model
+    return h(
+      'g',
+      {
+        cursor: 'pointer',
+        onClick: () => {
+          const groupId = this.props.graphModel.group.nodeGroupMap.get(id)
+          if (groupId) {
+            const groupModel = this.props.graphModel.getNodeModelById(groupId)
+            if (groupModel) {
+              ;(
+                groupModel as GroupNodeModel as HorizontalLaneModel
+              ).addChildAbove({
+                x,
+                y,
+                width,
+                height,
+              })
+            }
+          }
+        },
+      },
+      [
+        h('rect', {
+          height: 7,
+          width: 20,
+          strokeWidth: 1,
+          fill: '#fff',
+          stroke: '#000',
+          strokeDasharray: '3 3',
+          x: x + width / 2 + 15,
+          y: y - height / 2 + 3,
+        }),
+        h('rect', {
+          height: 10,
+          width: 20,
+          strokeWidth: 1,
+          fill: '#fff',
+          stroke: '#000',
+          x: x + width / 2 + 15,
+          y: y - height / 2 + 10,
+        }),
+      ],
+    )
+  }
+
+  addBelowIcon() {
+    const { x, y, width, height, id } = this.props.model
+    return h(
+      'g',
+      {
+        cursor: 'pointer',
+        onClick: () => {
+          const groupId = this.props.graphModel.group.nodeGroupMap.get(id)
+          if (groupId) {
+            const groupModel = this.props.graphModel.getNodeModelById(groupId)
+            if (groupModel) {
+              ;(
+                groupModel as GroupNodeModel as HorizontalLaneModel
+              ).addChildBelow({
+                x,
+                y,
+                width,
+                height,
+              })
+            }
+          }
+        },
+      },
+      [
+        h('rect', {
+          height: 7,
+          width: 20,
+          strokeWidth: 1,
+          fill: '#fff',
+          stroke: '#000',
+          strokeDasharray: '3 3',
+          x: x + width / 2 + 15,
+          y: y - height / 2 + 32 + 5,
+        }),
+        h('rect', {
+          height: 10,
+          width: 20,
+          strokeWidth: 1,
+          fill: '#fff',
+          stroke: '#000',
+          x: x + width / 2 + 15,
+          y: y - height / 2 + 2.5 + 20 + 5,
+        }),
+      ],
+    )
+  }
+
+  deleteIcon() {
+    const { x, y, width, height, id } = this.props.model
+    return h(
+      'g',
+      {
+        cursor: 'pointer',
+        onClick: () => {
+          const groupId = this.props.graphModel.group.nodeGroupMap.get(id)
+          if (groupId) {
+            const groupModel = this.props.graphModel.getNodeModelById(groupId)
+            ;(groupModel as GroupNodeModel as HorizontalLaneModel).deleteChild(
+              id,
+            )
+          }
+        },
+      },
+      [
+        h('rect', {
+          height: 20,
+          width: 20,
+          rx: 2,
+          ry: 2,
+          strokeWidth: 1,
+          fill: 'transparent',
+          stroke: 'transparent',
+          x: x + width / 2 + 14,
+          y: y - height / 2 + 50,
+        }),
+        h(
+          'svg',
+          {
+            transform: 'translate(1.000000, 1.000000)',
+            // fill: '#3C96FE',
+            x: x + width / 2 + 14,
+            y: y - height / 2 + 50,
+            width: 20,
+            height: 20,
+          },
+          [
+            h('path', {
+              'pointer-events': 'none',
+              d: 'M15.3,1.4 L12.6,1.4 L12.6,0 L5.4,0 L5.4,1.4 L0,1.4 L0,2.8 L2,2.8 L2,17.3 C2,17.6865993 2.31340068,18 2.7,18 L15.3,18 C15.6865993,18 16,17.6865993 16,17.3 L16,2.8 L18,2.8 L18,1.4 L15.3,1.4 Z M14.6,16.6 L3.4,16.6 L3.4,2.8 L14.6,2.8 L14.6,16.6 Z',
+            }),
+            h('path', {
+              'pointer-events': 'none',
+              d: 'M6,5.4 L7.4,5.4 L7.4,14.4 L6,14.4 L6,5.4 Z M10.6,5.4 L12,5.4 L12,14.4 L10.6,14.4 L10.6,5.4 Z',
+            }),
+          ],
+        ),
+      ],
+    )
+  }
+
+  getResizeShape() {
+    return h('g', {}, [super.getResizeShape(), this.getOperateIcon()])
+  }
+}
+
+const LaneNode = {
+  type: 'lane',
+  view: LaneView,
+  model: LaneModel,
+}
+
+export default LaneNode

package/src/bpmn-elements/presets/Pool/Pool.ts

@@ -0,0 +1,284 @@
+/**
+ * 泳道节点
+ */
+import LogicFlow, { h } from '@logicflow/core'
+import { poolToJSON } from '.'
+import { GroupNode, GroupNodeModel } from '../../../materials/group'
+
+const laneMinSize = {
+  width: 312,
+  height: 72,
+}
+
+export class HorizontalLaneModel extends GroupNodeModel {
+  initNodeData(
+    data: LogicFlow.NodeConfig & Record<'width' | 'height', number>,
+  ) {
+    super.initNodeData(data)
+    this.height = 260
+    // this.foldable = true
+    this.foldedWidth = 42
+    this.resizable = true
+    this.zIndex = 1
+    this.text.editable = true
+    this.toJSON = poolToJSON
+  }
+
+  setAttributes() {
+    this.text = {
+      ...this.text,
+      value: this.text.value || '泳池示例',
+      x: this.x - this.width / 2 + 11,
+      y: this.y,
+    }
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    style.textWidth = 16
+    return style
+  }
+
+  foldGroup(isFolded: boolean) {
+    this.setProperty('isFolded', isFolded)
+    this.isFolded = isFolded
+    // step 1
+    if (isFolded) {
+      this.x = this.x - this.width / 2 + this.foldedWidth / 2
+      this.unfoldedWidth = this.width
+      this.unfoldedHight = this.height
+      this.width = this.foldedWidth
+    } else {
+      this.width = this.unfoldedWidth
+      this.x = this.x + this.width / 2 - this.foldedWidth / 2
+    }
+    // step 2
+    let allEdges = this.incoming.edges.concat(this.outgoing.edges)
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      nodeModel.visible = !isFolded
+      allEdges = allEdges.concat(
+        nodeModel.incoming.edges.concat(nodeModel.outgoing.edges),
+      )
+    })
+    // step 3
+    this.foldEdge(isFolded, allEdges)
+  }
+
+  // 感应泳道变化，调整宽高
+  resizePool(resizeId?: string, newNodeSize?: { x: number; width: number }) {
+    if (!this.children.size) {
+      return
+    }
+    let minX: number | null = null
+    let maxX: number | null = null
+    let minY: number | null = null
+    let maxY: number | null = null
+    let hasMaxX = false
+    // 找到边界
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      const { x, y, width, height, type, id } = nodeModel
+      if (type !== 'lane') {
+        return
+      }
+      if (id === resizeId && newNodeSize) {
+        minX = newNodeSize.x - newNodeSize.width / 2
+        maxX = newNodeSize.x + newNodeSize.width / 2
+        hasMaxX = true
+      }
+      if (!hasMaxX && (!minX || x - width / 2 < minX)) {
+        minX = x - width / 2
+      }
+      if (!hasMaxX && (!maxX || x + width / 2 > maxX)) {
+        maxX = x + width / 2
+      }
+      if (!minY || y - height / 2 < minY) {
+        minY = y - height / 2
+      }
+      if (!maxY || y + height / 2 > maxY) {
+        maxY = y + height / 2
+      }
+    })
+    if (minX && maxX && minY && maxY) {
+      this.width = maxX - minX + 30
+      this.height = maxY - minY
+      this.x = minX + (maxX - minX) / 2 - 15
+      this.y = minY + (maxY - minY) / 2
+      this.setAttributes()
+      this.resizeChildren({})
+    }
+  }
+
+  resizeChildren({ resizeDir = '', deltaHeight = 0 }) {
+    const { x, y, width } = this
+    const laneChildren: any[] = []
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      const { type } = nodeModel
+      if (type === 'lane') {
+        laneChildren.push(nodeModel)
+      }
+    })
+    // 按照位置排序
+    laneChildren.sort((a, b) => {
+      if (a.y < b.y) {
+        return -1
+      }
+      return 1
+    })
+    // 把泳池resize的高度加进来
+    const firstLane = laneChildren[0]
+    const lastLane = laneChildren[laneChildren.length - 1]
+    switch (resizeDir) {
+      case 'below':
+        // 高度加在最下面的泳道上
+        lastLane.height =
+          lastLane.height + deltaHeight < laneMinSize.height
+            ? laneMinSize.height
+            : lastLane.height + deltaHeight
+        laneChildren[laneChildren.length - 1] = lastLane
+        break
+      case 'above':
+        // 高度加在最上面的泳道上
+        firstLane.height =
+          firstLane.height + deltaHeight < laneMinSize.height
+            ? laneMinSize.height
+            : firstLane.height + deltaHeight
+        laneChildren[0] = firstLane
+        break
+      default:
+        break
+    }
+    const poolHeight = laneChildren.reduce((a, b) => a + b.height, 0)
+    let aboveNodeHeights = 0
+    laneChildren.forEach((nodeModel) => {
+      const { height } = nodeModel
+      nodeModel.changeAttribute({
+        width: width - 30,
+        height,
+        x: x + 15,
+        y: y - poolHeight / 2 + aboveNodeHeights + height / 2,
+      })
+      aboveNodeHeights += height
+    })
+    this.height = poolHeight
+  }
+
+  addChild(childId: any) {
+    super.addChild(childId)
+    this.graphModel.group.nodeGroupMap?.set(childId, this.id)
+  }
+
+  addChildAbove({ x, y, width, height }: any) {
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      const { type, y: childY } = nodeModel
+      if (type !== 'lane') {
+        return
+      }
+      // 在被操作的泳道之上
+      if (childY < y) {
+        nodeModel.changeAttribute({ y: childY - 120 })
+      }
+    })
+    const { id: laneId } = this.graphModel.addNode({
+      type: 'lane',
+      properties: {
+        nodeSize: {
+          width,
+          height: 120,
+        },
+      },
+      x,
+      y: y - height / 2 - 60,
+    })
+    this.addChild(laneId)
+    this.height = this.height + 120
+    this.y = this.y - 60
+  }
+
+  addChildBelow({ x, y, width, height }: any) {
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      const { type, y: childY } = nodeModel
+      if (type !== 'lane') {
+        return
+      }
+      // 在被操作的泳道之下
+      if (childY > y) {
+        nodeModel.changeAttribute({ y: childY + 120 })
+      }
+    })
+    const { id: laneId } = this.graphModel.addNode({
+      type: 'lane',
+      properties: {
+        nodeSize: {
+          width,
+          height: 120,
+        },
+      },
+      x,
+      y: y + height / 2 + 60,
+    })
+    this.addChild(laneId)
+    this.height = this.height + 120
+    this.y = this.y + 60
+  }
+
+  deleteChild(childId: any) {
+    const laneChildren: any[] = []
+    this.children.forEach((elementId) => {
+      const nodeModel: any = this.graphModel.getElement(elementId)
+      const { type } = nodeModel
+      if (type === 'lane') {
+        laneChildren.push(nodeModel)
+      }
+    })
+    if (laneChildren.length <= 1) {
+      return
+    }
+    this.removeChild(childId)
+    this.graphModel.deleteNode(childId)
+    this.resizePool()
+  }
+}
+
+export class HorizontalLaneView extends GroupNode {
+  getResizeShape() {
+    const { model } = this.props
+    const { x, y, width, height } = model
+    const style = model.getNodeStyle()
+    // 标题区域
+    const foldRectAttrs = {
+      ...style,
+      x: x - width / 2,
+      y: y - height / 2,
+      width: 30,
+      height,
+    }
+    // 泳道区域
+    const transRectAttrs = {
+      ...style,
+      x: x - width / 2 + 30,
+      y: y - height / 2,
+      width: width - 30,
+      height,
+      fill: 'transparent',
+    }
+    return h('g', {}, [
+      // this.getAddAbleShape(),
+      h('rect', { ...foldRectAttrs }),
+      h('rect', { ...transRectAttrs }),
+      this.getFoldIcon(),
+    ])
+  }
+}
+
+const PoolNode = {
+  type: 'pool',
+  view: HorizontalLaneView,
+  model: HorizontalLaneModel,
+}
+
+export default PoolNode