anim-3d-obj 1.1.16 → 1.1.18

package/dist/components/styles/Anims.ts

@@ -1,290 +0,0 @@
-import { keyframes } from 'styled-components'
-
-interface AllAnimsProps {
-  degreesLow?: number
-  degreesHi?: number
-}
-
-export const allAnims = (props: AllAnimsProps) => {
-  const { degreesLow = 0, degreesHi = 0 } = props
-
-  const X360 = keyframes`
-   from {
-      -webkit-transform: rotateX(360deg);
-      transform: rotateX(360deg);
-   }
-   to {
-      -webkit-transform: rotateX(0deg);
-      transform: rotateX(0deg);
-   }
-}`
-
-  //////// Y360
-  const Y360 = keyframes`
-    from {
-        -webkit-transform: rotateY(360deg);
-        transform: rotateY(360deg);
-    }
-    to {
-        -webkit-transform: rotateY(0deg);
-        transform: rotateY(0deg);
-    }`
-
-  const fadeInkf = keyframes`
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }`
-
-  const wobY = keyframes`
-    0% {
-        -webkit-transform: rotateY(${degreesLow}deg);
-        transform: rotateY(${degreesLow}deg);
-    }
-    50% {
-        -webkit-transform: rotateY(${degreesHi}deg);
-        transform: rotateY(${degreesHi}deg);
-    }
-    100% {
-        -webkit-transform: rotateY(${degreesLow}deg);
-        transform: rotateY(${degreesLow}deg);
-    }`
-
-  const wobX = keyframes`
-    0% {
-        -webkit-transform: rotateX(${degreesLow}deg);
-        transform: rotateX(${degreesLow}deg);
-    }
-    50% {
-        -webkit-transform: rotateX(${degreesHi}deg);
-        transform: rotateX(${degreesHi}deg);
-    }
-    100% {
-        -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);
-    }
-    to {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }`
-  const fwdx1836 = keyframes`
-    from {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }
-    to {
-        -webkit-transform: rotateX(0deg);
-        transform: rotateX(0deg);
-    }`
-  /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-  const fwdx09 = keyframes`
-    from {
-       -webkit-transform: rotateX(360deg);
-       transform: rotateX(360deg);
-    }
-    to {
-       -webkit-transform: rotateX(90deg);
-       transform: rotateX(90deg);
-    }`
-  const fwdx918 = keyframes`
-    from {
-        -webkit-transform: rotateX(-90deg);
-        transform: rotateX(-90deg);
-    }
-    to {
-        -webkit-transform: rotateX(-180deg);
-        transform: rotateX(-180deg);
-    }`
-  const fwdx1827 = keyframes`
-    from {
-        -webkit-transform: rotateX(-180deg);
-        transform: rotateX(-180deg);
-    }
-    to {
-        -webkit-transform: rotateX(-270deg);
-        transform: rotateX(-270deg);
-    }`
-  const fwdx2736 = keyframes`
-    from {
-        -webkit-transform: rotateX(-270deg);
-        transform: rotateX(-270deg);
-    }
-    to {
-        -webkit-transform: rotateX(-360deg);
-        transform: rotateX(-360deg);
-    }`
-
-  /* ============================== y-axis 0-180 >180 - 360 */
-  const fwdy018 = keyframes`
-   from {
-       -webkit-transform: rotateY(360deg);
-       transform: rotateY(360deg);
-   }
-   to {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }`
-  const fwdy1836 = keyframes`
-   from {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }
-   to {
-       -webkit-transform: rotateY(0deg);
-       transform: rotateY(0deg);
-   }`
-
-  /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-  const fwdy09 = keyframes`
-   from {
-      -webkit-transform: rotateY(360deg);
-      transform: rotateY(360deg);
-   }
-   to {
-      -webkit-transform: rotateY(90deg);
-      transform: rotateY(90deg);
-   }`
-  const fwdy918 = keyframes`
-   from {
-       -webkit-transform: rotateY(-90deg);
-       transform: rotateY(-90deg);
-   }
-   to {
-       -webkit-transform: rotateY(-180deg);
-       transform: rotateY(-180deg);
-   }`
-  const fwdy1827 = keyframes`
-   from {
-       -webkit-transform: rotateY(-180deg);
-       transform: rotateY(-180deg);
-   }
-   to {
-       -webkit-transform: rotateY(-270deg);
-       transform: rotateY(-270deg);
-   }`
-  const fwdy2736 = keyframes`
-   from {
-       -webkit-transform: rotateY(-270deg);
-       transform: rotateY(-270deg);
-   }
-   to {
-       -webkit-transform: rotateY(-360deg);
-       transform: rotateY(-360deg);
-   }`
-
-  /* ============================= 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/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,30 +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,9 +0,0 @@
-//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/jestconfig.json

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

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,25 +0,0 @@
-{
-  "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

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

package/src/components/Card.tsx

@@ -1,55 +0,0 @@
-import { AnimWrap } from './styles/AnimWrap'
-import { SceneStyle } from './styles/Scene'
-import { ObjProps } from './Faces/FaceInter'
-import Face from './Faces/Face'
-import { ObjWrapper } from './styles/Global'
-
-export const Card = (props: ObjProps): any => {
-  const {
-    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/src/components/Cuboid.tsx

@@ -1,61 +0,0 @@
-//import React from 'react'
-import { AnimWrap } from './styles/AnimWrap'
-import { SceneStyle } from './styles/Scene'
-import { ObjProps } from './Faces/FaceInter'
-import Face from './Faces/Face'
-import { ObjWrapper } from './styles/Global'
-
-export const Cuboid = (props: ObjProps): any => {
-  const {
-    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/components/Faces/Face.tsx

@@ -1,72 +0,0 @@
-import styled from 'styled-components'
-import { FaceProps } from './FaceInter'
-
-const Face = (props: FaceProps): JSX.Element => {
-  let { height = 10, tranz = 80, width = 100 } = props
-
-  const { depth = 10, faceType, global = {}, custom = false } = props
-
-  let transform
-  const 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/components/Faces/FaceInter.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
-}