anim-3d-obj 1.1.13 → 1.1.15

package/src/components/styles/Anims.ts

@@ -1,14 +1,14 @@
-import { keyframes } from "styled-components";
+import { keyframes } from 'styled-components'
 
 interface AllAnimsProps {
-   animLow?: number;
-   animHi?: number;
+  degreesLow?: number
+  degreesHi?: number
 }
 
 export const allAnims = (props: AllAnimsProps) => {
-   const { animLow = 0, animHi = 0 } = props;
+  const { degreesLow = 0, degreesHi = 0 } = props
 
-   const X360 = keyframes`
+  const X360 = keyframes`
    from {
       -webkit-transform: rotateX(360deg);
       transform: rotateX(360deg);
@@ -17,10 +17,10 @@ export const allAnims = (props: AllAnimsProps) => {
       -webkit-transform: rotateX(0deg);
       transform: rotateX(0deg);
    }
-}`;
+}`
 
-   //////// Y360
-   const Y360 = keyframes`
+  //////// Y360
+  const Y360 = keyframes`
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
@@ -28,45 +28,45 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
-    }`;
+    }`
 
-   const fadeInkf = keyframes`
+  const fadeInkf = keyframes`
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
-    }`;
+    }`
 
-   const wobY = keyframes`
+  const wobY = keyframes`
     0% {
-        -webkit-transform: rotateY(${animLow}deg);
-        transform: rotateY(${animLow}deg);
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
     }
     50% {
-        -webkit-transform: rotateY(${animHi}deg);
-        transform: rotateY(${animHi}deg);
+        -webkit-transform: rotateY(${degreesHi}deg);
+        transform: rotateY(${degreesHi}deg);
     }
     100% {
-        -webkit-transform: rotateY(${animLow}deg);
-        transform: rotateY(${animLow}deg);
-    }`;
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
+    }`
 
-   const wobX = keyframes`
+  const wobX = keyframes`
     0% {
-        -webkit-transform: rotateX(${animLow}deg);
-        transform: rotateX(${animLow}deg);
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
     }
     50% {
-        -webkit-transform: rotateX(${animHi}deg);
-        transform: rotateX(${animHi}deg);
+        -webkit-transform: rotateX(${degreesHi}deg);
+        transform: rotateX(${degreesHi}deg);
     }
     100% {
-        -webkit-transform: rotateX(${animLow}deg);
-        transform: rotateX(${animLow}deg);
-    }`;
-   /* ============================== x-axis 0-180 >180 - 360 */
-   const fwdx018 = keyframes`
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
+    }`
+  /* ============================== x-axis 0-180 >180 - 360 */
+  const fwdx018 = keyframes`
     from {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
@@ -74,8 +74,8 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
-    }`;
-   const fwdx1836 = keyframes`
+    }`
+  const fwdx1836 = keyframes`
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -83,9 +83,9 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
-    }`;
-   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-   const fwdx09 = keyframes`
+    }`
+  /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+  const fwdx09 = keyframes`
     from {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
@@ -93,8 +93,8 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
-    }`;
-   const fwdx918 = keyframes`
+    }`
+  const fwdx918 = keyframes`
     from {
         -webkit-transform: rotateX(-90deg);
         transform: rotateX(-90deg);
@@ -102,8 +102,8 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
-    }`;
-   const fwdx1827 = keyframes`
+    }`
+  const fwdx1827 = keyframes`
     from {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
@@ -111,8 +111,8 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
-    }`;
-   const fwdx2736 = keyframes`
+    }`
+  const fwdx2736 = keyframes`
     from {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
@@ -120,10 +120,10 @@ export const allAnims = (props: AllAnimsProps) => {
     to {
         -webkit-transform: rotateX(-360deg);
         transform: rotateX(-360deg);
-    }`;
+    }`
 
-   /* ============================== y-axis 0-180 >180 - 360 */
-   const fwdy018 = keyframes`
+  /* ============================== y-axis 0-180 >180 - 360 */
+  const fwdy018 = keyframes`
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
@@ -131,8 +131,8 @@ export const allAnims = (props: AllAnimsProps) => {
    to {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
-   }`;
-   const fwdy1836 = keyframes`
+   }`
+  const fwdy1836 = keyframes`
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -140,10 +140,10 @@ export const allAnims = (props: AllAnimsProps) => {
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
-   }`;
+   }`
 
-   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-   const fwdy09 = keyframes`
+  /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+  const fwdy09 = keyframes`
    from {
       -webkit-transform: rotateY(360deg);
       transform: rotateY(360deg);
@@ -151,8 +151,8 @@ export const allAnims = (props: AllAnimsProps) => {
    to {
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
-   }`;
-   const fwdy918 = keyframes`
+   }`
+  const fwdy918 = keyframes`
    from {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
@@ -160,8 +160,8 @@ export const allAnims = (props: AllAnimsProps) => {
    to {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
-   }`;
-   const fwdy1827 = keyframes`
+   }`
+  const fwdy1827 = keyframes`
    from {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
@@ -169,8 +169,8 @@ export const allAnims = (props: AllAnimsProps) => {
    to {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
-   }`;
-   const fwdy2736 = keyframes`
+   }`
+  const fwdy2736 = keyframes`
    from {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
@@ -178,28 +178,113 @@ export const allAnims = (props: AllAnimsProps) => {
    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,
-   };
-};
+   }`
+
+  /* ============================= floating */
+  const floatX = keyframes`
+   0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
+   50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
+   100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`
+
+  const floatShadow = keyframes`
+        0% {
+            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }
+        50% {
+            -webkit-box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+                    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+            -webkit-transform: translateY(-20px);
+                -ms-transform: translateY(-20px);
+                    transform: translateY(-20px);
+        }
+        100% {
+            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }`
+
+  const pulseSM = keyframes`
+   0% {
+    -webkit-transform: scale(0.9);
+        -ms-transform: scale(0.9);
+            transform: scale(0.9);
+    }
+    70% {
+        -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+                transform: scale(1);
+    }
+    100% {
+        -webkit-transform: scale(0.9);
+            -ms-transform: scale(0.9);
+                transform: scale(0.9);
+    }`
+
+  const pulseMD = keyframes`
+    0% {
+     -webkit-transform: scale(0.7);
+         -ms-transform: scale(0.7);
+             transform: scale(0.7);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.7);
+             -ms-transform: scale(0.7);
+                 transform: scale(0.7);
+     }`
+
+  const pulseLG = keyframes`
+    0% {
+     -webkit-transform: scale(0.5);
+         -ms-transform: scale(0.5);
+             transform: scale(0.5);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.5);
+             -ms-transform: scale(0.5);
+                 transform: scale(0.5);
+     }`
+
+  const noAnim = keyframes``
+
+  return {
+    X360,
+    Y360,
+    fadeInkf,
+    wobY,
+    wobX,
+    fwdx018,
+    fwdx1836,
+    fwdx09,
+    fwdx918,
+    fwdx1827,
+    fwdx2736,
+    fwdy018,
+    fwdy1836,
+    fwdy09,
+    fwdy918,
+    fwdy1827,
+    fwdy2736,
+    floatX,
+    floatShadow,
+    pulseSM,
+    pulseMD,
+    pulseLG,
+    noAnim,
+  }
+}

package/src/components/styles/Global.ts

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

package/src/components/styles/Scene.tsx

@@ -1,33 +1,30 @@
-import styled from "styled-components";
-import React from "react";
+import styled from 'styled-components'
+//import React from 'react'
 
 interface SceneStyleProps {
-   width?: number | string;
-   height?: number | string;
-   perspectiveOrigin?: string | undefined;
-   zIndex?: number | undefined;
-   children: any;
+  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,
-      perspectiveOrigin = "50% 50%",
-      zIndex = 10,
-      children = {},
-   } = props;
-   console.log("z-index:" + zIndex);
-   const SceneStyleDiv: any = styled.div`
-      width: ${width}px;
-      height: ${height}px;
-      perspective: 600px;
-      perspective-origin: ${perspectiveOrigin};
-   `;
+  const { width = 0, height = 0, perspective = 600, perspectiveOrigin = '50% 50%', zIndex = 10, children = {} } = props
 
-   return (
-      <div style={{ zIndex }}>
-         <SceneStyleDiv>{children}</SceneStyleDiv>
-      </div>
-   );
-};
+  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/index.ts

@@ -0,0 +1,9 @@
+//import MyCounter from './components/App'
+//export { MyCounter }
+
+import Face from './components/Faces/Face'
+import { Cuboid } from './components/Cuboid'
+import { Ribbon } from './components/Ribbon'
+import { Card } from './components/Card'
+
+export { Face, Cuboid, Ribbon, Card }

package/tests/common.test.tsx

@@ -0,0 +1,29 @@
+//import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import 'jest-canvas-mock'
+
+import { Face, Cuboid, Ribbon, Card } from '../src'
+
+describe('Common render', () => {
+  it('renders without crashing', () => {
+    render(
+      <div>
+        <Cuboid />
+        <Face />
+        <Ribbon />
+        <Card />
+      </div>,
+    )
+  })
+})
+
+/*
+import { MyCounter } from '../src'
+
+describe('Common render', () => {
+  it('renders without crashing', () => {
+    render(<MyCounter />)
+  })
+})
+*/

package/tsconfig.json

@@ -1,26 +1,29 @@
 {
-  "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"
-  ]
+   "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",
+      "importHelpers": true,
+      "declaration": true,
+      "sourceMap": true,
+      "rootDir": "./src",
+      "outDir": "./dist/esm",
+      "noImplicitReturns": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true
+   },
+   "include": ["src"],
+   "exclude": ["dist", "node_modules"]
 }