Initial commit
This commit is contained in:
gbanyan
116
src/components/Toolbar/Toolbar.module.css
Normal file
116
src/components/Toolbar/Toolbar.module.css
Normal file
@@ -0,0 +1,116 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 15px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #ddd;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.toolGroup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.groupLabel {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-right: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.toolButton {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.toolButton:hover:not(:disabled) {
|
||||
background: #f5f5f5;
|
||||
border-color: #bbb;
|
||||
}
|
||||
|
||||
.toolButton:active:not(:disabled) {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.toolButton.active {
|
||||
background: #e3f2fd;
|
||||
border-color: #2196F3;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.toolButton:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: #ddd;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.relationshipTool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 5px 10px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.relationshipTool p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.relationshipRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.relationshipRow label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.relationshipRow select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #1976D2;
|
||||
background: #1976D2;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.button:hover:not(:disabled) {
|
||||
background: #1565C0;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
349
src/components/Toolbar/Toolbar.tsx
Normal file
349
src/components/Toolbar/Toolbar.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
/**
|
||||
* Toolbar Component
|
||||
*
|
||||
* Main toolbar with tools for editing the pedigree
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { usePedigreeStore, useTemporalStore } from '@/store/pedigreeStore';
|
||||
import { createPerson, createRelationship, Sex, RelationshipType } from '@/core/model/types';
|
||||
import styles from './Toolbar.module.css';
|
||||
|
||||
export function Toolbar() {
|
||||
const {
|
||||
pedigree,
|
||||
currentTool,
|
||||
selectedPersonId,
|
||||
setCurrentTool,
|
||||
addPerson,
|
||||
addRelationship,
|
||||
updatePerson,
|
||||
deletePerson,
|
||||
createNewPedigree,
|
||||
recalculateLayout,
|
||||
} = usePedigreeStore();
|
||||
|
||||
const [showRelationshipMenu, setShowRelationshipMenu] = useState(false);
|
||||
|
||||
const temporal = useTemporalStore();
|
||||
const { undo, redo, pastStates, futureStates } = temporal.getState();
|
||||
|
||||
const handleAddPerson = (sex: Sex) => {
|
||||
let currentPedigree = pedigree;
|
||||
|
||||
if (!currentPedigree) {
|
||||
createNewPedigree('FAM001');
|
||||
// Get the latest state after creating
|
||||
currentPedigree = usePedigreeStore.getState().pedigree;
|
||||
}
|
||||
|
||||
if (!currentPedigree) return; // Safety check
|
||||
|
||||
const id = `P${Date.now().toString(36)}`;
|
||||
const person = createPerson(id, currentPedigree.familyId, sex);
|
||||
person.metadata.label = id;
|
||||
|
||||
// Set initial position
|
||||
const existingNodes = currentPedigree.persons.size;
|
||||
person.x = 100 + (existingNodes % 5) * 100;
|
||||
person.y = 100 + Math.floor(existingNodes / 5) * 150;
|
||||
|
||||
addPerson(person);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedPersonId) {
|
||||
deletePerson(selectedPersonId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddSpouse = () => {
|
||||
if (!pedigree || !selectedPersonId) return;
|
||||
|
||||
const selectedPerson = pedigree.persons.get(selectedPersonId);
|
||||
if (!selectedPerson) return;
|
||||
|
||||
// Create a new person of opposite sex
|
||||
const newSex = selectedPerson.sex === Sex.Male ? Sex.Female :
|
||||
selectedPerson.sex === Sex.Female ? Sex.Male : Sex.Unknown;
|
||||
const id = `P${Date.now().toString(36)}`;
|
||||
const newPerson = createPerson(id, pedigree.familyId, newSex);
|
||||
newPerson.metadata.label = id;
|
||||
newPerson.x = (selectedPerson.x ?? 0) + 80;
|
||||
newPerson.y = selectedPerson.y ?? 100;
|
||||
|
||||
addPerson(newPerson);
|
||||
|
||||
// Create spouse relationship
|
||||
const relationship = createRelationship(selectedPersonId, id, RelationshipType.Spouse);
|
||||
addRelationship(relationship);
|
||||
};
|
||||
|
||||
const handleAddChild = () => {
|
||||
if (!pedigree || !selectedPersonId) return;
|
||||
|
||||
const selectedPerson = pedigree.persons.get(selectedPersonId);
|
||||
if (!selectedPerson) return;
|
||||
|
||||
// Create a new child
|
||||
const id = `P${Date.now().toString(36)}`;
|
||||
const child = createPerson(id, pedigree.familyId, Sex.Unknown);
|
||||
child.metadata.label = id;
|
||||
child.x = selectedPerson.x ?? 0;
|
||||
child.y = (selectedPerson.y ?? 0) + 120;
|
||||
|
||||
// Set parent based on selected person's sex
|
||||
if (selectedPerson.sex === Sex.Male) {
|
||||
child.fatherId = selectedPersonId;
|
||||
} else if (selectedPerson.sex === Sex.Female) {
|
||||
child.motherId = selectedPersonId;
|
||||
}
|
||||
|
||||
addPerson(child);
|
||||
|
||||
// Update selected person's children
|
||||
updatePerson(selectedPersonId, {
|
||||
childrenIds: [...selectedPerson.childrenIds, id],
|
||||
});
|
||||
|
||||
recalculateLayout();
|
||||
};
|
||||
|
||||
const handleAddParents = () => {
|
||||
if (!pedigree || !selectedPersonId) return;
|
||||
|
||||
const selectedPerson = pedigree.persons.get(selectedPersonId);
|
||||
if (!selectedPerson) return;
|
||||
|
||||
// Create father
|
||||
const fatherId = `P${Date.now().toString(36)}F`;
|
||||
const father = createPerson(fatherId, pedigree.familyId, Sex.Male);
|
||||
father.metadata.label = fatherId;
|
||||
father.x = (selectedPerson.x ?? 0) - 40;
|
||||
father.y = (selectedPerson.y ?? 0) - 120;
|
||||
father.childrenIds = [selectedPersonId];
|
||||
|
||||
// Create mother
|
||||
const motherId = `P${Date.now().toString(36)}M`;
|
||||
const mother = createPerson(motherId, pedigree.familyId, Sex.Female);
|
||||
mother.metadata.label = motherId;
|
||||
mother.x = (selectedPerson.x ?? 0) + 40;
|
||||
mother.y = (selectedPerson.y ?? 0) - 120;
|
||||
mother.childrenIds = [selectedPersonId];
|
||||
|
||||
addPerson(father);
|
||||
addPerson(mother);
|
||||
|
||||
// Update child's parent references
|
||||
updatePerson(selectedPersonId, {
|
||||
fatherId,
|
||||
motherId,
|
||||
});
|
||||
|
||||
// Create spouse relationship between parents
|
||||
const relationship = createRelationship(fatherId, motherId, RelationshipType.Spouse);
|
||||
relationship.childrenIds = [selectedPersonId];
|
||||
addRelationship(relationship);
|
||||
|
||||
recalculateLayout();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.toolbar}>
|
||||
<div className={styles.toolGroup}>
|
||||
<span className={styles.groupLabel}>Tools</span>
|
||||
<button
|
||||
className={`${styles.toolButton} ${currentTool === 'select' ? styles.active : ''}`}
|
||||
onClick={() => setCurrentTool('select')}
|
||||
title="Select (V)"
|
||||
>
|
||||
<SelectIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.divider} />
|
||||
|
||||
<div className={styles.toolGroup}>
|
||||
<span className={styles.groupLabel}>Add Person</span>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={() => handleAddPerson(Sex.Male)}
|
||||
title="Add Male"
|
||||
>
|
||||
<MaleIcon />
|
||||
</button>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={() => handleAddPerson(Sex.Female)}
|
||||
title="Add Female"
|
||||
>
|
||||
<FemaleIcon />
|
||||
</button>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={() => handleAddPerson(Sex.Unknown)}
|
||||
title="Add Unknown"
|
||||
>
|
||||
<UnknownIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.divider} />
|
||||
|
||||
<div className={styles.toolGroup}>
|
||||
<span className={styles.groupLabel}>Relationships</span>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={handleAddSpouse}
|
||||
disabled={!selectedPersonId}
|
||||
title="Add Spouse"
|
||||
>
|
||||
<SpouseIcon />
|
||||
</button>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={handleAddChild}
|
||||
disabled={!selectedPersonId}
|
||||
title="Add Child"
|
||||
>
|
||||
<ChildIcon />
|
||||
</button>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={handleAddParents}
|
||||
disabled={!selectedPersonId}
|
||||
title="Add Parents"
|
||||
>
|
||||
<ParentsIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.divider} />
|
||||
|
||||
<div className={styles.toolGroup}>
|
||||
<span className={styles.groupLabel}>Edit</span>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={handleDelete}
|
||||
disabled={!selectedPersonId}
|
||||
title="Delete Selected"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.divider} />
|
||||
|
||||
<div className={styles.toolGroup}>
|
||||
<span className={styles.groupLabel}>History</span>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={() => undo()}
|
||||
disabled={pastStates.length === 0}
|
||||
title="Undo (Ctrl+Z)"
|
||||
>
|
||||
<UndoIcon />
|
||||
</button>
|
||||
<button
|
||||
className={styles.toolButton}
|
||||
onClick={() => redo()}
|
||||
disabled={futureStates.length === 0}
|
||||
title="Redo (Ctrl+Y)"
|
||||
>
|
||||
<RedoIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Simple SVG icons
|
||||
function SelectIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M7 2l10 10-4 1 3 7-2 1-3-7-4 4V2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MaleIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="4" y="4" width="16" height="16" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FemaleIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function UnknownIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 2l10 10-10 10L2 12z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function DeleteIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function UndoIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function RedoIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SpouseIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="2" y="8" width="8" height="8" />
|
||||
<circle cx="18" cy="12" r="4" />
|
||||
<line x1="10" y1="12" x2="14" y2="12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ChildIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="8" y="2" width="8" height="8" />
|
||||
<line x1="12" y1="10" x2="12" y2="14" />
|
||||
<path d="M12 14 L12 18 M8 18 L16 18" />
|
||||
<circle cx="12" cy="20" r="2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ParentsIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="2" y="2" width="6" height="6" />
|
||||
<circle cx="19" cy="5" r="3" />
|
||||
<line x1="8" y1="5" x2="16" y2="5" />
|
||||
<line x1="12" y1="5" x2="12" y2="10" />
|
||||
<circle cx="12" cy="18" r="4" />
|
||||
<line x1="12" y1="10" x2="12" y2="14" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
128
src/components/Toolbar/tools/RelationshipTool.tsx
Normal file
128
src/components/Toolbar/tools/RelationshipTool.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* RelationshipTool Component
|
||||
*
|
||||
* Tool for creating relationships between persons
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { usePedigreeStore } from '@/store/pedigreeStore';
|
||||
import { createRelationship, RelationshipType } from '@/core/model/types';
|
||||
import styles from '../Toolbar.module.css';
|
||||
|
||||
interface RelationshipToolProps {
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function RelationshipTool({ onClose }: RelationshipToolProps) {
|
||||
const {
|
||||
pedigree,
|
||||
selectedPersonId,
|
||||
addRelationship,
|
||||
updatePerson,
|
||||
} = usePedigreeStore();
|
||||
|
||||
const [relationshipType, setRelationshipType] = useState<'spouse' | 'parent' | 'child'>('spouse');
|
||||
const [targetPersonId, setTargetPersonId] = useState<string>('');
|
||||
|
||||
const persons = pedigree ? Array.from(pedigree.persons.values()) : [];
|
||||
const selectedPerson = selectedPersonId ? pedigree?.persons.get(selectedPersonId) : null;
|
||||
|
||||
const availableTargets = persons.filter(p => p.id !== selectedPersonId);
|
||||
|
||||
const handleCreateRelationship = useCallback(() => {
|
||||
if (!selectedPersonId || !targetPersonId || !pedigree) return;
|
||||
|
||||
const selectedPerson = pedigree.persons.get(selectedPersonId);
|
||||
const targetPerson = pedigree.persons.get(targetPersonId);
|
||||
|
||||
if (!selectedPerson || !targetPerson) return;
|
||||
|
||||
switch (relationshipType) {
|
||||
case 'spouse': {
|
||||
const relationship = createRelationship(
|
||||
selectedPersonId,
|
||||
targetPersonId,
|
||||
RelationshipType.Spouse
|
||||
);
|
||||
addRelationship(relationship);
|
||||
break;
|
||||
}
|
||||
case 'parent': {
|
||||
// Make target person a parent of selected person
|
||||
if (targetPerson.sex === 'male') {
|
||||
updatePerson(selectedPersonId, { fatherId: targetPersonId });
|
||||
} else if (targetPerson.sex === 'female') {
|
||||
updatePerson(selectedPersonId, { motherId: targetPersonId });
|
||||
}
|
||||
// Add selected person as child of target
|
||||
updatePerson(targetPersonId, {
|
||||
childrenIds: [...targetPerson.childrenIds, selectedPersonId],
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'child': {
|
||||
// Make target person a child of selected person
|
||||
if (selectedPerson.sex === 'male') {
|
||||
updatePerson(targetPersonId, { fatherId: selectedPersonId });
|
||||
} else if (selectedPerson.sex === 'female') {
|
||||
updatePerson(targetPersonId, { motherId: selectedPersonId });
|
||||
}
|
||||
// Add target person as child of selected
|
||||
updatePerson(selectedPersonId, {
|
||||
childrenIds: [...selectedPerson.childrenIds, targetPersonId],
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setTargetPersonId('');
|
||||
onClose?.();
|
||||
}, [selectedPersonId, targetPersonId, relationshipType, pedigree, addRelationship, updatePerson, onClose]);
|
||||
|
||||
if (!selectedPerson) {
|
||||
return (
|
||||
<div className={styles.relationshipTool}>
|
||||
<p>Select a person first to create relationships</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.relationshipTool}>
|
||||
<div className={styles.relationshipRow}>
|
||||
<label>Type:</label>
|
||||
<select
|
||||
value={relationshipType}
|
||||
onChange={(e) => setRelationshipType(e.target.value as 'spouse' | 'parent' | 'child')}
|
||||
>
|
||||
<option value="spouse">Spouse</option>
|
||||
<option value="parent">Parent of {selectedPerson.id}</option>
|
||||
<option value="child">Child of {selectedPerson.id}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className={styles.relationshipRow}>
|
||||
<label>Target:</label>
|
||||
<select
|
||||
value={targetPersonId}
|
||||
onChange={(e) => setTargetPersonId(e.target.value)}
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
{availableTargets.map(person => (
|
||||
<option key={person.id} value={person.id}>
|
||||
{person.metadata.label || person.id} ({person.sex})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={handleCreateRelationship}
|
||||
disabled={!targetPersonId}
|
||||
>
|
||||
Create Relationship
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user