-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(g-canvas): hasChanged should have priority over refresh with in c…
…heckChildrenRefresh (antvis#623) * fix(g-canvas): render should work correctly when element is clipped by view, close antvis#494 (antvis#550) * Publish - @antv/g-canvas@0.4.13 * fix: switch branch (antvis#574) * Publish - @antv/g-canvas@0.4.14 * fix(g-canvas): hasChanged should have priority over refresh with in checkChildrenRefresh, close antvis#622 Co-authored-by: Yanyan Wang <yanyanwang93@gmail.com> Co-authored-by: 诸岳 <fuping.dfp@antgroup.com>
- Loading branch information
1 parent
3063f99
commit a2fd4f4
Showing
12 changed files
with
269 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -94,4 +94,4 @@ | |
"webpack": "^4.26.1", | ||
"webpack-cli": "^3.1.2" | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
const expect = require('chai').expect; | ||
import Canvas from '../../src/canvas'; | ||
import { simulateMouseEvent, getClientPoint } from '../util'; | ||
import { getColor } from '../get-color'; | ||
|
||
const dom = document.createElement('div'); | ||
document.body.appendChild(dom); | ||
dom.id = 'c1'; | ||
dom.style.border = '1px solid black'; | ||
dom.style.display = 'inline-block'; | ||
|
||
describe('#494', () => { | ||
const canvas = new Canvas({ | ||
container: dom, | ||
width: 400, | ||
height: 400, | ||
}); | ||
|
||
const el = canvas.get('el'); | ||
const context = canvas.get('context'); | ||
const pixelRatio = canvas.getPixelRatio(); | ||
|
||
it('render should work correctly when element is clipped by view', (done) => { | ||
const group = canvas.addGroup(); | ||
const rect = group.addShape('rect', { | ||
draggable: true, | ||
attrs: { | ||
fill: 'red', | ||
stroke: 'blue', | ||
lineWidth: 4, | ||
height: 40, | ||
width: 40, | ||
x: 100, | ||
y: 100, | ||
}, | ||
}); | ||
|
||
canvas.on('click', () => { | ||
group.translate(0, 200); | ||
}); | ||
|
||
let origin = {}; | ||
|
||
rect.on('dragstart', (e) => { | ||
origin = { | ||
x: e.clientX, | ||
y: e.clientY, | ||
}; | ||
}); | ||
|
||
rect.on('drag', (e) => { | ||
const clientX = +e.clientX; | ||
const clientY = +e.clientY; | ||
if (isNaN(clientX) || isNaN(clientY)) { | ||
return; | ||
} | ||
|
||
group.translate(clientX - origin.x, clientY - origin.y); | ||
origin = { | ||
x: clientX, | ||
y: clientY, | ||
}; | ||
}); | ||
|
||
/* 先将 rect 完全拖离视窗,并点击画布 */ | ||
// 先移动到 rect 上 | ||
const { clientX, clientY } = getClientPoint(canvas, 100, 100); | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY, | ||
}); | ||
// 按下鼠标 | ||
simulateMouseEvent(el, 'mousedown', { | ||
clientX, | ||
clientY, | ||
}); | ||
// 先移动 10 像素,触发 dragstart 事件 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 10, | ||
}); | ||
// 要模拟 drag 事件,需要触发 mousemove 事件两次及以上。因为第一次 mousemove 事件是用来触发 dragstart 事件的 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 20, | ||
}); | ||
// 将 rect 完全拖离视窗,这里通过鼠标离开画布足够距离进行模拟,拖拽距离共 200 = 210 - 10 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 210, | ||
}); | ||
// 松开鼠标,停止拖拽 | ||
simulateMouseEvent(el, 'mouseup', { | ||
clientX, | ||
clientY: clientY - 200, | ||
}); | ||
let canvasBBox = group.getCanvasBBox(); | ||
// 判断 rect 是否完全拖离画布 | ||
expect(canvasBBox.maxY).eqls(-58); | ||
// 按下鼠标 | ||
simulateMouseEvent(el, 'mousedown', { | ||
clientX, | ||
clientY, | ||
}); | ||
simulateMouseEvent(el, 'mouseup', { | ||
clientX, | ||
clientY, | ||
}); | ||
canvasBBox = group.getCanvasBBox(); | ||
// 判断 rect 是否移动回画布 | ||
expect(canvasBBox.maxY).eqls(142); | ||
setTimeout(() => { | ||
// stroke 判断 | ||
expect(getColor(context, 100 * pixelRatio, 100 * pixelRatio)).eqls('#0000ff'); | ||
// fill 判断 | ||
expect(getColor(context, (100 + 10) * pixelRatio, (100 + 10) * pixelRatio)).eqls('#ff0000'); | ||
done(); | ||
}, 25); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
const expect = require('chai').expect; | ||
import Canvas from '../../src/canvas'; | ||
import { simulateMouseEvent, getClientPoint } from '../util'; | ||
import { getColor } from '../get-color'; | ||
|
||
const dom = document.createElement('div'); | ||
document.body.appendChild(dom); | ||
dom.id = 'c1'; | ||
dom.style.border = '1px solid black'; | ||
dom.style.display = 'inline-block'; | ||
|
||
describe('#622', () => { | ||
const canvas = new Canvas({ | ||
container: dom, | ||
width: 400, | ||
height: 400, | ||
}); | ||
|
||
const el = canvas.get('el'); | ||
const context = canvas.get('context'); | ||
const pixelRatio = canvas.getPixelRatio(); | ||
|
||
it('hasChanged should have priority over refresh with in checkChildrenRefresh function', (done) => { | ||
const group = canvas.addGroup(); | ||
|
||
const circle = group.addShape('circle', { | ||
draggable: true, | ||
attrs: { | ||
x: 100, | ||
y: 100, | ||
r: 50, | ||
fill: '#f00', | ||
}, | ||
}); | ||
|
||
const rect = group.addShape('rect', { | ||
attrs: { | ||
x: 100, | ||
y: 100, | ||
fill: '#0f0', | ||
width: 100, | ||
height: 50, | ||
}, | ||
}); | ||
|
||
rect.animate( | ||
{ | ||
width: 50, | ||
}, | ||
{ | ||
duration: 1000, | ||
repeat: true, | ||
} | ||
); | ||
|
||
let previousX = 0; | ||
let previousY = 0; | ||
|
||
circle.on('dragstart', (e) => { | ||
previousX = e.clientX; | ||
previousY = e.clientY; | ||
}); | ||
|
||
circle.on('drag', (e) => { | ||
const dx = e.clientX - previousX; | ||
const dy = e.clientY - previousY; | ||
group.translate(dx, dy); | ||
previousX = e.clientX; | ||
previousY = e.clientY; | ||
}); | ||
|
||
/* 先将 group 完全拖离视窗,并点击画布 */ | ||
// 先移动到 circle 上 | ||
const { clientX, clientY } = getClientPoint(canvas, 90, 90); | ||
// 按下鼠标 | ||
simulateMouseEvent(el, 'mousedown', { | ||
clientX, | ||
clientY, | ||
}); | ||
// 先移动 10 像素,触发 dragstart 事件 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 10, | ||
}); | ||
// // 往回移动 10px 回到起始地点 | ||
// // 要模拟 drag 事件,需要触发 mousemove 事件两次及以上。因为第一次 mousemove 事件是用来触发 dragstart 事件的 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY, | ||
}); | ||
// 将 group 完全拖离视窗,这里通过鼠标离开画布足够距离(点击处上方 200 的位置)进行模拟 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 200, | ||
}); | ||
// 将 group 拖拽回起始位置 | ||
simulateMouseEvent(el, 'mousemove', { | ||
clientX, | ||
clientY: clientY - 10, | ||
}); | ||
// 松开鼠标,停止拖拽 | ||
simulateMouseEvent(el, 'mouseup', { | ||
clientX, | ||
clientY, | ||
}); | ||
const canvasBBox = group.getCanvasBBox(); | ||
// 判断 group 是否拖拽回起始位置 | ||
expect(canvasBBox.maxY).eqls(150); | ||
setTimeout(() => { | ||
// 判断 circle 能否正常渲染 | ||
expect(getColor(context, 90 * pixelRatio, 90 * pixelRatio)).eqls('#ff0000'); | ||
done(); | ||
}, 25); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.