Merge pull request #347 from antvis/toSvg

feat: update g to 3.0.x. Closes #346

.torch.compile.opts.js

@@ -13,13 +13,7 @@ module.exports = {
       ],
     ],
     presets: [
-      [
-        'env',
-        {
-          'loose': true,
-          'modules': false
-        }
-      ]
+      'env'
     ],
     sourceMaps: 'inline',
   },
@@ -27,7 +21,7 @@ module.exports = {
   include: [
     'src/**/*.js',
     'plugins/**/*.js',
-    'node_modules/**/src/gl-matrix/**/*.js '
+    'node_modules/**/src/gl-matrix/**/*.js'
   ],
   exclude: [
     'bower_components/**/*.js',

package.json

@@ -106,7 +106,7 @@
     "run": []
   },
   "dependencies": {
-    "@antv/g": "~2.1.0",
+    "@antv/g": "^3.0.0-beta.4",
     "@antv/hierarchy": "~0.3.13",
     "ant-design-palettes": "~1.1.2",
     "d3": "^5.4.0",
@@ -118,4 +118,4 @@
   "engines": {
     "node": ">=8.9.0"
   }
-}
+}

plugins/tool.minimap/minimap.js

@@ -4,7 +4,7 @@
  */
 const G6 = require('@antv/g6');
 const { Util, G } = G6;
-const Canvas = G.Canvas;
+const Canvas = G.canvas.Canvas;
 
 class Minimap {
   constructor(options) {

src/extend/g/canvas-root-group.js

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

src/extend/g/group.js

@@ -77,6 +77,7 @@ Util.augment(Mixin, {
   }
 });
 
-Util.mixin(G.Group, [ Mixin ]);
+Util.mixin(G.canvas.Group, [ Mixin ]);
+Util.mixin(G.svg.Group, [ Mixin ]);
 
 module.exports = Mixin;

src/extend/g/html.js

@@ -9,7 +9,7 @@ const Html = function(cfg) {
   Html.superclass.constructor.call(this, cfg);
 };
 
-Util.extend(Html, G.Shape);
+Util.extend(Html, G.canvas.Shape);
 
 Html.ATTRS = {
   x: 0,
@@ -18,7 +18,7 @@ Html.ATTRS = {
   height: 0
 };
 
-Util.extend(Html, G.Shape);
+Util.extend(Html, G.canvas.Shape);
 
 Util.augment(Html, {
   canFill: true,
@@ -157,6 +157,7 @@ Util.augment(Html, {
     Html.superclass.destroy.call(this);
   }
 });
-G.Shape.Html = Html;
+G.canvas.Shape.Html = Html;
+G.svg.Shape.Html = Html;
 
 module.exports = Html;

src/extend/g/shape.js

@@ -36,6 +36,6 @@ Util.augment(Mixin, {
   }
 });
 
-Util.mixin(G.Shape, [ Mixin ]);
+Util.mixin(G.canvas.Shape, [ Mixin ]);
 
 module.exports = Mixin;

src/extend/g/svg-root-group.js

@@ -7,10 +7,11 @@ const G = require('@antv/g');
 const Util = require('../../util/');
 
 const Group = function(cfg) {
-  Group.superclass.constructor.call(this, cfg);
+  G.svg.Group.superclass.constructor.call(this, cfg.canvas);
+  this.set('children', []);
 };
 
-Util.extend(Group, G.Group);
+Util.extend(Group, G.svg.Group);
 
 Util.augment(Group, {
   drawInner(context) {

src/graph.js

@@ -2,17 +2,19 @@
  * @fileOverview graph
  * @author huangtonger@aliyun.com
  */
-
+require('./extend/g/html');
 require('./extend/g/canvas');
 require('./extend/g/group');
 require('./extend/g/shape');
-require('./extend/g/html');
+// require('./extend/g/html');
 const Base = require('./base');
 const Item = require('./item/');
 const Shape = require('./shape/');
 const Util = require('./util/');
 const G = require('@antv/g');
-const RootGroup = require('./extend/g/root-group');
+// const G = require('./renderer2d');
+const CanvasRootGroup = require('./extend/g/canvas-root-group');
+const SvgRootGroup = require('./extend/g/svg-root-group');
 const LayoutMixin = require('./mixin/layout');
 const MappingMixin = require('./mixin/mapping');
 const QueryMixin = require('./mixin/query');
@@ -22,7 +24,8 @@ const FilterMixin = require('./mixin/filter');
 const AnimateMixin = require('./mixin/animate');
 const FitView = require('./mixin/fit-view');
 const ForceFit = require('./mixin/force-fit');
-const Canvas = G.Canvas;
+const Canvas = G.canvas.Canvas;
+const SVG = G.svg.Canvas;
 const Mixins = [ FilterMixin, MappingMixin, QueryMixin, AnimateMixin, ForceFit, LayoutMixin, FitView, EventMixin, ModeMixin ];
 const TAB_INDEX = 20;
 class Graph extends Base {
@@ -105,7 +108,8 @@ class Graph extends Base {
       _dataMap: {},
       _itemMap: {},
       _data: {},
-      _delayRunObj: {}
+      _delayRunObj: {},
+      render: 'canvas'
     };
   }
 
@@ -192,8 +196,11 @@ class Graph extends Base {
       eventEnable: false,
       containerDOM: graphContainer
     };
-    const canvas = new Canvas(canvasCfg);
-    const frontCanvas = new Canvas(canvasCfg);
+
+    const Constructor = this.getConstructor(Canvas, SVG);
+    const canvas = new Constructor(canvasCfg);
+    const frontCanvas = new Constructor(canvasCfg);
+
     const frontEl = frontCanvas.get('el');
     const htmlElementContaniner = graphContainer.appendChild(Util.createDOM('<div class="graph-container-html-Elements"></div>'));
     canvas.on('beforedraw', () => {
@@ -208,6 +215,7 @@ class Graph extends Base {
     htmlElementContaniner.style.position = 'absolute';
     htmlElementContaniner.style.top = 0;
     htmlElementContaniner.style.left = 0;
+
     this.set('_canvas', canvas);
     this.set('_frontCanvas', frontCanvas);
     this.set('_htmlElementContaniner', htmlElementContaniner);
@@ -216,8 +224,11 @@ class Graph extends Base {
     mouseEventWarrper.style['user-select'] = 'none';
     mouseEventWarrper.setAttribute('tabindex', TAB_INDEX);
     canvas.set('htmlElementContaniner', htmlElementContaniner);
+
+    const RootGroup = this.getConstructor(CanvasRootGroup, SvgRootGroup);
     const rootGroup = canvas.addGroup(RootGroup);
     const frontRootGroup = frontCanvas.addGroup(RootGroup);
+
     const itemGroup = rootGroup.addGroup();
     this.set('_itemGroup', itemGroup);
     this.set('_rootGroup', rootGroup);
@@ -341,6 +352,18 @@ class Graph extends Base {
       item && !item.destroyed && item.destroy();
     });
   }
+  /**
+   * @param  {function} CanvasCons option 1
+   * @param  {function} SvgCons option 2
+   * @return {function} function
+   */
+  getConstructor(CanvasCons, SvgCons) {
+    const render = this.get('render');
+    if (render === 'svg') {
+      return SvgCons;
+    }
+    return CanvasCons;
+  }
   /**
    * @param  {string} type item type
    * @param  {object} model data model

src/index.js

@@ -6,13 +6,15 @@ const Shape = require('./shape/');
 const Handler = require('./handler');
 const Global = require('./global');
 const version = require('./version');
+const G = require('@antv/g');
 
 const G6 = {
   Graph: require('./graph'),
   Tree: require('./tree'),
   Util: require('./util/'),
   Layouts: require('./layouts/'),
-  G: require('@antv/g'),
+ // G: require('@antv/g'),
+  G,
   Plugins: {},
   Global,
   Shape,

src/util/graph.js

@@ -6,7 +6,8 @@
 const BaseUtil = require('./base');
 const DomUtil = require('./dom');
 const G = require('@antv/g');
-const Canvas = G.Canvas;
+const Canvas = G.canvas.Canvas;
+const SVG = G.svg.Canvas;
 
 module.exports = {
   /**
@@ -58,7 +59,8 @@ module.exports = {
       const graphPixelRatio = graphCanvas.get('pixelRatio');
       tranScale = pixelRatio / graphPixelRatio;
       graphCanvas.scale(tranScale, tranScale);
-      canvas = new Canvas({
+      const Constructor = graph.getConstructor(Canvas, SVG);
+      canvas = new Constructor({
         containerDOM,
         width: width * tranScale,
         height: height * tranScale
@@ -85,7 +87,8 @@ module.exports = {
       canvas.matrix = BaseUtil.cloneDeep(graph.getMatrix());
     }
     graphCanvas.beforeDraw();
-    graphCanvas.constructor.superclass.draw.call(graphCanvas, miniMapCanvasContext);
+    graphCanvas.constructor.superclass.draw.call(graphCanvas, graphCanvasContext);
+
     graphCanvas.set('context', graphCanvasContext);
     graph.set('width', graphWidth);
     graph.set('height', graphHeight);
@@ -98,7 +101,7 @@ module.exports = {
     }
     graph._events = events;
     graphCanvas.beforeDraw();
-    graphCanvas.constructor.superclass.draw.call(graphCanvas, graphCanvasContext);
+    graphCanvas.draw();
     return canvas.get('el');
   }
 };

test/test shiwu.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
+
+<head>
+  <meta content="origin" name="referrer">
+  <title>test shiwu</title>
+  <!--<script src="../../src/version.js"></script>-->
+  <script src="../build/g6.js"></script>
+  <!--<script src="../src/index.js"></script>-->
+
+</head>
+
+<body>
+    <div id = 'mountNode' style = 'width:500px; height:500px;'></div>
+
+    <script>
+            const data = {
+              nodes: [{
+                id: 'node1',
+                x: 100,
+                y: 200
+              }, {
+                id: 'node2',
+                x: 300,
+                y: 200
+              }],
+              edges: [{
+                target: 'node2',
+                source: 'node1'
+              }]
+            };
+            const graph = new G6.Graph({
+              render: 'canvas',
+              container: 'mountNode',
+              width: 500,
+              height: 500
+            });
+            graph.read(data);
+        
+          </script>
+        
+</body>

test/unit/extend/g/group-spec.js

@@ -5,7 +5,7 @@ require('../../../../src/extend/g/group');
 div.id = 'extend-group-spec';
 document.body.appendChild(div);
 describe('extend group test', () => {
-  const canvas = new G.Canvas({
+  const canvas = new G.canvas.Canvas({
     containerDOM: div
   });
   const group = canvas.addGroup();

test/unit/extend/g/html-spec.js

@@ -10,7 +10,7 @@ const width = 500;
 const height = 200;
 const dom = document.createElement('div');
 document.body.appendChild(dom);
-const canvas = new G.Canvas({
+const canvas = new G.canvas.Canvas({
   containerDOM: dom,
   width,
   height,

test/unit/extend/g/root-group-spec.js

@@ -2,11 +2,11 @@ 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 RootGroup = require('../../../../src/extend/g/canvas-root-group');
 div.id = 'extend-root-group-spec';
 document.body.appendChild(div);
 describe('freeze size group test', () => {
-  const canvas = new G.Canvas({
+  const canvas = new G.canvas.Canvas({
     containerDOM: div
   });
   const rootGroup = canvas.addGroup(RootGroup);

test/unit/extend/g/shape-spec.js

@@ -5,7 +5,7 @@ require('../../../../src/extend/g/shape');
 div.id = 'extend-shape-spec';
 document.body.appendChild(div);
 describe('extend shape test', () => {
-  const canvas = new G.Canvas({
+  const canvas = new G.canvas.Canvas({
     containerDOM: div
   });
   const rectAttrs = {