From a7d839c41dbe1ef34d52f88e140006f9851116c8 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Mon, 17 Oct 2016 16:43:17 +0100 Subject: [PATCH] Create Raphael Component --- .../src/components/raphael/index.ts | 34 ++++++++ .../src/components/raphael/models/point.ts | 26 ++++++ .../src/components/raphael/raphael-base.ts | 70 ++++++++++++++++ .../raphael/raphael-circle.component.ts | 53 ++++++++++++ .../raphael/raphael-flow-arrow.component.ts | 80 +++++++++++++++++++ .../raphael/raphael-rect.component.ts | 55 +++++++++++++ .../raphael/raphael-text.component.ts | 50 ++++++++++++ 7 files changed, 368 insertions(+) create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/models/point.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts new file mode 100644 index 0000000000..8735c53d4e --- /dev/null +++ b/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 +]; diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/models/point.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/models/point.ts new file mode 100644 index 0000000000..58bc45a87e --- /dev/null +++ b/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; + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts new file mode 100644 index 0000000000..b7d4ff5432 --- /dev/null +++ b/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); + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts new file mode 100644 index 0000000000..c3fe256688 --- /dev/null +++ b/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; + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts new file mode 100644 index 0000000000..c2277ef508 --- /dev/null +++ b/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'); + + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts new file mode 100644 index 0000000000..eff4571c83 --- /dev/null +++ b/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); + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts new file mode 100644 index 0000000000..66fb7751c1 --- /dev/null +++ b/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' + }); + } +}