feat: Guide component add limitInPlot property to limit guide draw in…

… chart plot area. Closed #203
antvis · Jul 23, 2018 · 05bf832 · 05bf832
1 parent 761ac2e
commit 05bf832
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 5 deletions.
diff --git a/src/component/guide/arc.js b/src/component/guide/arc.js
@@ -28,6 +28,9 @@ class Arc extends GuideBase {
     const self = this;
     const start = self.parsePoint(coord, self.start);
     const end = self.parsePoint(coord, self.end);
+    if (!start || !end) {
+      return;
+    }
     const coordCenter = coord.center;
     const radius = Math.sqrt((start.x - coordCenter.x) * (start.x - coordCenter.x)
       + (start.y - coordCenter.y) * (start.y - coordCenter.y));

diff --git a/src/component/guide/base.js b/src/component/guide/base.js
@@ -55,10 +55,14 @@ class GuideBase {
     const x = self._getNormalizedValue(position[0], xScale);
     const y = self._getNormalizedValue(position[1], yScales[0]);
 
-    return coord.convertPoint({
-      x,
-      y
-    });
+    const point = coord.convertPoint({ x, y });
+    if (self.limitInPlot) {
+      if (x >= 0 && x <= 1 && y >= 0 && y <= 1) {
+        return point;
+      }
+      return null;
+    }
+    return point;
   }
 
   /**

diff --git a/src/component/guide/html.js b/src/component/guide/html.js
@@ -91,6 +91,9 @@ class Html extends GuideBase {
   render(coord, container) {
     const self = this;
     const position = self.parsePoint(coord, self.position);
+    if (!position) {
+      return;
+    }
     let myNode = createDom(self.html);
     myNode = modifyCSS(myNode, {
       position: 'absolute',

diff --git a/src/component/guide/line.js b/src/component/guide/line.js
@@ -16,6 +16,9 @@ class Line extends GuideBase {
     const points = [];
     points[0] = this.parsePoint(coord, this.start);
     points[1] = this.parsePoint(coord, this.end);
+    if (!points[0] || !points[1]) {
+      return;
+    }
     const shape = container.addShape('Line', {
       className: 'guide-line',
       attrs: Util.mix({

diff --git a/src/component/guide/rect.js b/src/component/guide/rect.js
@@ -15,6 +15,9 @@ class Rect extends GuideBase {
   render(coord, container) {
     const start = this.parsePoint(coord, this.start);
     const end = this.parsePoint(coord, this.end);
+    if (!start || !end) {
+      return;
+    }
     const shape = container.addShape('rect', {
       className: 'guide-rect',
       attrs: Util.mix({

diff --git a/src/component/guide/region-filter.js b/src/component/guide/region-filter.js
@@ -14,7 +14,9 @@ class RegionFilter extends GuideBase {
   render(coord) {
     const start = this.parsePoint(coord, this.start);
     const end = this.parsePoint(coord, this.end);
-
+    if (!start || !end) {
+      return;
+    }
     const clip = new Rect({
       attrs: {
         x: Math.min(start.x, end.x),

diff --git a/src/component/guide/tag.js b/src/component/guide/tag.js
@@ -71,6 +71,9 @@ class Tag extends GuideBase {
 
   render(coord, container) {
     const position = this.parsePoint(coord, this.position);
+    if (!position) {
+      return;
+    }
     const { content, background, textStyle } = this;
 
     const wrapperContainer = container.addGroup({

diff --git a/src/component/guide/text.js b/src/component/guide/text.js
@@ -36,6 +36,9 @@ class Text extends GuideBase {
   render(coord, container) {
     const position = this.position;
     const point = this.parsePoint(coord, position);
+    if (!point) {
+      return;
+    }
     const { content, style, offsetX, offsetY } = this;
 
     if (offsetX) {

diff --git a/test/bug/issue-203-spec.js b/test/bug/issue-203-spec.js
@@ -0,0 +1,51 @@
+const expect = require('chai').expect;
+const F2 = require('../../src/core');
+require('../../src/geom/line');
+require('../../src/component/guide/text'); // 加载 guide 组件
+const Guide = require('../../src/plugin/guide');
+
+const canvas = document.createElement('canvas');
+canvas.width = 500;
+canvas.height = 500;
+canvas.id = 'issue203';
+document.body.appendChild(canvas);
+
+describe('issue 203', () => {
+  it('set guide limit in plot', () => {
+    const data = [
+      { day: '周一', value: 300 },
+      { day: '周二', value: 400 },
+      { day: '周三', value: 350 },
+      { day: '周四', value: 500 },
+      { day: '周五', value: 490 },
+      { day: '周六', value: 600 },
+      { day: '周日', value: 900 }
+    ];
+    const chart = new F2.Chart({
+      id: 'issue203',
+      pixelRatio: window.devicePixelRatio,
+      plugins: Guide
+    });
+
+    chart.source(data, {
+      value: {
+        tickCount: 5,
+        min: 0
+      },
+      day: {
+        range: [ 0, 1 ]
+      }
+    });
+    chart.guide().text({
+      position: [ -0.4, 300 ],
+      content: '旋转跳跃',
+      top: false,
+      limitInPlot: true
+    });
+    chart.line().position('day*value');
+    chart.render();
+
+    const guideController = chart.get('guideController');
+    expect(guideController.backPlot.get('children').length).to.equal(0);
+  });
+});
diff --git a/test/unit/guide/base-spec.js b/test/unit/guide/base-spec.js
@@ -56,6 +56,19 @@ describe('Guide Base', function() {
     expect(result3.y).to.be.equal(400);
   });
 
+  it('limitInPlot', function() {
+    const point = [ '九月', 600 ];
+    const cfg = {
+      xScale,
+      yScales: [ yScale ],
+      limitInPlot: true
+    };
+    const guide = new Guide(cfg);
+
+    const result = guide.parsePoint(coord, point);
+    expect(result).to.be.null;
+  });
+
   it('Base class method: render()', function() {
     const guide = new Guide();
     expect(guide.render).be.an.instanceof(Function);