feat(org-chart): finalize chart features and AI generation rules

This commit is contained in:
shkim4 committed 2026-10-13 14:39:42 +09:00
1 parent 7614507583
commit d0828a7ff4
80 files changed
+8152 -221

No files matched your search

+77 -4
View File
@@ -73,8 +73,9 @@ organizationName and display (`card`, `titleOnly`, `hidden`). An explicit employ
must belong to that company's root; null removes top-card assignment. Overrides
affect presentation only, preserving employee IDs, popup data and parentId.
`employeeConnections` maps organization IDs to top/left/right staff routes (default
top). Leaders connect from their title above. SVG paths use actual article/card
`employeeConnections` maps organization IDs to top/left/right staff routes in
TB/Hybrid (default top). Their leaders connect from the title above; LR routes all
employees from the left. SVG paths use actual article/card
coordinates; each endpoint shares its direction with the corresponding single-side
border accent. Employee preset follows its known affiliation, otherwise its tree.
All remaining borders are neutral; an inset accent width variable preserves size.
@@ -92,8 +93,9 @@ const chart = createOrgChart({
});
```
Options are captured at construction: create a new handle to change the layout or
company/top-node/connection/zoom configuration. Selection uses its own setter.
Layout mode/company/top-node/connection/zoom ranges are captured at construction.
Auto `autoLayout`, `interactions`, company selection and the employee callback use
their own setters on the existing handle. See the P7 matrix in the usage guide.
Standalone Tree/Summary factories keep their existing rendering paths.
`examples/org-chart/data-expanded-{small,medium,large}.json` contain exactly
@@ -105,6 +107,51 @@ company controls without filtering JSON in the Story. Native Core controls are
the explicit framework-independent HTML adapter, not imitations of HM React UI.
### Virtual example selection (P7)
`createOrgChartExampleDataset(template, selection)` is a pure data provider for
both Vanilla and React. Supply the existing P5-3 **large** JSON fixture, which
contains all seven company presets. The old Small/Medium/Large files and their
historical 3/5/7-company policies remain unchanged; P7 selection does not require
new JSON files. The helper validates and snapshots its input, reuses organization
IDs and employee records, and adds deterministic virtual employees when a company
needs more staff than the original fixture contains.
```js
import { createOrgChartExampleDataset, JsonOrgChartDataSource } from '@hm-design/org-chart';
// template is the parsed examples/org-chart/data-expanded-large.json fixture.
const allCompanyExample = createOrgChartExampleDataset(template, {
scope: 'total', employeeCount: 100,
}); // All seven companies together: exactly 100 unique employees.
const twoCompanyExample = createOrgChartExampleDataset(template, {
scope: 'per-company', employeeCount: 100,
companyIds: ['hanmac', 'saman'],
}); // Exactly 100 employees per company, 200 in this source.
await chart.reload(new JsonOrgChartDataSource(twoCompanyExample));
```
Supported scales are exactly `20 | 100 | 300`. Scope `'total'` allocates that
count across all seven companies using the original fixture's unequal company
proportions. An optional company subset then filters those allocations **without
redistributing** them: a single selected company therefore displays only its
share of the total example. Scope `'per-company'` gives every selected company
the requested count, up to 2,100 employees for seven companies at 300 each.
Omitting `companyIds` selects all seven; repeated/out-of-order IDs are normalized
to preset order. All returned datasets are independent, deeply frozen snapshots.
Leader IDs remain references to existing employees and are never counted twice.
Missing sampled leaders are cleared while the complete, valid parent hierarchy
is retained, including the original deeper and unequal branches.
The helper rejects an empty `companyIds` list because the data contract requires
organizations. To display no companies, retain a valid source and call
`setSelectedCompanies([])` (or pass React `selectedCompanyIds={[]}`). Runtime
layout, collapse state, employee popup policy, and actual API sources remain
separate from example selection. The 2,100-person **data count** is distinct from
rendering/heap performance; the earlier 300-person result does not verify it.
### Historical P5-1B verification and local runtime
Core/React builds and Typechecks pass. Focused browser evidence covers the
@@ -198,3 +245,29 @@ Open `http://127.0.0.1:4178/index.html` for bundled ESM + external JSON. Open `e
`npm run test:org-chart-browser` expects Playwright supplied by the verification environment. If not installed locally, set `ORGCHART_PLAYWRIGHT_MODULE` to its absolute `index.mjs`/`index.js` and optionally `ORGCHART_CHROME` to a Chrome executable. Production has no browser-test dependency. Evidence is written under `test-results/org-chart-browser/`.
The React wrapper owns only ref/effect lifecycle, source/props updates and cleanup, including forwarding lookup and Auto view options; HTML and React render the same Core. Standalone `createOrgChartTree`, `createPositionSummary`, `createAffiliationSummary` and `createStatusSummary` factories are exported at the package root and return the existing `OrgChartHandle`. The four public OrgChart Stories are Logo · Personnel Summary, Department Colors, Full Composition and Expanded OrgChart. Original verification Stories and independent component Stories remain available under the excluded `internal` tag.
# P9.3 Auto 소속 변경
P9.4부터 `dragDropEnabled?: boolean`의 기본값은 `false`다. 아래 포인터·키보드·
`handle.move()` 소속 변경은 `dragDropEnabled: true`일 때만 허용하며 OFF에서는
`EDITING_DISABLED` 결과를 반환한다. 순수 데이터 helper의 이동 검증·적용 계약은 유지한다.
`handle.setDragDropEnabled(boolean)` / `handle.getDragDropEnabled()`로 같은 Auto
인스턴스를 갱신·조회한다. OFF 전환은 진행 중 이동과 강조·Pointer capture를 취소하고
완료된 이동·데이터·Zoom/Pan·접기 상태를 유지한다. Source 재요청·레이아웃 재생성은 없다.
Fixed는 생성 옵션을 무시하며 setter는 Auto 전용 사용 오류를 반환한다.
Expanded Auto는 빈 공간 Pan과 직원 카드·그룹 제목 Drag를 구분한다. 6px 이동부터
Drag를 시작하며 단순 클릭은 기존 정보 팝업·접기 동작이다. `Alt+M` → 방향키 →
Enter로도 이동하며 Esc로 취소한다. Fixed에는 편집을 적용하지 않는다.
`handle.move({ kind: 'employee' | 'organization', sourceId, targetOrganizationId })`는
포인터·키보드와 같은 검증 정책을 사용한다. `handle.getData()`는 현재 Auto의 동결된
데이터를 반환하며 `onMove(result)`로 성공(`moved: true`)·거절 결과를 받는다.
회사 간 직원 이동은 `organizationId`와 `affiliationId`를 대상 조직·회사로 변경한다.
회사 간 그룹 이동은 `parentId`, 전체 하위 조직의 `companyId`, 해당 조직 직원들의
`affiliationId`를 함께 변경한다. 같은 회사 내 이동은 기존 관계사 소속을 유지한다.
회사 Root·조직장 직원·자기 자신·자손으로의 이동은 제한한다. 성공 후 기존 엔진으로
재배치하며 대상 회사 프리셋과 새로운 조직/관계사 인원 집계를 적용한다.
데이터는 브라우저 인스턴스에만 유지한다. 회사 표시 선택은 이동 내용을 보존하고,
새 source의 reload/update는 새 데이터로 대체한다. JSON 파일·서버 저장은 수행하지 않는다.