-
Notifications
You must be signed in to change notification settings - Fork 199
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: html element's getBounds
logic exception (#1743)
#1764
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@antv/g-plugin-html-renderer': patch | ||
'@antv/g-lite': patch | ||
--- | ||
|
||
fix: html element's `getBounds` logic exception (#1743) |
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 |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import { mat4 } from 'gl-matrix'; | ||
import type { DisplayObjectConfig } from '../dom'; | ||
import { runtime } from '../global-runtime'; | ||
import { AABB, Rectangle } from '../shapes'; | ||
import { AABB } from '../shapes'; | ||
import type { BaseStyleProps, ParsedBaseStyleProps } from '../types'; | ||
import { Shape } from '../types'; | ||
import { DisplayObject } from './DisplayObject'; | ||
|
@@ -61,45 +61,39 @@ export class HTML extends DisplayObject<HTMLStyleProps, ParsedHTMLStyleProps> { | |
/** | ||
* override with $el.getBoundingClientRect | ||
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect | ||
* | ||
* ! The calculation logic of the html element should be consistent with that of the canvas element | ||
*/ | ||
getBoundingClientRect(): Rectangle { | ||
if (this.parsedStyle.$el) { | ||
const cameraMatrix = this.ownerDocument.defaultView | ||
.getCamera() | ||
.getOrthoMatrix(); | ||
const bBox = this.parsedStyle.$el.getBoundingClientRect(); | ||
|
||
return Rectangle.applyTransform( | ||
bBox, | ||
mat4.invert(mat4.create(), cameraMatrix), | ||
); | ||
} else { | ||
const { x, y, width, height } = this.parsedStyle; | ||
return new Rectangle(x, y, width, height); | ||
} | ||
} | ||
// getBoundingClientRect(): Rectangle { | ||
// if (this.parsedStyle.$el) { | ||
// return this.parsedStyle.$el.getBoundingClientRect(); | ||
// } else { | ||
// const { x, y, width, height } = this.parsedStyle; | ||
// return new Rectangle(x, y, width, height); | ||
// } | ||
// } | ||
|
||
getClientRects() { | ||
return [this.getBoundingClientRect()]; | ||
} | ||
|
||
getBounds() { | ||
const clientRect = this.getBoundingClientRect(); | ||
// calc context's offset | ||
// @ts-ignore | ||
const canvasRect = this.ownerDocument?.defaultView | ||
?.getContextService() | ||
.getBoundingClientRect(); | ||
// getBounds() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 同上 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这里也一样,采用基类的实现,保证 html 元素与 canvas 元素的实现一致,获取的结果也一致 |
||
// const clientRect = this.getBoundingClientRect(); | ||
// // calc context's offset | ||
// // @ts-ignore | ||
// const canvasRect = this.ownerDocument?.defaultView | ||
// ?.getContextService() | ||
// .getBoundingClientRect(); | ||
|
||
const aabb = new AABB(); | ||
const minX = clientRect.left - (canvasRect?.left || 0); | ||
const minY = clientRect.top - (canvasRect?.top || 0); | ||
aabb.setMinMax( | ||
[minX, minY, 0], | ||
[minX + clientRect.width, minY + clientRect.height, 0], | ||
); | ||
return aabb; | ||
} | ||
// const aabb = new AABB(); | ||
// const minX = clientRect.left - (canvasRect?.left || 0); | ||
// const minY = clientRect.top - (canvasRect?.top || 0); | ||
// aabb.setMinMax( | ||
// [minX, minY, 0], | ||
// [minX + clientRect.width, minY + clientRect.height, 0], | ||
// ); | ||
// return aabb; | ||
// } | ||
|
||
getLocalBounds() { | ||
if (this.parentNode) { | ||
|
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,15 @@ | ||
import type { HTML, ParsedHTMLStyleProps } from '../../display-objects/HTML'; | ||
import type { GeometryAABBUpdater } from './interfaces'; | ||
|
||
export class HTMLUpdater implements GeometryAABBUpdater<ParsedHTMLStyleProps> { | ||
update(parsedStyle: ParsedHTMLStyleProps, object: HTML) { | ||
const { x = 0, y = 0, width = 0, height = 0 } = parsedStyle; | ||
|
||
return { | ||
cx: x + width / 2, | ||
cy: y + height / 2, | ||
hwidth: width / 2, | ||
hheight: height / 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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个函数注释掉是要去掉还是保留?可能有一些库依赖了这个函数,需要确认下
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里的实现原本是覆盖了基类的实现,而且计算结果与 canvas 元素的也不一致,现在注释掉就相当于采用基类的实现了,保持 html 与 canvas 元素的计算结果一致,但在某些情况下会导致与 dom api 的计算结果不一致