test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'plugin_tests' of github.com:antvis/g6 into plugin_tests

Browse Source
This commit is contained in:
Yanyan-Wang 2018-08-08 10:09:42 +08:00
commit 200556f0c2
16 changed files with 99 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
demos/custom-html.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义- HTML 绘制</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200
}, {
id: 'node2',
x: 300,
y: 200
}],
edges: [{
target: 'node2',
source: 'node1'
}]
};
G6.registerNode('customNode', {
draw(item){
const group = item.getGraphicGroup();
const html = G6.Util.createDOM('<div>这里是 HTML 节点</div>');
html.on('click', ()=>{
console.log(3333)
});
return group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
html
}
});
}
});
const graph = new G6.Graph({
container: 'mountNode', // 容器ID
fitView: 'cc',
renderer: 'svg',
height: window.innerHeight
});
graph.node({
shape: 'customNode'
});
graph.read(data);
</script>
</body>
</html>

16
demos/gallery-graphanalyzer.html
View File

@ -77,7 +77,11 @@
id: 'mountNode', // dom id
fitView: 'autoZoom',
plugins: [
maxSpanningForest, nodeColorMapper, minimapPlugin, edgeSizeMapper, nodeSizeMapper,
maxSpanningForest,
nodeColorMapper,
edgeSizeMapper,
nodeSizeMapper,
// minimapPlugin
],
modes: {
default: ['panCanvas', 'wheelZoom']
@ -85,6 +89,16 @@
height: 500,
});
graph.read(Util.cloneDeep(data));
// graph.getNodes().forEach(node=>{
// graph.toFront(node);
// // node.getGraphicGroup().toFront();
// });
// graph.on('afterchange', ()=>{
// graph.getNodes().forEach(node=>{
// // graph.toFront(node);
// node.getGraphicGroup().toFront();
// });
// });
const minimap = document.getElementById('minimap');
const legend = document.getElementById('legend');
if (minimap !== undefined) minimap.style.display = 'none';

7
demos/plugin-minimap.html
View File

@ -16,6 +16,11 @@
<script src="../build/g6.js"></script>
<script src="../build/plugin.tool.minimap.js"></script>
<script>
const minimap = new G6.Plugins['tool.minimap']({
container: 'minimap',
width: 180,
height: 120
});
G6.registerNode('custom', {
draw(item) {
const group = item.getGraphicGroup();
@ -66,7 +71,7 @@
container: 'mountNode',
fitView: 'cc',
height: window.innerHeight,
plugins: [ plugin ]
plugins: [ minimap ]
});
graph.read(data);
</script>

5
package.json
View File

@ -79,6 +79,7 @@
"worker-loader": "^2.0.0"
},
"scripts": {
"update": "rm -rf node_modules/ && tnpm i && rm -rf build && tnpm run build",
"build": "webpack",
"build-lib": "babel src --out-dir lib",
"ci": "npm run lint && npm run test",
@ -106,8 +107,8 @@
},
"dependencies": {
"@antv/scale": "^0.0.1",
"@antv/g2": "~3.2.7-beta",
"@antv/g": "~3.1.0-beta.3",
"@antv/g2": "~3.2.7-beta.5",
"@antv/g": "~3.1.0-beta.7",
"@antv/hierarchy": "~0.3.13",
"d3": "^5.4.0",
"d3-svg-legend": "^2.25.6",

8
src/controller/event.js
View File

@ -257,16 +257,8 @@ class Controller extends Base {
_processEventObj(ev) {
const graph = this.graph;
const canvas = graph.get('_canvas');
const frontCanvas = graph.get('_frontCanvas');
const evObj = this._getEventObj(ev, canvas);
const frontEvObj = this._getEventObj(ev, frontCanvas);
// frontEvObj is the first
if (frontEvObj.shape) {
evObj.shape = frontEvObj.shape;
evObj.item = frontEvObj.item;
}
evObj.frontEvObj = frontEvObj;
this._currentEventObj = evObj;
}
// transform point position by pixel Ratio

38
src/graph.js
View File

@ -194,33 +194,23 @@ class Graph extends Base {
const Canvas = G.Canvas;
const canvas = new Canvas(canvasCfg);
const frontCanvas = new Canvas(canvasCfg);
const frontEl = frontCanvas.get('el');
frontEl.style.position = 'absolute';
frontEl.style.top = 0;
frontEl.style.left = 0;
frontEl.style.overflow = 'hidden';
frontEl.style.width = width + 'px';
frontEl.style.height = height + 'px';
frontEl.style.position = 'absolute';
frontEl.style.top = 0;
frontEl.style.left = 0;
const el = canvas.get('el');
el.style.position = 'absolute';
el.style.top = 0;
el.style.left = 0;
el.style.overflow = 'hidden';
this.set('_canvas', canvas);
this.set('_frontCanvas', frontCanvas);
const mouseEventWrapper = this.getMouseEventWrapper();
mouseEventWrapper.style.outline = 'none';
mouseEventWrapper.style['user-select'] = 'none';
mouseEventWrapper.setAttribute('tabindex', TAB_INDEX);
const rootGroup = canvas.addGroup();
const frontRootGroup = frontCanvas.addGroup();
const itemGroup = rootGroup.addGroup();
this.set('_itemGroup', itemGroup);
this.set('_rootGroup', rootGroup);
this.set('_frontRootGroup', frontRootGroup);
}
_initData() {
this.set('_dataMap', {});
@ -240,7 +230,7 @@ class Graph extends Base {
return keyboardEventWrapper ? keyboardEventWrapper : this.getMouseEventWrapper();
}
getMouseEventWrapper() {
return this.get('_frontCanvas').get('el');
return this.get('_canvas').get('el');
}
/**
* @param {object} plugin - plugin instance
@ -397,18 +387,6 @@ class Graph extends Base {
getItemGroup() {
return this.get('_itemGroup');
}
/**
* @return {G.Group} frontRootGroup
*/
getFrontRootGroup() {
return this.get('_frontRootGroup');
}
/**
* @return {G.Canvas} canvas
*/
getFrontCanvas() {
return this.get('_frontCanvas');
}
/**
* @param {object} data source data
* @return {Graph} this
@ -451,7 +429,6 @@ class Graph extends Base {
*/
destroy() {
const canvas = this.get('_canvas');
const frontCanvas = this.get('_frontCanvas');
const graphContainer = this.get('_graphContainer');
const controllers = this.get('_controllers');
const timers = this.get('_timers');
@ -467,7 +444,6 @@ class Graph extends Base {
plugin.destroy && plugin.destroy();
});
canvas && canvas.destroy();
frontCanvas && frontCanvas.destroy();
graphContainer.destroy();
window.removeEventListener('resize', windowForceResizeEvent);
super.destroy();
@ -750,11 +726,9 @@ class Graph extends Base {
return;
}
const canvas = this.get('_canvas');
const frontCanvas = this.get('_frontCanvas');
if (width !== this.get('width') || height !== this.get('height')) {
this.emit('beforechangesize');
canvas.changeSize(width, height);
frontCanvas.changeSize(width, height);
this.set('width', width);
this.set('height', height);

3
src/mixin/animate.js
View File

@ -43,11 +43,10 @@ Mixin.AUGMENT = {
const controllers = this.get('_controllers');
const animate = this.get('animate');
const canvas = this.get('_canvas');
const frontCanvas = this.get('_frontCanvas');
let animateController;
if (animate) {
animateController = new Animate({
canvases: [ canvas, frontCanvas ],
canvases: [ canvas ],
graph: this
});
controllers.animate = animateController;

6
src/mixin/draw.js
View File

@ -9,12 +9,10 @@ Mixin.AUGMENT = {
_initDraw() {
const controllers = this.get('_controllers');
const canvas = this.get('_canvas');
const frontCanvas = this.get('_frontCanvas');
const animateDraw = this.get('_animateDraw');
const animateController = controllers.animate;
const simpleDraw = () => {
canvas.draw();
frontCanvas.draw();
};
let draw;
if (animateDraw) {
@ -31,10 +29,6 @@ Mixin.AUGMENT = {
draw = simpleDraw;
}
this.draw = draw;
},
drawFrontCanvas() {
const frontCanvas = this.get('_frontCanvas');
frontCanvas.draw();
}
};
module.exports = Mixin;

2
src/mixin/fit-view.js
View File

@ -194,9 +194,7 @@ Mixin.AUGMENT = {
*/
setMatrix(matrix) {
const rootGroup = this.get('_rootGroup');
const frontRootGroup = this.get('_frontRootGroup');
rootGroup.setMatrix(matrix);
frontRootGroup.setMatrix(matrix);
},
/**
* @param {object} domPoint domPoint

2
src/util/graph.js
View File

@ -76,7 +76,7 @@ module.exports = {
beforeTransform(graph);
graph.setMatrix(matrix);
canvas.set('renderer', renderer);
canvas.set('children', BaseUtil.cloneDeep(children));
canvas.set('children', children);
canvas.matrix = matrix;
canvas.draw();
graph.setMatrix(matrixCache);

16
src/util/graphic.js
View File

@ -227,24 +227,16 @@ const GraphicUtil = {
/**
* element to back
* @param {object} element g shape or group
* @param {object} group g group
*/
toBack(element, group) {
!group && (group = element.getParent());
const children = group.get('children');
BaseUtil.Array.remove(children, element);
children.unshift(element);
toBack(element) {
element.toBack();
},
/**
* element to front
* @param {object} element g shape or group
* @param {object} group g group
*/
toFront(element, group) {
!group && (group = element.getParent());
const children = group.get('children');
BaseUtil.Array.remove(children, element);
children.push(element);
toFront(element) {
element.toFront();
}
};

4
test/unit/cases/behaviour-mode-spec.js
View File

@ -35,8 +35,8 @@ describe('graph behaviour-mode user cases test', () => {
graph.source(Util.cloneDeep(data));
graph.render();
const el = graph.get('_frontCanvas').get('el');
const canvas = graph.get('_frontCanvas');
const canvas = graph.getCanvas();
const el = canvas.get('el');
const point = { x: 10, y: 20 };
const client = canvas.getClientByPoint(point.x, point.y);
click(client, el);

2
test/unit/controller/event-spec.js
View File

@ -29,7 +29,7 @@ const el = graph.getMouseEventWrapper();
Util.modifyCSS(el, {
border: '1px solid red'
});
const canvas = graph.get('_frontCanvas');
const canvas = graph.getCanvas();
const client = getClientByPoint(canvas, nodePoint.x, nodePoint.y);

0
test/unit/controller/layout-spec.js
View File

0
test/unit/controller/mapper-spec.js
View File

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

@ -282,15 +282,9 @@ describe('graph test', () => {
it('getCanvas', () => {
expect(graph.getCanvas()).not.equal(undefined);
});
it('getFrontCanvas', () => {
expect(graph.getFrontCanvas()).not.equal(undefined);
});
it('getRootGroup', () => {
expect(graph.getRootGroup()).not.equal(undefined);
});
it('getFrontRootGroup', () => {
expect(graph.getFrontRootGroup()).not.equal(undefined);
});
it('setFitView', () => {
let matrix;
graph.setFitView('tl');