mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 10:48:24 +08:00
feat: add freeze size plugin
This commit is contained in:
parent
014df6d25a
commit
4e6c6ba795
@ -92,16 +92,6 @@
|
||||
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';
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6",
|
||||
"version": "2.1.0-beta.8",
|
||||
"version": "2.1.0-beta.9",
|
||||
"description": "graph visualization frame work",
|
||||
"main": "build/g6.js",
|
||||
"homepage": "https://github.com/antvis/g6",
|
||||
@ -86,7 +86,7 @@
|
||||
"ci": "npm run lint && npm run test",
|
||||
"copy": "node ./bin/cp-dist.js",
|
||||
"coverage": "npm run coverage-generator && npm run coverage-viewer",
|
||||
"coverage-generator": "torch --compile --coverage --renderer --recursive --source-pattern index.js,src/**/*.js test/unit/plugins/tool.mapper-spec.js",
|
||||
"coverage-generator": "torch --compile --coverage --renderer --recursive --source-pattern index.js,src/**/*.js test/unit/",
|
||||
"coverage-viewer": "torch-coverage",
|
||||
"demos": "electron ./demos/app.js",
|
||||
"demos-web": "node ./demos/app.js --web --port 2046",
|
||||
@ -100,7 +100,7 @@
|
||||
"screenshot": "node ./bin/screenshot.js",
|
||||
"start": "npm run dev",
|
||||
"test": "torch --compile --renderer --recursive ./test/unit",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/graph-spec.js",
|
||||
"watch": "webpack --config webpack-dev.config.js",
|
||||
"win-dev": "node ./bin/win-dev.js"
|
||||
},
|
||||
|
@ -18,6 +18,7 @@ require('../tool.fisheye/');
|
||||
require('../util.extractSubgraph/');
|
||||
require('../edge.quadraticCurve/');
|
||||
require('../behaviour.analysis/');
|
||||
require('../tool.freezeSize/');
|
||||
|
||||
class Plugin {
|
||||
constructor(options) {
|
||||
@ -84,7 +85,6 @@ class Plugin {
|
||||
init() {
|
||||
const graph = this.graph;
|
||||
|
||||
const highlighter = new G6.Plugins['tool.highlightSubgraph']();
|
||||
if (this.fisheye) {
|
||||
const fisheye = new G6.Plugins['tool.fisheye']({
|
||||
radius: 200
|
||||
@ -95,7 +95,19 @@ class Plugin {
|
||||
const textDisplay = new G6.Plugins['tool.textDisplay']();
|
||||
graph.addPlugin(textDisplay);
|
||||
}
|
||||
const highlighter = new G6.Plugins['tool.highlightSubgraph']();
|
||||
const freezeSize = new G6.Plugins['tool.freezeSize']();
|
||||
graph.addPlugin(highlighter);
|
||||
graph.addPlugin(freezeSize);
|
||||
graph.on('afteritemdraw', ({ item }) => {
|
||||
const label = item.getLabel();
|
||||
if (label) {
|
||||
label.set('freezePoint', {
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
graph.on('beforeinit', () => {
|
||||
let layout = graph.get('layout');
|
||||
if (!layout) {
|
||||
|
53
plugins/tool.freezeSize/index.js
Normal file
53
plugins/tool.freezeSize/index.js
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* @fileOverview freeze size zoom
|
||||
* @author huangtonger@aliyun.com
|
||||
*/
|
||||
|
||||
const G6 = require('@antv/g6');
|
||||
const Util = G6.Util;
|
||||
|
||||
class Plugin {
|
||||
constructor(options) {
|
||||
Util.mix(this, options);
|
||||
this._freezeElements = {};
|
||||
}
|
||||
init() {
|
||||
const graph = this.graph;
|
||||
graph.on('afterchange', () => {
|
||||
this._stashFreezeElement();
|
||||
});
|
||||
graph.on('afterzoom', () => {
|
||||
this.freezeSize();
|
||||
});
|
||||
}
|
||||
_stashFreezeElement() {
|
||||
const graph = this.graph;
|
||||
const canvas = graph.getCanvas();
|
||||
const freezeElements = this._freezeElements;
|
||||
canvas.deepEach(child => {
|
||||
if (child.get('freezePoint')) {
|
||||
freezeElements[child.gid] = child;
|
||||
}
|
||||
});
|
||||
}
|
||||
freezeSize() {
|
||||
const freezeElements = this._freezeElements;
|
||||
const graph = this.graph;
|
||||
Util.each(freezeElements, freezeElement => {
|
||||
const freezePoint = freezeElement.get('freezePoint');
|
||||
const freezable = graph.get('freezable');
|
||||
const scale = graph.getScale();
|
||||
if (freezable !== false && freezeElement.isShape && freezePoint && freezeElement.get('visible')) {
|
||||
freezeElement.resetMatrix();
|
||||
freezeElement.transform([
|
||||
[ 't', -freezePoint.x, -freezePoint.y ],
|
||||
[ 's', 1 / scale, 1 / scale ],
|
||||
[ 't', freezePoint.x, freezePoint.y ]
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
G6.Plugins['tool.freezeSize'] = Plugin;
|
||||
module.exports = Plugin;
|
@ -26,15 +26,12 @@ class Plugin {
|
||||
const nodes = graph.getNodes();
|
||||
Util.each(nodes, node => {
|
||||
const label = node.getLabel();
|
||||
const model = node.getModel();
|
||||
const labelBox = label.getBBox();
|
||||
const labelWidth = labelBox.maxX - labelBox.minX;
|
||||
const scale = graph.getScale();
|
||||
const labelWidth = (labelBox.maxX - labelBox.minX) * (1 / scale);
|
||||
const nodeBox = node.getBBox();
|
||||
let nodeWidth = nodeBox.maxX - nodeBox.minX;
|
||||
if (model.size === undefined) {
|
||||
const nodeBox = node.getBBox();
|
||||
nodeWidth = nodeBox.maxX - nodeBox.minX;
|
||||
}
|
||||
const nodeWidth = nodeBox.maxX - nodeBox.minX;
|
||||
|
||||
if (labelWidth === 0) return;
|
||||
const ratio = labelWidth / nodeWidth;
|
||||
if (ratio > 2) {
|
||||
|
@ -189,6 +189,12 @@ Mixin.AUGMENT = {
|
||||
const rootGroup = this.get('_rootGroup');
|
||||
return rootGroup.getMatrix();
|
||||
},
|
||||
/**
|
||||
* @return {number} scale
|
||||
*/
|
||||
getScale() {
|
||||
return this.getMatrix()[0];
|
||||
},
|
||||
/**
|
||||
* @param {object} matrix - matrix
|
||||
*/
|
||||
|
@ -137,7 +137,7 @@ class Tree extends Graph {
|
||||
* @param {object} node item node
|
||||
* @param {object} nth nth
|
||||
*/
|
||||
setNodeNth(node, nth) {
|
||||
_setNodeNth(node, nth) {
|
||||
node = this.getItem(node);
|
||||
const model = node.getModel();
|
||||
const parent = node.getParent();
|
||||
@ -193,7 +193,7 @@ class Tree extends Graph {
|
||||
this._setVisibleByCollapsed(item);
|
||||
// set node nth
|
||||
if (!Util.isNil(model.nth)) {
|
||||
this.setNodeNth(item, model.nth);
|
||||
this._setNodeNth(item, model.nth);
|
||||
}
|
||||
this.find(parent.id).forceUpdate();
|
||||
} else {
|
||||
@ -308,7 +308,7 @@ class Tree extends Graph {
|
||||
|
||||
// set node nth
|
||||
if (!Util.isNil(model.nth)) {
|
||||
this.setNodeNth(item, model.nth);
|
||||
this._setNodeNth(item, model.nth);
|
||||
}
|
||||
const parentItem = this.find(itemModel.parent);
|
||||
parentItem && parentItem.forceUpdate();
|
||||
|
@ -1 +1 @@
|
||||
module.exports = '2.1.0-beta.8';
|
||||
module.exports = '2.1.0-beta.9';
|
||||
|
9
test/unit/base-spec.js
Normal file
9
test/unit/base-spec.js
Normal file
@ -0,0 +1,9 @@
|
||||
const Base = require('../../src/base');
|
||||
const expect = require('chai').expect;
|
||||
|
||||
describe('base test', () => {
|
||||
const base = new Base();
|
||||
it('getDefaultCfg', () => {
|
||||
expect(base.getDefaultCfg()).not.eql(undefined);
|
||||
});
|
||||
});
|
@ -370,3 +370,14 @@ describe('graph test', () => {
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
|
||||
// describe('graph test cfg', () => {
|
||||
// it('container is id', () => {
|
||||
// const graph = new Graph({
|
||||
// id: 'graph',
|
||||
// width: 500,
|
||||
// height: 500
|
||||
// });
|
||||
// console.log(div);
|
||||
// });
|
||||
// });
|
||||
|
12
test/unit/layouts/base-spec.js
Normal file
12
test/unit/layouts/base-spec.js
Normal file
@ -0,0 +1,12 @@
|
||||
const Base = require('../../../src/layouts/base');
|
||||
const expect = require('chai').expect;
|
||||
|
||||
describe('layout base test', () => {
|
||||
const base = new Base();
|
||||
it('execute', () => {
|
||||
function fn() {
|
||||
base.execute();
|
||||
}
|
||||
expect(fn).to.Throw();
|
||||
});
|
||||
});
|
@ -98,6 +98,9 @@ describe('tree test', () => {
|
||||
});
|
||||
expect(tree.find('addNode.2')).not.equal(undefined);
|
||||
expect(tree.find('addNode.1')).equal(undefined);
|
||||
tree.update('addNode', {
|
||||
nth: 1
|
||||
});
|
||||
});
|
||||
it('remove', () => {
|
||||
tree.remove('analytics');
|
||||
@ -108,23 +111,23 @@ describe('tree test', () => {
|
||||
});
|
||||
it('getHierarchy', () => {
|
||||
expect(tree.getHierarchy('root')).equal(1);
|
||||
expect(tree.getHierarchy('addNode')).equal(2);
|
||||
});
|
||||
it('getNth', () => {
|
||||
expect(tree.getNth('addNode')).equal(1);
|
||||
});
|
||||
it('setNodeNth', () => {
|
||||
tree.setNodeNth('animate', 1);
|
||||
// expect(tree.getNth('addNode')).equal(1);
|
||||
expect(tree.getNth('addNode')).equal(0);
|
||||
});
|
||||
it('save', () => {
|
||||
expect(tree.save().roots.length).equal(1);
|
||||
});
|
||||
it('getRoots', () => {
|
||||
expect(tree.getRoots()[0].id).equal('root');
|
||||
});
|
||||
it('changeLayout', () => {
|
||||
tree.changeLayout(() => {
|
||||
|
||||
});
|
||||
});
|
||||
// it('destroy test graph', () => {
|
||||
// tree.destroy();
|
||||
// });
|
||||
it('destroy test graph', () => {
|
||||
tree.destroy();
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user