test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-03 04:08:32 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: minimap

Browse Source
This commit is contained in:
baizn 2020-01-13 21:05:56 +08:00 committed by Yanyan Wang
parent c79670ccd0
commit 52f4f92c09
6 changed files with 111 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package.json
View File

@ -71,7 +71,7 @@
"@antv/dom-util": "^2.0.1",
"@antv/event-emitter": "~0.1.0",
"@antv/g-base": "^0.3.5",
"@antv/g-canvas": "^0.3.6",
"@antv/g-canvas": "^0.3.8",
"@antv/hierarchy": "^0.6.1",
"@antv/matrix-util": "^2.0.4",
"@antv/path-util": "^2.0.3",
@ -80,9 +80,7 @@
"d3-force": "^2.0.1",
"dagre": "^0.8.5",
"lodash": "^4.17.15",
"numericjs": "^1.2.6",
"tslib": "^1.10.0",
"webpack": "^4.41.4"
"numericjs": "^1.2.6"
},
"devDependencies": {
"@antv/gatsby-theme-antv": "^0.9.25",
@ -121,6 +119,7 @@
"typescript": "^3.5.3",
"typescript-transform-paths": "^1.1.14",
"webpack-cli": "^3.3.10",
"worker-loader": "^2.0.0"
"worker-loader": "^2.0.0",
"webpack": "^4.41.4"
}
}
}

2
src/graph/controller/state.ts
View File

@ -147,8 +147,6 @@ export default class StateController {
if (!states[key]) {
states[key] = val;
} else {
// TODO 需要测试是否能够走到这个分支
console.log('走到这里没有', states)
const map = {};
states[key].forEach(item => {
if (!item.destroyed) {

2
src/item/item.ts
View File

@ -158,7 +158,6 @@ export default class ItemBase implements IItemBase {
}
protected init() {
// TODO 实例化工厂方法，需要等 Shape 重构完成
const shapeFactory = Shape.getFactory(this.get('type'));
this.set('shapeFactory', shapeFactory);
}
@ -242,7 +241,6 @@ export default class ItemBase implements IItemBase {
}
}
// TODO 确定还是否需要该方法
public getShapeCfg(model: ModelConfig): ModelConfig {
const styles = this.get('styles');
if (styles && styles.default) {

43
src/plugins/minimap/index.ts
View File

@ -246,15 +246,15 @@ export default class MiniMap extends Base {
* 将主图上的图形完全复制到小图
*/
private updateGraphShapes() {
const graph: Graph = this.get('graph');
// const graph: Graph = this.get('graph');
const graph = this._cfgs.graph;
const canvas: GCanvas = this.get('canvas');
const graphGroup = graph.get('group');
const clonedGroup = graphGroup.clone();
// TODO 两个画布之间的数据同步
// clonedGroup.resetMatrix();
// canvas.get('children')[0] = clonedGroup;
canvas.set('localRefresh', false)
clonedGroup.resetMatrix();
// clonedGroup.setMatrix(graph.get('group').getMatrix());
// canvas.set('localRefresh', false)
canvas.clear()
canvas.add(clonedGroup)
}
@ -390,6 +390,10 @@ export default class MiniMap extends Base {
const canvas: GCanvas = this.get('canvas');
const type: string = this.get('type');
if(canvas.destroyed) {
return
}
switch (type) {
case DEFAULT_MODE:
this.updateGraphShapes();
@ -418,48 +422,33 @@ export default class MiniMap extends Base {
height = max(bbox.height, graph.get('height'));
}
const pixelRatio = canvas.get('pixelRatio');
const ratio = Math.min(size[0] / width, size[1] / height);
let matrix: Matrix = canvas.getMatrix()
canvas.resetMatrix();
let matrix: Matrix = mat3.create();
let minX = 0;
let minY = 0;
// 如果bbox为负，先平移到左上角
if(Number.isFinite(bbox.minX)) {
minX = -(bbox.minX > 0 ? 0 : bbox.minX);
minX = bbox.minX > 0 ? 0 : -bbox.minX;
}
if(Number.isFinite(bbox.minY)) {
minY = -(bbox.minY > 0 ? 0 : bbox.minY);
minY = bbox.minY > 0 ? 0 : -bbox.minY;
}
if (!matrix) {
matrix = mat3.create();
}
matrix = transform(matrix, [
[ 't', minX, minY ]
])
// canvas.translate(minX, minY);
// canvas.scale(ratio * pixelRatio, ratio * pixelRatio);
matrix = transform(matrix, [
['s', ratio * pixelRatio, ratio * pixelRatio]
])
// 缩放到适合视口后, 平移到画布中心
const dx = (size[0] - width * ratio) / 2;
const dy = (size[1] - height * ratio) / 2;
// canvas.translate(dx * pixelRatio, dy * pixelRatio);
matrix = transform(matrix, [
[ 't', dx * pixelRatio, dy * pixelRatio ]
[ 't', minX, minY ],
[ 's', ratio, ratio ],
[ 't', dx, dy ]
])
canvas.setMatrix(matrix)
// canvas.draw();
// 更新minimap视口
this.set('ratio', ratio);

72
stories/Shape/component/default-shape.tsx
View File

@ -4,30 +4,90 @@ import { IGraph } from '../../../src/interface/graph'
let graph: IGraph = null
G6.registerNode('circleNode', {
drawShape(cfg, group) {
const keyShape = group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: 30,
fill: '#87e8de'
}
});
return keyShape;
}
}, 'circle');
G6.registerEdge('loop-growth', {
afterDraw(cfg, group) {
const shape = group.get('children')[0];
const length = shape.getTotalLength();
shape.animate({
onFrame(ratio) {
debugger
const startLen = ratio * length;
// 计算线的lineDash
const cfg = {
lineDash: [startLen, length - startLen]
};
return cfg;
},
repeat: true
}, 2000);
}
}, 'loop');
const DefaultShape = () => {
const container = React.useRef()
useEffect(() => {
if(!graph) {
graph = new G6.Graph({
container: container.current as string | HTMLElement,
width: 500,
height: 500
height: 500,
defaultEdge: {
color: '#bae7ff'
},
modes: {
default: ['drag-node', 'drag-canvas']
}
})
}
const data = {
nodes: [
nodes: [{
x: 300,
y: 300,
label: 'rect',
id:'node1',
labelCfg: {
position: 'bottom'
},
anchorPoints: [
[0.5, 0],
[1, 0.5]
]
}
],
edges: [
{
id: 'node1',
x: 100,
y: 100
source: 'node1',
target: 'node1',
label: 'loop',
shape:'loop-growth',
labelCfg: {
refY: 10
}
}
]
}
};
graph.data(data)
graph.render()
})
return (
<div ref={container}></div>
)

37
tests/unit/plugins/minimap-spec.ts
View File

@ -15,6 +15,15 @@ describe('minimap', () => {
container: div,
width: 500,
height: 500,
defaultEdge: {
shape: 'line',
style: {
endArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z',
d: 10
}
}
},
modes: {
default: [{
type: 'drag-node',
@ -26,6 +35,8 @@ describe('minimap', () => {
graph.addItem('node', { id: 'node1', label: 'text1', x: 50, y: 50 });
graph.addItem('node', { id: 'node2', label: 'text2', x: 120, y: 150 });
graph.addItem('node', { id: 'node3', label: 'text3', x: 150, y: 190 });
graph.addItem('node', { id: 'node4', label: 'text4', x: 220, y: 250 });
graph.addItem('edge', { id: 'edge1', source: 'node1', target: 'node2' });
it('minimap with default settings & destroy', () => {
@ -51,8 +62,8 @@ describe('minimap', () => {
graph.zoom(2.5, { x: 250, y: 250 });
expect(viewport.style.left).toEqual('35.25px');
expect(viewport.style.top).toEqual('35.25px');
expect(viewport.style.left).toEqual('20px');
expect(viewport.style.top).toEqual('20px');
expect(viewport.style.width).toEqual('160px');
expect(viewport.style.height).toEqual('160px');
@ -62,12 +73,12 @@ describe('minimap', () => {
expect(container.innerHTML).toEqual('');
graph.zoom(2.5, { x: 250, y: 250 });
expect(viewport.style.left).toEqual('35.25px');
expect(viewport.style.top).toEqual('35.25px');
expect(viewport.style.left).toEqual('20px');
expect(viewport.style.top).toEqual('20px');
expect(viewport.style.width).toEqual('160px');
expect(viewport.style.height).toEqual('160px');
});
it('move viewport', () => {
xit('move viewport', () => {
const minimap = new Minimap({ size: [ 200, 200 ] });
const graph = new G6.Graph({
container: div,
@ -106,10 +117,10 @@ describe('minimap', () => {
});
timerOut(() => {
expect(viewport.style.left).toEqual('20px');
expect(viewport.style.top).toEqual('20px');
expect(viewport.style.width).toEqual('0px');
expect(viewport.style.height).toEqual('0px');
expect(viewport.style.left).toEqual('50px');
expect(viewport.style.top).toEqual('50px');
expect(viewport.style.width).toEqual('100px');
expect(viewport.style.height).toEqual('100px');
const matrix = graph.get('group').getMatrix();
expect(matrix[0]).toEqual(2);
@ -129,8 +140,8 @@ describe('minimap', () => {
});
timerOut(() => {
expect(viewport.style.left).toEqual('0px');
expect(viewport.style.top).toEqual('0px');
expect(viewport.style.left).toEqual('100px');
expect(viewport.style.top).toEqual('100px');
expect(viewport.style.width).toEqual('100px');
expect(viewport.style.height).toEqual('100px');
@ -218,8 +229,8 @@ describe('minimap', () => {
const canvas = minimap.getCanvas();
const matrix = canvas.getMatrix();
expect(matrix[6] - 56 < 1).toBe(false);
expect(matrix[7] - 56 < 1).toBe(false);
expect(matrix[6] - 30 < 1).toBe(false);
expect(matrix[7] - 30 < 1).toBe(false);
graph.destroy();
});
it('keyShapeOnly minimap', () => {