docs file tree concept

docs/build.gradle.kts

@@ -3,7 +3,7 @@ import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDistributionDsl
 import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
-    kotlin("multiplatform") version "2.0.0"
+    kotlin("multiplatform") version "2.1.0"
 }
 
 

docs/src/commonMain/kotlin/ru/hollowhorizon/hollowengine/docs/Docs.kt

@@ -1,33 +1,103 @@
 package ru.hollowhorizon.hollowengine.docs
 
-import de.fabmax.kool.KoolContext
+import de.fabmax.kool.*
 import de.fabmax.kool.modules.ui2.*
+import de.fabmax.kool.modules.ui2.docking.Dock
+import de.fabmax.kool.modules.ui2.docking.UiDockable
+import de.fabmax.kool.pipeline.Texture2d
 import de.fabmax.kool.scene.Scene
-import de.fabmax.kool.util.Color
+import de.fabmax.kool.util.*
+import de.fabmax.kool.util.MsdfFont.Companion.MSDF_TEX_PROPS
 
 fun launchDocs(ctx: KoolContext) {
-    if(Docs in ctx.scenes) return
-
-    ctx.scenes += Docs
+    ctx.scenes += Docs()
 }
 
 fun closeDocs(ctx: KoolContext) {
-    ctx.scenes -= Docs
+    ctx.scenes -= Docs()
+}
+
+val tree = DocsNode("HollowEngine", "hollowengine").apply {
+    children += DocsNode("НПС", "hollowengine/npcs").apply {
+        depth = 1
+        children += DocsNode("Создание", "hollowengine/npcs/creation").apply { depth = 2; isFolder = false }
+        children += DocsNode("Действия", "hollowengine/npcs/actions").apply { depth = 2; isFolder = false }
+    }
+    children += DocsNode("Графика", "hollowengine/graphics").apply {
+        depth = 1
+        children += DocsNode("Эффекты", "hollowengine/graphics/effects").apply { depth = 2; isFolder = false }
+    }
 }
 
-object Docs: Scene() {
+class Docs : Scene() {
     init {
         setupUiScene()
 
-        addPanelSurface {
-            modifier.align(AlignmentX.Center, AlignmentY.Center)
+        launchOnMainThread {
+
+            val ideColors = Colors.darkColors(
+                background = Color("232933ff"),
+                backgroundVariant = Color("161a20ff"),
+                onBackground = Color("dbe6ffff"),
+                secondary = Color("7786a5ff"),
+                secondaryVariant = Color("4d566bff"),
+                onSecondary = Color.WHITE
+            )
+            val ideSizes = Sizes.medium.copy(normalText = MsdfFont("fonts/pt_sans").getOrThrow())
+
+            val dock = Dock().apply {
+                borderWidth.set(Dp.fromPx(1f))
+                borderColor.set(UiColors.titleBg)
+                dockingSurface.colors = ideColors
+                dockingSurface.sizes = ideSizes
+                dockingPaneComposable = Composable {
+                    clearColor = Color.BLACK
+                    root()
+                }
+
+                val projectDock = UiDockable("Проект", this).apply { setFloatingBounds(height = Dp(100f)) }
+                val projectSurface = WindowSurface(projectDock, ideColors, ideSizes) {
+                    tree()
+                }
 
-            Box {
-                modifier.backgroundColor(Color.DARK_BLUE)
-                    .padding(sizes.gap)
+                addDockableSurface(projectDock, projectSurface)
 
-                Text("Hello docs!") {}
+                createNodeLayout(
+                    listOf(
+                        "0:row",
+                        "0/0:leaf",
+                        "0/1:leaf"
+                    )
+                )
+
+                getLeafAtPath("0/0")?.dock(projectDock)
             }
+            addNode(dock)
         }
     }
-}
+}
+
+private object UiColors {
+    val border = Color("0f1114ff")
+    val titleBg = Color("343a49ff")
+    val windowTitleBgAccent = MdColor.DEEP_PURPLE
+    val titleBgAccent = MdColor.DEEP_PURPLE
+    val titleText = Color("dbe6ffff")
+    val secondaryBright = Color("a0b3d8ff")
+    val selectionChild = Color("ff7b0080")
+}
+
+
+val Sizes.lineHeight: Dp get() = baseSize * (2f/3f)
+val Sizes.baseSize: Dp get() = largeGap * 2f
+val Sizes.lineHeightLarge: Dp get() = baseSize * 0.9f
+val Sizes.heightTitleBar: Dp get() = lineHeightLarge
+val Sizes.heightWindowTitleBar: Dp get() = heightTitleBar * 1.1f
+val Sizes.scrollbarWidth: Dp get() = gap * 0.33f
+
+val Sizes.editorPanelMarginStart: Dp get() = gap * 1.5f
+val Sizes.editorPanelMarginEnd: Dp get() = gap
+
+val Colors.hoverBg: Color get() = secondaryVariantAlpha(0.35f)
+val Colors.backgroundMid: Color get() = background.mix(backgroundVariant, 0.5f)
+val Colors.weakDividerColor: Color get() = secondaryVariantAlpha(0.75f)

docs/src/commonMain/kotlin/ru/hollowhorizon/hollowengine/docs/DocsTree.kt

@@ -0,0 +1,129 @@
+package ru.hollowhorizon.hollowengine.docs
+
+import de.fabmax.kool.modules.ui2.*
+import de.fabmax.kool.modules.ui2.ArrowScope.Companion.ROTATION_DOWN
+import de.fabmax.kool.modules.ui2.ArrowScope.Companion.ROTATION_RIGHT
+import de.fabmax.kool.util.Color
+import de.fabmax.kool.util.logI
+
+class DocsNode(val treeName: String, val treePath: String) : Composable {
+    var isFolder = true
+    var depth = 0
+    val children: MutableList<DocsNode> = ArrayList()
+    val isExpanded = mutableStateOf(false)
+
+    fun walk(): MutableList<DocsNode> {
+        val list = mutableListOf(this)
+        if (isExpanded.value) list.addAll(children.flatMap { it.walk() })
+        return list
+    }
+
+    fun toggleExpanded() {
+        if (isFolder) {
+            logI { "Clicked (${isExpanded.value}): ${walk().joinToString(", ") { it.treePath }}" }
+            isExpanded.set(!isExpanded.value)
+        }
+    }
+
+    fun sort() {
+        children.sortBy { it.treeName }
+        children.sortByDescending { it.isFolder }
+        children.forEach { it.sort() }
+    }
+
+    companion object {
+        val EMPTY = DocsNode("", "")
+    }
+
+    override fun UiScope.compose() {
+
+        modifier.margin(sizes.smallGap)
+
+        LazyList(
+            containerModifier = { it.backgroundColor(null) },
+            vScrollbarModifier = { it.width(10.dp).margin(5.dp) }
+        ) {
+            var hoveredIndex by remember(-1)
+
+            itemsIndexed(walk()) { i, item ->
+                sceneObjectItem(item, i == hoveredIndex).apply {
+                    modifier.onEnter { hoveredIndex = i }.onExit { hoveredIndex = -1 }
+                        .onClick {
+
+                        }
+                }
+            }
+        }
+
+    }
+
+    private fun UiScope.sceneObjectItem(item: DocsNode, isHovered: Boolean) {
+        modifier
+            .onClick { evt ->
+                if (evt.pointer.isLeftButtonClicked && evt.pointer.leftButtonRepeatedClickCount == 2) {
+                    if (item.isFolder) {
+                        item.toggleExpanded()
+                    } else {
+
+                    }
+                }
+            }
+            .margin(horizontal = sizes.smallGap)
+            .padding(horizontal = sizes.smallGap)
+
+        if (isHovered) {
+            modifier.background(RoundRectBackground(colors.hoverBg, sizes.smallGap))
+        }
+
+        sceneObjectLabel(item, isHovered)
+    }
+
+    private fun UiScope.sceneObjectLabel(item: DocsNode, isHovered: Boolean) =
+        Row(width = Grow.Std) {
+            // tree-depth based indentation
+            if (item.depth > 0) {
+                Box(width = 20.dp * item.depth) {}
+            }
+
+            // expand / collapse arrow
+            Box {
+                modifier
+                    .size(sizes.lineHeight * 0.8f, sizes.lineHeight)
+                    .alignY(AlignmentY.Center)
+                if (item.isFolder) {
+                    Arrow(isHoverable = false) {
+                        modifier
+                            .rotation(if (item.isExpanded.use()) ROTATION_DOWN else ROTATION_RIGHT)
+                            .align(AlignmentX.Center, AlignmentY.Center)
+                            .onClick { item.toggleExpanded() }
+                            .size(15.dp, 15.dp)
+                    }
+                }
+            }
+
+            val fgColor = if (isHovered) colors.primary else colors.secondary
+
+//            val icon = when {
+//                item.isFolder && item.isExpanded.value -> FOLDER_OPEN
+//                item.isFolder && !item.isExpanded.value -> FOLDER
+//                item.treeName.endsWith(".kts") -> KOTLIN
+//                else -> FILE
+//            }
+//
+//            Box {
+//                modifier.alignY(AlignmentY.Center)
+//                Image(icon) {
+//                    modifier.margin(horizontal = 10.dp).size(sizes.lineHeight, sizes.lineHeight)
+//                        .imageSize(ImageSize.Stretch)
+//                }
+//            }
+
+            Box(width = Grow.Std, height = Grow.Std) {
+                Text(item.treeName) {
+                    modifier
+                        .alignY(AlignmentY.Center)
+                        .textColor(fgColor)
+                }
+            }
+        }
+}

docs/src/jsMain/kotlin/ru/hollowhorizon/hollowengine/docs/Launcher.kt

@@ -8,6 +8,5 @@ fun main() = KoolApplication(
         canvasName = "HollowEngine Docs"
     )
 ) {
-    println("Test")
     launchDocs(ctx)
 }

src/main/java/ru/hollowhorizon/hollowengine/client/gui/DashboardScreen.kt

@@ -3,6 +3,7 @@ package ru.hollowhorizon.hollowengine.client.gui
 import com.mojang.blaze3d.systems.RenderSystem
 import de.fabmax.kool.modules.ui2.*
 import de.fabmax.kool.scene.Scene
+import de.fabmax.kool.util.Color
 import de.fabmax.kool.util.MsdfFont
 import net.minecraft.client.gui.screens.Screen
 import ru.hollowhorizon.hc.client.imgui.Component
@@ -43,11 +44,11 @@ class DashBoardScreen : KoolScreen({
         }
 
         Column {
-            modifier.margin(10.dp)
+            modifier.margin(10.dp).alignX(AlignmentX.Center)
 
             modTabs.forEach { tab ->
                 Button(tab.name) {
-                    modifier.onClick { tab.onClick() }.font(MsdfFont(MONOCRAFT_DATA, 30f))
+                    modifier.onClick { tab.onClick() }.font(MsdfFont(MONOCRAFT_DATA, 30f)).margin(10.dp)
                 }
             }
         }