diff --git a/build.gradle b/build.gradle index 50230cf..4ce248b 100644 --- a/build.gradle +++ b/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' diff --git a/build.gradle b/build.gradle index 50230cf..4ce248b 100644 --- a/build.gradle +++ b/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' diff --git a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt b/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt deleted file mode 100644 index 5a16517..0000000 --- a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt +++ /dev/null @@ -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 -) { - 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") - } - } -} - diff --git a/build.gradle b/build.gradle index 50230cf..4ce248b 100644 --- a/build.gradle +++ b/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' diff --git a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt b/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt deleted file mode 100644 index 5a16517..0000000 --- a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt +++ /dev/null @@ -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 -) { - 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") - } - } -} - diff --git a/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt b/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt index b08a831..9655be2 100644 --- a/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt +++ b/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt @@ -13,15 +13,9 @@ Komp.define(result, component) } -enum class Sizing { - NONE, - HORIZONTAL, - VERTICAL -} - -abstract class HtmlComponent(val sizing: Sizing = Sizing.NONE) { +abstract class HtmlComponent { var element: HTMLElement? = null - var size: ComponentSize? = null + var rendered = false fun create(): HTMLElement { var elem =element @@ -30,6 +24,7 @@ } elem = render(document.create) + rendered = true Komp.define(elem, this) @@ -41,11 +36,15 @@ abstract fun render(consumer: TagConsumer): HTMLElement open fun refresh() { - Komp.refresh(element) - - if (sizing != Sizing.NONE) { - // resize children + if (rendered) { + Komp.refresh(element) + } else { + update() } } + open fun update() { + Komp.refresh(element) + } + } diff --git a/build.gradle b/build.gradle index 50230cf..4ce248b 100644 --- a/build.gradle +++ b/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' diff --git a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt b/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt deleted file mode 100644 index 5a16517..0000000 --- a/src/main/kotlin/nl/astraeus/komp/ComponentSize.kt +++ /dev/null @@ -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 -) { - 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") - } - } -} - diff --git a/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt b/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt index b08a831..9655be2 100644 --- a/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt +++ b/src/main/kotlin/nl/astraeus/komp/HtmlComponent.kt @@ -13,15 +13,9 @@ Komp.define(result, component) } -enum class Sizing { - NONE, - HORIZONTAL, - VERTICAL -} - -abstract class HtmlComponent(val sizing: Sizing = Sizing.NONE) { +abstract class HtmlComponent { var element: HTMLElement? = null - var size: ComponentSize? = null + var rendered = false fun create(): HTMLElement { var elem =element @@ -30,6 +24,7 @@ } elem = render(document.create) + rendered = true Komp.define(elem, this) @@ -41,11 +36,15 @@ abstract fun render(consumer: TagConsumer): HTMLElement open fun refresh() { - Komp.refresh(element) - - if (sizing != Sizing.NONE) { - // resize children + if (rendered) { + Komp.refresh(element) + } else { + update() } } + open fun update() { + Komp.refresh(element) + } + } diff --git a/src/main/kotlin/nl/astraeus/komp/Komp.kt b/src/main/kotlin/nl/astraeus/komp/Komp.kt index 4551069..4b234bb 100644 --- a/src/main/kotlin/nl/astraeus/komp/Komp.kt +++ b/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.browser.document -import kotlin.browser.window +import kotlin.collections.component1 +import kotlin.collections.component2 +import kotlin.collections.set /** * User: rnentjes @@ -16,13 +15,6 @@ private val elements: MutableMap = HashMap() private val elementList: MutableList = ArrayList() - private var resizing = false - - init { - window.onresize = { - //Komp.resize() - } - } fun define(element: HTMLElement, component: HtmlComponent) { elements[element] = component @@ -40,8 +32,6 @@ elements[element] = component elementList.add(component) - - //resize() } fun remove(element: HTMLElement) { @@ -76,124 +66,6 @@ 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 { - val result: MutableList = 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 { - 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() - } - } - - }