message: pan_zoom example refactor
diff: @@ -26,10 +26,8 @@ fn artboard() -> impl Element {
  });
  let (pan, pan_signal) = Mutable::new_and_signal(false);
  - let svg = RawSvgEl::new("svg").dom_element_type::<web_sys::SvgsvgElement>();
  - let svg_dom_element = svg.dom_element().unchecked_into::<web_sys::SvgsvgElement>();
  - let class_id = svg.class_id();
  - svg
  + RawSvgEl::new("svg")
  + .dom_element_type::<web_sys::SvgsvgElement>()
  .style("touch-action", "none")
  .style_signal("cursor", pan_signal.map_true(|| "grabbing"))
  .attr("width", "100%")
  @@ -38,14 +36,16 @@ fn artboard() -> impl Element {
  let ViewBox { x, y, width, height } = view_box;
  format!("{x} {y} {width} {height}")
  }))
  - .event_handler_with_options(EventOptions::new().preventable(), clone!((view_box, svg_dom_element) move |event: events_extra::WheelEvent| {
  + .apply(clone!((view_box) move |this| {
  + let dom_element = this.dom_element();
  + this.event_handler_with_options(EventOptions::new().preventable(), move |event: events_extra::WheelEvent| {
  event.prevent_default();
  let current_view_box = view_box.get();
  let (width, height) = {
  // Note: It could be replaced with `.on_resize` + `Rc<Cell<width, height>>`
  // once ResizeObserver can reliably observe SVG elements (is there a workaround?)
  - let dom_rect = svg_dom_element.get_bounding_client_rect();
  + let dom_rect = dom_element.get_bounding_client_rect();
  (dom_rect.width(), dom_rect.height())
  };
  @@ -61,25 +61,31 @@ fn artboard() -> impl Element {
  width: current_view_box.width + delta_view_box_width,
  height: current_view_box.height + delta_view_box_height,
  });
  + })
  }))
  .event_handler(clone!((pan) move |_: events_extra::PointerDown| {
  pan.set_neq(true);
  }))
  .event_handler(clone!((pan) move |_: events_extra::PointerUp| pan.set_neq(false)))
  - .event_handler(clone!((pan) move |event: events_extra::PointerMove| {
  + .apply(clone!((pan) move |this| {
  + let dom_element = this.dom_element();
  + this.event_handler(move |event: events_extra::PointerMove| {
  if not(pan.get()) {
  return;
  }
  let (width, height) = {
  - let dom_rect = svg_dom_element.get_bounding_client_rect();
  + let dom_rect = dom_element.get_bounding_client_rect();
  (dom_rect.width(), dom_rect.height())
  };
  view_box.update_mut(|view_box| {
  view_box.x -= f64::from(event.movement_x()) * (view_box.width / width);
  view_box.y -= f64::from(event.movement_y()) * (view_box.height / height);
  });
  + })
  }))
  - .event_handler(move |event: events_extra::PointerLeave| {
  + .apply(|this| {
  + let class_id = this.class_id();
  + this.event_handler(move |event: events_extra::PointerLeave| {
  // Ignore children.
  // @TODO I don't know why `*Leave` events fire when moving pointer on descendants.
  // There should be an abstraction in Zoon to mitigate these strange browser API behaviors.
  @@ -103,6 +109,7 @@ fn artboard() -> impl Element {
  }
  pan.set_neq(false);
  })
  + })
  .children(circles())
  }
  