feat: define marker element

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

@@ -0,0 +1,124 @@
+/*
+ * 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.annotation.SuppressLint;
+import android.graphics.RectF;
+
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+@SuppressLint("ViewConstructor")
+class MarkerView extends GroupView {
+
+    private SVGLength mRefX;
+    private SVGLength mRefY;
+    private SVGLength mMarkerWidth;
+    private SVGLength mMarkerHeight;
+    private String mMarkerUnits;
+    private String mOrient;
+
+    private float mMinX;
+    private float mMinY;
+    private float mVbWidth;
+    private float mVbHeight;
+    String mAlign;
+    int mMeetOrSlice;
+
+    public MarkerView(ReactContext reactContext) {
+        super(reactContext);
+    }
+
+    @ReactProp(name = "refX")
+    public void setRefX(Dynamic refX) {
+        mRefX = SVGLength.from(refX);
+        invalidate();
+    }
+
+    @ReactProp(name = "refY")
+    public void setRefY(Dynamic refY) {
+        mRefY = SVGLength.from(refY);
+        invalidate();
+    }
+
+    @ReactProp(name = "markerWidth")
+    public void setMarkerWidth(Dynamic markerWidth) {
+        mMarkerWidth = SVGLength.from(markerWidth);
+        invalidate();
+    }
+
+    @ReactProp(name = "markerHeight")
+    public void setMarkerHeight(Dynamic markerHeight) {
+        mMarkerHeight = SVGLength.from(markerHeight);
+        invalidate();
+    }
+
+    @ReactProp(name = "markerUnits")
+    public void setMarkerUnits(String markerUnits) {
+        mMarkerUnits = markerUnits;
+        invalidate();
+    }
+
+    @ReactProp(name = "orient")
+    public void setOrient(String orient) {
+        mOrient = orient;
+        invalidate();
+    }
+
+    @ReactProp(name = "minX")
+    public void setMinX(float minX) {
+        mMinX = minX;
+        invalidate();
+    }
+
+    @ReactProp(name = "minY")
+    public void setMinY(float minY) {
+        mMinY = minY;
+        invalidate();
+    }
+
+    @ReactProp(name = "vbWidth")
+    public void setVbWidth(float vbWidth) {
+        mVbWidth = vbWidth;
+        invalidate();
+    }
+
+    @ReactProp(name = "vbHeight")
+    public void setVbHeight(float vbHeight) {
+        mVbHeight = vbHeight;
+        invalidate();
+    }
+
+    @ReactProp(name = "align")
+    public void setAlign(String align) {
+        mAlign = align;
+        invalidate();
+    }
+
+    @ReactProp(name = "meetOrSlice")
+    public void setMeetOrSlice(int meetOrSlice) {
+        mMeetOrSlice = meetOrSlice;
+        invalidate();
+    }
+
+
+    RectF getViewBox() {
+        return new RectF(mMinX * mScale, mMinY * mScale, (mMinX + mVbWidth) * mScale, (mMinY + mVbHeight) * mScale);
+    }
+
+    @Override
+    void saveDefinition() {
+        if (mName != null) {
+            SvgView svg = getSvgView();
+            svg.defineMarker(this, mName);
+        }
+    }
+}

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

@@ -51,7 +51,7 @@
  */
 class RenderableViewManager extends ViewGroupManager<VirtualView> {
 
-    enum SVGClass {
+    private enum SVGClass {
         RNSVGGroup,
         RNSVGPath,
         RNSVGText,
@@ -70,6 +70,7 @@ enum SVGClass {
         RNSVGRadialGradient,
         RNSVGPattern,
         RNSVGMask,
+        RNSVGMarker,
     }
 
     class RenderableShadowNode extends LayoutShadowNode {
@@ -855,6 +856,72 @@ public void setMaskTransform(MaskView node, @Nullable ReadableArray matrixArray)
         }
     }
 
+    static class MarkerManager extends GroupViewManager {
+        MarkerManager() {
+            super(SVGClass.RNSVGMarker);
+        }
+
+        @ReactProp(name = "refX")
+        public void setRefX(MarkerView node, Dynamic refX) {
+            node.setRefX(refX);
+        }
+
+        @ReactProp(name = "refY")
+        public void setRefY(MarkerView node, Dynamic refY) {
+            node.setRefY(refY);
+        }
+
+        @ReactProp(name = "markerWidth")
+        public void setMarkerWidth(MarkerView node, Dynamic markerWidth) {
+            node.setMarkerWidth(markerWidth);
+        }
+
+        @ReactProp(name = "markerHeight")
+        public void setMarkerHeight(MarkerView node, Dynamic markerHeight) {
+            node.setMarkerHeight(markerHeight);
+        }
+
+        @ReactProp(name = "markerUnits")
+        public void setMarkerUnits(MarkerView node, String markerUnits) {
+            node.setMarkerUnits(markerUnits);
+        }
+
+        @ReactProp(name = "orient")
+        public void setOrient(MarkerView node, String orient) {
+            node.setOrient(orient);
+        }
+
+        @ReactProp(name = "minX")
+        public void setMinX(MarkerView node, float minX) {
+            node.setMinX(minX);
+        }
+
+        @ReactProp(name = "minY")
+        public void setMinY(MarkerView node, float minY) {
+            node.setMinY(minY);
+        }
+
+        @ReactProp(name = "vbWidth")
+        public void setVbWidth(MarkerView node, float vbWidth) {
+            node.setVbWidth(vbWidth);
+        }
+
+        @ReactProp(name = "vbHeight")
+        public void setVbHeight(MarkerView node, float vbHeight) {
+            node.setVbHeight(vbHeight);
+        }
+
+        @ReactProp(name = "align")
+        public void setAlign(MarkerView node, String align) {
+            node.setAlign(align);
+        }
+
+        @ReactProp(name = "meetOrSlice")
+        public void setMeetOrSlice(MarkerView node, int meetOrSlice) {
+            node.setMeetOrSlice(meetOrSlice);
+        }
+    }
+
     static class LinearGradientManager extends RenderableViewManager {
         LinearGradientManager() {
             super(SVGClass.RNSVGLinearGradient);
@@ -1162,6 +1229,8 @@ protected VirtualView createViewInstance(@Nonnull ThemedReactContext reactContex
                 return new PatternView(reactContext);
             case RNSVGMask:
                 return new MaskView(reactContext);
+            case RNSVGMarker:
+                return new MarkerView(reactContext);
             default:
                 throw new IllegalStateException("Unexpected type " + svgClass.toString());
         }

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

@@ -47,6 +47,7 @@ public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext rea
                 new RadialGradientManager(),
                 new PatternManager(),
                 new MaskManager(),
+                new MarkerManager(),
                 new SvgViewManager());
     }
 

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

@@ -133,6 +133,7 @@ public int reactTagForTouch(float touchX, float touchY) {
 
     private final Map<String, VirtualView> mDefinedClipPaths = new HashMap<>();
     private final Map<String, VirtualView> mDefinedTemplates = new HashMap<>();
+    private final Map<String, VirtualView> mDefinedMarkers = new HashMap<>();
     private final Map<String, VirtualView> mDefinedMasks = new HashMap<>();
     private final Map<String, Brush> mDefinedBrushes = new HashMap<>();
     private Canvas mCanvas;
@@ -412,4 +413,12 @@ void defineMask(VirtualView mask, String maskRef) {
     VirtualView getDefinedMask(String maskRef) {
         return mDefinedMasks.get(maskRef);
     }
+
+    void defineMarker(VirtualView marker, String markerRef) {
+        mDefinedMasks.put(markerRef, marker);
+    }
+
+    VirtualView getDefinedMarker(String markerRef) {
+        return mDefinedMasks.get(markerRef);
+    }
 }

ios/Elements/RNSVGMarker.h

@@ -0,0 +1,21 @@
+
+#import "RNSVGGroup.h"
+#import "RNSVGLength.h"
+
+@interface RNSVGMarker : RNSVGGroup
+
+@property (nonatomic, strong) RNSVGLength *refX;
+@property (nonatomic, strong) RNSVGLength *refY;
+@property (nonatomic, strong) RNSVGLength *markerWidth;
+@property (nonatomic, strong) RNSVGLength *markerHeight;
+@property (nonatomic, assign) NSString *markerUnits;
+@property (nonatomic, assign) NSString *orient;
+
+@property (nonatomic, assign) CGFloat minX;
+@property (nonatomic, assign) CGFloat minY;
+@property (nonatomic, assign) CGFloat vbWidth;
+@property (nonatomic, assign) CGFloat vbHeight;
+@property (nonatomic, strong) NSString *align;
+@property (nonatomic, assign) RNSVGVBMOS meetOrSlice;
+
+@end