Native animation, ClipPath spec conformance, Pattern element, Mask element, cache invalidation

android/src/main/java/com/horcrux/svg/Brush.java

@@ -9,6 +9,9 @@
 
 package com.horcrux.svg;
 
+import android.graphics.Bitmap;
+import android.graphics.BitmapShader;
+import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.LinearGradient;
 import android.graphics.Matrix;
@@ -23,19 +26,29 @@
 import com.facebook.react.common.ReactConstants;
 
 class Brush {
-    private BrushType mType = BrushType.LINEAR_GRADIENT;
+    private BrushType mType;
     private final ReadableArray mPoints;
     private ReadableArray mColors;
     private final boolean mUseObjectBoundingBox;
+    private boolean mUseContentObjectBoundingBox;
     private Matrix mMatrix;
     private Rect mUserSpaceBoundingBox;
+    PatternShadowNode mPattern;
 
     Brush(BrushType type, ReadableArray points, BrushUnits units) {
         mType = type;
         mPoints = points;
         mUseObjectBoundingBox = units == BrushUnits.OBJECT_BOUNDING_BOX;
     }
 
+    void setContentUnits(BrushUnits units) {
+        mUseContentObjectBoundingBox = units == BrushUnits.OBJECT_BOUNDING_BOX;
+    }
+
+    void setPattern(PatternShadowNode pattern) {
+        mPattern = pattern;
+    }
+
     enum BrushType {
         LINEAR_GRADIENT(0),
         RADIAL_GRADIENT(1),
@@ -105,6 +118,35 @@ void setupPaint(Paint paint, RectF pathBoundingBox, float scale, float opacity)
         float offsetX = rect.left;
         float offsetY = rect.top;
 
+        if (mType == BrushType.PATTERN) {
+            double x = PropHelper.fromRelative(mPoints.getString(0), width, offsetX, scale, paint.getTextSize());
+            double y = PropHelper.fromRelative(mPoints.getString(1), height, offsetY, scale, paint.getTextSize());
+            double w = PropHelper.fromRelative(mPoints.getString(2), width, offsetX, scale, paint.getTextSize());
+            double h = PropHelper.fromRelative(mPoints.getString(3), height, offsetY, scale, paint.getTextSize());
+
+            RectF vbRect = mPattern.getViewBox();
+            RectF eRect = new RectF((float)x, (float)y, (float)w, (float)h);
+            Matrix mViewBoxMatrix = ViewBox.getTransform(vbRect, eRect, mPattern.mAlign, mPattern.mMeetOrSlice);
+
+            Bitmap bitmap = Bitmap.createBitmap(
+                    (int) w,
+                    (int) h,
+                    Bitmap.Config.ARGB_8888);
+            Canvas canvas = new Canvas(bitmap);
+            canvas.concat(mViewBoxMatrix);
+            mPattern.draw(canvas, new Paint(), opacity);
+
+            Matrix patternMatrix = new Matrix();
+            if (mMatrix != null) {
+                patternMatrix.preConcat(mMatrix);
+            }
+
+            BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
+            bitmapShader.setLocalMatrix(patternMatrix);
+            paint.setShader(bitmapShader);
+            return;
+        }
+
         int stopsCount = mColors.size() / 5;
         int[] stopsColors = new int[stopsCount];
         float[] stops = new float[stopsCount];
@@ -170,12 +212,5 @@ void setupPaint(Paint paint, RectF pathBoundingBox, float scale, float opacity)
             radialGradient.setLocalMatrix(radialMatrix);
             paint.setShader(radialGradient);
         }
-        // else {
-            // todo: pattern support
-
-            //Shader mShader1 = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
-            //paint.setShader(mShader1);
-            //bitmap.recycle();
-        // }
     }
 }

android/src/main/java/com/horcrux/svg/GroupShadowNode.java

@@ -10,9 +10,14 @@
 package com.horcrux.svg;
 
 import android.graphics.Canvas;
+import android.graphics.Matrix;
 import android.graphics.Paint;
 import android.graphics.Path;
+import android.graphics.Rect;
 import android.graphics.RectF;
+import android.graphics.Region;
+import android.os.Build;
+import android.support.annotation.RequiresApi;
 
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.ReactShadowNode;
@@ -79,7 +84,7 @@ public void run(ReactShadowNode lNode) {
                     }
 
                     int count = node.saveAndSetupCanvas(canvas);
-                    node.draw(canvas, paint, opacity * mOpacity);
+                    node.render(canvas, paint, opacity * mOpacity);
                     RectF r = node.getClientRect();
                     if (r != null) {
                         groupRect.union(r);
@@ -119,14 +124,66 @@ protected Path getPath(final Canvas canvas, final Paint paint) {
         traverseChildren(new NodeRunnable() {
             public void run(ReactShadowNode node) {
                 if (node instanceof VirtualNode) {
-                    path.addPath(((VirtualNode)node).getPath(canvas, paint));
+                    VirtualNode n = (VirtualNode)node;
+                    Matrix transform = n.mMatrix;
+                    path.addPath(n.getPath(canvas, paint), transform);
                 }
             }
         });
 
         return path;
     }
 
+    protected Path getPath(final Canvas canvas, final Paint paint, final Region.Op op) {
+        final Path path = new Path();
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+            final Path.Op pop = Path.Op.valueOf(op.name());
+            traverseChildren(new NodeRunnable() {
+                @RequiresApi(api = Build.VERSION_CODES.KITKAT)
+                public void run(ReactShadowNode node) {
+                    if (node instanceof VirtualNode) {
+                        VirtualNode n = (VirtualNode)node;
+                        Matrix transform = n.mMatrix;
+                        Path p2;
+                        if (n instanceof GroupShadowNode) {
+                            p2 = ((GroupShadowNode)n).getPath(canvas, paint, op);
+                        } else {
+                            p2 = n.getPath(canvas, paint);
+                        }
+                        p2.transform(transform);
+                        path.op(p2, pop);
+                    }
+                }
+            });
+        } else {
+            Rect clipBounds = canvas.getClipBounds();
+            final Region bounds = new Region(clipBounds);
+            final Region r = new Region();
+            traverseChildren(new NodeRunnable() {
+                public void run(ReactShadowNode node) {
+                    if (node instanceof VirtualNode) {
+                        VirtualNode n = (VirtualNode)node;
+                        Matrix transform = n.mMatrix;
+                        Path p2;
+                        if (n instanceof GroupShadowNode) {
+                            p2 = ((GroupShadowNode)n).getPath(canvas, paint, op);
+                        } else {
+                            p2 = n.getPath(canvas, paint);
+                        }
+                        p2.transform(transform);
+                        Region r2 = new Region();
+                        r2.setPath(p2, bounds);
+                        r.op(r2, op);
+                    }
+                }
+            });
+            path.addPath(r.getBoundaryPath());
+        }
+
+        return path;
+    }
+
     @Override
     public int hitTest(final float[] src) {
         if (!mInvertible) {

android/src/main/java/com/horcrux/svg/ImageShadowNode.java

@@ -77,13 +77,13 @@ public void setY(String y) {
         markUpdated();
     }
 
-    @ReactProp(name = "width")
+    @ReactProp(name = "imagewidth")
     public void setWidth(String width) {
         mW = width;
         markUpdated();
     }
 
-    @ReactProp(name = "height")
+    @ReactProp(name = "imageheight")
     public void seHeight(String height) {
         mH = height;
         markUpdated();

android/src/main/java/com/horcrux/svg/MaskShadowNode.java

@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2015-present, Horcrux.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+package com.horcrux.svg;
+
+import android.graphics.Matrix;
+
+import com.facebook.common.logging.FLog;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.ReactConstants;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import javax.annotation.Nullable;
+
+/**
+ * Shadow node for virtual Mask definition view
+ */
+class MaskShadowNode extends GroupShadowNode {
+
+    String mX;
+    String mY;
+    String mWidth;
+    String mHeight;
+    Brush.BrushUnits mMaskUnits;
+    Brush.BrushUnits mMaskContentUnits;
+
+    private static final float[] sRawMatrix = new float[]{
+        1, 0, 0,
+        0, 1, 0,
+        0, 0, 1
+    };
+    private Matrix mMatrix = null;
+
+    @ReactProp(name = "x")
+    public void setX(String x) {
+        mX = x;
+        markUpdated();
+    }
+
+    @ReactProp(name = "y")
+    public void setY(String y) {
+        mY = y;
+        markUpdated();
+    }
+
+    @ReactProp(name = "maskwidth")
+    public void setWidth(String width) {
+        mWidth = width;
+        markUpdated();
+    }
+
+    @ReactProp(name = "maskheight")
+    public void setHeight(String height) {
+        mHeight = height;
+        markUpdated();
+    }
+
+    @ReactProp(name = "maskUnits")
+    public void setMaskUnits(int maskUnits) {
+        switch (maskUnits) {
+            case 0:
+                mMaskUnits = Brush.BrushUnits.OBJECT_BOUNDING_BOX;
+                break;
+            case 1:
+                mMaskUnits = Brush.BrushUnits.USER_SPACE_ON_USE;
+                break;
+        }
+        markUpdated();
+    }
+
+    @ReactProp(name = "maskContentUnits")
+    public void setMaskContentUnits(int maskContentUnits) {
+        switch (maskContentUnits) {
+            case 0:
+                mMaskContentUnits = Brush.BrushUnits.OBJECT_BOUNDING_BOX;
+                break;
+            case 1:
+                mMaskContentUnits = Brush.BrushUnits.USER_SPACE_ON_USE;
+                break;
+        }
+        markUpdated();
+    }
+
+    @ReactProp(name = "maskTransform")
+    public void setMaskTransform(@Nullable ReadableArray matrixArray) {
+        if (matrixArray != null) {
+            int matrixSize = PropHelper.toMatrixData(matrixArray, sRawMatrix, mScale);
+            if (matrixSize == 6) {
+                if (mMatrix == null) {
+                    mMatrix = new Matrix();
+                }
+                mMatrix.setValues(sRawMatrix);
+            } else if (matrixSize != -1) {
+                FLog.w(ReactConstants.TAG, "RNSVG: Transform matrices must be of size 6");
+            }
+        } else {
+            mMatrix = null;
+        }
+
+        markUpdated();
+    }
+
+    @Override
+    protected void saveDefinition() {
+        if (mName != null) {
+            SvgViewShadowNode svg = getSvgShadowNode();
+            svg.defineMask(this, mName);
+        }
+    }
+}