From f2fa3a5cae3fb287b2504ea9cd7853b9348ca2f3 Mon Sep 17 00:00:00 2001 From: "huangtong.ht" Date: Tue, 28 Aug 2018 18:00:04 +0800 Subject: [PATCH 1/2] feat: add grid plugin --- demos/gallery-grid.html | 42 +++++++ demos/text.html | 46 ++------ package.json | 2 +- plugins/index.js | 1 + plugins/tool.freezeSize/index.js | 6 +- plugins/tool.grid/index.js | 181 +++++++++++++++++++++++++++++++ src/version.js | 2 +- 7 files changed, 238 insertions(+), 42 deletions(-) create mode 100644 demos/gallery-grid.html create mode 100644 plugins/tool.grid/index.js diff --git a/demos/gallery-grid.html b/demos/gallery-grid.html new file mode 100644 index 0000000000..eb417f8b29 --- /dev/null +++ b/demos/gallery-grid.html @@ -0,0 +1,42 @@ + + + + + + + + 画廊-网格 + + + +
+ + + + + + diff --git a/demos/text.html b/demos/text.html index 90c542a0de..e2587ad84b 100644 --- a/demos/text.html +++ b/demos/text.html @@ -7,69 +7,39 @@ - - - - - + 测试
diff --git a/package.json b/package.json index ffd9be3415..43cac8d209 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "2.1.0-beta.13", + "version": "2.1.0-beta.14", "description": "graph visualization frame work", "main": "build/g6.js", "homepage": "https://github.com/antvis/g6", diff --git a/plugins/index.js b/plugins/index.js index 138a31d8e6..030c493d68 100644 --- a/plugins/index.js +++ b/plugins/index.js @@ -12,6 +12,7 @@ module.exports = { 'tool.minimap': require('./tool.minimap/'), 'tool.tooltip': require('./tool.tooltip/'), 'tool.fisheye': require('./tool.fisheye/'), + 'tool.gird': require('./tool.grid/'), 'tool.textDisplay': require('./tool.textDisplay/'), 'util.randomData': require('./util.randomData/') }; diff --git a/plugins/tool.freezeSize/index.js b/plugins/tool.freezeSize/index.js index d6fa62358a..75346cce04 100644 --- a/plugins/tool.freezeSize/index.js +++ b/plugins/tool.freezeSize/index.js @@ -8,8 +8,10 @@ const Util = G6.Util; class Plugin { constructor(options) { - Util.mix(this, options); - this._freezeElements = {}; + Util.mix(this, { + // cache freeze elements + _freezeElements: {} + }, options); } init() { const graph = this.graph; diff --git a/plugins/tool.grid/index.js b/plugins/tool.grid/index.js new file mode 100644 index 0000000000..0f638b519e --- /dev/null +++ b/plugins/tool.grid/index.js @@ -0,0 +1,181 @@ +/** + * @fileOverview grid + * @author huangtonger@aliyun.com + */ + +const G6 = require('@antv/g6'); +const Util = G6.Util; + +class Plugin { + constructor(options) { + Util.mix(this, { + /** + * grid cell + * @type {number} + */ + cell: 16, + + /** + * grid line style + * @type {object} + */ + line: { + stroke: '#A3B1BF', + lineWidth: 0.5 + }, + + /** + * grid line style + * @type {string} + */ + type: 'point', + + /** + * visible + * @type {boolean} + */ + visible: true + }, options); + } + /** + * init plugin + */ + init() { + const graph = this.graph; + graph.on('afterinit', () => { + this._draw(); + }); + graph.on('afterviewportchange', () => { + this.update(); + }); + graph.on('beforechangesize', () => { + this.update(); + }); + !this.visible && this.hide(); + } + // draw grid + _draw() { + const graph = this.graph; + const path = this._getPath(); + const group = graph.getRootGroup(); + const attrs = Util.mix({}, this.line); + const matrix = graph.getMatrix(); + const type = this.type; + const lineWidth = type === 'line' ? 1 / matrix[0] : 2 / matrix[0]; + if (type === 'point') { + attrs.lineDash = null; + } + attrs.lineWidth = lineWidth; + attrs.path = path; + const gridEl = group.addShape('path', { + attrs, + capture: false, + zIndex: 0 + }); + gridEl.toBack(); + this.gridEl = gridEl; + } + // get line style grid path + _getLinePath() { + const graph = this.graph; + const width = graph.getWidth(); + const height = graph.getHeight(); + const tl = graph.getPoint({ + x: 0, + y: 0 + }); + const br = graph.getPoint({ + x: width, + y: height + }); + const cell = this.cell; + const flooX = Math.ceil(tl.x / cell) * cell; + const flooY = Math.ceil(tl.y / cell) * cell; + const path = []; + for (let i = 0; i <= br.x - tl.x; i += cell) { + const x = flooX + i; + path.push([ 'M', x, tl.y ]); + path.push([ 'L', x, br.y ]); + } + for (let j = 0; j <= br.y - tl.y; j += cell) { + const y = flooY + j; + path.push([ 'M', tl.x, y ]); + path.push([ 'L', br.x, y ]); + } + return path; + } + // get grid path + _getPath() { + const type = this.type; + return this['_get' + Util.upperFirst(type) + 'Path'](); + } + // get point style grid path + _getPointPath() { + const graph = this.graph; + const width = graph.getWidth(); + const height = graph.getHeight(); + const tl = graph.getPoint({ + x: 0, + y: 0 + }); + const br = graph.getPoint({ + x: width, + y: height + }); + const cell = this.cell; + const flooX = Math.ceil(tl.x / cell) * cell; + const flooY = Math.ceil(tl.y / cell) * cell; + const matrix = graph.getMatrix(); + const detalx = 2 / matrix[0]; + const path = []; + for (let i = 0; i <= br.x - tl.x; i += cell) { + const x = flooX + i; + for (let j = 0; j <= br.y - tl.y; j += cell) { + const y = flooY + j; + path.push([ 'M', x, y ]); + path.push([ 'L', x + detalx, y ]); + } + } + return path; + } + show() { + this.gridEl.show(); + this.visible = true; + } + hide() { + this.gridEl.hide(); + this.visible = false; + } + getCell() { + const cell = this.cell; + const graph = this.graph; + const matrix = graph.getMatrix(); + const scale = matrix[0]; + if (cell * scale < 9.6) { + return 9.6 / scale; + } + return cell; + } + update(cfg) { + Util.mix(this, cfg); + const path = this._getPath(); + const gridEl = this.gridEl; + const graph = this.graph; + const zoom = graph.getZoom(); + const type = this.type; + const lineWidth = type === 'line' ? 1 / zoom : 2 / zoom; + if (this.cell * zoom < 8 || this.cell * zoom > 32) { + this.cell = 16 / zoom; + } + gridEl.attr('lineWidth', lineWidth); + gridEl.attr('path', path); + } + destroy() { + const gridEl = this.gridEl; + gridEl && gridEl.remove(); + } +} + +G6.Plugins['tool.grid'] = Plugin; + +module.exports = Plugin; diff --git a/src/version.js b/src/version.js index 13c274204c..9b42093239 100755 --- a/src/version.js +++ b/src/version.js @@ -1 +1 @@ -module.exports = '2.1.0-beta.13'; +module.exports = '2.1.0-beta.14'; From 11ccefce81ecf88780e8412472e7415c5acb2e97 Mon Sep 17 00:00:00 2001 From: "huangtong.ht" Date: Tue, 28 Aug 2018 19:23:18 +0800 Subject: [PATCH 2/2] fix conflict --- src/version.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/version.js b/src/version.js index fd058fbf93..f7bc222b1b 100755 --- a/src/version.js +++ b/src/version.js @@ -1,5 +1 @@ -<<<<<<< HEAD -module.exports = '2.1.0-beta.14'; -======= module.exports = '2.1.0-beta.15'; ->>>>>>> 57cb3dd22dc8dedfdf705282b377922148845890