gesturx 0.0.0 → 1.0.0

package/src/demo/App.tsx

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

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

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

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

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

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

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

package/tsconfig.json

@@ -2,16 +2,18 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "module": "ESNext",
     "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,
@@ -19,5 +21,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

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

package/vite.config.ts

@@ -1,33 +1,38 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import { resolve } from "path";
-import { name } from "../prose-reader/packages/enhancer-gesture/package.json";
-import externals from "rollup-plugin-node-externals";
+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"
 
-const libName = name.replace(`@`, ``).replace(`/`, `-`);
+export default defineConfig(({ mode }) => {
+  const libMode = process.env.LIB_MODE === "true"
 
-export default defineConfig(({ mode }) => ({
-  build: {
-    minify: false,
-    lib: {
-      entry: resolve(__dirname, `src/index.ts`),
-      name: libName,
-      fileName: "index",
-    },
-    emptyOutDir: mode !== `development`,
-    sourcemap: true,
-  },
-  plugins: [
-    {
-      enforce: `pre`,
-      ...externals({
-        peerDeps: true,
-        deps: true,
-        devDeps: true,
+  return {
+    build: {
+      minify: false,
+      ...(libMode && {
+        lib: {
+          entry: resolve(__dirname, `src/core/index.ts`),
+          name: "gesturx",
+          fileName: "index",
+        },
       }),
+      emptyOutDir: mode !== `development`,
+      sourcemap: true,
     },
-    dts({
-      entryRoot: "src",
-    }),
-  ],
-}));
+    plugins: [
+      react(),
+      {
+        enforce: `pre`,
+        ...externals({
+          peerDeps: libMode,
+          deps: libMode,
+          devDeps: libMode,
+        }),
+      },
+      dts({
+        entryRoot: "src",
+      }),
+    ],
+  }
+})

package/vitest.config.ts

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

package/src/core/tapRecognizer.ts

@@ -1,143 +0,0 @@
-import {
-  Observable,
-  buffer,
-  debounceTime,
-  exhaustMap,
-  filter,
-  first,
-  ignoreElements,
-  map,
-  merge,
-  of,
-  share,
-  shareReplay,
-  switchMap,
-  takeUntil,
-  timer,
-  withLatestFrom,
-} from "rxjs";
-import {
-  fromFailWith,
-  fromPointerDown,
-  getPointerEvents,
-  hasAtLeastOneItem,
-  isOUtsidePosThreshold,
-  trackActivePointers,
-} from "./utils";
-import { GestureEvent } from "./types";
-
-export type TapEvent = GestureEvent & { type: "tap"; taps: number };
-
-type Options = {
-  // Maximum time in ms between multiple taps.
-  multiTapThreshold?: number;
-  // Maximum press time in ms.
-  maximumPressTime?: number;
-  maxTaps?: number;
-  posThreshold?: number;
-  failWith?: { start$: Observable<unknown> }[];
-};
-
-const mapToTapEvent = (
-  stream: Observable<[PointerEvent, ...PointerEvent[]]>,
-): Observable<TapEvent> =>
-  stream.pipe(
-    map((events) => ({
-      type: "tap",
-      srcEvent: events[0],
-      taps: events.length,
-    })),
-  );
-
-export const createTapRecognizer = ({
-  multiTapThreshold = 200,
-  maximumPressTime = 250,
-  maxTaps = 1,
-  posThreshold = 5,
-  failWith,
-}: Options = {}) => {
-  return ({
-    container,
-    afterEventReceived = (event) => event,
-  }: {
-    container: HTMLElement;
-    afterEventReceived?: (event: PointerEvent) => PointerEvent;
-  }) => {
-    const { pointerUp$, pointerLeave$, pointerCancel$, pointerMove$ } =
-      getPointerEvents({
-        container,
-        afterEventReceived,
-      });
-
-    const pointerDown$ = fromPointerDown({ container, afterEventReceived });
-    const activePointers$ = trackActivePointers({ container }).pipe(
-      shareReplay(1),
-    );
-    const hasMoreThanOneActivePointer$ = activePointers$.pipe(
-      filter((pointers) => pointers.length > 1),
-    );
-
-    const onlyOnePointer = <T>(stream: Observable<T>) =>
-      stream.pipe(
-        withLatestFrom(activePointers$),
-        filter(([, pointers]) => pointers.length === 1),
-        map(([pointer]) => pointer),
-      );
-
-    const bufferPointerDowns = (stream: Observable<PointerEvent>) =>
-      stream.pipe(
-        buffer(pointerUp$.pipe(debounceTime(multiTapThreshold))),
-        first(),
-      );
-
-    const failWith$ = fromFailWith(failWith);
-
-    const tap$ = merge(
-      pointerDown$,
-      activePointers$.pipe(ignoreElements()),
-    ).pipe(
-      onlyOnePointer,
-      exhaustMap((initialPointerEvent) => {
-        const pointerDowns$ = merge(of(initialPointerEvent), pointerDown$);
-        const subsequentPointerEvents$ = merge(
-          pointerUp$,
-          pointerLeave$,
-          pointerCancel$,
-          pointerMove$,
-        );
-        const pointerDownsBuffered$ = pointerDowns$.pipe(bufferPointerDowns);
-        const subsequentPointersOutOfPositionThreshold$ =
-          subsequentPointerEvents$.pipe(
-            filter((event) =>
-              isOUtsidePosThreshold(initialPointerEvent, event, posThreshold),
-            ),
-            first(),
-          );
-        const waitedTooLong$ = activePointers$.pipe(
-          switchMap(() => timer(maximumPressTime)),
-        );
-
-        const takeUntil$ = merge(
-          failWith$,
-          pointerCancel$,
-          pointerLeave$,
-          hasMoreThanOneActivePointer$,
-          subsequentPointersOutOfPositionThreshold$,
-          waitedTooLong$,
-        );
-
-        const tap$ = pointerDownsBuffered$.pipe(
-          filter(hasAtLeastOneItem),
-          filter((events) => events.length <= maxTaps),
-          mapToTapEvent,
-          takeUntil(takeUntil$),
-        );
-
-        return tap$;
-      }),
-      share(),
-    );
-
-    return { events$: tap$ };
-  };
-};

package/src/core/types.ts

@@ -1,3 +0,0 @@
-export type GestureEvent = {
-  srcEvent: PointerEvent;
-};