anim-3d-obj 1.1.10 → 1.1.13

package/src/App.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import App from "./App";
+
+test("renders learn react link", () => {
+   const { getByText } = render(<App />);
+
+   expect(getByText(/learn/i)).toBeInTheDocument();
+});

package/src/App.tsx

@@ -0,0 +1,83 @@
+import Cuboid from "./components/Cuboid";
+
+function App() {
+   const faceprops = {
+      front: true,
+      back: true,
+      left: true,
+      right: true,
+      top: true,
+      bottom: true,
+   };
+   const globalStyles: object = {
+      // global styles
+      border: "1px solid #00f",
+      bgc: "#009",
+      opac: 0.9,
+      bfv: "visible",
+      fontFamily: "Cochin",
+   };
+   const animSpecs: object = {
+      anim1: "Y360",
+      anim2: "X360",
+      anim1duration: 5,
+      anim2duration: 23,
+      anim1count: "infinite",
+      anim1low: "-120",
+      anim2hi: "120",
+      anim2low: "-81",
+      anim2count: "infinite",
+      anim1direction: "normal",
+      anim2direction: "normal",
+   };
+
+   const indivStyles: object = {
+      // // face individual styles (over rides global)
+      bottom: {
+         bfv: "visible",
+         fontFamily: "Helvetica",
+      },
+      front: {
+         border: "1px solid #f00",
+         bgc: "#f00",
+         bfv: "visible",
+         fontFamily: "Arial, Sans",
+      },
+      left: {
+         bgc: "yellow",
+      },
+      top: {
+         bgc: "pink",
+      },
+      right: {
+         bgc: "purple",
+      },
+      back: {
+         border: "1px solid #f00",
+         bgc: "#0f0",
+         bfv: "visible",
+         fontFamily: "Arial, Sans",
+      },
+   };
+
+   return (
+      <div style={{ padding: 150 }}>
+         <Cuboid
+            width={300}
+            height={200}
+            depth={100}
+            perspectiveOrigin='50% 50%'
+            zIndex={10}
+            animSpecs={animSpecs}
+            indivStyles={indivStyles}
+            faces={faceprops}
+            globalStyles={globalStyles}
+         >
+            {}
+         </Cuboid>
+         <div style={{ padding: 5 }} />
+      </div>
+   );
+}
+
+export default App;

package/src/components/Cuboid.tsx

@@ -0,0 +1,112 @@
+import styled from "styled-components";
+import React from "react";
+import { AnimWrap } from "./styles/AnimWrap";
+import { SceneStyle } from "./styles/Scene";
+import { CuboidProps } from "./Faces/FaceInter";
+import Face from "./Faces/Face";
+
+const CuboidWrapper = styled.div`
+   width: 100%;
+   height: 100%;
+   position: relative;
+   transform-style: preserve-3d;
+`;
+
+const Cuboid = (props: CuboidProps): any => {
+   let color = "#eee",
+      fontWeight: number | string = 800,
+      fontFamily: string = "helvetica",
+      textShadow: string = "1px 1px #555",
+      lineHeight: number = 1.2,
+      fontSize: number | string = 20,
+      textAlign: string | any = "center";
+
+   let {
+      animSpecs = {},
+      width = 5,
+      height = 5,
+      depth = 5,
+      faces,
+      globalStyles,
+      indivStyles,
+      tranz = (+height / 2) | 0,
+      perspectiveOrigin,
+      zIndex,
+   } = props;
+
+   const buildFace = (faceType: any, child: any): any => {
+      //const { faceType, child } = props;
+
+      return (
+         <Face
+            width={width}
+            height={height}
+            depth={depth}
+            faceType={faceType}
+            id={faceType}
+            tranz={tranz}
+            // if specified opac / bgc / border will over-ride globalStyles
+            globalStyles={globalStyles}
+            indivStyles={indivStyles}
+         >
+            <div
+               style={{
+                  color,
+                  fontWeight,
+                  textShadow,
+                  lineHeight,
+                  fontSize,
+                  fontFamily,
+                  textAlign,
+               }}
+            >
+               {child}
+            </div>
+         </Face>
+      );
+   };
+
+   return (
+      <SceneStyle
+         width={width}
+         height={height}
+         perspectiveOrigin={perspectiveOrigin}
+         zIndex={zIndex}
+      >
+         <AnimWrap
+            duration={animSpecs.anim1duration}
+            iterationCount={animSpecs.anim1count}
+            animName={animSpecs.anim1}
+            animLow={animSpecs.anim1low}
+            animHi={animSpecs.anim1hi}
+            animDirection={animSpecs.anim1direction}
+         >
+            <AnimWrap
+               duration={animSpecs.anim2duration}
+               iterationCount={animSpecs.anim2count}
+               animName={animSpecs.anim2}
+               animLow={animSpecs.anim2low}
+               animHi={animSpecs.anim2hi}
+               animDirection={animSpecs.anim2direction}
+            >
+               <CuboidWrapper>
+                  {!!faces && !!faces.front
+                     ? buildFace("front", "FRONT")
+                     : null}
+                  {!!faces && !!faces.right
+                     ? buildFace("right", "RIGHT")
+                     : null}
+                  {!!faces && !!faces.back ? buildFace("back", "BACK") : null}
+                  {!!faces && !!faces.left ? buildFace("left", "LEFT") : null}
+                  {!!faces && !!faces.top ? buildFace("top", "TOP") : null}
+                  {!!faces && !!faces.bottom
+                     ? buildFace("bottom", "BOTTOM")
+                     : null}
+               </CuboidWrapper>
+            </AnimWrap>
+         </AnimWrap>
+      </SceneStyle>
+   );
+};
+
+export default Cuboid;

package/src/components/Faces/Face.tsx

@@ -0,0 +1,105 @@
+import styled from "styled-components";
+import React from "react";
+import { FaceProps, VarsProps } from "./FaceInter";
+
+const Face = (props: FaceProps): any => {
+   let {
+      bfv = false,
+      bgc = false,
+      border = false,
+      children,
+      depth = 10,
+      faceType,
+      globalStyles = {},
+      fontFamily,
+      height = 10,
+      indivStyles = false,
+      left = 0,
+      margin = 0,
+      opac = false,
+      padding = 20,
+      position = "absolute",
+      top = 0,
+      tranz = 80,
+      width = 100,
+   } = props;
+
+   let transform;
+
+   const setCustomVars = (vars: VarsProps, props: FaceProps): boolean => {
+      bfv = !!vars && !!vars.bfv ? vars.bfv : props.bfv;
+      bgc = !!vars && !!vars.bgc ? vars.bgc : props.bgc;
+      opac = !!vars && !!vars.opac ? vars.opac : props.opac;
+      border = !!vars && !!vars.border ? vars.border : props.border;
+      fontFamily =
+         !!vars && !!vars.fontFamily ? vars.fontFamily : props.fontFamily;
+      return true;
+   };
+
+   if (faceType === "bottom") {
+      tranz = +height - +depth / 2;
+      height = +depth;
+      transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+      setCustomVars(indivStyles["bottom"], props);
+   } else if (faceType === "top") {
+      height = +depth;
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+      setCustomVars(indivStyles["top"], props);
+   } else if (faceType === "front") {
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+      setCustomVars(indivStyles["front"], props);
+   } else if (faceType === "back") {
+      if (!!depth) tranz = +depth / 2;
+      transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+      setCustomVars(indivStyles["back"], props);
+   } else if (faceType === "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);`;
+      setCustomVars(indivStyles["right"], props);
+   } else {
+      if (height > width && !depth) {
+         console.log(1);
+         tranz = -(+height / 2 - +width);
+         width = +height;
+      } else if (width > height && !depth) {
+         console.log(2);
+         tranz = +height / 2;
+         height = +width;
+      } else {
+         tranz = +depth / 2;
+         width = +depth;
+      }
+      transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
+      setCustomVars(indivStyles["left"], props);
+   }
+
+   const Specs: any = styled.div`
+      opacity: ${!!opac ? opac : globalStyles.opac};
+      position: ${position};
+      left: ${left};
+      margin: ${margin};
+      padding: ${padding};
+      width: ${width}px;
+      font-family: ${fontFamily};
+      height: ${height}px;
+      background-color: ${!!bgc ? bgc : globalStyles.bgc};
+      border: ${!!border ? border : globalStyles.border};
+      backface-visibility: ${!!bfv ? bfv : globalStyles.bfv};
+      ${transform}
+      top: ${top};
+   `;
+   return <Specs>{children}</Specs>;
+};
+
+export default Face;

package/src/components/Faces/FaceInter.d.ts

@@ -0,0 +1,70 @@
+export interface FaceProps {
+   bfv?: string | boolean;
+   bgc?: string | boolean;
+   border?: string | boolean;
+   children?: any;
+   faceType?: any;
+   globalStyles?: any;
+   fontFamily?: string | any;
+   depth?: number | any;
+   height?: number | string;
+   id?: string | number | boolean;
+   indivStyles?: object | any;
+   left?: number;
+   margin?: number | string;
+   opac?: number | string | boolean | undefined;
+   padding?: number | string;
+   position?: number;
+   top?: number;
+   tranz: any;
+   width?: number | string;
+}
+
+export interface CuboidProps {
+   animSpecs?:
+      | {
+           anim1?: string | undefined;
+           anim1duration?: string | undefined;
+           anim1low?: number | undefined; // rotation degrees
+           anim1hi?: number | undefined; // rotation degrees
+           anim1count?: number | string | undefined;
+           anim2?: string | undefined;
+           anim2duration?: string | undefined;
+           anim2hi?: number | undefined; // rotation degrees
+           anim2low?: number | undefined; // rotation degrees
+           anim2count?: number | string | undefined;
+           anim1direction?: string | undefined;
+           anim2direction?: string | undefined;
+        }
+      | undefined;
+   children: any;
+   depth?: number;
+   globalStyles?:
+      | { border?: string; bgc?: string; opac?: number | string }
+      | any;
+   faces?:
+      | {
+           front: boolean;
+           back: boolean;
+           left: boolean;
+           right: boolean;
+           top: boolean;
+           bottom: boolean;
+        }
+      | undefined;
+
+   height?: number | string;
+   indivStyles?: object | string | undefined;
+   perspectiveOrigin?: string | undefined;
+   tranz?: number | undefined;
+   width?: number;
+   zIndex?: number | undefined;
+}
+
+export interface VarsProps {
+   bfv?: string | any;
+   bgc?: string | any;
+   border?: string | any;
+   opac?: string | any;
+   fontFamily?: string | any;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+//export * from './CubeFace';
+export * from "./Faces/Face";

package/src/components/styles/Anim.d.ts

@@ -0,0 +1,11 @@
+export interface AnimStylesProps {
+   duration?: number | string;
+   iterationCount?: number | string;
+   animName?: string;
+   fillMode?: string;
+   children?: any;
+   borderColor?: string;
+   animLow?: number | undefined;
+   animHi?: number | undefined;
+   animDirection?: string | undefined;
+}

package/src/components/styles/AnimWrap.tsx

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import React from "react";
+import { AnimStylesProps } from "./Anim";
+import { allAnims } from "./Anims";
+
+export const AnimWrap = (props: AnimStylesProps) => {
+   const {
+      duration = 0,
+      iterationCount = 0,
+      animName = "noAnim",
+      fillMode = "forward",
+      children = "",
+      borderColor = "",
+      animLow = 0,
+      animHi = 0,
+      animDirection = "normal",
+   } = props;
+
+   const {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      noAnim,
+   } = allAnims({ animLow, animHi });
+   let theAnim: any = "noAnim";
+   // need to iterate through all animation posibilities and not use eval() to satisfy TS
+   if (animName === "X360") theAnim = X360;
+   else if (animName === "Y360") theAnim = Y360;
+   else if (animName === "fadeInkf") theAnim = fadeInkf;
+   else if (animName === "wobX") theAnim = wobX;
+   else if (animName === "wobY") theAnim = wobY;
+   else if (animName === "fwdx018") theAnim = fwdx018;
+   else if (animName === "fwdx1836") theAnim = fwdx1836;
+   else if (animName === "fwdx09") theAnim = fwdx09;
+   else if (animName === "fwdx918") theAnim = fwdx918;
+   else if (animName === "fwdx1827") theAnim = fwdx1827;
+   else if (animName === "fwdx2736") theAnim = fwdx2736;
+   else if (animName === "fwdy018") theAnim = fwdy018;
+   else if (animName === "fwdy1836") theAnim = fwdy1836;
+   else if (animName === "fwdy09") theAnim = fwdy09;
+   else if (animName === "fwdy918") theAnim = fwdy918;
+   else if (animName === "fwdy1827") theAnim = fwdy1827;
+   else if (animName === "fwdy2736") theAnim = fwdy2736;
+   else theAnim = noAnim;
+
+   const AnimWrapDiv: any = styled.div`
+      width: 100%;
+      height: 100%;
+      position: relative;
+      border: 0px dotted ${borderColor};
+      transform-style: preserve-3d;
+      -webkit-animation-duration: ${duration}s;
+      animation-duration: ${duration}s;
+      -webkit-animation-iteration-count: ${iterationCount};
+      animation-iteration-count: ${iterationCount};
+      -webkit-animation-name: ${theAnim};
+      animation-name: ${theAnim};
+      -webkit-animation-fill-mode: ${fillMode};
+      animation-fill-mode: ${fillMode};
+      animation-direction: ${animDirection};
+      -webkit-animation-direction: ${animDirection};
+   `;
+
+   return <AnimWrapDiv>{children}</AnimWrapDiv>;
+};

package/src/components/styles/Anims.ts

@@ -0,0 +1,205 @@
+import { keyframes } from "styled-components";
+
+interface AllAnimsProps {
+   animLow?: number;
+   animHi?: number;
+}
+
+export const allAnims = (props: AllAnimsProps) => {
+   const { animLow = 0, animHi = 0 } = props;
+
+   const X360 = keyframes`
+   from {
+      -webkit-transform: rotateX(360deg);
+      transform: rotateX(360deg);
+   }
+   to {
+      -webkit-transform: rotateX(0deg);
+      transform: rotateX(0deg);
+   }
+}`;
+
+   //////// Y360
+   const Y360 = keyframes`
+    from {
+        -webkit-transform: rotateY(360deg);
+        transform: rotateY(360deg);
+    }
+    to {
+        -webkit-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+    }`;
+
+   const fadeInkf = keyframes`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }`;
+
+   const wobY = keyframes`
+    0% {
+        -webkit-transform: rotateY(${animLow}deg);
+        transform: rotateY(${animLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateY(${animHi}deg);
+        transform: rotateY(${animHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateY(${animLow}deg);
+        transform: rotateY(${animLow}deg);
+    }`;
+
+   const wobX = keyframes`
+    0% {
+        -webkit-transform: rotateX(${animLow}deg);
+        transform: rotateX(${animLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateX(${animHi}deg);
+        transform: rotateX(${animHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateX(${animLow}deg);
+        transform: rotateX(${animLow}deg);
+    }`;
+   /* ============================== x-axis 0-180 >180 - 360 */
+   const fwdx018 = keyframes`
+    from {
+        -webkit-transform: rotateX(360deg);
+        transform: rotateX(360deg);
+    }
+    to {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }`;
+   const fwdx1836 = keyframes`
+    from {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }
+    to {
+        -webkit-transform: rotateX(0deg);
+        transform: rotateX(0deg);
+    }`;
+   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdx09 = keyframes`
+    from {
+       -webkit-transform: rotateX(360deg);
+       transform: rotateX(360deg);
+    }
+    to {
+       -webkit-transform: rotateX(90deg);
+       transform: rotateX(90deg);
+    }`;
+   const fwdx918 = keyframes`
+    from {
+        -webkit-transform: rotateX(-90deg);
+        transform: rotateX(-90deg);
+    }
+    to {
+        -webkit-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+    }`;
+   const fwdx1827 = keyframes`
+    from {
+        -webkit-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+    }
+    to {
+        -webkit-transform: rotateX(-270deg);
+        transform: rotateX(-270deg);
+    }`;
+   const fwdx2736 = keyframes`
+    from {
+        -webkit-transform: rotateX(-270deg);
+        transform: rotateX(-270deg);
+    }
+    to {
+        -webkit-transform: rotateX(-360deg);
+        transform: rotateX(-360deg);
+    }`;
+
+   /* ============================== y-axis 0-180 >180 - 360 */
+   const fwdy018 = keyframes`
+   from {
+       -webkit-transform: rotateY(360deg);
+       transform: rotateY(360deg);
+   }
+   to {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }`;
+   const fwdy1836 = keyframes`
+   from {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }
+   to {
+       -webkit-transform: rotateY(0deg);
+       transform: rotateY(0deg);
+   }`;
+
+   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdy09 = keyframes`
+   from {
+      -webkit-transform: rotateY(360deg);
+      transform: rotateY(360deg);
+   }
+   to {
+      -webkit-transform: rotateY(90deg);
+      transform: rotateY(90deg);
+   }`;
+   const fwdy918 = keyframes`
+   from {
+       -webkit-transform: rotateY(-90deg);
+       transform: rotateY(-90deg);
+   }
+   to {
+       -webkit-transform: rotateY(-180deg);
+       transform: rotateY(-180deg);
+   }`;
+   const fwdy1827 = keyframes`
+   from {
+       -webkit-transform: rotateY(-180deg);
+       transform: rotateY(-180deg);
+   }
+   to {
+       -webkit-transform: rotateY(-270deg);
+       transform: rotateY(-270deg);
+   }`;
+   const fwdy2736 = keyframes`
+   from {
+       -webkit-transform: rotateY(-270deg);
+       transform: rotateY(-270deg);
+   }
+   to {
+       -webkit-transform: rotateY(-360deg);
+       transform: rotateY(-360deg);
+   }`;
+
+   const noAnim = keyframes``;
+
+   return {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      noAnim,
+   };
+};