test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-14 09:30:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #414 from antvis/minimapsolution

Browse Source 
Minimapsolution
This commit is contained in:
Yanyan Wang 2018-08-09 16:33:08 +08:00 committed by GitHub
commit 61f18d5443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 176 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

@ -1,4 +1,3 @@
{ {
"plugins": [ "plugins": [
"transform-object-rest-spread", "transform-object-rest-spread",

2
.torch.compile.opts.js
View File

@ -13,7 +13,7 @@ module.exports = {
], ],
], ],
presets: [ presets: [
'env' 'env',
], ],
sourceMaps: 'inline', sourceMaps: 'inline',
}, },

11
demos/custom-html.html
View File

@ -19,6 +19,11 @@
id: 'node2', id: 'node2',
x: 300, x: 300,
y: 200 y: 200
}, {
id: 'node3',
x: 300,
y: 300,
shape: 'common'
}], }],
edges: [{ edges: [{
target: 'node2', target: 'node2',
@ -30,7 +35,7 @@
draw(item){ draw(item){
const group = item.getGraphicGroup(); const group = item.getGraphicGroup();
const html = G6.Util.createDOM('<div>这里是 HTML 节点</div>'); const html = G6.Util.createDOM('<div>这里是 HTML 节点</div>');
html.on('click', ()=>{ html.on('click', () => {
console.log(3333) console.log(3333)
}); });
return group.addShape('dom', { return group.addShape('dom', {
@ -55,6 +60,10 @@
shape: 'customNode' shape: 'customNode'
}); });
graph.read(data); graph.read(data);
setTimeout(()=>{
graph.find('node3').getKeyShape().attr('fill', 'blue');
graph.draw();
}, 300);
</script> </script>
</body> </body>
</html> </html>

4
demos/gallery-graphanalyzer.html
View File

@ -14,8 +14,8 @@
<body> <body>
<div id='mountNode'></div> <div id='mountNode'></div>
<div id='legend'></div>
<div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div> <div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div>
<div id='legend'></div>
<script> <script>
var graph = null; var graph = null;
var clickOnNode = null; var clickOnNode = null;
@ -81,7 +81,7 @@
nodeColorMapper, nodeColorMapper,
edgeSizeMapper, edgeSizeMapper,
nodeSizeMapper, nodeSizeMapper,
// minimapPlugin minimapPlugin
], ],
modes: { modes: {
default: ['panCanvas', 'wheelZoom'] default: ['panCanvas', 'wheelZoom']

8
demos/gallery-xiaomi.html
View File

@ -19,6 +19,7 @@
<script src="./assets/d3-4.13.0.min.js"></script> <script src="./assets/d3-4.13.0.min.js"></script>
<script src="./assets/d3-legend-2.25.6.min.js"></script> <script src="./assets/d3-legend-2.25.6.min.js"></script>
<script src="../build/g6.js"></script> <script src="../build/g6.js"></script>
<script src="../build/plugin.tool.minimap.js"></script>
<script src="../build/plugin.behaviour.analysis.js"></script> <script src="../build/plugin.behaviour.analysis.js"></script>
<script src="../build/plugin.tool.d3.mapper.js"></script> <script src="../build/plugin.tool.d3.mapper.js"></script>
<script> <script>
@ -35,7 +36,11 @@
const graph = new G6.Graph({ const graph = new G6.Graph({
container: 'mountNode', container: 'mountNode',
height: window.innerHeight, height: window.innerHeight,
plugins: [nodeSizeMapper, nodeColorMapper], plugins: [nodeSizeMapper, nodeColorMapper, new G6.Plugins['tool.minimap']({
container: 'minimap',
width: 180,
height: 120
})],
modes: { modes: {
default: ['rightPanCanvas'] default: ['rightPanCanvas']
}, },
@ -55,6 +60,7 @@
.force('x', forceX()) .force('x', forceX())
.on('tick', () => { .on('tick', () => {
graph.updateNodePosition(); graph.updateNodePosition();
graph.emit('afterlayout');
}); });
} }
} }

105
demos/plugin-minimap-has-html.html Normal file
View File

@ -0,0 +1,105 @@
<!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>插件-缩略图</title>
</head>
<body>
<div style="position: relative;">
<div id="mountNode"></div>
<div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div>
</div>
<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('html1', {
draw(item) {
const group = item.getGraphicGroup();
return group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
html: `<div>
<h1>${item.id}</h1>
<div>吉林省地方； </div>
</div>`
}
});
}
});
G6.registerNode('html2', {
draw(item) {
const group = item.getGraphicGroup();
const html = G6.Util.createDOM(`<div>
<h1>${item.id}</h1>
<div>吉林省地方； </div>
</div>`);
return group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
html
}
});
}
});
const data = {
nodes: [{
id: 'node0',
x: -100,
y: 200,
shape: 'html1'
}, {
id: 'node1',
x: 100,
y: 200,
shape: 'html2'
}, {
id: 'node2',
x: 300,
y: 200,
shape: 'html3'
}, {
id: 'node3',
x: 600,
y: 200,
shape: 'html4'
}],
edges: [{
target: 'node0',
source: 'node1'
}, {
target: 'node2',
source: 'node1'
}, {
target: 'node2',
source: 'node3'
}]
};
const graph = new G6.Graph({
container: 'mountNode',
fitView: 'cc',
height: window.innerHeight,
renderer: 'svg',
plugins: [ minimap ]
});
graph.node({
shape: 'custom'
});
graph.read(data);
</script>
</body>
</html>

17
demos/plugin-minimap.html
View File

@ -21,23 +21,6 @@
width: 180, width: 180,
height: 120 height: 120
}); });
G6.registerNode('custom', {
draw(item) {
const group = item.getGraphicGroup();
let keyShape;
for (let i = 0; i < 20; i++) {
keyShape = group.addGroup().addShape('circle', {
attrs: {
x: 0,
y: i * 12,
r: i * 4,
fill: 'rgba(29,109,29, 0.1)'
}
});
}
return keyShape;
}
});
const data = { const data = {
nodes: [{ nodes: [{
id: 'node0', id: 'node0',

5
package.json
View File

@ -106,13 +106,14 @@
"run": [] "run": []
}, },
"dependencies": { "dependencies": {
"@antv/scale": "^0.0.1",
"@antv/g2": "~3.2.7-beta.5",
"@antv/g": "~3.1.0-beta.7", "@antv/g": "~3.1.0-beta.7",
"@antv/g2": "~3.2.7-beta.5",
"@antv/hierarchy": "~0.3.13", "@antv/hierarchy": "~0.3.13",
"@antv/scale": "^0.0.1",
"d3": "^5.4.0", "d3": "^5.4.0",
"d3-svg-legend": "^2.25.6", "d3-svg-legend": "^2.25.6",
"dagre": "~0.8.2", "dagre": "~0.8.2",
"dom-to-image": "^2.6.0",
"lodash": "~4.17.4", "lodash": "~4.17.4",
"wolfy87-eventemitter": "~5.2.4" "wolfy87-eventemitter": "~5.2.4"
}, },

1
plugins/template.maxSpanningForest/index.js
View File

@ -251,7 +251,6 @@ class Plugin {
graph.draw(); graph.draw();
} }
} }
}); });
} }
} }

44
src/extend/g/dom.js Normal file
View File

@ -0,0 +1,44 @@
/**
* @fileOverview extend G.Shape
* @author huangtonger@aliyun.com
* @ignore
*/
const Util = require('../../util/');
const G = require('@antv/g');
const domToImage = require('dom-to-image');
const Mixin = function() {};
Util.augment(Mixin, {
createPath() {},
drawInner(context) {
let { html, x, y, width, height } = this._attrs;
const canvas = this.get('canvas');
const el = canvas.get('el');
const tm = Util.clone(this.getTotalMatrix());
if (Util.isString(html)) {
html = Util.createDOM(html);
} else {
html = html.cloneNode(true);
}
el.parentNode.appendChild(html);
domToImage.toPng(html, {
width,
height
})
.then(dataUrl => {
const img = new Image();
img.src = dataUrl;
img.onload = () => {
context.setTransform(tm[0], tm[1], tm[3], tm[4], tm[6], tm[7]);
context.drawImage(img, x, y, width, height);
};
});
html.remove();
}
});
Util.mixin(G.Dom, [ Mixin ]);
module.exports = Mixin;

2
src/graph.js
View File

@ -4,6 +4,7 @@
*/ */
require('./extend/g/group'); require('./extend/g/group');
require('./extend/g/shape'); require('./extend/g/shape');
require('./extend/g/dom');
const Base = require('./base'); const Base = require('./base');
const Item = require('./item/'); const Item = require('./item/');
@ -195,7 +196,6 @@ class Graph extends Base {
const Canvas = G.Canvas; const Canvas = G.Canvas;
const canvas = new Canvas(canvasCfg); const canvas = new Canvas(canvasCfg);
const el = canvas.get('el'); const el = canvas.get('el');
el.style.position = 'absolute';
el.style.top = 0; el.style.top = 0;
el.style.left = 0; el.style.left = 0;
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';

6
src/util/graph.js
View File

@ -56,7 +56,6 @@ module.exports = {
const graphCanvas = graph.getCanvas(); const graphCanvas = graph.getCanvas();
const graphBBox = graph.getBBox(); const graphBBox = graph.getBBox();
const padding = graph.getFitViewPadding(); const padding = graph.getFitViewPadding();
const renderer = graph.get('renderer');
const children = graphCanvas.get('children'); const children = graphCanvas.get('children');
const matrixCache = BaseUtil.cloneDeep(graph.getMatrix()); const matrixCache = BaseUtil.cloneDeep(graph.getMatrix());
if (!canvas) { if (!canvas) {
@ -75,10 +74,11 @@ module.exports = {
}, graphBBox, padding); }, graphBBox, padding);
beforeTransform(graph); beforeTransform(graph);
graph.setMatrix(matrix); graph.setMatrix(matrix);
canvas.set('renderer', renderer);
canvas.set('children', children); canvas.set('children', children);
canvas.matrix = matrix; canvas.matrix = matrix;
canvas.draw(); // canvas.draw();
canvas._cfg.painter.beforeDraw();
canvas._cfg.painter._drawGroup(canvas);
graph.setMatrix(matrixCache); graph.setMatrix(matrixCache);
afterTransform(graph); afterTransform(graph);
return canvas.get('el'); return canvas.get('el');