feat(ui-canvaslabel): CanvasLabel now is a GridLayout to allow adding subviews.

Author: farfromrefug

packages/ui-canvas/platforms/android/include.gradle

@@ -1,3 +1,18 @@
+import groovy.json.JsonSlurper
 dependencies {
+    implementation(name:'widgets-release', ext:'aar')
     implementation "androidx.annotation:annotation:1.1.0"
+}
+repositories {
+    def widgetsDir = "$USER_PROJECT_ROOT/node_modules/@nativescript/core/platforms/android"
+    def appPackageJsonFile = file("$USER_PROJECT_ROOT/package.json")
+    if (appPackageJsonFile.exists()) {
+        def appPackageJson = new JsonSlurper().parseText(appPackageJsonFile.text)
+        if (appPackageJson.dependencies['@akylas/nativescript'] != null) {
+            widgetsDir = "$USER_PROJECT_ROOT/node_modules/@akylas/nativescript/platforms/android"
+        }
+    }
+    flatDir {
+        dirs "$widgetsDir"
+    }
 }

packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasView.java

@@ -4,7 +4,7 @@
 import android.view.View;
 import android.graphics.Canvas;
 
-public class CanvasView extends View {
+public class CanvasView extends org.nativescript.widgets.GridLayout {
     public SizeChangedListener sizeChangedListener = null;
     public DrawListener drawListener = null;
 

src/ui-canvas/index.android.ts

@@ -532,7 +532,7 @@ class CanvasView extends CanvasBase {
             }
             canvas.drawBitmap(shapeCanvas.getImage() as android.graphics.Bitmap, 0, 0, this.shapePaint);
         } else if (!this.cached) {
-            const shapes = this.mShapes;
+            const shapes = this.shapes;
             const width = canvas.getWidth();
             const height = canvas.getHeight();
             if (shapes && shapes.length > 0) {

src/ui-canvas/index.common.ts

@@ -1,4 +1,4 @@
-import { ChangedData, Observable, ObservableArray, Property, Screen, Utils, View, booleanConverter, colorProperty } from '@nativescript/core';
+import { ChangedData, GridLayout, Observable, ObservableArray, Property, Screen, Utils, View, booleanConverter, colorProperty } from '@nativescript/core';
 import { Canvas, Rect, RectF } from '.';
 import Shape from './shapes/shape';
 
@@ -8,6 +8,12 @@ import Shape from './shapes/shape';
 //     }
 // }
 
+declare module '@nativescript/core/ui/core/view' {
+    interface ViewCommon {
+        _addChildFromBuilder(name: string, value: any);
+    }
+}
+
 export function createRect(x: number, y: number, w: number, h: number) {
     return new Rect(x, y, x + w, y + h);
 }
@@ -36,7 +42,7 @@ function throttle(fn, limit) {
         }
     };
 }
-export abstract class CanvasBase extends View {
+export abstract class CanvasBase extends GridLayout {
     // Declare events as static variables, so that they can be set in NativeScript Core XML
     public static drawEvent = 'draw';
 
@@ -93,6 +99,14 @@ export abstract class CanvasBase extends View {
     public addShape(shape: Shape) {
         this.getOrCreateShapes().push(shape);
     }
+    public insertShape(shape: Shape, atIndex: number) {
+        const shapes = this.getOrCreateShapes();
+        if (atIndex >= shapes.length) {
+            this.addShape(shape);
+        } else {
+            shapes.splice(atIndex, 0, shape);
+        }
+    }
 
     public removeShape(shape: Shape) {
         if (this.mShapes) {
@@ -104,21 +118,34 @@ export abstract class CanvasBase extends View {
     }
 
     public _addArrayFromBuilder(name: string, value: any[]) {
-        value.forEach((v) => {
-            this._addChildFromBuilder(null, value);
-        });
+        if (name === 'shapes') {
+            value.forEach((v) => {
+                this._addChildFromBuilder(null, value);
+            });
+        }
         // we ignore any other kind of view.
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
         if (value instanceof Shape) {
             this.addShape(value);
+        } else {
+            super._addChildFromBuilder(name, value);
         }
         // we ignore any other kind of view.
     }
     public _removeView(view: any) {
         if (view instanceof Shape) {
             this.removeShape(view);
+        } else {
+            super._removeView(view);
+        }
+    }
+    public _addView(view: any) {
+        if (view instanceof Shape) {
+            this.addShape(view);
+        } else {
+            super._addView(view);
         }
     }
 

src/ui-canvas/index.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/adjacent-overload-signatures */
 /* eslint-disable @typescript-eslint/unified-signatures */
-import { Color, ImageSource, ObservableArray, View } from '@nativescript/core';
+import { Color, GridLayout, ImageSource, ObservableArray, View } from '@nativescript/core';
 import { Font, FontStyle, FontStyleType, FontWeight, FontWeightType } from '@nativescript/core/ui/styling/font';
 import Shape from './shapes/shape';
 
@@ -323,20 +323,24 @@ export class DashPathEffect extends android.graphics.DashPathEffect {
 //     return android.graphics.Paint.Join;
 // }
 
-declare class CanvasView extends View {
+declare class CanvasView extends GridLayout {
     cached: boolean;
     hardwareAccelerated: boolean;
     density: number;
     drawFrameRate: boolean;
 
     shapes: ObservableArray<Shape>;
+    //  mShapes: ObservableArray<Shape>;
 
     onDraw(canvas: Canvas);
     addShape(shape: Shape);
+    insertShape(shape: Shape, atIndex: number);
     removeShape(shape: Shape);
     redraw();
     invalidate();
     onSizeChanged(w: number, h: number, oldw: number, oldh: number);
+
+    public _addArrayFromBuilder(name: string, value: any[]);
 }
 
 export function createImage(options: { width: number; height: number; scale?: number; config?: any }): ImageSource;

src/ui-canvaslabel/canvaslabel.android.ts

@@ -1,7 +1,7 @@
 import { Paint } from '@nativescript-community/ui-canvas';
 import { Color, getTransformedText, profile } from '@nativescript/core';
 import { FontWeight, FontWeightType } from '@nativescript/core/ui/styling/font';
-import { CanvasLabel as CanvasLabelBase, Group as GroupBase, Span as SpanBase, paintFontCache } from './canvaslabel.common';
+import { CanvasLabel as CanvasLabelBase, Group as GroupBase, SpanBase, paintFontCache } from './canvaslabel.common';
 import { createNativeAttributedString, createSpannable, typefaceCache } from '@nativescript-community/text';
 
 export class Span extends SpanBase {