@logicflow/extension 1.2.27 → 2.0.0-beta.0

package/src/bpmn-adapter/index.ts

@@ -0,0 +1,596 @@
+import { getBpmnId } from './bpmnIds'
+import { handleAttributes, lfJson2Xml } from './json2xml'
+import { lfXml2Json } from './xml2json'
+
+import {
+  ExclusiveGatewayConfig,
+  StartEventConfig,
+  EndEventConfig,
+  ServiceTaskConfig,
+  UserTaskConfig,
+} from '../bpmn/constant'
+
+type NodeConfig = {
+  id: string
+  properties?: Record<string, unknown>
+  text?: {
+    x: number
+    y: number
+    value: string
+  }
+  type: string
+  x: number
+  y: number
+}
+
+type Point = {
+  x: number
+  y: number
+}
+
+type EdgeConfig = {
+  id: string
+  sourceNodeId: string
+  targetNodeId: string
+  type: string
+  startPoint?: {
+    x: number
+    y: number
+  }
+  endPoint?: {
+    x: number
+    y: number
+  }
+  text?: {
+    x: number
+    y: number
+    value: string
+  }
+  pointsList?: Point[]
+  properties: Record<string, unknown>
+}
+
+enum BpmnElements {
+  START = 'bpmn:startEvent',
+  END = 'bpmn:endEvent',
+  GATEWAY = 'bpmn:exclusiveGateway',
+  USER = 'bpmn:userTask',
+  SYSTEM = 'bpmn:serviceTask',
+  FLOW = 'bpmn:sequenceFlow',
+}
+
+const defaultAttrs = [
+  '-name',
+  '-id',
+  'bpmn:incoming',
+  'bpmn:outgoing',
+  '-sourceRef',
+  '-targetRef',
+]
+
+/**
+ * 将普通json转换为xmlJson
+ * xmlJson中property会以“-”开头
+ * 如果没有“-”表示为子节点
+ * fix issue https://github.com/didi/LogicFlow/issues/718, contain the process of #text/#cdata and array
+ * @param retainedFields retainedField会和默认的defaultRetainedFields:
+ * ["properties", "startPoint", "endPoint", "pointsList"]合并
+ * 这意味着出现在这个数组里的字段当它的值是数组或是对象时不会被视为一个节点而是一个属性
+ * @reference node type reference https://www.w3schools.com/xml/dom_nodetype.asp
+ */
+const defaultRetainedFields = [
+  'properties',
+  'startPoint',
+  'endPoint',
+  'pointsList',
+]
+
+function toXmlJson(retainedFields?: string[]) {
+  const fields = retainedFields
+    ? defaultRetainedFields.concat(retainedFields)
+    : defaultRetainedFields
+  return (json: string | any[] | Record<string, any>) => {
+    function ToXmlJson(obj: string | any[] | Record<string, any>) {
+      const xmlJson = {}
+      if (typeof obj === 'string') {
+        return obj
+      }
+      if (Array.isArray(obj)) {
+        return obj.map((j) => ToXmlJson(j))
+      }
+      Object.entries(obj).forEach(([key, value]) => {
+        if (typeof value !== 'object') {
+          // node type reference https://www.w3schools.com/xml/dom_nodetype.asp
+          if (
+            key.indexOf('-') === 0 ||
+            ['#text', '#cdata-section', '#comment'].includes(key)
+          ) {
+            xmlJson[key] = value
+          } else {
+            xmlJson[`-${key}`] = value
+          }
+        } else if (fields.includes(key)) {
+          xmlJson[`-${key}`] = ToXmlJson(value)
+        } else {
+          xmlJson[key] = ToXmlJson(value)
+        }
+      })
+      return xmlJson
+    }
+
+    return ToXmlJson(json)
+  }
+}
+
+/**
+ * 将xmlJson转换为普通的json，在内部使用。
+ */
+function toNormalJson(xmlJson) {
+  const json = {}
+  Object.entries(xmlJson).forEach(([key, value]) => {
+    if (key.indexOf('-') === 0) {
+      json[key.substring(1)] = handleAttributes(value)
+    } else if (typeof value === 'string') {
+      json[key] = value
+    } else if (Object.prototype.toString.call(value) === '[object Object]') {
+      json[key] = toNormalJson(value)
+    } else if (Array.isArray(value)) {
+      // contain the process of array
+      json[key] = value.map((v) => toNormalJson(v))
+    } else {
+      json[key] = value
+    }
+  })
+  return json
+}
+
+/**
+ * 设置bpmn process信息
+ * 目标格式请参考examples/bpmn.json
+ * bpmn因为是默认基于xml格式的，其特点与json存在差异。
+ * 1) 如果是xml的属性，json中属性用'-'开头
+ * 2）如果只有一个子元素，json中表示为正常属性
+ * 3）如果是多个子元素，json中使用数组存储
+ */
+function convertLf2ProcessData(
+  bpmnProcessData,
+  data,
+  retainedFields?: string[],
+) {
+  const nodeMap = new Map()
+  data.nodes.forEach((node: NodeConfig) => {
+    const processNode = {
+      '-id': node.id, // 如果是xml的属性，json中属性用'-'开头
+    }
+    if (node.text?.value) {
+      processNode['-name'] = node.text.value
+    }
+    if (node.properties) {
+      const properties = toXmlJson(retainedFields)(node.properties)
+      Object.assign(processNode, properties)
+    }
+    nodeMap.set(node.id, processNode)
+
+    if (!bpmnProcessData[node.type]) {
+      bpmnProcessData[node.type] = processNode // 如果只有一个子元素，json中表示为正常属性
+    } else if (Array.isArray(bpmnProcessData[node.type])) {
+      // 如果是多个子元素，json中使用数组存储
+      bpmnProcessData[node.type].push(processNode)
+    } else {
+      // 如果是多个子元素，json中使用数组存储
+      bpmnProcessData[node.type] = [bpmnProcessData[node.type], processNode]
+    }
+  })
+  const sequenceFlow = data.edges.map((edge: EdgeConfig) => {
+    const targetNode = nodeMap.get(edge.targetNodeId)
+    if (!targetNode['bpmn:incoming']) {
+      targetNode['bpmn:incoming'] = edge.id
+    } else if (Array.isArray(targetNode['bpmn:incoming'])) {
+      targetNode['bpmn:incoming'].push(edge.id)
+    } else {
+      targetNode['bpmn:incoming'] = [targetNode['bpmn:incoming'], edge.id]
+    }
+    const edgeConfig = {
+      '-id': edge.id,
+      '-sourceRef': edge.sourceNodeId,
+      '-targetRef': edge.targetNodeId,
+    }
+    if (edge.text?.value) {
+      edgeConfig['-name'] = edge.text?.value
+    }
+    if (edge.properties) {
+      const properties = toXmlJson(retainedFields)(edge.properties)
+      Object.assign(edgeConfig, properties)
+    }
+    return edgeConfig
+  })
+  // @see https://github.com/didi/LogicFlow/issues/325
+  // 需要保证incoming在outgoing之前
+  data.edges.forEach((edge: EdgeConfig) => {
+    const sourceNode = nodeMap.get(edge.sourceNodeId)
+    if (!sourceNode['bpmn:outgoing']) {
+      sourceNode['bpmn:outgoing'] = edge.id
+    } else if (Array.isArray(sourceNode['bpmn:outgoing'])) {
+      sourceNode['bpmn:outgoing'].push(edge.id)
+    } else {
+      // 字符串转数组
+      sourceNode['bpmn:outgoing'] = [sourceNode['bpmn:outgoing'], edge.id]
+    }
+  })
+  bpmnProcessData[BpmnElements.FLOW] = sequenceFlow
+}
+
+/**
+ * adapterOut 设置bpmn diagram信息
+ */
+function convertLf2DiagramData(bpmnDiagramData, data) {
+  bpmnDiagramData['bpmndi:BPMNEdge'] = data.edges.map((edge) => {
+    const edgeId = edge.id
+    const pointsList = edge.pointsList.map(({ x, y }) => ({
+      '-x': x,
+      '-y': y,
+    }))
+    const diagramData = {
+      '-id': `${edgeId}_di`,
+      '-bpmnElement': edgeId,
+      'di:waypoint': pointsList,
+    }
+    if (edge.text?.value) {
+      diagramData['bpmndi:BPMNLabel'] = {
+        'dc:Bounds': {
+          '-x': edge.text.x - (edge.text.value.length * 10) / 2,
+          '-y': edge.text.y - 7,
+          '-width': edge.text.value.length * 10,
+          '-height': 14,
+        },
+      }
+    }
+    return diagramData
+  })
+  bpmnDiagramData['bpmndi:BPMNShape'] = data.nodes.map((node) => {
+    const nodeId = node.id
+    let width = 100
+    let height = 80
+    let { x, y } = node
+    // bpmn坐标是基于左上角，LogicFlow基于中心点，此处处理一下。
+    const shapeConfig = BpmnAdapter.shapeConfigMap.get(node.type)
+    if (shapeConfig) {
+      width = shapeConfig.width
+      height = shapeConfig.height
+    }
+    x -= width / 2
+    y -= height / 2
+    const diagramData = {
+      '-id': `${nodeId}_di`,
+      '-bpmnElement': nodeId,
+      'dc:Bounds': {
+        '-x': x,
+        '-y': y,
+        '-width': width,
+        '-height': height,
+      },
+    }
+    if (node.text?.value) {
+      diagramData['bpmndi:BPMNLabel'] = {
+        'dc:Bounds': {
+          '-x': node.text.x - (node.text.value.length * 10) / 2,
+          '-y': node.text.y - 7,
+          '-width': node.text.value.length * 10,
+          '-height': 14,
+        },
+      }
+    }
+    return diagramData
+  })
+}
+
+/**
+ * 将bpmn数据转换为LogicFlow内部能识别数据
+ */
+function convertBpmn2LfData(bpmnData) {
+  let nodes: NodeConfig[] = []
+  let edges: EdgeConfig[] = []
+  const definitions = bpmnData['bpmn:definitions']
+  if (definitions) {
+    const process = definitions['bpmn:process']
+    Object.keys(process).forEach((key) => {
+      if (key.indexOf('bpmn:') === 0) {
+        const value = process[key]
+        if (key === BpmnElements.FLOW) {
+          const bpmnEdges =
+            definitions['bpmndi:BPMNDiagram']['bpmndi:BPMNPlane'][
+              'bpmndi:BPMNEdge'
+            ]
+          edges = getLfEdges(value, bpmnEdges)
+        } else {
+          const shapes =
+            definitions['bpmndi:BPMNDiagram']['bpmndi:BPMNPlane'][
+              'bpmndi:BPMNShape'
+            ]
+          nodes = nodes.concat(getLfNodes(value, shapes, key))
+        }
+      }
+    })
+  }
+  return {
+    nodes,
+    edges,
+  }
+}
+
+function getLfNodes(value, shapes, key) {
+  const nodes: NodeConfig[] = []
+  if (Array.isArray(value)) {
+    // 数组
+    value.forEach((val) => {
+      let shapeValue
+      if (Array.isArray(shapes)) {
+        shapeValue = shapes.find(
+          (shape) => shape['-bpmnElement'] === val['-id'],
+        )
+      } else {
+        shapeValue = shapes
+      }
+      const node = getNodeConfig(shapeValue, key, val)
+      nodes.push(node)
+    })
+  } else {
+    let shapeValue
+    if (Array.isArray(shapes)) {
+      shapeValue = shapes.find(
+        (shape) => shape['-bpmnElement'] === value['-id'],
+      )
+    } else {
+      shapeValue = shapes
+    }
+    const node = getNodeConfig(shapeValue, key, value)
+    nodes.push(node)
+  }
+  return nodes
+}
+
+function getNodeConfig(shapeValue, type, processValue) {
+  let x = Number(shapeValue['dc:Bounds']['-x'])
+  let y = Number(shapeValue['dc:Bounds']['-y'])
+  const name = processValue['-name']
+  const shapeConfig = BpmnAdapter.shapeConfigMap.get(type)
+  if (shapeConfig) {
+    x += shapeConfig.width / 2
+    y += shapeConfig.height / 2
+  }
+  let properties
+  // 判断是否存在额外的属性，将额外的属性放到properties中
+  Object.entries(processValue).forEach(([key, value]) => {
+    if (defaultAttrs.indexOf(key) === -1) {
+      if (!properties) properties = {}
+      properties[key] = value
+    }
+  })
+  if (properties) {
+    properties = toNormalJson(properties)
+  }
+  let text
+  if (name) {
+    text = {
+      x,
+      y,
+      value: name,
+    }
+    // 自定义文本位置
+    if (
+      shapeValue['bpmndi:BPMNLabel'] &&
+      shapeValue['bpmndi:BPMNLabel']['dc:Bounds']
+    ) {
+      const textBounds = shapeValue['bpmndi:BPMNLabel']['dc:Bounds']
+      text.x = Number(textBounds['-x']) + Number(textBounds['-width']) / 2
+      text.y = Number(textBounds['-y']) + Number(textBounds['-height']) / 2
+    }
+  }
+  const nodeConfig: NodeConfig = {
+    id: shapeValue['-bpmnElement'],
+    type,
+    x,
+    y,
+    properties,
+  }
+  if (text) {
+    nodeConfig.text = text
+  }
+  return nodeConfig
+}
+
+function getLfEdges(value, bpmnEdges) {
+  const edges: EdgeConfig[] = []
+  if (Array.isArray(value)) {
+    value.forEach((val) => {
+      let edgeValue
+      if (Array.isArray(bpmnEdges)) {
+        edgeValue = bpmnEdges.find(
+          (edge) => edge['-bpmnElement'] === val['-id'],
+        )
+      } else {
+        edgeValue = bpmnEdges
+      }
+      edges.push(getEdgeConfig(edgeValue, val))
+    })
+  } else {
+    let edgeValue
+    if (Array.isArray(bpmnEdges)) {
+      edgeValue = bpmnEdges.find(
+        (edge) => edge['-bpmnElement'] === value['-id'],
+      )
+    } else {
+      edgeValue = bpmnEdges
+    }
+    edges.push(getEdgeConfig(edgeValue, value))
+  }
+  return edges
+}
+
+function getEdgeConfig(edgeValue, processValue): EdgeConfig {
+  let text
+  const textVal = processValue['-name']
+  if (textVal) {
+    const textBounds = edgeValue['bpmndi:BPMNLabel']['dc:Bounds']
+    // 如果边文本换行，则其偏移量应该是最长一行的位置
+    let textLength = 0
+    textVal.split('\n').forEach((textSpan) => {
+      if (textLength < textSpan.length) {
+        textLength = textSpan.length
+      }
+    })
+
+    text = {
+      value: textVal,
+      x: Number(textBounds['-x']) + (textLength * 10) / 2,
+      y: Number(textBounds['-y']) + 7,
+    }
+  }
+  let properties
+  // 判断是否存在额外的属性，将额外的属性放到properties中
+  Object.entries(processValue).forEach(([key, value]) => {
+    if (defaultAttrs.indexOf(key) === -1) {
+      if (!properties) properties = {}
+      properties[key] = value
+    }
+  })
+  if (properties) {
+    properties = toNormalJson(properties)
+  }
+  const edge: EdgeConfig = {
+    id: processValue['-id'],
+    type: BpmnElements.FLOW,
+    pointsList: edgeValue['di:waypoint'].map((point) => ({
+      x: Number(point['-x']),
+      y: Number(point['-y']),
+    })),
+    sourceNodeId: processValue['-sourceRef'],
+    targetNodeId: processValue['-targetRef'],
+    properties,
+  }
+  if (text) {
+    edge.text = text
+  }
+  return edge
+}
+
+class BpmnAdapter {
+  static pluginName = 'bpmn-adapter'
+  static shapeConfigMap = new Map()
+  processAttributes: {
+    ['-isExecutable']: string
+    ['-id']: string
+  }
+  definitionAttributes: {
+    ['-id']: string
+    ['-xmlns:xsi']: string
+    ['-xmlns:bpmn']: string
+    ['-xmlns:bpmndi']: string
+    ['-xmlns:dc']: string
+    ['-xmlns:di']: string
+    ['-targetNamespace']: string
+    ['-exporter']: string
+    ['-exporterVersion']: string
+    [key: string]: any
+  }
+
+  constructor({ lf }) {
+    lf.adapterIn = (data) => this.adapterIn(data)
+    lf.adapterOut = (data, retainedFields?: string[]) =>
+      this.adapterOut(data, retainedFields)
+    this.processAttributes = {
+      '-isExecutable': 'true',
+      '-id': `Process_${getBpmnId()}`,
+    }
+    this.definitionAttributes = {
+      '-id': `Definitions_${getBpmnId()}`,
+      '-xmlns:xsi': 'http://www.w3.org/2001/XMLSchema-instance',
+      '-xmlns:bpmn': 'http://www.omg.org/spec/BPMN/20100524/MODEL',
+      '-xmlns:bpmndi': 'http://www.omg.org/spec/BPMN/20100524/DI',
+      '-xmlns:dc': 'http://www.omg.org/spec/DD/20100524/DC',
+      '-xmlns:di': 'http://www.omg.org/spec/DD/20100524/DI',
+      '-targetNamespace': 'http://logic-flow.org',
+      '-exporter': 'logicflow',
+      '-exporterVersion': '1.2.0',
+    }
+  }
+
+  setCustomShape(key, val) {
+    BpmnAdapter.shapeConfigMap.set(key, val)
+  }
+
+  /**
+   * @param retainedFields?: string[] (可选)属性保留字段，retainedField会和默认的defaultRetainedFields:
+   * ["properties", "startPoint", "endPoint", "pointsList"]合并，
+   * 这意味着出现在这个数组里的字段当它的值是数组或是对象时不会被视为一个节点而是一个属性。
+   */
+  adapterOut = (data, retainedFields?: string[]) => {
+    const bpmnProcessData = { ...this.processAttributes }
+    convertLf2ProcessData(bpmnProcessData, data, retainedFields)
+    const bpmnDiagramData = {
+      '-id': 'BPMNPlane_1',
+      '-bpmnElement': bpmnProcessData['-id'],
+    }
+    convertLf2DiagramData(bpmnDiagramData, data)
+    const definitions = this.definitionAttributes
+    definitions['bpmn:process'] = bpmnProcessData
+    definitions['bpmndi:BPMNDiagram'] = {
+      '-id': 'BPMNDiagram_1',
+      'bpmndi:BPMNPlane': bpmnDiagramData,
+    }
+    const bpmnData = {
+      'bpmn:definitions': definitions,
+    }
+    return bpmnData
+  }
+  adapterIn = (bpmnData) => {
+    if (bpmnData) {
+      return convertBpmn2LfData(bpmnData)
+    }
+  }
+}
+
+BpmnAdapter.shapeConfigMap.set(BpmnElements.START, {
+  width: StartEventConfig.width,
+  height: StartEventConfig.height,
+})
+BpmnAdapter.shapeConfigMap.set(BpmnElements.END, {
+  width: EndEventConfig.width,
+  height: EndEventConfig.height,
+})
+BpmnAdapter.shapeConfigMap.set(BpmnElements.GATEWAY, {
+  width: ExclusiveGatewayConfig.width,
+  height: ExclusiveGatewayConfig.height,
+})
+BpmnAdapter.shapeConfigMap.set(BpmnElements.SYSTEM, {
+  width: ServiceTaskConfig.width,
+  height: ServiceTaskConfig.height,
+})
+BpmnAdapter.shapeConfigMap.set(BpmnElements.USER, {
+  width: UserTaskConfig.width,
+  height: UserTaskConfig.height,
+})
+
+class BpmnXmlAdapter extends BpmnAdapter {
+  static pluginName = 'bpmnXmlAdapter'
+
+  constructor(data) {
+    super(data)
+    const { lf } = data
+    lf.adapterIn = this.adapterXmlIn
+    lf.adapterOut = this.adapterXmlOut
+  }
+
+  adapterXmlIn = (bpmnData) => {
+    const json = lfXml2Json(bpmnData)
+    return this.adapterIn(json)
+  }
+  adapterXmlOut = (data, retainedFields?: string[]) => {
+    const outData = this.adapterOut(data, retainedFields)
+    return lfJson2Xml(outData)
+  }
+}
+
+export { BpmnAdapter, BpmnXmlAdapter, toXmlJson, toNormalJson }
+
+export default BpmnAdapter

package/src/bpmn-adapter/json2xml.ts

@@ -0,0 +1,90 @@
+function type(obj) {
+  return Object.prototype.toString.call(obj)
+}
+
+function addSpace(depth) {
+  return '  '.repeat(depth)
+}
+
+function handleAttributes(o: any) {
+  let t = o
+  if (type(o) === '[object Object]') {
+    t = {}
+    Object.keys(o).forEach((k) => {
+      let tk = k
+      if (k.charAt(0) === '-') {
+        tk = k.substring(1)
+      }
+      t[tk] = handleAttributes(o[k])
+    })
+  } else if (Array.isArray(o)) {
+    t = []
+    o.forEach((item, index) => {
+      t[index] = handleAttributes(item)
+    })
+  }
+  return t
+}
+
+function getAttributes(obj: any) {
+  let tmp = obj
+  try {
+    if (typeof tmp !== 'string') {
+      tmp = JSON.parse(obj)
+    }
+  } catch (error) {
+    tmp = JSON.stringify(handleAttributes(obj)).replace(/"/g, "'")
+  }
+  return tmp
+}
+
+const tn = '\t\n'
+
+// @see issue https://github.com/didi/LogicFlow/issues/718, refactoring of function toXml
+function toXml(obj: string | any[] | Object, name: string, depth: number) {
+  const frontSpace = addSpace(depth)
+  let str = ''
+  if (name === '#text') {
+    return tn + frontSpace + obj
+  } else if (name === '#cdata-section') {
+    return tn + frontSpace + '<![CDATA[' + obj + ']]>'
+  } else if (name === '#comment') {
+    return tn + frontSpace + '<!--' + obj + '-->'
+  }
+  if (`${name}`.charAt(0) === '-') {
+    return ' ' + name.substring(1) + '="' + getAttributes(obj) + '"'
+  } else {
+    if (Array.isArray(obj)) {
+      obj.forEach((item) => {
+        str += toXml(item, name, depth + 1)
+      })
+    } else if (type(obj) === '[object Object]') {
+      const keys = Object.keys(obj)
+      let attributes = ''
+      let children = ''
+      str += (depth === 0 ? '' : tn + frontSpace) + '<' + name
+      keys.forEach((k) => {
+        k.charAt(0) === '-'
+          ? (attributes += toXml(obj[k], k, depth + 1))
+          : (children += toXml(obj[k], k, depth + 1))
+      })
+      str +=
+        attributes +
+        (children !== '' ? `>${children}${tn + frontSpace}</${name}>` : ' />')
+    } else {
+      str += tn + frontSpace + `<${name}>${obj.toString()}</${name}>`
+    }
+  }
+
+  return str
+}
+
+function lfJson2Xml(o: Object) {
+  let xmlStr = ''
+  for (var m in o) {
+    xmlStr += toXml(o[m], m, 0)
+  }
+  return xmlStr
+}
+
+export { lfJson2Xml, handleAttributes }