Permalink
Browse files

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

…onsidered when calculating the Guide.Html position.
  • Loading branch information...
simaQ committed May 30, 2018
1 parent 54d7d10 commit 512e025d6d60a4e9837722b6585b7ac296a73a9e
@@ -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;
@@ -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);
});
});
@@ -43,5 +43,6 @@ describe('issue 119', () => {
expect(y).to.equal(origin.y[1]);
return shape;
});
document.body.removeChild(canvas);
});
});
@@ -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);
@@ -411,6 +411,7 @@ describe('chart test', () => {
setTimeout(function() {
chart.destroy();
expect(chart.destroyed).equal(true);
document.body.removeChild(canvas);
done();
}, 1500);
});
@@ -252,4 +252,5 @@ describe('axis controller circle transposed', function() {
// it('createAxis', function() {
// controller.createAxis(circle, cat, [ linear, otherLinear ]);
// });
document.body.removeChild(canvas);
});
@@ -836,6 +836,7 @@ describe('test schema', function() {
it('destroy', function() {
geom.destroy();
expect(geom.destroyed).equal(true);
document.body.removeChild(dom);
});
});
});
@@ -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);
});
@@ -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);
});
});
@@ -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);
});
});
@@ -57,5 +57,6 @@ describe('Arc', function() {
expect(arc.get('destroyed')).to.equal(true);
canvas.clear();
canvas.draw();
document.body.removeChild(dom);
});
});
@@ -62,6 +62,7 @@ describe('Circle', function() {
it('destroy', function() {
circle.destroy();
expect(canvas.get('children').length).to.equal(0);
document.body.removeChild(dom);
});
});
@@ -67,6 +67,7 @@ describe('Custom', function() {
it('destroy', function() {
house.destroy();
expect(canvas.get('children').length).to.equal(0);
document.body.removeChild(dom);
});
});
@@ -82,6 +82,7 @@ describe('Line', function() {
it('destroy', function() {
line.destroy();
expect(canvas.get('children').length).to.equal(0);
document.body.removeChild(dom);
});
});
@@ -49,6 +49,7 @@ describe('Polygon', function() {
it('destroy', function() {
polygon.destroy();
expect(canvas.get('children').length).to.equal(0);
document.body.removeChild(dom);
});
});
@@ -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);
});
});
@@ -69,6 +69,7 @@ describe('Rect', function() {
canvas.add(rect);
canvas.draw();
expect(canvas.get('children').length).to.equal(1);
document.body.removeChild(dom);
});
});
@@ -48,6 +48,7 @@ describe('Sector', function() {
it('destroy', function() {
sector.destroy();
expect(canvas.get('children').length).to.equal(0);
document.body.removeChild(dom);
});
});
@@ -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);
});
});
@@ -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);
});
});
@@ -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);
});
});
@@ -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);
});
});
@@ -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);
});
});
@@ -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
@@ -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);
});
});

0 comments on commit 512e025

Please sign in to comment.