@logicflow/extension 1.2.26 → 2.0.0-beta.0

package/src/bpmn-elements/README.md

@@ -0,0 +1,223 @@
+## 内置基础节点
+
+### 事件
+
+**开始事件 (bpmn:startEvent)**
+
+- 开始事件
+- 中断子流程事件 (与开始事件通过isInterrupting属性区分，即是否有isInterrupting属性, `isInterrupting = 'false'`)
+- 非中断子流程事件 (与开始事件通过isInterrupting属性区分，即是否有isInterrupting属性, `isInterrupting = 'true'`)
+
+**边界事件 (bpmn:boundaryEvent)**
+
+- 中断边界事件 (属性`cancelActivity = 'true'`)
+- 非中断边界事件 (属性`cancelActivity = 'false'`)
+
+**中间事件**
+
+- 捕捉事件 (bpmn:intermediateCatchEvent)
+
+- 抛出事件 (bpmn:intermediateThrowEvent)
+
+**结束事件 (bpmn:endEvent)**
+
+### 任务
+
+- 服务任务 (bpmn:serviceTask)
+- 用户任务 (bpmn:userTask)
+
+### 网关
+
+- 并行网关 (bpmn:parallelGateway)
+- 排他网关 (bpmn:exclusiveGateway)
+- 包容网关 (bpmn:inclusiveGateway)
+
+### 子流程
+
+- 嵌入子流程 (bpmn:subProcess)
+
+### 流（flow）
+
+- 顺序流 (bpmn:sequenceFlow) 可以通过`isDefaultFlow`（是否为缺省流）属性改变顺序流的样式
+
+## 节点扩展
+
+### 事件
+
+在基础节点的基础上，我们需要通过定义definition属性来扩展事件节点。
+
+``` ts
+import { h } from '@logicflow/core'
+
+// 例如，我们想要扩展出时间开始事件，时间捕获事件，时间边界事件
+const [definition, setDefinition] = lf.useDefinition()
+const customDefinition = [
+    {
+        // 为startEvent、intermediateCatchEvent、boundaryEvent添加definition
+        nodes: ['startEvent', 'intermediateCatchEvent', 'boundaryEvent'],
+        definition: {
+            /**
+             * definition的type属性，对应XML数据中的节点名
+             * 例如一个时间非中断边界事件的XML数据如下：
+             * <bpmn:boundaryEvent id="BoundaryEvent_1" cancelActivity="false" attachedToRef="Task_1">
+             *  <bpmn:timerEventDefinition>
+             *   <bpmn:timeDuration>
+             *    P1D
+             *   </bpmn:timeDuration>
+             *  </bpmn:timerEventDefinition>
+             * </bpmn:boundaryEvent>
+             */
+            type: 'bpmn:timerEventDefinition',
+            // icon可以是svg的path路径m, 也可以是@logicflow/core 导出的h函数生成的svg, 这里是通过h函数生成的svg
+            icon:  timerIcon,
+            /**
+             * 对应definition需要的属性，例如这里是timerType和timerValue
+             * timerType值可以"timeCycle", "timerDate", "timeDuration", 用于区分 <bpmn:timeCycle/>、<bpmn:timeDate/>、<bpmn:timeDuration/>
+             * timerValue是timerType对应的cron表达式
+             * 最终会生成 `<bpmn:${timerType} xsi:type="bpmn:tFormalExpression">${timerValue}</bpmn:${timerType}>`
+             */
+            properties: {
+                timerType: '',
+                timerValue: ''
+            }
+        }
+    }
+]
+
+setDefinition(customDefinition)
+```
+
+<details>
+  <summary>timerIcon的定义如下：</summary>
+  <pre><code>
+import { h } from '@logicflow/core'
+const timerIcon = [
+  h('circle', {
+    cx: 18,
+    cy: 18,
+    r: 11,
+    style:
+      'stroke-linecap: round;stroke-linejoin: round;stroke: rgb(34, 36, 42);stroke-width: 2px;fill: white',
+  }),
+  h('path', {
+    d: 'M 18,18 l 2.25,-7.5 m -2.25,7.5 l 5.25,1.5',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 2px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(0,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(30,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(60,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(90,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(120,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(150,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(180,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(210,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(240,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(270,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(300,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+  h('path', {
+    d: 'M 18,18 m 0,7.5 l -0,2.25',
+    transform: 'rotate(330,18,18)',
+    style:
+      'fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: rgb(34, 36, 42); stroke-width: 1px;',
+  }),
+];</code></pre>
+</details>
+
+### 任务
+
+任务节点的扩展方式如下：
+
+```ts
+import { TaskNodeFactory } from '@logicflow/extension'
+
+// 例如，扩展一个脚本任务
+
+const scriptTaskIcon = 'M6.402,0.5H20.902C20.902,0.5,15.069,3.333,15.069,6.083S19.486,12.083,19.486,15.25S15.319,20.333,15.319,20.333H0.235C0.235,20.333,5.235,17.665999999999997,5.235,15.332999999999998S0.6520000000000001,8.582999999999998,0.6520000000000001,6.082999999999998S6.402,0.5,6.402,0.5ZM3.5,4.5L13.5,4.5M3.8,8.5L13.8,8.5M6.3,12.5L16.3,12.5M6.5,16.5L16.5,16.5';
+
+// TaskNodeFactory的第一个参数是节点类型；第二个参数是节点图标（可以说svg path也可以是h函数生成的svg）；第三个参数（可选的）需要给节点设置属性
+const receiveTask = TaskNodeFactory('bpmn:scriptTask', scriptTaskIcon)
+
+lf.register(receiveTask)
+```
+
+### 网关
+
+网关节点的扩展方式如下：
+
+```ts
+
+import { GatewayNodeFactory } from '@logicflow/extension'
+
+// 例如，扩展一个复杂网关
+const complexIcon = 'm 23,13 0,7.116788321167883 -5.018248175182482,-5.018248175182482 -3.102189781021898,3.102189781021898 5.018248175182482,5.018248175182482 -7.116788321167883,0 0,4.37956204379562 7.116788321167883,0  -5.018248175182482,5.018248175182482 l 3.102189781021898,3.102189781021898 5.018248175182482,-5.018248175182482 0,7.116788321167883 4.37956204379562,0 0,-7.116788321167883 5.018248175182482,5.018248175182482 3.102189781021898,-3.102189781021898 -5.018248175182482,-5.018248175182482 7.116788321167883,0 0,-4.37956204379562 -7.116788321167883,0 5.018248175182482,-5.018248175182482 -3.102189781021898,-3.102189781021898 -5.018248175182482,5.018248175182482 0,-7.116788321167883 -4.37956204379562,0 z'
+
+const complexGateway = GatewayNodeFactory('bpmn:complexGateway', complexIcon)
+```
+
+### 子流程
+
+*不支持扩展*
+
+### 流
+
+流的扩展和自定义边的定义方法完全相同，参考 <https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge>
+
+### 其他节点
+
+其他类型的节点大家可以根据自己的需要通过自定义节点的方式进行扩展

package/src/bpmn-elements/__tests__/definition.test.js

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-undef */
+import LogicFlow from '@logicflow/core'
+import { BPMNElements } from '../index'
+
+// const registerEventNodes = new (jest.fn())();
+// const registerGatewayNodes = new (jest.fn())();
+// const registerFlows = new (jest.fn())();
+// const registerTaskNodes = new (jest.fn())();
+
+/** */
+describe('Test bpmn elements: definitionConfig', () => {
+  LogicFlow.use(BPMNElements)
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+  const lf = new LogicFlow({
+    container: div,
+  })
+  const [definition, setDefinition] = lf.useDefinition()
+
+  //   默认definition配置
+  //   const definitionConfig: DefinitionConfigType[] = [
+  //     {
+  //       nodes: ['startEvent', 'intermediateCatchEvent', 'boundaryEvent'],
+  //       definition: [
+  //         {
+  //           type: 'bpmn:timerEventDefinition',
+  //           icon: timerIcon,
+  //           properties: {
+  //             definitionType: 'bpmn:timerEventDefinition',
+  //             timerValue: '',
+  //             timerType: '',
+  //           },
+  //         },
+  //       ],
+  //     },
+  //   ]
+
+  test('nodes startEvent, intermediateCatchEvent, boundaryEvent, contain default definition: bpmn:timerEventDefinition', () => {
+    expect(Object.keys(definition)).toEqual([
+      'boundaryEvent',
+      'intermediateCatchEvent',
+      'startEvent',
+    ])
+    expect(definition.startEvent.has('bpmn:timerEventDefinition')).toBe(true)
+    expect(definition.boundaryEvent.has('bpmn:timerEventDefinition')).toBe(true)
+    expect(
+      definition.intermediateCatchEvent.has('bpmn:timerEventDefinition'),
+    ).toBe(true)
+  })
+
+  test('after setting new definition by setDefinition for startEvent, startEvent should contain two definition: bpmn:timerEventDefinition, bpmn:messageEventDefinition', () => {
+    setDefinition([
+      {
+        nodes: ['startEvent'],
+        definition: [
+          {
+            type: 'bpmn:messageEventDefinition',
+            icon: messageIcon,
+            properties: {
+              panels: [],
+              definitionType: 'bpmn:messageEventDefinition',
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(Array.from(definition.startEvent.keys()).length).toBe(2)
+    expect(definition.startEvent.has('bpmn:messageEventDefinition')).toBe(true)
+  })
+})

package/src/bpmn-elements/index.d.ts

@@ -0,0 +1,26 @@
+type DefinitionConfigType = {
+  nodes: string[];
+  definition: EventDefinitionType[] | TaskDefinitionType[];
+};
+
+type DefinitionPropertiesType = {
+  definitionType: string;
+  timerType?: TimerType;
+  timerValue?: string;
+  [key: string]: any;
+};
+
+type EventDefinitionType = {
+  type: string;
+  icon: string | Object;
+  toJSON: Function;
+  properties: DefinitionPropertiesType;
+  [key: string]: any;
+};
+
+type TaskDefinitionType = {
+  type: string;
+  [key: string]: any;
+};
+
+type TimerType = 'timerCycle' | 'timerDate' | 'timerDuration';

package/src/bpmn-elements/index.ts

@@ -0,0 +1,107 @@
+import { registerEventNodes } from './presets/Event'
+import { registerGatewayNodes } from './presets/Gateway'
+import { registerTaskNodes } from './presets/Task'
+import { registerFlows } from './presets/Flow'
+import { timerIcon } from './presets/icons'
+import * as icons from './presets/icons'
+import * as bpmnUtils from './utils'
+
+type DefinitionConfigType = {
+  nodes: string[]
+  definition: EventDefinitionType[] | TaskDefinitionType[]
+}
+
+type DefinitionPropertiesType = {
+  definitionType: string
+  timerType?: TimerType
+  timerValue?: string
+  [key: string]: any
+}
+
+type EventDefinitionType = {
+  type: string
+  icon: string | Record<string, any>
+  toJSON: (data?: unknown) => unknown
+  properties: DefinitionPropertiesType
+  [key: string]: any
+}
+
+type TaskDefinitionType = {
+  type: string
+  [key: string]: any
+}
+
+type TimerType = 'timerCycle' | 'timerDate' | 'timerDuration'
+
+const definitionConfig: DefinitionConfigType[] = [
+  {
+    nodes: ['startEvent', 'intermediateCatchEvent', 'boundaryEvent'],
+    definition: [
+      {
+        type: 'bpmn:timerEventDefinition',
+        icon: timerIcon,
+        properties: {
+          definitionType: 'bpmn:timerEventDefinition',
+          timerValue: '',
+          timerType: '',
+        },
+      },
+    ],
+  },
+]
+
+export function useDefinition(definition: any) {
+  function setDefinition(config: DefinitionConfigType[]) {
+    function set(
+      nodes: any[],
+      definitions: EventDefinitionType[] | TaskDefinitionType[],
+    ) {
+      nodes.forEach((name) => {
+        if (!definition?.[name]) {
+          definition[name] = new Map()
+        }
+        const map = definition?.[name]
+        definitions.forEach((define) => {
+          map.set(define.type, define)
+        })
+      })
+      return definition
+    }
+
+    config.forEach((define: any) => {
+      set(define.nodes, define.definition)
+    })
+  }
+
+  return () => [definition, setDefinition]
+}
+
+export class BPMNElements {
+  static pluginName = 'BpmnElementsPlugin'
+
+  constructor({ lf }: any) {
+    lf.definition = {}
+    lf.useDefinition = useDefinition(lf.definition)
+    const [_definition, setDefinition] = lf.useDefinition()
+    console.log('_definition', _definition)
+    setDefinition(definitionConfig)
+
+    registerEventNodes(lf)
+    registerGatewayNodes(lf)
+    registerFlows(lf)
+    registerTaskNodes(lf)
+
+    lf.setDefaultEdgeType('bpmn:sequenceFlow')
+  }
+}
+
+export * from './presets/Event/EndEventFactory'
+export * from './presets/Event/IntermediateCatchEvent'
+export * from './presets/Event/StartEventFactory'
+export * from './presets/Event/boundaryEventFactory'
+export * from './presets/Event/IntermediateThrowEvent'
+export * from './presets/Flow/sequenceFlow'
+export * from './presets/Task/task'
+export * from './presets/Task/subProcess'
+export * from './presets/Gateway/gateway'
+export { icons, bpmnUtils }

package/src/bpmn-elements/presets/Event/EndEventFactory.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import {
+  h,
+  CircleNode,
+  CircleNodeModel,
+  GraphModel,
+  LogicFlow,
+} from '@logicflow/core'
+import { genBpmnId, groupRule } from '../../utils'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export function EndEventFactory(lf: any): {
+  type: string
+  model: any
+  view: any
+} {
+  const [definition] = lf.useDefinition()
+
+  class view extends CircleNode {
+    getAnchorStyle() {
+      return {
+        visibility: 'hidden',
+      }
+    }
+
+    getShape() {
+      const { model } = this.props
+      const style = model.getNodeStyle()
+      const { x, y, r, width, height, properties } = model as CircleNodeModel
+      const outCircle = super.getShape()
+      const { definitionType } = properties
+      const { icon } = definition.endEvent?.get(definitionType) || {}
+      const i = Array.isArray(icon)
+        ? h(
+            'g',
+            {
+              transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+            },
+            ...icon,
+          )
+        : h('path', {
+            transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+            d: icon,
+            style:
+              'fill: black; stroke-linecap: round; stroke-linejoin: round; stroke: white; stroke-width: 1px;',
+          })
+      return h(
+        'g',
+        {},
+        outCircle,
+        h('circle', {
+          ...style,
+          strokeWidth: 2,
+          cx: x,
+          cy: y,
+          r: r - 2,
+        }),
+        i,
+      )
+    }
+  }
+
+  class model extends CircleNodeModel {
+    constructor(data: NodeConfig, graphModel: GraphModel) {
+      if (!data.id) {
+        data.id = `Event_${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,
+        }
+      }
+      const { properties = {} } =
+        definition.endEvent?.get(data.properties?.definitionType) || {}
+      data.properties = {
+        ...properties,
+        ...data.properties,
+      }
+      data.properties?.definitionType &&
+        (data.properties!.definitionId = `Definition_${genBpmnId()}`)
+      super(data, graphModel)
+      groupRule.call(this)
+    }
+
+    setAttributes(): void {
+      this.r = 18
+    }
+
+    getConnectedSourceRules() {
+      const rules = super.getConnectedSourceRules()
+      const notAsSource = {
+        message: '结束节点不能作为边的起点',
+        validate: (source: any, _target: any) => {
+          console.log('_target', _target)
+          return source !== this
+        },
+      }
+      rules.push(notAsSource)
+      return rules
+    }
+  }
+
+  return {
+    type: 'bpmn:endEvent',
+    view,
+    model,
+  }
+}

package/src/bpmn-elements/presets/Event/IntermediateCatchEvent.ts

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import LogicFlow, {
+  h,
+  CircleNode,
+  CircleNodeModel,
+  GraphModel,
+} from '@logicflow/core'
+import { genBpmnId, groupRule } from '../../utils'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export function IntermediateCatchEventFactory(lf: any): {
+  type: string
+  model: any
+  view: any
+} {
+  const [definition] = lf.useDefinition()
+
+  class view extends CircleNode {
+    getAnchorStyle() {
+      return {
+        visibility: 'hidden',
+      }
+    }
+
+    getShape() {
+      // @ts-ignore
+      const { model } = this.props
+      const style = model.getNodeStyle()
+      const { x, y, r, width, height, properties } = model as CircleNodeModel
+      const { definitionType } = properties
+      const { icon } =
+        definition.intermediateCatchEvent?.get(definitionType) || {}
+
+      const i = Array.isArray(icon)
+        ? h(
+            'g',
+            {
+              transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+            },
+            ...icon,
+          )
+        : h('path', {
+            transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+            d: icon,
+          })
+      return h(
+        'g',
+        {},
+        h('circle', {
+          ...style,
+          cx: x,
+          cy: y,
+          r,
+          strokeWidth: 1.5,
+        }),
+        h('circle', {
+          ...style,
+          cx: x,
+          cy: y,
+          r: r - 3,
+          strokeWidth: 1.5,
+        }),
+        i,
+      )
+    }
+  }
+
+  class model extends CircleNodeModel {
+    constructor(data: NodeConfig, graphModel: GraphModel) {
+      if (!data.id) {
+        data.id = `Event_${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,
+        }
+      }
+      const { properties = {} } =
+        definition.intermediateCatchEvent?.get(
+          data.properties?.definitionType,
+        ) || {}
+      data.properties = {
+        ...properties,
+        ...data.properties,
+      }
+      data.properties?.definitionType &&
+        (data.properties!.definitionId = `Definition_${genBpmnId()}`)
+      super(data, graphModel)
+      groupRule.call(this)
+    }
+
+    setAttributes(): void {
+      this.r = 18
+    }
+  }
+
+  return {
+    type: 'bpmn:intermediateCatchEvent',
+    view,
+    model,
+  }
+}