@ctrl/react-orgchart 1.3.0 → 1.4.0

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["helpers.getCursorForNode","getName","helpers.getName","helpers.customOnClick","getTitle","helpers.getTitle","getCount","helpers.getCount","helpers.wrapText","defaultChartConfig","config","zoom","zoomer","defaultConfig"],"sources":["../src/chart/config.ts","../src/utils/collapse.ts","../src/utils/wrapText.ts","../src/utils/helpers.ts","../src/chart/components/iconLink.ts","../src/chart/onClick.ts","../src/chart/renderLines.ts","../src/chart/render.ts","../src/chart/index.ts","../src/orgChart.tsx"],"sourcesContent":["const animationDuration = 350;\nconst shouldResize = true;\n\n// Nodes\nconst nodeWidth = 140;\nconst nodeHeight = 190;\nconst nodeSpacing = 12;\nconst nodePaddingX = 16;\nconst nodePaddingY = 16;\nconst avatarWidth = 48;\nconst nodeBorderRadius = 4;\n\n// Lines\n/* Height of the line for child nodes */\nconst lineDepthY = 120;\n\n// Colors\nconst backgroundColor = '#fff';\n// Theme.borderlight\nconst borderColor = '#E7E1EC';\n// Theme.gray800\nconst nameColor = '#302839';\n// Theme.gray600\nconst titleColor = '#645574';\nconst reportsColor = '#92A0AD';\n\nexport interface Config {\n  animationDuration: number;\n  nodeWidth: number;\n  nodeHeight: number;\n  nodeSpacing: number;\n  nodePaddingX: number;\n  nodePaddingY: number;\n  nodeBorderRadius: number;\n  avatarWidth: number;\n  lineDepthY: number;\n  backgroundColor: string;\n  borderColor: string;\n  nameColor: string;\n  titleColor: string;\n  reportsColor: string;\n  shouldResize: boolean;\n  nameFontSize: number;\n  titleFontSize: number;\n  titleYTopDistance: number;\n  countFontSize: number;\n  countYTopDistance: number;\n  maxNameWordLength: number;\n  maxTitleWordLength: number;\n  maxCountWordLength: number;\n  onEntityLinkClick?: (data: unknown, event: Event) => boolean | void;\n  onNameClick?: (data: unknown, event: Event) => boolean | void;\n  onCountClick?: (data: unknown, event: Event) => boolean | void;\n  getName?: (data: unknown) => string;\n  getTitle?: (data: unknown) => string;\n  getCount?: (data: unknown) => string;\n}\n\nexport const config: Config = {\n  animationDuration,\n  nodeWidth,\n  nodeHeight,\n  nodeSpacing,\n  nodePaddingX,\n  nodePaddingY,\n  nodeBorderRadius,\n  avatarWidth,\n  lineDepthY,\n  backgroundColor,\n  borderColor,\n  nameColor,\n  titleColor,\n  reportsColor,\n  shouldResize,\n  nameFontSize: 14,\n  titleFontSize: 13,\n  titleYTopDistance: 25,\n  countFontSize: 14,\n  countYTopDistance: 72,\n  maxNameWordLength: 16,\n  maxTitleWordLength: 17,\n  maxCountWordLength: 17,\n};\n","import type { ChartNode } from '../chart/types';\n\nexport function collapse(d: ChartNode): void {\n  // Check if this node has children\n  if (d.children) {\n    d._children = d.children;\n    d.children = undefined;\n  }\n}\n","import { select, type Selection } from 'd3-selection';\n\nconst getTruncatedText = (text: string, maxWordLength: number): string => {\n  if (text.length <= maxWordLength) {\n    return text;\n  }\n\n  if (maxWordLength <= 3) {\n    return '.'.repeat(maxWordLength);\n  }\n\n  return `${text.slice(0, maxWordLength - 3)}...`;\n};\n\n// One way of achieving text-wrapping capability in SVG\n// Text is broken down to words, each word is added to a line and then the lines width is checked\n// If the line width is less than the max we move to the next word, if more we add new line etc\n// until the max number of lines is reached.\nexport function wrapText<Datum>(\n  text: Selection<SVGTextElement, Datum, SVGGElement, unknown>,\n  maxLineWidth: number,\n  maxNumberOfLines = 3,\n  maxWordLength = 17,\n): void {\n  let editedClass = '';\n\n  text.each(function eachTextNode() {\n    const textSelection = select(this);\n    const x = textSelection.attr('x');\n    const y = textSelection.attr('y');\n    const dy = Number.parseFloat(textSelection.attr('dy') ?? '0');\n    const lineHeight = 1.1;\n    const words = textSelection.text().split(/\\s+/).reverse();\n\n    let lineNumber = 0;\n    let curLineWidth = 0;\n    let word = '';\n    let line: string[] = [];\n    let tspan = textSelection\n      .text(null)\n      .append('tspan')\n      .style('text-anchor', 'middle')\n      .attr('x', x)\n      .attr('y', y)\n      .attr('dy', `${dy}em`);\n\n    while (lineNumber < maxNumberOfLines && words.length > 0) {\n      const nextWord = words.pop();\n      if (!nextWord) {\n        break;\n      }\n\n      word = nextWord;\n      line.push(word);\n      tspan.text(line.join(' '));\n\n      curLineWidth = tspan.node()?.getComputedTextLength() ?? 0;\n\n      if (curLineWidth > maxLineWidth) {\n        if (lineNumber + 1 === maxNumberOfLines) {\n          tspan.text(getTruncatedText(line.join(' '), maxWordLength));\n          break;\n        } else {\n          line.pop();\n          tspan.text(line.join(' '));\n          line = [word];\n          tspan = textSelection\n            .append('tspan')\n            .style('text-anchor', 'middle')\n            .attr('x', x)\n            .attr('y', y)\n            .attr('dy', `${++lineNumber * lineHeight + dy}em`)\n            .text(getTruncatedText(word, maxWordLength));\n        }\n\n        if (word.length > maxWordLength) {\n          break;\n        }\n      }\n    }\n\n    if (!editedClass) {\n      editedClass = (textSelection.attr('class') ?? '').replace(' unedited', '');\n    }\n\n    textSelection.attr('class', editedClass);\n  });\n}\n","import type { ChartConfig, ChartNode } from '../chart/types';\n\ntype CustomClickHandler = ((data: unknown, event: Event) => boolean | void) | undefined;\ntype OnClickFactory = (config: ChartConfig) => (event: Event, datum: ChartNode) => void;\n\nexport const getName = (data: ChartNode): string => data.data.entity?.name ?? '';\n\nexport const getTitle = (data: ChartNode): string => data.data.entity?.title ?? '';\n\nexport const getCount = (data: ChartNode): string => {\n  const visibleChildren = data.children?.length ?? 0;\n  const collapsedChildren = data._children?.length ?? 0;\n  const children = visibleChildren > 0 ? visibleChildren : collapsedChildren;\n\n  if (!children) {\n    return '';\n  }\n\n  return `Team (${children})`;\n};\n\nexport const getCursorForNode = (data: ChartNode): string =>\n  data.children || data._children || data.data.children || data.data._children\n    ? 'pointer'\n    : 'default';\n\nexport const customOnClick =\n  (fn: CustomClickHandler, onClick: OnClickFactory, config: ChartConfig) =>\n  (event: Event, data: ChartNode): void => {\n    if (typeof fn === 'function') {\n      if (fn(data, event)) {\n        onClick(config);\n      } else {\n        event.stopPropagation();\n      }\n    }\n  };\n","import type { Selection } from 'd3-selection';\n\nimport type { ChartNode } from '../types';\n\ntype EntityLinkSelection = Selection<HTMLAnchorElement, ChartNode, SVGGElement, unknown>;\n\nexport const iconLink = ({\n  svg,\n  x = 5,\n  y = 5,\n}: {\n  svg: EntityLinkSelection;\n  x?: number;\n  y?: number;\n}): void => {\n  const container = svg\n    .append('g')\n    .attr('stroke', 'none')\n    .attr('fill', 'none')\n    .style('cursor', 'pointer')\n    .append('g');\n\n  const icon = container\n    .append('g')\n    .attr('id', 'icon')\n    .attr('fill', '#9585A3')\n    .attr('transform', `translate(${x}, ${y})`);\n\n  const arrow = icon\n    .append('g')\n    .attr('id', 'arrow')\n    .attr(\n      'transform',\n      'translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000)',\n    );\n\n  arrow\n    .append('path')\n    .attr(\n      'd',\n      'M3.41421356,2 L8.70710678,7.29289322 C9.09763107,7.68341751 9.09763107,8.31658249 8.70710678,8.70710678 C8.31658249,9.09763107 7.68341751,9.09763107 7.29289322,8.70710678 L2,3.41421356 L2,7 C2,7.55228475 1.55228475,8 1,8 C0.44771525,8 0,7.55228475 0,7 L0,1.49100518 C0,0.675320548 0.667758414,0 1.49100518,0 L7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 L3.41421356,2 Z',\n    );\n\n  arrow\n    .append('path')\n    // .attr('opacity', 0.7)\n    .attr(\n      'd',\n      'M12,2 L12,12 L2,12 L2,11 C2,10.4477153 1.55228475,10 1,10 C0.44771525,10 0,10.4477153 0,11 L0,12.4953156 C0,13.3242086 0.674596865,14 1.50034732,14 L12.4996527,14 C13.3281027,14 14,13.3234765 14,12.4996527 L14,1.50034732 C14,0.669321781 13.3358906,0 12.4953156,0 L11,0 C10.4477153,0 10,0.44771525 10,1 C10,1.55228475 10.4477153,2 11,2 L12,2 Z',\n    );\n\n  icon\n    .append('rect')\n    .attr('id', 'bounds')\n    .attr('x', 0)\n    .attr('y', 0)\n    .attr('width', 24)\n    .attr('height', 24)\n    .attr('fill', 'transparent');\n};\n","import type { ChartConfig, ChartNode } from './types';\n\nexport function onClick(config: ChartConfig): (event: Event, datum: ChartNode) => void {\n  const { render } = config;\n\n  return (event: Event, datum: ChartNode): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const link = target instanceof Element ? target.closest('a') : null;\n    if (link instanceof HTMLAnchorElement && link.href) {\n      return;\n    }\n\n    if (!datum.children && !datum._children) {\n      return;\n    }\n\n    if (datum.children) {\n      // Collapse the children\n      config.callerNode = datum;\n      datum._children = datum.children;\n      datum.children = undefined;\n    } else {\n      // Expand the children\n      config.callerNode = undefined;\n      datum.children = datum._children;\n      datum._children = undefined;\n    }\n\n    // Pass in the clicked datum as the sourceNode which\n    // tells the child nodes where to animate in from\n    render({\n      ...config,\n      sourceNode: datum,\n    });\n  };\n}\n","import { curveLinear, line } from 'd3-shape';\n\nimport type { ChartConfig, ChartLink } from './types';\n\nconst margin = 10;\n\ntype LinePoint = { x: number; y: number };\n\ntype RenderLinesConfig = Pick<\n  ChartConfig,\n  'svg' | 'links' | 'nodeWidth' | 'nodeHeight' | 'borderColor' | 'sourceNode' | 'animationDuration'\n>;\n\nexport function renderLines(config: RenderLinesConfig): void {\n  const { svg, links, nodeWidth, nodeHeight, borderColor, sourceNode, animationDuration } = config;\n\n  // Select all the links to render the lines\n  const link = svg\n    .selectAll<SVGPathElement, ChartLink>('path.link')\n    .data(links, ({ source, target }) => {\n      return `${source.data.id ?? ''}-${target.data.id ?? ''}`;\n    });\n\n  // Define the angled line function\n  const angle = line<LinePoint>()\n    .x(point => point.x)\n    .y(point => point.y)\n    .curve(curveLinear);\n  const halfNodeWidth = nodeWidth / 2;\n\n  // Enter new links at the parent's previous position.\n  const linkEnter = link\n    .enter()\n    .insert('path', 'g')\n    .attr('class', 'link')\n    .attr('fill', 'none')\n    .attr('stroke', borderColor)\n    .attr('stroke-opacity', 1)\n    .attr('stroke-width', 1.25)\n    .attr('d', linkDatum => {\n      const linePoints: LinePoint[] = [\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.source.y + margin,\n        },\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.source.y + margin,\n        },\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.source.y + margin,\n        },\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.source.y + margin,\n        },\n      ];\n\n      return angle(linePoints);\n    });\n\n  const linkUpdate = linkEnter.merge(link);\n\n  // Transition links to their new position.\n  linkUpdate\n    .transition()\n    .duration(animationDuration)\n    .attr('d', linkDatum => {\n      const linePoints: LinePoint[] = [\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.source.y + nodeHeight,\n        },\n        {\n          x: linkDatum.source.x + halfNodeWidth,\n          y: linkDatum.target.y - margin,\n        },\n        {\n          x: linkDatum.target.x + halfNodeWidth,\n          y: linkDatum.target.y - margin,\n        },\n        {\n          x: linkDatum.target.x + halfNodeWidth,\n          y: linkDatum.target.y,\n        },\n      ];\n\n      return angle(linePoints);\n    });\n\n  // Animate existing links to the parent's new position\n  link\n    .exit()\n    .transition()\n    .duration(animationDuration)\n    .attr('d', () => {\n      const lineNodeX = sourceNode?.x ?? 0;\n      const lineNodeY = sourceNode?.y ?? 0;\n      const linePoints: LinePoint[] = [\n        {\n          x: lineNodeX + halfNodeWidth,\n          y: lineNodeY + nodeHeight + 2,\n        },\n        {\n          x: lineNodeX + halfNodeWidth,\n          y: lineNodeY + nodeHeight + 2,\n        },\n        {\n          x: lineNodeX + halfNodeWidth,\n          y: lineNodeY + nodeHeight + 2,\n        },\n        {\n          x: lineNodeX + halfNodeWidth,\n          y: lineNodeY + nodeHeight + 2,\n        },\n      ];\n\n      return angle(linePoints);\n    })\n    .remove();\n}\n","import * as helpers from '../utils/index';\n\nimport { iconLink } from './components/iconLink';\nimport { onClick } from './onClick';\nimport { renderLines } from './renderLines';\nimport type { ChartConfig, ChartLink, ChartNode } from './types';\n\nconst CHART_NODE_CLASS = 'org-chart-node';\nconst ENTITY_LINK_CLASS = 'org-chart-entity-link';\nconst ENTITY_NAME_CLASS = 'org-chart-entity-name';\nconst ENTITY_TITLE_CLASS = 'org-chart-entity-title';\nconst COUNTS_CLASS = 'org-chart-counts';\n\nexport function render(config: ChartConfig): void {\n  const {\n    svg,\n    tree,\n    animationDuration,\n    nodeWidth,\n    nodeHeight,\n    nodePaddingY,\n    nodeBorderRadius,\n    backgroundColor,\n    nameColor,\n    titleColor,\n    reportsColor,\n    borderColor,\n    avatarWidth,\n    lineDepthY,\n    sourceNode,\n    onEntityLinkClick,\n    nameFontSize = 14,\n    titleFontSize = 13,\n    titleYTopDistance = 25,\n    countFontSize = 14,\n    countYTopDistance = 72,\n    maxNameWordLength = 16,\n    maxTitleWordLength = 17,\n    maxCountWordLength = 17,\n    getName,\n    getTitle,\n    getCount,\n    onNameClick,\n    onCountClick,\n    treeMap,\n  } = config;\n\n  // Compute the new tree layout.\n  const data = treeMap(tree);\n  const nodes = data.descendants() as ChartNode[];\n  const links = data.links() as ChartLink[];\n\n  config.links = links;\n  config.nodes = nodes;\n\n  // Normalize for fixed-depth.\n  nodes.forEach(node => {\n    node.y = node.depth * lineDepthY;\n  });\n\n  // Update the nodes\n  const node = svg\n    .selectAll<SVGGElement, ChartNode>(`g.${CHART_NODE_CLASS}`)\n    .data(nodes, nodeDatum => nodeDatum.data.id ?? '');\n  const parentNode = sourceNode ?? nodes[0];\n\n  // Enter new nodes at the parent's previous position.\n  const nodeEnter = node\n    .enter()\n    .append('g')\n    .attr('class', CHART_NODE_CLASS)\n    .attr('transform', () => {\n      return `translate(${parentNode.x0 ?? parentNode.x}, ${parentNode.y0 ?? parentNode.y})`;\n    })\n    .on('click', onClick(config));\n\n  // Entity Card Shadow\n  nodeEnter\n    .append('rect')\n    .attr('width', nodeWidth)\n    .attr('height', nodeHeight)\n    .attr('fill', backgroundColor)\n    .attr('stroke', borderColor)\n    .attr('rx', nodeBorderRadius)\n    .attr('ry', nodeBorderRadius)\n    .attr('fill-opacity', 0.05)\n    .attr('stroke-opacity', 0.025)\n    .attr('filter', 'url(#boxShadow)');\n\n  // Entity Card Container\n  nodeEnter\n    .append('rect')\n    .attr('width', nodeWidth)\n    .attr('height', nodeHeight)\n    .attr('id', nodeDatum => `${nodeDatum.data.id ?? ''}`)\n    .attr('fill', backgroundColor)\n    .attr('stroke', borderColor)\n    .attr('rx', nodeBorderRadius)\n    .attr('ry', nodeBorderRadius)\n    .style('cursor', helpers.getCursorForNode);\n\n  const namePos = {\n    x: nodeWidth / 2,\n    y: nodePaddingY * 1.8 + avatarWidth,\n  };\n\n  const avatarPos = {\n    x: nodeWidth / 2 - avatarWidth / 2,\n    y: nodePaddingY / 2,\n  };\n\n  // Entity's Name\n  nodeEnter\n    .append('text')\n    .attr('class', `${ENTITY_NAME_CLASS} unedited`)\n    .attr('x', namePos.x)\n    .attr('y', namePos.y)\n    .attr('dy', '.3em')\n    .style('cursor', 'pointer')\n    .style('fill', nameColor)\n    .style('font-size', nameFontSize)\n    .text(nodeDatum =>\n      typeof getName === 'function' ? getName(nodeDatum) : helpers.getName(nodeDatum),\n    )\n    .on('click', helpers.customOnClick(onNameClick, onClick, config));\n\n  // Title\n  nodeEnter\n    .append('text')\n    .attr('class', `${ENTITY_TITLE_CLASS} unedited`)\n    .attr('x', nodeWidth / 2)\n    .attr('y', namePos.y + nodePaddingY + titleYTopDistance)\n    .attr('dy', '0.1em')\n    .style('font-size', titleFontSize)\n    .style('cursor', 'pointer')\n    .style('fill', titleColor)\n    .text(nodeDatum =>\n      typeof getTitle === 'function' ? getTitle(nodeDatum) : helpers.getTitle(nodeDatum),\n    );\n\n  // Count\n  nodeEnter\n    .append('text')\n    .attr('class', `${COUNTS_CLASS} unedited`)\n    .attr('x', nodeWidth / 2)\n    .attr('y', namePos.y + nodePaddingY + countYTopDistance)\n    .attr('dy', '.9em')\n    .style('font-size', countFontSize)\n    .style('font-weight', 400)\n    .style('cursor', 'pointer')\n    .style('fill', reportsColor)\n    .text(nodeDatum =>\n      typeof getCount === 'function' ? getCount(nodeDatum) : helpers.getCount(nodeDatum),\n    )\n    .on('click', helpers.customOnClick(onCountClick, onClick, config));\n\n  // Entity's Avatar\n  nodeEnter\n    .append('image')\n    .attr('id', nodeDatum => `image-${nodeDatum.data.id ?? ''}`)\n    .attr('width', avatarWidth)\n    .attr('height', avatarWidth)\n    .attr('x', avatarPos.x)\n    .attr('y', avatarPos.y)\n    .attr('stroke', borderColor)\n    .attr('src', nodeDatum => nodeDatum.data.entity?.avatar ?? '')\n    .attr('href', nodeDatum => nodeDatum.data.entity?.avatar ?? '')\n    .attr('clip-path', 'url(#avatarClip)');\n\n  // Entity's Link\n  const nodeLink = nodeEnter\n    .append('a')\n    .attr('class', ENTITY_LINK_CLASS)\n    .attr('display', nodeDatum => (nodeDatum.data.entity?.link ? '' : 'none'))\n    .attr('xlink:href', nodeDatum => nodeDatum.data.entity?.link ?? '')\n    .on('click', helpers.customOnClick(onEntityLinkClick, onClick, config));\n\n  iconLink({\n    svg: nodeLink,\n    x: nodeWidth - 20,\n    y: 8,\n  });\n\n  const nodeUpdate = nodeEnter.merge(node);\n\n  // Transition nodes to their new position.\n  nodeUpdate\n    .transition()\n    .duration(animationDuration)\n    .attr('transform', nodeDatum => {\n      return `translate(${nodeDatum.x},${nodeDatum.y})`;\n    });\n\n  nodeUpdate.select('rect.box').attr('fill', backgroundColor).attr('stroke', borderColor);\n\n  // Transition exiting nodes to the parent's new position.\n  node\n    .exit()\n    .transition()\n    .duration(animationDuration)\n    .attr('transform', () => `translate(${parentNode.x},${parentNode.y})`)\n    .remove();\n\n  // Update the links\n  svg\n    .selectAll<SVGPathElement, ChartLink>('path.link')\n    .data(links, linkDatum => linkDatum.target.data.id ?? '');\n\n  [\n    { cls: ENTITY_NAME_CLASS, max: maxNameWordLength },\n    { cls: ENTITY_TITLE_CLASS, max: maxTitleWordLength },\n    { cls: COUNTS_CLASS, max: maxCountWordLength },\n  ].forEach(({ cls, max }) => {\n    svg.selectAll<SVGTextElement, ChartNode>(`text.unedited.${cls}`).call(\n      helpers.wrapText,\n      nodeWidth - 12, // Adjust with some padding\n      // Name should wrap at 3 lines max\n      cls === ENTITY_NAME_CLASS ? 3 : 2,\n      max,\n    );\n  });\n\n  // Add tooltips\n  svg\n    .selectAll<SVGTextElement, ChartNode>(`text.${ENTITY_NAME_CLASS}`)\n    .append('svg:title')\n    .text(nodeDatum => (getName ? getName(nodeDatum) : helpers.getName(nodeDatum)));\n  svg\n    .selectAll<SVGTextElement, ChartNode>(`text.${ENTITY_TITLE_CLASS}`)\n    .append('svg:title')\n    .text(nodeDatum => (getTitle ? getTitle(nodeDatum) : helpers.getTitle(nodeDatum)));\n  svg\n    .selectAll<SVGTextElement, ChartNode>(`text.${COUNTS_CLASS}`)\n    .append('svg:title')\n    .text(nodeDatum => (getCount ? getCount(nodeDatum) : helpers.getCount(nodeDatum)));\n\n  // Render lines connecting nodes\n  renderLines(config);\n\n  // Stash the old positions for transition.\n  nodes.forEach(nodeDatum => {\n    nodeDatum.x0 = nodeDatum.x;\n    nodeDatum.y0 = nodeDatum.y;\n  });\n\n  let nodeLeftX = -70;\n  let nodeRightX = 70;\n  let nodeY = 200;\n  nodes.forEach(nodeDatum => {\n    nodeLeftX = nodeDatum.x < nodeLeftX ? nodeDatum.x : nodeLeftX;\n    nodeRightX = nodeDatum.x > nodeRightX ? nodeDatum.x : nodeRightX;\n    nodeY = nodeDatum.y > nodeY ? nodeDatum.y : nodeY;\n  });\n\n  config.nodeRightX = nodeRightX;\n  config.nodeY = nodeY;\n  config.nodeLeftX = nodeLeftX * -1;\n}\n","import { hierarchy, tree } from 'd3-hierarchy';\nimport { select } from 'd3-selection';\nimport { zoom as zoomer, zoomIdentity, type D3ZoomEvent } from 'd3-zoom';\n\nimport type { TreeItem } from '../types';\nimport { collapse } from '../utils/index';\n\nimport { config as defaultChartConfig, type Config } from './config';\nimport { render } from './render';\nimport type { ChartConfig, ChartNode } from './types';\n\nexport type OrgChartInitOptions = Partial<Config> & {\n  id: string;\n  elem: HTMLElement | null;\n  data: TreeItem | TreeItem[];\n  disableCanvasMouseWheelZoom?: boolean;\n  disableCanvasMouseMove?: boolean;\n};\n\nexport function initializeOrgChart(options: OrgChartInitOptions): () => void {\n  if (!options.id) {\n    throw new Error('missing id for svg root');\n  }\n\n  const mergedConfig = {\n    ...defaultChartConfig,\n    ...options,\n  };\n\n  const { elem, nodeWidth, nodeHeight, nodeSpacing, shouldResize } = mergedConfig;\n  const treeData = mergedConfig.data as TreeItem;\n\n  // Calculate how many pixel nodes to be spaced based on the\n  // type of line that needs to be rendered\n  const lineDepthY = nodeHeight + 40;\n\n  if (!elem) {\n    throw new Error('No root elem');\n  }\n\n  // Reset in case there's pre-existing DOM\n  elem.innerHTML = '';\n  const elemWidth = elem.offsetWidth;\n  const elemHeight = elem.offsetHeight;\n\n  // Setup the d3 tree layout\n  const treeRoot = hierarchy(treeData, d => d.children ?? undefined);\n  const treeMap = tree<TreeItem>().nodeSize([nodeWidth + nodeSpacing, nodeHeight + nodeSpacing]);\n\n  // Collapse tree on load\n  treeMap(treeRoot)\n    .descendants()\n    .slice(1)\n    .forEach(node => collapse(node as ChartNode));\n\n  // Calculate width of a node with expanded children\n  // const childrenWidth = parseInt((treeData.children.length * nodeWidth) / 2)\n\n  // <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" xml:space=\"preserve\" viewBox=\"0 0 193 260\" enable-background=\" new 0 0 193 260\" height=\"260\" width=\"193\"\n  // Add svg root for d3\n  const svgroot = select(elem)\n    .append('svg')\n    .attr('id', 'svg')\n    .attr('xmlns', 'http://www.w3.org/2000/svg')\n    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')\n    .attr('x', '0px')\n    .attr('y', '0px')\n    .attr('xml:space', 'preserve')\n    .attr('viewBox', `0 0 ${elemWidth} ${elemHeight}`)\n    .attr('enable-background', ` new 0 0 ${elemWidth} ${elemHeight}`)\n    .attr('width', elemWidth)\n    .attr('height', elemHeight);\n\n  // Graph center point\n  const centerPoint = elemWidth / 2 - nodeWidth / 2 + 15;\n\n  // Add our base svg group to transform when a user zooms/pans\n  const svg = svgroot.append('g');\n\n  const config: ChartConfig = {\n    ...mergedConfig,\n    data: treeData,\n    lineDepthY,\n    treeData,\n    tree: treeRoot,\n    treeMap,\n    svg,\n    svgroot,\n    render,\n    links: [],\n    nodes: [],\n    elemWidth,\n    elemHeight,\n  };\n\n  // Defined zoom behavior\n  const zoom = zoomer<SVGSVGElement, unknown>()\n    .scaleExtent([0.1, 1.5])\n    .duration(50)\n    .on('zoom', (zoomEvent: D3ZoomEvent<SVGSVGElement, unknown>) => {\n      svg.attr('transform', zoomEvent.transform.toString());\n    });\n\n  svgroot.call(zoom.transform, zoomIdentity.translate(centerPoint, 48).scale(0.8));\n\n  const zoomedRoot = svgroot.call(zoom);\n\n  // Disable the Mouse Wheel Zooming\n  if (config.disableCanvasMouseWheelZoom) {\n    zoomedRoot.on('wheel.zoom', null);\n  }\n\n  // Disable the Mouse Wheel Canvas Content Moving\n  if (config.disableCanvasMouseMove) {\n    zoomedRoot\n      .on('mousedown.zoom', null)\n      .on('touchstart.zoom', null)\n      .on('touchmove.zoom', null)\n      .on('touchend.zoom', null);\n  }\n\n  // Add avatar clip path\n  const defs = svgroot.append('svg:defs');\n  defs\n    .append('clipPath')\n    .attr('id', 'avatarClip')\n    .append('circle')\n    .attr('cx', 70)\n    .attr('cy', 32)\n    .attr('r', 24);\n\n  // Add boxshadow\n  const filter = svgroot\n    .append('svg:defs')\n    .append('svg:filter')\n    .attr('id', 'boxShadow')\n    .attr('height', '150%')\n    .attr('width', '150%');\n\n  filter\n    .append('svg:feGaussianBlur')\n    .attr('in', 'SourceAlpha')\n    .attr('stdDeviation', 1) // blur amount\n    .attr('result', 'blurOut');\n\n  filter\n    .append('svg:feOffset')\n    .attr('in', 'blurOut')\n    .attr('dx', 0)\n    .attr('dy', 2)\n    .attr('result', 'offsetOut');\n\n  const feMerge = filter.append('feMerge');\n  feMerge.append('feMergeNode').attr('in', 'offsetOut');\n  feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\n\n  // Add listener for when the browser or parent node resizes\n  const resize = () => {\n    if (!elem) {\n      window.removeEventListener('resize', resize);\n      return;\n    }\n\n    svgroot.attr('width', elem.offsetWidth).attr('height', elem.offsetHeight);\n  };\n\n  if (shouldResize) {\n    window.addEventListener('resize', resize);\n  }\n\n  // Start initial render\n  render(config);\n\n  // return OnDestroy fn\n  return () => {\n    svgroot.remove();\n    if (shouldResize) {\n      window.removeEventListener('resize', resize);\n    }\n  };\n}\n","import { memo, useEffect, useRef } from 'react';\n\nimport { config as defaultConfig, type Config } from './chart/config';\nimport { initializeOrgChart } from './chart/index';\nimport type { TreeItem } from './types';\n\nconst defaultId = 'react-org-chart';\n\nexport type { TreeItem } from './types';\n\nexport type OrgChartProps = Partial<Config> & {\n  id?: string;\n  disableCanvasMouseMove?: boolean;\n  disableCanvasMouseWheelZoom?: boolean;\n  tree: TreeItem | TreeItem[];\n};\n\nfunction OrgChartComponent(props: OrgChartProps) {\n  const {\n    id = defaultId,\n    disableCanvasMouseMove = false,\n    disableCanvasMouseWheelZoom = false,\n    tree,\n  } = props;\n  const anchor = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const onDestroy = initializeOrgChart({\n      ...defaultConfig,\n      ...props,\n      id: `#${id}`,\n      elem: anchor.current,\n      data: tree,\n      disableCanvasMouseMove,\n      disableCanvasMouseWheelZoom,\n    });\n\n    return () => {\n      onDestroy();\n    };\n  }, [props, id, tree, disableCanvasMouseMove, disableCanvasMouseWheelZoom]);\n\n  return <div id={id} ref={anchor} style={{ width: '100%', height: '100%' }} />;\n}\n\nexport const OrgChart = memo(OrgChartComponent);\n"],"mappings":"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"}

package/package.json

@@ -1,70 +1,86 @@
 {
   "name": "@ctrl/react-orgchart",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Vx orgchart module",
-  "author": "Scott Cooper <scttcper@gmail.com>",
-  "license": "MIT",
-  "repository": "scttcper/react-orgchart",
-  "sideEffects": false,
   "keywords": [
     "org chart"
   ],
-  "scripts": {
-    "lint": "eslint --ext .js,.ts, .",
-    "lint:fix": "eslint --fix --ext .js,.ts, .",
-    "prepare": "npm run build",
-    "build": "pika build",
-    "demo:watch": "snowpack dev",
-    "demo:build": "snowpack build"
+  "license": "MIT",
+  "author": "Scott Cooper <scttcper@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scttcper/react-orgchart.git"
   },
-  "@pika/pack": {
-    "pipeline": [
-      [
-        "@pika/plugin-ts-standard-pkg",
-        {
-          "tsconfig": "tsconfig.build.json"
-        }
-      ],
-      [
-        "@pika/plugin-build-web"
-      ]
-    ]
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "oxfmt --check && oxlint .",
+    "lint:fix": "oxfmt && oxlint . --fix",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "dev": "vite",
+    "dev:build": "vite build",
+    "dev:preview": "vite preview",
+    "demo:watch": "vite",
+    "demo:build": "vite build",
+    "prepare": "pnpm build"
   },
   "dependencies": {
+    "d3-hierarchy": "^3.1.2",
     "d3-selection": "^3.0.0",
-    "d3-hierarchy": "^3.0.1",
-    "d3-zoom": "^3.0.0",
-    "d3-shape": "^3.0.1",
-    "lodash.truncate": "^4.4.2"
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0"
   },
   "devDependencies": {
-    "@ctrl/eslint-config": "2.0.11",
-    "@fullhuman/postcss-purgecss": "4.0.3",
-    "@pika/pack": "0.5.0",
-    "@pika/plugin-build-web": "0.9.2",
-    "@pika/plugin-ts-standard-pkg": "0.9.2",
-    "@snowpack/plugin-webpack": "3.0.0",
-    "@types/d3-hierarchy": "3.0.2",
-    "@types/d3-selection": "3.0.0",
-    "@types/d3-shape": "3.0.2",
-    "@types/d3-zoom": "3.0.1",
-    "@types/lodash.truncate": "4.4.6",
-    "@types/node": "16.4.10",
-    "@types/react": "17.0.15",
-    "eslint-config-xo-react": "0.25.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "performant-array-to-tree": "1.9.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "snowpack": "3.8.3",
-    "snowpack-plugin-hash": "0.16.0",
-    "typescript": "4.3.5"
+    "@ctrl/oxlint-config": "1.4.0",
+    "@faker-js/faker": "10.3.0",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/d3-hierarchy": "3.1.7",
+    "@types/d3-selection": "3.0.11",
+    "@types/d3-shape": "3.1.8",
+    "@types/d3-zoom": "3.0.8",
+    "@types/node": "25.2.3",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.4",
+    "jsdom": "28.1.0",
+    "oxfmt": "0.32.0",
+    "oxlint": "1.47.0",
+    "performant-array-to-tree": "1.11.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsdown": "0.20.3",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.18"
   },
-  "publishConfig": {
-    "access": "public"
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "release": {
     "branch": "master"
-  }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.29.3"
 }

package/.circleci/config.yml

@@ -1,46 +0,0 @@
-version: 2.1
-orbs:
-  node: circleci/node@4
-  codecov: codecov/codecov@1
-jobs:
-  test:
-    executor:
-      name: node/default
-      tag: 'current'
-    steps:
-      - checkout
-      - node/install-packages:
-          pkg-manager: yarn
-      - run:
-          name: build
-          command: yarn build
-      - run:
-          name: lint
-          command: yarn lint
-  release:
-    docker:
-      - image: cimg/node:current
-    steps:
-      - checkout
-      - node/install-packages:
-          pkg-manager: yarn
-      - run:
-          name: build
-          command: yarn build
-      - run: npx semantic-release
-
-workflows:
-  version: 2
-  test_and_release:
-    # Run the test jobs first, then the release only when all the test jobs are successful
-    jobs:
-      - test
-      - release:
-          context:
-            - npm
-          filters:
-            branches:
-              only:
-                - master
-          requires:
-            - test

package/.editorconfig

@@ -1,13 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,5 +0,0 @@
-dist
-.eslintrc.js
-pkg
-postcss.config.js
-build

package/.eslintrc

@@ -1,16 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true
-  },
-  "extends": ["@ctrl/eslint-config", "xo-react/space"],
-  "rules": {
-    "object-curly-spacing": ["error", "always"],
-    "comma-dangle": ["error", "always-multiline"],
-    "no-mixed-operators": "off",
-    "@typescript-eslint/restrict-template-expressions": "off",
-    "@typescript-eslint/prefer-optional-chain": "off",
-    "@typescript-eslint/restrict-plus-operands": "off",
-    "react/jsx-tag-spacing": "off"
-  }
-}

package/.nvmrc

@@ -1 +0,0 @@
-16

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "bracketSpacing": true,
-  "printWidth": 100,
-  "arrowParens": "avoid"
-}

package/demo/App.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { arrayToTree } from 'performant-array-to-tree';
-
-import { OrgChart } from '../src';
-import { data } from './testdata';
-
-// @ts-expect-error
-import avatarPersonnel from './assets/avatar-personnel.svg';
-
-const tree = arrayToTree(
-  data.map(x => ({ ...x, entity: { ...x, avatar: avatarPersonnel }, parentId: x.reportsTo?.id })),
-  { dataField: null },
-);
-
-export default class App extends React.Component {
-  render() {
-    // For downloading org chart as image or pdf based on id
-    return <OrgChart tree={tree[0]} />;
-  }
-}

package/demo/assets/avatar-personnel.svg

@@ -1 +0,0 @@
-<svg width="96" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="96" height="96" rx="48"/></defs><g fill="none" fill-rule="evenodd"><use fill="#F5F9FF" xlink:href="#a"/><path d="M62.297 53.094c1.666.416 3.034 1.302 4.101 2.656C67.466 57.104 68 58.64 68 60.36v2.89c0 1.042-.365 1.927-1.094 2.656-.729.73-1.614 1.094-2.656 1.094h-32.5c-1.042 0-1.927-.365-2.656-1.094-.73-.729-1.094-1.614-1.094-2.656v-2.89c0-1.72.534-3.256 1.602-4.61 1.067-1.354 2.434-2.24 4.101-2.656l5.547-1.406c2.448 1.77 5.208 2.708 8.281 2.812 3.386.104 6.459-.833 9.219-2.812l5.547 1.406zM48 24c2.24 0 4.323.56 6.25 1.68a12.411 12.411 0 0 1 4.57 4.57 12.227 12.227 0 0 1 1.68 6.25c0 2.24-.56 4.323-1.68 6.25a12.411 12.411 0 0 1-4.57 4.57A12.227 12.227 0 0 1 48 49c-2.24 0-4.323-.56-6.25-1.68a12.411 12.411 0 0 1-4.57-4.57 12.227 12.227 0 0 1-1.68-6.25c0-2.24.56-4.323 1.68-6.25a12.411 12.411 0 0 1 4.57-4.57A12.227 12.227 0 0 1 48 24z" stroke="#302839" stroke-width="4"/></g></svg>

package/demo/index.css

@@ -1,28 +0,0 @@
-html,
-body {
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  font-size: 12px;
-  font-family: 'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  -webkit-font-smoothing: antialiased;
-  background-color: aliceblue;
-}
-
-
-#root {
-  margin: auto;
-  cursor: move;
-  height: 100vh;
-  width: 100vw;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-.org-chart-entity-link:hover g {
-  fill: #409cf9 !important;
-}
-.org-chart-node .org-chart-counts {
-  fill: #409cf9 !important;
-}

package/demo/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="A react component for Google Orgchart" />
-    <link rel="stylesheet" href="/index.css" />
-    <title>React Orgchart</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/index.js"></script>
-  </body>
-</html>

package/demo/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
-);
-
-// HMR Code Snippet Example
-// @ts-expect-error
-if (import.meta.hot) {
-  // @ts-expect-error
-  import.meta.hot.accept(({ module }) => {
-    // Accept the module, apply it into your application.
-  });
-}