mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 13:18:40 +08:00
feat: add g6 arrow
This commit is contained in:
parent
78ba6f4a17
commit
bd5d8723e5
@ -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"
|
||||
},
|
||||
|
@ -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)) {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user