Support shape overrides and nested component overrides

Author: yiqunw700

crates/dc_bundle/src/definition/view.rs

@@ -334,6 +334,18 @@ impl ViewData {
                 return Some(other.clone());
             }
         }
+        if let Some(View_data_type::Container { 0: Container { shape, .. } }) =
+            other.view_data_type.as_ref()
+        {
+            let other_shape = shape;
+            if let Some(View_data_type::Container { 0: Container { shape, .. } }) =
+                self.view_data_type.as_ref()
+            {
+                if other_shape != shape {
+                    return Some(other.clone());
+                }
+            }
+        }
         return None;
     }
 }
@@ -484,6 +496,12 @@ impl View {
     pub fn find_view_by_id(&self, view_id: &String) -> Option<&View> {
         if view_id.as_str() == self.id {
             return Some(&self);
+        } else if self.id.starts_with("I") {
+            // If this id starts with I, meaning it is a neseted instance in this component.
+            let stripped_id = &self.id[1..];
+            if view_id.ends_with(stripped_id) {
+                return Some(&self);
+            }
         } else if let Some(id) = view_id.split(";").last() {
             // If this is a descendent node of an instance, the last section is the node id
             // of the view in the component. Example: I70:17;29:15

crates/dc_bundle/src/proto/definition/view/view.proto

@@ -115,6 +115,8 @@ message ComponentOverrides {
   reserved 2 to 4;
   ViewStyle style = 1;
   ViewData view_data = 5;
+  // This applys to the case when a nested instance was changed to another variant.
+  optional string variant_id = 6;
 }
 
 // Details on the Figma component that this view is an instance of.

crates/figma_import/src/document.rs

@@ -353,6 +353,7 @@ internal fun InteractionState.changeTo(
     undoInstanceId: String?,
 ) {
     val varKey = getInstanceIdWithKey(instanceNodeId, key)
+    System.err.println("changeTo $varKey $newVariantId")
     val previousVariant = this.variantMemory.put(varKey, newVariantId)
     if (undoInstanceId != null) {
         val undoKey = getInstanceIdWithKey(undoInstanceId, key)
@@ -532,7 +533,7 @@ internal fun InteractionState.invalAnimations() {
 /// using the query, it may still be present but indexed using the variant map if the node is a
 /// variant, or by ID (if queried by name) or name (if queried by ID). So we do a linear search if
 /// the hash lookup and variant lookup fails.
-private fun searchNodes(
+internal fun searchNodes(
     q: NodeQuery,
     nodes: Map<NodeQuery, View>,
     parentViewMap: HashMap<String, HashMap<String, View>>,

crates/figma_import/tests/layout-unit-tests.dcf

@@ -606,6 +606,7 @@ private fun SquooshResolvedNode.cloneSelf(parent: SquooshResolvedNode?): Squoosh
         layoutId = this.layoutId,
         textInfo = this.textInfo,
         unresolvedNodeId = this.unresolvedNodeId,
+        overrideViewData = this.overrideViewData,
         layoutNode = this,
         parent = parent,
         computedLayout = this.computedLayout,

designcompose/src/main/assets/figma/DesignSwitcherDoc_Ljph4e3sC0lHcynfXpoh9f.dcf

@@ -145,7 +145,9 @@ internal fun Modifier.squooshRender(
                         childRenderSelector.selectedRenderChild = null
                     } else {
                         val shape =
-                            if (node.view.data.hasContainer()) {
+                            if (node.overrideViewData?.hasContainer() == true) {
+                                node.overrideViewData!!.container.shape
+                            } else if (node.view.data.hasContainer()) {
                                 node.view.data.container.shape
                             } else {
                                 // If this is text, just render the text and return

designcompose/src/main/java/com/android/designcompose/InteractionState.kt

@@ -19,6 +19,7 @@ package com.android.designcompose.squoosh
 import android.graphics.PointF
 import com.android.designcompose.TextMeasureData
 import com.android.designcompose.definition.view.View
+import com.android.designcompose.definition.view.ViewData
 import com.android.designcompose.definition.view.ViewStyle
 import com.android.designcompose.layout_interface.Layout
 
@@ -38,6 +39,7 @@ internal class SquooshResolvedNode(
     // The node we look at for layout info, if we're in a tree that was derived
     // from other trees (i.e.: the tree that combines the base and transition
     // trees).
+    val overrideViewData: ViewData?,
     val layoutNode: SquooshResolvedNode? = null,
     var firstChild: SquooshResolvedNode? = null,
     var nextSibling: SquooshResolvedNode? = null,

designcompose/src/main/java/com/android/designcompose/squoosh/SquooshAnimate.kt

@@ -30,6 +30,7 @@ import com.android.designcompose.KeyAction
 import com.android.designcompose.KeyEventTracker
 import com.android.designcompose.VariableState
 import com.android.designcompose.common.NodeQuery
+import com.android.designcompose.common.views
 import com.android.designcompose.definition.element.FontStyle
 import com.android.designcompose.definition.element.StrokeAlign
 import com.android.designcompose.definition.element.TextDecoration
@@ -88,6 +89,7 @@ import com.android.designcompose.getTapCallback
 import com.android.designcompose.getVisible
 import com.android.designcompose.getVisibleState
 import com.android.designcompose.isPressed
+import com.android.designcompose.searchNodes
 import com.android.designcompose.squooshNodeVariant
 import com.android.designcompose.squooshRootNode
 import com.android.designcompose.utils.hasScrolling
@@ -143,14 +145,17 @@ internal class SquooshOverlayComposable(val nodeId: String, val extras: FrameExt
 internal class ParentComponentData(
     val parent: ParentComponentData?,
     val instanceId: String,
+    private val instanceName: String,
     val componentInfo: ComponentInfo,
 ) {
     private val preComputedHashCode: Int =
         if (parent != null) {
-            (parent.preComputedHashCode * 31 + instanceId.hashCode()) * 31 +
-                componentInfo.id.hashCode()
+            ((parent.preComputedHashCode * 31 + instanceId.hashCode()) * 31 +
+                instanceName.hashCode()) * 31
+            componentInfo.id.hashCode()
         } else {
-            instanceId.hashCode() * 31 + componentInfo.id.hashCode()
+            (instanceId.hashCode() * 31 + instanceName.hashCode()) * 31 +
+                componentInfo.id.hashCode()
         }
 
     override fun hashCode(): Int {
@@ -166,10 +171,40 @@ internal class ParentComponentData(
         if (preComputedHashCode != other.preComputedHashCode) return false
         if (parent != other.parent) return false
         if (instanceId != other.instanceId) return false
+        if (instanceName != other.instanceName) return false
         if (componentInfo != other.componentInfo) return false
 
         return true
     }
+
+    fun getOverrideStyle(viewName: String, isComponentRoot: Boolean = false): ViewStyle? {
+        if (isComponentRoot && parent == null) {
+            return componentInfo.overridesTableMap[componentInfo.componentSetName]?.styleOrNull
+        }
+        val overrideStyle = componentInfo.overridesTableMap[viewName]?.styleOrNull
+        val parentOverride = parent?.getOverrideStyle("$instanceName:$viewName")
+        return parentOverride ?: overrideStyle
+    }
+
+    fun getOverrideData(viewName: String, isComponentRoot: Boolean = false): ViewData? {
+        if (isComponentRoot && parent == null) {
+            return componentInfo.overridesTableMap[componentInfo.componentSetName]?.viewDataOrNull
+        }
+        val overrideData = componentInfo.overridesTableMap[viewName]?.viewDataOrNull
+        val parentOverride = parent?.getOverrideData("$instanceName:$viewName")
+        return parentOverride ?: overrideData
+    }
+
+    fun getOverrideVariant(viewName: String, isComponentRoot: Boolean = false): String? {
+        if (isComponentRoot) {
+            return parent?.getOverrideVariant(instanceName)
+        } else {
+            val overrideVariant =
+                componentInfo.overridesTableMap[viewName]?.takeIf { it.hasVariantId() }?.variantId
+            val parentOverride = parent?.getOverrideVariant("$instanceName:$viewName")
+            return parentOverride ?: overrideVariant
+        }
+    }
 }
 
 /// Iterate over a given view tree recursively, applying customizations that will select
@@ -216,16 +251,15 @@ internal fun resolveVariantsRecursively(
     // need to get a different layout id.
     if (viewFromTree.hasComponentInfo()) {
         parentComps =
-            ParentComponentData(parentComponents, viewFromTree.id, viewFromTree.componentInfo)
+            ParentComponentData(
+                parentComponents,
+                viewFromTree.id,
+                viewFromTree.name,
+                viewFromTree.componentInfo,
+            )
 
-        overrideStyle =
-            viewFromTree.componentInfo.overridesTableMap[
-                    viewFromTree.componentInfo.componentSetName]
-                ?.styleOrNull
-        overrideViewData =
-            viewFromTree.componentInfo.overridesTableMap[
-                    viewFromTree.componentInfo.componentSetName]
-                ?.viewDataOrNull
+        overrideStyle = parentComps.getOverrideStyle(viewFromTree.name, isComponentRoot = true)
+        overrideViewData = parentComps.getOverrideData(viewFromTree.name, isComponentRoot = true)
 
         // Ensure that the children of this component get unique layout ids, even though there
         // may be multiple instances of the same component in one tree.
@@ -240,6 +274,17 @@ internal fun resolveVariantsRecursively(
             .squooshNodeVariant(viewFromTree.id, customizations.getKey(), document)
             ?.let { view = it }
 
+        parentComps.getOverrideVariant(viewFromTree.name, isComponentRoot = true)?.let {
+            searchNodes(
+                    NodeQuery.NodeId(it),
+                    document.c.document.views(),
+                    document.c.variantViewMap,
+                    document.c.variantPropertyMap,
+                    document.c.nodeIdMap,
+                )
+                ?.let { v -> view = v }
+        }
+
         // If we didn't replace the component because of an interaction, we might want to replace it
         // because of a variant customization.
         if (
@@ -281,10 +326,8 @@ internal fun resolveVariantsRecursively(
             variantTransition.selectedVariant(viewFromTree, view, customVariantTransition)
         }
     } else {
-        overrideViewData =
-            parentComps?.componentInfo?.overridesTableMap?.get(viewFromTree.name)?.viewDataOrNull
-        overrideStyle =
-            parentComps?.componentInfo?.overridesTableMap?.get(viewFromTree.name)?.styleOrNull
+        overrideViewData = parentComps?.getOverrideData(viewFromTree.name)
+        overrideStyle = parentComps?.getOverrideStyle(viewFromTree.name)
     }
 
     // Calculate the style we're going to use. If we have an override style then we have to apply
@@ -356,7 +399,15 @@ internal fun resolveVariantsRecursively(
 
     // If this is a text node being replaced, don't store textInfo into resolvedView
     val resolvedTextInfo = if (replacementComponent != null) null else textInfo
-    val resolvedView = SquooshResolvedNode(view, style, layoutId, resolvedTextInfo, viewFromTree.id)
+    val resolvedView =
+        SquooshResolvedNode(
+            view,
+            style,
+            layoutId,
+            resolvedTextInfo,
+            viewFromTree.id,
+            overrideViewData,
+        )
 
     var skipChildren = false // Set to true for customizations that replace children
     var skipComposableList =
@@ -619,6 +670,7 @@ internal fun generateReplacementListChildNode(
             layoutId = layoutId,
             textInfo = null,
             unresolvedNodeId = "list-child-${node.unresolvedNodeId}-${childIdx}",
+            overrideViewData = null,
             firstChild = null,
             nextSibling = null,
             parent = node,

designcompose/src/main/java/com/android/designcompose/squoosh/SquooshRender.kt

@@ -57,7 +57,6 @@ const val TAG = "DesignCompose"
 class MainActivity : ComponentActivity() {
     private lateinit var currentDisplay:
         MutableState<Triple<String, @Composable () -> Unit, String?>>
-    private lateinit var enableRendererToggle: MutableState<Boolean>
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)

designcompose/src/main/java/com/android/designcompose/squoosh/SquooshResolvedNode.kt

@@ -133,7 +133,7 @@ class ComponentOverrides {
     fun testComponent_overrideTextProperty() {
         with(composeTestRule) {
             with(onDCDocAnyNode(ComponentOverridesTestDoc)) {
-                onNodeWithTag("#button").performTouchInput { down(center) }
+                onNodeWithTag("#ok_button").performTouchInput { down(center) }
                 captureRootRoboImage("button_overrideTextProperty")
             }
         }