xilem_web: Extend svgdraw example to be an infinite zoomable canvas (#734)

This allows zooming with the mousewheel and panning with the mid/right
mouse button.
I think it would be nice to add touch support with a pinch gesture
handler as well.

It also replaces the random color with a color selector. And makes the
stroke width range logarithmic.
And adds `type_` and `name` attributes to `HtmlInputElement`.

It was also optimized by using an `Rc<AnyDomView>` to memoize all
previously drawn lines. This way I think the bottleneck now certainly is
the browser.

Author: Philipp-M

xilem_web/src/interfaces.rs

@@ -822,13 +822,43 @@ pub trait HtmlInputElement<State, Action = ()>:
     /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
     ///
     /// # fn component() -> impl HtmlInputElement<()> {
-    /// input(()).attr("type", "checkbox").checked(true) // results in <input type="checkbox" checked></input>
+    /// input(()).type_("checkbox").checked(true) // results in <input type="checkbox" checked></input>
     /// # }
     /// ```
     fn checked(self, checked: bool) -> html_input_element::view::Checked<Self, State, Action> {
         html_input_element::view::Checked::new(self, checked)
     }
 
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/type> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).type_("radio") // results in <input type="radio"></input>
+    /// # }
+    /// ```
+    fn type_(self, value: impl Into<Cow<'static, str>>) -> Attr<Self, State, Action> {
+        Attr::new(self, "type".into(), value.into().into_attr_value())
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/name> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).name("color") // results in <input name="color"></input>
+    /// # }
+    /// ```
+    fn name(self, value: impl Into<Cow<'static, str>>) -> Attr<Self, State, Action> {
+        Attr::new(self, "name".into(), value.into().into_attr_value())
+    }
+
     /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked> for more details.
     ///
     /// # Examples
@@ -837,7 +867,7 @@ pub trait HtmlInputElement<State, Action = ()>:
     /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
     ///
     /// # fn component() -> impl HtmlInputElement<()> {
-    /// input(()).attr("type", "radio").default_checked(true) // results in <input type="radio" checked></input>
+    /// input(()).type_("radio").default_checked(true) // results in <input type="radio" checked></input>
     /// # }
     /// ```
     fn default_checked(

xilem_web/web_examples/fetch/src/main.rs

@@ -175,7 +175,7 @@ fn cat_fetch_controls(state: &AppState) -> impl Element<AppState> {
                 td(label("How many cats would you like?").for_("cat-count")),
                 td(input(())
                     .id("cat-count")
-                    .attr("type", "number")
+                    .type_("number")
                     .attr("min", 0)
                     .attr("value", state.cats_to_fetch)
                     .on_input(|state: &mut AppState, ev: web_sys::Event| {
@@ -193,7 +193,7 @@ fn cat_fetch_controls(state: &AppState) -> impl Element<AppState> {
                 ),
                 td(input(())
                     .id("reset-debounce-update")
-                    .attr("type", "checkbox")
+                    .type_("checkbox")
                     .checked(state.reset_debounce_on_update)
                     .on_input(|state: &mut AppState, event: web_sys::Event| {
                         state.reset_debounce_on_update = input_target(&event).checked();
@@ -203,7 +203,7 @@ fn cat_fetch_controls(state: &AppState) -> impl Element<AppState> {
                 td(label("Debounce timeout in ms:").for_("debounce-timeout-duration")),
                 td(input(())
                     .id("debounce-timeout-duration")
-                    .attr("type", "number")
+                    .type_("number")
                     .attr("min", 0)
                     .attr("value", state.debounce_in_ms)
                     .on_input(|state: &mut AppState, ev: web_sys::Event| {

xilem_web/web_examples/mathml_svg/src/main.rs

@@ -48,7 +48,7 @@ fn slider(
     cb: fn(&mut Triangle, web_sys::Event),
 ) -> impl HtmlInputElement<Triangle> {
     html::input(())
-        .attr("type", "range")
+        .type_("range")
         .attr("min", 1)
         .attr("max", max)
         .attr("value", value)

xilem_web/web_examples/svgdraw/index.html

@@ -14,27 +14,48 @@
       touch-action: none;
     }
 
-    .controls {
+    input[type=radio] {
+      display: none;
+    }
+
+    .color>input[type=radio]:checked+div {
+      transform: scale(1.25);
+    }
+
+    .color>input[type=radio]+div {
+      transition: transform 0.3s ease-in-out;
+      border-radius: 50%;
+      border-color: black;
+      border-width: 1px;
+      border-style: solid;
+      width: 23px;
+      height: 23px;
+      margin: 2.2px;
+      background-color: red;
       display: block;
+    }
+
+    .color {
+      display: inline-block
+    }
+
+    .controls {
+      position: absolute;
       left: 0;
-      right: 0;
-      margin-inline: auto;
       width: fit-content;
       height: 1.5rem;
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
+      padding: 1.0rem;
+      font-family: Arial, Helvetica, sans-serif, monospace;
     }
 
-    .controls>span {
-      vertical-align: top;
+    .controls>div {
+      margin-bottom: 10px;
     }
 
     .value-range {
-      display: inline-block;
-      position: relative;
+      position: absolute;
       height: 1.5rem;
       width: 20rem;
-
     }
 
     .value-range::before,
@@ -53,12 +74,12 @@
     .value-range::before {
       text-align: left;
       /* hardcoded values aren't optimal here, but this example is not about styling/layouting */
-      content: "1";
+      content: "0.1";
     }
 
     .value-range::after {
       text-align: right;
-      content: "30";
+      content: "1000";
     }
 
     input[type=range] {
@@ -95,7 +116,6 @@
 
     label {
       line-height: 1.5rem;
-      position: absolute;
     }
   </style>
 </head>