@tuki-io/tuki-widgets 0.0.180 → 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/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 +77 -12
- package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs +74 -12
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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
|
|
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
|
|
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,
|