Add subprocess component and fix start/end event icon

ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html

@@ -2,7 +2,7 @@
     <div *ngFor="let element of diagram.elements">
         <div [ngSwitch]="element.type">
             <div *ngSwitchCase="'StartEvent'">
-                <diagram-event [data]="element" [radius]="15" [strokeWidth]="1"></diagram-event>
+                <diagram-start-event [data]="element"></diagram-start-event>
             </div>
             <div *ngSwitchCase="'ExclusiveGateway'">
                 <diagram-exclusive-gateway [data]="element"></diagram-exclusive-gateway>
@@ -17,7 +17,7 @@
                 <diagram-parallel-gateway [data]="element"></diagram-parallel-gateway>
             </div>
             <div *ngSwitchCase="'EndEvent'">
-                <diagram-event [data]="element" [radius]="14" [strokeWidth]="4"></diagram-event>
+                <diagram-end-event [data]="element"></diagram-end-event>
             </div>
             <div *ngSwitchCase="'UserTask'">
                 <diagram-user-task [data]="element"></diagram-user-task>
@@ -49,6 +49,9 @@
             <div *ngSwitchCase="'SubProcess'">
                 <diagram-subprocess [data]="element"></diagram-subprocess>
             </div>
+            <div *ngSwitchCase="'EventSubProcess'">
+                <diagram-event-subprocess [data]="element"></diagram-event-subprocess>
+            </div>
         </div>
     </div>
     <div *ngFor="let flow of diagram.flows">

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-end-event.component.html

@@ -0,0 +1 @@
+<diagram-event [data]="data" [options]="options" [iconFillColor]="iconFillColor"></diagram-event>

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-end-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';
+import { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-end-event',
+    templateUrl: './diagram-end-event.component.html',
+    styleUrls: ['./diagram-end-event.component.css']
+})
+export class DiagramEndEventComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
+    iconFillColor: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        console.log(this.elementRef);
+
+        this.options.radius = 14;
+        this.options.strokeWidth = 4;
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.iconFillColor = 'black';
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-event.component.html

@@ -1,2 +1,4 @@
 <raphael-circle [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
-                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+                [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>

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-event.component.ts

@@ -29,16 +29,15 @@ export class DiagramEventComponent {
     data: any;
 
     @Input()
-    strokeWidth: number;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
 
     @Input()
-    radius: number;
+    iconFillColor: any;
 
     @Output()
     onError = new EventEmitter();
 
     center: any = {};
-    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
 
     constructor(public elementRef: ElementRef,
                 private diagramColorService: DiagramColorService) {}
@@ -47,11 +46,5 @@ export class DiagramEventComponent {
         console.log(this.elementRef);
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);
-
-        this.options.radius = this.radius;
-        this.options.strokeWidth = this.strokeWidth;
-        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
-        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
-        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
     }
 }

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-start-event.component.html

@@ -0,0 +1 @@
+<diagram-event [data]="data" [options]="options" [iconFillColor]="iconFillColor"></diagram-event>

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/diagram-start-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';
+import { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-start-event',
+    templateUrl: './diagram-start-event.component.html',
+    styleUrls: ['./diagram-start-event.component.css']
+})
+export class DiagramStartEventComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
+    iconFillColor: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        console.log(this.elementRef);
+
+        this.options.radius = 15;
+        this.options.strokeWidth = 1;
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.iconFillColor = 'none';
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/events/index.ts

@@ -16,10 +16,16 @@
  */
 
 import { DiagramEventComponent } from './diagram-event.component';
+import { DiagramStartEventComponent } from './diagram-start-event.component';
+import { DiagramEndEventComponent } from './diagram-end-event.component';
 
 // primitives
 export * from './diagram-event.component';
+export * from './diagram-start-event.component';
+export * from './diagram-end-event.component';
 
 export const DIAGRAM_EVENTS_DIRECTIVES: any[] = [
-    DiagramEventComponent
+    DiagramEventComponent,
+    DiagramStartEventComponent,
+    DiagramEndEventComponent
 ];

ng2-components/ng2-activiti-analytics/src/components/diagrams/icons/diagram-container-icon-event.component.html

@@ -3,7 +3,7 @@
         <diagram-icon-timer [data]="data"></diagram-icon-timer>
     </div>
     <div *ngSwitchCase="'error'">
-        <diagram-icon-error [data]="data"></diagram-icon-error>
+        <diagram-icon-error [data]="data" [fillColor]="fillColor"></diagram-icon-error>
     </div>
     <div *ngSwitchCase="'signal'">
         <diagram-icon-signal [data]="data" [fillColor]="fillColor"></diagram-icon-signal>

ng2-components/ng2-activiti-analytics/src/components/diagrams/icons/diagram-icon-error.component.ts

@@ -28,6 +28,9 @@ export class DiagramIconErrorComponent {
     @Input()
     data: any;
 
+    @Input()
+    fillColor: string;
+
     @Output()
     onError = new EventEmitter();
 
@@ -42,7 +45,7 @@ export class DiagramIconErrorComponent {
         this.position = {x: this.data.x - 1, y: this.data.y - 1};
 
         this.options.stroke = 'black';
-        this.options.fillColors = 'none';
+        this.options.fillColors = this.fillColor;
         this.options.strokeWidth = 1;
     }
 }

ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-event-subprocess.component.html

@@ -0,0 +1,3 @@
+<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>

ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-event-subprocess.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @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 { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-event-subprocess',
+    templateUrl: './diagram-event-subprocess.component.html',
+    styleUrls: ['./diagram-event-subprocess.component.css']
+})
+export class DiagramEventSubprocessComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    rectLeftCorner: any;
+    width: any;
+    height: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.rectLeftCorner = {x: this.data.x, y: this.data.y};
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.fillColors = 'none';
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.strokeWidth = 1;
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/index.ts

@@ -16,10 +16,13 @@
  */
 
 import { DiagramSubprocessComponent } from './diagram-subprocess.component';
+import { DiagramEventSubprocessComponent } from './diagram-event-subprocess.component';
 
 // primitives
 export * from './diagram-subprocess.component';
+export * from './diagram-event-subprocess.component';
 
 export const DIAGRAM_STRUCTURAL_DIRECTIVES: any[] = [
-    DiagramSubprocessComponent
+    DiagramSubprocessComponent,
+    DiagramEventSubprocessComponent
 ];