diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html new file mode 100644 index 0000000000..896baac631 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts new file mode 100644 index 0000000000..1ff911576a --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts @@ -0,0 +1,51 @@ +/*! + * @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, ElementRef, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-event', + templateUrl: './diagram-event.component.html', + styleUrls: ['./diagram-event.component.css'] +}) +export class DiagramEventComponent { + @Input() + paper: any; + + @Input() + data: any; + + @Input() + strokeWidth: number; + + @Input() + radius: number; + + @Output() + onError = new EventEmitter(); + + center: any = {}; + + constructor(public elementRef: ElementRef) {} + + ngOnInit() { + console.log(this.elementRef); + this.center.x = this.data.x + (this.data.width / 2); + this.center.y = this.data.y + (this.data.height / 2); + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html new file mode 100644 index 0000000000..a03d77ac7d --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts new file mode 100644 index 0000000000..62605adb6a --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts @@ -0,0 +1,41 @@ +/*! + * @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, ElementRef, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-sequence-flow', + templateUrl: './diagram-sequence-flow.component.html', + styleUrls: ['./diagram-sequence-flow.component.css'] +}) +export class DiagramSequenceFlowComponent { + @Input() + paper: any; + + @Input() + flow: any; + + @Output() + onError = new EventEmitter(); + + constructor(public elementRef: ElementRef) {} + + ngOnInit() { + console.log(this.elementRef); + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html new file mode 100644 index 0000000000..52ccf789c3 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts new file mode 100644 index 0000000000..cdcc942783 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts @@ -0,0 +1,95 @@ +/*! + * @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, ElementRef, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-task', + templateUrl: './diagram-task.component.html', + styleUrls: ['./diagram-task.component.css'] +}) +export class DiagramTaskComponent { + + static CURRENT_COLOR = '#017501'; + static COMPLETED_COLOR = '#2632aa'; + static ACTIVITY_STROKE_COLOR = '#bbbbbb'; + + static TASK_STROKE = '1'; + static TASK_HIGHLIGHT_STROKE = '2'; + + @Input() + data: any; + + @Input() + type: any; + + @Input() + paper: any; + + options: any = {}; + + @Output() + onError = new EventEmitter(); + + stroke: number; + + rect: any; + radius: number = 4; + + textPosition: any; + + constructor(public elementRef: ElementRef) {} + + ngOnInit() { + console.log(this.elementRef); + + this.rect = {x: this.data.x, y: this.data.y}; + + this.textPosition = {x: this.data.x + ( this.data.width / 2 ), y: this.data.y + ( this.data.height / 2 )}; + + this.options['id'] = this.data.id; + this.options['stroke'] = this.bpmnGetColor(this.data, DiagramTaskComponent.ACTIVITY_STROKE_COLOR); + this.options['stroke-width'] = this.bpmnGetStrokeWidth(this.data); + this.options['fill'] = this.determineCustomFillColor(this.data); + // rectAttrs['fill-opacity'] = customActivityBackgroundOpacity; + + } + + private bpmnGetColor(data, defaultColor) { + if (data.current) { + return DiagramTaskComponent.CURRENT_COLOR; + } else if (data.completed) { + return DiagramTaskComponent.COMPLETED_COLOR; + } else { + return defaultColor; + } + } + + private bpmnGetStrokeWidth(data) { + if (data.current || data.completed) { + return DiagramTaskComponent.TASK_STROKE; + } else { + return DiagramTaskComponent.TASK_HIGHLIGHT_STROKE; + } + } + + private determineCustomFillColor(data) { + // TODO + return 'hsb(0.1966666666666667, 1, 1)'; + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html new file mode 100644 index 0000000000..6d1cdb38c3 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html @@ -0,0 +1,26 @@ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts new file mode 100644 index 0000000000..f3cdd4dee9 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts @@ -0,0 +1,98 @@ +/*! + * @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, ElementRef, Input, Output, EventEmitter } from '@angular/core'; +import { AlfrescoTranslationService } from 'ng2-alfresco-core'; +import { AnalyticsService } from '../../services/analytics.service'; + +declare let Raphael: any; + +@Component({ + moduleId: module.id, + selector: 'diagram', + templateUrl: './diagram.component.html', + styleUrls: ['./diagram.component.css'] +}) +export class DiagramComponent { + + @Input() + modelType: string; + + @Input() + processDefinitionId: string; + + @Output() + onError = new EventEmitter(); + + private diagram: any; + private paper: any; + private ctx: any; + + private element: ElementRef; + + constructor(elementRef: ElementRef, + private translate: AlfrescoTranslationService, + private analyticsService: AnalyticsService) { + if (translate) { + translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src'); + } + this.element = elementRef; + } + + ngOnInit() { + this.ctx = this.element.nativeElement; + this.refresh(); + this.getProcessDefinitionModel(this.processDefinitionId); + } + + getProcessDefinitionModel(processDefinitionId: string) { + if (this.modelType === 'process-definition') { + this.analyticsService.getProcessDefinitionModel(processDefinitionId).subscribe( + (res: any) => { + this.diagram = res; + console.log(res); + }, + (err: any) => { + this.onError.emit(err); + console.log(err); + } + ); + } + } + + public getPaperBuilder(ctx: any): any { + if (typeof Raphael === 'undefined') { + throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory'); + } + let paper = new Raphael(ctx, 583, 344.08374193550003); + paper.setViewBox(0, 0, 583, 344.08374193550003, false); + paper.renderfix(); + return paper; + } + + private refresh(): any { + this.ngOnDestroy(); + this.paper = this.getPaperBuilder(this.ctx); + } + + public ngOnDestroy(): any { + if (this.paper) { + this.paper.clear(); + this.paper = void 0; + } + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts new file mode 100644 index 0000000000..f5688f40fc --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts @@ -0,0 +1,34 @@ +/*! + * @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 { DiagramComponent } from './diagram.component'; +import { DiagramEventComponent } from './diagram-event.component'; +import { DiagramTaskComponent } from './diagram-task.component'; +import { DiagramSequenceFlowComponent } from './diagram-sequence-flow.component'; + +// primitives +export * from './diagram.component'; +export * from './diagram-event.component'; +export * from './diagram-task.component'; +export * from './diagram-sequence-flow.component'; + +export const DIAGRAM_DIRECTIVES: any[] = [ + DiagramComponent, + DiagramEventComponent, + DiagramTaskComponent, + DiagramSequenceFlowComponent +];