diff --git a/android/src/main/java/com/horcrux/svg/CircleView.java b/android/src/main/java/com/horcrux/svg/CircleView.java index b4bb861b..c8224ee6 100644 --- a/android/src/main/java/com/horcrux/svg/CircleView.java +++ b/android/src/main/java/com/horcrux/svg/CircleView.java @@ -31,19 +31,19 @@ class CircleView extends RenderableView { @ReactProp(name = "cx") public void setCx(Dynamic cx) { - mCx = getLengthFromDynamic(cx); + mCx = SVGLength.from(cx); invalidate(); } @ReactProp(name = "cy") public void setCy(Dynamic cy) { - mCy = getLengthFromDynamic(cy); + mCy = SVGLength.from(cy); invalidate(); } @ReactProp(name = "r") public void setR(Dynamic r) { - mR = getLengthFromDynamic(r); + mR = SVGLength.from(r); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/EllipseView.java b/android/src/main/java/com/horcrux/svg/EllipseView.java index 202d2995..9b842284 100644 --- a/android/src/main/java/com/horcrux/svg/EllipseView.java +++ b/android/src/main/java/com/horcrux/svg/EllipseView.java @@ -32,25 +32,25 @@ class EllipseView extends RenderableView { @ReactProp(name = "cx") public void setCx(Dynamic cx) { - mCx = getLengthFromDynamic(cx); + mCx = SVGLength.from(cx); invalidate(); } @ReactProp(name = "cy") public void setCy(Dynamic cy) { - mCy = getLengthFromDynamic(cy); + mCy = SVGLength.from(cy); invalidate(); } @ReactProp(name = "rx") public void setRx(Dynamic rx) { - mRx = getLengthFromDynamic(rx); + mRx = SVGLength.from(rx); invalidate(); } @ReactProp(name = "ry") public void setRy(Dynamic ry) { - mRy = getLengthFromDynamic(ry); + mRy = SVGLength.from(ry); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/ImageView.java b/android/src/main/java/com/horcrux/svg/ImageView.java index c8fcebf4..f24ae2be 100644 --- a/android/src/main/java/com/horcrux/svg/ImageView.java +++ b/android/src/main/java/com/horcrux/svg/ImageView.java @@ -16,7 +16,6 @@ import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; -import android.graphics.Region; import android.net.Uri; import com.facebook.common.executors.UiThreadImmediateExecutorService; @@ -61,25 +60,25 @@ class ImageView extends RenderableView { @ReactProp(name = "x") public void setX(Dynamic x) { - mX = getLengthFromDynamic(x); + mX = SVGLength.from(x); invalidate(); } @ReactProp(name = "y") public void setY(Dynamic y) { - mY = getLengthFromDynamic(y); + mY = SVGLength.from(y); invalidate(); } @ReactProp(name = "width") public void setWidth(Dynamic width) { - mW = getLengthFromDynamic(width); + mW = SVGLength.from(width); invalidate(); } @ReactProp(name = "height") public void setHeight(Dynamic height) { - mH = getLengthFromDynamic(height); + mH = SVGLength.from(height); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/LineView.java b/android/src/main/java/com/horcrux/svg/LineView.java index 601079b0..63b31084 100644 --- a/android/src/main/java/com/horcrux/svg/LineView.java +++ b/android/src/main/java/com/horcrux/svg/LineView.java @@ -31,25 +31,25 @@ class LineView extends RenderableView { @ReactProp(name = "x1") public void setX1(Dynamic x1) { - mX1 = getLengthFromDynamic(x1); + mX1 = SVGLength.from(x1); invalidate(); } @ReactProp(name = "y1") public void setY1(Dynamic y1) { - mY1 = getLengthFromDynamic(y1); + mY1 = SVGLength.from(y1); invalidate(); } @ReactProp(name = "x2") public void setX2(Dynamic x2) { - mX2 = getLengthFromDynamic(x2); + mX2 = SVGLength.from(x2); invalidate(); } @ReactProp(name = "y2") public void setY2(Dynamic y2) { - mY2 = getLengthFromDynamic(y2); + mY2 = SVGLength.from(y2); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/LinearGradientView.java b/android/src/main/java/com/horcrux/svg/LinearGradientView.java index c3081dcf..d1577c0b 100644 --- a/android/src/main/java/com/horcrux/svg/LinearGradientView.java +++ b/android/src/main/java/com/horcrux/svg/LinearGradientView.java @@ -44,25 +44,25 @@ class LinearGradientView extends DefinitionView { @ReactProp(name = "x1") public void setX1(Dynamic x1) { - mX1 = getLengthFromDynamic(x1); + mX1 = SVGLength.from(x1); invalidate(); } @ReactProp(name = "y1") public void setY1(Dynamic y1) { - mY1 = getLengthFromDynamic(y1); + mY1 = SVGLength.from(y1); invalidate(); } @ReactProp(name = "x2") public void setX2(Dynamic x2) { - mX2 = getLengthFromDynamic(x2); + mX2 = SVGLength.from(x2); invalidate(); } @ReactProp(name = "y2") public void setY2(Dynamic y2) { - mY2 = getLengthFromDynamic(y2); + mY2 = SVGLength.from(y2); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/MaskView.java b/android/src/main/java/com/horcrux/svg/MaskView.java index cd4cf785..88d4cd1d 100644 --- a/android/src/main/java/com/horcrux/svg/MaskView.java +++ b/android/src/main/java/com/horcrux/svg/MaskView.java @@ -48,25 +48,25 @@ class MaskView extends GroupView { @ReactProp(name = "x") public void setX(Dynamic x) { - mX = getLengthFromDynamic(x); + mX = SVGLength.from(x); invalidate(); } @ReactProp(name = "y") public void setY(Dynamic y) { - mY = getLengthFromDynamic(y); + mY = SVGLength.from(y); invalidate(); } @ReactProp(name = "width") public void setWidth(Dynamic width) { - mW = getLengthFromDynamic(width); + mW = SVGLength.from(width); invalidate(); } @ReactProp(name = "height") public void setHeight(Dynamic height) { - mH = getLengthFromDynamic(height); + mH = SVGLength.from(height); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/PatternView.java b/android/src/main/java/com/horcrux/svg/PatternView.java index 9af7ed85..11400d4a 100644 --- a/android/src/main/java/com/horcrux/svg/PatternView.java +++ b/android/src/main/java/com/horcrux/svg/PatternView.java @@ -52,25 +52,25 @@ class PatternView extends GroupView { @ReactProp(name = "x") public void setX(Dynamic x) { - mX = getLengthFromDynamic(x); + mX = SVGLength.from(x); invalidate(); } @ReactProp(name = "y") public void setY(Dynamic y) { - mY = getLengthFromDynamic(y); + mY = SVGLength.from(y); invalidate(); } @ReactProp(name = "width") public void setWidth(Dynamic width) { - mW = getLengthFromDynamic(width); + mW = SVGLength.from(width); invalidate(); } @ReactProp(name = "height") public void setHeight(Dynamic height) { - mH = getLengthFromDynamic(height); + mH = SVGLength.from(height); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/RadialGradientView.java b/android/src/main/java/com/horcrux/svg/RadialGradientView.java index 2613fb18..128f8c7b 100644 --- a/android/src/main/java/com/horcrux/svg/RadialGradientView.java +++ b/android/src/main/java/com/horcrux/svg/RadialGradientView.java @@ -45,37 +45,37 @@ class RadialGradientView extends DefinitionView { @ReactProp(name = "fx") public void setFx(Dynamic fx) { - mFx = getLengthFromDynamic(fx); + mFx = SVGLength.from(fx); invalidate(); } @ReactProp(name = "fy") public void setFy(Dynamic fy) { - mFy = getLengthFromDynamic(fy); + mFy = SVGLength.from(fy); invalidate(); } @ReactProp(name = "rx") public void setRx(Dynamic rx) { - mRx = getLengthFromDynamic(rx); + mRx = SVGLength.from(rx); invalidate(); } @ReactProp(name = "ry") public void setRy(Dynamic ry) { - mRy = getLengthFromDynamic(ry); + mRy = SVGLength.from(ry); invalidate(); } @ReactProp(name = "cx") public void setCx(Dynamic cx) { - mCx = getLengthFromDynamic(cx); + mCx = SVGLength.from(cx); invalidate(); } @ReactProp(name = "cy") public void setCy(Dynamic cy) { - mCy = getLengthFromDynamic(cy); + mCy = SVGLength.from(cy); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/RectView.java b/android/src/main/java/com/horcrux/svg/RectView.java index 2a3171ff..91355ab9 100644 --- a/android/src/main/java/com/horcrux/svg/RectView.java +++ b/android/src/main/java/com/horcrux/svg/RectView.java @@ -34,37 +34,37 @@ class RectView extends RenderableView { @ReactProp(name = "x") public void setX(Dynamic x) { - mX = getLengthFromDynamic(x); + mX = SVGLength.from(x); invalidate(); } @ReactProp(name = "y") public void setY(Dynamic y) { - mY = getLengthFromDynamic(y); + mY = SVGLength.from(y); invalidate(); } @ReactProp(name = "width") public void setWidth(Dynamic width) { - mW = getLengthFromDynamic(width); + mW = SVGLength.from(width); invalidate(); } @ReactProp(name = "height") public void setHeight(Dynamic height) { - mH = getLengthFromDynamic(height); + mH = SVGLength.from(height); invalidate(); } @ReactProp(name = "rx") public void setRx(Dynamic rx) { - mRx = getLengthFromDynamic(rx); + mRx = SVGLength.from(rx); invalidate(); } @ReactProp(name = "ry") public void setRy(Dynamic ry) { - mRy = getLengthFromDynamic(ry); + mRy = SVGLength.from(ry); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/android/src/main/java/com/horcrux/svg/RenderableView.java index 669a8420..cc2bd8a4 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableView.java +++ b/android/src/main/java/com/horcrux/svg/RenderableView.java @@ -183,7 +183,7 @@ abstract public class RenderableView extends VirtualView { @ReactProp(name = "strokeWidth") public void setStrokeWidth(Dynamic strokeWidth) { - this.strokeWidth = getLengthFromDynamic(strokeWidth); + this.strokeWidth = SVGLength.from(strokeWidth); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/SVGLength.java b/android/src/main/java/com/horcrux/svg/SVGLength.java index 6be08f77..b3022549 100644 --- a/android/src/main/java/com/horcrux/svg/SVGLength.java +++ b/android/src/main/java/com/horcrux/svg/SVGLength.java @@ -1,5 +1,10 @@ package com.horcrux.svg; +import com.facebook.react.bridge.Dynamic; +import com.facebook.react.bridge.ReadableArray; + +import java.util.ArrayList; + // https://www.w3.org/TR/SVG/types.html#InterfaceSVGLength enum SVGLengthUnitType { SVG_LENGTHTYPE_UNKNOWN, @@ -84,4 +89,53 @@ class SVGLength { } } } + + static SVGLength from(Dynamic dynamic) { + switch (dynamic.getType()) { + case Number: + return new SVGLength(dynamic.asDouble()); + case String: + return new SVGLength(dynamic.asString()); + default: + return new SVGLength(); + } + } + + static String toString(Dynamic dynamic) { + switch (dynamic.getType()) { + case Number: + return String.valueOf(dynamic.asDouble()); + case String: + return dynamic.asString(); + default: + return null; + } + } + + static ArrayList arrayFrom(Dynamic dynamic) { + switch (dynamic.getType()) { + case Number: { + ArrayList list = new ArrayList<>(1); + list.add(new SVGLength(dynamic.asDouble())); + return list; + } + case Array: { + ReadableArray arr = dynamic.asArray(); + int size = arr.size(); + ArrayList list = new ArrayList<>(size); + for (int i = 0; i < size; i++) { + Dynamic val = arr.getDynamic(i); + list.add(from(val)); + } + return list; + } + case String: { + ArrayList list = new ArrayList<>(1); + list.add(new SVGLength(dynamic.asString())); + return list; + } + default: + return null; + } + } } diff --git a/android/src/main/java/com/horcrux/svg/SvgView.java b/android/src/main/java/com/horcrux/svg/SvgView.java index 173f43d5..320de0bd 100644 --- a/android/src/main/java/com/horcrux/svg/SvgView.java +++ b/android/src/main/java/com/horcrux/svg/SvgView.java @@ -21,6 +21,7 @@ import android.util.Base64; import android.view.View; import android.view.ViewParent; +import com.facebook.react.bridge.Dynamic; import com.facebook.react.bridge.ReactContext; import com.facebook.react.uimanager.DisplayMetricsHolder; import com.facebook.react.uimanager.ReactCompoundView; @@ -116,8 +117,8 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC private float mMinY; private float mVbWidth; private float mVbHeight; - private String mbbWidth; - private String mbbHeight; + private SVGLength mbbWidth; + private SVGLength mbbHeight; private String mAlign; private int mMeetOrSlice; private final Matrix mInvViewBoxMatrix = new Matrix(); @@ -177,15 +178,15 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC } @ReactProp(name = "bbWidth") - public void setVbWidth(String bbWidth) { - mbbWidth = bbWidth; + public void setBbWidth(Dynamic bbWidth) { + mbbWidth = SVGLength.from(bbWidth); invalidate(); clearChildCache(); } @ReactProp(name = "bbHeight") - public void setVbHeight(String bbHeight) { - mbbHeight = bbHeight; + public void setBbHeight(Dynamic bbHeight) { + mbbHeight = SVGLength.from(bbHeight); invalidate(); clearChildCache(); } diff --git a/android/src/main/java/com/horcrux/svg/SvgViewManager.java b/android/src/main/java/com/horcrux/svg/SvgViewManager.java index ba868957..1ef27013 100644 --- a/android/src/main/java/com/horcrux/svg/SvgViewManager.java +++ b/android/src/main/java/com/horcrux/svg/SvgViewManager.java @@ -11,6 +11,7 @@ package com.horcrux.svg; import android.util.SparseArray; +import com.facebook.react.bridge.Dynamic; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.annotations.ReactProp; import com.facebook.react.views.view.ReactViewGroup; @@ -89,13 +90,13 @@ class SvgViewManager extends ReactViewManager { } @ReactProp(name = "bbWidth") - public void setVbWidth(SvgView node, String bbWidth) { - node.setVbWidth(bbWidth); + public void setBbWidth(SvgView node, Dynamic bbWidth) { + node.setBbWidth(bbWidth); } @ReactProp(name = "bbHeight") - public void setVbHeight(SvgView node, String bbHeight) { - node.setVbHeight(bbHeight); + public void setBbHeight(SvgView node, Dynamic bbHeight) { + node.setBbHeight(bbHeight); } @ReactProp(name = "align") diff --git a/android/src/main/java/com/horcrux/svg/TextPathView.java b/android/src/main/java/com/horcrux/svg/TextPathView.java index d328b599..7e5e9fa5 100644 --- a/android/src/main/java/com/horcrux/svg/TextPathView.java +++ b/android/src/main/java/com/horcrux/svg/TextPathView.java @@ -44,7 +44,7 @@ class TextPathView extends TextView { @ReactProp(name = "startOffset") public void setStartOffset(Dynamic startOffset) { - mStartOffset = getLengthFromDynamic(startOffset); + mStartOffset = SVGLength.from(startOffset); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/TextView.java b/android/src/main/java/com/horcrux/svg/TextView.java index 7424832e..22be697d 100644 --- a/android/src/main/java/com/horcrux/svg/TextView.java +++ b/android/src/main/java/com/horcrux/svg/TextView.java @@ -54,7 +54,7 @@ class TextView extends GroupView { @ReactProp(name = "textLength") public void setTextLength(Dynamic length) { - mTextLength = getLengthFromDynamic(length); + mTextLength = SVGLength.from(length); invalidate(); } @@ -72,7 +72,7 @@ class TextView extends GroupView { @ReactProp(name = "baselineShift") public void setBaselineShift(Dynamic baselineShift) { - mBaselineShift = getStringFromDynamic(baselineShift); + mBaselineShift = SVGLength.toString(baselineShift); invalidate(); } @@ -100,31 +100,31 @@ class TextView extends GroupView { @ReactProp(name = "rotate") public void setRotate(Dynamic rotate) { - mRotate = getLengthArrayFromDynamic(rotate); + mRotate = SVGLength.arrayFrom(rotate); invalidate(); } @ReactProp(name = "dx") public void setDeltaX(Dynamic deltaX) { - mDeltaX = getLengthArrayFromDynamic(deltaX); + mDeltaX = SVGLength.arrayFrom(deltaX); invalidate(); } @ReactProp(name = "dy") public void setDeltaY(Dynamic deltaY) { - mDeltaY = getLengthArrayFromDynamic(deltaY); + mDeltaY = SVGLength.arrayFrom(deltaY); invalidate(); } @ReactProp(name = "x") public void setPositionX(Dynamic positionX) { - mPositionX = getLengthArrayFromDynamic(positionX); + mPositionX = SVGLength.arrayFrom(positionX); invalidate(); } @ReactProp(name = "y") public void setPositionY(Dynamic positionY) { - mPositionY = getLengthArrayFromDynamic(positionY); + mPositionY = SVGLength.arrayFrom(positionY); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/UseView.java b/android/src/main/java/com/horcrux/svg/UseView.java index b156f2de..c5b14d5f 100644 --- a/android/src/main/java/com/horcrux/svg/UseView.java +++ b/android/src/main/java/com/horcrux/svg/UseView.java @@ -40,25 +40,25 @@ class UseView extends RenderableView { @ReactProp(name = "x") public void setX(Dynamic x) { - mX = getLengthFromDynamic(x); + mX = SVGLength.from(x); invalidate(); } @ReactProp(name = "y") public void setY(Dynamic y) { - mY = getLengthFromDynamic(y); + mY = SVGLength.from(y); invalidate(); } @ReactProp(name = "width") public void setWidth(Dynamic width) { - mW = getLengthFromDynamic(width); + mW = SVGLength.from(width); invalidate(); } @ReactProp(name = "height") public void setHeight(Dynamic height) { - mH = getLengthFromDynamic(height); + mH = SVGLength.from(height); invalidate(); } diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java index 20142d3e..07d28da0 100644 --- a/android/src/main/java/com/horcrux/svg/VirtualView.java +++ b/android/src/main/java/com/horcrux/svg/VirtualView.java @@ -544,52 +544,4 @@ abstract public class VirtualView extends ReactViewGroup { return mClientRect; } - SVGLength getLengthFromDynamic(Dynamic dynamic) { - switch (dynamic.getType()) { - case Number: - return new SVGLength(dynamic.asDouble()); - case String: - return new SVGLength(dynamic.asString()); - default: - return new SVGLength(); - } - } - - String getStringFromDynamic(Dynamic dynamic) { - switch (dynamic.getType()) { - case Number: - return String.valueOf(dynamic.asDouble()); - case String: - return dynamic.asString(); - default: - return null; - } - } - - ArrayList getLengthArrayFromDynamic(Dynamic dynamic) { - switch (dynamic.getType()) { - case Number: { - ArrayList list = new ArrayList<>(1); - list.add(new SVGLength(dynamic.asDouble())); - return list; - } - case Array: { - ReadableArray arr = dynamic.asArray(); - int size = arr.size(); - ArrayList list = new ArrayList<>(size); - for (int i = 0; i < size; i++) { - Dynamic val = arr.getDynamic(i); - list.add(getLengthFromDynamic(val)); - } - return list; - } - case String: { - ArrayList list = new ArrayList<>(1); - list.add(new SVGLength(dynamic.asString())); - return list; - } - default: - return null; - } - } } diff --git a/elements/Svg.js b/elements/Svg.js index 8cc6dd9e..92017e0d 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -41,10 +41,10 @@ export default class Svg extends Shape { setNativeProps = props => { const { width, height } = props; if (width) { - props.bbWidth = String(width); + props.bbWidth = width; } if (height) { - props.bbHeight = String(height); + props.bbHeight = height; } this.root.setNativeProps(props); }; @@ -98,12 +98,10 @@ export default class Svg extends Shape { return ( -@property (nonatomic, strong) NSString *bbWidth; -@property (nonatomic, strong) NSString *bbHeight; +@property (nonatomic, strong) RNSVGLength *bbWidth; +@property (nonatomic, strong) RNSVGLength *bbHeight; @property (nonatomic, assign) CGFloat minX; @property (nonatomic, assign) CGFloat minY; @property (nonatomic, assign) CGFloat vbWidth; diff --git a/ios/Elements/RNSVGSvgView.m b/ios/Elements/RNSVGSvgView.m index 8e566d2d..edd27640 100644 --- a/ios/Elements/RNSVGSvgView.m +++ b/ios/Elements/RNSVGSvgView.m @@ -113,9 +113,9 @@ _vbHeight = vbHeight; } -- (void)setBbWidth:(NSString *)bbWidth +- (void)setBbWidth:(RNSVGLength *)bbWidth { - if ([bbWidth isEqualToString:_bbWidth]) { + if ([bbWidth isEqualTo:_bbWidth]) { return; } @@ -124,9 +124,9 @@ _bbWidth = bbWidth; } -- (void)setBbHeight:(NSString *)bbHeight +- (void)setBbHeight:(RNSVGLength *)bbHeight { - if ([bbHeight isEqualToString:_bbHeight]) { + if ([bbHeight isEqualTo:_bbHeight]) { return; } diff --git a/ios/ViewManagers/RNSVGSvgViewManager.m b/ios/ViewManagers/RNSVGSvgViewManager.m index a8302ae0..ae32ae60 100644 --- a/ios/ViewManagers/RNSVGSvgViewManager.m +++ b/ios/ViewManagers/RNSVGSvgViewManager.m @@ -20,8 +20,8 @@ RCT_EXPORT_MODULE() return [RNSVGSvgView new]; } -RCT_EXPORT_VIEW_PROPERTY(bbWidth, NSString) -RCT_EXPORT_VIEW_PROPERTY(bbHeight, NSString) +RCT_EXPORT_VIEW_PROPERTY(bbWidth, RNSVGLength*) +RCT_EXPORT_VIEW_PROPERTY(bbHeight, RNSVGLength*) RCT_EXPORT_VIEW_PROPERTY(minX, CGFloat) RCT_EXPORT_VIEW_PROPERTY(minY, CGFloat) RCT_EXPORT_VIEW_PROPERTY(vbWidth, CGFloat) diff --git a/lib/extract/extractProps.js b/lib/extract/extractProps.js index 57f63c6f..61397904 100644 --- a/lib/extract/extractProps.js +++ b/lib/extract/extractProps.js @@ -7,7 +7,8 @@ import extractOpacity from "./extractOpacity"; import { idPattern } from "../util"; export default function extractProps(prop, ref) { - const props = { ...prop.style, ...prop }; + const style = prop.style; + const props = { ...(style && style.length ? Object.assign({}, ...style) : style), ...prop }; const { opacity, onLayout, id, clipPath, mask } = props; const styleProperties = [];