nativescript-community/ui-canvas

Purpose and package topology

This is a NativeScript plugin monorepo providing Android/iOS canvas rendering, canvas-based rich labels, interactive drawing, and SVG display. Published packages are defined under packages/ui-canvas, packages/ui-canvaslabel, packages/ui-drawingcanvas, and packages/ui-svg; their TypeScript implementations are centralized under src/.

Public entry points

Platform-specific NativeScript resolution selects Android/iOS implementations, while common files define shared API and behavior:

• Canvas: src/ui-canvas/index.android.ts, src/ui-canvas/index.ios.ts, src/ui-canvas/index.common.ts

• Canvas label: src/ui-canvaslabel/canvaslabel.common.ts, src/ui-canvaslabel/canvaslabel.android.ts, src/ui-canvaslabel/canvaslabel.ios.ts

• Drawing: src/ui-drawingcanvas/index.ts, src/ui-drawingcanvas/DrawingCanvas.ts

• SVG: src/ui-svg/index.android.ts, src/ui-svg/index.ios.ts, src/ui-svg/index.common.ts

Vue integration is a separate registration boundary in each package’s src/*/vue/ directory.

Core canvas abstraction

ui-canvas exposes a NativeScript CanvasView and Canvas-like drawing API, including paints, paths, matrices, shaders, text layout, images, and primitives. App code receives a canvas through draw events and invokes drawing operations; platform adapters map the API to native graphics:

• src/ui-canvas/canvas.common.ts

• src/ui-canvas/canvas.android.ts

• src/ui-canvas/canvas.ios.ts

Reusable declarative shapes sit above this imperative layer in src/ui-canvas/shapes/index.ts and its shape classes.

Native rendering boundary

Android binds to Java canvas support, including the native view, matrix, path, layout, and path effects:

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

• packages/ui-canvas/platforms/android/java/com/akylas/canvas/CanvasPath.java

• packages/ui-canvas/platforms/android/java/com/akylas/canvas/StaticLayout.java

iOS uses Objective-C/Swift helpers for Bezier geometry, drawing, gradients/shaders, text, and image utilities:

• packages/ui-canvas/platforms/ios/src/Drawing-Util.m

• packages/ui-canvas/platforms/ios/src/BezierFunctions.m

• packages/ui-canvas/platforms/ios/src/Drawing-Text.m

These are the principal JavaScript/TypeScript-to-native API boundaries.

CanvasLabel composition

ui-canvaslabel replaces many native text controls with one canvas-rendered view containing groups and spans. Its control flow is: NativeScript layout/properties → span/group model → platform text/canvas rendering. Android supplies a native Span implementation:

• src/ui-canvaslabel/canvaslabel.common.ts

• src/ui-canvaslabel/canvaslabel.android.ts

• packages/ui-canvaslabel/platforms/android/java/com/nativescript/canvaslabel/Span.java

This package is architected for high-density custom text rendering, especially list items, rather than automatic sizing or accessibility-first native labels.

Interactive drawing pipeline

DrawingCanvas is a higher-level editor built on ui-canvas. Touch input is delegated to the active mode; modes create or manipulate ordered drawable shapes; the canvas renders layers, tracks selection/history, emits events, and imports/exports JSON:

• Coordinator/state: src/ui-drawingcanvas/DrawingCanvas.ts

• Mode dispatch: src/ui-drawingcanvas/modes/DrawingMode.ts, src/ui-drawingcanvas/modes/SelectMode.ts

• Shape model/rendering: src/ui-drawingcanvas/shapes/DrawableShape.ts, src/ui-drawingcanvas/shapes/PenShape.ts

Pen input can be simplified and smoothed before becoming a shape through src/ui-drawingcanvas/algorithms/douglasPeucker.ts and src/ui-drawingcanvas/algorithms/catmullRomSpline.ts. Custom mode and shape-factory registration are explicit extension points needed for custom JSON round-tripping.

SVG and delivery infrastructure

ui-svg provides native SVGView plus canvas-oriented SVG components, with platform-specific adapters and native dependency declarations:

• src/ui-svg/canvas.common.ts

• src/ui-svg/canvas.android.ts

• src/ui-svg/canvas.ios.ts

• packages/ui-svg/platforms/ios/Podfile

The repository uses Node/TypeScript with pnpm/Yarn workspaces and Lerna publishing (pnpm-workspace.yaml, lerna.json). Native artifacts are built with Gradle on Android and Xcode/CocoaPods on iOS. The standalone native projects under src-native/android and src-native/ios support native canvas development/validation. Vue demo snippets exercise package registration and API usage under demo-snippets/vue/.