From ef887d11b450f4f821a46a37680aa7f70c59acdc Mon Sep 17 00:00:00 2001
From: yangzx18 <yangzhixian5@h-partners.com>
Date: Wed, 15 May 2024 19:50:19 +0800
Subject: [PATCH 1/2] test: add performance test cases

---
 tester/svgDemoCases/App.tsx                   |  11 +-
 tester/svgDemoCases/Navigation.tsx            |  11 +-
 tester/svgDemoCases/components/index.tsx      |   6 +-
 .../components/performanceList.tsx            | 337 ++++++++++++++++++
 4 files changed, 351 insertions(+), 14 deletions(-)
 create mode 100644 tester/svgDemoCases/components/performanceList.tsx

diff --git a/tester/svgDemoCases/App.tsx b/tester/svgDemoCases/App.tsx
index c55e1f0c..767ad222 100644
--- a/tester/svgDemoCases/App.tsx
+++ b/tester/svgDemoCases/App.tsx
@@ -7,12 +7,9 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-// import * as exampleByName from './components';
 import {NavigationContainer, Page} from './Navigation';
-// import {Benchmarker, DeepTree, SierpinskiTriangle} from './benchmarks';
-import {PortalHost, PortalProvider} from '@gorhom/portal';
+import {PortalProvider} from '@gorhom/portal';
 import testSuiteByName from './components';
-import {Tester} from '@rnoh/testerino';
 
 
 const comList = Object.keys(testSuiteByName).map(testSuiteName => {
@@ -38,12 +35,8 @@ function App() {
                 return (
                   <Page
                     key={com.name}
-                    name={`${com.name.replace('Test', '')}`}>
-                    {/* <Tester style={{flex: 1}}>
-                      <ScrollView style={{flex: 1}}> */}
+                    name={`${com.name}`}>
                         <TestSuite key={com.name} />
-                      {/* </ScrollView>
-                    </Tester> */}
                   </Page>
                 );
               })}
diff --git a/tester/svgDemoCases/Navigation.tsx b/tester/svgDemoCases/Navigation.tsx
index 5e007ed5..055d21f6 100644
--- a/tester/svgDemoCases/Navigation.tsx
+++ b/tester/svgDemoCases/Navigation.tsx
@@ -22,10 +22,12 @@ const NavigationContext = React.createContext<
 
 export function NavigationContainer({
   initialPage = 'INDEX',
+  hasHeader = true,
   children,
 }: {
   initialPage?: string;
   children: any;
+  hasHeader?: boolean
 }) {
   const [currentPageName, setCurrentPageName] = React.useState(initialPage);
   const [registeredPageNames, setRegisteredPageNames] = React.useState<
@@ -49,7 +51,7 @@ export function NavigationContainer({
       }}>
       <View style={{width: '100%', height: '100%', flexDirection: 'column'}}>
         <Page name="INDEX">
-          <IndexPage />
+        <IndexPage hasHeader={hasHeader} />
         </Page>
         {children}
       </View>
@@ -90,14 +92,14 @@ export function Page({name, children}: {name: string; children: any}) {
   ) : null;
 }
 
-export function IndexPage() {
+export function IndexPage({ hasHeader }: { hasHeader: boolean }) {
   const {navigateTo, registeredPageNames} = useNavigation();
 
   return (
     <FlatList
       data={registeredPageNames}
       ListHeaderComponent={
-        <View
+        hasHeader ? <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',
@@ -116,12 +118,13 @@ export function IndexPage() {
               fontWeight: 'bold',
               padding: 16,
             }}>
-            RN Tester
+            RN Svg Capi Tester
             {'rnohArchitecture' in Platform.constants
               ? (` (${Platform.constants.rnohArchitecture})` as string)
               : ''}
           </Text>
         </View>
+        : null
       }
       renderItem={({item}) => {
         return (
diff --git a/tester/svgDemoCases/components/index.tsx b/tester/svgDemoCases/components/index.tsx
index b5e4bdad..a72be648 100644
--- a/tester/svgDemoCases/components/index.tsx
+++ b/tester/svgDemoCases/components/index.tsx
@@ -26,6 +26,7 @@ import ClipPath from './clipPath';
 import Image from './Image';
 import Combination from './Combination';
 import ComplexDemo from './complexDemo';
+import PerformanceList from './PerformanceList';
 export default {
     Circle,
     Defs,
@@ -54,5 +55,8 @@ export default {
     ClipPath,
     Image,
     Combination,
-    ComplexDemo
+    ComplexDemo,
+
+    
+    PerformanceTest: PerformanceList
 }
\ No newline at end of file
diff --git a/tester/svgDemoCases/components/performanceList.tsx b/tester/svgDemoCases/components/performanceList.tsx
new file mode 100644
index 00000000..53515faa
--- /dev/null
+++ b/tester/svgDemoCases/components/performanceList.tsx
@@ -0,0 +1,337 @@
+
+import React from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  View,
+} from 'react-native';
+import {NavigationContainer, Page} from '../Navigation';
+import {PortalProvider} from '@gorhom/portal';
+import { Circle, Svg, Ellipse, Path, Polygon, Polyline, Mask, Symbol, Text, Use, LinearGradient, RadialGradient, 
+    TSpan, Image, G, Defs, ClipPath, Rect, Line, TextPath, Stop } from 'react-native-svg'
+const testCount = 100
+
+function repeat(com: React.ReactElement, repeatCount: number) {
+    const cases = []
+    for(let i = 0; i < repeatCount; i++) {
+        cases.push(
+            (
+                <View key={i}>
+                    { com }
+                </View>
+            )
+        )
+    }
+    return cases
+}
+
+const width = 100
+const height = 100
+
+const CircleCase = (
+    <Svg height={height} width={width}>
+        <Circle cx="50%" cy="50%" r="40%" fill="pink" />
+    </Svg>
+)
+
+const EllipseCase = (
+    <Svg height={height} width={width}>
+        <Ellipse
+          cx="50%"
+          cy="50%"
+          rx="45%"
+          ry="40%"
+          stroke="purple"
+          strokeWidth="2"
+          fill="yellow"
+        />
+      </Svg>
+)
+
+const PathCase = (
+    <Svg height={height} width={width}>
+        <Path fill="red" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+    </Svg>
+)
+
+const PolygonCase = (
+    <Svg height={height} width={width}>
+        <Polygon fill="red" points="40,5 70,80 25,95" />
+    </Svg>
+)
+
+const PolyLineCase = (
+    <Svg height={height} width={width}>
+        <Polyline fill="red" points="10 10 20 12 30 20 40 60 60 70 95 90" />
+    </Svg>
+)
+
+const RectCase = (
+    <Svg height={height} width={width}>
+        <Rect  width={80} height={80} fill='green' />
+    </Svg>
+)
+
+const LineCase = (
+    <Svg height={height} width={width}>
+        <Line x1="10" y1="10" x2="100" x2="100" stroke='green' strokeWidth="4" />
+    </Svg>
+)
+
+const TextCase = (
+    <Svg height={height} width={width}>
+        <Text x={10} y={10}>
+            <TSpan stroke={'pink'}>Test text with svg</TSpan>
+        </Text>
+    </Svg>
+)
+
+const DefsCase = (
+    <Svg viewBox="0 0 400 400" width={width} height={height}>
+        <Circle cx="100" cy="100" r="50" stroke="green" fill={'green'} />
+        <Defs>
+            <G id="shape">
+                <Circle cx="100" cy="100" r="50" stroke="red"  fill={'red'} />
+            </G>
+        </Defs>
+        <Use href="#shape" x="200" y="200" />
+        <Use href="#shape" x="0" y="300" fill={'yellow'} />
+    </Svg>
+)
+
+const TextPathCase = (
+    <Svg viewBox="0 0 100 100" width={200} height={height}>
+        <G stroke="blue">
+            <Path
+                id="MyPath"
+                fill="none"
+                stroke="red"
+                d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
+
+            <Text stroke="blue" fill="blue" fontVariant="small-caps" fontStretch="ultra-expanded">
+                <TextPath stroke="blue" fill="blue" href="#MyPath">Quick
+                0<TSpan kerning="10">brown</TSpan> fox jumps over <TSpan kerning="1">the</TSpan> lazy dog.</TextPath>
+            </Text>
+        </G>
+    </Svg >
+)
+
+const LinearGradientCase = (
+    <Svg viewBox="0 0 100 100" width={width} height={height}>
+        <Defs>
+            <LinearGradient id="myGradient" gradientTransform="rotate(90)">
+            <Stop offset="30%" stopColor="yellow" />
+            <Stop offset="95%" stopColor="red" />
+            </LinearGradient>
+        </Defs>
+        <Circle cx="50" cy="50" r="40" fill={`url(#myGradient)`} />
+    </Svg>
+)
+
+const RadialGradientCase = (
+    <Svg viewBox="0 0 100 100" width={width} height={height}>
+        <Defs>
+            <RadialGradient id="myGradient22" cx={'30%'} cy="50%" r='30%'>
+                <Stop offset="30%" stopColor="yellow" />
+                <Stop offset="95%" stopColor="red" />
+            </RadialGradient>
+        </Defs>
+        <Ellipse cx="50" cy="50" rx="50" ry="30"  fill={`url(#myGradient22)`} />
+    </Svg>
+)
+
+const ClipPathCase = (
+    <Svg width={width} height={100} viewBox='0 0 100 100'>
+        <ClipPath id="emptyStar1">
+            <Path d="M50,0 21,90 98,35 2,35 79,90z" />
+        </ClipPath>
+        <ClipPath id="emptyStar2">
+            <Path d="M50,0 21,90 98,35 2,35 79,90z" />
+        </ClipPath>
+
+        <Rect clipPath="url(#emptyStar1)" width="50" height="90" fill="blue" />
+        <Rect clipPath="url(#emptyStar2)" width="50" height="90" x="50" fill="red" />
+    </Svg>
+)
+
+const ImageCase = (
+    <Svg width={width} height={100} viewBox='0 0 100 100'>
+        <Image width={80} height={80} href={'https://live.mdnplay.dev/zh-CN/docs/Web/SVG/Element/image/mdn_logo_only_color.png'}/>
+    </Svg>
+)
+
+const MaskCase = (
+    <Svg viewBox="-10 -10 120 120" width={width} height={height}>
+        <Rect x={-10} y={-10} width={120} height={120} fill="blue" />
+        <Mask id="myMask">
+            <Rect x={0} y={0} width={100} height={100} fill="white" />
+            <Path
+                d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
+                fill="black"
+            />
+        </Mask>
+        <Polygon points="-10,110 110,110 110,-10" fill="orange" />
+        <Circle cx={50} cy={50} r={50} fill="purple" mask="url(#myMask)" />
+    </Svg>
+)
+
+const SymbolCase = (
+    <Svg width={width} height={height} viewBox="0 0 200 110">
+        <Symbol id="sym01" viewBox="0 0 100 110">
+            <Circle cx="150" cy="120" r="100" strokeWidth="8" stroke="green" fill="red" />
+            <Circle cx="200" cy="150" r="100" strokeWidth="8" stroke="green" fill="white" />
+        </Symbol>
+        <Use href="#sym01" x="0" y="0" width="100" height="50" />
+    </Svg>
+)
+
+
+interface ComInfo{
+    name: string,
+    com: React.ReactElement
+}
+
+
+const comList: ComInfo[] = [
+    {
+        name: 'Circle',
+        com: CircleCase
+    },
+    {
+        name: 'Ellipse',
+        com: EllipseCase
+    },
+    {
+        name: 'Path',
+        com: PathCase
+    },
+    {
+        name: 'Polygon',
+        com: PolygonCase
+    },
+    {
+        name: 'PolyLine',
+        com: PolyLineCase
+    },
+    {
+        name: 'Rect',
+        com: RectCase
+    },
+    {
+        name: 'Line',
+        com: LineCase
+    },
+    {
+        name: 'Text & TSpan',
+        com: TextCase
+    },
+    {
+        name: 'Defs & Use',
+        com: DefsCase
+    },
+    {
+        name: 'TextPath',
+        com: TextPathCase
+    },
+    {
+        name: 'LinearGradient & Stop',
+        com: LinearGradientCase
+    },
+    {
+        name: 'RadialGradient & Stop',
+        com: RadialGradientCase
+    },
+    {
+        name: 'ClipPath',
+        com: ClipPathCase
+    },
+    {
+        name: 'Image',
+        com: ImageCase
+    },
+    {
+        name: 'Mask',
+        com: MaskCase
+    },
+    {
+        name: 'Symbol',
+        com: SymbolCase
+    }
+]
+// @ts-ignore
+comList.sort((a, b) => {
+  return a.name.localeCompare(b.name)
+})
+
+function SingleComCase(TestCase: React.ReactElement, testCount: number) {
+    return (
+        <SafeAreaView>
+            <ScrollView>
+                { repeat(TestCase, testCount) }
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+function AllComCase(comList: ComInfo[], testCount: number) {
+    const cases: React.ReactElement[] = []
+    let i = 0
+    while( cases.length < testCount) {
+        comList.forEach(com => {
+            cases.push(
+                (
+                    <View key={i}>
+                        { com.com }
+                    </View>
+                )
+            )
+            i++;
+        })
+    }
+    return (
+        <SafeAreaView>
+            <ScrollView
+                style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    flexDirection: 'row'
+                }}
+            >
+                { cases }
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+
+function PerformanceList() {
+    return (
+      <View style={{backgroundColor: 'black'}}>
+        <StatusBar barStyle="light-content" />
+        <SafeAreaView>
+          <NavigationContainer hasHeader={false}>
+            <PortalProvider>
+                <Page
+                    key={'All'}
+                    name={`All`}>
+                        { AllComCase(comList, testCount) }
+                </Page>
+
+              {comList.map(com => {
+                const TestSuite = com.com
+                return (
+                  <Page
+                    key={com.name}
+                    name={`${com.name.replace('Test', '')}`}>
+                        { SingleComCase(TestSuite, testCount) }
+                  </Page>
+                );
+              })}
+            </PortalProvider>
+          </NavigationContainer>
+        </SafeAreaView>
+      </View>
+    );
+  }
+  export default PerformanceList
\ No newline at end of file

From 2c17e63c984d1a0b33ca444ca7b258b797555625 Mon Sep 17 00:00:00 2001
From: yangzx18 <yangzhixian5@h-partners.com>
Date: Wed, 15 May 2024 20:01:23 +0800
Subject: [PATCH 2/2] test: add Pattern  performance test

---
 .../components/performanceList.tsx            | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/tester/svgDemoCases/components/performanceList.tsx b/tester/svgDemoCases/components/performanceList.tsx
index 53515faa..5581abca 100644
--- a/tester/svgDemoCases/components/performanceList.tsx
+++ b/tester/svgDemoCases/components/performanceList.tsx
@@ -9,8 +9,8 @@ import {
 import {NavigationContainer, Page} from '../Navigation';
 import {PortalProvider} from '@gorhom/portal';
 import { Circle, Svg, Ellipse, Path, Polygon, Polyline, Mask, Symbol, Text, Use, LinearGradient, RadialGradient, 
-    TSpan, Image, G, Defs, ClipPath, Rect, Line, TextPath, Stop } from 'react-native-svg'
-const testCount = 100
+    TSpan, Image, G, Defs, ClipPath, Rect, Line, TextPath, Stop, Pattern } from 'react-native-svg'
+const testCount = 1500
 
 function repeat(com: React.ReactElement, repeatCount: number) {
     const cases = []
@@ -186,6 +186,22 @@ const SymbolCase = (
     </Svg>
 )
 
+const PatternCase = (
+    <Svg viewBox="0 0 100 100" width={width} height={height}>
+        <Pattern
+            id="p1"
+            patternUnits="userSpaceOnUse"
+            width="20"
+            height="20"
+            patternTransform="rotate(20)
+                      skewX(30)
+                      scale(1 0.5)"
+        >
+            <Circle cx="10" cy="10" r="10" fill={'red'}/>
+        </Pattern>
+        <Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+    </Svg>
+)
 
 interface ComInfo{
     name: string,
@@ -257,6 +273,10 @@ const comList: ComInfo[] = [
     {
         name: 'Symbol',
         com: SymbolCase
+    },
+    {
+        name: 'Pattern',
+        com: PatternCase
     }
 ]
 // @ts-ignore