pivotick - v2.0.1
    Preparing search index...

    Interface InterractionCallbacks<TElement>

    interface InterractionCallbacks<TElement = unknown> {
        isValidConnection?: (source: Node | Note, target: Node) => boolean;
        onBadgeClick?: (
            event: PointerEvent,
            node: Node,
            badge: NodeBadge,
            element: TElement,
        ) => void;
        onBeforeDelete?: (
            context: DeleteContext,
        ) => DeleteDecision | Promise<DeleteDecision>;
        onBeforeEdgeCreate?: (
            context: EdgeCreateContext,
        ) => EdgeCreateDecision | Promise<EdgeCreateDecision>;
        onBeforeEdgeEditCommit?: (
            context: EdgeEditCommitContext,
        ) => boolean | Promise<boolean>;
        onBeforeIngest?: (
            context: IngestContext,
        ) => IngestDecision | Promise<IngestDecision>;
        onBeforeNodeCreate?: (
            context: NodeCreateContext,
        ) => NodeCreateDecision | Promise<NodeCreateDecision>;
        onBeforeNodeEditCommit?: (
            context: NodeEditCommitContext,
        ) => boolean | Promise<boolean>;
        onCanvasBeforeZoom?: (event: unknown) => void;
        onCanvasClick?: (event: PointerEvent) => void;
        onCanvasContextmenu?: (event: PointerEvent) => void;
        onCanvasMousemove?: (event: MouseEvent) => void;
        onCanvasPointerDown?: (event: PointerEvent) => void;
        onCanvasPointerUp?: (event: PointerEvent) => void;
        onCanvasZoom?: (event: unknown) => void;
        onEdgeBlur?: (edge: Edge, element: TElement) => void;
        onEdgeClick?: (event: PointerEvent, edge: Edge, element: TElement) => void;
        onEdgeContextmenu?: (
            event: PointerEvent,
            edge: Edge,
            element: TElement,
        ) => void;
        onEdgeDbclick?: (
            event: PointerEvent,
            edge: Edge,
            element: TElement,
        ) => void;
        onEdgeEdit?: (session: EdgeEditSession) => HTMLDivElement;
        onEdgeEditCancel?: (edge: Edge) => void;
        onEdgeHoverIn?: (
            event: PointerEvent,
            edge: Edge,
            element: TElement,
        ) => void;
        onEdgeHoverOut?: (
            event: PointerEvent,
            edge: Edge,
            element: TElement,
        ) => void;
        onEdgeSelect?: (edge: Edge, element: TElement) => void;
        onNodeBlur?: (node: Node, element: TElement) => void;
        onNodeClick?: (event: PointerEvent, node: Node, element: TElement) => void;
        onNodeContextmenu?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodeDbclick?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodeDragended?: (event: MouseEvent, node: Node) => void;
        onNodeDragging?: (event: MouseEvent, node: Node) => void;
        onNodeEdit?: (session: NodeEditSession) => HTMLDivElement;
        onNodeEditCancel?: (node: Node) => void;
        onNodeHoverIn?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodeHoverOut?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodePointerDown?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodePointerUp?: (
            event: PointerEvent,
            node: Node,
            element: TElement,
        ) => void;
        onNodeSelect?: (node: Node, element: TElement) => void;
        onNodesSelect?: (selection: NodeSelection<TElement>[]) => void;
        onNoteClick?: (event: PointerEvent, note: Note, element: TElement) => void;
        onNoteContextmenu?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onNoteDbclick?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onNoteDragging?: (event: PointerEvent, note: Note) => void;
        onNoteHandleClick?: (
            event: PointerEvent,
            note: Note,
            handle: HTMLElement,
        ) => void;
        onNoteHandlePointerDown?: (
            event: PointerEvent,
            note: Note,
            handle: HTMLElement,
        ) => void;
        onNoteHoverIn?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onNoteHoverOut?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onNotePointerDown?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onNotePointerUp?: (
            event: PointerEvent,
            note: Note,
            element: TElement,
        ) => void;
        onSimulationSlowTick?: () => void;
        onSimulationTick?: () => void;
    }

    Type Parameters

    • TElement = unknown
    Index

    Properties

    isValidConnection? onBadgeClick? onBeforeDelete? onBeforeEdgeCreate? onBeforeEdgeEditCommit? onBeforeIngest? onBeforeNodeCreate? onBeforeNodeEditCommit? onCanvasBeforeZoom? onCanvasClick? onCanvasContextmenu? onCanvasMousemove? onCanvasPointerDown? onCanvasPointerUp? onCanvasZoom? onEdgeBlur? onEdgeClick? onEdgeContextmenu? onEdgeDbclick? onEdgeEdit? onEdgeEditCancel? onEdgeHoverIn? onEdgeHoverOut? onEdgeSelect? onNodeBlur? onNodeClick? onNodeContextmenu? onNodeDbclick? onNodeDragended? onNodeDragging? onNodeEdit? onNodeEditCancel? onNodeHoverIn? onNodeHoverOut? onNodePointerDown? onNodePointerUp? onNodeSelect? onNodesSelect? onNoteClick? onNoteContextmenu? onNoteDbclick? onNoteDragging? onNoteHandleClick? onNoteHandlePointerDown? onNoteHoverIn? onNoteHoverOut? onNotePointerDown? onNotePointerUp? onSimulationSlowTick? onSimulationTick?

    Properties

    isValidConnection?: (source: Node | Note, target: Node) => boolean

    Live validity predicate evaluated during the connect gesture as the cursor hovers candidate targets (à la React Flow's isValidConnection). Return false to mark the hovered target invalid: the shadow edge renders in an invalid style, and releasing / clicking on it creates nothing (in that case onBeforeEdgeCreate is not consulted). Runs on every pointer move, so it must be synchronous and cheap.

    onBadgeClick?: (
        event: PointerEvent,
        node: Node,
        badge: NodeBadge,
        element: TElement,
    ) => void

    Called when any of a node's rim badges is clicked, after that badge's own onClick. Use it for behaviour every badge shares; use NodeBadge.onClick for one badge's own action.

    Declaring it makes every badge take the pointer cursor and consume its click, so the node underneath is not also selected.

    onBeforeDelete?: (
        context: DeleteContext,
    ) => DeleteDecision | Promise<DeleteDecision>

    Called when the user asks to delete graph elements, before anything is removed. The library resolves the whole target set first — including the edges that removing a node would take with it (DeleteContext.cascadingEdges) — so a consumer can persist the full consequence of the gesture without re-deriving the cascade.

    • Return false / { accept: false } to veto: nothing is removed, no nodeRemove/edgeRemove/noteRemove fires, and the selection is left intact.
    • Return true to delete exactly what was requested.
    • Return { accept: true, nodes?, edges?, notes? } to narrow the delete to a subset — e.g. keep only what the backend actually deleted. An omitted key means "as requested", so { accept: true } is equivalent to true; pass an empty array to spare that kind entirely. Elements that weren't part of the request are ignored.

    May be async (persist the delete, then decide) — a second delete gesture is ignored while a decision is pending. DeleteContext.confirm opens a confirmation modal so consumers don't rebuild one.

    Only user-initiated deletes are gated: programmatic graph.removeNode() / graph.removeEdge() / noteManager.removeNote() never invoke this hook, so consumer code driving the model isn't blocked by the consumer's own gate.

    onBeforeEdgeCreate?: (
        context: EdgeCreateContext,
    ) => EdgeCreateDecision | Promise<EdgeCreateDecision>

    Called during a connect gesture, after the target node is resolved but before the edge (or note-link) is created. Acts as the edge equivalent of onBeforeNodeEditCommit: a validation / enrichment / veto hook.

    • Return false / { accept: false } to veto: the preview is dropped, nothing is added, and connect mode stays armed so the user can retry.
    • Return true to accept with defaults.
    • Return { accept: true, data?, style?, id?, directed? } to accept and supply the new edge's payload/style/id/direction.

    May be async (e.g. persist to a backend before deciding); the shadow-edge preview persists until the promise settles, and no new connect gesture is accepted while it is pending. Fires for both click- and drag-to-connect. Also fires for note→node links (EdgeCreateContext.kind 'note-link'), where the edge-specific fields of the decision are ignored.

    Type Declaration

    onBeforeEdgeEditCommit?: (
        context: EdgeEditCommitContext,
    ) => boolean | Promise<boolean>

    Called when an edge edit session is about to be committed. Acts as a validation / persistence / veto hook, mirroring onBeforeNodeEditCommit: return false (or a promise of it) to refuse, leaving the edge's data untouched and the modal open. On success the edge's data is replaced and edgeChange fires on the data bus.

    Type Declaration

    onBeforeIngest?: (
        context: IngestContext,
    ) => IngestDecision | Promise<IngestDecision>

    Called once, with the whole candidate set, just before a pivot ingests it — the one gate on the ingest pipeline.

    • Return false / { accept: false } to veto: nothing lands, and the run reports 'vetoed'.
    • Return true to ingest exactly what was chosen.
    • Return { accept: true, nodes?, edges? } to narrow the ingest to a subset — e.g. only what the backend confirmed. An omitted key means "as requested", so { accept: true } is equivalent to true; pass an empty array to land none of that kind.

    Called once per ingest with the entire batch, never per candidate: a pivot that found 1,800 correlations must not turn into 1,800 hook calls, and the per-gesture write-path hooks (onBeforeEdgeCreate, onBeforeDelete) are deliberately about user gestures rather than a programmatic merge. It gates autoIngest pivots too, which is what keeps them governed.

    May be async (persist, then decide). IngestContext.confirm opens the shared confirmation modal.

    onBeforeNodeCreate?: (
        context: NodeCreateContext,
    ) => NodeCreateDecision | Promise<NodeCreateDecision>

    Called when the user creates a node interactively (Create ▸ Add node, or the canvas context-menu's "Add Node Here"), once the graph-space position is known and before the node is added. Mirrors onBeforeEdgeCreate:

    • Return false / { accept: false } to veto — nothing is added.
    • Return true to accept the library's default node.
    • Return { accept: true, id?, data?, style? } to accept and supply the new node's id / payload / style.

    May be async, and NodeCreateContext.promptData opens the same declarative-form or custom-HTML modal the edge hook uses. Absent this hook the tool still works — it just creates a default, unnamed node. Programmatic graph.addNode() is never gated.

    onBeforeNodeEditCommit?: (
        context: NodeEditCommitContext,
    ) => boolean | Promise<boolean>

    Called when a node edit session is about to be committed. Acts as a validation / persistence / veto hook: return false (or a promise of it) to refuse, leaving the node's data untouched and the modal open. On success the node's data is replaced and nodeChange fires on the data bus.

    Type Declaration

    onCanvasBeforeZoom?: (event: unknown) => void

    Called when the canvas is about to be zoomed.

    onCanvasClick?: (event: PointerEvent) => void

    Called when the canvas is clicked.

    onCanvasContextmenu?: (event: PointerEvent) => void

    Called when the canvas is right clicked.

    onCanvasMousemove?: (event: MouseEvent) => void

    Called when the mouse move over the canvas.

    onCanvasPointerDown?: (event: PointerEvent) => void

    Called when a user pointer down the canvas.

    onCanvasPointerUp?: (event: PointerEvent) => void

    Called when a user pointer up the canvas.

    onCanvasZoom?: (event: unknown) => void

    Called when the canvas is zoomed.

    onEdgeBlur?: (edge: Edge, element: TElement) => void

    Called when an edge is unselected by the user.

    onEdgeClick?: (event: PointerEvent, edge: Edge, element: TElement) => void

    Called when an edge is selected by the user.

    onEdgeContextmenu?: (event: PointerEvent, edge: Edge, element: TElement) => void

    Called when an edge is right clicked.

    onEdgeDbclick?: (event: PointerEvent, edge: Edge, element: TElement) => void

    Called when an edge is selected by the user.

    onEdgeEdit?: (session: EdgeEditSession) => HTMLDivElement

    Called when an edge edit session starts. Acts as a UI hook, mirroring onNodeEdit: return the body to inject into the edit modal. A custom body owns the draft — mutate session.draft (or call session.setDraft) as the user types, because the library has no form to read on submit.

    Type Declaration

      • (session: EdgeEditSession): HTMLDivElement

      • Parameters

        • session: EdgeEditSession

          The edge edit session

        Returns HTMLDivElement

        A HTML Div that will be injected in the modal's body

    onEdgeEditCancel?: (edge: Edge) => void

    Called when an edge edit session gets cancelled.

    onEdgeHoverIn?: (event: PointerEvent, edge: Edge, element: TElement) => void

    Called when a user hovers over an edge.

    onEdgeHoverOut?: (event: PointerEvent, edge: Edge, element: TElement) => void

    Called when a user hovers over an edge.

    onEdgeSelect?: (edge: Edge, element: TElement) => void

    Called when an edge is selected by the user.

    onNodeBlur?: (node: Node, element: TElement) => void

    Called when a node is unselected by the user.

    onNodeClick?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a node is clicked.

    onNodeContextmenu?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a node is right clicked.

    onNodeDbclick?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a node is double clicked.

    onNodeDragended?: (event: MouseEvent, node: Node) => void

    Called when a node drag ends.

    onNodeDragging?: (event: MouseEvent, node: Node) => void

    Called when a node is dragged.

    onNodeEdit?: (session: NodeEditSession) => HTMLDivElement

    Called when a node edit session starts. Act as a UI hook.

    Type Declaration

      • (session: NodeEditSession): HTMLDivElement

      • Parameters

        • session: NodeEditSession

          The node edit session

        Returns HTMLDivElement

        A HTML Div that will be injected in the modal's body

    onNodeEditCancel?: (node: Node) => void

    Called when an node edit session gets cancelled

    onNodeHoverIn?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a user hovers over a node.

    onNodeHoverOut?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a user hovers out of a node.

    onNodePointerDown?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a user pointer down a node.

    onNodePointerUp?: (event: PointerEvent, node: Node, element: TElement) => void

    Called when a user pointer up a node.

    onNodeSelect?: (node: Node, element: TElement) => void

    Called when a node is selected by the user.

    onNodesSelect?: (selection: NodeSelection<TElement>[]) => void

    Called when nodes are selected by the user.

    onNoteClick?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a note is clicked.

    onNoteContextmenu?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a note is right clicked.

    onNoteDbclick?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a note is double clicked.

    onNoteDragging?: (event: PointerEvent, note: Note) => void

    Called when a user pointer up a node.

    onNoteHandleClick?: (
        event: PointerEvent,
        note: Note,
        handle: HTMLElement,
    ) => void

    Called when a user pointer down a node.

    onNoteHandlePointerDown?: (
        event: PointerEvent,
        note: Note,
        handle: HTMLElement,
    ) => void

    Called when a user pointer up a node.

    onNoteHoverIn?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a user hovers over a note.

    onNoteHoverOut?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a user hovers out of a note.

    onNotePointerDown?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a user pointer down a node.

    onNotePointerUp?: (event: PointerEvent, note: Note, element: TElement) => void

    Called when a user pointer up a node.

    onSimulationSlowTick?: () => void

    Called when the every tenth of simulation ticks.

    onSimulationTick?: () => void

    Called when the simulation ticks.

    Settings

    Member Visibility

    On This Page

    Properties