85bf1341f3
Frontend Enhancements: - Complete React TypeScript frontend with modern UI components - Distributed workflows management interface with real-time updates - Socket.IO integration for live agent status monitoring - Agent management dashboard with cluster visualization - Project management interface with metrics and task tracking - Responsive design with proper error handling and loading states Backend Infrastructure: - Distributed coordinator for multi-agent workflow orchestration - Cluster management API with comprehensive agent operations - Enhanced database models for agents and projects - Project service for filesystem-based project discovery - Performance monitoring and metrics collection - Comprehensive API documentation and error handling Documentation: - Complete distributed development guide (README_DISTRIBUTED.md) - Comprehensive development report with architecture insights - System configuration templates and deployment guides The platform now provides a complete web interface for managing the distributed AI cluster with real-time monitoring, workflow orchestration, and agent coordination capabilities. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import { useConstant } from '../../utils/use-constant.mjs';
|
|
|
|
/**
|
|
* Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
|
|
*
|
|
* ```jsx
|
|
* const dragControls = useDragControls()
|
|
*
|
|
* function startDrag(event) {
|
|
* dragControls.start(event, { snapToCursor: true })
|
|
* }
|
|
*
|
|
* return (
|
|
* <>
|
|
* <div onPointerDown={startDrag} />
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
|
* </>
|
|
* )
|
|
* ```
|
|
*
|
|
* @public
|
|
*/
|
|
class DragControls {
|
|
constructor() {
|
|
this.componentControls = new Set();
|
|
}
|
|
/**
|
|
* Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
|
|
*
|
|
* @internal
|
|
*/
|
|
subscribe(controls) {
|
|
this.componentControls.add(controls);
|
|
return () => this.componentControls.delete(controls);
|
|
}
|
|
/**
|
|
* Start a drag gesture on every `motion` component that has this set of drag controls
|
|
* passed into it via the `dragControls` prop.
|
|
*
|
|
* ```jsx
|
|
* dragControls.start(e, {
|
|
* snapToCursor: true
|
|
* })
|
|
* ```
|
|
*
|
|
* @param event - PointerEvent
|
|
* @param options - Options
|
|
*
|
|
* @public
|
|
*/
|
|
start(event, options) {
|
|
this.componentControls.forEach((controls) => {
|
|
controls.start(event.nativeEvent || event, options);
|
|
});
|
|
}
|
|
}
|
|
const createDragControls = () => new DragControls();
|
|
/**
|
|
* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
|
|
* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
|
|
* might want to initiate that dragging from a different component than the draggable one.
|
|
*
|
|
* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
|
|
* the draggable component's `dragControls` prop. It exposes a `start` method
|
|
* that can start dragging from pointer events on other components.
|
|
*
|
|
* ```jsx
|
|
* const dragControls = useDragControls()
|
|
*
|
|
* function startDrag(event) {
|
|
* dragControls.start(event, { snapToCursor: true })
|
|
* }
|
|
*
|
|
* return (
|
|
* <>
|
|
* <div onPointerDown={startDrag} />
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
|
* </>
|
|
* )
|
|
* ```
|
|
*
|
|
* @public
|
|
*/
|
|
function useDragControls() {
|
|
return useConstant(createDragControls);
|
|
}
|
|
|
|
export { DragControls, useDragControls };
|