anim-3d-obj 1.1.74 → 1.1.225

package/README.md

@@ -4,32 +4,13 @@ This project allows a user to create Cuboids of any size simply by entering a se
 The program does the leg work with regard to calculating translationZ depth and config on the fly.
 
 ## Examples
-
+-  [Obj Skeleton](https://codesandbox.io/s/anim-3d-obj-skeleton-5dlk70)
 -  [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg-tzr2v6)
 -  [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
 -  [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
 -  [Floating Ribbon](https://codesandbox.io/s/cocky-butterfly-ygwkps)
 -  [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
--  [Obj Skeleton](https://codesandbox.io/s/anim-3d-obj-skeleton-5dlk70)
 
-## Config
-
-Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component.
-
-```typescript
-const anim1 = {
-   border: "", // while testing reveal the animation wrapper
-   degreesHi: -45, // degrees if spin
-   degreesLow: 45, // degrees if spin
-   delay: 0, // start delay in seconds
-   direction: "normal", //normal alternating reverse
-   duration: 8, // seconds
-   fillMode: "forwards", // none forwards backwards both
-   iterationCount: "infinite", // number or infinte
-   name: "Y360", // ** ANIMATIONS
-   timing: "ease-in-out", // linear ease ease-in-out
-};
-```
 
 `** ANIMATIONS`
 
@@ -43,7 +24,6 @@ const anim1 = {
 -  `swingDecay`: Swing component with decay: [demo](https://codesandbox.io/s/anim-3d-obj-swingdecay-cku0e1)
 -  `noAnim`: no animation place holder
 
-
 `X-AXIS Animations`
 -  `X360`: rotate 360 degrees on the x-axis: [demo](https://codesandbox.io/s/anim-3d-obj-x360-7kiuhw)
 -  `wobX`: wobble on x-axis (degreesHi <-> degreesLow): [demo](https://codesandbox.io/s/anim-3d-obj-wobx-ldwek7)
@@ -63,68 +43,65 @@ const anim1 = {
 -  `fwdy918`: spin object on y-axis from 90 degrees to 180 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy918-gnym88)
 -  `fwdy1827`: spin object on y-axis from 180 degrees to 270 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy1827-osskgx)
 -  `fwdy2736`: spin object on y-axis from 270 degrees to 360 degrees: [demo](https://codesandbox.io/s/anim-3d-obj-fwdy2736-rnbs2q)
--  
 
 
-<>
+## Config
+### Animations:
 
-GLOBAL CONFIG
+Animations are optional. Either or both of `anim1` or `anim2` can be applied to the component. Animations are applied to 2 wrapping divs respectively.
 
 ```typescript
-// EXAMPLE GLOBAL FACE CONFIG
-// This will be applied to all Faces that do not have their own custom config
-const global: object = {
-   // // face individual styles (over rides global)
-   css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
-         color:white;
-         text-align:center;
-         line-height:10;
-         backface-visibility: visible;
-         font-family: Arial, Helvetica, sans-serif;
-         border-radius:5px;
-         `,
-   body: " ",
+const anim1 = {
+   border: "", // while testing reveal the animation wrapper
+   degreesHi: -45, // degrees if spin
+   degreesLow: 45, // degrees if spin
+   delay: 0, // start delay in seconds
+   direction: "normal", //normal alternating reverse
+   duration: 8, // seconds
+   fillMode: "forwards", // none forwards backwards both
+   iterationCount: "infinite", // number or infinte
+   name: "Y360", // ** ANIMATIONS (above)
+   timing: "ease-in-out", // linear ease ease-in-out
 };
 ```
 
-<>
-
-CUSTOM CONFIG FOR INDIVIDUAL FACES
-
-```typescript
-const custom: object = {
-      // // face individual styles (over rides global)
-      front: {
-         css: ``,
-         body: <Login />,
-      },
-      left: {
-         css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         color:white;
-         text-align: center;
-         line-height:8;`
-         body: " ",
-      },
-      right: {
-         css: ``,
-         body: " ",
+### Faces:
+This is an array of objects containing the face used for a given component
+```javascript
+   export interface FaceType {
+      name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
+      css?: string | undefined;
+      body?: any; // can be JSX Component | string | number
+   }
+
+   const faces: FaceType[] = [
+      {
+         name: "back",
+         body: "BACK",
+         css: `background:rgba(22,22,22,.5)`,
       },
-      back: {
-         css: ``,
-         body: <Logout />,
-      },
-      bottom: {
-         css: `
-         background-color:rgba(141,191,249,1);
-         -webkit-box-shadow: 0px 0px 23px 18px #858585;
-         box-shadow: 0px 0px 23px 18px #858585;
-         `,
+      {
+         name: "right",
+         body: "RIGHT",
+         css: `background:rgba(220,220,220,.5); 
+               border:1px solid #ddd`,
       },
+   ];
+```
+
+### Global (face):
+If the name parameter in the faces array is indicated (ie: "front") but `css` and / or `body` are not.  The `global default`(below) will satisfy those parameters.
+```javascript
+   interface GlobalType {
+      css?: string;
+      body?: string;
+   }
+   const global: GlobalType = {
+      body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
+      css: 'color:red'
+   };
 ```
-## NPM Location
+
+![all sides](https://github.com/mdnelles/anim-3d-obj-npm-publisher/blob/4a9769a6386a3b5425ede9a04b346d5461051ae0/ang1.png?raw=true)
+
  - https://www.npmjs.com/package/anim-3d-obj

package/babel.config.json

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3.6.5"
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

package/jestconfig.json

@@ -0,0 +1,8 @@
+{
+  "transform": {
+    "^.+\\.(t|j)sx?$": "ts-jest"
+  },
+  "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "testEnvironment": "jsdom"
+}

package/package.json

@@ -1,49 +1,57 @@
-
-
-
-
-
-
-
-
-
-
 {
    "name": "anim-3d-obj",
+   "version": "1.1.225",
+   "private": false,
    "repository": {
       "type": "git",
       "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
    },
-   "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
-    "version": "1.1.74",
-   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
-   "main": "dist/cjs/index.js",
-   "module": "dist/esm/index.js",
-   "files": [
-      "dist"
-   ],
-   "scripts": {
-      "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
-      "build:esm": "tsc",
-      "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
-   },
-   "author": "mdnelles",
-   "license": "MIT",
-   "devDependencies": {
-      "@types/node": "^18.11.9",
-      "@types/react": "^18.0.25",
-      "@types/react-dom": "^18.0.8",
-      "@types/styled-components": "^5.1.26",
+   "homepage": "https://mdnelles.github.io/a3o-playground",
+   "dependencies": {
+      "@reduxjs/toolkit": "^1.9.5",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
-      "typescript": "^4.8.4"
+      "react-scripts": "5.0.1",
+      "styled-components": "^6.0.4"
    },
-   "peerDependencies": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+   "scripts": {
+      "start": "react-scripts start",
+      "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+      "build:ra": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
    },
-   "dependencies": {
-      "styled-components": "^5.3.6"
+   "eslintConfig": {
+      "extends": [
+         "react-app",
+         "react-app/jest"
+      ]
+   },
+   "browserslist": {
+      "production": [
+         ">0.2%",
+         "not dead",
+         "not op_mini all"
+      ],
+      "development": [
+         "last 1 chrome version",
+         "last 1 firefox version",
+         "last 1 safari version"
+      ]
+   },
+   "devDependencies": {
+      "@babel/cli": "^7.22.9",
+      "@babel/core": "^7.22.9",
+      "@babel/preset-env": "^7.22.9",
+      "@testing-library/jest-dom": "^5.17.0",
+      "@testing-library/react": "^14.0.0",
+      "@testing-library/user-event": "^14.4.3",
+      "@types/jest": "^29.5.3",
+      "@types/node": "^20.4.2",
+      "@types/react": "^18.2.15",
+      "@types/react-dom": "^18.2.7",
+      "@types/styled-components": "^5.1.26",
+      "typescript": "^5.1.6"
    },
    "keywords": [
       "React",

package/public/index.html

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

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

package/public/robots.txt

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

package/src/components/Face.tsx

@@ -0,0 +1,95 @@
+import styled from "styled-components";
+import { FaceProps } from "./types";
+
+export default function Face(props: FaceProps): JSX.Element {
+   let display = true;
+   let {
+      depth = 10,
+      global = { css: "", body: "" },
+      height = 10,
+      face,
+      width = 100,
+   } = props;
+
+   let transform;
+   let tranz = +height / 2;
+   const body = face.body ? face.body : global.body;
+
+   ////////////////////////////////////////////////////////////////////////////// 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;
+      transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${
+         tranz * 2
+      }px)  `;
+   } else if (face.name === "top_front") {
+      height = +depth;
+      if (!!depth) tranz = +depth / 2;
+
+      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");
+      display = false;
+   }
+
+   const Specs: any = styled.section`
+      ${face.css || global.css}
+      width: ${width}px;
+      position: absolute;
+      height: ${height}px;
+      ${transform}
+   `;
+
+   return display ? <Specs>{body}</Specs> : <></>;
+}

package/src/components/Obj.tsx

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

package/src/components/index.ts

@@ -0,0 +1,4 @@
+import * as Face from "./Face";
+import * as Obj from "./Obj";
+
+export { Face, Obj };

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

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

package/src/components/styles/AnimWrap.tsx

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+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,
+      swing,
+      swingDecay,
+      noAnim,
+   } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
+
+   let theAnim: string | any = "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: 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};
+      -webkit-animation-play-state: ${AS.animationPlayState};
+      animation-play-state: ${AS.animationPlayState};
+      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>;
+};