Cleanup add update

build.gradle

@@ -1,5 +1,5 @@
 group 'nl.astraeus'
-version '0.0.2-SNAPSHOT'
+version '0.0.3-SNAPSHOT'
 
 apply plugin: 'kotlin2js'
 apply plugin: 'idea'

src/main/kotlin/nl/astraeus/komp/ComponentSize.kt

@@ -1,115 +0,0 @@
-package nl.astraeus.komp
-
-import org.w3c.dom.HTMLElement
-
-/**
- * User: rnentjes
- * Date: 10-5-17
- * Time: 16:48
- */
-
-enum class SizeType {
-    NONE,
-    ABSOLUTE,
-    PERCENTAGE,
-    FLEX,
-    FILL
-}
-
-open class ComponentSize(
-  val element: HTMLElement,
-  val type: SizeType,
-  val value: Float
-) {
-    var calculatedSize: Rect = Rect(0,0,0,0)
-}
-
-class Rect(
-  val left: Int,
-  val top: Int,
-  val width: Int,
-  val height: Int
-) {
-    override fun toString(): String {
-        return "Rect(left=$left, top=$top, width=$width, height=$height)"
-    }
-}
-
-class SizeContainer(
-  val parentSize: Rect,
-  val componentList: List<ComponentSize>
-) {
-    var totalSize = 0
-    var totalPixels = 0f
-    var totalPercentage = 0f
-    var totalFlex = 0f
-    var fillCount = 0f
-
-    var afterPixels = 0f
-    var afterPercentage = 0f
-    var calculatedSize = 0
-    var calculatedStart = 0
-
-    fun calculate() {
-        for (size in componentList) {
-            when(size.type) {
-                SizeType.ABSOLUTE -> {
-                    totalPixels += size.value
-                }
-                SizeType.PERCENTAGE -> {
-                    totalPercentage += size.value
-                }
-                SizeType.FLEX -> {
-                    totalFlex += size.value
-                }
-                SizeType.FILL -> {
-                    fillCount++
-                }
-            }
-        }
-
-/*        if (layout == LayoutType.HORIZONTAL) {
-            totalSize = parentSize.width
-        } else {
-            totalSize = parentSize.height
-        }*/
-
-        afterPixels = totalSize - totalPixels
-        afterPercentage = afterPixels * totalPercentage / 100f
-
-        for (size in componentList) {
-            when(size.type) {
-                SizeType.ABSOLUTE -> {
-                    calculatedSize = size.value.toInt()
-                }
-                SizeType.PERCENTAGE -> {
-                    calculatedSize = (afterPixels * size.value / 100f).toInt()
-                }
-                SizeType.FLEX -> {
-                    calculatedSize = (afterPercentage * size.value / totalFlex).toInt()
-                }
-                SizeType.FILL -> {
-                    calculatedSize = (afterPercentage * size.value / fillCount).toInt()
-                }
-            }
-
-/*            if (layout == LayoutType.HORIZONTAL) {
-                size.calculatedSize = Rect(calculatedStart, parentSize.top, calculatedSize, parentSize.height)
-            } else {
-                size.calculatedSize = Rect(parentSize.left, calculatedStart, parentSize.width, calculatedSize)
-            }*/
-
-            calculatedStart += calculatedSize
-            console.log("Set component to ${size.calculatedSize}", size.element)
-
-            size.element.style.position = "absolute"
-            size.element.style.left = "${size.calculatedSize.left}px"
-            size.element.style.top = "${size.calculatedSize.top}px"
-            size.element.style.width = "${size.calculatedSize.width}px"
-            size.element.style.height = "${size.calculatedSize.height}px"
-
-            size.element.setAttribute("data-resized", "true")
-        }
-    }
-}
-

src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt

@@ -13,15 +13,9 @@ fun DIV.include(component: HtmlComponent) {
     Komp.define(result, component)
 }
 
-enum class Sizing {
+abstract class HtmlComponent {
-    NONE,
-    HORIZONTAL,
-    VERTICAL
-}
-
-abstract class HtmlComponent(val sizing: Sizing = Sizing.NONE) {
     var element: HTMLElement? = null
-    var size: ComponentSize? = null
+    var rendered = false
 
     fun create(): HTMLElement {
         var elem =element
@@ -30,6 +24,7 @@ abstract class HtmlComponent(val sizing: Sizing = Sizing.NONE) {
         }
 
         elem = render(document.create)
+        rendered = true
 
         Komp.define(elem, this)
 
@@ -41,11 +36,15 @@ abstract class HtmlComponent(val sizing: Sizing = Sizing.NONE) {
     abstract fun render(consumer: TagConsumer<HTMLElement>): HTMLElement
 
     open fun refresh() {
+        if (rendered) {
             Komp.refresh(element)
-
+        } else {
-        if (sizing != Sizing.NONE) {
+            update()
-            // resize children
         }
     }
 
+    open fun update() {
+        Komp.refresh(element)
+    }
+
 }

src/main/kotlin/nl/astraeus/komp/Komp.kt

@@ -1,10 +1,9 @@
 package nl.astraeus.komp
 
-import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
-import org.w3c.dom.get
+import kotlin.collections.component1
-import kotlin.browser.document
+import kotlin.collections.component2
-import kotlin.browser.window
+import kotlin.collections.set
 
 /**
  * User: rnentjes
@@ -16,13 +15,6 @@ object Komp {
 
     private val elements: MutableMap<HTMLElement, HtmlComponent> = HashMap()
     private val elementList: MutableList<HtmlComponent> = ArrayList()
-    private var resizing = false
-
-    init {
-        window.onresize = {
-            //Komp.resize()
-        }
-    }
 
     fun define(element: HTMLElement, component: HtmlComponent) {
         elements[element] = component
@@ -40,8 +32,6 @@ object Komp {
 
         elements[element] = component
         elementList.add(component)
-
-        //resize()
     }
 
     fun remove(element: HTMLElement) {
@@ -76,124 +66,6 @@ object Komp {
                 parent?.replaceChild(newElement, element)
             }
         }
-
-        //resize()
     }
 
-    private fun resize() {
-        if (!resizing) {
-            resizing = true
-
-            window.setTimeout({
-                resizing = false
-
-                resizeComponents()
-            })
-        }
-    }
-
-    private fun resizeComponents() {
-        for (component in elementList) {
-            component.element?.setAttribute("data-resized", "false")
-        }
-
-        for (component in elementList) {
-            if (component.sizing != Sizing.NONE && component.element?.getAttribute("data-resize") != "true") {
-                console.log("resize", component)
-
-                resize(component)
-            }
-        }
-    }
-
-    private fun resize(comp: HtmlComponent) {
-        val parent = comp.element?.parentElement
-
-        if (parent != null) {
-            val sizes = getSiblingSizes(parent)
-            val parentSize = elements[parent]?.size
-            val container: SizeContainer
-
-            if (parentSize != null) {
-                container = SizeContainer(
-                  parentSize.calculatedSize,
-                  sizes
-                )
-            } else {
-                val leftString = (parent as HTMLElement).style.left
-                val topString = parent.style.top
-                val widthString = parent.style.width
-                val heightString = parent.style.height
-
-                if (parent == document.body) {
-                    container = SizeContainer(
-                      Rect(parent.clientLeft, parent.clientTop, parent.clientWidth, parent.clientHeight),
-                      sizes
-                    )
-                } else if (leftString.endsWith("px") && topString.endsWith("px") && widthString.endsWith("px") && heightString.endsWith("px")) {
-                    container = SizeContainer(
-                      Rect(
-                        leftString.slice(0..leftString.length - 3).toInt(),
-                        topString.slice(0..topString.length - 3).toInt(),
-                        widthString.slice(0..widthString.length - 3).toInt(),
-                        heightString.slice(0..heightString.length - 3).toInt()
-                      ),
-                      sizes
-                    )
-                } else {
-                    container = SizeContainer(
-                      Rect(parent.clientLeft, parent.clientTop, parent.clientWidth, parent.clientHeight),
-                      sizes
-                    )
-                }
-            }
-
-            container.calculate()
-        }
-    }
-
-    private fun getSiblingSizes(parent: Element): List<ComponentSize> {
-        val result: MutableList<ComponentSize> = ArrayList()
-
-        for (index in 0..parent.children.length-1) {
-            val child = parent.children[index]
-
-            if (child is HTMLElement) {
-                val comp = elements[child]
-                val size = getSize(child)
-                comp?.size = size
-
-                result.add(ComponentSize(child, size.type, size.value))
-            }
-        }
-
-        return result
-    }
-
-    fun getSize(element: HTMLElement): ComponentSize {
-        val sizeText = element.attributes?.get("size")?.value
-        var result: ComponentSize? = null
-
-        if (sizeText != null) {
-            val (type, size) = getSizeFromAttribute(sizeText)
-
-            result = ComponentSize(element, type, size)
-        }
-
-        return result ?: throw IllegalStateException("Unable to calculate size for $this")
-    }
-
-    private fun getSizeFromAttribute(sizeString: String): Pair<SizeType, Float> {
-        if (sizeString == "fill") {
-            return SizeType.FILL to 0f
-        } else if (sizeString.endsWith("px")) {
-            return SizeType.ABSOLUTE to sizeString.slice(0..sizeString.length-3).toFloat()
-        } else if (sizeString.endsWith("%")) {
-            return SizeType.PERCENTAGE to sizeString.slice(0..sizeString.length-2).toFloat()
-        } else {
-            return SizeType.FLEX to sizeString.toFloat()
-        }
-    }
-
-
 }