Add diagram icon service and diagram icon send components

2026-09-09 18:03:21 +00:00 · 2016-10-31 10:29:33 +00:00
parent 0f3c0b425a
commit fb8b640db0
17 changed files with 396 additions and 3 deletions
@@ -0,0 +1,8 @@
+<div [ngSwitch]="data.taskType">
+    <div *ngSwitchCase="'mail'">
+        <diagram-send-task [data]="data"></diagram-send-task>
+    </div>
+    <div *ngSwitchDefault>
+        <diagram-service-task [data]="data"></diagram-service-task>
+    </div>
+</div>
@@ -0,0 +1,38 @@
+/*!
+ * @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-container-service-task',
+    templateUrl: './diagram-container-service-task.component.html',
+    styleUrls: ['./diagram-container-service-task.component.css']
+})
+export class DiagramContainerServiceTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}
@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-send-task [data]="data"></diagram-icon-send-task>
@@ -0,0 +1,38 @@
+/*!
+ * @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-send-task',
+    templateUrl: './diagram-send-task.component.html',
+    styleUrls: ['./diagram-send-task.component.css']
+})
+export class DiagramSendTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}
@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-service-task [data]="data"></diagram-icon-service-task>
@@ -0,0 +1,40 @@
+/*!
+ * @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-service-task',
+    templateUrl: './diagram-service-task.component.html',
+    styleUrls: ['./diagram-service-task.component.css']
+})
+export class DiagramServiceTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+
+    }
+}
@@ -15,11 +15,20 @@
 * limitations under the License.
 */

+import { DiagramContainerServiceTaskComponent } from './diagram-container-service-task.component';
 import { DiagramTaskComponent } from './diagram-task.component';
+import { DiagramServiceTaskComponent } from './diagram-service-task.component';
+import { DiagramSendTaskComponent } from './diagram-send-task.component';

 // primitives
+export * from './diagram-container-service-task.component';
 export * from './diagram-task.component';
+export * from './diagram-service-task.component';
+export * from './diagram-send-task.component';

 export const DIAGRAM_ACTIVITIES_DIRECTIVES: any[] = [
-    DiagramTaskComponent
+    DiagramContainerServiceTaskComponent,
+    DiagramTaskComponent,
+    DiagramServiceTaskComponent,
+    DiagramSendTaskComponent
 ];
@@ -22,6 +22,9 @@
            <div *ngSwitchCase="'UserTask'">
                <diagram-task [data]="element"></diagram-task>
            </div>
+            <div *ngSwitchCase="'ServiceTask'">
+                <diagram-container-service-task [data]="element"></diagram-container-service-task>
+            </div>
        </div>
    </div>
    <div *ngFor="let flow of diagram.flows">
@@ -0,0 +1 @@
+<raphael-icon-send [position]="position"></raphael-icon-send>
@@ -0,0 +1,42 @@
+/*!
+ * @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-icon-send-task',
+    templateUrl: './diagram-icon-send-task.component.html',
+    styleUrls: ['./diagram-icon-send-task.component.css']
+})
+export class DiagramIconSendTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    position: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+    }
+}
@@ -0,0 +1 @@
+<raphael-icon-service [position]="position"></raphael-icon-service>
@@ -0,0 +1,42 @@
+/*!
+ * @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-icon-service-task',
+    templateUrl: './diagram-icon-service-task.component.html',
+    styleUrls: ['./diagram-icon-service-task.component.css']
+})
+export class DiagramIconServiceTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    position: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+    }
+}
@@ -0,0 +1,28 @@
+/*!
+ * @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 { DiagramIconServiceTaskComponent } from './diagram-icon-service-task.component';
+import { DiagramIconSendTaskComponent } from './diagram-icon-send-task.component';
+
+// primitives
+export * from './diagram-icon-service-task.component';
+export * from './diagram-icon-send-task.component';
+
+export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
+    DiagramIconServiceTaskComponent,
+    DiagramIconSendTaskComponent
+];
@@ -20,6 +20,7 @@ import { DiagramSequenceFlowComponent } from './diagram-sequence-flow.component'
 import { DIAGRAM_ACTIVITIES_DIRECTIVES } from './activities/index';
 import { DIAGRAM_EVENTS_DIRECTIVES } from './events/index';
 import { DIAGRAM_GATEWAY_DIRECTIVES } from './gateways/index';
+import { DIAGRAM_ICONS_DIRECTIVES } from './icons/index';

 import { DiagramColorService } from './services/diagram-color.service';

@@ -27,6 +28,7 @@ import { DiagramColorService } from './services/diagram-color.service';
 export * from './diagram.component';
 export * from './events/index';
 export * from './activities/index';
+export * from './icons/index';
 export * from './diagram-sequence-flow.component';

 export const DIAGRAM_DIRECTIVES: any[] = [
@@ -34,7 +36,8 @@ export const DIAGRAM_DIRECTIVES: any[] = [
    DIAGRAM_EVENTS_DIRECTIVES,
    DIAGRAM_ACTIVITIES_DIRECTIVES,
    DiagramSequenceFlowComponent,
-    DIAGRAM_GATEWAY_DIRECTIVES
+    DIAGRAM_GATEWAY_DIRECTIVES,
+    DIAGRAM_ICONS_DIRECTIVES
 ];

 export const DIAGRAM_PROVIDERS: any[] = [
@@ -24,6 +24,10 @@ import { RaphaelPlusDirective } from './raphael-plus.component';
 import { RaphaelRhombusDirective } from './raphael-rhombus.component';
 import { RaphaelPentagonDirective } from './raphael-pentagon.component';

+// icons
+import { RaphaelIconServiceDirective } from './raphael-icon-service.component';
+import { RaphaelIconSendDirective } from './raphael-icon-send.component';
+
 // primitives
 export * from './raphael-circle.component';
 export * from './raphael-rect.component';
@@ -34,6 +38,9 @@ export * from './raphael-plus.component';
 export * from './raphael-rhombus.component';
 export * from './raphael-pentagon.component';

+export * from './raphael-icon-service.component';
+export * from './raphael-icon-send.component';
+
 export const RAPHAEL_DIRECTIVES: any[] = [
    RaphaelCircleDirective,
    RaphaelRectDirective,
@@ -42,5 +49,7 @@ export const RAPHAEL_DIRECTIVES: any[] = [
    RaphaelCrossDirective,
    RaphaelPlusDirective,
    RaphaelRhombusDirective,
-    RaphaelPentagonDirective
+    RaphaelPentagonDirective,
+    RaphaelIconServiceDirective,
+    RaphaelIconSendDirective
 ];
@@ -0,0 +1,55 @@
+/*!
+ * @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 { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Point } from './models/point';
+import { RaphaelBase } from './raphael-base';
+import { RaphaelService } from './raphael.service';
+
+@Directive({selector: 'raphael-icon-send'})
+export class RaphaelIconSendDirective extends RaphaelBase implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    position: Point;
+
+    @Input()
+    text: string;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                raphaelService: RaphaelService) {
+        super(elementRef, raphaelService);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        this.draw(this.position);
+    }
+
+    public draw(position: Point) {
+        let path1 = this.paper.path(`M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15
+            L 17 15 L 12 10 L 9 13 L 6 10 z`).attr({
+            'stroke': 'none',
+            'fill': '#16964d'
+        });
+        return path1.transform('T' + position.x + ',' + position.y);
+    }
+}
@@ -0,0 +1,72 @@
+/*!
+ * @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 { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Point } from './models/point';
+import { RaphaelBase } from './raphael-base';
+import { RaphaelService } from './raphael.service';
+
+@Directive({selector: 'raphael-icon-service'})
+export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    position: Point;
+
+    @Input()
+    text: string;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                raphaelService: RaphaelService) {
+        super(elementRef, raphaelService);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        this.draw(this.position);
+    }
+
+    public draw(position: Point) {
+        let path1 = this.paper.path('M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375' +
+            ' 6.6676654,3.4929791 6.3336971,3.6092802 6.03125,3.78125 6.02349,3.78566 6.007733,3.77681 6,3.78125 5.8811373,3.761018' +
+            ' 5.8125,3.71875 5.8125,3.71875 l -1.6875,-1 -1.40625,1.4375 0.96875,1.65625 c 0,0 0.065705,0.068637 0.09375,0.1875' +
+            ' 0.002,0.00849 -0.00169,0.022138 0,0.03125 C 3.6092802,6.3336971 3.4929791,6.6676654 3.375,7 3.3629836,7.0338489' +
+            ' 3.3239228,7.0596246 3.3125,7.09375 3.125763,7.4756184 2.875,7.5 2.875,7.5 L 1,8 l 0,2 1.875,0.5 c 0,0 0.250763,0.02438' +
+            ' 0.4375,0.40625 0.017853,0.03651 0.046318,0.04988 0.0625,0.09375 0.1129372,0.318132 0.2124732,0.646641 0.375,0.9375' +
+            ' -0.00302,0.215512 -0.09375,0.34375 -0.09375,0.34375 L 2.6875,13.9375 4.09375,15.34375 5.78125,14.375 c 0,0' +
+            ' 0.1229911,-0.09744 0.34375,-0.09375 0.2720511,0.147787 0.5795915,0.23888 0.875,0.34375 0.033849,0.01202 0.059625,0.05108' +
+            ' 0.09375,0.0625 C 7.4756199,14.874237 7.5,15.125 7.5,15.125 L 8,17 l 2,0 0.5,-1.875 c 0,0 0.02438,-0.250763 0.40625,-0.4375' +
+            ' 0.03651,-0.01785 0.04988,-0.04632 0.09375,-0.0625 0.332335,-0.117979 0.666303,-0.23428 0.96875,-0.40625 0.177303,0.0173' +
+            ' 0.28125,0.09375 0.28125,0.09375 l 1.65625,0.96875 1.40625,-1.40625 -0.96875,-1.65625 c 0,0 -0.07645,-0.103947' +
+            ' -0.09375,-0.28125 0.162527,-0.290859 0.262063,-0.619368 0.375,-0.9375 0.01618,-0.04387 0.04465,-0.05724 0.0625,-0.09375 C' +
+            ' 14.874237,10.52438 15.125,10.5 15.125,10.5 L 17,10 17,8 15.125,7.5 c 0,0 -0.250763,-0.024382 -0.4375,-0.40625 C' +
+            ' 14.669647,7.0572406 14.641181,7.0438697 14.625,7 14.55912,6.8144282 14.520616,6.6141566 14.4375,6.4375 c -0.224363,-0.4866' +
+            ' 0,-0.71875 0,-0.71875 L 15.40625,4.0625 14,2.625 l -1.65625,1 c 0,0 -0.253337,0.1695664 -0.71875,-0.03125 l -0.03125,0 C' +
+            ' 11.405359,3.5035185 11.198648,3.4455201 11,3.375 10.95613,3.3588185 10.942759,3.3303534 10.90625,3.3125 10.524382,3.125763' +
+            ' 10.5,2.875 10.5,2.875 L 10,1 8,1 z m 1,5 c 1.656854,0 3,1.3431458 3,3 0,1.656854 -1.343146,3 -3,3 C 7.3431458,12' +
+            ' 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z').attr({
+            'opacity': 1,
+            'stroke': 'none',
+            'fill': '#72a7d0'
+        });
+        return path1.transform('T' + position.x + ',' + position.y);
+    }
+}
				`@@ -0,0 +1 @@`
				`<raphael-icon-send [position]="position"></raphael-icon-send>`
				`@@ -0,0 +1 @@`
				`<raphael-icon-service [position]="position"></raphael-icon-service>`