DioxusLabs / DioxusLabs/blitz

Transform incorrectly affects elements coordinates

Open
#663 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.