Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-06 08:08:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added TextArea, Menu and Select. Added some fields to InfoWidget and added the server select widget.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-10-30 21:42:29 +01:00
parent e6d6f292f4
commit c028c09ac9
36 changed files with 729 additions and 110 deletions

2
observable/src/commonMain/kotlin/world/phantasmal/observable/value/DependentVal.kt
View File

@ -7,7 +7,7 @@ import world.phantasmal.core.unsafeToNonNull
/**
* Starts observing its dependencies when the first observer on this val is registered. Stops
* observing its dependencies when the last observer on this val is disposed. This way no extra
* disposables need to be managed when e.g. [transform] is used.
* disposables need to be managed when e.g. [map] is used.
*/
abstract class DependentVal<T>(
private val dependencies: Iterable<Val<*>>,

2
observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt → observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatMappedVal.kt
View File

@ -4,7 +4,7 @@ import world.phantasmal.core.disposable.Disposable
import world.phantasmal.core.disposable.disposable
import world.phantasmal.core.unsafeToNonNull
class FlatTransformedVal<T>(
class FlatMappedVal<T>(
dependencies: Iterable<Val<*>>,
private val compute: () -> Val<T>,
) : DependentVal<T>(dependencies) {

2
observable/src/commonMain/kotlin/world/phantasmal/observable/value/TransformedVal.kt → observable/src/commonMain/kotlin/world/phantasmal/observable/value/MappedVal.kt
View File

@ -1,6 +1,6 @@
package world.phantasmal.observable.value
class TransformedVal<T>(
class MappedVal<T>(
dependencies: Iterable<Val<*>>,
private val compute: () -> T,
) : DependentVal<T>(dependencies) {

12
observable/src/commonMain/kotlin/world/phantasmal/observable/value/Val.kt
View File

@ -17,12 +17,12 @@ interface Val<out T> : Observable<T> {
*/
fun observe(callNow: Boolean = false, observer: ValObserver<T>): Disposable
fun <R> transform(transform: (T) -> R): Val<R> =
TransformedVal(listOf(this)) { transform(value) }
fun <R> map(transform: (T) -> R): Val<R> =
MappedVal(listOf(this)) { transform(value) }
fun <T2, R> transform(v2: Val<T2>, transform: (T, T2) -> R): Val<R> =
TransformedVal(listOf(this, v2)) { transform(value, v2.value) }
fun <T2, R> map(v2: Val<T2>, transform: (T, T2) -> R): Val<R> =
MappedVal(listOf(this, v2)) { transform(value, v2.value) }
fun <R> flatTransform(transform: (T) -> Val<R>): Val<R> =
FlatTransformedVal(listOf(this)) { transform(value) }
fun <R> flatMap(transform: (T) -> Val<R>): Val<R> =
FlatMappedVal(listOf(this)) { transform(value) }
}

8
observable/src/commonMain/kotlin/world/phantasmal/observable/value/ValExtensions.kt
View File

@ -1,13 +1,13 @@
package world.phantasmal.observable.value
infix fun Val<Boolean>.and(other: Val<Boolean>): Val<Boolean> =
transform(other) { a, b -> a && b }
map(other) { a, b -> a && b }
infix fun Val<Boolean>.or(other: Val<Boolean>): Val<Boolean> =
transform(other) { a, b -> a || b }
map(other) { a, b -> a || b }
// Use != because of https://youtrack.jetbrains.com/issue/KT-31277.
infix fun Val<Boolean>.xor(other: Val<Boolean>): Val<Boolean> =
transform(other) { a, b -> a != b }
map(other) { a, b -> a != b }
operator fun Val<Boolean>.not(): Val<Boolean> = transform { !it }
operator fun Val<Boolean>.not(): Val<Boolean> = map { !it }

2
observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/ListVal.kt
View File

@ -3,7 +3,7 @@ package world.phantasmal.observable.value.list
import world.phantasmal.core.disposable.Disposable
import world.phantasmal.observable.value.Val
interface ListVal<E> : Val<List<E>>, List<E> {
interface ListVal<E> : Val<List<E>> {
val sizeVal: Val<Int>
fun observeList(observer: ListValObserver<E>): Disposable

15
observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/MutableListVal.kt
View File

@ -1,8 +1,17 @@
package world.phantasmal.observable.value.list
import world.phantasmal.observable.value.MutableVal
import kotlin.reflect.KProperty
interface MutableListVal<E> : ListVal<E>, MutableVal<List<E>>, MutableList<E> {
override operator fun getValue(thisRef: Any?, property: KProperty<*>): MutableList<E> = this
interface MutableListVal<E> : ListVal<E>, MutableVal<List<E>> {
fun set(index: Int, element: E): E
fun add(element: E)
fun add(index: Int, element: E)
fun removeAt(index: Int): E
fun replaceAll(elements: Sequence<E>)
fun clear()
}

25
observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/SimpleListVal.kt
View File

@ -15,7 +15,7 @@ class SimpleListVal<E>(
* will be propagated via ElementChange events.
*/
private val extractObservables: ObservablesExtractor<E>? = null,
) : AbstractMutableList<E>(), MutableListVal<E> {
) : MutableListVal<E> {
override var value: List<E> = elements
set(value) {
val removed = ArrayList(elements)
@ -34,8 +34,6 @@ class SimpleListVal<E>(
override val sizeVal: Val<Int> = mutableSizeVal
override val size: Int by sizeVal
/**
* Internal observers which observe observables related to this list's elements so that their
* changes can be propagated via ElementChange events.
@ -52,14 +50,18 @@ class SimpleListVal<E>(
*/
private val observers = mutableListOf<ValObserver<List<E>>>()
override fun get(index: Int): E = elements[index]
override fun set(index: Int, element: E): E {
val removed = elements.set(index, element)
finalizeUpdate(ListValChangeEvent.Change(index, listOf(removed), listOf(element)))
return removed
}
override fun add(element: E) {
val index = elements.size
elements.add(element)
finalizeUpdate(ListValChangeEvent.Change(index, emptyList(), listOf(element)))
}
override fun add(index: Int, element: E) {
elements.add(index, element)
finalizeUpdate(ListValChangeEvent.Change(index, emptyList(), listOf(element)))
@ -71,6 +73,19 @@ class SimpleListVal<E>(
return removed
}
override fun replaceAll(elements: Sequence<E>) {
val removed = ArrayList(this.elements)
this.elements.clear()
this.elements.addAll(elements)
finalizeUpdate(ListValChangeEvent.Change(0, removed, this.elements))
}
override fun clear() {
val removed = ArrayList(elements)
elements.clear()
finalizeUpdate(ListValChangeEvent.Change(0, removed, emptyList()))
}
override fun observe(observer: Observer<List<E>>): Disposable =
observe(callNow = false, observer)

10
observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt → observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatMappedValDependentValEmitsTests.kt
View File

@ -5,9 +5,9 @@ import kotlin.test.assertEquals
import kotlin.test.assertNull
/**
* In these tests the direct dependency of the [FlatTransformedVal] changes.
* In these tests the direct dependency of the [FlatMappedVal] changes.
*/
class FlatTransformedValDependentValEmitsTests : RegularValTests() {
class FlatMappedValDependentValEmitsTests : RegularValTests() {
/**
* This is a regression test, it's important that this exact sequence of statements stays the
* same.
@ -15,7 +15,7 @@ class FlatTransformedValDependentValEmitsTests : RegularValTests() {
@Test
fun emits_a_change_when_its_direct_val_dependency_changes() = test {
val v = SimpleVal(SimpleVal(7))
val fv = FlatTransformedVal(listOf(v)) { v.value }
val fv = FlatMappedVal(listOf(v)) { v.value }
var observedValue: Int? = null
disposer.add(
@ -35,13 +35,13 @@ class FlatTransformedValDependentValEmitsTests : RegularValTests() {
override fun create(): ValAndEmit<*> {
val v = SimpleVal(SimpleVal(5))
val value = FlatTransformedVal(listOf(v)) { v.value }
val value = FlatMappedVal(listOf(v)) { v.value }
return ValAndEmit(value) { v.value = SimpleVal(v.value.value + 5) }
}
override fun createBoolean(bool: Boolean): ValAndEmit<Boolean> {
val v = SimpleVal(SimpleVal(bool))
val value = FlatTransformedVal(listOf(v)) { v.value }
val value = FlatMappedVal(listOf(v)) { v.value }
return ValAndEmit(value) { v.value = SimpleVal(!v.value.value) }
}
}

8
observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValNestedValEmitsTests.kt → observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatMappedValNestedValEmitsTests.kt
View File

@ -1,18 +1,18 @@
package world.phantasmal.observable.value
/**
* In these tests the dependency of the [FlatTransformedVal]'s direct dependency changes.
* In these tests the dependency of the [FlatMappedVal]'s direct dependency changes.
*/
class FlatTransformedValNestedValEmitsTests : RegularValTests() {
class FlatMappedValNestedValEmitsTests : RegularValTests() {
override fun create(): ValAndEmit<*> {
val v = SimpleVal(SimpleVal(5))
val value = FlatTransformedVal(listOf(v)) { v.value }
val value = FlatMappedVal(listOf(v)) { v.value }
return ValAndEmit(value) { v.value.value += 5 }
}
override fun createBoolean(bool: Boolean): ValAndEmit<Boolean> {
val v = SimpleVal(SimpleVal(bool))
val value = FlatTransformedVal(listOf(v)) { v.value }
val value = FlatMappedVal(listOf(v)) { v.value }
return ValAndEmit(value) { v.value.value = !v.value.value }
}
}

6
observable/src/commonTest/kotlin/world/phantasmal/observable/value/TransformedValTests.kt → observable/src/commonTest/kotlin/world/phantasmal/observable/value/MappedValTests.kt
View File

@ -1,15 +1,15 @@
package world.phantasmal.observable.value
class TransformedValTests : RegularValTests() {
class MappedValTests : RegularValTests() {
override fun create(): ValAndEmit<*> {
val v = SimpleVal(0)
val value = TransformedVal(listOf(v)) { 2 * v.value }
val value = MappedVal(listOf(v)) { 2 * v.value }
return ValAndEmit(value) { v.value += 2 }
}
override fun createBoolean(bool: Boolean): ValAndEmit<Boolean> {
val v = SimpleVal(bool)
val value = TransformedVal(listOf(v)) { v.value }
val value = MappedVal(listOf(v)) { v.value }
return ValAndEmit(value) { v.value = !v.value }
}
}

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt
View File

@ -15,7 +15,7 @@ abstract class ListValTests : ValTests() {
@Test
fun listVal_updates_sizeVal_correctly() = test {
val (list: List<*>, add) = create()
val (list: ListVal<*>, add) = create()
assertEquals(0, list.sizeVal.value)

37
web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt
View File

@ -2,12 +2,16 @@ package world.phantasmal.web.application.widgets
import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.Node
import world.phantasmal.observable.value.trueVal
import world.phantasmal.web.application.controllers.NavigationController
import world.phantasmal.webui.dom.div
import world.phantasmal.webui.widgets.Select
import world.phantasmal.webui.widgets.Widget
class NavigationWidget(scope: CoroutineScope, private val ctrl: NavigationController) :
Widget(scope) {
class NavigationWidget(
scope: CoroutineScope,
private val ctrl: NavigationController,
) : Widget(scope) {
override fun Node.createElement() =
div {
className = "pw-application-navigation"
@ -15,6 +19,24 @@ class NavigationWidget(scope: CoroutineScope, private val ctrl: NavigationContro
ctrl.tools.forEach { (tool, active) ->
addChild(PwToolButton(scope, tool, active) { ctrl.setCurrentTool(tool) })
}
div {
className = "pw-application-navigation-spacer"
}
div {
className = "pw-application-navigation-right"
val serverSelect = Select(
scope,
disabled = trueVal(),
label = "Server:",
items = listOf("Ephinea"),
selected = "Ephinea",
tooltip = "Only Ephinea is supported at the moment",
)
addWidget(serverSelect.label!!)
addChild(serverSelect)
}
}
companion object {
@ -35,18 +57,13 @@ class NavigationWidget(scope: CoroutineScope, private val ctrl: NavigationContro
flex-grow: 1;
}
.pw-application-navigation-server {
.pw-application-navigation-right {
display: flex;
align-items: center;
}
.pw-application-navigation-server > * {
margin: 0 2px;
}
.pw-application-navigation-time {
display: flex;
align-items: center;
.pw-application-navigation-right > * {
margin: 1px 2px;
}
.pw-application-navigation-github {

2
web/src/main/kotlin/world/phantasmal/web/core/stores/UiStore.kt
View File

@ -81,7 +81,7 @@ class UiStore(scope: CoroutineScope, private val applicationUrl: ApplicationUrl)
toolToActive = tools
.map { tool ->
tool to currentTool.transform { it == tool }
tool to currentTool.map { it == tool }
}
.toMap()

6
web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt
View File

@ -4,7 +4,7 @@ import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.Node
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
import world.phantasmal.web.core.newJsObject
import world.phantasmal.webui.newJsObject
import world.phantasmal.web.externals.GoldenLayout
import world.phantasmal.webui.dom.div
import world.phantasmal.webui.widgets.Widget
@ -84,7 +84,9 @@ class DockWidget(
idToCreate.forEach { (id, create) ->
goldenLayout.registerComponent(id) { container: GoldenLayout.Container ->
val node = container.getElement()[0] as Node
node.addChild(create(scope))
val widget = create(scope)
node.addChild(widget)
widget.focus()
}
}

2
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/models/HuntMethodModel.kt
View File

@ -26,7 +26,7 @@ class HuntMethodModel(
*/
val userTime: Val<Duration?> = _userTime
val time: Val<Duration> = userTime.transform { it ?: defaultTime }
val time: Val<Duration> = userTime.map { it ?: defaultTime }
fun setUserTime(userTime: Duration?): HuntMethodModel {
_userTime.value = userTime

4
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/stores/HuntMethodStore.kt
View File

@ -93,9 +93,7 @@ class HuntMethodStore(
}
withContext(UiDispatcher) {
// TODO: Add more performant replaceAll method.
_methods.clear()
_methods.addAll(methods)
_methods.replaceAll(methods)
}
}
}

14
web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt
View File

@ -7,8 +7,14 @@ import world.phantasmal.web.questEditor.stores.QuestEditorStore
import world.phantasmal.webui.controllers.Controller
class QuestInfoController(scope: CoroutineScope, store: QuestEditorStore) : Controller(scope) {
val unavailable = store.currentQuest.transform { it == null }
val episode: Val<String> = store.currentQuest.transform { it?.episode?.name ?: "" }
val id: Val<Int> = store.currentQuest.flatTransform { it?.id ?: value(0) }
val name: Val<String> = store.currentQuest.flatTransform { it?.name ?: value("") }
val unavailable: Val<Boolean> = store.currentQuest.map { it == null }
val disabled: Val<Boolean> = store.questEditingDisabled
val episode: Val<String> = store.currentQuest.map { it?.episode?.name ?: "" }
val id: Val<Int> = store.currentQuest.flatMap { it?.id ?: value(0) }
val name: Val<String> = store.currentQuest.flatMap { it?.name ?: value("") }
val shortDescription: Val<String> =
store.currentQuest.flatMap { it?.shortDescription ?: value("") }
val longDescription: Val<String> =
store.currentQuest.flatMap { it?.longDescription ?: value("") }
}

2
web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/QuestRenderer.kt
View File

@ -1,7 +1,7 @@
package world.phantasmal.web.questEditor.rendering
import org.w3c.dom.HTMLCanvasElement
import world.phantasmal.web.core.newJsObject
import world.phantasmal.webui.newJsObject
import world.phantasmal.web.core.rendering.Renderer
import world.phantasmal.web.externals.*
import kotlin.math.PI

3
web/src/main/kotlin/world/phantasmal/web/questEditor/stores/QuestEditorStore.kt
View File

@ -11,6 +11,9 @@ class QuestEditorStore(scope: CoroutineScope) : Store(scope) {
val currentQuest: Val<QuestModel?> = _currentQuest
// TODO: Take into account whether we're debugging or not.
val questEditingDisabled: Val<Boolean> = currentQuest.map { it == null }
fun setCurrentQuest(quest: QuestModel?) {
_currentQuest.value = quest
}

49
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt
View File

@ -7,13 +7,14 @@ import world.phantasmal.web.core.widgets.UnavailableWidget
import world.phantasmal.web.questEditor.controllers.QuestInfoController
import world.phantasmal.webui.dom.*
import world.phantasmal.webui.widgets.IntInput
import world.phantasmal.webui.widgets.TextArea
import world.phantasmal.webui.widgets.TextInput
import world.phantasmal.webui.widgets.Widget
class QuestInfoWidget(
scope: CoroutineScope,
private val ctrl: QuestInfoController,
) : Widget(scope) {
) : Widget(scope, disabled = ctrl.disabled) {
override fun Node.createElement() =
div {
className = "pw-quest-editor-quest-info"
@ -31,9 +32,10 @@ class QuestInfoWidget(
td {
addChild(IntInput(
this@QuestInfoWidget.scope,
disabled = ctrl.disabled,
valueVal = ctrl.id,
min = 0,
step = 1
step = 1,
))
}
}
@ -42,8 +44,49 @@ class QuestInfoWidget(
td {
addChild(TextInput(
this@QuestInfoWidget.scope,
disabled = ctrl.disabled,
valueVal = ctrl.name,
maxLength = 32
maxLength = 32,
))
}
}
tr {
th {
colSpan = 2
textContent = "Short description:"
}
}
tr {
td {
colSpan = 2
addChild(TextArea(
this@QuestInfoWidget.scope,
disabled = ctrl.disabled,
valueVal = ctrl.shortDescription,
maxLength = 128,
fontFamily = "\"Courier New\", monospace",
cols = 25,
rows = 5,
))
}
}
tr {
th {
colSpan = 2
textContent = "Long description:"
}
}
tr {
td {
colSpan = 2
addChild(TextArea(
this@QuestInfoWidget.scope,
disabled = ctrl.disabled,
valueVal = ctrl.longDescription,
maxLength = 288,
fontFamily = "\"Courier New\", monospace",
cols = 25,
rows = 10,
))
}
}

2
web/src/main/kotlin/world/phantasmal/web/core/Js.kt → webui/src/main/kotlin/world/phantasmal/webui/Js.kt
View File

@ -1,4 +1,4 @@
package world.phantasmal.web.core
package world.phantasmal.webui
fun <T> newJsObject(block: T.() -> Unit): T =
js("{}").unsafeCast<T>().apply(block)

3
webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt
View File

@ -51,6 +51,9 @@ fun Node.table(block: HTMLTableElement.() -> Unit = {}): HTMLTableElement =
fun Node.td(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement =
appendHtmlEl("TD", block)
fun Node.textarea(block: HTMLTextAreaElement.() -> Unit = {}): HTMLTextAreaElement =
appendHtmlEl("TEXTAREA", block)
fun Node.th(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement =
appendHtmlEl("TH", block)

15
webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt
View File

@ -2,6 +2,7 @@ package world.phantasmal.webui.widgets
import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.Node
import org.w3c.dom.events.KeyboardEvent
import org.w3c.dom.events.MouseEvent
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
@ -14,12 +15,22 @@ open class Button(
disabled: Val<Boolean> = falseVal(),
private val text: String? = null,
private val textVal: Val<String>? = null,
private val onclick: ((MouseEvent) -> Unit)? = null,
private val onMouseDown: ((MouseEvent) -> Unit)? = null,
private val onMouseUp: ((MouseEvent) -> Unit)? = null,
private val onClick: ((MouseEvent) -> Unit)? = null,
private val onKeyDown: ((KeyboardEvent) -> Unit)? = null,
private val onKeyUp: ((KeyboardEvent) -> Unit)? = null,
private val onKeyPress: ((KeyboardEvent) -> Unit)? = null,
) : Control(scope, hidden, disabled) {
override fun Node.createElement() =
button {
className = "pw-button"
onclick = this@Button.onclick
onmousedown = onMouseDown
onmouseup = onMouseUp
onclick = onClick
onkeydown = onKeyDown
onkeyup = onKeyUp
onkeypress = onKeyPress
span {
className = "pw-button-inner"

3
webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt
View File

@ -12,4 +12,5 @@ abstract class Control(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
) : Widget(scope, hidden, disabled)
tooltip: String? = null,
) : Widget(scope, hidden, disabled, tooltip)

6
webui/src/main/kotlin/world/phantasmal/webui/widgets/DoubleInput.kt
View File

@ -11,23 +11,25 @@ class DoubleInput(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
value: Double? = null,
valueVal: Val<Double>? = null,
setValue: ((Double) -> Unit)? = null,
onChange: (Double) -> Unit = {},
roundTo: Int = 2,
) : NumberInput<Double>(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
value,
valueVal,
setValue,
onChange,
min = null,
max = null,
step = null,

14
webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt
View File

@ -11,6 +11,7 @@ abstract class Input<T>(
scope: CoroutineScope,
hidden: Val<Boolean>,
disabled: Val<Boolean>,
tooltip: String?,
label: String?,
labelVal: Val<String>?,
preferredLabelPosition: LabelPosition,
@ -19,7 +20,7 @@ abstract class Input<T>(
private val inputType: String,
private val value: T?,
private val valueVal: Val<T>?,
private val setValue: ((T) -> Unit)?,
private val onChange: (T) -> Unit,
private val maxLength: Int?,
private val min: Int?,
private val max: Int?,
@ -28,6 +29,7 @@ abstract class Input<T>(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
@ -42,13 +44,11 @@ abstract class Input<T>(
observe(this@Input.disabled) { disabled = it }
if (setValue != null) {
onchange = { setValue.invoke(getInputValue(this)) }
onchange = { onChange(getInputValue(this)) }
onkeydown = { e ->
if (e.key == "Enter") {
setValue.invoke(getInputValue(this))
}
onkeydown = { e ->
if (e.key == "Enter") {
onChange(getInputValue(this))
}
}

6
webui/src/main/kotlin/world/phantasmal/webui/widgets/IntInput.kt
View File

@ -9,12 +9,13 @@ class IntInput(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
value: Int? = null,
valueVal: Val<Int>? = null,
setValue: ((Int) -> Unit)? = null,
onChange: (Int) -> Unit = {},
min: Int? = null,
max: Int? = null,
step: Int? = null,
@ -22,12 +23,13 @@ class IntInput(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
value,
valueVal,
setValue,
onChange,
min,
max,
step,

12
webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt
View File

@ -2,7 +2,6 @@ package world.phantasmal.webui.widgets
import kotlinx.coroutines.CoroutineScope
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
enum class LabelPosition {
Before,
@ -11,12 +10,13 @@ enum class LabelPosition {
abstract class LabelledControl(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
label: String? = null,
labelVal: Val<String>? = null,
hidden: Val<Boolean>,
disabled: Val<Boolean>,
tooltip: String? = null,
label: String?,
labelVal: Val<String>?,
val preferredLabelPosition: LabelPosition,
) : Control(scope, hidden, disabled) {
) : Control(scope, hidden, disabled, tooltip) {
val label: Label? by lazy {
if (label == null && labelVal == null) {
null

220
webui/src/main/kotlin/world/phantasmal/webui/widgets/Menu.kt Normal file
View File

@ -0,0 +1,220 @@
package world.phantasmal.webui.widgets
import kotlinx.browser.document
import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.*
import org.w3c.dom.events.Event
import org.w3c.dom.events.KeyboardEvent
import org.w3c.dom.events.MouseEvent
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
import world.phantasmal.observable.value.value
import world.phantasmal.webui.dom.disposableListener
import world.phantasmal.webui.dom.div
import world.phantasmal.webui.newJsObject
class Menu<T : Any>(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
items: List<T>? = null,
itemsVal: Val<List<T>>? = null,
private val itemToString: (T) -> String = Any::toString,
private val onSelect: (T) -> Unit = {},
private val onCancel: () -> Unit = {},
) : Widget(
scope,
hidden,
disabled,
tooltip,
) {
private val items: Val<List<T>> = itemsVal ?: value(items ?: emptyList())
private lateinit var innerElement: HTMLElement
private var highlightedIndex: Int? = null
private var highlightedElement: Element? = null
private var previouslyFocusedElement: Element? = null
override fun Node.createElement() =
div {
className = "pw-menu"
tabIndex = -1
onmouseup = ::onMouseUp
onkeydown = ::onKeyDown
onblur = { onBlur() }
innerElement = div {
className = "pw-menu-inner"
onmouseover = ::innerMouseOver
bindChildrenTo(items) { item, index ->
div {
dataset["index"] = index.toString()
textContent = itemToString(item)
}
}
}
observe(this@Menu.hidden) {
if (it) {
document.removeEventListener("mousedown", ::onDocumentMouseDown)
clearHighlightItem()
(previouslyFocusedElement as HTMLElement?)?.focus()
} else {
document.addEventListener("mousedown", ::onDocumentMouseDown)
}
}
observe(disabled) {
if (it) {
clearHighlightItem()
}
}
disposableListener(document, "keydown", ::onDocumentKeyDown)
}
override fun internalDispose() {
document.removeEventListener("mousedown", ::onDocumentMouseDown)
super.internalDispose()
}
override fun focus() {
previouslyFocusedElement = document.activeElement
super.focus()
}
fun highlightItem(item: T) {
val idx = items.value.indexOf(item)
if (idx != -1) {
highlightItemAt(idx)
}
}
private fun onMouseUp(e: MouseEvent) {
val target = e.target
if (target !is HTMLElement) return
target.dataset["index"]?.toIntOrNull()?.let(::selectItem)
}
private fun onKeyDown(e: KeyboardEvent) {
when (e.key) {
"ArrowDown" -> {
e.preventDefault()
highlightItemAt(
when (val idx = highlightedIndex) {
null, items.value.lastIndex -> 0
else -> idx + 1
}
)
}
"ArrowUp" -> {
e.preventDefault()
highlightItemAt(
when (val idx = highlightedIndex) {
null, 0 -> items.value.lastIndex
else -> idx - 1
}
)
}
"Enter", " " -> {
e.preventDefault()
e.stopPropagation()
highlightedIndex?.let(::selectItem)
}
}
}
private fun onBlur() {
onCancel()
}
private fun innerMouseOver(e: MouseEvent) {
val target = e.target
if (target is HTMLElement) {
target.dataset["index"]?.toIntOrNull()?.let(::highlightItemAt)
}
}
private fun onDocumentMouseDown(e: Event) {
val target = e.target
if (target !is Node || !element.contains(target)) {
onCancel()
}
}
private fun onDocumentKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") {
onCancel()
}
}
private fun clearHighlightItem() {
highlightedElement?.classList?.remove("pw-menu-highlighted")
highlightedIndex = null
highlightedElement = null
}
private fun highlightItemAt(index: Int) {
highlightedElement?.classList?.remove("pw-menu-highlighted")
if (disabled.value) return
highlightedElement = innerElement.children.item(index)
highlightedElement?.let {
highlightedIndex = index
it.classList.add("pw-menu-highlighted")
it.scrollIntoView(newJsObject { block = "nearest" })
}
}
private fun selectItem(index: Int) {
if (disabled.value) return
items.value.getOrNull(index)?.let(onSelect)
}
companion object {
init {
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css
style("""
.pw-menu {
z-index: 1000;
position: absolute;
box-sizing: border-box;
outline: none;
border: var(--pw-control-border);
--scrollbar-color: hsl(0, 0%, 18%);
--scrollbar-thumb-color: hsl(0, 0%, 22%);
}
.pw-menu > .pw-menu-inner {
overflow: auto;
background-color: var(--pw-control-bg-color);
max-height: 500px;
border: var(--pw-control-inner-border);
}
.pw-menu > .pw-menu-inner > * {
padding: 4px 8px;
white-space: nowrap;
}
.pw-menu > .pw-menu-inner > .pw-menu-highlighted {
background-color: var(--pw-control-bg-color-hover);
color: var(--pw-control-text-color-hover);
}
""".trimIndent())
}
}
}

6
webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt
View File

@ -7,12 +7,13 @@ abstract class NumberInput<T : Number>(
scope: CoroutineScope,
hidden: Val<Boolean>,
disabled: Val<Boolean>,
tooltip: String?,
label: String?,
labelVal: Val<String>?,
preferredLabelPosition: LabelPosition,
value: T?,
valueVal: Val<T>?,
setValue: ((T) -> Unit)?,
onChange: (T) -> Unit,
min: Int?,
max: Int?,
step: Int?,
@ -20,6 +21,7 @@ abstract class NumberInput<T : Number>(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
@ -28,7 +30,7 @@ abstract class NumberInput<T : Number>(
inputType = "number",
value,
valueVal,
setValue,
onChange,
maxLength = null,
min,
max,

161
webui/src/main/kotlin/world/phantasmal/webui/widgets/Select.kt Normal file
View File

@ -0,0 +1,161 @@
package world.phantasmal.webui.widgets
import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.Node
import org.w3c.dom.events.KeyboardEvent
import org.w3c.dom.events.MouseEvent
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
import world.phantasmal.observable.value.mutableVal
import world.phantasmal.observable.value.value
import world.phantasmal.webui.dom.div
class Select<T : Any>(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
items: List<T>? = null,
itemsVal: Val<List<T>>? = null,
private val itemToString: (T) -> String = Any::toString,
selected: T? = null,
selectedVal: Val<T?>? = null,
private val onSelect: (T) -> Unit = {},
) : LabelledControl(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
) {
private val items: Val<List<T>> = itemsVal ?: value(items ?: emptyList())
private val selected: Val<T?> = selectedVal ?: value(selected)
// Default to a single space so the inner text part won't be hidden.
private val buttonText = mutableVal(this.selected.value?.let(itemToString) ?: " ")
private val menuHidden = mutableVal(true)
private lateinit var menu: Menu<T>
private var justOpened = false
override fun Node.createElement() =
div {
className = "pw-select"
addWidget(Button(
scope,
disabled = disabled,
textVal = buttonText,
onMouseDown = ::onButtonMouseDown,
onMouseUp = { onButtonMouseUp() },
onKeyDown = ::onButtonKeyDown,
))
menu = addWidget(Menu(
scope,
hidden = menuHidden,
disabled = disabled,
itemsVal = items,
itemToString = itemToString,
onSelect = ::select,
onCancel = { menuHidden.value = true },
))
}
private fun onButtonMouseDown(e: MouseEvent) {
e.stopPropagation()
justOpened = menuHidden.value
menuHidden.value = false
selected.value?.let(menu::highlightItem)
}
private fun onButtonMouseUp() {
if (justOpened) {
menu.focus()
} else {
menuHidden.value = true
}
justOpened = false
}
private fun onButtonKeyDown(e: KeyboardEvent) {
when (e.key) {
"Enter", " " -> {
e.preventDefault()
e.stopPropagation()
justOpened = menuHidden.value
menuHidden.value = false
selected.value?.let(menu::highlightItem)
menu.focus()
}
"ArrowUp" -> {
if (items.value.isNotEmpty()) {
if (selected.value == null) {
select(items.value.last())
} else {
val index = items.value.indexOf(selected.value) - 1
if (index < 0) {
select(items.value.last())
} else {
select(items.value[index])
}
}
}
}
"ArrowDown" -> {
if (items.value.isNotEmpty()) {
if (selected.value == null) {
select(items.value.first())
} else {
val index = items.value.indexOf(selected.value) + 1
if (index >= items.value.size) {
select(items.value.first())
} else {
select(items.value[index])
}
}
}
}
}
}
private fun select(item: T) {
menuHidden.value = true
buttonText.value = itemToString(item)
onSelect(item)
}
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-select {
position: relative;
display: inline-flex;
width: 160px;
}
.pw-select .pw-button {
flex: 1;
}
.pw-select .pw-menu {
top: 25px;
left: 0;
min-width: 100%;
}
""".trimIndent())
}
}
}

2
webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt
View File

@ -48,7 +48,7 @@ class TabContainer<T : Tab>(
addChild(
LazyLoader(
scope,
hidden = ctrl.activeTab.transform { it != tab },
hidden = ctrl.activeTab.map { it != tab },
createWidget = { scope -> createWidget(scope, tab) }
)
)

102
webui/src/main/kotlin/world/phantasmal/webui/widgets/TextArea.kt Normal file
View File

@ -0,0 +1,102 @@
package world.phantasmal.webui.widgets
import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.Node
import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal
import world.phantasmal.webui.dom.div
import world.phantasmal.webui.dom.textarea
class TextArea(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
private val value: String? = null,
private val valueVal: Val<String>? = null,
private val setValue: ((String) -> Unit)? = null,
private val maxLength: Int? = null,
private val fontFamily: String? = null,
private val rows: Int? = null,
private val cols: Int? = null,
) : LabelledControl(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
) {
override fun Node.createElement() =
div {
className = "pw-text-area"
textarea {
className = "pw-text-area-inner"
observe(this@TextArea.disabled) { disabled = it }
if (setValue != null) {
onchange = { setValue.invoke(value) }
}
if (valueVal != null) {
observe(valueVal) { value = it }
} else if (this@TextArea.value != null) {
value = this@TextArea.value
}
this@TextArea.maxLength?.let { maxLength = it }
fontFamily?.let { style.fontFamily = it }
this@TextArea.rows?.let { rows = it }
this@TextArea.cols?.let { cols = it }
}
}
companion object {
init {
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css
style("""
.pw-text-area {
box-sizing: border-box;
display: inline-block;
border: var(--pw-input-border);
}
.pw-text-area .pw-text-area-inner {
box-sizing: border-box;
vertical-align: top;
padding: 3px;
border: var(--pw-input-inner-border);
margin: 0;
background-color: var(--pw-input-bg-color);
color: var(--pw-input-text-color);
outline: none;
font-size: 13px;
}
.pw-text-area:hover {
border: var(--pw-input-border-hover);
}
.pw-text-area:focus-within {
border: var(--pw-input-border-focus);
}
.pw-text-area.disabled {
border: var(--pw-input-border-disabled);
}
.pw-text-area.disabled .pw-text-area-inner {
color: var(--pw-input-text-color-disabled);
background-color: var(--pw-input-bg-color-disabled);
}
""".trimIndent())
}
}
}

8
webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt
View File

@ -9,17 +9,19 @@ class TextInput(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
tooltip: String? = null,
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
value: String? = null,
valueVal: Val<String>? = null,
setValue: ((String) -> Unit)? = null,
maxLength: Int? = null
onChange: (String) -> Unit = {},
maxLength: Int? = null,
) : Input<String>(
scope,
hidden,
disabled,
tooltip,
label,
labelVal,
preferredLabelPosition,
@ -28,7 +30,7 @@ class TextInput(
inputType = "text",
value,
valueVal,
setValue,
onChange,
maxLength,
min = null,
max = null,

66
webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt
View File

@ -2,7 +2,6 @@ package world.phantasmal.webui.widgets
import kotlinx.browser.document
import kotlinx.coroutines.CoroutineScope
import kotlinx.dom.clear
import org.w3c.dom.*
import world.phantasmal.core.disposable.disposable
import world.phantasmal.observable.Observable
@ -22,9 +21,10 @@ abstract class Widget(
val hidden: Val<Boolean> = falseVal(),
/**
* By default determines the disabled attribute of its [element] and whether or not the
* `pw-disabled` class is added.
* "pw-disabled" class is added.
*/
val disabled: Val<Boolean> = falseVal(),
val tooltip: String? = null,
) : DisposableContainer() {
private val _ancestorHidden = mutableVal(false)
private val _children = mutableListOf<Widget>()
@ -49,6 +49,8 @@ abstract class Widget(
}
}
tooltip?.let { el.title = it }
if (initResizeObserverRequested) {
initResizeObserver(el)
}
@ -74,6 +76,10 @@ abstract class Widget(
val children: List<Widget> = _children
open fun focus() {
element.focus()
}
/**
* Called to initialize [element] when it is first accessed.
*/
@ -121,9 +127,30 @@ abstract class Widget(
return child
}
protected fun <T> Node.bindChildrenTo(
protected fun <T> Element.bindChildrenTo(
list: Val<List<T>>,
createChild: Node.(T, Int) -> Node,
) {
if (list is ListVal) {
bindChildrenTo(list, createChild)
} else {
observe(list) { items ->
innerHTML = ""
val frag = document.createDocumentFragment()
items.forEachIndexed { i, item ->
frag.createChild(item, i)
}
appendChild(frag)
}
}
}
protected fun <T> Element.bindChildrenTo(
list: ListVal<T>,
createChild: (T, Int) -> Node,
createChild: Node.(T, Int) -> Node,
) {
fun spliceChildren(index: Int, removedCount: Int, inserted: List<T>) {
for (i in 1..removedCount) {
@ -133,9 +160,7 @@ abstract class Widget(
val frag = document.createDocumentFragment()
inserted.forEachIndexed { i, value ->
val child = createChild(value, index + i)
frag.append(child)
frag.createChild(value, index + i)
}
if (index >= childNodes.length) {
@ -145,25 +170,20 @@ abstract class Widget(
}
}
val observer = list.observeList { change: ListValChangeEvent<T> ->
when (change) {
is ListValChangeEvent.Change -> {
spliceChildren(change.index, change.removed.size, change.inserted)
}
is ListValChangeEvent.ElementChange -> {
// TODO: Update children.
}
}
}
spliceChildren(0, 0, list.value)
addDisposable(
disposable {
observer.dispose()
clear()
list.observeList { change: ListValChangeEvent<T> ->
when (change) {
is ListValChangeEvent.Change -> {
spliceChildren(change.index, change.removed.size, change.inserted)
}
is ListValChangeEvent.ElementChange -> {
// TODO: Update children.
}
}
}
)
spliceChildren(0, 0, list.value)
}
/**