From 8a3ebc76e83231ac1a015a34be2ae575bd75ad64 Mon Sep 17 00:00:00 2001 From: LiuHao Date: Mon, 22 Jan 2024 16:03:39 +0800 Subject: [PATCH] =?UTF-8?q?update=20=20=E4=BF=AE=E6=94=B9=E5=91=BD?= =?UTF-8?q?=E5=90=8D=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...rovider.ts => CustomContextPadProvider.ts} | 5 +- .../assets/module/ContextPad/index.ts | 10 ++-- ...ehPalentte.ts => CustomPaletteProvider.ts} | 0 .../BpmnDesign/assets/module/Palette/index.ts | 10 ++-- .../assets/module/Renderer/CustomRenderer.ts | 49 +++++++++++++++++++ .../assets/module/Renderer/index.ts | 9 ++++ .../BpmnDesign/assets/module/index.ts | 10 ++-- src/components/BpmnDesign/index.vue | 2 +- 8 files changed, 78 insertions(+), 17 deletions(-) rename src/components/BpmnDesign/assets/module/ContextPad/{ehContextPadProvider.ts => CustomContextPadProvider.ts} (97%) rename src/components/BpmnDesign/assets/module/Palette/{ehPalentte.ts => CustomPaletteProvider.ts} (100%) create mode 100644 src/components/BpmnDesign/assets/module/Renderer/CustomRenderer.ts create mode 100644 src/components/BpmnDesign/assets/module/Renderer/index.ts diff --git a/src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts b/src/components/BpmnDesign/assets/module/ContextPad/CustomContextPadProvider.ts similarity index 97% rename from src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts rename to src/components/BpmnDesign/assets/module/ContextPad/CustomContextPadProvider.ts index 528ba0e..9f12ff2 100644 --- a/src/components/BpmnDesign/assets/module/ContextPad/ehContextPadProvider.ts +++ b/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; diff --git a/src/components/BpmnDesign/assets/module/ContextPad/index.ts b/src/components/BpmnDesign/assets/module/ContextPad/index.ts index f42ae0d..67e4931 100644 --- a/src/components/BpmnDesign/assets/module/ContextPad/index.ts +++ b/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 = { - __init__: ['enhancementContextPadProvider'], - enhancementContextPadProvider: ['type', enhancementContextPadProvider] +const CustomContextPad: ModuleDeclaration = { + __init__: ['customContextPadProvider'], + customContextPadProvider: ['type', CustomContextPadProvider] }; -export default enhancementContextPad; +export default CustomContextPad; diff --git a/src/components/BpmnDesign/assets/module/Palette/ehPalentte.ts b/src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts similarity index 100% rename from src/components/BpmnDesign/assets/module/Palette/ehPalentte.ts rename to src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts diff --git a/src/components/BpmnDesign/assets/module/Palette/index.ts b/src/components/BpmnDesign/assets/module/Palette/index.ts index 5c69bc2..7e6a665 100644 --- a/src/components/BpmnDesign/assets/module/Palette/index.ts +++ b/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 = { - __init__: ['enhancementPaletteProvider'], - enhancementPaletteProvider: ['type', enhancementPaletteProvider] +const CustomPalette: ModuleDeclaration = { + __init__: ['CustomPaletteProvider'], + CustomPaletteProvider: ['type', CustomPaletteProvider] }; -export default EnhancementPalette; +export default CustomPalette; diff --git a/src/components/BpmnDesign/assets/module/Renderer/CustomRenderer.ts b/src/components/BpmnDesign/assets/module/Renderer/CustomRenderer.ts new file mode 100644 index 0000000..e9d8d0f --- /dev/null +++ b/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); + } +} diff --git a/src/components/BpmnDesign/assets/module/Renderer/index.ts b/src/components/BpmnDesign/assets/module/Renderer/index.ts new file mode 100644 index 0000000..8731c96 --- /dev/null +++ b/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; diff --git a/src/components/BpmnDesign/assets/module/index.ts b/src/components/BpmnDesign/assets/module/index.ts index 5188322..f805766 100644 --- a/src/components/BpmnDesign/assets/module/index.ts +++ b/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; diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue index 82c538f..0da7ac6 100644 --- a/src/components/BpmnDesign/index.vue +++ b/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