Skip to content

Commit

Permalink
perf: optimize extraction of fill, stroke, responder, matrix & display
Browse files Browse the repository at this point in the history 
potentially breaking change
if any issues show up, then they'll be considered regressions
should be resolved in ways which cause less traffic from js to native
  • Loading branch information
@msand
msand committed Jan 18, 2020
1 parent 4375ee6 commit 279c3fc
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 220 deletions.
149 changes: 0 additions & 149 deletions __tests__/__snapshots__/css.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,176 +156,39 @@ exports[`supports CSS in style element 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<RNSVGGroup
fill={4278190080}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGDefs />
<RNSVGGroup
fill={4278190080}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGRect
fill={4294901760}
fillOpacity={1}
fillRule={1}
height={200}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
Array [
"fill",
"stroke",
"strokeWidth",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={4278190335}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth="16"
vectorEffect={0}
width={1000}
x={100}
y={0}
/>
</RNSVGGroup>
<RNSVGGroup
fill={4278190080}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGRect
fill={4294901760}
fillOpacity={0.3}
fillRule={1}
height={200}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
Array [
"fill",
Expand All @@ -334,20 +197,8 @@ exports[`supports CSS in style element 1`] = `
"strokeWidth",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={4278190335}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth="16"
vectorEffect={0}
width={750}
x={100}
y={350}
Expand Down
5 changes: 4 additions & 1 deletion src/elements/Svg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ResponderProps,
TransformProps,
ResponderInstanceProps,
extractedProps,
} from '../lib/extract/types';
import extractResponder from '../lib/extract/extractResponder';
import extractViewBox from '../lib/extract/extractViewBox';
Expand Down Expand Up @@ -153,6 +154,8 @@ export default class Svg extends Shape<
: null;

const tint = extractColor(color);
const responder: extractedProps = {};
extractResponder(responder, props, this as ResponderInstanceProps);
return (
<RNSVGSvg
{...props}
Expand All @@ -164,8 +167,8 @@ export default class Svg extends Shape<
ref={this.refMethod}
style={[styles.svg, style, opacityStyle, dimensions]}
focusable={Boolean(focusable) && focusable !== 'false'}
{...extractResponder(props, this as ResponderInstanceProps)}
{...extractViewBox({ viewBox, preserveAspectRatio })}
{...responder}
>
<G
{...{
Expand Down
14 changes: 6 additions & 8 deletions src/lib/extract/extractFill.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import { colorNames } from './extractColor';
import { FillProps } from './types';
import { extractedProps, FillProps } from './types';

const fillRules: { evenodd: number; nonzero: number } = {
evenodd: 0,
Expand All @@ -11,24 +11,22 @@ const fillRules: { evenodd: number; nonzero: number } = {
const defaultFill = colorNames.black;

export default function extractFill(
o: extractedProps,
props: FillProps,
styleProperties: string[],
) {
const { fill, fillRule, fillOpacity } = props;

if (fill != null) {
styleProperties.push('fill');
o.fill =
!fill && typeof fill !== 'number' ? defaultFill : extractBrush(fill);
}
if (fillOpacity != null) {
styleProperties.push('fillOpacity');
o.fillOpacity = extractOpacity(fillOpacity);
}
if (fillRule != null) {
styleProperties.push('fillRule');
o.fillRule = fillRule && fillRules[fillRule] === 0 ? 0 : 1;
}

return {
fill: !fill && typeof fill !== 'number' ? defaultFill : extractBrush(fill),
fillRule: fillRule && fillRules[fillRule] === 0 ? 0 : 1,
fillOpacity: extractOpacity(fillOpacity),
};
}
42 changes: 18 additions & 24 deletions src/lib/extract/extractProps.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import extractFill from './extractFill';
import extractStroke from './extractStroke';
import { transformToMatrix, props2transform } from './extractTransform';
import { props2transform, transformToMatrix } from './extractTransform';
import extractResponder from './extractResponder';
import extractOpacity from './extractOpacity';
import { idPattern } from '../util';
import {
ClipProps,
extractedProps,
FillProps,
NumberProp,
ResponderProps,
StrokeProps,
TransformProps,
} from './types';
import { Component } from 'react';

const clipRules: { evenodd: number; nonzero: number } = {
evenodd: 0,
Expand Down Expand Up @@ -74,30 +74,24 @@ export default function extractProps(
const styleProperties: string[] = [];
const transformProps = props2transform(props);
const matrix = transformToMatrix(transformProps, transform);
const extracted: {
name?: string;
mask?: string;
opacity: number;
matrix: number[];
propList: string[];
onLayout?: () => void;
ref?: (instance: Component | null) => void;
markerStart?: string;
markerMid?: string;
markerEnd?: string;
clipPath?: string;
clipRule?: number;
display?: string;
} = {
matrix,
...transformProps,
const extracted: extractedProps = {
propList: styleProperties,
opacity: extractOpacity(opacity),
...extractResponder(props, ref),
...extractFill(props, styleProperties),
...extractStroke(props, styleProperties),
display: display === 'none' ? 'none' : undefined,
};
extractResponder(extracted, props, ref);
extractFill(extracted, props, styleProperties);
extractStroke(extracted, props, styleProperties);

if (matrix !== null) {
extracted.matrix = matrix;
}

if (opacity != null) {
extracted.opacity = extractOpacity(opacity);
}

if (display != null) {
extracted.display = display === 'none' ? 'none' : undefined;
}

if (onLayout) {
extracted.onLayout = onLayout;
Expand Down
12 changes: 6 additions & 6 deletions src/lib/extract/extractResponder.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { PanResponder } from 'react-native';
import { ResponderInstanceProps, ResponderProps } from './types';
import {
extractedProps,
ResponderInstanceProps,
ResponderProps,
} from './types';

const responderKeys = Object.keys(PanResponder.create({}).panHandlers);
const numResponderKeys = responderKeys.length;

export default function extractResponder(
o: extractedProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
props: { [x: string]: any } & ResponderProps,
ref: ResponderInstanceProps,
Expand All @@ -20,9 +25,6 @@ export default function extractResponder(
delayLongPress,
pointerEvents,
} = props;
const o: {
[touchableProperty: string]: unknown;
} = {};

let responsible = false;
for (let i = 0; i < numResponderKeys; i++) {
Expand Down Expand Up @@ -62,6 +64,4 @@ export default function extractResponder(
if (responsible) {
o.responsible = true;
}

return o;
}
Loading

0 comments on commit 279c3fc

Please sign in to comment.