anim-3d-obj 1.1.16 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -75
- package/dist/cjs/components/Button.d.ts +6 -0
- package/dist/cjs/components/Button.js +19 -0
- package/dist/cjs/components/Button.js.map +1 -0
- package/dist/cjs/components/Card.d.ts +2 -0
- package/dist/cjs/components/Card.js +25 -0
- package/dist/cjs/components/Card.js.map +1 -0
- package/dist/cjs/components/Cuboid.d.ts +2 -0
- package/dist/cjs/components/Cuboid.js +29 -0
- package/dist/cjs/components/Cuboid.js.map +1 -0
- package/dist/cjs/components/Faces/Face.d.ts +3 -0
- package/dist/cjs/components/Faces/Face.js +88 -0
- package/dist/cjs/components/Faces/Face.js.map +1 -0
- package/dist/cjs/components/Ribbon.d.ts +2 -0
- package/dist/cjs/components/Ribbon.js +26 -0
- package/dist/cjs/components/Ribbon.js.map +1 -0
- package/dist/cjs/components/index.d.ts +5 -0
- package/dist/cjs/components/index.js +22 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/cjs/components/styles/AnimWrap.d.ts +2 -0
- package/dist/cjs/components/styles/AnimWrap.js +86 -0
- package/dist/cjs/components/styles/AnimWrap.js.map +1 -0
- package/dist/cjs/components/styles/Anims.d.ts +30 -0
- package/{src/components/styles/Anims.ts → dist/cjs/components/styles/Anims.js} +85 -100
- package/dist/cjs/components/styles/Anims.js.map +1 -0
- package/dist/cjs/components/styles/Global.d.ts +1 -0
- package/dist/cjs/components/styles/Global.js +14 -0
- package/dist/cjs/components/styles/Global.js.map +1 -0
- package/dist/cjs/components/styles/Scene.d.ts +10 -0
- package/dist/cjs/components/styles/Scene.js +23 -0
- package/dist/cjs/components/styles/Scene.js.map +1 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +20 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/esm/components/Button.d.ts +6 -0
- package/dist/esm/components/Button.js +12 -0
- package/dist/esm/components/Button.js.map +1 -0
- package/dist/esm/components/Card.d.ts +2 -0
- package/dist/esm/components/Card.js +18 -0
- package/dist/esm/components/Card.js.map +1 -0
- package/dist/esm/components/Cuboid.d.ts +2 -0
- package/dist/esm/components/Cuboid.js +22 -0
- package/dist/esm/components/Cuboid.js.map +1 -0
- package/dist/esm/components/Faces/Face.d.ts +3 -0
- package/dist/esm/components/Faces/Face.js +83 -0
- package/dist/esm/components/Faces/Face.js.map +1 -0
- package/dist/esm/components/Ribbon.d.ts +2 -0
- package/dist/esm/components/Ribbon.js +19 -0
- package/dist/esm/components/Ribbon.js.map +1 -0
- package/dist/esm/components/index.d.ts +5 -0
- package/dist/esm/components/index.js +6 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/components/styles/AnimWrap.d.ts +2 -0
- package/dist/esm/components/styles/AnimWrap.js +79 -0
- package/dist/esm/components/styles/AnimWrap.js.map +1 -0
- package/dist/esm/components/styles/Anims.d.ts +30 -0
- package/dist/{components/styles/Anims.ts → esm/components/styles/Anims.js} +81 -100
- package/dist/esm/components/styles/Anims.js.map +1 -0
- package/dist/esm/components/styles/Global.d.ts +1 -0
- package/dist/esm/components/styles/Global.js +8 -0
- package/dist/esm/components/styles/Global.js.map +1 -0
- package/dist/esm/components/styles/Scene.d.ts +10 -0
- package/dist/esm/components/styles/Scene.js +16 -0
- package/dist/esm/components/styles/Scene.js.map +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +1 -0
- package/package.json +25 -58
- package/.eslintignore +0 -2
- package/.eslintrc +0 -32
- package/.prettierrc.json +0 -10
- package/babel.config.json +0 -18
- package/dist/components/Card.tsx +0 -55
- package/dist/components/Cuboid.tsx +0 -61
- package/dist/components/Faces/Face.tsx +0 -72
- package/dist/components/Faces/FaceInter.d.ts +0 -39
- package/dist/components/Ribbon.tsx +0 -57
- package/dist/components/styles/Anim.d.ts +0 -16
- package/dist/components/styles/AnimWrap.tsx +0 -92
- package/dist/components/styles/Global.ts +0 -7
- package/dist/components/styles/Scene.tsx +0 -30
- package/dist/index.ts +0 -9
- package/jestconfig.json +0 -8
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -43
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +0 -25
- package/public/robots.txt +0 -3
- package/src/components/Card.tsx +0 -55
- package/src/components/Cuboid.tsx +0 -61
- package/src/components/Faces/Face.tsx +0 -72
- package/src/components/Faces/FaceInter.d.ts +0 -39
- package/src/components/Ribbon.tsx +0 -57
- package/src/components/styles/Anim.d.ts +0 -16
- package/src/components/styles/AnimWrap.tsx +0 -92
- package/src/components/styles/Global.ts +0 -7
- package/src/components/styles/Scene.tsx +0 -30
- package/src/index.ts +0 -9
- package/tests/common.test.tsx +0 -29
- package/tsconfig.json +0 -29
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const allAnims = (props: AllAnimsProps) => {
|
|
9
|
-
const { degreesLow = 0, degreesHi = 0 } = props
|
|
10
|
-
|
|
11
|
-
const X360 = keyframes`
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.allAnims = void 0;
|
|
4
|
+
const styled_components_1 = require("styled-components");
|
|
5
|
+
const allAnims = (props) => {
|
|
6
|
+
const { degreesLow = 0, degreesHi = 0 } = props;
|
|
7
|
+
const X360 = (0, styled_components_1.keyframes) `
|
|
12
8
|
from {
|
|
13
9
|
-webkit-transform: rotateX(360deg);
|
|
14
10
|
transform: rotateX(360deg);
|
|
@@ -17,10 +13,9 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
17
13
|
-webkit-transform: rotateX(0deg);
|
|
18
14
|
transform: rotateX(0deg);
|
|
19
15
|
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const Y360 = keyframes`
|
|
16
|
+
}`;
|
|
17
|
+
//////// Y360
|
|
18
|
+
const Y360 = (0, styled_components_1.keyframes) `
|
|
24
19
|
from {
|
|
25
20
|
-webkit-transform: rotateY(360deg);
|
|
26
21
|
transform: rotateY(360deg);
|
|
@@ -28,17 +23,15 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
28
23
|
to {
|
|
29
24
|
-webkit-transform: rotateY(0deg);
|
|
30
25
|
transform: rotateY(0deg);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const fadeInkf = keyframes`
|
|
26
|
+
}`;
|
|
27
|
+
const fadeInkf = (0, styled_components_1.keyframes) `
|
|
34
28
|
from {
|
|
35
29
|
opacity: 0;
|
|
36
30
|
}
|
|
37
31
|
to {
|
|
38
32
|
opacity: 1;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const wobY = keyframes`
|
|
33
|
+
}`;
|
|
34
|
+
const wobY = (0, styled_components_1.keyframes) `
|
|
42
35
|
0% {
|
|
43
36
|
-webkit-transform: rotateY(${degreesLow}deg);
|
|
44
37
|
transform: rotateY(${degreesLow}deg);
|
|
@@ -50,9 +43,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
50
43
|
100% {
|
|
51
44
|
-webkit-transform: rotateY(${degreesLow}deg);
|
|
52
45
|
transform: rotateY(${degreesLow}deg);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
const wobX = keyframes`
|
|
46
|
+
}`;
|
|
47
|
+
const wobX = (0, styled_components_1.keyframes) `
|
|
56
48
|
0% {
|
|
57
49
|
-webkit-transform: rotateX(${degreesLow}deg);
|
|
58
50
|
transform: rotateX(${degreesLow}deg);
|
|
@@ -64,9 +56,9 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
64
56
|
100% {
|
|
65
57
|
-webkit-transform: rotateX(${degreesLow}deg);
|
|
66
58
|
transform: rotateX(${degreesLow}deg);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
59
|
+
}`;
|
|
60
|
+
/* ============================== x-axis 0-180 >180 - 360 */
|
|
61
|
+
const fwdx018 = (0, styled_components_1.keyframes) `
|
|
70
62
|
from {
|
|
71
63
|
-webkit-transform: rotateX(360deg);
|
|
72
64
|
transform: rotateX(360deg);
|
|
@@ -74,8 +66,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
74
66
|
to {
|
|
75
67
|
-webkit-transform: rotateX(180deg);
|
|
76
68
|
transform: rotateX(180deg);
|
|
77
|
-
}
|
|
78
|
-
|
|
69
|
+
}`;
|
|
70
|
+
const fwdx1836 = (0, styled_components_1.keyframes) `
|
|
79
71
|
from {
|
|
80
72
|
-webkit-transform: rotateX(180deg);
|
|
81
73
|
transform: rotateX(180deg);
|
|
@@ -83,9 +75,9 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
83
75
|
to {
|
|
84
76
|
-webkit-transform: rotateX(0deg);
|
|
85
77
|
transform: rotateX(0deg);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
78
|
+
}`;
|
|
79
|
+
/* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
|
|
80
|
+
const fwdx09 = (0, styled_components_1.keyframes) `
|
|
89
81
|
from {
|
|
90
82
|
-webkit-transform: rotateX(360deg);
|
|
91
83
|
transform: rotateX(360deg);
|
|
@@ -93,8 +85,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
93
85
|
to {
|
|
94
86
|
-webkit-transform: rotateX(90deg);
|
|
95
87
|
transform: rotateX(90deg);
|
|
96
|
-
}
|
|
97
|
-
|
|
88
|
+
}`;
|
|
89
|
+
const fwdx918 = (0, styled_components_1.keyframes) `
|
|
98
90
|
from {
|
|
99
91
|
-webkit-transform: rotateX(-90deg);
|
|
100
92
|
transform: rotateX(-90deg);
|
|
@@ -102,8 +94,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
102
94
|
to {
|
|
103
95
|
-webkit-transform: rotateX(-180deg);
|
|
104
96
|
transform: rotateX(-180deg);
|
|
105
|
-
}
|
|
106
|
-
|
|
97
|
+
}`;
|
|
98
|
+
const fwdx1827 = (0, styled_components_1.keyframes) `
|
|
107
99
|
from {
|
|
108
100
|
-webkit-transform: rotateX(-180deg);
|
|
109
101
|
transform: rotateX(-180deg);
|
|
@@ -111,8 +103,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
111
103
|
to {
|
|
112
104
|
-webkit-transform: rotateX(-270deg);
|
|
113
105
|
transform: rotateX(-270deg);
|
|
114
|
-
}
|
|
115
|
-
|
|
106
|
+
}`;
|
|
107
|
+
const fwdx2736 = (0, styled_components_1.keyframes) `
|
|
116
108
|
from {
|
|
117
109
|
-webkit-transform: rotateX(-270deg);
|
|
118
110
|
transform: rotateX(-270deg);
|
|
@@ -120,10 +112,9 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
120
112
|
to {
|
|
121
113
|
-webkit-transform: rotateX(-360deg);
|
|
122
114
|
transform: rotateX(-360deg);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
const fwdy018 = keyframes`
|
|
115
|
+
}`;
|
|
116
|
+
/* ============================== y-axis 0-180 >180 - 360 */
|
|
117
|
+
const fwdy018 = (0, styled_components_1.keyframes) `
|
|
127
118
|
from {
|
|
128
119
|
-webkit-transform: rotateY(360deg);
|
|
129
120
|
transform: rotateY(360deg);
|
|
@@ -131,8 +122,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
131
122
|
to {
|
|
132
123
|
-webkit-transform: rotateY(180deg);
|
|
133
124
|
transform: rotateY(180deg);
|
|
134
|
-
}
|
|
135
|
-
|
|
125
|
+
}`;
|
|
126
|
+
const fwdy1836 = (0, styled_components_1.keyframes) `
|
|
136
127
|
from {
|
|
137
128
|
-webkit-transform: rotateY(180deg);
|
|
138
129
|
transform: rotateY(180deg);
|
|
@@ -140,10 +131,9 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
140
131
|
to {
|
|
141
132
|
-webkit-transform: rotateY(0deg);
|
|
142
133
|
transform: rotateY(0deg);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
const fwdy09 = keyframes`
|
|
134
|
+
}`;
|
|
135
|
+
/* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
|
|
136
|
+
const fwdy09 = (0, styled_components_1.keyframes) `
|
|
147
137
|
from {
|
|
148
138
|
-webkit-transform: rotateY(360deg);
|
|
149
139
|
transform: rotateY(360deg);
|
|
@@ -151,8 +141,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
151
141
|
to {
|
|
152
142
|
-webkit-transform: rotateY(90deg);
|
|
153
143
|
transform: rotateY(90deg);
|
|
154
|
-
}
|
|
155
|
-
|
|
144
|
+
}`;
|
|
145
|
+
const fwdy918 = (0, styled_components_1.keyframes) `
|
|
156
146
|
from {
|
|
157
147
|
-webkit-transform: rotateY(-90deg);
|
|
158
148
|
transform: rotateY(-90deg);
|
|
@@ -160,8 +150,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
160
150
|
to {
|
|
161
151
|
-webkit-transform: rotateY(-180deg);
|
|
162
152
|
transform: rotateY(-180deg);
|
|
163
|
-
}
|
|
164
|
-
|
|
153
|
+
}`;
|
|
154
|
+
const fwdy1827 = (0, styled_components_1.keyframes) `
|
|
165
155
|
from {
|
|
166
156
|
-webkit-transform: rotateY(-180deg);
|
|
167
157
|
transform: rotateY(-180deg);
|
|
@@ -169,8 +159,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
169
159
|
to {
|
|
170
160
|
-webkit-transform: rotateY(-270deg);
|
|
171
161
|
transform: rotateY(-270deg);
|
|
172
|
-
}
|
|
173
|
-
|
|
162
|
+
}`;
|
|
163
|
+
const fwdy2736 = (0, styled_components_1.keyframes) `
|
|
174
164
|
from {
|
|
175
165
|
-webkit-transform: rotateY(-270deg);
|
|
176
166
|
transform: rotateY(-270deg);
|
|
@@ -178,15 +168,13 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
178
168
|
to {
|
|
179
169
|
-webkit-transform: rotateY(-360deg);
|
|
180
170
|
transform: rotateY(-360deg);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const floatX = keyframes`
|
|
171
|
+
}`;
|
|
172
|
+
/* ============================= floating */
|
|
173
|
+
const floatX = (0, styled_components_1.keyframes) `
|
|
185
174
|
0% { -webkit-transform: translate(0, 0px); -ms-transform: translate(0, 0px); transform: translate(0, 0px); }
|
|
186
175
|
50% { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
|
|
187
|
-
100% { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }
|
|
188
|
-
|
|
189
|
-
const floatShadow = keyframes`
|
|
176
|
+
100% { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
|
|
177
|
+
const floatShadow = (0, styled_components_1.keyframes) `
|
|
190
178
|
0% {
|
|
191
179
|
-webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
|
|
192
180
|
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
|
|
@@ -207,9 +195,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
207
195
|
-webkit-transform: translateY(0px);
|
|
208
196
|
-ms-transform: translateY(0px);
|
|
209
197
|
transform: translateY(0px);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
const pulseSM = keyframes`
|
|
198
|
+
}`;
|
|
199
|
+
const pulseSM = (0, styled_components_1.keyframes) `
|
|
213
200
|
0% {
|
|
214
201
|
-webkit-transform: scale(0.9);
|
|
215
202
|
-ms-transform: scale(0.9);
|
|
@@ -224,9 +211,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
224
211
|
-webkit-transform: scale(0.9);
|
|
225
212
|
-ms-transform: scale(0.9);
|
|
226
213
|
transform: scale(0.9);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
const pulseMD = keyframes`
|
|
214
|
+
}`;
|
|
215
|
+
const pulseMD = (0, styled_components_1.keyframes) `
|
|
230
216
|
0% {
|
|
231
217
|
-webkit-transform: scale(0.7);
|
|
232
218
|
-ms-transform: scale(0.7);
|
|
@@ -241,9 +227,8 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
241
227
|
-webkit-transform: scale(0.7);
|
|
242
228
|
-ms-transform: scale(0.7);
|
|
243
229
|
transform: scale(0.7);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
const pulseLG = keyframes`
|
|
230
|
+
}`;
|
|
231
|
+
const pulseLG = (0, styled_components_1.keyframes) `
|
|
247
232
|
0% {
|
|
248
233
|
-webkit-transform: scale(0.5);
|
|
249
234
|
-ms-transform: scale(0.5);
|
|
@@ -258,33 +243,33 @@ export const allAnims = (props: AllAnimsProps) => {
|
|
|
258
243
|
-webkit-transform: scale(0.5);
|
|
259
244
|
-ms-transform: scale(0.5);
|
|
260
245
|
transform: scale(0.5);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
246
|
+
}`;
|
|
247
|
+
const noAnim = (0, styled_components_1.keyframes) ``;
|
|
248
|
+
return {
|
|
249
|
+
X360,
|
|
250
|
+
Y360,
|
|
251
|
+
fadeInkf,
|
|
252
|
+
wobY,
|
|
253
|
+
wobX,
|
|
254
|
+
fwdx018,
|
|
255
|
+
fwdx1836,
|
|
256
|
+
fwdx09,
|
|
257
|
+
fwdx918,
|
|
258
|
+
fwdx1827,
|
|
259
|
+
fwdx2736,
|
|
260
|
+
fwdy018,
|
|
261
|
+
fwdy1836,
|
|
262
|
+
fwdy09,
|
|
263
|
+
fwdy918,
|
|
264
|
+
fwdy1827,
|
|
265
|
+
fwdy2736,
|
|
266
|
+
floatX,
|
|
267
|
+
floatShadow,
|
|
268
|
+
pulseSM,
|
|
269
|
+
pulseMD,
|
|
270
|
+
pulseLG,
|
|
271
|
+
noAnim,
|
|
272
|
+
};
|
|
273
|
+
};
|
|
274
|
+
exports.allAnims = allAnims;
|
|
275
|
+
//# sourceMappingURL=Anims.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Anims.js","sourceRoot":"","sources":["../../../../src/components/styles/Anims.ts"],"names":[],"mappings":";;;AAAA,yDAA8C;AAOvC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,IAAI,GAAG,IAAA,6BAAS,EAAA;;;;;;;;;EAStB,CAAC;IAED,aAAa;IACb,MAAM,IAAI,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQlB,CAAC;IAEL,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;MAMtB,CAAC;IAEL,MAAM,IAAI,GAAG,IAAA,6BAAS,EAAA;;qCAEa,UAAU;6BAClB,UAAU;;;qCAGF,SAAS;6BACjB,SAAS;;;qCAGD,UAAU;6BAClB,UAAU;MACjC,CAAC;IAEL,MAAM,IAAI,GAAG,IAAA,6BAAS,EAAA;;qCAEa,UAAU;6BAClB,UAAU;;;qCAGF,SAAS;6BACjB,SAAS;;;qCAGD,UAAU;6BAClB,UAAU;MACjC,CAAC;IACL,4DAA4D;IAC5D,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQrB,CAAC;IACL,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQtB,CAAC;IACL,yEAAyE;IACzE,MAAM,MAAM,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQpB,CAAC;IACL,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQrB,CAAC;IACL,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQtB,CAAC;IACL,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;MAQtB,CAAC;IAEL,4DAA4D;IAC5D,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQtB,CAAC;IACJ,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQvB,CAAC;IAEJ,yEAAyE;IACzE,MAAM,MAAM,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQrB,CAAC;IACJ,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQtB,CAAC;IACJ,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQvB,CAAC;IACJ,MAAM,QAAQ,GAAG,IAAA,6BAAS,EAAA;;;;;;;;KAQvB,CAAC;IAEJ,4CAA4C;IAC5C,MAAM,MAAM,GAAG,IAAA,6BAAS,EAAA;;;uHAG6F,CAAC;IAEtH,MAAM,WAAW,GAAG,IAAA,6BAAS,EAAA;;;;;;;;;;;;;;;;;;;;;UAqBrB,CAAC;IAET,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;;;;;;;;MAerB,CAAC;IAEL,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;;;;;;;;OAepB,CAAC;IAEN,MAAM,OAAO,GAAG,IAAA,6BAAS,EAAA;;;;;;;;;;;;;;;OAepB,CAAC;IAEN,MAAM,MAAM,GAAG,IAAA,6BAAS,EAAA,EAAE,CAAC;IAE3B,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,WAAW;QACX,OAAO;QACP,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AA1RW,QAAA,QAAQ,YA0RnB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ObjWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ObjWrapper = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
exports.ObjWrapper = styled_components_1.default.div `
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
position: relative;
|
|
12
|
+
transform-style: preserve-3d;
|
|
13
|
+
`;
|
|
14
|
+
//# sourceMappingURL=Global.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Global.js","sourceRoot":"","sources":["../../../../src/components/styles/Global.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AAC1B,QAAA,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAKnC,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface SceneStyleProps {
|
|
2
|
+
width?: number | string;
|
|
3
|
+
height?: number | string;
|
|
4
|
+
perspective?: number | string | undefined;
|
|
5
|
+
perspectiveOrigin?: string | undefined;
|
|
6
|
+
zIndex?: number | undefined;
|
|
7
|
+
children: any;
|
|
8
|
+
}
|
|
9
|
+
export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.SceneStyle = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const SceneStyle = (props) => {
|
|
10
|
+
const { width = 0, height = 0, perspective = 600, perspectiveOrigin = "50% 50%", zIndex = 10, children = {}, } = props;
|
|
11
|
+
const SceneStyleDiv = styled_components_1.default.div `
|
|
12
|
+
width: ${width}px;
|
|
13
|
+
height: ${height}px;
|
|
14
|
+
-webkit-perspective: ${perspective}px;
|
|
15
|
+
perspective: ${perspective}px;
|
|
16
|
+
-webkit-perspective-origin: ${perspectiveOrigin};
|
|
17
|
+
perspective-origin: ${perspectiveOrigin};
|
|
18
|
+
`;
|
|
19
|
+
return (react_1.default.createElement("div", { style: { zIndex } },
|
|
20
|
+
react_1.default.createElement(SceneStyleDiv, null, children)));
|
|
21
|
+
};
|
|
22
|
+
exports.SceneStyle = SceneStyle;
|
|
23
|
+
//# sourceMappingURL=Scene.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/components/styles/Scene.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AACvC,kDAA0B;AAWnB,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,WAAW,GAAG,GAAG,EACjB,iBAAiB,GAAG,SAAS,EAC7B,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,EAAE,GACd,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAQ,2BAAM,CAAC,GAAG,CAAA;aAC1B,KAAK;cACJ,MAAM;2BACO,WAAW;mBACnB,WAAW;kCACI,iBAAiB;0BACzB,iBAAiB;GACxC,CAAC;IAEF,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,MAAM,EAAE;QACpB,8BAAC,aAAa,QAAE,QAAQ,CAAiB,CACrC,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,UAAU,cAwBrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./components";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
//export * from './hooks';
|
|
18
|
+
//export * from './library';
|
|
19
|
+
__exportStar(require("./components"), exports);
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0BAA0B;AAC1B,4BAA4B;AAC5B,+CAA6B"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
3
|
+
backgroundColor?: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const Button: React.FunctionComponent<IButtonProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export const Button = (props) => {
|
|
3
|
+
const { children, backgroundColor, color, style } = props;
|
|
4
|
+
let _style = style || {};
|
|
5
|
+
/** Override Defaults */
|
|
6
|
+
if (backgroundColor && _style)
|
|
7
|
+
_style.backgroundColor = backgroundColor;
|
|
8
|
+
if (color && _style)
|
|
9
|
+
_style.color = color;
|
|
10
|
+
return (React.createElement("button", Object.assign({ style: _style }, props), children));
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,CAAC,MAAM,MAAM,GAA0C,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,IAAI,MAAM,GAAwB,KAAK,IAAI,EAAE,CAAC;IAE9C,wBAAwB;IACxB,IAAI,eAAe,IAAI,MAAM;QAAE,MAAM,CAAC,eAAe,GAAG,eAAe,CAAC;IACxE,IAAI,KAAK,IAAI,MAAM;QAAE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IAE1C,OAAO,CACL,8CAAQ,KAAK,EAAE,MAAM,IAAM,KAAK,GAC7B,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AnimWrap } from "./styles/AnimWrap";
|
|
3
|
+
import { SceneStyle } from "./styles/Scene";
|
|
4
|
+
import Face from "./Faces/Face";
|
|
5
|
+
import { ObjWrapper } from "./styles/Global";
|
|
6
|
+
export const Card = (props) => {
|
|
7
|
+
let { anim1Specs, anim2Specs, width = 5, height = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex, } = props;
|
|
8
|
+
const buildFace = (faceType) => {
|
|
9
|
+
return (React.createElement(Face, { width: width, height: height, depth: 0.1, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom }));
|
|
10
|
+
};
|
|
11
|
+
return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
|
|
12
|
+
React.createElement(AnimWrap, { animSpecs: anim1Specs },
|
|
13
|
+
React.createElement(AnimWrap, { animSpecs: anim2Specs },
|
|
14
|
+
React.createElement(ObjWrapper, null,
|
|
15
|
+
!!faces && !!faces.front ? buildFace("front") : null,
|
|
16
|
+
!!faces && !!faces.back ? buildFace("back") : null)))));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAe,EAAO,EAAE;IAC3C,IAAI,EACF,UAAU,EACV,UAAU,EACV,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EACzB,WAAW,EACX,iBAAiB,EACjB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACvC,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM;QAEd,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;YAC7B,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;gBAC7B,oBAAC,UAAU;oBACR,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC,CACJ,CACF,CACA,CACd,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AnimWrap } from "./styles/AnimWrap";
|
|
3
|
+
import { SceneStyle } from "./styles/Scene";
|
|
4
|
+
import Face from "./Faces/Face";
|
|
5
|
+
import { ObjWrapper } from "./styles/Global";
|
|
6
|
+
export const Cuboid = (props) => {
|
|
7
|
+
let { anim1Specs, anim2Specs, width = 5, height = 5, depth = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex, } = props;
|
|
8
|
+
const buildFace = (faceType) => {
|
|
9
|
+
return (React.createElement(Face, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom }));
|
|
10
|
+
};
|
|
11
|
+
return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
|
|
12
|
+
React.createElement(AnimWrap, { animSpecs: anim1Specs },
|
|
13
|
+
React.createElement(AnimWrap, { animSpecs: anim2Specs },
|
|
14
|
+
React.createElement(ObjWrapper, null,
|
|
15
|
+
!!faces && !!faces.front ? buildFace("front") : null,
|
|
16
|
+
!!faces && !!faces.right ? buildFace("right") : null,
|
|
17
|
+
!!faces && !!faces.back ? buildFace("back") : null,
|
|
18
|
+
!!faces && !!faces.left ? buildFace("left") : null,
|
|
19
|
+
!!faces && !!faces.top ? buildFace("top") : null,
|
|
20
|
+
!!faces && !!faces.bottom ? buildFace("bottom") : null)))));
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=Cuboid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Cuboid.js","sourceRoot":"","sources":["../../../src/components/Cuboid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAO,EAAE;IAC7C,IAAI,EACF,UAAU,EACV,UAAU,EACV,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,CAAC,EACT,KAAK,EACL,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EACzB,WAAW,EACX,iBAAiB,EACjB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACvC,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM;QAEd,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;YAC7B,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;gBAC7B,oBAAC,UAAU;oBACR,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACpD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;oBAChD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C,CACJ,CACF,CACA,CACd,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import React from "react";
|
|
3
|
+
const Face = (props) => {
|
|
4
|
+
let { depth = 10, faceType, global = {}, height = 10, custom = false, tranz = 80, width = 100, } = props;
|
|
5
|
+
let transform;
|
|
6
|
+
let styles = !!custom[faceType] && !!custom[faceType].css
|
|
7
|
+
? custom[faceType].css
|
|
8
|
+
: global.css;
|
|
9
|
+
const body = !!custom[faceType] && !!custom[faceType].body
|
|
10
|
+
? custom[faceType].body
|
|
11
|
+
: global.body;
|
|
12
|
+
if (faceType === "bottom") {
|
|
13
|
+
tranz = +height - +depth / 2;
|
|
14
|
+
height = +depth;
|
|
15
|
+
transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
|
|
16
|
+
//styles = !!custom["top"] ? custom : global;
|
|
17
|
+
}
|
|
18
|
+
else if (faceType === "top") {
|
|
19
|
+
height = +depth;
|
|
20
|
+
if (!!depth)
|
|
21
|
+
tranz = +depth / 2;
|
|
22
|
+
transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
|
|
23
|
+
}
|
|
24
|
+
else if (faceType === "front") {
|
|
25
|
+
if (!!depth)
|
|
26
|
+
tranz = +depth / 2;
|
|
27
|
+
transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
|
|
28
|
+
}
|
|
29
|
+
else if (faceType === "back") {
|
|
30
|
+
if (!!depth)
|
|
31
|
+
tranz = +depth / 2;
|
|
32
|
+
transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
|
|
33
|
+
}
|
|
34
|
+
else if (faceType === "right") {
|
|
35
|
+
if (height > width && !depth) {
|
|
36
|
+
tranz = -(+height / 2 - +width);
|
|
37
|
+
width = +height;
|
|
38
|
+
}
|
|
39
|
+
else if (width > height && !depth) {
|
|
40
|
+
tranz = +height / 2;
|
|
41
|
+
height = +width;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
tranz = +width - +depth / 2;
|
|
45
|
+
width = +depth;
|
|
46
|
+
}
|
|
47
|
+
transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
|
|
48
|
+
// topr is to of Ribbon which points back
|
|
49
|
+
}
|
|
50
|
+
else if (faceType === "topr") {
|
|
51
|
+
height = +depth;
|
|
52
|
+
if (!!depth)
|
|
53
|
+
tranz = +depth / 2;
|
|
54
|
+
//let offset = depth / 2;
|
|
55
|
+
transform = `transform: rotateX(90deg) translateZ(${tranz}px ); `;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
if (height > width && !depth) {
|
|
59
|
+
tranz = -(+height / 2 - +width);
|
|
60
|
+
width = +height;
|
|
61
|
+
}
|
|
62
|
+
else if (width > height && !depth) {
|
|
63
|
+
tranz = +height / 2;
|
|
64
|
+
height = +width;
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
tranz = +depth / 2;
|
|
68
|
+
width = +depth;
|
|
69
|
+
}
|
|
70
|
+
transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
|
|
71
|
+
}
|
|
72
|
+
//const BackFlip: any = styled.section``;
|
|
73
|
+
const Specs = styled.section `
|
|
74
|
+
${styles}
|
|
75
|
+
width: ${width}px;
|
|
76
|
+
position: absolute;
|
|
77
|
+
height: ${height}px;
|
|
78
|
+
${transform};
|
|
79
|
+
`;
|
|
80
|
+
return React.createElement(Specs, null, body);
|
|
81
|
+
};
|
|
82
|
+
export default Face;
|
|
83
|
+
//# sourceMappingURL=Face.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Face.js","sourceRoot":"","sources":["../../../../src/components/Faces/Face.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAe,EAAE;IAC7C,IAAI,EACF,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,GAAG,GACZ,GAAG,KAAK,CAAC;IAEV,IAAI,SAAS,CAAC;IACd,IAAI,MAAM,GACR,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG;QAC1C,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG;QACtB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IACjB,MAAM,IAAI,GACR,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI;QAC3C,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI;QACvB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;IAClB,IAAI,QAAQ,KAAK,QAAQ,EAAE;QACzB,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAC7B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;QACjE,6CAA6C;KAC9C;SAAM,IAAI,QAAQ,KAAK,KAAK,EAAE;QAC7B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,wCAAwC,KAAK,MAAM,CAAC;KACjE;SAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;QAC/B,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,uCAAuC,KAAK,MAAM,CAAC;KAChE;SAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC9B,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;KAClE;SAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;QAC/B,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAChC,KAAK,GAAG,CAAC,MAAM,CAAC;SACjB;aAAM,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE;YACnC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,MAAM,GAAG,CAAC,KAAK,CAAC;SACjB;aAAM;YACL,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;YAC5B,KAAK,GAAG,CAAC,KAAK,CAAC;SAChB;QACD,SAAS,GAAG,wCAAwC,KAAK,MAAM,CAAC;QAChE,yCAAyC;KAC1C;SAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC9B,MAAM,GAAG,CAAC,KAAK,CAAC;QAChB,IAAI,CAAC,CAAC,KAAK;YAAE,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,yBAAyB;QACzB,SAAS,GAAG,wCAAwC,KAAK,SAAS,CAAC;KACpE;SAAM;QACL,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAChC,KAAK,GAAG,CAAC,MAAM,CAAC;SACjB;aAAM,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE;YACnC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,MAAM,GAAG,CAAC,KAAK,CAAC;SACjB;aAAM;YACL,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;YACnB,KAAK,GAAG,CAAC,KAAK,CAAC;SAChB;QACD,SAAS,GAAG,yCAAyC,KAAK,MAAM,CAAC;KAClE;IAED,yCAAyC;IAEzC,MAAM,KAAK,GAAQ,MAAM,CAAC,OAAO,CAAA;MAC7B,MAAM;aACC,KAAK;;cAEJ,MAAM;MACd,SAAS;GACZ,CAAC;IAEF,OAAO,oBAAC,KAAK,QAAE,IAAI,CAAS,CAAC;AAC/B,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AnimWrap } from "./styles/AnimWrap";
|
|
3
|
+
import { SceneStyle } from "./styles/Scene";
|
|
4
|
+
import Face from "./Faces/Face";
|
|
5
|
+
import { ObjWrapper } from "./styles/Global";
|
|
6
|
+
export const Ribbon = (props) => {
|
|
7
|
+
let { anim1Specs, anim2Specs, width = 5, height = 5, depth = 5, faces, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex, } = props;
|
|
8
|
+
const buildFace = (faceType) => {
|
|
9
|
+
return (React.createElement(Face, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom }));
|
|
10
|
+
};
|
|
11
|
+
return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
|
|
12
|
+
React.createElement(AnimWrap, { animSpecs: anim1Specs },
|
|
13
|
+
React.createElement(AnimWrap, { animSpecs: anim2Specs },
|
|
14
|
+
React.createElement(ObjWrapper, null,
|
|
15
|
+
!!faces && !!faces.bottom ? buildFace("bottom") : null,
|
|
16
|
+
!!faces && !!faces.back ? buildFace("back") : null,
|
|
17
|
+
!!faces && !!faces.top ? buildFace("topr") : null)))));
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=Ribbon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ribbon.js","sourceRoot":"","sources":["../../../src/components/Ribbon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAO,EAAE;IAC7C,IAAI,EACF,UAAU,EACV,UAAU,EACV,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,CAAC,EACT,KAAK,EACL,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EACzB,WAAW,EACX,iBAAiB,EACjB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,CAAC,QAAa,EAAO,EAAE;QACvC,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM;QAEd,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;YAC7B,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU;gBAC7B,oBAAC,UAAU;oBACR,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;oBACtD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClD,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CACvC,CACJ,CACF,CACA,CACd,CAAC;AACJ,CAAC,CAAC"}
|