Add pool and lane components

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

@@ -61,4 +61,7 @@
             </div>
         </div>
     </div>
+    <div *ngIf="diagram.pools">
+        <diagram-pools [pools]="diagram.pools"></diagram-pools>
+    </div>
 </div>

ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts

@@ -28,6 +28,9 @@ export class RaphaelTextDirective extends RaphaelBase implements OnInit {
     @Input()
     position: Point;
 
+    @Input()
+    transform: string;
+
     @Input()
     text: string;
 
@@ -48,11 +51,14 @@ export class RaphaelTextDirective extends RaphaelBase implements OnInit {
     }
 
     public draw(position: Point, text: string) {
-        return this.paper.text(position.x, position.y, text).attr({
+        let textPaper = this.paper.text(position.x, position.y, text).attr({
             'text-anchor' : 'middle',
             'font-family' : 'Arial',
             'font-size' : '11',
             'fill' : '#373e48'
         });
+
+        textPaper.transform(this.transform);
+        return textPaper;
     }
 }

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.html

@@ -0,0 +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>
+<raphael-text [text]="text" [position]="textPosition" [transform]="textTransform"></raphael-text>

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts

@@ -0,0 +1,54 @@
+/*!
+ * @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-lane',
+    templateUrl: './diagram-lane.component.html'
+})
+export class DiagramLaneComponent {
+    @Input()
+    lane: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    rectLeftCorner: any;
+    width: any;
+    height: any;
+
+    textPosition: any;
+    text: string;
+    textTransform: string;
+    options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.rectLeftCorner = {x: this.lane.x, y: this.lane.y};
+        this.width = this.lane.width;
+        this.height = this.lane.height;
+
+        this.textPosition =  {x: this.lane.x + 10, y: this.lane.y + ( this.lane.height / 2 )};
+        this.text = this.lane.name;
+        this.textTransform = 'r270';
+    }
+}

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="lanes">
+    <div *ngFor="let lane of lanes">
+        <diagram-lane [lane]="lane"></diagram-lane>
+    </div>
+</div>

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts

@@ -0,0 +1,37 @@
+/*!
+ * @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-lanes',
+    templateUrl: './diagram-lanes.component.html'
+})
+export class DiagramLanesComponent {
+    @Input()
+    lanes: any [];
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.html

@@ -0,0 +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>
+<raphael-text [text]="text" [position]="textPosition" [transform]="textTransform"></raphael-text>

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts

@@ -0,0 +1,54 @@
+/*!
+ * @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-pool',
+    templateUrl: './diagram-pool.component.html'
+})
+export class DiagramPoolComponent {
+    @Input()
+    pool: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    rectLeftCorner: any;
+    width: any;
+    height: any;
+
+    textPosition: any;
+    text: string;
+    textTransform: string;
+    options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.rectLeftCorner = {x: this.pool.x, y: this.pool.y};
+        this.width = this.pool.width;
+        this.height = this.pool.height;
+
+        this.textPosition =  {x: this.pool.x + 14, y: this.pool.y + ( this.pool.height / 2 )};
+        this.text = this.pool.name;
+        this.textTransform = 'r270';
+    }
+}

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="pools">
+    <div *ngFor="let pool of pools">
+        <diagram-pool [pool]="pool"></diagram-pool>
+        <diagram-lanes [lanes]="pool.lanes"></diagram-lanes>
+    </div>
+</div>

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts

@@ -0,0 +1,37 @@
+/*!
+ * @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-pools',
+    templateUrl: './diagram-pools.component.html'
+})
+export class DiagramPoolsComponent {
+    @Input()
+    pools: any [];
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

ng2-components/ng2-activiti-diagrams/src/components/swimlanes/index.ts

@@ -0,0 +1,35 @@
+/*!
+ * @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 { DiagramPoolsComponent } from './diagram-pools.component';
+import { DiagramPoolComponent } from './diagram-pool.component';
+
+import { DiagramLanesComponent } from './diagram-lanes.component';
+import { DiagramLaneComponent } from './diagram-lane.component';
+
+// primitives
+export * from './diagram-pools.component';
+export * from './diagram-pool.component';
+export * from './diagram-lanes.component';
+export * from './diagram-lane.component';
+
+export const DIAGRAM_SWIMLANES_DIRECTIVES: any[] = [
+    DiagramPoolsComponent,
+    DiagramPoolComponent,
+    DiagramLanesComponent,
+    DiagramLaneComponent
+];