From 9888a1adf2f93cc4e7a75fd6306e469605b3b125 Mon Sep 17 00:00:00 2001 From: Horcrux Date: Tue, 26 Jul 2016 11:37:31 +0800 Subject: [PATCH] add viewBox support for android --- Example/examples/Symbol.js | 3 +- .../horcrux/svg/RNSVGCircleShadowNode.java | 8 +- .../horcrux/svg/RNSVGEllipseShadowNode.java | 8 +- .../com/horcrux/svg/RNSVGGroupShadowNode.java | 2 +- .../com/horcrux/svg/RNSVGImageShadowNode.java | 8 +- .../com/horcrux/svg/RNSVGLineShadowNode.java | 8 +- .../com/horcrux/svg/RNSVGPathShadowNode.java | 6 +- .../com/horcrux/svg/RNSVGRectShadowNode.java | 12 +- .../svg/RNSVGRenderableViewManager.java | 9 + .../com/horcrux/svg/RNSVGTextShadowNode.java | 4 +- .../com/horcrux/svg/RNSVGUseShadowNode.java | 8 + .../horcrux/svg/RNSVGViewBoxShadowNode.java | 184 ++++++++++++++++++ .../com/horcrux/svg/RNSVGVirtualNode.java | 15 +- .../java/com/horcrux/svg/RNSvgPackage.java | 1 + elements/Symbol.js | 9 +- elements/ViewBox.js | 6 +- ios/Elements/RNSVGGroup.m | 9 +- ios/RNSVGNode.h | 9 +- ios/RNSVGNode.m | 20 +- ios/RNSVGRenderable.m | 6 - lib/attributes.js | 3 +- 21 files changed, 262 insertions(+), 76 deletions(-) create mode 100644 android/src/main/java/com/horcrux/svg/RNSVGViewBoxShadowNode.java diff --git a/Example/examples/Symbol.js b/Example/examples/Symbol.js index d43bfbe8..ab0e1326 100644 --- a/Example/examples/Symbol.js +++ b/Example/examples/Symbol.js @@ -5,7 +5,8 @@ import React, { import Svg, { Symbol, Circle, - Use + Use, + Rect } from 'react-native-svg'; class SymbolExample extends Component{ diff --git a/android/src/main/java/com/horcrux/svg/RNSVGCircleShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGCircleShadowNode.java index d76ea71a..d4a8139c 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGCircleShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGCircleShadowNode.java @@ -55,14 +55,14 @@ public class RNSVGCircleShadowNode extends RNSVGPathShadowNode { @Override protected Path getPath(Canvas canvas, Paint paint) { Path path = new Path(); - float cx = PropHelper.fromPercentageToFloat(mCx, mWidth, 0, mScale); - float cy = PropHelper.fromPercentageToFloat(mCy, mHeight, 0, mScale); + float cx = PropHelper.fromPercentageToFloat(mCx, mCanvasWidth, 0, mScale); + float cy = PropHelper.fromPercentageToFloat(mCy, mCanvasHeight, 0, mScale); float r; if (PropHelper.isPercentage(mR)) { r = PropHelper.fromPercentageToFloat(mR, 1, 0, 1); - float powX = (float)Math.pow((mWidth * r), 2); - float powY = (float)Math.pow((mHeight * r), 2); + float powX = (float)Math.pow((mCanvasWidth * r), 2); + float powY = (float)Math.pow((mCanvasHeight * r), 2); r = (float)Math.sqrt(powX + powY) / (float)Math.sqrt(2); } else { r = Float.parseFloat(mR) * mScale; diff --git a/android/src/main/java/com/horcrux/svg/RNSVGEllipseShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGEllipseShadowNode.java index aa51185e..d51dced1 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGEllipseShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGEllipseShadowNode.java @@ -63,10 +63,10 @@ public class RNSVGEllipseShadowNode extends RNSVGPathShadowNode { @Override protected Path getPath(Canvas canvas, Paint paint) { Path path = new Path(); - float cx = PropHelper.fromPercentageToFloat(mCx, mWidth, 0, mScale); - float cy = PropHelper.fromPercentageToFloat(mCy, mHeight, 0, mScale); - float rx = PropHelper.fromPercentageToFloat(mRx, mWidth, 0, mScale); - float ry = PropHelper.fromPercentageToFloat(mRy, mHeight, 0, mScale); + float cx = PropHelper.fromPercentageToFloat(mCx, mCanvasWidth, 0, mScale); + float cy = PropHelper.fromPercentageToFloat(mCy, mCanvasHeight, 0, mScale); + float rx = PropHelper.fromPercentageToFloat(mRx, mCanvasWidth, 0, mScale); + float ry = PropHelper.fromPercentageToFloat(mRy, mCanvasHeight, 0, mScale); RectF oval = new RectF(cx - rx, cy - ry, cx + rx, cy + ry); path.addOval(oval, Path.Direction.CW); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java index 1aa70d7f..93d09cf0 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java @@ -27,7 +27,6 @@ import java.util.ArrayList; public class RNSVGGroupShadowNode extends RNSVGPathShadowNode { public void draw(Canvas canvas, Paint paint, float opacity) { - opacity *= mOpacity; RNSVGSvgViewShadowNode svg = getSvgShadowNode(); if (opacity > MIN_OPACITY_FOR_DRAW) { @@ -36,6 +35,7 @@ public class RNSVGGroupShadowNode extends RNSVGPathShadowNode { for (int i = 0; i < getChildCount(); i++) { RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i); child.setupDimensions(canvas); + child.mergeProperties(this, mPropList, true); child.draw(canvas, paint, opacity * mOpacity); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGImageShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGImageShadowNode.java index 331712f1..002520ed 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGImageShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGImageShadowNode.java @@ -91,10 +91,10 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode { int count = saveAndSetupCanvas(canvas); clip(canvas, paint); - float x = PropHelper.fromPercentageToFloat(mX, mWidth, 0, mScale); - float y = PropHelper.fromPercentageToFloat(mY, mHeight, 0, mScale); - float w = PropHelper.fromPercentageToFloat(mW, mWidth, 0, mScale); - float h = PropHelper.fromPercentageToFloat(mH, mHeight, 0, mScale); + float x = PropHelper.fromPercentageToFloat(mX, mCanvasWidth, 0, mScale); + float y = PropHelper.fromPercentageToFloat(mY, mCanvasHeight, 0, mScale); + float w = PropHelper.fromPercentageToFloat(mW, mCanvasWidth, 0, mScale); + float h = PropHelper.fromPercentageToFloat(mH, mCanvasHeight, 0, mScale); canvas.drawBitmap(mBitmap, null, new Rect((int) x, (int) y, (int) (x + w), (int)(y + h)), null); restoreCanvas(canvas, count); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGLineShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGLineShadowNode.java index c0b5ebe7..e690a505 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGLineShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGLineShadowNode.java @@ -68,10 +68,10 @@ public class RNSVGLineShadowNode extends RNSVGPathShadowNode { @Override protected Path getPath(Canvas canvas, Paint paint) { Path path = new Path(); - float x1 = PropHelper.fromPercentageToFloat(mX1, mWidth, 0, mScale); - float y1 = PropHelper.fromPercentageToFloat(mY1, mHeight, 0, mScale); - float x2 = PropHelper.fromPercentageToFloat(mX2, mWidth, 0, mScale); - float y2 = PropHelper.fromPercentageToFloat(mY2, mHeight, 0, mScale); + float x1 = PropHelper.fromPercentageToFloat(mX1, mCanvasWidth, 0, mScale); + float y1 = PropHelper.fromPercentageToFloat(mY1, mCanvasHeight, 0, mScale); + float x2 = PropHelper.fromPercentageToFloat(mX2, mCanvasWidth, 0, mScale); + float y2 = PropHelper.fromPercentageToFloat(mY2, mCanvasHeight, 0, mScale); path.moveTo(x1, y1); path.lineTo(x2, y2); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java index a0a47167..ecb6ea92 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java @@ -78,7 +78,7 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode { private ArrayList mChangedList; private ArrayList mOriginProperties; - protected ReadableArray mPropList; + protected ReadableArray mPropList = new JavaOnlyArray();; @ReactProp(name = "d") public void setPath(@Nullable ReadableArray shapePath) { @@ -381,8 +381,8 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode { @Override public int hitTest(Point point, View view) { Bitmap bitmap = Bitmap.createBitmap( - mWidth, - mHeight, + mCanvasWidth, + mCanvasHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGRectShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGRectShadowNode.java index 7d4875cd..c841b1c3 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGRectShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGRectShadowNode.java @@ -87,12 +87,12 @@ public class RNSVGRectShadowNode extends RNSVGPathShadowNode { @Override protected Path getPath(Canvas canvas, Paint paint) { Path path = new Path(); - float x = PropHelper.fromPercentageToFloat(mX, mWidth, 0, mScale); - float y = PropHelper.fromPercentageToFloat(mY, mHeight, 0, mScale); - float w = PropHelper.fromPercentageToFloat(mW, mWidth, 0, mScale); - float h = PropHelper.fromPercentageToFloat(mH, mHeight, 0, mScale); - float rx = PropHelper.fromPercentageToFloat(mRx, mWidth, 0, mScale); - float ry = PropHelper.fromPercentageToFloat(mRy, mHeight, 0, mScale); + float x = PropHelper.fromPercentageToFloat(mX, mCanvasWidth, 0, mScale); + float y = PropHelper.fromPercentageToFloat(mY, mCanvasHeight, 0, mScale); + float w = PropHelper.fromPercentageToFloat(mW, mCanvasWidth, 0, mScale); + float h = PropHelper.fromPercentageToFloat(mH, mCanvasHeight, 0, mScale); + float rx = PropHelper.fromPercentageToFloat(mRx, mCanvasWidth, 0, mScale); + float ry = PropHelper.fromPercentageToFloat(mRy, mCanvasHeight, 0, mScale); if (rx != 0 || ry != 0) { if (rx == 0) { diff --git a/android/src/main/java/com/horcrux/svg/RNSVGRenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RNSVGRenderableViewManager.java index 4f8e5739..14966fe3 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGRenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGRenderableViewManager.java @@ -33,6 +33,7 @@ public class RNSVGRenderableViewManager extends ViewGroupManager { /* package */ static final String CLASS_CLIP_PATH = "RNSVGClipPath"; /* package */ static final String CLASS_DEFS = "RNSVGDefs"; /* package */ static final String CLASS_USE = "RNSVGUse"; + /* package */ static final String CLASS_VIEW_BOX = "RNSVGViewBox"; private final String mClassName; @@ -82,6 +83,9 @@ public class RNSVGRenderableViewManager extends ViewGroupManager { return new RNSVGRenderableViewManager(CLASS_USE); } + public static RNSVGRenderableViewManager createRNSVGViewBoxViewManager() { + return new RNSVGRenderableViewManager(CLASS_VIEW_BOX); + } private RNSVGRenderableViewManager(String className) { mClassName = className; @@ -128,6 +132,9 @@ public class RNSVGRenderableViewManager extends ViewGroupManager { case CLASS_USE: mVirtualNode = new RNSVGUseShadowNode(); break; + case CLASS_VIEW_BOX: + mVirtualNode = new RNSVGViewBoxShadowNode(); + break; default: throw new IllegalStateException("Unexpected type " + mClassName); } @@ -161,6 +168,8 @@ public class RNSVGRenderableViewManager extends ViewGroupManager { return RNSVGDefsShadowNode.class; case CLASS_USE: return RNSVGUseShadowNode.class; + case CLASS_VIEW_BOX: + return RNSVGViewBoxShadowNode.class; default: throw new IllegalStateException("Unexpected type " + mClassName); } diff --git a/android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java index aeca22df..76bf4f90 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java @@ -194,8 +194,8 @@ public class RNSVGTextShadowNode extends RNSVGPathShadowNode { @Override public int hitTest(Point point, View view) { Bitmap bitmap = Bitmap.createBitmap( - mWidth, - mHeight, + mCanvasWidth, + mCanvasHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGUseShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGUseShadowNode.java index 2950e582..beb93aa7 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGUseShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGUseShadowNode.java @@ -47,6 +47,14 @@ public class RNSVGUseShadowNode extends RNSVGPathShadowNode { markUpdated(); } + public String getWidth() { + return mWidth; + } + + public String getHeight() { + return mHeight; + } + @Override public void draw(Canvas canvas, Paint paint, float opacity) { RNSVGVirtualNode template = getSvgShadowNode().getDefinedTemplate(mHref); diff --git a/android/src/main/java/com/horcrux/svg/RNSVGViewBoxShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGViewBoxShadowNode.java new file mode 100644 index 00000000..8117b8b1 --- /dev/null +++ b/android/src/main/java/com/horcrux/svg/RNSVGViewBoxShadowNode.java @@ -0,0 +1,184 @@ +/** + * 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.Canvas; +import android.graphics.Matrix; +import android.graphics.Paint; +import android.graphics.Path; +import android.util.Log; + +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.uimanager.annotations.ReactProp; + +/** + * Shadow node for virtual RNSVGPath view + */ +public class RNSVGViewBoxShadowNode extends RNSVGGroupShadowNode { + + private static final int MOS_MEET = 0; + private static final int MOS_SLICE = 1; + private static final int MOS_NONE = 2; + + private String mMinX; + private String mMinY; + private String mVbWidth; + private String mVbHeight; + private String mBoxWidth; + private String mBoxHeight; + private String mAlign; + private int mMeetOrSlice; + private boolean mFromSymbol = false; + + @ReactProp(name = "minX") + public void setMinX(String minX) { + mMinX = minX; + markUpdated(); + } + + @ReactProp(name = "minY") + public void setMinY(String minY) { + mMinY = minY; + markUpdated(); + } + + @ReactProp(name = "vbWidth") + public void setVbWidth(String vbWidth) { + mVbWidth = vbWidth; + markUpdated(); + } + + @ReactProp(name = "vbHeight") + public void setVbHeight(String vbHeight) { + mVbHeight = vbHeight; + markUpdated(); + } + + + @ReactProp(name = "width") + public void setWidth(String width) { + mBoxWidth = width; + markUpdated(); + } + + @ReactProp(name = "height") + public void setHeight(String height) { + mBoxHeight = height; + markUpdated(); + } + + @ReactProp(name = "align") + public void setAlign(String align) { + mAlign = align; + markUpdated(); + } + + @ReactProp(name = "meetOrSlice") + public void setMeetOrSlice(int meetOrSlice) { + mMeetOrSlice = meetOrSlice; + markUpdated(); + } + + @Override + public void draw(Canvas canvas, Paint paint, float opacity) { + // based on https://svgwg.org/svg2-draft/coords.html#ComputingAViewportsTransform + setupDimensions(canvas); + + // Let vb-x, vb-y, vb-width, vb-height be the min-x, min-y, width and height values of the viewBox attribute respectively. + float vbX = PropHelper.fromPercentageToFloat(mMinX, mCanvasWidth, 0, mScale); + float vbY = PropHelper.fromPercentageToFloat(mMinY, mCanvasHeight, 0, mScale); + float vbWidth = PropHelper.fromPercentageToFloat(mVbWidth, mCanvasWidth, 0, mScale); + float vbHeight = PropHelper.fromPercentageToFloat(mVbHeight, mCanvasHeight, 0, mScale); + + // Let e-x, e-y, e-width, e-height be the position and size of the element respectively. + float eX = mCanvasX; + float eY = mCanvasY; + float eWidth = mBoxWidth != null ? PropHelper.fromPercentageToFloat(mBoxWidth, mCanvasWidth, 0, mScale) : mCanvasWidth; + float eHeight = mBoxHeight != null ? PropHelper.fromPercentageToFloat(mBoxHeight, mCanvasHeight, 0, mScale) : mCanvasHeight; + + // Initialize scale-x to e-width/vb-width. + float scaleX = eWidth / vbWidth; + + // Initialize scale-y to e-height/vb-height. + float scaleY = eHeight / vbHeight; + + // Initialize translate-x to vb-x - e-x. + // Initialize translate-y to vb-y - e-y. + float translateX = vbX - eX; + float translateY = vbY - eY; + + // If align is 'none' + if (mMeetOrSlice == MOS_NONE) { + // Let scale be set the smaller value of scale-x and scale-y. + // Assign scale-x and scale-y to scale. + float scale = scaleX = scaleY = Math.min(scaleX, scaleY); + + // If scale is greater than 1 + if (scale > 1) { + // Minus translateX by (eWidth / scale - vbWidth) / 2 + // Minus translateY by (eHeight / scale - vbHeight) / 2 + translateX -= (eWidth / scale - vbWidth) / 2; + translateY -= (eHeight / scale - vbHeight) / 2; + } else { + translateX -= (eWidth - vbWidth * scale) / 2; + translateY -= (eHeight - vbHeight * scale) / 2; + } + } else { +// If align is not 'none' and meetOrSlice is 'meet', set the larger of scale-x and scale-y to the smaller. + // Otherwise, if align is not 'none' and meetOrSlice is 'slice', set the smaller of scale-x and scale-y to the larger. + + if (!mAlign.equals("none") && mMeetOrSlice == MOS_MEET) { + scaleX = scaleY = Math.min(scaleX, scaleY); + } else if (!mAlign.equals("none") && mMeetOrSlice == MOS_SLICE) { + scaleX = scaleY = Math.min(scaleX, scaleY); + } + + // If align contains 'xMid', minus (e-width / scale-x - vb-width) / 2 from transform-x. + if (mAlign.contains("xMid")) { + translateX -= (eWidth / scaleX - vbWidth) / 2; + } + + // If align contains 'xMax', minus (e-width / scale-x - vb-width) from transform-x. + if (mAlign.contains("xMax")) { + translateX -= eWidth / scaleX - vbWidth; + } + + // If align contains 'yMid', minus (e-height / scale-y - vb-height) / 2 from transform-y. + if (mAlign.contains("YMid")) { + translateY -= (eHeight / scaleY - vbHeight) / 2; + } + + // If align contains 'yMax', minus (e-height / scale-y - vb-height) from transform-y. + if (mAlign.contains("YMax")) { + translateY -= eHeight / scaleY - vbHeight; + } + + } + + canvas.scale(scaleX, scaleY); + canvas.translate(-translateX * (mFromSymbol ? scaleX : 1), -translateY * (mFromSymbol ? scaleY : 1)); + super.draw(canvas, paint, opacity); + } + + @Override + public void mergeProperties(RNSVGVirtualNode target, ReadableArray mergeList) { + if (target.getClass() == RNSVGUseShadowNode.class) { + mFromSymbol = true; + mBoxWidth = ((RNSVGUseShadowNode)target).getWidth(); + mBoxHeight = ((RNSVGUseShadowNode)target).getHeight(); + } + } + + @Override + public void resetProperties() { + mBoxWidth = mBoxHeight = null; + mFromSymbol = false; + } +} diff --git a/android/src/main/java/com/horcrux/svg/RNSVGVirtualNode.java b/android/src/main/java/com/horcrux/svg/RNSVGVirtualNode.java index 2e6fda76..a73810fd 100644 --- a/android/src/main/java/com/horcrux/svg/RNSVGVirtualNode.java +++ b/android/src/main/java/com/horcrux/svg/RNSVGVirtualNode.java @@ -17,6 +17,7 @@ import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Point; +import android.graphics.Rect; import android.graphics.RectF; import android.graphics.Region; import android.util.Log; @@ -66,8 +67,10 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode { private boolean mClipRuleSet; private boolean mClipDataSet; protected boolean mResponsible; - protected int mWidth; - protected int mHeight; + protected int mCanvasX; + protected int mCanvasY; + protected int mCanvasWidth; + protected int mCanvasHeight; protected String mName; private RNSVGSvgViewShadowNode mSvgShadowNode; @@ -292,8 +295,12 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode { } protected void setupDimensions(Canvas canvas) { - mWidth = canvas.getWidth(); - mHeight = canvas.getHeight(); + // TODO: not sure this is a right way to get canvas boundingBox + Rect mCanvasClipBounds = canvas.getClipBounds(); + mCanvasX = mCanvasClipBounds.left; + mCanvasY = mCanvasClipBounds.top; + mCanvasWidth = canvas.getWidth(); + mCanvasHeight = canvas.getHeight(); } protected void saveDefinition() { diff --git a/android/src/main/java/com/horcrux/svg/RNSvgPackage.java b/android/src/main/java/com/horcrux/svg/RNSvgPackage.java index 8e8e823b..c79e0d75 100644 --- a/android/src/main/java/com/horcrux/svg/RNSvgPackage.java +++ b/android/src/main/java/com/horcrux/svg/RNSvgPackage.java @@ -36,6 +36,7 @@ public class RNSvgPackage implements ReactPackage { RNSVGRenderableViewManager.createRNSVGClipPathViewManager(), RNSVGRenderableViewManager.createRNSVGDefsViewManager(), RNSVGRenderableViewManager.createRNSVGUseViewManager(), + RNSVGRenderableViewManager.createRNSVGViewBoxViewManager(), new RNSVGSvgViewManager()); } diff --git a/elements/Symbol.js b/elements/Symbol.js index 08a50921..74c78466 100644 --- a/elements/Symbol.js +++ b/elements/Symbol.js @@ -20,16 +20,17 @@ class SymbolElement extends Component{ } let content = viewBox ? {props.children} - : props.children; + : + {props.children} + ; return - - {content} - + {content} ; } } diff --git a/elements/ViewBox.js b/elements/ViewBox.js index d5153c70..e6365380 100644 --- a/elements/ViewBox.js +++ b/elements/ViewBox.js @@ -11,7 +11,7 @@ const meetOrSliceTypes = { }; const alignEnum = _.reduce([ - 'xMinMin', 'xMidYMin', 'xMaxYMin', + 'xMinYMin', 'xMidYMin', 'xMaxYMin', 'xMinYMid', 'xMidYMid', 'xMaxYMid', 'xMinYMax', 'xMidYMax', 'xMaxYMax', 'none' @@ -36,7 +36,7 @@ class ViewBox extends Component{ }; render() { - let {viewBox, preserveAspectRatio} = this.props; + let {viewBox, preserveAspectRatio, name} = this.props; let params = viewBox.trim().split(spacesRegExp); @@ -51,7 +51,9 @@ class ViewBox extends Component{ let meetOrSlice = meetOrSliceTypes[modes[1]] || 0; let align = alignEnum[modes[0]] || 'xMidYMid'; + return *)inheritedList; -{ - for (NSString *key in inheritedList) { - [self inheritProperty:parent propName:key]; - } -} - @end diff --git a/ios/RNSVGNode.h b/ios/RNSVGNode.h index 4cb94104..8943a67f 100644 --- a/ios/RNSVGNode.h +++ b/ios/RNSVGNode.h @@ -71,18 +71,13 @@ */ - (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList; +- (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList inherited:(BOOL)inherited; + /** * just for template node to reset all owned properties once after rendered. */ - (void)resetProperties; -/** - * inherit properties from parent g element - */ -- (void)inheritProperties:(__kindof RNSVGNode *)parent inheritedList:(NSArray *)inheritedList; - -- (void)inheritProperty:(__kindof RNSVGNode *)parent propName:(NSString *)propName; - - (void)beginTransparencyLayer:(CGContextRef)context; - (void)endTransparencyLayer:(CGContextRef)context; diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m index 904ad75c..b00d333b 100644 --- a/ios/RNSVGNode.m +++ b/ios/RNSVGNode.m @@ -63,7 +63,7 @@ } else if (opacity > 1) { opacity = 1; } - + [self invalidate]; _transparent = opacity < 1; _opacity = opacity; @@ -97,17 +97,17 @@ - (void)renderTo:(CGContextRef)context { float opacity = self.opacity; - + // This needs to be painted on a layer before being composited. CGContextSaveGState(context); CGContextConcatCTM(context, self.transform); CGContextSetAlpha(context, opacity); - + [self beginTransparencyLayer:context]; [self renderClip:context]; [self renderLayerTo:context]; [self endTransparencyLayer:context]; - + CGContextRestoreGState(context); } @@ -175,7 +175,7 @@ while (parent && [parent class] != [RNSVGSvgView class]) { parent = parent.superview; } - + return (RNSVGSvgView *)parent; } @@ -224,16 +224,6 @@ // abstract } -- (void)inheritProperty:(__kindof RNSVGNode *)parent propName:(NSString *)propName -{ - // abstract -} - -- (void)inheritProperties:(__kindof RNSVGNode *)parent inheritedList:(NSArray *)inheritedList; -{ - // abstract -} - - (void)dealloc { CGPathRelease(_clipPath); diff --git a/ios/RNSVGRenderable.m b/ios/RNSVGRenderable.m index a1fe88ab..b9d64e69 100644 --- a/ios/RNSVGRenderable.m +++ b/ios/RNSVGRenderable.m @@ -215,7 +215,6 @@ [self setValue:[_originProperties valueForKey:key] forKey:key]; } } - [super resetProperties]; _changedList = nil; } @@ -231,11 +230,6 @@ } } -- (void)inheritProperties:(__kindof RNSVGNode *)parent inheritedList:(NSArray *)inheritedList -{ - [self mergeProperties:parent mergeList:inheritedList inherited:YES]; -} - - (void)renderLayerTo:(CGContextRef)context { // abstract diff --git a/lib/attributes.js b/lib/attributes.js index 0c837ea1..ea011431 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -47,7 +47,8 @@ const ViewBoxAttributes = { vbWidth: true, vbHeight: true, align: true, - meetOrSlice: true + meetOrSlice: true, + name: true }; const NodeAttributes = {