UNPKG

d3-org-chart-cthacker-fork

Version:

Highly customizable org chart, created with d3

github.com/bumbeishvili/d3-organization-chart

bumbeishvili/d3-organization-chart

69 lines (68 loc) • 49 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
((t,e)=>{"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection"),require("d3-array"),require("d3-hierarchy"),require("d3-zoom"),require("d3-flextree"),require("d3-shape"),require("d3-drag")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-array","d3-hierarchy","d3-zoom","d3-flextree","d3-shape","d3-drag"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).d3={},t.d3,t.d3,t.d3,t.d3,t.d3,t.d3,t.d3)})(this,function(t,p,e,a,i,s,r,n){let u={selection:p.selection,select:p.select,selectAll:p.selectAll,max:e.max,min:e.min,sum:e.sum,cumsum:e.cumsum,tree:a.tree,stratify:a.stratify,zoom:i.zoom,zoomIdentity:i.zoomIdentity,linkHorizontal:r.linkHorizontal,flextree:s.flextree,drag:n.drag};t.OrgChart=class{attrs;constructor(){this.attrs={id:"ID"+Math.floor(1e6*Math.random()),firstDraw:!0,ctx:document.createElement("canvas").getContext("2d"),initialExpandLevel:1,nodeDefaultBackground:"none",lastTransform:{x:0,y:0,k:1},allowedNodesCount:{},zoomBehavior:null,generateRoot:null,dragNode:null,dragTargetNode:null,dragStartX:null,dragStartY:null,isDragStart:!1,debug:!1,svgWidth:800,svgHeight:window.innerHeight-100,container:"body",data:null,connections:[],defaultFont:"Helvetica",nodeId:t=>t.nodeId||t.id,parentNodeId:t=>t.parentNodeId||t.parentId,rootMargin:40,nodeWidth:t=>250,nodeHeight:t=>150,neighbourMargin:(t,e)=>80,siblingsMargin:t=>20,childrenMargin:t=>60,compactMarginPair:t=>100,compactMarginBetween:t=>20,nodeButtonWidth:t=>40,nodeButtonHeight:t=>40,nodeButtonX:t=>-20,nodeButtonY:t=>-20,linkYOffset:30,pagingStep:t=>5,minPagingVisibleNodes:t=>2e3,scaleExtent:[.001,20],duration:400,imageName:"Chart",setActiveNodeCentered:!0,layout:"top",compact:!0,createZoom:t=>u.zoom(),onZoomStart:t=>{},onZoom:t=>{},onZoomEnd:t=>{},onNodeClick:(t,e)=>t,onExpandOrCollapse:t=>t,enableDragDrop:t=>{},onDragStart:(t,e)=>{},onDrag:(t,e)=>{},onDrop:(t,e,a)=>{},onDragTarget:(t,e,a)=>{},outDragTarget:(t,e,a)=>{},onDragFilter:(t,e)=>{},draggingClass:()=>"dragging",draggableClass:()=>"draggable",droppableClass:()=>"droppable",nodeContent:t=>`<div style="padding:5px;font-size:10px;">Sample Node(id=${t.id}), override using <br/> <code>chart.nodeContent({data}=>{ <br/> &nbsp;&nbsp;&nbsp;&nbsp;return '' // Custom HTML <br/> })</code> <br/> Or check different <a href="https://github.com/bumbeishvili/org-chart#jump-to-examples" target="_blank">layout examples</a> </div>`,buttonContent:({node:e,state:t})=>`<div style="border:1px solid #E4E2E9;border-radius:3px;padding:3px;font-size:9px;margin:auto auto;background-color:white"> ${{left:t=>t?`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.283 3.50094L6.51 11.4749C6.37348 11.615 6.29707 11.8029 6.29707 11.9984C6.29707 12.194 6.37348 12.3819 6.51 12.5219L14.283 20.4989C14.3466 20.5643 14.4226 20.6162 14.5066 20.6516C14.5906 20.6871 14.6808 20.7053 14.772 20.7053C14.8632 20.7053 14.9534 20.6871 15.0374 20.6516C15.1214 20.6162 15.1974 20.5643 15.261 20.4989C15.3918 20.365 15.4651 20.1852 15.4651 19.9979C15.4651 19.8107 15.3918 19.6309 15.261 19.4969L7.9515 11.9984L15.261 4.50144C15.3914 4.36756 15.4643 4.18807 15.4643 4.00119C15.4643 3.81431 15.3914 3.63482 15.261 3.50094C15.1974 3.43563 15.1214 3.38371 15.0374 3.34827C14.9534 3.31282 14.8632 3.29456 14.772 3.29456C14.6808 3.29456 14.5906 3.31282 14.5066 3.34827C14.4226 3.38371 14.3466 3.43563 14.283 3.50094V3.50094Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="color:#716E7B">${e.data._directSubordinatesPaging} </span></div>`:`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.989 3.49944C7.85817 3.63339 7.78492 3.8132 7.78492 4.00044C7.78492 4.18768 7.85817 4.36749 7.989 4.50144L15.2985 11.9999L7.989 19.4969C7.85817 19.6309 7.78492 19.8107 7.78492 19.9979C7.78492 20.1852 7.85817 20.365 7.989 20.4989C8.05259 20.5643 8.12863 20.6162 8.21261 20.6516C8.2966 20.6871 8.38684 20.7053 8.478 20.7053C8.56916 20.7053 8.6594 20.6871 8.74338 20.6516C8.82737 20.6162 8.90341 20.5643 8.967 20.4989L16.74 12.5234C16.8765 12.3834 16.9529 12.1955 16.9529 11.9999C16.9529 11.8044 16.8765 11.6165 16.74 11.4764L8.967 3.50094C8.90341 3.43563 8.82737 3.38371 8.74338 3.34827C8.6594 3.31282 8.56916 3.29456 8.478 3.29456C8.38684 3.29456 8.2966 3.31282 8.21261 3.34827C8.12863 3.38371 8.05259 3.43563 7.989 3.50094V3.49944Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="color:#716E7B">${e.data._directSubordinatesPaging} </span></div>`,bottom:t=>t?`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.497 7.98903L12 15.297L4.503 7.98903C4.36905 7.85819 4.18924 7.78495 4.002 7.78495C3.81476 7.78495 3.63495 7.85819 3.501 7.98903C3.43614 8.05257 3.38462 8.12842 3.34944 8.21213C3.31427 8.29584 3.29615 8.38573 3.29615 8.47653C3.29615 8.56733 3.31427 8.65721 3.34944 8.74092C3.38462 8.82463 3.43614 8.90048 3.501 8.96403L11.4765 16.74C11.6166 16.8765 11.8044 16.953 12 16.953C12.1956 16.953 12.3834 16.8765 12.5235 16.74L20.499 8.96553C20.5643 8.90193 20.6162 8.8259 20.6517 8.74191C20.6871 8.65792 20.7054 8.56769 20.7054 8.47653C20.7054 8.38537 20.6871 8.29513 20.6517 8.21114C20.6162 8.12715 20.5643 8.05112 20.499 7.98753C20.3651 7.85669 20.1852 7.78345 19.998 7.78345C19.8108 7.78345 19.6309 7.85669 19.497 7.98753V7.98903Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="margin-left:1px;color:#716E7B" >${e.data._directSubordinatesPaging} </span></div> `:`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.457 8.07005L3.49199 16.4296C3.35903 16.569 3.28485 16.7543 3.28485 16.9471C3.28485 17.1398 3.35903 17.3251 3.49199 17.4646L3.50099 17.4736C3.56545 17.5414 3.64304 17.5954 3.72904 17.6324C3.81504 17.6693 3.90765 17.6883 4.00124 17.6883C4.09483 17.6883 4.18745 17.6693 4.27344 17.6324C4.35944 17.5954 4.43703 17.5414 4.50149 17.4736L12.0015 9.60155L19.4985 17.4736C19.563 17.5414 19.6405 17.5954 19.7265 17.6324C19.8125 17.6693 19.9052 17.6883 19.9987 17.6883C20.0923 17.6883 20.1849 17.6693 20.2709 17.6324C20.3569 17.5954 20.4345 17.5414 20.499 17.4736L20.508 17.4646C20.641 17.3251 20.7151 17.1398 20.7151 16.9471C20.7151 16.7543 20.641 16.569 20.508 16.4296L12.543 8.07005C12.4729 7.99653 12.3887 7.93801 12.2954 7.89801C12.202 7.85802 12.1015 7.8374 12 7.8374C11.8984 7.8374 11.798 7.85802 11.7046 7.89801C11.6113 7.93801 11.527 7.99653 11.457 8.07005Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="margin-left:1px;color:#716E7B" >${e.data._directSubordinatesPaging} </span></div> `,right:t=>t?`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.989 3.49944C7.85817 3.63339 7.78492 3.8132 7.78492 4.00044C7.78492 4.18768 7.85817 4.36749 7.989 4.50144L15.2985 11.9999L7.989 19.4969C7.85817 19.6309 7.78492 19.8107 7.78492 19.9979C7.78492 20.1852 7.85817 20.365 7.989 20.4989C8.05259 20.5643 8.12863 20.6162 8.21261 20.6516C8.2966 20.6871 8.38684 20.7053 8.478 20.7053C8.56916 20.7053 8.6594 20.6871 8.74338 20.6516C8.82737 20.6162 8.90341 20.5643 8.967 20.4989L16.74 12.5234C16.8765 12.3834 16.9529 12.1955 16.9529 11.9999C16.9529 11.8044 16.8765 11.6165 16.74 11.4764L8.967 3.50094C8.90341 3.43563 8.82737 3.38371 8.74338 3.34827C8.6594 3.31282 8.56916 3.29456 8.478 3.29456C8.38684 3.29456 8.2966 3.31282 8.21261 3.34827C8.12863 3.38371 8.05259 3.43563 7.989 3.50094V3.49944Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="color:#716E7B">${e.data._directSubordinatesPaging} </span></div>`:`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.283 3.50094L6.51 11.4749C6.37348 11.615 6.29707 11.8029 6.29707 11.9984C6.29707 12.194 6.37348 12.3819 6.51 12.5219L14.283 20.4989C14.3466 20.5643 14.4226 20.6162 14.5066 20.6516C14.5906 20.6871 14.6808 20.7053 14.772 20.7053C14.8632 20.7053 14.9534 20.6871 15.0374 20.6516C15.1214 20.6162 15.1974 20.5643 15.261 20.4989C15.3918 20.365 15.4651 20.1852 15.4651 19.9979C15.4651 19.8107 15.3918 19.6309 15.261 19.4969L7.9515 11.9984L15.261 4.50144C15.3914 4.36756 15.4643 4.18807 15.4643 4.00119C15.4643 3.81431 15.3914 3.63482 15.261 3.50094C15.1974 3.43563 15.1214 3.38371 15.0374 3.34827C14.9534 3.31282 14.8632 3.29456 14.772 3.29456C14.6808 3.29456 14.5906 3.31282 14.5066 3.34827C14.4226 3.38371 14.3466 3.43563 14.283 3.50094V3.50094Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="color:#716E7B">${e.data._directSubordinatesPaging} </span></div>`,top:t=>t?`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.457 8.07005L3.49199 16.4296C3.35903 16.569 3.28485 16.7543 3.28485 16.9471C3.28485 17.1398 3.35903 17.3251 3.49199 17.4646L3.50099 17.4736C3.56545 17.5414 3.64304 17.5954 3.72904 17.6324C3.81504 17.6693 3.90765 17.6883 4.00124 17.6883C4.09483 17.6883 4.18745 17.6693 4.27344 17.6324C4.35944 17.5954 4.43703 17.5414 4.50149 17.4736L12.0015 9.60155L19.4985 17.4736C19.563 17.5414 19.6405 17.5954 19.7265 17.6324C19.8125 17.6693 19.9052 17.6883 19.9987 17.6883C20.0923 17.6883 20.1849 17.6693 20.2709 17.6324C20.3569 17.5954 20.4345 17.5414 20.499 17.4736L20.508 17.4646C20.641 17.3251 20.7151 17.1398 20.7151 16.9471C20.7151 16.7543 20.641 16.569 20.508 16.4296L12.543 8.07005C12.4729 7.99653 12.3887 7.93801 12.2954 7.89801C12.202 7.85802 12.1015 7.8374 12 7.8374C11.8984 7.8374 11.798 7.85802 11.7046 7.89801C11.6113 7.93801 11.527 7.99653 11.457 8.07005Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="margin-left:1px;color:#716E7B">${e.data._directSubordinatesPaging} </span></div> `:`<div style="display:flex;"><span style="align-items:center;display:flex;"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.497 7.98903L12 15.297L4.503 7.98903C4.36905 7.85819 4.18924 7.78495 4.002 7.78495C3.81476 7.78495 3.63495 7.85819 3.501 7.98903C3.43614 8.05257 3.38462 8.12842 3.34944 8.21213C3.31427 8.29584 3.29615 8.38573 3.29615 8.47653C3.29615 8.56733 3.31427 8.65721 3.34944 8.74092C3.38462 8.82463 3.43614 8.90048 3.501 8.96403L11.4765 16.74C11.6166 16.8765 11.8044 16.953 12 16.953C12.1956 16.953 12.3834 16.8765 12.5235 16.74L20.499 8.96553C20.5643 8.90193 20.6162 8.8259 20.6517 8.74191C20.6871 8.65792 20.7054 8.56769 20.7054 8.47653C20.7054 8.38537 20.6871 8.29513 20.6517 8.21114C20.6162 8.12715 20.5643 8.05112 20.499 7.98753C20.3651 7.85669 20.1852 7.78345 19.998 7.78345C19.8108 7.78345 19.6309 7.85669 19.497 7.98753V7.98903Z" fill="#716E7B" stroke="#716E7B"/> </svg></span><span style="margin-left:1px;color:#716E7B">${e.data._directSubordinatesPaging} </span></div> `}[t.layout](e.children)} </div>`,pagingButton:(t,e,a,i)=>{var i=i.pagingStep(t.parent),s=t.parent.data._pagingStep,t=t.parent.data._directSubordinatesPaging-s;return` <div style="margin-top:90px;"> <div style="display:flex;width:170px;border-radius:20px;padding:5px 15px; padding-bottom:4px;;background-color:#E5E9F2"> <div><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z" fill="#716E7B" stroke="#716E7B"/> </svg> </div><div style="line-height:2"> Show next ${Math.min(t,i)} nodes </div></div> </div> `},nodeUpdate:function(t,e,a){u.select(this).select(".node-rect").attr("stroke",t=>t.data._highlighted||t.data._upToTheRootHighlighted?"#E27396":"none").attr("stroke-width",t.data._highlighted||t.data._upToTheRootHighlighted?10:1)},nodeEnter:t=>t,nodeExit:t=>t,linkUpdate:function(t,e,a){u.select(this).attr("stroke",t=>t.data._upToTheRootHighlighted?"#E27396":"#E4E2E9").attr("stroke-width",t=>t.data._upToTheRootHighlighted?5:1),t.data._upToTheRootHighlighted&&u.select(this).raise()},hdiagonal:function(t,e,a){var i=t.x,t=t.y,s=e.x,e=e.y,r=a&&null!=a.x?a.x:i,a=a&&null!=a.y?a.y:t,n=s-i<0?-1:1,o=e-t<0?-1:1,d=Math.abs(s-i)/2<35?Math.abs(s-i)/2:35,d=Math.abs(e-t)/2<d?Math.abs(e-t)/2:d,h=Math.abs(s-i)/2-d;return` M ${r} ${a} L ${r} ${t} L ${i} ${t} L ${i+h*n} ${t} C ${i+h*n+d*n} ${t} ${i+h*n+d*n} ${t} ${i+h*n+d*n} ${t+d*o} L ${i+h*n+d*n} ${e-d*o} C ${i+h*n+d*n} ${e} ${i+h*n+d*n} ${e} ${s-h*n} ${e} L ${s} ${e} `},diagonal:function(t,e,a,i={sy:0}){var s=t.x,t=t.y,r=e.x,e=e.y,n=a&&null!=a.x?a.x:s,a=a&&null!=a.y?a.y:t,o=r-s<0?-1:1,d=e-t<0?-1:1,i=(t+=i.sy,Math.abs(r-s)/2<35?Math.abs(r-s)/2:35),i=Math.abs(e-t)/2<i?Math.abs(e-t)/2:i,h=Math.abs(e-t)/2-i;return` M ${n} ${a} L ${s} ${a} L ${s} ${t} L ${s} ${t+h*d} C ${s} ${t+h*d+i*d} ${s} ${t+h*d+i*d} ${s+i*o} ${t+h*d+i*d} L ${s+(Math.abs(r-s)-2*i)*o+i*o} ${t+h*d+i*d} C ${r} ${t+h*d+i*d} ${r} ${t+h*d+i*d} ${r} ${e-h*d} L ${r} ${e} `},defs:function(a,t){return`<defs> ${t.map(t=>{var e=this.getTextWidth(t.label,{ctx:a.ctx,fontSize:2,defaultFont:a.defaultFont});return` <marker id="${t.from+"_"+t.to}" refX="${t._source.x<t._target.x?-7:7}" refY="5" markerWidth="500" markerHeight="500" orient="${t._source.x<t._target.x?"auto":"auto-start-reverse"}" > <rect rx=0.5 width=${t.label?e+3:0} height=3 y=1 fill="#E27396"></rect> <text font-size="2px" x=1 fill="white" y=3>${t.label||""}</text> </marker> <marker id="arrow-${t.from+"_"+t.to}" markerWidth="500" markerHeight="500" refY="2" refX="1" orient="${t._source.x<t._target.x?"auto":"auto-start-reverse"}" > <path transform="translate(0)" d='M0,0 V4 L2,2 Z' fill='#E27396' /> </marker> `}).join("")} </defs> `},connectionsUpdate:function(t,e,a){u.select(this).attr("stroke",t=>"#E27396").attr("stroke-linecap","round").attr("stroke-width",t=>"5").attr("pointer-events","none").attr("marker-start",t=>`url(#${t.from+"_"+t.to})`).attr("marker-end",t=>`url(#arrow-${t.from+"_"+t.to})`)},linkGroupArc:u.linkHorizontal().x(t=>t.x).y(t=>t.y),layoutBindings:{left:{nodeLeftX:t=>0,nodeRightX:t=>t.width,nodeTopY:t=>-t.height/2,nodeBottomY:t=>t.height/2,nodeJoinX:t=>t.x+t.width,nodeJoinY:t=>t.y-t.height/2,linkJoinX:t=>t.x+t.width,linkJoinY:t=>t.y,linkX:t=>t.x,linkY:t=>t.y,linkCompactXStart:t=>t.x+t.width/2,linkCompactYStart:t=>t.y+(t.compactEven?t.height/2:-t.height/2),compactLinkMidX:(t,e)=>t.firstCompactNode.x,compactLinkMidY:(t,e)=>t.firstCompactNode.y+t.firstCompactNode.flexCompactDim[0]/4+e.compactMarginPair(t)/4,linkParentX:t=>t.parent.x+t.parent.width,linkParentY:t=>t.parent.y,buttonX:t=>t.width,buttonY:t=>t.height/2,centerTransform:({rootMargin:t,centerY:e,scale:a})=>`translate(${t},${e}) scale(${a})`,compactDimension:{sizeColumn:t=>t.height,sizeRow:t=>t.width,reverse:t=>t.slice().reverse()},nodeFlexSize:({height:t,width:e,siblingsMargin:a,childrenMargin:i,state:s,node:r})=>s.compact&&r.flexCompactDim?[r.flexCompactDim[0],r.flexCompactDim[1]]:[t+a,e+i],zoomTransform:({centerY:t,scale:e})=>`translate(0,${t}) scale(${e})`,diagonal:this.hdiagonal.bind(this),swap:t=>{var e=t.x;t.x=t.y,t.y=e},nodeUpdateTransform:({x:t,y:e,height:a})=>`translate(${t},${e-a/2})`},top:{nodeLeftX:t=>-t.width/2,nodeRightX:t=>t.width/2,nodeTopY:t=>0,nodeBottomY:t=>t.height,nodeJoinX:t=>t.x-t.width/2,nodeJoinY:t=>t.y+t.height,linkJoinX:t=>t.x,linkJoinY:t=>t.y+t.height,linkCompactXStart:t=>t.x+(t.compactEven?t.width/2:-t.width/2),linkCompactYStart:t=>t.y+t.height/2,compactLinkMidX:(t,e)=>t.firstCompactNode.x+t.firstCompactNode.flexCompactDim[0]/4+e.compactMarginPair(t)/4,compactLinkMidY:t=>t.firstCompactNode.y,compactDimension:{sizeColumn:t=>t.width,sizeRow:t=>t.height,reverse:t=>t},linkX:t=>t.x,linkY:t=>t.y,linkParentX:t=>t.parent.x,linkParentY:t=>t.parent.y+t.parent.height,buttonX:t=>t.width/2,buttonY:t=>t.height,centerTransform:({rootMargin:t,scale:e,centerX:a})=>`translate(${a},${t}) scale(${e})`,nodeFlexSize:({height:t,width:e,siblingsMargin:a,childrenMargin:i,state:s,node:r})=>s.compact&&r.flexCompactDim?[r.flexCompactDim[0],r.flexCompactDim[1]]:[e+a,t+i],zoomTransform:({centerX:t,scale:e})=>`translate(${t},0}) scale(${e})`,diagonal:this.diagonal.bind(this),swap:t=>{},nodeUpdateTransform:({x:t,y:e,width:a})=>`translate(${t-a/2},${e})`},bottom:{nodeLeftX:t=>-t.width/2,nodeRightX:t=>t.width/2,nodeTopY:t=>-t.height,nodeBottomY:t=>0,nodeJoinX:t=>t.x-t.width/2,nodeJoinY:t=>t.y-t.height-t.height,linkJoinX:t=>t.x,linkJoinY:t=>t.y-t.height,linkCompactXStart:t=>t.x+(t.compactEven?t.width/2:-t.width/2),linkCompactYStart:t=>t.y-t.height/2,compactLinkMidX:(t,e)=>t.firstCompactNode.x+t.firstCompactNode.flexCompactDim[0]/4+e.compactMarginPair(t)/4,compactLinkMidY:t=>t.firstCompactNode.y,linkX:t=>t.x,linkY:t=>t.y,compactDimension:{sizeColumn:t=>t.width,sizeRow:t=>t.height,reverse:t=>t},linkParentX:t=>t.parent.x,linkParentY:t=>t.parent.y-t.parent.height,buttonX:t=>t.width/2,buttonY:t=>0,centerTransform:({rootMargin:t,scale:e,centerX:a,chartHeight:i})=>`translate(${a},${i-t}) scale(${e})`,nodeFlexSize:({height:t,width:e,siblingsMargin:a,childrenMargin:i,state:s,node:r})=>s.compact&&r.flexCompactDim?[r.flexCompactDim[0],r.flexCompactDim[1]]:[e+a,t+i],zoomTransform:({centerX:t,scale:e})=>`translate(${t},0}) scale(${e})`,diagonal:this.diagonal.bind(this),swap:t=>{t.y=-t.y},nodeUpdateTransform:({x:t,y:e,width:a,height:i})=>`translate(${t-a/2},${e-i})`},right:{nodeLeftX:t=>-t.width,nodeRightX:t=>0,nodeTopY:t=>-t.height/2,nodeBottomY:t=>t.height/2,nodeJoinX:t=>t.x-t.width-t.width,nodeJoinY:t=>t.y-t.height/2,linkJoinX:t=>t.x-t.width,linkJoinY:t=>t.y,linkX:t=>t.x,linkY:t=>t.y,linkParentX:t=>t.parent.x-t.parent.width,linkParentY:t=>t.parent.y,buttonX:t=>0,buttonY:t=>t.height/2,linkCompactXStart:t=>t.x-t.width/2,linkCompactYStart:t=>t.y+(t.compactEven?t.height/2:-t.height/2),compactLinkMidX:(t,e)=>t.firstCompactNode.x,compactLinkMidY:(t,e)=>t.firstCompactNode.y+t.firstCompactNode.flexCompactDim[0]/4+e.compactMarginPair(t)/4,centerTransform:({rootMargin:t,centerY:e,scale:a,chartWidth:i})=>`translate(${i-t},${e}) scale(${a})`,nodeFlexSize:({height:t,width:e,siblingsMargin:a,childrenMargin:i,state:s,node:r})=>s.compact&&r.flexCompactDim?[r.flexCompactDim[0],r.flexCompactDim[1]]:[t+a,e+i],compactDimension:{sizeColumn:t=>t.height,sizeRow:t=>t.width,reverse:t=>t.slice().reverse()},zoomTransform:({centerY:t,scale:e})=>`translate(0,${t}) scale(${e})`,diagonal:this.hdiagonal.bind(this),swap:t=>{var e=t.x;t.x=-t.y,t.y=e},nodeUpdateTransform:({x:t,y:e,width:a,height:i})=>`translate(${t-a},${e-i/2})`}}},this.getChartState=()=>({...this.attrs}),Object.keys(this.attrs).forEach(e=>{this[e]=function(t){return arguments.length?(this.attrs[e]=t,this):this.attrs[e]}}),this.initializeEnterExitUpdatePattern()}initializeEnterExitUpdatePattern(){u.selection.prototype.patternify=function(t){var e=t.selector,a=t.tag,t=t.data||[e],t=this.selectAll("."+e).data(t,(t,e)=>"object"==typeof t&&t.id?t.id:e);return t.exit().remove(),(t=t.enter().append(a).merge(t)).attr("class",e),t}}getNodeChildren({data:t,children:e,_children:a},i){return i.push(t),e&&e.forEach(t=>{this.getNodeChildren(t,i)}),a&&a.forEach(t=>{this.getNodeChildren(t,i)}),i}initialZoom(t){return this.attrs=this.getChartState(),this.attrs.lastTransform.k=t,this}render(){if(this.attrs=this.getChartState(),this.attrs.data&&0!=this.attrs.data.length){var e=u.select(this.attrs.container),a=e.node().getBoundingClientRect();0<a.width&&(this.attrs.svgWidth=a.width);let t={id:"ID"+Math.floor(1e6*Math.random()),chartWidth:this.attrs.svgWidth,chartHeight:this.attrs.svgHeight};(this.attrs.calc=t).centerX=t.chartWidth/2,t.centerY=t.chartHeight/2,this.attrs.firstDraw&&((a={zoom:null}).zoom=this.attrs.createZoom().clickDistance(10).on("start",(t,e)=>this.attrs.onZoomStart(t)).on("end",(t,e)=>this.attrs.onZoomEnd(t)).on("zoom",(t,e)=>{this.attrs.onZoom(t),this.zoomed(t,e)}).scaleExtent(this.attrs.scaleExtent),this.attrs.zoomBehavior=a.zoom),this.attrs.flexTreeLayout=s.flextree({nodeSize:t=>{var e=this.attrs.nodeWidth(t),a=this.attrs.nodeHeight(t),i=this.attrs.siblingsMargin(t),s=this.attrs.childrenMargin(t);return this.attrs.layoutBindings[this.attrs.layout].nodeFlexSize({state:this.attrs,node:t,width:e,height:a,siblingsMargin:i,childrenMargin:s})}}).spacing((t,e)=>t.parent==e.parent?0:this.attrs.neighbourMargin(t,e)),this.setLayouts({expandNodesFirst:!1});a=e.patternify({tag:"svg",selector:"svg-chart-container"}).attr("width",this.attrs.svgWidth).attr("height",this.attrs.svgHeight).attr("font-family",this.attrs.defaultFont),e=(this.attrs.firstDraw&&a.call(this.attrs.zoomBehavior).on("dblclick.zoom",null).attr("cursor","move"),(this.attrs.svg=a).patternify({tag:"g",selector:"chart"}));this.attrs.centerG=e.patternify({tag:"g",selector:"center-group"}),this.attrs.linksWrapper=this.attrs.centerG.patternify({tag:"g",selector:"links-wrapper"}),this.attrs.nodesWrapper=this.attrs.centerG.patternify({tag:"g",selector:"nodes-wrapper"}),this.attrs.connectionsWrapper=this.attrs.centerG.patternify({tag:"g",selector:"connections-wrapper"}),this.attrs.defsWrapper=a.patternify({tag:"g",selector:"defs-wrapper"}),this.attrs.firstDraw&&this.attrs.centerG.attr("transform",()=>this.attrs.layoutBindings[this.attrs.layout].centerTransform({centerX:t.centerX,centerY:t.centerY,scale:this.attrs.lastTransform.k,rootMargin:this.attrs.rootMargin,root:this.attrs.root,chartHeight:t.chartHeight,chartWidth:t.chartWidth})),this.attrs.chart=e,this.update(this.attrs.root),u.select(window).on("resize."+this.attrs.id,()=>{var t=u.select(this.attrs.container).node().getBoundingClientRect();this.attrs.svg.attr("width",t.width)}),this.attrs.firstDraw&&(this.attrs.firstDraw=!1)}else console.log("ORG CHART - Data is empty"),this.attrs.container&&(p.select(this.attrs.container).select(".nodes-wrapper").remove(),p.select(this.attrs.container).select(".links-wrapper").remove(),p.select(this.attrs.container).select(".connections-wrapper").remove());return this}editNode(e,t){var a;return this.attrs.generateRoot(this.attrs.data).descendants().filter(({data:t})=>this.attrs.nodeId(t).toString()===e)[0]&&(a=this.attrs.data.findIndex(t=>t.id===e),this.attrs.data[a]={...this.attrs.data[a],...t},this.render()),this}addNode(e){var t,a;return this.attrs=this.getChartState(),!e||null!=this.attrs.parentNodeId(e)&&this.attrs.parentNodeId(e)!=this.attrs.nodeId(e)||0!=this.attrs.data.length?(a=(t=this.attrs.generateRoot(this.attrs.data).descendants()).filter(({data:t})=>this.attrs.nodeId(t).toString()===this.attrs.nodeId(e).toString())[0],t.filter(({data:t})=>this.attrs.nodeId(t).toString()===this.attrs.parentNodeId(e).toString())[0],a?console.log(`ORG CHART - ADD - Node with id "${this.attrs.nodeId(e)}" already exists in tree`):(e._centered&&!e._expanded&&(e._expanded=!0),this.attrs.data.push(e),this.updateNodesState())):(this.attrs.data.push(e),this.render()),this}removeNode(e){this.attrs=this.getChartState();var t=this.attrs.generateRoot(this.attrs.data).descendants().filter(({data:t})=>this.attrs.nodeId(t)==e)[0];return t?(t.descendants().forEach(t=>t.data._filteredOut=!0),this.attrs.data=this.attrs.data.filter(t=>!t._filteredOut),0==this.attrs.data.length?this.render():this.updateNodesState.bind(this)()):console.log(`ORG CHART - REMOVE - Node with id "${e}" not found in the tree`),this}groupBy(t,a,e){let i={};return t.forEach(t=>{var e=a(t);i[e]||(i[e]=[]),i[e].push(t)}),Object.keys(i).forEach(t=>{i[t]=e(i[t])}),Object.entries(i)}calculateCompactFlexDimensions(t){this.attrs=this.getChartState(),t.eachBefore(t=>{t.firstCompact=null,t.compactEven=null,t.flexCompactDim=null,t.firstCompactNode=null}),t.eachBefore(t=>{if(t.children&&1<t.children.length){let i=t.children.filter(t=>!t.children);if(!(i.length<2)){i.forEach((t,e)=>{e||(t.firstCompact=!0),t.compactEven=!(e%2),t.row=Math.floor(e/2)});var s=u.max(i.filter(t=>t.compactEven),this.attrs.layoutBindings[this.attrs.layout].compactDimension.sizeColumn),r=u.max(i.filter(t=>!t.compactEven),this.attrs.layoutBindings[this.attrs.layout].compactDimension.sizeColumn);let e=2*Math.max(s,r);s=this.groupBy(i,t=>t.row,t=>u.max(t,t=>this.attrs.layoutBindings[this.attrs.layout].compactDimension.sizeRow(t)+this.attrs.compactMarginBetween(t)));let a=u.sum(s.map(t=>t[1]));i.forEach(t=>{t.firstCompactNode=i[0],t.flexCompactDim=t.firstCompact?[e+this.attrs.compactMarginPair(t),a-this.attrs.compactMarginBetween(t)]:[0,0]}),t.flexCompactDim=null}}})}calculateCompactFlexPositions(t){this.attrs=this.getChartState(),t.eachBefore(t=>{if(t.children){var s=t.children.filter(t=>t.flexCompactDim);let i=s[0];if(i){s.forEach((t,e,a)=>{0==e&&(i.x-=i.flexCompactDim[0]/2),e&e%2-1?t.x=i.x+.25*i.flexCompactDim[0]-this.attrs.compactMarginPair(t)/4:e&&(t.x=i.x+.75*i.flexCompactDim[0]+this.attrs.compactMarginPair(t)/4)});var r=i.x+.5*i.flexCompactDim[0];i.x=i.x+.25*i.flexCompactDim[0]-this.attrs.compactMarginPair(i)/4;let e=t.x-r;Math.abs(e)<10&&s.forEach(t=>t.x+=e);t=this.groupBy(s,t=>t.row,t=>u.max(t,t=>this.attrs.layoutBindings[this.attrs.layout].compactDimension.sizeRow(t)));let a=u.cumsum(t.map(t=>t[1]+this.attrs.compactMarginBetween(t)));s.forEach((t,e)=>{t.row?t.y=i.y+a[t.row-1]:t.y=i.y})}}})}update({x0:a,y0:i,x:s=0,y:r=0,width:n,height:o}){this.attrs=this.getChartState(),this.attrs.calc,this.attrs.compact&&this.calculateCompactFlexDimensions(this.attrs.root);var e=this.attrs.flexTreeLayout(this.attrs.root),t=(this.attrs.compact&&this.calculateCompactFlexPositions(this.attrs.root),e.descendants()),e=e.descendants().slice(1),d=(t.forEach(this.attrs.layoutBindings[this.attrs.layout].swap),this.attrs.connections);let h={},l=(this.attrs.allNodes.forEach(t=>h[this.attrs.nodeId(t.data)]=t),{});t.forEach(t=>l[this.attrs.nodeId(t.data)]=t),d.forEach(t=>{var e=h[t.from],a=h[t.to];t._source=e,t._target=a});var d=d.filter(t=>l[t.from]&&l[t.to]),g=this.attrs.defs.bind(this)(this.attrs,d),g=(g!==this.attrs.defsWrapper.html()&&this.attrs.defsWrapper.html(g),this.attrs.linksWrapper.selectAll("path.link").data(e,t=>this.attrs.nodeId(t.data))),e=g.enter().insert("path","g").attr("class","link").attr("d",t=>{var e={x:this.attrs.layoutBindings[this.attrs.layout].linkJoinX({x:a,y:i,width:n,height:o}),y:this.attrs.layoutBindings[this.attrs.layout].linkJoinY({x:a,y:i,width:n,height:o})};return this.attrs.layoutBindings[this.attrs.layout].diagonal(e,e,e)}).merge(g),e=(e.attr("fill","none"),this.isEdge()?e.style("display",t=>t.data._pagingButton?"none":"auto"):e.attr("display",t=>t.data._pagingButton?"none":"auto"),e.each(this.attrs.linkUpdate),e.transition().duration(this.attrs.duration).attr("d",t=>{var e=this.attrs.compact&&t.flexCompactDim?{x:this.attrs.layoutBindings[this.attrs.layout].compactLinkMidX(t,this.attrs),y:this.attrs.layoutBindings[this.attrs.layout].compactLinkMidY(t,this.attrs)}:{x:this.attrs.layoutBindings[this.attrs.layout].linkX(t),y:this.attrs.layoutBindings[this.attrs.layout].linkY(t)},a={x:this.attrs.layoutBindings[this.attrs.layout].linkParentX(t),y:this.attrs.layoutBindings[this.attrs.layout].linkParentY(t)},t=this.attrs.compact&&t.flexCompactDim?{x:this.attrs.layoutBindings[this.attrs.layout].linkCompactXStart(t),y:this.attrs.layoutBindings[this.attrs.layout].linkCompactYStart(t)}:e;return this.attrs.layoutBindings[this.attrs.layout].diagonal(e,a,t,{sy:this.attrs.linkYOffset})}),g.exit().transition().duration(this.attrs.duration).attr("d",t=>{var e={x:this.attrs.layoutBindings[this.attrs.layout].linkJoinX({x:s,y:r,width:n,height:o}),y:this.attrs.layoutBindings[this.attrs.layout].linkJoinY({x:s,y:r,width:n,height:o})};return this.attrs.layoutBindings[this.attrs.layout].diagonal(e,e,null,{sy:this.attrs.linkYOffset})}).remove(),this.attrs.connectionsWrapper.selectAll("path.connection").data(d)),g=e.enter().insert("path","g").attr("class","connection").attr("d",t=>{var e={x:this.attrs.layoutBindings[this.attrs.layout].linkJoinX({x:a,y:i,width:n,height:o}),y:this.attrs.layoutBindings[this.attrs.layout].linkJoinY({x:a,y:i,width:n,height:o})};return this.attrs.layoutBindings[this.attrs.layout].diagonal(e,e,null,{sy:this.attrs.linkYOffset})}).merge(e),d=(g.attr("fill","none"),g.transition().duration(this.attrs.duration).attr("d",t=>{var e=this.attrs.layoutBindings[this.attrs.layout].linkX({x:t._source.x,y:t._source.y,width:t._source.width,height:t._source.height}),a=this.attrs.layoutBindings[this.attrs.layout].linkY({x:t._source.x,y:t._source.y,width:t._source.width,height:t._source.height}),i=this.attrs.layoutBindings[this.attrs.layout].linkJoinX({x:t._target.x,y:t._target.y,width:t._target.width,height:t._target.height}),t=this.attrs.layoutBindings[this.attrs.layout].linkJoinY({x:t._target.x,y:t._target.y,width:t._target.width,height:t._target.height});return this.attrs.linkGroupArc({source:{x:e,y:a},target:{x:i,y:t}})}),g.each(this.attrs.connectionsUpdate),e.exit().transition().duration(this.attrs.duration).attr("opacity",0).remove(),this.attrs.nodesWrapper.selectAll("g.node").data(t,({data:t})=>this.attrs.nodeId(t))),g=d.enter().append("g").attr("class","node").attr("transform",t=>t==this.attrs.root?`translate(${a},${i})`:`translate(${this.attrs.layoutBindings[this.attrs.layout].nodeJoinX({x:a,y:i,width:n,height:o})},${this.attrs.layoutBindings[this.attrs.layout].nodeJoinY({x:a,y:i,width:n,height:o})})`).attr("cursor","pointer");if(this.attrs.enableDragDrop()||g.merge(d).on("click.node",(t,e)=>{var a=e.data;[...t.srcElement.classList].includes("node-button-foreign-object")||([...t.srcElement.classList].includes("paging-button-wrapper")?this.loadPagingNodes(e):a._pagingButton?console.log("event fired, no handlers"):this.attrs.onNodeClick(e,t))}),g.merge(d).on("keydown.node",(t,e)=>{"Enter"!==t.key&&" "!==t.key&&"Spacebar"!==t.key||[...t.srcElement.classList].includes("node-button-foreign-object")||([...t.srcElement.classList].includes("paging-button-wrapper")?this.loadPagingNodes(e):"Enter"!==t.key&&" "!==t.key&&"Spacebar"!==t.key||this.onButtonClick(t,e))}),this.attrs.debug&&console.log("[DEBUG.update] enabledDragDrop = ",this.attrs.enableDragDrop()),this.attrs.enableDragDrop()){let a=this;g.merge(d).call(u.drag().filter(function(t,e){return this.attrs.debug&&console.log("[DEBUG.update] in filter call",this.classList.contains(this.attrs.draggableClass())&&this.attrs.onDragFilter.apply(this,[e,t])),this.classList.contains(this.attrs.draggableClass())&&this.attrs.onDragFilter.apply(this,[e,t])}).on("start",function(t,e){this.attrs.debug&&console.log("...firing start"),p.select(this).raise(),a.dragStart(this,t,e)}).on("drag",function(t){this.attrs.debug&&console.log("...firing drag"),a.drag(this,t)}).on("end",function(t){this.attrs.debug&&console.log("...firing end"),a.dragEnd(this,t)}))}g.each(this.attrs.nodeEnter),g.patternify({tag:"rect",selector:"node-rect",data:t=>[t]});e=g.merge(d).style("font",this.attrs.defaultFont,"12px sans-serif"),e.patternify({tag:"foreignObject",selector:"node-foreign-object",data:t=>[t]}).style("overflow","visible").patternify({tag:"xhtml:div",selector:"node-foreign-object-div",data:t=>[t]}),this.restyleForeignObjectElements(),g=g.patternify({tag:"g",selector:"node-button-g",data:t=>[t]}).on("click",(t,e)=>this.onButtonClick(t,e)).on("keydown",(t,e)=>{"Enter"!==t.key&&" "!==t.key&&"Spacebar"!==t.key||this.onButtonClick(t,e)}),g.patternify({tag:"rect",selector:"node-button-rect",data:t=>[t]}).attr("opacity",0).attr("pointer-events","all").attr("width",t=>this.attrs.nodeButtonWidth(t)).attr("height",t=>this.attrs.nodeButtonHeight(t)).attr("x",t=>this.attrs.nodeButtonX(t)).attr("y",t=>this.attrs.nodeButtonY(t)),g.patternify({tag:"foreignObject",selector:"node-button-foreign-object",data:t=>[t]}).attr("width",t=>this.attrs.nodeButtonWidth(t)).attr("height",t=>this.attrs.nodeButtonHeight(t)).attr("x",t=>this.attrs.nodeButtonX(t)).attr("y",t=>this.attrs.nodeButtonY(t)).style("overflow","visible").patternify({tag:"xhtml:div",selector:"node-button-div",data:t=>[t]}).style("pointer-events","none").style("display","flex").style("width","100%").style("height","100%"),e.transition().attr("opacity",0).duration(this.attrs.duration).attr("transform",({x:t,y:e,width:a,height:i})=>this.attrs.layoutBindings[this.attrs.layout].nodeUpdateTransform({x:t,y:e,width:a,height:i})).attr("opacity",1),e.select(".node-rect").attr("width",({width:t})=>t).attr("height",({height:t})=>t).attr("x",({})=>0).attr("y",({})=>0).attr("cursor","pointer").attr("rx",3).attr("fill",this.attrs.nodeDefaultBackground),e.select(".node-button-g").attr("transform",({width:t,height:e})=>`translate(${this.attrs.layoutBindings[this.attrs.layout].buttonX({width:t,height:e})},${this.attrs.layoutBindings[this.attrs.layout].buttonY({width:t,height:e})})`).attr("display",({data:t})=>0<t._directSubordinates?null:"none").attr("opacity",({data:t,children:e,_children:a})=>!t._pagingButton&&(e||a)?1:0),e.select(".node-button-foreign-object .node-button-div").html(t=>this.attrs.buttonContent({node:t,state:this.attrs})),e.select(".node-button-text").attr("text-anchor","middle").attr("alignment-baseline","middle").attr("font-size",({children:t})=>t?40:26).text(({children:t})=>t?"-":"+").attr("y",this.isEdge()?10:0),e.each(this.attrs.nodeUpdate),g=d.exit();g.each(this.attrs.nodeExit);let c=g.data().reduce((t,e)=>t.depth<e.depth?t:e,{depth:1/0});g.attr("opacity",1).transition().duration(this.attrs.duration).attr("transform",t=>{var{x:e,y:a,width:i,height:s}=c.parent||{};return`translate(${this.attrs.layoutBindings[this.attrs.layout].nodeJoinX({x:e,y:a,width:i,height:s})},${this.attrs.layoutBindings[this.attrs.layout].nodeJoinY({x:e,y:a,width:i,height:s})})`}).on("end",function(){u.select(this).remove()}).attr("opacity",0),t.forEach(t=>{t.x0=t.x,t.y0=t.y});e=this.attrs.allNodes.filter(t=>t.data._centered)[0];if(e){let t=[e];e.data._centeredWithDescendants&&(t=this.attrs.compact?e.descendants().filter((t,e)=>e<7):e.descendants().filter((t,e,a)=>{var i=Math.round(a.length/2);return a.length%2?i-2<e&&e<i+2-1:i-2<e&&e<i+2})),e.data._centeredWithDescendants=null,e.data._centered=null,this.fit({animate:!0,scale:!1,nodes:t})}}isEdge(){return window.navigator.userAgent.includes("Edge")}hdiagonal(t,e,a,i){return this.getChartState().hdiagonal(t,e,a,i)}diagonal(t,e,a,i){return this.getChartState().diagonal(t,e,a,i)}restyleForeignObjectElements(){this.attrs=this.getChartState(),this.attrs.svg.selectAll(".node-foreign-object").attr("width",({width:t})=>t).attr("height",({height:t})=>t).attr("x",({})=>0).attr("y",({})=>0),this.attrs.svg.selectAll(".node-foreign-object-div").style("width",({width:t})=>t+"px").style("height",({height:t})=>t+"px").html((t,e,a)=>t.data._pagingButton?`<div class="paging-button-wrapper"><div style="pointer-events:none">${this.attrs.pagingButton(t,e,a,this.attrs)}</div></div>`:this.attrs.nodeContent.bind(this)(t,e,a,this.attrs))}onButtonClick(t,e){this.attrs=this.getChartState(),e.data._pagingButton||(this.attrs.setActiveNodeCentered&&(e.data._centered=!0,e.data._centeredWithDescendants=!0),e.children?(e._children=e.children,e.children=null,this.setExpansionFlagToChildren(e,!1)):(e.children=e._children,e._children=null,e.children&&e.children.forEach(({data:t})=>t._expanded=!0)),this.update(e),t.stopPropagation(),this.attrs.onExpandOrCollapse(e))}setExpansionFlagToChildren({data:t,children:e,_children:a},i){t._expanded=i,e&&e.forEach(t=>{this.setExpansionFlagToChildren(t,i)}),a&&a.forEach(t=>{this.setExpansionFlagToChildren(t,i)})}expandSomeNodes(e){if(e.data._expanded){let t=e.parent;for(;t&&t._children;)t.children=t._children,t._children=null,t=t.parent}e._children&&e._children.forEach(t=>this.expandSomeNodes(t)),e.children&&e.children.forEach(t=>this.expandSomeNodes(t))}updateNodesState(){this.attrs=this.getChartState(),this.setLayouts({expandNodesFirst:!0}),this.update(this.attrs.root)}setLayouts({expandNodesFirst:t=!0}){this.attrs=this.getChartState(),this.attrs.generateRoot=u.stratify().id(t=>this.attrs.nodeId(t)).parentId(t=>this.attrs.parentNodeId(t)),this.attrs.root=this.attrs.generateRoot(this.attrs.data);var e=this.attrs.root.descendants();1<this.attrs.initialExpandLevel&&0<e.length&&(e.forEach(t=>{t.depth<=this.attrs.initialExpandLevel&&(t.data._expanded=!0)}),this.attrs.initialExpandLevel=1);let i={};this.attrs.root.descendants().filter(t=>t.children).filter(t=>!t.data._pagingStep).forEach(t=>{t.data._pagingStep=this.attrs.minPagingVisibleNodes(t)}),this.attrs.root.eachBefore((a,t)=>{a.data._directSubordinatesPaging=a.children?a.children.length:0,a.children&&a.children.forEach((e,t)=>{if(e.data._pagingButton=!1,t>a.data._pagingStep&&(i[e.id]=!0),t===a.data._pagingStep&&a.children.length-1>a.data._pagingStep&&(e.data._pagingButton=!0),i[e.parent.id]&&(i[e.id]=!0),e.data._expanded||e.data._centered||e.data._highlighted||e.data._upToTheRootHighlighted){let t=e;for(;t&&(i[t.id]||t.data._pagingButton);)i[t.id]=!1,t.data._pagingButton&&(t.data._pagingButton=!1,t.parent.children.forEach(t=>{t.data._expanded=!0,i[t.id]=!1})),t=t.parent}})}),this.attrs.root=u.stratify().id(t=>this.attrs.nodeId(t)).parentId(t=>this.attrs.parentNodeId(t))(this.attrs.data.filter(t=>!0!==i[t.id]&&!0!==i[t.nodeId])),this.attrs.root.each((t,e,a)=>{var i=t._hierarchyHeight||t.height,s=this.attrs.nodeWidth(t),r=this.attrs.nodeHeight(t);Object.assign(t,{width:s,height:r,_hierarchyHeight:i})}),this.attrs.root.x0=0,this.attrs.root.y0=0,this.attrs.allNodes=this.attrs.root.descendants(),this.attrs.allNodes.forEach(t=>{Object.assign(t.data,{_directSubordinates:t.children?t.children.length:0,_totalSubordinates:t.descendants().length-1})}),this.attrs.root.children&&(t&&this.attrs.root.children.forEach(this.expand),this.attrs.root.children.forEach(t=>this.collapse(t)),0==this.attrs.initialExpandLevel&&(this.attrs.root._children=this.attrs.root.children,this.attrs.root.children=null),this.expandSomeNodes(this.attrs.root))}collapse(t){t.children&&(t._children=t.children,t._children.forEach(t=>this.collapse(t)),t.children=null)}expand(t){t._children&&(t.children=t._children,t.children.forEach(t=>this.expand(t)),t._children=null)}zoomed(t,e){this.attrs=this.getChartState();var a=this.attrs.chart,t=t.transform;this.attrs.lastTransform=t,a.attr("transform",t),this.isEdge()&&this.restyleForeignObjectElements()}zoomTreeBounds({x0:t,x1:e,y0:a,y1:i,params:s={animate:!0,scale:!0,onCompleted:()=>{}}}){var{centerG:r,svgWidth:n,svgHeight:o,svg:d,zoomBehavior:h,duration:l,lastTransform:g}=this.getChartState(),c=Math.min(8,.9/Math.max((e-t)/n,(i-a)/o));let p=u.zoomIdentity.translate(n/2,o/2);p=(p=p.scale(s.scale?c:g.k)).translate(-(t+e)/2,-(a+i)/2),d.transition().duration(s.animate?l:0).call(h.transform,p),r.transition().duration(s.animate?l:0).attr("transform","translate(0,0)").on("end",function(){s.onCompleted&&s.onCompleted()})}fit({animate:t=!0,nodes:e,scale:a=!0,onCompleted:i=()=>{}}={}){this.attrs=this.getChartState();var s=this.attrs.root,e=e||s.descendants(),s=u.min(e,t=>t.x+this.attrs.layoutBindings[this.attrs.layout].nodeLeftX(t)),r=u.max(e,t=>t.x+this.attrs.layoutBindings[this.attrs.layout].nodeRightX(t)),n=u.min(e,t=>t.y+this.attrs.layoutBindings[this.attrs.layout].nodeTopY(t)),e=u.max(e,t=>t.y+this.attrs.layoutBindings[this.attrs.layout].nodeBottomY(t));return this.zoomTreeBounds({params:{animate:t,scale:a,onCompleted:i},x0:s-50,x1:r+50,y0:n-50,y1:e+50}),this}loadPagingNodes(t){this.attrs=this.getChartState(),t.data._pagingButton=!1;var e=t.parent.data._pagingStep,a=this.attrs.pagingStep(t.parent);t.parent.data._pagingStep=e+a,this.updateNodesState()}setExpanded(e,t=!0){this.attrs=this.getChartState();var a=this.attrs.allNodes.filter(({data:t})=>this.attrs.nodeId(t)==e)[0];if(a){if(0==(a.data._expanded=t)){let e=a.parent||{descendants:()=>[]};e.descendants().filter(t=>t!=e).forEach(t=>t.data._expanded=!1)}}else console.log(`ORG CHART - ${t?"EXPAND":"COLLAPSE"} - Node with id (${e}) not found in the tree`);return this}setCentered(e){this.attrs=this.getChartState();var t=this.attrs.generateRoot(this.attrs.data).descendants().filter(({data:t})=>this.attrs.nodeId(t).toString()==e.toString())[0];return t?(t.ancestors().forEach(t=>t.data._expanded=!0),t.data._centered=!0,t.data._expanded=!0):console.log(`ORG CHART - CENTER - Node with id (${e}) not found in the tree`),this}setHighlighted(e){this.attrs=this.getChartState();var t=this.attrs.generateRoot(this.attrs.data).descendants().filter(t=>this.attrs.nodeId(t.data).toString()===e.toString())[0];return t?(t.ancestors().forEach(t=>t.data._expanded=!0),t.data._highlighted=!0,t.data._expanded=!0,t.data._centered=!0):console.log(`ORG CHART - HIGHLIGHT - Node with id (${e}) not found in the tree`),this}setUpToTheRootHighlighted(e){this.attrs=this.getChartState();var t=this.attrs.generateRoot(this.attrs.data).descendants().filter(t=>this.attrs.nodeId(t.data).toString()===e.toString())[0];return t?(t.ancestors().forEach(t=>t.data._expanded=!0),t.data._upToTheRootHighlighted=!0,t.data._expanded=!0,t.ancestors().forEach(t=>t.data._upToTheRootHighlighted=!0)):console.log(`ORG CHART - HIGHLIGHTROOT - Node with id (${e}) not found in the tree`),this}clearHighlighting(){return this.attrs=this.getChartState(),this.attrs.allNodes.forEach(t=>{t.data._highlighted=!1,t.data._upToTheRootHighlighted=!1}),this.update(this.attrs.root),this}fullscreen(t){this.attrs=this.getChartState();let e=u.select(t||this.attrs.container).node();u.select(document).on("fullscreenchange."+this.attrs.id,function(t){(document.fullscreenElement||document.mozFullscreenElement||document.webkitFullscreenElement)==e?setTimeout(t=>{this.attrs.svg.attr("height",window.innerHeight-40)},500):this.attrs.svg.attr("height",this.attrs.svgHeight)}),e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen()}zoomIn(){var{svg:t,zoomBehavior:e}=this.getChartState();t.transition().call(e.scaleBy,1.3)}zoomOut(){var{svg:t,zoomBehavior:e}=this.getChartState();t.transition().call(e.scaleBy,.78)}toDataURL(t,e){var a=new XMLHttpRequest;a.onload=function(){var t=new FileReader;t.onloadend=function(){e(t.result)},t.readAsDataURL(a.response)},a.open("GET",t),a.responseType="blob",a.send()}exportImg({full:a=!1,scale:i=3,onLoad:s=t=>t,save:r=!0,backgroundColor:n="#FAFAFA"}={}){let o=this,{svg:t,root:d}=(this.attrs=this.getChartState(),this.attrs),e=0;var h=t.selectAll("img");let l=h.size(),g=()=>{JSON.parse(JSON.stringify(o.lastTransform()));var t=o.duration();a&&o.fit();let e=o.getChartState().svg;setTimeout(t=>{o.downloadImage({node:e.node(),scale:i,isSvg:!1,backgroundColor:n,onAlreadySerialized:t=>{o.update(d)},imageName:this.attrs.imageName,onLoad:s,save:r})},a?t+10:0)};0<l?h.each(function(){o.toDataURL(this.src,t=>{this.src=t,++e==l&&g()})}):g()}exportSvg(){var{svg:t,imageName:e}=this.getChartState();return this.downloadImage({imageName:e,node:t.node(),scale:3,isSvg:!0}),this}expandAll(){var t=this.getChartState().data;return t.forEach(t=>t._expanded=!0),this.render(),this}collapseAll(){var t=this.getChartState().allNodes;return t.forEach(t=>t.data._expanded=!1),this.initialExpandLevel(0),this.render(),this}downloadImage({node:t,scale:e=2,imageName:r="graph",isSvg:a=!1,save:n=!0,backgroundColor:o="#FAFAFA",onAlreadySerialized:d=t=>{},onLoad:h=t=>{}}){let l=t;function g(t,e){var a=document.createElement("a");"string"==typeof a.download?(document.body.appendChild(a),a.download=e,a.href=t,a.click(),document.body.removeChild(a)):location.replace(t)}function c(t){for(var e="http://www.w3.org/2000/xmlns/",a=(t=t.cloneNode(!0),window.location.href+"#"),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null,!1);i.nextNode();)for(var s of i.currentNode.attributes)s.value.includes(a)&&(s.value=s.value.replace(a,"#"));return t.setAttributeNS(e,"xmlns","http://www.w3.org/2000/svg"),t.setAttributeNS(e,"xmlns:xlink","http://www.w3.org/1999/xlink"),(new XMLSerializer).serializeToString(t)}if(a)t='<?xml version="1.0" standalone="no"?>\r\n'+(t=c(l)),g(p="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(t),r+".svg"),d();else{let i=e,s=document.createElement("img");s.onload=function(){var t=document.createElement("canvas"),e=l.getBoundingClientRect(),a=(t.width=e.width*i,t.height=e.height*i,t.getContext("2d")),a=(a.fillStyle=o,a.fillRect(0,0,e.width*i,e.height*i),a.drawImage(s,0,0,e.width*i,e.height*i),t.toDataURL("image/png"));h&&h(a),n&&g(a,r+".png")};var p="data:image/svg+xml; charset=utf8, "+encodeURIComponent(c(l));d(),s.src=p}}getTextWidth(t,{fontSize:e=14,fontWeight:a=400,defaultFont:i="Helvetice",ctx:s}={}){return s.font=`${a||""} ${e}px ${i} `,s.measureText(t).width}clear(){this.attrs=this.getChartState(),u.select(window).on("resize."+this.attrs.id,null),this.attrs.svg&&this.attrs.svg.selectAll("*").remove()}dragStart(t,e,a){this.attrs=this.getChartState(),this.attrs.dragNode=a;var i=e.subject.width;this.attrs.dragStartX=e.x-i/2,this.attrs.dragStartY=parseFloat(e.y),this.attrs.isDragStart=!0,u.select(t).classed(this.attrs.draggingClass(),!0),this.attrs.debug&&console.log("[DEBUG] onDragStart"),this.attrs.onDragStart.apply(t,[a,e])}drag(t,e){if(this.attrs=this.getChartState(),this.attrs.dragNode){this.attrs.debug&&console.log("[DEBUG.drag] isDragStart: "+this.attrs.isDragStart);var a=u.select(t);this.attrs.isDragStart&&(this.attrs.isDragStart=!1,a.raise(),s=[...(i=e.subject.descendants())||[],e.subject],this.attrs.linksWrapper.selectAll("path.link").data(s,t=>this.attrs.nodeId(t)).remove(),s=i.filter(t=>t.data.id!==e.subject.id))&&this.attrs.nodesWrapper.selectAll("g.node").data(s,t=>this.attrs.nodeId(t)).remove(),this.attrs.dragTargetNode=null;let n={width:e.subject.width,height:e.subject.height,left:e.x,right:e.x+e.subject.width,top:e.y,bottom:e.y+e.subject.height,midX:e.x+e.subject.width/2,midY:e.y+e.subject.height/2};var i=u.selectAll(`g.node:not(.${this.attrs.draggingClass()})`),s=this.attrs.dragTargetNode;i.filter(function(t,e){const a=t.x,i=t.x+t.width,s=t.y,r=t.y+t.height;if(n.midX>a&&n.midX<i&&n.midY>s&&n.midY<r&&this.classList.contains(this.attrs.droppableClass()))return this.attrs.dragTargetNode=t}),this.attrs.dragStartX+=parseFloat(e.dx),this.attrs.dragStartY+=parseFloat(e.dy),this.attrs.debug&&console.log(`[DEBUG.drag] translating node to: ${"translate("+this.attrs.dragStartX+","+this.attrs.dragStartY+")"} and added the following coords: (${e.dx}, ${e.dy})`),a.attr("transform","translate("+this.attrs.dragStartX+","+this.attrs.dragStartY+")"),s&&(this.attrs.debug&&console.log("[DEBUG] outDragTarget"),this.attrs.outDragTarget.apply(t,[this.attrs.dragNode,s,e])),this.attrs.debug&&console.log("[DEBUG] onDragTarget",u.selectAll(`g.node:not(.${this.attrs.draggingClass()})`),a,u.selectAll("g.node")),this.attrs.onDragTarget.apply(t,[this.attrs.dragNode,this.attrs.dragTargetNode,e])}}dragEnd(t,e){var a;this.dragNode&&(this.attrs=this.getChartState(),u.select(t).classed(this.attrs.draggingClass(),!1),this.attrs.dragTargetNode&&e.subject.parent.id!==this.attrs.dragTargetNode.id&&(u.select(t).remove(),a=this.attrs.data.find(t=>t.id===e.subject.id),this.attrs.onDrop.apply(t,[this.attrs.dragNode,this.attrs.dragTargetNode]),a.parentId=this.attrs.dragTargetNode.id,this.attrs.dragTargetNode=null,this.attrs.dragNode=null),this.render())}}});