anim-3d-obj 1.1.73 → 1.1.224

package/{dist/esm/components/styles/Anims.js → src/components/styles/Anims.ts}

@@ -1,7 +1,14 @@
 import { keyframes } from "styled-components";
-export const allAnims = (props) => {
-    const { degreesLow = 0, degreesHi = 0 } = props;
-    const swing = keyframes `
+
+interface AllAnimsProps {
+   degreesLow?: number;
+   degreesHi?: number;
+}
+
+export const allAnims = (props: AllAnimsProps) => {
+   const { degreesLow = 0, degreesHi = 0 } = props;
+
+   const swing = keyframes`
     0% {
         -webkit-transform-origin: top;
             -ms-transform-origin: top;
@@ -21,7 +28,8 @@ export const allAnims = (props) => {
                 transform: perspective(550px) rotateX(77deg);
       }
   `;
-    const swingDecay = keyframes `
+
+   const swingDecay = keyframes`
    0% {
     -webkit-transform-origin: top;
         -ms-transform-origin: top;
@@ -55,7 +63,8 @@ export const allAnims = (props) => {
                 transform:  perspective(550px)  rotateX(0);
     }
     `;
-    const X360 = keyframes `
+
+   const X360 = keyframes`
    from {
       -webkit-transform: rotateX(360deg);
       transform: rotateX(360deg);
@@ -64,8 +73,9 @@ export const allAnims = (props) => {
       -webkit-transform: rotateX(0deg);
       transform: rotateX(0deg);
    }`;
-    //////// Y360
-    const Y360 = keyframes `
+
+   //////// Y360
+   const Y360 = keyframes`
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
@@ -74,14 +84,16 @@ export const allAnims = (props) => {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }`;
-    const fadeInkf = keyframes `
+
+   const fadeInkf = keyframes`
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }`;
-    const wobY = keyframes `
+
+   const wobY = keyframes`
     0% {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
@@ -94,7 +106,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
     }`;
-    const wobX = keyframes `
+
+   const wobX = keyframes`
     0% {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
@@ -107,8 +120,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
     }`;
-    /* ============================== x-axis 0-180 >180 - 360 */
-    const fwdx018 = keyframes `
+   /* ============================== x-axis 0-180 >180 - 360 */
+   const fwdx018 = keyframes`
     from {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
@@ -117,7 +130,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-    const fwdx1836 = keyframes `
+   const fwdx1836 = keyframes`
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -126,8 +139,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
     }`;
-    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdx09 = keyframes `
+   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdx09 = keyframes`
     from {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
@@ -136,7 +149,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
     }`;
-    const fwdx918 = keyframes `
+   const fwdx918 = keyframes`
     from {
         -webkit-transform: rotateX(90deg);
         transform: rotateX(90deg);
@@ -145,7 +158,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-    const fwdx1827 = keyframes `
+   const fwdx1827 = keyframes`
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -154,7 +167,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(270deg);
         transform: rotateX(270deg);
     }`;
-    const fwdx2736 = keyframes `
+   const fwdx2736 = keyframes`
     from {
         -webkit-transform: rotateX(270deg);
         transform: rotateX(270deg);
@@ -163,8 +176,9 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
     }`;
-    /* ============================== y-axis 0-180 >180 - 360 */
-    const fwdy018 = keyframes `
+
+   /* ============================== y-axis 0-180 >180 - 360 */
+   const fwdy018 = keyframes`
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
@@ -173,7 +187,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-    const fwdy1836 = keyframes `
+   const fwdy1836 = keyframes`
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -182,8 +196,9 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }`;
-    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdy09 = keyframes `
+
+   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdy09 = keyframes`
    from {
       -webkit-transform: rotateY(0deg);
       transform: rotateY(0deg);
@@ -192,7 +207,7 @@ export const allAnims = (props) => {
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
    }`;
-    const fwdy918 = keyframes `
+   const fwdy918 = keyframes`
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
@@ -201,7 +216,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-    const fwdy1827 = keyframes `
+   const fwdy1827 = keyframes`
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -210,7 +225,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(270deg);
        transform: rotateY(270deg);
    }`;
-    const fwdy2736 = keyframes `
+   const fwdy2736 = keyframes`
    from {
        -webkit-transform: rotateY(270deg);
        transform: rotateY(270deg);
@@ -219,12 +234,14 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }`;
-    /* ============================= floating */
-    const floatX = keyframes `
+
+   /* ============================= floating */
+   const floatX = keyframes`
    0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
    50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
    100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
-    const floatShadow = keyframes `
+
+   const floatShadow = keyframes`
         0% {
             -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                     box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
@@ -246,7 +263,8 @@ export const allAnims = (props) => {
                 -ms-transform: translateY(0px);
                     transform: translateY(0px);
         }`;
-    const pulseSM = keyframes `
+
+   const pulseSM = keyframes`
    0% {
     -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
@@ -262,7 +280,8 @@ export const allAnims = (props) => {
             -ms-transform: scale(0.9);
                 transform: scale(0.9);
     }`;
-    const pulseMD = keyframes `
+
+   const pulseMD = keyframes`
     0% {
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
@@ -278,7 +297,8 @@ export const allAnims = (props) => {
              -ms-transform: scale(0.7);
                  transform: scale(0.7);
      }`;
-    const pulseLG = keyframes `
+
+   const pulseLG = keyframes`
     0% {
      -webkit-transform: scale(0.5);
          -ms-transform: scale(0.5);
@@ -294,32 +314,34 @@ export const allAnims = (props) => {
              -ms-transform: scale(0.5);
                  transform: scale(0.5);
      }`;
-    const noAnim = keyframes ``;
-    return {
-        X360,
-        Y360,
-        fadeInkf,
-        wobY,
-        wobX,
-        fwdx018,
-        fwdx1836,
-        fwdx09,
-        fwdx918,
-        fwdx1827,
-        fwdx2736,
-        fwdy018,
-        fwdy1836,
-        fwdy09,
-        fwdy918,
-        fwdy1827,
-        fwdy2736,
-        floatX,
-        floatShadow,
-        pulseSM,
-        pulseMD,
-        pulseLG,
-        swing,
-        swingDecay,
-        noAnim,
-    };
+
+   const noAnim = keyframes``;
+
+   return {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      floatX,
+      floatShadow,
+      pulseSM,
+      pulseMD,
+      pulseLG,
+      swing,
+      swingDecay,
+      noAnim,
+   };
 };

package/src/components/styles/Global.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import React from "react";
+
+interface ObjWrapperProps {
+   showCenterDiv?: boolean | string | number;
+   children?: any;
+}
+
+export const ObjWrapper = (props: ObjWrapperProps): any => {
+   const { showCenterDiv = false, children = "" } = props;
+
+   const Wrapper: any = showCenterDiv
+      ? styled.section`
+           width: 100%;
+           height: 100%;
+           position: relative;
+           transform-style: preserve-3d;
+           border: 1px solid #0f0;
+        `
+      : styled.section`
+           width: 100%;
+           height: 100%;
+           position: relative;
+           transform-style: preserve-3d;
+        `;
+
+   return <Wrapper>{children}</Wrapper>;
+};

package/src/components/styles/Scene.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import React from "react";
+
+interface SceneStyleProps {
+   width?: number | string;
+   height?: number | string;
+   perspective?: number | string | undefined;
+   perspectiveOrigin?: string | undefined;
+   zIndex?: number | undefined;
+   children: any;
+}
+
+export const SceneStyle = (props: SceneStyleProps) => {
+   const {
+      width = 0,
+      height = 0,
+      perspective = 600,
+      perspectiveOrigin = "50% 50%",
+      zIndex = 10,
+      children = {},
+   } = props;
+
+   const SceneStyleDiv: any = styled.div`
+      width: ${width}px;
+      height: ${height}px;
+      -webkit-perspective: ${perspective}px;
+      perspective: ${perspective}px;
+      -webkit-perspective-origin: ${perspectiveOrigin};
+      perspective-origin: ${perspectiveOrigin};
+   `;
+
+   return (
+      <div style={{ zIndex }}>
+         <SceneStyleDiv>{children}</SceneStyleDiv>
+      </div>
+   );
+};

package/src/components/types.d.ts

@@ -0,0 +1,42 @@
+export interface FaceType {
+   name?: string;
+   css?: string | undefined;
+   body?: any;
+}
+
+export interface ObjProps {
+   anim1?: object | undefined;
+   anim2?: object | undefined;
+   children?: any;
+   depth?: number;
+   global?: { border?: string; bgc?: string; opac?: number | string } | any;
+   height?: number | string;
+   faces?: FaceType[];
+   perspective?: string | number | undefined;
+   perspectiveOrigin?: string | undefined;
+   showCenterDiv?: string | number | boolean | undefined;
+   tranz?: number | undefined;
+   txt?: string | any;
+   width?: number;
+   zIndex?: number | undefined;
+}
+
+export interface GlobalType {
+   css?: string;
+   body?: string;
+}
+
+export interface FaceProps {
+   children?: any;
+   depth?: number | any;
+   face: FaceType;
+   global?: any;
+   height?: number | string;
+   width?: number | string;
+}
+
+export interface SpecsProps {
+   width: number;
+   height: number;
+   transform: string;
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+   "compilerOptions": {
+      "allowSyntheticDefaultImports": true,
+      "declaration": true,
+      "esModuleInterop": true,
+      "jsx": "react",
+      "lib": ["es5", "es2015", "es2016", "dom", "esnext"],
+      "types": ["node"],
+      "module": "es2015",
+      "moduleResolution": "node",
+      "noImplicitAny": true,
+      "outDir": "dist/esm",
+      "sourceMap": false,
+      "strict": true,
+      "target": "es6",
+      "noUnusedLocals": false,
+      "noUnusedParameters": false
+   },
+   "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/dist/esm/components/Face.d.ts

@@ -1,11 +0,0 @@
-import { FaceType } from "./types";
-interface FaceProps {
-    children?: any;
-    depth?: number | any;
-    face: FaceType;
-    global?: any;
-    height?: number | string;
-    width?: number | string;
-}
-export default function Face(props: FaceProps): JSX.Element;
-export {};

package/dist/esm/components/Face.js

@@ -1,108 +0,0 @@
-import styled from "styled-components";
-export default function Face(props) {
-    let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
-    console.log(face);
-    let transform;
-    let tranz = +height / 2;
-    const body = face.body ? face.body : global.body;
-    console.log("====props====" + face.name);
-    console.log(props);
-    ////////////////////////////////////////////////////////////////////////////// BOTTOM
-    if (face.name === "bottom") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-    }
-    else if (face.name === "bottom_rear") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
-    }
-    else if (face.name === "bottom_front") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
-        ////////////////////////////////////////////////////////////////////////////// TOPS
-    }
-    else if (face.name === "top") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
-    }
-    else if (face.name === "top_rear") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        let offset = depth / 2;
-        //translate3d(tx, ty, tz)
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px)  `;
-    }
-    else if (face.name === "top_front") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        let offset = depth / 2;
-        //translate3d(tx, ty, tz)
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px)  `;
-    }
-    else if (face.name === "front") {
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
-    }
-    else if (face.name === "back") {
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
-    }
-    else if (face.name === "right") {
-        if (height > width && !depth) {
-            tranz = -(+height / 2 - +width);
-            width = +height;
-        }
-        else if (width > height && !depth) {
-            tranz = +height / 2;
-            height = +width;
-        }
-        else {
-            tranz = +width - +depth / 2;
-            width = +depth;
-        }
-        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
-        // topr is to of Ribbon which points back
-    }
-    else if (face.name === "left") {
-        if (height > width && !depth) {
-            tranz = -(+height / 2 - +width);
-            width = +height;
-        }
-        else if (width > height && !depth) {
-            tranz = +height / 2;
-            height = +width;
-        }
-        else {
-            tranz = +depth / 2;
-            width = +depth;
-        }
-        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
-    }
-    else {
-        console.log(face.name + " is not a recognized face.name");
-    }
-    console.log(".....css");
-    console.log(`${face.css || global.css}
-   width: ${width}px;
-   position: absolute;
-   height: ${height}px;
-   ${transform}
-`);
-    const Specs = styled.section `
-    ${face.css || global.css}
-    width: ${width}px;
-    position: absolute;
-    height: ${height}px;
-    ${transform}
-  `;
-    return React.createElement(Specs, null, body);
-}

package/dist/esm/components/Obj.d.ts

@@ -1,2 +0,0 @@
-import { ObjProps } from "./types";
-export default function (props: ObjProps): JSX.Element;

package/dist/esm/components/Obj.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { ObjWrapper } from "./styles/Global";
-import { AnimWrap } from "./styles/AnimWrap";
-import { SceneStyle } from "./styles/Scene";
-import Face from "./Face";
-export default function (props) {
-    let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
-    // process config
-    const buildFace = (face) => {
-        const details = {
-            width,
-            height,
-            depth,
-            face,
-            global,
-        };
-        return React.createElement(Face, Object.assign({}, details, { key: face.name }));
-    };
-    return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
-        React.createElement(AnimWrap, { animSpecs: anim1 },
-            React.createElement(AnimWrap, { animSpecs: anim2 },
-                React.createElement(ObjWrapper, null, faces && faces[0]
-                    ? faces.map((face) => (face.name ? buildFace(face) : null))
-                    : null)))));
-}

package/dist/esm/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Obj";
-export * from "./Face";

package/dist/esm/components/index.js

@@ -1,2 +0,0 @@
-export * from "./Obj";
-export * from "./Face";

package/dist/esm/components/styles/AnimWrap.d.ts

@@ -1,2 +0,0 @@
-import { AnimStylesProps } from "./Anim";
-export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/esm/components/styles/AnimWrap.js

@@ -1,81 +0,0 @@
-import styled from "styled-components";
-import React from "react";
-import { allAnims } from "./Anims";
-export const AnimWrap = (props) => {
-    const { children, animSpecs } = props;
-    const AS = animSpecs;
-    const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, swing, swingDecay, noAnim, } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
-    let theAnim = "noAnim";
-    if (AS.name === "X360")
-        theAnim = X360;
-    else if (AS.name === "Y360")
-        theAnim = Y360;
-    else if (AS.name === "fadeInkf")
-        theAnim = fadeInkf;
-    else if (AS.name === "wobX")
-        theAnim = wobX;
-    else if (AS.name === "wobY")
-        theAnim = wobY;
-    else if (AS.name === "fwdx018")
-        theAnim = fwdx018;
-    else if (AS.name === "fwdx1836")
-        theAnim = fwdx1836;
-    else if (AS.name === "fwdx09")
-        theAnim = fwdx09;
-    else if (AS.name === "fwdx918")
-        theAnim = fwdx918;
-    else if (AS.name === "fwdx1827")
-        theAnim = fwdx1827;
-    else if (AS.name === "fwdx2736")
-        theAnim = fwdx2736;
-    else if (AS.name === "fwdy018")
-        theAnim = fwdy018;
-    else if (AS.name === "fwdy1836")
-        theAnim = fwdy1836;
-    else if (AS.name === "fwdy09")
-        theAnim = fwdy09;
-    else if (AS.name === "fwdy918")
-        theAnim = fwdy918;
-    else if (AS.name === "fwdy1827")
-        theAnim = fwdy1827;
-    else if (AS.name === "fwdy2736")
-        theAnim = fwdy2736;
-    else if (AS.name === "floatX")
-        theAnim = floatX;
-    else if (AS.name === "floatShadow")
-        theAnim = floatShadow;
-    else if (AS.name === "pulseSM")
-        theAnim = pulseSM;
-    else if (AS.name === "pulseMD")
-        theAnim = pulseMD;
-    else if (AS.name === "pulseLG")
-        theAnim = pulseLG;
-    else if (AS.name === "swing")
-        theAnim = swing;
-    else if (AS.name === "swingDecay")
-        theAnim = swingDecay;
-    else
-        theAnim = noAnim;
-    const AnimWrapDiv = styled.div `
-    width: 100%;
-    height: 100%;
-    position: relative;
-    transform-style: preserve-3d;
-    border: ${AS.border};
-    -webkit-animation-duration: ${AS.duration}s;
-    animation-duration: ${AS.duration}s;
-    -webkit-animation-iteration-count: ${AS.iterationCount};
-    animation-iteration-count: ${AS.iterationCount};
-    -webkit-animation-name: ${theAnim};
-    animation-name: ${theAnim};
-    -webkit-animation-fill-mode: ${AS.fillMode};
-    animation-fill-mode: ${AS.fillMode};
-    animation-direction: ${AS.direction};
-    -webkit-animation-direction: ${AS.direction};
-    -webkit-animation-timing-function: ${AS.timing};
-    animation-timing-function: ${AS.timing};
-    -webkit-animation-delay: ${AS.delay}s;
-    animation-delay: ${AS.delay}s;
-  `;
-    return React.createElement(AnimWrapDiv, null, children);
-};