Devoluciones de llamada

Pivotick le permite conectarse a interacciones de usuario y eventos de simulación a través de la opción callbacks. Puede proporcionar funciones para varios eventos en el lienzo, nodos y bordes.

Devoluciones de llamada de lienzo

Devolución de llamada	Parámetros	Descripción
onCanvasClick	(event: PointerEvent)	Se dispara cuando se hace clic en el lienzo.
onCanvasContextmenu	(event: PointerEvent)	Disparado sobre lienzo, haga clic derecho.
onCanvasMousemove	(event: MouseEvent)	Se dispara cuando el mouse se mueve sobre el lienzo.
onCanvasZoom	(event: unknown)	Se activa cuando cambia el nivel de zoom del lienzo.

Devoluciones de llamada de nodo

Devolución de llamada	Parámetros	Descripción
onNodeClick	(event: PointerEvent, node: Node, element: TElement)	Se activa cuando se hace clic en un nodo.
onNodeDbclick	(event: PointerEvent, node: Node, element: TElement)	Se activa cuando se hace doble clic en un nodo.
onNodeContextmenu	(event: PointerEvent, node: Node, element: TElement)	Se dispara al hacer clic derecho en el nodo.
onNodeHoverIn	(event: PointerEvent, node: Node, element: TElement)	Se dispara cuando el mouse ingresa a un nodo.
onNodeHoverOut	(event: PointerEvent, node: Node, element: TElement)	Se dispara cuando el mouse abandona un nodo.
onNodeSelect	(node: Node, element: TElement)	Se activa cuando se selecciona un nodo.
onNodeBlur	(node: Node, element: TElement)	Se activa cuando un nodo pierde el foco/selección.
onNodeDragging	(event: MouseEvent, node: Node)	Se dispara continuamente mientras se arrastra un nodo.
onNodeExpansion	(event: PointerEvent, edge: Edge, element: TElement)	Se activa cuando un nodo se expande o colapsa.

Devoluciones de llamada perimetrales

Devolución de llamada	Parámetros	Descripción
onEdgeClick	(event: PointerEvent, edge: Edge, element: TElement)	Se dispara cuando se hace clic en un borde.
onEdgeDbclick	(event: PointerEvent, edge: Edge, element: TElement)	Se activa cuando se hace doble clic en un borde.
onEdgeContextmenu	(event: PointerEvent, edge: Edge, element: TElement)	Disparado en el borde, clic derecho.
onEdgeHoverIn	(event: PointerEvent, edge: Edge, element: TElement)	Se dispara cuando el mouse entra en un borde.
onEdgeHoverOut	(event: PointerEvent, edge: Edge, element: TElement)	Se dispara cuando el mouse sale de un borde.
onEdgeSelect	(edge: Edge, element: TElement)	Se dispara cuando se selecciona un borde.
onEdgeBlur	(edge: Edge, element: TElement)	Se dispara cuando un borde pierde el foco/selección.

Ganchos del ciclo de vida de la ruta de escritura

Cada mutación que un usuario puede realizar pasa por un before-hook: la biblioteca propone, su código decide de forma asincrónica y la decisión puede fallar. En ausencia de un gancho el el comportamiento no cambia y la mutación programática (graph.addNode(), graph.removeNode(), graph.removeEdge()) nunca los invoca, por lo que tu propio código controla el modelo no está cerrado por su propio gancho.

Devolución de llamada	Despedido cuando	Regresar
onBeforeDelete	El usuario solicita eliminar nodos/aristas/notas antes de eliminar algo.	false para vetar, true para eliminar la solicitud, { accept, nodes, edges, notes } para limitarla
onBeforeNodeCreate	El usuario crea un nodo (Crear ▸ Agregar nodo, lienzo ▸ Agregar nodo aquí)	false para vetar, o { accept, id, data, style }
onBeforeEdgeCreate	Un gesto de conexión resolvió un objetivo, antes de que exista el borde	false para vetar, o { accept, data, style, id, directed }
isValidConnection	En vivo, en cada desplazamiento mientras se conecta (debe estar sincronizado y económico)	false marca el objetivo como no válido: no se consulta el gancho antes de la creación
onBeforeNodeEditCommit	Se ha confirmado una edición de nodo	false rechaza la confirmación, dejando intactos los datos del nodo
onBeforeEdgeEditCommit	Se ha confirmado una edición de borde	false rechaza la confirmación, dejando intactos los datos del borde

Una confirmación de edición aceptada se anuncia en el bus de datos: nodeChange / edgeChange, con previousData y nextData — y vuelve a pintar de inmediato; uno rechazado cambia nada en absoluto.

Sus contrapartes de UI: onNodeEdit / onEdgeEdit (devuelve el cuerpo modal) y onNodeEditCancel / onEdgeEditCancel: le permiten reemplazar el editor en lugar de bloquearlo. Aparte de eso, editors.nodeEditor.fields / editors.edgeEditor.fields declara el formar las compilaciones modales predeterminadas (un menú desplegable de relaciones en lugar de un campo de texto libre, decir); sin ellos, se infiere un campo de texto por clave de datos. Un organismo personalizado es propietario del borrador: muta session.draft a medida que el usuario escribe, ya que no hay ningún formulario para leer enviar.

Eliminando

onBeforeDelete recibe la toda la consecuencia del gesto, resuelta por el biblioteca: los elementos que el usuario nombró, más cascadingEdges - los bordes que se eliminan esos nodos destruirían (graph.removeNode cascadas). Los dos nunca se superponen, por lo que cada uno se puede persistir exactamente una vez.

La reducción es por tipo: una matriz suministrada reemplaza el conjunto solicitado de ese tipo, un conjunto omitido La tecla lo deja como se solicitó (por lo que { accept: true } coincide con true, y { accept: true, nodes: [] } no elimina ningún nodo). Un veto no elimina nada, no despide nodeRemove / edgeRemove / noteRemove, y deja la selección intacta.

callbacks: {
    onBeforeDelete: async ({ nodes, edges, cascadingEdges, origin, confirm }) => {
        if (!await confirm({
            title: 'Delete from event?',
            body: `${nodes.length} element(s) and ${edges.length + cascadingEdges.length} link(s).`,
        })) return false

        const saved = await deleteServerSide(nodes, [...edges, ...cascadingEdges])
        // Keep exactly what the server actually deleted.
        return { accept: true, nodes: nodes.filter((n) => saved.has(n.id)) }
    },
}

ctx.confirm(options) abre el modo de confirmación de la biblioteca, resolviendo false en cada cancelar ruta. ctx.origin dice qué prestación solicitó ('bulk-action' o 'context-menu').

Mientras un gancho decide

Un gancho que recupera o guarda antes de responder deja al usuario esperando. Después de 200 ms sin respuesta, el gráfico muestra que está esperando: un cursor de progreso y un pequeño girador al final del borde de vista previa (onBeforeEdgeCreate), en el punto de caída (onBeforeNodeCreate), o como una pastilla "Esperando..." en la parte inferior del lienzo (elimina, editar confirmaciones, onBeforeIngest). Un gancho que responde antes no muestra nada.

Un aviso que el gancho abre a través de su contexto (promptLabel, promptData, confirm) quita la señal mientras está en la pantalla, y la espera después de que se cierra es la misma tratamiento, por lo que un gancho que pregunta y luego guarda lee como ocupado solo mientras está ocupado. Escape durante la espera de un gesto de conexión sale del modo de conexión y elimina la señal; un gancho el que acepta después de eso todavía obtiene su ventaja, ya que es posible que ya lo haya salvado.

UI: {
    busyIndicator: { delay: 300, label: 'Saving…' }, // or false, to draw your own
}

Mientras se muestra la señal, el elemento raíz del gráfico lleva data-pvt-busy.

En su lugar, eliminar la prestación

Un veto es la respuesta incorrecta cuando una operación nunca está permitida (para una integración) cuya verificación de ACL se conoce antes de crear el gráfico, elimine la posibilidad. cada uno La bandera editors.<editor>.enabled (activada a menos que esté explícitamente false) elimina sus botones y entradas del menú:

Bandera	Elimina
editors.deletion.enabled	La barra lateral masiva Delete, y las entradas de eliminación de nodo/borde/nota
editors.nodeCreator.enabled	Crear ▸ Agregar nodo y el menú del lienzo Agregar nodo aquí
editors.nodeEditor.enabled	Crear ▸ Editar nodo
editors.edgeEditor.enabled	El menú de borde Editar borde

Consulte Persistir eliminaciones, ediciones y creaciones tarjeta de galería para los tres ganchos contra un backend sustituto.

Devoluciones de llamada de simulación

Devolución de llamada	Parámetros	Descripción
onSimulationTick	()	Disparó cada tick de simulación.
onSimulationSlowTick	()	Disparado ocasionalmente durante la simulación (cada décimo de simulationTick).

información

El tipo element es svg solo si la opción render.type == "svg".

Ejemplo

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)