Add support for user-customizable design elements (#350)

camaelon · web-flow · commit d56988736e94 · 2021-07-21T12:30:41.000-07:00
diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt
@@ -22,29 +22,29 @@ import android.os.Looper
 import android.util.Log
 import androidx.annotation.FloatRange
 import androidx.compose.foundation.Canvas
-//import androidx.compose.foundation.Image
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.LayoutScopeMarker
-//import androidx.compose.material.Button
-//import androidx.compose.material.Text
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.runtime.*
 import androidx.compose.runtime.snapshots.SnapshotStateObserver
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.layout.*
 import androidx.compose.ui.platform.InspectorValueInfo
 import androidx.compose.ui.platform.debugInspectorInfo
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.unit.Constraints
-import androidx.compose.ui.unit.Density
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.*
 import androidx.compose.ui.util.fastForEach
 import androidx.compose.ui.util.fastForEachIndexed
 import androidx.constraintlayout.core.parser.CLKey
@@ -63,7 +63,6 @@ import androidx.constraintlayout.core.widgets.ConstraintWidget.DimensionBehaviou
 import androidx.constraintlayout.core.widgets.analyzer.BasicMeasure
 import androidx.constraintlayout.core.widgets.analyzer.BasicMeasure.Measure.TRY_GIVEN_DIMENSIONS
 import androidx.constraintlayout.core.widgets.analyzer.BasicMeasure.Measure.USE_GIVEN_DIMENSIONS
-//import com.google.accompanist.coil.rememberCoilPainter
 import org.intellij.lang.annotations.Language
 import java.lang.StringBuilder
 import java.util.*
@@ -1567,7 +1566,7 @@ open class EditableJSONLayout(@Language("json5") content: String) :
     }
 }
 
-data class DesignElement(var id: String, var type: String, var param: String)
+data class DesignElement(var id: String, var type: String, var params: HashMap<String, String>)
 
 class JSONConstraintSet(@Language("json5") content: String,
                         @Language("json5") overrideVariables: String? = null)
@@ -2183,27 +2182,53 @@ internal open class Measurer : BasicMeasure.Measurer, DesignInfoProvider {
     fun createDesignElements() {
         for (element in designElements) {
             var id = element.id
-            when (element.type) {
-                /* // commenting for now until we provide hooks
-                "button" -> {
-                    Button(
-                        modifier = Modifier.layoutId(id),
-                        onClick = {},
-                    ) {
-                        Text(text = element.param)
+            var function = DesignElements.map[element.type]
+            if (function != null) {
+                function(id, element.params)
+            } else {
+                when (element.type) {
+                    "button" -> {
+                        val text = element.params["text"] ?: "text"
+                        var style = TextStyle.Default
+                        val fontSizeString = element.params["size"]
+                        if (fontSizeString != null) {
+                            val fontSize = fontSizeString.toFloat().sp
+                            style = TextStyle(fontSize = fontSize)
+                        }
+                        BasicText(modifier = Modifier
+                            .layoutId(id)
+                            .clip(RoundedCornerShape(20))
+                            .background(Color.LightGray)
+                            .padding(8.dp),
+                            text = text, style = style)
+                    }
+                    "text" -> {
+                        val text = element.params["text"] ?: "text"
+                        var style = TextStyle.Default
+                        val fontSizeString = element.params["size"]
+                        if (fontSizeString != null) {
+                            val fontSize = fontSizeString.toFloat().sp
+                            style = TextStyle(fontSize = fontSize)
+                        }
+                        BasicText(modifier = Modifier.layoutId(id),
+                            text = text, style = style)
+                    }
+                    "textfield" -> {
+                        val text = element.params["text"] ?: "text"
+                        BasicTextField(
+                            modifier = Modifier.layoutId(id),
+                            value = text,
+                            onValueChange = {}
+                        )
+                    }
+                    "image" -> {
+                        Image(
+                            modifier = Modifier.layoutId(id),
+                            painter = painterResource(id = android.R.drawable.ic_menu_gallery),
+                            contentDescription = "Placeholder Image"
+                        )
                     }
                 }
-                "text" -> {
-                    Text(modifier = Modifier.layoutId(id),
-                         text=element.param)
-                }
-                "image" -> {
-                    Image(modifier = Modifier.layoutId(id),
-                        painter = rememberCoilPainter(element.param),
-                        contentDescription = ""
-                    )
-                }
-                 */
             }
         }
     }
@@ -2215,6 +2240,13 @@ internal open class Measurer : BasicMeasure.Measurer, DesignInfoProvider {
     }
 }
 
+object DesignElements {
+    var map = HashMap<String, @Composable (String, HashMap<String, String>) -> Unit >()
+    fun define(name: String, function : @Composable (String, HashMap<String, String>) -> Unit) {
+        map[name] = function
+    }
+}
+
 internal fun buildMapping(state: State, measurables: List<Measurable>) {
     measurables.fastForEach { measurable ->
         val parentData = measurable.parentData as? ConstraintLayoutParentData
diff --git a/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintSetParser.kt b/constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintSetParser.kt
@@ -695,11 +695,20 @@ fun parseDesignElementsJSON(content: String, list: ArrayList<DesignElement>) {
                     val element = element.get(elementName) as CLObject
                     System.out.printf("element found <$elementName>")
                     val type = element.getStringOrNull("type")
-                    val param = element.getStringOrNull("param")
-                    val text = element.getStringOrNull("text")
-                    val parameter = if (param != null) param else text
-                    var designElement = DesignElement(elementName, type, parameter)
-                    list.add(designElement)
+                    if (type != null) {
+                        var parameters = HashMap<String, String>()
+                        val size = element.size()
+                        for (j in 0.. size -1) {
+                            val key = element[j] as CLKey
+                            val paramName = key.content()
+                            val paramValue = key.value?.content()
+                            if (paramValue != null) {
+                                parameters[paramName] = paramValue
+                            }
+                        }
+                        var designElement = DesignElement(elementName, type, parameters)
+                        list.add(designElement)
+                    }
                 }
             }
         }
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
@@ -5,10 +5,16 @@ import android.view.View
 import android.widget.FrameLayout
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.Image
+import androidx.compose.material.Button
+import androidx.compose.material.Text
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.ComposeView
 import androidx.constraintlayout.compose.*
 import androidx.constraintlayout.coreAndroid.PhoneState
+import com.google.accompanist.coil.rememberCoilPainter
 
 class MainActivity : AppCompatActivity() {
     private var mFrameLayout: FrameLayout? = null
@@ -29,9 +35,37 @@ class MainActivity : AppCompatActivity() {
         map.put(30, "Cycle RotationZ")
         map.put(31, "Cycle RotationXY")
 
+        defineDesignElements()
         debugServer.start()
     }
 
+    private fun defineDesignElements() {
+        DesignElements.define("wow") {
+                id, params ->
+            val text = params["text"] ?: "text"
+            Text(modifier = Modifier.layoutId(id),
+                text= text)
+        }
+        DesignElements.define("button") {
+                id, params ->
+            val text = params["text"] ?: "text"
+            Button(modifier = Modifier.layoutId(id),
+                onClick = {},
+            ) {
+                Text(text = text)
+            }
+        }
+        DesignElements.define("image") {
+                id, params ->
+            val url = params["url"] ?: "url"
+            val description = params["description"] ?: "Image Description"
+            Image(modifier = Modifier.layoutId(id),
+                painter = rememberCoilPainter(url),
+                contentDescription = description
+            )
+        }
+    }
+
     @ExperimentalMaterialApi
     private fun show(com: ComposeView) {
         println(" $composeNum ")
