inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-24 14:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1206 from Alfresco/dev-valbano-1052

Browse Source 
#1052 - Added tooltip for diagram heat map
This commit is contained in:
Mario Romano
2016-12-07 09:51:48 +00:00
committed by GitHub
parent 73b6e1b846 d4895b39b2
commit 1f820ebd34
26 changed files with 554 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html
View File

@@ -4,6 +4,6 @@
<dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
(fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></dropdown-widget>
</form>
<activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric"></activiti-diagram>
<activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></activiti-diagram>
</div>
<div *ngIf="!hasMetric()">No metric found</div>
<div *ngIf="!hasMetric()">No metric found</div>

30
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts
View File

@@ -33,9 +33,13 @@ describe('Test ng2-activiti-analytics-report-heat-map', () => {
let debug: DebugElement;
let element: HTMLElement;
let totalCountPerc = {'sid-fake-id': 0, 'fake-start-event': 100};
let totalTimePerc = {'sid-fake-id': 10, 'fake-start-event': 30};
let avgTimePercentages = {'sid-fake-id': 5, 'fake-start-event': 50};
let totalCountPerc = { 'sid-fake-id': 0, 'fake-start-event': 100 };
let totalTimePerc = { 'sid-fake-id': 10, 'fake-start-event': 30 };
let avgTimePercentages = { 'sid-fake-id': 5, 'fake-start-event': 50 };
let totalCountValues = { 'sid-fake-id': 2, 'fake-start-event': 3 };
let totalTimeValues = { 'sid-fake-id': 1, 'fake-start-event': 4 };
let avgTimeValues = { 'sid-fake-id': 4, 'fake-start-event': 5 };
beforeEach(async(() => {
TestBed.configureTestingModule({
@@ -65,7 +69,10 @@ describe('Test ng2-activiti-analytics-report-heat-map', () => {
component.report = {
totalCountsPercentages: totalCountPerc,
totalCountValues: totalCountValues,
totalTimePercentages: totalTimePerc,
totalTimeValues: totalTimeValues,
avgTimeValues: avgTimeValues,
avgTimePercentages: avgTimePercentages
};
});
@@ -81,7 +88,7 @@ describe('Test ng2-activiti-analytics-report-heat-map', () => {
});
it('should render the dropdown with the metric options', async(() => {
component.report = {totalCountsPercentages: {'sid-fake-id': 10, 'fake-start-event': 30}};
component.report = { totalCountsPercentages: { 'sid-fake-id': 10, 'fake-start-event': 30 } };
component.onSuccess.subscribe(() => {
fixture.whenStable().then(() => {
@@ -106,21 +113,24 @@ describe('Test ng2-activiti-analytics-report-heat-map', () => {
}));
it('should change the currentmetric width totalCount', async(() => {
let field = {value: 'totalCount'};
let field = { value: 'totalCount' };
component.onMetricChanges(field);
expect(component.currentMetric).toEqual(totalCountPerc);
expect(component.currentMetric).toEqual(totalCountValues);
expect(component.currentMetricColors).toEqual(totalCountPerc);
}));
it('should change the currentmetric width totalTime', async(() => {
let field = {value: 'totalTime'};
let field = { value: 'totalTime' };
component.onMetricChanges(field);
expect(component.currentMetric).toEqual(totalTimePerc);
expect(component.currentMetric).toEqual(totalTimeValues);
expect(component.currentMetricColors).toEqual(totalTimePerc);
}));
it('should change the currentmetric width avgTime', async(() => {
let field = {value: 'avgTime'};
let field = { value: 'avgTime' };
component.onMetricChanges(field);
expect(component.currentMetric).toEqual(avgTimePercentages);
expect(component.currentMetric).toEqual(avgTimeValues);
expect(component.currentMetricColors).toEqual(avgTimePercentages);
}));
});

14
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts
View File

@@ -40,6 +40,8 @@ export class AnalyticsReportHeatMapComponent implements OnInit {
metricForm: FormGroup;
currentMetric: string;
currentMetricColors: string;
metricType: string;
constructor(private translate: AlfrescoTranslationService,
private analyticsService: AnalyticsService,
@@ -64,11 +66,17 @@ export class AnalyticsReportHeatMapComponent implements OnInit {
onMetricChanges(field: any) {
if (field.value === 'totalCount') {
this.currentMetric = this.report.totalCountsPercentages;
this.currentMetric = this.report.totalCountValues;
this.currentMetricColors = this.report.totalCountsPercentages;
this.metricType = 'times';
} else if (field.value === 'totalTime') {
this.currentMetric = this.report.totalTimePercentages;
this.currentMetric = this.report.totalTimeValues;
this.currentMetricColors = this.report.totalTimePercentages;
this.metricType = 'hours';
} else if (field.value === 'avgTime') {
this.currentMetric = this.report.avgTimePercentages;
this.currentMetric = this.report.avgTimeValues;
this.currentMetricColors = this.report.avgTimePercentages;
this.metricType = 'hours';
}
}

5
ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
View File

@@ -1,4 +1,5 @@
<raphael-rect [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
<raphael-rect [elementId]="data.id" [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
[stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
<diagram-tooltip [data]="data"></diagram-tooltip>

5
ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html
View File

@@ -1,5 +1,6 @@
<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
<raphael-circle [elementId]="data.id" [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type" [fillColor]="signalFillColor"></diagram-container-icon-event>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type" [fillColor]="signalFillColor"></diagram-container-icon-event>
<diagram-tooltip [data]="data"></diagram-tooltip>

5
ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html
View File

@@ -1,6 +1,7 @@
<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
<raphael-circle [elementId]="data.id" [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
[fillColor]="signalFillColor"></diagram-container-icon-event>
[fillColor]="signalFillColor"></diagram-container-icon-event>
<diagram-tooltip [data]="data"></diagram-tooltip>

3
ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.html
View File

@@ -1 +1,2 @@
<raphael-flow-arrow [flow]="flow"></raphael-flow-arrow>
<raphael-flow-arrow [flow]="flow"></raphael-flow-arrow>
<diagram-tooltip [data]="flow"></diagram-tooltip>

174
ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
View File

@@ -74,6 +74,7 @@ describe('Test ng2-activiti-diagrams ', () => {
});
describe('Diagrams component Events: ', () => {
beforeEach(() => {
jasmine.Ajax.install();
component.processDefinitionId = 'fakeprocess:24:38399';
@@ -91,6 +92,9 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
expect(event).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -113,6 +117,9 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
expect(iconEvent).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -136,6 +143,9 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
expect(iconEvent).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -158,6 +168,9 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
expect(iconEvent).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -180,6 +193,9 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
expect(iconEvent).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -198,6 +214,9 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).toBeDefined();
let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
expect(event).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -220,6 +239,9 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
expect(iconEvent).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -257,6 +279,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -282,6 +308,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -307,6 +337,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -348,6 +382,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -399,6 +437,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
' raphael-icon-alfresco-publish');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -425,6 +467,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' +
' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -451,6 +497,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' +
' raphael-icon-rest-call');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -477,6 +527,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-box-publish-task >' +
' diagram-icon-box-publish-task > raphael-icon-box-publish');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -502,6 +556,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -527,6 +585,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -552,6 +614,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule');
expect(iconTask).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].name);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -586,6 +652,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
expect(shape1).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -607,6 +677,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
expect(shape1).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -628,6 +702,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
expect(shape1).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -659,6 +737,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
expect(shape2).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -689,7 +771,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-intermediate-catching-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -700,6 +782,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
' div > div > diagram-icon-timer');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -718,7 +804,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-intermediate-catching-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -729,6 +815,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
' div > div > diagram-icon-error');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -747,7 +837,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-intermediate-catching-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -758,6 +848,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
' div > div > diagram-icon-signal');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -776,7 +870,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-intermediate-catching-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -787,6 +881,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
' div > div > diagram-icon-message');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -817,7 +915,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-boundary-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -828,6 +926,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
' div > div > diagram-icon-timer');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -846,7 +948,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-boundary-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -857,6 +959,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
' div > div > diagram-icon-error');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -875,7 +981,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-boundary-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -886,6 +992,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
' div > div > diagram-icon-signal');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -904,7 +1014,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-boundary-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -915,6 +1025,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
' div > div > diagram-icon-message');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -933,7 +1047,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-boundary-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -944,6 +1058,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
' div > div > diagram-icon-message');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -974,7 +1092,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-throw-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1003,7 +1121,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-throw-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1014,6 +1132,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
' div > div > diagram-icon-error');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1032,7 +1154,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-throw-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1043,6 +1165,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
' div > div > diagram-icon-signal');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1061,7 +1187,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-throw-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1072,6 +1198,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
' div > div > diagram-icon-message');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1090,7 +1220,7 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-throw-event');
expect(shape).not.toBeNull();
expect(shape.children.length).toBe(3);
expect(shape.children.length).toBe(4);
let outerCircle = shape.children[0];
expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1101,6 +1231,10 @@ describe('Test ng2-activiti-diagrams ', () => {
let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
' div > div > diagram-icon-message');
expect(iconShape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1131,6 +1265,10 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-subprocess > raphael-rect');
expect(shape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1149,6 +1287,10 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect');
expect(shape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.elements[0].id);
expect(tooltip.textContent).toContain(res.elements[0].type);
});
});
component.ngOnChanges();
@@ -1238,6 +1380,10 @@ describe('Test ng2-activiti-diagrams ', () => {
expect(res).not.toBeNull();
let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow');
expect(shape).not.toBeNull();
let tooltip: any = element.querySelector('diagram-tooltip > div');
expect(tooltip.textContent).toContain(res.flows[0].id);
expect(tooltip.textContent).toContain(res.flows[0].type);
});
});
component.ngOnChanges();

27
ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
View File

@@ -20,6 +20,7 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
import { DiagramsService } from '../services/diagrams.service';
import { DiagramColorService } from '../services/diagram-color.service';
import { RaphaelService } from './raphael/raphael.service';
import { DiagramModel, DiagramElementModel } from '../models/diagram.model';
@Component({
moduleId: module.id,
@@ -33,6 +34,12 @@ export class DiagramComponent {
@Input()
metricPercentages: any;
@Input()
metricColor: any;
@Input()
metricType: string = '';
@Input()
width: number = 1000;
@@ -45,7 +52,7 @@ export class DiagramComponent {
@Output()
onError = new EventEmitter();
private diagram: any;
private diagram: DiagramModel;
private elementRef: ElementRef;
constructor(elementRef: ElementRef,
@@ -65,14 +72,15 @@ export class DiagramComponent {
ngOnChanges(changes: SimpleChanges) {
this.reset();
this.diagramColorService.setTotalColors(this.metricPercentages);
this.diagramColorService.setTotalColors(this.metricColor);
this.getProcessDefinitionModel(this.processDefinitionId);
}
getProcessDefinitionModel(processDefinitionId: string) {
this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
(res: any) => {
this.diagram = res;
this.diagram = new DiagramModel(res);
this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
this.onSuccess.emit(res);
},
(err: any) => {
@@ -82,6 +90,19 @@ export class DiagramComponent {
);
}
setMetricValueToDiagramElement(diagram: DiagramModel, metrics: any, metricType: string) {
for (let key in metrics) {
if (metrics.hasOwnProperty(key)) {
let foundElement: DiagramElementModel = diagram.elements.find(
(element: DiagramElementModel) => element.id === key);
if (foundElement) {
foundElement.value = metrics[key];
foundElement.dataType = metricType;
}
}
}
}
reset() {
this.raphaelService.reset();
}

5
ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html
View File

@@ -1,4 +1,5 @@
<raphael-circle [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
<raphael-circle [elementId]="data.id" [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
[fillColor]="iconFillColor"></diagram-container-icon-event>
[fillColor]="iconFillColor"></diagram-container-icon-event>
<diagram-tooltip [data]="data"></diagram-tooltip>

5
ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.html
View File

@@ -1,2 +1,3 @@
<raphael-rhombus [center]="center" [width]="width" [height]="height" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rhombus>
<raphael-rhombus [elementId]="data.id" [center]="center" [width]="width" [height]="height" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rhombus>
<diagram-tooltip [data]="data"></diagram-tooltip>

3
ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html
View File

@@ -1,2 +1,3 @@
<raphael-icon-send [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-send>
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-send>
<diagram-tooltip [data]="data"></diagram-tooltip>

3
ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html
View File

@@ -1,4 +1,5 @@
<raphael-circle [center]="center" [radius]="circleRadius" [strokeWidth]="circleOptions.strokeWidth" [stroke]="circleOptions.stroke"
[fillColors]="circleOptions.fillColors" [fillOpacity]="circleOptions.fillOpacity"></raphael-circle>
<raphael-icon-timer [position]="position" [stroke]="timerOptions.stroke" [strokeWidth]="timerOptions.strokeWidth"
[fillColors]="timerOptions.fillColors" [fillOpacity]="timerOptions.fillOpacity"></raphael-icon-timer>
[fillColors]="timerOptions.fillColors" [fillOpacity]="timerOptions.fillOpacity"></raphael-icon-timer>
<diagram-tooltip [data]="data"></diagram-tooltip>

4
ng2-components/ng2-activiti-diagrams/src/components/index.ts
View File

@@ -25,6 +25,7 @@ import { DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES } from './boundary-events/index';
import { DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES } from './intermediate-catching-events/index';
import { DIAGRAM_STRUCTURAL_DIRECTIVES } from './structural/index';
import { DIAGRAM_SWIMLANES_DIRECTIVES } from './swimlanes/index';
import { DiagramTooltip } from './tooltip/index';
import { DiagramColorService } from '../services/diagram-color.service';
import { DiagramsService } from '../services/diagrams.service';
@@ -50,7 +51,8 @@ export const DIAGRAM_DIRECTIVES: any[] = [
DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES,
DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES,
DIAGRAM_STRUCTURAL_DIRECTIVES,
DIAGRAM_SWIMLANES_DIRECTIVES
DIAGRAM_SWIMLANES_DIRECTIVES,
DiagramTooltip
];
export const DIAGRAM_PROVIDERS: any[] = [

5
ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.html
View File

@@ -1,5 +1,6 @@
<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
<raphael-circle [elementId]="data.id" [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type"></diagram-container-icon-event>
<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type"></diagram-container-icon-event>
<diagram-tooltip [data]="data"></diagram-tooltip>

6
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts
View File

@@ -43,6 +43,9 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
@Input()
fillOpacity: any;
@Input()
elementId: string;
@Output()
onError = new EventEmitter();
@@ -54,7 +57,8 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
ngOnInit() {
console.log(this.elementRef);
let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
this.draw(this.center, this.radius, opts);
let drawElement = this.draw(this.center, this.radius, opts);
drawElement.node.id = this.elementId;
}
public draw(center: Point, radius: number, opts: any) {

2
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-flow-arrow.component.ts
View File

@@ -54,7 +54,7 @@ export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
polyline.element.attr({'stroke-width': this.SEQUENCEFLOW_STROKE});
polyline.element.attr({'stroke': '#585858'});
polyline.element.id = this.flow.id;
polyline.element.node.id = this.flow.id;
let lastLineIndex = polyline.getLinesCount() - 1;
let line = polyline.getLine(lastLineIndex);

15
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts
View File

@@ -20,7 +20,7 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-rect'})
@Directive({ selector: 'raphael-rect' })
export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input()
paper: any;
@@ -49,6 +49,9 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input()
fillOpacity: any;
@Input()
elementId: string;
@Output()
onError = new EventEmitter();
@@ -59,8 +62,14 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
ngOnInit() {
console.log(this.elementRef);
let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
let opts = {
'stroke-width': this.strokeWidth,
'fill': this.fillColors,
'stroke': this.stroke,
'fill-opacity': this.fillOpacity
};
let elementDraw = this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
elementDraw.node.id = this.elementId;
}
public draw(leftCorner: Point, width: number, height: number, radius: number, opts: any) {

8
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rhombus.component.ts
View File

@@ -43,6 +43,9 @@ export class RaphaelRhombusDirective extends RaphaelBase implements OnInit {
@Input()
fillOpacity: any;
@Input()
elementId: string;
@Output()
onError = new EventEmitter();
@@ -54,11 +57,12 @@ export class RaphaelRhombusDirective extends RaphaelBase implements OnInit {
ngOnInit() {
console.log(this.elementRef);
let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
this.draw(this.center, this.width, this.height, opts);
let elementDraw = this.draw(this.center, this.width, this.height, opts);
elementDraw.node.id = this.elementId;
}
public draw(center: Point, width: number, height: number, opts?: any) {
this.paper.path('M' + center.x + ' ' + (center.y + (height / 2)) +
return this.paper.path('M' + center.x + ' ' + (center.y + (height / 2)) +
'L' + (center.x + (width / 2)) + ' ' + (center.y + height) +
'L' + (center.x + width) + ' ' + (center.y + (height / 2)) +
'L' + (center.x + (width / 2)) + ' ' + center.y + 'z'

3
ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.html
View File

@@ -1,3 +1,4 @@
<raphael-rect [leftCorner]="rectLeftCorner" [width]="width" [height]="height" [radius]="options.radius"
[stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
<diagram-tooltip [data]="data"></diagram-tooltip>

3
ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.html
View File

@@ -1,3 +1,4 @@
<raphael-rect [leftCorner]="rectLeftCorner" [width]="width" [height]="height" [radius]="options.radius"
[stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
<diagram-tooltip [data]="data"></diagram-tooltip>

21
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css Normal file
View File

@@ -0,0 +1,21 @@
.mdl-tooltip {
will-change: unset;
}
.mdl-tooltip-diagram {
background: white;
padding: 0px;
}
.mdl-tooltip-header__message {
background: black;
color: white;
margin-top: 0px;
margin-bottom: 3px;
width:100%;
}
.mdl-tooltip-body__message {
color: black;
text-align: center;
}

6
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="mdl-tooltip mdl-tooltip--large mdl-tooltip-diagram" [attr.for]="data.id">
<div>
<div class="mdl-tooltip-header__message"><span>{{getTooltipHeader(data)}}</span></div>
<span class="mdl-tooltip-body__message">{{getTooltipMessage(data)}}</span>
</div>
</div>

39
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts Normal file
View File

@@ -0,0 +1,39 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'diagram-tooltip',
templateUrl: './diagram-tooltip.component.html',
styleUrls: ['./diagram-tooltip-style.css']
})
export class DiagramTooltip {
@Input()
data: any;
getTooltipHeader(data: any) {
let headerValue = data.name || data.id;
return data.type + ' ' + headerValue;
}
getTooltipMessage(data: any) {
return (data.value !== undefined && data.value !== null ) ? data.value + ' ' + data.dataType : '';
}
}

18
ng2-components/ng2-activiti-diagrams/src/components/tooltip/index.ts Normal file
View File

@@ -0,0 +1,18 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './diagram-tooltip.component';

198
ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts Normal file
View File

@@ -0,0 +1,198 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export class DiagramModel {
diagramBeginX: string;
diagramBeginY: string;
diagramHeight: string;
diagramWidth: string;
elements: DiagramElementModel[] = [];
flows: DiagramFlowElementModel[] = [];
pools: DiagramPoolElementModel[] = [];
constructor(obj?: any) {
if (obj) {
this.diagramBeginX = obj.diagramBeginX;
this.diagramBeginY = obj.diagramBeginY;
this.diagramHeight = obj.diagramHeight;
this.diagramWidth = obj.diagramWidth;
if (obj.elements) {
obj.elements.forEach((element: DiagramElementModel) => {
this.elements.push(new DiagramElementModel(element));
});
}
if (obj.flows) {
obj.flows.forEach((flow: DiagramFlowElementModel) => {
this.flows.push(new DiagramFlowElementModel(flow));
});
}
if (obj.pools) {
obj.pools.forEach((pool: DiagramPoolElementModel) => {
this.pools.push(new DiagramPoolElementModel(pool));
});
}
}
}
}
export class DiagramElementModel {
height: string;
id: string;
name: string;
type: string;
width: string;
value: string;
x: string;
y: string;
properties: DiagramElementPropertyModel[] = [];
dataType: string = '';
eventDefinition: DiagramEventDefinitionModel;
taskType: string = '';
constructor(obj?: any) {
if (obj) {
this.height = obj.height || '';
this.id = obj.id || '';
this.name = obj.name || '';
this.type = obj.type || '';
this.width = obj.width || '';
this.value = obj.value || '';
this.x = obj.x || '';
this.y = obj.y || '';
this.taskType = obj.taskType || '';
if (obj.properties) {
obj.properties.forEach((property: DiagramElementPropertyModel) => {
this.properties.push(new DiagramElementPropertyModel(property));
});
}
this.dataType = obj.dataType || '';
if (obj.eventDefinition) {
this.eventDefinition = new DiagramEventDefinitionModel(obj.eventDefinition);
}
}
}
}
export class DiagramElementPropertyModel {
name: string;
type: string;
value: any;
constructor(obj?: any) {
if (obj) {
this.name = obj.name;
this.type = obj.type;
this.value = obj.value;
}
}
}
export class DiagramFlowElementModel {
id: string;
properties: any[] = [];
sourceRef: string;
targetRef: string;
type: string;
waypoints: DiagramWayPointModel[] = [];
constructor(obj?: any) {
if (obj) {
this.id = obj.id;
this.properties = obj.properties;
this.sourceRef = obj.sourceRef;
this.targetRef = obj.targetRef;
this.type = obj.type;
if (obj.waypoints) {
obj.waypoints.forEach((waypoint: DiagramWayPointModel) => {
this.waypoints.push(new DiagramWayPointModel(waypoint));
});
}
}
}
}
export class DiagramWayPointModel {
x: number;
y: number;
constructor(obj?: any) {
if (obj) {
this.x = obj.x;
this.y = obj.y;
}
}
}
export class DiagramEventDefinitionModel {
timeCycle: string;
type: string;
constructor(obj?: any) {
if (obj) {
this.timeCycle = obj.timeCycle;
this.type = obj.type;
}
}
}
export class DiagramPoolElementModel {
height: string;
id: string;
name: string;
properties: any;
lanes: DiagramLaneElementModel[] = [];
width: string;
x: number;
y: number;
constructor(obj?: any) {
if (obj) {
this.height = obj.height;
this.id = obj.id;
this.name = obj.name;
this.properties = obj.properties;
this.width = obj.width;
this.x = obj.x;
this.y = obj.y;
if (obj.lanes) {
obj.lanes.forEach((lane: DiagramLaneElementModel) => {
this.lanes.push(new DiagramLaneElementModel(lane));
});
}
}
}
}
export class DiagramLaneElementModel {
height: number;
id: string;
name: string;
width: number;
x: number;
y: number;
constructor(obj?: any) {
if (obj) {
this.height = obj.height;
this.id = obj.id;
this.name = obj.name;
this.width = obj.width;
this.x = obj.x;
this.y = obj.y;
}
}
}