Canvas element, and optional Ids for all.

Author: davesmith00000

tyrian-next/src/main/scala/tyrian/ui/UIElement.scala

@@ -13,6 +13,9 @@ trait UIElement[Component, ComponentTheme]:
   def addClassNames(classes: Set[String]): Component = withClassNames(classNames ++ classes)
   def addClassNames(classes: String*): Component     = addClassNames(classes.toSet)
 
+  def id: Option[String]
+  def withId(id: String): Component
+
   def themeOverride: ThemeOverride[ComponentTheme]
   def themeLens: Lens[Theme.Default, ComponentTheme]
   def withThemeOverride(value: ThemeOverride[ComponentTheme]): Component

tyrian-next/src/main/scala/tyrian/ui/elements/stateful/input/Input.scala

@@ -2,8 +2,6 @@ package tyrian.ui.elements.stateful.input
 
 import tyrian.Elem
 import tyrian.EmptyAttribute
-import tyrian.Html.*
-import tyrian.Style
 import tyrian.next.GlobalMsg
 import tyrian.next.Outcome
 import tyrian.ui
@@ -20,6 +18,7 @@ final case class Input(
     isReadOnly: Boolean,
     value: String,
     classNames: Set[String],
+    id: Option[String],
     themeOverride: ThemeOverride[InputTheme]
 ) extends UIElement.Stateful[Input, InputTheme]:
 
@@ -49,6 +48,9 @@ final case class Input(
   def withClassNames(classes: Set[String]): Input =
     this.copy(classNames = classes)
 
+  def withId(id: String): Input =
+    this.copy(id = Some(id))
+
   def themeLens: Lens[Theme.Default, InputTheme] =
     Lens(
       _.input,
@@ -69,14 +71,32 @@ final case class Input(
       Outcome(this)
 
   def view: Theme ?=> Elem[GlobalMsg] =
-    val theme = summon[Theme]
+    Input.toHtml(this)
+
+object Input:
+
+  import tyrian.Html.*
+  import tyrian.Style
+
+  def apply(key: UIKey): Input =
+    Input(
+      key,
+      placeholder = "",
+      isDisabled = false,
+      isReadOnly = false,
+      value = "",
+      Set.empty,
+      id = None,
+      ThemeOverride.NoOverride
+    )
 
+  def toHtml(i: Input)(using theme: Theme): tyrian.Elem[GlobalMsg] =
     val disabledAttr =
-      if isDisabled then attribute("disabled", "true")
+      if i.isDisabled then attribute("disabled", "true")
       else EmptyAttribute
 
     val readonlyAttr =
-      if isReadOnly then attribute("readonly", "true")
+      if i.isReadOnly then attribute("readonly", "true")
       else EmptyAttribute
 
     val styles =
@@ -85,39 +105,30 @@ final case class Input(
           Style.empty
 
         case tt: Theme.Default =>
-          if isDisabled then tt.input.toDisabledStyles(theme)
+          if i.isDisabled then tt.input.toDisabledStyles(theme)
           else tt.input.toStyles(theme)
 
     val classAttribute =
-      if classNames.isEmpty then EmptyAttribute
-      else cls := classNames.mkString(" ")
+      if i.classNames.isEmpty then EmptyAttribute
+      else cls := i.classNames.mkString(" ")
+
+    val idAttribute =
+      i.id.fold(EmptyAttribute)(id.:=.apply)
 
     val inputAttrs = List(
-      tyrian.Html.placeholder := placeholder,
-      tyrian.Html.value       := value,
+      tyrian.Html.placeholder := i.placeholder,
+      tyrian.Html.value       := i.value,
       typ                     := "text",
-      onInput((s: String) => TextInputMsg.Changed(key, s)),
+      onInput((s: String) => TextInputMsg.Changed(i.key, s)),
       disabledAttr,
       readonlyAttr,
       style(styles),
-      classAttribute
+      classAttribute,
+      idAttribute
     )
 
     input(inputAttrs*)
 
-object Input:
-
-  def apply(key: UIKey): Input =
-    Input(
-      key,
-      placeholder = "",
-      isDisabled = false,
-      isReadOnly = false,
-      value = "",
-      Set.empty,
-      ThemeOverride.NoOverride
-    )
-
 enum TextInputMsg extends GlobalMsg:
   case Changed(id: UIKey, value: String)
   case Clear(id: UIKey)

tyrian-next/src/main/scala/tyrian/ui/elements/stateless/canvas/Canvas.scala

@@ -0,0 +1,100 @@
+package tyrian.ui.elements.stateless.canvas
+
+import tyrian.EmptyAttribute
+import tyrian.next.GlobalMsg
+import tyrian.ui.UIElement
+import tyrian.ui.datatypes.Extent
+import tyrian.ui.layout.ContainerTheme
+import tyrian.ui.theme.Theme
+import tyrian.ui.theme.ThemeOverride
+import tyrian.ui.utils.Lens
+
+final case class Canvas(
+    width: Option[Extent],
+    height: Option[Extent],
+    classNames: Set[String],
+    id: Option[String],
+    themeOverride: ThemeOverride[ContainerTheme]
+) extends UIElement[Canvas, ContainerTheme]:
+
+  def withWidth(width: Extent): Canvas =
+    this.copy(width = Some(width))
+  def fillWidth: Canvas = withWidth(Extent.Fill)
+
+  def withHeight(height: Extent): Canvas =
+    this.copy(height = Some(height))
+  def fillHeight: Canvas = withHeight(Extent.Fill)
+
+  def withSize(width: Extent, height: Extent): Canvas =
+    this.copy(width = Some(width), height = Some(height))
+  def fillContainer: Canvas = withSize(Extent.Fill, Extent.Fill)
+
+  def withClassNames(classes: Set[String]): Canvas =
+    this.copy(classNames = classes)
+
+  def withId(id: String): Canvas =
+    this.copy(id = Some(id))
+
+  def themeLens: Lens[Theme.Default, ContainerTheme] =
+    Lens(
+      _.image,
+      (t, c) => t.copy(canvas = c)
+    )
+
+  def withThemeOverride(value: ThemeOverride[ContainerTheme]): Canvas =
+    this.copy(themeOverride = value)
+
+  def view: Theme ?=> tyrian.Elem[GlobalMsg] =
+    Canvas.toHtml(this)
+
+object Canvas:
+
+  import tyrian.Html.*
+  import tyrian.Style
+
+  def apply(): Canvas =
+    Canvas(
+      width = None,
+      height = None,
+      classNames = Set.empty,
+      id = None,
+      themeOverride = ThemeOverride.NoOverride
+    )
+
+  def apply(width: Extent, height: Extent): Canvas =
+    Canvas(
+      width = Some(width),
+      height = Some(height),
+      classNames = Set.empty,
+      id = None,
+      themeOverride = ThemeOverride.NoOverride
+    )
+
+  def toHtml(c: Canvas)(using theme: Theme): tyrian.Elem[GlobalMsg] =
+    val sizeAttributes = List(
+      c.width.map(w => width := w.toCSSValue).toList,
+      c.height.map(h => height := h.toCSSValue).toList
+    ).flatten
+
+    val canvasStyles =
+      theme match
+        case Theme.None =>
+          Style.empty
+
+        case tt: Theme.Default =>
+          tt.canvas.toStyle
+
+    val styles =
+      if canvasStyles.isEmpty then Nil else List(style(canvasStyles))
+
+    val classAttribute =
+      if c.classNames.isEmpty then EmptyAttribute
+      else cls := c.classNames.mkString(" ")
+
+    val idAttribute =
+      c.id.fold(EmptyAttribute)(id.:=.apply)
+
+    val allAttributes =
+      sizeAttributes ++ styles ++ List(classAttribute, idAttribute)
+
+    canvas(allAttributes*)()

tyrian-next/src/main/scala/tyrian/ui/elements/stateless/html/HtmlElement.scala

@@ -7,16 +7,21 @@ import tyrian.ui.theme.ThemeOverride
 import tyrian.ui.utils.Lens
 
 final case class HtmlElement(
-    html: tyrian.Elem[GlobalMsg],
-    classNames: Set[String],
-    themeOverride: ThemeOverride[Unit]
+    html: tyrian.Elem[GlobalMsg]
 ) extends UIElement[HtmlElement, Unit]:
 
+  val classNames: Set[String]            = Set()
+  val id: Option[String]                 = None
+  val themeOverride: ThemeOverride[Unit] = ThemeOverride.NoOverride
+
   def withHtml(html: tyrian.Elem[GlobalMsg]): HtmlElement =
     this.copy(html = html)
 
   def withClassNames(classes: Set[String]): HtmlElement =
-    this.copy(classNames = classes)
+    this
+
+  def withId(id: String): HtmlElement =
+    this
 
   def themeLens: Lens[Theme.Default, Unit] =
     Lens.unit
@@ -29,29 +34,13 @@ final case class HtmlElement(
 
 object HtmlElement:
 
-  import tyrian.Html
   import tyrian.Html.*
 
-  def apply(html: Html[GlobalMsg]): HtmlElement =
-    HtmlElement(
-      html = html,
-      classNames = Set.empty,
-      themeOverride = ThemeOverride.NoOverride
-    )
-
   def raw(htmlString: String): HtmlElement =
-    HtmlElement(
-      html = div().innerHtml(htmlString),
-      classNames = Set.empty,
-      themeOverride = ThemeOverride.NoOverride
-    )
+    HtmlElement(html = div().innerHtml(htmlString))
 
   def text(content: String): HtmlElement =
-    HtmlElement(
-      html = span(content),
-      classNames = Set.empty,
-      themeOverride = ThemeOverride.NoOverride
-    )
+    HtmlElement(html = span(content))
 
   def toHtml(element: HtmlElement): tyrian.Elem[GlobalMsg] =
     element.html

tyrian-next/src/main/scala/tyrian/ui/elements/stateless/image/Image.scala

@@ -17,6 +17,7 @@ final case class Image(
     height: Option[Extent],
     fit: ImageFit,
     classNames: Set[String],
+    id: Option[String],
     themeOverride: ThemeOverride[ContainerTheme]
 ) extends UIElement[Image, ContainerTheme]:
 
@@ -48,6 +49,9 @@ final case class Image(
   def withClassNames(classes: Set[String]): Image =
     this.copy(classNames = classes)
 
+  def withId(id: String): Image =
+    this.copy(id = Some(id))
+
   def themeLens: Lens[Theme.Default, ContainerTheme] =
     Lens(
       _.image,
@@ -73,6 +77,7 @@ object Image:
       height = None,
       fit = ImageFit.default,
       classNames = Set.empty,
+      id = None,
       themeOverride = ThemeOverride.NoOverride
     )
 
@@ -84,6 +89,7 @@ object Image:
       height = None,
       fit = ImageFit.default,
       classNames = Set.empty,
+      id = None,
       themeOverride = ThemeOverride.NoOverride
     )
 
@@ -95,6 +101,7 @@ object Image:
       height = Some(height),
       fit = ImageFit.default,
       classNames = Set.empty,
+      id = None,
       themeOverride = ThemeOverride.NoOverride
     )
 
@@ -124,6 +131,9 @@ object Image:
       if image.classNames.isEmpty then EmptyAttribute
       else cls := image.classNames.mkString(" ")
 
-    val allAttributes = baseAttributes ++ sizeAttributes ++ List(style(styles), classAttribute)
+    val idAttribute =
+      image.id.fold(EmptyAttribute)(id.:=.apply)
+
+    val allAttributes = baseAttributes ++ sizeAttributes ++ List(style(styles), classAttribute, idAttribute)
 
     img(allAttributes*)

tyrian-next/src/main/scala/tyrian/ui/elements/stateless/link/Link.scala

@@ -13,6 +13,7 @@ final case class Link(
     url: Option[String],
     click: Option[GlobalMsg],
     classNames: Set[String],
+    id: Option[String],
     themeOverride: ThemeOverride[LinkTheme]
 ) extends UIElement[Link, LinkTheme]:
 
@@ -37,6 +38,9 @@ final case class Link(
   def withClassNames(classes: Set[String]): Link =
     this.copy(classNames = classes)
 
+  def withId(id: String): Link =
+    this.copy(id = Some(id))
+
   def themeLens: Lens[Theme.Default, LinkTheme] =
     Lens(
       _.link,
@@ -58,6 +62,7 @@ object Link:
       url = Some(url),
       click = None,
       classNames = Set(),
+      id = None,
       themeOverride = ThemeOverride.NoOverride
     )
 
@@ -68,6 +73,7 @@ object Link:
       url = None,
       click = Some(onClick),
       classNames = Set(),
+      id = None,
       themeOverride = ThemeOverride.NoOverride
     )
 
@@ -83,6 +89,9 @@ object Link:
         if link.classNames.isEmpty then EmptyAttribute
         else cls := link.classNames.mkString(" ")
 
+      val idAttribute =
+        link.id.fold(EmptyAttribute)(id.:=.apply)
+
       val styleAttribute =
         theme match
           case Theme.None =>
@@ -97,7 +106,8 @@ object Link:
           link.target.map(_.toAttribute).getOrElse(EmptyAttribute),
           link.click.map(msg => onClick(msg)).getOrElse(EmptyAttribute),
           styleAttribute,
-          classAttribute
+          classAttribute,
+          idAttribute
         )
 
       a(attributes)(