Skip to content
Permalink
Browse files

Created Dim to represent a distinctive auto / manual numeric

Updated width and height to use NumberVar
Fixed sizing bug in ImageView
  • Loading branch information...
darkfrog26 committed Jul 31, 2019
1 parent aba9328 commit 7e950943c620d3a31651cfd86561ba1fbebad555
@@ -5,6 +5,7 @@ import io.youi.component.HTMLTextView
import io.youi.example.screen.UIExampleScreen
import io.youi.font.GoogleFont
import io.youi.net._
import io.youi.spatial.Dim
import io.youi.style.{Overflow, Position}
import reactify._

@@ -17,7 +18,7 @@ class ParallaxExample extends UIExampleScreen {

override def createUI(): Future[Unit] = GoogleFont.`Lobster`.load().map { fnt =>
register(ui.overflow.y, Overflow.Auto)
register(ui.size.height, 4000.px)
register(ui.size.height, Dim(4000))

val textView = new HTMLTextView {
value := s"Hello, World"
@@ -0,0 +1,21 @@
package io.youi.spatial

import reactify.Val

import scala.language.implicitConversions

case class Dim(value: Double, `type`: DimType = DimType.Manual) {
def +(d: Double): Double = value + d
def -(d: Double): Double = value - d
def *(d: Double): Double = value * d
def /(d: Double): Double = value / d
def ceil: Double = value.ceil
}

object Dim {
val Auto: Dim = Dim(0.0, DimType.Auto)

implicit def dim2Double(dim: Dim): Double = dim.value
implicit def double2Dim(value: Double): Dim = Dim(value)
implicit def val2Dim(v: Val[Double]): Dim = Dim(v())
}
@@ -0,0 +1,8 @@
package io.youi.spatial

sealed trait DimType

object DimType {
case object Auto extends DimType
case object Manual extends DimType
}
@@ -3,7 +3,9 @@ package io.youi.component
import io.youi.component.extras.HTMLComponent
import io.youi._
import io.youi.dom._
import io.youi.spatial.Size
import io.youi.theme.{HTMLTextViewTheme, Theme}
import io.youi.util.Measurer
import org.scalajs.dom._
import org.scalajs.dom.html.Input

@@ -16,6 +18,10 @@ class HTMLTextView(protected val element: html.Element,
override protected def defaultParentTheme: Theme = HTMLTextView

override def componentType: String = "HTMLTextView"

override protected def measure(s: Size): Size = {
Measurer.measure(element, s)
}
}

object HTMLTextView extends HTMLTextViewTheme {
@@ -16,7 +16,7 @@ class ImageView(implementation: ImageViewImplementation = HTMLImageViewImplement
override protected def defaultParentTheme: Theme = ImageView

lazy val image: StyleProp[Image] = {
val i = style[Image]("src", Image.empty, None)
val i = style[Image]("src", Image.empty, None, updatesTransform = true)
i.attach { img =>
implementation(this, img)
}
@@ -4,6 +4,8 @@ import io.youi.component.Component
import io.youi.spatial.Size
import reactify.{Val, Var}

import scala.language.implicitConversions

trait ComponentSize {
protected def component: Component

@@ -18,8 +20,8 @@ trait ComponentSize {
lazy val height: Var[Double] = Var(0.0)
}

lazy val width: Var[Double] = Var(0.0)
lazy val height: Var[Double] = Var(0.0)
lazy val width: NumberVar = new NumberVar
lazy val height: NumberVar = new NumberVar

lazy val center: Val[Double] = Val(width / 2.0)
lazy val middle: Val[Double] = Val(height / 2.0)
@@ -9,18 +9,10 @@ class HTMLComponentSize(override protected val component: Component) extends Com
private def e: html.Element = HTMLComponent.element(component)

width.attach { value =>
// if (value != measured.width()) {
e.style.width = s"${value.ceil}px"
// } else {
// e.style.removeProperty("width")
// }
e.style.width = s"${value.ceil}px"
}
height.attach { value =>
// if (value != measured.height()) {
e.style.height = s"${value.ceil}px"
// } else {
// e.style.removeProperty("height")
// }
e.style.height = s"${value.ceil}px"
}

object view {
@@ -0,0 +1,13 @@
package io.youi.component.extras

import io.youi.spatial.Dim
import reactify.Var.Mode
import reactify.standard.StandardVar

import scala.language.implicitConversions

class NumberVar extends StandardVar[Dim](Dim.Auto, Mode.Normal, None)

object NumberVar {
implicit def toDouble(v: NumberVar): Double = v.value
}
@@ -28,10 +28,10 @@ class RecycledScroller[T, C <: Component](perPage: Int, renderer: RecycledRender

// TODO: create "scroll" in gestures
event.pointer.wheel.attach { evt =>
val delta = if (evt.delta.y > middle.size.height()) {
middle.size.height()
val delta: Double = if (evt.delta.y > middle.size.height()) {
middle.size.height
} else if (evt.delta.y < -middle.size.height()) {
-middle.size.height()
-middle.size.height
} else {
evt.delta.y
}
@@ -24,7 +24,7 @@ class ReversedVerticalLayout(spacing: Double = 0.0) extends Layout {
Snap(c).verticalReset()
}
items.filter(c => c.visible() && c.includeInLayout()).foldLeft(Option.empty[Component])((previous, current) => {
Snap(current).verticalReset().bottomTo(previous.map(_.position.top()).getOrElse(container.size.height()) - spacing)
Snap(current).verticalReset().bottomTo(previous.map(_.position.top()).getOrElse(container.size.height.value) - spacing)
Some(current)
})
}
@@ -16,9 +16,9 @@ object Measurer {
span
}

def measure(element: html.Element): Size = measure(element.outerHTML)
def measure(element: html.Element, size: Size = Size.zero): Size = measureHTML(element.outerHTML, size)

def measure(htmlString: String): Size = {
def measureHTML(htmlString: String, size: Size = Size.zero): Size = {
container.innerHTML = htmlString
val e = container.firstElementChild.asInstanceOf[html.Element]
e.style.width = "auto"
@@ -28,6 +28,6 @@ object Measurer {
e.style.visibility = "hidden"

val bounding = e.getBoundingClientRect()
Size(bounding.width, bounding.height)
size.set(bounding.width, bounding.height)
}
}

0 comments on commit 7e95094

Please sign in to comment.
You can’t perform that action at this time.