Broken image fix, printability

example-app/webpack.config.d/config.js

@@ -1,6 +1,6 @@
 if (config.devServer) {
     config.devServer.historyApiFallback = true // route all pages to index.html for development
-    config.devServer.port = 8081
+    config.devServer.port = 8085
     config.devServer.headers = {
         "Cross-Origin-Opener-Policy": "same-origin",
         "Cross-Origin-Embedder-Policy": "require-corp",

library/library.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'library'
-    spec.version                  = 'dev-SNAPSHOT'
+    spec.version                  = 'main-SNAPSHOT'
     spec.homepage                 = ''
     spec.source                   = { :http=> ''}
     spec.authors                  = ''
@@ -43,7 +43,7 @@ Pod::Spec.new do |spec|
                 fi
                 set -ev
                 REPO_ROOT="$PODS_TARGET_SRCROOT"
-                "$REPO_ROOT/../../picme-frontend/gradlew" -p "$REPO_ROOT" $KOTLIN_PROJECT_PATH:syncFramework \
+                "$REPO_ROOT/../gradlew" -p "$REPO_ROOT" $KOTLIN_PROJECT_PATH:syncFramework \
                     -Pkotlin.native.cocoapods.platform=$PLATFORM_NAME \
                     -Pkotlin.native.cocoapods.archs="$ARCHS" \
                     -Pkotlin.native.cocoapods.configuration="$CONFIGURATION"

library/src/androidMain/kotlin/com/lightningkite/kiteui/views/RView.android.kt

@@ -25,6 +25,8 @@ import kotlin.math.roundToInt
 actual abstract class RView(context: RContext) : RViewHelper(context) {
     abstract val native: View
 
+    actual override var showOnPrint: Boolean = true
+
     open fun defaultLayoutParams(): LayoutParams =
         FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
 

library/src/commonHtmlMain/kotlin/com/lightningkite/kiteui/views/KiteUiCss.kt

@@ -14,6 +14,33 @@ class KiteUiCss(val dynamicCss: DynamicCss) {
         // basis rules
         //language=CSS
         @Suppress("CssUnresolvedCustomProperty")
+        dynamicCss.rule("""
+            @media print {
+                .do-not-print{
+                    display: none !important;
+                }
+                .scroll-vertical {
+                    overflow: hidden auto;
+                }
+                body > div {
+                    height: unset;
+                    max-width: 100vw;
+                }
+    
+                body {
+                    height: unset;
+                    max-height: unset;
+                    max-width: 100vw;
+                    overflow: visible;
+                }
+                .kiteui-col > * {
+                    flex-grow: 0 !important;
+                    flex-shrink: 0 !important;
+                    flex-basis: unset !important;
+                }
+            }
+        """.trimIndent())
+        @Suppress("CssUnresolvedCustomProperty")
         dynamicCss.rule(
             """
             /*noinspection ALL*/@media {
@@ -805,6 +832,14 @@ class KiteUiCss(val dynamicCss: DynamicCss) {
                     },
                     includeMaybeTransition = dis.useBackground
                 )
+                val print = subtheme[PrintSemantic]
+                theme(
+                    print.theme,
+                    diff = theme,
+                    asSelectors = asSelectors.map { "$it$cs$cs" },
+                    includeMaybeTransition = print.useBackground,
+                    mediaQuery = "print"
+                )
             }
             sub(null, asSelectors = listOf(""))
             sub(

library/src/commonHtmlMain/kotlin/com/lightningkite/kiteui/views/RView.commonHtml.kt

@@ -9,6 +9,14 @@ import kotlin.random.Random
 actual abstract class RView(context: RContext) : RViewHelper(context) {
     var native = FutureElement()
 
+    actual override var showOnPrint: Boolean = true
+        set(value) {
+            if(value)
+                native.classes.remove("do-not-print")
+            else
+                native.classes.add("do-not-print")
+        }
+
     protected actual override fun opacitySet(value: Double) {
         native.style.opacity = value.toString()
     }

library/src/commonHtmlMain/kotlin/com/lightningkite/kiteui/views/direct/ContainingView.commonHtml.kt

@@ -82,12 +82,21 @@ actual class RowOrCol actual constructor(context: RContext) : RView(context) {
     init {
         native.tag = "div"
         native.style.flexDirection = "column"
+        native.classes += "kiteui-flex"
+        native.classes += "kiteui-col"
     }
     private var complex = false
     actual var vertical: Boolean = true
         set(value) {
             field = value
             native.style.flexDirection = if(value) "column" else "row"
+            if(value) {
+                native.classes -= "kiteui-row"
+                native.classes += "kiteui-col"
+            } else {
+                native.classes -= "kiteui-col"
+                native.classes += "kiteui-row"
+            }
         }
     override fun internalAddChild(index: Int, view: RView) {
         super.internalAddChild(index, view)

library/src/commonHtmlMain/kotlin/com/lightningkite/kiteui/views/direct/ImageView.commonHtml.kt

@@ -25,32 +25,32 @@ actual class ImageView actual constructor(context: RContext) : RView(context) {
             } else if(value == field) return
             field = value
             when (value) {
-                null -> setSrc("")
+                null -> setSrc(value, "")
                 is ImageRemote -> {
-                    setSrc(value.url)
+                    setSrc(value, value.url)
                 }
 
                 is ImageRaw -> {
-                    setSrc(createObjectURL(value.data))
+                    setSrc(value, createObjectURL(value.data))
                 }
 
                 is ImageResource -> {
-                    setSrc(context.basePath + value.relativeUrl)
+                    setSrc(value, context.basePath + value.relativeUrl)
                 }
 
                 is ImageLocal -> {
-                    setSrc(createObjectURL(value.file))
+                    setSrc(value, createObjectURL(value.file))
                 }
 
                 is ImageVector -> {
-                    setSrc(value.vectorToSvgDataUrl())
+                    setSrc(value, value.vectorToSvgDataUrl())
                 }
 
                 else -> {}
             }
         }
 
-    fun setSrc(url: String) = nativeSetSrc(url, onError = { source = null }, onSuccess = {})
+    fun setSrc(source: ImageSource?, url: String) = nativeSetSrc(url, onError = { if(source == this.source) this.source = null }, onSuccess = {})
 
     actual var scaleType: ImageScaleType = ImageScaleType.Fit
         set(value) {

library/src/commonMain/kotlin/com/lightningkite/kiteui/models/Theme.kt

@@ -228,7 +228,7 @@ data object SubtextSemantic : Semantic {
     ).withoutBack
 }
 
-data object InvalidSemantic: Semantic {
+data object InvalidSemantic : Semantic {
     override val key: String = "ivd"
     override fun default(theme: Theme): ThemeAndBack = theme.copy(
         id = key,
@@ -237,22 +237,32 @@ data object InvalidSemantic: Semantic {
     ).withBack
 }
 
-data object EmphasizedSemantic: Semantic {
+data object EmphasizedSemantic : Semantic {
     override val key: String = "emf"
     override fun default(theme: Theme): ThemeAndBack = theme.copy(
         id = key,
         font = theme.font.copy(italic = true)
     ).withoutBack
 }
 
-data object EmbeddedSemantic: Semantic {
+data object EmbeddedSemantic : Semantic {
     override val key: String = "ebd"
     override fun default(theme: Theme): ThemeAndBack = theme.copy(
         id = key,
         background = theme.background.closestColor().highlight(-0.1f)
     ).withBack
 }
 
+data object PrintSemantic : Semantic {
+    override val key: String = "print"
+    override fun default(theme: Theme): ThemeAndBack = theme.copy(
+        id = key,
+        background = Color.white,
+        foreground = Color.black,
+        outline = theme.background,
+        outlineWidth = 2.px,
+    ).withBack
+}
 
 
 val H1Semantic = HeaderSizeSemantic(1)
@@ -528,7 +538,7 @@ class Theme(
         dialogTransitions = dialogTransitions,
         transitionDuration = transitionDuration,
         revert = if (revert) this else this.revert,
-        derivations = this.derivations + derivations
+        derivations = this.derivations + derivations,
     )
 
     fun copy(

library/src/commonMain/kotlin/com/lightningkite/kiteui/views/RView.kt

@@ -8,6 +8,7 @@ import com.lightningkite.kiteui.reactive.*
 import kotlin.random.Random
 
 expect abstract class RView : RViewHelper {
+    override var showOnPrint: Boolean
     override fun opacitySet(value: Double)
     override fun existsSet(value: Boolean)
     override fun visibleSet(value: Boolean)
@@ -41,6 +42,8 @@ expect inline fun RView.withoutAnimation(action: () -> Unit)
 abstract class RViewHelper(override val context: RContext) : CalculationContext, ViewWriter() {
     var additionalTestingData: Any? = null
 
+    abstract var showOnPrint: Boolean
+
     var opacity: Double = 1.0
         set(value) {
             field = value

library/src/commonMain/kotlin/com/lightningkite/kiteui/views/l2/AppNav.kt

@@ -66,6 +66,7 @@ fun ViewWriter.appNavHamburger(setup: AppNav.() -> Unit) {
     val showMenu = Property(false)
     padded - navSpacing - col {
         bar - row {
+            showOnPrint = false
             setup(appNav)
             toggleButton {
                 checked bind showMenu
@@ -102,6 +103,7 @@ fun ViewWriter.appNavTop(setup: AppNav.() -> Unit) {
     // Nav 2 top, horizontal
     padded - navSpacing  - col {
         bar - row {
+            showOnPrint = false
             setup(appNav)
             if (Platform.current != Platform.Web) button {
                 icon(Icon.arrowBack, "Go Back")
@@ -131,6 +133,7 @@ fun ViewWriter.appNavBottomTabs(setup: AppNav.() -> Unit) {
     padded - navSpacing  - col {
 // Nav 3 top and bottom (top)
         bar - row {
+            showOnPrint = false
             setup(appNav)
             if (Platform.current != Platform.Web) button {
                 icon(Icon.arrowBack, "Go Back")
@@ -151,6 +154,7 @@ fun ViewWriter.appNavBottomTabs(setup: AppNav.() -> Unit) {
         expanding - navigatorView(screenNavigator)
         //Nav 3 - top and bottom (bottom/tabs)
         navGroupTabs(appNav.navItemsProperty) {
+            showOnPrint = false
             ::exists { appNav.existsProperty.await() && !SoftInputOpen.await() }
         }
     }
@@ -161,6 +165,7 @@ fun ViewWriter.appNavTopAndLeft(setup: AppNav.() -> Unit) {
     padded - navSpacing  - col {
 // Nav 4 left and top - add dropdown for user info
         bar - row {
+            showOnPrint = false
             setup(appNav)
             if (Platform.current != Platform.Web) button {
                 icon(Icon.arrowBack, "Go Back")
@@ -182,6 +187,7 @@ fun ViewWriter.appNavTopAndLeft(setup: AppNav.() -> Unit) {
         }
         navSpacing  - row {
             navSpacing  - nav - scrolls - navGroupColumn(appNav.navItemsProperty) {
+                showOnPrint = false
                 ::exists { appNav.navItemsProperty.await().size > 1 && appNav.existsProperty.await() }
             }
             expanding - navigatorView(screenNavigator)

library/src/iosMain/kotlin/com/lightningkite/kiteui/views/RView.ios.kt

@@ -31,6 +31,8 @@ actual abstract class RView(context: RContext) : RViewHelper(context) {
     abstract val native: UIView
     var tag: Any? = null
 
+    actual override var showOnPrint: Boolean = true
+
     var sizeConstraints: SizeConstraints?
         get() = native.extensionSizeConstraints
         set(value) {