@ctrl/react-orgchart 1.2.0 → 1.4.0

package/README.md

@@ -1,15 +1,15 @@
-# @ctrl/react-orgchart [![npm](https://badgen.net/npm/v/@ctrl/react-orgchart)](https://www.npmjs.com/package/@ctrl/react-orgchart) [![CircleCI](https://badgen.net/github/status/scttcper/react-orgchart)](https://circleci.com/gh/scttcper/react-orgchart)
+# @ctrl/react-orgchart [![npm](https://badgen.net/npm/v/@ctrl/react-orgchart)](https://www.npmjs.com/package/@ctrl/react-orgchart)
 
 > React wrapper around a [d3](https://d3js.org/) v6 based org chart.
 
 This is based on [smartprocure/react-org-chart](https://github.com/smartprocure/react-org-chart) which itself is also a fork. This fork has been updated to use d3 v6 and expose typescript types.
 
-DEMO: https://ctrl-react-orgchart.vercel.app
+Demo locally with `pnpm dev`.
 
 ### Install
 
 ```console
-npm install @ctrl/react-orgchart
+pnpm add @ctrl/react-orgchart
 ```
 
 ### Use

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/chart/config.d.ts
+interface Config {
+  animationDuration: number;
+  nodeWidth: number;
+  nodeHeight: number;
+  nodeSpacing: number;
+  nodePaddingX: number;
+  nodePaddingY: number;
+  nodeBorderRadius: number;
+  avatarWidth: number;
+  lineDepthY: number;
+  backgroundColor: string;
+  borderColor: string;
+  nameColor: string;
+  titleColor: string;
+  reportsColor: string;
+  shouldResize: boolean;
+  nameFontSize: number;
+  titleFontSize: number;
+  titleYTopDistance: number;
+  countFontSize: number;
+  countYTopDistance: number;
+  maxNameWordLength: number;
+  maxTitleWordLength: number;
+  maxCountWordLength: number;
+  onEntityLinkClick?: (data: unknown, event: Event) => boolean | void;
+  onNameClick?: (data: unknown, event: Event) => boolean | void;
+  onCountClick?: (data: unknown, event: Event) => boolean | void;
+  getName?: (data: unknown) => string;
+  getTitle?: (data: unknown) => string;
+  getCount?: (data: unknown) => string;
+}
+//#endregion
+//#region src/types.d.ts
+interface TreeItemEntity {
+  avatar?: string;
+  link?: string;
+  name?: string;
+  title?: string;
+  [key: string]: unknown;
+}
+interface TreeItem {
+  id?: string | number;
+  parentId?: string | number | null;
+  children?: TreeItem[] | null;
+  _children?: TreeItem[] | null;
+  entity?: TreeItemEntity;
+  [key: string]: unknown;
+}
+//#endregion
+//#region src/orgChart.d.ts
+type OrgChartProps = Partial<Config> & {
+  id?: string;
+  disableCanvasMouseMove?: boolean;
+  disableCanvasMouseWheelZoom?: boolean;
+  tree: TreeItem | TreeItem[];
+};
+declare function OrgChartComponent(props: OrgChartProps): react_jsx_runtime0.JSX.Element;
+declare const OrgChart: react.MemoExoticComponent<typeof OrgChartComponent>;
+//#endregion
+export { OrgChart, OrgChartProps, type TreeItem };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
+
+//#region src/chart/config.d.ts
+interface Config {
+  animationDuration: number;
+  nodeWidth: number;
+  nodeHeight: number;
+  nodeSpacing: number;
+  nodePaddingX: number;
+  nodePaddingY: number;
+  nodeBorderRadius: number;
+  avatarWidth: number;
+  lineDepthY: number;
+  backgroundColor: string;
+  borderColor: string;
+  nameColor: string;
+  titleColor: string;
+  reportsColor: string;
+  shouldResize: boolean;
+  nameFontSize: number;
+  titleFontSize: number;
+  titleYTopDistance: number;
+  countFontSize: number;
+  countYTopDistance: number;
+  maxNameWordLength: number;
+  maxTitleWordLength: number;
+  maxCountWordLength: number;
+  onEntityLinkClick?: (data: unknown, event: Event) => boolean | void;
+  onNameClick?: (data: unknown, event: Event) => boolean | void;
+  onCountClick?: (data: unknown, event: Event) => boolean | void;
+  getName?: (data: unknown) => string;
+  getTitle?: (data: unknown) => string;
+  getCount?: (data: unknown) => string;
+}
+//#endregion
+//#region src/types.d.ts
+interface TreeItemEntity {
+  avatar?: string;
+  link?: string;
+  name?: string;
+  title?: string;
+  [key: string]: unknown;
+}
+interface TreeItem {
+  id?: string | number;
+  parentId?: string | number | null;
+  children?: TreeItem[] | null;
+  _children?: TreeItem[] | null;
+  entity?: TreeItemEntity;
+  [key: string]: unknown;
+}
+//#endregion
+//#region src/orgChart.d.ts
+type OrgChartProps = Partial<Config> & {
+  id?: string;
+  disableCanvasMouseMove?: boolean;
+  disableCanvasMouseWheelZoom?: boolean;
+  tree: TreeItem | TreeItem[];
+};
+declare function OrgChartComponent(props: OrgChartProps): react_jsx_runtime0.JSX.Element;
+declare const OrgChart: react.MemoExoticComponent<typeof OrgChartComponent>;
+//#endregion
+export { OrgChart, OrgChartProps, type TreeItem };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,463 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let react = require("react");
+let d3_hierarchy = require("d3-hierarchy");
+let d3_selection = require("d3-selection");
+let d3_zoom = require("d3-zoom");
+let d3_shape = require("d3-shape");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/chart/config.ts
+const animationDuration = 350;
+const shouldResize = true;
+const nodeWidth = 140;
+const nodeHeight = 190;
+const nodeSpacing = 12;
+const nodePaddingX = 16;
+const nodePaddingY = 16;
+const avatarWidth = 48;
+const nodeBorderRadius = 4;
+const lineDepthY = 120;
+const backgroundColor = "#fff";
+const borderColor = "#E7E1EC";
+const nameColor = "#302839";
+const titleColor = "#645574";
+const reportsColor = "#92A0AD";
+const config = {
+	animationDuration,
+	nodeWidth,
+	nodeHeight,
+	nodeSpacing,
+	nodePaddingX,
+	nodePaddingY,
+	nodeBorderRadius,
+	avatarWidth,
+	lineDepthY,
+	backgroundColor,
+	borderColor,
+	nameColor,
+	titleColor,
+	reportsColor,
+	shouldResize,
+	nameFontSize: 14,
+	titleFontSize: 13,
+	titleYTopDistance: 25,
+	countFontSize: 14,
+	countYTopDistance: 72,
+	maxNameWordLength: 16,
+	maxTitleWordLength: 17,
+	maxCountWordLength: 17
+};
+
+//#endregion
+//#region src/utils/collapse.ts
+function collapse(d) {
+	if (d.children) {
+		d._children = d.children;
+		d.children = void 0;
+	}
+}
+
+//#endregion
+//#region src/utils/wrapText.ts
+const getTruncatedText = (text, maxWordLength) => {
+	if (text.length <= maxWordLength) return text;
+	if (maxWordLength <= 3) return ".".repeat(maxWordLength);
+	return `${text.slice(0, maxWordLength - 3)}...`;
+};
+function wrapText(text, maxLineWidth, maxNumberOfLines = 3, maxWordLength = 17) {
+	let editedClass = "";
+	text.each(function eachTextNode() {
+		var _textSelection$attr;
+		const textSelection = (0, d3_selection.select)(this);
+		const x = textSelection.attr("x");
+		const y = textSelection.attr("y");
+		const dy = Number.parseFloat((_textSelection$attr = textSelection.attr("dy")) !== null && _textSelection$attr !== void 0 ? _textSelection$attr : "0");
+		const lineHeight = 1.1;
+		const words = textSelection.text().split(/\s+/).reverse();
+		let lineNumber = 0;
+		let curLineWidth = 0;
+		let word = "";
+		let line = [];
+		let tspan = textSelection.text(null).append("tspan").style("text-anchor", "middle").attr("x", x).attr("y", y).attr("dy", `${dy}em`);
+		while (lineNumber < maxNumberOfLines && words.length > 0) {
+			var _tspan$node$getComput, _tspan$node;
+			const nextWord = words.pop();
+			if (!nextWord) break;
+			word = nextWord;
+			line.push(word);
+			tspan.text(line.join(" "));
+			curLineWidth = (_tspan$node$getComput = (_tspan$node = tspan.node()) === null || _tspan$node === void 0 ? void 0 : _tspan$node.getComputedTextLength()) !== null && _tspan$node$getComput !== void 0 ? _tspan$node$getComput : 0;
+			if (curLineWidth > maxLineWidth) {
+				if (lineNumber + 1 === maxNumberOfLines) {
+					tspan.text(getTruncatedText(line.join(" "), maxWordLength));
+					break;
+				} else {
+					line.pop();
+					tspan.text(line.join(" "));
+					line = [word];
+					tspan = textSelection.append("tspan").style("text-anchor", "middle").attr("x", x).attr("y", y).attr("dy", `${++lineNumber * lineHeight + dy}em`).text(getTruncatedText(word, maxWordLength));
+				}
+				if (word.length > maxWordLength) break;
+			}
+		}
+		if (!editedClass) {
+			var _textSelection$attr2;
+			editedClass = ((_textSelection$attr2 = textSelection.attr("class")) !== null && _textSelection$attr2 !== void 0 ? _textSelection$attr2 : "").replace(" unedited", "");
+		}
+		textSelection.attr("class", editedClass);
+	});
+}
+
+//#endregion
+//#region src/utils/helpers.ts
+const getName = (data) => {
+	var _data$data$entity$nam, _data$data$entity;
+	return (_data$data$entity$nam = (_data$data$entity = data.data.entity) === null || _data$data$entity === void 0 ? void 0 : _data$data$entity.name) !== null && _data$data$entity$nam !== void 0 ? _data$data$entity$nam : "";
+};
+const getTitle = (data) => {
+	var _data$data$entity$tit, _data$data$entity2;
+	return (_data$data$entity$tit = (_data$data$entity2 = data.data.entity) === null || _data$data$entity2 === void 0 ? void 0 : _data$data$entity2.title) !== null && _data$data$entity$tit !== void 0 ? _data$data$entity$tit : "";
+};
+const getCount = (data) => {
+	var _data$children$length, _data$children, _data$_children$lengt, _data$_children;
+	const visibleChildren = (_data$children$length = (_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.length) !== null && _data$children$length !== void 0 ? _data$children$length : 0;
+	const collapsedChildren = (_data$_children$lengt = (_data$_children = data._children) === null || _data$_children === void 0 ? void 0 : _data$_children.length) !== null && _data$_children$lengt !== void 0 ? _data$_children$lengt : 0;
+	const children = visibleChildren > 0 ? visibleChildren : collapsedChildren;
+	if (!children) return "";
+	return `Team (${children})`;
+};
+const getCursorForNode = (data) => data.children || data._children || data.data.children || data.data._children ? "pointer" : "default";
+const customOnClick = (fn, onClick, config) => (event, data) => {
+	if (typeof fn === "function") if (fn(data, event)) onClick(config);
+	else event.stopPropagation();
+};
+
+//#endregion
+//#region src/chart/components/iconLink.ts
+const iconLink = ({ svg, x = 5, y = 5 }) => {
+	const icon = svg.append("g").attr("stroke", "none").attr("fill", "none").style("cursor", "pointer").append("g").append("g").attr("id", "icon").attr("fill", "#9585A3").attr("transform", `translate(${x}, ${y})`);
+	const arrow = icon.append("g").attr("id", "arrow").attr("transform", "translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000)");
+	arrow.append("path").attr("d", "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");
+	arrow.append("path").attr("d", "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");
+	icon.append("rect").attr("id", "bounds").attr("x", 0).attr("y", 0).attr("width", 24).attr("height", 24).attr("fill", "transparent");
+};
+
+//#endregion
+//#region src/chart/onClick.ts
+function onClick(config) {
+	const { render } = config;
+	return (event, datum) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		const link = target instanceof Element ? target.closest("a") : null;
+		if (link instanceof HTMLAnchorElement && link.href) return;
+		if (!datum.children && !datum._children) return;
+		if (datum.children) {
+			config.callerNode = datum;
+			datum._children = datum.children;
+			datum.children = void 0;
+		} else {
+			config.callerNode = void 0;
+			datum.children = datum._children;
+			datum._children = void 0;
+		}
+		render({
+			...config,
+			sourceNode: datum
+		});
+	};
+}
+
+//#endregion
+//#region src/chart/renderLines.ts
+const margin = 10;
+function renderLines(config) {
+	const { svg, links, nodeWidth, nodeHeight, borderColor, sourceNode, animationDuration } = config;
+	const link = svg.selectAll("path.link").data(links, ({ source, target }) => {
+		var _source$data$id, _target$data$id;
+		return `${(_source$data$id = source.data.id) !== null && _source$data$id !== void 0 ? _source$data$id : ""}-${(_target$data$id = target.data.id) !== null && _target$data$id !== void 0 ? _target$data$id : ""}`;
+	});
+	const angle = (0, d3_shape.line)().x((point) => point.x).y((point) => point.y).curve(d3_shape.curveLinear);
+	const halfNodeWidth = nodeWidth / 2;
+	link.enter().insert("path", "g").attr("class", "link").attr("fill", "none").attr("stroke", borderColor).attr("stroke-opacity", 1).attr("stroke-width", 1.25).attr("d", (linkDatum) => {
+		return angle([
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.source.y + margin
+			},
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.source.y + margin
+			},
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.source.y + margin
+			},
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.source.y + margin
+			}
+		]);
+	}).merge(link).transition().duration(animationDuration).attr("d", (linkDatum) => {
+		return angle([
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.source.y + nodeHeight
+			},
+			{
+				x: linkDatum.source.x + halfNodeWidth,
+				y: linkDatum.target.y - margin
+			},
+			{
+				x: linkDatum.target.x + halfNodeWidth,
+				y: linkDatum.target.y - margin
+			},
+			{
+				x: linkDatum.target.x + halfNodeWidth,
+				y: linkDatum.target.y
+			}
+		]);
+	});
+	link.exit().transition().duration(animationDuration).attr("d", () => {
+		var _sourceNode$x, _sourceNode$y;
+		const lineNodeX = (_sourceNode$x = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.x) !== null && _sourceNode$x !== void 0 ? _sourceNode$x : 0;
+		const lineNodeY = (_sourceNode$y = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.y) !== null && _sourceNode$y !== void 0 ? _sourceNode$y : 0;
+		return angle([
+			{
+				x: lineNodeX + halfNodeWidth,
+				y: lineNodeY + nodeHeight + 2
+			},
+			{
+				x: lineNodeX + halfNodeWidth,
+				y: lineNodeY + nodeHeight + 2
+			},
+			{
+				x: lineNodeX + halfNodeWidth,
+				y: lineNodeY + nodeHeight + 2
+			},
+			{
+				x: lineNodeX + halfNodeWidth,
+				y: lineNodeY + nodeHeight + 2
+			}
+		]);
+	}).remove();
+}
+
+//#endregion
+//#region src/chart/render.ts
+const CHART_NODE_CLASS = "org-chart-node";
+const ENTITY_LINK_CLASS = "org-chart-entity-link";
+const ENTITY_NAME_CLASS = "org-chart-entity-name";
+const ENTITY_TITLE_CLASS = "org-chart-entity-title";
+const COUNTS_CLASS = "org-chart-counts";
+function render(config) {
+	const { svg, tree, animationDuration, nodeWidth, nodeHeight, nodePaddingY, nodeBorderRadius, backgroundColor, nameColor, titleColor, reportsColor, borderColor, avatarWidth, lineDepthY, sourceNode, onEntityLinkClick, nameFontSize = 14, titleFontSize = 13, titleYTopDistance = 25, countFontSize = 14, countYTopDistance = 72, maxNameWordLength = 16, maxTitleWordLength = 17, maxCountWordLength = 17, getName: getName$1, getTitle: getTitle$1, getCount: getCount$1, onNameClick, onCountClick, treeMap } = config;
+	const data = treeMap(tree);
+	const nodes = data.descendants();
+	const links = data.links();
+	config.links = links;
+	config.nodes = nodes;
+	nodes.forEach((node) => {
+		node.y = node.depth * lineDepthY;
+	});
+	const node = svg.selectAll(`g.${CHART_NODE_CLASS}`).data(nodes, (nodeDatum) => {
+		var _nodeDatum$data$id;
+		return (_nodeDatum$data$id = nodeDatum.data.id) !== null && _nodeDatum$data$id !== void 0 ? _nodeDatum$data$id : "";
+	});
+	const parentNode = sourceNode !== null && sourceNode !== void 0 ? sourceNode : nodes[0];
+	const nodeEnter = node.enter().append("g").attr("class", CHART_NODE_CLASS).attr("transform", () => {
+		var _parentNode$x, _parentNode$y;
+		return `translate(${(_parentNode$x = parentNode.x0) !== null && _parentNode$x !== void 0 ? _parentNode$x : parentNode.x}, ${(_parentNode$y = parentNode.y0) !== null && _parentNode$y !== void 0 ? _parentNode$y : parentNode.y})`;
+	}).on("click", onClick(config));
+	nodeEnter.append("rect").attr("width", nodeWidth).attr("height", nodeHeight).attr("fill", backgroundColor).attr("stroke", borderColor).attr("rx", nodeBorderRadius).attr("ry", nodeBorderRadius).attr("fill-opacity", .05).attr("stroke-opacity", .025).attr("filter", "url(#boxShadow)");
+	nodeEnter.append("rect").attr("width", nodeWidth).attr("height", nodeHeight).attr("id", (nodeDatum) => {
+		var _nodeDatum$data$id2;
+		return `${(_nodeDatum$data$id2 = nodeDatum.data.id) !== null && _nodeDatum$data$id2 !== void 0 ? _nodeDatum$data$id2 : ""}`;
+	}).attr("fill", backgroundColor).attr("stroke", borderColor).attr("rx", nodeBorderRadius).attr("ry", nodeBorderRadius).style("cursor", getCursorForNode);
+	const namePos = {
+		x: nodeWidth / 2,
+		y: nodePaddingY * 1.8 + avatarWidth
+	};
+	const avatarPos = {
+		x: nodeWidth / 2 - avatarWidth / 2,
+		y: nodePaddingY / 2
+	};
+	nodeEnter.append("text").attr("class", `${ENTITY_NAME_CLASS} unedited`).attr("x", namePos.x).attr("y", namePos.y).attr("dy", ".3em").style("cursor", "pointer").style("fill", nameColor).style("font-size", nameFontSize).text((nodeDatum) => typeof getName$1 === "function" ? getName$1(nodeDatum) : getName(nodeDatum)).on("click", customOnClick(onNameClick, onClick, config));
+	nodeEnter.append("text").attr("class", `${ENTITY_TITLE_CLASS} unedited`).attr("x", nodeWidth / 2).attr("y", namePos.y + nodePaddingY + titleYTopDistance).attr("dy", "0.1em").style("font-size", titleFontSize).style("cursor", "pointer").style("fill", titleColor).text((nodeDatum) => typeof getTitle$1 === "function" ? getTitle$1(nodeDatum) : getTitle(nodeDatum));
+	nodeEnter.append("text").attr("class", `${COUNTS_CLASS} unedited`).attr("x", nodeWidth / 2).attr("y", namePos.y + nodePaddingY + countYTopDistance).attr("dy", ".9em").style("font-size", countFontSize).style("font-weight", 400).style("cursor", "pointer").style("fill", reportsColor).text((nodeDatum) => typeof getCount$1 === "function" ? getCount$1(nodeDatum) : getCount(nodeDatum)).on("click", customOnClick(onCountClick, onClick, config));
+	nodeEnter.append("image").attr("id", (nodeDatum) => {
+		var _nodeDatum$data$id3;
+		return `image-${(_nodeDatum$data$id3 = nodeDatum.data.id) !== null && _nodeDatum$data$id3 !== void 0 ? _nodeDatum$data$id3 : ""}`;
+	}).attr("width", avatarWidth).attr("height", avatarWidth).attr("x", avatarPos.x).attr("y", avatarPos.y).attr("stroke", borderColor).attr("src", (nodeDatum) => {
+		var _nodeDatum$data$entit, _nodeDatum$data$entit2;
+		return (_nodeDatum$data$entit = (_nodeDatum$data$entit2 = nodeDatum.data.entity) === null || _nodeDatum$data$entit2 === void 0 ? void 0 : _nodeDatum$data$entit2.avatar) !== null && _nodeDatum$data$entit !== void 0 ? _nodeDatum$data$entit : "";
+	}).attr("href", (nodeDatum) => {
+		var _nodeDatum$data$entit3, _nodeDatum$data$entit4;
+		return (_nodeDatum$data$entit3 = (_nodeDatum$data$entit4 = nodeDatum.data.entity) === null || _nodeDatum$data$entit4 === void 0 ? void 0 : _nodeDatum$data$entit4.avatar) !== null && _nodeDatum$data$entit3 !== void 0 ? _nodeDatum$data$entit3 : "";
+	}).attr("clip-path", "url(#avatarClip)");
+	iconLink({
+		svg: nodeEnter.append("a").attr("class", ENTITY_LINK_CLASS).attr("display", (nodeDatum) => {
+			var _nodeDatum$data$entit5;
+			return ((_nodeDatum$data$entit5 = nodeDatum.data.entity) === null || _nodeDatum$data$entit5 === void 0 ? void 0 : _nodeDatum$data$entit5.link) ? "" : "none";
+		}).attr("xlink:href", (nodeDatum) => {
+			var _nodeDatum$data$entit6, _nodeDatum$data$entit7;
+			return (_nodeDatum$data$entit6 = (_nodeDatum$data$entit7 = nodeDatum.data.entity) === null || _nodeDatum$data$entit7 === void 0 ? void 0 : _nodeDatum$data$entit7.link) !== null && _nodeDatum$data$entit6 !== void 0 ? _nodeDatum$data$entit6 : "";
+		}).on("click", customOnClick(onEntityLinkClick, onClick, config)),
+		x: nodeWidth - 20,
+		y: 8
+	});
+	const nodeUpdate = nodeEnter.merge(node);
+	nodeUpdate.transition().duration(animationDuration).attr("transform", (nodeDatum) => {
+		return `translate(${nodeDatum.x},${nodeDatum.y})`;
+	});
+	nodeUpdate.select("rect.box").attr("fill", backgroundColor).attr("stroke", borderColor);
+	node.exit().transition().duration(animationDuration).attr("transform", () => `translate(${parentNode.x},${parentNode.y})`).remove();
+	svg.selectAll("path.link").data(links, (linkDatum) => {
+		var _linkDatum$target$dat;
+		return (_linkDatum$target$dat = linkDatum.target.data.id) !== null && _linkDatum$target$dat !== void 0 ? _linkDatum$target$dat : "";
+	});
+	[
+		{
+			cls: ENTITY_NAME_CLASS,
+			max: maxNameWordLength
+		},
+		{
+			cls: ENTITY_TITLE_CLASS,
+			max: maxTitleWordLength
+		},
+		{
+			cls: COUNTS_CLASS,
+			max: maxCountWordLength
+		}
+	].forEach(({ cls, max }) => {
+		svg.selectAll(`text.unedited.${cls}`).call(wrapText, nodeWidth - 12, cls === ENTITY_NAME_CLASS ? 3 : 2, max);
+	});
+	svg.selectAll(`text.${ENTITY_NAME_CLASS}`).append("svg:title").text((nodeDatum) => getName$1 ? getName$1(nodeDatum) : getName(nodeDatum));
+	svg.selectAll(`text.${ENTITY_TITLE_CLASS}`).append("svg:title").text((nodeDatum) => getTitle$1 ? getTitle$1(nodeDatum) : getTitle(nodeDatum));
+	svg.selectAll(`text.${COUNTS_CLASS}`).append("svg:title").text((nodeDatum) => getCount$1 ? getCount$1(nodeDatum) : getCount(nodeDatum));
+	renderLines(config);
+	nodes.forEach((nodeDatum) => {
+		nodeDatum.x0 = nodeDatum.x;
+		nodeDatum.y0 = nodeDatum.y;
+	});
+	let nodeLeftX = -70;
+	let nodeRightX = 70;
+	let nodeY = 200;
+	nodes.forEach((nodeDatum) => {
+		nodeLeftX = nodeDatum.x < nodeLeftX ? nodeDatum.x : nodeLeftX;
+		nodeRightX = nodeDatum.x > nodeRightX ? nodeDatum.x : nodeRightX;
+		nodeY = nodeDatum.y > nodeY ? nodeDatum.y : nodeY;
+	});
+	config.nodeRightX = nodeRightX;
+	config.nodeY = nodeY;
+	config.nodeLeftX = nodeLeftX * -1;
+}
+
+//#endregion
+//#region src/chart/index.ts
+function initializeOrgChart(options) {
+	if (!options.id) throw new Error("missing id for svg root");
+	const mergedConfig = {
+		...config,
+		...options
+	};
+	const { elem, nodeWidth, nodeHeight, nodeSpacing, shouldResize } = mergedConfig;
+	const treeData = mergedConfig.data;
+	const lineDepthY = nodeHeight + 40;
+	if (!elem) throw new Error("No root elem");
+	elem.innerHTML = "";
+	const elemWidth = elem.offsetWidth;
+	const elemHeight = elem.offsetHeight;
+	const treeRoot = (0, d3_hierarchy.hierarchy)(treeData, (d) => {
+		var _d$children;
+		return (_d$children = d.children) !== null && _d$children !== void 0 ? _d$children : void 0;
+	});
+	const treeMap = (0, d3_hierarchy.tree)().nodeSize([nodeWidth + nodeSpacing, nodeHeight + nodeSpacing]);
+	treeMap(treeRoot).descendants().slice(1).forEach((node) => collapse(node));
+	const svgroot = (0, d3_selection.select)(elem).append("svg").attr("id", "svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("xmlns:xlink", "http://www.w3.org/1999/xlink").attr("x", "0px").attr("y", "0px").attr("xml:space", "preserve").attr("viewBox", `0 0 ${elemWidth} ${elemHeight}`).attr("enable-background", ` new 0 0 ${elemWidth} ${elemHeight}`).attr("width", elemWidth).attr("height", elemHeight);
+	const centerPoint = elemWidth / 2 - nodeWidth / 2 + 15;
+	const svg = svgroot.append("g");
+	const config$1 = {
+		...mergedConfig,
+		data: treeData,
+		lineDepthY,
+		treeData,
+		tree: treeRoot,
+		treeMap,
+		svg,
+		svgroot,
+		render,
+		links: [],
+		nodes: [],
+		elemWidth,
+		elemHeight
+	};
+	const zoom = (0, d3_zoom.zoom)().scaleExtent([.1, 1.5]).duration(50).on("zoom", (zoomEvent) => {
+		svg.attr("transform", zoomEvent.transform.toString());
+	});
+	svgroot.call(zoom.transform, d3_zoom.zoomIdentity.translate(centerPoint, 48).scale(.8));
+	const zoomedRoot = svgroot.call(zoom);
+	if (config$1.disableCanvasMouseWheelZoom) zoomedRoot.on("wheel.zoom", null);
+	if (config$1.disableCanvasMouseMove) zoomedRoot.on("mousedown.zoom", null).on("touchstart.zoom", null).on("touchmove.zoom", null).on("touchend.zoom", null);
+	svgroot.append("svg:defs").append("clipPath").attr("id", "avatarClip").append("circle").attr("cx", 70).attr("cy", 32).attr("r", 24);
+	const filter = svgroot.append("svg:defs").append("svg:filter").attr("id", "boxShadow").attr("height", "150%").attr("width", "150%");
+	filter.append("svg:feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 1).attr("result", "blurOut");
+	filter.append("svg:feOffset").attr("in", "blurOut").attr("dx", 0).attr("dy", 2).attr("result", "offsetOut");
+	const feMerge = filter.append("feMerge");
+	feMerge.append("feMergeNode").attr("in", "offsetOut");
+	feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+	const resize = () => {
+		if (!elem) {
+			window.removeEventListener("resize", resize);
+			return;
+		}
+		svgroot.attr("width", elem.offsetWidth).attr("height", elem.offsetHeight);
+	};
+	if (shouldResize) window.addEventListener("resize", resize);
+	render(config$1);
+	return () => {
+		svgroot.remove();
+		if (shouldResize) window.removeEventListener("resize", resize);
+	};
+}
+
+//#endregion
+//#region src/orgChart.tsx
+const defaultId = "react-org-chart";
+function OrgChartComponent(props) {
+	const { id = defaultId, disableCanvasMouseMove = false, disableCanvasMouseWheelZoom = false, tree } = props;
+	const anchor = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const onDestroy = initializeOrgChart({
+			...config,
+			...props,
+			id: `#${id}`,
+			elem: anchor.current,
+			data: tree,
+			disableCanvasMouseMove,
+			disableCanvasMouseWheelZoom
+		});
+		return () => {
+			onDestroy();
+		};
+	}, [
+		props,
+		id,
+		tree,
+		disableCanvasMouseMove,
+		disableCanvasMouseWheelZoom
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id,
+		ref: anchor,
+		style: {
+			width: "100%",
+			height: "100%"
+		}
+	});
+}
+const OrgChart = (0, react.memo)(OrgChartComponent);
+
+//#endregion
+exports.OrgChart = OrgChart;
+//# sourceMappingURL=index.js.map