@tuki-io/tuki-widgets 0.0.179 → 0.0.181
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/contact-center/cc-script-editor/components/wxcc-flowchart/wxcc-flowchart.component.d.ts +3 -1
- package/contact-center/cc-script-editor/services/cystoscape-viewport.service.d.ts +21 -0
- package/esm2020/contact-center/cc-script-editor/cc-script-editor.component.mjs +3 -3
- package/esm2020/contact-center/cc-script-editor/components/wxcc-flowchart/wxcc-flowchart.component.mjs +21 -21
- package/esm2020/contact-center/cc-script-editor/services/cystoscape-viewport.service.mjs +65 -0
- package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs +79 -14
- package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs +76 -14
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { Injectable } from "@angular/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class CytoscapeViewportService {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.config = {
|
|
6
|
+
minZoomLevel: 0.8,
|
|
7
|
+
maxZoomLevel: 1.2,
|
|
8
|
+
animateOptions: {
|
|
9
|
+
duration: 400,
|
|
10
|
+
easing: 'ease-in-out-cubic'
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
zoomIn(cy) {
|
|
15
|
+
this.handleZoomChange(cy, this.config.maxZoomLevel);
|
|
16
|
+
}
|
|
17
|
+
zoomOut(cy) {
|
|
18
|
+
this.handleZoomChange(cy, this.config.minZoomLevel);
|
|
19
|
+
}
|
|
20
|
+
resetView(cy, eles) {
|
|
21
|
+
this.fitToView(cy, eles);
|
|
22
|
+
}
|
|
23
|
+
handleZoomChange(cy, zoomLevel) {
|
|
24
|
+
if (cy) {
|
|
25
|
+
const currentZoom = cy.zoom();
|
|
26
|
+
const newZoom = currentZoom * zoomLevel;
|
|
27
|
+
const zoomDelta = newZoom / currentZoom;
|
|
28
|
+
const pan = cy.pan();
|
|
29
|
+
const containerWidth = cy.width();
|
|
30
|
+
const containerHeight = cy.height();
|
|
31
|
+
const centerX = containerWidth / 2;
|
|
32
|
+
const centerY = containerHeight / 2;
|
|
33
|
+
// Adjust pan to zoom toward center
|
|
34
|
+
const newPan = {
|
|
35
|
+
x: centerX - (centerX - pan.x) * zoomDelta,
|
|
36
|
+
y: centerY - (centerY - pan.y) * zoomDelta
|
|
37
|
+
};
|
|
38
|
+
cy.viewport({
|
|
39
|
+
zoom: newZoom,
|
|
40
|
+
pan: newPan
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
fitToView(cy, eles, padding = 60) {
|
|
45
|
+
if (cy && eles) {
|
|
46
|
+
cy.animate({
|
|
47
|
+
fit: {
|
|
48
|
+
eles: eles,
|
|
49
|
+
padding: padding
|
|
50
|
+
},
|
|
51
|
+
duration: this.config.animateOptions.duration,
|
|
52
|
+
easing: this.config.animateOptions.easing
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
CytoscapeViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
58
|
+
CytoscapeViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, providedIn: 'root' });
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, decorators: [{
|
|
60
|
+
type: Injectable,
|
|
61
|
+
args: [{
|
|
62
|
+
providedIn: 'root'
|
|
63
|
+
}]
|
|
64
|
+
}] });
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3lzdG9zY2FwZS12aWV3cG9ydC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL2NvbnRhY3QtY2VudGVyL2NjLXNjcmlwdC1lZGl0b3Ivc2VydmljZXMvY3lzdG9zY2FwZS12aWV3cG9ydC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBZTNDLE1BQU0sT0FBTyx3QkFBd0I7SUFIckM7UUFLYSxXQUFNLEdBQW1CO1lBQzlCLFlBQVksRUFBRSxHQUFHO1lBQ2pCLFlBQVksRUFBRSxHQUFHO1lBQ2pCLGNBQWMsRUFBRTtnQkFDWixRQUFRLEVBQUUsR0FBRztnQkFDYixNQUFNLEVBQUUsbUJBQW1CO2FBQzlCO1NBQ0osQ0FBQztLQW9ETDtJQWxERyxNQUFNLENBQUMsRUFBUTtRQUNYLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRUQsT0FBTyxDQUFDLEVBQVE7UUFDWixJQUFJLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELFNBQVMsQ0FBQyxFQUFRLEVBQUUsSUFBMkI7UUFDM0MsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVPLGdCQUFnQixDQUFDLEVBQVEsRUFBRSxTQUFpQjtRQUNoRCxJQUFJLEVBQUUsRUFBRTtZQUNKLE1BQU0sV0FBVyxHQUFHLEVBQUUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUM5QixNQUFNLE9BQU8sR0FBRyxXQUFXLEdBQUcsU0FBUyxDQUFDO1lBQ3hDLE1BQU0sU0FBUyxHQUFHLE9BQU8sR0FBRyxXQUFXLENBQUM7WUFFeEMsTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ3JCLE1BQU0sY0FBYyxHQUFHLEVBQUUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNsQyxNQUFNLGVBQWUsR0FBRyxFQUFFLENBQUMsTUFBTSxFQUFFLENBQUM7WUFFcEMsTUFBTSxPQUFPLEdBQUcsY0FBYyxHQUFHLENBQUMsQ0FBQztZQUNuQyxNQUFNLE9BQU8sR0FBRyxlQUFlLEdBQUcsQ0FBQyxDQUFDO1lBRXBDLG1DQUFtQztZQUNuQyxNQUFNLE1BQU0sR0FBRztnQkFDWCxDQUFDLEVBQUUsT0FBTyxHQUFHLENBQUMsT0FBTyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTO2dCQUMxQyxDQUFDLEVBQUUsT0FBTyxHQUFHLENBQUMsT0FBTyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTO2FBQzdDLENBQUM7WUFFRixFQUFFLENBQUMsUUFBUSxDQUFDO2dCQUNSLElBQUksRUFBRSxPQUFPO2dCQUNiLEdBQUcsRUFBRSxNQUFNO2FBQ2QsQ0FBQyxDQUFDO1NBQ047SUFDTCxDQUFDO0lBRU8sU0FBUyxDQUFDLEVBQVEsRUFBRSxJQUEyQixFQUFFLE9BQU8sR0FBRyxFQUFFO1FBQ2pFLElBQUksRUFBRSxJQUFJLElBQUksRUFBRTtZQUNaLEVBQUUsQ0FBQyxPQUFPLENBQUM7Z0JBQ1AsR0FBRyxFQUFFO29CQUNELElBQUksRUFBRSxJQUFJO29CQUNWLE9BQU8sRUFBRSxPQUFPO2lCQUNuQjtnQkFDRCxRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsUUFBUTtnQkFDN0MsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsY0FBYyxDQUFDLE1BQU07YUFDNUMsQ0FBQyxDQUFDO1NBQ047SUFDTCxDQUFDOztzSEE1RFEsd0JBQXdCOzBIQUF4Qix3QkFBd0IsY0FGckIsTUFBTTs0RkFFVCx3QkFBd0I7a0JBSHBDLFVBQVU7bUJBQUM7b0JBQ1IsVUFBVSxFQUFFLE1BQU07aUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IENvbGxlY3Rpb25SZXR1cm5WYWx1ZSwgQ29yZSwgQ3NzIH0gZnJvbSBcImN5dG9zY2FwZVwiO1xyXG5cclxudHlwZSBWaWV3cG9ydENvbmZpZyA9IFJlYWRvbmx5PHtcclxuICAgIG1pblpvb21MZXZlbDogbnVtYmVyLFxyXG4gICAgbWF4Wm9vbUxldmVsOiBudW1iZXIsXHJcbiAgICBhbmltYXRlT3B0aW9uczoge1xyXG4gICAgICAgIGR1cmF0aW9uOiBudW1iZXIsXHJcbiAgICAgICAgZWFzaW5nOiBDc3MuVHJhbnNpdGlvblRpbWluZ0Z1bmN0aW9uXHJcbiAgICB9XHJcbn0+O1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gICAgcHJvdmlkZWRJbjogJ3Jvb3QnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDeXRvc2NhcGVWaWV3cG9ydFNlcnZpY2Uge1xyXG4gICAgXHJcbiAgICByZWFkb25seSBjb25maWc6IFZpZXdwb3J0Q29uZmlnID0ge1xyXG4gICAgICAgIG1pblpvb21MZXZlbDogMC44LFxyXG4gICAgICAgIG1heFpvb21MZXZlbDogMS4yLFxyXG4gICAgICAgIGFuaW1hdGVPcHRpb25zOiB7XHJcbiAgICAgICAgICAgIGR1cmF0aW9uOiA0MDAsXHJcbiAgICAgICAgICAgIGVhc2luZzogJ2Vhc2UtaW4tb3V0LWN1YmljJ1xyXG4gICAgICAgIH1cclxuICAgIH07XHJcblxyXG4gICAgem9vbUluKGN5OiBDb3JlKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5oYW5kbGVab29tQ2hhbmdlKGN5LCB0aGlzLmNvbmZpZy5tYXhab29tTGV2ZWwpO1xyXG4gICAgfVxyXG5cclxuICAgIHpvb21PdXQoY3k6IENvcmUpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmhhbmRsZVpvb21DaGFuZ2UoY3ksIHRoaXMuY29uZmlnLm1pblpvb21MZXZlbCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVzZXRWaWV3KGN5OiBDb3JlLCBlbGVzOiBDb2xsZWN0aW9uUmV0dXJuVmFsdWUpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmZpdFRvVmlldyhjeSwgZWxlcyk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBoYW5kbGVab29tQ2hhbmdlKGN5OiBDb3JlLCB6b29tTGV2ZWw6IG51bWJlcik6IHZvaWQge1xyXG4gICAgICAgIGlmIChjeSkge1xyXG4gICAgICAgICAgICBjb25zdCBjdXJyZW50Wm9vbSA9IGN5Lnpvb20oKTtcclxuICAgICAgICAgICAgY29uc3QgbmV3Wm9vbSA9IGN1cnJlbnRab29tICogem9vbUxldmVsO1xyXG4gICAgICAgICAgICBjb25zdCB6b29tRGVsdGEgPSBuZXdab29tIC8gY3VycmVudFpvb207XHJcblxyXG4gICAgICAgICAgICBjb25zdCBwYW4gPSBjeS5wYW4oKTtcclxuICAgICAgICAgICAgY29uc3QgY29udGFpbmVyV2lkdGggPSBjeS53aWR0aCgpO1xyXG4gICAgICAgICAgICBjb25zdCBjb250YWluZXJIZWlnaHQgPSBjeS5oZWlnaHQoKTtcclxuXHJcbiAgICAgICAgICAgIGNvbnN0IGNlbnRlclggPSBjb250YWluZXJXaWR0aCAvIDI7XHJcbiAgICAgICAgICAgIGNvbnN0IGNlbnRlclkgPSBjb250YWluZXJIZWlnaHQgLyAyO1xyXG5cclxuICAgICAgICAgICAgLy8gQWRqdXN0IHBhbiB0byB6b29tIHRvd2FyZCBjZW50ZXJcclxuICAgICAgICAgICAgY29uc3QgbmV3UGFuID0ge1xyXG4gICAgICAgICAgICAgICAgeDogY2VudGVyWCAtIChjZW50ZXJYIC0gcGFuLngpICogem9vbURlbHRhLFxyXG4gICAgICAgICAgICAgICAgeTogY2VudGVyWSAtIChjZW50ZXJZIC0gcGFuLnkpICogem9vbURlbHRhXHJcbiAgICAgICAgICAgIH07XHJcblxyXG4gICAgICAgICAgICBjeS52aWV3cG9ydCh7XHJcbiAgICAgICAgICAgICAgICB6b29tOiBuZXdab29tLFxyXG4gICAgICAgICAgICAgICAgcGFuOiBuZXdQYW5cclxuICAgICAgICAgICAgfSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZml0VG9WaWV3KGN5OiBDb3JlLCBlbGVzOiBDb2xsZWN0aW9uUmV0dXJuVmFsdWUsIHBhZGRpbmcgPSA2MCk6IHZvaWQge1xyXG4gICAgICAgIGlmIChjeSAmJiBlbGVzKSB7XHJcbiAgICAgICAgICAgIGN5LmFuaW1hdGUoe1xyXG4gICAgICAgICAgICAgICAgZml0OiB7XHJcbiAgICAgICAgICAgICAgICAgICAgZWxlczogZWxlcyxcclxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiBwYWRkaW5nXHJcbiAgICAgICAgICAgICAgICB9LFxyXG4gICAgICAgICAgICAgICAgZHVyYXRpb246IHRoaXMuY29uZmlnLmFuaW1hdGVPcHRpb25zLmR1cmF0aW9uLFxyXG4gICAgICAgICAgICAgICAgZWFzaW5nOiB0aGlzLmNvbmZpZy5hbmltYXRlT3B0aW9ucy5lYXNpbmdcclxuICAgICAgICAgICAgfSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59Il19
|
|
@@ -981,6 +981,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
981
981
|
type: Injectable
|
|
982
982
|
}] });
|
|
983
983
|
|
|
984
|
+
class CytoscapeViewportService {
|
|
985
|
+
constructor() {
|
|
986
|
+
this.config = {
|
|
987
|
+
minZoomLevel: 0.8,
|
|
988
|
+
maxZoomLevel: 1.2,
|
|
989
|
+
animateOptions: {
|
|
990
|
+
duration: 400,
|
|
991
|
+
easing: 'ease-in-out-cubic'
|
|
992
|
+
}
|
|
993
|
+
};
|
|
994
|
+
}
|
|
995
|
+
zoomIn(cy) {
|
|
996
|
+
this.handleZoomChange(cy, this.config.maxZoomLevel);
|
|
997
|
+
}
|
|
998
|
+
zoomOut(cy) {
|
|
999
|
+
this.handleZoomChange(cy, this.config.minZoomLevel);
|
|
1000
|
+
}
|
|
1001
|
+
resetView(cy, eles) {
|
|
1002
|
+
this.fitToView(cy, eles);
|
|
1003
|
+
}
|
|
1004
|
+
handleZoomChange(cy, zoomLevel) {
|
|
1005
|
+
if (cy) {
|
|
1006
|
+
const currentZoom = cy.zoom();
|
|
1007
|
+
const newZoom = currentZoom * zoomLevel;
|
|
1008
|
+
const zoomDelta = newZoom / currentZoom;
|
|
1009
|
+
const pan = cy.pan();
|
|
1010
|
+
const containerWidth = cy.width();
|
|
1011
|
+
const containerHeight = cy.height();
|
|
1012
|
+
const centerX = containerWidth / 2;
|
|
1013
|
+
const centerY = containerHeight / 2;
|
|
1014
|
+
// Adjust pan to zoom toward center
|
|
1015
|
+
const newPan = {
|
|
1016
|
+
x: centerX - (centerX - pan.x) * zoomDelta,
|
|
1017
|
+
y: centerY - (centerY - pan.y) * zoomDelta
|
|
1018
|
+
};
|
|
1019
|
+
cy.viewport({
|
|
1020
|
+
zoom: newZoom,
|
|
1021
|
+
pan: newPan
|
|
1022
|
+
});
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1025
|
+
fitToView(cy, eles, padding = 60) {
|
|
1026
|
+
if (cy && eles) {
|
|
1027
|
+
cy.animate({
|
|
1028
|
+
fit: {
|
|
1029
|
+
eles: eles,
|
|
1030
|
+
padding: padding
|
|
1031
|
+
},
|
|
1032
|
+
duration: this.config.animateOptions.duration,
|
|
1033
|
+
easing: this.config.animateOptions.easing
|
|
1034
|
+
});
|
|
1035
|
+
}
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
1038
|
+
CytoscapeViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1039
|
+
CytoscapeViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, providedIn: 'root' });
|
|
1040
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CytoscapeViewportService, decorators: [{
|
|
1041
|
+
type: Injectable,
|
|
1042
|
+
args: [{
|
|
1043
|
+
providedIn: 'root'
|
|
1044
|
+
}]
|
|
1045
|
+
}] });
|
|
1046
|
+
|
|
984
1047
|
class WxCCActivityManageService {
|
|
985
1048
|
constructor() {
|
|
986
1049
|
this.ACTIVITY_TEMPLATES = {
|
|
@@ -1512,10 +1575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1512
1575
|
cytoscape.use(dagre);
|
|
1513
1576
|
cytoscape.use(nodeHtmlLabel);
|
|
1514
1577
|
class WxCCFlowchartComponent {
|
|
1515
|
-
constructor(wxcc2graph,
|
|
1516
|
-
// private readonly cytoscapeViewportService: CytoscapeViewportService,
|
|
1517
|
-
dialog, wxccActivityCreationService, cdr) {
|
|
1578
|
+
constructor(wxcc2graph, cytoscapeViewportService, dialog, wxccActivityCreationService, cdr) {
|
|
1518
1579
|
this.wxcc2graph = wxcc2graph;
|
|
1580
|
+
this.cytoscapeViewportService = cytoscapeViewportService;
|
|
1519
1581
|
this.dialog = dialog;
|
|
1520
1582
|
this.wxccActivityCreationService = wxccActivityCreationService;
|
|
1521
1583
|
this.cdr = cdr;
|
|
@@ -1592,7 +1654,8 @@ class WxCCFlowchartComponent {
|
|
|
1592
1654
|
]);
|
|
1593
1655
|
const layout = (_b = this.cy) === null || _b === void 0 ? void 0 : _b.layout(Object.assign({}, this.layoutOptions)).run();
|
|
1594
1656
|
layout.on("layoutstop", () => {
|
|
1595
|
-
|
|
1657
|
+
var _a;
|
|
1658
|
+
this.cytoscapeViewportService.resetView(this.cy, (_a = this.cy) === null || _a === void 0 ? void 0 : _a.elements());
|
|
1596
1659
|
});
|
|
1597
1660
|
this.setupEventListeners();
|
|
1598
1661
|
}
|
|
@@ -1846,13 +1909,14 @@ class WxCCFlowchartComponent {
|
|
|
1846
1909
|
}
|
|
1847
1910
|
}
|
|
1848
1911
|
zoomIn() {
|
|
1849
|
-
|
|
1912
|
+
this.cytoscapeViewportService.zoomIn(this.cy);
|
|
1850
1913
|
}
|
|
1851
1914
|
zoomOut() {
|
|
1852
|
-
|
|
1915
|
+
this.cytoscapeViewportService.zoomOut(this.cy);
|
|
1853
1916
|
}
|
|
1854
1917
|
resetView() {
|
|
1855
|
-
|
|
1918
|
+
var _a;
|
|
1919
|
+
this.cytoscapeViewportService.resetView(this.cy, (_a = this.cy) === null || _a === void 0 ? void 0 : _a.elements());
|
|
1856
1920
|
}
|
|
1857
1921
|
runLayout() {
|
|
1858
1922
|
var _a;
|
|
@@ -1860,7 +1924,8 @@ class WxCCFlowchartComponent {
|
|
|
1860
1924
|
return;
|
|
1861
1925
|
const layout = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.layout(Object.assign({}, this.layoutOptions)).run();
|
|
1862
1926
|
layout.on("layoutstop", () => {
|
|
1863
|
-
|
|
1927
|
+
var _a;
|
|
1928
|
+
this.cytoscapeViewportService.resetView(this.cy, (_a = this.cy) === null || _a === void 0 ? void 0 : _a.elements());
|
|
1864
1929
|
});
|
|
1865
1930
|
}
|
|
1866
1931
|
canCreateOutgoingLink(sourceNodeId) {
|
|
@@ -1915,12 +1980,12 @@ class WxCCFlowchartComponent {
|
|
|
1915
1980
|
};
|
|
1916
1981
|
}
|
|
1917
1982
|
}
|
|
1918
|
-
WxCCFlowchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, deps: [{ token: WxCC2GraphService }, { token: i1$2.MatDialog }, { token: WxCCActivityCreationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1919
|
-
WxCCFlowchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: { flowchart: "flowchart" }, viewQueries: [{ propertyName: "flowchartContainer", first: true, predicate: ["flowchartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wxcc-flowchart-container\">\r\n <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n <!-- Floating toolbar for viewport controls -->\r\n <graph-floating-toolbar\r\n [visibility]=\"{ export: false }\"\r\n (resetViewChange)=\"resetView()\"\r\n (zoomInChange)=\"zoomIn()\"\r\n (zoomOutChange)=\"zoomOut()\">\r\n </graph-floating-toolbar>\r\n\r\n <!-- Graph Acts -->\r\n <div class=\"graph-actions-wrapper\">\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Search workflow\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"toggleSearchPanel()\"\r\n >\r\n <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n </button>\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Add New Node\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"openAddNodeDialog()\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"28\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n class=\"edge-delete-btn\"\r\n matTooltip=\"Delete this edge\"\r\n matTooltipPosition=\"above\"\r\n [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n (click)=\"onDeleteSelectedEdge()\"\r\n type=\"button\"\r\n aria-label=\"Delete selected edge\"\r\n >\r\n \u00D7\r\n </button>\r\n\r\n <node-search-panel\r\n class=\"fade-in-search-panel\"\r\n [class.visible]=\"isSearchPanelVisible\"\r\n [nodes]=\"activities\"\r\n (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n (searchChange)=\"openAddNodeDialog()\"\r\n >\r\n </node-search-panel>\r\n\r\n <!-- Node action toolbar (floating near selected node) -->\r\n <node-action-toolbar\r\n [isVisible]=\"isNodeToolbarVisible\"\r\n [position]=\"nodeToolbarPosition\"\r\n (deleteNode)=\"onDeleteNode()\"\r\n (linkNode)=\"onLinkNodeRequest()\"\r\n >\r\n </node-action-toolbar>\r\n\r\n <!-- Node details sidebar -->\r\n <node-details-sidebar\r\n [isOpen]=\"isSidebarOpen\"\r\n [nodeData]=\"selectedNodeData\"\r\n (close)=\"onCloseSidebar()\"\r\n (descriptionChange)=\"onDescriptionChange($event)\"\r\n (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n >\r\n </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100
|
|
1983
|
+
WxCCFlowchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, deps: [{ token: WxCC2GraphService }, { token: CytoscapeViewportService }, { token: i1$2.MatDialog }, { token: WxCCActivityCreationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1984
|
+
WxCCFlowchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: { flowchart: "flowchart" }, viewQueries: [{ propertyName: "flowchartContainer", first: true, predicate: ["flowchartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wxcc-flowchart-container\">\r\n <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n <!-- Floating toolbar for viewport controls -->\r\n <graph-floating-toolbar\r\n [visibility]=\"{ export: false }\"\r\n (resetViewChange)=\"resetView()\"\r\n (zoomInChange)=\"zoomIn()\"\r\n (zoomOutChange)=\"zoomOut()\">\r\n </graph-floating-toolbar>\r\n\r\n <!-- Graph Acts -->\r\n <div class=\"graph-actions-wrapper\">\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Search workflow\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"toggleSearchPanel()\"\r\n >\r\n <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n </button>\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Add New Node\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"openAddNodeDialog()\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"28\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n class=\"edge-delete-btn\"\r\n matTooltip=\"Delete this edge\"\r\n matTooltipPosition=\"above\"\r\n [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n (click)=\"onDeleteSelectedEdge()\"\r\n type=\"button\"\r\n aria-label=\"Delete selected edge\"\r\n >\r\n \u00D7\r\n </button>\r\n\r\n <node-search-panel\r\n class=\"fade-in-search-panel\"\r\n [class.visible]=\"isSearchPanelVisible\"\r\n [nodes]=\"activities\"\r\n (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n (searchChange)=\"openAddNodeDialog()\"\r\n >\r\n </node-search-panel>\r\n\r\n <!-- Node action toolbar (floating near selected node) -->\r\n <node-action-toolbar\r\n [isVisible]=\"isNodeToolbarVisible\"\r\n [position]=\"nodeToolbarPosition\"\r\n (deleteNode)=\"onDeleteNode()\"\r\n (linkNode)=\"onLinkNodeRequest()\"\r\n >\r\n </node-action-toolbar>\r\n\r\n <!-- Node details sidebar -->\r\n <node-details-sidebar\r\n [isOpen]=\"isSidebarOpen\"\r\n [nodeData]=\"selectedNodeData\"\r\n (close)=\"onCloseSidebar()\"\r\n (descriptionChange)=\"onDescriptionChange($event)\"\r\n (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n >\r\n </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FloatingToolBarComponent, selector: "graph-floating-toolbar", inputs: ["visibility"], outputs: ["resetViewChange", "zoomInChange", "zoomOutChange", "exportImageChange"] }, { kind: "component", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: ["isOpen", "nodeData"], outputs: ["close", "activityTypeChange", "descriptionChange"] }, { kind: "component", type: NodeActionToolbarComponent, selector: "node-action-toolbar", inputs: ["isVisible", "position"], outputs: ["deleteNode", "linkNode"] }, { kind: "component", type: NodeSearchPanelComponent, selector: "node-search-panel", inputs: ["nodes"], outputs: ["searchChange", "selectNodeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1920
1985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, decorators: [{
|
|
1921
1986
|
type: Component,
|
|
1922
|
-
args: [{ selector: "wxcc-flowchart", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wxcc-flowchart-container\">\r\n <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n <!-- Floating toolbar for viewport controls -->\r\n <graph-floating-toolbar\r\n [visibility]=\"{ export: false }\"\r\n (resetViewChange)=\"resetView()\"\r\n (zoomInChange)=\"zoomIn()\"\r\n (zoomOutChange)=\"zoomOut()\">\r\n </graph-floating-toolbar>\r\n\r\n <!-- Graph Acts -->\r\n <div class=\"graph-actions-wrapper\">\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Search workflow\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"toggleSearchPanel()\"\r\n >\r\n <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n </button>\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Add New Node\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"openAddNodeDialog()\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"28\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n class=\"edge-delete-btn\"\r\n matTooltip=\"Delete this edge\"\r\n matTooltipPosition=\"above\"\r\n [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n (click)=\"onDeleteSelectedEdge()\"\r\n type=\"button\"\r\n aria-label=\"Delete selected edge\"\r\n >\r\n \u00D7\r\n </button>\r\n\r\n <node-search-panel\r\n class=\"fade-in-search-panel\"\r\n [class.visible]=\"isSearchPanelVisible\"\r\n [nodes]=\"activities\"\r\n (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n (searchChange)=\"openAddNodeDialog()\"\r\n >\r\n </node-search-panel>\r\n\r\n <!-- Node action toolbar (floating near selected node) -->\r\n <node-action-toolbar\r\n [isVisible]=\"isNodeToolbarVisible\"\r\n [position]=\"nodeToolbarPosition\"\r\n (deleteNode)=\"onDeleteNode()\"\r\n (linkNode)=\"onLinkNodeRequest()\"\r\n >\r\n </node-action-toolbar>\r\n\r\n <!-- Node details sidebar -->\r\n <node-details-sidebar\r\n [isOpen]=\"isSidebarOpen\"\r\n [nodeData]=\"selectedNodeData\"\r\n (close)=\"onCloseSidebar()\"\r\n (descriptionChange)=\"onDescriptionChange($event)\"\r\n (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n >\r\n </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100
|
|
1923
|
-
}], ctorParameters: function () { return [{ type: WxCC2GraphService }, { type: i1$2.MatDialog }, { type: WxCCActivityCreationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { flowchart: [{
|
|
1987
|
+
args: [{ selector: "wxcc-flowchart", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wxcc-flowchart-container\">\r\n <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n <!-- Floating toolbar for viewport controls -->\r\n <graph-floating-toolbar\r\n [visibility]=\"{ export: false }\"\r\n (resetViewChange)=\"resetView()\"\r\n (zoomInChange)=\"zoomIn()\"\r\n (zoomOutChange)=\"zoomOut()\">\r\n </graph-floating-toolbar>\r\n\r\n <!-- Graph Acts -->\r\n <div class=\"graph-actions-wrapper\">\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Search workflow\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"toggleSearchPanel()\"\r\n >\r\n <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n </button>\r\n <button\r\n class=\"add-node-btn\"\r\n matTooltip=\"Add New Node\"\r\n matTooltipPosition=\"above\"\r\n (click)=\"openAddNodeDialog()\"\r\n >\r\n <svg\r\n width=\"28\"\r\n height=\"28\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n class=\"edge-delete-btn\"\r\n matTooltip=\"Delete this edge\"\r\n matTooltipPosition=\"above\"\r\n [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n (click)=\"onDeleteSelectedEdge()\"\r\n type=\"button\"\r\n aria-label=\"Delete selected edge\"\r\n >\r\n \u00D7\r\n </button>\r\n\r\n <node-search-panel\r\n class=\"fade-in-search-panel\"\r\n [class.visible]=\"isSearchPanelVisible\"\r\n [nodes]=\"activities\"\r\n (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n (searchChange)=\"openAddNodeDialog()\"\r\n >\r\n </node-search-panel>\r\n\r\n <!-- Node action toolbar (floating near selected node) -->\r\n <node-action-toolbar\r\n [isVisible]=\"isNodeToolbarVisible\"\r\n [position]=\"nodeToolbarPosition\"\r\n (deleteNode)=\"onDeleteNode()\"\r\n (linkNode)=\"onLinkNodeRequest()\"\r\n >\r\n </node-action-toolbar>\r\n\r\n <!-- Node details sidebar -->\r\n <node-details-sidebar\r\n [isOpen]=\"isSidebarOpen\"\r\n [nodeData]=\"selectedNodeData\"\r\n (close)=\"onCloseSidebar()\"\r\n (descriptionChange)=\"onDescriptionChange($event)\"\r\n (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n >\r\n </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"] }]
|
|
1988
|
+
}], ctorParameters: function () { return [{ type: WxCC2GraphService }, { type: CytoscapeViewportService }, { type: i1$2.MatDialog }, { type: WxCCActivityCreationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { flowchart: [{
|
|
1924
1989
|
type: Input
|
|
1925
1990
|
}], flowchartContainer: [{
|
|
1926
1991
|
type: ViewChild,
|
|
@@ -3186,10 +3251,10 @@ class WxCCFlowchartPageComponent {
|
|
|
3186
3251
|
}
|
|
3187
3252
|
}
|
|
3188
3253
|
WxCCFlowchartPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartPageComponent, deps: [{ token: WxCCAPIService }, { token: WxCC2GraphService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3189
|
-
WxCCFlowchartPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartPageComponent, selector: "cc-script-editor", inputs: { customerId: "customerId", host: "host", token: "token" }, ngImport: i0, template: "<div class=\"wxcc-flowchart-wrapper\">\r\n <
|
|
3254
|
+
WxCCFlowchartPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartPageComponent, selector: "cc-script-editor", inputs: { customerId: "customerId", host: "host", token: "token" }, ngImport: i0, template: "<div class=\"wxcc-flowchart-wrapper\">\r\n <header class=\"wxcc-flowchart-header\">\r\n <wxcc-file-selection-bar\r\n *ngIf=\"state.fileNames && state.fileNames.length\"\r\n [fileNames]=\"state.fileNames\"\r\n [selectedHost]=\"state.uccxIp\"\r\n [selectedFileName]=\"state.selectedFileName\"\r\n (fileNameSelectionChange)=\"onFileNameSelectionChange($event)\">\r\n </wxcc-file-selection-bar>\r\n <wxcc-actions-bar\r\n *ngIf=\"state.flowchart\"\r\n (save)=\"onSave()\"\r\n (reset)=\"onReset()\"\r\n (exportNonIr)=\"onExportNonIr()\"\r\n (complete)=\"onComplete()\">\r\n </wxcc-actions-bar>\r\n </header>\r\n <ng-container *ngIf=\"!state.loading; else loadingTemplate\">\r\n <wxcc-flowchart\r\n *ngIf=\"state.flowchart; else errorTemplate\"\r\n [flowchart]=\"state.flowchart\">\r\n </wxcc-flowchart>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #loadingTemplate>\r\n <div class=\"placeholder-wrapper\">\r\n <mat-spinner diameter=\"40\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n <div class=\"placeholder-wrapper\">\r\n Error loading script\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}.wxcc-flowchart-wrapper{width:100%;height:100%;display:flex;gap:.5rem;flex-direction:column}.wxcc-flowchart-wrapper .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .placeholder-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: ["flowchart"] }, { kind: "component", type: WxCCFileSelectionBarComponent, selector: "wxcc-file-selection-bar", inputs: ["fileNames", "selectedFileName", "selectedHost"], outputs: ["fileNameSelectionChange"] }, { kind: "component", type: WxCCActionsBarComponent, selector: "wxcc-actions-bar", outputs: ["save", "reset", "complete", "exportNonIr"] }] });
|
|
3190
3255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartPageComponent, decorators: [{
|
|
3191
3256
|
type: Component,
|
|
3192
|
-
args: [{ selector: 'cc-script-editor', template: "<div class=\"wxcc-flowchart-wrapper\">\r\n <
|
|
3257
|
+
args: [{ selector: 'cc-script-editor', template: "<div class=\"wxcc-flowchart-wrapper\">\r\n <header class=\"wxcc-flowchart-header\">\r\n <wxcc-file-selection-bar\r\n *ngIf=\"state.fileNames && state.fileNames.length\"\r\n [fileNames]=\"state.fileNames\"\r\n [selectedHost]=\"state.uccxIp\"\r\n [selectedFileName]=\"state.selectedFileName\"\r\n (fileNameSelectionChange)=\"onFileNameSelectionChange($event)\">\r\n </wxcc-file-selection-bar>\r\n <wxcc-actions-bar\r\n *ngIf=\"state.flowchart\"\r\n (save)=\"onSave()\"\r\n (reset)=\"onReset()\"\r\n (exportNonIr)=\"onExportNonIr()\"\r\n (complete)=\"onComplete()\">\r\n </wxcc-actions-bar>\r\n </header>\r\n <ng-container *ngIf=\"!state.loading; else loadingTemplate\">\r\n <wxcc-flowchart\r\n *ngIf=\"state.flowchart; else errorTemplate\"\r\n [flowchart]=\"state.flowchart\">\r\n </wxcc-flowchart>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #loadingTemplate>\r\n <div class=\"placeholder-wrapper\">\r\n <mat-spinner diameter=\"40\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n <div class=\"placeholder-wrapper\">\r\n Error loading script\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}.wxcc-flowchart-wrapper{width:100%;height:100%;display:flex;gap:.5rem;flex-direction:column}.wxcc-flowchart-wrapper .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .placeholder-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
|
|
3193
3258
|
}], ctorParameters: function () { return [{ type: WxCCAPIService }, { type: WxCC2GraphService }]; }, propDecorators: { customerId: [{
|
|
3194
3259
|
type: Input
|
|
3195
3260
|
}], host: [{
|