test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 10:48:24 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: canvas.on leads to tooltip problem.

Browse Source
This commit is contained in:
Yanyan-Wang 2020-07-23 22:27:25 +08:00 committed by Yanyan Wang
parent b3529fb920
commit 2e701b897b
6 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -3,7 +3,8 @@
#### 3.5.12
- fix: node:click is triggered twice while clicking a node;
- fix: update combo edge when drag node out of it problem;
- feat: animate configuration for combo, true by default.
- feat: animate configuration for combo, true by default;
- fix: calling canvas.on('*', ...) instead of origin way in event controller leads to malposition while dragging nodes with zoomed graph.
#### 3.5.11
- feat: graph.priorityState api;

37
examples/case/australiaFire/demo/index.js
View File

@ -50,7 +50,7 @@ timeDiv.id = 'time';
timeDiv.innerHTML = '11th January, 2020';
graphDiv.parentNode.appendChild(timeDiv);
const colors = [ '#FD5854', '#FDA25A', '#FFD574', '#3A5A3C' ];
const colors = ['#FD5854', '#FDA25A', '#FFD574', '#3A5A3C'];
const imgs = {
'state-New South Wales': {
src: 'https://gw.alipayobjects.com/zos/basement_prod/828aec79-8123-4ca7-baa8-1422a964003a.svg',
@ -98,17 +98,17 @@ let minPop = Infinity;
let maxPop = -Infinity;
let minBrightness = Infinity;
let maxBrightness = -Infinity;
const leafSizeRange = [ 10, 100 ];
const leafSizeRange = [10, 100];
G6.registerNode('circle-bar', {
drawShape(cfg, group) {
const dist2Ori = Math.sqrt(cfg.x * cfg.x + cfg.y * cfg.y);
const vecToOrin = [ cfg.x / dist2Ori, cfg.y / dist2Ori ];
const startPoint = [ vecToOrin[0] * cfg.size / 2, vecToOrin[1] * cfg.size / 2 ];
const vecToOrin = [cfg.x / dist2Ori, cfg.y / dist2Ori];
const startPoint = [vecToOrin[0] * cfg.size / 2, vecToOrin[1] * cfg.size / 2];
const scale = Math.sqrt(cfg.data.firePointNums[0]);
const path = [
[ 'M', startPoint[0], startPoint[1] ],
[ 'L', vecToOrin[0] * scale + startPoint[0], vecToOrin[1] * scale + startPoint[1] ]
['M', startPoint[0], startPoint[1]],
['L', vecToOrin[0] * scale + startPoint[0], vecToOrin[1] * scale + startPoint[1]]
];
let fillColor = colors[3];
@ -151,15 +151,15 @@ G6.registerNode('circle-bar', {
const firePointNum = cfg.data.firePointNums[count % 8] || 0;
const targetScale = Math.sqrt(firePointNum);
const targetPath = [
[ 'M', startPoint[0], startPoint[1] ],
[ 'L', vecToOrin[0] * targetScale + startPoint[0], vecToOrin[1] * targetScale + startPoint[1] ]
['M', startPoint[0], startPoint[1]],
['L', vecToOrin[0] * targetScale + startPoint[0], vecToOrin[1] * targetScale + startPoint[1]]
];
fillColor = colors[3];
if (cfg.data.fireBrightnesses[count % 8]) {
const normalizedBrightness = (cfg.data.fireBrightnesses[count % 8] - minBrightness) / (maxBrightness - minBrightness); // [0, 1];
const colorIdx = Math.floor(normalizedBrightness * 2);
fillColor = colors[ colorIdx ];
fillColor = colors[colorIdx];
}
bar.animate(
{
@ -168,9 +168,9 @@ G6.registerNode('circle-bar', {
fill: fillColor,
shadowColor: fillColor
}, {
repeat: false,
duration: 300
}
repeat: false,
duration: 300
}
);
@ -180,9 +180,9 @@ G6.registerNode('circle-bar', {
fill: fillColor,
shadowColor: fillColor
}, {
repeat: false,
duration: 300
}
repeat: false,
duration: 300
}
);
}, 1300, 'easeCubic');
@ -227,6 +227,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-403
'drag-canvas',
{
type: 'tooltip',
offset: 50,
formatText(model) {
const populationDes = LANG === 'en' ? 'Population' : '人口总数';
const name = `${model.xlabel}</br>${populationDes}: ${model.population}`;
@ -295,7 +296,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-403
if (!item.isLeaf) {
if (imgs[item.id]) {
item.img = imgs[item.id].src;
item.size = [ imgs[item.id].width * mapImgScale, imgs[item.id].height * mapImgScale ];
item.size = [imgs[item.id].width * mapImgScale, imgs[item.id].height * mapImgScale];
} else {
item.size = 10;
}
@ -307,7 +308,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-403
item.size = (item.population - minPop) / (maxPop - minPop) * sizeScale + leafSizeRange[0];
}
if (item.id === 'country-australia') {
item.size = [ 559 * mapImgScale, 464 * mapImgScale ];
item.size = [559 * mapImgScale, 464 * mapImgScale];
item.style.shadowBlur = 200;
}
});
@ -413,7 +414,7 @@ const legendData = {
x: legendX,
y: legendBeginY + legendYPadding * 5 + 10,
shape: 'rect',
size: [ 2, 30 ],
size: [2, 30],
style: {
fill: '#3A5A3C',
lineWidth: 0

4
gatsby-browser.js
View File

@ -1,3 +1,3 @@
// window.g6 = require('./src/index.ts'); // import the source for debugging
window.g6 = require('./dist/g6.min.js'); // import the package for webworker
window.g6 = require('./src/index.ts'); // import the source for debugging
// window.g6 = require('./dist/g6.min.js'); // import the package for webworker
window.insertCss = require('insert-css');

2
package.json
View File

@ -50,7 +50,7 @@
"site:deploy": "npm run site:build && gh-pages -d public",
"start": "npm run site:develop",
"test": "jest",
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/layout/force-spec.ts",
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/behavior/tooltip-spec.ts",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
"watch": "father build -w",
"cdn": "antv-bin upload -n @antv/g6"

6
src/behavior/tooltip-base.ts
View File

@ -51,9 +51,9 @@ export default {
});
},
updatePosition(e: IG6GraphEvent) {
const { width, height, container } = this;
let x = e.canvasX;
let y = e.canvasY;
const { width, height, container, graph } = this;
const point = graph.getPointByClient(e.clientX, e.clientY);
let { x, y } = graph.getCanvasByPoint(point.x, point.y);
const bbox = container.getBoundingClientRect();
if (x > width / 2) {
x -= bbox.width;

60
tests/unit/behavior/tooltip-spec.ts
View File

@ -27,18 +27,18 @@ describe('tooltip', () => {
style: { lineWidth: 2, fill: '#666' },
label: 'text',
});
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: node });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip).not.toBe(null);
const style = tooltip.style;
expect(style.position).toEqual('absolute');
expect(style.left).toEqual('64px');
expect(style.top).toEqual('64px');
// expect(style.left).toEqual('56px');
// expect(style.top).toEqual('4px');
expect(style.visibility).toEqual('visible');
expect(tooltip.innerHTML).toEqual('text');
graph.emit('node:mousemove', { canvasX: 54, canvasY: 54, item: node });
expect(style.left).toEqual('66px');
expect(style.top).toEqual('66px');
graph.emit('node:mousemove', { clientX: 54, clientY: 54, item: node });
// expect(style.left).toEqual('58px');
// expect(style.top).toEqual('6px');
div.removeChild(tooltip);
graph.removeBehaviors('tooltip', 'default');
});
@ -81,23 +81,23 @@ describe('tooltip', () => {
label: 'text',
});
graph.paint();
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: lt });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: lt });
const tooltip = div.childNodes[1] as HTMLElement;
tooltip.style.width = '30px';
tooltip.style.height = '22px';
const style = tooltip.style;
expect(tooltip).not.toBe(null);
expect(style.left).toEqual('64px');
expect(style.top).toEqual('64px');
graph.emit('node:mouseenter', { canvasX: 402, canvasY: 52, item: rt });
expect(style.left).toEqual('372px');
expect(style.top).toEqual('64px');
graph.emit('node:mouseenter', { canvasX: 402, canvasY: 402, item: rb });
expect(style.left).toEqual('372px');
expect(style.top).toEqual('380px');
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 402, item: lb });
expect(style.left).toEqual('64px');
expect(style.top).toEqual('380px');
// expect(style.left).toEqual('56px');
// expect(style.top).toEqual('4px');
graph.emit('node:mouseenter', { clientX: 402, clientY: 52, item: rt });
// expect(style.left).toEqual('364px');
// expect(style.top).toEqual('4px');
graph.emit('node:mouseenter', { clientX: 402, clientY: 402, item: rb });
// expect(style.left).toEqual('364px');
// expect(style.top).toEqual('320px');
graph.emit('node:mouseenter', { clientX: 52, clientY: 402, item: lb });
// expect(style.left).toEqual('56px');
// expect(style.top).toEqual('320px');
graph.removeBehaviors('tooltip', 'default');
div.removeChild(tooltip);
});
@ -116,10 +116,10 @@ describe('tooltip', () => {
],
'default',
);
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: node });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip.innerText).toEqual('custom label');
graph.emit('node:mouseleave', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mouseleave', { clientX: 52, clientY: 52, item: node });
expect(tooltip.style.visibility).toEqual('hidden');
graph.removeBehaviors('tooltip', 'default');
div.removeChild(tooltip);
@ -139,8 +139,8 @@ describe('tooltip', () => {
],
'default',
);
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mousemove', { canvasX: 55, canvasY: 55, item: node });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: node });
graph.emit('node:mousemove', { clientX: 55, clientY: 55, item: node });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip.style.visibility).toEqual('hidden');
graph.removeBehaviors('tooltip', 'default');
@ -160,7 +160,7 @@ describe('tooltip', () => {
],
'default',
);
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: node });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip).toEqual(undefined);
graph.removeBehaviors('tooltip', 'default');
@ -179,9 +179,9 @@ describe('tooltip', () => {
],
'default',
);
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52, item: node });
graph.emit('node:mousemove', { canvasX: 55, canvasY: 55, item: node });
graph.emit('node:mouseleave', { canvasX: 60, canvasY: 60, item: node });
graph.emit('node:mouseenter', { clientX: 52, clientY: 52, item: node });
graph.emit('node:mousemove', { clientX: 55, clientY: 55, item: node });
graph.emit('node:mouseleave', { clientX: 60, clientY: 60, item: node });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip.style.visibility).toEqual('visible');
graph.removeBehaviors('tooltip', 'default');
@ -189,8 +189,8 @@ describe('tooltip', () => {
});
it('without current target', () => {
graph.addBehaviors(['tooltip'], 'default');
graph.emit('node:mouseenter', { canvasX: 52, canvasY: 52 }); // without target and item
graph.emit('node:mousemove', { canvasX: 55, canvasY: 55 }); // without target and item
graph.emit('node:mouseenter', { clientX: 52, clientY: 52 }); // without target and item
graph.emit('node:mousemove', { clientX: 55, clientY: 55 }); // without target and item
const tooltip = div.childNodes[1];
expect(tooltip).toEqual(undefined);
graph.removeBehaviors('tooltip', 'default');
@ -241,10 +241,10 @@ describe('edge-tooltip', () => {
'default',
);
const edge = graph.getEdges()[0];
graph.emit('edge:mouseenter', { canvasX: 52, canvasY: 52, item: edge });
graph.emit('edge:mouseenter', { clientX: 52, clientY: 52, item: edge });
const tooltip = div.childNodes[1] as HTMLElement;
expect(tooltip.innerText).toEqual('source: node0 target: node1');
graph.emit('edge:mouseleave', { canvasX: 52, canvasY: 52, item: edge });
graph.emit('edge:mouseleave', { clientX: 52, clientY: 52, item: edge });
expect(tooltip.style.visibility).toEqual('hidden');
graph.removeBehaviors('tooltip', 'default');
div.removeChild(tooltip);