anim-3d-obj 1.1.22 → 1.1.23

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React Redux App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/manifest.json

@@ -1,15 +0,0 @@
-{
-   "short_name": "React App",
-   "name": "Create React App Sample",
-   "icons": [
-      {
-         "src": "favicon.ico",
-         "sizes": "64x64 32x32 24x24 16x16",
-         "type": "image/x-icon"
-      }
-   ],
-   "start_url": ".",
-   "display": "standalone",
-   "theme_color": "#000000",
-   "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.css

@@ -1,11 +0,0 @@
-/*
-* Prefixed by https://autoprefixer.github.io
-* PostCSS: v8.4.12,
-* Autoprefixer: v10.4.4
-* Browsers: last 4 version
-*/
-
-body {
-   height: 100%;
-   background-color: "#999";
-}

package/src/App.test.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,115 +0,0 @@
-import { Cuboid } from "./lib/components/Cuboid";
-import { Ribbon } from "./lib/components/Ribbon";
-import { AnimSpecsProps } from "./lib/components/styles/Anim";
-//import { Cuboid,Card } from "anim-3d-objs";
-
-function App() {
-   const faceprops = {
-      front: true,
-      back: true,
-      left: true,
-      right: true,
-      top: true,
-      bottom: true,
-   };
-
-   const global: object = {
-      // // face individual styles (over rides global)
-      css: `
-         border: 1px solid #900;
-         background-color: red;
-         color:white;
-         opacity: 0.7;
-         backface-visibility: visible;
-         font-family: Arial, Helvetica, sans-serif;
-         `,
-      body: " ",
-   };
-   const anim1Specs: object = {
-      border: "wobX",
-      degreesHi: -45, // degrees if spin
-      degreesLow: 45, // degrees if spin
-      delay: 0,
-      direction: "normal", //normal altenating reverse
-      duration: 8,
-      fillMode: "forward", // node forward backward both
-      iterationCount: "infinite",
-      name: "Y360",
-      timing: "ease-in-out", // linear ease ease-in-out
-   };
-   const anim2Specs: object = {
-      border: "",
-      degreesHi: 0, // degrees if spin
-      degreesLow: 180, // degrees if spin
-      delay: 2,
-      direction: "normal", //normal altenating reverse
-      duration: 8,
-      fillMode: "forward", // node forward backward both
-      iterationCount: "infinite",
-      name: "Y360",
-      timing: "ease-in-out", // linear ease ease-in-out
-   };
-
-   const custom: object = {
-      // face individual styles (over rides global)
-      bottom: {
-         css: `
-         background-color: #F00;
-         opacity: 0.7;
-         backface-visibility: visible;
-         font-size:30px;
-         text-align:center;
-         line-height:8;
-         color:white;
-         `,
-         body: " ",
-      },
-      back: {
-         css: `
-         background-color: #900;
-         opacity: 0.7;
-         backface-visibility: visible;
-         color:white;         
-         font-size:30px;
-         text-align:center;
-         line-height:8;
-         `,
-         body: "BACK",
-      },
-      topr: {
-         css: `
-         background-color: #500;
-         opacity: 0.7;
-         backface-visibility: visible;
-         font-size:30px;
-         text-align:center;
-         line-height:8;
-         color:white;
-            `,
-         body: "TOPR",
-      },
-   };
-
-   return (
-      <div style={{ padding: 150 }}>
-         <Cuboid
-            width={300}
-            height={400}
-            depth={600}
-            perspectiveOrigin='50% 50%'
-            perspective={900}
-            zIndex={10}
-            custom={custom}
-            anim1Specs={anim1Specs}
-            anim2Specs={anim2Specs}
-            faces={faceprops}
-            global={global}
-         >
-            {}
-         </Cuboid>
-         <div style={{ padding: 5 }} />
-      </div>
-   );
-}
-
-export default App;

package/src/index.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { Provider } from "react-redux";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-const container = document.getElementById("root")!;
-const root = createRoot(container);
-
-root.render(
-   <React.StrictMode>
-      <App />
-   </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/lib/components/Card.tsx

@@ -1,56 +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 Card = (props: ObjProps): any => {
-   let {
-      anim1Specs,
-      anim2Specs,
-      width = 5,
-      height = 5,
-      faces,
-      global = {},
-      custom = {},
-      tranz = (+height / 2) | 0,
-      perspective,
-      perspectiveOrigin,
-      zIndex,
-   } = props;
-
-   const buildFace = (faceType: any): any => {
-      return (
-         <Face
-            width={width}
-            height={height}
-            depth={0.1}
-            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.back ? buildFace("back") : null}
-               </ObjWrapper>
-            </AnimWrap>
-         </AnimWrap>
-      </SceneStyle>
-   );
-};