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

fix minimap

Browse Source
This commit is contained in:
huangtong.ht 2018-08-03 22:04:10 +08:00
parent d52faee679
commit e8b8429fee
16 changed files with 216 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/custom-draw.html
View File

@ -27,7 +27,7 @@ G6.registerNode('customNode', {
x: 100,
y: 100,
fill: '#333',
text: '我是一个自定义节点，\n有下面那个方形和我自己组成'
text: '我是一个自定义节点，有下面那个方形和我自己组成'
}
});
return group.addShape('rect', {

2
demos/custom-flowing-edge.html
View File

@ -14,7 +14,7 @@ G6.registerEdge('flowingEdge', {
afterDraw(item) {
const keyShape = item.getKeyShape();
keyShape.attr('lineDash', [10, 10]);
keyShape.attr('lineDashOffset', 0)
keyShape.attr('lineDashOffset', 0);
keyShape.animate({
lineDashOffset: -20,
repeat: true

71
demos/gallery-borning.html Normal file
View File

@ -0,0 +1,71 @@
<!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 id="mountNode"></div>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
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',
x: -100,
y: 200
}, {
id: 'node1',
x: 100,
y: 200
}, {
id: 'node2',
x: 300,
y: 200
}, {
id: 'node3',
x: 600,
y: 200
}],
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,
});
graph.node({
shape: 'custom'
});
graph.read(data);
</script>
</body>
</html>

3
demos/gallery-graphanalyzer.html
View File

@ -79,9 +79,6 @@
const legend = document.getElementById('legend');
if (minimap !== undefined) minimap.style.display = 'none';
if (legend !== undefined) legend.style.display = 'none';
// setTimeout(()=>{
// graph.destroy();
// }, 1000)
});
</script>

2
demos/gallery-worldcup-tree.html
View File

@ -141,7 +141,7 @@
shape: 'card'
});
tree.edge({
shape: 'polyline',
shape: 'polyline-round',
style: {
stroke: 'white',
lineWidth: 1,

22
demos/plugin-minimap.html
View File

@ -16,10 +16,22 @@
<script src="../build/g6.js"></script>
<script src="../build/plugin.tool.minimap.js"></script>
<script>
const plugin = new G6.Plugins['tool.minimap']({
container: 'minimap',
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: [{
@ -54,7 +66,7 @@
container: 'mountNode',
fitView: 'cc',
height: window.innerHeight,
plugins: [plugin]
plugins: [ plugin ]
});
graph.read(data);
</script>

4
plugins/tool.minimap/minimap.js
View File

@ -232,8 +232,6 @@ class Minimap {
this.viewPort = viewPort;
this.controlLayer = controlLayer;
}
// 1. 为了防止画面闪烁 2. 为了缩略图中元素最小尺寸可控；所以这里采取了一种比较 hack 的方式绘制缩略图
// 大体思路是将 graph canvas 的 context 篡改为 minimap canvas 的 context，然后用 graph 的 canvas 去画
renderBackground(graph) {
if (!graph) {
graph = this.getGraph();
@ -247,7 +245,7 @@ class Minimap {
height,
canvas: miniMapCanvas
});
this.miniMapMatrix = miniMapCanvas.getMatrix();
this.miniMapMatrix = miniMapCanvas.matrix;
}
renderViewPort(graph) {
if (!graph) {

34
src/extend/g/root-group.js
View File

@ -1,34 +0,0 @@
/**
* @fileOverview freeze size group
* @author huangtonger@aliyun.com
*/
const G = require('@antv/g');
const Util = require('../../util/');
const Group = function(cfg) {
Group.superclass.constructor.call(this, cfg);
};
Util.extend(Group, G.Group);
Util.augment(Group, {
drawInner(context) {
this.deepEach(child => {
const freezePoint = child.get('freezePoint');
const freezable = this.get('freezable');
const scale = this.getMatrix()[0];
if (freezable !== false && child.isShape && freezePoint && child.get('visible')) {
child.resetMatrix(freezePoint, scale);
child.transform([
[ 't', -freezePoint.x, -freezePoint.y ],
[ 's', 1 / scale, 1 / scale ],
[ 't', freezePoint.x, freezePoint.y ]
]);
}
});
this.constructor.superclass.drawInner.call(this, context);
}
});
module.exports = Group;

32
src/graph.js
View File

@ -17,9 +17,10 @@ const EventMixin = require('./mixin/event');
const ModeMixin = require('./mixin/mode');
const FilterMixin = require('./mixin/filter');
const AnimateMixin = require('./mixin/animate');
const DrawMixin = require('./mixin/draw');
const FitView = require('./mixin/fit-view');
const ForceFit = require('./mixin/force-fit');
const Mixins = [ FilterMixin, MappingMixin, QueryMixin, AnimateMixin, ForceFit, LayoutMixin, FitView, EventMixin, ModeMixin ];
const Mixins = [ FilterMixin, MappingMixin, QueryMixin, AnimateMixin, DrawMixin, ForceFit, LayoutMixin, FitView, EventMixin, ModeMixin ];
const TAB_INDEX = 20;
class Graph extends Base {
@ -84,11 +85,18 @@ class Graph extends Base {
* @type {string}
*/
defaultIntersectBox: 'circle',
/**
* renderer canvas or svg
* @type {string}
*/
renderer: 'canvas',
_controllers: {},
_timers: {},
_dataMap: {},
_itemMap: {},
_freezMap: {},
_data: {},
_delayRunObj: {}
};
@ -189,25 +197,22 @@ class Graph extends Base {
const frontCanvas = new Canvas(canvasCfg);
const frontEl = frontCanvas.get('el');
const htmlElementContaniner = graphContainer.appendChild(Util.createDOM('<div class="graph-container-html-Elements"></div>'));
frontEl.style.position = 'absolute';
frontEl.style.top = 0;
frontEl.style.left = 0;
htmlElementContaniner.style.overflow = 'hidden';
htmlElementContaniner.style.width = width + 'px';
htmlElementContaniner.style.height = height + 'px';
htmlElementContaniner.style.position = 'absolute';
htmlElementContaniner.style.top = 0;
htmlElementContaniner.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;
this.set('_canvas', canvas);
this.set('_frontCanvas', frontCanvas);
this.set('_htmlElementContaniner', htmlElementContaniner);
const mouseEventWrapper = this.getMouseEventWrapper();
mouseEventWrapper.style.outline = 'none';
mouseEventWrapper.style['user-select'] = 'none';
mouseEventWrapper.setAttribute('tabindex', TAB_INDEX);
canvas.set('htmlElementContaniner', htmlElementContaniner);
const rootGroup = canvas.addGroup();
const frontRootGroup = frontCanvas.addGroup();
@ -235,7 +240,7 @@ class Graph extends Base {
return keyboardEventWrapper ? keyboardEventWrapper : this.getMouseEventWrapper();
}
getMouseEventWrapper() {
return this.get('_htmlElementContaniner');
return this.get('_frontCanvas').get('el');
}
/**
* @param {object} plugin - plugin instance
@ -749,15 +754,10 @@ class Graph extends Base {
}
const canvas = this.get('_canvas');
const frontCanvas = this.get('_frontCanvas');
const htmlElementContaniner = this.get('_htmlElementContaniner');
if (width !== this.get('width') || height !== this.get('height')) {
this.emit('beforechangesize');
canvas.changeSize(width, height);
frontCanvas.changeSize(width, height);
htmlElementContaniner.css({
width: width + 'px',
height: height + 'px'
});
this.set('width', width);
this.set('height', height);

34
src/mixin/animate.js
View File

@ -51,37 +51,11 @@ Mixin.AUGMENT = {
graph: this
});
controllers.animate = animateController;
const animateDraw = Util.debounce(() => {
animateController.run();
}, 16);
this.set('_animateDraw', animateDraw);
}
const simpleDraw = () => {
canvas.draw();
frontCanvas.draw();
};
const animateDraw = Util.debounce(() => {
animateController.run();
}, 16);
if (animateController) {
let updateStashTimeout;
this.draw = () => {
const forcePreventAnimate = this.get('forcePreventAnimate');
if (forcePreventAnimate) {
if (updateStashTimeout) {
clearTimeout(updateStashTimeout);
}
updateStashTimeout = setTimeout(() => {
animateController.updateStash();
}, 16);
simpleDraw();
} else {
animateDraw();
}
};
} else {
this.draw = simpleDraw;
}
},
drawFrontCanvas() {
const frontCanvas = this.get('_frontCanvas');
frontCanvas.draw();
}
};

40
src/mixin/draw.js Normal file
View File

@ -0,0 +1,40 @@
/**
* @fileOverview draw
* @author huangtonger@aliyun.com
*/
const Mixin = {};
Mixin.INIT = '_initDraw';
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) {
draw = () => {
const forcePreventAnimate = this.get('forcePreventAnimate');
if (forcePreventAnimate) {
animateController.updateStash();
simpleDraw();
} else {
animateDraw();
}
};
} else {
draw = simpleDraw;
}
this.draw = draw;
},
drawFrontCanvas() {
const frontCanvas = this.get('_frontCanvas');
frontCanvas.draw();
}
};
module.exports = Mixin;

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

@ -92,18 +92,6 @@ Mixin.AUGMENT = {
}, box, padding, ratio => {
return this._getZoomRatio(ratio);
});
// const centerX = (box.maxX + box.minX) / 2;
// const centerY = (box.maxY + box.minY) / 2;
// const cWidth = width - padding[1] - padding[3];
// const cHeight = height - padding[0] - padding[2];
// const bWidth = box.maxX - box.minX;
// const bHeight = box.maxY - box.minY;
// let ratio = Math.min(cHeight / bHeight, cWidth / bWidth);
// ratio = this._getZoomRatio(ratio);
// Util.mat3.translate(matrix, matrix, [ -centerX, -centerY ]);
// Util.mat3.scale(matrix, matrix, [ ratio, ratio ]);
// Util.mat3.translate(matrix, matrix, [ width / 2, height / 2 ]);
this.updateMatrix(matrix);
},
/**
@ -118,15 +106,12 @@ Mixin.AUGMENT = {
* @return {Graph} this
*/
updateMatrix(matrix) {
const rootGroup = this.get('_rootGroup');
const frontRootGroup = this.get('_frontRootGroup');
const ev = {
updateMatrix: matrix,
originMatrix: this.getMatrix()
};
this.emit('beforeviewportchange', ev);
rootGroup.setMatrix(matrix);
frontRootGroup.setMatrix(matrix);
this.setMatrix(matrix);
this.emit('afterviewportchange', ev);
this.draw();
return this;
@ -200,6 +185,15 @@ Mixin.AUGMENT = {
const rootGroup = this.get('_rootGroup');
return rootGroup.getMatrix();
},
/**
* @param {object} matrix - matrix
*/
setMatrix(matrix) {
const rootGroup = this.get('_rootGroup');
const frontRootGroup = this.get('_frontRootGroup');
rootGroup.setMatrix(matrix);
frontRootGroup.setMatrix(matrix);
},
/**
* @param {object} domPoint domPoint
* @return {object} graph point

9
src/util/graph.js
View File

@ -54,10 +54,11 @@ module.exports = {
beforeTransform,
afterTransform } = options;
const graphCanvas = graph.getCanvas();
const graphBBox = graph.getCanvas().getBBox();
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) {
const containerDOM = DomUtil.createDOM('<canvas></canvas>');
canvas = new G.Canvas({
@ -73,10 +74,12 @@ module.exports = {
maxY: height
}, graphBBox, padding);
beforeTransform(graph);
graph.setMatrix(matrix);
canvas.set('renderer', renderer);
canvas.set('children', children);
canvas.setMatrix(matrix);
canvas.set('children', BaseUtil.cloneDeep(children));
canvas.matrix = matrix;
canvas.draw();
graph.setMatrix(matrixCache);
afterTransform(graph);
return canvas.get('el');
}

8
src/util/graphic.js
View File

@ -7,6 +7,14 @@ const MathUtil = require('./math');
const BaseUtil = require('./base');
const GraphicUtil = {
/**
* set box1 into box2
* @param {object} box1 - box1
* @param {object} box2 - box2
* @param {array} padding - autozoom padding
* @param {function} limitRtio - limit ratio callback
* @return {object} matrix
*/
getAutoZoomMatrix(box1, box2, padding, limitRtio) {
const matrix = [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ];
const width = box1.maxX - box1.minX;

72
test/unit/extend/g/root-group-spec.js
View File

@ -1,37 +1,37 @@
const expect = require('chai').expect;
const G = require('@antv/g');
const div = document.createElement('div');
require('../../../../src/extend/g/group');
const RootGroup = require('../../../../src/extend/g/root-group');
// const expect = require('chai').expect;
// const G = require('@antv/g');
// const div = document.createElement('div');
// require('../../../../src/extend/g/group');
// const RootGroup = require('../../../../src/extend/g/root-group');
div.id = 'extend-root-group-spec';
document.body.appendChild(div);
describe('freeze size group test', () => {
const canvas = new G.Canvas({
containerDOM: div
});
const rootGroup = canvas.addGroup(RootGroup);
const rectAttrs = {
x: 0,
y: 0,
width: 100,
heigth: 100,
fill: 'red'
};
const rect = rootGroup.addShape('rect', {
attrs: rectAttrs,
freezePoint: {
x: 0,
y: 0
}
});
rootGroup.scale(2, 2);
it('drawInner', () => {
expect(rect.getMatrix()).eqls([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]);
canvas.draw();
expect(rect.getMatrix()).eqls([ 0.5, 0, 0, 0, 0.5, 0, 0, 0, 1 ]);
});
it('destroy test canvas', () => {
canvas.destroy();
});
});
// div.id = 'extend-root-group-spec';
// document.body.appendChild(div);
// describe('freeze size group test', () => {
// const canvas = new G.Canvas({
// containerDOM: div
// });
// const rootGroup = canvas.addGroup(RootGroup);
// const rectAttrs = {
// x: 0,
// y: 0,
// width: 100,
// heigth: 100,
// fill: 'red'
// };
// const rect = rootGroup.addShape('rect', {
// attrs: rectAttrs,
// freezePoint: {
// x: 0,
// y: 0
// }
// });
// rootGroup.scale(2, 2);
// it('drawInner', () => {
// expect(rect.getMatrix()).eqls([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]);
// canvas.draw();
// expect(rect.getMatrix()).eqls([ 0.5, 0, 0, 0, 0.5, 0, 0, 0, 1 ]);
// });
// it('destroy test canvas', () => {
// canvas.destroy();
// });
// });

7
test/unit/extend/g/shape-spec.js
View File

@ -17,10 +17,11 @@ describe('extend shape test', () => {
};
const rect = canvas.addShape('rect', {
attrs: rectAttrs,
zIndex: 0
zIndex: 0,
class: 'aaa'
});
it('getAttrs', () => {
expect(rect.getAttrs()).eqls(rectAttrs);
it('hasClass', () => {
expect(rect.hasClass('aaa')).eql(true);
});
it('destroy test canvas', () => {
canvas.destroy();