shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(org-chart): support external CSS themes and align documentation

Browse Source
This commit is contained in:
shkim4 committed 2026-10-13 22:43:21 +09:00
1 parent dcfa4e0895
commit 346c648c09
27 files changed
+1189 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/org-chart/src/core/department-colors.ts
+2 -2
View File
@@ -37,11 +37,11 @@ export function createDepartmentColors(document: Document, context: RenderContex
['테두리', 'border', 'current-border', 'background-color', `DESIGN_ADAPTATION: ${preset.borderColor}, 헤더 시작색 재사용; 원본 카드 테두리 NOT VERIFIED`],
['Gradient', 'gradient', 'current-gradient', 'background-image', `WORKDESK_COMPUTED: ${preset.backgroundImage}`],
];
for (const [label, suffix, resolved, property, evidence] of entries) {
for (const [label, suffix, , property, evidence] of entries) {
const term = document.createElement('dt'); term.textContent = label!;
const detail = document.createElement('dd');
const swatch = document.createElement('span'); swatch.className = 'hm-orgchart-color-swatch';
swatch.style.setProperty(property!, `var(--hm-orgchart-${resolved})`);
swatch.classList.add(`hm-orgchart-color-swatch-${suffix}`);
if (property === 'color') {
swatch.textContent = 'Aa';
swatch.style.background = suffix === 'department-color' ? 'var(--hm-orgchart-current-gradient)' : 'var(--hm-orgchart-current-card-background)';
packages/org-chart/src/core/expanded-content.ts
-7
View File
@@ -27,8 +27,6 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
const vertical = value.vertical === true || (context.autoLayout?.type === 'hybrid' && Number(value.depth) + 1 >= context.autoLayout.hybridStartDepth);
node.dataset.verticalLayout = String(vertical);
const layoutDirection = context.autoLayout?.type === 'lr' || vertical ? 'left' : 'top';
node.style.setProperty('--hm-orgchart-expanded-primary', preset.primary);
preset.secondary.forEach((color, index) => node.style.setProperty(`--hm-orgchart-expanded-secondary-${index + 1}`, color));
for (const edge of node.querySelectorAll('.edge')) edge.setAttribute('aria-hidden', 'true');
const leaderId = top?.employeeId === undefined ? organization.leaderId : top.employeeId;
const leader = context.data.employees.find(employee => employee.id === leaderId && employee.organizationId === organization.id);
@@ -62,7 +60,6 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
card.draggable = false;
const employeePreset = getCompanyColorPreset(affiliationId) ?? preset;
card.dataset.companyId = employeePreset.companyId;
card.style.setProperty('--hm-orgchart-expanded-card-primary', `var(--hm-orgchart-company-${employeePreset.companyId})`);
return card;
};
if (leader && top?.display !== 'hidden' && top?.display !== 'titleOnly') {
@@ -103,10 +100,6 @@ export function createExpandedOrgChartContent(document: Document, context: Rende
content.dataset.groupHybrid = String(!!context.autoLayout?.hybridOrganizationIds.length);
content.dataset.layoutStatus = 'hierarchical';
content.dataset.cardDesignStatus = 'current-presentation';
for (const company of new Set([...context.organizationCompanies!.values(), ...context.data.employees.map(employee => employee.affiliationId)])) {
const preset = getCompanyColorPreset(company);
if (preset) content.style.setProperty(`--hm-orgchart-company-${company}`, preset.primary);
}
tree.setAttribute('aria-label', `확장형 조직 계층도 · ${presentation.wheelZoom === 'direct' ? '휠로 확대·축소' : 'Ctrl 또는 Command + 휠로 확대'} · 드래그로 이동`);
// Chart Only: titles inside organization nodes remain; the outer heading does not.
if (presentation.chartOnly) content.append(tree);
packages/org-chart/src/core/style-presets.ts
+1 -14
View File
@@ -59,18 +59,5 @@ export const organizationStylePresets = [
export function applyOrganizationStyle(element: HTMLElement, variant: number): void {
const preset = organizationStylePresets[variant] ?? organizationStylePresets[0];
element.dataset.groupVariant = String(preset.id);
const prefix = preset.variablePrefix;
element.style.setProperty('--hm-orgchart-current-card-background',
`var(${prefix}-card-background, var(--hm-orgchart-card-background, ${preset.cardBackground}))`);
element.style.setProperty('--hm-orgchart-current-card-color',
`var(${prefix}-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)))`);
element.style.setProperty('--hm-orgchart-current-department-color',
`var(${prefix}-department-color, var(--hm-orgchart-department-color, ${preset.departmentColor}))`);
element.style.setProperty('--hm-orgchart-current-border',
`var(${prefix}-border, var(--hm-orgchart-border, ${preset.borderColor}))`);
element.style.setProperty('--hm-orgchart-current-gradient',
`var(${prefix}-gradient, var(--hm-orgchart-gradient, ${preset.backgroundImage}))`);
// Compatibility aliases remain local to this presentation element.
element.style.setProperty('--hm-orgchart-accent', 'var(--hm-orgchart-current-border)');
element.style.setProperty('--hm-orgchart-group-background', 'var(--hm-orgchart-current-gradient)');
// CSS owns defaults and the cascade; JS only selects the existing preset.
}