feat(android): added support for onMeasure and debug props

IjzerenHein · IjzerenHein · commit 3039dff53959 · 2019-09-04T12:11:52.000+02:00
diff --git a/TODO.md b/TODO.md
@@ -12,7 +12,7 @@ Open issues:
 [X] Android `resize` prop support
 [X] Android backgroundImage support
 [X] Android scale transform support
-[ ] Android `debug` prop support (fix measurement event)
+[X] Android `debug` prop support (fix measurement event)
 [ ] Android `align` prop support
 [ ] Android FirebaseUI rounded corners
 [ ] Android inverted scrollview clipping
diff --git a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementDrawable.java b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementDrawable.java
@@ -24,11 +24,15 @@
 
 class RNSharedElementDrawable extends Drawable {
   enum ViewType {
-    NONE,
-    REACTIMAGEVIEW,
-    IMAGEVIEW,
-    PLAIN,
-    GENERIC
+    NONE("none"),
+    REACTIMAGEVIEW("image"),
+    IMAGEVIEW("image"),
+    PLAIN("view"),
+    GENERIC("generic");
+
+    private final String value;
+    ViewType(final String newValue) { value = newValue;}
+    public String getValue() { return value; }
   }
 
   static private String LOG_TAG = "RNSharedElementDrawable";
@@ -182,7 +186,7 @@ public void getOutline(Outline outline) {
     outline.setConvexPath(mPathForBorderRadiusOutline);
   }
 
-  static private ViewType getViewType(View view, RNSharedElementStyle style) {
+  static ViewType getViewType(View view, RNSharedElementStyle style) {
     if (view == null) return ViewType.NONE;
     if (view instanceof ReactImageView) {
       return ViewType.REACTIMAGEVIEW;
diff --git a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java
@@ -11,11 +11,13 @@
 import android.view.View;
 import android.view.ViewGroup;
 
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.UIBlock;
-import com.facebook.react.uimanager.UIManagerModule;
-import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 public class RNSharedElementTransition extends ViewGroup {
     static private String LOG_TAG = "RNSharedElementTransition";
@@ -295,6 +297,16 @@ private void updateLayout() {
                 }
             }
         }
+
+        // Fire events
+        if ((startStyle != null) && !startItem.getHasCalledOnMeasure()) {
+            startItem.setHasCalledOnMeasure(true);
+            fireMeasureEvent("startNode", startItem, startClippedLayout);
+        }
+        if ((endStyle != null) && !endItem.getHasCalledOnMeasure()) {
+            endItem.setHasCalledOnMeasure(true);
+            fireMeasureEvent("endNode", endItem, endClippedLayout);
+        }
     }
 
     private void updateNodeVisibility() {
@@ -413,45 +425,43 @@ private RNSharedElementStyle getInterpolatedStyle(
         return result;
     }
 
-    private void fireMeasureEvent() {
-        /*ReactContext reactContext = (ReactContext)getContext();
-        WritableMap eventData = Arguments.createMap();
+    private void fireMeasureEvent(String name, RNSharedElementTransitionItem item, Rect clippedLayout) {
+        ReactContext reactContext = (ReactContext)getContext();
+        RNSharedElementStyle style = item.getStyle();
+        RNSharedElementContent content = item.getContent();
+        
         WritableMap layoutData = Arguments.createMap();
-        layoutData.putFloat();
-        //eventData.putString("message", "MyMessage");
-        eventData.putString("node", item.name);
-        eventData.putMap("layout", layoutData)
+        layoutData.putDouble("x", PixelUtil.toDIPFromPixel(style.layout.left));
+        layoutData.putDouble("y", PixelUtil.toDIPFromPixel(style.layout.top));
+        layoutData.putDouble("width", PixelUtil.toDIPFromPixel(style.layout.width()));
+        layoutData.putDouble("height", PixelUtil.toDIPFromPixel(style.layout.height()));
+        layoutData.putDouble("visibleX", PixelUtil.toDIPFromPixel(clippedLayout.left));
+        layoutData.putDouble("visibleY", PixelUtil.toDIPFromPixel(clippedLayout.top));
+        layoutData.putDouble("visibleWidth", PixelUtil.toDIPFromPixel(clippedLayout.width()));
+        layoutData.putDouble("visibleHeight", PixelUtil.toDIPFromPixel(clippedLayout.height()));
+        layoutData.putDouble("contentX", PixelUtil.toDIPFromPixel(style.layout.left)); // TODO
+        layoutData.putDouble("contentY", PixelUtil.toDIPFromPixel(style.layout.top)); // TODO
+        layoutData.putDouble("contentWidth", PixelUtil.toDIPFromPixel(style.layout.width())); // TODO
+        layoutData.putDouble("contentHeight", PixelUtil.toDIPFromPixel(style.layout.height())); // TODO
+
+        WritableMap styleData = Arguments.createMap();
+        styleData.putDouble("borderTopLeftRadius", PixelUtil.toDIPFromPixel(style.borderTopLeftRadius));
+        styleData.putDouble("borderTopRightRadius", PixelUtil.toDIPFromPixel(style.borderTopRightRadius));
+        styleData.putDouble("borderBottomLeftRadius", PixelUtil.toDIPFromPixel(style.borderBottomLeftRadius));
+        styleData.putDouble("borderBottomRightRadius", PixelUtil.toDIPFromPixel(style.borderBottomRightRadius));
+
+        WritableMap eventData = Arguments.createMap();
+        eventData.putString("node", name);
+        eventData.putMap("layout", layoutData);
+        RNSharedElementDrawable.ViewType viewType = (content != null)
+            ? RNSharedElementDrawable.getViewType(content.view, style)
+            : RNSharedElementDrawable.ViewType.NONE;
+        eventData.putString("contentType", viewType.getValue());
+        eventData.putMap("style", styleData);
+
         reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
             getId(),
-            "onMeasure",
-            eventData);*/
-
-        /*
-        - (void) fireMeasureEvent:(RNSharedElementTransitionItem*) item layout:(CGRect)layout visibleLayout:(CGRect)visibleLayout contentLayout:(CGRect)contentLayout
-{
-    if (!self.onMeasureNode) return;
-    NSDictionary* eventData = @{
-                                @"node": item.name,
-                                @"layout": @{
-                                        @"x": @(layout.origin.x),
-                                        @"y": @(layout.origin.y),
-                                        @"width": @(layout.size.width),
-                                        @"height": @(layout.height()),
-                                        @"visibleX": @(visibleLayout.origin.x),
-                                        @"visibleY": @(visibleLayout.origin.y),
-                                        @"visibleWidth": @(visibleLayout.size.width),
-                                        @"visibleHeight": @(visibleLayout.height()),
-                                        @"contentX": @(contentLayout.origin.x),
-                                        @"contentY": @(contentLayout.origin.y),
-                                        @"contentWidth": @(contentLayout.size.width),
-                                        @"contentHeight": @(contentLayout.height()),
-                                        },
-                                @"contentType": item.contentTypeName,
-                                @"style": @{
-                                        @"borderRadius": @(item.style.cornerRadius)
-                                        }
-                                };
-    self.onMeasureNode(eventData);
-}*/
+            "onMeasureNode",
+            eventData);
     }
 }
diff --git a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransitionItem.java b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransitionItem.java
@@ -19,6 +19,7 @@ class RNSharedElementTransitionItem {
     private boolean mNeedsContent;
     private RNSharedElementContent mContent;
     private Rect mClippedLayoutCache;
+    private boolean mHasCalledOnMeasure;
 
     RNSharedElementTransitionItem(RNSharedElementNodeManager nodeManager, String name) {
         mNodeManager = nodeManager;
@@ -30,6 +31,7 @@ class RNSharedElementTransitionItem {
         mNeedsContent = false;
         mContent = null;
         mClippedLayoutCache = null;
+        mHasCalledOnMeasure = false;
     }
 
     String getName() {
@@ -103,6 +105,14 @@ RNSharedElementContent getContent() {
         return mContent;
     }
 
+    void setHasCalledOnMeasure(boolean hasCalledOnMeasure) {
+        mHasCalledOnMeasure = hasCalledOnMeasure;
+    }
+
+    boolean getHasCalledOnMeasure() {
+        return mHasCalledOnMeasure;
+    }
+
     View getView() {
         return (mNode != null) ? mNode.getResolvedView() : null;
     }
diff --git a/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransitionManager.java b/android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransitionManager.java
@@ -1,7 +1,10 @@
 package com.ijzerenhein.sharedelement;
 
+import java.util.Map;
+
 import android.view.View;
 
+import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.SimpleViewManager;
@@ -25,6 +28,17 @@ public String getName() {
         return REACT_CLASS;
     }
 
+    @Override
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder()
+            .put(
+                "onMeasureNode",
+                MapBuilder.of(
+                    "phasedRegistrationNames",
+                    MapBuilder.of("bubbled", "onMeasureNode")))
+                    .build();
+    }
+
     @Override
     public RNSharedElementTransition createViewInstance(ThemedReactContext context) {
         return new RNSharedElementTransition(context, mNodeManager);
diff --git a/src/SharedElementTransition.tsx b/src/SharedElementTransition.tsx
@@ -176,6 +176,10 @@ export class SharedElementTransition extends React.Component<
         // $FlowFixMe
         nodeStyle.borderColor = processColor(nodeStyle.borderColor);
       }
+      if (nodeStyle.color) {
+        // $FlowFixMe
+        nodeStyle.color = processColor(nodeStyle.color);
+      }
     }
     return node
       ? {
@@ -214,9 +218,7 @@ export class SharedElementTransition extends React.Component<
 
   renderDebugLayer(name: SharedElementNodeType) {
     const event = this.state[name];
-    if (!event || !this.props.debug) {
-      return undefined;
-    }
+    if (!event || !this.props.debug) return;
     const { layout, style } = event;
     const isContentDifferent =
       layout.x !== layout.contentX ||
@@ -267,7 +269,7 @@ export class SharedElementTransition extends React.Component<
           <Text
             style={[
               debugStyles.text,
-              { color, marginTop: Math.max(style.borderRadius - 7, 3) }
+              { color, marginTop: Math.max((style.borderRadius || 0) - 7, 3) }
             ]}
           >
             {name}
