@logicflow/extension 1.2.26 → 2.0.0-beta.0

package/src/NodeResize/node/RectResize.tsx

@@ -0,0 +1,146 @@
+import LogicFlow, {
+  h,
+  RectNode,
+  RectNodeModel,
+  GraphModel,
+} from '@logicflow/core'
+import ControlGroup from '../control/ControlGroup'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export type ResizeNodeConfig = NodeConfig & {
+  properties: {
+    nodeSize: {
+      width: number
+      height: number
+    }
+  } & Record<string, unknown>
+}
+
+export type PCTResizeParams = {
+  ResizePCT: { widthPCT: number; heightPCT: number }
+  ResizeBasis: { basisWidth: number; basisHeight: number }
+  ScaleLimit: { maxScaleLimit: number; minScaleLimit: number }
+}
+
+export class RectResizeModel extends RectNodeModel {
+  PCTResizeInfo?: PCTResizeParams
+  minWidth!: number
+  minHeight!: number
+  maxWidth!: number
+  maxHeight!: number
+
+  constructor(data: ResizeNodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    const { nodeSize } = data.properties
+    if (nodeSize) {
+      this.width = nodeSize.width
+      this.height = nodeSize.height
+    }
+  }
+
+  initNodeData(data: any): void {
+    super.initNodeData(data)
+    this.minWidth = 30
+    this.minHeight = 30
+    this.maxWidth = 2000
+    this.maxHeight = 2000
+  }
+
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    const {
+      editConfigModel: { isSilentMode },
+    } = this.graphModel
+    if (isSilentMode) return style
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+
+  getResizeOutlineStyle() {
+    return {
+      fill: 'none',
+      stroke: 'transparent', // 矩形默认不显示调整边框
+      strokeWidth: 1,
+      strokeDasharray: '3,3',
+    }
+  }
+
+  getControlPointStyle() {
+    return {
+      width: 7,
+      height: 7,
+      fill: '#FFFFFF',
+      stroke: '#000000',
+    }
+  }
+
+  // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+  enableProportionResize(turnOn = true) {
+    if (turnOn) {
+      const ResizePCT = {
+        widthPCT: 100,
+        heightPCT: 100,
+      }
+      const ResizeBasis = {
+        basisWidth: this.width,
+        basisHeight: this.height,
+      }
+      const ScaleLimit = {
+        maxScaleLimit: Math.min(
+          (this.maxWidth / this.width) * 100,
+          (this.maxHeight / this.height) * 100,
+        ),
+        minScaleLimit: Math.max(
+          (this.minWidth / this.width) * 100,
+          (this.minHeight / this.height) * 100,
+        ),
+      }
+      this.PCTResizeInfo = {
+        ResizePCT,
+        ResizeBasis,
+        ScaleLimit,
+      }
+    } else {
+      delete this.PCTResizeInfo
+    }
+  }
+}
+
+export class RectResizeView extends RectNode {
+  getControlGroup(): h.JSX.Element | null {
+    const { model, graphModel } = this.props
+    return <ControlGroup model={model} graphModel={graphModel} />
+  }
+
+  // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+  getResizeShape() {
+    return super.getShape()
+  }
+
+  getShape(): h.JSX.Element {
+    const {
+      model: { isSelected },
+      graphModel: {
+        editConfigModel: { isSilentMode },
+      },
+    } = this.props
+    return (
+      <g>
+        {this.getResizeShape()}
+        {isSelected && !isSilentMode ? this.getControlGroup() : ''}
+      </g>
+    )
+  }
+}
+
+export const RectResize = {
+  type: 'rect',
+  view: RectResizeView,
+  model: RectResizeModel,
+}
+
+export default RectResize

package/src/NodeResize/node/index.ts

@@ -0,0 +1,4 @@
+export * from './DiamondResize'
+export * from './EllipseResize'
+export * from './HtmlResize'
+export * from './RectResize'

package/src/bpmn/constant.ts

@@ -0,0 +1,53 @@
+import LogicFlow from '@logicflow/core'
+
+export const StartEventConfig = {
+  width: 40,
+  height: 40,
+}
+
+export const EndEventConfig = {
+  width: 40,
+  height: 40,
+}
+
+export const ExclusiveGatewayConfig = {
+  width: 40,
+  height: 40,
+}
+
+export const ServiceTaskConfig = {
+  width: 100,
+  height: 80,
+}
+
+export const UserTaskConfig = {
+  width: 100,
+  height: 80,
+}
+
+export const theme: LogicFlow.CommonTheme = {
+  rect: {
+    radius: 5,
+    stroke: 'rgb(24, 125, 255)',
+  },
+  circle: {
+    r: 18,
+    stroke: 'rgb(24, 125, 255)',
+  },
+  polygon: {
+    stroke: 'rgb(24, 125, 255)',
+  },
+  polyline: {
+    stroke: 'rgb(24, 125, 255)',
+    hoverStroke: 'rgb(24, 125, 255)',
+    selectedStroke: 'rgb(24, 125, 255)',
+  },
+  edgeText: {
+    background: {
+      fill: 'white',
+      height: 14,
+      stroke: 'transparent',
+      radius: 3,
+    },
+  },
+}

package/src/bpmn/events/EndEvent.ts

@@ -0,0 +1,73 @@
+import { CircleNode, CircleNodeModel, h } from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+export class EndEventModel extends CircleNodeModel {
+  static extendKey = 'EndEventModel'
+
+  constructor(data, graphModel) {
+    if (!data.id) {
+      data.id = `Event_${getBpmnId()}`
+    }
+    if (!data.text) {
+      data.text = ''
+    }
+    if (data.text && typeof data.text === 'string') {
+      data.text = {
+        value: data.text,
+        x: data.x,
+        y: data.y + 40,
+      }
+    }
+    super(data, graphModel)
+  }
+
+  setAttributes(): void {
+    this.r = 18
+  }
+
+  getConnectedSourceRules() {
+    const rules = super.getConnectedSourceRules()
+    const notAsSource = {
+      message: '结束节点不能作为边的起点',
+      validate: () => false,
+    }
+    rules.push(notAsSource)
+    return rules
+  }
+}
+
+export class EndEventView extends CircleNode {
+  static extendKey = 'EndEventView'
+
+  getAnchorStyle() {
+    return {
+      visibility: 'hidden',
+    }
+  }
+
+  getShape(): h.JSX.Element {
+    const { model } = this.props
+    const style = model.getNodeStyle()
+    const { x, y, r } = model as CircleNodeModel
+    const outCircle = super.getShape()
+    return h(
+      'g',
+      {},
+      outCircle,
+      h('circle', {
+        ...style,
+        cx: x,
+        cy: y,
+        r: r - 5,
+      }),
+    )
+  }
+}
+
+export const EndEvent = {
+  type: 'bpmn:endEvent',
+  view: EndEventView,
+  model: EndEventModel,
+}
+
+export default EndEvent

package/src/bpmn/events/StartEvent.ts

@@ -0,0 +1,52 @@
+import { CircleNode, CircleNodeModel } from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+class StartEventModel extends CircleNodeModel {
+  static extendKey = 'StartEventModel'
+
+  constructor(data, graphModel) {
+    if (!data.id) {
+      data.id = `Event_${getBpmnId()}`
+    }
+    if (!data.text) {
+      data.text = ''
+    }
+    if (data.text && typeof data.text === 'string') {
+      data.text = {
+        value: data.text,
+        x: data.x,
+        y: data.y + 40,
+      }
+    }
+    // fix: 不能直接全部加，会导致下载后再次上传，位置错误。
+    // data.text.y += 40;
+    super(data, graphModel)
+  }
+
+  setAttributes(): void {
+    this.r = 18
+  }
+
+  getConnectedTargetRules() {
+    const rules = super.getConnectedTargetRules()
+    const notAsTarget = {
+      message: '起始节点不能作为边的终点',
+      validate: () => false,
+    }
+    rules.push(notAsTarget)
+    return rules
+  }
+}
+
+class StartEventView extends CircleNode {
+  static extendKey = 'StartEventNode'
+}
+
+export const StartEvent = {
+  type: 'bpmn:startEvent',
+  view: StartEventView,
+  model: StartEventModel,
+}
+
+export { StartEventModel, StartEventView }
+export default StartEvent

package/src/bpmn/events/index.ts

@@ -0,0 +1,2 @@
+export * from './StartEvent'
+export * from './EndEvent'

package/src/bpmn/flow/SequenceFlow.ts

@@ -0,0 +1,25 @@
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+export class SequenceFlowModel extends PolylineEdgeModel {
+  static extendKey = 'SequenceFlowModel'
+
+  constructor(data, graphModel) {
+    if (!data.id) {
+      data.id = `Flow_${getBpmnId()}`
+    }
+    super(data, graphModel)
+  }
+}
+
+export class SequenceFlowView extends PolylineEdge {
+  static extendKey = 'SequenceFlowEdge'
+}
+
+export const SequenceFlow = {
+  type: 'bpmn:sequenceFlow',
+  view: SequenceFlowView,
+  model: SequenceFlowModel,
+}
+
+export default SequenceFlow

package/src/bpmn/flow/index.ts

@@ -0,0 +1 @@
+export * from './SequenceFlow'

package/src/bpmn/gateways/ExclusiveGateway.ts

@@ -0,0 +1,71 @@
+import LogicFlow, {
+  h,
+  GraphModel,
+  PolygonNode,
+  PolygonNodeModel,
+} from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export class ExclusiveGatewayModel extends PolygonNodeModel {
+  static extendKey = 'ExclusiveGatewayModel'
+
+  constructor(data: NodeConfig, graphModel: GraphModel) {
+    if (!data.id) {
+      data.id = `Gateway_${getBpmnId()}`
+    }
+    if (!data.text) {
+      data.text = ''
+    }
+    if (data.text && typeof data.text === 'string') {
+      data.text = {
+        value: data.text,
+        x: data.x,
+        y: data.y + 40,
+      }
+    }
+    super(data, graphModel)
+    this.points = [
+      [25, 0],
+      [50, 25],
+      [25, 50],
+      [0, 25],
+    ]
+  }
+}
+
+export class ExclusiveGatewayView extends PolygonNode {
+  static extendKey = 'ExclusiveGatewayNode'
+
+  getShape(): h.JSX.Element {
+    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})`,
+      },
+      // @ts-ignore TODO: 确认 h('polygon') 报错的问题
+      h('polygon', {
+        ...style,
+        x,
+        y,
+        points,
+      }),
+      h('path', {
+        d: 'm 16,15 7.42857142857143,9.714285714285715 -7.42857142857143,9.714285714285715 3.428571428571429,0 5.714285714285715,-7.464228571428572 5.714285714285715,7.464228571428572 3.428571428571429,0 -7.42857142857143,-9.714285714285715 7.42857142857143,-9.714285714285715 -3.428571428571429,0 -5.714285714285715,7.464228571428572 -5.714285714285715,-7.464228571428572 -3.428571428571429,0 z',
+        ...style,
+      }),
+    )
+  }
+}
+
+export const ExclusiveGateway = {
+  type: 'bpmn:exclusiveGateway',
+  view: ExclusiveGatewayView,
+  model: ExclusiveGatewayModel,
+}
+
+export default ExclusiveGateway

package/src/bpmn/gateways/index.ts

@@ -0,0 +1 @@
+export * from './ExclusiveGateway'

package/src/bpmn/getBpmnId.ts

@@ -0,0 +1,31 @@
+class IDS {
+  private _ids: Set<string>
+
+  constructor() {
+    globalThis._ids = this
+    this._ids = new Set()
+  }
+
+  generateId() {
+    return 'xxxxxxx'.replace(/[x]/g, (c) => {
+      const r = (Math.random() * 16) | 0
+      const v = c === 'x' ? r : (r & 0x3) | 0x8
+      return v.toString(16)
+    })
+  }
+
+  next() {
+    let id = this.generateId()
+    while (this._ids.has(id)) {
+      id = this.generateId()
+    }
+    this._ids.add(id)
+    return id
+  }
+}
+
+const ids = globalThis?._ids || new IDS()
+
+export function getBpmnId(): string {
+  return ids.next()
+}

package/src/bpmn/index.ts

@@ -0,0 +1,57 @@
+import { theme } from './constant'
+import {
+  StartEvent,
+  StartEventView,
+  StartEventModel,
+  EndEvent,
+  EndEventView,
+  EndEventModel,
+} from './events'
+import { SequenceFlow, SequenceFlowView, SequenceFlowModel } from './flow'
+import {
+  ExclusiveGateway,
+  ExclusiveGatewayView,
+  ExclusiveGatewayModel,
+} from './gateways'
+import {
+  UserTask,
+  UserTaskView,
+  UserTaskModel,
+  ServiceTask,
+  ServiceTaskView,
+  ServiceTaskModel,
+} from './tasks'
+
+class BpmnElement {
+  static pluginName = 'bpmnElement'
+
+  constructor({ lf }) {
+    lf.setTheme(theme)
+    lf.register(StartEvent)
+    lf.register(EndEvent)
+    lf.register(ExclusiveGateway)
+    lf.register(UserTask)
+    lf.register(ServiceTask)
+    // 支持自定义bpmn元素的边
+    if (!lf.options.customBpmnEdge) {
+      lf.register(SequenceFlow)
+      lf.setDefaultEdgeType('bpmn:sequenceFlow')
+    }
+  }
+}
+
+export {
+  BpmnElement,
+  StartEventModel,
+  StartEventView,
+  EndEventView,
+  EndEventModel,
+  ExclusiveGatewayView,
+  ExclusiveGatewayModel,
+  UserTaskView,
+  UserTaskModel,
+  ServiceTaskView,
+  ServiceTaskModel,
+  SequenceFlowView,
+  SequenceFlowModel,
+}

package/src/bpmn/tasks/ServiceTask.ts

@@ -0,0 +1,63 @@
+import { h, RectNodeModel, RectNode } from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+export class ServiceTaskModel extends RectNodeModel {
+  static extendKey = 'ServiceTaskModel'
+
+  constructor(data, graphModel) {
+    if (!data.id) {
+      data.id = `Activity_${getBpmnId()}`
+    }
+    super(data, graphModel)
+  }
+}
+
+export class ServiceTaskView extends RectNode {
+  static extendKey = 'ServiceTaskNode'
+
+  getLabelShape(): h.JSX.Element {
+    const { model } = this.props
+    const { x, y, width, height } = model
+    const style = model.getNodeStyle()
+    return h(
+      'svg',
+      {
+        x: x - width / 2 + 5,
+        y: y - height / 2 + 5,
+        width: 30,
+        height: 30,
+        viewBox: '0 0 1274 1024',
+      },
+      h('path', {
+        fill: style.stroke,
+        d: 'M882.527918 434.149934c-2.234901-5.303796-7.311523-8.853645-13.059434-9.138124l-61.390185-3.009544c-6.635117-20.973684-15.521508-41.175795-26.513864-60.282968l42.051745-47.743374c4.308119-4.889357 4.955872-12.004405 1.602498-17.59268-46.384423-77.30362-103.969956-101.422947-106.400309-102.410438-5.332449-2.170432-11.432377-1.090844-15.693424 2.77009L654.674467 240.664222c-17.004279-8.654101-35.092239-15.756869-53.995775-21.210068l-3.26537-66.490344c-0.280386-5.747911-3.833305-10.824533-9.134031-13.059434-1.683339-0.709151-30.193673-12.391215-76.866668-12.051477-46.672996-0.339738-75.18333 11.342326-76.866668 12.051477-5.300726 2.234901-8.853645 7.311523-9.134031 13.059434l-3.26537 66.490344c-18.903535 5.453199-36.991496 12.555967-53.995775 21.210068l-48.450479-43.922349c-4.261047-3.860934-10.360975-4.940522-15.693424-2.77009-2.430352 0.98749-60.015885 25.106818-106.400309 102.410438-3.353374 5.588275-2.705622 12.703323 1.602498 17.59268l42.051745 47.743374c-10.992355 19.107173-19.878746 39.309284-26.513864 60.282968l-61.390185 3.009544c-5.747911 0.284479-10.824533 3.834328-13.059434 9.138124-1.01512 2.415003-24.687262 60.190871-2.822278 147.651828 1.583055 6.324032 7.072069 10.893094 13.57518 11.308557 5.892197 0.37146 11.751648 0.523933 17.419741 0.667196 14.498202 0.372483 28.193109 0.723477 40.908712 4.63353 4.212952 1.294482 6.435573 8.270361 9.349949 18.763342 1.287319 4.640694 2.617617 9.43693 4.484128 14.010085 1.794879 4.393054 3.75758 8.570189 5.66093 12.607132 1.302669 2.765997 2.529613 5.380544 3.689019 8.018627 2.986007 6.803963 2.682086 9.773598 2.578732 10.349719-3.061732 3.672646-6.391571 7.238868-9.91379 11.015891-1.810229 1.943258-3.680832 3.949962-5.523807 5.980201l-22.560832 24.8909c-3.865028 4.261047-4.940522 10.365068-2.774183 15.693424 0.991584 2.426259 25.102724 60.011792 102.414531 106.400309 5.588275 3.353374 12.703323 2.701528 17.591657-1.603521l23.476691-20.682042c2.346441-2.061962 4.64888-4.336772 6.875594-6.534833 9.05319-8.93858 14.018272-12.95608 17.73185-11.576663 3.305279 1.222851 6.907317 3.166109 10.720156 5.228071 3.325745 1.794879 6.764054 3.650133 10.465352 5.288446 6.016017 2.662643 12.120039 4.688789 18.019399 6.65149 6.827499 2.266623 13.279445 4.409426 18.819624 7.275707 1.518586 0.782829 1.926886 0.994654 2.358721 7.830339 0.726547 11.496845 1.25048 23.276123 1.753947 34.672684 0.264013 5.900384 0.528026 11.803837 0.815575 17.700127 0.284479 5.743818 3.833305 10.82044 9.138124 13.05534 1.654686 0.698918 29.371958 12.063757 74.869175 12.063757 0.328481 0 3.65832 0 3.986801 0 45.497217 0 73.214489-11.364839 74.869175-12.063757 5.304819-2.234901 8.853645-7.311523 9.138124-13.05534 0.287549-5.89629 0.551562-11.799744 0.815575-17.700127 0.503467-11.396561 1.027399-23.175839 1.753947-34.672684 0.431835-6.835685 0.840134-7.04751 2.358721-7.830339 5.54018-2.866281 11.992125-5.009084 18.819624-7.275707 5.89936-1.962701 12.003382-3.988848 18.019399-6.65149 3.701299-1.638313 7.139607-3.493567 10.465352-5.288446 3.812839-2.061962 7.414877-4.00522 10.720156-5.228071 3.713578-1.379417 8.67866 2.638083 17.73185 11.576663 2.226714 2.198062 4.529153 4.472871 6.875594 6.534833l23.476691 20.682042c4.888334 4.305049 12.003382 4.956895 17.591657 1.603521 77.311807-46.388517 101.422947-103.97405 102.414531-106.400309 2.166339-5.328355 1.090844-11.432377-2.774183-15.693424l-22.560832-24.8909c-1.842974-2.030239-3.713578-4.036943-5.523807-5.980201-3.52222-3.777023-6.852058-7.343245-9.91379-11.015891-0.103354-0.576121-0.407276-3.545756 2.578732-10.349719 1.159406-2.638083 2.38635-5.252631 3.689019-8.018627 1.90335-4.036943 3.866051-8.214079 5.66093-12.607132 1.866511-4.573155 3.196809-9.369392 4.484128-14.010085 2.914376-10.492982 5.136997-17.46886 9.349949-18.763342 12.715603-3.910053 26.41051-4.261047 40.908712-4.63353 5.668093-0.143263 11.527544-0.295735 17.419741-0.667196 6.503111-0.415462 11.992125-4.984524 13.57518-11.308557C907.21518 494.340805 883.543038 436.564937 882.527918 434.149934zM643.49894 643.761929c-35.280528 35.280528-82.191954 54.711066-132.086317 54.711066s-96.806813-19.430538-132.086317-54.711066c-35.280528-35.279504-54.711066-82.191954-54.711066-132.086317 0-49.894364 19.430538-96.80272 54.711066-132.082224 35.283598-35.284621 82.191954-54.711066 132.086317-54.711066s96.80579 19.426445 132.086317 54.711066c35.279504 35.279504 54.711066 82.187861 54.711066 132.082224C698.210006 561.569976 678.782537 608.482425 643.49894 643.761929z',
+      }),
+    )
+  }
+
+  getShape(): h.JSX.Element {
+    const { model } = this.props
+    const { x, y, width, height, radius } = model
+    const style = model.getNodeStyle()
+    return h('g', {}, [
+      h('rect', {
+        x: x - width / 2,
+        y: y - height / 2,
+        rx: radius,
+        ry: radius,
+        width,
+        height,
+        ...style,
+      }),
+      this.getLabelShape(),
+    ])
+  }
+}
+
+export const ServiceTask = {
+  type: 'bpmn:serviceTask',
+  view: ServiceTaskView,
+  model: ServiceTaskModel,
+}
+
+export default ServiceTask

package/src/bpmn/tasks/UserTask.ts

@@ -0,0 +1,64 @@
+import { h, RectNode, RectNodeModel } from '@logicflow/core'
+import { getBpmnId } from '../getBpmnId'
+
+export class UserTaskModel extends RectNodeModel {
+  static extendKey = 'UserTaskModel'
+
+  constructor(data, graphModel) {
+    if (!data.id) {
+      data.id = `Activity_${getBpmnId()}`
+    }
+    super(data, graphModel)
+  }
+}
+
+export class UserTaskView extends RectNode {
+  static extendKey = 'UserTaskNode'
+
+  getLabelShape(): h.JSX.Element {
+    const { model } = this.props
+    const { x, y, width, height } = model
+    const style = model.getNodeStyle()
+    return h(
+      'svg',
+      {
+        x: x - width / 2 + 5,
+        y: y - height / 2 + 5,
+        width: 25,
+        height: 25,
+        viewBox: '0 0 1274 1024',
+      },
+      h('path', {
+        fill: style.stroke,
+        d: 'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z',
+      }),
+    )
+  }
+
+  getShape(): h.JSX.Element {
+    const { model } = this.props
+    const { x, y, width, height, radius } = model
+    const style = model.getNodeStyle()
+    // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
+    return h('g', {}, [
+      h('rect', {
+        ...style,
+        x: x - width / 2,
+        y: y - height / 2,
+        rx: radius,
+        ry: radius,
+        width,
+        height,
+      }),
+      this.getLabelShape(),
+    ])
+  }
+}
+
+export const UserTask = {
+  type: 'bpmn:userTask',
+  view: UserTaskView,
+  model: UserTaskModel,
+}
+
+export default UserTask

package/src/bpmn/tasks/index.ts

@@ -0,0 +1,2 @@
+export * from './ServiceTask'
+export * from './UserTask'

package/src/bpmn-adapter/bpmnIds.ts

@@ -0,0 +1,31 @@
+export class IDs {
+  private _ids: Set<string>
+
+  constructor() {
+    globalThis._ids = this
+    this._ids = new Set()
+  }
+
+  generateId() {
+    return 'xxxxxxx'.replace(/[x]/g, (c) => {
+      const r = (Math.random() * 16) | 0
+      const v = c === 'x' ? r : (r & 0x3) | 0x8
+      return v.toString(16)
+    })
+  }
+
+  next() {
+    let id = this.generateId()
+    while (this._ids.has(id)) {
+      id = this.generateId()
+    }
+    this._ids.add(id)
+    return id
+  }
+}
+
+const ids = globalThis?._ids || new IDs()
+
+export function getBpmnId(): string {
+  return ids.next()
+}