diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx index 5a718b124..68a9c33cf 100644 --- a/src/elements/Svg.tsx +++ b/src/elements/Svg.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, createRef } from 'react'; import { findNodeHandle, MeasureInWindowOnSuccessCallback, @@ -56,6 +56,10 @@ export default class Svg extends Shape< preserveAspectRatio: 'xMidYMid meet', }; + gRef = createRef< + G + >(); + measureInWindow = (callback: MeasureInWindowOnSuccessCallback) => { const { root } = this; root && root.measureInWindow(callback); @@ -81,17 +85,51 @@ export default class Svg extends Shape< height?: NumberProp; bbWidth?: NumberProp; bbHeight?: NumberProp; - }, + } & FillProps & + StrokeProps & + TransformProps, ) => { - const { width, height } = props; - if (width) { - props.bbWidth = width; + const { + fill, + fillOpacity, + fillRule, + stroke, + strokeWidth, + strokeOpacity, + strokeDasharray, + strokeDashoffset, + strokeLinecap, + strokeLinejoin, + strokeMiterlimit, + transform, + ...svgProps + } = props; + + const gProps = { + fill, + fillOpacity, + fillRule, + stroke, + strokeWidth, + strokeOpacity, + strokeDasharray, + strokeDashoffset, + strokeLinecap, + strokeLinejoin, + strokeMiterlimit, + transform, + }; + + if (svgProps.width) { + svgProps.bbWidth = svgProps.width; } - if (height) { - props.bbHeight = height; + if (svgProps.height) { + svgProps.bbHeight = svgProps.height; } - const { root } = this; - root && root.setNativeProps(props); + + const { root, gRef } = this; + root && root.setNativeProps(svgProps); + gRef && gRef.current && gRef.current.setNativeProps(gProps); }; toDataURL = (callback: () => void, options?: Object) => { @@ -216,6 +254,7 @@ export default class Svg extends Shape< strokeLinecap, strokeLinejoin, strokeMiterlimit, + ref: this.gRef, }} /> diff --git a/src/xml.tsx b/src/xml.tsx index 828f104e2..bac63557f 100644 --- a/src/xml.tsx +++ b/src/xml.tsx @@ -4,6 +4,8 @@ import React, { useEffect, useMemo, useState, + forwardRef, + Ref, } from 'react'; import Rect from './elements/Rect'; import Circle from './elements/Circle'; @@ -94,34 +96,46 @@ export type XmlState = { ast: JsxAST | null }; export type AstProps = { ast: JsxAST | null } & AdditionalProps; -export function SvgAst({ ast, override }: AstProps) { +function SvgAstInternal({ + ast, + override, + forwardedRef, +}: AstProps & { forwardedRef?: Ref }) { if (!ast) { return null; } const { props, children } = ast; return ( - + {children} ); } +export const SvgAst = forwardRef((props, ref) => ( + +)); + export const err = console.error.bind(console); -export function SvgXml(props: XmlProps) { - const { onError = err, xml, override } = props; +function SvgXmlInternal(props: XmlProps & { forwardedRef?: Ref }) { + const { onError = err, xml, override, forwardedRef } = props; const ast = useMemo(() => (xml !== null ? parse(xml) : null), [ xml, ]); try { - return ; + return ; } catch (error) { onError(error); return null; } } +export const SvgXml = forwardRef((props, ref) => ( + +)); + export async function fetchText(uri: string) { const response = await fetch(uri); return await response.text();