Transform incorrectly affects elements coordinates
- Dominant language
- Rust
- Stars
- 4.1k
- Forks
- 203
- Avg merge
- 8h 58m
- Merged PRs (30d)
- 112
Description
A transform on an element should not affect that element's own element coordinates, and it should not shift coordinates for other elements either - whether they're in the same document or inside a sub-document.
Source | Screen | Page (Current -> Expected) | Client (Current -> Expected) | Element (Current -> Expected)
-- | -- | -- | -- | --
Child | 75.2, 48.8 | 75.2, 48.8 -> 75.2, 48.8 | 75.2, 48.8 -> 75.2, 48.8 | 63.2, 36.8 -> 3.2, 6.8
Parent | 75.2, 48.8 | 75.2, 48.8 -> 75.2, 48.8 | 75.2, 48.8 -> 75.2, 48.8 | 63.2, 36.8 -> 13.2, 16.8
Widget (sub document) | 75.2, 48.8 | 63.2, 36.8 -> 3.2, 6.8 | 63.2, 36.8 -> 3.2, 6.8 | 63.2, 36.8 -> 3.2, 6.8
(There could be a small difference between child element coordinates and sub-document page/client/element coordinates e.g on firefox is different for 0.8)
```rust
use dioxus_native::prelude::*;
pub fn main() {
dioxus_native::launch(app);
}
fn app() -> Element {
let widget = use_memo(|| dioxus_native::CustomWidgetAttr::new(MarkerWidget {}));
rsx!(
style { {STYLES} }
div {
style: "position: relative; transform: translate(50px, 20px); width: 300px; height: 300px; border: 1px solid blue",
onpointerdown: move |evt| {
let client = evt.client_coordinates();
let element = evt.element_coordinates();
let page = evt.page_coordinates();
let screen = evt.screen_coordinates();
println!("parent client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",client.x, client.y, element.x, element.y, page.x, page.y, screen.x, screen.y);
},
div {
id: "canvas-container",
style: "position: absolute; top: 10px; left: 10px; width: 200px; height: 200px; border: 1px solid red;",
onpointerdown: move |evt| {
let client = evt.client_coordinates();
let element = evt.element_coordinates();
let page = evt.page_coordinates();
let screen = evt.screen_coordinates();
println!("child client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",client.x, client.y, element.x, element.y, page.x, page.y, screen.x, screen.y);
},
object { "data": widget }
}
}
)
}
struct MarkerWidget;
impl dioxus_native::Widget for MarkerWidget {
fn handle_event(&mut self, event: &blitz_traits::events::UiEvent) {
if let blitz_traits::events::UiEvent::PointerDown(evt) = event {
println!(
"widget client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",
evt.client_x(), evt.client_y(), evt.element_x(), evt.element_y(), evt.page_x(), evt.page_y(), evt.screen_x(), evt.screen_y()
);
}
}
}
const STYLES: &str = "
* {
box-sizing: border-box;
}
html, body, main {
width: 100vw;
height: 100vh;
margin: 0;
}
object {
display: block;
width: 100%;
height: 100%;
background: transparent;
}
";
```
Contributor guide
Research direction
Run the Rust reproduction and compare client_coordinates, element_coordinates, page_coordinates, and screen_coordinates for the parent, child, and widget. Trace the coordinate handling behind dioxus_native events and blitz_traits::events::UiEvent, then verify the reported current values become the expected values without transforms shifting other elements or the sub-document.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- rust
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100