NativeScript · triniwiz · Nov 23, 2021 · Nov 23, 2021
diff --git a/apps/demo/src/plugin-demos/mlkit-core.ts b/apps/demo/src/plugin-demos/mlkit-core.ts
@@ -1,6 +1,6 @@
 import { Observable, EventData, Page, Dialogs } from '@nativescript/core';
 import { DemoSharedMlkitCore } from '@demo/shared';
-import { DetectionType, MLKitView } from '@nativescript/mlkit-core';
+import { DetectionType, MLKitView, DetectionEvent } from '@nativescript/mlkit-core';
 import { BarcodeResult } from '@nativescript/mlkit-barcode-scanning';
 import { FaceResult } from '@nativescript/mlkit-face-detection';
 import { ImageLabelingResult } from '@nativescript/mlkit-image-labeling';
@@ -20,8 +20,8 @@ export class DemoModel extends DemoSharedMlkitCore {
 		this.camera = args.object;
 	}
 
-	onDetection(data, type: DetectionType) {
-		console.log('onDetection', data, type);
+	onDetection(event: DetectionEvent) {
+		console.log('onDetection', event.data, event.type);
 	}
 
 	toggleCamera() {

diff --git a/apps/demo/src/plugin-demos/mlkit-core.xml b/apps/demo/src/plugin-demos/mlkit-core.xml
@@ -4,7 +4,7 @@
         </ActionBar>
     </Page.actionBar>
     <GridLayout rows="*,auto,auto,auto,auto" height="100%">
-       <ui:MLKitView height="100%" rowSpan="3"  loaded="{{ onLoaded }}" cameraPosition="back" detectionType="{{ detectorType }}" onDetection="{{ onDetection }}"/>
+       <ui:MLKitView height="100%" rowSpan="3"  loaded="{{ onLoaded }}" cameraPosition="back" detectionType="{{ detectorType }}" detection="{{ onDetection }}"/>
        <Button row="1" height="40" text="Toggle Camera" tap="{{ toggleCamera }}" />
        <Button row="2" height="40" text="Request Camera Permission" tap="{{ requestPermission }}" />
        <Label row="3" text="{{'Detecting ' + detectorType }}"/>

diff --git a/packages/mlkit-barcode-scanning/index.d.ts → packages/mlkit-barcode-scanning/index.ts b/packages/mlkit-barcode-scanning/index.d.ts → packages/mlkit-barcode-scanning/index.ts
@@ -134,6 +134,25 @@ export enum ValueType {
     Unknown = "unknown"
 }
 
+export enum BarcodeFormats {
+    ALL = 'all',
+    CODE_128 = 'code_128',
+    CODE_39 = 'code_39',
+    CODE_93 = 'code_93',
+    CODABAR = 'codabar',
+    DATA_MATRIX = 'data_matrix',
+    EAN_13 = 'ean_13',
+    EAN_8 = 'ean_8',
+    ITF = 'itf',
+    QR_CODE = 'qr_code',
+    UPC_A = 'upc_a',
+    UPC_E = 'upc_e',
+    PDF417 = 'pdf417',
+    AZTEC = 'aztec',
+    UNKOWN = 'unknown'
+}
+
+
 
 export interface BarcodeResult {
     calendarEvent?: CalenderEvent
@@ -143,7 +162,7 @@ export interface BarcodeResult {
     displayValue?: string
     driverLicense?: DriverLicense
     email?: Email
-    format: BarcodeScanner.BarcodeFormat
+    format: BarcodeFormats
     geoPoint?: GeoPoint
     phone?: Phone
     rawBytes?: any[]

diff --git a/packages/mlkit-barcode-scanning/package.json b/packages/mlkit-barcode-scanning/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nativescript/mlkit-barcode-scanning",
-    "version": "1.0.0-alpha.0",
+    "version": "1.0.0-alpha.1",
     "description": "NativeScript MLKit Barcode Scanner module",
     "main": "index",
     "typings": "index.d.ts",

diff --git a/packages/mlkit-core/README.md b/packages/mlkit-core/README.md
@@ -15,7 +15,7 @@ ns plugin add @nativescript/mlkit-core
 <ui:MLKitView
   cameraPosition="back"
    detectionType="all" 
-   onDetection="onDetection"
+   detection="onDetection"
 />
 ```
 
@@ -37,11 +37,11 @@ import { MLKitModule } from '@nativescript/mlkit-core/angular';
 ```
 
 
-```xml
+```html
 <MLKitView
 cameraPosition="back"
 detectionType="all" 
-onDetection="onDetection"
+(detection)="onDetection"
 ></MLKitView>
 ```
 
@@ -58,7 +58,7 @@ Vue.use(MLKit)
 <MLKitView
 cameraPosition="back"
 detectionType="all" 
-onDetection="onDetection"
+@detection="onDetection"
 ></MLKitView>
 ```
 
@@ -73,10 +73,10 @@ ns plugin add @nativescript/mlkit-barcode-scanning
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { BarcodeResult } from '@nativescript/mlkit-barcode-scanning';
-onDetection(data, type){
-    if(type === DetectionType.Barcode){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Barcode){
         const barcode: BarcodeResult = data;
     }
 }
@@ -89,10 +89,10 @@ ns plugin add @nativescript/mlkit-face-detection
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { FaceResult } from '@nativescript/mlkit-face-detection';
-onDetection(data, type){
-    if(type === DetectionType.Face){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Face){
         const faces: FaceResult[] = data;
     }
 }
@@ -106,10 +106,10 @@ ns plugin add @nativescript/mlkit-image-labeling
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { ImageLabelingResult } from '@nativescript/mlkit-image-labeling';
-onDetection(data, type){
-    if(type === DetectionType.Image){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Image){
         const labels: ImageLabelingResult[] = data;
     }
 }
@@ -123,10 +123,10 @@ ns plugin add @nativescript/mlkit-object-detection
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { ObjectResult } from '@nativescript/mlkit-object-detection'
-onDetection(data, type){
-    if(type === DetectionType.Object){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Object){
         const objects: ObjectResult[] = data;
     }
 }
@@ -139,10 +139,10 @@ ns plugin add @nativescript/mlkit-pose-detection
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { PoseResult } from '@nativescript/mlkit-pose-detection';
-onDetection(data, type){
-    if(type === DetectionType.Pose){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Pose){
         const poses: PoseResult[] = data;
     }
 }
@@ -156,10 +156,10 @@ ns plugin add @nativescript/mlkit-text-recognition
 ```
 
 ```ts
-import { DetectionType } from '@nativescript/mlkit-core';
+import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
 import { TextResult } from '@nativescript/mlkit-text-recognition';
-onDetection(data, type){
-    if(type === DetectionType.Text){
+onDetection(event: DetectionEvent){
+    if(event.type === DetectionType.Text){
         const text: TextResult[] = data;
     }
 }

diff --git a/packages/mlkit-core/common.ts b/packages/mlkit-core/common.ts
@@ -44,6 +44,7 @@ export enum FaceDetectionPerformanceMode {
 
 @CSSType('MLKitView')
 export class MLKitViewBase extends ContainerView {
+    public static detectionEvent = 'detection';
     cameraPosition: CameraPosition;
     detectionType: DetectionType;
     barcodeFormats: BarcodeFormats[];
@@ -53,16 +54,8 @@ export class MLKitViewBase extends ContainerView {
     imageLabelerConfidenceThreshold: number;
     objectDetectionMultiple: boolean;
     objectDetectionClassify: boolean;
-    onDetection: (data: {
-        [key: string]: any;
-    }, type: DetectionType) => void;
 }
 
-export const onDetectionProperty = new Property<MLKitViewBase, (data: { [key: string]: any }) => void>({
-    name: 'onDetection'
-});
-onDetectionProperty.register(MLKitViewBase);
-
 export const cameraPositionProperty = new Property<MLKitViewBase, CameraPosition>({
     name: 'cameraPosition',
     defaultValue: CameraPosition.BACK

diff --git a/packages/mlkit-core/index.android.ts b/packages/mlkit-core/index.android.ts
@@ -1,4 +1,4 @@
-import { BarcodeFormats, barcodeFormatsProperty, CameraPosition, cameraPositionProperty, DetectionType, detectionTypeProperty, faceDetectionMinFaceSizeProperty, faceDetectionPerformanceModeProperty, faceDetectionTrackingEnabledProperty, imageLabelerConfidenceThresholdProperty, MLKitViewBase, objectDetectionClassifyProperty, objectDetectionMultipleProperty, onDetectionProperty } from "./common";
+import { BarcodeFormats, barcodeFormatsProperty, CameraPosition, cameraPositionProperty, DetectionType, detectionTypeProperty, faceDetectionMinFaceSizeProperty, faceDetectionPerformanceModeProperty, faceDetectionTrackingEnabledProperty, imageLabelerConfidenceThresholdProperty, MLKitViewBase, objectDetectionClassifyProperty, objectDetectionMultipleProperty } from "./common";
 import { Application, Device, Utils, AndroidActivityRequestPermissionsEventData } from '@nativescript/core';
 import lazy from '@nativescript/core/utils/lazy';
 
@@ -117,17 +117,31 @@ export class MLKitView extends MLKitViewBase {
                 type = DetectorType_None();
                 break;
         }
-
         this.#camera.setDetectorType(type);
+        this.#setListeners();
+    }
+
+    initNativeView() {
+        super.initNativeView();
+        this.#setListeners();
     }
 
-    [onDetectionProperty.setNative](value) {
+    #setListeners() {
         const ref = new WeakRef(this);
         if (!this.#onTextListener && (this.detectionType === DetectionType.Text || this.detectionType === DetectionType.All)) {
             this.#onTextListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Text);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Text
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -140,8 +154,17 @@ export class MLKitView extends MLKitViewBase {
         if (!this.#onBarcodeListener && (this.detectionType.includes(DetectionType.Barcode) || this.detectionType.includes(DetectionType.All))) {
             this.#onBarcodeListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Barcode);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Barcode
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -155,8 +178,17 @@ export class MLKitView extends MLKitViewBase {
         if (!this.#onDigitalInkListener && (this.detectionType === DetectionType.DigitalInk || this.detectionType === DetectionType.All)) {
             /* this.#onDigitalInkListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                  onSuccess(param0: string) {
+                       const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if(!hasListener){
+                        return;
+                    }
                      try {
-                         ref?.get?.().onDetection?.(JSON.parse(param0));
+                         ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.DigitalInk
+                        });
                      } catch (e) { }
                   },
                  onError(param0: string, param1: java.lang.Exception) {
@@ -169,8 +201,17 @@ export class MLKitView extends MLKitViewBase {
             this.#faceDetectionOptions = new io.github.triniwiz.fancycamera.facedetection.FaceDetection.Options();
             this.#onFaceListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Face);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Face
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -183,8 +224,17 @@ export class MLKitView extends MLKitViewBase {
         if (!this.#onImageListener && (this.detectionType === DetectionType.Image || this.detectionType === DetectionType.All)) {
             this.#onImageListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Image);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Image
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -197,8 +247,17 @@ export class MLKitView extends MLKitViewBase {
         if (!this.#onObjectListener && (this.detectionType === DetectionType.Object || this.detectionType === DetectionType.All)) {
             this.#onObjectListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Object);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Object
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -211,8 +270,17 @@ export class MLKitView extends MLKitViewBase {
         if (!this.#onPoseListener && (this.detectionType === DetectionType.Pose || this.detectionType === DetectionType.All)) {
             this.#onPoseListener = new io.github.triniwiz.fancycamera.ImageAnalysisCallback({
                 onSuccess(param0: string) {
+                    const hasListener = ref?.get?.().hasListeners?.(MLKitView.detectionEvent);
+                    if (!hasListener) {
+                        return;
+                    }
                     try {
-                        ref?.get?.().onDetection?.(JSON.parse(param0), DetectionType.Pose);
+                        ref?.get?.().notify?.({
+                            eventName: MLKitView.detectionEvent,
+                            object: ref?.get?.(),
+                            data: JSON.parse(param0),
+                            type: DetectionType.Pose
+                        });
                     } catch (e) { }
                 },
                 onError(param0: string, param1: java.lang.Exception) {
@@ -233,7 +301,7 @@ export class MLKitView extends MLKitViewBase {
         let formats;
         if (Array.isArray(value)) {
             if (value.indexOf(BarcodeFormats.ALL)) {
-                formats = Array.create('io.github.triniwiz.fancycamera.barcodescanning.BarcodeScanner.BarcodeFormat', 1);
+                formats = Array.create('io.github.triniwiz.fancycamera.barcodescanning.BarcodeScanner$BarcodeFormat', 1);
                 formats[0] = io.github.triniwiz.fancycamera.barcodescanning.BarcodeScanner.BarcodeFormat.ALL;
             } else {
                 formats = value.map(format => {

diff --git a/packages/mlkit-core/index.d.ts b/packages/mlkit-core/index.d.ts
@@ -1,13 +1,17 @@
 import { MLKitViewBase, DetectionType } from "./common";
+import { EventData } from '@nativescript/core';
+export interface DetectionEvent extends EventData {
+    data: { [key: string]: any };
+    type: DetectionType
+}
 export { BarcodeFormats, barcodeFormatsProperty, CameraPosition, cameraPositionProperty, DetectionType, faceDetectionMinFaceSizeProperty, faceDetectionPerformanceModeProperty, faceDetectionTrackingEnabledProperty, imageLabelerConfidenceThresholdProperty as imageLablerConfidenceThresholdProperty, objectDetectionClassifyProperty, objectDetectionMultipleProperty } from './common';
 export declare class MLKitView extends MLKitViewBase {
     static isAvailable(): boolean;
-    onDetection: (data: {
-        [key: string]: any;
-    }, type: DetectionType) => void;
+    static detectionEvent: string;
     stopPreview(): void;
     toggleCamera(): void;
     startPreview(): void;
     requestCameraPermission(): Promise<void>;
     hasCameraPermission(): boolean;
+    on(event: 'detection', callback: (args: DetectionEvent) => void, thisArg?: any);
 }