@reskin/bpmn 0.0.6 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -0
- package/bundles/reskin-bpmn.umd.js +1373 -1194
- package/bundles/reskin-bpmn.umd.js.map +1 -1
- package/esm2015/public-api.js +5 -1
- package/esm2015/src/base/bpmn-base.component.js +123 -0
- package/esm2015/src/bpmn-editor/bpmn-editor.component.js +153 -169
- package/esm2015/src/bpmn-viewer/bpmn-viewer.component.js +68 -97
- package/esm2015/src/config/defaultXML.js +22 -12
- package/esm2015/src/types/bpmn.types.js +2 -0
- package/esm2015/src/utils/bpmn.utils.js +51 -0
- package/fesm2015/reskin-bpmn.js +399 -267
- package/fesm2015/reskin-bpmn.js.map +1 -1
- package/package.json +2 -1
- package/public-api.d.ts +4 -0
- package/src/base/bpmn-base.component.d.ts +61 -0
- package/src/bpmn-editor/bpmn-editor.component.d.ts +61 -68
- package/src/bpmn-viewer/bpmn-viewer.component.d.ts +26 -27
- package/src/config/defaultXML.d.ts +6 -4
- package/src/types/bpmn.types.d.ts +58 -0
- package/src/utils/bpmn.utils.d.ts +17 -0
package/fesm2015/reskin-bpmn.js
CHANGED
|
@@ -1,18 +1,140 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output,
|
|
2
|
+
import { Directive, ViewChild, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import Viewer from 'bpmn-js/lib/Viewer';
|
|
6
|
-
import minimapModule from 'diagram-js-minimap';
|
|
7
|
-
import { from } from 'rxjs';
|
|
8
|
-
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
|
9
6
|
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
|
7
|
+
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
|
8
|
+
import minimapModule from 'diagram-js-minimap';
|
|
10
9
|
import ModelingModule from 'bpmn-js/lib/features/modeling';
|
|
11
|
-
import
|
|
10
|
+
import { Subject, from } from 'rxjs';
|
|
11
|
+
import { takeUntil } from 'rxjs/operators';
|
|
12
|
+
import { __awaiter } from 'tslib';
|
|
13
|
+
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
|
12
14
|
import gridModule from 'diagram-js-grid';
|
|
13
15
|
import * as i1 from '@reskin/core/directives';
|
|
14
16
|
import { RkDirectivesModule } from '@reskin/core/directives';
|
|
15
17
|
|
|
18
|
+
/**
|
|
19
|
+
* BPMN 组件抽象基类
|
|
20
|
+
* 提供通用的缩放、重置等功能
|
|
21
|
+
*/
|
|
22
|
+
class RkBpmnBaseComponent {
|
|
23
|
+
constructor() {
|
|
24
|
+
/** 当前缩放比例 */
|
|
25
|
+
this.currentScale = 1;
|
|
26
|
+
/** 缩放配置 */
|
|
27
|
+
this.zoomConfig = {
|
|
28
|
+
scale: 0.1,
|
|
29
|
+
minScale: 0.2,
|
|
30
|
+
maxScale: 4,
|
|
31
|
+
};
|
|
32
|
+
/** 组件销毁信号 */
|
|
33
|
+
this.destroy$ = new Subject();
|
|
34
|
+
/** 是否已初始化 */
|
|
35
|
+
this.initialized = false;
|
|
36
|
+
}
|
|
37
|
+
ngOnDestroy() {
|
|
38
|
+
var _a;
|
|
39
|
+
this.destroy$.next();
|
|
40
|
+
this.destroy$.complete();
|
|
41
|
+
(_a = this.viewer) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* 获取 Canvas 实例
|
|
45
|
+
*/
|
|
46
|
+
getCanvas() {
|
|
47
|
+
var _a;
|
|
48
|
+
return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.get('canvas');
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* 放大画布
|
|
52
|
+
*/
|
|
53
|
+
zoomIn() {
|
|
54
|
+
var _a;
|
|
55
|
+
if (!this.viewer) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const newScale = this.currentScale + this.zoomConfig.scale;
|
|
59
|
+
if (newScale <= this.zoomConfig.maxScale) {
|
|
60
|
+
this.currentScale = newScale;
|
|
61
|
+
(_a = this.getCanvas()) === null || _a === void 0 ? void 0 : _a.zoom(this.currentScale);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* 缩小画布
|
|
66
|
+
*/
|
|
67
|
+
zoomOut() {
|
|
68
|
+
var _a;
|
|
69
|
+
if (!this.viewer) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
const newScale = this.currentScale - this.zoomConfig.scale;
|
|
73
|
+
if (newScale >= this.zoomConfig.minScale) {
|
|
74
|
+
this.currentScale = newScale;
|
|
75
|
+
(_a = this.getCanvas()) === null || _a === void 0 ? void 0 : _a.zoom(this.currentScale);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* 重置画布位置和缩放
|
|
80
|
+
*/
|
|
81
|
+
zoomReset() {
|
|
82
|
+
var _a;
|
|
83
|
+
if (!this.viewer) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
this.currentScale = 1;
|
|
87
|
+
(_a = this.getCanvas()) === null || _a === void 0 ? void 0 : _a.zoom('fit-viewport', { x: 0, y: 0 });
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* 设置缩放比例
|
|
91
|
+
* @param scale 缩放比例
|
|
92
|
+
*/
|
|
93
|
+
setZoom(scale) {
|
|
94
|
+
var _a;
|
|
95
|
+
if (!this.viewer) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
const clampedScale = Math.max(this.zoomConfig.minScale, Math.min(this.zoomConfig.maxScale, scale));
|
|
99
|
+
this.currentScale = clampedScale;
|
|
100
|
+
(_a = this.getCanvas()) === null || _a === void 0 ? void 0 : _a.zoom(clampedScale);
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* 获取当前缩放比例
|
|
104
|
+
*/
|
|
105
|
+
getZoom() {
|
|
106
|
+
return this.currentScale;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* 注册导入完成事件
|
|
110
|
+
* 导入完成后自动居中显示
|
|
111
|
+
*/
|
|
112
|
+
registerImportDoneEvent() {
|
|
113
|
+
var _a;
|
|
114
|
+
(_a = this.viewer) === null || _a === void 0 ? void 0 : _a.on('import.done', ({ error }) => {
|
|
115
|
+
if (!error) {
|
|
116
|
+
this.zoomReset();
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* 检查容器是否已准备好
|
|
122
|
+
*/
|
|
123
|
+
isContainerReady() {
|
|
124
|
+
var _a;
|
|
125
|
+
const rect = (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement.getBoundingClientRect();
|
|
126
|
+
return !!(rect && rect.width > 0 && rect.height > 0);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
RkBpmnBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
130
|
+
RkBpmnBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: RkBpmnBaseComponent, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0 });
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnBaseComponent, decorators: [{
|
|
132
|
+
type: Directive
|
|
133
|
+
}], propDecorators: { containerRef: [{
|
|
134
|
+
type: ViewChild,
|
|
135
|
+
args: ['container', { static: false }]
|
|
136
|
+
}] } });
|
|
137
|
+
|
|
16
138
|
/**
|
|
17
139
|
* 写英文对应的中文内容
|
|
18
140
|
*/
|
|
@@ -276,411 +398,421 @@ function customTranslate(template, replacements) {
|
|
|
276
398
|
}
|
|
277
399
|
|
|
278
400
|
/**
|
|
279
|
-
*
|
|
401
|
+
* 生成唯一 ID
|
|
402
|
+
* @returns 随机字符串
|
|
403
|
+
*/
|
|
404
|
+
function generateUid() {
|
|
405
|
+
return Math.random().toString(36).substring(2, 11);
|
|
406
|
+
}
|
|
407
|
+
/**
|
|
408
|
+
* 下载文件
|
|
409
|
+
* @param content 文件内容或 Blob URL
|
|
410
|
+
* @param filename 文件名
|
|
280
411
|
*/
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
412
|
+
function downloadFile(content, filename) {
|
|
413
|
+
let url;
|
|
414
|
+
if (content instanceof Blob) {
|
|
415
|
+
url = URL.createObjectURL(content);
|
|
416
|
+
}
|
|
417
|
+
else if (content.startsWith('blob:')) {
|
|
418
|
+
url = content;
|
|
419
|
+
}
|
|
420
|
+
else {
|
|
421
|
+
// 处理 XML 字符串
|
|
422
|
+
const encodedData = encodeURIComponent(content);
|
|
423
|
+
url = `data:application/bpmn20-xml;charset=UTF-8,${encodedData}`;
|
|
424
|
+
}
|
|
425
|
+
const link = document.createElement('a');
|
|
426
|
+
link.style.display = 'none';
|
|
427
|
+
link.href = url;
|
|
428
|
+
link.download = filename;
|
|
429
|
+
document.body.appendChild(link);
|
|
430
|
+
link.click();
|
|
431
|
+
document.body.removeChild(link);
|
|
432
|
+
// 清理 Blob URL
|
|
433
|
+
if (content instanceof Blob) {
|
|
434
|
+
setTimeout(() => URL.revokeObjectURL(url), 100);
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
/**
|
|
438
|
+
* 读取文件内容
|
|
439
|
+
* @param file 文件对象
|
|
440
|
+
* @returns Promise<string>
|
|
441
|
+
*/
|
|
442
|
+
function readFileAsText(file) {
|
|
443
|
+
return new Promise((resolve, reject) => {
|
|
444
|
+
const reader = new FileReader();
|
|
445
|
+
reader.onload = () => resolve(reader.result);
|
|
446
|
+
reader.onerror = () => reject(reader.error);
|
|
447
|
+
reader.readAsText(file, 'utf-8');
|
|
448
|
+
});
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
/**
|
|
452
|
+
* 生成默认 BPMN XML 数据
|
|
453
|
+
* @returns 默认的 BPMN XML 字符串
|
|
454
|
+
*/
|
|
455
|
+
function getDefaultBpmnXML() {
|
|
456
|
+
const processId = `Process_${generateUid()}`;
|
|
457
|
+
const diagramId = `BPMNDiagram_${generateUid()}`;
|
|
458
|
+
const planeId = `BPMNPlane_${generateUid()}`;
|
|
459
|
+
return `<?xml version="1.0" encoding="UTF-8"?>
|
|
460
|
+
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
461
|
+
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
|
462
|
+
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
|
463
|
+
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
|
464
|
+
id="Definitions_${generateUid()}"
|
|
465
|
+
targetNamespace="http://bpmn.io/schema/bpmn">
|
|
466
|
+
<bpmn:process id="${processId}" isExecutable="false" />
|
|
467
|
+
<bpmndi:BPMNDiagram id="${diagramId}">
|
|
468
|
+
<bpmndi:BPMNPlane id="${planeId}" bpmnElement="${processId}" />
|
|
287
469
|
</bpmndi:BPMNDiagram>
|
|
288
470
|
</bpmn:definitions>`;
|
|
471
|
+
}
|
|
289
472
|
/**
|
|
290
|
-
*
|
|
473
|
+
* 默认 BPMN XML 数据（向后兼容）
|
|
474
|
+
* @deprecated 请使用 getDefaultBpmnXML() 函数
|
|
291
475
|
*/
|
|
292
|
-
|
|
293
|
-
return Math.random().toString(36).substring(2);
|
|
294
|
-
}
|
|
476
|
+
const defaultBpmnData = getDefaultBpmnXML();
|
|
295
477
|
|
|
296
|
-
|
|
478
|
+
/// <reference path="../types/diagram-js.d.ts" />
|
|
479
|
+
/**
|
|
480
|
+
* BPMN 流程图查看器组件
|
|
481
|
+
* 提供只读的 BPMN 2.0 流程图查看功能
|
|
482
|
+
*/
|
|
483
|
+
class RkBpmnViewerComponent extends RkBpmnBaseComponent {
|
|
297
484
|
constructor() {
|
|
485
|
+
super(...arguments);
|
|
298
486
|
/**
|
|
299
|
-
*
|
|
487
|
+
* 渲染完成事件
|
|
300
488
|
*/
|
|
301
489
|
this.afterRenderChange = new EventEmitter();
|
|
302
|
-
this.scale = 1;
|
|
303
490
|
}
|
|
304
|
-
ngOnInit() { }
|
|
305
491
|
ngOnChanges(changes) {
|
|
306
|
-
if (changes.data && changes.data.currentValue) {
|
|
307
|
-
|
|
308
|
-
this.setDefaultData(this.data).subscribe();
|
|
309
|
-
}
|
|
492
|
+
if (changes.data && changes.data.currentValue && this.initialized) {
|
|
493
|
+
this.importXML(changes.data.currentValue).pipe(takeUntil(this.destroy$)).subscribe();
|
|
310
494
|
}
|
|
311
495
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
(_a = this.Viewer) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
496
|
+
ngAfterViewInit() {
|
|
497
|
+
// 延迟初始化，确保容器已渲染
|
|
498
|
+
setTimeout(() => {
|
|
499
|
+
if (this.isContainerReady() && !this.initialized) {
|
|
500
|
+
this.initViewer();
|
|
501
|
+
this.registerEvents();
|
|
502
|
+
const xmlData = this.data || getDefaultBpmnXML();
|
|
503
|
+
this.importXML(xmlData).pipe(takeUntil(this.destroy$)).subscribe();
|
|
504
|
+
this.initialized = true;
|
|
505
|
+
}
|
|
506
|
+
});
|
|
324
507
|
}
|
|
325
508
|
/**
|
|
326
|
-
* 初始化
|
|
509
|
+
* 初始化 BPMN 查看器
|
|
327
510
|
*/
|
|
328
|
-
|
|
511
|
+
initViewer() {
|
|
329
512
|
var _a;
|
|
330
|
-
this.
|
|
331
|
-
container: (_a = this.
|
|
513
|
+
this.viewer = new Viewer({
|
|
514
|
+
container: (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement,
|
|
332
515
|
additionalModules: [
|
|
333
516
|
minimapModule,
|
|
334
517
|
ZoomScrollModule,
|
|
335
518
|
MoveCanvasModule,
|
|
336
|
-
|
|
519
|
+
ModelingModule,
|
|
337
520
|
{
|
|
338
521
|
translate: ['value', customTranslate],
|
|
339
522
|
},
|
|
340
|
-
ModelingModule,
|
|
341
523
|
],
|
|
342
|
-
poweredBy: false,
|
|
524
|
+
poweredBy: false,
|
|
343
525
|
});
|
|
344
526
|
}
|
|
345
527
|
/**
|
|
346
|
-
*
|
|
528
|
+
* 注册事件监听
|
|
347
529
|
*/
|
|
348
530
|
registerEvents() {
|
|
349
|
-
|
|
350
|
-
this.
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
// bpmnModeler.get('canvas').getRootElement()
|
|
356
|
-
// 选中节点
|
|
357
|
-
// bpmnModeler.get('selection').select(element)
|
|
358
|
-
// 遍历所有节点
|
|
359
|
-
// bpmnModeler.get('canvas').getRootElement()[0]
|
|
360
|
-
// 设置某个节点颜色
|
|
361
|
-
const elementRegistry = this.Viewer.get('elementRegistry');
|
|
531
|
+
var _a;
|
|
532
|
+
this.registerImportDoneEvent();
|
|
533
|
+
// 监听导入完成事件，触发渲染完成回调
|
|
534
|
+
(_a = this.viewer) === null || _a === void 0 ? void 0 : _a.on('import.done', ({ error }) => {
|
|
535
|
+
if (!error && this.viewer) {
|
|
536
|
+
const elementRegistry = this.viewer.get('elementRegistry');
|
|
362
537
|
const nodes = elementRegistry.getAll();
|
|
363
538
|
if (nodes && nodes.length > 0) {
|
|
364
|
-
const modeling = this.
|
|
539
|
+
const modeling = this.viewer.get('modeling');
|
|
365
540
|
this.afterRenderChange.emit({
|
|
366
|
-
nodes,
|
|
541
|
+
nodes: nodes,
|
|
367
542
|
modeling,
|
|
368
|
-
viewer: this.
|
|
543
|
+
viewer: this.viewer,
|
|
369
544
|
});
|
|
370
|
-
// const start = nodes.find((n) => n.businessObject.$attrs.description === 'start');
|
|
371
|
-
// const manager = nodes.find((n) => n.businessObject.$attrs.description === 'leader');
|
|
372
|
-
// if (start && manager && modeling) {
|
|
373
|
-
// modeling.setColor([start, manager] as BpmnModelTypes.Element[], {
|
|
374
|
-
// // fill: null,
|
|
375
|
-
// stroke: '#1890ff',
|
|
376
|
-
// });
|
|
377
|
-
//
|
|
378
|
-
// // 设置线的颜色
|
|
379
|
-
// // 进线
|
|
380
|
-
// const edgesIn = manager.incoming.filter((v: any) => !!start.outgoing.find((n: any) => n.id === v.id));
|
|
381
|
-
//
|
|
382
|
-
// // 出线
|
|
383
|
-
// const edgesOut = manager.outgoing;
|
|
384
|
-
// modeling.setColor([...edgesIn, ...edgesOut] as [BpmnModelTypes.Element], {
|
|
385
|
-
// stroke: '#1890ff',
|
|
386
|
-
// });
|
|
387
|
-
// }
|
|
388
545
|
}
|
|
389
546
|
}
|
|
390
547
|
});
|
|
391
548
|
}
|
|
392
549
|
/**
|
|
393
|
-
*
|
|
550
|
+
* 导入 BPMN XML
|
|
551
|
+
* @param xml BPMN XML 字符串
|
|
394
552
|
*/
|
|
395
|
-
|
|
396
|
-
|
|
553
|
+
importXML(xml) {
|
|
554
|
+
if (!this.viewer) {
|
|
555
|
+
throw new Error('BPMN Viewer 未初始化');
|
|
556
|
+
}
|
|
557
|
+
return from(this.viewer.importXML(xml));
|
|
397
558
|
}
|
|
398
559
|
/**
|
|
399
560
|
* 重置画板
|
|
400
561
|
*/
|
|
401
|
-
|
|
402
|
-
return this.
|
|
403
|
-
}
|
|
404
|
-
/**
|
|
405
|
-
* 放大
|
|
406
|
-
*/
|
|
407
|
-
zoomIn() {
|
|
408
|
-
this.Viewer.get('canvas').zoom(++this.scale);
|
|
562
|
+
reset() {
|
|
563
|
+
return this.importXML(getDefaultBpmnXML());
|
|
409
564
|
}
|
|
410
565
|
/**
|
|
411
|
-
*
|
|
566
|
+
* 获取元素注册表
|
|
412
567
|
*/
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
}
|
|
568
|
+
getElementRegistry() {
|
|
569
|
+
var _a;
|
|
570
|
+
return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.get('elementRegistry');
|
|
417
571
|
}
|
|
418
572
|
/**
|
|
419
|
-
*
|
|
573
|
+
* 获取建模对象
|
|
420
574
|
*/
|
|
421
|
-
|
|
422
|
-
|
|
575
|
+
getModeling() {
|
|
576
|
+
var _a;
|
|
577
|
+
return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.get('modeling');
|
|
423
578
|
}
|
|
424
579
|
}
|
|
425
|
-
RkBpmnViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnViewerComponent, deps:
|
|
426
|
-
RkBpmnViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RkBpmnViewerComponent, selector: "rk-bpmn-viewer", inputs: { data: "data" }, outputs: { afterRenderChange: "afterRenderChange" },
|
|
580
|
+
RkBpmnViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
+
RkBpmnViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RkBpmnViewerComponent, selector: "rk-bpmn-viewer", inputs: { data: "data" }, outputs: { afterRenderChange: "afterRenderChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\r\n <!-- \u5DE5\u5177\u680F -->\r\n <div class=\"flex items-center h-14 px-4 bg-white border-b border-gray-200\">\r\n <!-- \u7F29\u653E\u64CD\u4F5C -->\r\n <div class=\"flex -space-x-px\">\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-l hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u653E\u5927\"\r\n (click)=\"zoomIn()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h6\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v6\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u7F29\u5C0F\"\r\n (click)=\"zoomOut()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l6 0\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-r hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u91CD\u7F6E\u4F4D\u7F6E\"\r\n (click)=\"zoomReset()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\" />\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- \u753B\u5E03\u533A\u57DF -->\r\n <div class=\"flex-1 overflow-hidden bg-white\">\r\n <div #container class=\"w-full h-full\"></div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep a.bjs-powered-by{display:none!important}\n"] });
|
|
427
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnViewerComponent, decorators: [{
|
|
428
583
|
type: Component,
|
|
429
584
|
args: [{
|
|
430
585
|
selector: 'rk-bpmn-viewer',
|
|
431
586
|
templateUrl: './bpmn-viewer.component.html',
|
|
432
|
-
styleUrls: ['
|
|
587
|
+
styleUrls: ['./bpmn-viewer.component.scss'],
|
|
433
588
|
}]
|
|
434
|
-
}],
|
|
589
|
+
}], propDecorators: { data: [{
|
|
435
590
|
type: Input
|
|
436
591
|
}], afterRenderChange: [{
|
|
437
592
|
type: Output
|
|
438
|
-
}], el: [{
|
|
439
|
-
type: ViewChild,
|
|
440
|
-
args: ['ref']
|
|
441
593
|
}] } });
|
|
442
594
|
|
|
443
|
-
|
|
444
|
-
*
|
|
445
|
-
*
|
|
446
|
-
* @E-Mail: cyclone77@126.com
|
|
447
|
-
* @Date: 2024-04-24 09:48:29
|
|
448
|
-
* @LastEditTime: 2024-04-24 09:48:29
|
|
595
|
+
/**
|
|
596
|
+
* BPMN 流程图编辑器组件
|
|
597
|
+
* 提供完整的 BPMN 2.0 流程图编辑功能
|
|
449
598
|
*/
|
|
450
|
-
class RkBpmnEditorComponent {
|
|
599
|
+
class RkBpmnEditorComponent extends RkBpmnBaseComponent {
|
|
451
600
|
constructor() {
|
|
601
|
+
super(...arguments);
|
|
452
602
|
/**
|
|
453
|
-
*
|
|
603
|
+
* 选中元素变化事件
|
|
454
604
|
*/
|
|
455
605
|
this.selectionChange = new EventEmitter();
|
|
606
|
+
/**
|
|
607
|
+
* 需要加载的样式文件
|
|
608
|
+
*/
|
|
456
609
|
this.loadStyles = [
|
|
457
610
|
'assets/bpmn-js/diagram-js.css',
|
|
458
611
|
'assets/bpmn-js/bpmn-font/css/bpmn.css',
|
|
459
612
|
'assets/diagram-js-minimap/diagram-js-minimap.css',
|
|
460
613
|
];
|
|
461
|
-
this.scale = 1;
|
|
462
614
|
}
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
}
|
|
469
|
-
}
|
|
615
|
+
/**
|
|
616
|
+
* BPMN 建模器实例
|
|
617
|
+
*/
|
|
618
|
+
get modeler() {
|
|
619
|
+
return this.viewer;
|
|
470
620
|
}
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
if ((rect === null || rect === void 0 ? void 0 : rect.width) && !this.bpmnJS) {
|
|
475
|
-
this.onInitBpmn();
|
|
476
|
-
this.registerEvents();
|
|
477
|
-
this.setDefaultData((_b = this.data) !== null && _b !== void 0 ? _b : defaultBpmnData).subscribe();
|
|
621
|
+
ngOnChanges(changes) {
|
|
622
|
+
if (changes.data && changes.data.currentValue && this.initialized) {
|
|
623
|
+
this.importXML(changes.data.currentValue).pipe(takeUntil(this.destroy$)).subscribe();
|
|
478
624
|
}
|
|
479
625
|
}
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
(
|
|
626
|
+
ngAfterViewInit() {
|
|
627
|
+
// 延迟初始化，确保容器已渲染
|
|
628
|
+
setTimeout(() => {
|
|
629
|
+
if (this.isContainerReady() && !this.initialized) {
|
|
630
|
+
this.initModeler();
|
|
631
|
+
this.registerEvents();
|
|
632
|
+
const xmlData = this.data || getDefaultBpmnXML();
|
|
633
|
+
this.importXML(xmlData).pipe(takeUntil(this.destroy$)).subscribe();
|
|
634
|
+
this.initialized = true;
|
|
635
|
+
}
|
|
636
|
+
});
|
|
483
637
|
}
|
|
484
638
|
/**
|
|
485
|
-
* 初始化
|
|
639
|
+
* 初始化 BPMN 建模器
|
|
486
640
|
*/
|
|
487
|
-
|
|
488
|
-
var _a
|
|
489
|
-
this.
|
|
490
|
-
container: (_a = this.
|
|
641
|
+
initModeler() {
|
|
642
|
+
var _a;
|
|
643
|
+
this.viewer = new BpmnModeler({
|
|
644
|
+
container: (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement,
|
|
491
645
|
additionalModules: [
|
|
492
646
|
gridModule,
|
|
493
647
|
minimapModule,
|
|
494
|
-
// 汉化
|
|
495
648
|
{
|
|
496
649
|
translate: ['value', customTranslate],
|
|
497
650
|
},
|
|
498
651
|
],
|
|
499
|
-
|
|
500
|
-
propertiesPanel: {
|
|
501
|
-
parent: (_b = this.properties) === null || _b === void 0 ? void 0 : _b.nativeElement,
|
|
502
|
-
},
|
|
503
|
-
poweredBy: false, // 禁用powered-by
|
|
652
|
+
poweredBy: false,
|
|
504
653
|
});
|
|
505
654
|
}
|
|
506
655
|
/**
|
|
507
|
-
*
|
|
656
|
+
* 注册事件监听
|
|
508
657
|
*/
|
|
509
658
|
registerEvents() {
|
|
510
|
-
|
|
511
|
-
this.
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
659
|
+
var _a;
|
|
660
|
+
this.registerImportDoneEvent();
|
|
661
|
+
// 监听选中元素变化
|
|
662
|
+
(_a = this.modeler) === null || _a === void 0 ? void 0 : _a.on('selection.changed', (event) => {
|
|
663
|
+
const [element] = event.newSelection;
|
|
664
|
+
this.selectedElement = element;
|
|
665
|
+
if (element && this.modeler) {
|
|
666
|
+
const modeling = this.modeler.get('modeling');
|
|
667
|
+
this.selectionChange.emit({
|
|
668
|
+
modeler: this.modeler,
|
|
669
|
+
modeling,
|
|
670
|
+
element,
|
|
671
|
+
});
|
|
515
672
|
}
|
|
516
673
|
});
|
|
517
|
-
this.bpmnJS.on('selection.changed', (e) => {
|
|
518
|
-
const [element] = e.newSelection;
|
|
519
|
-
this.targetElement = element;
|
|
520
|
-
this.bpmnJS.get('elementRegistry');
|
|
521
|
-
const modeling = this.bpmnJS.get('modeling');
|
|
522
|
-
this.selectionChange.emit({ modeler: this.bpmnJS, modeling, element });
|
|
523
|
-
});
|
|
524
|
-
}
|
|
525
|
-
/**
|
|
526
|
-
* 更新选中元素节点标签值
|
|
527
|
-
* @param modeling
|
|
528
|
-
* @param element
|
|
529
|
-
* @param data
|
|
530
|
-
*/
|
|
531
|
-
updateProperties(modeling, element, data) {
|
|
532
|
-
modeling.updateProperties(element, data);
|
|
533
|
-
}
|
|
534
|
-
/**
|
|
535
|
-
* 更新选中元素节点标签值
|
|
536
|
-
* @param modeling
|
|
537
|
-
* @param element
|
|
538
|
-
* @param key
|
|
539
|
-
* @param value
|
|
540
|
-
*/
|
|
541
|
-
updatePropertiesByKey(modeling, element, key, value) {
|
|
542
|
-
modeling.updateProperties(element, { [key]: value });
|
|
543
674
|
}
|
|
544
675
|
/**
|
|
545
|
-
*
|
|
676
|
+
* 导入 BPMN XML
|
|
677
|
+
* @param xml BPMN XML 字符串
|
|
546
678
|
*/
|
|
547
|
-
|
|
548
|
-
|
|
679
|
+
importXML(xml) {
|
|
680
|
+
if (!this.modeler) {
|
|
681
|
+
throw new Error('BPMN Modeler 未初始化');
|
|
682
|
+
}
|
|
683
|
+
return from(this.modeler.importXML(xml));
|
|
549
684
|
}
|
|
550
685
|
/**
|
|
551
|
-
*
|
|
552
|
-
* @param event
|
|
686
|
+
* 导入 BPMN 文件
|
|
687
|
+
* @param event 文件输入事件
|
|
553
688
|
*/
|
|
554
|
-
|
|
689
|
+
importFile(event) {
|
|
555
690
|
var _a;
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
console.error('
|
|
569
|
-
|
|
570
|
-
|
|
691
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
692
|
+
const input = event.target;
|
|
693
|
+
const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
694
|
+
if (!file) {
|
|
695
|
+
return;
|
|
696
|
+
}
|
|
697
|
+
try {
|
|
698
|
+
const xml = yield readFileAsText(file);
|
|
699
|
+
yield this.importXML(xml).toPromise();
|
|
700
|
+
input.value = '';
|
|
701
|
+
}
|
|
702
|
+
catch (error) {
|
|
703
|
+
console.error('导入 BPMN 文件失败，请确认文件符合 BPMN 2.0 规范', error);
|
|
704
|
+
input.value = '';
|
|
705
|
+
}
|
|
706
|
+
});
|
|
571
707
|
}
|
|
572
708
|
/**
|
|
573
709
|
* 重置画板
|
|
574
710
|
*/
|
|
575
|
-
|
|
576
|
-
return this.
|
|
711
|
+
reset() {
|
|
712
|
+
return this.importXML(getDefaultBpmnXML());
|
|
577
713
|
}
|
|
578
714
|
/**
|
|
579
|
-
*
|
|
715
|
+
* 保存为 XML
|
|
716
|
+
* @param format 是否格式化输出
|
|
580
717
|
*/
|
|
581
|
-
|
|
582
|
-
this
|
|
718
|
+
saveXML(format = true) {
|
|
719
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
720
|
+
if (!this.modeler) {
|
|
721
|
+
throw new Error('BPMN Modeler 未初始化');
|
|
722
|
+
}
|
|
723
|
+
return this.modeler.saveXML({ format });
|
|
724
|
+
});
|
|
583
725
|
}
|
|
584
726
|
/**
|
|
585
|
-
*
|
|
727
|
+
* 保存为 SVG
|
|
586
728
|
*/
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
729
|
+
saveSVG() {
|
|
730
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
731
|
+
if (!this.modeler) {
|
|
732
|
+
throw new Error('BPMN Modeler 未初始化');
|
|
733
|
+
}
|
|
734
|
+
return this.modeler.saveSVG();
|
|
735
|
+
});
|
|
591
736
|
}
|
|
592
737
|
/**
|
|
593
|
-
*
|
|
738
|
+
* 下载为 BPMN 文件
|
|
739
|
+
* @param config 导出配置
|
|
594
740
|
*/
|
|
595
|
-
|
|
596
|
-
this
|
|
741
|
+
downloadBPMN(config = {}) {
|
|
742
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
743
|
+
const { format = true, filename } = config;
|
|
744
|
+
const { xml } = yield this.saveXML(format);
|
|
745
|
+
if (xml) {
|
|
746
|
+
const name = filename ? `${filename}.bpmn` : `diagram-${generateUid()}.bpmn`;
|
|
747
|
+
downloadFile(xml, name);
|
|
748
|
+
}
|
|
749
|
+
});
|
|
597
750
|
}
|
|
598
751
|
/**
|
|
599
|
-
*
|
|
600
|
-
*
|
|
601
|
-
* 此方法用于将当前 BPMN 图的 XML 表示保存下来它可以接受一个可选参数 format，
|
|
602
|
-
* 该参数指示是否应格式化 XML 输出当 format 设置为 true 时，XML 将以一种更易于阅读的格式输出；
|
|
603
|
-
* 否则，它将以紧凑的形式输出
|
|
604
|
-
*
|
|
605
|
-
* @param format {boolean} - 可选参数，默认为 true如果设置为 true，保存的 XML 将被格式化以提高可读性
|
|
606
|
-
* @returns {Promise<string>} - 返回一个 Promise，解析为 BPMN 图的 XML 字符串表示
|
|
752
|
+
* 下载为 SVG 文件
|
|
753
|
+
* @param filename 文件名（不含扩展名）
|
|
607
754
|
*/
|
|
608
|
-
|
|
609
|
-
return this
|
|
755
|
+
downloadSVG(filename) {
|
|
756
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
757
|
+
const { svg } = yield this.saveSVG();
|
|
758
|
+
if (svg) {
|
|
759
|
+
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
|
760
|
+
const name = filename ? `${filename}.svg` : `diagram-${generateUid()}.svg`;
|
|
761
|
+
downloadFile(blob, name);
|
|
762
|
+
}
|
|
763
|
+
});
|
|
610
764
|
}
|
|
611
765
|
/**
|
|
612
|
-
*
|
|
766
|
+
* 更新元素属性
|
|
767
|
+
* @param element 要更新的元素
|
|
768
|
+
* @param properties 属性对象
|
|
613
769
|
*/
|
|
614
|
-
|
|
615
|
-
this.
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
this.downloadFile(href, name !== null && name !== void 0 ? name : `diagram-${uid()}.bpmn`);
|
|
621
|
-
}
|
|
622
|
-
});
|
|
770
|
+
updateProperties(element, properties) {
|
|
771
|
+
if (!this.modeler) {
|
|
772
|
+
return;
|
|
773
|
+
}
|
|
774
|
+
const modeling = this.modeler.get('modeling');
|
|
775
|
+
modeling.updateProperties(element, properties);
|
|
623
776
|
}
|
|
624
777
|
/**
|
|
625
|
-
*
|
|
626
|
-
*
|
|
627
|
-
*
|
|
628
|
-
*
|
|
629
|
-
* 主要用于需要以SVG格式导出或保存当前图表的场景
|
|
778
|
+
* 更新元素单个属性
|
|
779
|
+
* @param element 要更新的元素
|
|
780
|
+
* @param key 属性键
|
|
781
|
+
* @param value 属性值
|
|
630
782
|
*/
|
|
631
|
-
|
|
632
|
-
|
|
783
|
+
updateProperty(element, key, value) {
|
|
784
|
+
this.updateProperties(element, { [key]: value });
|
|
633
785
|
}
|
|
634
786
|
/**
|
|
635
|
-
*
|
|
787
|
+
* 获取元素注册表
|
|
636
788
|
*/
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
const svgBlob = new Blob([svg], {
|
|
641
|
-
type: 'image/svg+xml',
|
|
642
|
-
});
|
|
643
|
-
this.downloadFile(URL.createObjectURL(svgBlob), `diagram-${uid()}.svg`);
|
|
644
|
-
}
|
|
645
|
-
});
|
|
789
|
+
getElementRegistry() {
|
|
790
|
+
var _a;
|
|
791
|
+
return (_a = this.modeler) === null || _a === void 0 ? void 0 : _a.get('elementRegistry');
|
|
646
792
|
}
|
|
647
793
|
/**
|
|
648
|
-
*
|
|
794
|
+
* 获取建模对象
|
|
649
795
|
*/
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
tempLink.href = href;
|
|
654
|
-
tempLink.setAttribute('download', filename);
|
|
655
|
-
if (typeof tempLink.download === 'undefined') {
|
|
656
|
-
tempLink.setAttribute('target', '_blank');
|
|
657
|
-
}
|
|
658
|
-
document.body.appendChild(tempLink);
|
|
659
|
-
tempLink.click();
|
|
660
|
-
document.body.removeChild(tempLink);
|
|
796
|
+
getModeling() {
|
|
797
|
+
var _a;
|
|
798
|
+
return (_a = this.modeler) === null || _a === void 0 ? void 0 : _a.get('modeling');
|
|
661
799
|
}
|
|
662
800
|
}
|
|
663
|
-
RkBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnEditorComponent, deps:
|
|
664
|
-
RkBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RkBpmnEditorComponent, selector: "rk-bpmn-editor", inputs: { data: "data", propertiesTemplate: "propertiesTemplate" }, outputs: { selectionChange: "selectionChange" },
|
|
801
|
+
RkBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
802
|
+
RkBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RkBpmnEditorComponent, selector: "rk-bpmn-editor", inputs: { data: "data", propertiesTemplate: "propertiesTemplate" }, outputs: { selectionChange: "selectionChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\r\n <!-- \u5DE5\u5177\u680F -->\r\n <div class=\"flex items-center h-14 px-4 bg-white border-b border-gray-200\">\r\n <!-- \u6587\u4EF6\u64CD\u4F5C -->\r\n <div class=\"flex -space-x-px\">\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-l hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u5BFC\u5165\u6A21\u578B .bpmn\"\r\n (click)=\"fileInput.click()\">\r\n <input #fileInput type=\"file\" class=\"hidden\" accept=\".bpmn\" (change)=\"importFile($event)\" />\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M5 19l2.757-7.351a1 1 0 0 1 .936-.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1-1.964 1.625h-14.026a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v2\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-r hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u91CD\u7F6E\u753B\u677F\"\r\n (click)=\"reset().subscribe()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6\" />\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M3.268 12.043a7.017 7.017 0 0 0 6.634 4.957a7.012 7.012 0 0 0 7.043-6.131a7 7 0 0 0-5.314-7.672a7.021 7.021 0 0 0-8.241 4.403\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 4v4h4\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- \u7F29\u653E\u64CD\u4F5C -->\r\n <div class=\"flex -space-x-px ml-4\">\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-l hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u653E\u5927\"\r\n (click)=\"zoomIn()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h6\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v6\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u7F29\u5C0F\"\r\n (click)=\"zoomOut()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l6 0\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-r hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u91CD\u7F6E\u4F4D\u7F6E\"\r\n (click)=\"zoomReset()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0\" />\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M17.657 16.657l-4.243 4.243a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- \u5BFC\u51FA\u64CD\u4F5C -->\r\n <div class=\"flex -space-x-px ml-4\">\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-l hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u4E0B\u8F7D\u4E3A .bpmn \u683C\u5F0F\"\r\n (click)=\"downloadBPMN()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 17v-6\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.5 14.5l2.5 2.5l2.5-2.5\" />\r\n </svg>\r\n </button>\r\n <button\r\n class=\"inline-flex items-center justify-center w-8 h-8 text-gray-700 bg-white border border-gray-300 rounded-r hover:text-blue-500 hover:border-blue-500 hover:z-10 transition-colors\"\r\n title=\"\u4E0B\u8F7D\u4E3A .svg \u683C\u5F0F\"\r\n (click)=\"downloadSVG()\">\r\n <svg class=\"w-[18px] h-[18px]\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 12v-7a2 2 0 0 1 2-2h7l5 5v4\" />\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 20.25c0 .414.336.75.75.75h1.25a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1.25a.75.75 0 0 1 .75.75\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 15l2 6l2-6\" />\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20 15h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v-3\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- \u5185\u5BB9\u533A\u57DF -->\r\n <div class=\"flex flex-1 overflow-hidden\">\r\n <!-- \u753B\u5E03\u533A\u57DF -->\r\n <div class=\"flex-1 overflow-hidden bg-white\">\r\n <ng-container [rkLoadStyles]=\"loadStyles\">\r\n <div #container class=\"w-full h-full\"></div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- \u5C5E\u6027\u9762\u677F -->\r\n <div *ngIf=\"propertiesTemplate\" class=\"w-80 bg-white border-l border-gray-200 overflow-auto\">\r\n <ng-template [ngTemplateOutlet]=\"propertiesTemplate\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep a.bjs-powered-by{display:none!important}\n"], directives: [{ type: i1.RkLoadStylesDirective, selector: "[rkLoadStyles]", inputs: ["rkLoadStyles"], outputs: ["stylesLoaded"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
665
803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RkBpmnEditorComponent, decorators: [{
|
|
666
804
|
type: Component,
|
|
667
805
|
args: [{
|
|
668
806
|
selector: 'rk-bpmn-editor',
|
|
669
807
|
templateUrl: './bpmn-editor.component.html',
|
|
670
|
-
styleUrls: ['
|
|
808
|
+
styleUrls: ['./bpmn-editor.component.scss'],
|
|
671
809
|
}]
|
|
672
|
-
}],
|
|
810
|
+
}], propDecorators: { data: [{
|
|
673
811
|
type: Input
|
|
674
812
|
}], propertiesTemplate: [{
|
|
675
813
|
type: Input
|
|
676
814
|
}], selectionChange: [{
|
|
677
815
|
type: Output
|
|
678
|
-
}], el: [{
|
|
679
|
-
type: ViewChild,
|
|
680
|
-
args: ['ref']
|
|
681
|
-
}], properties: [{
|
|
682
|
-
type: ViewChild,
|
|
683
|
-
args: ['properties']
|
|
684
816
|
}] } });
|
|
685
817
|
|
|
686
818
|
class RkBpmnModule {
|
|
@@ -701,5 +833,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
701
833
|
* Generated bundle index. Do not edit.
|
|
702
834
|
*/
|
|
703
835
|
|
|
704
|
-
export { RkBpmnEditorComponent, RkBpmnModule, RkBpmnViewerComponent };
|
|
836
|
+
export { RkBpmnEditorComponent, RkBpmnModule, RkBpmnViewerComponent, defaultBpmnData, downloadFile, generateUid, getDefaultBpmnXML, readFileAsText };
|
|
705
837
|
//# sourceMappingURL=reskin-bpmn.js.map
|