Family Chart API Documentation - v0.8.1
    Preparing search index...

    Class EditTree

    EditTree class - Provides comprehensive editing capabilities for family tree data.

    This class handles all editing operations for family tree data, including:

    • Adding new family members and relationships
    • Editing existing person information
    • Removing family members and relationships
    • Form management and validation
    • History tracking and undo/redo functionality
    • Modal dialogs and user interactions
    import * as f3 from 'family-chart'
    const f3Chart = f3.createChart('#FamilyChart', data)
    const f3EditTree = f3Chart.editTree()  // returns an EditTree instance
      .setFields(["first name","last name","birthday"])
      .setOnChange(() => {
         const updated_data = f3EditTree.getStoreDataCopy()
         // do something with the updated data
      })
    Index

    Constructors

    constructor

    Properties

    addRelativeInstance canDelete canEdit cont createFormEdit createFormNew editFirst fields formCont history is_fixed link_existing_rel_config? modal no_edit onChange onDelete onFormCreation onSubmit postSubmit removeRelativeInstance store

    Methods

    absolute addRelative cardEditForm closeForm destroy fixed getDataJson getStoreDataCopy isAddingRelative isRemovingRelative open openForm openFormWithId openWithoutRelCancel setAddRelLabels setCanAdd setCanDelete setCanEdit setCardClickOpen setCreateFormEdit setCreateFormNew setEdit setEditFirst setFields setFormCont setLinkExistingRelConfig setNoEdit setOnChange setOnDelete setOnFormCreation setOnSubmit setPostSubmit setupModal updateHistory

    Constructors

    Properties

    addRelativeInstance: AddRelative
    canDelete: undefined | ((datum: Datum) => boolean)
    canEdit: undefined | ((datum: Datum) => boolean)
    cont: HTMLElement
    createFormEdit:
        | null
        | ((form_creator: FormCreator, closeCallback: () => void) => HTMLElement)
    createFormNew:
        | null
        | ((form_creator: FormCreator, closeCallback: () => void) => HTMLElement)
    editFirst: boolean
    fields: { id: string; label: string; type: string }[]
    formCont: {
        close: () => void;
        el?: HTMLElement;
        open: () => void;
        populate: (form_element: HTMLElement) => void;
    }
    history: HistoryWithControls
    is_fixed: boolean
    link_existing_rel_config?: {
        linkRelLabel: (d: Datum) => string;
        select_placeholder?: string;
        title?: string;
    }
    modal: Modal
    no_edit: boolean
    onChange: null | (() => void)
    onDelete:
        | undefined
        | (
            (
                datum: Datum,
                deletePerson: () => void,
                postSubmit: (props: any) => void,
            ) => void
        )
    onFormCreation:
        | null
        | ((props: { cont: HTMLElement; form_creator: FormCreator }) => void)
    onSubmit:
        | undefined
        | (
            (
                e: Event,
                datum: Datum,
                applyChanges: () => void,
                postSubmit: () => void,
            ) => void
        )
    postSubmit: null | ((datum: Datum, data: Data) => void)
    removeRelativeInstance: RemoveRelative
    store: Store

    Methods

    • Get data copy

      Returns any

      The store data

    • Parameters

      • d_id: string

      Returns void

    • Open the edit form without canceling the add relative or remove relative view

      Parameters

      • datum: Datum

        The datum to edit

      Returns void

    • Parameters

      • add_rel_labels: {
            daughter: string;
            father: string;
            mother: string;
            son: string;
            spouse: string;
        }

      Returns EditTree

    • Parameters

      • canAdd:
            | undefined
            | (
                (
                    datum: Datum,
                ) => { child?: boolean; parent?: boolean; spouse?: boolean }
            )

      Returns EditTree

    • Parameters

      • createFormEdit: null | ((form_creator: FormCreator, closeCallback: () => void) => HTMLElement)

      Returns EditTree

    • Parameters

      • createFormNew: null | ((form_creator: FormCreator, closeCallback: () => void) => HTMLElement)

      Returns EditTree

    • Parameters

      • formCont: {
            close: () => void;
            el?: HTMLElement;
            open: () => void;
            populate: (form_element: HTMLElement) => void;
        }

      Returns EditTree

    • Parameters

      • link_existing_rel_config:
            | undefined
            | {
                linkRelLabel: (d: Datum) => string;
                select_placeholder?: string;
                title?: string;
            }

      Returns EditTree

    • Set the onChange function to be called when the data changes via editing, adding, or removing a relative

      Parameters

      • fn: null | (() => void)

        The onChange function

      Returns EditTree

    • Parameters

      • onDelete:
            | undefined
            | (
                (
                    datum: Datum,
                    deletePerson: () => void,
                    postSubmit: (props: any) => void,
                ) => void
            )

      Returns EditTree

    • Parameters

      • onFormCreation: null | ((props: { cont: HTMLElement; form_creator: FormCreator }) => void)

      Returns EditTree

    • Parameters

      • onSubmit:
            | undefined
            | (
                (
                    e: Event,
                    datum: Datum,
                    applyChanges: () => void,
                    postSubmit: () => void,
                ) => void
            )

      Returns EditTree

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods