Advertisement
jaysicks

Untitled

Nov 24th, 2020
27
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import slinky.core._
  2. import slinky.core.annotations.react
  3. import slinky.core.facade.Hooks._
  4. import slinky.web.html._
  5. import rx._
  6. import slinky.core.facade.React
  7.  
  8. @react object MainAppFn {
  9.  
  10.   type Props = Unit
  11.   val component = FunctionalComponent[Props] { _ =>
  12.  
  13.     val (panelCount, setPanelCount) = useState(1)
  14.     val (links, setLinks) = useState(Map[Int, Int]())
  15.     val (currLink, setCurrLink) = useState(None: Option[Int])
  16.  
  17.     val outLinks = links.toList.groupBy(_._2).map { case (from, tos) => from -> tos.map(_._1) }
  18.  
  19.  
  20.     println(s"creating vars in main")
  21.     val numInputs = Var(-1 -> 0)
  22.     val nums = Var(-1 -> 0)
  23.     val obs = nums.trigger(n => println(s"Received $n"))
  24.     useEffect(() => () => obs.kill())
  25.  
  26.     nums.map { case (srcIdx, n) =>
  27.       outLinks.getOrElse(srcIdx, Nil).foreach(to => numInputs.update(to -> n))
  28.     }
  29.  
  30.     div(
  31.       div(onClick := (_ => setCurrLink(None)))("[",
  32.         currLink.map(lnk => s"Currently linking [$lnk] ... click here to cancel"), "]"
  33.       ),
  34.       div("[", links.toList.map { case (to, from) => span(s"$from -> $to, ") }, "]"),
  35.       (1 to panelCount).toList.map { idx =>
  36.         div(
  37.           button(onClick := (_ => currLink match {
  38.             case Some(lnk) if lnk != idx => setLinks(links + (idx -> lnk)); setCurrLink(None)
  39.             case Some(lnk) if lnk == idx => setLinks(links -- Set(idx)); setCurrLink(None)
  40.             case None => setCurrLink(Some(idx))
  41.           }))(idx, links.get(idx).map(x => s" <- $x")),
  42.           PanelFn(numInputs.filter(_._1 == idx).map(_._2), r => nums.update(idx -> r))
  43.         )
  44.       },
  45.       button(onClick := (_ => setPanelCount(panelCount + 1)))("[ADD PANEL]")
  46.     )
  47.   }
  48. }
  49. @react object PanelFn {
  50.   case class Props(inputStream: Rx[Int], onResultChange: Int => Unit)
  51.   val component = FunctionalComponent[Props] { props =>
  52.     println(s"creating panel")
  53.     val (op, setOp) = useState("ADD")
  54.     val (num1, setNum1) = useState(0)
  55.     val (num2, setNum2) = useState(0)
  56.  
  57.     val n1Ref = React.createRef[org.scalajs.dom.html.Input]
  58.     val n2Ref = React.createRef[org.scalajs.dom.html.Input]
  59.  
  60.     val fn: (Int, Int) => Int = op match {
  61.       case "ADD" => _ + _
  62.       case "MUL" => _ * _
  63.       case "POW" => Math.pow(_, _).toInt
  64.     }
  65.  
  66.     val result = fn(num1, num2)
  67.     useEffect(() => {
  68.       println(s"result updated [$result]")
  69.       props.onResultChange(result)
  70.     }, List(result))
  71.  
  72.  
  73.     val obs = props.inputStream.triggerLater { n =>
  74.       println(s"Setting num1 to [$n]")
  75.       setNum1(n)
  76.       Option(n1Ref.current).foreach(_.value = n.toString)
  77.     }
  78.     useEffect(() => () => obs.kill())
  79.  
  80.     val nextOp = Map("ADD" -> "MUL", "MUL" -> "POW", "POW" -> "ADD")
  81.  
  82.     def handleChange1() = {
  83.       val n = n1Ref.current.value.toIntOption.getOrElse(0)
  84.       println(s"Changed 1 : [$n]")
  85.       setNum1(n)
  86.     }
  87.     def handleChange2() = {
  88.       val n = n2Ref.current.value.toIntOption.getOrElse(0)
  89.       println(s"Changed 2: [$n]")
  90.       setNum2(n)
  91.     }
  92.  
  93.     div(
  94.       input(ref := n1Ref, onChange := (_ => handleChange1())),
  95.       span(onClick := (_ => setOp(nextOp(op))))(op),
  96.       input(ref := n2Ref, onChange := (_ => handleChange2())),
  97.       span(s" = $result")
  98.     )
  99.   }
  100. }
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement