├── README.md ├── bower.json ├── familytree.d.ts ├── familytree.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # ![FamilyTree JS](https://balkangraph.com/content/img/icon-FamilyTreeJS.png) FamilyTree JS 2 | Build family tree app with BALKAN FamilyTree JS JavaScript library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure. 3 | 4 | ![Family Tree JS](https://balkan.app/Content/Img/ft.png) 5 | 6 | 7 | ## [Demos](https://balkan.app/FamilyTreeJS/Demos/BasicUsage)      [Docs](https://balkan.app/FamilyTreeJS/Docs/GettingStarted)      [Download](https://balkan.app/FamilyTreeJS/Download)      [Support](https://balkan.app/FamilyTreeJS/Support) 8 | 9 | ## Features 10 | - Supports both local data and remote data (JSON) 11 | - Smooth expand/collapse effects 12 | - Align the chart in 8 orientations 13 | - Supports pan and zoom 14 | - Edit Form 15 | - Node Customization 16 | - Search 17 | - Scroll Bars 18 | - Lazy Loading 19 | - Exporting 20 | 21 | ## Installation 22 | Option 1 - [standalone build](https://balkan.app/FamilyTreeJS/Docs/GettingStarted) 23 | 24 | Option 2 - NPM 25 | ``` 26 | npm i @balkangraph/familytree.js 27 | ``` 28 | 29 | Option 3 - Bower 30 | ``` 31 | bower install familytree.js 32 | ``` 33 | 34 | 35 | ## Usage 36 | ``` 37 | 38 |
39 | 51 | ``` 52 | 53 | ## 1 click to talk 2 us 54 | 55 | [![OrgChart](https://balkangraph.com/content/img/phone-icon4.png)](https://webcall.me/BALKANGraph) 56 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "familytree.js", 3 | "authors": [ 4 | "BALKAN App" 5 | ], 6 | "description": "FamilyTree JS is a simple, flexible and highly customizable origami JavaScript library.", 7 | "main": "familytree.js", 8 | "keywords": [ 9 | "tree", 10 | "family tree", 11 | "origami", 12 | "hierarchy" 13 | ], 14 | "license": "MIT", 15 | "homepage": "https://balkangraph.com" 16 | } -------------------------------------------------------------------------------- /familytree.d.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | declare class FamilyTree { 4 | 5 | static icon: { 6 | png: (w: string| number, h: string | number, c: string) => string, 7 | pdf: (w: string | number| number, h: string | number, c: string) => string, 8 | svg: (w: string| number, h: string| number, c: string | number) => string, 9 | csv: (w: string| number, h: string| number, c: string| number) => string, 10 | excel: (w: string| number, h: string| number, c: string| number) => string, 11 | edit: (w: string| number, h: string| number, c: string| number) => string, 12 | details: (w: string| number, h: string| number, c: string| number) => string, 13 | remove: (w: string| number, h: string| number, c: string| number) => string, 14 | add: (w: string| number, h: string| number, c: string| number) => string, 15 | xml: (w: string| number, h: string| number, c: string| number) => string, 16 | link: (w: string| number, h: string| number, c: string| number) => string, 17 | happy: (w: string| number, h: string| number, c: string| number) => string, 18 | sad: (w: string| number, h: string| number, c: string| number) => string, 19 | share: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 20 | user: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 21 | addUser: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 22 | close: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string, 23 | ft: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string 24 | } 25 | 26 | /** 27 | * Hides the tree menu 28 | * @param redraw 29 | * @param callback called at the end of the animation 30 | */ 31 | hideTreeMenu(redraw: boolean, callback?: () => void): void; 32 | 33 | /** 34 | * Shows tree menu 35 | * @param id node id 36 | * @param callback called at the end of the animation 37 | */ 38 | showTreeMenu(id: string | number, callback?: () => void): void; 39 | 40 | 41 | /** 42 | * Adds child 43 | * @param data child node data 44 | * @param callback called at the end of the animation 45 | * @param fireEvent indicates if the update event will be called or not 46 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 47 | */ 48 | addChildNode(data: object, callback?: () => void, fireEvent?: boolean): void; 49 | 50 | 51 | /** 52 | * Adds child and partner 53 | * @param id id of the existing partner node 54 | * @param childData child data 55 | * @param partnerData partner data 56 | * @param callback called at the end of the animation 57 | * @param fireEvent indicates if the update event will be called or not 58 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 59 | */ 60 | addChildAndPartnerNodes(id: string | number, childData: object, partnerData: object, callback?: () => void, fireEvent?: boolean): void; 61 | 62 | /** 63 | * 64 | * @param id id of the existing partner node 65 | * @param childIds ids of the child nodes 66 | * @param partnerData partner data 67 | * @param callback called at the end of the animation 68 | * @param fireEvent indicates if the update event will be called or not 69 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 70 | */ 71 | addPartnerAndParentNodes(id: string | number, childIds: Array, partnerData: object, callback?: () => void, fireEvent?: boolean): void; 72 | 73 | 74 | /** 75 | * Adds partner node 76 | * 77 | * data.pids partner id should be an existing id 78 | * @param data new added partner data 79 | * @param callback called at the end of the animation 80 | * @param fireEvent indicates if the update event will be called or not 81 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 82 | */ 83 | addPartnerNode(data: object, callback?: () => void, fireEvent?: boolean): void; 84 | 85 | 86 | /** 87 | * Adds parrent 88 | * @param childId node child id 89 | * @param type mother or father 90 | * @param data new added parent data 91 | * @param callback called at the end of the animation 92 | * @param fireEvent indicates if the update event will be called or not 93 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 94 | */ 95 | addParentNode(childId:number | string, type: 'mid' | 'fid', data:object, callback?: () => void, fireEvent?: boolean): void; 96 | 97 | 98 | /** 99 | * Removes node if the node can be removed 100 | * @param id node id to be removed 101 | * @param callback called at the end of the animation 102 | * @param fireEvent indicates if the update event will be called or not 103 | * {@link https://balkan.app/FamilyTreeJS/Docs/CreateProgrammatically | See doc...} 104 | */ 105 | removeNode(id:number | string, callback?: () => void, fireEvent?: boolean): void; 106 | 107 | /** 108 | * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. * 109 | * @category Event Listeners 110 | * @param type A case-sensitive string representing the event type to listen for. 111 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 112 | */ 113 | on(type: "init" | "node-tree-menu-show" | "field" | "update" | "renderbuttons" | "label" | "render-link" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "node-layout", listener: (sender: FamilyTree, args?: any, args1?: any, args2?: any) => void | boolean): FamilyTree; 114 | 115 | /** 116 | * Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail. 117 | * @param type A string which specifies the type of event for which to remove an event listener 118 | * @param listener The event listener function of the event handler to remove from the event target 119 | */ 120 | 121 | removeListener(type: "init" | "node-tree-menu-show" | "field" | "update" | "renderbuttons" | "label" | "render-link" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple" | "node-initialized" | "node-layout", listener?: () => void): boolean; 122 | 123 | /** 124 | * Occurs when the node data has been updated, removed or added. 125 | * ```typescript 126 | * var family = new FamilyTree('#tree', {}); 127 | * family.onUpdateNode((args) => { 128 | * //return false; to cancel the operation 129 | * }); 130 | * ``` 131 | * @category Event Listeners 132 | * @param listener 133 | */ 134 | onUpdateNode(listener: (this: FamilyTree, args: { 135 | addNodesData: Array, 136 | updateNodesData: Array, 137 | removeNodeId: number | string 138 | }) => void): FamilyTree; 139 | 140 | /** 141 | * Occurs when node tree menu button is clicked. Use this event to modify the nodes in the tree menu. 142 | * ```typescript 143 | * var family = new FamilyTree('#tree', {}); 144 | * family.onNodeTreeMenuShow((args) => { 145 | * }); 146 | * ``` 147 | * @category Event Listeners 148 | * @param listener 149 | */ 150 | onNodeTreeMenuShow(listener: (this: FamilyTree, args: { 151 | nodes: Array, 152 | node: object 153 | }) => void): FamilyTree; 154 | nodes: { [key in any]: FamilyTree.node }; 155 | isVisible: boolean; 156 | visibleNodeIds: Array; 157 | 158 | /** 159 | * @param element HTML element or string selector for example '#tree' 160 | * @param options configuration options 161 | */ 162 | constructor(element: HTMLElement | string, options?: FamilyTree.options); 163 | 164 | 165 | /** 166 | * Updates the node data 167 | * @param newData node data 168 | */ 169 | update(newData: object): FamilyTree; 170 | 171 | /** 172 | * Removes specified node from nodes collection 173 | * @param id identification number of the node 174 | */ 175 | remove(id: string | number): FamilyTree; 176 | /** 177 | * Adds new node to the nodes collection 178 | * @param data node data 179 | */ 180 | add(data: object): FamilyTree; 181 | /** 182 | * Gets node data. 183 | * @param id identification number of the node 184 | */ 185 | get(id: string | number): FamilyTree.node; 186 | /** 187 | * If specified node has assistant/s or partner/s as children will return false. 188 | * @param id identification number of the node 189 | */ 190 | canRemove(id: string | number): boolean; 191 | /** 192 | * Expands specified nodes. 193 | * @param id the id of the node that will not move during the animation 194 | * @param ids node ids that will be expanded 195 | * @param callback called after the animation completes 196 | */ 197 | expand(id: string | number, ids: Array | "all", callback?: () => void): void; 198 | /** 199 | * Collapses specified nodes. 200 | * @param id the id of the node that will not move 201 | * @param ids node ids that will be collapsed 202 | * @param callback called after the animation completes 203 | */ 204 | collapse(id: string | number, ids: Array, callback?: () => void): void; 205 | /** 206 | * Expand/Collapse lists of nodes. 207 | * @param id the id of the node that will not move 208 | * @param expandIds expand all nodes with ids 209 | * @param collapseIds collpase all nodes with ids 210 | * @param callback called after the animation completes 211 | */ 212 | expandCollapse(id: string | number, expandIds: Array, collapseIds: Array, callback?: () => void): void; 213 | /** 214 | * Changes roots order. 215 | * @param id id of a node that will not change is position, can be null 216 | * @param roots roots id array in the required order 217 | * @param callback called after the roots are changed and animation completes 218 | */ 219 | changeRoots(id: string | number, roots: Array, callback?: () => void): void; 220 | /** 221 | * Maximize the node. Without parameters maximize all nodes. 222 | * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes 223 | * @param horizontalCenter center horizontally 224 | * @param verticalCenter center vertically 225 | * @param callback called when the animation completes 226 | */ 227 | maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void; 228 | /** 229 | * Minimize the node. Without parameters minimize all nodes. 230 | * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes 231 | * @param callback called when the animation completes 232 | */ 233 | minimize(id?: string | number, callback?: () => void): void; 234 | /** 235 | * Load nodes data. 236 | * @param data node data array 237 | * @param callback function called after the load 238 | */ 239 | load(data: Array, callback?: () => void): FamilyTree; 240 | 241 | /** 242 | * Updates the node data, redraws the family and fires update event. 243 | * @param data node data 244 | * @param callback function called when the animation completes 245 | * @param fireEvent if it set to true the update event is called 246 | */ 247 | updateNode(data: object, callback?: () => void, fireEvent?: boolean): void; 248 | 249 | /** 250 | * Loads nodes from xml. 251 | * @param xml Xml with node structure 252 | * @param callback function called after the load 253 | */ 254 | loadXML(xml: string, callback?: () => void): FamilyTree; 255 | /** 256 | * Gets nodes as xml. 257 | */ 258 | getXML(): string; 259 | /** 260 | * Draws the family. 261 | * @param action Action for example FamilyTree.action.centerNode, default is FamilyTree.action.update 262 | * @param actionParams parameters for the action 263 | * @param callback called when the animation completes 264 | */ 265 | draw(action?: FamilyTree.action, actionParams?: any, callback?: () => void): void; 266 | /** 267 | * Gets the width of the container. 268 | */ 269 | width(): number; 270 | /** 271 | * Gets the height of the container. 272 | */ 273 | height(): number; 274 | /** 275 | * Gets the view box attribute of the svg html element. 276 | */ 277 | getViewBox(): Array; 278 | /** 279 | * Sets the view box attribute of the svg html element. 280 | * @param viewBox 281 | */ 282 | setViewBox(viewBox: Array): void; 283 | /** 284 | * Gets the current scale of the family. 285 | * @param viewBox 286 | */ 287 | getScale(viewBox?: Array): number; 288 | 289 | /** 290 | * Sets the current scale of the family. 291 | * Returns the actual scale limited by scaleMax and scaleMin 292 | * @param newScale new scale value 293 | */ 294 | setScale(newScale: number): number; 295 | /** 296 | * Animates specified node with ripple animation - highlight the node. 297 | * @param id the id of the node 298 | * @param clientX x value of the ripple center in the node 299 | * @param clientY y value of the ripple center in the node 300 | */ 301 | ripple(id: string | number, clientX?: number, clientY?: number): void; 302 | /** 303 | * Centers specified node on the screen. 304 | * @param nodeId the id of the node 305 | * @param options parentState: FamilyTree.COLLAPSE_PARENT_NEIGHBORS, childrenState: FamilyTree.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false 306 | * @param callback called when the animation completes 307 | */ 308 | center(nodeId: string | number, options?: { 309 | parentState: any, 310 | childrenState: any, 311 | rippleId: string | number, 312 | vertical: boolean, 313 | horizontal: boolean 314 | } | null, callback?: () => void): void; 315 | /** 316 | * Fits the content to the visible area. 317 | * @param callback called when the animation completes 318 | */ 319 | fit(callback?: () => void): void; 320 | /** 321 | * Toggles full screen mode. 322 | */ 323 | toggleFullScreen(): void; 324 | /** 325 | * Gets the node as {@link FamilyTree.node} object. 326 | * @param nodeId 327 | */ 328 | getNode(nodeId: string | number): FamilyTree.node; 329 | /** 330 | * Sets layout. 331 | * @param layout layout type 332 | * @param lcn lyout config name for the specified sub tree 333 | */ 334 | 335 | /** 336 | * Adds new node to the nodes collection, redraws the family and fires remove event 337 | * @param data node data 338 | * @param callback called at the end of animation 339 | * @param fireEvent indicates if the add event will be called or not 340 | */ 341 | addNode(data: object, callback?: () => void, fireEvent?: boolean): void; 342 | 343 | setLayout(layout: FamilyTree.layout | number, lcn?: string): void; 344 | /** 345 | * Sets orientation. 346 | * @param orientation orientation type 347 | * @param lcn lyout config name for the specified sub tree 348 | * @param callback called at the end of animation 349 | */ 350 | setOrientation(orientation: FamilyTree.orientation, lcn?: string, callback?: () => void): void; 351 | 352 | 353 | /** 354 | * Moves specified nodes to the visible area. 355 | * @param ids Array of node ids 356 | * @param callback called at the end of animation 357 | */ 358 | moveNodesToVisibleArea(ids: Array, callback?: () => void): void; 359 | 360 | /** 361 | * Search in the family. 362 | * @param value search for value 363 | * @param searchInFields search in field names 364 | * @param retrieveFields retrive data for fields 365 | * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...} 366 | */ 367 | search(value: string, searchInFields?: Array, retrieveFields?: Array): Array<{ 368 | id: number | string, 369 | name: string, 370 | __score: number, 371 | __searchField: string, 372 | __searchMarks: string 373 | }>; 374 | /** 375 | * Gets collpased node ids of the specifeid node 376 | * @param node 377 | */ 378 | getCollapsedIds(node: FamilyTree.node): Array; 379 | /** 380 | * State to url. 381 | * {@link https://balkan.app/FamilyTreeJS/Docs/State | See doc...} 382 | */ 383 | stateToUrl(): string; 384 | /** 385 | * Genereates unique identification number that can be used for new nodes 386 | */ 387 | generateId(): string; 388 | /** 389 | * Destroys the object. 390 | */ 391 | destroy(): void; 392 | /** 393 | * Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines. 394 | * After the replacment updates the UI 395 | * @param old_new_ids dictionary containing old and new ids 396 | * @param callback called when the replacment completes 397 | */ 398 | replaceIds(old_new_ids: { 399 | [key: string]: string | number 400 | }, callback?: () => void): void; 401 | /** 402 | * Adds curved link. 403 | * @param from from node with id 404 | * @param to to node with id 405 | * @param label link label 406 | * @param template link template, for example 'orange' 407 | */ 408 | addClink(from: string | number, to: string | number, label?: string, template?: string): FamilyTree; 409 | /** 410 | * Removes curved link. 411 | * @param from from node with id 412 | * @param to to node with id 413 | */ 414 | removeClink(from: string | number, to: string | number): FamilyTree; 415 | /** 416 | * Adds second link. 417 | * @param from from node with id 418 | * @param to to node with id 419 | * @param label link label 420 | * @param template link template, for example 'orange' 421 | */ 422 | addSlink(from: string | number, to: string | number, label?: string, template?: string): FamilyTree; 423 | /** 424 | * Removes second link. 425 | * @param from from node with id 426 | * @param to to node with id 427 | */ 428 | removeSlink(from: string | number, to: string | number): FamilyTree; 429 | /** 430 | * Gets svg html element 431 | */ 432 | getSvg(): SVGAElement; 433 | /** 434 | * Gets node html element 435 | * @param id node id 436 | */ 437 | getNodeElement(id: string | number): HTMLElement; 438 | /** 439 | * Gets menu button html element 440 | */ 441 | getMenuButton(): HTMLElement; 442 | /** 443 | * Exports the details form to PDF. 444 | * @param options export options 445 | * @param callback called when the export completes 446 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 447 | */ 448 | exportPDFProfile(options: FamilyTree.exportOptions, callback?: () => void): void; 449 | /** 450 | * Exports the details form to PDF. 451 | * @param options export options 452 | * @param callback called when the export completes 453 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 454 | */ 455 | exportPNGProfile(options: FamilyTree.exportOptions, callback?: () => void): void; 456 | /** 457 | * Exports to CSV 458 | * @param filename The name of the exported file 459 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 460 | */ 461 | exportCSV(filename: string | FamilyTree.exportCSVXMLJSONOptions): void; 462 | /** 463 | * Exports to XML 464 | * @param filename The name of the exported file 465 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 466 | */ 467 | exportXML(filename: string | FamilyTree.exportCSVXMLJSONOptions): void; 468 | /** 469 | * Exports to JSON 470 | * @param filename The name of the exported file 471 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 472 | */ 473 | exportJSON(filename: string | FamilyTree.exportCSVXMLJSONOptions ): void; 474 | 475 | /** 476 | * Shares node data, uses build-in device sharing functionallity. 477 | * @param id node id 478 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 479 | */ 480 | shareProfile(id: string | number): void; 481 | /** 482 | * Exports to PDF document 483 | * @param options export options 484 | * @param callback called when the export completes 485 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 486 | */ 487 | exportPDF(options?: FamilyTree.exportOptions, callback?: () => void): void; 488 | /** 489 | * Exports to PNG document 490 | * @param options export options 491 | * @param callback called when the export completes 492 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 493 | */ 494 | exportPNG(options?: FamilyTree.exportOptions, callback?: () => void): void; 495 | /** 496 | * Exports to SVG document 497 | * @param options export options 498 | * @param callback called when the export completes 499 | * {@link https://balkan.app/FamilyTreeJS/Docs/Exporting | See doc...} 500 | */ 501 | exportSVG(options?: FamilyTree.exportOptions, callback?: () => void): void; 502 | /** 503 | * Imports CSV file. 504 | * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...} 505 | */ 506 | importCSV(): void; 507 | /** 508 | * Imports XML file. 509 | * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...} 510 | */ 511 | importXML(): void; 512 | 513 | /** 514 | * Imports JSON file. 515 | * {@link https://balkan.app/FamilyTreeJS/Docs/Importing | See doc...} 516 | */ 517 | importJSON(): void; 518 | 519 | /** 520 | * Zoom out or zoom in the family. 521 | * @param delta true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out. 522 | * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height. 523 | * @param shouldAnimate should animate 524 | * @param callback called when the animation completes 525 | */ 526 | zoom(delta: boolean | number, center?: Array, shouldAnimate?: boolean, callback?: () => void): void; 527 | 528 | /** 529 | * Magnify(Zoom in) specific node in the family. 530 | * @param id id of the node 531 | * @param scale scale to magnify 532 | * @param front show on front or back 533 | * @param anim animation type 534 | */ 535 | magnify(id: string | number, scale: number, front?: boolean, anim?: FamilyTree.anim | null, callback?: () => void): void; 536 | 537 | /** 538 | * Starts the move 539 | * @param movePosition move position 540 | * @param tick callback function in each step 541 | * @param func the name of the animation function, for example FamilyTree.anim.inSin 542 | * @param duration duration before going to 100 percent speed 543 | */ 544 | moveStart(movePosition: FamilyTree.move, tick?: () => void, func?: FamilyTree.anim, duration?: number): void; 545 | /** 546 | * Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method. 547 | * @param callback called when the animation completes 548 | */ 549 | undo(callback?: () => void): void; 550 | /** 551 | * Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method. 552 | * @param callback called when the animation completes 553 | */ 554 | redo(callback?: () => void): void; 555 | 556 | /** 557 | * Clears all Redo stack steps. 558 | */ 559 | clearRedo(): void; 560 | 561 | /** 562 | * Clears all Undo stack steps. 563 | */ 564 | clearUndo(): void; 565 | /** 566 | * Returns the number of Undo stack steps 567 | */ 568 | undoStepsCount(): number; 569 | /** 570 | * Returns the number of Redo stack steps 571 | */ 572 | redoStepsCount(): number; 573 | /** 574 | * Ends the move 575 | */ 576 | moveEnd(): void; 577 | 578 | /** 579 | * The onField() method of the FamilyTree class sets up a function that will be called whenever the specified event is delivered to the target. 580 | * ```typescript 581 | * var family = new FamilyTree('#tree', {}); 582 | * family.onField((args) => { 583 | * //return false; to cancel 584 | * }); 585 | * family.load(nodes); 586 | * ``` 587 | * @category Event Listeners 588 | * @param listener 589 | */ 590 | onField(listener: (this: FamilyTree, args: { 591 | /** 592 | * the node 593 | */ 594 | node: FamilyTree.node, 595 | /** 596 | * node data json object 597 | */ 598 | data: object, 599 | /** 600 | * value of the filed, can be changed in the event 601 | */ 602 | value: any, 603 | /** 604 | * svg or html element of the filed, can be changed in the event 605 | */ 606 | element: string, 607 | /** 608 | * name of the field 609 | */ 610 | name: string 611 | /** 612 | * field template name 613 | */ 614 | field: string 615 | }) => void | boolean): FamilyTree; 616 | 617 | /** 618 | * Occurs when the nodes in FamilyTree has been created and loaded to the DOM. 619 | * ```typescript 620 | * var family = new FamilyTree('#tree', {}); 621 | * family.onInit(() => { 622 | * }); 623 | * family.load(nodes); 624 | * ``` 625 | * @category Event Listeners 626 | * @param listener 627 | */ 628 | onInit(listener: (this: FamilyTree) => void): FamilyTree; 629 | 630 | 631 | 632 | /** 633 | * The onRedraw event occurs when the family is redrawed. 634 | * ```typescript 635 | * var family = new FamilyTree('#tree', {}); 636 | * family.onRedraw(() => { 637 | * }); 638 | * family.load(nodes); 639 | * ``` 640 | * @category Event Listeners 641 | * @param listener 642 | */ 643 | onRedraw(listener: (this: FamilyTree) => void): FamilyTree; 644 | 645 | /** 646 | * The onExpandCollpaseButtonClick event occurs when the family is redrawed. 647 | * ```typescript 648 | * var family = new FamilyTree('#tree', {}); 649 | * family.onExpandCollpaseButtonClick(() => { 650 | * //return false; to cancel the operation 651 | * }); 652 | * family.load(nodes); 653 | * ``` 654 | * @category Event Listeners 655 | * @param listener 656 | */ 657 | onExpandCollpaseButtonClick(listener: (this: FamilyTree, args: { 658 | /** 659 | * Indicates id the operation is collaps or expand 660 | */ 661 | collapsing: boolean, 662 | /** 663 | * the id of the clicked node 664 | */ 665 | id: number | string, 666 | /** 667 | * node ids that will be expanded or collapsed 668 | */ 669 | ids: Array 670 | }) => void): FamilyTree; 671 | /** 672 | * Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image. 673 | * ```typescript 674 | * var family = new FamilyTree('#tree', {}); 675 | * family.onExportStart(() => { 676 | * args.styles += ''; 677 | * //return false; to cancel the operation 678 | * }); 679 | * family.load(nodes); 680 | * ``` 681 | * @category Event Listeners 682 | * @param listener 683 | */ 684 | onExportStart(listener: (this: FamilyTree, args: 685 | { 686 | /** 687 | * the content to be exported 688 | * 689 | * this property is initialized only for PDF/PNG/SVG exports 690 | */ 691 | content: string, 692 | /** 693 | * export options 694 | * 695 | * this property is initialized only for PDF/PNG/SVG exports 696 | */ 697 | options: FamilyTree.exportOptions, 698 | /** 699 | * add extra styles 700 | * 701 | * this property is initialized only for PDF/PNG/SVG exports 702 | */ 703 | styles: string, 704 | /** 705 | * an object that discribes pages to be exported 706 | * 707 | * this property is initialized only for PDF/PNG exports 708 | */ 709 | pages: any, 710 | /** 711 | * extension 712 | * 713 | * this property is initialized only for CSV/XML 714 | */ 715 | ext: string, 716 | /** 717 | * filename, you can change the filename here 718 | * 719 | * this property is initialized only for CSV/XML exports 720 | */ 721 | filename: string, 722 | /** 723 | * array of node objects 724 | * 725 | * this property is initialized only for CSV/XML exports 726 | */ 727 | nodes: Array 728 | }) => void): FamilyTree; 729 | /** 730 | * Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument. 731 | * ```typescript 732 | * var family = new FamilyTree('#tree', {}); 733 | * family.onExportEnd(() => { 734 | * //return false; to cancel the operation for example id you prefer the exported document to not download 735 | * }); 736 | * family.load(nodes); 737 | * ``` 738 | * @category Event Listeners 739 | * @param listener 740 | */ 741 | onExportEnd(listener: (this: FamilyTree, args: 742 | /** 743 | * for PDF/PNG 744 | */ 745 | { 746 | /** 747 | * the array buffer is the exported document, you can save it on a server or send it via email 748 | * 749 | * this property is initialized only for PDF/PNG exports 750 | */ 751 | ArrayBuffer: ArrayBuffer 752 | /** 753 | * extension 754 | * 755 | * this property is initialized only for CSV/XML exports 756 | */ 757 | ext: string, 758 | /** 759 | * filename, you can change the filename here 760 | * 761 | * this property is initialized only for CSV/XML exports 762 | */ 763 | filename: string, 764 | /** 765 | * an array of node objects 766 | * 767 | * this property is initialized only for CSV/XML exports 768 | */ 769 | nodes: Array, 770 | /** 771 | * csv ot xml string 772 | * 773 | * this property is initialized only for CSV/XML/SVG exports 774 | */ 775 | content: string 776 | /** 777 | * export options 778 | * 779 | * this property is initialized only for SVG exports 780 | */ 781 | options: FamilyTree.exportOptions, 782 | /** 783 | * add extra styles 784 | * 785 | * this property is initialized only for SVG exports 786 | */ 787 | styles: string, 788 | }) => void): FamilyTree; 789 | /** 790 | * On node click event listener. 791 | * ```typescript 792 | * var family = new FamilyTree('#tree', {}); 793 | * family.onNodeClick(() => { 794 | * //return false; to cancel the operation 795 | * }); 796 | * family.load(nodes); 797 | * ``` 798 | * @category Event Listeners 799 | * @param listener 800 | */ 801 | onNodeClick(listener: (this: FamilyTree, args: { 802 | /** 803 | * node JSON object 804 | */ 805 | node: FamilyTree.node, 806 | /** 807 | * the browser event 808 | */ 809 | event: any 810 | }) => void): FamilyTree; 811 | /** 812 | * On node double click event listener. 813 | * ```typescript 814 | * var family = new FamilyTree('#tree', {}); 815 | * family.onNodeDoubleClick(() => { 816 | * //return false; to cancel the operation 817 | * }); 818 | * family.load(nodes); 819 | * ``` 820 | * @category Event Listeners 821 | * @param listener 822 | */ 823 | onNodeDoubleClick(listener: (this: FamilyTree, args: { 824 | /** 825 | * clicked node data 826 | */ 827 | data: object 828 | }) => void): FamilyTree; 829 | 830 | element: HTMLElement; 831 | 832 | editUI: FamilyTree.editUI; 833 | searchUI: FamilyTree.searchUI; 834 | nodeMenuUI: FamilyTree.menuUI; 835 | filterUI: FamilyTree.filterUI; 836 | xScrollUI: FamilyTree.xScrollUI; 837 | yScrollUI: FamilyTree.yScrollUI; 838 | undoRedoUI: FamilyTree.undoRedoUI; 839 | nodeCircleMenuUI: FamilyTree.circleMenuUI; 840 | nodeContextMenuUI: FamilyTree.menuUI; 841 | menuUI: FamilyTree.menuUI; 842 | toolbarUI: FamilyTree.toolbarUI; 843 | config: FamilyTree.options; 844 | roots: Array; 845 | 846 | /** 847 | * Uploads a file 848 | * 849 | * let chart = new OrgChart('#tree', {}); 850 | * chart.editUI.on('element-btn-click', function (sender, args) { 851 | * OrgChart.fileUploadDialog(function (file) { 852 | * var formData = new FormData(); 853 | * formData.append('file', file); 854 | * alert('upload the file'); 855 | * }) 856 | * }); 857 | * chart.load(nodes) 858 | * 859 | */ 860 | static fileUploadDialog(callback: (file: any) => void): void; 861 | 862 | /** 863 | * Export multiple charts or a chart by team 864 | * 865 | * let chart1 = new OrgChart('#tree', {}); 866 | * let chart2 = new OrgChart('#tree', {}); 867 | * document.getElementById('btn_export').addEventListener('click', function(){ 868 | * OrgChart.exportPDFFromCharts([ 869 | * { chartInstance: chart1, scale: 'fit', format: 'A4', header: 'OrgChart 1' }, 870 | * { chartInstance: chart2, scale: 'fit', format: 'A4', header: 'OrgChart 2' } 871 | * ], "test.pdf"); 872 | * }); 873 | * 874 | */ 875 | static exportPDFFromCharts(optionList: Array<{ 876 | chartInstance: OrgChart, 877 | margin?: Array, 878 | padding?: number, 879 | landscape?: boolean, 880 | type?: "preview" | "nodes", 881 | scale?: "fit" | number, 882 | format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal", 883 | header?: string, 884 | footer?: string, 885 | expandChildren?: boolean, 886 | min?: boolean, 887 | nodeId? : number | string 888 | }>, filename?: string, openInNewTab?: boolean, callback?: (arrayBuffer: ArrayBuffer) => void): void; 889 | 890 | 891 | /** 892 | * Check if the screen is mobile 893 | * 894 | * let isMobile = OrgChart.isMobile() 895 | * 896 | */ 897 | static isMobile(): boolean; 898 | /** 899 | * Checks if the used libraris is licnsed or not 900 | */ 901 | static isTrial(): boolean; 902 | /** 903 | * Count all children nodes of the specified id. 904 | * @param family FamilyTree instance 905 | * @param node 906 | * @param count 907 | */ 908 | static childrenCount(family: FamilyTree, node: FamilyTree.node): number; 909 | static childrenTotalCount(family: FamilyTree, node: FamilyTree.node): number; 910 | static collapsedChildrenCount(family: FamilyTree, node: FamilyTree.node): number; 911 | static collapsedChildrenTotalCount(family: FamilyTree, node: FamilyTree.node): number; 912 | static getRootOf(node: FamilyTree.node): FamilyTree.node; 913 | 914 | /** 915 | * is null, empty or undefined 916 | * @param val 917 | */ 918 | static isNEU(val: any): boolean; 919 | static gradientCircleForDefs(id: string | number, colors: Array | string, r: number, strokeWidth: number): string; 920 | static convertCsvToNodes(text: string) : Array; 921 | /** 922 | * SVG Path rounding function. Takes an input path string or commands and outputs a path 923 | * string where all line-line corners have been rounded. 924 | * @param commands The SVG input path or commands array 925 | * @param radius 926 | * @param useFractionalRadius The amount to round the corners, either a value in the SVG coordinate space, or, if useFractionalRadius is true, a value from 0 to 1. 927 | * @returns A new SVG path string with the rounding 928 | */ 929 | static roundPathCorners(commands: string | Array>, radius: number, useFractionalRadius: boolean) : string; 930 | static convertNodesToCsv(nodes: Array) : string; 931 | static wrapText(text: string, field: Object): string; 932 | 933 | static filterUI: { 934 | textFilterBy: string, 935 | all: string, 936 | }; 937 | 938 | /** 939 | * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image. 940 | */ 941 | static loading: { 942 | show: (family: FamilyTree) => void, 943 | hide: (family: FamilyTree) => void 944 | } 945 | 946 | static clinkTemplates: { 947 | [key: string]: FamilyTree.linkTemplate 948 | } 949 | 950 | static slinkTemplates: { 951 | [key: string]: FamilyTree.linkTemplate 952 | } 953 | 954 | 955 | static templates: { [key: string]: FamilyTree.template} ; 956 | 957 | 958 | static scroll: { 959 | visible?: boolean, 960 | smooth?: number, 961 | speed?: number, 962 | safari?: { smooth?: number; speed?: number; }, 963 | edge?: { smooth?: number; speed?: number; }, 964 | chrome?: { smooth?: number; speed?: number; }, 965 | firefox?: { smooth?: number; speed?: number; }, 966 | opera?: { smooth?: number; speed?: number; } 967 | }; 968 | 969 | 970 | static events: { 971 | /** 972 | * layout event listener is obsolete, use node-layout instead 973 | * @param type 974 | * @param listener 975 | */ 976 | on(type: "layout", listener: (args: any, args1: any, args2: any) => void): void 977 | }; 978 | static state: { clear(stateName: string): void }; 979 | 980 | static animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: FamilyTree.anim, callback?: Function, tick?: boolean): void; 981 | 982 | static miniMap: { 983 | colors: Array, 984 | selectorBackgroundColor: string, 985 | focusStroke: string, 986 | opacity: number, 987 | border: string, 988 | width: number, 989 | height: number, 990 | padding: number, 991 | position: Object 992 | }; 993 | 994 | static VERSION: string; 995 | /** 996 | * @ignore 997 | */ 998 | static TEXT_THRESHOLD: number; 999 | /** 1000 | * @ignore 1001 | */ 1002 | static IMAGES_THRESHOLD: number; 1003 | /** 1004 | * @ignore 1005 | */ 1006 | static LINKS_THRESHOLD: number; 1007 | /** 1008 | * @ignore 1009 | */ 1010 | static BUTTONS_THRESHOLD: number; 1011 | /** 1012 | * @ignore 1013 | */ 1014 | static ANIM_THRESHOLD: number; 1015 | 1016 | /** 1017 | * @ignore 1018 | */ 1019 | static IT_IS_LONELY_HERE: string; 1020 | static IT_IS_LONELY_HERE_LINK: string; 1021 | /** 1022 | * @ignore 1023 | */ 1024 | static RES: { 1025 | /** 1026 | * @ignore 1027 | */ 1028 | IT_IS_LONELY_HERE_LINK: string 1029 | }; 1030 | 1031 | 1032 | /** 1033 | * @ignore 1034 | */ 1035 | static FIRE_DRAG_NOT_CLICK_IF_MOVE: number; 1036 | /** 1037 | * @ignore 1038 | */ 1039 | static STRING_TAGS: boolean; 1040 | /** 1041 | * Search placeholder 1042 | */ 1043 | static SEARCH_PLACEHOLDER: string; 1044 | /** 1045 | * Search help symbol. 1046 | */ 1047 | static SEARCH_HELP_SYMBOL: string; 1048 | 1049 | /** 1050 | * Close search result list by click outside list and clean search input 1051 | */ 1052 | static SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE: boolean; 1053 | /** 1054 | * @ignore 1055 | */ 1056 | static IMPORT_MESSAGE: string; 1057 | /** 1058 | * @ignore 1059 | */ 1060 | static FIXED_POSITION_ON_CLICK: boolean; 1061 | /** 1062 | * Render links before nodes, default is false 1063 | */ 1064 | static RENDER_LINKS_BEFORE_NODES: boolean; 1065 | /** 1066 | * Render clinks before nodes, default is false 1067 | */ 1068 | static RENDER_CLINKS_BEFORE_NODES: boolean; 1069 | /** 1070 | * @ignore 1071 | */ 1072 | static MIXED_LAYOUT_ALL_NODES: boolean; 1073 | /** 1074 | * @ignore 1075 | */ 1076 | static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean; 1077 | /** 1078 | * Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value 1079 | */ 1080 | static MIXED_LAYOUT_IF_NUMBER_OF_CHILDREN_IS_MORE_THEN: boolean; 1081 | /** 1082 | * @ignore 1083 | */ 1084 | static LINK_ROUNDED_CORNERS: number; 1085 | /** 1086 | * @ignore 1087 | */ 1088 | static MOVE_STEP: number; 1089 | /** 1090 | * @ignore 1091 | */ 1092 | static CLINK_CURVE: number; 1093 | /** 1094 | * @ignore 1095 | */ 1096 | static SEARCH_RESULT_LIMIT: number; 1097 | /** 1098 | * @ignore 1099 | */ 1100 | static MAX_DEPTH: number; 1101 | /** 1102 | * @ignore 1103 | */ 1104 | static SCALE_FACTOR: number; 1105 | /** 1106 | * @ignore 1107 | */ 1108 | static LAZY_LOADING_FACTOR: number; 1109 | /** 1110 | * Can be used to instruct the browser to defer loading of FamilyTree that are off-screen until the user scrolls near them. 1111 | * The init event listener will be called as soon as the FamilyTree become visible. 1112 | */ 1113 | static LAZY_LOADING: boolean; 1114 | 1115 | /** 1116 | * Minimum in search input before triggering the search. 1117 | */ 1118 | static MINIMUM_SYMBOLS_IN_SEARCH_INPUT: number; 1119 | 1120 | /** 1121 | * Hides the Edit Form when the family is moved with pan 1122 | */ 1123 | static HIDE_EDIT_FORM_ON_PAN: boolean; 1124 | static ARRAY_FIELDS: Array; 1125 | 1126 | /** 1127 | * Csv import and export delimiter/separator 1128 | */ 1129 | static CSV_DELIMITER: string; 1130 | 1131 | /** 1132 | * 1133 | */ 1134 | static EDITFORM_CLOSE_BTN: string; 1135 | /** 1136 | * Escape HTML to prevent Cross-site scripting (also known as XSS) attacks 1137 | */ 1138 | static ESCAPE_HTML: boolean; 1139 | 1140 | /** 1141 | * Align children of assistant vertically 1142 | */ 1143 | static VERTICAL_CHILDREN_ASSISTANT: boolean; 1144 | 1145 | /** 1146 | * Cut nodes when export with pages, dafault is false 1147 | */ 1148 | static EXPORT_PAGES_CUT_NODES: boolean; 1149 | 1150 | /** 1151 | * Reset movable nodes to its original position when expand or collapse 1152 | */ 1153 | static RESET_MOVABLE_ONEXPANDCOLLAPSE: boolean; 1154 | 1155 | /** 1156 | * Filter menu is ordered alphabetically 1157 | */ 1158 | static FILTER_ALPHABETICALLY: boolean; 1159 | 1160 | /** 1161 | * @ignore 1162 | */ 1163 | 1164 | static randomId(): any; 1165 | static searchUI: any; 1166 | static editUI: any; 1167 | static pdfPrevUI: FamilyTree.pdfPrevUI; 1168 | // static menuUI: any; 1169 | static attr: any; 1170 | static toolbarUI: any; 1171 | static elements: any; 1172 | 1173 | static expcollOpenTag: any; 1174 | static upOpenTag: any; 1175 | static grCloseTag: any; 1176 | } 1177 | 1178 | declare namespace FamilyTree { 1179 | interface node { 1180 | fid?: string | number, 1181 | /** 1182 | * mother id - same fid you provided in the source node, the default value is null if not provided or if node with the same id does not exist 1183 | */ 1184 | mid?: string | number, 1185 | /** 1186 | * partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined. 1187 | */ 1188 | } 1189 | interface options { 1190 | nodeTreeMenu?: boolean 1191 | } 1192 | interface template { 1193 | nodeTreeMenuButton: string, 1194 | nodeTreeMenuCloseButton: string 1195 | } 1196 | 1197 | /** 1198 | * deprecated 1199 | * @ignore 1200 | */ 1201 | const none: number; 1202 | 1203 | /** 1204 | * @ignore 1205 | */ 1206 | const COLLAPSE_PARENT_NEIGHBORS: number; 1207 | 1208 | /** 1209 | * @ignore 1210 | */ 1211 | const COLLAPSE_SUB_CHILDRENS: number; 1212 | 1213 | 1214 | var template: object; 1215 | 1216 | interface node { 1217 | /** 1218 | * the same id you provided in the source node 1219 | */ 1220 | id?: string | number, 1221 | /** 1222 | * partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined. 1223 | */ 1224 | ppid?: string | number, 1225 | /** 1226 | * a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null 1227 | */ 1228 | parent?: node, 1229 | /** 1230 | * ub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist. 1231 | */ 1232 | stpid?: string | number, 1233 | /** 1234 | * - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid 1235 | */ 1236 | stParent?: node, 1237 | isPartner?: boolean, 1238 | partnerSeparation?: number, 1239 | /** 1240 | * array of ids, always initialized 1241 | */ 1242 | childrenIds?: Array, 1243 | /** 1244 | * array of children nodes, initialized on demand if all children are collpased it will be empty array 1245 | */ 1246 | children?: Array, 1247 | /** 1248 | * array of sub tree children root node ids, always initialized 1249 | */ 1250 | stChildrenIds?: Array, 1251 | /** 1252 | * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array 1253 | */ 1254 | stChildren?: Array, 1255 | /** 1256 | * array of string values, the same array you provided in the source node 1257 | */ 1258 | tags?: Array, 1259 | /** 1260 | * template name, you can specify multiple templates with tags in one family 1261 | */ 1262 | templateName?: string, 1263 | /** 1264 | * a reference to the left node neighbor, the default value is undefined 1265 | */ 1266 | leftNeighbor?: node | undefined, 1267 | /** 1268 | * a reference to the right node neighbor, the default value is undefined 1269 | */ 1270 | rightNeighbor?: node | undefined, 1271 | /** 1272 | * x position, default value undefined 1273 | */ 1274 | x?: number | undefined, 1275 | /** 1276 | * y position, default value undefined 1277 | */ 1278 | y?: number | undefined, 1279 | /** 1280 | * width of the node, default value undefined 1281 | */ 1282 | w?: number | undefined, 1283 | /** 1284 | * height of the node, default value undefined 1285 | */ 1286 | h?: number | undefined, 1287 | /** 1288 | * if the node is assistant is true if not false if the node is not initialized is undefined 1289 | */ 1290 | isAssistant?: boolean | undefined, 1291 | /** 1292 | * sub tree container nodes array, property only for the root node, default value undefined 1293 | */ 1294 | stContainerNodes?: Array | undefined, 1295 | /** 1296 | * it is set only if you define order option, default value undefined 1297 | */ 1298 | order?: number | undefined, 1299 | /** 1300 | * true if the node is collpased, false if it is not and undefined if not initalized 1301 | */ 1302 | collapsed?: boolean | undefined, 1303 | /** 1304 | * a level of the node starting from zero 1305 | */ 1306 | level?: number, 1307 | /** 1308 | * true if the node is minimized, default value undefined 1309 | */ 1310 | min?: boolean | undefined, 1311 | /** 1312 | * sub levels, default value undefined 1313 | */ 1314 | subLevels?: number | undefined, 1315 | /** 1316 | * set only if the node contains sub trees and padding is defined in the template, default value undefined 1317 | */ 1318 | padding?: number | undefined, 1319 | /** 1320 | * layout configuration name, default value undefined 1321 | */ 1322 | lcn?: string | undefined, 1323 | /** 1324 | * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined 1325 | */ 1326 | isSplit?: boolean | undefined, 1327 | /** 1328 | * indicates if the node is child of partner node 1329 | */ 1330 | isChildOfPartner?: boolean, 1331 | /** 1332 | * move the the node on x axis 1333 | */ 1334 | movex?: number | undefined, 1335 | /** 1336 | * move the the node on y axis 1337 | */ 1338 | movey?: number | undefined 1339 | } 1340 | 1341 | 1342 | interface template 1343 | { 1344 | defs?: string, 1345 | size?: Array, 1346 | expandCollapseSize?: number, 1347 | linkAdjuster?: { 1348 | fromX?: number, 1349 | fromY?: number, 1350 | toX?: number, 1351 | toY?: number 1352 | }, 1353 | ripple?: { 1354 | radius?: number, 1355 | color?: string, 1356 | rect?: Array 1357 | }, 1358 | assistanseLink?: string, 1359 | svg?: string, 1360 | link?: string, 1361 | pointer?: string, 1362 | node?: string, 1363 | plus?: string, 1364 | minus?: string, 1365 | nodeMenuButton?: string, 1366 | menuButton?: string, 1367 | img_0?: string, 1368 | link_field_0?: string, 1369 | editFormHeaderColor?: string, 1370 | nodeCircleMenuButton?: object, 1371 | min?: template, 1372 | [name: string]: any 1373 | } 1374 | 1375 | interface editUI { 1376 | /** 1377 | * Inits edit ui 1378 | * @param obj 1379 | */ 1380 | init(obj: FamilyTree): void; 1381 | /** 1382 | * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target. * 1383 | * @category Event Listeners 1384 | * @param type A case-sensitive string representing the event type to listen for. 1385 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 1386 | */ 1387 | on(type: "show" | "save" | "cancel" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: any, args1: any, args2: any) => void | boolean): editUI; 1388 | /** 1389 | * Shows the edit form for the specified node id 1390 | * @param id node id 1391 | * @param detailsMode If true the edit form is in read only mode 1392 | * @param dontAnim 1393 | */ 1394 | show(id: string | number, detailsMode?: boolean, dontAnim?: boolean): void; 1395 | /** 1396 | * Hides the edit form 1397 | */ 1398 | hide(): void; 1399 | content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string; 1400 | /** 1401 | * Sets the avatar of the edit form 1402 | * @param avatarUrl avatar url 1403 | */ 1404 | setAvatar(avatarUrl?: string): void; 1405 | // static renderHeaderContent(title: string, photo: string, node: FamilyTree.node, data: object): string; 1406 | } 1407 | 1408 | interface searchUI { 1409 | init(obj: FamilyTree): void; 1410 | /** 1411 | * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target. * 1412 | * @category Event Listeners 1413 | * @param type A case-sensitive string representing the event type to listen for. 1414 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 1415 | */ 1416 | on(type: "add-item" | "show-items" | "hide" | "searchclick" , listener: (sender: searchUI, args: any, args1: any, args2: any) => void | boolean): searchUI; 1417 | /** 1418 | * Hides the search grid 1419 | */ 1420 | hide(): void; 1421 | /** 1422 | * Finds filed data by specified value 1423 | * @param value search for value 1424 | */ 1425 | find(value: string): void; 1426 | createItem(img: string, id: string | number, first: string, second: string): string; 1427 | helpView(): string; 1428 | addMatchTag(id: string | number) : boolean; 1429 | input: HTMLElement; 1430 | searchTableWrapper: HTMLElement; 1431 | lastSearch: Array; 1432 | /** 1433 | * FamilyTree instance 1434 | */ 1435 | instance: FamilyTree; 1436 | /** 1437 | * Search in field with abbreviation. 1438 | */ 1439 | searchFieldsAbbreviation: {[key: string]: string}; 1440 | } 1441 | 1442 | 1443 | interface filterUI { 1444 | init(instance: FamilyTree): void; 1445 | update(): void; 1446 | /** 1447 | * Opens filter Tab 1448 | * @param filterTabName the name of the filter tab 1449 | */ 1450 | show(filterTabName: string): void; 1451 | /** 1452 | * Hides the filter tabs 1453 | */ 1454 | hide(): void; 1455 | addFilterTag(data: object): boolean; 1456 | /** 1457 | * The on() method of the filterUI interface sets up a function that will be called whenever the specified event is delivered to the target. * 1458 | * @category Event Listeners 1459 | * @param type A case-sensitive string representing the event type to listen for. 1460 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 1461 | */ 1462 | on(type: "update" | "add-item" | "add-filter" | "show-items" , listener: (sender: filterUI, args: any, args1: any, args2: any) => void | boolean): filterUI; 1463 | filterBy?: any; 1464 | element: HTMLElement; 1465 | instance: FamilyTree; 1466 | } 1467 | 1468 | 1469 | 1470 | 1471 | interface xScrollUI { 1472 | addListener(svg: HTMLElement): void; 1473 | create(width: number): void; 1474 | setPosition(width: number): void; 1475 | on(type: "change", listener: (sender: xScrollUI, args: any, args1: any, args2: any) => void | boolean): xScrollUI; 1476 | element: HTMLElement; 1477 | } 1478 | 1479 | interface yScrollUI { 1480 | addListener(svg: HTMLElement): void; 1481 | create(width: number): void; 1482 | setPosition(width: number): void; 1483 | on(type: "change", listener: (sender: yScrollUI, args: any, args1: any, args2: any) => void | boolean): yScrollUI; 1484 | element: HTMLElement; 1485 | } 1486 | 1487 | interface menuUI { 1488 | init(obj: FamilyTree, menu: { [key: string]: menu }): void; 1489 | /** 1490 | * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target. * 1491 | * @category Event Listeners 1492 | * @param type A case-sensitive string representing the event type to listen for. 1493 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 1494 | */ 1495 | on(type: "show", listener: (sender: menuUI, args: any, args1: any, args2: any) => void | boolean): menuUI; 1496 | /** 1497 | * Shows menu next to html element 1498 | * @param stickToElement 1499 | * @param firstNodeId 1500 | * @param secondNodeId 1501 | * @param menu 1502 | */ 1503 | showStickIn(stickToElement: HTMLElement, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void; 1504 | /** 1505 | * Returns true if the menu is visible 1506 | */ 1507 | isVisible(): boolean; 1508 | 1509 | /** 1510 | * Hieds the menu 1511 | */ 1512 | hide(): void; 1513 | /** 1514 | * Shows menu by x,y position 1515 | * @param x 1516 | * @param y 1517 | * @param firstNodeId 1518 | * @param secondNodeId 1519 | * @param menu 1520 | */ 1521 | show(x: number | HTMLElement, y?: number, firstNodeId?: string | number, secondNodeId?: string | number, menu?: { [key: string]: menu }): void; 1522 | } 1523 | 1524 | interface circleMenuUI { 1525 | /** 1526 | * Inits circle menu instance 1527 | * @param obj 1528 | * @param menu 1529 | */ 1530 | init(obj: FamilyTree, menu: { [key: string]: menu }): void; 1531 | /** 1532 | * Shows circle menu 1533 | * @param nodeId 1534 | * @param menu 1535 | */ 1536 | show(nodeId: string | number, menu?: { [key: string]: menu }): void; 1537 | /** 1538 | * Hides circle menu 1539 | */ 1540 | hide(): void; 1541 | /** 1542 | * The on() method of the circleMenuUI interface sets up a function that will be called whenever the specified event is delivered to the target. * 1543 | * @category Event Listeners 1544 | * @param type A case-sensitive string representing the event type to listen for. 1545 | * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 1546 | */ 1547 | on(type: "click" | "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: any, args1: any, args2: any) => void | boolean): circleMenuUI; 1548 | } 1549 | 1550 | interface undoRedoUI { 1551 | /** 1552 | * Inits undoRedoUI 1553 | * @param instance 1554 | */ 1555 | init(instance: FamilyTree): void; 1556 | /** 1557 | * Refreshes the UI buttonss 1558 | */ 1559 | refresh(): void; 1560 | /** 1561 | * @ignore 1562 | */ 1563 | on(type: "change", listener: (sender: undoRedoUI, args: any) => void | boolean): undoRedoUI; 1564 | /** 1565 | * Occurs when the undo redo buttons needs to updated. 1566 | * ```typescript 1567 | * var family = new FamilyTree('#tree', {}); 1568 | * family.undoRedoUI.onChange((args) => { 1569 | * //return false; to cancel the operation 1570 | * }); 1571 | * ``` 1572 | * @category Event Listeners 1573 | * @param listener 1574 | */ 1575 | onChange(listener: (args: { 1576 | /** 1577 | * Undo stack steps count 1578 | */ 1579 | undoStepsCount: number, 1580 | /** 1581 | * Redo stack steps count 1582 | */ 1583 | redoStepsCount: number 1584 | }) => void): undoRedoUI; 1585 | instance: FamilyTree; 1586 | } 1587 | 1588 | interface pdfPrevUI { 1589 | show(family: FamilyTree, options: exportOptions): pdfPrevUI; 1590 | hide(family: FamilyTree): void; 1591 | 1592 | } 1593 | 1594 | interface keyNavigation { 1595 | /** 1596 | * Set focus to specified id on initial load 1597 | */ 1598 | focusId: number | string 1599 | } 1600 | 1601 | interface toolbarUI { 1602 | init(obj: FamilyTree, toolbar: toolbar): void; 1603 | showLayout(): void; 1604 | hideLayout(): void; 1605 | 1606 | 1607 | expandAllIcon?: string; 1608 | fitIcon?: string; 1609 | openFullScreenIcon?: string; 1610 | closeFullScreenIcon?: string; 1611 | zoomInIcon?: string; 1612 | zoomOutIcon?: string; 1613 | layoutIcon?: string; 1614 | } 1615 | 1616 | 1617 | 1618 | interface toolbar { 1619 | layout?: boolean, 1620 | zoom?: boolean, 1621 | fit?: boolean, 1622 | expandAll?: boolean, 1623 | fullScreen?: boolean 1624 | } 1625 | 1626 | interface miniMap { 1627 | colors?: Array, 1628 | selectorBackgroundColor?: string, 1629 | backgroundColor?: string, 1630 | focusStroke?: string, 1631 | opacity?: Number, 1632 | border?: string, 1633 | width?: Number, 1634 | height?: Number, 1635 | padding?: Number, 1636 | position?: FamilyTree.position, 1637 | draggable?: boolean 1638 | } 1639 | 1640 | interface position { 1641 | top?: string, 1642 | left?: string, 1643 | right?: string, 1644 | bottom?: string 1645 | } 1646 | 1647 | interface exportOptions { 1648 | margin?: Array, 1649 | padding?: number, 1650 | landscape?: boolean, 1651 | filename?: string, 1652 | scale?: "fit" | number, 1653 | format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal", 1654 | header?: string, 1655 | footer?: string, 1656 | openInNewTab?: boolean, 1657 | expandChildren?: boolean, 1658 | min?: boolean, 1659 | nodeId? : number | string 1660 | } 1661 | 1662 | interface exportCSVXMLJSONOptions { 1663 | filename?: string, 1664 | expandChildren?: boolean, 1665 | min?: boolean, 1666 | nodeId? : number | string 1667 | } 1668 | 1669 | interface linkTemplate { 1670 | defs?: string, 1671 | link?: string, 1672 | label?: string, 1673 | labelPosition?: string 1674 | } 1675 | interface menu { 1676 | [key: string]: { 1677 | text: string, 1678 | icon?: string, 1679 | onClick?: Function 1680 | } 1681 | } 1682 | interface circleMenu { 1683 | [key: string]: { 1684 | text: string, 1685 | icon?: string, 1686 | color?: string, 1687 | draggable?: boolean 1688 | } 1689 | } 1690 | interface editFormElement { 1691 | type?: string, 1692 | label?: string, 1693 | binding?: string, 1694 | options?: Array, 1695 | btn?: string, 1696 | vlidators?: { required?: string, email?: string } 1697 | } 1698 | interface link { 1699 | from?: string | number, 1700 | to?: string | number, 1701 | template?: string, 1702 | label?: string 1703 | } 1704 | interface backdrop { 1705 | id?: string | number, 1706 | levels?: number, 1707 | color?: string, 1708 | opacity?: number, 1709 | except?: Array 1710 | } 1711 | interface dottedLine { 1712 | from?: string | number, 1713 | to?: string | number, 1714 | tags?: Array 1715 | } 1716 | interface orderBy { 1717 | field?: string, 1718 | desc?: boolean 1719 | } 1720 | interface move { 1721 | left?: boolean, 1722 | right?: boolean, 1723 | up?: boolean, 1724 | down?: boolean, 1725 | } 1726 | 1727 | enum orientation { 1728 | top, 1729 | bottom, 1730 | right, 1731 | left, 1732 | top_left, 1733 | bottom_left, 1734 | right_top, 1735 | left_top 1736 | } 1737 | enum layout { 1738 | normal, 1739 | mixed, 1740 | tree, 1741 | treeLeftOffset, 1742 | treeRightOffset, 1743 | treeLeft, 1744 | treeRight, 1745 | grid 1746 | } 1747 | 1748 | enum align { 1749 | center, 1750 | orientation 1751 | } 1752 | enum anim { 1753 | inPow, 1754 | outPow, 1755 | inOutPow, 1756 | inSin, 1757 | outSin, 1758 | inOutSin, 1759 | inExp, 1760 | outExp, 1761 | inOutExp, 1762 | inCirc, 1763 | outCirc, 1764 | inOutCirc, 1765 | rebound, 1766 | inBack, 1767 | outBack, 1768 | inOutBack, 1769 | impulse, 1770 | expPulse 1771 | } 1772 | enum match { 1773 | height, 1774 | width, 1775 | boundary 1776 | } 1777 | 1778 | enum movable { 1779 | node, 1780 | tree, 1781 | detachTree 1782 | } 1783 | 1784 | 1785 | enum action { 1786 | update, 1787 | expand, 1788 | collapse, 1789 | exporting, 1790 | init, 1791 | centerNode, 1792 | insert, 1793 | maximize, 1794 | minimize, 1795 | edit, 1796 | details, 1797 | expandCollapse, 1798 | pan, 1799 | zoom, 1800 | ctrlZoom, 1801 | xScroll, 1802 | yScroll, 1803 | scroll, 1804 | none 1805 | } 1806 | 1807 | 1808 | 1809 | 1810 | 1811 | 1812 | interface options { 1813 | /** 1814 | * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*. 1815 | * ```typescript 1816 | * var family = new FamilyTree('#tree', { 1817 | * interactive: false 1818 | * }); 1819 | * ``` 1820 | */ 1821 | interactive?: boolean, 1822 | 1823 | /** 1824 | * Color mode. Default value - *light*. 1825 | * ```typescript 1826 | * var family = new FamilyTree('#tree', { 1827 | * mode: "dark" 1828 | * }); 1829 | * ``` 1830 | */ 1831 | mode?: "dark" | "light", 1832 | /** 1833 | * Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - *true*. 1834 | * ```typescript 1835 | * var family = new FamilyTree('#tree', { 1836 | * lazyLoading: false 1837 | * }); 1838 | * ``` 1839 | */ 1840 | lazyLoading?: boolean, 1841 | 1842 | 1843 | 1844 | /** 1845 | * Enables advanced search. Default value is true. 1846 | * ```typescript 1847 | * var family = new FamilyTree('#tree', { 1848 | * enableSearch: false 1849 | * }); 1850 | * ``` 1851 | */ 1852 | enableSearch?: boolean, 1853 | 1854 | /** 1855 | * You can disable family pan. Default value - *true*. 1856 | * ```typescript 1857 | * var family = new FamilyTree('#tree', { 1858 | * enablePan: false 1859 | * }); 1860 | * ``` 1861 | */ 1862 | enablePan?: boolean, 1863 | 1864 | /** 1865 | * Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - *false*. 1866 | * ```typescript 1867 | * var family = new FamilyTree('#tree', { 1868 | * enableTouch: true 1869 | * }); 1870 | * ``` 1871 | */ 1872 | 1873 | enableTouch?: boolean, 1874 | /** 1875 | * Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the family. Default value - *false*. 1876 | * ```typescript 1877 | * var family = new FamilyTree('#tree', { 1878 | * keyNavigation: true 1879 | * }); 1880 | * var family = new FamilyTree('#tree', { 1881 | * keyNavigation: { focusId: 5 } 1882 | * }); 1883 | * ``` 1884 | * {@link https://balkan.app/FamilyTreeJS/Docs/KeyNavigation | See doc...} 1885 | */ 1886 | keyNavigation?: boolean | FamilyTree.keyNavigation, 1887 | /** 1888 | * Shows mini map over the expanded tree. Default value - *false*. 1889 | * ```typescript 1890 | * var family = new FamilyTree('#tree', { 1891 | * miniMap: true 1892 | * }); 1893 | * ``` 1894 | */ 1895 | miniMap?: boolean, 1896 | /** 1897 | * Enables edit, add, remove and other node operations. Also you can define your own node operation. 1898 | * ```typescript 1899 | * var family = new FamilyTree('#tree', { 1900 | * nodeMenu:{ 1901 | * details: {text:"Details"}, 1902 | * edit: {text:"Edit"}, 1903 | * add: {text:"Add"}, 1904 | * remove: {text:"Remove"}, 1905 | * myMenuItem: {text:"My node menu Item", onClick: function {}} 1906 | * } 1907 | * }); 1908 | * ``` 1909 | * {@link https://balkan.app/FamilyTreeJS/Docs/Menus | See doc...} 1910 | */ 1911 | nodeMenu?: FamilyTree.menu; 1912 | /** 1913 | * With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template. 1914 | * ```typescript 1915 | * var family = new FamilyTree('#tree', { 1916 | * nodeCircleMenu: { 1917 | * editNode: { 1918 | * icon: FamilyTree.icon.edit(24, 24, '#aeaeae'), 1919 | * text: "Edit node", 1920 | * color: "white" 1921 | * }, 1922 | * addClink: { 1923 | * icon: FamilyTree.icon.link(24, 24, '#aeaeae'), 1924 | * text: "Add C link", 1925 | * color: '#fff', 1926 | * draggable: true 1927 | * } 1928 | * } 1929 | * }); 1930 | * ``` 1931 | * {@link https://balkan.app/FamilyTreeJS/Docs/Menus | See doc...} 1932 | */ 1933 | nodeCircleMenu?: FamilyTree.circleMenu, 1934 | /** 1935 | * Customizable context menu. Also you can define your own node operation. 1936 | * ```typescript 1937 | * var family = new FamilyTree('#tree', { 1938 | * nodeContextMenu:{ 1939 | * details: {text:"Details"}, 1940 | * edit: {text:"Edit"}, 1941 | * add: {text:"Add"}, 1942 | * remove: {text:"Remove"} 1943 | * myMenuItem: {text:"My node menu Item", onClick: function {}} 1944 | * } 1945 | * }); 1946 | * ``` 1947 | * {@link https://balkan.app/FamilyTreeJS/Docs/Menus | See doc...} 1948 | */ 1949 | nodeContextMenu?: FamilyTree.menu, 1950 | /** 1951 | * Enables export to csv, export to svg and other FamilyTree operations. Also you can define your own FamilyTree operation. 1952 | * ```typescript 1953 | * var family = new FamilyTree('#tree', { 1954 | * menu:{ 1955 | * svg: { text: "Export SVG" }, 1956 | * csv: { text: "Export CSV" } 1957 | * myMenuItem: {text:"My node menu Item", onClick: function {}} 1958 | * } 1959 | * }); 1960 | * ``` 1961 | * {@link https://balkan.app/FamilyTreeJS/Docs/Menus | See doc...} 1962 | */ 1963 | menu?: FamilyTree.menu, 1964 | /** 1965 | * With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc. 1966 | * ```typescript 1967 | * var family = new FamilyTree('#tree', { 1968 | * toolbar: { 1969 | * layout: true, 1970 | * zoom: true, 1971 | * fit: true, 1972 | * expandAll: false, 1973 | * fullScreen: true 1974 | * }, 1975 | * }); 1976 | * ``` 1977 | */ 1978 | toolbar?: FamilyTree.toolbar, 1979 | /** 1980 | * Stops the family locking to the top of the screen once you move it. 1981 | * ```typescript 1982 | * var family = new FamilyTree('#tree', { 1983 | * sticky: false 1984 | * }); 1985 | * ``` 1986 | */ 1987 | sticky?: boolean, 1988 | /** 1989 | * nodeMouseClick can accept the following values: 1990 | * - FamilyTree.action.edit - will open the edit view for the clicked node on the right hand side 1991 | * - FamilyTree.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only. 1992 | * - FamilyTree.action.expandCollapse - will expand or collapse the children nodes 1993 | * - FamilyTree.action.none - do nothing on node click event 1994 | * - FamilyTree.action.pan - allows you to move the family in any direction 1995 | * 1996 | * Default value - *FamilyTree.action.details* 1997 | * ```typescript 1998 | * var family = new FamilyTree('#tree', { 1999 | * nodeMouseClick: FamilyTree.action.edit 2000 | * }); 2001 | * ``` 2002 | */ 2003 | nodeMouseClick?: FamilyTree.action, 2004 | /** 2005 | * nodeMouseDbClick can accept the following values: 2006 | * - FamilyTree.action.edit - will open the edit view for the clicked node on the right hand side 2007 | * - FamilyTree.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only 2008 | * - FamilyTree.action.expandCollapse - will expand or collapse the children nodes 2009 | * - FamilyTree.action.none - do nothing on node click event 2010 | * 2011 | * Default value - *FamilyTree.action.none* 2012 | * ```typescript 2013 | * var family = new FamilyTree('#tree', { 2014 | * nodeMouseDbClick: FamilyTree.action.edit 2015 | * }); 2016 | * ``` 2017 | */ 2018 | nodeMouseDbClick?: FamilyTree.action, 2019 | /** 2020 | * mouseScrool can accept the following values: 2021 | * - FamilyTree.action.zoom - will zoom in/out on mouse scroll 2022 | * - FamilyTree.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed 2023 | * - FamilyTree.action.xScroll - left/right move of the family on mouse scroll 2024 | * - FamilyTree.action.yScroll - up/down move of the family on mouse scroll 2025 | * - FamilyTree.action.none - do nothing on mouse scroll 2026 | * 2027 | * Default value - *FamilyTree.action.zoom* 2028 | * ```typescript 2029 | * var family = new FamilyTree('#tree', { 2030 | * mouseScrool: FamilyTree.action.ctrlZoom 2031 | * }); 2032 | * ``` 2033 | */ 2034 | mouseScrool?: FamilyTree.action, 2035 | /** 2036 | * Shows horizontal scrollbar. Default value - *false*. 2037 | * ```typescript 2038 | * var family = new FamilyTree('#tree', { 2039 | * showXScroll: true 2040 | * }); 2041 | * ``` 2042 | */ 2043 | showXScroll?: boolean , 2044 | /** 2045 | * movable node, move the node anywhere on the canvas 2046 | */ 2047 | movable?: FamilyTree.movable, 2048 | /** 2049 | * Shows vertical scrollbar. Default value - *false*. 2050 | * ```typescript 2051 | * var family = new FamilyTree('#tree', { 2052 | * showYScroll: true 2053 | * }); 2054 | * ``` 2055 | */ 2056 | showYScroll?: boolean , 2057 | /** 2058 | * Set template if you want to change the appearance of the family. Family Tree JS comes with number of build-in templates: 2059 | * - ana 2060 | * - ula 2061 | * - olivia 2062 | * - belinda 2063 | * - rony 2064 | * - mery 2065 | * - polina 2066 | * - mila 2067 | * - diva 2068 | * - base 2069 | * - isla 2070 | * - deborah 2071 | * 2072 | * Default value - *ana*. 2073 | * ```typescript 2074 | * var family = new FamilyTree('#tree', { 2075 | * template: 'olivia' 2076 | * }); 2077 | * ``` 2078 | * {@link https://balkan.app/FamilyTreeJS/Docs/PredefinedTemplates | See doc...} 2079 | */ 2080 | template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string, 2081 | /** 2082 | * With tags option you can: 2083 | * - Set a specific template for tagged node/s {@link https://balkan.app/FamilyTreeJS/Docs/MultipleTemplates | See doc...} 2084 | * - Set node as assistant {@link https://balkan.app/FamilyTreeJS/Docs/Assistant | See doc...} 2085 | * - Change node menu, circle menu and context menu items for tagged node/s {@link https://balkan.app/FamilyTreeJS/Docs/Menus | See doc...} 2086 | * - Set the node level {@link https://balkan.app/FamilyTreeJS/Demos/SubLevels | See demo...} 2087 | * - Set specific options for sub trees like layout templates etc {@link https://balkan.app/FamilyTreeJS/Docs/SubTrees | See doc...} 2088 | * ```typescript 2089 | * var family = new FamilyTree('#tree', { 2090 | * tags: { 2091 | * myTag: {template: 'olivia'} 2092 | * }, 2093 | * nodes: [{id: 1}, {id: 2, tags: ['myTag']}] 2094 | * }); 2095 | * ``` 2096 | */ 2097 | tags?: { 2098 | [key: string]: { 2099 | template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string, 2100 | subLevels?: number, 2101 | nodeMenu?: FamilyTree.menu, 2102 | nodeCircleMenu?: FamilyTree.circleMenu, 2103 | nodeContextMenu?: FamilyTree.menu, 2104 | subTreeConfig?: { 2105 | orientation?: FamilyTree.orientation, 2106 | levelSeparation?: number, 2107 | mixedHierarchyNodesSeparation?: number, 2108 | subtreeSeparation?: number, 2109 | siblingSeparation?: number, 2110 | layout?: FamilyTree.layout | number, 2111 | columns?: number, 2112 | collapse?: { 2113 | level?: number, 2114 | allChildren?: boolean 2115 | } 2116 | } 2117 | }; 2118 | }, 2119 | /** 2120 | * Minimize/Maximize node. The template has to have min defined. Default value - *false*. 2121 | * ```typescript 2122 | * var family = new FamilyTree('#tree', { 2123 | * min: true 2124 | * }); 2125 | * ``` 2126 | * {@link https://balkan.app/FamilyTreeJS/Docs/MinMax | See doc...} 2127 | */ 2128 | min?: boolean, 2129 | /** 2130 | * Node binding in Family Tree JS maps node data to node template parameters. 2131 | * ```typescript 2132 | * var family = new FamilyTree('#tree', { 2133 | * nodeBinding: { 2134 | * field_0: "name" 2135 | * }, 2136 | * nodes: [ 2137 | * { id: 1, name: "Amber McKenzie" } 2138 | * ] 2139 | * }); 2140 | * ``` 2141 | */ 2142 | nodeBinding?: { [key: string]: string }, 2143 | /** 2144 | * Link binding in Family Tree JS maps node data to link template parameters. 2145 | * ```typescript 2146 | * var family = new FamilyTree('#tree', { 2147 | * linkBinding: { 2148 | * link_field_0: "createdAt" 2149 | * }, 2150 | * nodes: [ 2151 | * { id: "1", name: "Amber McKenzie" }, 2152 | * { id: "2", pid: "1", createdAt: "Since 08/08/2018" }, 2153 | * { id: "3", pid: "1", createdAt: "Since 05/04/2018" } 2154 | * ] 2155 | * }); 2156 | * ``` 2157 | * {@link https://balkan.app/FamilyTreeJS/Docs/Link | See doc...} 2158 | */ 2159 | linkBinding?: { [key: string]: string }, 2160 | /** 2161 | * Search by the fields defined in searchFields. 2162 | * ```typescript 2163 | * var family = new FamilyTree('#tree', { 2164 | * searchFields: ["name", "title", etc...] 2165 | * }); 2166 | * ``` 2167 | * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...} 2168 | */ 2169 | searchFields?: Array, 2170 | /** 2171 | * Displays a field in the search result. 2172 | * ```typescript 2173 | * var family = new FamilyTree('#tree', { 2174 | * searchDisplayField: "name" 2175 | * }); 2176 | * ``` 2177 | * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...} 2178 | */ 2179 | searchDisplayField?: string, 2180 | /** 2181 | * Search by weight of the fields. 2182 | * ```typescript 2183 | * var family = new FamilyTree('#tree', { 2184 | * searchFieldsWeight: { 2185 | * "Name": 100, //percent 2186 | * "Title": 20 //percent 2187 | * } 2188 | * }); 2189 | * ``` 2190 | * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...} 2191 | */ 2192 | searchFieldsWeight?: { [key: string]: number }, 2193 | /** 2194 | * Search in field with abbreviation. 2195 | * ```typescript 2196 | * var family = new FamilyTree('#tree', { 2197 | * searchFieldsAbbreviation: { 2198 | * "n": "name", 2199 | * "a": "My Address" 2200 | * } 2201 | * }); 2202 | * ``` 2203 | * {@link https://balkan.app/FamilyTreeJS/Docs/Search | See doc...} 2204 | */ 2205 | searchFieldsAbbreviation?: { [key: string]: string }, 2206 | /** 2207 | * Array of node data JSON objects. nodes option is the data source of the family. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties. 2208 | * - id - unique identifier, it clould be integer or string 2209 | * - pid - is the parent id 2210 | * - stpid - subtree parent id 2211 | * - ppid - parent partner id 2212 | * - tags - array of strings 2213 | * ```typescript 2214 | * var family = new FamilyTree('#tree', { 2215 | * nodes: [ 2216 | * { id: 1 }, 2217 | * { id: 2, pid: 1, tags: ["Sales"] }, 2218 | * { id: 3, stpid: 2 } 2219 | * ] 2220 | * }); 2221 | * ``` 2222 | */ 2223 | nodes?: Array, 2224 | /** 2225 | * Adds curved link. 2226 | * ```typescript 2227 | * var family = new FamilyTree('#tree', { 2228 | * clinks: [ 2229 | * from: 4, to: 0, label: 'text'}, 2230 | * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' }, 2231 | * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' } 2232 | * ] 2233 | * }); 2234 | * ``` 2235 | */ 2236 | clinks?: Array, 2237 | /** 2238 | * Adds second link. 2239 | * ```typescript 2240 | * var family = new FamilyTree('#tree', { 2241 | * slinks: [ 2242 | * from: 4, to: 0, label: 'text'}, 2243 | * {from: 4, to: 5, template: 'blue', label: '4 reports to 3' }, 2244 | * {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' } 2245 | * ] 2246 | * }); 2247 | * ``` 2248 | */ 2249 | slinks?: Array, 2250 | 2251 | /** 2252 | * Adds backdrops to the specidied nodes. 2253 | * ```typescript 2254 | * var family = new FamilyTree('#tree', { 2255 | * backdrops: [ 2256 | * { id: 5, levels: 2, color: '#039BE5', opacity: 0.2 } 2257 | * ] 2258 | * }); 2259 | * ``` 2260 | */ 2261 | backdrops?: Array, 2262 | 2263 | 2264 | /** 2265 | * Adds dotted line. 2266 | * ```typescript 2267 | * var family = new FamilyTree('#tree', { 2268 | * dottedLines: [ 2269 | * {from: 6, to: 1 } 2270 | * ] 2271 | * }); 2272 | * ``` 2273 | */ 2274 | dottedLines?: Array, 2275 | 2276 | /** 2277 | * Adds group dotted line. 2278 | * ```typescript 2279 | * var family = new FamilyTree('#tree', { 2280 | * groupDottedLines: [ 2281 | * {from: 6, to: 1 } 2282 | * ] 2283 | * }); 2284 | * ``` 2285 | */ 2286 | groupDottedLines?: Array, 2287 | 2288 | /** 2289 | * The gap between each level. Default value - *60* 2290 | * ```typescript 2291 | * var family = new FamilyTree('#tree', { 2292 | * levelSeparation: 50 2293 | * }); 2294 | * ``` 2295 | */ 2296 | levelSeparation?: number, 2297 | /** 2298 | * The gap between nodes in a subtree. Default value - *20* 2299 | * ```typescript 2300 | * var family = new FamilyTree('#tree', { 2301 | * siblingSeparation: 50 2302 | * }); 2303 | * ``` 2304 | */ 2305 | siblingSeparation?: number, 2306 | /** 2307 | * The padding between the node and the backdrop. Default value - *15* 2308 | * ```typescript 2309 | * var family = new FamilyTree('#tree', { 2310 | * backdropSeparation: 15 2311 | * }); 2312 | * ``` 2313 | */ 2314 | backdropSeparation?: number, 2315 | /** 2316 | * The gap between subtrees. Default value - *40* 2317 | * ```typescript 2318 | * var family = new FamilyTree('#tree', { 2319 | * subtreeSeparation: 50 2320 | * }); 2321 | * ``` 2322 | */ 2323 | subtreeSeparation?: number, 2324 | /** 2325 | * The gap between nodes in vertical layout. Default value - *20* 2326 | * ```typescript 2327 | * var family = new FamilyTree('#tree', { 2328 | * mixedHierarchyNodesSeparation: 5 2329 | * }); 2330 | * ``` 2331 | */ 2332 | mixedHierarchyNodesSeparation?: number, 2333 | /** 2334 | * Set the assistant separation value. Default value - *100* 2335 | * ```typescript 2336 | * var family = new FamilyTree('#tree', { 2337 | * assistantSeparation: 150 2338 | * }); 2339 | * ``` 2340 | */ 2341 | assistantSeparation?: number, 2342 | /** 2343 | * Minimum gap between partner and node with partners. Default value - *50* 2344 | * ```typescript 2345 | * var family = new FamilyTree('#tree', { 2346 | * minPartnerSeparation: 100 2347 | * }); 2348 | * ``` 2349 | */ 2350 | minPartnerSeparation?: number, 2351 | /** 2352 | * Gap between partner links. Default value - *20* 2353 | * ```typescript 2354 | * var family = new FamilyTree('#tree', { 2355 | * partnerChildrenSplitSeparation: 50 2356 | * }); 2357 | * ``` 2358 | */ 2359 | partnerChildrenSplitSeparation?: number, 2360 | /** 2361 | * Gap between partners. Default value - *15* 2362 | * ```typescript 2363 | * var family = new FamilyTree('#tree', { 2364 | * partnerNodeSeparation: 30 2365 | * }); 2366 | * ``` 2367 | */ 2368 | partnerNodeSeparation?: number, 2369 | /** 2370 | * The number of colums if the family has multiple root nodes. Default value - *10* 2371 | * ```typescript 2372 | * var family = new FamilyTree('#tree', { 2373 | * columns: 1 2374 | * }); 2375 | * ``` 2376 | */ 2377 | columns?: number, 2378 | /** 2379 | * The padding option sets the padding area on all four sides of the FamilyTree. Default value - *30* 2380 | * ```typescript 2381 | * var family = new FamilyTree('#tree', { 2382 | * padding: 20 2383 | * }); 2384 | * ``` 2385 | */ 2386 | padding?: number, 2387 | /** 2388 | * Specifies the orientation of the Family Tree JS. could accept one of the following values: 2389 | * - FamilyTree.orientation.top 2390 | * - FamilyTree.orientation.bottom 2391 | * - FamilyTree.orientation.right 2392 | * - FamilyTree.orientation.left 2393 | * - FamilyTree.orientation.top_left 2394 | * - FamilyTree.orientation.bottom_left 2395 | * - FamilyTree.orientation.right_top 2396 | * - FamilyTree.orientation.left_top 2397 | * 2398 | * Default value - *FamilyTree.orientation.top* 2399 | * ```typescript 2400 | * var family = new FamilyTree('#tree', { 2401 | * orientation: FamilyTree.orientation.bottom 2402 | * }); 2403 | * ``` 2404 | */ 2405 | orientation?: FamilyTree.orientation, 2406 | /** 2407 | * Sets the layout algoritm: 2408 | * - FamilyTree.layout.normal 2409 | * - FamilyTree.layout.mixed 2410 | * - FamilyTree.layout.tree 2411 | * - FamilyTree.layout.treeLeftOffset 2412 | * - FamilyTree.layout.treeRightOffset 2413 | * - FamilyTree.layout.treeLeft 2414 | * - FamilyTree.layout.treeRight 2415 | * - FamilyTree.layout.grid 2416 | * 2417 | * Default value - *FamilyTree.layout.normal* 2418 | * ```typescript 2419 | * var family = new FamilyTree('#tree', { 2420 | * layout: FamilyTree.layout.mixed 2421 | * }); 2422 | * ``` 2423 | */ 2424 | layout?: FamilyTree.layout | number, 2425 | /** 2426 | * Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string 2427 | * The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated 2428 | */ 2429 | layoutGridColumns?: string | number, 2430 | /** 2431 | * The scale factor determines what fraction of the entire scale is visible at one time. 2432 | * - FamilyTree.match.height 2433 | * - FamilyTree.match.width 2434 | * - FamilyTree.match.boundary 2435 | * - [number] 2436 | * 2437 | * Default value - *1* 2438 | * ```typescript 2439 | * var family = new FamilyTree('#tree', { 2440 | * scaleInitial: FamilyTree.match.boundary 2441 | * }); 2442 | * ``` 2443 | * {@link https://balkan.app/FamilyTreeJS/Docs/Layout | See doc...} 2444 | */ 2445 | scaleInitial?: number | FamilyTree.match, 2446 | /** 2447 | * Determines the minimum scale factor. Default value - *0.1* 2448 | * ```typescript 2449 | * var family = new FamilyTree('#tree', { 2450 | * scaleMin: 0.2 2451 | * }); 2452 | * ``` 2453 | */ 2454 | scaleMin?: number, 2455 | /** 2456 | * Determines the naximum scale factor. Default value - *5* 2457 | * ```typescript 2458 | * var family = new FamilyTree('#tree', { 2459 | * scaleMax: 10 2460 | * }); 2461 | * ``` 2462 | */ 2463 | scaleMax?: number, 2464 | /** 2465 | * The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - *null* 2466 | * ```typescript 2467 | * var family = new FamilyTree('#tree', { 2468 | * orderBy: "orderId", 2469 | * nodes: [ 2470 | * { id: 10, pid: 1, orderId: 2 }, 2471 | * { id: 11, pid: 1, orderId: 1 } 2472 | * ] 2473 | * }); 2474 | * ``` 2475 | * ```typescript 2476 | * var family = new FamilyTree('#tree', { 2477 | * orderBy: {field: "orderId", desc: true}, 2478 | * nodes: [ 2479 | * { id: 10, pid: 1, orderId: 2 }, 2480 | * { id: 11, pid: 1, orderId: 1 } 2481 | * ] 2482 | * }); 2483 | * ``` 2484 | */ 2485 | orderBy?: string | Array, 2486 | /** 2487 | * Filter the FamilyTree by the specified fields. 2488 | * ```typescript 2489 | * var family = new FamilyTree('#tree', { 2490 | * filterBy: 'all' 2491 | * }); 2492 | * ``` 2493 | * ```typescript 2494 | * var family = new FamilyTree('#tree', { 2495 | * filterBy: ['country', 'title'] 2496 | * }); 2497 | * ``` 2498 | * ```typescript 2499 | * var family = new FamilyTree('#tree', { 2500 | * filterBy: { 2501 | * name: { 'name 2': { checked: false, text: 'My text 2'} }, 2502 | * title: {} 2503 | * } 2504 | * }); 2505 | * ``` 2506 | */ 2507 | filterBy?: string | Array | {[key: string]: { [key: string] : { 2508 | checked: boolean, 2509 | text?: string 2510 | } }}, 2511 | /** 2512 | * @ignore 2513 | */ 2514 | editUI?: FamilyTree.editUI, 2515 | /** 2516 | * @ignore 2517 | */ 2518 | searchUI?: FamilyTree.searchUI, 2519 | /** 2520 | * @ignore 2521 | */ 2522 | filterUI?: FamilyTree.filterUI, 2523 | /** 2524 | * @ignore 2525 | */ 2526 | xScrollUI?: FamilyTree.xScrollUI, 2527 | /** 2528 | * @ignore 2529 | */ 2530 | yScrollUI?: FamilyTree.yScrollUI, 2531 | /** 2532 | * @ignore 2533 | */ 2534 | nodeMenuUI?: FamilyTree.menuUI, 2535 | /** 2536 | * @ignore 2537 | */ 2538 | nodeCircleMenuUI?: FamilyTree.circleMenuUI, 2539 | /** 2540 | * @ignore 2541 | */ 2542 | nodeContextMenuUI?: FamilyTree.menuUI, 2543 | /** 2544 | * @ignore 2545 | */ 2546 | toolbarUI?: FamilyTree.toolbarUI, 2547 | /** 2548 | * @ignore 2549 | */ 2550 | notifierUI?: any, 2551 | /** 2552 | * @ignore 2553 | */ 2554 | menuUI?: FamilyTree.menuUI, 2555 | /** 2556 | * @ignore 2557 | */ 2558 | undoRedoUI?: FamilyTree.undoRedoUI, 2559 | /** 2560 | * @ignore 2561 | */ 2562 | UI?: any, 2563 | /** 2564 | * The URL to the export server. Default value - *https://balkan.app/export* 2565 | * ```typescript 2566 | * var family = new FamilyTree('#tree', { 2567 | * exportUrl: "https://balkan.app/export" 2568 | * }); 2569 | * ``` 2570 | */ 2571 | exportUrl?: string, 2572 | /** 2573 | * The align option specifies the alignment of the nodes inside Family Tree JS. 2574 | * - FamilyTree.align.center - centered 2575 | * - FamilyTree.align.orientation - according to the orientation option 2576 | * 2577 | * Default value - *FamilyTree.align.center* 2578 | * ```typescript 2579 | * var family = new FamilyTree('#tree', { 2580 | * align: FamilyTree.align.orientation 2581 | * }); 2582 | * ``` 2583 | */ 2584 | align?: FamilyTree.align | number, 2585 | /** 2586 | * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: FamilyTree.anim.outPow, duration: 200* 2587 | * ```typescript 2588 | * var family = new FamilyTree('#tree', { 2589 | * anim: {func: FamilyTree.anim.outBack, duration: 500} 2590 | * }); 2591 | * ``` 2592 | */ 2593 | anim?: { 2594 | /** 2595 | * defines how long time an animation should take to complete 2596 | */ 2597 | func?: FamilyTree.anim, 2598 | /** 2599 | * Easing functions specify the speed at which an animation progresses at different points within the animation. 2600 | */ 2601 | duration?: number 2602 | }, 2603 | /** 2604 | * Can be used to control the zooming sensitivity. Default value - *speed: 120, smooth: 12* 2605 | * ```typescript 2606 | * var family = new FamilyTree('#tree', { 2607 | * zoom: {speed: 130, smooth: 10} 2608 | * }); 2609 | * ``` 2610 | */ 2611 | zoom?: { 2612 | speed?: number, 2613 | smooth?: number 2614 | }, 2615 | /** 2616 | * Define nodes as roots. Default value - *null* 2617 | * ```typescript 2618 | * var family = new FamilyTree('#tree', { 2619 | * roots: [2, 4] 2620 | * }); 2621 | * ``` 2622 | */ 2623 | roots?: Array, 2624 | /** 2625 | * Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - *null* 2626 | * ```typescript 2627 | * var family = new FamilyTree('#tree', { 2628 | * state: { 2629 | * name: 'MyStateName', 2630 | * readFromLocalStorage: true, 2631 | * writeToLocalStorage: true, 2632 | * readFromIndexedDB: true, 2633 | * writeToIndexedDB: true, 2634 | * readFromUrlParams: true, 2635 | * writeToUrlParams: true 2636 | * } 2637 | * }); 2638 | * ``` 2639 | */ 2640 | state?: { 2641 | name?: string, 2642 | readFromLocalStorage?: boolean, 2643 | writeToLocalStorage?: boolean, 2644 | readFromIndexedDB?: boolean, 2645 | writeToIndexedDB?: boolean, 2646 | readFromUrlParams?: boolean, 2647 | writeToUrlParams?: boolean 2648 | }, 2649 | /** 2650 | * Set the session storage name to use undo/redo functionallity. 2651 | */ 2652 | undoRedoStorageName?: string, 2653 | /** 2654 | * Configure the buildin edit form. 2655 | * {@link https://balkan.app/FamilyTreeJS/Docs/Edit | See doc...} 2656 | */ 2657 | editForm?: { 2658 | readOnly?: boolean, 2659 | titleBinding?: string, 2660 | photoBinding?: string, 2661 | focusBinding?: string, 2662 | addMore?: string, 2663 | addMoreBtn?: string, 2664 | addMoreFieldName?: string, 2665 | saveAndCloseBtn?: string, 2666 | cancelBtn?: string, 2667 | generateElementsFromFields?: boolean, 2668 | buttons?: { 2669 | [key: string]: { 2670 | icon?: string, 2671 | text?: string, 2672 | hideIfEditMode?: boolean, 2673 | hideIfDetailsMode?: boolean 2674 | } | null 2675 | }, 2676 | // elements?: { [key: string]: FamilyTree.editFormElement | Array } 2677 | elements?: Array> 2678 | } 2679 | } 2680 | 2681 | var ui: { 2682 | defs(fromrender: string): string; 2683 | lonely(config: Object): string; 2684 | pointer(config: Object, action: FamilyTree.action, scale: number): string; 2685 | node(node: FamilyTree.node, data: Object, animations: FamilyTree.anim, config: Object, x: number | undefined, y: number | undefined, nodeBinding: Object | undefined, action: FamilyTree.action, scale: number, sender: Object): string; 2686 | nodeBtns(config: Object, node: FamilyTree.node, action: FamilyTree.action, t: Object, sender: Object): string; 2687 | expandCollapseBtn(family: FamilyTree, node: FamilyTree.node, layoutConfigs: any, action: FamilyTree.action, scale: number): string; 2688 | link(node: FamilyTree.node, obj: Object, scale: number, bordersByRootIdAndLevel: Object, nodes: Object, action: FamilyTree.action): Array; 2689 | svg(width: number, height: number, viewBox: Array, config: Object, content: string, scale: number): string; 2690 | menuButton(config: Object): string; 2691 | 2692 | }; 2693 | 2694 | var t: any; 2695 | }export default FamilyTree -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | {"author":"BALKAN App","bugs":{"url":"https://github.com/BALKANGraph/FamilyTreeJS/issues","email":"support@balkan.app"},"deprecated":false,"description":"Ultimate Family Tree JavaScript library","files":["familytree.js","familytree.d.ts","package.json","README.md"],"homepage":"https://balkan.app/","keywords":["tree","family tree","origami","hierarchy"],"license":"SEE LICENSE IN https://balkan.app","main":"familytree.js","types":"familytree.d.ts","name":"@balkangraph/familytree.js","repository":{"type":"git","url":"git+https://github.com/BALKANGraph/FamilyTreeJS.git"},"dependencies":{},"version":"1.09.46","scripts":{"test":"echo \"Error: no test specified\" && exit 1"}} --------------------------------------------------------------------------------