anim-3d-obj 1.1.72 → 1.1.74
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/dist/cjs/components/Face.d.ts +2 -5
- package/dist/cjs/components/Face.js +20 -22
- package/dist/cjs/components/Obj.d.ts +1 -33
- package/dist/cjs/components/Obj.js +13 -14
- package/dist/esm/components/Face.d.ts +2 -5
- package/dist/esm/components/Face.js +20 -22
- package/dist/esm/components/Obj.d.ts +1 -33
- package/dist/esm/components/Obj.js +13 -14
- package/package.json +3 -1
|
@@ -1,13 +1,10 @@
|
|
|
1
|
+
import { FaceType } from "./types";
|
|
1
2
|
interface FaceProps {
|
|
2
3
|
children?: any;
|
|
3
4
|
depth?: number | any;
|
|
4
|
-
|
|
5
|
-
custom?: any;
|
|
5
|
+
face: FaceType;
|
|
6
6
|
global?: any;
|
|
7
7
|
height?: number | string;
|
|
8
|
-
id?: string | number | boolean;
|
|
9
|
-
styles?: object | any;
|
|
10
|
-
tranz: any;
|
|
11
8
|
width?: number | string;
|
|
12
9
|
}
|
|
13
10
|
export default function Face(props: FaceProps): JSX.Element;
|
|
@@ -3,42 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
7
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
8
|
function Face(props) {
|
|
9
|
-
let { depth = 10,
|
|
9
|
+
let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
|
|
10
|
+
console.log(face);
|
|
10
11
|
let transform;
|
|
11
|
-
let
|
|
12
|
-
|
|
13
|
-
: global.css;
|
|
14
|
-
const body = !!custom[faceType] && !!custom[faceType].body
|
|
15
|
-
? custom[faceType].body
|
|
16
|
-
: global.body;
|
|
12
|
+
let tranz = +height / 2;
|
|
13
|
+
const body = face.body ? face.body : global.body;
|
|
17
14
|
////////////////////////////////////////////////////////////////////////////// BOTTOM
|
|
18
|
-
if (
|
|
15
|
+
if (face.name === "bottom") {
|
|
19
16
|
tranz = +height - +depth / 2;
|
|
20
17
|
height = +depth;
|
|
21
18
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
|
|
22
|
-
//styles = !!custom["top"] ? custom : global;
|
|
23
19
|
}
|
|
24
|
-
else if (
|
|
20
|
+
else if (face.name === "bottom_rear") {
|
|
25
21
|
tranz = +height - +depth / 2;
|
|
26
22
|
height = +depth;
|
|
27
23
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${height}px) `;
|
|
28
24
|
}
|
|
29
|
-
else if (
|
|
25
|
+
else if (face.name === "bottom_front") {
|
|
30
26
|
tranz = +height - +depth / 2;
|
|
31
27
|
height = +depth;
|
|
32
28
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${-height}px) `;
|
|
33
29
|
////////////////////////////////////////////////////////////////////////////// TOPS
|
|
34
30
|
}
|
|
35
|
-
else if (
|
|
31
|
+
else if (face.name === "top") {
|
|
36
32
|
height = +depth;
|
|
37
33
|
if (!!depth)
|
|
38
34
|
tranz = +depth / 2;
|
|
39
35
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
|
|
40
36
|
}
|
|
41
|
-
else if (
|
|
37
|
+
else if (face.name === "top_rear") {
|
|
42
38
|
height = +depth;
|
|
43
39
|
if (!!depth)
|
|
44
40
|
tranz = +depth / 2;
|
|
@@ -46,7 +42,7 @@ function Face(props) {
|
|
|
46
42
|
//translate3d(tx, ty, tz)
|
|
47
43
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px) `;
|
|
48
44
|
}
|
|
49
|
-
else if (
|
|
45
|
+
else if (face.name === "top_front") {
|
|
50
46
|
height = +depth;
|
|
51
47
|
if (!!depth)
|
|
52
48
|
tranz = +depth / 2;
|
|
@@ -54,17 +50,17 @@ function Face(props) {
|
|
|
54
50
|
//translate3d(tx, ty, tz)
|
|
55
51
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px) `;
|
|
56
52
|
}
|
|
57
|
-
else if (
|
|
53
|
+
else if (face.name === "front") {
|
|
58
54
|
if (!!depth)
|
|
59
55
|
tranz = +depth / 2;
|
|
60
56
|
transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
|
|
61
57
|
}
|
|
62
|
-
else if (
|
|
58
|
+
else if (face.name === "back") {
|
|
63
59
|
if (!!depth)
|
|
64
60
|
tranz = +depth / 2;
|
|
65
61
|
transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
|
|
66
62
|
}
|
|
67
|
-
else if (
|
|
63
|
+
else if (face.name === "right") {
|
|
68
64
|
if (height > width && !depth) {
|
|
69
65
|
tranz = -(+height / 2 - +width);
|
|
70
66
|
width = +height;
|
|
@@ -80,7 +76,7 @@ function Face(props) {
|
|
|
80
76
|
transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
|
|
81
77
|
// topr is to of Ribbon which points back
|
|
82
78
|
}
|
|
83
|
-
else {
|
|
79
|
+
else if (face.name === "left") {
|
|
84
80
|
if (height > width && !depth) {
|
|
85
81
|
tranz = -(+height / 2 - +width);
|
|
86
82
|
width = +height;
|
|
@@ -95,13 +91,15 @@ function Face(props) {
|
|
|
95
91
|
}
|
|
96
92
|
transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
|
|
97
93
|
}
|
|
98
|
-
|
|
94
|
+
else {
|
|
95
|
+
console.log(face.name + " is not a recognized face.name");
|
|
96
|
+
}
|
|
99
97
|
const Specs = styled_components_1.default.section `
|
|
100
|
-
${
|
|
98
|
+
${face.css || global.css}
|
|
101
99
|
width: ${width}px;
|
|
102
100
|
position: absolute;
|
|
103
101
|
height: ${height}px;
|
|
104
|
-
${transform}
|
|
102
|
+
${transform}
|
|
105
103
|
`;
|
|
106
104
|
return react_1.default.createElement(Specs, null, body);
|
|
107
105
|
}
|
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
anim1?: object | undefined;
|
|
3
|
-
anim2?: object | undefined;
|
|
4
|
-
children?: any;
|
|
5
|
-
depth?: number;
|
|
6
|
-
global?: {
|
|
7
|
-
border?: string;
|
|
8
|
-
bgc?: string;
|
|
9
|
-
opac?: number | string;
|
|
10
|
-
} | any;
|
|
11
|
-
faces: {
|
|
12
|
-
front?: boolean | undefined;
|
|
13
|
-
back?: boolean | undefined;
|
|
14
|
-
left?: boolean | undefined;
|
|
15
|
-
right?: boolean | undefined;
|
|
16
|
-
top?: boolean | undefined;
|
|
17
|
-
top_rear?: boolean | undefined;
|
|
18
|
-
top_front?: boolean | undefined;
|
|
19
|
-
bottom?: boolean | undefined;
|
|
20
|
-
bottom_rear?: boolean | undefined;
|
|
21
|
-
bottom_front?: boolean | undefined;
|
|
22
|
-
};
|
|
23
|
-
height?: number | string;
|
|
24
|
-
custom?: object | string | undefined;
|
|
25
|
-
perspective?: string | number | undefined;
|
|
26
|
-
perspectiveOrigin?: string | undefined;
|
|
27
|
-
showCenterDiv?: string | number | boolean | undefined;
|
|
28
|
-
tranz?: number | undefined;
|
|
29
|
-
txt?: string | any;
|
|
30
|
-
width?: number;
|
|
31
|
-
zIndex?: number | undefined;
|
|
32
|
-
}
|
|
1
|
+
import { ObjProps } from "./types";
|
|
33
2
|
export default function (props: ObjProps): JSX.Element;
|
|
34
|
-
export {};
|
|
@@ -9,24 +9,23 @@ const AnimWrap_1 = require("./styles/AnimWrap");
|
|
|
9
9
|
const Scene_1 = require("./styles/Scene");
|
|
10
10
|
const Face_1 = __importDefault(require("./Face"));
|
|
11
11
|
function default_1(props) {
|
|
12
|
-
let { anim1, anim2, width = 5, height = 5, depth = 5,
|
|
12
|
+
let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
|
|
13
13
|
// process config
|
|
14
|
-
const buildFace = (
|
|
15
|
-
|
|
14
|
+
const buildFace = (face) => {
|
|
15
|
+
const details = {
|
|
16
|
+
width,
|
|
17
|
+
height,
|
|
18
|
+
depth,
|
|
19
|
+
face,
|
|
20
|
+
global,
|
|
21
|
+
};
|
|
22
|
+
return react_1.default.createElement(Face_1.default, Object.assign({}, details, { key: face.name }));
|
|
16
23
|
};
|
|
17
24
|
return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
|
|
18
25
|
react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1 },
|
|
19
26
|
react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2 },
|
|
20
|
-
react_1.default.createElement(Global_1.ObjWrapper, null,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
!!faces && !!faces.back ? buildFace("back") : null,
|
|
24
|
-
!!faces && !!faces.left ? buildFace("left") : null,
|
|
25
|
-
!!faces && !!faces.top ? buildFace("top") : null,
|
|
26
|
-
!!faces && !!faces.bottom ? buildFace("bottom") : null,
|
|
27
|
-
!!faces && !!faces.top_rear ? buildFace("top_rear") : null,
|
|
28
|
-
!!faces && !!faces.top_front ? buildFace("top_front") : null,
|
|
29
|
-
!!faces && !!faces.bottom_rear ? buildFace("bottom_rear") : null,
|
|
30
|
-
!!faces && !!faces.bottom_front ? buildFace("bottom_front") : null)))));
|
|
27
|
+
react_1.default.createElement(Global_1.ObjWrapper, null, faces && faces[0]
|
|
28
|
+
? faces.map((face) => (face.name ? buildFace(face) : null))
|
|
29
|
+
: null)))));
|
|
31
30
|
}
|
|
32
31
|
exports.default = default_1;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
+
import { FaceType } from "./types";
|
|
1
2
|
interface FaceProps {
|
|
2
3
|
children?: any;
|
|
3
4
|
depth?: number | any;
|
|
4
|
-
|
|
5
|
-
custom?: any;
|
|
5
|
+
face: FaceType;
|
|
6
6
|
global?: any;
|
|
7
7
|
height?: number | string;
|
|
8
|
-
id?: string | number | boolean;
|
|
9
|
-
styles?: object | any;
|
|
10
|
-
tranz: any;
|
|
11
8
|
width?: number | string;
|
|
12
9
|
}
|
|
13
10
|
export default function Face(props: FaceProps): JSX.Element;
|
|
@@ -1,39 +1,35 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
2
1
|
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
3
|
export default function Face(props) {
|
|
4
|
-
let { depth = 10,
|
|
4
|
+
let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
|
|
5
|
+
console.log(face);
|
|
5
6
|
let transform;
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
: global.css;
|
|
9
|
-
const body = !!custom[faceType] && !!custom[faceType].body
|
|
10
|
-
? custom[faceType].body
|
|
11
|
-
: global.body;
|
|
7
|
+
let tranz = +height / 2;
|
|
8
|
+
const body = face.body ? face.body : global.body;
|
|
12
9
|
////////////////////////////////////////////////////////////////////////////// BOTTOM
|
|
13
|
-
if (
|
|
10
|
+
if (face.name === "bottom") {
|
|
14
11
|
tranz = +height - +depth / 2;
|
|
15
12
|
height = +depth;
|
|
16
13
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
|
|
17
|
-
//styles = !!custom["top"] ? custom : global;
|
|
18
14
|
}
|
|
19
|
-
else if (
|
|
15
|
+
else if (face.name === "bottom_rear") {
|
|
20
16
|
tranz = +height - +depth / 2;
|
|
21
17
|
height = +depth;
|
|
22
18
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${height}px) `;
|
|
23
19
|
}
|
|
24
|
-
else if (
|
|
20
|
+
else if (face.name === "bottom_front") {
|
|
25
21
|
tranz = +height - +depth / 2;
|
|
26
22
|
height = +depth;
|
|
27
23
|
transform = `transform: rotateX(-90deg) translateZ(${tranz}px) translateY(${-height}px) `;
|
|
28
24
|
////////////////////////////////////////////////////////////////////////////// TOPS
|
|
29
25
|
}
|
|
30
|
-
else if (
|
|
26
|
+
else if (face.name === "top") {
|
|
31
27
|
height = +depth;
|
|
32
28
|
if (!!depth)
|
|
33
29
|
tranz = +depth / 2;
|
|
34
30
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
|
|
35
31
|
}
|
|
36
|
-
else if (
|
|
32
|
+
else if (face.name === "top_rear") {
|
|
37
33
|
height = +depth;
|
|
38
34
|
if (!!depth)
|
|
39
35
|
tranz = +depth / 2;
|
|
@@ -41,7 +37,7 @@ export default function Face(props) {
|
|
|
41
37
|
//translate3d(tx, ty, tz)
|
|
42
38
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px) `;
|
|
43
39
|
}
|
|
44
|
-
else if (
|
|
40
|
+
else if (face.name === "top_front") {
|
|
45
41
|
height = +depth;
|
|
46
42
|
if (!!depth)
|
|
47
43
|
tranz = +depth / 2;
|
|
@@ -49,17 +45,17 @@ export default function Face(props) {
|
|
|
49
45
|
//translate3d(tx, ty, tz)
|
|
50
46
|
transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px) `;
|
|
51
47
|
}
|
|
52
|
-
else if (
|
|
48
|
+
else if (face.name === "front") {
|
|
53
49
|
if (!!depth)
|
|
54
50
|
tranz = +depth / 2;
|
|
55
51
|
transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
|
|
56
52
|
}
|
|
57
|
-
else if (
|
|
53
|
+
else if (face.name === "back") {
|
|
58
54
|
if (!!depth)
|
|
59
55
|
tranz = +depth / 2;
|
|
60
56
|
transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
|
|
61
57
|
}
|
|
62
|
-
else if (
|
|
58
|
+
else if (face.name === "right") {
|
|
63
59
|
if (height > width && !depth) {
|
|
64
60
|
tranz = -(+height / 2 - +width);
|
|
65
61
|
width = +height;
|
|
@@ -75,7 +71,7 @@ export default function Face(props) {
|
|
|
75
71
|
transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
|
|
76
72
|
// topr is to of Ribbon which points back
|
|
77
73
|
}
|
|
78
|
-
else {
|
|
74
|
+
else if (face.name === "left") {
|
|
79
75
|
if (height > width && !depth) {
|
|
80
76
|
tranz = -(+height / 2 - +width);
|
|
81
77
|
width = +height;
|
|
@@ -90,13 +86,15 @@ export default function Face(props) {
|
|
|
90
86
|
}
|
|
91
87
|
transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
|
|
92
88
|
}
|
|
93
|
-
|
|
89
|
+
else {
|
|
90
|
+
console.log(face.name + " is not a recognized face.name");
|
|
91
|
+
}
|
|
94
92
|
const Specs = styled.section `
|
|
95
|
-
${
|
|
93
|
+
${face.css || global.css}
|
|
96
94
|
width: ${width}px;
|
|
97
95
|
position: absolute;
|
|
98
96
|
height: ${height}px;
|
|
99
|
-
${transform}
|
|
97
|
+
${transform}
|
|
100
98
|
`;
|
|
101
99
|
return React.createElement(Specs, null, body);
|
|
102
100
|
}
|
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
anim1?: object | undefined;
|
|
3
|
-
anim2?: object | undefined;
|
|
4
|
-
children?: any;
|
|
5
|
-
depth?: number;
|
|
6
|
-
global?: {
|
|
7
|
-
border?: string;
|
|
8
|
-
bgc?: string;
|
|
9
|
-
opac?: number | string;
|
|
10
|
-
} | any;
|
|
11
|
-
faces: {
|
|
12
|
-
front?: boolean | undefined;
|
|
13
|
-
back?: boolean | undefined;
|
|
14
|
-
left?: boolean | undefined;
|
|
15
|
-
right?: boolean | undefined;
|
|
16
|
-
top?: boolean | undefined;
|
|
17
|
-
top_rear?: boolean | undefined;
|
|
18
|
-
top_front?: boolean | undefined;
|
|
19
|
-
bottom?: boolean | undefined;
|
|
20
|
-
bottom_rear?: boolean | undefined;
|
|
21
|
-
bottom_front?: boolean | undefined;
|
|
22
|
-
};
|
|
23
|
-
height?: number | string;
|
|
24
|
-
custom?: object | string | undefined;
|
|
25
|
-
perspective?: string | number | undefined;
|
|
26
|
-
perspectiveOrigin?: string | undefined;
|
|
27
|
-
showCenterDiv?: string | number | boolean | undefined;
|
|
28
|
-
tranz?: number | undefined;
|
|
29
|
-
txt?: string | any;
|
|
30
|
-
width?: number;
|
|
31
|
-
zIndex?: number | undefined;
|
|
32
|
-
}
|
|
1
|
+
import { ObjProps } from "./types";
|
|
33
2
|
export default function (props: ObjProps): JSX.Element;
|
|
34
|
-
export {};
|
|
@@ -4,23 +4,22 @@ import { AnimWrap } from "./styles/AnimWrap";
|
|
|
4
4
|
import { SceneStyle } from "./styles/Scene";
|
|
5
5
|
import Face from "./Face";
|
|
6
6
|
export default function (props) {
|
|
7
|
-
let { anim1, anim2, width = 5, height = 5, depth = 5,
|
|
7
|
+
let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
|
|
8
8
|
// process config
|
|
9
|
-
const buildFace = (
|
|
10
|
-
|
|
9
|
+
const buildFace = (face) => {
|
|
10
|
+
const details = {
|
|
11
|
+
width,
|
|
12
|
+
height,
|
|
13
|
+
depth,
|
|
14
|
+
face,
|
|
15
|
+
global,
|
|
16
|
+
};
|
|
17
|
+
return React.createElement(Face, Object.assign({}, details, { key: face.name }));
|
|
11
18
|
};
|
|
12
19
|
return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
|
|
13
20
|
React.createElement(AnimWrap, { animSpecs: anim1 },
|
|
14
21
|
React.createElement(AnimWrap, { animSpecs: anim2 },
|
|
15
|
-
React.createElement(ObjWrapper, null,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
!!faces && !!faces.back ? buildFace("back") : null,
|
|
19
|
-
!!faces && !!faces.left ? buildFace("left") : null,
|
|
20
|
-
!!faces && !!faces.top ? buildFace("top") : null,
|
|
21
|
-
!!faces && !!faces.bottom ? buildFace("bottom") : null,
|
|
22
|
-
!!faces && !!faces.top_rear ? buildFace("top_rear") : null,
|
|
23
|
-
!!faces && !!faces.top_front ? buildFace("top_front") : null,
|
|
24
|
-
!!faces && !!faces.bottom_rear ? buildFace("bottom_rear") : null,
|
|
25
|
-
!!faces && !!faces.bottom_front ? buildFace("bottom_front") : null)))));
|
|
22
|
+
React.createElement(ObjWrapper, null, faces && faces[0]
|
|
23
|
+
? faces.map((face) => (face.name ? buildFace(face) : null))
|
|
24
|
+
: null)))));
|
|
26
25
|
}
|
package/package.json
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
|
|
10
|
+
|
|
9
11
|
{
|
|
10
12
|
"name": "anim-3d-obj",
|
|
11
13
|
"repository": {
|
|
@@ -13,7 +15,7 @@
|
|
|
13
15
|
"url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
|
|
14
16
|
},
|
|
15
17
|
"homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
|
|
16
|
-
"version": "1.1.
|
|
18
|
+
"version": "1.1.74",
|
|
17
19
|
"description": "React library for creating 3D objects quickly. Also these objects can be animated",
|
|
18
20
|
"main": "dist/cjs/index.js",
|
|
19
21
|
"module": "dist/esm/index.js",
|