@logicflow/extension 2.2.0 → 2.2.1

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

@@ -1,65 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,284 +0,0 @@
-/**
- * 泳道节点
- */
-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