kscience/visionforge
8
1
Fork 1
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add plain html input renderer

Browse Source
This commit is contained in:
Alexander Nozik 2023-12-02 23:07:00 +03:00
parent 7561ddad36
commit c877fcbce3
2 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/JsVisionClient.kt
View File

@ -264,6 +264,7 @@ public class JsVisionClient : AbstractPlugin(), VisionClient {
override fun content(target: String): Map<Name, Any> = if (target == ElementVisionRenderer.TYPE) { override fun content(target: String): Map<Name, Any> = if (target == ElementVisionRenderer.TYPE) {
listOf( listOf(
htmlVisionRenderer,
inputVisionRenderer, inputVisionRenderer,
checkboxVisionRenderer, checkboxVisionRenderer,
numberVisionRenderer, numberVisionRenderer,

71
visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/inputRenderers.kt
View File

@ -2,6 +2,7 @@ package space.kscience.visionforge
import kotlinx.browser.document import kotlinx.browser.document
import kotlinx.html.InputType import kotlinx.html.InputType
import kotlinx.html.div
import kotlinx.html.js.input import kotlinx.html.js.input
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLFormElement import org.w3c.dom.HTMLFormElement
@ -38,26 +39,36 @@ private fun HTMLInputElement.subscribeToInput(inputVision: VisionOfHtmlInput) {
} }
} }
internal val htmlVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfPlainHtml> { _, vision, _ ->
div {}.also { div ->
div.subscribeToVision(vision)
vision.useProperty(VisionOfPlainHtml::content) {
div.textContent = it
}
}
}
internal val inputVisionRenderer: ElementVisionRenderer = internal val inputVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfHtmlInput>(acceptRating = ElementVisionRenderer.DEFAULT_RATING - 1) { _, vision, _ -> ElementVisionRenderer<VisionOfHtmlInput>(acceptRating = ElementVisionRenderer.DEFAULT_RATING - 1) { _, vision, _ ->
input { input {
type = InputType.text type = InputType.text
}.apply { }.also { htmlInputElement ->
val onEvent: (Event) -> Unit = { val onEvent: (Event) -> Unit = {
vision.value = value.asValue() vision.value = htmlInputElement.value.asValue()
} }
when (vision.feedbackMode) { when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
InputFeedbackMode.ONINPUT -> oninput = onEvent InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {} InputFeedbackMode.NONE -> {}
} }
subscribeToInput(vision) htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfHtmlInput::value) { vision.useProperty(VisionOfHtmlInput::value) {
this@apply.value = it?.string ?: "" htmlInputElement.value = it?.string ?: ""
} }
} }
} }
@ -66,22 +77,22 @@ internal val checkboxVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfCheckbox> { _, vision, _ -> ElementVisionRenderer<VisionOfCheckbox> { _, vision, _ ->
input { input {
type = InputType.checkBox type = InputType.checkBox
}.apply { }.also { htmlInputElement ->
val onEvent: (Event) -> Unit = { val onEvent: (Event) -> Unit = {
vision.checked = checked vision.checked = htmlInputElement.checked
} }
when (vision.feedbackMode) { when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
InputFeedbackMode.ONINPUT -> oninput = onEvent InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {} InputFeedbackMode.NONE -> {}
} }
subscribeToInput(vision) htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfCheckbox::checked) { vision.useProperty(VisionOfCheckbox::checked) {
this@apply.checked = it ?: false htmlInputElement.checked = it ?: false
} }
} }
} }
@ -90,22 +101,22 @@ internal val textVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfTextField> { _, vision, _ -> ElementVisionRenderer<VisionOfTextField> { _, vision, _ ->
input { input {
type = InputType.text type = InputType.text
}.apply { }.also { htmlInputElement ->
val onEvent: (Event) -> Unit = { val onEvent: (Event) -> Unit = {
vision.text = value vision.text = htmlInputElement.value
} }
when (vision.feedbackMode) { when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
InputFeedbackMode.ONINPUT -> oninput = onEvent InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {} InputFeedbackMode.NONE -> {}
} }
subscribeToInput(vision) htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfTextField::text) { vision.useProperty(VisionOfTextField::text) {
this@apply.value = it ?: "" htmlInputElement.value = it ?: ""
} }
} }
} }
@ -114,21 +125,21 @@ internal val numberVisionRenderer: ElementVisionRenderer =
ElementVisionRenderer<VisionOfNumberField> { _, vision, _ -> ElementVisionRenderer<VisionOfNumberField> { _, vision, _ ->
input { input {
type = InputType.text type = InputType.text
}.apply { }.also { htmlInputElement ->
val onEvent: (Event) -> Unit = { val onEvent: (Event) -> Unit = {
value.toDoubleOrNull()?.let { vision.number = it } htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
} }
when (vision.feedbackMode) { when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
InputFeedbackMode.ONINPUT -> oninput = onEvent InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {} InputFeedbackMode.NONE -> {}
} }
subscribeToInput(vision) htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfNumberField::value) { vision.useProperty(VisionOfNumberField::value) {
this@apply.valueAsNumber = it?.double ?: 0.0 htmlInputElement.valueAsNumber = it?.double ?: 0.0
} }
} }
} }
@ -140,21 +151,21 @@ internal val rangeVisionRenderer: ElementVisionRenderer =
min = vision.min.toString() min = vision.min.toString()
max = vision.max.toString() max = vision.max.toString()
step = vision.step.toString() step = vision.step.toString()
}.apply { }.also { htmlInputElement ->
val onEvent: (Event) -> Unit = { val onEvent: (Event) -> Unit = {
value.toDoubleOrNull()?.let { vision.number = it } htmlInputElement.value.toDoubleOrNull()?.let { vision.number = it }
} }
when (vision.feedbackMode) { when (vision.feedbackMode) {
InputFeedbackMode.ONCHANGE -> onchange = onEvent InputFeedbackMode.ONCHANGE -> htmlInputElement.onchange = onEvent
InputFeedbackMode.ONINPUT -> oninput = onEvent InputFeedbackMode.ONINPUT -> htmlInputElement.oninput = onEvent
InputFeedbackMode.NONE -> {} InputFeedbackMode.NONE -> {}
} }
subscribeToInput(vision) htmlInputElement.subscribeToInput(vision)
vision.useProperty(VisionOfRangeField::value) { vision.useProperty(VisionOfRangeField::value) {
this@apply.valueAsNumber = it?.double ?: 0.0 htmlInputElement.valueAsNumber = it?.double ?: 0.0
} }
} }
} }