SPDX-License-Identifier: Apache-2.0
============LICENSE_END=========================================================
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@est.tech, waqas.ikram@est.tech
*/
import { BrowserModule } from '@angular/platform-browser';
import { DetailsComponent } from './details/details.component';
import { ToastrNotificationService } from './toastr-notification-service.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule } from '@angular/material';
+import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule, MatIconModule } from '@angular/material';
import { NgxSpinnerModule } from 'ngx-spinner';
import { RouterModule, Routes } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { LoginComponent } from './login/login.component';
-import {BasicAuthInterceptor} from "./basic-auth.interceptor";
-import {ErrorInterceptor} from "./error.interceptor";
+import { BasicAuthInterceptor } from "./basic-auth.interceptor";
+import { ErrorInterceptor } from "./error.interceptor";
@NgModule({
declarations: [
RouterModule,
MatPaginatorModule,
MatSortModule,
+ MatIconModule,
RouterModule.forRoot([]),
ReactiveFormsModule
],
SPDX-License-Identifier: Apache-2.0
============LICENSE_END=========================================================
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@est.tech, waqas.ikram@est.tech
-->
<div class="completeForm">
<div class="topCanvas">
- <section class="canvas" id="canvas"></section>
+ <div class="navigation">
+ <button class="zoomButton" mat-icon-button title="zoom in" (click)="zoomIn()">
+ <mat-icon>zoom_in</mat-icon>
+ </button>
+ <button class="zoomButton" mat-icon-button title="zoom out" (click)="zoomOut()">
+ <mat-icon>zoom_out</mat-icon>
+ </button>
+ <button class="zoomButton" mat-icon-button title="reset zoom" (click)="resetZoom()">
+ <mat-icon>all_out</mat-icon>
+ </button>
+ </div>
+ <div #canvas class="canvas" id="canvas"></div>
<mat-card class="besideCanvas" id="besideCanvas">
<mat-card-title>Process Information</mat-card-title>
<br />
SPDX-License-Identifier: Apache-2.0
============LICENSE_END=========================================================
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@est.tech, waqas.ikram@est.tech
*/
#canvas {
background: white;
padding: 0;
- margin: 0;
+ margin-left: -43px;
width: 70%;
height: 470px;
margin-top: 0;
- box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+ box-shadow: 0 8px 10px 1px rgba(0,0,0,.2);
+}
+
+.navigation {
+ background: #e6e6e6;
+ width: 40px;
+ box-shadow: -5px 8px 10px 1px rgba(0,0,0,.2);
+ height: 470px;
+ border: 1px;
+ border-color: black;
+ position: relative;
+}
+
+.zoomButton {
+ padding-top: 8px;
+ background: none;
+ border: none;
}
#besideCanvas {
background: white;
padding-left: 20px;
margin: 0;
- width: 28%;
+ width: 25%;
height: 470px;
margin-top: 0;
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
SPDX-License-Identifier: Apache-2.0
============LICENSE_END=========================================================
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@est.tech, waqas.ikram@est.tech
*/
import { Component, OnInit } from '@angular/core';
import { VariableInstance } from '../model/variableInstance.model';
import { ToastrNotificationService } from '../toastr-notification-service.service';
import { NgxSpinnerService } from 'ngx-spinner';
+import { ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-details',
})
export class DetailsComponent implements OnInit {
+
+ @ViewChild("canvas") elementReference: ElementRef;
+
bpmnViewer: any;
processInstanceID: string;
async (data: ProcessDefinitionDetail) => {
this.processDefinition = data;
console.log(data);
- await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router);
+ await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance,
+ this.router, this.spinner, this.popup);
}, error => {
console.log(error);
this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);
});
}
- displayCamundaflow(bpmnXml, activities: ActivityInstance[], r: Router) {
- this.spinner.show();
+ displayCamundaflow(bpmnXml, activities: ActivityInstance[], router: Router,
+ spinner: NgxSpinnerService, popup: ToastrNotificationService) {
+ spinner.show();
this.bpmnViewer.importXML(bpmnXml, (error) => {
if (error) {
console.error('Unable to load BPMN flow ', error);
- this.popup.error('Unable to load BPMN flow ');
- this.spinner.hide();
+ popup.error('Unable to load BPMN flow ');
+ spinner.hide();
} else {
- this.spinner.hide();
- var canvas = this.bpmnViewer.get('canvas');
+ spinner.hide();
+ let canvas = this.bpmnViewer.get('canvas');
var eventBus = this.bpmnViewer.get('eventBus');
- eventBus.on('element.click', function(e) {
+ var elementRegistry = this.bpmnViewer.get('elementRegistry');
+ var overlays = this.bpmnViewer.get('overlays');
- activities.forEach(a => {
- if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {
- console.log("will drill down to : " + a.calledProcessInstanceId);
- r.navigate(['/details/' + a.calledProcessInstanceId]);
- this.spinner.show();
- }
- });
+ activities.forEach(a => {
+ if (a.calledProcessInstanceId !== null) {
+ var element = elementRegistry.get(a.activityId);
+ let newNode = document.createElement('div');
+ newNode.className = 'highlight-overlay';
+ newNode.id = element.id;
+ newNode.style.width = element.width + "px";
+ newNode.style.height = element.height + "px";
+ newNode.style.cursor = "pointer";
+
+ overlays.add(a.activityId, {
+ position: {
+ top: -5,
+ left: -5
+ },
+ html: newNode
+ });
+
+ newNode.addEventListener('click', function(e) {
+ console.log("clicked on: " + e.srcElement.id)
+ activities.forEach(a => {
+ if (a.activityId == e.srcElement.id && a.calledProcessInstanceId !== null) {
+ console.log("will drill down to : " + a.calledProcessInstanceId);
+ router.navigate(['/details/' + a.calledProcessInstanceId]);
+ }
+ });
+ });
+ }
});
// zoom to fit full viewport
- canvas.zoom('fit-viewport');
+ canvas.zoom('fit-viewport', 'auto');
activities.forEach(a => {
canvas.addMarker(a.activityId, 'highlight');
});
});
}
+ zoomIn() {
+ this.bpmnViewer.get('zoomScroll').zoom(1, {
+ x: this.elementReference.nativeElement.offsetWidth / 2,
+ y: this.elementReference.nativeElement.offsetHeight / 2
+ });
+ }
+
+ zoomOut() {
+ this.bpmnViewer.get('zoomScroll').zoom(-1, {
+ x: this.elementReference.nativeElement.offsetWidth / 2,
+ y: this.elementReference.nativeElement.offsetHeight / 2
+ });
+ }
+ resetZoom() {
+ let canvas = this.bpmnViewer.get('canvas');
+ canvas.resized();
+ canvas.zoom('fit-viewport', 'auto');
+
+ }
+
getVarInst(procInstId: string) {
this.data.getVariableInstance(procInstId).subscribe(
(data: VariableInstance[]) => {
Code Review / so.git / commitdiff