anim-3d-obj 1.1.19 → 1.1.22

package/README.md

@@ -1,154 +1,154 @@
-# React Typescript Cuboid Builder
-
-This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
-The program does the leg work with regard to calculating translationZ depth and config on the fly.
-
--   [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
--   [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
-
-## Examples
-
--   [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
--   [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)
--   [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
--   [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
--   [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
-
-## Config
-
-Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
-
-```typescript
-const anim1Specs: object = {
-    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: 'forward', // node forward backward both
-    iterationCount: 'infinite', // number or infinte
-    name: 'Y360', // ** ANIMATIONS
-    timing: 'ease-in-out' // linear ease ease-in-out
-};
-```
-
-`** ANIMATIONS`
-
--   X360: rotate 360 degrees on the x-axis
--   Y360: rotate 360 degrees on the y-axis
--   fadeInkf: fade object in from 0 to 1 Opacity
--   wobY: wobble on y-axis (degreesHi <-> degreesLow)
--   wobX: wobble on x-axis (degreesHi <-> degreesLow)
--   fwdx018: spin object on x-axis from 0 degrees to 180 degrees
--   fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
--   fwdx09: spin object on x-axis from 0 degrees to 90 degrees
--   fwdx918: spin object on x-axis from 90 degrees to 180 degrees
--   fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
--   fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
--   fwdy018: spin object on y-axis from 0 degrees to 180 degrees
--   fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
--   fwdy09: spin object on y-axis from 0 degrees to 90 degrees
--   fwdy918: spin object on y-axis from 90 degrees to 180 degrees
--   fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
--   fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
--   floatX: float object so is not stationary
--   floatShadow: float object + add shadow
--   pulseSM: pulse object Small
--   pulseMD: pulse object Medium
--   pulseLG: pulse object Large
--   noAnim: no animation place holder
-
-<>
-
-GLOBAL CONFIG
-
-```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: ' '
-};
-```
-
-<>
-
-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: " ",
-      },
-      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;
-         `,
-      },
-```
-
-## Render
-
-and
-
-```typescript
-<Cuboid
-    width={250}
-    height={300}
-    depth={250}
-    perspective={800}
-    perspectiveOrigin="50% 50%"
-    zIndex={10}
-    anim1Specs={anim1Specs}
-    anim2Specs={anim2Specs}
-    custom={custom}
-    faces={faceprops}
-    global={global}
-/>
-```
-
-will produce the following
-
-![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
-
-## Authors
-
--   [@mdnelles](https://github.com/mdnelles)
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
+# React Typescript Cuboid Builder
+
+This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
+The program does the leg work with regard to calculating translationZ depth and config on the fly.
+
+-  [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
+-  [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
+
+## Examples
+
+-  [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
+-  [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)
+-  [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
+-  [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
+-  [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
+
+## Config
+
+Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
+
+```typescript
+const anim1Specs: object = {
+   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: "forward", // node forward backward both
+   iterationCount: "infinite", // number or infinte
+   name: "Y360", // ** ANIMATIONS
+   timing: "ease-in-out", // linear ease ease-in-out
+};
+```
+
+`** ANIMATIONS`
+
+-  X360: rotate 360 degrees on the x-axis
+-  Y360: rotate 360 degrees on the y-axis
+-  fadeInkf: fade object in from 0 to 1 Opacity
+-  wobY: wobble on y-axis (degreesHi <-> degreesLow)
+-  wobX: wobble on x-axis (degreesHi <-> degreesLow)
+-  fwdx018: spin object on x-axis from 0 degrees to 180 degrees
+-  fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
+-  fwdx09: spin object on x-axis from 0 degrees to 90 degrees
+-  fwdx918: spin object on x-axis from 90 degrees to 180 degrees
+-  fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
+-  fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
+-  fwdy018: spin object on y-axis from 0 degrees to 180 degrees
+-  fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
+-  fwdy09: spin object on y-axis from 0 degrees to 90 degrees
+-  fwdy918: spin object on y-axis from 90 degrees to 180 degrees
+-  fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
+-  fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
+-  floatX: float object so is not stationary
+-  floatShadow: float object + add shadow
+-  pulseSM: pulse object Small
+-  pulseMD: pulse object Medium
+-  pulseLG: pulse object Large
+-  noAnim: no animation place holder
+
+<>
+
+GLOBAL CONFIG
+
+```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: " ",
+};
+```
+
+<>
+
+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: " ",
+      },
+      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;
+         `,
+      },
+```
+
+## Render
+
+and
+
+```typescript
+<Cuboid
+   width={250}
+   height={300}
+   depth={250}
+   perspective={800}
+   perspectiveOrigin='50% 50%'
+   zIndex={10}
+   anim1Specs={anim1Specs}
+   anim2Specs={anim2Specs}
+   custom={custom}
+   faces={faceprops}
+   global={global}
+/>
+```
+
+will produce the following
+
+![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
+
+## Authors
+
+-  [@mdnelles](https://github.com/mdnelles)
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

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/dist/components/Card.tsx

@@ -0,0 +1,56 @@
+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>
+   );
+};

package/dist/components/Cuboid.tsx

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

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

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

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

@@ -0,0 +1,16 @@
+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;
+}