-
-
Notifications
You must be signed in to change notification settings - Fork 32
Expand file tree
/
Copy pathcomponent.ts
More file actions
118 lines (97 loc) · 3.14 KB
/
Copy pathcomponent.ts
File metadata and controls
118 lines (97 loc) · 3.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { Component, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptCommonModule } from '@nativescript/angular';
import { Button, ContentView, CoreTypes, EventData, GridLayout, Label, Page } from '@nativescript/core';
@Component({
selector: 'ns-view-origin',
templateUrl: './component.html',
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA]
})
export class ViewOriginComponent {
customX = 0;
customY = 0;
currentOrigin = '';
playing = false;
page: Page;
originSelector: GridLayout;
box: GridLayout;
wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
navigatingTo(args: EventData) {
this.page = <Page>args.object;
this.originSelector = this.page.getViewById('originSelector') as GridLayout;
this.box = this.page.getViewById('box') as GridLayout;
// allow custom origin to be visible outside of the box
this.box.on('loaded', (args) => {
if (__ANDROID__) {
;(args.object as GridLayout).android.getParent().setClipChildren(false)
}
})
this.changeOrigin('origin_0_0');
}
customXValueChange(x: number) {
this.customX = x;
this.changeCustomOrigin();
}
customYValueChange(y: number) {
this.customY = y;
this.changeCustomOrigin();
}
changeCustomOrigin() {
const x = (this.customX / 100) * 10 / 10;
const y = (this.customY / 100) * 10 / 10;
this.changeOrigin(`origin_${x}_${y}`);
}
changeOrigin(targetOrigin: string) {
console.log(targetOrigin);
const customOrigin = this.page.getViewById('customOrigin') as GridLayout
const current = this.page.getViewById(this.currentOrigin) as ContentView
if (current) {
current.backgroundColor = '#94a3b8'
}
const next = this.page.getViewById(targetOrigin) as ContentView
const [_, x, y] = targetOrigin.split('_')
this.box.originX = +x
this.box.originY = +y
// iOS shifts the view when origin is set??
if (__IOS__) {
this.box.translateX = this.box.originX * 200
this.box.translateY = this.box.originY * 200
}
if (next) {
customOrigin.visibility = 'collapse';
next.backgroundColor = '#fb7185';
this.customX = +x * 100;
this.customY = +y * 100;
} else {
customOrigin.visibility = 'visible';
customOrigin.translateX = this.box.originX * 192;
customOrigin.translateY = this.box.originY * 192;
}
this.currentOrigin = targetOrigin
// update button backgrounds
this.originSelector.eachChild((child) => {
if (child instanceof Label) {
const selected = (child as any).targetOrigin === targetOrigin
child.backgroundColor = selected ? '#fb7185' : '#f1f5f9'
child.color = (selected ? '#f1f5f9' : '#334155') as any
}
return true
})
}
async play() {
if (this.playing) return
this.playing = true
await this.box.animate({
rotate: 20,
duration: 400,
curve: CoreTypes.AnimationCurve.easeOut,
})
await this.wait(200)
await this.box.animate({
rotate: 0,
duration: 400,
curve: CoreTypes.AnimationCurve.easeIn,
})
this.playing = false
}
}