Create Diagram Component that use Raphael Component

2026-09-09 18:03:21 +00:00 · 2016-10-31 10:29:33 +00:00
parent a7d839c41d
commit 93fa17959a
9 changed files with 349 additions and 0 deletions
@@ -0,0 +1 @@
+<raphael-circle [paper]="paper" [center]="center" [radius]="radius" [strokeWith]="strokeWidth"></raphael-circle>
@@ -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);
+    }
+}
@@ -0,0 +1 @@
+<raphael-flow-arrow [paper]="paper" [flow]="flow"></raphael-flow-arrow>
@@ -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);
+    }
+}
@@ -0,0 +1,2 @@
+<raphael-rect [paper]="paper" [leftCorner]="rect" [width]="data.width" [height]="data.height" [radius]="radius"></raphael-rect>
+<raphael-text [paper]="paper" [text]="data.name" [position]="textPosition"></raphael-text>
@@ -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)';
+    }
+}
@@ -0,0 +1,26 @@
+<div *ngIf="diagram">
+    <div *ngFor="let element of diagram.elements">
+        <div [ngSwitch]="element.type">
+            <div *ngSwitchCase="'StartEvent'">
+                <diagram-event [paper]="paper" [data]="element" [radius]="15" [strokeWidth]="1"></diagram-event>
+            </div>
+        </div>
+        <div [ngSwitch]="element.type">
+            <div *ngSwitchCase="'EndEvent'">
+                <diagram-event [paper]="paper" [data]="element" [radius]="14" [strokeWidth]="4"></diagram-event>
+            </div>
+        </div>
+        <div [ngSwitch]="element.type">
+            <div *ngSwitchCase="'UserTask'">
+                <diagram-task [paper]="paper" [data]="element" [type]="element.type"></diagram-task>
+            </div>
+        </div>
+    </div>
+    <div *ngFor="let flow of diagram.flows">
+        <div [ngSwitch]="flow.type">
+            <div *ngSwitchCase="'sequenceFlow'">
+                <diagram-sequence-flow [paper]="paper" [flow]="flow"></diagram-sequence-flow>
+            </div>
+        </div>
+    </div>
+</div>
@@ -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;
+        }
+    }
+}
@@ -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
+];
				`@@ -0,0 +1 @@`
				`<raphael-circle [paper]="paper" [center]="center" [radius]="radius" [strokeWith]="strokeWidth"></raphael-circle>`
				`@@ -0,0 +1 @@`
				`<raphael-flow-arrow [paper]="paper" [flow]="flow"></raphael-flow-arrow>`