Skip to content

Commit 4c02197

Browse files
edusperoniedusperoni
authored
feat: add @valor/nativescript-view-shot (#8)
* feat: add nativescript-view-shot * chore: add readme * fix: layout and duplicated code * chore: update license and description * fix: start with blank canvas * chore: promote to 1.0.0
1 parent 9c64b10 commit 4c02197

36 files changed

+851
-19
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
- [@valor/nativescript-barcodescanner](packages/nativescript-barcodescanner/README.md)
22
- [@valor/nativescript-feedback](packages/nativescript-feedback/README.md)
33
- [@valor/nativescript-ngrx-devtools](packages/nativescript-ngrx-devtools/README.md)
4+
- [@valor/nativescript-view-shot](packages/nativescript-view-shot/README.md)
45
- [@valor/nativescript-websockets](packages/nativescript-websockets/README.md)
56

67
# How to use?

‎apps/demo-angular/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"@valor/nativescript-websockets": "file:../../dist/packages/nativescript-websockets",
66
"@valor/nativescript-ngrx-devtools": "file:../../dist/packages/nativescript-ngrx-devtools",
77
"@valor/nativescript-barcodescanner": "file:../../dist/packages/nativescript-barcodescanner",
8-
"@valor/nativescript-feedback": "file:../../dist/packages/nativescript-feedback"
8+
"@valor/nativescript-feedback": "file:../../dist/packages/nativescript-feedback",
9+
"@valor/nativescript-view-shot": "file:../../dist/packages/nativescript-view-shot"
910
},
1011
"devDependencies": {
1112
"@nativescript/android": "~8.3.0",

‎apps/demo-angular/src/app-routing.module.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const routes: Routes = [
1010
{ path: 'nativescript-barcodescanner', loadChildren: () => import('./plugin-demos/nativescript-barcodescanner.module').then((m) => m.NativescriptBarcodescannerModule) },
1111
{ path: 'nativescript-feedback', loadChildren: () => import('./plugin-demos/nativescript-feedback.module').then((m) => m.NativescriptFeedbackModule) },
1212
{ path: 'nativescript-ngrx-devtools', loadChildren: () => import('./plugin-demos/nativescript-ngrx-devtools.module').then((m) => m.NativeScriptNgRxDevtoolsDemoModule) },
13+
{ path: 'nativescript-view-shot', loadChildren: () => import('./plugin-demos/nativescript-view-shot.module').then((m) => m.NativescriptViewShotModule) },
1314
{ path: 'nativescript-websockets', loadChildren: () => import('./plugin-demos/nativescript-websockets.module').then((m) => m.NativescriptWebsocketsModule) },
1415
];
1516

‎apps/demo-angular/src/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { NativeScriptModule } from '@nativescript/angular';
33

4-
import { AppComponent } from './app.component';
54
import { AppRoutingModule } from './app-routing.module';
5+
import { AppComponent } from './app.component';
66
import { HomeComponent } from './home.component';
77
import { AppNgRxModule } from './plugin-demos/nativescript-ngrx-devtools.ngrx';
88

‎apps/demo-angular/src/app.scss‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
@import 'nativescript-theme-core/scss/light';
22
@import 'nativescript-theme-core/scss/index';
33

4-
button, label, stack-layout {
5-
horizontal-align: center;
4+
button,
5+
label,
6+
stack-layout {
7+
horizontal-align: center;
68
}
79

810
button {
9-
font-size: 36;
11+
font-size: 36;
1012
}
1113

1214
.title {
13-
font-size: 30;
14-
margin: 20;
15+
font-size: 30;
16+
margin: 20;
1517
}
1618

1719
.message {
18-
font-size: 20;
19-
color: #284848;
20-
text-align: center;
21-
margin: 0 20;
22-
}
20+
font-size: 20;
21+
color: #284848;
22+
text-align: center;
23+
margin: 0 20;
24+
}
25+
26+
.view-shot {
27+
.child-label {
28+
color: blue;
29+
}
30+
}
31+
.child-label {
32+
color: red;
33+
}

‎apps/demo-angular/src/home.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export class HomeComponent {
1515
{
1616
name: 'nativescript-ngrx-devtools',
1717
},
18+
{
19+
name: 'nativescript-view-shot',
20+
},
1821
{
1922
name: 'nativescript-websockets',
2023
},

‎apps/demo-angular/src/plugin-demos/nativescript-view-shot.component.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<ActionBar title="nativescript-view-shot" class="action-bar"> </ActionBar>
2+
<StackLayout class="p-20">
3+
<ScrollView class="h-full">
4+
<StackLayout class="view-shot">
5+
<GridLayout columns="auto,*">
6+
<Label>Target width: </Label>
7+
<TextField col="1" [(ngModel)]="targetWidth" keyboardType="number"></TextField>
8+
</GridLayout>
9+
<Button text="Render detached view" (tap)="renderTemplate(myTemplate, true)" class="btn btn-primary"></Button>
10+
<Button text="Render detached in root (check css)" (tap)="renderTemplate(myTemplate, false)" class="btn btn-primary"></Button>
11+
<Button text="Take screenshot of view" (tap)="screenshotView(myView)" class="btn btn-primary"></Button>
12+
<!-- the view will be rendered in ViewHost for the purposes of CSS handling -->
13+
<ng-container #viewHost></ng-container>
14+
<GridLayout #myView>
15+
<Label class="h1" backgroundColor="lightblue">Screenshot view</Label>
16+
</GridLayout>
17+
<Label *ngIf="loading">Loading image...</Label>
18+
<Label>result:</Label>
19+
<ng-template #myTemplate>
20+
<GridLayout>
21+
<Image [src]="webImage2"></Image>
22+
<Label class="child-label h2">some text</Label>
23+
</GridLayout>
24+
</ng-template>
25+
<Image [src]="imgSrc"></Image>
26+
</StackLayout>
27+
</ScrollView>
28+
</StackLayout>

‎apps/demo-angular/src/plugin-demos/nativescript-view-shot.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component, inject, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
2+
import { DemoSharedNativescriptViewShot } from '@demo/shared';
3+
import { ImageSource, Screen, View } from '@nativescript/core';
4+
import { renderToImageSource } from '@valor/nativescript-view-shot';
5+
import { ViewShotService } from '@valor/nativescript-view-shot/angular';
6+
7+
@Component({
8+
selector: 'demo-nativescript-view-shot',
9+
templateUrl: 'nativescript-view-shot.component.html',
10+
})
11+
export class NativescriptViewShotComponent {
12+
demoShared: DemoSharedNativescriptViewShot;
13+
14+
viewShotService = inject(ViewShotService);
15+
@ViewChild('viewHost', { read: ViewContainerRef }) vcRef: ViewContainerRef;
16+
srcUrl = `https://picsum.photos/${Screen.mainScreen.widthPixels}/200`;
17+
webImage$ = ImageSource.fromUrl(this.srcUrl);
18+
webImage2: ImageSource;
19+
imgSrc: ImageSource;
20+
loading = false;
21+
targetWidth = `${Screen.mainScreen.widthDIPs}`;
22+
23+
async renderTemplate(template: TemplateRef<unknown>, attached: boolean) {
24+
let width = parseInt(this.targetWidth, 10);
25+
if (isNaN(width)) {
26+
width = Screen.mainScreen.widthDIPs;
27+
}
28+
this.loading = true;
29+
// reusing imageSource on iOS sometimes doesn't work, so we create a new one each time
30+
this.webImage2 = new ImageSource((await this.webImage$).ios);
31+
this.loading = false;
32+
this.imgSrc = await this.viewShotService.captureInBackground(template, {
33+
logicalHost: attached ? this.vcRef : undefined,
34+
width,
35+
delay: 0,
36+
});
37+
}
38+
39+
screenshotView(view: View) {
40+
this.imgSrc = renderToImageSource(view);
41+
}
42+
}

‎apps/demo-angular/src/plugin-demos/nativescript-view-shot.module.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule, NativeScriptFormsModule, NativeScriptRouterModule } from '@nativescript/angular';
3+
import { NativescriptViewShotComponent } from './nativescript-view-shot.component';
4+
5+
@NgModule({
6+
imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: NativescriptViewShotComponent }]), NativeScriptFormsModule],
7+
declarations: [NativescriptViewShotComponent],
8+
schemas: [NO_ERRORS_SCHEMA],
9+
})
10+
export class NativescriptViewShotModule {}

‎apps/demo-angular/tsconfig.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"@valor/nativescript-ngrx-devtools": ["packages/nativescript-ngrx-devtools/src/index.ts"],
88
"@valor/nativescript-websockets": ["packages/nativescript-websockets/index.ts"],
99
"@valor/nativescript-barcodescanner": ["packages/nativescript-barcodescanner"],
10-
"@valor/nativescript-feedback": ["packages/nativescript-feedback"]
10+
"@valor/nativescript-feedback": ["packages/nativescript-feedback"],
11+
"@valor/nativescript-view-shot": ["packages/nativescript-view-shot"],
12+
"@valor/nativescript-view-shot/angular": ["packages/nativescript-view-shot/angular"]
1113
}
1214
},
1315
"files": ["./references.d.ts", "./src/main.ts", "./src/polyfills.ts"],

0 commit comments

Comments
 (0)