feat(org-chart): finalize chart features and AI generation rules
This commit is contained in:
1 parent
7614507583
commit
d0828a7ff4
80 files changed
+8152
-221
No files matched your search
@@ -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 파일·서버 저장은 수행하지 않는다.
|
||||
Reference in new issue
Block a user