@theforce/vue
Version:
Vue library for TheForce hand tracking
73 lines (72 loc) • 1.59 kB
JavaScript
// src/use-hand-tracker.ts
import { ref, onUnmounted, h, getCurrentInstance } from "vue";
import { HandTracker } from "@theforce/core";
function useHandTracker(config) {
const handLandmarks = ref([]);
const isTracking = ref(false);
let tracker = null;
const initialize = async (customConfig) => {
if (isTracking.value)
return;
const finalConfig = { ...config, ...customConfig };
tracker = new HandTracker(finalConfig);
tracker.onResults((results) => {
handLandmarks.value = results.multiHandLandmarks || [];
});
await tracker.start();
isTracking.value = true;
};
const stop = async () => {
if (!tracker || !isTracking.value)
return;
await tracker.stop();
tracker = null;
isTracking.value = false;
handLandmarks.value = [];
};
const restart = async (customConfig) => {
await stop();
await initialize(customConfig);
};
try {
if (typeof onUnmounted === "function" && getCurrentInstance()) {
onUnmounted(() => {
if (tracker) {
tracker.stop();
}
});
}
} catch (error) {
}
return {
handLandmarks,
isTracking,
initialize,
stop,
restart
};
}
var Hoverable = {
name: "Hoverable",
props: {
class: {
type: String,
default: ""
}
},
setup(props, { slots }) {
return () => h(
"div",
{
class: ["force-hoverable", props.class],
"data-hoverable": "true"
// Add data-hoverable attribute
},
slots.default?.()
);
}
};
export {
Hoverable,
useHandTracker
};