diff --git a/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/App.kt b/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/App.kt index 57ae7d8..c7bc5a0 100644 --- a/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/App.kt +++ b/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/App.kt @@ -9,11 +9,16 @@ import io.kvision.CoreModule import io.kvision.FontAwesomeModule import io.kvision.html.div import io.kvision.maps.Maps +import io.kvision.maps.externals.leaflet.layer.tile.GridLayer import io.kvision.module import io.kvision.panel.root import io.kvision.redux.ReduxStore import io.kvision.require import io.kvision.startApplication +import kotlin.time.Duration.Companion.seconds +import kotlinx.js.timers.setInterval +import org.w3c.dom.Image +import org.w3c.dom.asList class App( @@ -37,10 +42,47 @@ class App( override fun start(state: Map) { this.appState = state.toMutableMap() - root("kvapp") { + val root = root("kvapp") { div("Kafkatorio Web Map") add(kvMaps) } + + kvMaps.leafletMap { + invalidateSize(true) + eachLayer({ + if (it is GridLayer<*>) { + it.redraw() + } + }) +// this.asDynamic()._fadeAnimated = false + } + + setInterval(1.seconds) { + val doc = root.getElement()?.ownerDocument + val window = doc!!.defaultView!! + + doc + .querySelectorAll("img.leaflet-tile-loaded") + .asList() + .filterIsInstance() + .map { img -> + val imgSrc = img.src.substringBeforeLast('?') + println("fetching $imgSrc") + + val newImg = Image() + + newImg.onload = { + + window.requestAnimationFrame { + println("image loaded ${newImg.src}") + img.setAttribute("dynamic-reload", "true") + img.src = newImg.src + Unit + } + } + newImg.src = imgSrc //+ "?t=${currentTimeMillis()}" + } + } } override fun dispose(): Map { @@ -49,7 +91,6 @@ class App( } - fun main() { startApplication( { @@ -69,6 +110,6 @@ fun main() { BootstrapIconsModule, FontAwesomeModule, ChartModule, - CoreModule + CoreModule, ) } diff --git a/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/map.kt b/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/map.kt index bd3717e..c614b94 100644 --- a/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/map.kt +++ b/modules/web-map/src/main/kotlin/dev/adamko/kafkatorio/webmap/map.kt @@ -2,9 +2,12 @@ package dev.adamko.kafkatorio.webmap import io.kvision.maps.Maps import io.kvision.maps.Maps.Companion.L +import io.kvision.maps.externals.leaflet.DoneCallback import io.kvision.maps.externals.leaflet.geo.CRS import io.kvision.maps.externals.leaflet.geo.LatLng +import io.kvision.maps.externals.leaflet.layer.tile.TileLayer import io.kvision.utils.px +import org.w3c.dom.HTMLElement // //val polyline = Maps.L.polyline( @@ -19,6 +22,8 @@ import io.kvision.utils.px // noClip = true //} +private const val tileUrlTemplate = """http://localhost:9073/tiles/s1/z{z}/x{x}/y{y}.png""" + fun createFactorioMap() = Maps { width = 800.px height = 800.px @@ -27,8 +32,8 @@ fun createFactorioMap() = Maps { configureLeafletMap { setView(center = LatLng(0, 0), zoom = 0) - L.tileLayer( - """http://localhost:9073/tiles/s1/z{z}/x{x}/y{y}.png""" + val baseTileLayer: TileLayer = L.tileLayer( + tileUrlTemplate ) { attribution = "kafkatorio" tileSize = 256 @@ -43,8 +48,19 @@ fun createFactorioMap() = Maps { noWrap = true updateWhenIdle = false updateWhenZooming = true - }.addTo(this) + } + val currentTileOnLoad: (DoneCallback, HTMLElement) -> Unit = + baseTileLayer.asDynamic()._tileOnLoad as (DoneCallback, HTMLElement) -> Unit + baseTileLayer.asDynamic()._tileOnLoad = { done: DoneCallback, tile: HTMLElement -> + if (tile.hasAttribute("dynamic-reload")) { + tile.removeAttribute("dynamic-reload") + } else { + currentTileOnLoad(done, tile) + } + } + + baseTileLayer.addTo(this) L.scale { metric = true @@ -56,5 +72,6 @@ fun createFactorioMap() = Maps { options.zoomSnap = 0 options.zoomDelta = 0.1 +// options.fadeAnimation = false } }