fix: The position of the canvas in the parent container needs to be c…

…onsidered when calculating the Guide.Html position.

src/component/guide/html.js

@@ -99,7 +99,8 @@ class Html extends GuideBase {
       visibility: 'hidden'
     });
 
-    let parentNode = container.get('canvas').get('el').parentNode;
+    const canvasDom = container.get('canvas').get('el');
+    let parentNode = canvasDom.parentNode;
     parentNode = modifyCSS(parentNode, {
       position: 'relative'
     });
@@ -118,12 +119,15 @@ class Html extends GuideBase {
     }
     wrapperNode.appendChild(myNode);
 
+    // 需要考虑 canvas 元素在父容器中的相对位置
+    const canvasOffsetTop = canvasDom.offsetTop;
+    const canvasOffsetLeft = canvasDom.offsetLeft;
     const { alignX, alignY, offsetX, offsetY } = self;
     const width = Util.getWidth(myNode);
     const height = Util.getHeight(myNode);
     const newOffset = getOffsetFromAlign(alignX, alignY, width, height);
-    position.x = position.x + newOffset[0];
-    position.y = position.y + newOffset[1];
+    position.x = position.x + newOffset[0] + canvasOffsetLeft;
+    position.y = position.y + newOffset[1] + canvasOffsetTop;
 
     if (offsetX) {
       position.x += offsetX;

test/bug/guide-html-spec.js

@@ -0,0 +1,47 @@
+const expect = require('chai').expect;
+const F2 = require('../../src/core');
+const $ = require('jquery');
+require('../../src/geom/line');
+require('../../src/component/guide/html');
+const Guide = require('../../src/plugin/guide');
+
+$(`
+  <div style="width: 500px;height: 100%;posion: fixed;top:0;left:0;" id="chartWrapper">
+    <h1 style="width: 100%;height: 30px;">The chart title</h1>
+    <canvas id="guide-html" style="width: 100%;height: 300px;"></canvas>
+  </div>
+`).appendTo('body');
+
+describe('The position calculate of Guide.HTML', () => {
+  it('should consider the canvas offset', function() {
+    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: 'guide-html',
+      pixelRatio: window.devicePixelRatio,
+      plugins: Guide
+    });
+
+    chart.source(data, {
+      value: {
+        tickCount: 5,
+        min: 0
+      },
+      day: {
+        range: [ 0, 1 ]
+      }
+    });
+
+    chart.guide().html({
+      position: [ '周三', 350 ],
+      html: '<div id="guide" style="width: 30px;height: 30px;border-radius: 50%;font-size: 12px;text-align: center;">350</div>'
+    });
+    chart.line().position('day*value');
+    chart.render();
+
+    const guideEle = $('#guide');
+    expect(guideEle.position().top).to.eql(251);
+    expect(guideEle.position().left).to.eql(176);
+    const wrapper = $('#chartWrapper')[0];
+    document.body.removeChild(wrapper);
+  });
+});

test/bug/issue-119-spec.js

@@ -43,5 +43,6 @@ describe('issue 119', () => {
       expect(y).to.equal(origin.y[1]);
       return shape;
     });
+    document.body.removeChild(canvas);
   });
 });

test/unit/animation/detail-spec.js

@@ -77,6 +77,7 @@ describe('Group animation', function() {
         expect(Object.keys(chart.get('canvas').get('caches')).length).to.equal(18);
         expect(chart.get('isUpdate')).to.be.true;
         Chart.plugins.unregister(Animation);
+        document.body.removeChild(canvas);
         done();
       }, 500);
     }, 500);

test/unit/chart/chart-spec.js

@@ -411,6 +411,7 @@ describe('chart test', () => {
       setTimeout(function() {
         chart.destroy();
         expect(chart.destroyed).equal(true);
+        document.body.removeChild(canvas);
         done();
       }, 1500);
     });

test/unit/chart/controller/axis-spec.js

@@ -252,4 +252,5 @@ describe('axis controller circle transposed', function() {
   // it('createAxis', function() {
   //   controller.createAxis(circle, cat, [ linear, otherLinear ]);
   // });
+  document.body.removeChild(canvas);
 });

test/unit/geom/geom-spec.js

@@ -836,6 +836,7 @@ describe('test schema', function() {
     it('destroy', function() {
       geom.destroy();
       expect(geom.destroyed).equal(true);
+      document.body.removeChild(dom);
     });
   });
 });

test/unit/graphic/animate-spec.js

@@ -135,9 +135,11 @@ describe('Do Animation', function() {
         { x: 35, y: 15 },
         { x: 60, y: 35 }
       ]);
-      expect(parseInt(animator.animate.endTime - animator.animate.startTime)).to.equal(800);
+      expect(parseInt(animator.animate.endTime - animator.animate.startTime)).to.be.within(799, 800);
+
       // expect(animator.animGroups.length).to.equal(1);
       timeline.stop();
+      document.body.removeChild(dom);
       done();
     }, 1200);
   });

test/unit/graphic/canvas-spec.js

@@ -146,6 +146,7 @@ describe('Canvas', function() {
     expect(canvas.get('children')).to.be.an('array').that.is.empty;
     canvas.destroy();
     expect(canvas.get('destroyed')).to.be.true;
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/group-spec.js

@@ -367,5 +367,6 @@ describe('Group', function() {
 
     group.scale(0.5, 0.5);
     expect(group.attr('matrix')).to.eql([ 0.5, 0, 0, 0.5, 0, 0 ]);
+    document.body.removeChild(dom);
   });
 });

test/unit/graphic/shape/arc-spec.js

@@ -57,5 +57,6 @@ describe('Arc', function() {
     expect(arc.get('destroyed')).to.equal(true);
     canvas.clear();
     canvas.draw();
+    document.body.removeChild(dom);
   });
 });

test/unit/graphic/shape/circle-spec.js

@@ -62,6 +62,7 @@ describe('Circle', function() {
   it('destroy', function() {
     circle.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/custom-spec.js

@@ -67,6 +67,7 @@ describe('Custom', function() {
   it('destroy', function() {
     house.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/line-spec.js

@@ -82,6 +82,7 @@ describe('Line', function() {
   it('destroy', function() {
     line.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/polygon-spec.js

@@ -49,6 +49,7 @@ describe('Polygon', function() {
   it('destroy', function() {
     polygon.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/polyline-spec.js

@@ -93,6 +93,7 @@ describe('Smooth Polyline', function() {
   it('destroy', function() {
     line.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/rect-spec.js

@@ -69,6 +69,7 @@ describe('Rect', function() {
     canvas.add(rect);
     canvas.draw();
     expect(canvas.get('children').length).to.equal(1);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/sector-spec.js

@@ -48,6 +48,7 @@ describe('Sector', function() {
   it('destroy', function() {
     sector.destroy();
     expect(canvas.get('children').length).to.equal(0);
+    document.body.removeChild(dom);
   });
 });
 

test/unit/graphic/shape/text-spec.js

@@ -168,5 +168,6 @@ describe('Text', function() {
     expect(bbox.width).to.equal(28.67578125);
     expect(bbox.height).to.equal(48);
     canvas.draw();
+    document.body.removeChild(dom);
   });
 });

test/unit/guide/arc-spec.js

@@ -4,9 +4,9 @@ const Coord = require('../../../src/coord/index');
 const { Arc } = require('../../../src/component/guide/index');
 const Scale = require('../../../src/scale/index');
 
-const canvas = document.createElement('canvas');
-canvas.id = 'guide';
-document.body.appendChild(canvas);
+const dom = document.createElement('canvas');
+dom.id = 'guideArc';
+document.body.appendChild(dom);
 
 describe('Guide.Arc', function() {
   const coord = new Coord.Polar({
@@ -17,7 +17,7 @@ describe('Guide.Arc', function() {
   });
 
   const canvas = new Canvas({
-    el: 'guide',
+    el: 'guideArc',
     width: 500,
     height: 500,
     pixelRatio: 2
@@ -53,5 +53,6 @@ describe('Guide.Arc', function() {
     expect(children[0].attr('r')).to.equal(200);
     expect(children[0].attr('startAngle')).to.equal(2.7488935718910694);
     expect(children[0].attr('endAngle')).to.equal(0.39269908169872403);
+    document.body.removeChild(dom);
   });
 });

test/unit/guide/html-spec.js

@@ -5,11 +5,14 @@ const { Html } = require('../../../src/component/guide/index');
 const Scale = require('../../../src/scale/index');
 
 const canva1s = document.createElement('canvas');
-canva1s.id = 'guide';
+canva1s.id = 'guideHTML';
+canva1s.style.position = 'fixed';
+canva1s.style.top = 0;
+canva1s.style.left = 0;
 document.body.appendChild(canva1s);
 
 const canvas = new Canvas({
-  el: 'guide',
+  el: 'guideHTML',
   width: 500,
   height: 500,
   pixelRatio: 2
@@ -195,5 +198,6 @@ describe('Guide.Html', function() {
     const top = Math.floor(position.y);
     expect(parseInt(document.getElementsByClassName('guideWapper')[0].childNodes[9].style.left)).eql(Math.floor(left - 20));
     expect(parseInt(document.getElementsByClassName('guideWapper')[0].childNodes[9].style.top)).eql(Math.floor(top - 20));
+    document.body.removeChild(canva1s);
   });
 });

test/unit/guide/line-spec.js

@@ -7,7 +7,7 @@ const Scale = require('../../../src/scale/index');
 describe('Guide.Line', function() {
 
   const canvas1 = document.createElement('canvas');
-  canvas1.id = 'guide';
+  canvas1.id = 'guideLine';
   document.body.appendChild(canvas1);
 
   const coord = new Coord.Rect({
@@ -16,7 +16,7 @@ describe('Guide.Line', function() {
   });
 
   const canvas = new Canvas({
-    el: 'guide',
+    el: 'guideLine',
     width: 500,
     height: 500,
     pixelRatio: 2
@@ -72,5 +72,6 @@ describe('Guide.Line', function() {
     const children = group.get('children');
     const textShape = children[0];
     expect(textShape.attr('x2') - textShape.attr('x1')).to.equal(200);
+    document.body.removeChild(canvas1);
   });
 });

test/unit/guide/rect-spec.js

@@ -7,7 +7,7 @@ const Scale = require('../../../src/scale/index');
 describe('Guide.Rect', function() {
 
   const canvas1 = document.createElement('canvas');
-  canvas1.id = 'guide';
+  canvas1.id = 'guideRect';
   document.body.appendChild(canvas1);
 
   const coord = new Coord.Rect({
@@ -16,7 +16,7 @@ describe('Guide.Rect', function() {
   });
 
   const canvas = new Canvas({
-    el: 'guide',
+    el: 'guideRect',
     width: 500,
     height: 500,
     pixelRatio: 2
@@ -55,5 +55,6 @@ describe('Guide.Rect', function() {
     expect(children[0].attr('height')).to.equal(200);
     expect(children[0].attr('x')).to.equal(60);
     expect(children[0].attr('y')).to.equal(193.33333333333337);
+    document.body.removeChild(canvas1);
   });
 });

test/unit/guide/tag-spec.js

@@ -5,7 +5,7 @@ const { Tag } = require('../../../src/component/guide/index');
 const Scale = require('../../../src/scale/index');
 
 const canvas1 = document.createElement('canvas');
-canvas1.id = 'guide';
+canvas1.id = 'guideTag';
 canvas1.style.position = 'fixed';
 canvas1.style.top = 0;
 canvas1.style.left = 0;
@@ -18,7 +18,7 @@ describe('Guide.Tag', function() {
   });
 
   const canvas = new Canvas({
-    el: 'guide',
+    el: 'guideTag',
     width: 500,
     height: 500,
     pixelRatio: 2

test/unit/guide/text-spec.js

@@ -5,7 +5,7 @@ const { Text } = require('../../../src/component/guide/index');
 const Scale = require('../../../src/scale/index');
 
 const canvas1 = document.createElement('canvas');
-canvas1.id = 'guide';
+canvas1.id = 'guideText';
 document.body.appendChild(canvas1);
 
 
@@ -16,7 +16,7 @@ describe('Guide.Text', function() {
   });
 
   const canvas = new Canvas({
-    el: 'guide',
+    el: 'guideText',
     width: 500,
     height: 500,
     pixelRatio: 2
@@ -77,5 +77,6 @@ describe('Guide.Text', function() {
     expect(children[0].attr('x')).to.equal(360);
     expect(children[0].attr('y')).to.equal(160);
     // expect(children[0].attr('rotate')).to.equal(Math.PI);
+    document.body.removeChild(canvas1);
   });
 });