onCanvasReady event listener (#93)

ian-wd · web-flow · commit 998167257fbe · 2025-04-11T15:23:08.000-04:00
* feat: add `isCanvasReady()` validation before firing any native events

* feat: init `onCanvasReady` event

* chore: cleanup extra consoles on example app

* docs: add `onCanvasReady` to README

* fix: `topCanvasReady` error on iOS
diff --git a/README.md b/README.md
@@ -98,6 +98,7 @@ AppRegistry.registerComponent('example', () => Example);
 | permissionDialogTitle   |  `string`  | Android Only: Provide a Dialog Title for the Image Saving PermissionDialog. Defaults to empty string if not set                                                                                                                                                                                                                             |
 | permissionDialogMessage |  `string`  | Android Only: Provide a Dialog Message for the Image Saving PermissionDialog. Defaults to empty string if not set                                                                                                                                                                                                                           |
 | onGenerateBase64        | `function` | An optional function which accepts 1 argument `result` containing the base64 string of the canvas. Called when `getBase64()` is invoked.                                                                                                                                                                                                    |
+| onCanvasReady           | `function` | An optional function called when the canvas is ready for interaction.                                                                                                                                                                                                                                                                       |
 
 #### Methods
 
@@ -254,6 +255,7 @@ AppRegistry.registerComponent('example', () => Example);
 | strokeWidthStep         |  `number`   | The step value of thickness when tapping `strokeWidthComponent`.                                                                                                                                                                                                                                                                                  |
 | savePreference          | `function`  | A function which is called when saving image and should return an object (see [below](#objects)).                                                                                                                                                                                                                                                 |
 | onSketchSaved           | `function`  | See [above](#properties)                                                                                                                                                                                                                                                                                                                          |
+| onCanvasReady           | `function`  | An optional function called when the canvas is ready for interaction.                                                                                                                                                                                                                                                                             |
 
 #### Methods
 
diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManager.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManager.kt
@@ -1,6 +1,7 @@
 package com.sourcetoad.reactnativesketchcanvas
 
 import android.graphics.PointF
+import android.util.Log
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
@@ -36,7 +37,11 @@ class RNTSketchCanvasViewManager :
         commandId: String?,
         args: ReadableArray?
     ) {
-        mDelegate.receiveCommand(root, commandId, args)
+        if (root.getSketchCanvas().isCanvasReady()) {
+            mDelegate.receiveCommand(root, commandId, args)
+        } else {
+            Log.i("RNTSketchCanvas", "Canvas is not ready")
+        }
     }
 
     override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
@@ -58,6 +63,11 @@ class RNTSketchCanvasViewManager :
             MapBuilder.of(
                 "registrationName",
                 "onGenerateBase64"
+            ),
+            OnCanvasReadyEvent.EVENT_NAME,
+            MapBuilder.of(
+                "registrationName",
+                "onCanvasReady"
             )
         )
     }
diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchCanvas.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchCanvas.kt
@@ -47,12 +47,17 @@ class SketchCanvas(context: ThemedReactContext) : View(context) {
     private val mArrCanvasText = ArrayList<CanvasText>()
     private val mArrTextOnSketch = ArrayList<CanvasText>()
     private val mArrSketchOnText = ArrayList<CanvasText>()
+    private var mIsCanvasInitialized = false
 
     fun getParentViewId(): Int {
         val parentView = parent as View
         return parentView.id
     }
 
+    fun isCanvasReady(): Boolean {
+        return mIsCanvasInitialized && mDrawingCanvas != null
+    }
+
     private fun getFileUri(filepath: String): Uri {
         var uri = Uri.parse(filepath)
         if (uri.scheme == null) {
@@ -420,6 +425,17 @@ class SketchCanvas(context: ThemedReactContext) : View(context) {
             }
             mNeedsFullRedraw = true
             invalidate()
+
+            if (!mIsCanvasInitialized) {
+                UIManagerHelper.getEventDispatcherForReactTag(mContext, getParentViewId())
+                    ?.dispatchEvent(
+                        OnCanvasReadyEvent(
+                            UIManagerHelper.getSurfaceId(mContext),
+                            getParentViewId()
+                        )
+                    )
+                mIsCanvasInitialized = true
+            }
         }
     }
 
diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnCanvasReadyEvent.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnCanvasReadyEvent.kt
@@ -0,0 +1,23 @@
+package com.sourcetoad.reactnativesketchcanvas
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnCanvasReadyEvent(
+  surfaceId: Int,
+  viewId: Int,
+) : Event<OnCanvasReadyEvent>(surfaceId, viewId)  {
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun getEventData(): WritableMap {
+    val eventData = Arguments.createMap()
+    return eventData
+  }
+
+  companion object {
+    const val EVENT_NAME = "onCanvasReady"
+  }
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -26,6 +26,102 @@ type ExampleState = {
   scrollEnabled: boolean;
 };
 
+const testPath1 = [
+  {
+    path: {
+      id: 48034205,
+      color: '#FF0000',
+      width: 5,
+      data: [
+        '565.47,259.47',
+        '565.47,254',
+        '564.45,238.63',
+        '559.84,216.66',
+        '552.9,191.47',
+        '541.21,161.56',
+        '523.7,133.11',
+        '508.1,114.47',
+        '497.58,105.88',
+        '482.46,98.99',
+        '467.64,97.48',
+        '459.36,100.76',
+        '454.79,107.44',
+        '447.61,134.91',
+        '444.44,166.78',
+        '442.97,203.28',
+        '442.97,220.49',
+        '456.83,260.94',
+        '479.03,291.37',
+        '503.71,316.47',
+        '535.02,345.02',
+        '585.24,388.53',
+        '606.96,406.27',
+        '624.82,419.17',
+        '633.8,427.67',
+        '634.96,428.95',
+        '634.96,429.48',
+        '630.39,420.75',
+        '628.48,418.48',
+      ],
+    },
+    size: { width: 1280, height: 652 },
+    drawer: null,
+  },
+  {
+    path: {
+      id: 50223646,
+      color: '#FF0000',
+      width: 5,
+      data: [
+        '567.97,256.49',
+        '565.82,252.94',
+        '566.45,252.48',
+        '565.47,247.71',
+        '563.95,238.16',
+        '563.95,224.89',
+        '563.95,214.86',
+        '568.62,201.67',
+        '578.46,182.59',
+        '592.39,163.97',
+        '609.14,148.3',
+        '625.33,139.49',
+        '647.67,131.57',
+        '663.59,127.37',
+        '682.97,123.97',
+        '703.48,123.97',
+        '721.17,123.97',
+        '735.32,123.97',
+        '746.95,134.1',
+        '753.79,145.92',
+        '756.45,161.81',
+        '756.45,184.47',
+        '754.51,209.8',
+        '747.82,230.05',
+        '736.97,251.61',
+        '721.58,275.1',
+        '700.22,300.01',
+        '685.44,318.33',
+        '673.64,333.23',
+        '661.29,349.32',
+        '655.36,358.3',
+        '652.93,364.94',
+        '649.45,371.52',
+        '647.35,385.27',
+        '645.57,397.08',
+        '641.91,410.31',
+        '640.93,418.06',
+        '639.97,421.95',
+        '637.97,425.87',
+        '637.97,427.81',
+        '637.97,428.7',
+        '637.97,428.97',
+      ],
+    },
+    size: { width: 1280, height: 652 },
+    drawer: null,
+  },
+];
+
 export default class example extends Component<any, ExampleState> {
   constructor(props: any) {
     super(props);
@@ -86,6 +182,13 @@ export default class example extends Component<any, ExampleState> {
             <TouchableOpacity
               onPress={() => {
                 this.setState({ example: 2 });
+
+                if (this.canvas) {
+                  // debug: attempt to load paths immediately without waiting for onCanvasReady
+                  testPath1.forEach((path) => {
+                    this.canvas.addPath(path);
+                  });
+                }
               }}
             >
               <Text
@@ -163,6 +266,9 @@ export default class example extends Component<any, ExampleState> {
             <RNSketchCanvas
               containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
               canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
+              onCanvasReady={() => {
+                console.log('onCanvasReady');
+              }}
               onStrokeEnd={(data) => {}}
               closeComponent={
                 <View style={styles.functionButton}>
@@ -239,6 +345,7 @@ export default class example extends Component<any, ExampleState> {
                 };
               }}
               onSketchSaved={(success, path) => {
+                console.log('onSketchSaved', success, path);
                 Alert.alert(
                   success ? 'Image saved!' : 'Failed to save image!',
                   path
@@ -293,6 +400,14 @@ export default class example extends Component<any, ExampleState> {
                   directory: SketchCanvas.MAIN_BUNDLE,
                   mode: 'AspectFit',
                 }}
+                onCanvasReady={() => {
+                  console.log('onCanvasReady #2');
+
+                  // debug path #2
+                  testPath1.forEach((path) => {
+                    this.canvas.addPath(path);
+                  });
+                }}
                 // localSourceImage={{ filename: 'bulb.png', directory: RNSketchCanvas.MAIN_BUNDLE }}
                 ref={(ref) => (this.canvas = ref)}
                 style={{ flex: 1 }}
@@ -353,7 +468,6 @@ export default class example extends Component<any, ExampleState> {
                     { backgroundColor: 'black', width: 90 },
                   ]}
                   onPress={() => {
-                    console.log(this.canvas.getPaths());
                     Alert.alert(JSON.stringify(this.canvas.getPaths()));
                     this.canvas.getBase64('jpg', false, true, true, true);
                   }}
diff --git a/ios/RNSketchCanvasViewComponent.mm b/ios/RNSketchCanvasViewComponent.mm
@@ -67,6 +67,7 @@ -(void)prepareForRecycle {
         [self setupView];
     }
   
+  
     _isInitialValueSet = NO;
 }
 
@@ -161,6 +162,10 @@ - (void)handleEvent:(NSDictionary *)eventData {
     };
 
     self.eventEmitter.onChange(result);
+  } else if ([eventData[@"eventType"] isEqualToString:@"onCanvasReady"]) {
+    RNTSketchCanvasEventEmitter::OnCanvasReady result{};
+
+    self.eventEmitter.onCanvasReady(result);
   } else {
     RNTSketchCanvasEventEmitter::OnChange result{
       .eventType = std::string("save"),
diff --git a/ios/RNSketchCanvasViewManager.mm b/ios/RNSketchCanvasViewManager.mm
@@ -18,5 +18,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(text, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onGenerateBase64, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onCanvasReady, RCTDirectEventBlock)
 
 @end
diff --git a/ios/SketchCanvas/RNSketchCanvas.m b/ios/SketchCanvas/RNSketchCanvas.m
@@ -15,6 +15,7 @@ @implementation RNSketchCanvas
     CGContextRef _drawingContext, _translucentDrawingContext;
     CGImageRef _frozenImage, _translucentFrozenImage;
     BOOL _needsFullRedraw;
+    BOOL _canvasIsReady;
 
     UIImage *_backgroundImage;
     UIImage *_backgroundImageScaled;
@@ -27,6 +28,7 @@ - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
         _paths = [NSMutableArray new];
         _needsFullRedraw = YES;
+        _canvasIsReady = NO;
 
         self.backgroundColor = [UIColor clearColor];
         self.clearsContextBeforeDrawing = YES;
@@ -62,6 +64,7 @@ - (void)invalidate {
     _paths = nil;
     _currentPath = nil;
     _lastSize = CGSizeZero;
+    _canvasIsReady = NO;
     _needsFullRedraw = YES;
 }
 
@@ -187,10 +190,12 @@ - (void)createDrawingContext {
     if (_drawingContext) {
         CGContextRelease(_drawingContext);
         _drawingContext = nil;
+        _canvasIsReady = NO;
     }
     if (_translucentDrawingContext) {
         CGContextRelease(_translucentDrawingContext);
         _translucentDrawingContext = nil;
+        _canvasIsReady = NO;
     }
     
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
@@ -212,9 +217,17 @@ - (void)createDrawingContext {
             CGContextRelease(_translucentDrawingContext);
             _translucentDrawingContext = nil;
         }
+        _canvasIsReady = NO;
     } else {
         CGContextConcatCTM(_drawingContext, CGAffineTransformMakeScale(scale, scale));
         CGContextConcatCTM(_translucentDrawingContext, CGAffineTransformMakeScale(scale, scale));
+
+        if (!_canvasIsReady) {
+            if ([self.eventDelegate respondsToSelector:@selector(handleEvent:)]) {
+                 [self.eventDelegate handleEvent: @{ @"eventType": @"onCanvasReady" }];
+            }
+            _canvasIsReady = YES;
+        }
     }
     
     CGColorSpaceRelease(colorSpace);
diff --git a/src/SketchCanvas.tsx b/src/SketchCanvas.tsx
@@ -355,6 +355,9 @@ class SketchCanvas extends React.Component<SketchCanvasProps, CanvasState> {
         onGenerateBase64={(e: any) => {
           this.props.onGenerateBase64?.(e.nativeEvent || {});
         }}
+        onCanvasReady={() => {
+          this.props.onCanvasReady?.();
+        }}
         localSourceImage={this.props.localSourceImage}
         permissionDialogTitle={this.props.permissionDialogTitle}
         permissionDialogMessage={this.props.permissionDialogMessage}
diff --git a/src/index.tsx b/src/index.tsx
@@ -320,6 +320,7 @@ export default class RNSketchCanvas extends React.Component<
             this.props.onSketchSaved?.(success, path)
           }
           onPathsChange={this.props.onPathsChange}
+          onCanvasReady={this.props.onCanvasReady}
           text={this.props.text}
           localSourceImage={this.props.localSourceImage}
           permissionDialogTitle={this.props.permissionDialogTitle}
diff --git a/src/specs/SketchCanvasNativeComponent.ts b/src/specs/SketchCanvasNativeComponent.ts
@@ -53,6 +53,11 @@ export interface NativeProps extends ViewProps {
    */
   text?: CanvasText[];
 
+  /**
+   * Callback when the canvas has finished loading and is ready for interaction.
+   */
+  onCanvasReady?: DirectEventHandler<null>;
+
   onChange?: BubblingEventHandler<CanvasChangeEvent> | null;
   onGenerateBase64?: DirectEventHandler<{ base64: string }> | null;
 }
diff --git a/src/types.tsx b/src/types.tsx
@@ -86,6 +86,7 @@ export interface SketchCanvasProps {
   onSketchSaved?: (result: boolean, path: string) => void;
   onGenerateBase64?: (result: { base64: string }) => void;
   onPathsChange?: (pathsCount: number) => void;
+  onCanvasReady?: () => void;
 
   getBase64?: (
     imageType: ImageType,
@@ -147,6 +148,7 @@ export interface RNSketchCanvasProps {
   };
   onSketchSaved?: (result: boolean, path: string) => void;
   onGenerateBase64?: (result: { base64: string }) => void;
+  onCanvasReady?: () => void;
 
   text?: CanvasText[];
   /**

Original file line number	Diff line number	Diff line change
`@@ -320,6 +320,7 @@ export default class RNSketchCanvas extends React.Component<`
`320`	`320`	`this.props.onSketchSaved?.(success, path)`
`321`	`321`	`}`
`322`	`322`	`onPathsChange={this.props.onPathsChange}`
	`323`	`+ onCanvasReady={this.props.onCanvasReady}`
`323`	`324`	`text={this.props.text}`
`324`	`325`	`localSourceImage={this.props.localSourceImage}`
`325`	`326`	`permissionDialogTitle={this.props.permissionDialogTitle}`