145 lines
8.2 KiB
TypeScript
145 lines
8.2 KiB
TypeScript
/** dabeng owns recursive widths and connectors. Reserve the tallest content
|
|
* height per depth so child rows align with unequal staff counts. Observe the
|
|
* articles rather than reserved nodes to avoid ResizeObserver feedback. */
|
|
import type { ResolvedAutoLayout } from './auto-layout-policy.js';
|
|
|
|
export function alignExpandedLevels(viewport: HTMLElement, signal: AbortSignal, layoutReady: () => void = () => {}, layout?: ResolvedAutoLayout): void {
|
|
const view = viewport.ownerDocument.defaultView;
|
|
if (!view || signal.aborted) return;
|
|
const nodes = [...viewport.querySelectorAll<HTMLElement>('.node[data-depth]')];
|
|
let frame = 0;
|
|
const align = () => {
|
|
frame = 0;
|
|
if (signal.aborted) return;
|
|
const heights = new Map<string, number>();
|
|
const widths = new Map<string, number>();
|
|
for (const node of nodes) {
|
|
const height = node.querySelector<HTMLElement>('.hm-orgchart-organization')?.offsetHeight ?? 0;
|
|
heights.set(node.dataset.depth!, Math.max(heights.get(node.dataset.depth!) ?? 0, Math.ceil(height)));
|
|
const width = node.querySelector<HTMLElement>('.hm-orgchart-organization')?.offsetWidth ?? 0;
|
|
widths.set(node.dataset.depth!, Math.max(widths.get(node.dataset.depth!) ?? 0, Math.ceil(width)));
|
|
}
|
|
for (const node of nodes) {
|
|
node.style.minHeight = layout?.type === 'lr' || node.closest('.nodes.vertical') ? '0' : `${heights.get(node.dataset.depth!) ?? 0}px`;
|
|
if (layout?.type === 'lr') node.style.minWidth = `${widths.get(node.dataset.depth!) ?? 0}px`;
|
|
node.style.setProperty('--hm-orgchart-expanded-content-height', `${node.querySelector<HTMLElement>('.hm-orgchart-organization')?.offsetHeight ?? 0}px`);
|
|
}
|
|
drawEmployeeConnectors(viewport);
|
|
if (layout?.type === 'lr' || layout?.type === 'hybrid' || layout?.hybridOrganizationIds.length) drawOrganizationConnectors(viewport, layout);
|
|
layoutReady();
|
|
};
|
|
const schedule = () => {
|
|
if (!frame && !signal.aborted) frame = view.requestAnimationFrame(align);
|
|
};
|
|
const observer = new view.ResizeObserver(schedule);
|
|
for (const node of nodes) {
|
|
const article = node.querySelector('.hm-orgchart-organization');
|
|
if (article) observer.observe(article);
|
|
}
|
|
signal.addEventListener('abort', () => {
|
|
observer.disconnect();
|
|
if (frame) view.cancelAnimationFrame(frame);
|
|
}, { once: true });
|
|
schedule();
|
|
}
|
|
|
|
/** Adapt dabeng's existing hierarchy DOM to tall HM cards. These paths own only
|
|
* connector presentation; dabeng still creates and recursively lays out nodes. */
|
|
function drawOrganizationConnectors(viewport: HTMLElement, layout: ResolvedAutoLayout): void {
|
|
const document = viewport.ownerDocument;
|
|
for (const tree of viewport.querySelectorAll<HTMLElement>('.hm-orgchart-tree')) {
|
|
tree.querySelector(':scope > .hm-orgchart-organization-connectors')?.remove();
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.classList.add('hm-orgchart-organization-connectors');
|
|
svg.setAttribute('aria-hidden', 'true');
|
|
svg.setAttribute('width', String(tree.offsetWidth));
|
|
svg.setAttribute('height', String(tree.offsetHeight));
|
|
const nodes = [...tree.querySelectorAll<HTMLElement>('.node[data-organization-id]')];
|
|
const byId = new Map(nodes.map(node => [node.dataset.organizationId!, node]));
|
|
const local = (element: HTMLElement) => {
|
|
const treeRect = tree.getBoundingClientRect(), rect = element.getBoundingClientRect();
|
|
// Forest scale is the only transform (LR's upstream rotation is scoped out).
|
|
const scale = Number(viewport.dataset.scale) || 1;
|
|
return { x: (rect.left - treeRect.left) / scale, y: (rect.top - treeRect.top) / scale,
|
|
width: element.offsetWidth, height: element.offsetHeight };
|
|
};
|
|
for (const node of nodes) {
|
|
const parent = byId.get(node.dataset.parentId!);
|
|
if (!parent) continue;
|
|
const article = parent.querySelector<HTMLElement>(':scope > .hm-orgchart-organization')!;
|
|
const heading = node.querySelector<HTMLElement>('.hm-orgchart-organization-name')!;
|
|
const from = local(article), to = local(heading);
|
|
const left = layout.type === 'lr' || !!node.closest('.nodes.vertical');
|
|
const path = document.createElementNS(svg.namespaceURI, 'path');
|
|
if (layout.type === 'lr') {
|
|
const parentHeading = local(parent.querySelector<HTMLElement>('.hm-orgchart-organization-name')!);
|
|
const x = parentHeading.x + parentHeading.width, y = parentHeading.y + parentHeading.height / 2;
|
|
const targetY = to.y + to.height / 2, rail = (x + to.x) / 2;
|
|
path.setAttribute('d', `M ${x} ${y} H ${rail} V ${targetY} H ${to.x}`);
|
|
} else if (left) {
|
|
const x = from.x + from.width / 2, y = from.y + from.height;
|
|
const rail = to.x - 16, targetY = to.y + to.height / 2;
|
|
const branchY = y + 12;
|
|
path.setAttribute('d', `M ${x} ${y} V ${branchY} H ${rail} V ${targetY} H ${to.x}`);
|
|
} else {
|
|
const x = from.x + from.width / 2, y = from.y + from.height;
|
|
const targetX = to.x + to.width / 2, rail = (y + to.y) / 2;
|
|
path.setAttribute('d', `M ${x} ${y} V ${rail} H ${targetX} V ${to.y}`);
|
|
}
|
|
path.setAttribute('data-organization-id', node.dataset.organizationId!);
|
|
path.setAttribute('data-parent-id', node.dataset.parentId!);
|
|
path.setAttribute('data-direction', left ? 'left' : 'top');
|
|
svg.append(path);
|
|
}
|
|
tree.prepend(svg);
|
|
}
|
|
}
|
|
|
|
/** Draw routes in unscaled article coordinates. The endpoint defines both the
|
|
* connector's incoming direction and the single accent side on the card. */
|
|
function drawEmployeeConnectors(viewport: HTMLElement): void {
|
|
const document = viewport.ownerDocument;
|
|
for (const article of viewport.querySelectorAll<HTMLElement>('.hm-orgchart-organization')) {
|
|
article.querySelector('.hm-orgchart-employee-connectors')?.remove();
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.classList.add('hm-orgchart-employee-connectors');
|
|
svg.setAttribute('aria-hidden', 'true');
|
|
svg.setAttribute('width', String(article.offsetWidth));
|
|
svg.setAttribute('height', String(article.offsetHeight));
|
|
let previous = article.querySelector<HTMLElement>('.hm-orgchart-top-node-title') ?? article.querySelector<HTMLElement>('.hm-orgchart-organization-name')!;
|
|
const local = (element: HTMLElement) => {
|
|
let x = 0, y = 0, current: HTMLElement | null = element;
|
|
while (current && current !== article) { x += current.offsetLeft; y += current.offsetTop; current = current.offsetParent as HTMLElement | null; }
|
|
return { x, y, width: element.offsetWidth, height: element.offsetHeight };
|
|
};
|
|
const heading = local(previous);
|
|
let source = { x: heading.x + heading.width / 2, y: heading.y + heading.height };
|
|
let staffSource = source;
|
|
for (const card of article.querySelectorAll<HTMLElement>('.hm-orgchart-employee')) {
|
|
const rect = local(card);
|
|
const direction = card.dataset.connectionDirection;
|
|
const target = direction === 'left' ? { x: rect.x, y: rect.y + rect.height / 2 }
|
|
: direction === 'right' ? { x: rect.x + rect.width, y: rect.y + rect.height / 2 }
|
|
: { x: rect.x + rect.width / 2, y: rect.y };
|
|
const path = document.createElementNS(svg.namespaceURI, 'path');
|
|
if (direction === 'left' || direction === 'right') {
|
|
const rail = direction === 'left' ? rect.x / 2 : rect.x + rect.width + (article.offsetWidth - rect.x - rect.width) / 2;
|
|
const bend = staffSource.y + (rect.y - staffSource.y) / 2;
|
|
path.setAttribute('d', `M ${staffSource.x} ${staffSource.y} V ${bend} H ${rail} V ${target.y} H ${target.x}`);
|
|
// All staff branch off the same rail above the list, avoiding crossings.
|
|
staffSource = { x: rail, y: bend };
|
|
} else {
|
|
path.setAttribute('d', `M ${source.x} ${source.y} V ${(source.y + target.y) / 2} H ${target.x} V ${target.y}`);
|
|
}
|
|
path.setAttribute('data-employee-id', card.dataset.employeeId!);
|
|
path.setAttribute('data-direction', direction ?? 'top');
|
|
path.setAttribute('data-end-x', String(target.x));
|
|
path.setAttribute('data-end-y', String(target.y));
|
|
svg.append(path);
|
|
source = { x: rect.x + rect.width / 2, y: rect.y + rect.height };
|
|
if (!card.closest('.hm-orgchart-employees')) staffSource = source;
|
|
}
|
|
article.prepend(svg);
|
|
}
|
|
}
|