diff --git a/demo/gdml/src/jsMain/kotlin/space/kscience/visionforge/gdml/demo/fileDrop.kt b/demo/gdml/src/jsMain/kotlin/space/kscience/visionforge/gdml/demo/fileDrop.kt index e91fedee..2478c3af 100644 --- a/demo/gdml/src/jsMain/kotlin/space/kscience/visionforge/gdml/demo/fileDrop.kt +++ b/demo/gdml/src/jsMain/kotlin/space/kscience/visionforge/gdml/demo/fileDrop.kt @@ -2,7 +2,6 @@ package space.kscience.visionforge.gdml.demo import drop.FileDrop import kotlinx.css.* -import kotlinx.css.properties.border import org.w3c.files.FileList import react.RBuilder import styled.css @@ -13,7 +12,7 @@ import styled.styledDiv fun RBuilder.fileDrop(title: String, action: (files: FileList?) -> Unit) { styledDiv { css { - border(style = BorderStyle.dashed, width = 1.px, color = Color.orange) + border = Border(style = BorderStyle.dashed, width = 1.px, color = Color.orange) flexGrow = 0.0 alignContent = Align.center } diff --git a/demo/js-playground/src/jsMain/kotlin/JsPlaygroundApp.kt b/demo/js-playground/src/jsMain/kotlin/JsPlaygroundApp.kt index d77d8f52..0bdee628 100644 --- a/demo/js-playground/src/jsMain/kotlin/JsPlaygroundApp.kt +++ b/demo/js-playground/src/jsMain/kotlin/JsPlaygroundApp.kt @@ -43,8 +43,8 @@ private class JsPlaygroundApp : Application { createRoot(element).render { styledDiv { css { - padding(0.pt) - margin(0.pt) + padding = Padding(0.pt) + margin = Margin(0.pt) height = 100.vh width = 100.vw } diff --git a/demo/js-playground/src/jsMain/kotlin/markupComponent.kt b/demo/js-playground/src/jsMain/kotlin/markupComponent.kt index 4bbe4b80..a47c28cf 100644 --- a/demo/js-playground/src/jsMain/kotlin/markupComponent.kt +++ b/demo/js-playground/src/jsMain/kotlin/markupComponent.kt @@ -1,5 +1,4 @@ import kotlinx.css.* -import kotlinx.css.properties.border import kotlinx.dom.clear import kotlinx.html.dom.append import org.intellij.markdown.flavours.commonmark.CommonMarkFlavourDescriptor @@ -45,10 +44,10 @@ val Markup = fc("Markup") { props -> css { width = 100.pct height = 100.pct - border(2.pt, BorderStyle.solid, Color.blue) - padding(left = 8.pt) + border= Border(2.pt, BorderStyle.solid, Color.blue) + padding = Padding(left = 8.pt) backgroundColor = Color.white - flex(1.0) + flex = Flex(1.0) zIndex = 10000 } ref = elementRef diff --git a/demo/js-playground/src/jsMain/kotlin/plotlyComponent.kt b/demo/js-playground/src/jsMain/kotlin/plotlyComponent.kt index 322e80c5..80417dde 100644 --- a/demo/js-playground/src/jsMain/kotlin/plotlyComponent.kt +++ b/demo/js-playground/src/jsMain/kotlin/plotlyComponent.kt @@ -1,5 +1,4 @@ import kotlinx.css.* -import kotlinx.css.properties.border import org.w3c.dom.Element import org.w3c.dom.HTMLElement import react.* @@ -30,8 +29,8 @@ val Plotly = fc("Plotly") { props -> css { width = 100.pct height = 100.pct - border(2.pt, BorderStyle.solid, Color.blue) - flex(1.0) + border = Border(2.pt, BorderStyle.solid, Color.blue) + flex = Flex(1.0) } ref = elementRef } diff --git a/gradle.properties b/gradle.properties index a16b8d7b..e65394ef 100644 --- a/gradle.properties +++ b/gradle.properties @@ -8,6 +8,6 @@ org.gradle.jvmargs=-Xmx4G org.jetbrains.compose.experimental.jscanvas.enabled=true -toolsVersion=0.15.0-kotlin-1.9.20-Beta -#kotlin.experimental.tryK2=true +toolsVersion=0.15.0-kotlin-1.9.20-Beta2 +kotlin.experimental.tryK2=true #kscience.wasm.disabled=true diff --git a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/bootstrap.kt b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/bootstrap.kt index 2f924ecc..c0171cb7 100644 --- a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/bootstrap.kt +++ b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/bootstrap.kt @@ -1,8 +1,8 @@ package space.kscience.visionforge.bootstrap public fun useBootstrap(){ - kotlinext.js.require("bootstrap/dist/css/bootstrap.min.css") - kotlinext.js.require("bootstrap") + kotlinext.js.require("bootstrap/dist/css/bootstrap.min.css") + kotlinext.js.require("bootstrap") } //public inline fun TagConsumer.card(title: String, crossinline block: TagConsumer.() -> Unit) { diff --git a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt index 3dfba202..f42235a8 100644 --- a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt +++ b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt @@ -2,11 +2,7 @@ package space.kscience.visionforge.bootstrap import kotlinx.coroutines.DelicateCoroutinesApi import kotlinx.coroutines.GlobalScope -import kotlinx.css.BorderStyle -import kotlinx.css.Color -import kotlinx.css.padding -import kotlinx.css.properties.border -import kotlinx.css.px +import kotlinx.css.* import kotlinx.html.js.onClickFunction import org.w3c.dom.events.Event import org.w3c.files.Blob @@ -29,7 +25,7 @@ private fun saveData(event: Event, fileName: String, mimeType: String = "text/pl event.stopPropagation(); event.preventDefault(); - val fileSaver = kotlinext.js.require("file-saver") + val fileSaver = kotlinext.js.require("file-saver") val blob = Blob(arrayOf(dataBuilder()), BlobPropertyBag("$mimeType;charset=utf-8")) fileSaver.saveAs(blob, fileName) } @@ -53,8 +49,8 @@ public val CanvasControls: FC = fc("CanvasControls") { prop flexColumn { flexRow { css { - border(1.px, BorderStyle.solid, Color.blue) - padding(4.px) + border = Border(1.px, BorderStyle.solid, Color.blue) + padding = Padding(4.px) } props.vision?.let { vision -> button { diff --git a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt index 9ab0403c..0d5578a7 100644 --- a/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt +++ b/ui/bootstrap/src/jsMain/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt @@ -1,7 +1,6 @@ package space.kscience.visionforge.bootstrap import kotlinx.css.* -import kotlinx.css.properties.border import react.FC import react.PropsWithChildren import react.RBuilder @@ -33,13 +32,13 @@ public val ThreeControls: FC = fc { props -> } tab("Tree") { css { - border(1.px, BorderStyle.solid, Color.lightGray) - padding(10.px) + border = Border(1.px, BorderStyle.solid, Color.lightGray) + padding = Padding(10.px) } h2 { +"Object tree" } styledDiv { css { - flex(1.0, 1.0, FlexBasis.inherit) + flex = Flex(1.0, 1.0, FlexBasis.inherit) } props.vision?.let { visionTree(it, props.selected, props.onSelect) diff --git a/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt b/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt index 3b7133e9..6ae2ec62 100644 --- a/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt +++ b/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt @@ -130,7 +130,7 @@ public val ThreeCanvasWithControls: FC = fc("Three css { height = 100.pct minWidth = 600.px - flex(10.0, 1.0, FlexBasis("600px")) + flex = Flex(10.0, 1.0, FlexBasis("600px")) position = Position.relative } @@ -199,11 +199,11 @@ public val ThreeCanvasWithControls: FC = fc("Three } flexColumn { css { - padding(4.px) + padding = Padding(4.px) minWidth = 400.px height = 100.pct overflowY = Overflow.auto - flex(1.0, 10.0, FlexBasis("300px")) + flex = Flex(1.0, 10.0, FlexBasis("300px")) } ringThreeControls(options, solid, selected, onSelect, additionalTabs = props.additionalTabs) } diff --git a/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt b/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt index 6a440e71..6cdc0707 100644 --- a/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt +++ b/ui/ring/src/jsMain/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt @@ -2,11 +2,7 @@ package space.kscience.visionforge.ring import kotlinx.coroutines.DelicateCoroutinesApi import kotlinx.coroutines.GlobalScope -import kotlinx.css.BorderStyle -import kotlinx.css.Color -import kotlinx.css.padding -import kotlinx.css.properties.border -import kotlinx.css.px +import kotlinx.css.* import kotlinx.html.js.onClickFunction import org.w3c.dom.events.Event import org.w3c.files.Blob @@ -34,7 +30,7 @@ internal fun saveData(event: Event, fileName: String, mimeType: String = "text/p event.stopPropagation(); event.preventDefault(); - val fileSaver = kotlinext.js.require("file-saver") + val fileSaver = kotlinext.js.require("file-saver") val blob = Blob(arrayOf(dataBuilder()), BlobPropertyBag("$mimeType;charset=utf-8")) fileSaver.saveAs(blob, fileName) } @@ -58,8 +54,8 @@ internal val CanvasControls: FC = fc("CanvasControls") { pr flexColumn { flexRow { css { - border(1.px, BorderStyle.solid, Color.blue) - padding(4.px) + border = Border(1.px, BorderStyle.solid, Color.blue) + padding = Padding(4.px) } props.vision?.let { vision -> button {