test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(lint): resolve eslint

Browse Source
This commit is contained in:
xiaoqing.dongxq 2018-12-28 11:05:32 +08:00
parent 91d018ba20
commit 2d365e99d8
15 changed files with 560 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -4,4 +4,4 @@ lib/
dist/
mocks/
node_modules/
demos/assets/
demos/

5
package.json
View File

@ -92,9 +92,8 @@
"demos-web": "node ./demos/app.js --web --port 2046",
"dev": "npm run watch & npm run demos-web",
"publish": "node ./bin/publish.js",
"lint": "eslint --ext .js ./src,./test",
"cdn": "antv-bin upload -n @antv/g6",
"lint-fix": "eslint --ext .html,.js --fix ./src,./test",
"lint": "eslint --ext .js ./",
"lint-fix": "eslint --ext .html,.js --fix ./",
"prepublishOnly": "npm run build-lib && npm run build",
"screenshot": "node ./bin/screenshot.js",
"start": "npm run dev",

8
src/behavior/drag-canvas.js
View File

@ -1,8 +0,0 @@
module.exports = {
bind(graph){
},
unbind(graph){
}
};

2
src/graph/controller/mode.js
View File

@ -27,7 +27,7 @@ class Mode {
constructor(graph) {
this.graph = graph;
this.modes = graph.get('modes') || {
default: []
default: []
};
this._formatModes();
this.mode = graph.get('defaultMode') || 'default';

17
src/item/item.js
View File

@ -64,19 +64,32 @@ class Item {
cfg.id = Util.uniqueId();
group.set('id', cfg.id);
}
this._cfg.model = cfg;
this.set('model', cfg);
this.set('id', cfg.id);
this.set('group', group);
group.item = this;
this.init();
this.draw();
}
getDefaultCfg() {}
/**
* 获取默认的配置项
* @protected 供子类复写
* @return {Object} 配置项
*/
getDefaultCfg() {
return {};
}
/**
* 初始化
* @protected
*/
init() {
}
// 根据 keyshape 计算包围盒
_calculateBBox() {
const keyShape = this.get('keyShape');
const group = this.group;
// 因为 group 可能会
const bbox = Util.getBBox(keyShape, group);
bbox.width = bbox.maxX - bbox.minX;
bbox.height = bbox.maxY - bbox.minY;

2
src/item/node.js
View File

@ -18,7 +18,7 @@ class Node extends Item {
getNeighbors() {
const nodes = [];
let node = null;
Util.each(this.get('edges'), (edge) => {
Util.each(this.get('edges'), edge => {
if (edge.get('source') === this) {
node = edge.get('target');
} else {

12
src/shape/edge.js
View File

@ -17,7 +17,7 @@ function revertAlign(labelPosition) {
let textAlign = labelPosition;
if (labelPosition === 'start') {
textAlign = 'end';
} else if(labelPosition === 'end') {
} else if (labelPosition === 'end') {
textAlign = 'start';
}
return textAlign;
@ -105,7 +105,7 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
}
const autoRotate = Util.isNil(labelCfg.autoRotate) ? this.labelAutoRotate : labelCfg.autoRotate;
const tangent = [];
vec2.normalize(tangent, [nextPoint.x - firstPoint.x, nextPoint.y - firstPoint.y]); // 求切线
vec2.normalize(tangent, [ nextPoint.x - firstPoint.x, nextPoint.y - firstPoint.y ]); // 求切线
const { refX, refY } = labelCfg; // 默认的偏移量
if (refX || refY) { // 进行偏移时，求偏移向量
const offset = this._getOffset(refX, refY, tangent);
@ -115,7 +115,7 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
style.x = point.x;
style.y = point.y;
}
const angle = vec2.angleTo([1, 0], tangent);
const angle = vec2.angleTo([ 1, 0 ], tangent);
const textAlign = this._getTextAlign(labelPosition, angle, autoRotate);
style.textAlign = textAlign;
if (autoRotate) {
@ -126,7 +126,7 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
},
// 根据相对偏移量
_getOffset(refX, refY, tangent) {
const perpendicular = [-tangent[1], tangent[0]]; // (x,y) 顺时针方向的垂直线 (-y, x);
const perpendicular = [ -tangent[1], tangent[0] ]; // (x,y) 顺时针方向的垂直线 (-y, x);
const out = []; // gl-matrix 的接口定义如果返回结果是 vector ， xxx(out, a, b); 所以必须事先定义返回量
const xVector = [];
const yVector = [];
@ -158,9 +158,9 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
let textAlign = 'center';
angle = angle % (Math.PI * 2); // 取模
if (labelPosition !== 'center') {
if((angle >= 0 && angle <= Math.PI / 2) || (angle > 3 / 2 * Math.PI && angle < 2 * Math.PI)) {
if ((angle >= 0 && angle <= Math.PI / 2) || (angle > 3 / 2 * Math.PI && angle < 2 * Math.PI)) {
textAlign = labelPosition;
}else {
} else {
textAlign = revertAlign(labelPosition);
}
}

1
src/shape/single-shape-mixin.js
View File

@ -57,6 +57,7 @@ const SingleShape = {
* 获取文本的配置项
* @internal 用户创建和更新节点/边时，同时会更新文本
* @param {Object} cfg 节点的配置项
* @param {Object} labelCfg 文本的配置项
* @param {G.Group} group 父容器，label 的定位可能与图形相关
* @return {Object} 图形的配置项
*/

2
test/unit/behavior/behavior-spec.js
View File

@ -29,7 +29,7 @@ describe('behavior', () => {
expect(this.get('aaa')).to.equal(111);
expect(this.get('bbb')).to.equal(222);
},
unbind(){
unbind() {
flag = false;
expect(this.get('aaa')).to.equal(111);
expect(this.get('bbb')).to.equal(222);

8
test/unit/graph/controller/event-spec.js
View File

@ -26,7 +26,7 @@ describe('event', () => {
graph.on('canvas:click', e => {
a = e.a;
});
graph.emit('canvas:click', { a: 1});
graph.emit('canvas:click', { a: 1 });
canvas.emit('click', { a: 1, target: canvas, type: 'click' });
expect(a).to.equal(1);
});
@ -53,16 +53,16 @@ describe('event', () => {
graph.on('node:mousedown', e => { target = e.target; });
canvas.emit('mousedown', { type: 'mousedown', target: shape });
expect(target === node).to.be.true;
target = null;
target = null;
graph.removeEvent('node:mousedown');
canvas.emit('mousedown', { type: 'mousedown', target: shape });
expect(target).to.be.null;
});
it('dom event', () => {
let evt = null;
const fn = (e) => {
const fn = e => {
evt = e;
}
};
graph.on('keydown', fn);
const canvas = graph.get('canvas').get('el');
const bbox = canvas.getBoundingClientRect();

8
test/unit/graph/controller/mode-spec.js
View File

@ -26,7 +26,7 @@ describe('mode', () => {
width: 500,
height: 500,
pixelRatio: 2,
modes: {
modes: {
default: [],
custom: []
}
@ -55,7 +55,7 @@ describe('mode', () => {
let triggered = false;
const modeController = graph.get('modeController');
expect(Object.keys(modeController.modes).length).to.equal(2);
G6.registerBehavior('aa', { bind() { triggered = true; }, unbind() { triggered = false;} });
G6.registerBehavior('aa', { bind() { triggered = true; }, unbind() { triggered = false; } });
G6.registerBehavior('bb', { bind() {}, unbind() {} });
modeController.manipulateBehaviors('aa', undefined, true);
modeController.manipulateBehaviors('bb', undefined, true);
@ -84,14 +84,14 @@ describe('mode', () => {
});
const modeController = graph.get('modeController');
expect(Object.keys(modeController.modes).length).to.equal(3);
modeController.manipulateBehaviors(['aa', 'bb'], ['custom1', 'custom2'], true);
modeController.manipulateBehaviors([ 'aa', 'bb' ], [ 'custom1', 'custom2' ], true);
expect(modeController.modes.custom1.length).to.equal(2);
expect(modeController.modes.custom2.length).to.equal(2);
expect(modeController.modes.custom1[0].type).to.equal('aa');
expect(modeController.modes.custom1[1].type).to.equal('bb');
expect(modeController.modes.custom2[0].type).to.equal('aa');
expect(modeController.modes.custom2[1].type).to.equal('bb');
modeController.manipulateBehaviors(['aa'], ['custom1', 'custom2'], false);
modeController.manipulateBehaviors([ 'aa' ], [ 'custom1', 'custom2' ], false);
expect(modeController.modes.custom1.length).to.equal(1);
expect(modeController.modes.custom2.length).to.equal(1);
expect(modeController.modes.custom1[0].type).to.equal('bb');

4
test/unit/graph/graph-spec.js
View File

@ -1,6 +1,6 @@
const expect = require('chai').expect;
const G6 = require('../../../src');
const Util = require('../../../src/util');
// const Util = require('../../../src/util');
const div = document.createElement('div');
div.id = 'graph-spec';
@ -71,7 +71,7 @@ describe('graph', () => {
graph.destroy();
});
it('add node', () => {
const node = graph.add('node', { type: 'circle', color: '#ccc', style: { x: 50, y: 50, r: 20, lineWidth: 2} });
const node = graph.add('node', { type: 'circle', color: '#ccc', style: { x: 50, y: 50, r: 20, lineWidth: 2 } });
expect(node).not.to.be.undefined;
expect(graph.node.length).to.equal(1);
expect(graph.node[0]).to.equal(node);

2
test/unit/item/node-spec.js
View File

@ -9,7 +9,7 @@ document.body.appendChild(div);
describe('node', () => {
it('new & destroy node', () => {
const parent = new G.Group();
const node = new Node({x: 0, y: 0, id: 'a', color: '#ccc' }, parent);
const node = new Node({ x: 0, y: 0, id: 'a', color: '#ccc' }, parent);
const group = node.get('group');
expect(node).not.to.be.undefined;
expect(node.getType()).to.equal('node');

921
test/unit/shape/edge-spec.js
View File

@ -1,10 +1,7 @@
const {Canvas, Group} = require('@antv/g');
const { Canvas } = require('@antv/g');
const Shape = require('../../../src/shape/shape');
const Global = require('../../../src/global');
require('../../../src/shape/edge');
const expect = require('chai').expect;
const Util = require('../../../src/util/');
const vec2 = Util.vec2;
const div = document.createElement('div');
div.id = 'edge-shape';
document.body.appendChild(div);
@ -16,495 +13,483 @@ const canvas = new Canvas({
});
describe('shape edge test', () => {
describe('basic method test', () => {
it('get factory',() => {
const factory = Shape.getFactory('edge');
expect(factory).not.eql(undefined);
});
it('get default', () => {
const factory = Shape.getFactory('edge');
const shape = factory.getShape();
expect(shape.type).eql('line');
});
});
describe('basic method test', () => {
it('get factory', () => {
const factory = Shape.getFactory('edge');
expect(factory).not.eql(undefined);
});
it('get default', () => {
const factory = Shape.getFactory('edge');
const shape = factory.getShape();
expect(shape.type).eql('line');
});
});
describe('line test', () => {
const factory = Shape.getFactory('edge');
it('line without label', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: {x: 50, y: 50},
endPoint: {x: 100, y: 100},
color: 'red'
}, group);
canvas.draw();
const path = shape.attr('path');
expect(shape.attr('stroke')).eql('red');
expect(path.length).eql(2);
expect(path[0]).eqls(['M', 50, 50]);
expect(group.getCount()).eql(1);
});
describe('line test', () => {
const factory = Shape.getFactory('edge');
it('line with label', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: {x: 150, y: 50},
endPoint: {x: 100, y: 100},
color: 'blue',
label: '这是一条线'
}, group);
expect(shape.attr('path').length).eql(2);
const label = group.get('children')[1];
expect(label.attr('x')).eql((100 + 150) / 2);
expect(label.attr('y')).eql((100 + 50) / 2);
expect(group.getCount()).eql(2);
const item = {
getContainer: function() {
return group;
},
get(name) {
return '';
}
};
factory.update('shape', {
startPoint: {x: 150, y: 50},
endPoint: {x: 100, y: 100},
color: 'blue',
label: '这是一条线',
labelCfg: {
position: 'start'
}
}, item);
canvas.draw();
expect(label.attr('x')).eql(150);
expect(label.attr('y')).eql(50);
factory.update('shape', {
startPoint: {x: 150, y: 50},
endPoint: {x: 100, y: 100},
color: 'blue',
label: '这是一条线',
it('line without label', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: { x: 50, y: 50 },
endPoint: { x: 100, y: 100 },
color: 'red'
}, group);
canvas.draw();
const path = shape.attr('path');
expect(shape.attr('stroke')).eql('red');
expect(path.length).eql(2);
expect(path[0]).eqls([ 'M', 50, 50 ]);
expect(group.getCount()).eql(1);
});
labelCfg: {
position: 'end'
}
}, item);
canvas.draw();
expect(label.attr('x')).eql(100);
expect(label.attr('y')).eql(100);
});
it('line with label', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: { x: 150, y: 50 },
endPoint: { x: 100, y: 100 },
color: 'blue',
label: '这是一条线'
}, group);
it('update points', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: {x: 200, y: 200},
endPoint: {x: 150, y: 100},
color: 'yellow',
label: '这是另一条线'
}, group);
expect(shape.attr('path')[0]).eqls(['M', 200, 200]);
expect(group.getCount()).eql(2);
const item = {
getContainer: function() {
return group;
},
get(name) {
return '';
}
};
factory.update('line', {
startPoint: {x: 300, y: 300},
endPoint: {x: 250, y: 200},
color: 'pink',
label: '这是不是另一条线'
}, item);
expect(shape.attr('path').length).eql(2);
const label = group.get('children')[1];
expect(label.attr('x')).eql((100 + 150) / 2);
expect(label.attr('y')).eql((100 + 50) / 2);
expect(group.getCount()).eql(2);
const item = {
getContainer() {
return group;
},
get() {
return '';
}
};
factory.update('shape', {
startPoint: { x: 150, y: 50 },
endPoint: { x: 100, y: 100 },
color: 'blue',
label: '这是一条线',
labelCfg: {
position: 'start'
}
}, item);
canvas.draw();
expect(label.attr('x')).eql(150);
expect(label.attr('y')).eql(50);
factory.update('shape', {
startPoint: { x: 150, y: 50 },
endPoint: { x: 100, y: 100 },
color: 'blue',
label: '这是一条线',
expect(shape.attr('path')[0]).eqls(['M', 300, 300]);
const label = group.get('children')[1];
expect(label.attr('x')).eql((300 + 250) / 2);
expect(label.attr('y')).eql((300 + 200) / 2);
labelCfg: {
position: 'end'
}
}, item);
canvas.draw();
expect(label.attr('x')).eql(100);
expect(label.attr('y')).eql(100);
});
canvas.draw();
});
it('update points', () => {
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: { x: 200, y: 200 },
endPoint: { x: 150, y: 100 },
color: 'yellow',
label: '这是另一条线'
}, group);
expect(shape.attr('path')[0]).eqls([ 'M', 200, 200 ]);
expect(group.getCount()).eql(2);
const item = {
getContainer() {
return group;
},
get() {
return '';
}
};
factory.update('line', {
startPoint: { x: 300, y: 300 },
endPoint: { x: 250, y: 200 },
color: 'pink',
label: '这是不是另一条线'
}, item);
it('polyline', () => {
const group = canvas.addGroup();
const shape = factory.draw('polyline', {
startPoint: {x: 200, y: 200},
endPoint: {x: 150, y: 100},
controlPoints: [{x: 170, y: 160}],
color: 'green',
label: '这是一条折线'
}, group);
const path = shape.attr('path');
expect(path.length).eql(3);
expect(path[1]).eql(['L', 170, 160]);
});
expect(shape.attr('path')[0]).eqls([ 'M', 300, 300 ]);
const label = group.get('children')[1];
expect(label.attr('x')).eql((300 + 250) / 2);
expect(label.attr('y')).eql((300 + 200) / 2);
it('quadratic', () => {
const group = canvas.addGroup();
const shape = factory.draw('quadratic', {
startPoint: {x: 200, y: 200},
endPoint: {x: 150, y: 100},
controlPoints: [{x: 220, y: 160}],
color: 'green',
label: '这是一条曲线'
}, group);
const path = shape.attr('path');
expect(path.length).eql(2);
expect(path[1]).eql(['Q', 220, 160, 150, 100]);
console.log(shape.getPoint(1.01));
canvas.draw();
});
canvas.draw();
});
it('cubic', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: {x: 200, y: 200},
endPoint: {x: 150, y: 100},
controlPoints: [{x: 220, y: 200}, {x: 170, y: 100}],
color: 'red'
}, group);
const path = shape.attr('path');
expect(path.length).eql(2);
expect(path[1]).eql(['C', 220, 200, 170, 100, 150, 100]);
canvas.draw();
});
it('polyline', () => {
const group = canvas.addGroup();
const shape = factory.draw('polyline', {
startPoint: { x: 200, y: 200 },
endPoint: { x: 150, y: 100 },
controlPoints: [{ x: 170, y: 160 }],
color: 'green',
label: '这是一条折线'
}, group);
const path = shape.attr('path');
expect(path.length).eql(3);
expect(path[1]).eql([ 'L', 170, 160 ]);
});
xit('angle', () => {
var v1 = [1, 0];
var v2 = [0, 1];
var v3 = [-1, 0];
var v4 = [0, -1];
var v5 = [1, -0.1];
console.log(vec2.angle(v1, v2), vec2.angleTo(v1, v2));
console.log(vec2.angle(v1, v3), vec2.angleTo(v1, v3));
console.log(vec2.angle(v1, v4), vec2.angleTo(v1, v4));
console.log(vec2.angle(v1, v5), vec2.angleTo(v1, v5));
});
it('clear', () => {
canvas.clear();
});
});
it('quadratic', () => {
const group = canvas.addGroup();
const shape = factory.draw('quadratic', {
startPoint: { x: 200, y: 200 },
endPoint: { x: 150, y: 100 },
controlPoints: [{ x: 220, y: 160 }],
color: 'green',
label: '这是一条曲线'
}, group);
const path = shape.attr('path');
expect(path.length).eql(2);
expect(path[1]).eql([ 'Q', 220, 160, 150, 100 ]);
canvas.draw();
});
describe('label align', () => {
const factory = Shape.getFactory('edge');
function getPoint(center, radius, angle) {
return {
x: center.x + radius * Math.cos(angle),
y: center.y + radius * Math.sin(angle)
};
}
it('not auto rotate, middle', () => {
var center = {x: 100, y: 100};
for(var i = 0; i < 360; i += 45) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,20, angle);
var endPoint = getPoint(center,60, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
style: {
stroke: 'white',
lineWidth: 5
}
}
}, group);
const label = group.get('children')[1];
expect(label.attr('textAlign')).eql('center');
it('cubic', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: { x: 200, y: 200 },
endPoint: { x: 150, y: 100 },
controlPoints: [{ x: 220, y: 200 }, { x: 170, y: 100 }],
color: 'red'
}, group);
const path = shape.attr('path');
expect(path.length).eql(2);
expect(path[1]).eql([ 'C', 220, 200, 170, 100, 150, 100 ]);
canvas.draw();
});
expect(label.attr('stroke')).eql('white');
}
canvas.draw();
});
it('clear', () => {
canvas.clear();
});
});
it('not auto rotate, start', () => {
var center = {x: 250, y: 100};
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
})
for(var i = 0; i < 360; i += 30) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,40, angle);
var endPoint = getPoint(center,80, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
labelCfg: {
position: 'start'
},
style: {
endArrow: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
//expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
describe('label align', () => {
const factory = Shape.getFactory('edge');
function getPoint(center, radius, angle) {
return {
x: center.x + radius * Math.cos(angle),
y: center.y + radius * Math.sin(angle)
};
}
it('not auto rotate, middle', () => {
const center = { x: 100, y: 100 };
for (let i = 0; i < 360; i += 45) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 20, angle);
const endPoint = getPoint(center, 60, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
style: {
stroke: 'white',
lineWidth: 5
}
it('not auto rotate, end', () => {
var center = {x: 450, y: 100};
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
})
for(var i = 0; i < 360; i += 30) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,40, angle);
var endPoint = getPoint(center,80, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'end'
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
//expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
}
}, group);
const label = group.get('children')[1];
expect(label.attr('textAlign')).eql('center');
expect(label.attr('stroke')).eql('white');
}
canvas.draw();
});
it('not auto rotate, start', () => {
const center = { x: 250, y: 100 };
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
});
for (let i = 0; i < 360; i += 30) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 40, angle);
const endPoint = getPoint(center, 80, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
labelCfg: {
position: 'start'
},
style: {
endArrow: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
// expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('not auto rotate, end', () => {
const center = { x: 450, y: 100 };
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
});
for (let i = 0; i < 360; i += 30) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 40, angle);
const endPoint = getPoint(center, 80, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'end'
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
// expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('auto rotate, middle', () => {
var center = {x: 100, y: 300};
for(var i = 0; i < 360; i += 45) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,20, angle);
var endPoint = getPoint(center,60, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
autoRotate: true,
}
}, group);
const label = group.get('children')[1];
expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('auto rotate, middle', () => {
const center = { x: 100, y: 300 };
for (let i = 0; i < 360; i += 45) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 20, angle);
const endPoint = getPoint(center, 60, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
autoRotate: true
}
}, group);
const label = group.get('children')[1];
expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('auto rotate, start', () => {
var center = {x: 250, y: 300};
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
})
for(var i = 0; i < 360; i += 30) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,40, angle);
var endPoint = getPoint(center,80, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'start',
autoRotate: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
//expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('auto rotate, start', () => {
const center = { x: 250, y: 300 };
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
});
for (let i = 0; i < 360; i += 30) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 40, angle);
const endPoint = getPoint(center, 80, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'start',
autoRotate: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
// expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('auto rotate, end', () => {
var center = {x: 450, y: 300};
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
})
for(var i = 0; i < 360; i += 30) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,40, angle);
var endPoint = getPoint(center,80, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'end',
autoRotate: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
const point = shape.getPoint(1);
expect(label.attr('x')).eql(point.x);
expect(label.attr('y')).eql(point.y);
}
canvas.draw();
});
it('auto rotate, end', () => {
const center = { x: 450, y: 300 };
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
});
for (let i = 0; i < 360; i += 30) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 40, angle);
const endPoint = getPoint(center, 80, angle);
const group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'end',
autoRotate: true
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
const point = shape.getPoint(1);
expect(label.attr('x')).eql(point.x);
expect(label.attr('y')).eql(point.y);
}
canvas.draw();
});
it('curve rotate center', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: {x: 100, y: 400},
endPoint: {x: 200, y: 400},
controlPoints: [{x: 120, y: 380}, {x: 160, y: 420}],
color: 'blue',
label: 'curve in center',
labelCfg: {
autoRotate: true
}
}, group);
const path = shape.attr('path');
const label = group.get('children')[1];
expect(path.length).eql(2);
const point = shape.getPoint(0.5);
expect(point.x).eql(label.attr('x'));
expect(point.y).eql(label.attr('y'));
it('curve rotate center', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: { x: 100, y: 400 },
endPoint: { x: 200, y: 400 },
controlPoints: [{ x: 120, y: 380 }, { x: 160, y: 420 }],
color: 'blue',
label: 'curve in center',
labelCfg: {
autoRotate: true
}
}, group);
const path = shape.attr('path');
const label = group.get('children')[1];
expect(path.length).eql(2);
const point = shape.getPoint(0.5);
expect(point.x).eql(label.attr('x'));
expect(point.y).eql(label.attr('y'));
canvas.draw();
});
canvas.draw();
});
it('curve rotate start', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: {x: 220, y: 400},
endPoint: {x: 320, y: 400},
controlPoints: [{x: 230, y: 380}, {x: 280, y: 420}],
color: 'blue',
label: 'start',
labelCfg: {
position: 'start',
autoRotate: true
}
}, group);
const path = shape.attr('path');
const label = group.get('children')[1];
expect(path.length).eql(2);
const point = shape.getPoint(0);
expect(point.x).eql(label.attr('x'));
expect(point.y).eql(label.attr('y'));
expect(label.attr('rotate')).not.eql(0);
canvas.draw();
});
it('curve rotate start', () => {
const group = canvas.addGroup();
const shape = factory.draw('cubic', {
startPoint: { x: 220, y: 400 },
endPoint: { x: 320, y: 400 },
controlPoints: [{ x: 230, y: 380 }, { x: 280, y: 420 }],
color: 'blue',
label: 'start',
labelCfg: {
position: 'start',
autoRotate: true
}
}, group);
const path = shape.attr('path');
const label = group.get('children')[1];
expect(path.length).eql(2);
const point = shape.getPoint(0);
expect(point.x).eql(label.attr('x'));
expect(point.y).eql(label.attr('y'));
expect(label.attr('rotate')).not.eql(0);
canvas.draw();
});
it('text on line, text refX and refY', () => {
var center = {x: 250, y: 500};
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
})
for(var i = 0; i < 360; i += 30) {
var angle = i / 180 * Math.PI;
var startPoint = getPoint(center,40, angle);
var endPoint = getPoint(center,80, angle);
var group = canvas.addGroup();
const shape = factory.draw('line', {
startPoint: startPoint,
endPoint: endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'start',
autoRotate: true,
refX: 4,
refY: 5
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
//expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('text on line, text refX and refY', () => {
const center = { x: 250, y: 500 };
canvas.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 40,
stroke: 'blue'
}
});
for (let i = 0; i < 360; i += 30) {
const angle = i / 180 * Math.PI;
const startPoint = getPoint(center, 40, angle);
const endPoint = getPoint(center, 80, angle);
const group = canvas.addGroup();
factory.draw('line', {
startPoint,
endPoint,
color: 'red',
label: i.toString(),
style: {
endArrow: true
},
labelCfg: {
position: 'start',
autoRotate: true,
refX: 4,
refY: 5
}
}, group);
const label = group.get('children')[1];
if (angle < 1 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('start');
}
if (angle > 1 / 2 * Math.PI && angle < 3 / 2 * Math.PI) {
expect(label.attr('textAlign')).eql('end');
}
// expect(label.attr('textAlign')).eql('center');
}
canvas.draw();
});
it('text on curve, text refX and refY', () => {
it('text on curve, text refX and refY', () => {
});
});
});
});
});

136
test/unit/shape/node-spec.js
View File

@ -3,7 +3,7 @@
* @author dxq613@gmai.com
*/
const { Canvas, Group } = require('@antv/g');
const { Canvas } = require('@antv/g');
const Shape = require('../../../src/shape/shape');
const Global = require('../../../src/global');
require('../../../src/shape/node');
@ -81,9 +81,9 @@ describe('shape node test', () => {
color: 'yellow',
label: 'rect',
labelCfg: {
style: {
fill: 'white'
}
style: {
fill: 'white'
}
},
style: {
fill: 'red'
@ -181,73 +181,73 @@ describe('shape node test', () => {
const rectGroup = canvas.findById('rect');
const shape = rectGroup.get('children')[0];
// 伪造 item, 仅测试接口和图形的变化，不测试一致性
const item = {
getContainer: function() {
return rectGroup;
},
get(name) {
return '';
}
};
expect(shape.attr('lineWidth')).eql(1);
factory.setState('rect', 'selected', true, item);
const item = {
getContainer() {
return rectGroup;
},
get() {
return '';
}
};
expect(shape.attr('lineWidth')).eql(1);
factory.setState('rect', 'selected', true, item);
expect(shape.attr('lineWidth')).eql(Global.nodeStateStyle.selected.lineWidth);
factory.setState('rect', 'selected', false, item);
expect(shape.attr('lineWidth')).eql(1);
});
expect(shape.attr('lineWidth')).eql(Global.nodeStateStyle.selected.lineWidth);
factory.setState('rect', 'selected', false, item);
expect(shape.attr('lineWidth')).eql(1);
it('label position', () => {
const group = canvas.addGroup();
group.translate(200, 200);
const shape = factory.draw('ellipse', {
size: [60, 20],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'top'
}
}, group);
const item = {
getContainer: function() {
return group;
},
get(name) {
return '';
}
};
const label = group.get('children')[1];
expect(label.attr('x')).eql(0);
expect(label.attr('y')).eql(-10 - Global.nodeLabel.offset);
});
factory.update('ellipse', {
size: [60, 20],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'left'
}
},item);
expect(label.attr('y')).eql(0);
expect(label.attr('x')).eql(-30 - Global.nodeLabel.offset);
it('label position', () => {
const group = canvas.addGroup();
group.translate(200, 200);
factory.draw('ellipse', {
size: [ 60, 20 ],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'top'
}
}, group);
const item = {
getContainer() {
return group;
},
get() {
return '';
}
};
const label = group.get('children')[1];
expect(label.attr('x')).eql(0);
expect(label.attr('y')).eql(-10 - Global.nodeLabel.offset);
factory.update('ellipse', {
size: [60, 20],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'right'
}
},item);
expect(label.attr('y')).eql(0);
expect(label.attr('x')).eql(30 + Global.nodeLabel.offset);
canvas.draw();
});
factory.update('ellipse', {
size: [ 60, 20 ],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'left'
}
}, item);
expect(label.attr('y')).eql(0);
expect(label.attr('x')).eql(-30 - Global.nodeLabel.offset);
it('clear', () => {
canvas.destroy();
});
});
factory.update('ellipse', {
size: [ 60, 20 ],
color: 'green',
label: 'ellipse position',
labelCfg: {
position: 'right'
}
}, item);
expect(label.attr('y')).eql(0);
expect(label.attr('x')).eql(30 + Global.nodeLabel.offset);
canvas.draw();
});
it('clear', () => {
canvas.destroy();
});
});
});