anim-3d-obj 1.1.22 → 1.1.23

package/src/lib/components/Cuboid.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { AnimWrap } from "./styles/AnimWrap";
-import { SceneStyle } from "./styles/Scene";
-import { ObjProps } from "./Face/face";
-import Face from "./Face";
-import { ObjWrapper } from "./styles/Global";
-
-export const Cuboid = (props: ObjProps): any => {
-   let {
-      anim1Specs,
-      anim2Specs,
-      width = 5,
-      height = 5,
-      depth = 5,
-      faces,
-      global = {},
-      custom = {},
-      tranz = (+height / 2) | 0,
-      perspective,
-      perspectiveOrigin,
-      zIndex,
-   } = props;
-
-   const buildFace = (faceType: any): any => {
-      return (
-         <Face
-            width={width}
-            height={height}
-            depth={depth}
-            faceType={faceType}
-            id={faceType}
-            tranz={tranz}
-            global={global}
-            custom={custom}
-         />
-      );
-   };
-
-   return (
-      <SceneStyle
-         width={width}
-         height={height}
-         perspective={perspective}
-         perspectiveOrigin={perspectiveOrigin}
-         zIndex={zIndex}
-      >
-         <AnimWrap animSpecs={anim1Specs}>
-            <AnimWrap animSpecs={anim2Specs}>
-               <ObjWrapper>
-                  {!!faces && !!faces.front ? buildFace("front") : null}
-                  {!!faces && !!faces.right ? buildFace("right") : null}
-                  {!!faces && !!faces.back ? buildFace("back") : null}
-                  {!!faces && !!faces.left ? buildFace("left") : null}
-                  {!!faces && !!faces.top ? buildFace("top") : null}
-                  {!!faces && !!faces.bottom ? buildFace("bottom") : null}
-               </ObjWrapper>
-            </AnimWrap>
-         </AnimWrap>
-      </SceneStyle>
-   );
-};

package/src/lib/components/Face/face.d.ts

@@ -1,39 +0,0 @@
-export interface FaceProps {
-   children?: any;
-   depth?: number | any;
-   faceType?: any;
-   custom?: any;
-   global?: any;
-   height?: number | string;
-   id?: string | number | boolean;
-   styles?: object | any;
-   tranz: any;
-   width?: number | string;
-}
-
-export interface ObjProps {
-   anim1Specs?: object | undefined;
-   anim2Specs?: object | undefined;
-   children: any;
-   depth?: number;
-   global?: { 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;
-   custom?: object | string | undefined;
-   perspective?: string | number | undefined;
-   perspectiveOrigin?: string | undefined;
-   tranz?: number | undefined;
-   txt?: string | any;
-   width?: number;
-   zIndex?: number | undefined;
-}

package/src/lib/components/Face/index.tsx

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import React from "react";
-import { FaceProps } from "./face";
-
-const Face = (props: FaceProps): JSX.Element => {
-   let {
-      depth = 10,
-      faceType,
-      global = {},
-      height = 10,
-      custom = false,
-      tranz = 80,
-      width = 100,
-   } = props;
-
-   let transform;
-   let styles =
-      !!custom[faceType] && !!custom[faceType].css
-         ? custom[faceType].css
-         : global.css;
-   const body =
-      !!custom[faceType] && !!custom[faceType].body
-         ? custom[faceType].body
-         : global.body;
-   if (faceType === "bottom") {
-      tranz = +height - +depth / 2;
-      height = +depth;
-      transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-      //styles = !!custom["top"] ? custom : global;
-   } else if (faceType === "top") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
-   } else if (faceType === "front") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
-   } else if (faceType === "back") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
-   } 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);`;
-      // topr is to of Ribbon which points back
-   } else if (faceType === "topr") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-      let offset = depth / 2;
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px );  `;
-   } else {
-      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);`;
-   }
-
-   const BackFlip: any = styled.section``;
-
-   const Specs: any = styled.section`
-      ${styles}
-      width: ${width}px;
-      position: absolute;
-      height: ${height}px;
-      ${transform};
-   `;
-
-   return <Specs>{body}</Specs>;
-};
-
-export default Face;

package/src/lib/components/Ribbon.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { AnimWrap } from "./styles/AnimWrap";
-import { SceneStyle } from "./styles/Scene";
-import { ObjProps } from "./Face/face";
-import Face from "./Face";
-import { ObjWrapper } from "./styles/Global";
-
-export const Ribbon = (props: ObjProps): any => {
-   let {
-      anim1Specs,
-      anim2Specs,
-      width = 5,
-      height = 5,
-      depth = 5,
-      faces,
-      global = {},
-      custom = {},
-      tranz = (+height / 2) | 0,
-      perspective,
-      perspectiveOrigin,
-      zIndex,
-   } = props;
-
-   const buildFace = (faceType: any): any => {
-      return (
-         <Face
-            width={width}
-            height={height}
-            depth={depth}
-            faceType={faceType}
-            id={faceType}
-            tranz={tranz}
-            global={global}
-            custom={custom}
-         />
-      );
-   };
-
-   return (
-      <SceneStyle
-         width={width}
-         height={height}
-         perspective={perspective}
-         perspectiveOrigin={perspectiveOrigin}
-         zIndex={zIndex}
-      >
-         <AnimWrap animSpecs={anim1Specs}>
-            <AnimWrap animSpecs={anim2Specs}>
-               <ObjWrapper>
-                  {!!faces && !!faces.bottom ? buildFace("bottom") : null}
-                  {!!faces && !!faces.back ? buildFace("back") : null}
-                  {!!faces && !!faces.top ? buildFace("topr") : null}
-               </ObjWrapper>
-            </AnimWrap>
-         </AnimWrap>
-      </SceneStyle>
-   );
-};

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

@@ -1,16 +0,0 @@
-export interface AnimStylesProps {
-   children?: any;
-   animSpecs?: any;
-}
-export interface AnimSpecsProps {
-   border?: string | undefined;
-   degreesHi?: number | undefined;
-   degreesLow?: number | undefined;
-   delay: any;
-   direction?: string | undefined;
-   duration?: number | string | undefined;
-   fillMode?: string | undefined;
-   iterationCount?: number | string | undefined;
-   name?: string | undefined;
-   timing?: string | undefined;
-}

package/src/lib/components/styles/AnimWrap.tsx

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import React from "react";
-import { AnimStylesProps } from "./Anim";
-import { allAnims } from "./Anims";
-
-export const AnimWrap = (props: AnimStylesProps) => {
-   const { children, animSpecs } = props;
-   const AS: any = animSpecs;
-
-   const {
-      X360,
-      Y360,
-      fadeInkf,
-      wobY,
-      wobX,
-      fwdx018,
-      fwdx1836,
-      fwdx09,
-      fwdx918,
-      fwdx1827,
-      fwdx2736,
-      fwdy018,
-      fwdy1836,
-      fwdy09,
-      fwdy918,
-      fwdy1827,
-      fwdy2736,
-      floatX,
-      floatShadow,
-      pulseSM,
-      pulseMD,
-      pulseLG,
-      noAnim,
-   } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
-
-   let theAnim: any = "noAnim";
-   // need to iterate through all animation posibilities and not use eval() to satisfy TS
-   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 theAnim = noAnim;
-
-   const AnimWrapDiv: any = 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 <AnimWrapDiv>{children}</AnimWrapDiv>;
-};

package/src/lib/components/styles/Global.ts

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-export const ObjWrapper = styled.div`
-   width: 100%;
-   height: 100%;
-   position: relative;
-   transform-style: preserve-3d;
-`;

package/src/lib/components/styles/Scene.tsx

@@ -1,37 +0,0 @@
-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/lib/index.ts

@@ -1,6 +0,0 @@
-import Face from "./components/Face";
-import { Cuboid } from "./components/Cuboid";
-import { Card } from "./components/Card";
-import { Ribbon } from "./components/Ribbon";
-
-export { Face, Cuboid, Card, Ribbon };

package/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}