Create Raphael Component

ng2-components/ng2-activiti-analytics/src/components/raphael/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 { RaphaelCircleDirective } from './raphael-circle.component';
+import { RaphaelRectDirective } from './raphael-rect.component';
+import { RaphaelTextDirective } from './raphael-text.component';
+import { RaphaelFlowArrowDirective } from './raphael-flow-arrow.component';
+
+// primitives
+export * from './raphael-circle.component';
+export * from './raphael-rect.component';
+export * from './raphael-text.component';
+export * from './raphael-flow-arrow.component';
+
+export const RAPHAEL_DIRECTIVES: any[] = [
+    RaphaelCircleDirective,
+    RaphaelRectDirective,
+    RaphaelTextDirective,
+    RaphaelFlowArrowDirective
+];

ng2-components/ng2-activiti-analytics/src/components/raphael/models/point.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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.
+ */
+
+export class Point {
+    x: number;
+    y: number;
+
+    constructor(obj?: any) {
+        this.x = obj && obj.x || 0;
+        this.y = obj && obj.y || 0;
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts

@@ -0,0 +1,70 @@
+/*!
+ * @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 {
+    OnDestroy,
+    OnInit,
+    Input,
+    ElementRef
+} from '@angular/core';
+
+declare let Raphael: any;
+
+export class RaphaelBase implements OnDestroy, OnInit {
+    @Input()
+    paper: any;
+
+    private ctx: any;
+
+    private initFlag: boolean = false;
+
+    private element: ElementRef;
+
+    public constructor(element: ElementRef) {
+        this.element = element;
+    }
+
+    public ngOnInit(): any {
+        if (!this.paper) {
+            this.ctx = this.element.nativeElement;
+            this.initFlag = true;
+            this.refresh();
+        }
+    }
+
+    public ngOnDestroy(): any {
+        if (this.paper) {
+            this.paper.clear();
+            this.paper = void 0;
+        }
+    }
+
+    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);
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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';
+
+@Directive({selector: 'raphael-circle'})
+export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    center: Point;
+
+    @Input()
+    radius: number;
+
+    @Input()
+    strokeWith: number;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {
+        super(elementRef);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        let opts = {'stroke-width': this.strokeWith};
+        this.draw(this.center, this.radius, opts);
+    }
+
+    public draw(center: Point, radius: number, opts: any) {
+        let circle = this.paper.circle(center.x, center.y, radius).attr(opts);
+        return circle;
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts

@@ -0,0 +1,80 @@
+/*!
+ * @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 { RaphaelBase } from './raphael-base';
+
+declare let Raphael: any;
+declare let Polyline: any;
+
+@Directive({selector: 'raphael-flow-arrow'})
+export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    flow: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    ARROW_WIDTH = 4;
+    SEQUENCEFLOW_STROKE = 1.5;
+
+    constructor(public elementRef: ElementRef) {
+        super(elementRef);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        this.draw(this.flow);
+    }
+
+    public draw(flow: any) {
+        let line = this.drawLine(flow);
+        this.drawArrow(line);
+    }
+
+    public drawLine(flow: any) {
+        let polyline = new Polyline(flow.id, flow.waypoints, this.SEQUENCEFLOW_STROKE, this.paper);
+        polyline.element = this.paper.path(polyline.path);
+        polyline.element.attr({'stroke-width': this.SEQUENCEFLOW_STROKE});
+        polyline.element.attr({'stroke': '#585858'});
+
+        polyline.element.id = this.flow.id;
+
+        let lastLineIndex = polyline.getLinesCount() - 1;
+        let line = polyline.getLine(lastLineIndex);
+        return line;
+    }
+
+    public drawArrow(line: any) {
+        let doubleArrowWidth = 2 * this.ARROW_WIDTH;
+        let width = this.ARROW_WIDTH / 2 + .5;
+        let arrowHead: any = this.paper.path('M0 0L-' + width + '-' + doubleArrowWidth + 'L' + width + ' -' + doubleArrowWidth + 'z');
+
+        arrowHead.transform('t' + line.x2 + ',' + line.y2);
+        let angle = Raphael.deg(line.angle - Math.PI / 2);
+        arrowHead.transform('...r' + angle + ' 0 0');
+
+        arrowHead.attr('fill', '#585858');
+
+        arrowHead.attr('stroke-width', this.SEQUENCEFLOW_STROKE);
+        arrowHead.attr('stroke', '#585858');
+
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts

@@ -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';
+
+@Directive({selector: 'raphael-rect'})
+export class RaphaelRectDirective implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    leftCorner: Point;
+
+    @Input()
+    width: number;
+
+    @Input()
+    height: number;
+
+    @Input()
+    radius: number = 0;
+
+    @Input()
+    strokeWith: number;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        let opts = {'stroke-width': this.strokeWith};
+        this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
+    }
+
+    public draw(leftCorner: Point, width: number, height: number, radius: number, opts: any) {
+        return this.paper.rect(leftCorner.x, leftCorner.y, width, height, radius).attr(opts);
+    }
+}

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

@@ -0,0 +1,50 @@
+/*!
+ * @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';
+
+@Directive({selector: 'raphael-text'})
+export class RaphaelTextDirective implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    position: Point;
+
+    @Input()
+    text: string;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        this.draw(this.position, this.text);
+    }
+
+    public draw(position: Point, text: string) {
+        return this.paper.text(position.x, position.y, text).attr({
+            'text-anchor' : 'middle',
+            'font-family' : 'Arial',
+            'font-size' : '11',
+            'fill' : '#373e48'
+        });
+    }
+}