@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/tools/snapshot/utils.ts

@@ -1,163 +0,0 @@
-/**
- * 图片缓存, 已请求过的图片直接从缓存中获取
- */
-const imageCache: Record<string, string> = {}
-
-/**
- * 当获取图片失败时会返回失败信息，是 text/plain 类型的数据
- * @param str - 图片内容
- * @returns
- */
-export function isTextPlainBase64(str: string) {
-  return str.startsWith('data:text/plain')
-}
-
-/**
- * 将网络图片转为 base64
- * @param url - 图片地址
- * @returns
- */
-export async function convertImageToBase64(url: string): Promise<string> {
-  if (imageCache[url]) {
-    return imageCache[url]
-  }
-  return new Promise((resolve, reject) => {
-    try {
-      fetch(url)
-        .then((response) => response.blob())
-        .then((blob) => {
-          const reader = new FileReader()
-          reader.onloadend = () => {
-            resolve((imageCache[url] = reader.result as string))
-          }
-          reader.onerror = reject
-          reader.readAsDataURL(blob)
-        })
-        .catch(() => {
-          resolve((imageCache[url] = url))
-        })
-    } catch (error) {
-      // 如果转换失败，后续大概率仍然会失败，因此直接缓存
-      return (imageCache[url] = url)
-    }
-  })
-}
-
-/**
- * 使用 base64 的图片替换 img 标签的 src 或 image 标签的 href
- * @param node - html 节点或 svg 节点
- */
-export async function updateImageSrcOrHrefWithBase64Image(
-  node: HTMLImageElement | SVGImageElement,
-  attrName: 'src' | 'href',
-) {
-  try {
-    const url = node.getAttribute(attrName) || ''
-    // 已经是 base64 图片，不需要处理
-    if (url.startsWith('data:')) {
-      return
-    }
-    const base64Image = await convertImageToBase64(url)
-    if (isTextPlainBase64(base64Image)) {
-      return
-    }
-    node.setAttribute(attrName, base64Image)
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-/**
- * 使用 base64 的图片替换背景图片
- * @param node - html 节点
- * @param styleAttr - 样式属性名称
- */
-export async function updateBackgroundImageWithBase64Image(
-  node: HTMLElement,
-  url: string,
-) {
-  try {
-    // 已经是 base64 图片，不需要处理
-    if (url.startsWith('data:')) {
-      return
-    }
-    const base64Image = await convertImageToBase64(url)
-    if (isTextPlainBase64(base64Image)) {
-      return
-    }
-    node.style.backgroundImage = `url(${base64Image})`
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-/**
- * 更新图片数据
- * @param node - 节点
- */
-export async function updateImageSource(node: HTMLElement | SVGElement) {
-  const nodes = [node]
-  let nodePtr
-  const promises: any[] = []
-  while (nodes.length) {
-    nodePtr = nodes.shift()
-    if (nodePtr.children.length) {
-      nodes.push(...nodePtr.children)
-    }
-    if (nodePtr instanceof HTMLElement) {
-      // 如果有 style 的 background, backgroundImage 属性中有 url(xxx), 尝试替换为 base64 图片
-      const { background, backgroundImage } = nodePtr.style
-      const backgroundUrlMatch = background.match(/url\(["']?(.*?)["']?\)/)
-      if (backgroundUrlMatch && backgroundUrlMatch[1]) {
-        const imageUrl = backgroundUrlMatch[1]
-        promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl))
-      }
-      const backgroundImageUrlMatch = backgroundImage.match(
-        /url\(["']?(.*?)["']?\)/,
-      )
-      if (backgroundImageUrlMatch && backgroundImageUrlMatch[1]) {
-        const imageUrl = backgroundImageUrlMatch[1]
-        promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl))
-      }
-    }
-    // 如果有 img 和 image 标签，尝试将 src 和 href 替换为 base64 图片
-    if (nodePtr instanceof HTMLImageElement) {
-      promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'src'))
-    } else if (nodePtr instanceof SVGImageElement) {
-      promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'href'))
-    }
-  }
-  await Promise.all(promises)
-}
-
-/**
- * 重新复制canvas 用于在不裁剪原canvas的基础上通过拉伸方式达到自定义宽高目的
- * @param originCanvas HTMLCanvasElement
- * @param targetWidth number
- * @param targetHeight number
- */
-export function copyCanvas(
-  originCanvas: HTMLCanvasElement,
-  targetWidth: number,
-  targetHeight: number,
-): HTMLCanvasElement {
-  const newCanvas = document.createElement('canvas')
-  newCanvas.width = targetWidth
-  newCanvas.height = targetHeight
-  const newCtx = newCanvas.getContext('2d')
-  if (newCtx) {
-    // 注意: 自定义宽高时，可能会拉伸图形，这时候padding也会被拉伸导致不准确
-    newCtx.drawImage(
-      originCanvas,
-      0,
-      0,
-      originCanvas.width,
-      originCanvas.height,
-      0,
-      0,
-      targetWidth,
-      targetHeight,
-    )
-  }
-  return newCanvas
-}

package/src/turbo-adapter/index.ts

@@ -1,212 +0,0 @@
-const TurboType = {
-  SEQUENCE_FLOW: 1,
-  START_EVENT: 2,
-  END_EVENT: 3,
-  USER_TASK: 4,
-  // SERVICE_TASK = 5, 暂不支持
-  EXCLUSIVE_GATEWAY: 6,
-}
-
-const TurboTypeMap = {
-  1: 'bpmn:sequenceFlow',
-  2: 'bpmn:startEvent',
-  3: 'bpmn:endEvent',
-  4: 'bpmn:userTask',
-  6: 'bpmn:exclusiveGateway',
-}
-
-// 转换Turbo识别的类型
-function getTurboType(type) {
-  switch (type) {
-    case 'bpmn:sequenceFlow':
-      return TurboType.SEQUENCE_FLOW
-    case 'bpmn:startEvent':
-      return TurboType.START_EVENT
-    case 'bpmn:endEvent':
-      return TurboType.END_EVENT
-    case 'bpmn:userTask':
-      return TurboType.USER_TASK
-    // case 'bpmn:serviceTask':
-    //   return TurboType.SERVICE_TASK;
-    case 'bpmn:exclusiveGateway':
-      return TurboType.EXCLUSIVE_GATEWAY
-    default:
-      return type
-  }
-}
-
-// 将LogicFlow中的Node数据转换为Turbo元素数据
-function convertNodeToTurboElement(node) {
-  const { id, type, x, y, text = '', properties } = node
-  return {
-    incoming: [],
-    outgoing: [],
-    dockers: [],
-    type: getTurboType(type),
-    properties: {
-      ...properties,
-      name: (text && text.value) || '',
-      x,
-      y,
-      text,
-    },
-    key: id,
-  }
-}
-
-// 将LogicFlow中的Edge数据转换为Turbo元素数据
-function convertEdgeToTurboElement(edge) {
-  const {
-    id,
-    type,
-    sourceNodeId,
-    targetNodeId,
-    startPoint,
-    endPoint,
-    pointsList,
-    text = '',
-    properties,
-  } = edge
-  return {
-    incoming: [sourceNodeId],
-    outgoing: [targetNodeId],
-    type: getTurboType(type),
-    dockers: [],
-    properties: {
-      ...properties,
-      name: (text && text.value) || '',
-      text,
-      startPoint: JSON.stringify(startPoint),
-      endPoint: JSON.stringify(endPoint),
-      pointsList: JSON.stringify(pointsList),
-    },
-    key: id,
-  }
-}
-
-// 将LogicFlow中数据转换为Turbo数据
-export function toTurboData(data) {
-  const nodeMap = new Map()
-  const turboData: any = {
-    // TODO: 定义类型
-    flowElementList: [],
-  }
-  data.nodes.forEach((node) => {
-    const flowElement = convertNodeToTurboElement(node)
-    turboData.flowElementList.push(flowElement)
-    nodeMap.set(node.id, flowElement)
-  })
-  data.edges.forEach((edge) => {
-    const flowElement = convertEdgeToTurboElement(edge)
-    const sourceElement = nodeMap.get(edge.sourceNodeId)
-    sourceElement.outgoing.push(flowElement.key)
-    const targetElement = nodeMap.get(edge.targetNodeId)
-    targetElement.incoming.push(flowElement.key)
-    turboData.flowElementList.push(flowElement)
-  })
-  return turboData
-}
-
-// 将Turbo元素数据转换为LogicFlow中的Edge数据
-function convertFlowElementToEdge(element) {
-  const { incoming, outgoing, properties, key, type } = element
-  const { text, name, startPoint, endPoint, pointsList } = properties
-  const edge: Record<string, any> = {
-    id: key,
-    type: TurboTypeMap[type],
-    sourceNodeId: incoming[0],
-    targetNodeId: outgoing[0],
-    text: text || name,
-    properties: {},
-  }
-  if (startPoint) {
-    edge.startPoint = JSON.parse(startPoint)
-  }
-  if (endPoint) {
-    edge.endPoint = JSON.parse(endPoint)
-  }
-  if (pointsList) {
-    edge.pointsList = JSON.parse(pointsList)
-  }
-  // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
-  const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text']
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      edge.properties[property] = element.properties[property]
-    }
-  })
-  return edge
-}
-
-// 将Turbo元素数据转换为LogicFlow中的Node数据
-function convertFlowElementToNode(element) {
-  const { properties, key, type, bounds } = element
-  let { x, y } = properties
-  const { text } = properties
-  if (x === undefined) {
-    const [{ x: x1, y: y1 }, { x: x2, y: y2 }] = bounds
-    x = (x1 + x2) / 2
-    y = (y1 + y2) / 2
-  }
-  const node = {
-    id: key,
-    type: TurboTypeMap[type],
-    x,
-    y,
-    text,
-    properties: {},
-  }
-  // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
-  const excludeProperties = ['x', 'y', 'text']
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      node.properties[property] = element.properties[property]
-    }
-  })
-  return node
-}
-
-// 将Turbo元素数据转换为LogicFlow数据
-export function toLogicflowData(data) {
-  const lfData: any = {
-    // TODO: 定义类型
-    nodes: [],
-    edges: [],
-  }
-  const list = data.flowElementList
-  list &&
-    list.length > 0 &&
-    list.forEach((element) => {
-      if (element.type === TurboType.SEQUENCE_FLOW) {
-        const edge = convertFlowElementToEdge(element)
-        lfData.edges.push(edge)
-      } else {
-        const node = convertFlowElementToNode(element)
-        lfData.nodes.push(node)
-      }
-    })
-  return lfData
-}
-
-class TurboAdapter {
-  static pluginName = 'turboAdapter'
-
-  constructor({ lf }) {
-    lf.adapterIn = this.adapterIn
-    lf.adapterOut = this.adapterOut
-  }
-
-  adapterOut(logicflowData) {
-    if (logicflowData) {
-      return toTurboData(logicflowData)
-    }
-  }
-
-  adapterIn(turboData) {
-    if (turboData) {
-      return toLogicflowData(turboData)
-    }
-  }
-}
-
-export default TurboAdapter