anim-3d-obj 1.1.16 → 1.1.18

package/src/components/Ribbon.tsx

@@ -1,57 +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 Ribbon = (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.bottom ? buildFace('bottom') : null}
-            {faces && faces.back ? buildFace('back') : null}
-            {faces && faces.top ? buildFace('topr') : null}
-          </ObjWrapper>
-        </AnimWrap>
-      </AnimWrap>
-    </SceneStyle>
-  )
-}

package/src/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/src/components/styles/AnimWrap.tsx

@@ -1,92 +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 && AS.degreesHi ? AS.degreesHi : 0,
-    degreesLow: AS && AS.degreesLow ? AS.degreesLow : 0,
-  })
-
-  let theAnim: any = 'noAnim'
-  // need to iterate through all animation posibilities and not use eval() to satisfy TS
-  if (AS && AS.name) {
-    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
-
-  let AnimWrapDiv: any = styled.div``
-  if (AS) {
-    AnimWrapDiv = styled.div`
-      width: 100%;
-      height: 100%;
-      position: relative;
-      transform-style: preserve-3d;
-      border: ${AS.border || ''};
-      -webkit-animation-duration: ${AS.duration || 1}s;
-      animation-duration: ${AS.duration || 1}s;
-      -webkit-animation-iteration-count: ${AS.iterationCount || 1};
-      animation-iteration-count: ${AS.iterationCount || 1};
-      -webkit-animation-name: ${theAnim || 'noAnim'};
-      animation-name: ${theAnim || 'noAnim'};
-      -webkit-animation-fill-mode: ${AS.fillMode || 'forwards'};
-      animation-fill-mode: ${AS.fillMode || 'forwards'};
-      animation-direction: ${AS.direction || 'normal'};
-      -webkit-animation-direction: ${AS.direction || 'normal'};
-      -webkit-animation-timing-function: ${AS.timing || 'linear'};
-      animation-timing-function: ${AS.timing || 'linear'};
-      -webkit-animation-delay: ${AS.delay || 0}s;
-      animation-delay: ${AS.delay || 0}s;
-    `
-  }
-
-  return <AnimWrapDiv>{children}</AnimWrapDiv>
-}

package/src/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/src/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/src/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/src/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/tests/common.test.tsx

@@ -1,29 +0,0 @@
-//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,29 +0,0 @@
-{
-   "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"]
-}