fix: adjust the zIndex of axis, guide, tooltip container.

antvis · Apr 4, 2018 · b1d4e59 · b1d4e59
1 parent b1e9e0e
commit b1d4e59
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 22 deletions.
diff --git a/demos/debug.html b/demos/debug.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>调试页面</title>
+  <link rel="stylesheet" href="./assets/common.css">
+</head>
+<body>
+<div>
+  <canvas id="mountNode" style="position: relative;">
+  </canvas>
+</div>
+<script src="./assets/jquery-3.2.1.min.js"></script>
+<script src="../build/f2.js"></script>
+<script>
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new F2.Chart({
+  id: 'mountNode',
+  pixelRatio: window.devicePixelRatio // 指定分辨率
+});
+
+chart.source(data);
+chart.interval().position('genre*sold').color('genre');
+chart.render();
+</script>
+</body>
+</html>
diff --git a/src/chart/chart.js b/src/chart/chart.js
@@ -331,14 +331,12 @@ class Chart extends Base {
 
   _initLayers() {
     const canvas = this.get('canvas');
-    this.set('backPlot', canvas.addGroup({
-      zIndex: 1
-    }));
+    this.set('backPlot', canvas.addGroup()); // 默认 zIndex 为 0
     this.set('middlePlot', canvas.addGroup({
-      zIndex: 2
+      zIndex: 10
     }));
     this.set('frontPlot', canvas.addGroup({
-      zIndex: 3
+      zIndex: 20
     }));
   }
 
@@ -357,8 +355,12 @@ class Chart extends Base {
     self.set('geoms', []);
     self.set('scaleController', new ScaleController());
     self.set('axisController', new AxisController({
-      frontPlot: self.get('frontPlot').addGroup(),
-      backPlot: self.get('backPlot').addGroup(),
+      frontPlot: self.get('frontPlot').addGroup({
+        className: 'axisContainer'
+      }),
+      backPlot: self.get('backPlot').addGroup({
+        className: 'axisContainer'
+      }),
       chart: self
     }));
     Chart.plugins.notify(self, 'init'); // TODO: beforeInit afterInit
@@ -545,6 +547,7 @@ class Chart extends Base {
 
     Chart.plugins.notify(self, 'afterGeomDraw');
     canvas.sort();
+    this.get('frontPlot').sort();
     Chart.plugins.notify(self, 'beforeCanvasDraw');
     canvas.draw();
     return self;

diff --git a/src/component/axis/abstract.js b/src/component/axis/abstract.js
@@ -45,10 +45,10 @@ class Abastract {
   draw() {
     const { line, tickLine, label, grid } = this;
 
-    line && this.drawLine(line);
-    tickLine && this.drawTicks(tickLine);
-    label && this.drawLabels();
-    grid && this.drawGrid(grid);
+    grid && this.drawGrid(grid); // 渲染网格
+    tickLine && this.drawTicks(tickLine); // 渲染刻度线
+    line && this.drawLine(line); // 渲染轴线
+    label && this.drawLabels(); // 渲染坐标轴文本
   }
 
   drawTicks(tickCfg) {

diff --git a/src/plugin/guide.js b/src/plugin/guide.js
@@ -126,8 +126,13 @@ class GuideController {
 module.exports = {
   init(chart) {
     const guideController = new GuideController({
-      frontPlot: chart.get('frontPlot'),
-      backPlot: chart.get('backPlot')
+      frontPlot: chart.get('frontPlot').addGroup({
+        zIndex: 20,
+        className: 'guideContainer'
+      }),
+      backPlot: chart.get('backPlot').addGroup({
+        className: 'guideContainer'
+      })
     });
     chart.set('guideController', guideController);
   },

diff --git a/src/plugin/tooltip.js b/src/plugin/tooltip.js
@@ -174,8 +174,13 @@ class TooltipController {
 
     const chart = self.chart;
     const canvas = chart.get('canvas');
-    const frontPlot = chart.get('frontPlot');
-    const backPlot = chart.get('backPlot');
+    const frontPlot = chart.get('frontPlot').addGroup({
+      className: 'tooltipContainer',
+      zIndex: 10
+    });
+    const backPlot = chart.get('backPlot').addGroup({
+      className: 'tooltipContainer'
+    });
     const plotRange = chart.get('plotRange');
     const coord = chart.get('coord');
 

diff --git a/test/unit/chart/chart-spec.js b/test/unit/chart/chart-spec.js
@@ -343,9 +343,11 @@ describe('chart test', () => {
     it('axis label fontFamily', function() {
       const backPlot = chart.get('backPlot');
       const axisGroup = backPlot.get('children')[0];
-      const xAxisLabel = axisGroup.get('children')[0];
+      expect(axisGroup.get('className')).to.equal('axisContainer');
+
+      const xAxisLabel = axisGroup.get('children')[1]; // x 轴文本
       const xAxisfont = xAxisLabel.attr('font');
-      const yAxisLabel = axisGroup.get('children')[3];
+      const yAxisLabel = axisGroup.get('children')[10]; // y 轴文本
       const yAxisfont = yAxisLabel.attr('font');
       expect(xAxisfont).to.equal('normal normal normal 10px Arial'); // a 轴文本
       expect(yAxisfont).to.equal('normal normal normal 10px "Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif'); // b 轴文本

diff --git a/test/unit/plugin/guide-spec.js b/test/unit/plugin/guide-spec.js
@@ -113,19 +113,34 @@ describe('Guide Plugin', function() {
     const guideController = chart.get('guideController');
     const frontPlot = chart.get('frontPlot');
     const backPlot = chart.get('backPlot');
-    expect(guideController.guides.length).to.equal(6);
-    expect(frontPlot.get('children').length).to.equal(5);
+
+    expect(frontPlot.get('children').length).to.equal(2);
     expect(backPlot.get('children').length).to.equal(2);
+
+    const frontGuideContainer = frontPlot.get('children')[1];
+    const backGuideContainer = backPlot.get('children')[1];
+
+    expect(guideController.guides.length).to.equal(6);
+    expect(frontGuideContainer.get('children').length).to.equal(4);
+    expect(backGuideContainer.get('children').length).to.equal(1);
   });
 
   it('chart.guide().reset()', function() {
     chart.repaint();
     const guideController = chart.get('guideController');
     expect(guideController.guides.length).to.equal(6);
+
     const frontPlot = chart.get('frontPlot');
     const backPlot = chart.get('backPlot');
-    expect(frontPlot.get('children').length).to.equal(5);
+
+    expect(frontPlot.get('children').length).to.equal(2);
     expect(backPlot.get('children').length).to.equal(2);
+
+    const frontGuideContainer = frontPlot.get('children')[1];
+    const backGuideContainer = backPlot.get('children')[1];
+
+    expect(frontGuideContainer.get('children').length).to.equal(4);
+    expect(backGuideContainer.get('children').length).to.equal(1);
     const guideWrapper = document.getElementsByClassName('guideWapper');
     expect(guideWrapper.length).to.equal(1);
   });
@@ -136,8 +151,15 @@ describe('Guide Plugin', function() {
     expect(guideController.guides.length).to.equal(0);
     const frontPlot = chart.get('frontPlot');
     const backPlot = chart.get('backPlot');
-    expect(frontPlot.get('children').length).to.equal(1);
-    expect(backPlot.get('children').length).to.equal(1);
+
+    expect(frontPlot.get('children').length).to.equal(2);
+    expect(backPlot.get('children').length).to.equal(2);
+
+    const frontGuideContainer = frontPlot.get('children')[1];
+    const backGuideContainer = backPlot.get('children')[1];
+
+    expect(frontGuideContainer.get('children').length).to.equal(0);
+    expect(backGuideContainer.get('children').length).to.equal(0);
     const guideWrapper = document.getElementsByClassName('guideWapper');
     expect(guideWrapper.length).to.equal(0);
     chart.destroy();