diff --git a/android/src/main/java/com/horcrux/svg/AlignmentBaseline.java b/android/src/main/java/com/horcrux/svg/AlignmentBaseline.java index 0dc6e1b9..4cc73f99 100644 --- a/android/src/main/java/com/horcrux/svg/AlignmentBaseline.java +++ b/android/src/main/java/com/horcrux/svg/AlignmentBaseline.java @@ -33,31 +33,31 @@ enum AlignmentBaseline { center("center"), top("top"); - private final String weight; + private final String alignment; - AlignmentBaseline(String weight) { - this.weight = weight; + AlignmentBaseline(String alignment) { + this.alignment = alignment; } public static AlignmentBaseline getEnum(String strVal) { - if (!weightToEnum.containsKey(strVal)) { + if (!alignmentToEnum.containsKey(strVal)) { throw new IllegalArgumentException("Unknown String Value: " + strVal); } - return weightToEnum.get(strVal); + return alignmentToEnum.get(strVal); } - private static final Map weightToEnum; + private static final Map alignmentToEnum; static { final Map tmpMap = new HashMap<>(); for (final AlignmentBaseline en : AlignmentBaseline.values()) { - tmpMap.put(en.weight, en); + tmpMap.put(en.alignment, en); } - weightToEnum = ImmutableMap.copyOf(tmpMap); + alignmentToEnum = ImmutableMap.copyOf(tmpMap); } @Override public String toString() { - return weight; + return alignment; } } diff --git a/android/src/main/java/com/horcrux/svg/FontData.java b/android/src/main/java/com/horcrux/svg/FontData.java index f78efefa..71e9ea73 100644 --- a/android/src/main/java/com/horcrux/svg/FontData.java +++ b/android/src/main/java/com/horcrux/svg/FontData.java @@ -19,7 +19,7 @@ class FontData { private static final String WORD_SPACING = "wordSpacing"; private static final String LETTER_SPACING = "letterSpacing"; private static final String TEXT_DECORATION = "textDecoration"; - private static final String ALIGNMENT_BASELINE = "alignment-baseline"; + private static final String ALIGNMENT_BASELINE = "alignmentBaseline"; final double fontSize; diff --git a/elements/TextPath.js b/elements/TextPath.js index 5656252f..24627f23 100644 --- a/elements/TextPath.js +++ b/elements/TextPath.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass'; import {TextPathAttributes} from '../lib/attributes'; import extractText from '../lib/extract/extractText'; @@ -16,15 +15,15 @@ export default class extends Shape { static propTypes = textPathProps; render() { - let {children, href, startOffset, ...props} = this.props; + let {children, href, startOffset, method, spacing, side, ...props} = this.props; if (href) { let matched = href.match(idExpReg); if (matched) { href = matched[1]; - + startOffset = `${startOffset || 0}`; return ; } diff --git a/lib/attributes.js b/lib/attributes.js index f1b17c81..8854e66b 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -110,6 +110,7 @@ const PathAttributes = { const TextSpecificAttributes = { ...RenderableAttributes, + alignmentBaseline: true, lengthAdjust: true, textLength: true, }; diff --git a/lib/extract/extractText.js b/lib/extract/extractText.js index 11b9be37..f685a04d 100644 --- a/lib/extract/extractText.js +++ b/lib/extract/extractText.js @@ -51,6 +51,7 @@ export function extractFont(props) { fontStretch, textAnchor, textDecoration, + alignmentBaseline, letterSpacing, wordSpacing, kerning, @@ -73,6 +74,7 @@ export function extractFont(props) { fontFamily, textAnchor, textDecoration, + alignmentBaseline, letterSpacing, wordSpacing, kerning, @@ -103,13 +105,10 @@ export default function(props, container) { y, dx, dy, - method, - spacing, } = props; let { rotate, - children, - startOffset + children } = props; const positionX = parseSVGLengthList(x); @@ -138,7 +137,6 @@ export default function(props, container) { } const font = extractFont(props); - startOffset = (startOffset || 0).toString(); return { font, @@ -149,8 +147,5 @@ export default function(props, container) { rotate, deltaX, deltaY, - method, - spacing, - startOffset, }; } diff --git a/lib/props.js b/lib/props.js index 29561c2e..58591041 100644 --- a/lib/props.js +++ b/lib/props.js @@ -48,6 +48,26 @@ const strokeProps = { strokeMiterlimit: numberProp }; +const transformProps = { + scale: numberProp, + scaleX: numberProp, + scaleY: numberProp, + rotate: numberProp, + rotation: numberProp, + translate: numberProp, + translateX: numberProp, + translateY: numberProp, + x: numberProp, + y: numberProp, + origin: numberProp, + originX: numberProp, + originY: numberProp, + skew: numberProp, + skewX: numberProp, + skewY: numberProp, + transform: PropTypes.oneOfType([PropTypes.object, PropTypes.string]) +}; + const pathProps = { ...fillProps, ...strokeProps, @@ -153,19 +173,37 @@ const lengthAdjust = PropTypes.oneOf(['spacing', 'spacingAndGlyphs']); */ const textLength = PropTypes.string; +/* + Name: alignment-baseline + Value: baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top + Initial: baseline + Applies to: inline-level boxes, flex items, grid items, table cells + Inherited: no + Percentages: N/A + Media: visual + Computed value: as specified + Canonical order: per grammar + Animation type: discrete + https://drafts.csswg.org/css-inline/#propdef-alignment-baseline + https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty + https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline +*/ +const alignmentBaseline = PropTypes.oneOf(['baseline', 'text-bottom', 'alphabetic', 'ideographic', 'middle', 'central', 'mathematical', 'text-top', 'bottom', 'center', 'top']); + const textSpecificProps = { ...pathProps, ...fontProps, + alignmentBaseline, lengthAdjust, textLength, -} +}; // https://svgwg.org/svg2-draft/text.html#TSpanAttributes const textProps = { ...textSpecificProps, dx: PropTypes.string, dy: PropTypes.string, -} +}; /* Name @@ -231,26 +269,6 @@ const textPathProps = { method, spacing, side, -} - -const transformProps = { - scale: numberProp, - scaleX: numberProp, - scaleY: numberProp, - rotate: numberProp, - rotation: numberProp, - translate: numberProp, - translateX: numberProp, - translateY: numberProp, - x: numberProp, - y: numberProp, - origin: numberProp, - originX: numberProp, - originY: numberProp, - skew: numberProp, - skewX: numberProp, - skewY: numberProp, - transform: PropTypes.oneOfType([PropTypes.object, PropTypes.string]) }; export {