diff --git a/.babelrc b/.babelrc index d3a883036..723fc3bdd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,3 @@ - { "plugins": [ "transform-object-rest-spread", diff --git a/.torch.compile.opts.js b/.torch.compile.opts.js index 67414d097..1bc192a53 100644 --- a/.torch.compile.opts.js +++ b/.torch.compile.opts.js @@ -13,7 +13,7 @@ module.exports = { ], ], presets: [ - 'env' + 'env', ], sourceMaps: 'inline', }, diff --git a/demos/custom-html.html b/demos/custom-html.html index 71b37ebd1..161de4932 100644 --- a/demos/custom-html.html +++ b/demos/custom-html.html @@ -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('
这里是 HTML 节点
'); - 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); diff --git a/demos/gallery-graphanalyzer.html b/demos/gallery-graphanalyzer.html index 5dfe135d3..26631244d 100644 --- a/demos/gallery-graphanalyzer.html +++ b/demos/gallery-graphanalyzer.html @@ -14,8 +14,8 @@
-
+
+ + + + + diff --git a/demos/plugin-minimap.html b/demos/plugin-minimap.html index 3874d67ac..bac6a27a3 100644 --- a/demos/plugin-minimap.html +++ b/demos/plugin-minimap.html @@ -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', diff --git a/package.json b/package.json index e83824ff7..025f22241 100644 --- a/package.json +++ b/package.json @@ -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", + "dom-to-image": "^2.6.0", "lodash": "~4.17.4", "wolfy87-eventemitter": "~5.2.4" }, diff --git a/plugins/template.maxSpanningForest/index.js b/plugins/template.maxSpanningForest/index.js index ebbc758fc..7b5b4d194 100644 --- a/plugins/template.maxSpanningForest/index.js +++ b/plugins/template.maxSpanningForest/index.js @@ -251,7 +251,6 @@ class Plugin { graph.draw(); } } - }); } } diff --git a/src/extend/g/dom.js b/src/extend/g/dom.js new file mode 100644 index 000000000..0c27e5f60 --- /dev/null +++ b/src/extend/g/dom.js @@ -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; diff --git a/src/graph.js b/src/graph.js index b6f964b77..4da4201a5 100755 --- a/src/graph.js +++ b/src/graph.js @@ -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'; diff --git a/src/util/graph.js b/src/util/graph.js index 39a05c4d1..77f8f0c54 100755 --- a/src/util/graph.js +++ b/src/util/graph.js @@ -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,10 +74,11 @@ module.exports = { }, graphBBox, padding); beforeTransform(graph); graph.setMatrix(matrix); - canvas.set('renderer', renderer); canvas.set('children', children); canvas.matrix = matrix; - canvas.draw(); + // canvas.draw(); + canvas._cfg.painter.beforeDraw(); + canvas._cfg.painter._drawGroup(canvas); graph.setMatrix(matrixCache); afterTransform(graph); return canvas.get('el');