@deibid/no-hands-react 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren } from 'react';
-import { Point, Rect, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
-export { NHEvent } from '@deibid/no-hands';
+import { Point, Listener, Rect, FilterFn, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
+export { FilterFn, Filters, NHEvent, Point } from '@deibid/no-hands';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface NHEventProps {
@@ -28,6 +28,13 @@ declare function useCamera(): {
     error: Error | null;
 };
 declare function useNHPoint(): Point | null;
+interface UseNHEventNotificationProps {
+    onNHMouseEnter?: Listener<'nh:mouseenter'>;
+    onNHMouseLeave?: Listener<'nh:mouseleave'>;
+    onNHClickGestureBegin?: Listener<'nh:click-gesture-begin'>;
+    onNHClickGestureEnd?: Listener<'nh:click-gesture-end'>;
+}
+declare function useNHEventNotification({ onNHClickGestureBegin, onNHClickGestureEnd, onNHMouseEnter, onNHMouseLeave }: UseNHEventNotificationProps): void;
 declare function useWindowSize(): {
     width: number;
     height: number;
@@ -41,11 +48,14 @@ interface INHContext {
     faceTracker: FaceTracker | null;
     loading: boolean;
     videoStream: MediaStream | null;
+    detectionBounds?: Rect | null;
+    projectionBounds?: Rect | null;
 }
 interface NHProviderOptions {
     faceTrackerOpts?: {
         detectionBounds?: Rect;
         projectionBounds?: Rect;
+        filterFn?: FilterFn;
     };
     eventDispatcherOpts?: CreateEventDispatcherOpts;
 }
@@ -55,14 +65,13 @@ declare function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }:
 declare function useNH(): INHContext;
 
 interface DetectionBoundsDisplayProps {
-    detectionBounds: Rect;
     style?: React.CSSProperties;
 }
-declare function DetectionBoundsDisplay({ detectionBounds, style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element;
+declare function DetectionBoundsDisplay({ style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element | undefined;
 
 interface PointerProps extends React.PropsWithChildren {
     style?: React.CSSProperties;
 }
 declare function Pointer({ children, style }: PointerProps): react_jsx_runtime.JSX.Element;
 
-export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHPoint, useWindowSize };
+export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHEventNotification, useNHPoint, useWindowSize };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren } from 'react';
-import { Point, Rect, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
-export { NHEvent } from '@deibid/no-hands';
+import { Point, Listener, Rect, FilterFn, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
+export { FilterFn, Filters, NHEvent, Point } from '@deibid/no-hands';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface NHEventProps {
@@ -28,6 +28,13 @@ declare function useCamera(): {
     error: Error | null;
 };
 declare function useNHPoint(): Point | null;
+interface UseNHEventNotificationProps {
+    onNHMouseEnter?: Listener<'nh:mouseenter'>;
+    onNHMouseLeave?: Listener<'nh:mouseleave'>;
+    onNHClickGestureBegin?: Listener<'nh:click-gesture-begin'>;
+    onNHClickGestureEnd?: Listener<'nh:click-gesture-end'>;
+}
+declare function useNHEventNotification({ onNHClickGestureBegin, onNHClickGestureEnd, onNHMouseEnter, onNHMouseLeave }: UseNHEventNotificationProps): void;
 declare function useWindowSize(): {
     width: number;
     height: number;
@@ -41,11 +48,14 @@ interface INHContext {
     faceTracker: FaceTracker | null;
     loading: boolean;
     videoStream: MediaStream | null;
+    detectionBounds?: Rect | null;
+    projectionBounds?: Rect | null;
 }
 interface NHProviderOptions {
     faceTrackerOpts?: {
         detectionBounds?: Rect;
         projectionBounds?: Rect;
+        filterFn?: FilterFn;
     };
     eventDispatcherOpts?: CreateEventDispatcherOpts;
 }
@@ -55,14 +65,13 @@ declare function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }:
 declare function useNH(): INHContext;
 
 interface DetectionBoundsDisplayProps {
-    detectionBounds: Rect;
     style?: React.CSSProperties;
 }
-declare function DetectionBoundsDisplay({ detectionBounds, style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element;
+declare function DetectionBoundsDisplay({ style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element | undefined;
 
 interface PointerProps extends React.PropsWithChildren {
     style?: React.CSSProperties;
 }
 declare function Pointer({ children, style }: PointerProps): react_jsx_runtime.JSX.Element;
 
-export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHPoint, useWindowSize };
+export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHEventNotification, useNHPoint, useWindowSize };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DetectionBoundsDisplay: () => DetectionBoundsDisplay,
+  Filters: () => import_no_hands3.Filters,
   NH: () => NH,
   NHEvent: () => import_no_hands3.NHEvent,
   NHProvider: () => NHProvider,
@@ -38,6 +39,7 @@ __export(index_exports, {
   useCamera: () => useCamera,
   useEvents: () => useEvents,
   useNH: () => useNH,
+  useNHEventNotification: () => useNHEventNotification,
   useNHPoint: () => useNHPoint,
   useWindowSize: () => useWindowSize
 });
@@ -59,7 +61,9 @@ var NHContext = (0, import_react.createContext)({
   eventDispatcher: null,
   faceTracker: null,
   loading: false,
-  videoStream: null
+  videoStream: null,
+  detectionBounds: null,
+  projectionBounds: null
 });
 function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
   const [faceTracker, setFaceTracker] = (0, import_react.useState)(null);
@@ -85,7 +89,8 @@ function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
       localFaceTracker = await (0, import_no_hands.createFaceTracker)({
         videoElement,
         detectionBounds: faceTrackerOptsRef.current?.detectionBounds,
-        projectionBounds: faceTrackerOptsRef.current?.projectionBounds
+        projectionBounds: faceTrackerOptsRef.current?.projectionBounds,
+        filterFn: faceTrackerOptsRef.current?.filterFn
       });
       if (!ftActive) {
         localFaceTracker.stop();
@@ -126,9 +131,11 @@ function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
       eventDispatcher,
       faceTracker,
       loading,
-      videoStream: stream
+      videoStream: stream,
+      detectionBounds: faceTrackerOpts?.detectionBounds,
+      projectionBounds: faceTrackerOpts?.projectionBounds
     }),
-    [error, eventDispatcher, faceTracker, loading, stream]
+    [error, eventDispatcher, faceTracker, faceTrackerOpts, loading, stream]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(NHContext.Provider, { value: contextValue, children: [
     children,
@@ -413,9 +420,12 @@ var NH = htmlElementTags.reduce((result, tag) => {
 // src/detection-bounds-display.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function DetectionBoundsDisplay({
-  detectionBounds,
   style
 }) {
+  const { detectionBounds } = useNH();
+  if (!detectionBounds) {
+    return;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -464,7 +474,6 @@ function Pointer({
         ...point === null && { visibility: "hidden" },
         ...point !== null && { left: point.x, top: point.y },
         ...style
-        // backgroundColor: color,
       },
       children: children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultPointerIndicator, {})
     }
@@ -475,8 +484,8 @@ function DefaultPointerIndicator() {
     "div",
     {
       style: {
-        height: 24,
-        width: 24,
+        height: 28,
+        width: 28,
         borderRadius: "50%",
         transform: "translate(-50%, -50%)",
         boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
@@ -491,6 +500,7 @@ var import_no_hands3 = require("@deibid/no-hands");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DetectionBoundsDisplay,
+  Filters,
   NH,
   NHEvent,
   NHProvider,
@@ -498,6 +508,7 @@ var import_no_hands3 = require("@deibid/no-hands");
   useCamera,
   useEvents,
   useNH,
+  useNHEventNotification,
   useNHPoint,
   useWindowSize
 });

package/dist/index.mjs

@@ -24,7 +24,9 @@ var NHContext = createContext({
   eventDispatcher: null,
   faceTracker: null,
   loading: false,
-  videoStream: null
+  videoStream: null,
+  detectionBounds: null,
+  projectionBounds: null
 });
 function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
   const [faceTracker, setFaceTracker] = useState(null);
@@ -50,7 +52,8 @@ function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
       localFaceTracker = await createFaceTracker({
         videoElement,
         detectionBounds: faceTrackerOptsRef.current?.detectionBounds,
-        projectionBounds: faceTrackerOptsRef.current?.projectionBounds
+        projectionBounds: faceTrackerOptsRef.current?.projectionBounds,
+        filterFn: faceTrackerOptsRef.current?.filterFn
       });
       if (!ftActive) {
         localFaceTracker.stop();
@@ -91,9 +94,11 @@ function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
       eventDispatcher,
       faceTracker,
       loading,
-      videoStream: stream
+      videoStream: stream,
+      detectionBounds: faceTrackerOpts?.detectionBounds,
+      projectionBounds: faceTrackerOpts?.projectionBounds
     }),
-    [error, eventDispatcher, faceTracker, loading, stream]
+    [error, eventDispatcher, faceTracker, faceTrackerOpts, loading, stream]
   );
   return /* @__PURE__ */ jsxs(NHContext.Provider, { value: contextValue, children: [
     children,
@@ -378,9 +383,12 @@ var NH = htmlElementTags.reduce((result, tag) => {
 // src/detection-bounds-display.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function DetectionBoundsDisplay({
-  detectionBounds,
   style
 }) {
+  const { detectionBounds } = useNH();
+  if (!detectionBounds) {
+    return;
+  }
   return /* @__PURE__ */ jsx2(
     "div",
     {
@@ -429,7 +437,6 @@ function Pointer({
         ...point === null && { visibility: "hidden" },
         ...point !== null && { left: point.x, top: point.y },
         ...style
-        // backgroundColor: color,
       },
       children: children ?? /* @__PURE__ */ jsx3(DefaultPointerIndicator, {})
     }
@@ -440,8 +447,8 @@ function DefaultPointerIndicator() {
     "div",
     {
       style: {
-        height: 24,
-        width: 24,
+        height: 28,
+        width: 28,
         borderRadius: "50%",
         transform: "translate(-50%, -50%)",
         boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
@@ -452,9 +459,13 @@ function DefaultPointerIndicator() {
 }
 
 // src/index.ts
-import { NHEvent as NHEvent2 } from "@deibid/no-hands";
+import {
+  Filters,
+  NHEvent as NHEvent2
+} from "@deibid/no-hands";
 export {
   DetectionBoundsDisplay,
+  Filters,
   NH,
   NHEvent2 as NHEvent,
   NHProvider,
@@ -462,6 +473,7 @@ export {
   useCamera,
   useEvents,
   useNH,
+  useNHEventNotification,
   useNHPoint,
   useWindowSize
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deibid/no-hands-react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React adapter for @deibid/no-hands",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "react-merge-refs": "^3.0.2",
-    "@deibid/no-hands": "0.0.4"
+    "@deibid/no-hands": "0.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

package/src/context/context.tsx

@@ -25,6 +25,8 @@ const NHContext = createContext<INHContext>({
   faceTracker: null,
   loading: false,
   videoStream: null,
+  detectionBounds: null,
+  projectionBounds: null,
 });
 
 
@@ -62,6 +64,7 @@ export function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }: N
         videoElement,
         detectionBounds: faceTrackerOptsRef.current?.detectionBounds,
         projectionBounds: faceTrackerOptsRef.current?.projectionBounds,
+        filterFn: faceTrackerOptsRef.current?.filterFn
       });
 
       if (!ftActive) {
@@ -119,8 +122,10 @@ export function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }: N
       faceTracker,
       loading,
       videoStream: stream,
+      detectionBounds: faceTrackerOpts?.detectionBounds,
+      projectionBounds: faceTrackerOpts?.projectionBounds
     }),
-    [error, eventDispatcher, faceTracker, loading, stream]);
+    [error, eventDispatcher, faceTracker, faceTrackerOpts, loading, stream]);
 
   return (
     <NHContext.Provider value={contextValue}>

package/src/context/types.ts

@@ -2,6 +2,7 @@ import type {
   CreateEventDispatcherOpts,
   EventDispatcher,
   FaceTracker,
+  FilterFn,
   Rect
 } from "@deibid/no-hands";
 
@@ -11,12 +12,15 @@ export interface INHContext {
   faceTracker: FaceTracker | null;
   loading: boolean;
   videoStream: MediaStream | null;
+  detectionBounds?: Rect | null;
+  projectionBounds?: Rect | null;
 }
 
 export interface NHProviderOptions {
   faceTrackerOpts?: {
     detectionBounds?: Rect;
     projectionBounds?: Rect;
+    filterFn?: FilterFn;
   };
   eventDispatcherOpts?: CreateEventDispatcherOpts;
 }

package/src/detection-bounds-display.tsx

@@ -1,14 +1,19 @@
-import { Rect } from "@deibid/no-hands";
+import { useNH } from "./context";
 
 interface DetectionBoundsDisplayProps {
-  detectionBounds: Rect;
   style?: React.CSSProperties;
 }
 
 export default function DetectionBoundsDisplay({
-  detectionBounds,
   style
 }: DetectionBoundsDisplayProps) {
+
+  const { detectionBounds } = useNH();
+
+  if (!detectionBounds) {
+    return;
+  }
+
   return (
     <div
       style={{

package/src/index.ts

@@ -1,9 +1,14 @@
 import { NH } from './nhcomponent';
-import { useEvents, useCamera, useNHPoint, useWindowSize } from "./hooks";
+import { useEvents, useCamera, useNHPoint, useWindowSize, useNHEventNotification } from "./hooks";
 import { NHProvider, useNH } from "./context";
 import DetectionBoundsDisplay from "./detection-bounds-display";
 import Pointer from "./pointer";
-import { NHEvent } from "@deibid/no-hands";
+import {
+  type FilterFn,
+  type Point,
+  Filters,
+  NHEvent
+} from "@deibid/no-hands";
 
 
 export {
@@ -15,10 +20,14 @@ export {
   useNH,
   useNHPoint,
   useWindowSize,
+  useNHEventNotification,
   // components
   NH,
   DetectionBoundsDisplay,
   Pointer,
   // re-exports from core package
+  FilterFn,
+  Point,
+  Filters,
   NHEvent
 }

package/src/pointer.tsx

@@ -36,7 +36,6 @@ export default function Pointer({
         ...(point === null && { visibility: 'hidden' }),
         ...(point !== null && { left: point.x, top: point.y }),
         ...style,
-        // backgroundColor: color,
       }}
     >
       {children ?? <DefaultPointerIndicator />}
@@ -49,8 +48,8 @@ function DefaultPointerIndicator() {
 
   return <div
     style={{
-      height: 24,
-      width: 24,
+      height: 28,
+      width: 28,
       borderRadius: '50%',
       transform: 'translate(-50%, -50%)',
       boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',