test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-11 00:39:54 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat: add g6 arrow

Browse Source
This commit is contained in:
TomHuangCN 2018-07-23 00:17:37 +08:00
parent 78ba6f4a17
commit bd5d8723e5
5 changed files with 124 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -97,7 +97,7 @@
"screenshot": "node ./bin/screenshot.js",
"start": "npm run dev",
"test": "torch --compile --renderer --recursive ./test/unit",
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/graph-spec.js",
"watch": "webpack --config webpack-dev.config.js",
"win-dev": "node ./bin/win-dev.js"
},

83
src/item/edge.js
View File

@ -35,25 +35,74 @@ class Edge extends Item {
if (!this.linkedItemVisible()) {
this.hide();
}
// this._addArrow();
this._addArrow();
super._afterDraw();
}
// _addArrow() {
// const model = this.model;
// const keyShape = this.keyShape;
// const styleEndArrow = keyShape.attr('endArrow');
// const styleStartArrow = keyShape.attr('startArrow');
// const endArrow = model.endArrow || styleEndArrow;
// const startArrow = model.startArrow || styleStartArrow;
// // styleStartArrow && keyShape.attr('startArrow', null);
// // styleEndArrow && keyShape.attr('endArrow', null);
// endArrow && this._drawEndArrow();
// }
// _drawEndArrow() {
// const keyShape = this.keyShape;
// const Marker = this.getGraph.getConstructor();
// // keyShape.attr('endArrow', new );
// }
_addArrow() {
const model = this.model;
const keyShape = this.keyShape;
const shapeObj = this.shapeObj;
const styleEndArrow = keyShape.attr('endArrow');
const styleStartArrow = keyShape.attr('startArrow');
const endArrow = model.endArrow || styleEndArrow;
const startArrow = model.startArrow || styleStartArrow;
styleStartArrow && keyShape.attr('startArrow', null);
styleEndArrow && keyShape.attr('endArrow', null);
endArrow && this._drawArrow(shapeObj.endArrow, 'end');
startArrow && this._drawArrow(shapeObj.startArrow, 'start');
}
_drawArrow({ path, dindent, tangent, ratio, fill, stroke }, type) {
tangent = tangent(this);
dindent = dindent(this);
path = path(this);
fill = fill(this);
stroke = stroke(this);
ratio = ratio();
const group = this.group;
const keyShape = this.keyShape;
const keyShapePath = keyShape.attr('path');
const marker = group.addShape('marker', {
attrs: {
symbol: () => {
return path;
},
fill,
stroke
}
});
const point = keyShape.getPoint(ratio);
const x = tangent[1][0] - tangent[0][0];
const y = tangent[1][1] - tangent[0][1];
const tangentLength = Math.sqrt(x * x + y * y);
const dindentRatio = dindent / tangentLength;
const vDindent = [ x * dindentRatio, y * dindentRatio ];
let deg = 0;
const tan = Math.atan(x / y);
if (y === 0 && x < 0) {
deg = Math.PI;
} else if (x > 0 && y > 0) {
deg = Math.PI / 2 - tan;
} else if (x < 0 && y < 0) {
deg = -Math.PI / 2 - tan;
} else if (x >= 0 && y < 0) {
deg = -tan - Math.PI / 2;
} else if (x <= 0 && y > 0) {
deg = Math.PI / 2 - tan;
}
marker.rotate(deg);
marker.translate(point.x, point.y);
if (type === 'end') {
const lastSegment = keyShapePath[keyShapePath.length - 1];
lastSegment[lastSegment.length - 1] = vDindent[1] + point.y;
lastSegment[lastSegment.length - 2] = vDindent[0] + point.x;
} else {
const startSegment = keyShapePath[0];
startSegment[startSegment.length - 1] = vDindent[1] + point.y;
startSegment[startSegment.length - 2] = vDindent[0] + point.x;
}
keyShape.attr('path', keyShapePath);
}
_getControlPoints() {
const controlPoints = this.model.controlPoints;
if (Util.isArray(controlPoints)) {

47
src/shape/edges/common.js
View File

@ -6,6 +6,33 @@
const Shape = require('../shape');
const Util = require('../../util/');
const Global = require('../../global');
const MIN_ARROW_SIZE = 6;
const defaultArrow = {
fill(item) {
const keyShape = item.getKeyShape();
return keyShape.attr('stroke');
},
path(item) {
const keyShape = item.getKeyShape();
let lineWidth = keyShape.attr('lineWidth');
lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
return [
[ 'M', -lineWidth * 2, lineWidth ],
[ 'L', 0, 0 ],
[ 'L', -lineWidth * 2, -lineWidth ],
[ 'Z' ]
];
},
dindent(item) {
const keyShape = item.getKeyShape();
const lineWidth = keyShape.attr('lineWidth');
return lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
},
stroke() {
return;
}
};
Shape.registerEdge('common', {
draw(item) {
@ -74,5 +101,25 @@ Shape.registerEdge('common', {
});
Util.toFront(label);
}
},
startArrow: {
...defaultArrow,
tangent(item) {
const keyShape = item.getKeyShape();
return keyShape.getStartTangent();
},
ratio() {
return 0;
}
},
endArrow: {
...defaultArrow,
tangent(item) {
const keyShape = item.getKeyShape();
return keyShape.getEndTangent();
},
ratio() {
return 1;
}
}
});

2
src/shape/shape.js
View File

@ -42,7 +42,7 @@ Shape.registerShapeManager = function(type, cfg) {
extendShapeName = shapeType;
}
const extendShape = shapeManager.getExtendShape(extendShapeName, defaultShapeType);
const shapeObj = Util.mix({}, extendShape, cfg);
const shapeObj = Util.mix(true, {}, extendShape, cfg);
shapeObj.type = shapeType;
shapeManager[shapeType] = shapeObj;
return shapeObj;

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

@ -338,9 +338,11 @@ describe('graph test', () => {
source: 'node1',
target: {
x: 50,
y: 50
y: 100
}
});
graph.zoom(1);
graph.setFitView('cc');
graph.hide(graph.find('node1-domCenter'));
expect(graph.find('node1-domCenter').getGraphicGroup().get('visible')).equal(false);
graph.hide(graph.find('node1'));
@ -350,6 +352,12 @@ describe('graph test', () => {
expect(graph.find('group1').getGraphicGroup().get('visible')).equal(false);
expect(graph.find('domCenter').getGraphicGroup().get('visible')).equal(false);
});
it('endArrow', () => {
graph.update('node1-domCenter', {
endArrow: true,
startArrow: true
});
});
it('reRender', () => {
graph.reRender();
});