From f92ab024ce17edca350e8ae0501d8ec160489ca3 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 2 Nov 2016 10:41:35 +0000 Subject: [PATCH] Add Flow component unit test --- .../ng2-activiti-diagrams/assets/Polyline.js | 372 ++++++++++++++++++ .../ng2-activiti-diagrams/karma.conf.js | 1 + .../src/assets/diagramFlows.mock.ts | 24 ++ .../src/components/diagram.component.spec.ts | 31 ++ 4 files changed, 428 insertions(+) create mode 100644 ng2-components/ng2-activiti-diagrams/assets/Polyline.js create mode 100644 ng2-components/ng2-activiti-diagrams/src/assets/diagramFlows.mock.ts diff --git a/ng2-components/ng2-activiti-diagrams/assets/Polyline.js b/ng2-components/ng2-activiti-diagrams/assets/Polyline.js new file mode 100644 index 0000000000..9983929cf1 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/assets/Polyline.js @@ -0,0 +1,372 @@ +/** + * Class to generate polyline + * + * @author Dmitry Farafonov + */ + +var ANCHOR_TYPE= { + main: "main", + middle: "middle", + first: "first", + last: "last" +}; + +function Anchor(uuid, type, x, y) { + this.uuid = uuid; + this.x = x; + this.y = y; + this.type = (type == ANCHOR_TYPE.middle) ? ANCHOR_TYPE.middle : ANCHOR_TYPE.main; +}; +Anchor.prototype = { + uuid: null, + x: 0, + y: 0, + type: ANCHOR_TYPE.main, + isFirst: false, + isLast: false, + ndex: 0, + typeIndex: 0 +}; + +function Polyline(uuid, points, strokeWidth, paper) { + /* Array on coordinates: + * points: [{x: 410, y: 110}, 1 + * {x: 570, y: 110}, 1 2 + * {x: 620, y: 240}, 2 3 + * {x: 750, y: 270}, 3 4 + * {x: 650, y: 370}]; 4 + */ + this.points = points; + + /* + * path for graph + * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]] + */ + this.path = []; + + this.anchors = []; + + if (strokeWidth) this.strokeWidth = strokeWidth; + + this.paper = paper; + + this.closePath = false; + + this.init(); +}; + +Polyline.prototype = { + id: null, + points: [], + path: [], + anchors: [], + strokeWidth: 1, + radius: 1, + showDetails: false, + paper: null, + element: null, + isDefaultConditionAvailable: false, + closePath: false, + + init: function(points){ + var linesCount = this.getLinesCount(); + if (linesCount < 1) + return; + + this.normalizeCoordinates(); + + // create anchors + + this.pushAnchor(ANCHOR_TYPE.first, this.getLine(0).x1, this.getLine(0).y1); + + for (var i = 1; i < linesCount; i++) + { + var line1 = this.getLine(i-1); + this.pushAnchor(ANCHOR_TYPE.main, line1.x2, line1.y2); + } + + this.pushAnchor(ANCHOR_TYPE.last, this.getLine(linesCount-1).x2, this.getLine(linesCount-1).y2); + + this.rebuildPath(); + }, + + normalizeCoordinates: function(){ + for(var i=0; i < this.points.length; i++){ + this.points[i].x = parseFloat(this.points[i].x); + this.points[i].y = parseFloat(this.points[i].y); + } + }, + + getLinesCount: function(){ + return this.points.length-1; + }, + _getLine: function(i){ + if (this.points.length > i && this.points[i]) { + return {x1: this.points[i].x, y1: this.points[i].y, x2: this.points[i+1].x, y2: this.points[i+1].y}; + } else { + return undefined; + } + }, + getLine: function(i){ + var line = this._getLine(i); + if (line != undefined) { + line.angle = this.getLineAngle(i); + } + return line; + }, + getLineAngle: function(i){ + var line = this._getLine(i); + return Math.atan2(line.y2 - line.y1, line.x2 - line.x1); + }, + getLineLengthX: function(i){ + var line = this.getLine(i); + return (line.x2 - line.x1); + }, + getLineLengthY: function(i){ + var line = this.getLine(i); + return (line.y2 - line.y1); + }, + getLineLength: function(i){ + return Math.sqrt(Math.pow(this.getLineLengthX(i), 2) + Math.pow(this.getLineLengthY(i), 2)); + }, + + getAnchors: function(){ + return this.anchors; + }, + getAnchorsCount: function(type){ + if (!type) + return this.anchors.length; + else { + var count = 0; + for(var i=0; i < this.getAnchorsCount(); i++){ + var anchor = this.anchors[i]; + if (anchor.getType() == type) { + count++; + } + } + return count; + } + }, + + pushAnchor: function(type, x, y, index){ + if (type == ANCHOR_TYPE.first) { + index = 0; + typeIndex = 0; + } else if (type == ANCHOR_TYPE.last) { + index = this.getAnchorsCount(); + typeIndex = 0; + } else if (!index) { + index = this.anchors.length; + } else { + for(var i=0; i < this.getAnchorsCount(); i++){ + var anchor = this.anchors[i]; + if (anchor.index > index) { + anchor.index++; + anchor.typeIndex++; + } + } + } + + var anchor = new Anchor(this.id, ANCHOR_TYPE.main, x, y, index, typeIndex); + + this.anchors.push(anchor); + }, + + getAnchor: function(position){ + return this.anchors[position]; + }, + + getAnchorByType: function(type, position){ + if (type == ANCHOR_TYPE.first) + return this.anchors[0]; + if (type == ANCHOR_TYPE.last) + return this.anchors[this.getAnchorsCount()-1]; + + for(var i=0; i < this.getAnchorsCount(); i++){ + var anchor = this.anchors[i]; + if (anchor.type == type) { + if( position == anchor.position) + return anchor; + } + } + return null; + }, + + addNewPoint: function(position, x, y){ + // + for(var i = 0; i < this.getLinesCount(); i++){ + var line = this.getLine(i); + if (x > line.x1 && x < line.x2 && y > line.y1 && y < line.y2) { + this.points.splice(i+1,0,{x: x, y: y}); + break; + } + } + + this.rebuildPath(); + }, + + rebuildPath: function(){ + var path = []; + + for(var i = 0; i < this.getAnchorsCount(); i++){ + var anchor = this.getAnchor(i); + + var pathType = ""; + if (i == 0) + pathType = "M"; + else + pathType = "L"; + + // TODO: save previous points and calculate new path just if points are updated, and then save currents values as previous + + var targetX = anchor.x, targetY = anchor.y; + if (i>0 && i < this.getAnchorsCount()-1) { + // get new x,y + var cx = anchor.x, cy = anchor.y; + + // pivot point of prev line + var AO = this.getLineLength(i-1); + if (AO < this.radius) { + AO = this.radius; + } + + this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10)); + + var ED = this.getLineLengthY(i-1) * this.radius / AO; + var OD = this.getLineLengthX(i-1) * this.radius / AO; + targetX = anchor.x - OD; + targetY = anchor.y - ED; + + if (AO < 2*this.radius && i>1) { + targetX = anchor.x - this.getLineLengthX(i-1)/2; + targetY = anchor.y - this.getLineLengthY(i-1)/2;; + } + + // pivot point of next line + var AO = this.getLineLength(i); + if (AO < this.radius) { + AO = this.radius; + } + var ED = this.getLineLengthY(i) * this.radius / AO; + var OD = this.getLineLengthX(i) * this.radius / AO; + var nextSrcX = anchor.x + OD; + var nextSrcY = anchor.y + ED; + + if (AO < 2*this.radius && i 10)); + } + + // anti smoothing + if (this.strokeWidth%2 == 1) { + targetX += 0.5; + targetY += 0.5; + } + + path.push([pathType, targetX, targetY]); + + if (i>0 && i < this.getAnchorsCount()-1) { + path.push(["C", ax, ay, bx, by, zx, zy]); + } + } + + if (this.closePath) + { + path.push(["Z"]); + } + + this.path = path; + }, + + transform: function(transformation) + { + this.element.transform(transformation); + }, + attr: function(attrs) + { + // TODO: foreach and set each + this.element.attr(attrs); + } +}; + +function Polygone(points, strokeWidth) { + /* Array on coordinates: + * points: [{x: 410, y: 110}, 1 + * {x: 570, y: 110}, 1 2 + * {x: 620, y: 240}, 2 3 + * {x: 750, y: 270}, 3 4 + * {x: 650, y: 370}]; 4 + */ + this.points = points; + + /* + * path for graph + * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]] + */ + this.path = []; + + this.anchors = []; + + if (strokeWidth) this.strokeWidth = strokeWidth; + + this.closePath = true; + this.init(); +}; + + +/* + * Poligone is inherited from Poliline: draws closedPath of polyline + */ + +var Foo = function () { }; +Foo.prototype = Polyline.prototype; + +Polygone.prototype = new Foo(); + +Polygone.prototype.rebuildPath = function(){ + var path = []; + for(var i = 0; i < this.getAnchorsCount(); i++){ + var anchor = this.getAnchor(i); + + var pathType = ""; + if (i == 0) + pathType = "M"; + else + pathType = "L"; + + var targetX = anchor.x, targetY = anchor.y; + + // anti smoothing + if (this.strokeWidth%2 == 1) { + targetX += 0.5; + targetY += 0.5; + } + + path.push([pathType, targetX, targetY]); + } + if (this.closePath) + path.push(["Z"]); + + this.path = path; +}; \ No newline at end of file diff --git a/ng2-components/ng2-activiti-diagrams/karma.conf.js b/ng2-components/ng2-activiti-diagrams/karma.conf.js index 5b088f0af2..2806957c37 100644 --- a/ng2-components/ng2-activiti-diagrams/karma.conf.js +++ b/ng2-components/ng2-activiti-diagrams/karma.conf.js @@ -34,6 +34,7 @@ module.exports = function (config) { 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', 'node_modules/raphael/raphael.min.js', + 'assets/Polyline.js', {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false}, 'karma-test-shim.js', diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramFlows.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramFlows.mock.ts new file mode 100644 index 0000000000..68a3b32b68 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramFlows.mock.ts @@ -0,0 +1,24 @@ +/*! + * @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 let flow = { + id: 'sid-5BA99724-A3BD-4F8E-B69F-222F9FF66335', + sourceRef: 'startEvent1', + targetRef: 'sid-811B9223-E72E-4991-AAA5-4E1A01095D08', + type: 'sequenceFlow', + waypoints: [{x: 165, y: 122}, {x: 210, y: 122}] +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts index 7587452688..67a9b0ebcc 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts @@ -32,6 +32,7 @@ import * as boundaryEventMock from '../assets/diagramBoundary.mock'; import * as throwEventMock from '../assets/diagramThrow.mock'; import * as structuralMock from '../assets/diagramStructural.mock'; import * as swimLanesMock from '../assets/diagramSwimlanes.mock'; +import * as flowsMock from '../assets/diagramFlows.mock'; declare let jasmine: any; @@ -1218,4 +1219,34 @@ describe('Test ng2-activiti-diagrams ', () => { }); })); }); + + describe('Diagrams component Flows: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processDefinitionId = 'fakeprocess:24:38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the flow', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow'); + expect(shape).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {flows: [flowsMock.flow]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); });