update 修改命名，增加自定义渲染

src/components/BpmnDesign/assets/module/ContextPad/CustomContextPadProvider.ts

@@ -15,7 +15,7 @@ import modeler from '@/store/modules/modeler';
 
 // @Description: 增强元素连线事件
 
-class EhContextPadProvider extends ContextPadProvider {
+class CustomContextPadProvider extends ContextPadProvider {
   private _contextPad: ContextPad;
   private _modeling: Modeling;
   private _elementFactory: ElementFactory;
@@ -40,6 +40,7 @@ class EhContextPadProvider extends ContextPadProvider {
     rules: Rules,
     translate
   ) {
+    // @ts-ignore
     super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate);
 
     this._contextPad = contextPad;
@@ -134,4 +135,4 @@ class EhContextPadProvider extends ContextPadProvider {
   }
 }
 
-export default EhContextPadProvider;
+export default CustomContextPadProvider;

src/components/BpmnDesign/assets/module/ContextPad/index.ts

@@ -1,9 +1,9 @@
 import { ModuleDeclaration } from 'didi';
-import enhancementContextPadProvider from './ehContextPadProvider';
+import CustomContextPadProvider from './CustomContextPadProvider';
 
-const enhancementContextPad: ModuleDeclaration = {
+const CustomContextPad: ModuleDeclaration = {
-  __init__: ['enhancementContextPadProvider'],
+  __init__: ['customContextPadProvider'],
-  enhancementContextPadProvider: ['type', enhancementContextPadProvider]
+  customContextPadProvider: ['type', CustomContextPadProvider]
 };
 
-export default enhancementContextPad;
+export default CustomContextPad;

src/components/BpmnDesign/assets/module/Palette/index.ts

@@ -1,9 +1,9 @@
 import { ModuleDeclaration } from 'didi';
-import enhancementPaletteProvider from './ehPalentte';
+import CustomPaletteProvider from './CustomPaletteProvider';
 
-const EnhancementPalette: ModuleDeclaration = {
+const CustomPalette: ModuleDeclaration = {
-  __init__: ['enhancementPaletteProvider'],
+  __init__: ['CustomPaletteProvider'],
-  enhancementPaletteProvider: ['type', enhancementPaletteProvider]
+  CustomPaletteProvider: ['type', CustomPaletteProvider]
 };
 
-export default EnhancementPalette;
+export default CustomPalette;

src/components/BpmnDesign/assets/module/Renderer/CustomRenderer.ts

@@ -0,0 +1,49 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+import {
+  append as svgAppend,
+  attr as svgAttr,
+  create as svgCreate,
+  select as svgSelect,
+  selectAll as svgSelectAll,
+  clone as svgClone,
+  clear as svgClear,
+  remove as svgRemove
+} from 'tiny-svg';
+import logo from '@/assets/logo/logo.png';
+import { Shape } from 'diagram-js/lib/model/Types';
+
+const HIGH_PRIORITY = 1500;
+export default class CustomRenderer extends BaseRenderer {
+  bpmnRenderer: BaseRenderer;
+  modeling: any;
+  constructor(eventBus, bpmnRenderer, modeling) {
+    super(eventBus, HIGH_PRIORITY);
+    this.bpmnRenderer = bpmnRenderer;
+    this.modeling = modeling;
+  }
+  canRender(element: Shape) {
+    // ignore labels
+    return !element.labelTarget;
+  }
+
+  /**
+   * 自定义节点图形
+   * @param {*} parentNode 当前元素的svgNode
+   * @param {*} element
+   * @returns
+   */
+  drawShape(parentNode, element: Shape) {
+    const shape = this.bpmnRenderer.drawShape(parentNode, element);
+    const { type, width, height } = element;
+    // 开始 填充绿色
+    if (type === 'bpmn:StartEvent') {
+      svgAttr(shape, { fill: 'green' });
+      return shape;
+    }
+    return shape;
+  }
+
+  getShapePath(shape) {
+    return this.bpmnRenderer.getShapePath(shape);
+  }
+}

src/components/BpmnDesign/assets/module/Renderer/index.ts

@@ -0,0 +1,9 @@
+import CustomRenderer from './CustomRenderer';
+import { ModuleDeclaration } from 'didi';
+
+const customRenderer: ModuleDeclaration = {
+  __init__: ['customRenderer'],
+  customRenderer: ['type', CustomRenderer]
+};
+
+export default customRenderer;

src/components/BpmnDesign/assets/module/index.ts

@@ -1,10 +1,12 @@
 // 扩展左侧选择面板
-import EnhancementPaletteProvider from './Palette';
+import CustomPalette from './Palette';
 // 扩展节点右键
-import EnhancementContextPad from './ContextPad';
+import CustomContextPad from './ContextPad';
+// 扩展渲染
+import CustomRenderer from './Renderer';
 // 翻译模块
 import TranslationModule from './Translate';
-
 import { ModuleDeclaration } from 'didi';
-const Module: ModuleDeclaration[] = [EnhancementPaletteProvider, EnhancementContextPad, TranslationModule];
+
+const Module: ModuleDeclaration[] = [CustomPalette, CustomContextPad, TranslationModule, CustomRenderer];
 export default Module;

src/components/BpmnDesign/index.vue

@@ -131,7 +131,7 @@ const initCanvas = () => {
     container: canvas.value,
     // 键盘
     keyboard: {
-      bindTo: document // 或者window，注意与外部表单的键盘监听事件是否冲突
+      bindTo: window // 或者window，注意与外部表单的键盘监听事件是否冲突
     },
     propertiesPanel: {
       parent: panel.value