fix software-mansion#1592 : add marker support on Rect, Line, Ellipse…

…, Circle and Group
mlecoq · May 10, 2022 · f451eb2 · f451eb2
1 parent 845cb88
commit f451eb2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 1 deletion.
diff --git a/android/src/main/java/com/horcrux/svg/CircleView.java b/android/src/main/java/com/horcrux/svg/CircleView.java
@@ -19,6 +19,8 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.ArrayList;
+
 @SuppressLint("ViewConstructor")
 class CircleView extends RenderableView {
     private SVGLength mCx;
@@ -56,6 +58,13 @@ Path getPath(Canvas canvas, Paint paint) {
         double r = relativeOnOther(mR);
 
         path.addCircle((float) cx, (float) cy, (float) r, Path.Direction.CW);
+
+        elements = new ArrayList<>();
+        elements.add(new PathElement(ElementType.kCGPathElementMoveToPoint, new Point[]{new Point(mCx.value,mCy.value - mR.value )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value,mCy.value - mR.value ), new Point(mCx.value + mR.value,mCy.value  )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{ new Point(mCx.value + mR.value,mCy.value  ),  new Point(mCx.value,mCy.value  + mR.value ) }));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value,mCy.value  + mR.value ),new Point(mCx.value - mR.value,mCy.value  )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value - mR.value,mCy.value  ), new Point(mCx.value,mCy.value - mR.value ) }));
         return path;
     }
 }
diff --git a/android/src/main/java/com/horcrux/svg/EllipseView.java b/android/src/main/java/com/horcrux/svg/EllipseView.java
@@ -19,6 +19,8 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.ArrayList;
+
 @SuppressLint("ViewConstructor")
 class EllipseView extends RenderableView {
     private SVGLength mCx;
@@ -64,6 +66,13 @@ Path getPath(Canvas canvas, Paint paint) {
         RectF oval = new RectF((float) (cx - rx), (float) (cy - ry), (float) (cx + rx), (float) (cy + ry));
         path.addOval(oval, Path.Direction.CW);
 
+        elements = new ArrayList<>();
+        elements.add(new PathElement(ElementType.kCGPathElementMoveToPoint, new Point[]{new Point(mCx.value,mCy.value - mRy.value )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value,mCy.value - mRy.value ), new Point(mCx.value + mRx.value,mCy.value  )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{ new Point(mCx.value + mRx.value,mCy.value  ),  new Point(mCx.value,mCy.value  + mRy.value ) }));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value,mCy.value  + mRy.value ),new Point(mCx.value - mRx.value,mCy.value  )}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mCx.value - mRx.value,mCy.value  ), new Point(mCx.value,mCy.value - mRy.value ) }));
+
         return path;
     }
 }
diff --git a/android/src/main/java/com/horcrux/svg/GroupView.java b/android/src/main/java/com/horcrux/svg/GroupView.java
@@ -25,6 +25,8 @@
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.view.ReactViewGroup;
 
+import java.util.ArrayList;
+
 import javax.annotation.Nullable;
 
 @SuppressLint("ViewConstructor")
@@ -79,13 +81,16 @@ void draw(final Canvas canvas, final Paint paint, final float opacity) {
         setupGlyphContext(canvas);
         clip(canvas, paint);
         drawGroup(canvas, paint, opacity);
+        renderMarkers(canvas, paint, opacity);
     }
 
     void drawGroup(final Canvas canvas, final Paint paint, final float opacity) {
         pushGlyphContext();
         final SvgView svg = getSvgView();
         final GroupView self = this;
         final RectF groupRect = new RectF();
+        elements = new ArrayList<>();
+
         for (int i = 0; i < getChildCount(); i++) {
             View child = getChildAt(i);
             if (child instanceof MaskView) {
@@ -116,6 +121,10 @@ void drawGroup(final Canvas canvas, final Paint paint, final float opacity) {
                 if (node.isResponsible()) {
                     svg.enableTouchEvents();
                 }
+
+                if(node.elements != null){
+                  elements.addAll(node.elements);
+                }
             } else if (child instanceof SvgView) {
                 SvgView svgView = (SvgView)child;
                 svgView.drawChildren(canvas);

diff --git a/android/src/main/java/com/horcrux/svg/LineView.java b/android/src/main/java/com/horcrux/svg/LineView.java
@@ -18,6 +18,8 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.ArrayList;
+
 @SuppressLint("ViewConstructor")
 class LineView extends RenderableView {
     private SVGLength mX1;
@@ -63,6 +65,11 @@ Path getPath(Canvas canvas, Paint paint) {
 
         path.moveTo((float) x1, (float) y1);
         path.lineTo((float) x2, (float) y2);
+
+        elements = new ArrayList<>();
+        elements.add(new PathElement(ElementType.kCGPathElementMoveToPoint, new Point[]{new Point(mX1.value,mY1.value)}));
+        elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mX2.value,mY2.value)}));
+
         return path;
     }
 }
diff --git a/android/src/main/java/com/horcrux/svg/RectView.java b/android/src/main/java/com/horcrux/svg/RectView.java
@@ -20,6 +20,8 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.ArrayList;
+
 @SuppressLint("ViewConstructor")
 class RectView extends RenderableView {
     private SVGLength mX;
@@ -107,6 +109,15 @@ Path getPath(Canvas canvas, Paint paint) {
             path.addRect((float) x, (float) y, (float) (x + w), (float) (y + h), Path.Direction.CW);
             path.close(); // Ensure isSimplePath = false such that rect doesn't become represented using integers
         }
-        return path;
+
+
+      elements = new ArrayList<>();
+      elements.add(new PathElement(ElementType.kCGPathElementMoveToPoint, new Point[]{new Point(mX.value,mY.value)}));
+      elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mX.value + mW.value,mY.value)}));
+      elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mX.value + mW.value,mY.value + mH.value)}));
+      elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mX.value,mY.value + mH.value)}));
+      elements.add(new PathElement(ElementType.kCGPathElementAddLineToPoint, new Point[]{new Point(mX.value,mY.value)}));
+
+      return path;
     }
 }