OutWatch/Lobby

johannes karoff

@cornerman

@PerWiklander Never did that, but I guess using akka streams and actors in outwatch should be quite straight forward. We have a typeclass Source and a typeclass Sink. You should be able to implement them with Stream and Actor respectively. Then you can use them in the outwatch dsl.

Sait Sami Kocataş

@Deliganli

hi everyone, how could I use a canvas, update it with observable (or fs2.Stream)?

johannes karoff

@cornerman

Hi there, what exactly do you want to do with the canvas? They are a bit tricky. I did this to be able to paint a chart inside of it:

    canvas(
      managedElement { elem =>
        val context = elem.asInstanceOf[dom.html.Canvas].getContext("2d").asInstanceOf[org.scalajs.dom.raw.CanvasRenderingContext2D]
        // do something with context

        cancelable(() => /*destroy something*/)
      }
    )

Does that help?

Sait Sami Kocataş

@Deliganli

thanks @cornerman I will try it out when possible :)
I was gonna draw some circles and update their position etc based on an event stream, thinking to do this in a canvas. I have no idea how frontend works honestly, just trying out.

elyphas

@elyphas

Hi, is there a way to not trigger an event when the app start? in this code:

  def getId = ( hdlFiscalPeriod: Observable[Int], hdlFolio: Observable[String])
        .parMapN { case (fiscal_period: Int, folio: String) => (fiscal_period,  folio) }

onInput
            .value
            .debounce(800 milliseconds)
            .transformLifted{ e: Observable[String] =>
              e
                .distinctUntilChanged
                .debounce(800 milliseconds)
                .withLatestFrom(getId) {case (txt@_, idCreditStoreDocument) =>
                    println("#################################")
                    idCreditStoreDocument
                }
} --> repo.eventListItems

The problem I have is that repo.eventListItems is making the query but with one data and I need two.
I tried filter after debounce but it is ignore
I have two inputs and one is by default.
year and number the year is by default so this is year is triggering the event. at the start of the app.

Felix Dietze

@fdietze

:tada: I finally found the time to update the readme and website of outwatch: https://github.com/outwatch/outwatch and https://outwatch.github.io/docs/readme.html
Let me know what you think :)

moritz bust

@busti

Cheers :tada:

moritz bust

@busti

@fdietze The examples look really good

Felix Dietze

@fdietze

Thank you :)

ioleo

@ioleo

Hi, I'm need an event handler to access the elemet's scrollTop position, but can't figure out how. I've tried:

import outwatch._
import outwatch.dsl._
import org.scalajs.dom.raw.HTMLElement
import zio.Task
import zio.interop.catz._

object Header {
  def apply(): HtmlVNode = {
    val logo = Task {
      val isDetached = events.document.onScroll.map { e =>
        val scrollTop = e.target.asInstanceOf[HTMLElement].scrollTop
        println(s"top dist = $scrollTop")
        if (scrollTop > 50) "detached" else "attached"
      }.debounceMillis(250)

      div(
       // ...
         className <- isDetached
       )
    }
    div(logo)
  }
}

ioleo

@ioleo

However it throws at runtime. I guess the asInstanceOf is wrong. What would be the correct way?

ioleo

@ioleo

Alright I see now why it fails e.target is actually HTMLDocument.

ioleo

@ioleo

For future reference, the solution is:


    val fixedOnScroll = events.document.onScroll.debounceMillis(100).map { e =>
      val documentElement = e.target.asInstanceOf[HTMLDocument]
      val scrollDistance = documentElement.documentElement.scrollTop
      if (scrollDistance > 50) VDomModifier(position.fixed, left := "50%", marginLeft := "-250px")
      else VDomModifier(position.relative, left := "auto", marginLeft := "auto")
    }

    div(
      // ...
      fixedOnScroll
    )

moritz bust

@busti

Glad to hear that you found a solution.

Aleksandr

@steakoverflow-me

Hello to all!

Hi, I'm need an event handler to access the elemet's scrollTop position, but can't figure out how. I've tried:

import outwatch._
import outwatch.dsl._
import org.scalajs.dom.raw.HTMLElement
import zio.Task
import zio.interop.catz._

object Header {
  def apply(): HtmlVNode = {
    val logo = Task {
      val isDetached = events.document.onScroll.map { e =>
        val scrollTop = e.target.asInstanceOf[HTMLElement].scrollTop
        println(s"top dist = $scrollTop")
        if (scrollTop > 50) "detached" else "attached"
      }.debounceMillis(250)

      div(
       // ...
         className <- isDetached
       )
    }
    div(logo)
  }
}

I can't get how you made it to work? I mean div(logo) when logo is the zio.Task. For me there is a error like

Found: (logo : zio.Task[outwatch.HtmlVNode]) 
Required: outwatch.VDomModifier

Felix Dietze

@fdietze

@steakoverflow-me I think ZIO Task is not supported yet. Use IO or Monix Task instead. @cornerman used to work on ZIO support, but it's not merged yet: outwatch/outwatch#442

johannes karoff

@cornerman

You should be able to use https://github.com/zio/interop-cats, because it gives you an Effect instance for zio tasks. You get this implicit via the import: import zio.interop.catz._. Though you need an implicit runtime in the scope.
As @fdietze pointed out, we are currently working on a better zio support in the PR, but i think, it might need some more time to be merged. Until then interop-cats is the way to go.

@steakoverflow-me ^

moritz bust

@busti

I can confirm what @cornerman said about the implicit runtime. I have been toying around with zio for some time now aswell and it works quite well with outwatch.
Try adding this like to your scope for example:
implicit def runtime = Runtime.default
Not the purest thing, but it does the job for getting started.

moritz bust

@busti

@cornerman I have made some progress implementing what I was talking about recently.
Please take a look at https://github.com/busti/hummingbird
I have started implementing the concept into outwatch on this branch: https://github.com/busti/outwatch/tree/integrate_hummingbird

Unfortunately my current implementation is flawed. Since using the library requires passing around instances of the base trait and not implementations of it, there will be instances of them at every call. Value-Classes don't work in this case.

I will probably try to refactor what I have so far to remove that limitation.
But what do you think of the general idea and of how the interface is designed?

bblfish

@bblfish:matrix.org

Where communities thrive

People

Repo info

Activity