/** * timeline-arrows * https://github.com/javdome/timeline-arrows * * Class to easily draw lines to connect items in the vis Timeline module. * * @version 4.8.0 * @date 2025-09-22 * * @copyright (c) Javi Domenech (javdome@gmail.com) * * * @license * timeline-arrows is dual licensed under both * * 1. The Apache 2.0 License * http://www.apache.org/licenses/LICENSE-2.0 * * and * * 2. The MIT License * http://opensource.org/licenses/MIT * * timeline-arrows may be distributed under either license. */ /** * @typedef {(number | string)} VisIdType Timeline view item id. Equivalent to vis.IdType. */ /** * @typedef {(number | string)} ArrowIdType arrow id. */ /** * @typedef ArrowSpec Arrow specification * @property {ArrowIdType} id arrow id * @property {VisIdType} id_item_1 start timeline item id * @property {VisIdType} id_item_2 end timeline item id * @property {string} [title] optional arrow title * @property {string} [color] optional arrow color * @property {number} [direction] arrow direction: 0=no arrows, 1=forward only, 2=backward only, 3=both directions * @property {number} [line] line type: 0=solid (default), 1=dashed * @property {string} [align] if 'center', line is straight * @property {number} [type] line shape: 0=bezier(default), 1=straight, 2=cornered */ /** * @typedef ArrowOptions Arrow configuration options * @property {boolean} [followRelationships] if true, arrows can point backwards and will follow the relationships set in the data * @property {(el: SVGPathElement, title: string) => string } [tooltipConfig] if arrows have a `title` property, the default behavior will add a title attribute that shows on hover. However, you might not want to use the title attribute, but instead your own tooltip configuration. This method takes two arguments, `el` - the arrow - and `title` - the content of the `title` property set in the arrow data. * @property {string} [color] arrow color * @property {number} [strokeWidth] arrow thickness in pixels * @property {boolean} [hideWhenItemsNotVisible] if true, arrows will be hidden when both items is not visible due to timeline zoom. */ /** Arrow set for a vis.js Timeline. */ export default class Arrow { /** * Creates arrows. * @param {*} timeline timeline object * @param {ArrowSpec[]} dependencies arrows * @param {ArrowOptions} [options] */ constructor(timeline: any, dependencies: ArrowSpec[], options?: ArrowOptions); _svg: SVGSVGElement; _timeline: any; /** @private @type {boolean | undefined} if true, arrows can point backwards and will follow the relationships set in the data */ private _followRelationships; /** @private @type {((el: SVGPathElement, title: string) => string) | undefined } */ private _tooltipConfig; /** @private @type {string} color */ private _arrowsColor; /** @private @type {number} arrow thickness in pixels */ private _arrowsStrokeWidth; /** @private @type {boolean} if true, arrows will be hidden when both items is not visible due to timeline zoom */ private _hideWhenItemsNotVisible; /** @private @type {Map} map of color to marker id */ private _colorMarkers; _dependency: ArrowSpec[]; /** @private @type {SVGPathElement[]} */ private _dependencyPath; /** @private @type {string} */ private _arrowHeadId; _initialize(): void; /** @private */ private _getOrCreateMarker; /** @private */ private _createPath; /** @private */ private _drawDependencies; /** * @private * @param {ArrowSpec} dep arrow specification * @param {number} index arrow index */ private _drawArrows; /** @private Función que recibe in Item y devuelve la posición en pantalla del item. */ private _getItemPos; /** * Adds arrow between two timeline items. * @param {ArrowSpec} dep item dependency */ addArrow(dep: ArrowSpec): void; /** * Get arrow by ID. * @param {ArrowIdType} id arrow ID * @returns {ArrowSpec | null} arrow spec, or null */ getArrow(id: ArrowIdType): ArrowSpec | null; /** * Get all Id arrows. * * @return {(ArrowIdType)[]} list of id arrows */ getIdArrows(): (ArrowIdType)[]; /** * Finds arrow with the given id and removes it. * Función que recibe el id de una flecha y la elimina. * @param {ArrowIdType} id arrow id */ removeArrow(id: ArrowIdType): void; /** * Finds all arrows related to one view item and removes them all. * Funcция que recibe el id de un item y elimina la flecha. * @param {VisIdType} id view item id * @returns {(ArrowIdType)[]} list of removed arrow ids */ removeItemArrows(id: VisIdType): (ArrowIdType)[]; /** * Removes the arrows between item 1 and item 2. * @param {VisIdType} itemId1 item id * @param {VisIdType} itemId2 item id * @returns {(ArrowIdType)[]} id of the removed arrow */ removeArrowsBetweenItems(itemId1: VisIdType, itemId2: VisIdType): (ArrowIdType)[]; /** * For backward compatibility * @deprecated use the removeItemArrows method instead. */ removeArrowbyItemId(id: any): void; } /** * Timeline view item id. Equivalent to vis.IdType. */ export type VisIdType = (number | string); /** * arrow id. */ export type ArrowIdType = (number | string); /** * Arrow specification */ export type ArrowSpec = { /** * arrow id */ id: ArrowIdType; /** * start timeline item id */ id_item_1: VisIdType; /** * end timeline item id */ id_item_2: VisIdType; /** * optional arrow title */ title?: string; /** * optional arrow color */ color?: string; /** * arrow direction: 0=no arrows, 1=forward only, 2=backward only, 3=both directions */ direction?: number; /** * line type: 0=solid (default), 1=dashed */ line?: number; /** * if 'center', line is straight */ align?: string; /** * line shape: 0=bezier(default), 1=straight, 2=cornered */ type?: number; }; /** * Arrow configuration options */ export type ArrowOptions = { /** * if true, arrows can point backwards and will follow the relationships set in the data */ followRelationships?: boolean; /** * if arrows have a `title` property, the default behavior will add a title attribute that shows on hover. However, you might not want to use the title attribute, but instead your own tooltip configuration. * This method takes two arguments, `el` - the arrow - and `title` - the content of the `title` property set in the arrow data. */ tooltipConfig?: (el: SVGPathElement, title: string) => string; /** * arrow color */ color?: string; /** * arrow thickness in pixels */ strokeWidth?: number; /** * if true, arrows will be hidden when both items is not visible due to timeline zoom. */ hideWhenItemsNotVisible?: boolean; };