ilead-ibpmp-design-new/package/common/CustomRenderer.js

基于 `vue` 和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器

import inherits from 'inherits'

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'

import {
  append as svgAppend,
  create as svgCreate
} from 'tiny-svg'

import { customElements, customConfig } from './util'

export default function CustomRenderer(eventBus, styles, bpmnRenderer) {
  BaseRenderer.call(this, eventBus, 2000)

  // var computeStyle = styles.computeStyle

  this.drawCustomElements = function(parentNode, element) {
    const type = element.type // 获取到类型
    if (customElements.includes(type)) { // or customConfig[type]
      const { url, attr } = customConfig[type]
      const customIcon = svgCreate('image', {
        ...attr,
        href: url
      })
      // 元素真实的宽和高
      element['width'] = attr.width
      element['height'] = attr.height
      // 移除元素初始形状
      svgAppend(parentNode, customIcon)
      return customIcon
    }
    const shape = bpmnRenderer.drawShape(parentNode, element)
    return shape
  }
}

inherits(CustomRenderer, BaseRenderer)

CustomRenderer.$inject = ['eventBus', 'styles', 'bpmnRenderer']

CustomRenderer.prototype.canRender = function(element) {
  // ignore labels
  return !element.labelTarget
}

CustomRenderer.prototype.drawShape = function(p, element) {
  return this.drawCustomElements(p, element)
}

CustomRenderer.prototype.getShapePath = function(shape) {}