@logicflow/extension 1.2.27 → 2.0.0-beta.1

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

@@ -0,0 +1,89 @@
+import LogicFlow from '@logicflow/core'
+import PoolNode from './Pool'
+import LaneNode from './Lane'
+
+export function laneToJSON(data: any) {
+  return `<bpmn:participant id="${data.id}" name="${data.name}" processRef="${data.properties.processRef}"/>`
+}
+
+export function poolToJSON(data: any) {
+  return `<bpmn:collaboration id="${data.id}">
+  ${data.children.map((child: any) => child.toJSON(child)).join('\t\n')}
+</bpmn:collaboration>`
+}
+
+function poolEvent(lf: any) {
+  const selectAll = () => {
+    const { nodes = [], edges = [] } = lf.getGraphData()
+    nodes.forEach((node: any) => {
+      const { id } = node
+      if (id) {
+        lf.selectElementById(id)
+      }
+    })
+    edges.forEach((edge: any) => {
+      const { id } = edge
+      if (id) {
+        lf.selectElementById(id)
+      }
+    })
+    return false
+  }
+
+  lf.keyboard.on('cmd + a', selectAll)
+  lf.keyboard.on('ctrl + a', selectAll)
+  lf.on('node:dnd-add, edge:add', ({ data }: any) => {
+    const { x, y, type, id } = data
+    if (type === 'pool') {
+      lf.setProperties(data.id, {})
+      const poolModel = lf.getNodeModelById(id)
+      const { width, height } = poolModel
+      const { id: laneId } = lf.addNode({
+        type: 'lane',
+        properties: {
+          nodeSize: {
+            width: width - 30,
+            height,
+          },
+        },
+        x: x + 15,
+        y,
+      })
+      poolModel.addChild(laneId)
+    }
+  })
+  lf.on('node:resize', ({ oldNodeSize, newNodeSize }: any) => {
+    const { id, type } = oldNodeSize
+    const deltaHeight = newNodeSize.height - oldNodeSize.height
+    // const resizeDir = newNodeSize.y - oldNodeSize.y > 0 ? 'below': 'above'
+    // 节点高度变高，y下移， 方向为below
+    // 节点高度变高， y上移， 方向为above
+    // 节点高度变小， y下移， 方向为above
+    // 节点高度变小， y上移，方向为below
+    let resizeDir = 'below'
+    if (deltaHeight > 0 && newNodeSize.y - oldNodeSize.y < 0) {
+      resizeDir = 'above'
+    } else if (deltaHeight < 0 && newNodeSize.y - oldNodeSize.y > 0) {
+      resizeDir = 'above'
+    }
+    if (type === 'pool') {
+      // 泳池缩放，泳道一起调整
+      lf.getNodeModelById(id).resizeChildren({
+        resizeDir,
+        deltaHeight,
+      })
+    } else if (type === 'lane') {
+      // 泳道缩放， 调整泳池
+      const groupId = lf.extension.group.nodeGroupMap.get(id)
+      if (groupId) {
+        lf.getNodeModelById(groupId).resize(id, newNodeSize)
+      }
+    }
+  })
+}
+
+export const registerPoolNodes = (lf: LogicFlow) => {
+  lf.register(PoolNode)
+  lf.register(LaneNode)
+  poolEvent(lf)
+}

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

@@ -0,0 +1,122 @@
+import LogicFlow from '@logicflow/core'
+import { serviceTaskIcon, userTaskIcon } from '../icons'
+import { TaskNodeFactory } from './task'
+import { SubProcessFactory } from './subProcess'
+
+function boundaryEvent(lf: any) {
+  lf.on('node:drag,node:dnd-drag', checkAppendBoundaryEvent)
+  lf.on('node:drop,node:dnd-add', appendBoundaryEvent)
+  lf.graphModel.addNodeMoveRules(
+    (
+      model: { isTaskNode: any; boundaryEvents: any },
+      deltaX: any,
+      deltaY: any,
+    ) => {
+      if (model.isTaskNode) {
+        // 如果移动的是分组，那么分组的子节点也跟着移动。
+        const nodeIds = model.boundaryEvents
+        lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        return true
+      }
+      return true
+    },
+  )
+
+  function appendBoundaryEvent(this: any, { data }: any) {
+    const { type, id } = data
+    if (type !== 'bpmn:boundaryEvent') {
+      return
+    }
+    const { nodes } = lf.graphModel
+    for (const node of nodes) {
+      if (node.isTaskNode) {
+        let nodeId = null
+        if ((nodeId = isBoundaryEventCloseToTask(node, data)) !== null) {
+          const eventModel = lf.graphModel.getNodeModelById(id)
+          const nodeModel = lf.graphModel.getNodeModelById(nodeId)
+          const { attachedToRef } = eventModel.properties
+          if (attachedToRef && attachedToRef !== nodeId) {
+            lf.graphModel
+              .getNodeModelById(attachedToRef)
+              .deleteBoundaryEvent(id)
+          }
+          nodeModel.addBoundaryEvent(id)
+          return
+        }
+      }
+    }
+  }
+
+  // 判断此节点是否在某个节点的边界上
+  // 如果在，且这个节点model存在属性isTaskNode，则调用这个方法
+  function checkAppendBoundaryEvent(this: any, { data }: any) {
+    const { type } = data
+    if (type !== 'bpmn:boundaryEvent') {
+      return
+    }
+    const { nodes } = lf.graphModel
+    for (const node of nodes) {
+      if (node.isTaskNode) {
+        if (isBoundaryEventCloseToTask(node, data)) {
+          // 同时只允许在一个节点的边界上
+          node.setTouching(true)
+        } else {
+          node.setTouching(false)
+        }
+      }
+    }
+  }
+
+  function isBoundaryEventCloseToTask(task: any, event: any) {
+    const offset = 5
+    const { x: tx, y: ty, width: twidth, height: theight, id } = task
+    const bbox = {
+      minX: tx - twidth / 2,
+      maxX: tx + twidth / 2,
+      minY: ty - theight / 2,
+      maxY: ty + theight / 2,
+    }
+    const { x: bx, y: by } = event
+    const outerBBox = {
+      minX: bbox.minX - offset,
+      maxX: bbox.maxX + offset,
+      minY: bbox.minY - offset,
+      maxY: bbox.maxY + offset,
+    }
+    const innerBBox = {
+      minX: bbox.minX + offset,
+      maxX: bbox.maxX - offset,
+      minY: bbox.minY + offset,
+      maxY: bbox.maxY - offset,
+    }
+    if (
+      bx > outerBBox.minX &&
+      bx < outerBBox.maxX &&
+      by > outerBBox.minY &&
+      by < outerBBox.maxY
+    ) {
+      if (
+        !(
+          bx > innerBBox.minX &&
+          bx < innerBBox.maxX &&
+          by > innerBBox.minY &&
+          by < innerBBox.maxY
+        )
+      ) {
+        return id
+      }
+    }
+    return null
+  }
+}
+
+export function registerTaskNodes(lf: LogicFlow) {
+  const ServiceTask = TaskNodeFactory('bpmn:serviceTask', serviceTaskIcon)
+  const UserTask = TaskNodeFactory('bpmn:userTask', userTaskIcon)
+
+  lf.register(ServiceTask)
+  lf.register(UserTask)
+  lf.register(SubProcessFactory())
+
+  boundaryEvent(lf)
+}

package/src/bpmn-elements/presets/Task/subProcess.ts

@@ -0,0 +1,190 @@
+import { h } from '@logicflow/core'
+import { GroupNode, GroupNodeModel } from '../../../materials/group'
+
+export function SubProcessFactory(): {
+  type: string
+  model: any
+  view: any
+} {
+  class view extends GroupNode {
+    getFoldIcon() {
+      const { model } = this.props
+      const { x, y, width, height, properties, foldable } =
+        model as GroupNodeModel
+      const foldX = model.x - model.width / 2 + 5
+      const foldY = model.y - model.height / 2 + 5
+      if (!foldable) return null
+      const iconIcon = h('path', {
+        fill: 'none',
+        stroke: '#818281',
+        strokeWidth: 2,
+        'pointer-events': 'none',
+        d: properties.isFolded
+          ? `M ${foldX + 3},${foldY + 6} ${foldX + 11},${foldY + 6} M${
+              foldX + 7
+            },${foldY + 2} ${foldX + 7},${foldY + 10}`
+          : `M ${foldX + 3},${foldY + 6} ${foldX + 11},${foldY + 6} `,
+      })
+      return h('g', {}, [
+        h('rect', {
+          height: 12,
+          width: 14,
+          rx: 2,
+          ry: 2,
+          strokeWidth: 1,
+          fill: '#F4F5F6',
+          stroke: '#CECECE',
+          cursor: 'pointer',
+          x: x - width / 2 + 5,
+          y: y - height / 2 + 5,
+          onClick: (e: any) => {
+            e
+              .stopPropagation()(model as GroupNodeModel)
+              .foldGroup?.(!properties.isFolded)
+          },
+        }),
+        iconIcon,
+      ])
+    }
+
+    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,
+        height,
+        stroke: 'black',
+        strokeWidth: 2,
+        strokeDasharray: '0 0',
+      }
+      return h('g', {}, [
+        // this.getAddAbleShape(),
+        h('rect', { ...foldRectAttrs }),
+        this.getFoldIcon(),
+      ])
+    }
+  }
+
+  class model extends GroupNodeModel {
+    boundaryEvents: any
+
+    initNodeData(data: {
+      width: number
+      height: number
+      properties: Record<string, any>
+    }) {
+      super.initNodeData(data)
+      this.foldable = true
+      // this.isFolded = true;
+      this.resizable = true
+      this.width = 400
+      this.height = 200
+      // 根据 properties中的配置重设 宽高
+      this.resetWidthHeight()
+      this.isTaskNode = true // 标识此节点是任务节点，可以被附件边界事件
+      this.boundaryEvents = [] // 记录自己附加的边界事件
+    }
+
+    // 自定义根据properties.iniProp
+    resetWidthHeight() {
+      const width = (this.properties.iniProp as any)?.width
+      const height = (this.properties.iniProp as any)?.height
+      width && (this.width = width)
+      height && (this.height = height)
+    }
+
+    getNodeStyle() {
+      const style = super.getNodeStyle()
+      style.stroke = '#989891'
+      style.strokeWidth = 1
+      style.strokeDasharray = '3 3'
+      if (this.isSelected) {
+        style.stroke = 'rgb(124, 15, 255)'
+      }
+      // isBoundaryEventTouchingTask属性用于标识拖动边界节点是否靠近此节点
+      // 如果靠近，则高亮提示
+      // style.fill = 'rgb(255, 230, 204)';
+      const { isBoundaryEventTouchingTask } = this.properties
+      if (isBoundaryEventTouchingTask) {
+        style.stroke = '#00acff'
+        style.strokeWidth = 2
+      }
+
+      return style
+    }
+
+    addChild(id: string) {
+      const model = this.graphModel.getElement(id)
+      model?.setProperties({
+        parent: this.id,
+      })
+      super.addChild(id)
+    }
+
+    // 隐藏锚点而不是设置锚点数为0
+    // 因为分组内部节点与外部节点相连时，
+    // 如果折叠分组，需要分组代替内部节点与外部节点相连。
+    getAnchorStyle() {
+      const style = super.getAnchorStyle()
+      style.stroke = '#000'
+      style.fill = '#fff'
+      if (!style.hover) {
+        style.hover = {}
+      }
+      style.hover.stroke = 'transparent'
+      return style
+    }
+
+    getOutlineStyle() {
+      const style = super.getOutlineStyle()
+      style.stroke = 'transparent'
+      if (!style.hover) {
+        style.hover = {}
+      }
+      style.hover.stroke = 'transparent'
+      return style
+    }
+
+    /**
+     * 提供方法给插件在判断此节点被拖动边界事件节点靠近时调用，从而触发高亮
+     */
+    setTouching(flag: boolean) {
+      this.setProperty('isBoundaryEventTouchingTask', flag)
+    }
+
+    /**
+     * 附加后记录被附加的边界事件节点Id
+     */
+    addBoundaryEvent(nodeId: string) {
+      this.setTouching(false)
+      if (this.boundaryEvents.find((item: string) => item === nodeId)) {
+        return false
+      }
+      const boundaryEvent = this.graphModel.getNodeModelById(nodeId)
+      boundaryEvent?.setProperties({
+        attachedToRef: this.id,
+      })
+      this.boundaryEvents.push(nodeId)
+      return true
+    }
+
+    /**
+     * 被附加的边界事件节点被删除时，移除记录
+     */
+    deleteBoundaryEvent(nodeId: string) {
+      this.boundaryEvents = this.boundaryEvents.filter(
+        (item: string) => item !== nodeId,
+      )
+    }
+  }
+
+  return {
+    type: 'bpmn:subProcess',
+    view,
+    model,
+  }
+}

package/src/bpmn-elements/presets/Task/task.ts

@@ -0,0 +1,193 @@
+import LogicFlow, {
+  h,
+  GraphModel,
+  RectNode,
+  RectNodeModel,
+} from '@logicflow/core'
+import { parallelMarker, sequentialMarker, loopMarker } from '../icons'
+import { genBpmnId, groupRule } from '../../utils'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export const multiInstanceIcon: any = {
+  parallel: parallelMarker,
+  sequential: sequentialMarker,
+  loop: loopMarker,
+}
+
+type TaskType = {
+  multiInstanceType: string
+  properties: Record<string, any>
+  [key: string]: any
+}
+
+/**
+ * @param type 任务节点的type, 对应其XML定义中的节点名，如<bpmn:userTask /> 其type为bpmn:userTask
+ * @param icon 任务节点左上角的图标，可以是svg path，也可以是h函数生成的svg
+ * @param props (可选) 任务节点的属性
+ * @returns { type: string, model: any, view: any }
+ */
+export function TaskNodeFactory(
+  type: string,
+  icon: string | any[],
+  props?: any,
+): {
+  type: string
+  model: any
+  view: any
+} {
+  class view extends RectNode {
+    getLabelShape() {
+      // @ts-ignore
+      const { model } = this.props
+      const { x, y, width, height } = model
+      const style = model.getNodeStyle()
+      const i = Array.isArray(icon)
+        ? h(
+            'g',
+            {
+              transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+            },
+            ...icon,
+          )
+        : h('path', {
+            fill: style.stroke,
+            d: icon,
+          })
+      return h(
+        'svg',
+        {
+          x: x - width / 2 + 5,
+          y: y - height / 2 + 5,
+          width: 25,
+          height: 25,
+          viewBox: '0 0 1274 1024',
+        },
+        i,
+      )
+    }
+
+    getShape() {
+      // @ts-ignore
+      const { model } = this.props
+      const { x, y, width, height, radius, properties } = model
+      const style = model.getNodeStyle()
+      return h('g', {}, [
+        h('rect', {
+          ...style,
+          x: x - width / 2,
+          y: y - height / 2,
+          rx: radius,
+          ry: radius,
+          width,
+          height,
+          opacity: 0.95,
+        }),
+        this.getLabelShape(),
+        h(
+          'g',
+          {
+            transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+          },
+          h('path', {
+            fill: 'white',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            stroke: 'rgb(34, 36, 42)',
+            strokeWidth: '2',
+            d: multiInstanceIcon[properties.multiInstanceType as any] || '', // TODO: 确认 properties.multiInstanceType 的类型
+          }),
+        ),
+      ])
+    }
+  }
+
+  class model extends RectNodeModel {
+    boundaryEvents: any // TODO: 确认该属性类型，可移除查看其导致的问题
+
+    constructor(data: NodeConfig, graphModel: GraphModel) {
+      if (!data.id) {
+        data.id = `Activity_${genBpmnId()}`
+      }
+      const properties: TaskType = {
+        ...(props || {}),
+        ...data.properties,
+        // multiInstanceType: '',
+        // panels: ['multiInstance'],
+      }
+      data.properties = properties
+      super(data, graphModel)
+      properties?.boundaryEvents?.forEach((id: string) => {
+        this.addBoundaryEvent(id)
+      })
+      this.deleteProperty('boundaryEvents')
+      groupRule.call(this)
+    }
+
+    initNodeData(data: any) {
+      super.initNodeData(data)
+      this.isTaskNode = true // 标识此节点是任务节点，可以被附件边界事件
+      this.boundaryEvents = [] // 记录自己附加的边界事件
+    }
+
+    getNodeStyle() {
+      const style = super.getNodeStyle()
+      // isBoundaryEventTouchingTask属性用于标识拖动边界节点是否靠近此节点
+      // 如果靠近，则高亮提示
+      // style.fill = 'rgb(255, 230, 204)';
+      const { isBoundaryEventTouchingTask } = this.properties
+      if (isBoundaryEventTouchingTask) {
+        style.stroke = '#00acff'
+        style.strokeWidth = 2
+      }
+      return style
+    }
+
+    getOutlineStyle() {
+      const style = super.getOutlineStyle()
+      style.stroke = 'transparent'
+      !style.hover && (style.hover = {})
+      style.hover.stroke = 'transparent'
+      return style
+    }
+
+    /**
+     * 提供方法给插件在判断此节点被拖动边界事件节点靠近时调用，从而触发高亮
+     */
+    setTouching(flag: boolean) {
+      this.setProperty('isBoundaryEventTouchingTask', flag)
+    }
+
+    /**
+     * 附加后记录被附加的边界事件节点Id
+     */
+    addBoundaryEvent(nodeId: string) {
+      this.setTouching(false)
+      if (this.boundaryEvents.find((item: string) => item === nodeId)) {
+        return false
+      }
+      const boundaryEvent = this.graphModel.getNodeModelById(nodeId)
+      boundaryEvent?.setProperties({
+        attachedToRef: this.id,
+      })
+      this.boundaryEvents.push(nodeId)
+      return true
+    }
+
+    /**
+     * 被附加的边界事件节点被删除时，移除记录
+     */
+    deleteBoundaryEvent(nodeId: string) {
+      this.boundaryEvents = this.boundaryEvents.filter(
+        (item: string) => item !== nodeId,
+      )
+    }
+  }
+
+  // @ts-ignore
+  return {
+    type,
+    view,
+    model,
+  }
+}