From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id CFD571FF170 for ; Thu, 21 Aug 2025 15:08:15 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 71C2F2957C; Thu, 21 Aug 2025 15:08:16 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Date: Thu, 21 Aug 2025 15:07:10 +0200 Message-ID: <20250821130742.3391052-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.2 MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL -1.228 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_DBL_SPAM 2.5 Contains a spam URL listed in the Spamhaus DBL blocklist [graph.rs] Subject: [yew-devel] [PATCH yew-comp] rrd: fix rrd tooltip alignment for edge of viewport X-BeenThere: yew-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Yew framework devel list at Proxmox List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Yew framework devel list at Proxmox Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: yew-devel-bounces@lists.proxmox.com Sender: "yew-devel" This is a semantical revert of: 023c856 (rrd: align tooltip directly to pointer position) We saved a bit of code by aligning the tooltip to the mouse position directly by using align_to_xy, but this meant that the tooltip got outside the viewport. This happens because align_to_xy does not automatically keep the element to be aligned inside the viewport. Instead of trying to add that functionality there, simply do what we did before: adding an invisible element into the svg where we can align the tooltip to. Signed-off-by: Dominik Csapak --- src/rrd/graph.rs | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/rrd/graph.rs b/src/rrd/graph.rs index 4c43039..cf8b342 100644 --- a/src/rrd/graph.rs +++ b/src/rrd/graph.rs @@ -6,7 +6,7 @@ use yew::html::IntoPropValue; use yew::prelude::*; use yew::virtual_dom::{VComp, VNode}; -use pwt::dom::align::align_to_xy; +use pwt::dom::align::{align_to, AlignOptions}; use pwt::dom::DomSizeObserver; use pwt::prelude::*; use pwt::props::{IntoOptionalTextRenderFn, TextRenderFn}; @@ -107,7 +107,7 @@ pub enum Msg { AdjustLeftOffset(usize), StartSelection(i32, i32), EndSelection(i32), - PointerMove(i32, i32, i32, i32), + PointerMove(i32, i32), PointerEnter, PointerLeave, ClearViewRange, @@ -123,7 +123,7 @@ pub struct PwtRRDGraph { view_range: Option<(usize, usize)>, captured_pointer_id: Option, cross_pos: Option<(i32, i32)>, - tooltip_pos: Option<(f64, f64)>, + tooltip_align_ref: NodeRef, tooltip_ref: NodeRef, y_label_ref: NodeRef, serie0_visible: bool, @@ -323,6 +323,16 @@ impl PwtRRDGraph { .d(path) .into(), ); + + children.push( + Circle::new() + .node_ref(self.tooltip_align_ref.clone()) + .fill("none") + .stroke("none") + .position(x, y) + .r(1) + .into(), + ) } Canvas::new() @@ -350,12 +360,7 @@ impl PwtRRDGraph { .callback(|event: PointerEvent| Msg::EndSelection(event.offset_x())), ) .onpointermove(ctx.link().callback(|event: PointerEvent| { - Msg::PointerMove( - event.offset_x(), - event.offset_y(), - event.client_x(), - event.client_y(), - ) + Msg::PointerMove(event.offset_x(), event.offset_y()) })) .into() } @@ -458,7 +463,7 @@ impl Component for PwtRRDGraph { view_range: None, captured_pointer_id: None, cross_pos: None, - tooltip_pos: None, + tooltip_align_ref: NodeRef::default(), tooltip_ref: NodeRef::default(), y_label_ref: NodeRef::default(), serie0_visible: true, @@ -525,9 +530,8 @@ impl Component for PwtRRDGraph { self.selection = Some((start_index, start_index)); true } - Msg::PointerMove(x, y, client_x, client_y) => { + Msg::PointerMove(x, y) => { self.cross_pos = Some((x, y)); - self.tooltip_pos = Some(((client_x + 20) as f64, (client_y + 20) as f64)); self.selection = match self.selection { Some((start, _)) => { let (data0, _, _) = self.get_view_data(ctx); @@ -702,9 +706,13 @@ impl Component for PwtRRDGraph { self.size_observer = Some(size_observer); } } - if let Some(pos) = self.tooltip_pos { + if let Some(align_node) = self.tooltip_align_ref.get() { if let Some(tooltip_node) = self.tooltip_ref.get() { - let _ = align_to_xy(tooltip_node, pos, pwt::dom::align::Point::TopStart); + let _ = align_to( + align_node, + tooltip_node, + Some(AlignOptions::default().offset(20.0, 20.0)), + ); } } if let Some(el) = self.y_label_ref.cast::() { -- 2.47.2 _______________________________________________ yew-devel mailing list yew-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel