test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 02:38:20 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

add a minimap solution

Browse Source
This commit is contained in:
TomHuangCN 2018-08-08 17:15:32 +08:00
parent 8c08324cee
commit bfa0836a5a
10 changed files with 171 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -1,8 +1,7 @@
{
"plugins": [
"transform-object-rest-spread",
"transform-remove-strict-mode",
"transform-remove-strict-mode"
],
"presets": [
[

2
.torch.compile.opts.js
View File

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

11
demos/custom-html.html
View File

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

7
demos/gallery-graphanalyzer.html
View File

@ -14,8 +14,8 @@
<body>
<div id='mountNode'></div>
<div id='legend'></div>
<div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div>
<div id='legend'></div>
<script>
var graph = null;
var clickOnNode = null;
@ -81,7 +81,7 @@
nodeColorMapper,
edgeSizeMapper,
nodeSizeMapper,
// minimapPlugin
minimapPlugin
],
modes: {
default: ['panCanvas', 'wheelZoom']
@ -103,6 +103,9 @@
const legend = document.getElementById('legend');
if (minimap !== undefined) minimap.style.display = 'none';
if (legend !== undefined) legend.style.display = 'none';
$('#downloadimage').on('click', ev=>{
graph.downloadImage();
});
});
</script>

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,
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 = {
nodes: [{
id: 'node0',

5
package.json
View File

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

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 htmlToImage = require('html-to-image');
const Mixin = function() {};
Util.augment(Mixin, {
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);
htmlToImage.toPng(html, {
width,
height
})
.then(dataUrl => {
const img = new Image();
img.src = dataUrl;
el.parentNode.appendChild(img);
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/shape');
require('./extend/g/dom');
const Base = require('./base');
const Item = require('./item/');
@ -195,7 +196,6 @@ class Graph extends Base {
const Canvas = G.Canvas;
const canvas = new Canvas(canvasCfg);
const el = canvas.get('el');
el.style.position = 'absolute';
el.style.top = 0;
el.style.left = 0;
el.style.overflow = 'hidden';

4
src/util/graph.js
View File

@ -56,7 +56,6 @@ module.exports = {
const graphCanvas = graph.getCanvas();
const graphBBox = graph.getBBox();
const padding = graph.getFitViewPadding();
const renderer = graph.get('renderer');
const children = graphCanvas.get('children');
const matrixCache = BaseUtil.cloneDeep(graph.getMatrix());
if (!canvas) {
@ -75,8 +74,7 @@ module.exports = {
}, graphBBox, padding);
beforeTransform(graph);
graph.setMatrix(matrix);
canvas.set('renderer', renderer);
canvas.set('children', children);
canvas.set('children', BaseUtil.cloneDeep(children));
canvas.matrix = matrix;
canvas.draw();
graph.setMatrix(matrixCache);