example assertion

Author: ShaMan123

CanvasExample/App/DeclarativeUpdate.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import React, { useRef } from 'react';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import RCanvas, { generatePathId, RCanvasRef, RPath, RPathData } from 'react-native-reanimated-canvas';
-import { styles } from './common';
+import { styles, usePathUpdateAssertion } from './common';
 import { useState } from 'react';
 import { useEffect } from 'react';
 
@@ -19,7 +19,8 @@ function genPathData(id = generatePathId()) {
 }
 
 export default function CustomTouchHandling() {
-  const refA = useRef<RCanvasRef & PanGestureHandler>();
+  const ref = useRef<RCanvasRef & PanGestureHandler>();
+  const onChange = usePathUpdateAssertion(ref);
   const [paths, setPaths] = useState(_.map(new Array(10).fill(0), () => genPathData()));
   useEffect(() => {
     let t = setInterval(() => {
@@ -32,9 +33,9 @@ export default function CustomTouchHandling() {
       style={styles.default}
       strokeColor='red'
       strokeWidth={20}
-      ref={refA}
+      ref={ref}
       renderToHardwareTextureAndroid={false}
-      onChange={e => console.log(e.nativeEvent.paths)}
+      onChange={onChange}
     >
       {_.map(paths, (data, i) => <RPath {...data} key={`DRPath${i}`} id={9001 + i * 3} />)}
     </RCanvas>

CanvasExample/App/Updater.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Text } from 'react-native';
 import RCanvas, { generatePathId, RCanvasRef, RPath, RPathData, PathChangeData } from 'react-native-reanimated-canvas';
-import { styles } from './common';
+import { styles, usePathUpdateAssertion } from './common';
 
 const points = new Array(200).fill(0).map((v, i) => ({ x: i, y: i }));
 
@@ -17,7 +17,8 @@ function genPathData(id = generatePathId()) {
 }
 
 export default function CustomTouchHandling() {
-  const refA = useRef<RCanvasRef>();
+  const ref = useRef<RCanvasRef>();
+  const onChange = usePathUpdateAssertion(ref);
   const [renderToHWT, setHWT] = useState(false);
   const [paths, setPaths] = useState([genPathData()]);
   /*
@@ -46,17 +47,17 @@ export default function CustomTouchHandling() {
         { id, value: genPathData(id) }
       ];
 
-      if (refA.current && refA.current.getPaths().length > 0 && i % 2 === 0) {
-        const size = refA.current.getPaths().length
-        const path = refA.current.getPaths()[Math.round(Math.random() * size) % size];
+      if (ref.current && ref.current.getPaths().length > 0 && i % 2 === 0) {
+        const size = ref.current.getPaths().length
+        const path = ref.current.getPaths()[Math.round(Math.random() * size) % size];
         updater.push({ id: path.id, value: null });
       }
 
       if (i % (renderToHWT ? 2 : 5) === 0) {
         setHWT(!renderToHWT)
       }
 
-      refA.current && refA.current.update(updater);
+      ref.current && ref.current.update(updater);
     }, 1000);
     return () => clearImmediate(t);
   }, [renderToHWT]);
@@ -67,9 +68,9 @@ export default function CustomTouchHandling() {
         style={styles.default}
         strokeColor='red'
         strokeWidth={20}
-        ref={refA}
+        ref={ref}
         renderToHardwareTextureAndroid={renderToHWT}
-        onChange={e => console.log(e.nativeEvent)}
+        onChange={onChange}
       >
         {_.map(paths, data => <RPath {...data} key={data.id} />)}
       </RCanvas>

CanvasExample/App/common.tsx

@@ -2,6 +2,8 @@
 import { useCallback, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { block, Clock, clockRunning, cond, debug, Easing, greaterOrEq, not, set, spring, startClock, stopClock, sub, timing, Value } from 'react-native-reanimated';
+import { ChangeEvent, RCanvasRef, RPathData } from 'react-native-reanimated-canvas';
+import _ from 'lodash';
 
 export function useRefGetter<T, R = T>(initialValue?: T, action: (ref: T) => R = (current) => (current as unknown as R)) {
   const ref = useRef(initialValue);
@@ -17,6 +19,17 @@ export function useRefGetter<T, R = T>(initialValue?: T, action: (ref: T) => R =
   return [ref, getter, defaultGetter] as [typeof ref, typeof getter, typeof defaultGetter];
 }
 
+export function usePathUpdateAssertion(ref: React.RefObject<RCanvasRef | undefined>) {
+  return useCallback((e: ChangeEvent) => {
+    const { paths, added, changed, removed } = e.nativeEvent;
+    const refPaths = ref.current?.getPaths();
+    const withoutRemoved = (paths?: RPathData[]) => _.intersectionWith(paths, _.concat(added, changed), (a, b) => a.id === b);
+    const clean = _.intersectionWith(refPaths, removed, (a, b) => a.id === b).length === 0;
+    const assert = _.isEqual(withoutRemoved(paths), withoutRemoved(refPaths)) && clean;
+    if (!assert) throw new Error('assertion error: RCAnvas paths are not in sync with last update');
+  }, [ref]);
+}
+
 export function runSpring(clock: Animated.Clock, value: Animated.Adaptable<number>, dest: Animated.Adaptable<number>) {
   const state = {
     finished: new Value(0),