@logicflow/extension 2.2.0 → 2.2.1

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

@@ -1,89 +0,0 @@
-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', ({ preData, data }: any) => {
-    const { id, type } = preData
-    const deltaHeight = data.height - preData.height
-    // const resizeDir = data.y - preData.y > 0 ? 'below': 'above'
-    // 节点高度变高，y下移， 方向为below
-    // 节点高度变高， y上移， 方向为above
-    // 节点高度变小， y下移， 方向为above
-    // 节点高度变小， y上移，方向为below
-    let resizeDir = 'below'
-    if (deltaHeight > 0 && data.y - preData.y < 0) {
-      resizeDir = 'above'
-    } else if (deltaHeight < 0 && data.y - preData.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, data)
-      }
-    }
-  })
-}
-
-export const registerPoolNodes = (lf: LogicFlow) => {
-  lf.register(PoolNode)
-  lf.register(LaneNode)
-  poolEvent(lf)
-}

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

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

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

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