Implement Interactive Family Tree Builder with Drag-and-Drop Functionality

[sweep-ai]

This pull request was created by Sweep to resolve the following request by @curtisdelicata:

Description: Create an interactive, drag-and-drop family tree builder that allows users to visually construct and edit their family trees.

Tasks:

Develop a new Livewire component for the interactive tree builder.
Implement drag-and-drop functionality using a JavaScript library compatible with Livewire.
Create backend APIs to save and retrieve tree structure data.
Integrate with existing Person and Family models.
Acceptance Criteria:

Users can add, remove, and rearrange family members using drag-and-drop.
Changes to the tree structure are saved in real-time.
The tree builder is responsive and works on both desktop and mobile devices.

Continue chatting at https://sweep-chat-demo.vercel.app/c/3ace74af-e817-4689-8fdc-797974a44e98.

Purpose

Enhance the genealogy application by introducing an interactive family tree builder that allows users to visually manipulate and position family members within a dynamic tree interface.

Description

This pull request adds a comprehensive family tree builder feature with the following key functionalities:

• Drag-and-drop positioning of family members
• Real-time saving of person positions
• Interactive toolbar for adding and managing people
• Responsive and scalable tree visualization

The implementation includes a Livewire component (FamilyTreeBuilder) that manages the tree data, handles person positioning, and provides methods for adding, removing, and updating person information. The frontend uses interact.js for drag-and-drop interactions and includes custom styling to create an intuitive user experience.

A new database migration adds tree_position_x and tree_position_y columns to the people table to persist the visual positioning of individuals in the family tree.

Summary

• Added new FamilyTreeBuilder Livewire component
• Created interactive family tree view with drag-and-drop support
• Implemented methods for:
  • updatePersonPosition()
  • addPerson()
  • removePerson()
• Added database migration for tree positioning
• Updated Person model to support tree positioning attributes
• Integrated interact.js for smooth drag interactions
• Added responsive styling for tree visualization