TobiasH/relnet
1
0
Fork 0
mirror of https://github.com/philipredstone/relnet.git synced 2025-06-17 05:01:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Increase node size and distance

Browse Source 
Took 8 minutes
This commit is contained in:
Tobias Hopp 2025-04-17 14:49:32 +02:00
parent f1ead87340
commit 47ef38df75
2 changed files with 43 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/CanvasGraph.tsx
View File

@ -35,15 +35,15 @@ interface CanvasGraphProps {
} }
// Physics constants // Physics constants
const NODE_RADIUS = 45; // Node radius in pixels const NODE_RADIUS = 50; // Node radius in pixels
const MIN_DISTANCE = 110; // Minimum distance between any two nodes const MIN_DISTANCE = 250; // Minimum distance between any two nodes
const MAX_DISTANCE = 500; // Maximum distance between connected nodes const MAX_DISTANCE = 800; // Maximum distance between connected nodes
const REPULSION_STRENGTH = 500; // How strongly nodes repel each other when too close const REPULSION_STRENGTH = 400; // How strongly nodes repel each other when too close
const ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes const ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes
const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints
const DAMPING = 0.6; // Damping factor for velocity (0-1) const DAMPING = 0.6; // Damping factor for velocity (0-1)
const CENTER_GRAVITY = 0.01; // Force pulling nodes to the center const CENTER_GRAVITY = 0.01; // Force pulling nodes to the center
const MAX_VELOCITY = 5; // Maximum velocity to prevent wild movement const MAX_VELOCITY = 4; // Maximum velocity to prevent wild movement
const COOLING_FACTOR = 0.99; // System gradually cools down const COOLING_FACTOR = 0.99; // System gradually cools down
const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height }) => { const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height }) => {

96
frontend/src/components/Modals.tsx
View File

@ -1,24 +1,10 @@
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker'; import DatePicker from 'react-datepicker';
import { import { FaPlus, FaRegCalendarAlt, FaSave, FaStar, FaTrash, FaUserFriends, FaUserPlus } from 'react-icons/fa';
FaPlus,
FaRegCalendarAlt,
FaSave,
FaStar,
FaTrash,
FaUserFriends,
FaUserPlus,
} from 'react-icons/fa';
import { Button, FormField, Modal } from '../components/FriendshipNetworkComponents'; import { Button, FormField, Modal } from '../components/FriendshipNetworkComponents';
import { import { FormErrors, NewPersonForm, NewRelationshipForm, PersonNode, RelationshipEdge } from '../types/network';
PersonNode,
RelationshipEdge,
FormErrors,
NewPersonForm,
NewRelationshipForm,
} from '../types/network';
import { import {
getRelationshipColor, getRelationshipColor,
@ -26,13 +12,7 @@ import {
RELATIONSHIP_TYPES, RELATIONSHIP_TYPES,
RELATIONSHIPS, RELATIONSHIPS,
} from '../types/RelationShipTypes'; } from '../types/RelationShipTypes';
import { import { ErrorMessage, KeyboardShortcut, OptionGroup, TipItem, ToggleSetting } from './UIComponents';
ErrorMessage,
KeyboardShortcut,
OptionGroup,
TipItem,
ToggleSetting,
} from './UIComponents';
// ============================== // ==============================
// Person Form Modal // Person Form Modal
@ -48,14 +28,14 @@ interface PersonFormModalProps {
} }
export const PersonFormModal: React.FC<PersonFormModalProps> = ({ export const PersonFormModal: React.FC<PersonFormModalProps> = ({
isOpen, isOpen,
onClose, onClose,
formData, formData,
setFormData, setFormData,
errors, errors,
onSubmit, onSubmit,
isEdit = false, isEdit = false,
}) => { }) => {
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={isEdit ? 'Edit Person' : 'Add New Person'}> <Modal isOpen={isOpen} onClose={onClose} title={isEdit ? 'Edit Person' : 'Add New Person'}>
<form onSubmit={onSubmit} className="space-y-4"> <form onSubmit={onSubmit} className="space-y-4">
@ -141,14 +121,14 @@ interface RelationshipFormModalProps {
} }
export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({ export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
isOpen, isOpen,
onClose, onClose,
formData, formData,
setFormData, setFormData,
errors, errors,
onSubmit, onSubmit,
people, people,
}) => { }) => {
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title="Add New Relationship"> <Modal isOpen={isOpen} onClose={onClose} title="Add New Relationship">
<form onSubmit={onSubmit} className="space-y-4"> <form onSubmit={onSubmit} className="space-y-4">
@ -289,19 +269,19 @@ interface PersonDetailModalProps {
} }
export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
isOpen, isOpen,
onClose, onClose,
person, person,
setPerson, setPerson,
errors, errors,
onSubmit, onSubmit,
onDelete, onDelete,
relationships, relationships,
people, people,
onDeleteRelationship, onDeleteRelationship,
onAddNewConnection, onAddNewConnection,
onNavigateToPerson, onNavigateToPerson,
}) => { }) => {
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={`${person.firstName} ${person.lastName}`}> <Modal isOpen={isOpen} onClose={onClose} title={`${person.firstName} ${person.lastName}`}>
<div className="space-y-6"> <div className="space-y-6">
@ -380,7 +360,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
<h4 className="font-medium text-indigo-400 mb-2">Connections</h4> <h4 className="font-medium text-indigo-400 mb-2">Connections</h4>
<div className="max-h-40 overflow-y-auto space-y-1 bg-slate-900 rounded-lg p-2"> <div className="max-h-40 overflow-y-auto space-y-1 bg-slate-900 rounded-lg p-2">
{relationships.filter( {relationships.filter(
(r: RelationshipEdge) => r.source === person._id || r.target === person._id (r: RelationshipEdge) => r.source === person._id || r.target === person._id,
).length > 0 ? ( ).length > 0 ? (
relationships relationships
.filter((r: RelationshipEdge) => r.source === person._id || r.target === person._id) .filter((r: RelationshipEdge) => r.source === person._id || r.target === person._id)
@ -465,11 +445,11 @@ interface SettingsModalProps {
} }
export const SettingsModal: React.FC<SettingsModalProps> = ({ export const SettingsModal: React.FC<SettingsModalProps> = ({
isOpen, isOpen,
onClose, onClose,
settings, settings,
setSettings, setSettings,
}) => { }) => {
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title="Network Settings"> <Modal isOpen={isOpen} onClose={onClose} title="Network Settings">
<div className="space-y-4"> <div className="space-y-4">