diff --git a/README.md b/README.md index 1b44134e..08cc5385 100644 --- a/README.md +++ b/README.md @@ -801,7 +801,7 @@ npm i 3. Mask element. 4. Marker element. 5. Load Image from URL. -6. Transform prop support. +6. ~~Transform prop support~~. ### Known issues: 1. Unable to apply focus point of RadialGradient on Android. diff --git a/lib/extract/extractProps.js b/lib/extract/extractProps.js index a0830b95..c632eb63 100644 --- a/lib/extract/extractProps.js +++ b/lib/extract/extractProps.js @@ -24,11 +24,7 @@ export default function(props, ref) { Object.assign(extractedProps, extractStroke(props, styleProperties)); Object.assign(extractedProps, extractFill(props, styleProperties)); - if (props.transform) { - extractedProps.matrix = extractTransform(props.transform); - } else { - extractedProps.matrix = extractTransform(props); - } + extractedProps.matrix = extractTransform(props); Object.assign(extractedProps, extractResponder(props, ref)); diff --git a/lib/extract/extractTransform.js b/lib/extract/extractTransform.js index e8b37ef6..ef96a15f 100644 --- a/lib/extract/extractTransform.js +++ b/lib/extract/extractTransform.js @@ -13,18 +13,109 @@ function transformToMatrix(props, transform) { return pooledMatrix.toArray(); } +class TransformParser { + constructor() { + var floating = '(\\-?[\\d\\.e]+)'; + var commaSpace = '\\,?\\s*'; + + this.regex = { + split: /[\s*(\s*|\s*)\s*|\s*,\s*]/, + matrix: new RegExp( + '^matrix\\(' + + floating + commaSpace + + floating + commaSpace + + floating + commaSpace + + floating + commaSpace + + floating + commaSpace + + floating + '\\)$') + }; + } + + parse(transform) { + if (transform) { + var retval = {}; + let transLst = _.filter( + transform.split(this.regex.split), + (ele) => { + return ele !== ""; + } + ); + for (let i=0; i= 0 ; i--) { + matrix[i] = parseFloat(matrix[i]); + }; + } + return matrix; + } +} + +const tp = new TransformParser(); + + function appendTransform(transform) { - pooledMatrix - .appendTransform( - transform.x + transform.originX, - transform.y + transform.originY, - transform.scaleX, transform.scaleY, - transform.rotation, - transform.skewX, - transform.skewY, - transform.originX, - transform.originY - ); + if (transform) { + if (typeof transform === "string") { + var transformParsed = tp.parse(transform); + if (transformParsed.matrix) { + pooledMatrix.append(...transformParsed.matrix); + } + else { + let trans = props2transform(transformParsed); + if (typeof trans !== 'string') { + transform = trans; + } + } + } + if (typeof transform !== "string") { + pooledMatrix + .appendTransform( + transform.x + transform.originX, + transform.y + transform.originY, + transform.scaleX, transform.scaleY, + transform.rotation, + transform.skewX, + transform.skewY, + transform.originX, + transform.originY + ); + } + } } function universal2axis(universal, axisX, axisY, defaultValue) { @@ -57,13 +148,16 @@ function universal2axis(universal, axisX, axisY, defaultValue) { } function props2transform(props) { + if (props && (typeof props === "string")) { + return props; + } let [originX, originY] = universal2axis(props.origin, props.originX, props.originY); let [scaleX, scaleY] = universal2axis(props.scale, props.scaleX, props.scaleY, 1); let [skewX, skewY] = universal2axis(props.skew, props.skewX, props.skewY); let [translateX, translateY] = universal2axis( props.translate, - _.isNil(props.translateX) ? props.x : props.translateX, - _.isNil(props.translateY) ? props.y : props.translateY + _.isNil(props.translateX) ? (props.x || 0): props.translateX, + _.isNil(props.translateY) ? (props.y || 0) : props.translateY ); return {