gesturx 1.0.0 → 1.1.0

package/src/demo/App.tsx

@@ -1,171 +0,0 @@
-import { useEffect, useState } from "react"
-import { PanRecognizer } from "../core/pan/PanRecognizer"
-import { Box, Stack, Text, useToast } from "@chakra-ui/react"
-import { ArrowForwardIcon } from "@chakra-ui/icons"
-import { DebugBox } from "./DebugBox"
-import { useManager } from "./useManager"
-import { useTap } from "./useTap"
-
-function App() {
-  const toast = useToast()
-  const [container, setContainer] = useState<HTMLElement | undefined>()
-  const { manager } = useManager(container)
-  const { tapDebug } = useTap(manager)
-  const [boxAngle, setBoxAngle] = useState(0)
-  const [boxScale, setBoxScale] = useState(1)
-  const [numberOfFingers, setNumberOfFingers] = useState(0)
-  const [rotation, setRotation] = useState(0)
-  const [scale, setScale] = useState(1)
-  const [distance, setDistance] = useState(0)
-
-  useEffect(() => {
-    const rotateSub = manager.events$.subscribe((e) => {
-      if (e.type === "rotate") {
-        setBoxAngle((state) => state + e.deltaAngle)
-        setRotation(e.angle)
-      }
-
-      if (e.type === "rotateEnd") {
-        setRotation(0)
-      }
-    })
-
-    const pinchSub = manager.events$.subscribe((e) => {
-      if (e.type === "pinchMove") {
-        setBoxScale((value) => value * e.deltaDistanceScale)
-        setScale(e.scale)
-        setDistance(e.distance)
-      }
-
-      if (e.type === "pinchEnd") {
-        setScale(1)
-        setDistance(0)
-      }
-    })
-
-    const swipeSub = manager.events$.subscribe((e) => {
-      if (e.type === "swipe") {
-        toast({
-          title: "Swipe",
-          description: (
-            <Stack>
-              <Text display="flex" gap={4}>
-                Direction:{" "}
-                <ArrowForwardIcon
-                  boxSize={6}
-                  transform={`rotate(${e.angle}deg)`}
-                />{" "}
-              </Text>
-              <Text display="flex" gap={4}>
-                Velocity: X: <b>{e.velocityX.toFixed(2)}</b> / Y:{" "}
-                <b>{e.velocityY.toFixed(2)} </b>
-              </Text>
-            </Stack>
-          ),
-        })
-      }
-    })
-
-    /**
-     * To track active fingers, listen for the fingers$ observable on one of
-     * your pan recognizer which is configured in a way to track all fingers.
-     */
-    const fingerTrackingSub = manager.recognizers
-      .find(
-        (recognizer): recognizer is PanRecognizer =>
-          recognizer instanceof PanRecognizer,
-      )
-      ?.fingers$.subscribe((fingers) => {
-        setNumberOfFingers(fingers)
-      })
-
-    /**
-     * Moving a box on x,y axis.
-     * We track the deltaX/Y values.
-     */
-    let latestBoxPosition = { x: 0, y: 0 }
-    const sub3 = manager.events$.subscribe((event) => {
-      if (
-        event.type === "panMove" ||
-        event.type === "panEnd" ||
-        event.type === "panStart"
-      ) {
-        const boxElement = document.getElementById(`boxContainer`)
-
-        if (boxElement) {
-          const domRect = boxElement.getBoundingClientRect()
-
-          if (event.type === "panStart") {
-            latestBoxPosition.x = domRect.left
-            latestBoxPosition.y = domRect.top
-          }
-
-          boxElement.style.left = `${latestBoxPosition.x + event.deltaX}px`
-          boxElement.style.top = `${latestBoxPosition.y + event.deltaY}px`
-        }
-      }
-    })
-
-    /**
-     * track center.
-     * We use the center value, which indicate the true center
-     * no matter how many fingers
-     */
-    const sub = manager.events$.subscribe((event) => {
-      const boxElement = document.getElementById(`boxCenter`)
-
-      if (boxElement) {
-        boxElement.style.left = `${event.center.x - boxElement.offsetWidth / 2}px`
-        boxElement.style.top = `${event.center.y - boxElement.offsetHeight / 2}px`
-      }
-    })
-
-    return () => {
-      sub.unsubscribe()
-      swipeSub.unsubscribe()
-      fingerTrackingSub?.unsubscribe()
-      sub3.unsubscribe()
-      rotateSub.unsubscribe()
-      pinchSub.unsubscribe()
-    }
-  }, [manager])
-
-  return (
-    <>
-      <Stack position="absolute" right={0} top={0} pr={2} pt={2} zIndex={1}>
-        <DebugBox>fingers: {numberOfFingers}</DebugBox>
-        {tapDebug}
-        <DebugBox>
-          rotation:{" "}
-          <ArrowForwardIcon boxSize={6} transform={`rotate(${rotation}deg)`} />{" "}
-        </DebugBox>
-        <DebugBox>
-          pinch:
-          <Text>
-            {scale.toFixed(1)}% {distance.toFixed(0)}px
-          </Text>
-        </DebugBox>
-      </Stack>
-      <Box
-        id="container"
-        ref={(element) => {
-          if (element) {
-            setContainer(element)
-          }
-        }}
-      >
-        <Box id="boxContainer">
-          <div
-            id="box"
-            style={{
-              transform: `rotate(${boxAngle}deg) scale(${boxScale})`,
-            }}
-          ></div>
-        </Box>
-        <div id="boxCenter"></div>
-      </Box>
-    </>
-  )
-}
-
-export default App

package/src/demo/DebugBox.tsx

@@ -1,10 +0,0 @@
-import { Box } from "@chakra-ui/react"
-import { ReactNode } from "react"
-
-export const DebugBox = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box bgColor="white" p={1} px={2}>
-      {children}
-    </Box>
-  )
-}

package/src/demo/useManager.ts

@@ -1,40 +0,0 @@
-import { useEffect, useState } from "react"
-import {
-  PanRecognizer,
-  SwipeRecognizer,
-  TapRecognizer,
-  createManager,
-} from "../core"
-import { RotateRecognizer } from "../core/rotate/RotateRecognizer"
-import { PinchRecognizer } from "../core/pinch/PinchRecognizer"
-
-export const useManager = (container?: HTMLElement) => {
-  const [manager] = useState(() => {
-    const panRecognizer = new PanRecognizer()
-    const swipeRecognizer = new SwipeRecognizer()
-    const rotateRecognizer = new RotateRecognizer()
-    const pinchRecognizer = new PinchRecognizer()
-    const tapRecognizer = new TapRecognizer({
-      maxTaps: 3,
-      failWith: [panRecognizer],
-    })
-
-    return createManager({
-      recognizers: [
-        tapRecognizer,
-        panRecognizer,
-        swipeRecognizer,
-        rotateRecognizer,
-        pinchRecognizer,
-      ],
-    })
-  })
-
-  useEffect(() => {
-    if (container) {
-      manager.initialize(container)
-    }
-  }, [container, manager])
-
-  return { manager }
-}

package/src/demo/useTap.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from "react"
-import { Manager } from "../core/manager"
-import {
-  FormControl,
-  FormLabel,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  Stack,
-  Text,
-  useToast,
-} from "@chakra-ui/react"
-import { DebugBox } from "./DebugBox"
-import { TapRecognizer } from "../core"
-
-const TapDebug = ({
-  value,
-  onChange,
-}: {
-  value: number
-  onChange: (value: number) => void
-}) => {
-  return (
-    <DebugBox>
-      <Stack>
-        <Text>Tap:</Text>
-        <FormControl>
-          <FormLabel>max taps</FormLabel>
-          <NumberInput
-            defaultValue={value}
-            min={1}
-            max={20}
-            onChange={(valueString) => onChange(parseInt(valueString))}
-            maxWidth={100}
-          >
-            <NumberInputField />
-            <NumberInputStepper>
-              <NumberIncrementStepper />
-              <NumberDecrementStepper />
-            </NumberInputStepper>
-          </NumberInput>
-        </FormControl>
-      </Stack>
-    </DebugBox>
-  )
-}
-
-export const useTap = (manager: Manager) => {
-  const toast = useToast()
-  const [maxTaps, setMaxTaps] = useState(3)
-  const tapRecognizer = manager.recognizers.find(
-    (recognizer) => recognizer instanceof TapRecognizer,
-  )
-
-  useEffect(() => {
-    const clickSub = manager.events$.subscribe((e) => {
-      if (e.type === "tap") {
-        toast({
-          title: "Click",
-          description: (
-            <Stack>
-              <Text display="flex" gap={4}>
-                Taps: <b>{e.taps}</b>
-              </Text>
-            </Stack>
-          ),
-        })
-      }
-    })
-
-    return () => {
-      clickSub.unsubscribe()
-    }
-  }, [manager, toast])
-
-  useEffect(() => {
-    tapRecognizer?.update({ maxTaps })
-  }, [maxTaps, tapRecognizer])
-
-  const tapDebug = (
-    <TapDebug value={maxTaps} onChange={(value) => setMaxTaps(value)} />
-  )
-
-  return { tapDebug }
-}

package/src/index.css

@@ -1,66 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  min-width: 100vw;
-  min-height: 100%;
-}
-
-#root {
-  flex: 1;
-  display: flex;
-}
-
-#container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.container {
-  position: relative;
-}
-
-#boxContainer {
-  height: 150px;
-  width: 150px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border: 1px solid white;
-}
-
-#box {
-  height: 148px;
-  width: 148px;
-  background-color: red;
-}
-
-#boxCenter {
-  height: 10px;
-  width: 10px;
-  background-color: white;
-  position: absolute;
-  left: 0;
-  top: 0;
-}

package/src/main.tsx

@@ -1,14 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import App from "./demo/App.tsx"
-import "./index.css"
-import { ChakraProvider } from "@chakra-ui/react"
-import { theme } from "./theme.ts"
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <ChakraProvider theme={theme}>
-      <App />
-    </ChakraProvider>
-  </React.StrictMode>,
-)

package/src/theme.ts

@@ -1,11 +0,0 @@
-import { extendTheme } from "@chakra-ui/react"
-
-export const theme = extendTheme({
-  styles: {
-    global: {
-        body: {
-            bg: `#242424`
-        }
-    }
-  }
-})

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noUncheckedIndexedAccess": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,38 +0,0 @@
-import { defineConfig } from "vite"
-import dts from "vite-plugin-dts"
-import { resolve } from "path"
-import externals from "rollup-plugin-node-externals"
-import react from "@vitejs/plugin-react"
-
-export default defineConfig(({ mode }) => {
-  const libMode = process.env.LIB_MODE === "true"
-
-  return {
-    build: {
-      minify: false,
-      ...(libMode && {
-        lib: {
-          entry: resolve(__dirname, `src/core/index.ts`),
-          name: "gesturx",
-          fileName: "index",
-        },
-      }),
-      emptyOutDir: mode !== `development`,
-      sourcemap: true,
-    },
-    plugins: [
-      react(),
-      {
-        enforce: `pre`,
-        ...externals({
-          peerDeps: libMode,
-          deps: libMode,
-          devDeps: libMode,
-        }),
-      },
-      dts({
-        entryRoot: "src",
-      }),
-    ],
-  }
-})

package/vitest.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from "vitest/config"
-
-export default defineConfig(() => ({
-  test: {
-    environment: "happy-dom",
-    coverage: {},
-  },
-}))