Merge remote-tracking branch 'origin/master'

farfromrefug · farfromrefug · commit 6caaf3ee29d6 · 2024-04-25T09:16:58.000+02:00
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@
 	* [XML](#xml)
 * [NativeScript + Angular](#nativescript--angular)
 * [NativeScript + Vue](#nativescript--vue)
+* [NativeScript + Svelte](#nativescript--svelte)
 * [Draw Method ](#draw-method-)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
@@ -136,14 +137,41 @@ Vue.use(CanvasPlugin);
 ```
 
 
+[](#nativescript--svelte)
+
+
+[](#nativescript--svelte)
+
+## NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<stackLayout>
+    <canvasView width="300" height="300" on:draw={draw} />
+</stackLayout>
+```
+
+
 [](#draw-method-)
 
 
 [](#draw-method-)
 
 ## Draw Method 
-```typescript
+
+```ts
+import type { Canvas } from '@nativescript-community/ui-canvas';
+import { Paint, createRect } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
+
 function draw(event: { canvas: Canvas }) {
+    const canvas = event.canvas;
     const paint = new Paint();
     paint.setColor(new Color('black'));
     paint.strokeWidth = 10;
@@ -271,6 +299,7 @@ One easy solution is t modify `~/.gitconfig` and add
 ## Questions
 
 If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+
 </details><details>
 <summary><b>ui-canvaslabel</b></summary>
 <!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
@@ -575,6 +604,8 @@ If you have any questions/issues/comments please feel free to create an issue or
 
 * [Installation](#installation)
 * [Configuration](#configuration)
+	* [NativeScript + Vue](#nativescript--vue)
+	* [NativeScript + Svelte](#nativescript--svelte)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
 	* [Repo Setup](#repo-setup)
@@ -609,6 +640,8 @@ Run the following command from the root of your project:
 
 For now only `vue` (and core) is supported.
 
+### NativeScript + Vue
+
 ```ts
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 Vue.use(CanvasSVG);
@@ -642,6 +675,19 @@ Or within and Canvas View extending `CanvasView` like `CanvasLabel`
 </CanvasSVG>
 ```
 
+### NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<svgView src="~/assets/foo.svg" aspectFit="stretch" />
+```
+
 ### Examples:
 
 - [Basic](demo-snippets/vue/SVG.vue)
@@ -754,6 +800,7 @@ One easy solution is t modify `~/.gitconfig` and add
 ## Questions
 
 If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+
 </details>
 
 [](#demos-and-development)
diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css
@@ -21,14 +21,14 @@
     --dark-hl-9: #569CD6;
     --light-hl-10: #CD3131;
     --dark-hl-10: #F44747;
-    --light-hl-11: #267F99;
-    --dark-hl-11: #4EC9B0;
-    --light-hl-12: #0070C1;
-    --dark-hl-12: #4FC1FF;
-    --light-hl-13: #098658;
-    --dark-hl-13: #B5CEA8;
-    --light-hl-14: #008000;
-    --dark-hl-14: #6A9955;
+    --light-hl-11: #008000;
+    --dark-hl-11: #6A9955;
+    --light-hl-12: #098658;
+    --dark-hl-12: #B5CEA8;
+    --light-hl-13: #267F99;
+    --dark-hl-13: #4EC9B0;
+    --light-hl-14: #0070C1;
+    --dark-hl-14: #4FC1FF;
     --light-hl-15: #000000;
     --dark-hl-15: #C8C8C8;
     --light-code-background: #FFFFFF;
diff --git a/docs/assets/search.js b/docs/assets/search.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/packages/ui-canvas/CHANGELOG.md b/packages/ui-canvas/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.6.21](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-canvas@4.6.20...@nativescript-community/ui-canvas@4.6.21) (2024-03-08)
+
+**Note:** Version bump only for package @nativescript-community/ui-canvas
+
 ## [4.6.20](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-canvas@4.6.19...@nativescript-community/ui-canvas@4.6.20) (2024-02-15)
 
 **Note:** Version bump only for package @nativescript-community/ui-canvas
diff --git a/packages/ui-canvas/package.json b/packages/ui-canvas/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-canvas",
-    "version": "4.6.20",
+    "version": "4.6.21",
     "description": "Implement Canvas into your NativeScript apps.",
     "main": "./index",
     "sideEffects": false,
diff --git a/packages/ui-canvaslabel/CHANGELOG.md b/packages/ui-canvaslabel/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.24](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-canvaslabel@1.2.23...@nativescript-community/ui-canvaslabel@1.2.24) (2024-03-08)
+
+**Note:** Version bump only for package @nativescript-community/ui-canvaslabel
+
 ## [1.2.23](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-canvaslabel@1.2.22...@nativescript-community/ui-canvaslabel@1.2.23) (2024-02-15)
 
 **Note:** Version bump only for package @nativescript-community/ui-canvaslabel
diff --git a/packages/ui-canvaslabel/package.json b/packages/ui-canvaslabel/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-canvaslabel",
-    "version": "1.2.23",
+    "version": "1.2.24",
     "description": "Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.",
     "main": "./canvaslabel",
     "sideEffects": false,
diff --git a/packages/ui-svg/CHANGELOG.md b/packages/ui-svg/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.33](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-svg@0.1.32...@nativescript-community/ui-svg@0.1.33) (2024-03-08)
+
+**Note:** Version bump only for package @nativescript-community/ui-svg
+
 ## [0.1.32](https://github.com/nativescript-community/ui-canvas/compare/@nativescript-community/ui-svg@0.1.31...@nativescript-community/ui-svg@0.1.32) (2024-02-15)
 
 **Note:** Version bump only for package @nativescript-community/ui-svg
diff --git a/packages/ui-svg/package.json b/packages/ui-svg/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-svg",
-    "version": "0.1.32",
+    "version": "0.1.33",
     "description": "Adds support for SVGs in your NativeScript apps.",
     "main": "./index",
     "sideEffects": false,
diff --git a/src/ui-canvas/canvas.ios.ts b/src/ui-canvas/canvas.ios.ts
@@ -2315,7 +2315,8 @@ export class StaticLayout {
         nsAttributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, fullRange);
     }
     draw(canvas: Canvas, maxHeight = Number.MAX_VALUE) {
-        canvas.startApplyPaint(this.paint);
+        const paint = this.paint;
+        canvas.startApplyPaint(paint);
         const ctx = canvas.ctx;
         this.createAttributedStringToDraw(canvas);
         // const attributes = this.paint.getDrawTextAttribs();
@@ -2346,14 +2347,24 @@ export class StaticLayout {
         // UIDrawingText.drawAttributedStringXYWidthHeightWithAttributes(this.nsAttributedString, 0, 0, this.width, maxHeight, attributes);
 
         UIGraphicsPushContext(ctx);
-
+        if (paint.align !== Align.LEFT) {
+            let offsetx = 0;
+            const width = this.getBounds().size.width;
+            if (paint.align === Align.RIGHT) {
+                offsetx -= width;
+            }
+            else {
+                offsetx -= width / 2;
+            }
+            CGContextTranslateCTM(ctx, offsetx, 0);
+        }
         this.mToDraw.drawWithRectOptionsContext(
             CGRectMake(0, 0, this.width, maxHeight),
             NSStringDrawingOptions.UsesLineFragmentOrigin | NSStringDrawingOptions.TruncatesLastVisibleLine | NSStringDrawingOptions.UsesFontLeading,
             null
         );
         UIGraphicsPopContext();
-        canvas.finishApplyPaint(this.paint);
+        canvas.finishApplyPaint(paint);
     }
     getPaint() {
         return this.paint;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nativescript-community/ui-canvas",`
`3`		`- "version": "4.6.20",`
	`3`	`+ "version": "4.6.21",`
`4`	`4`	`"description": "Implement Canvas into your NativeScript apps.",`
`5`	`5`	`"main": "./index",`
`6`	`6`	`"sideEffects": false,`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nativescript-community/ui-canvaslabel",`
`3`		`- "version": "1.2.23",`
	`3`	`+ "version": "1.2.24",`
`4`	`4`	`"description": "Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.",`
`5`	`5`	`"main": "./canvaslabel",`
`6`	`6`	`"sideEffects": false,`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nativescript-community/ui-svg",`
`3`		`- "version": "0.1.32",`
	`3`	`+ "version": "0.1.33",`
`4`	`4`	`"description": "Adds support for SVGs in your NativeScript apps.",`
`5`	`5`	`"main": "./index",`
`6`	`6`	`"sideEffects": false,`