test: demo app update

Author: farfromrefug

demo-vue/app.webpack.config.js

@@ -7,7 +7,6 @@ module.exports = (env, params = {}) => {
     const projectRoot = __dirname;
     const config = webpackConfig(env, params);
     if (development) {
-        config.resolve.alias['@nativescript/core'] = '@akylas/nativescript';
         const srcPath = resolve(projectRoot, '..', 'src');
         config.resolve.alias['@nativescript-community/ui-canvas'] = srcPath;
         config.resolve.alias['@nativescript-community/ui-canvas$'] = srcPath;

demo-vue/app/canvastests.ts

@@ -1,11 +1,8 @@
 import { Align, Canvas, Cap, DashPathEffect, LinearGradient, Paint, Path, RadialGradient, Rect, RectF, Style, TileMode, createRect, createRectF } from '@nativescript-community/ui-canvas';
+import { Label, Utils } from '@nativescript/core';
 import { Color } from '@nativescript/core/color';
 import { Folder, knownFolders, path } from '@nativescript/core/file-system';
 import { ImageSource } from '@nativescript/core/image-source';
-import { Button } from '@nativescript/core/ui/button';
-import { FormattedString } from '@nativescript/core/text/formatted-string';
-import { Span } from '@nativescript/core/text/span';
-import { Label, Utils } from '@nativescript/core';
 
 function isOnUiThread() {
     if (global.isIOS) {
@@ -14,11 +11,11 @@ function isOnUiThread() {
         return android.os.Looper.myLooper() === android.os.Looper.getMainLooper();
     }
 }
+const folder: Folder = knownFolders.currentApp();
+const iconLocalFile: ImageSource = ImageSource.fromFileSync(path.join(folder.path, 'images/test.jpg'));
 
 export function drawOnImage(scale = 3, canvas?: Canvas) {
-    const folder: Folder = knownFolders.currentApp();
 
-    const iconLocalFile: ImageSource = ImageSource.fromFileSync(path.join(folder.path, 'images/test.jpg'));
     if (!canvas) {
         const folderPath: string = path.join(folder.path, 'images/test.jpg');
         const imageFromLocalFile: ImageSource = ImageSource.fromFileSync(folderPath);
@@ -122,9 +119,9 @@ export function drawOnImage(scale = 3, canvas?: Canvas) {
 
     // image
     canvas.save();
-    canvas.translate(10, 600);
+    // canvas.translate(10, 600);
     // canvas.drawBitmap(iconLocalFile, 0, 0, null);
-    canvas.drawBitmap(iconLocalFile, null, createRect(150, 0, 200, 300), null);
+    canvas.drawBitmap(iconLocalFile, null, createRect(0, 0, 200, 300), null);
     canvas.restore();
 
     // arc path

demo-vue/app/examples/Animation.vue

@@ -18,7 +18,7 @@ import { Canvas, Cap, createRect, createRectF, Paint, Style } from '@nativescrip
 import { Color } from '@nativescript/core/color';
 import { Screen } from '@nativescript/core/platform';
 
-import TWEEN from 'nativescript-tween';
+import TWEEN from '@nativescript-community/tween';
 
 @Component
 export default class Animation extends Vue {
@@ -55,7 +55,7 @@ export default class Animation extends Vue {
                 this.currentArcAngle = obj.value;
                 canvas.redraw();
             })
-            .start();
+            .start(0);
     }
 }
 </script>

demo-vue/app/examples/Image.vue

@@ -4,7 +4,7 @@
             <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onBack"></NavigationButton>
         </ActionBar>
         <StackLayout>
-            <CanvasView width="100%" height="100%" @draw="onDraw"/>
+            <CanvasView width="100%" height="100%" @draw="onDraw" />
         </StackLayout>
     </Page>
 </template>
@@ -16,10 +16,10 @@ import { Component } from 'vue-property-decorator';
 import { createRect, Paint, Style } from '@nativescript-community/ui-canvas';
 import { Color } from '@nativescript/core/color';
 import { Folder, knownFolders, path } from '@nativescript/core/file-system';
-import { fromFile, ImageSource } from '@nativescript/core/image-source';
+import { ImageSource } from '@nativescript/core/image-source';
 import { Screen } from '@nativescript/core/platform';
 
-const iconLocalFile: ImageSource = fromFile(path.join( knownFolders.currentApp().path, 'images/test.jpg'));
+const iconLocalFile: ImageSource = ImageSource.fromFileSync(path.join(knownFolders.currentApp().path, 'images/test.jpg'));
 
 @Component
 export default class Image extends Vue {

demo-vue/app/examples/Shapes.vue

@@ -45,7 +45,7 @@ import Vue from 'nativescript-vue';
 import { Component } from 'vue-property-decorator';
 import { Canvas, createRect, Paint, Style } from '@nativescript-community/ui-canvas';
 import { Color } from '@nativescript/core';
-import TWEEN from 'nativescript-tween';
+import TWEEN from '@nativescript-community/tween';
 import { Screen } from '@nativescript/core/platform';
 
 @Component
@@ -72,15 +72,15 @@ export default class Simple extends Vue {
             .onUpdate(obj => {
                 this.shapeLeft = obj.value;
             })
-            .start();
+            .start(0);
     }
     animateArc() {
         new TWEEN.Tween({ value: 0 })
             .to({ value: 360 }, 5000)
             .onUpdate(obj => {
                 this.sweepAngle = obj.value;
             })
-            .start();
+            .start(0);
     }
 
     onDraw(event: { canvas: Canvas }) {

demo-vue/app/examples/index.ts

@@ -5,27 +5,25 @@ import Shapes from './Shapes.vue';
 import Image from './Image.vue';
 
 export { Complex, Simple, Animation, Shapes };
-export const getExamples = () => {
-    return [
-        {
-            name: 'Complex',
-            component: Complex
-        },
-        {
-            name: 'Simple',
-            component: Simple
-        },
-        {
-            name: 'Animation',
-            component: Animation
-        },
-        {
-            name: 'Shapes',
-            component: Shapes
-        },
-        {
-            name: 'Image',
-            component: Image
-        }
-    ];
-};
+export const getExamples = () => [
+    {
+        name: 'Complex',
+        component: Complex
+    },
+    {
+        name: 'Simple',
+        component: Simple
+    },
+    {
+        name: 'Animation',
+        component: Animation
+    },
+    {
+        name: 'Shapes',
+        component: Shapes
+    },
+    {
+        name: 'Image',
+        component: Image
+    }
+];

demo-vue/package.json

@@ -5,17 +5,16 @@
     "repository": "http://www.github.com/Akylas/@nativescript-community/ui-canvas.git",
     "main": "main.js",
     "dependencies": {
-        "@akylas/nativescript": "7.0.3-alpha.4",
+        "@nativescript/core": "7.0.3",
         "@nativescript-community/perms": "2.1.1",
         "@nativescript-community/ui-canvas": "file:../plugin",
-        "@nativescript/webpack": "3.0.4",
-        "nativescript-tween": "0.0.10",
+        "@nativescript/webpack": "3.0.7",
+        "@nativescript-community/tween": "0.0.12",
         "nativescript-vue": "^2.8.1"
     },
     "devDependencies": {
         "@babel/core": "^7.11.6",
         "@nativescript/android": "7.0.0",
-        "@nativescript/core": "7.0.3",
         "@nativescript/types": "7.0.3",
         "babel-loader": "^8.1.0",
         "nativescript-vue-template-compiler": "2.8.1",
@@ -25,4 +24,4 @@
         "vue-loader": "^15.9.3",
         "vue-property-decorator": "^8.5.1"
     }
-}
+}

demo-vue/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
-        "target": "es5",
-        "module": "commonjs",
+        "target": "es2017",
+        "module": "esnext",
         "moduleResolution": "node",
         "incremental": true,
         "tsBuildInfoFile": ".tsbuildinfo",