/* 基于vue2.x， 省略了template模板与部分data */
import BpmnModeler from "bpmn-js/lib/Modeler"
export default {
    methods: {
        initModeler() {
            this.bpmnModeler = new BpmnModeler({
                container: document.getElementById("bpmn-container")
            })
        }
    },
    mounted() {
        this.initModeler();
    }
}

this.bpmnModeler = new BpmnModeler(options: Options）;
interface Options {
  container: DomElement; // 渲染容器
  width：string | number；// 查看器宽度
  height: string | number； // 查看器高度
  moddleExtensions： object；// 需要用的扩展包
  modules：<didi.Module>[]; // 自定义且需要覆盖默认扩展包的模块列表
  additionalModules: <didi.Module>[]; // 自定义且与默认扩展包一起使用的模块列表
}

Modeler
  -> BaseModeler
    -> BaseViewer
      -> Diagram
        -> Object

const xxxModule = this.bpmnModeler.get("xxx"); // xxx代表扩展包名称

/**
 * 返回name对应的模块实例
 * @param { string } name 模块名
 * @param { boolean } strict 启用严格模式。false：缺少的模块解析为null返回；true：抛出异常
 */
this.bpmnModeler.get(name, strict);
// 创建空白流程图
// 内部调用了importXML方法，读取内部的默认xml字符串
this.bpmnModeler.createDiagram();
// 将图形dom挂载到目标节点
this.bpmnModeler.attachTo(parentNode);
// 清空
this.bpmnModeler.clear()
// 销毁
this.bpmnModeler.destroy()
// 脱离dom
this.bpmnModeler.detach()
// 获取流程定义
this.bpmnModeler.getDefinitions()
// 获取扩展功能模块列表
this.bpmnModeler.getModules()
/**
 * 导入解析的定义并呈现BPMN 2.0图。完成后，查看器将结果报告回给提供的回调函数（错误，警告）
 * @param { ModdleElement<Definitions> } definitions 模块名
 * @param { ModdleElement<BPMNDiagram>|string } [bpmnDiagram] 要呈现的BPMN图或图的ID（如果未提供，将呈现第一个）
 */
this.bpmnModeler.importDefinitions(definitions, bpmnDiagram)
/**
 * 导入xml（字符串形式），返回导入结果
 * 后续会取消传入回调函数的方式
 * 推荐使用async/await或者链式调用
 * @param { string } xml 流程图xml字符串
 * @param { Promise } callback 回调函数，出错时返回{ warnings，err }
 */
this.bpmnModeler.importXML(xml, callback)
// 注销事件监听器
this.bpmnModeler.off(eventName, callback)
// 注册事件监听，同名将删除以前的监听器，privorty可不传，程序会自动替换回调函数
this.bpmnModeler.on(eventName, priority, callback, target)
// em。。。不了解
this.bpmnModeler.open()
// 保存为svg文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveSVG(callback)
// 保存为xml文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveXML(callback)

import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";

import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css"; // 右边工具栏样式
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
export default {
    methods: {
        initModeler() {
            this.bpmnModeler = new BpmnModeler({
                container: document.getElementById("bpmn-container"),
                propertiesPanel: {
                  parent: "#attrs-panel"
                },
                additionalModules: [ propertiesPanelModule, propertiesProviderModule ]
            })
        }
    },
    mounted() {
        this.initModeler();
    }
}

// 1. 创建翻译文件 zh.js（命名随意），导出英文关键字对应的中文翻译
export default {
    "Append EndEvent": "追加结束事件",
    "Append Gateway": "追加网关",
    "Append Task": "追加任务",
    "Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
    ...
}
// 2. 建立翻译模块方法customTranslate.js
import translations from "./zh";
export default function customTranslate(template, replacements) {
  replacements = replacements || {};
  // Translate
  template = translations[template] || template;
  // Replace
  return template.replace(/{([^}]+)}/g, function(_, key) {
    let str = replacements[key];
    if (
      translations[replacements[key]] !== null &&
      translations[replacements[key]] !== "undefined"
    ) {
      // eslint-disable-next-line no-mixed-spaces-and-tabs
      str = translations[replacements[key]];
      // eslint-disable-next-line no-mixed-spaces-and-tabs
    }
    return str || "{" + key + "}";
  });
}
// 3. 在实例化建模器时以自定义模块的方式传入参数
import customTranslate from "./pugins/customTranslate";
export default {
  methods: {
    initModeler() {
        this.bpmnModeler = new BpmnModeler({
            container: document.getElementById("bpmn-container"),
            additionalModules: [
              { translate: ["value", customTranslate] }
            ]
        })
    }
  }
}

this.bpmnModeler = new BpmnModeler({
    container: document.getElementById("bpmn-container"),
    keyboard: {
      bindTo: document // 或者window，注意与外部表单的键盘监听事件是否冲突
    }
});

// 通过事件总线发出的事件
interface InternalEvent {
    type: string; // 发生的事件名称，但是很快会被置为undefined
    element: Shape | Connection;
    elements: Element[];
    shape: Shape;
    context: object; // 有点复杂，有兴趣的朋友可以研究
    gfx?: SVGElement;
    svg?: SVGElement;
    viewport?: SVGElement;
    viewbox?: Viewbox;
    pad?: object; // 见 Element.pad
}
interface Element {
    element: Shape | Connection;
    gfx?: SVGElement;
    pad?: {
        id: string;
        html: DOMElement;
        position: { right: number; top: number };
      scale: { max: number; min: number };
      show: object | null;
      type: string; // 一般是"context-pad"
    }
}
interface Elements {
    elements: Array<Shape | Connection>
}
interface Canvas {
    svg?: SVGElement;
    viewport?: SVGElement;
}
interface Viewbox {
  viewbox: {
        height: number;
        width: number;
        x: number;
        y: number;
        inter: object; // 包含x,y,width,height的一个对象
        outer: object; // 包含x,y,width,height的一个对象
        scale: number; // 当前缩放比例（小数）
  }
}

const ElementFactory = this.bpmnModeler.get("ElementFactory")

/**
 * 根据传入参数创建新的元素
 * type："root" | "label" | "connection" | "shape"
 * attrs?: object
 */
ElementFactory.create(type, attrs);

// attrs 非必传参数
ElementFactory.createRoot(attrs);
ElementFactory.createLabel(attrs);
ElementFactory.createConnection(attrs);
ElementFactory.createShape(attrs);

// 创建bpmn对应的模型元素
// elementType: string
// attrs?: 自定义属性
ElementFactory.createBpmnElement(elementType, attrs)
// 创建参与者
// attrs?: object 自定义属性
ElementFactory.createParticipantShape(attrs)

const ElementRegistry = this.bpmnModeler.get("ElementRegistry")

/**
 * 插入新的注册表
 * @param element：Shape | Connection
 * @param gfx: SVGElement
 * @param secondaryGfx?： SVGElement
 */
ElementRegistry.add(element, gfx, secondaryGfx);
// 移除元素
ElementRegistry.remove(element)
// 更新元素模型的id，同时触发事件'element.updateId'
ElementRegistry.updateId(element, newId)
// 获取对应id的元素模型
ElementRegistry.get(id)
// 根据传入的过滤方法返回符合条件的元素模型数组
ElementRegistry.filter(fn(element, gfx))
// 根据传入的过滤方法返回符合条件的第一个元素模型
ElementRegistry.find(fn(element, gfx))
// 返回所有已渲染的元素模型
ElementRegistry.getAll()
// 遍历所有已渲染元素模型，执行传入方法
ElementRegistry.forEach(fn(element, gfx))
/**
 * 返回对应的SVGElement
 * @param filter：string | Model id或者元素模型
 * @param secondary?: boolean = false 是否返回辅助连接的元素
 */
ElementRegistry.getGraphics(filter, secondary)

const GraphicsFactory = this.bpmnModeler.get("GraphicsFactory")

/**
 * 返回创建后的SVGElement
 * @param type："shape" | "connection" 元素类型
 * @param element?: SVGElement
 * @param parentIndex?: number 位置
 */
GraphicsFactory.create(type, element, parentIndex)
// 绘制节点，触发"render.shape"
GraphicsFactory.drawShape(visual, element)
// 获取元素的尺寸等，触发"render.getShapePath"
GraphicsFactory.getShapePath(element)
// 绘制连线，触发"render.connection"
GraphicsFactory.drawConnection(visual, element)
// 获取连线的尺寸等，触发"render.getConnectionPath"
GraphicsFactory.getConnectionPath(waypoints)
// 更新元素显示效果(element.type只允许"shape"或者"connaction")
GraphicsFactory.update(element)
GraphicsFactory.remove(element)

const Canvas = this.bpmnModeler.get("Canvas")

/**
 * 画布初始化，根据config配置为svg元素创建一个div class="djs-container"的父容器。并挂载到制定的dom节点上
 * 并在这个div节点下创建一个svg元素，挂载后面所有节点
 * 之后触发"diagram.init"与"canvas.init"
 * 同时注册'shape.added', 'connection.added', 'shape.removed', 'connection.removed', 'elements.changed', 'diagram.destroy', 'diagram.clear'
 * config: object 默认继承实例化BpmnModeler的配置
 */
Canvas._init(config)
/**
 * 画布销毁
 * 触发"canvas.destroy"
 * 删除Canvas内部属性，并移除初始化时声称的dom节点
 */
Canvas._destroy()
/**
 * 按类型创建新的元素对象, 同时触发对应的"[shape | connection].add"和"[shape | connection].added"事件，返回创建的元素对象(衍生的addShape，addConnection方法)
 * @param type: "shape" | "connection" 元素类型
 * @param element: object | djs.model
 * @param parent?: object | djs.model 父元素，默认为根元素对象
 * @param parentIndex?: number 
 * @return element: object | djs.model
 */
Canvas._addElement(type, element, parent, parentIndex)
/**
 * 移除对应的元素, 同时触发对应的"[shape | connection].remove"和"[shape | connection].removed"事件，返回被删除的元素对象(衍生的addShape，addConnection方法)
 * @param type: "shape" | "connection" 元素类型
 * @param element: object | djs.model
 * @param parent?: object | djs.model 父元素，默认为根元素对象
 * @param parentIndex?: number 
 * @return element: object | djs.model
 */
Canvas._removeElement(element, type)

// 返回最上层的SVGElement
Canvas.getDefaultLayer()
// 返回用于在其上绘制元素或注释的图层(这个不怎么理解。。。)
Canvas.getLayer(name, index)
// 返回包含画布的Dom节点
Canvas.getContainer()
/**
 * 将标记更新包element上(基本上是css类)，同时触发"element.marker.update", 无返回值
 * @param element：Shape | Connaction | string(元素id)
 * @param marker: string
 */
canvas.addMarker(element, marker)
/**
 * 移除元素上的标记，同时触发"element.marker.update", 无返回值
 * @param element：Shape | Connaction | string(元素id)
 * @param marker: string
 */
canvas.removeMarker(element, marker)
/**
 * 检测元素是否具有某个标记
 * @param element：Shape | Connaction | string(元素id)
 * @param marker: string
 * @return status: boolean
 */
Canvas.hasMarker(element, marker)
/**
 * 切换元素的标记状态，存在即remove，不存在则add
 * @param element：Shape | Connaction | string(元素id)
 * @param marker: string
 */
Canvas.toggleMarker(element, marker)
/**
 * 返回画布的根元素
 * @return element: Object|djs.model
 */
Canvas.getRootElement()
/**
 * 设置新的画布的根元素，返回新的根元素
 * @param element：object | djs.model
 * @param override: boolean 是否要覆盖以前的根元素
 * @return element: Object|djs.model
 */
Canvas.setRootElement(element, override)
/**
 * 添加新的节点（形状）图形元素
 * @param shape: object | djs.model 插入的元素model或者属性配置对象
 * @param parent?: djs.model 父元素，默认根节点（画布下第一级SVG | Root）
 * @param parentIndex?: number 
 * @return Element: djs.model
 */
Canvas.addShape(shape, parent, parentIndex)
/**
 * 添加新的连线元素
 * @param Connaction: object | djs.model 插入的元素model或者属性配置对象
 * @param parent?: djs.model 父元素，默认根节点（画布下第一级SVG | Root）
 * @param parentIndex?: number 
 * @return Element: djs.model
 */
Canvas.addConnection(Connaction, parent, parentIndex)
/**
 * 移除节点元素, 返回被移除的节点
 * @param shape： string | djs.model 节点id或者model
 * @return element: djs.model
 */
Canvas.removeShape(shape)
/**
 * 移除连线元素, 返回被移除的对象
 * @param shape： string | djs.model 节点id或者model
 * @return element: djs.model
 */
Canvas.removeConnaction(connection)
/**
 * 查询图形元素的SVGElement，即 ElementRegistry.getGraphics()方法。
 * @param shape： string | djs.model 节点id或者model
 * @param secondary?： boolean 
 * @return element: SVGElement
 */
Canvas.getGraphics(element, secondary)
/**
 * 获取或者设置新的画布的视图框。该方法的getter可能会返回一个缓存中的viewbox（如果当前时刻视图正在发生改变）
 * 如果要强制重新计算，请先执行Canvas.viewbox(false)
 * @param box: Box 新的视图框配置
 * @param box.x: number = 0 视图框可见的画布区域在x轴坐标（原点左上角）
 * @param box.y: number = 0 视图框可见的画布区域在y轴坐标（原点左上角）
 * @param box.width: number 视图框可见宽度
 * @param box.height: number 视图框可见高度
 * @return box 当前视图区域
 */
Canvas.viewbox(box)
/**
 * 具有滚动条时调整滚动位置
 * @param delta：Delta 新的滚动位置
 * @param delta.dx：number x轴方向的位移大小
 * @param delta.dy：number y轴方向的位移大小
 * @return
 */
Canvas.scroll(delta)
/**
 * 设置新的缩放比例或者中心位置，返回当前的缩放比例
 * @param newScale?： number 新的缩放比例
 * @param center?： Point | "auto" | null
 * @param center.x: number
 * @param center.y: number
 * @return scale: number
 */
Canvas.zoom(newScale, center)
// 主动触发"canvas.resized"事件
Canvas.resized()
// 返回画布元素的大小
Canvas.getSize()
// 返回画布的绝对边界
// @return BBox {
//    x: x;
//    y: y;
//    width: width;
//    height: height;
// }
Canvas.getAbsoluteBBox()

const EventBus = this.bpmnModeler.get("eventBus");

/**
 * 注册事件监听器
 * @param events: string | string[] 事件名称（s）
 * @param priority?: number 优先级，默认1000
 * @param callback: Function 回调函数
 * @param that?: object 上下文中的this，会将其传递给callback
 */
EventBus.on(events, priority, callback, that)
/**
 * 注册只执行一次的事件监听器
 * @param events: string | string[] 事件名称（s）
 * @param priority?: number 优先级，默认1000
 * @param callback: Function 回调函数
 * @param that?: object 上下文中的this，会将其传递给callback
 */
EventBus.once(events, priority, callback, that)
/**
 * 关闭、删除事件监听器
 * @param events
 * @param callback
 */
EventBus.off(events, callback)
/**
 * 创建一个可以让EventBus识别的事件，并返回这个事件
 * @param data: object
 * @return event: object
 */
EventBus.createEvent(data)
/**
 * 主动触发事件
 * @param type: string | object 事件名称/嵌套事件名称的对象（{type： string}）
 * @param data: any 传递给回调函数的参数 
 * @return status: boolean | any 事件返回值（如果指定）；如果侦听器阻止了默认操作，则返回false
 */
EventBus.fire(type, data)

/**
 * A event that is emitted via the event bus.
 */
function InternalEvent() { }
// 阻止事件传播给其他接收者
InternalEvent.prototype.stopPropagation = function() {
  this.cancelBubble = true;
};
// 阻止事件的默认结果
InternalEvent.prototype.preventDefault = function() {
  this.defaultPrevented = true;
};
InternalEvent.prototype.init = function(data) {
  assign(this, data || {});
};

EventBus.on("foo", function(event) {
    console.log(event.type) // "foo"
    event.stopPropagation(); // 停止事件继续传播
    event.preventDefault(); // 阻止事件原来的返回值，返回false
})
// 传入自定义信息
const payload = { fooPayload: "foo" }
EventBus.on("foo", function(event, payload) {
    console.log(payload) // { fooPayload: "foo" }
})