JarCastingslinky-bridge-react-konva
react-konva bridge for slinky
This bridge is developed for my own purpose. There is a lot of missing but I'm doing my best. If you need something special contact me.
showcase / demo
See the showcase here: react-konva-showcase (live app on heroku)
what do we have
supported
- all tutorial's shapes
- all events
- animations
missing
- filters
- Transformer
- probably more (contact me)
chunk of example build.sbt
lazy val jsSettings = Seq(
libraryDependencies ++= Seq(
"me.shadaj" %%% "slinky-web" % "0.6.4",
"com.github.oen9" %%% "slinky-bridge-react-konva" % "0.1.1"
),
npmDependencies in Compile ++= Seq(
"react" -> "16.13.0",
"react-dom" -> "16.13.0",
"konva" -> "4.2.2",
"react-konva" -> "16.12.0-0"
),
scalaJSUseMainModuleInitializer := true,
version.in(webpack) := "4.42.1",
webpackBundlingMode := BundlingMode.Application,
webpackBundlingMode.in(fastOptJS) := BundlingMode.LibraryOnly(),
)
tested with
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.0.1")
scalaVersion := "2.13.1
how to use
import com.github.oen9.slinky.bridge.reactkonva._
div(className := "card-body",
Stage(width = 800, height = 600)(
Layer(
Text(text = "Hello world!"),
Text(text = "try drag and drop --> ", x = 50, y = 260, fontSize = 18),
Circle(x = 290, y = 290, radius = 50, stroke = "blue", strokeWidth = 5, draggable = true)
)
)
)
import com.github.oen9.slinky.bridge.konva.Konva
import com.github.oen9.slinky.bridge.konva.Konva.KonvaEventObject
import com.github.oen9.slinky.bridge.reactkonva.Rect
import org.scalajs.dom.raw.MouseEvent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.FunctionalComponent
import slinky.web.html._
@react object ColoredRect {
type Props = Unit
val component = FunctionalComponent[Props] { _ =>
val (color, setColor) = useState("navy")
def handleClick(e: KonvaEventObject[MouseEvent]): Unit = {
setColor(Konva.Util.getRandomColor())
}
Rect(
x = 20,
y = 20,
width = 50,
height = 50,
fill = color,
shadowBlur = 5,
onClick = handleClick _
)
}
}