From 2d365e99d8229c239687d30e980a57ce1cb59b56 Mon Sep 17 00:00:00 2001 From: "xiaoqing.dongxq" Date: Fri, 28 Dec 2018 11:05:32 +0800 Subject: [PATCH] fix(lint): resolve eslint --- .eslintignore | 2 +- package.json | 5 +- src/behavior/drag-canvas.js | 8 - src/graph/controller/mode.js | 2 +- src/item/item.js | 17 +- src/item/node.js | 2 +- src/shape/edge.js | 12 +- src/shape/single-shape-mixin.js | 1 + test/unit/behavior/behavior-spec.js | 2 +- test/unit/graph/controller/event-spec.js | 8 +- test/unit/graph/controller/mode-spec.js | 8 +- test/unit/graph/graph-spec.js | 4 +- test/unit/item/node-spec.js | 2 +- test/unit/shape/edge-spec.js | 921 +++++++++++------------ test/unit/shape/node-spec.js | 136 ++-- 15 files changed, 560 insertions(+), 570 deletions(-) delete mode 100644 src/behavior/drag-canvas.js diff --git a/.eslintignore b/.eslintignore index 689c54a2ad..821af67d56 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,4 @@ lib/ dist/ mocks/ node_modules/ -demos/assets/ +demos/ diff --git a/package.json b/package.json index e472f1d619..cb43b89dd3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/behavior/drag-canvas.js b/src/behavior/drag-canvas.js deleted file mode 100644 index e5bb7a8554..0000000000 --- a/src/behavior/drag-canvas.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - bind(graph){ - - }, - unbind(graph){ - - } -}; diff --git a/src/graph/controller/mode.js b/src/graph/controller/mode.js index d68b390f78..01a43554b6 100644 --- a/src/graph/controller/mode.js +++ b/src/graph/controller/mode.js @@ -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'; diff --git a/src/item/item.js b/src/item/item.js index 62f3c58cf9..220a10b850 100644 --- a/src/item/item.js +++ b/src/item/item.js @@ -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; diff --git a/src/item/node.js b/src/item/node.js index 144811edfb..614e2c369c 100644 --- a/src/item/node.js +++ b/src/item/node.js @@ -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 { diff --git a/src/shape/edge.js b/src/shape/edge.js index 858dd25dd6..49e5263c30 100644 --- a/src/shape/edge.js +++ b/src/shape/edge.js @@ -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); } } diff --git a/src/shape/single-shape-mixin.js b/src/shape/single-shape-mixin.js index 5c9d5159b9..a2329f6d12 100644 --- a/src/shape/single-shape-mixin.js +++ b/src/shape/single-shape-mixin.js @@ -57,6 +57,7 @@ const SingleShape = { * 获取文本的配置项 * @internal 用户创建和更新节点/边时，同时会更新文本 * @param {Object} cfg 节点的配置项 + * @param {Object} labelCfg 文本的配置项 * @param {G.Group} group 父容器，label 的定位可能与图形相关 * @return {Object} 图形的配置项 */ diff --git a/test/unit/behavior/behavior-spec.js b/test/unit/behavior/behavior-spec.js index 26822b6a0f..3c8cc38f8b 100644 --- a/test/unit/behavior/behavior-spec.js +++ b/test/unit/behavior/behavior-spec.js @@ -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); diff --git a/test/unit/graph/controller/event-spec.js b/test/unit/graph/controller/event-spec.js index a027653e95..6202d1be00 100644 --- a/test/unit/graph/controller/event-spec.js +++ b/test/unit/graph/controller/event-spec.js @@ -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(); diff --git a/test/unit/graph/controller/mode-spec.js b/test/unit/graph/controller/mode-spec.js index 4252dbca5c..f92860cd91 100644 --- a/test/unit/graph/controller/mode-spec.js +++ b/test/unit/graph/controller/mode-spec.js @@ -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'); diff --git a/test/unit/graph/graph-spec.js b/test/unit/graph/graph-spec.js index 9715139b31..bf40ebc7d2 100644 --- a/test/unit/graph/graph-spec.js +++ b/test/unit/graph/graph-spec.js @@ -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); diff --git a/test/unit/item/node-spec.js b/test/unit/item/node-spec.js index 3eb42455e5..e3be76d2d0 100644 --- a/test/unit/item/node-spec.js +++ b/test/unit/item/node-spec.js @@ -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'); diff --git a/test/unit/shape/edge-spec.js b/test/unit/shape/edge-spec.js index bb33bb2cfe..5f8dcc2864 100644 --- a/test/unit/shape/edge-spec.js +++ b/test/unit/shape/edge-spec.js @@ -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', () => { - }); + }); - }); + }); }); diff --git a/test/unit/shape/node-spec.js b/test/unit/shape/node-spec.js index 1700026da3..96bb1bfea1 100644 --- a/test/unit/shape/node-spec.js +++ b/test/unit/shape/node-spec.js @@ -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(); + }); + }); });