Permalink
Browse files

Better size measuring support and fixes to container

Added background painting
Added visible property
  • Loading branch information...
darkfrog26 committed Apr 26, 2018
1 parent dba80fd commit 673507c611c2579a8d2bf1fa16b4d135e6100e67
@@ -77,6 +77,8 @@ trait Component extends TaskSupport with ComponentTheme {
*/
protected def updatables: List[Updatable] = Nil
resetMeasured()
/**
* Called automatically the first time this Component is connected to the document.
*/
@@ -94,6 +96,11 @@ trait Component extends TaskSupport with ComponentTheme {
updateUpdatables(delta, internalUpdatables())
}
def resetMeasured(): Unit = {
size.measured.width := measuredWidth
size.measured.height := measuredHeight
}
@tailrec
private def updateUpdatables(delta: Double, updatables: List[Updatable]): Unit = if (updatables.nonEmpty) {
updatables.head.update(delta)
@@ -8,4 +8,8 @@ import reactify.Var
abstract class HTMLContainer[Child <: Component](override protected val element: html.Element) extends HTMLComponent[html.Element] with AbstractContainer[Child] {
override lazy val children: Var[Vector[Child]] = Var(Vector.empty)
override lazy val layout: Var[Layout] = Var(Layout.None)
override protected def measuredWidth: Double = children.foldLeft(0.0)((max, child) => math.max(max, child.position.right()))
override protected def measuredHeight: Double = children.foldLeft(0.0)((max, child) => math.max(max, child.position.bottom()))
}
@@ -10,7 +10,7 @@ class ImageView(implementation: ImageViewImplementation = new CanvasImageViewImp
extends HTMLComponent[html.Element] with ImageViewTheme {
override protected lazy val element: html.Element = implementation.createElement()
lazy val image: Var[Image] = connect(Var(Image.empty), implementation.apply(this, _), updateSizeFromElement())
lazy val image: Var[Image] = connect(Var(Image.empty), implementation.apply(this, _))
override lazy val theme: Var[ImageViewTheme] = Var(ImageView)
override def `type`: String = "ImageView"
@@ -17,10 +17,10 @@ class TextView(protected val element: html.Element) extends HTMLComponent[html.E
override lazy val theme: Var[TextViewTheme] = Var(TextView)
override def `type`: String = "TextView"
lazy val value: Var[String] = connect[String](Var(""), element.textContent = _, updateSizeFromElement())
lazy val value: Var[String] = connect[String](Var(""), element.textContent = _)
connect[FontFamily](font.family, ff => element.style.fontFamily = ff.value, updateSizeFromElement())
connect(font.size, (v: Double) => element.style.fontSize = s"${v}px", updateSizeFromElement())
connect[FontFamily](font.family, ff => element.style.fontFamily = ff.value)
connect(font.size, (v: Double) => element.style.fontSize = s"${v}px")
connect[Color](color, (c: Color) => element.style.color = c.toRGBA)
override protected def measuredWidth: Double = TextView.measure(this).width
@@ -14,8 +14,8 @@ class ComponentSize(component: Component) {
if (height) this.height.set(measured.height())
}
lazy val width: Var[Double] = component.prop(measured.width, updatesRendering = true)
lazy val height: Var[Double] = component.prop(measured.height, updatesRendering = true)
val width: Var[Double] = component.prop(measured.width, updatesRendering = true)
val height: Var[Double] = component.prop(measured.height, updatesRendering = true)
lazy val center: Val[Double] = Val(width / 2.0)
lazy val middle: Val[Double] = Val(height / 2.0)
@@ -3,6 +3,7 @@ package io.youi.component.extras
import io.youi.component.Component
import io.youi.{dom, ui}
import io.youi.dom._
import io.youi.paint.Paint
import org.scalajs.dom.{Element, _}
import reactify.Var
@@ -18,11 +19,12 @@ trait HTMLComponent[E <: html.Element] extends Component {
element.setAttribute("data-youi-id", id())
size.measured.width := measuredWidth
size.measured.height := measuredHeight
connect(size.width, (v: Double) => element.style.width = s"${v}px")
connect(size.height, (v: Double) => element.style.height = s"${v}px")
connect(visible, (b: Boolean) => element.style.visibility = if (b) "visible" else "hidden")
connect(opacity, (d: Double) => element.style.opacity = d.toString)
connect(background, (p: Paint) => element.style.background = p.asCSS())
if (this != ui) {
parent.attachAndFire {
@@ -45,10 +47,6 @@ trait HTMLComponent[E <: html.Element] extends Component {
}
}
protected def updateSizeFromElement(): Unit = {
size.measured.width := measuredWidth
size.measured.height := measuredHeight
}
override protected def measuredWidth: Double = element.offsetWidth // + margin.left() + margin.right()
override protected def measuredHeight: Double = element.offsetHeight // + margin.top() + margin.bottom()
}
@@ -43,4 +43,8 @@ object ui extends Container(document.body) {
AnimationFrame.delta.attach { d =>
update(d)
}
override protected def measuredWidth: Double = window.innerWidth
override protected def measuredHeight: Double = window.innerHeight
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,27 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1172.000000pt" height="1172.000000pt" viewBox="0 0 1172.000000 1172.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,1172.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2339 11716 c-2 -2 -33 -7 -69 -10 -59 -6 -133 -17 -215 -31 -269
-47 -631 -194 -880 -356 -250 -163 -430 -326 -634 -574 -83 -102 -207 -299
-284 -453 -84 -167 -181 -456 -211 -627 -3 -16 -8 -39 -10 -51 -2 -12 -7 -45
-11 -75 -4 -30 -11 -81 -15 -114 -10 -74 -8 -7140 2 -7174 4 -14 10 -45 13
-70 3 -25 7 -57 10 -71 3 -14 8 -38 11 -55 11 -65 57 -234 86 -320 50 -150
116 -296 207 -460 34 -59 168 -259 194 -287 12 -13 35 -42 51 -64 31 -40 253
-265 316 -319 282 -243 652 -433 1019 -525 157 -39 230 -52 376 -67 100 -10
7035 -10 7130 0 39 4 79 9 90 11 11 2 43 7 70 10 28 4 78 13 111 21 34 8 73
16 85 19 61 12 244 72 340 111 186 76 421 205 538 295 415 319 683 657 865
1092 59 141 124 349 141 448 3 19 10 58 15 85 11 55 16 94 27 200 4 39 8 1649
8 3580 0 2811 -3 3527 -13 3595 -7 47 -15 99 -17 115 -39 272 -165 614 -328
885 -188 315 -469 608 -784 821 -40 27 -75 49 -79 49 -4 0 -15 6 -23 14 -21
18 -221 122 -285 148 -254 103 -465 162 -656 184 -30 3 -75 10 -100 15 -43 8
-7082 13 -7091 5z"/>
</g>
</svg>
@@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Binary file not shown.

0 comments on commit 673507c

Please sign in to comment.