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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.storybook/preview.tsx
+2
View File
@@ -43,6 +43,8 @@ const preview: Preview = {
],
"Patterns",
["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]],
"OrgChart",
["Overview", "Department Colors", "Full Composition", "Expanded OrgChart"],
"Center Graphic",
"*",
],
AGENTS.md
+6
View File
@@ -4,6 +4,12 @@
이 파일을 먼저 읽고 필요한 항목만 탐색한다. 전체 문서·전체 소스·전체 Storybook을 반복해서 읽지 않는다.
## AI 조직도 독립 페이지 생성 — 공통 정책
- 자연어 또는 JSON·CSV·Excel에서 **새 독립 조직도 페이지를 생성하는 작업**은 먼저 [AI 조직도 자동 생성 정책](docs/org-chart/ai-page-generation-rules.md)을 읽고 적용한다. 회사·조직 유형·Depth·인원수를 특정 사례의 기본값으로 고정하지 않는다.
- 기본 화면에는 요청한 조직도와 기존 탐색 기능만 표시한다. AI 채팅·생성 입력·JSON·테스트·별도 통계·개발 안내와 Navigation은 요청 없이 추가하지 않는다. 이 범위에서는 아래 일반 업무 화면의 Navigation 의무 대신 해당 정책의 최소 화면 규칙을 따른다. 공개 API·Theme·React·접근성·검증 규칙은 계속 적용한다.
- 기존 Full Composition·Expanded OrgChart·P9.5·P-AI1에는 소급 적용하지 않는다. 일반 업무 화면과 명시적인 기존 화면 수정에는 기존 규칙 및 해당 요청 범위를 유지한다.
1. 범위 `STORYBOOK_ONLY | PRODUCTION_UI | BOTH`, Runtime, 요구사항·필수 동작·완료 조건을 확인한다. 신규 AI 업무 화면은 실제 HM React 컴포넌트를 사용한다. 명시적 다른 Runtime adapter는 [상세 계약](docs/guidelines/runtime-portability.md)을 따른다.
2. [기능별 선택·완료 계약](docs/guidelines/ai-screen-contract.md) → [Component / Pattern 인덱스](docs/guidelines/component-pattern-reference.md) → 선택한 문서·대표 All Story·필요한 Props 순으로 읽는다. Import는 `@hm-design/ui` 공개 API가 기본이다. 의존성은 package.json의 exports/types와 실제 파일 목록을 확인하며 내부 src/dist 경로를 추측하지 않는다. verification Story는 운영 기준이 아니다.
3. 요구 기능에 맞는 기존 Pattern을 먼저 확인한 뒤 기존 Component → Variant/Prop → Composition 순으로 재사용한다. 목록 검색은 [FilterBar](docs/patterns/filter-bar.md)를 Table 유무와 관계없이 검토한다. 미사용 시 요구사항과 맞지 않는 API·구조 제약을 기록하며 강제하지 않는다. 기본 HTML·임의 CSS·`data-slot`으로 HM을 모방하지 않는다. 재사용은 import가 아닌 실제 렌더링으로 확인한다.
CLAUDE.md
+1
View File
@@ -9,6 +9,7 @@ shadcn/ui(Radix, Tailwind v4, CVA) 기반 HM 디자인 시스템 시제품. Reac
규칙의 기준은 아래 문서이며, 이 파일에는 규칙 본문을 복사하지 않는다. 작업 전에 해당 문서를 읽는다.
- `AGENTS.md` — AI Implementation Defaults와 Navigation 필수 요약. 기존 Component / Storybook Reference 우선, Theme / Semantic 기본 적용, 단일 Navigation, 최소 Custom은 사용자의 별도 지시 없이 모든 신규·수정 UI에 적용한다.
- [AI 조직도 자동 생성 정책](docs/org-chart/ai-page-generation-rules.md) — 자연어 또는 JSON·CSV·Excel에서 새 독립 조직도 페이지를 생성할 때 먼저 읽는다. 가변 계층·정확한 인원·제공 데이터 보존·기존 Core/React 재사용을 따른다. 화면은 요청한 조직도와 탐색 기능만 표시하며, 이 범위의 Navigation 예외는 `AGENTS.md`의 조직도 전용 규칙을 따른다. 기존 Full Composition·Expanded OrgChart·P9.5·P-AI1에는 소급 적용하지 않는다.
- 일반 업무 화면은 Storybook에 등록하지 않고 별도 React 화면·독립 미리보기로 제공한다. Storybook 수정은 Component/Pattern 또는 명시적 Storybook Reference 작업에 한정한다. 상세한 Storybook / 화면 생성 분리는 `AGENTS.md`와 `docs/guidelines/shadcn-기반-구현-원칙.md`를 따른다.
- `docs/guidelines/프로젝트-지침.md` — §6 컴포넌트·Storybook·CSS 작업 규칙 (모든 컴포넌트 작업 전 필독)
- `docs/guidelines/shadcn-기반-구현-원칙.md` — Component / Pattern / Story의 재사용 우선순위와 Custom 구현 허용 조건 (관련 작업 전 필독)
docs/org-chart/ai-page-generation-rules.md
+96
View File
@@ -0,0 +1,96 @@
# HMDesign — AI 조직도 페이지 자동 생성 공통 정책
적용 대상은 Codex·Claude 등 AI 코딩 에이전트가 자연어 또는 제공 데이터에서 **새로 생성하는 독립 조직도 페이지**다. 회사, 조직 유형, 계층, Depth, 인원수에 종속되지 않는다. **고정형(Fixed)과 확장형(Auto/Expanded) 모두 동일한 화면 생성 원칙을 적용한다.** 기존 Full Composition 및 Expanded OrgChart의 승인된 화면은 변경하지 않으며, 기존 P9.5·P-AI1 결과에도 소급 적용하지 않는다.
## 1. 실행 방식과 적용 우선순위
- 사용자가 코딩 에이전트에 요청을 전달하면 에이전트가 조직 JSON과 실제 페이지 코드를 생성한다. 웹페이지에 AI 채팅창이나 생성 입력 UI를 추가하지 않는다. 브라우저 AI Provider 연결은 이 실행 방식의 전제가 아니다.
- 현재 사용자의 명시적 요청 → 이 정책의 AI 조직도 전용 범위 → 충돌하지 않는 기존 AGENTS.md·CLAUDE.md 및 HM 공개 계약 순으로 적용한다. 관련 문서는 필요한 부분만 읽는다.
- 이 정책의 기본 화면은 조직도만 표시한다. 일반 업무 화면의 GNB/LNB/DASHBOARD Navigation 의무를 가져와 메뉴나 Header를 추가하지 않는다. 사용자가 Navigation을 요청한 경우에만 기존 단일 Navigation 계약을 적용한다.
- 기존 Core·React Wrapper·Theme·카드·Storybook을 요청 없이 변경하지 않는다. 필요한 공통 변경은 사유와 영향 범위를 먼저 보고한다. 새 조직도 엔진이나 디자인 시스템은 만들지 않는다.
## 2. 요청을 가변 구조로 정리
화면 구현 전에 다음 조건을 내부 생성 계획에 정리한다. 계획·가정·검증 결과는 작업 보고나 별도 파일에 기록하며 조직도 화면에 자동 삽입하지 않는다.
- 회사명·회사 수·회사 ID 및 회사별 독립 트리
- 대표이사 유무와 소속, 조직장·직원·직위 조건
- 부문·본부·실·부서·팀·사업부 등 요청된 조직 유형과 명칭
- 부모·자식 관계, 조직별 서로 다른 하위 조직 수와 직원 수
- 전체 직원 수, 조직 수, Depth 및 집계 범위
- 사용자 지정 추가 UI와 필요한 기존 탐색 기능
특정 중간 단계나 공통 Depth를 강제하지 않는다. 조직 수와 직원 수는 요청에서 산출하며 전용 회사 템플릿·배열 길이·고정 분배값으로 대체하지 않는다. 삼안의 6본부·17팀·500명은 테스트 사례일 뿐 기본값이나 완료 기준이 아니다.
다음 요청 형태를 모두 같은 해석·변환 절차로 처리한다. 실제 렌더링 가능 여부는 사용 중인 Core의 공개 계약을 확인한다.
- 회사 → 본부 → 팀 → 직원
- 회사 → 부문 → 본부 → 부서 → 팀 → 직원
- 대표이사 → 실 → 부서 → 직원
- 회사 → 사업부 → 직원
- 여러 회사 → 회사마다 다른 조직 계층과 Depth → 직원
Depth에 회사나 직원 카드를 포함하는지, 조직별 인원이 직접 소속인지 하위 조직 포함인지 구분한다. 의미가 불분명해 구조나 총원이 달라지는 경우 해당 항목만 질문한다. 내부 렌더러의 0부터 시작하는 인덱스를 사용자 Depth와 혼동하지 않는다.
## 3. 자연어에서 가상 데이터 생성
- 명시된 회사·조직명·관계·유형·조직 수·직원 수·직위·대표이사 유무를 정확히 반영한다. 합계가 충돌하거나 관계를 결정할 수 없으면 생성 전에 필요한 조건만 질문한다.
- 미지정 가상 명칭과 직원 분배는 요청 범위 안에서 합리적으로 결정할 수 있다. 선택한 값과 근거를 화면 밖에서 보고한다. 이전 테스트의 회사·Depth·팀 수·직원 수를 재사용하지 않는다.
- 요청하지 않은 대표이사, 중간 조직, 조직장용 추가 직원을 템플릿에서 자동 삽입하지 않는다. 대표이사가 직원 카드인지 조직 노드인지 구분하며 직원과 조직을 중복 생성하지 않는다.
- 전체 직원 수에는 별도 지시가 없는 한 요청된 대표이사·조직장을 포함한다. 직원 레코드는 한 번만 생성하고 조직장 참조를 연결한다. 조직별 직접 인원과 하위 조직 포함 인원을 분리해 집계한다.
- 직원 ID는 전체 데이터에서 고유하게 생성한다. 회사·조직 ID도 트리 간 충돌하지 않아야 한다. 입력 순서가 달라져도 같은 원본 항목의 내부 ID가 불필요하게 바뀌지 않도록 한다.
- 가상 데이터와 적용 가정을 사용자에게 명확히 보고한다. 화면 배너나 개발 안내는 기본적으로 추가하지 않고, 명시적으로 요청된 표시만 구현한다.
## 4. JSON·CSV·Excel 제공 데이터 변환
원본 구조와 값을 우선한다. 원본 파일·파싱 결과와 Contract 변환 결과를 분리해 관리한다.
- 직원·조직을 임의로 추가·삭제·합치지 않는다. 직원명·조직명·직위·원본 ID·상하위 관계를 변경하지 않는다. trim, 철자 교정, 누락 노드 합성, 임의 인원 분배를 적용하지 않는다.
- 행 수와 실제 조직·직원 수를 구분한다. 반복된 조직 정보가 같은 조직인지 원본 ID와 관계로 확인한다. 동명이인을 같은 직원으로 취급하거나 같은 이름의 조직을 자동 합치지 않는다.
- ID가 없는 항목에 변환용 내부 ID만 별도로 생성할 수 있다. 원본 필드와의 대응을 남긴다. 항목을 구별할 수 없으면 추가 식별 정보를 요청한다.
- 필요한 필드·컬럼 매핑을 확인한다. 원본에 없는 근무 상태·관계사·조직 유형·메타데이터를 실제 정보처럼 채우지 않는다. Contract 필수값이 없으면 사용자에게 확인하고, 명시적으로 허용된 변환 기본값은 원본과 구분해 기록한다.
- 중복 ID, 누락 조직·직원, 잘못된 부모·소속·조직장 참조, 순환 관계, 회사 간 계층 연결, 원본과 변환 결과의 조직 수·직원 수를 검사한다. 오류는 원본 행·셀 또는 변환 경로와 수정할 항목으로 표시한다.
- Excel의 선택 시트와 컬럼 범위를 확인한다. 여러 시트를 임의로 합치거나 제외하지 않는다. 수식·날짜·서식 있는 숫자·앞자리 0·인코딩을 보존할 수 없으면 지원 한계를 알리고 필요한 입력 형태를 요청한다.
- Contract에 없는 원본 정보는 별도 원본 자료에 보존한다. 미지원 필드를 Contract에 넣거나 원본을 조용히 버리지 않는다. 오류 데이터의 부분 렌더링은 사용자가 요청하고 안전하게 구분할 수 있을 때만 허용한다.
## 5. 현재 Core Contract와 공개 API 확인
관련 안내는 [데이터 계약](data-contract.md), [Expanded 사용 안내](expanded-usage.md)와 실제 작업 기준 커밋의 패키지 exports·타입·Validator다. 문서의 초안이나 과거 검증을 현재 지원 증거로 사용하지 않는다.
- `@hm-design/org-chart`의 Organization·Employee, Validator·DataSource와 `@hm-design/org-chart-react`의 공개 OrgChart를 우선 재사용한다. 공개 CSS export와 실제 React bootstrap을 연결한다. 내부 src/dist 경로를 추측하거나 기존 Core를 복제하지 않는다.
- 업무상 조직 유형과 Contract의 기계적 type 값을 구분한다. 사용자 조직명은 유지하고 확인된 대응을 기록한다. 새 enum을 임의로 넣거나 맞지 않는 유형으로 조용히 치환하지 않는다.
- 회사별 독립 트리와 회사 ID·컬러 매핑을 확인한다. 특정 회사나 회사 수를 기본값으로 고정하지 않는다. 미등록 회사를 기존 회사 ID에 임의 연결하지 않는다. 필요한 프리셋이나 공개 확장 경로가 없으면 제약과 필요한 결정을 보고한다.
- 대표이사는 공개 조직장·상단 직원 표현 API로 연결한다. 기술적 루트가 필요한 경우 업무 조직과의 대응 및 집계 범위를 확인한다. 실제 제공 데이터에 가짜 회사·대표이사·조직을 추가하지 않는다.
- Core의 Validator를 통과한 데이터만 DataSource와 렌더러에 연결한다. 별도 사전 검사는 가능하지만 기존 Validator를 우회하거나 실패 항목을 삭제해 통과시키지 않는다.
- 레이아웃·Depth·대표이사 표현·다중 회사·TB/LR/Hybrid·Zoom/Pan·접기·팝업은 실제 공개 API가 지원하는 범위만 사용한다. 직원 연결 방향을 전체 트리 방향 지원으로 해석하지 않는다.
- 요청 구조나 최소 화면을 공개 API로 정확히 표현할 수 없으면 지원 한계와 대안을 보고한다. 임의 구현·합성 화면을 기존 Core 결과라고 주장하지 않는다. 공통 기능 확장이 필요하면 별도 승인 범위로 분리한다.
## 6. 조직도 중심의 독립 페이지
- AI가 생성하는 Fixed 페이지와 Auto/Expanded 페이지 모두 요청한 조직도만 표시하는 원칙을 따른다. 레이아웃 모드가 다르다는 이유로 추가 UI를 허용하지 않는다. 해당 모드에서 지원되는 기존 Zoom/Pan·접기·펼치기·직원 정보 보기 등 탐색 기능은 유지한다. 요청 데이터가 달라지면 계층과 렌더링도 그 데이터에서 달라져야 한다.
- 사용자가 별도로 요청하지 않는 한 조직도 외의 설명 문구, 안내 패널, 테스트 정보, JSON 미리보기 또는 불필요한 추가 UI를 표시하지 않는다. AI 입력창, 사용 설명, 생성 조건 설명, 별도 통계, 개발 문구, Navigation과 추가 메뉴도 동일하게 제외한다. 저장·게시·다운로드·운영 API는 요청 범위 밖에서 추가하지 않는다.
- 기존 카드·회사색·연결선·직원 팝업 디자인과 Theme를 유지한다. 지원되는 공개 옵션으로 불필요한 내장 설명·요약을 제외하되 탐색 기능은 유지한다. 공개 옵션이 없으면 제약을 보고하며 Shadow DOM을 임의 조작하거나 공통 CSS를 고쳐 감추지 않는다.
- 실제 콘텐츠 크기와 컨테이너를 기준으로 지원되는 초기 자동 배치·Fit을 적용한다. 임의 고정 좌표·배율을 회사별 템플릿으로 만들지 않는다. 전체 개요와 확대 시 읽기, 내부 이동, 외부 가로 넘침을 함께 확인한다.
- 최소 배율, 많은 직원, 긴 명칭, 깊은 계층, 여러 회사에서 전체 Fit이 불가능하면 잘림·읽기·탐색 한계를 보고한다. 이를 해결하려고 이름·인원·Depth를 줄이지 않는다.
- 새 페이지는 독립 React entry로 제공한다. 기존 Full Composition·Expanded OrgChart·Storybook 메뉴·P9.5·P-AI1 결과를 교체하지 않는다.
- Guard나 문서 분석기의 제약 때문에 요청하지 않은 Navigation·통계·설명 UI를 추가하지 않는다. 정책과 검사 도구가 충돌하면 원본 검사 결과와 원인을 보고하며 도구나 공통 계약을 이번 범위 밖에서 임의 수정하지 않는다.
## 7. 생성 절차와 최종 통합 검증
1. 요청을 분석하고 현재 작업 경로·Git 상태·기준 커밋·공개 API를 확인한다. 기존 미커밋 변경과 병렬 작업, 서버 포트를 보호한다.
2. 회사별 계층·유형·Depth·조직 수·직원 수·조직장 집계 조건을 정리한다. 충돌하는 필수 조건만 확인한다.
3. 요청에서 가상 데이터를 생성하거나 제공 데이터를 보존해 변환한다. 계획과 변환 대응은 화면 밖에 기록한다.
4. 기존 Contract와 추가 정합성 검사를 통과시킨다. 이는 잘못된 데이터를 렌더러에 넘기지 않기 위한 필요한 사전 확인이다.
5. 공개 Core·React Wrapper로 조직도만 있는 독립 페이지를 생성한다. 새로운 구조를 고정된 사례로 바꾸지 않는다.
6. 구현 후 변경 범위의 코드·diff·계층·인원·중복 집계·보존·핵심 동작을 한 번에 검증한다. 필요한 Typecheck·Build·Guard를 수행하고 실제 브라우저에서 확인한다. 이미 성공한 동일 조건 검사를 반복하지 않고 수정·실패 범위만 다시 확인한다.
7. 390/768/1280/1440px에서 초기 Fit, 콘텐츠/내부 스크롤, 줄바꿈, 카드·연결선·회사색, Zoom/Pan·접기·팝업, 키보드·포커스를 관련 사용 요소에 맞게 확인한다. 실제 실행 URL과 화면 캡처를 보고한다.
8. 요청 대비 회사·조직·Depth·직원·조직장 집계, 생성 파일, 재사용 API, 가정, 제약, PASS/PARTIAL/FAIL와 NOT VERIFIED를 간결하게 보고한다. Guard 원본·정적·Runtime·STYLE 디자인 의도/최종 상태를 구분하고 미검증을 덮어쓰지 않는다.
정책 작성·연결만 수행하는 작업에는 화면 구현·빌드·브라우저 실행·전체 회귀를 추가하지 않는다. 데이터 생성·렌더링 기능을 실행하지 않았다면 정책 작성 완료를 범용 런타임 지원 PASS로 보고하지 않는다.
## 8. 범위 보호와 완료 기준
- 기존 P9.5·P-AI1 산출물과 검증 기록을 보존한다. 이번 정책 작성·연결 범위는 이 파일과 AGENTS.md·CLAUDE.md의 참조 안내이며 화면·데이터·Core 변경을 포함하지 않는다.
- 이 정책을 참조한 생성 요청만으로 Stage·Commit·Push·Merge를 승인받은 것으로 간주하지 않는다. 현재 사용자의 작업별 Git 지시를 우선하며 이번 정책 작성에서는 해당 작업을 진행하지 않는다.
- 서로 다른 회사·대표이사 유무·조직 유형·Depth·분기 수·직원 수가 같은 요청 분석 → 데이터 변환 → Contract 검증 → Core 소비 절차로 처리돼야 한다. 특정 테스트 수치나 전용 템플릿에 의존하면 완료가 아니다.
- 생성 작업의 완료는 명시 조건의 일치, 제공 데이터 보존, 기존 Core의 실제 렌더링, 요청 범위의 최소 UI, 실행 증거로 판단한다. 미지원 구조를 지원한 것처럼 보고하거나 분석·JSON만으로 화면 생성 성공을 선언하지 않는다.
docs/org-chart/expanded-usage.md
+136 -8
View File
@@ -1,4 +1,4 @@
# Expanded OrgChart 사용 및 스타일 — P5-4
# Expanded OrgChart 사용 및 스타일 — P7
2026-10-12 사용자 변경 요구사항으로 **현재 확장형 카드 외형과 크기를 유지**한다.
`Group 3391.svg`, `Group 1171288761.svg` 검색·재현·용도 배정은 이번 완료 조건에서 제외한다.
@@ -42,7 +42,8 @@ console.log(chart.getViewportState(), getCompanyColorPreset('hanmac')?.primary);
`JsonOrgChartDataSource`는 인라인 JSON 또는 호스트가 제공하는 HTTP(S)/상대 URL을 받는다.
URL을 사용할 경우 `new JsonOrgChartDataSource('./data-expanded-large.json')`처럼 지정한다.
file:// Fetch는 지원하지 않는다. 이번 작업에 외부 API·서버·DB 구현은 추가하지 않았다.
현재 JSON 예시는 Small 20명/3회사, Medium 100명/5회사, Large 300명/7회사다.
기존 JSON 예시는 Small 20명/3회사, Medium 100명/5회사, Large 300명/7회사다.
P7의 7회사 합산·회사별 선택은 Large를 기반으로 아래 공개 helper를 사용한다.
## React
@@ -72,8 +73,9 @@ export function ExpandedExample() {
위 native 버튼은 React 계약만 설명하는 최소 예시다. HM 화면에서는 실제 기존
`Button`, `Checkbox`, `Label`, `Select`를 조합한다. Expanded Story가 그 사용 예다.
Source·옵션 객체를 안정적으로 유지한다. Core 생성 옵션(모드·TopNode·연결 방향·Zoom 설정)을
Source·옵션 객체를 안정적으로 유지한다. Core 생성 옵션(layoutMode·TopNode·연결 방향·Zoom 범위)을
변경하면 React는 handle을 다시 생성한다. Vanilla는 새 handle을 생성한다.
`autoLayout`·`interactions`·회사 선택·팝업 선택은 기존 인스턴스에서 갱신한다.
회사 선택은 기존 setter/React prop으로 변경하며 원본 JSON과 parentId를 수정하지 않는다.
React에는 별도 레이아웃 알고리즘이나 imperative ref API가 없다.
@@ -95,7 +97,9 @@ Employee 관계를 유지한다. `companyId` 생성 옵션은 기존 JSON의 회
표의 값은 기존 `getCompanyColorPreset(companyId)`에서 조회한다. 카드에 중복 하드코딩하지 않는다.
타이틀은 조직 회사, 카드 강조색은 알려진 직원 affiliation(미등록 시 조직 회사)의 프리셋을 쓴다.
삼안·장헌산업 타이틀은 기존 짙은 중립 텍스트 정책을 유지한다.
현재 사용자 확정에 따라 모든 회사 타이틀은 normal/hover/focus/접힘/펼침에서 흰색을 유지한다.
이는 P7 시작 전 기존 미커밋 변경을 보존한 결과다. 삼안·장헌산업 흰 글자의 대비 진단은
접근성 승인으로 재분류하지 않으며, 이번 기능 확장으로 메인 컬러를 바꾸지 않는다.
`companyTopNodes`는 `employeeId`, `title`, `name`, `profileImage`, `organizationName`,
`display: 'card' | 'titleOnly' | 'hidden'`을 지원한다. 생략 시 Root의 leaderId를 사용하며,
@@ -104,7 +108,8 @@ employeeId는 그 Root에 소속된 기존 직원이어야 한다. null은 최
`employeeConnections`의 지원 값은 `top | left | right`다. Depth를 기준으로 정하지 않는다.
직원 연결선의 실제 도착점과 같은 면에만 회사 Border를 표시하며, 조직장은 타이틀 아래
상단 연결을 사용한다. 다른 면은 중립, 강조는 inset이라 외형 크기가 변하지 않는다.
TB/Hybrid에서는 상단 연결을 사용한다. LR은 조직장·일반 직원 모두 왼쪽에서 연결되며
직원별 실제 도착 면과 왼쪽 Border가 일치한다. 다른 면은 중립, 강조는 inset이라 외형 크기가 변하지 않는다.
연결 없는 카드에 임의로 accent를 붙이는 별도 `none` API는 없다. 현재 Auto presenter의
렌더링된 카드는 모두 타이틀 또는 이전 카드/분기 rail과 연결된다.
@@ -116,7 +121,7 @@ employeeId는 그 Root에 소속된 기존 직원이어야 한다. null은 최
그룹 링크는 별도 아이콘으로 페이지 이동과 토글 동작을 분리한다.
공개 프로그래밍 방식 collapse setter는 제공하지 않는다.
직원 카드는 click·Enter·Space로 공통 직원 정보 dialog를 연다. dialog는 변환 forest 밖의
Vanilla 직원 카드는 click·Enter·Space로 공통 직원 정보 dialog를 연다. dialog는 변환 forest 밖의
native top layer에 표시되므로 Zoom과 Stage overflow의 영향을 받지 않는다.
ESC/닫기 버튼과 focus trap·카드 focus 복귀를 제공한다.
`onEmployeeClick(employee, context)` 지정 시 기본 팝업 대신 callback을 호출하며
@@ -162,6 +167,129 @@ CSS 자산을 만들고 그 URL을 `stylesheetUrls.core`로 제공할 수 있다
크기 변경 시 기존 ResizeObserver가 article의 실측 높이와 실제 endpoint를 재계산한다.
향후 변경에는 Fit·형제/하위 트리 겹침·텍스트 overflow를 다시 확인해야 한다.
이번 P5-4는 기본 geometry를 바꾸지 않으며 대용량 성능의 과거 수치를 재측정하지 않는다.
P7도 기본 카드 geometry를 바꾸지 않는다. LR/Hybrid 300명과 2,100명의 실측은
과거 P5/P6 성능과 분리하여 P7 보고서에 기록한다.
검증 범위와 실행 URL·캡처는 [P5-4 보고서](implementation-report-p5-4.md)를 참고한다.
과거 검증은 [P5-4 보고서](implementation-report-p5-4.md), P7 변경과 실측은
[P7 보고서](implementation-report-p7.md)를 참고한다.
## P7 데이터·레이아웃·독립 옵션
```js
import { createOrgChartExampleDataset } from '@hm-design/org-chart';
import template from './data-expanded-large.json';
const dataset = createOrgChartExampleDataset(template, {
scope: 'per-company', // 'total'이면 전체 7회사 합산 employeeCount
employeeCount: 300, // 20 | 100 | 300
companyIds: ['hanmac', 'saman'], // 생략하면 7회사, 이 예시는 600명
});
const chart = createOrgChart({
...configuredBaseOptions,
dataSource: new JsonOrgChartDataSource(dataset),
layoutMode: 'auto',
autoLayout: { type: 'lr', initialVisibleDepth: 'all' },
interactions: { collapse: false, zoom: true, pan: false },
});
await chart.mount();
await chart.setAutoLayout({ type: 'hybrid', hybridStartDepth: 3 });
await chart.setInteractions({ collapse: true }); // 다른 설정은 그대로
```
총량 모드는 회사별 가중 분배 후 선택한 회사만 필터링하며 재분배하지 않는다.
회사별 모드는 선택 회사마다 정확히 N명, 전체 7회사 × 300명 = 2,100명이다.
ID는 deterministic 가상 namespace로 생성하며 기존 직원 기록·조직 ID·부모 관계를 재사용한다.
원본은 변경하지 않고 반환 snapshot은 deep freeze한다. helper의 빈 회사 선택은 유효한
조직 데이터가 될 수 없어 거절하며, 화면의 빈 선택은 `setSelectedCompanies([])`로 표시한다.
| 옵션 | TB | LR | Hybrid | 제약 및 전환 |
|---|---|---|---|---|
| 레이아웃 `type` | 지원 | 지원 | 지원 | 다른 기능을 켤 필요 없음 |
| `hybridStartDepth: 2/3/4` | 적용 안 함 | 적용 안 함 | 지원 | Root=1Depth, 기본 3 |
| `hybridOrganizationIds` | 지정 그룹 자손 세로 배치 | 조합 거절 | 조합 거절 | LR/Hybrid 전환 전 목록 해제; Story는 자동 해제·disabled |
| `initialVisibleDepth: 1/2/3/'all'` | 지원 | 지원 | 지원 | 기본 all; 값을 바꾸면 접힘 상태를 초기 정책으로 재설정 |
| `interactions.collapse/zoom/pan` | 각각 지원 | 각각 지원 | 각각 지원 | 각각 기본 true; false도 다른 기능 사용을 막지 않음 |
| 회사 선택·직원 팝업 | 지원 | 지원 | 지원 | 특정 레이아웃·Zoom·Pan·접기 사용을 요구하지 않음 |
| Compact | 미지원 | 미지원 | 미지원 | 엔진 compact DOM/140×50 grid가 기존 HM 카드·접기 계약과 충돌 |
TB는 기존 경로를 유지한다. LR은 실제 dabeng `direction: 'l2r'`와 재귀 hierarchy를 사용한다.
원본 `.title/.content` 전용 회전 CSS는 HM 복합 article에 맞지 않아 Auto 범위에서
회전을 해제하고 부모 좌측·자식 우측·형제 세로 배치를 구성한다. Hybrid는 실제
`verticalLevel`/그룹 `hybrid`를 사용한다. 측정한 부모·자식 좌표로 연결선을 갱신하며
Fixed의 CSS·엔진 옵션·기존 native 팝업은 보존한다.
접기·레이아웃 전환은 유효한 조직 ID의 접힘 상태를 유지한다. 데이터·회사·레이아웃
전환은 표시된 카드·타이틀·연결선 전체 경계를 다시 측정하여 가로 중앙을 갱신한다.
자동 배치는 현재 배율을 유지하며 큰 조직도를 임의로 축소하지 않는다. 사용자가 Pan·Zoom·
100% 복원 또는 화면 밖 focus 노출로 이동한 뒤에는 데이터·회사·레이아웃 전환과 Resize에서도
배율·이동 위치를 보존한다. 명시적 Fit to View는 전체 표시 영역을 축소해 담고 가로·세로 중앙에
배치하며 자동 중앙 배치를 다시 허용한다. 개별 interaction/popup 변경은 기존 viewport와
접힘 상태를 보존한다. Pan을 꺼도 키보드로 화면 밖 카드에 도달하면 배율 유지·focus
노출을 제공한다. Fit/100% 복원은 Zoom/Pan 사용 여부와 독립적으로 가능하다.
2,100명 전체 Fit은 개요용으로 작게 축소되므로 카드 읽기에는 Zoom 또는 초기 Depth를 사용한다.
React에서 `employeePopup="hm-dialog"`는 실제 공개 HM Dialog·Avatar·Button을 사용한다.
`'core'`가 기본, `'none'`은 카드의 클릭·button 의미를 제거하되 키보드 이동용 초점은 유지한다. `onEmployeeClick`을
지정하면 선택 모드와 관계없이 callback이 우선한다. HM 모드는
`@hm-design/ui@0.1.0` optional peer와 호스트 `index.css → hm-theme.css` 연결이 필요하다.
Core/Vanilla에는 React/HM 의존성을 추가하지 않았다. peer 없는 호스트의 모든 bundler
조합 및 fresh install은 별도 미검증이다.
```tsx
<OrgChart dataSource={source} stylesheetUrls={stylesheets} layoutMode="auto"
autoLayout={{ type: 'lr', initialVisibleDepth: 2 }}
interactions={{ collapse: false, zoom: true, pan: false }}
employeePopup="hm-dialog" selectedCompanyIds={['hanmac', 'saman']} />
```
## P9.3 브라우저 소속 변경
P9.4의 공통 Core/React 옵션 `dragDropEnabled?: boolean`은 기본 OFF다. 아래 소속 변경은
ON에서 허용한다. React는 `dragDropEnabled={true}`, Vanilla는 생성 옵션 또는
`handle.setDragDropEnabled(true)`로 활성화한다. `handle.getDragDropEnabled()`로
현재 설정을 조회한다. OFF의 `handle.move()`는 `EDITING_DISABLED`를 반환하며 포인터와
Alt+M도 시작하지 않는다. 전환 시 진행 중 이동·Pointer capture·Drop 강조를 취소하고
이미 완료한 이동을 보존한다. 설정만 바꿀 때 데이터 재요청·재생성·레이아웃 갱신은 없다.
직원 정보, 그룹 접기·펼치기, Zoom/Pan/Fit은 기존 독립 설정을 따른다. Fixed는 변경하지 않는다.
Expanded Story의 데이터 범위 UI는 제거했고 예시 직원 수20/100/300명은 회사별 기준만
표시한다. 전체 합산 `createOrgChartExampleDataset` 공개 helper 계약은 유지한다.
회사 선택은 즉시 표시를 갱신하고 숨김·복귀에도 완료한 이동을 유지한다. 직원 수는 기존
**데이터 적용**으로 새 예시를 생성하며 임시 이동과 새 Fixture를 섞지 않는다. 초기 설정은
7개 회사×20명=140명, 선택2개×100명=200명, 선택7개×300명=2,100명이다.
Expanded Story의 외곽 미리보기는 실제 Center Storybook 공통 카드 CSS의
`--sb-center-card-background` / `--sb-center-card-border` / `--sb-center-card-radius`를
재사용한다. 전용 `--hm-orgchart-expanded-preview-background`, `-border`, `-radius`
입력은 `.hm-orgchart-expanded` 외곽에만 적용한다. 직원 카드·회사 타이틀·Viewport의
색상 입력은 그대로이며, 입력을 생략한 Vanilla의 기존 기본 외곽 스타일은 유지한다.
Auto의 빈 공간 드래그는 기존 Pan이며 직원 카드·그룹 타이틀 드래그는 회사 내부 또는
회사 간 소속 변경이다. 직원 이동은 `organizationId`, 조직 그룹 이동은 `parentId`를
갱신한다. 같은 회사 내부에서는 파견 직원을 포함한 기존 `affiliationId`를 보존한다.
회사 간 직원 이동은 `affiliationId`도 대상 회사로 변경하고, 회사 간 그룹 이동은 이동
그룹과 하위 조직 전체의 `companyId`, 소속 직원 전체의 `affiliationId`도 대상 회사로
변경한 새 snapshot을 현재 Core 인스턴스에 적용한다. ID·하위 계층·
이름·직위·사진·조직장·정렬은 보존하며 회사 색상과 인원 집계는 대상 회사에 맞춰 갱신한다.
원본 JSON·회사 프리셋·서버 데이터는 변경하지 않는다.
그룹 클릭의 접기·펼치기와 직원 클릭의 정보 팝업은 유지하며 실제 드래그 뒤의 포인터
click은 억제한다. 자기 자신·자손을 부모로 지정하는 이동, 회사 Root 이동,
조직장 참조를 손상시키는 직원 이동은 거절하며 이유를 안내한다.
직원 카드 또는 그룹 타이틀에 초점을 둔 뒤 `Alt+M`으로 이동을 시작할 수 있다.
방향키로 대상을 선택하고 `Enter`로 확인하거나 `ESC`로 취소한다. 팝업을 꺼도 직원
카드는 이동 조작을 위한 초점을 제공한다. Fixed에는 소속 변경을 추가하지 않는다.
Core와 React의 `onMove(result: OrgChartMoveResult)`는 이동 성공·실패를 알린다.
`result.moved`로 성공을 구분하며, React는 성공한 이동 후 열린 HM 직원 Dialog를 닫는다.
React callback 변경은 최신 committed callback만 갱신하고 Core를 재생성하거나 reload하지 않는다.
Expanded Story는 모든 회사의 원본 예시를 하나의 세션 source로 유지하고 회사 선택은
`selectedCompanyIds`로 처리한다. 회사 숨김·다시 표시·빈 선택은 성공한 소속 변경을
보존한다. **데이터 적용**은 현재 draft 조건으로 새 예시 source를 만들고 이동 내용을
초기화한다. **초기화**는 최초 설정과 최초 소속으로 돌아가며 설정값이 이미 최초값이어도
이동 내용은 되돌린다. 파일을 다시 작성하거나 React key로 강제 remount하지 않는다.
Story의 직원 합계와 그룹 선택은 성공한 `onMove`의 `result.data`를 별도 read model로
읽으며, source identity는 유지한다. 표시 직원 수는 최초 예시 인원이 아닌 현재 조직의
회사 소속을 기준으로 계산하므로 회사 간 이동 직후와 회사 숨김·다시 표시에도 일치한다.
미리보기에는 선택 회사별 현재 직원 수도 표시하며 데이터 설정의 회사당 인원은 예시 생성 기준이다.
docs/org-chart/implementation-report-p10.md
+196
View File
@@ -0,0 +1,196 @@
# HMDesign OrgChart P10 — main 비교 및 최종 품질 검증
RESULT: **PARTIAL — 확인한 기능은 PASS, 신규 제품 회귀 0. 기존 Guard FAIL·접근성 잔여·디자인 승인 및 배포 미검증은 남아 있다.**
이번 작업은 비교·검증·보고만 수행했다. 기존 구현과 승인 카드/회사색을 수정하지 않았다. main 변경 적용, Stage·Commit·Push·PR은 진행하지 않았다. 정식 main 통합을 무조건 PASS로 승인하는 보고서는 아니다.
## 1. 기준과 증거 재사용
- 작업 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- Local HEAD 및 live remote Feature: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`
- Fetch 후 origin/main: `c45d63a03b84eaac43f01bd400a16488a80e4229`
- 공통 조상: `d18e3c33801e165e17b6d971e2f6198eed483c3c`
- 시작 시 같은 폴더의 P9.5 세션은 idle였으며, P10 동안 기존 authored 파일 변경은 없었다. 다른 세션에 메시지·중단 요청을 보내지 않았다.
- 기존 main Worktree와 AI Playground는 그대로 보존했다. Playground 페이지·JSON·변환 도구·실험 캡처를 이관하지 않았다.
AGENTS.md, CLAUDE.md, AI 생성 정책, P9.4 및 P9.5 중앙 배치/Full Composition/X 버튼/소비 화면 팝업 검증 문서를 확인했다. 최신 P9.5 popup-parity 시작 snapshot **839개 기존 파일의 SHA-256이 현재와 모두 동일**하며, Core와 Vanilla 예제의 `index.js`, `style.css`도 마지막 검증 artifact와 동일하다. 따라서 기존 정상 suite와 패키지·Storybook 빌드를 반복하지 않았다. P9.4 이후 중앙/Fit 변경은 P9.5 geometry 증거, 팝업 변경은 최종 popup-parity 증거로 연결했다.
근거: [증거 유효성](../../test-results/org-chart-p10/evidence-validity.json), [P9.5 소비 화면 검증](verification-p9-5-popup-parity.md). 보고서들의 PASS 수는 서로 합산하지 않는다.
## 2. origin/main 양방향 비교 — PASS
`git fetch origin main`을 실행했다. main에만 3개 커밋, Feature에만 7개 커밋이 있다. 공통 조상 이후 main 변경은 **6개 파일**, Feature 변경은 **192개 파일**이다. 양쪽 커밋의 공통 변경 파일 **0**, main 변경과 현재 미커밋 파일의 겹침 **0**이다. 이는 파일 변경 집합 비교이며 실제 통합 실행의 성공 증거는 아니다.
main 전용 커밋:
- `4d597a16506809a97086f7e65cfeb7fbfc486561`: Docker/nginx 정적 Storybook과 Gitea 배포 설정 추가.
- `9118c2c602791f9b90417af14f029ba9069ac265`: 실행 커밋의 immutable source archive를 SSH로 전달하고 별도 release directory에서 빌드하도록 보완.
- `c45d63a03b84eaac43f01bd400a16488a80e4229`: 위 변경의 main merge commit. 별도 UI 변경은 없다.
Feature 전용 7개 커밋의 전체 SHA·목적과 양쪽 파일 목록은 [main-comparison.json](../../test-results/org-chart-p10/main-comparison.json)에 기록했다. HEAD끼리의 큰 diff를 main이 OrgChart를 삭제한 변경으로 해석하지 않았다.
### 분류 및 적용 권고
**A. 반영 필요: 0건.** main에서 UI 컴포넌트, Dialog/Switch/Checkbox, 토큰/Typography/공통 CSS, Storybook 소스 설정, exports, React/TypeScript/build scripts, package manifest/lockfile 또는 OrgChart 인터페이스가 변경되지 않았다. 현재 OrgChart 동작을 복구하기 위한 필수 반영은 없다.
**B. 반영 권장: 6개 파일.** 아래는 동일한 배포 변경 묶음이며, 승인 후 함께 통합하는 편이 낫다.
1. `Dockerfile` — `4d597a16506809a97086f7e65cfeb7fbfc486561`. Node 24 Alpine에서 npm ci·앱·Storybook build 후 nginx 1.29 Alpine으로 제공. 현재 브라우저 동작 영향 없음, 배포 빌드에는 새 OrgChart workspace 전체가 포함돼야 한다. 승인 후 main의 최종 파일을 통합. 파일 충돌 위험 낮음; Linux/컨테이너 빌드 호환성은 NOT VERIFIED. 파일 적용 약 2~3분.
2. `compose.yaml` — 위 커밋과 `9118c2c602791f9b90417af14f029ba9069ac265`. `name: hmdesign`, 기본 6024:80 포트, restart 정책. 현재 로컬 6064 미리보기와 독립적이다. Dockerfile과 같이 통합. 파일 충돌 위험 낮음; 실제 서버 포트·Compose 상태 확인 필요. 약 1~2분.
3. `.gitea/workflows/deploy-storybook.yml` — 위 두 커밋. main push/수동 실행 시 SHA archive 전송·release directory Docker build·서비스 교체. Feature commit만으로 배포되지 않으나 추후 main push의 외부 영향이 생긴다. **초기 커밋만 cherry-pick하지 말고 archive 보완까지 포함**한다. 파일 충돌 위험 낮음; Actions 변수/Secret/SSH/서버 권한/실제 배포는 NOT VERIFIED. 파일 검토·적용 약 3~5분, 배포 검증 시간 별도.
4. `.dockerignore` — `4d597a16506809a97086f7e65cfeb7fbfc486561`. Git·node_modules·dist·검증 생성물·로컬 작업본·env 제외. OrgChart authored 소스는 포함되고 dist는 컨테이너 안에서 생성된다. Dockerfile과 같이 통합. 파일 충돌 위험 낮음. 약 1분.
5. `.gitignore` — `9118c2c602791f9b90417af14f029ba9069ac265`. `.storybook-deploy/` 제외만 추가. 현재 authored 작업과 겹침 없다. 기존 ignore 규칙을 유지하며 이 한 줄 또는 최종 main patch를 반영. 충돌 위험 낮음. 약 1분.
6. `README.md` — 위 두 커밋. Docker/PowerShell 실행·archive 기반 Gitea 배포 안내 추가. OrgChart 문서 수정과 파일 겹침 없다. 현재 OrgChart 설명을 보존하여 main의 배포 섹션만 통합. 충돌 위험 낮음. 약 2~3분.
전체 검토·통합 예상 **10~20분**, 실제 Linux Docker/서버 배포 검증 별도. 위 시간은 예상이며 실행하지 않았다.
**C. 반영 불필요: 별도 변경 0건.** 모든 신규 파일은 같은 배포 목적이다. 현재 로컬 OrgChart 기능 확인을 위해 이 묶음을 적용할 필요는 없다.
**D. 현재 미커밋/승인 디자인을 덮어쓰는 파일 충돌: 0건.** Docker/Actions를 적용하거나 실제 merge하여 검증하지 않았으므로 통합·배포 위험이 없는 것으로 단정하지 않는다. main 변경을 실제 반영하려면 별도 승인이 필요하다.
## 3. P9.5 최종 완료 여부 — 기능 PASS / 디자인 승인 NOT VERIFIED
**대표자 화살촉:** 마지막 `arrowhead-touch/after.json` 25/25 PASS를 재사용했다. 원본 상향 Chevron 모양, 카드 하단 중앙, 카드와 간격 약 0px(최대 0.0001 디자인px), 확대/축소/세로 이동 보존. 대표자 화살촉 1개는 협업 화살표 5개와 별개다. 이전 8.7px 간격 기록은 당시 결과로 보존하며 최종값으로 사용하지 않는다.
**협업 화살표:** PNG 원본 4종을 사용하는 5개 SVG image를 유지한다. Full의 69/69 배치 검사 및 화살표 픽셀/원본 hash 검증을 재사용했고 현재 Full 캡처에서도 5개가 표시된다. 새 화살표나 카드/연결선 디자인 변경 없음.
**파견·휴직:** 기존보다 12 디자인px 위, bottom anchor 82. 관계사 바와 기준 간격 14.609375 디자인px. 축소 화면의 실제 간격은 배율에 따라 줄어든다. 제목·직원 카드 스타일 변경 없음.
**Full 적응형 배치:** [최종 Full 보고서](implementation-report-p9-5-full-composition.md)의 1920×1080, 1920×1440, 1440×900, 1280×1024, 390×844 측정을 재사용했다. 상단/하단은 콘텐츠 내부 앵커이고 중앙은 확보된 여유 높이에 배치한다. 동일 mount에서 높이 +360px이면 하단 +360px, 중앙 +180px, 상단 유지. 카드 실제 교차·표시 잘림·실사용 스크롤 0, 가로 중심 최대 오차 약 0.000061px. 높이가 부족한 1440×900은 기존 비례 축소/상대 배치를 유지하므로 세로 중심 오차 −24.756px를 숨기지 않는다. transform 전 raw scroll 치수와 실제 표시 overflow를 구분했다.
**Core X 버튼:** [X 버튼 보고서](implementation-report-p9-5-core-dialog-close.md) 52 PASS와 [실제 소비 경로](verification-p9-5-popup-parity.md) 118 PASS를 재사용했다. 버튼 28×28, 아이콘 16×16, stroke 2, padding 0, CSS top/right 8px, HM 색/Hover/Focus 일치. Core 외부 클릭 유지, React HM Dialog 외부 클릭 닫힘 유지. 상세 버튼 검사는 반복하지 않았다.
## 4. Fixed / Expanded / Storybook — PASS (확인 범위)
- **Fixed:** 현재 React Full Composition 로딩·화면 확인 PASS. P9.5 Full 배치·화살촉·Core 팝업 근거를 재사용. 원본 SVG·회사색·카드 크기·집계 유지. Fixed는 기존 `createOrgChartContent` 경로를 사용한다.
- **Expanded:** P9.4 회사별 20/100/300명, 회사 dropdown·scope UI 제거·기본 Drag & Drop OFF·OFF 이동 차단/독립 Pan·ON 직원/그룹 이동·소속/집계·접기·컬러·TB/LR/Hybrid 검증을 재사용. P9.5 중앙/Fit 124/124, 변환/실제 pointer 62/62 PASS가 최근 viewport 변경을 검증한다. 자동 배치는 현재 100%를 유지하며 명시적 Fit이 전체 bounds에 맞춰 축소한다. 최초 100%에서 모든 회사가 동시에 보인다고 주장하지 않는다.
- **Overview:** 현재 캡처에서 회사 로고·조직/직위 표·관계사 인원 표시 확인. 승인된 요약 스타일은 보존. P9 집계/반응형 결과 재사용.
- **Department Colors:** 현재 캡처에서 대표자와 배지 없음, `홍 길 동` 표시 13개, 6개 조직 컬러·146×68 그룹장/108×52 직원 카드 및 Center preview 외곽을 확인. 장문 설명·불필요 안내 없음. 기존 7/7 이름·자산 보존 결과 재사용.
- **Full Composition:** 현재 1440px 캡처와 5개 지정 화면의 기존 측정 근거를 연결. 중앙/상하단·5개 협업 화살표·붙은 대표자 화살촉·하단 현황·Core 팝업 정상.
- **Expanded OrgChart:** 현재 7회사×20명=140명, 회사 dropdown, 직원 수20/100/300, Drag & Drop OFF, HM Dialog 선택·TB/LR/Hybrid 설정·기존 탐색 도구 확인. 상세 편집/데이터 suite는 반복하지 않음.
- **메뉴:** 실제 manager DOM에서 Components → Patterns → 최상위 OrgChart, 공개 페이지 Overview → Department Colors → Full Composition → Expanded OrgChart 확인. 내부 23개 Story는 기존 tags 기본 제외 정책을 유지하며 직접 URL/정적 index에는 존재할 수 있다.
- **공통 Container:** 네 페이지 `.sb-page`, `.sb-page-inner`의 computed background/border/radius 동일. [frame.json](../../test-results/org-chart-p10/frame.json). 공통 페이지 프레임과 조직도 내부 preview를 구분한다. Fixed Workdesk의 기존 `#F5F8FB` 면과 Department/Expanded Center의 `rgba(217,217,217,.48)`·border·8px radius는 승인된 서로 다른 specimen 디자인이며 일괄 변경하지 않았다. Department/Expanded의 Center surface 동등성은 P9.4 7/7 증거를 재사용.
## 5. Core / React / Vanilla / 데이터 — PASS (확인 범위)
Core manifest의 직접 의존성은 dabeng `orgchart@6.0.0`이며 Core source에 React/HM UI import가 없다. React Wrapper는 공개 Core `createOrgChart`를 소비하고 HM Dialog는 adapter의 lazy module이다. Core에 새 React 의존성을 추가하지 않았다. 전체 transitive package graph 인증은 NOT VERIFIED다.
Vanilla 실제 3개 예제의 최신 팝업/실행 경로는 P9.5 118 PASS로 확인돼 있다. 현재 Core JS/CSS와 Vanilla dist JS/CSS의 SHA도 동일하므로 빌드/상세 버튼 검사를 재실행하지 않았다.
이번 P10에서 **독립 production React 예제**를 기존 `npm.cmd run build:org-chart-react-example`로 빌드했다. public package entry·StrictMode의 index/Full readOnly를 1440×900·390×900에서 실행하여 렌더링·lifecycle 오류 없음·Core popup open·ESC close·카드 focus 복귀 **12 PASS**를 추가 확보했다. Storybook의 HM Dialog 및 Core 선택 경로는 기존 118 PASS로 연결했다. 예제에 신규 화면/기능은 추가하지 않았다.
데이터 1회사×20=20, 2회사×100=200, 7회사×300=2,100과 회사 Root 집계·고유 Employee ID는 P9.4 78/78 증거를 재사용했다. 이동 후 회사색·소속·집계는 P9.3/P9.4 Core/React 이동과 P9.5 실제 pointer 결과를 재사용했다. P7~P9.4 성능 suite는 반복하지 않았다. 2,100명 mount/Fit 관측은 이전 P7 기록이며 P9.5에서 전체 Fit/중앙 정렬도 확인했다. 최신 대용량 전체 interaction latency, 장시간 반복·누수·대용량 Drag 성능은 NOT VERIFIED다.
## 6. AI 생성 정책 — 문서 PASS / 범용 생성 실행 NOT VERIFIED
현재 `AGENTS.md`와 `CLAUDE.md`가 실제 `docs/org-chart/ai-page-generation-rules.md`를 참조하며 관련 문서 링크가 존재한다.
10개 문서 조건 모두 확인했다:
1. Codex의 AGENTS 참조.
2. Claude의 CLAUDE 참조.
3. Fixed/Auto 동일 최소 화면 생성 원칙.
4. 회사별 서로 다른 계층·분기·Depth 지원 요구.
5. 특정 회사/조직명·Depth·팀 수·인원 템플릿을 기본값으로 고정하지 않는 규칙.
6. 기존 Core/React public API·Validator 재사용 및 지원 한계 보고.
7. 별도 요청이 없으면 조직도·기존 탐색 기능만 표시.
8. 설명/안내/테스트/JSON/AI 입력/추가 통계/Navigation 기본 제외.
9. JSON/CSV/Excel 원본·필드 대응·ID·관계·인원 보존.
10. 기존 Full/Expanded/P9.5/P-AI1 비소급·변경 금지.
경로·참조·정책 내용 PASS다. 이 정책이 임의의 모든 구조를 현재 Core가 렌더링할 수 있음을 뜻하지 않는다. P10에서는 데이터 생성/CSV·XLSX 변환/새 AI 페이지 실험을 실행하지 않았으므로 **실제 범용 생성 테스트 NOT VERIFIED**. Playground 산출물을 이관하지 않았다.
## 7. Build / 품질 / Guard
**PASS — 새로 실행:** 전체 root `node node_modules/typescript/bin/tsc -b`, 독립 React example production build, `git diff --check`, 현재 compiled Storybook 4개 페이지/manager 로딩, 독립 React 12개 검사, 공통 frame 비교. [root-typecheck.log](../../test-results/org-chart-p10/root-typecheck.log), [react-example-build.log](../../test-results/org-chart-p10/react-example-build.log).
**PASS — 유효한 기존 결과 재사용:** Core 최신 Typecheck/Build·Storybook 최종 Build(P9.5 Core X), React 패키지 Typecheck/Build(P9.4 완료 기록; 그 뒤 Wrapper 소스 변경 없음), Vanilla prepare·최신 dist 동등성(P9.5 popup-parity). 로그와 실행 보고서를 확인했다. Core/Storybook 정상 build를 이유 없이 재실행하지 않았다. 독립 React build의 기존 500kB chunk 경고는 남으며 오류는 아니다.
현재 브라우저 확인 결과는 [browser-final.json](../../test-results/org-chart-p10/browser-final.json)의 관련 **19 PASS / FAIL0**, 신규 console/pageerror0이다. 공통 frame 1 PASS는 별도 실행으로 유지한다. 상세 기존 suite와 합산하지 않는다. Chromium `153.0.8010.12`, Windows headless 한 환경이다.
### Guard: 기존 FAIL / 신규 회귀 / 미검증 구분
누적 Story/직접 영향 Core·CSS 15개 경로의 STORYBOOK/PARTIAL Guard를 1회 실행했다. [원본 guard.json](../../test-results/org-chart-p10/guard.json), [비교 guard-comparison.json](../../test-results/org-chart-p10/guard-comparison.json).
- 원본 `status FAIL / staticStatus FAIL / runtimeStatus NOT VERIFIED`.
- **기존 FAIL10:** P9.4와 code/file/line/message가 모두 동일한 TOKEN-00110건. department-colors 5, expanded-content 2, style-presets 3. 사유는 connected consumer/public Theme CSS에서 런타임 토큰 선언을 입증하지 못하는 진단이다. 원본 FAIL을 통과로 덮어쓰지 않았다.
- **신규 FAIL0:** P10 구현 변경이 없고 이번 검사에도 새 FAIL 없음. 이는 선택 scope에 대한 결론이며 repository 전체 검사 PASS를 뜻하지 않는다.
- **NOT VERIFIED19:** SCOPE-0018(선택된 package 구현/CSS 및 `?url` Department CSS가 proven graph 밖), 동적 TOKEN-00210, 기존 Radix available-height TOKEN-0011. 이전 NOT VERIFIED 수와의 차이는 누적 선택 범위 차이이며 신규 기능 실패 수가 아니다.
- `styleEvidence`: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**. 결합 `styleVerification`은 생성하지 않았으며 NOT VERIFIED. 제한된 computed 비교·기능 PASS를 전체 CSS 디자인 승인으로 확대하지 않는다.
- **사용자 승인된 디자인 예외:** 삼안·장헌산업 흰 그룹 제목/기존 배경색 유지. 일반 텍스트 대비 미해결 진단을 보존하며 접근성 PASS로 처리하지 않는다. 이 대비 이슈는 위 Guard TOKEN FAIL10과 별개다. 배경색·회사색을 변경하지 않았다.
### 테스트 환경·검사 코드 진단
샌드박스 Fetch의 공유 Git 메타데이터 write 거부, 로컬 HTTP `EACCES`, sandbox DNS 차단은 허용된 동일 작업 실행으로 해소했다. 초기 로그를 보존하며 제품 회귀로 분류하지 않는다. CIM process 접근은 제한됐으므로 OS 전체 개발 프로세스를 완전히 확인했다고 주장하지 않는다; 앱 세션 상태, 실제 HTTP·브라우저 응답, authored 해시 보존으로 관측 범위를 확인했다.
보조 browser probe의 첫 readiness selector가 Overview의 다른 summary 구조를 포함하지 않아 timeout이었다. 수정 후 로딩은 성공했다. 정적 index의 internal `OrgChart/Content`까지 공개 메뉴로 집계한 1FAIL도 있었다. 같은 실행에서 캡처한 manager에는 정확히 공개4개만 표시됐다. [raw browser.json](../../test-results/org-chart-p10/browser.json) 26PASS/1FAIL을 보존하고, 그 manager DOM으로 메뉴 assertion만 정정하며 내부8개 로딩 검사를 보고 범위에서 제외한 **19PASS/0FAIL** 파생 결과를 작성했다. 성공한 브라우저/React 구간을 재실행하지 않았다. 재실행용 probe는 internal/verification tags를 제외하도록 바로잡았다. 제품 소스 수정 없음.
### 남은 NOT VERIFIED
최종 사용자 디자인 승인, 전체 package/CSS graph, 결합 CSS 디자인 의도·최종 상태, 다른 브라우저/OS/Theme, 실제 스크린리더·터치 기기, 모든 props/Depth/Hybrid 옵션 조합, 장시간 2,100명 성능·대용량 Drag, Classic 패키징, callback/팝업 none의 전 조합, SSR/hydration·서버 저장·운영 배포, main 통합 후 Linux Docker/npm ci/Actions 실행은 NOT VERIFIED다. Compact는 기존 NOT SUPPORTED이며 새 기능을 추가하지 않았다.
## 8. 영역별 최종 판정
- **main 비교: PASS.** Fetch/live SHA·양방향 커밋/파일·미커밋 겹침 확인. 적용은 미진행.
- **Fixed: PASS.** P9.5 배치·화살표·팝업 근거 재사용 및 현재 화면 확인.
- **Expanded: PASS.** 데이터/편집 기본값·TB/LR/Hybrid·탐색 기존 증거, 최신 중앙/실제 pointer 근거 연결.
- **Storybook: PASS.** 공개4페이지·실제 메뉴 순서·공통 frame 확인.
- **Vanilla: PASS.** 최신 Core 사용·동작 기존 증거·dist 동일 hash.
- **React: PASS.** Wrapper·HM Dialog 기존 증거와 독립 production consumer 추가 실행.
- **AI 정책: 문서 PASS / 범용 생성 런타임 NOT VERIFIED.**
- **데이터: PASS.** 회사당20/100/300, 20/200/2,100·중복 및 이동 집계 기존 증거. 성능 전체는 NOT VERIFIED.
- **Build: PASS.** 정상 패키지/Storybook/Vanilla 결과 재사용, root 타입/독립 React build 추가.
- **Guard: FAIL.** 기존10·신규0·NOT VERIFIED19; 대비 예외는 미해결로 보존.
- **Git 보존: PASS.** 기존 파일841개 byte 동일, HEAD/branch/staged 유지. 신규 보고서만 authored 추가.
## 9. 수정 파일 / Git 준비 상태
P10에서 기존 authored 파일을 수정하지 않았다. **새 authored 파일은 이 `implementation-report-p10.md` 1개**다. `test-results/org-chart-p10/*`는 비교 JSON·검증 probe·로그·캡처 생성물이며, `examples/org-chart-react/dist`와 root tsbuildinfo는 빌드 생성물이다. 생성물을 자동 Stage하지 않는다.
시작 상태는 tracked 수정33개·untracked authored46개였다. P10 보고서 추가 후 tracked33·untracked47개이며, staged0이다. P7 이후 구현/검증 스크립트·보고서·AI 정책은 기존 미커밋 작업으로 보존했다. 파일별 목록은 [commit-inventory.json](../../test-results/org-chart-p10/commit-inventory.json), byte 보존은 [final-state.json](../../test-results/org-chart-p10/final-state.json)에 기록한다.
**Feature Commit·Push:** 확인한 기능과 빌드 기준으로 검토 준비는 되어 있으나, 이번에는 승인되지 않았고 실행하지 않았다. 전체 품질 gate PASS는 아니다. Guard 잔여·디자인/접근성 예외의 수용 여부를 정리한 뒤 명시 승인을 받아야 한다.
승인 후 권장 commit 구분:
1. P7~P9.5 공유 Core/React·데이터 helper·이동/레이아웃 정책·React optional HM peer 및 lockfile·관련 API/사용 문서. 새 `expanded-editing`, `auto-layout-policy`, `examples`, `moves`, HMEmployeeDialog 등을 누락하지 않는다.
2. Storybook 메뉴/Overview/Department/Full/Expanded composition·helper·preview CSS. 1번의 공개 계약을 전제로 묶는다.
3. authored 검증 스크립트·P7~P10 보고서. 실행 probe/실패 로그/캡처/dist 등 generated 출력은 제외한다. 기존 examples의 authored `verify-p*.mjs`는 cache로 오인해 제외하지 않는다.
4. AI 정책 문서와 AGENTS/CLAUDE 참조 변경을 별도 문서 commit으로 검토.
이는 인벤토리 기반 제안이다. pathname만으로 stage하거나 `git add -A`하지 않고 정확한 patch와 의존성을 검토한다. `package-lock.json` 변경은 Wrapper의 optional HM UI peer 변경과 함께 검토하며 기존 unrelated 변경 포함 여부도 staged diff에서 확인한다.
**main 병합 전 추가 조치:** main 배포6파일 통합 승인 → 기존 미커밋 patch의 검토/보존과 commit 경계 확정 → 승인된 feature 정리 → 통합 상태에서 필요한 빌드/회귀·Linux Docker 검증 → 실제 push 직전 live main 재확인. main push가 Gitea 배포를 trigger할 수 있으므로 운영 변수/권한과 배포 결과도 별도 확인한다. 이번 비교에서는 파일 충돌 후보0이지만 실제 merge/rebase/cherry-pick·main checkout·pull을 수행하지 않았다.
사용자 검토 필요 항목은 **배포 변경 적용 여부, 최종 디자인 승인, Guard/대비 잔여 수용·추가 대응 범위, Feature Stage/Commit/Push 허용 여부**다. 승인된 SVG·회사색 변경이나 새 AI 실험은 이번 후속 제안에 포함하지 않는다.
## 10. 주요 화면과 원본 증거
이번 현재 빌드 캡처:
- [Overview1440](../../test-results/org-chart-p10/orgchart--logo-personnel-summary-1440.png)
- [Department1440](../../test-results/org-chart-p10/orgchart--department-colors-1440.png)
- [Full1440](../../test-results/org-chart-p10/orgchart--full-composition-1440.png)
- [Expanded1440](../../test-results/org-chart-p10/orgchart--expanded-org-chart-1440.png)
- [독립 React Full1440 팝업](../../test-results/org-chart-p10/react-full-1440.png), [390 팝업](../../test-results/org-chart-p10/react-full-390.png)
재사용/실제 시각 확인:
- [Full1920×1080](../../test-results/org-chart-p9-5-full/after-1920x1080.png), [1920×1440](../../test-results/org-chart-p9-5-full/after-1920x1440.png), [1440×900](../../test-results/org-chart-p9-5-full/after-1440x900.png), [1280×1024](../../test-results/org-chart-p9-5-full/after-1280x1024.png), [390×844](../../test-results/org-chart-p9-5-full/after-390x844.png). 이 5개 캡처는 화살촉 후속 붙임 전 기록이며 최종 화살촉 근거와 구분한다.
- [최종 붙은 화살촉 상세](../../test-results/org-chart-p9-5-arrowhead-touch/after-1920x1080-detail.png), [25/25 측정](../../test-results/org-chart-p9-5-arrowhead-touch/after.json).
- [Expanded 중앙/Fit124](../../test-results/org-chart-p9-5/after.json), [실제 pointer/geometry62](../../test-results/org-chart-p9-5/geometry.json).
- [P9.4 데이터/편집78](../../test-results/org-chart-p9-4/browser.json), [Vanilla API21](../../test-results/org-chart-p9-4/core-api-cancel-default-fixed.json), [소비 화면 팝업118](../../test-results/org-chart-p9-5-popup-parity/result.json).
검토 중인 실제 정적 Storybook은 `http://127.0.0.1:6064/`이며, 기존 서버·포트를 재시작하거나 교체하지 않았다. 별도 React probe 서버는 임시 loopback port를 사용하고 종료했다.
## 11. 시간
- Started At: 2026-10-13 14:15:23 KST
- Estimated Duration: 최초 약35분 (main8분·증거/정책7분·선별 검증15분·보고5분).
- Completed At: 2026-10-13 14:32:33 KST
- Actual Duration: 17분10초
- Variance: 예상보다17분50초 짧음. 최신 증거의 해시 일치를 확인하여 기존 정상 suite/build를 재사용했다.
제출 직전 live main/Feature SHA는 위 기준과 동일했다. 보고서 링크33개 모두 실제 대상이 존재한다. 기존841개 파일 byte 동일·branch/HEAD/staged 유지, authored 추가는 P10 보고서1개이며 최종 Git 감사에 기록했다.
docs/org-chart/implementation-report-p7.md
+188
View File
@@ -0,0 +1,188 @@
# HMDesign OrgChart P7 구현·검증 보고
RESULT: **PASS — P7 변경 범위.** 전체 접근성·CSS 디자인 의도·운영 배포 승인으로 확대하지 않는다.
TB/LR/Hybrid 독립 모드, 데이터 선택, 선택형 HM Dialog를 구현했다. 최신 dabeng LR 예제 비교에서 추가 기능 수정이 필요한 결함은 발견하지 않았다.
Compact는 **현재 Auto adapter에서 NOT SUPPORTED**이며 요구사항의 허용된 제외 사유를 아래에 명시한다.
## 요청 항목별 결과
| 번호 | 항목 | 결과와 근거 |
|---|---|---|
| 1 | 폴더·브랜치·HEAD | `D:\디자인시스템\HMDesign-OrgChart` / `feature/orgchart-package` / `7614507583927a25a270963a74ff044be0557b9f`. origin `https://gitea.hmac.kr/b25027/HMDesign.git`. 시작·완료 HEAD 동일. |
| 2 | 작업 시간 | 아래 KST 시간 기록 참조. 최초 예상 60–90분. |
| 3 | 전체 합산 20/100/300 | **PASS**. 모든 7회사, 고유 Employee ID 기준 정확히 20/100/300. 가중 분배 후 선택 회사만 필터링하며 재분배하지 않음. |
| 4 | 회사별 20/100/300 | **PASS**. 각 회사 정확히 N명. helper 단위 검사는 모든 회사·규모 조합, 실제 화면은 단일 회사 20/100/300 확인. |
| 5 | 다중 회사 | **PASS**. 한맥기술+삼안 ×100=200명, 전체 7×300=2,100명. 빈 선택은 Core empty view. 전환 전 예상 규모 표시·데이터 적용 버튼 제공. |
| 6 | TB 유지 | **PASS**. 기존 Small fixture의 직원/그룹 위치·치수를 시작 전 dist와 직접 비교해 동일. 일반 TB 관계선 경로 보존. |
| 7 | LR | **PASS**. 실제 dabeng `direction:'l2r'`, 부모 좌측·자식 우측·형제 세로 정렬. 회사마다 독립 tree. 아래 공식 예제 비교 참조. |
| 8 | Hybrid | **PASS**. 실제 `verticalLevel` + 명시적 engine level. Root=1Depth, 시작 Depth 2/3/4. 부모별 지역 세로 배치·재귀 구조 검증. |
| 9 | 초기 Depth | **PASS**. 1/2/3/all, 모든 레이아웃에서 독립. 변경하면 초기 접힘 정책으로 재설정; 이후 사용자 접힘 상태는 유효한 조직 ID에 대해 유지. |
| 10 | 그룹 Hybrid·Compact | 그룹 Hybrid **PASS**, TB의 지정 그룹 자손에만 실제 적용. LR/전체 Hybrid와 조합 거절·Story disabled/자동 해제. Compact **NOT SUPPORTED**, 설명 참조. |
| 11 | 접기·펼치기 | **PASS**. click/Enter/Space, 유효한 하위 상태·형제 상태 유지. 독립 `collapse` 설정 제공. LR 접기·재확장 후 실제 양끝 연결 좌표·재배치 확인. |
| 12 | Zoom/Pan/Fit | **PASS**. 각 독립 설정·실제 pointer Pan·Ctrl-wheel gate·도구 버튼. Fit/100% 복원 및 키보드 focus 노출은 기능 스위치와 독립. |
| 13 | 연결선·Border | **PASS**. 실제 parentId·제목 좌표 및 직원 카드 도착점에 SVG 배치. LR 모든 직원 left 연결/left accent, TB/Hybrid 기존 top/left/right. 다른 면 중립·카드 치수 보존. |
| 14 | 컬러·흰 타이틀 | **PASS**. 7회사 프리셋 파일/배경 동일, 시작 전 `#ffffff` 변경 보존. normal/hover/focus/collapsed/expanded 흰 글자 확인. 삼안·장헌산업 대비 진단은 유지. |
| 15 | HM Dialog | **PASS**. 실제 공개 HM Dialog/Portal·Avatar·Button. 직원 identity, 필드, 단일 팝업, Enter/Space, ESC/닫기·focus trap/복귀, source 변경 시 stale 팝업 정리. 390px 필드/팝업 가로 overflow 없음. |
| 16 | Vanilla 호환 | **PASS**. 기존 Core native dialog 및 callback 계약 유지. React/HM은 Core 의존성이 아님. 동일 공개 helper/DataSource/Core로 직원 기록 공유. |
| 17 | 300/2,100 성능 | **PASS — 이 PC의 측정 시나리오**. 신규 LR/Hybrid 별도 실측·DOM/JS heap 기록. 아래 표 참조. 장시간·타 기기·peak memory는 NOT VERIFIED. |
| 18 | Fixed 영향 | **PASS — 최소 회귀**. 시작 전 dist와 geometry/SVG/text/gradient/border 동일, 새 Auto control 없음, 기존 팝업 open/ESC. 보호 자산 33개·고정형 관련 파일/프리셋/fixture 해시 동일. 전체 Fixed 픽셀 인증은 별도 미검증. |
| 19 | Storybook URL | [Expanded OrgChart](http://127.0.0.1:6056/?path=/story/orgchart--expanded-org-chart). 실제 React Story, 기존 사용자용 4개 메뉴 유지. internal/verification Story는 기존 제외 정책 적용. |
| 20 | 캡처 | 아래 현재 화면·LR·Hybrid·2,100명·Dialog·390px 링크 참조. |
| 21 | 수정 파일 | 아래 27개 authored 파일 목록. 기존 흰색 타이틀 변경과 새 P7 CSS는 같은 파일에 공존. |
| 22 | 변경 범위 검사 | focused unit **25/25**, Core/React typecheck/build, scoped Story typecheck, 실제 React consumer production build, 변경 범위 브라우저, `git diff --check` **PASS**. 초기 실패·수정 검사 provenance는 아래 기록. |
| 23 | 기존 FAIL/미검증 | 과거 기록을 변경하지 않음. Guard 정적 PASS / runtime·CSS intent/final NOT VERIFIED, 기존 제목 대비 진단, 실기기·스크린리더·전체 역사 회귀 등을 아래에 분리. |
| 24 | Git 미진행 | **Stage·Commit·Push·Merge·checkout·pull·reset·rebase·PR 모두 미진행.** staged 파일 0, branch/HEAD 동일. |
## 독립 옵션과 호환 범위
공개 사용 예와 세부 계약은 [expanded-usage.md](expanded-usage.md)에 있다.
`autoLayout.type`은 TB/LR/Hybrid 중 하나이며 다른 기능을 켤 필요가 없다.
| 옵션 | TB | LR | Hybrid | 제한 |
|---|---|---|---|---|
| 접기·펼치기 / Zoom / Pan | 각각 선택 | 각각 선택 | 각각 선택 | 각각 기본 true, 다른 스위치의 필수 사용 없음 |
| 초기 Depth / 회사 선택 | 독립 | 독립 | 독립 | 초기 Depth 변경은 접힘 상태를 초기 정책으로 재설정 |
| React popup core/hm-dialog/none | 독립 | 독립 | 독립 | HM 모드만 HM UI optional peer·호스트 theme 필요; callback은 기본 팝업보다 우선 |
| Hybrid 시작 Depth 2/3/4 | 적용 안 함 | 적용 안 함 | 선택 | 값은 보관하되 TB/LR에서는 적용하지 않음 |
| 지정 그룹 Hybrid | 지원 | 조합 거절 | 조합 거절 | Story는 비호환 모드로 전환할 때 목록을 해제 |
| Compact | 미지원 | 미지원 | 미지원 | 엔진 기능 자체의 미지원이라는 뜻은 아님 |
dabeng 6 Compact는 자식 `.node`를 부모 `.node` 내부에 넣고 140×50 grid 및 별도 compact/loose 토글을 사용한다.
현재 HM article·카드 크기·측정 연결선·그룹 접기 계약과 충돌한다. 기존 카드 디자인을 유지하면서
안전하게 연결할 수 없어 옵션을 제공하지 않았다. 새 엔진이나 레이아웃 라이브러리는 추가하지 않았다.
`visibleLevel` 요구는 Core 초기 접힘 projection으로 제공한다. upstream hidden 자손을 그대로 둘 경우
직원 카드·연결선 측정이 충돌하므로 engine에는 `visibleLevel:999`를 전달하고 실제 보이는 트리를 넘긴다.
## dabeng LR 공식 예제 비교
[사용자 제공 예제](https://dabeng.github.io/OrgChart/left2right.html) 및
[공식 원본](https://github.com/dabeng/OrgChart/blob/master/demo/left2right.html)을 현재 소스와 비교했다.
원본은 `direction:'l2r'`와 `.title/.content`를 사용한다. 설치된 dabeng 6도 동일 옵션이며
차트 회전·50×140 node·title/content 반회전 CSS를 사용한다.
현재 구현은 해당 방향 API·재귀 DOM을 재사용하고, 기존 HM 복합 article의 정방향·치수 유지에 필요한
Auto 전용 flex/측정 SVG adapter를 적용한다. 원본 화면과 픽셀 동일성을 요구하거나 주장하지 않는다.
| 사용자 확인 항목 | 판정 | 증거 |
|---|---|---|
| 1 실제 `l2r` 우선 재사용 | PASS | engine options 단위 검사, 실제 7개 `.orgchart.l2r`, 공식 원본/설치 소스 비교 |
| 2 최상위 왼쪽·하위 오른쪽 | PASS | 모든 parentId 대상 child-right 실측 |
| 3 형제 세로 정렬 | PASS | 모든 같은-parent 형제의 y 범위 검사 |
| 4 3Depth 이상 관계선 | PASS | 5Depth fixture, parentId 및 실제 heading endpoint 검사 |
| 5 LR 카드 Border 일치 | PASS | 모든 카드 left 방향·실제 도착점 <1px·한 면 accent 검사 |
| 6 접기 후 갱신 | PASS | 닫기/재확장 시 자손 수·겹침·부모/자식 선 양끝 재측정 |
| 7 전환 잔상 | PASS | TB→Hybrid→LR에서 tree 7 / l2r 7 / SVG 7 / 관계선 70 / 부모 있는 node 70 / vertical list 0 |
| 8 독립 회사 Root·겹침 | PASS | 7회사 300/2,100명 전체, 카드/그룹 겹침 없음, 회사 선택 독립 |
| 9 사진·직위·이름 정방향 | PASS | 모든 관련 element transform=none, 사진 36×36, 100% 캡처 확인 |
| 10 Zoom/Pan/Fit·팝업 | PASS | 기존 LR 통과 증거 재사용 + 독립 스위치/실제 HM Dialog 검증 |
이번 예제 비교 이후 제품 코드에 LR 추가 수정은 하지 않았다. 미확인한 정방향·접기 양끝·잔상만 추가 검사했다.
## 실행 검증과 초기 실패 처리
기존 P5/P6 전체 suite는 재실행하지 않았다. 새로운 helper/policy와 직접 영향받는 경로만 확인했다.
단위 검사 25개는 data example 11 + auto policy 7 + 기존 expanded layout 4 + company 3이며,
중간 수정 이후에는 영향받은 policy 검사만 갱신하고 나머지 유효한 결과를 재사용했다.
| 검사 | 결과 | 근거 |
|---|---|---|
| Core/React typecheck·build | PASS | 공개 패키지별 명령 실행. 마지막 Core build는 변경된 선언 주석까지 dist에 반영. |
| scoped Story typecheck | PASS | P7 Story만 포함한 tsconfig, 최종 그룹 이름 변경 후 확인. |
| 실제 React production consumer | PASS | 공개 패키지·HM theme/CSS·StrictMode bootstrap, production build 및 실제 브라우저. 기존 asset 크기로 chunk size 경고 1종, build 오류 없음. |
| Core 최초 변경 검사 | 84 PASS / 10 FAIL → 수정 확인 PASS | [초기 raw](../../test-results/org-chart-p7/browser-core-initial.json). update 후 Fit, LR 형제 CSS 우선순위, Hybrid engine level/부모별 list를 최소 수정. 실패 경로 및 연결선/2,100명 관련 [31/31 repair](../../test-results/org-chart-p7/browser-repair.json). |
| Story·production React | 50 PASS / timing 검사 2 FAIL → PASS | [초기 raw](../../test-results/org-chart-p7/browser-story-react.json). Radix 종료 animation/presence 전 검사였음. 종료 hidden을 기다리는 [3/3 targeted 확인](../../test-results/org-chart-p7/browser-react-repair.json). 제품 결함으로 재분류하지 않음. |
| 독립 interaction·최종 popup | 79 PASS 후 runner 중단 | [raw](../../test-results/org-chart-p7/browser-options-react-repair.json). 실제 그룹 옵션의 중복 회사 접두사 정리, 남은 옵션/폭/색상 [12 PASS](../../test-results/org-chart-p7/browser-options-tail.json). 최초 메뉴 집계는 internal 3개까지 포함해 실패; 기존 제외 정책 적용한 [2/2 메뉴 검사](../../test-results/org-chart-p7/browser-story-menu.json). |
| LR reference 추가 영향 | 4 PASS 후 잔상 집계 1 FAIL → PASS | [raw](../../test-results/org-chart-p7/browser-lr-reference.json). 빈 parentId Root까지 관계선 수에 포함한 테스트 오류; Root 제외 후 해당 검사만 [2/2 PASS](../../test-results/org-chart-p7/browser-lr-residue.json). 제품 코드 변경 없음. |
| 신규 성능·390px Dialog | 6/6 PASS | [raw](../../test-results/org-chart-p7/browser-performance-dialog-narrow.json). 측정 시간을 새로 확보한 검사이며 전체 suite 반복 아님. |
| 390/768/1280/1440 | PASS | 최종 설정 UI 줄바꿈, document 가로 overflow 없음, stage scrollLeft/Top=0, scrollWidth/clientWidth·scrollHeight/clientHeight 일치, Fit 전체 bounds. 문서 세로 스크롤은 정상. |
| 최소 Fixed 회귀 | PASS | 최초 Core raw의 Fixed geometry/SVG/text/gradient/border, Auto control 부재·native 팝업 open/ESC 및 보호 hash. |
| Guard 1회 | static PASS, issues 0 | [원본](../../test-results/org-chart-p7/guard.json), STORYBOOK/PARTIAL. raw status PASS, runtimeStatus NOT VERIFIED. 아래 CSS 범위 구분 유지. |
| 최종 diff·보호 파일 | PASS | `git diff --check`, [baseline](../../test-results/org-chart-p7/baseline.json), [최종 audit](../../test-results/org-chart-p7/final-state.json). |
Chrome `155.0.8059.39`, 기존 설치 Playwright/Chrome를 사용했으며 패키지 설치/업그레이드 없음.
localhost sandbox `ERR_NETWORK_ACCESS_DENIED` 초기 로그를 보존하고 허용된 로컬 브라우저 실행으로 확인했다.
서로 다른 실행의 PASS 수를 중복 합산해 총 검사 수라고 주장하지 않는다. 모든 성공 실행의 신규 console/page 오류는 0이다.
## 신규 모드 성능
Windows 이 PC, Chrome headless, 1440×1100, full depth·7회사·가상 fixture, 각 1회 관측이다.
Core mount는 `performance.now()`의 `handle.mount()` 시간, ready/interaction은 Playwright 동작과
font 준비·5 animation frame 대기를 포함한 경과 시간이다. 네트워크/브라우저 warm 상태와 GC 영향을 받으며 서로 다른 지표를 동일 benchmark로 비교하지 않는다.
| 데이터·모드 | Core mount | 화면 준비 | 접기 | Zoom | Fit | used JS heap | 내부 DOM |
|---|---:|---:|---:|---:|---:|---:|---:|
| 300 LR | 31.6ms | 442ms | 195ms | 116ms | 116ms | 9,839,068B | 3,306 |
| 300 Hybrid Depth2 | 19.2ms | 300ms | 182ms | 131ms | 118ms | 12,887,564B | 3,152 |
| 300 Hybrid Depth3 | 18.2ms | 325ms | 182ms | 133ms | 117ms | 17,325,639B | 3,194 |
| 300 Hybrid Depth4 | 17.1ms | 321ms | 183ms | 116ms | 118ms | 15,098,350B | 3,243 |
| 2,100 LR | 160.5ms | 미측정 | 미측정 | 미측정 | 전체 Fit PASS | 15,640,127B | 17,706 |
| 2,100 Hybrid Depth3 | LR→Hybrid 전환+준비 917ms | 앞 열 지표 | 미측정 | 미측정 | 전체 Fit PASS | 28,410,298B | 17,594 |
2,100명의 실제 카드 수·고유 ID·겹침 없음·전체 bounds를 따로 확인했다. 전체 Fit은 가독성이 작은 개요 화면이다.
카드 읽기에는 Zoom 또는 초기 표시 Depth가 필요하다. Story에서 2,100명 전환 규모를 적용 전에 표시하고
초기 Depth2로 전환하는 실제 UI도 확인했다. `performance.memory.usedJSHeapSize`는 한 시점의 JS heap이며
DOM native memory·프로세스 전체 메모리·peak·누수/장시간 반복을 증명하지 않는다. 2,100명 interaction latency 전체는 NOT VERIFIED.
## 미검증·기존 진단 보존
- Guard `styleEvidence`: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**.
이 실행에 결합 `styleVerification`은 생성하지 않았으며 NOT VERIFIED로 취급한다. Story 정적 graph와
별도 실제 React build/browser 증거를 전체 Core CSS·임의 외부 props/style의 인증으로 합치지 않는다.
- 기존 삼안·장헌산업 흰 타이틀의 일반 텍스트 대비 미달 진단을 유지한다. 요청한 흰색·회사 색은 변경하지 않았다.
P6.1의 Auto 관계선 대비 수정과 과거 FAIL/미검증 기록은 그대로 보존한다.
- 실제 스크린리더 발화·물리 터치·다른 브라우저, 전체 Fixed 픽셀/모든 폭·전체 과거 회귀,
모든 임의 데이터/override/옵션 상태 조합, HM peer 없는 fresh install/bundler, 운영 배포·SSR/hydration은 **NOT VERIFIED**.
실제 API/서버/DB·실제 개인정보는 요청 범위 밖이며 추가하지 않았다.
## 주요 화면
- [최종 설정 화면 1440px](../../test-results/org-chart-p7/story-1440.png), [390px](../../test-results/org-chart-p7/story-390.png)
- [LR 300명·7회사](../../test-results/org-chart-p7/corrected-lr-group.png), [LR 카드 100% 정방향](../../test-results/org-chart-p7/lr-card-upright.png)
- [Hybrid Depth2](../../test-results/org-chart-p7/corrected-hybrid-2.png), [Depth3](../../test-results/org-chart-p7/corrected-hybrid-3.png), [Depth4](../../test-results/org-chart-p7/corrected-hybrid-4.png)
- [HM Dialog LR](../../test-results/org-chart-p7/Final-lr-dialog.png), [HM Dialog 390px](../../test-results/org-chart-p7/hm-dialog-390.png)
- [2,100명 LR](../../test-results/org-chart-p7/2100-lr.png), [2,100명 Hybrid](../../test-results/org-chart-p7/2100-hybrid.png), [Story 초기 Depth2](../../test-results/org-chart-p7/story-2100-depth2.png)
- [보존된 Fixed](../../test-results/org-chart-p7/fixed-1440.png)
Popup full-page 캡처는 고정 overlay가 현재 viewport만 덮는 특성상 문서 바깥 영역과 차이가 보일 수 있다.
실제 popup bounds·overflow·focus는 DOM 실측으로 별도 확인했다.
## Authored 변경 파일
1. `package-lock.json` — optional HM UI peer metadata만 반영, 라이브러리 버전/설치 변경 없음.
2. `packages/org-chart/src/data/examples.ts` — 공통 deterministic 가상 데이터 helper.
3. `packages/org-chart/src/data/examples.test.ts` — 11개 데이터 계약 검사.
4. `packages/org-chart/src/data/index.ts` — 공개 export.
5. `packages/org-chart/src/core/auto-layout-policy.ts` — 모드/Depth/독립 interaction 계약.
6. `packages/org-chart/src/core/auto-layout-policy.test.ts` — 7개 policy 검사.
7. `packages/org-chart/src/core/types.ts` — additive 공개 옵션/setter types.
8. `packages/org-chart/src/core/engine.ts` — 기존 dabeng options 전달.
9. `packages/org-chart/src/core/vendor.d.ts` — 설치 엔진 option typing.
10. `packages/org-chart/src/core/render.ts` — 명시적 level/그룹 hybrid projection.
11. `packages/org-chart/src/core/index.ts` — Auto 상태·setter·전환 Fit/engine lifecycle.
12. `packages/org-chart/src/core/expanded-content.ts` — Auto mode/interaction/방향 표시.
13. `packages/org-chart/src/core/expanded-layout.ts` — Auto 크기 측정·조직 관계선.
14. `packages/org-chart/src/core/expanded-viewport.ts` — 독립 Zoom/Pan gate 및 focus reveal.
15. `packages/org-chart/src/index.ts` — 공개 types export.
16. `packages/org-chart/src/styles/org-chart-expanded.css` — Auto 전용 LR/Hybrid CSS, 기존 흰 타이틀 보존.
17. `packages/org-chart/README.md` — data/API/연결 방향 문서.
18. `packages/org-chart-react/package.json` — optional `@hm-design/ui` peer.
19. `packages/org-chart-react/src/types.ts` — React 옵션 및 popup contract.
20. `packages/org-chart-react/src/OrgChart.tsx` — 기존 Core setter·popup state adapter.
21. `packages/org-chart-react/src/HMEmployeeDialog.tsx` — 실제 HM Dialog와 focus 복귀.
22. `packages/org-chart-react/README.md` — 선택형 HM peer·옵션 사용 안내.
23. `src/org-chart/org-chart-expanded.stories.tsx` — 기존 Expanded Story에 실제 선택 UI.
24. `src/org-chart/org-chart-expanded-story.css` — Expanded 한정 콘텐츠 layout.
25. `examples/org-chart/verify-p7.mjs` — 변경 범위 integration runner.
26. `docs/org-chart/expanded-usage.md` — P7 공개 API·호환 범위.
27. `docs/org-chart/implementation-report-p7.md` — 이 보고서.
`packages/*/dist`, `test-results/org-chart-p7`의 baseline/React consumer/JSON/캡처/tsconfig/audit 등은
기존 ignore 정책의 로컬 산출물이며 Stage하지 않았다. 별도 역사 보고서·승인 SVG·fixture·Theme·UI Component·기타 Story는 수정하지 않았다.
필수 소스·metadata는 함께 검토할 수 있도록 목록에 포함했다. 이번에는 Git 반영 계획이나 자동 Stage를 실행하지 않는다.
## 시간 기록 — Asia/Seoul
- Started At: 2026-10-13 09:07:58 KST
- Completed At: 2026-10-13 09:40:32 KST
- Actual Duration: 32분 34초
- Estimated Duration: 60–90분 (분석 10–15분 / 구현 30–45분 / 통합 검증 20–30분)
- Variance: 예상보다 27분 26초–57분 26초 빨리 완료
docs/org-chart/implementation-report-p8.md
+132
View File
@@ -0,0 +1,132 @@
# HMDesign OrgChart P8 — Storybook 메뉴·페이지 통일
RESULT: **PASS — P8 요청의 메뉴·페이지 및 최소 기능 검증 범위.**
기존 Core 토큰 관련 Guard FAIL과 CSS 디자인 의도 미검증은 별도로 보존한다.
P9·Stage·Commit·Push·Merge·PR은 진행하지 않았다.
## 작업 기준
- 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작·완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`
- 범위: `STORYBOOK_ONLY`, 실제 React Storybook. 시작 시 P7 미커밋 변경 27개를 보존했다.
- Started At: `2026-10-13 09:43:40 KST`
- Completed At: `2026-10-13 10:09:15 KST`
- Actual Duration: `25분 35초`
- Estimated Duration: `30분` — 분석 7분 / 구현 12분 / 검증 11분
- Variance: `예상보다 4분 25초 짧음`
## 최종 메뉴와 페이지
```text
Components
Patterns
OrgChart
├─ Overview
├─ Department Colors
├─ Full Composition
└─ Expanded OrgChart
```
기존 Foundation·Center Graphic 등 다른 카테고리는 유지한다. OrgChart는 Patterns 바로 다음의 독립 최상위 root이며, 공개 페이지는 정확히 4개다. 다른 292개 Story의 상대 순서는 유지한다.
슬래시 없는 `title: OrgChart`는 Storybook이 root 없는 component로 분류해 정렬 설정과 관계없이 최상단에 표시했다. 각 페이지를 `OrgChart/페이지명`의 단일 Story CSF로 나누어 표준 root/단일 Story 표시 정책을 사용했다. 기존 Story URL 27개는 리터럴 `parameters.__id`와 기존 export를 통해 모두 유지한다. 내부 23개 Story는 기본 제외 정책으로 숨기며 삭제하지 않았다.
| 페이지 | 적용 결과 |
|---|---|
| Overview | 기존 통합 페이지의 로고·조직/직위별 현황·관계사별 현황을 3개 공통 섹션으로 구성. 동일 Core 독립 컴포넌트와 가상 fixture 유지. |
| Department Colors | 공통 제목·설명, 표시 옵션, 기존 고정형 컬러/카드 미리보기. 긴 이름 버튼 유지. Auto 회사색은 혼합하지 않음. |
| Full Composition | 공통 제목·설명·섹션만 추가. 실제 가용 폭·높이를 기존 Core가 측정하며 비례 축소. 내부 카드·허브·화살표·현황·파견/휴직·링크·팝업·Workdesk 디자인 유지. |
| Expanded OrgChart | 데이터 / 레이아웃 / 인터랙션·직원 정보 / 미리보기의 4개 섹션. 기존 FilterBar·Label·Select·Checkbox·Button·모든 이벤트와 옵션 유지. 기존 Zoom/Pan/Fit 도구는 트리 안에 유지. |
## 재사용한 공통 스타일
실제 대표 페이지 3개인 Filter Bar, Page Header, Loading Screen을 비교했다.
`src/components/story-page.tsx`의 `StoryPage / StoryPageHeader / StorySection`과 기존 CSS를 그대로 재사용한다.
- 제목 28px / 700 / 36px, 설명 14px / 20px
- 콘텐츠 envelope 최대 1280px(양측 gutter 포함), gutter 16–40px
- 섹션 간격 32px, 섹션 header 하단 12px / 본문 간격 16px
- 기존 semantic 테두리·Typography·배경, fullscreen bootstrap
- 별도 페이지 디자인 시스템이나 공통 Theme 변경 없음
추가 CSS는 Story 전용 최대 폭·미리보기 host, 접근성 legend, 팝업 설정 폭에 한정한다.
기존 `body:has(.hm-orgchart-story-full)` 배경 적용을 제거하고 고정형 배경은 해당 견본 안에 유지한다.
공통 CSS가 Shadow DOM의 폰트·카드·색·Border·치수를 변경하지 않는 것을 실제 computed 값으로 확인했다.
## 변경 범위 검증
| 검사 | 결과·근거 |
|---|---|
| 메뉴 위치·Depth·4개 순서·중복·내부 기본 숨김 | **PASS**, [최종 manager 8/8](../../test-results/org-chart-p8/browser-manager.json) |
| 기존 URL·최종 CSF 연결 | **PASS**, [최종 route 5/5](../../test-results/org-chart-p8/browser-route-final.json). 4개 기존 공개 URL의 실제 제목·Core 견본 및 오류 없음 확인. |
| 4페이지와 반응형 | **PASS**, 390/768/1280/1440px × 4페이지. document 가로 overflow 없음, 제목/컨트롤 줄바꿈 정상. |
| 기존 Pattern과 스타일 비교 | **PASS**, 실제 공통 frame·Typography·spacing·border·gutter 비교. |
| Fixed 표시·비례 축소·잘림·내부 스크롤 | **PASS**, 4폭에서 전체 stage/card/summary bounds와 휠 후 offset 확인. [Full 표적 6/6](../../test-results/org-chart-p8/browser-full-repair.json) |
| Expanded 최소 기능 | **PASS**, 20→100명 draft/apply, TB/LR/Hybrid, 초기 Depth, Enter/Space 접기/펼치기, 독립 Zoom/Pan, 실제 pointer Pan, Fit. |
| HMDesign 직원 팝업 | **PASS**, 실제 공개 HM Dialog/Portal·Avatar·Button. 직원 identity, 단일 팝업, Tab focus trap, ESC/닫기, 카드 focus 복귀, 390px 표시 확인. Vanilla Core 책임 분리 유지. |
| P7 소스·디자인 보존 | **PASS**, 기준 803개 파일 중 798개 동일. 변경 5개는 Storybook 설정/Story/CSS. Core·React 패키지·카드 SVG·회사색·직원 JSON·흰 타이틀·Theme 모두 동일. Expanded 상태/데이터 로직 및 컨트롤 속성 21개 보존. |
| Typecheck | **PASS**, 변경 Story·설정·새 CSF와 의존 helper를 포함한 [범위 config](../../test-results/org-chart-p8/story-tsconfig.json), 최종 구조 기준. |
| Storybook production build | **PASS**, [최종 build log](../../test-results/org-chart-p8/build.log). 기존 대형 asset의 chunk-size 경고는 유지. |
| diff·Git 상태 | **PASS**, `git diff --check`, staged 0, branch/HEAD 동일. |
| 신규 브라우저 오류 | **0**, 실제 검증의 console/page error. |
P7의 단위 25/25·Core/React build 및 기존 P5/P6/P7 전체 회귀는 재실행하지 않았다.
20/100/300명·2,100명 데이터 정책과 배치 알고리즘은 소스 동일 및 기존 P7 결과로 보존 확인하며, 이번에 성능을 새로 측정한 것으로 보고하지 않는다.
### 초기 결과와 해결 근거
[초기 runtime](../../test-results/org-chart-p8/browser-initial-runtime.json)은 83 PASS / 6 FAIL이었다.
실제 메뉴 위치 문제 1건은 표준 CSF root 분리로 수정하고 manager 범위만 다시 검사했다.
나머지 5건은 runner가 auto margin의 CSSOM 표현값 및 CSS transform의 숨긴 원본 scroll extent를 화면 결함으로 집계한 경우였다. Full의 실제 양측 gutter, 표시 bounds, 휠·scroll offset을 표적 확인해 해결했으며 제품 CSS를 변경하지 않았다.
서로 다른 실행의 PASS 수를 단순 합산하지 않는다. [최종 증거 연결](../../test-results/org-chart-p8/browser-final-summary.json)에 초기·표적 raw와 해결 사유를 남겼다.
초기 6057 sandbox 서버 접속 실패와 6058 사용 중 오류는 환경 문제였다. 화면 검사 전 network raw를 보존하고, 접근 가능한 6061 서버에서 실제 검증했다.
## Guard 원본·기존 FAIL·NOT VERIFIED
최종 구조 변경 후 PARTIAL/STORYBOOK Guard로 영향 범위만 확인했다.
[원본 Guard](../../test-results/org-chart-p8/guard.json)의 **status/staticStatus는 FAIL**, runtimeStatus는 **NOT VERIFIED**다. 원본을 PASS로 덮어쓰지 않았다.
- 변경 P8 파일의 issue: **0**
- 변경 전 Core의 TOKEN-001 **10 FAIL**, 동적 Token/공통 helper class의 TOKEN-002 **10 NOT VERIFIED**
- 해당 Core·공통 helper 소스는 시작 hash와 동일. Story용 Core 내부 import와 Shadow stylesheet/동적 선언의 정적 분석 경계에 대한 기존 진단을 보존한다.
- styleEvidence: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**
- 실제 페이지 스타일 동등성과 Shadow 격리의 브라우저 PASS는 별도 근거다. 디자인 의도 승인 또는 전체 Guard runtime 승인으로 확대하지 않는다.
[범위 분류](../../test-results/org-chart-p8/guard-scope.json), [소스 보존·Git·ID audit](../../test-results/org-chart-p8/final-state.json)을 연결했다.
기존 삼안·장헌산업 제목 대비 진단, Compact **NOT SUPPORTED**, 전체 Fixed 픽셀/역사 회귀, 모든 옵션 조합, 물리 기기·스크린리더·다른 브라우저, 2,100명 장시간/peak memory, SSR/hydration·운영 배포는 기존 미검증 상태를 유지한다.
## 실제 화면
- [좌측 메뉴 전체](../../test-results/org-chart-p8/manager-full-sidebar.png), [좌측 메뉴](../../test-results/org-chart-p8/manager-sidebar.png)
- [Overview](../../test-results/org-chart-p8/overview-1440.png), [390px](../../test-results/org-chart-p8/overview-390.png)
- [Department Colors](../../test-results/org-chart-p8/department-colors-1440.png), [390px](../../test-results/org-chart-p8/department-colors-390.png)
- [Full Composition](../../test-results/org-chart-p8/full-composition-1440.png), [390px](../../test-results/org-chart-p8/full-composition-390.png)
- [Expanded OrgChart](../../test-results/org-chart-p8/expanded-org-chart-1440.png), [390px](../../test-results/org-chart-p8/expanded-org-chart-390.png)
- [실제 HM Dialog](../../test-results/org-chart-p8/expanded-hm-dialog.png), [390px Dialog](../../test-results/org-chart-p8/expanded-hm-dialog-390.png)
현재 미리보기: [Overview](http://127.0.0.1:6061/?path=/story/orgchart--logo-personnel-summary), [Department Colors](http://127.0.0.1:6061/?path=/story/orgchart--department-colors), [Full Composition](http://127.0.0.1:6061/?path=/story/orgchart--full-composition), [Expanded OrgChart](http://127.0.0.1:6061/?path=/story/orgchart--expanded-org-chart).
Overview는 기존 `orgchart--logo-personnel-summary` URL을 유지한다.
## P8 변경 파일
기존 미커밋 P7 변경과 아래 P8 delta를 구분한다.
| 파일 | P8 변경 |
|---|---|
| `.storybook/preview.tsx` | OrgChart root 및 4개 페이지 경로 정렬, 기존 leaf 정렬 정책 유지 |
| `src/org-chart/org-chart-p1.stories.tsx` | Overview 단일 CSF, 기존 ID 보존 |
| `src/org-chart/org-chart-expanded.stories.tsx` | 공통 섹션·root title·기존 ID |
| `src/org-chart/org-chart-stories.css` | 최소 host 규칙, body 배경 범위 축소 |
| `src/org-chart/org-chart-expanded-story.css` | 기존 P7 CSS 보존 + legend/설정 host |
| `src/org-chart/org-chart-page-previews.tsx` | 기존 페이지 함수를 공통 재사용 helper로 이동 |
| `src/org-chart/org-chart-department-colors.stories.tsx` | 단일 페이지 CSF, 기존 ID |
| `src/org-chart/org-chart-full-composition.stories.tsx` | 단일 페이지 CSF, 기존 ID |
| `src/org-chart/org-chart-overview-internal.stories.tsx` | 기존 내부 3개 CSF·ID·기본 숨김 유지 |
| `examples/org-chart/verify-p8.mjs` | 요청한 화면/최소 기능 검증, 실패 범위 선택 실행 |
| `docs/org-chart/implementation-report-p8.md` | 결과·증거·시간 기록 |
`test-results/org-chart-p8`의 baseline·raw JSON·캡처·static build·logs는 생성된 검증 산출물이다.
**Stage·Commit·Push·Merge·main checkout·Pull·Reset·Rebase·Force Push·PR은 미진행. P8에서 종료한다.**
docs/org-chart/implementation-report-p9-1.md
+83
View File
@@ -0,0 +1,83 @@
# HMDesign OrgChart P9.1 — Department Colors 간소화 · Full Composition 중앙 정렬
RESULT: **PASS — P9.1 변경 범위.**
두 페이지의 Storybook 표시만 수정했다. 기존 Core/React 카드·연결선·통계·Expanded 소스와 P7~P9 결과를 보존했다. Expanded 추가 디자인·기능 작업은 시작하지 않았다.
## 기준 및 시간
- 범위: `STORYBOOK_ONLY`, 실제 React Storybook.
- 경로: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작/완료 HEAD 및 기존 remote-tracking feature HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`. 이번 원격 조회/Fetch 없음.
- Started At: `2026-10-13 10:35:50 KST`
- Completed At: `2026-10-13 10:48:05 KST`
- Actual Duration: `12분 15초`
- Estimated Duration: `25분` — 확인 5분 / 수정 10분 / 검증 10분
- Variance: `예상보다 12분 45초 짧음`
## Department Colors
- 기존 조직 그룹 타이틀, 1Depth 그룹장 대형 카드 146×68, 2Depth 소형 직원 카드 108×52만 남겼다.
- 제거: 장문 페이지/섹션 설명, 표시 옵션/긴 이름 검증 버튼, Core 예제 안내 2개, 별도 대표자 견본, 출처·버전·selector, CSS 변수/HEX/Gradient legend와 구현 설명, 카드 자산/크기 caption, 대비 MODEL 비교·진단/보조 안내.
- Story 전용 `presentation="design"`에서 생성된 예제 DOM만 정리한다. 카드 하위 DOM·SVG/로고·Typography·6개 조직 색/Gradient와 Core generator는 그대로다. 삭제된 대비 요소를 참조하는 updater는 이 옵션에서 호출하지 않는다.
- 2행 subgrid로 같은 행 제목/카드를 정렬한다. 기존 카드 grid margin-top 12px와 공통 StoryPage 제목·여백/섹션 스타일을 유지한다. 390px 단일 열에서 카드 잘림/가로 overflow 없음.
## Full Composition 실측
측정 기준: 실제 6개 tree의 조직 헤더와 직원 카드 `getBoundingClientRect()` 합집합. 폭 1920인 빈 forest/Stage 박스 중심을 본문 중심으로 사용하지 않았다.
원본 Stage 내부 본문 bounds는 X=32~1835, 중심 X=933.5이다. Stage 중심 X=960과 차이가 있으며, 높이 제한으로 축소된 Stage가 좌측에 붙는 경우 추가 여백도 발생했다.
| 브라우저 크기 | 실제 가용 영역 X/폭 | 가용 중심 | 수정 전 본문 중심 | 수정 전 오차 | 수정 후 본문 중심 | 수정 후 오차 |
|---|---:|---:|---:|---:|---:|---:|
| 1920×1080 | 360 / 1200 | 960 | 943.4375 | -16.5625 | 960.00003 | +0.00003px |
| 1440×900 | 120 / 1200 | 720 | 701.52458 | -18.47542 | 719.99991 | -0.00009px |
| 390×844 | 16 / 358 | 195 | 190.05885 | -4.94115 | 195.00026 | +0.00026px |
Story 전용 helper가 본문 중심을 실측하고 전체 Stage에 독립 CSS scale/translate를 적용한다. 기존 Core의 가로/세로 fit transform은 유지하며, 본문 중심에서 Stage 좌·우 끝까지의 최대 거리에 맞춰 동일 비율을 추가 보정한다. Stage 전체/통계까지 영역 안에 들어오도록 계산하며 overflow 규칙을 추가·변경하지 않았다.
- 원본 1920×914.5 유지. DOM offsetHeight의 정수 반올림 915와 computed height 914.5를 각각 확인.
- 카드/조직별 좌표 수정 없음. 대표자·허브·조직·연결선·협업 화살표·장식·우측 통계·좌측 하단 파견/휴직·하단 관계사 집계를 전체 Stage와 함께 이동.
- Stage 내부 DOM SHA-256, 자산 hash와 152개 요소의 정규화 상대 좌표/크기·computed style 보존. 3개 폭에서 부적절한 겹침 0.
- 비례 축소와 전체 실측 bounds 포함, 문서 및 사용자 조작 가능한 내부 가로/세로 스크롤 없음. 원래 fitted wrapper의 숨김 overflow에서 보고되는 변환 전 layout scrollWidth는 실제 스크롤로 오인하지 않고, 원본 동일 규칙/화면 전체 포함/휠 offset 0을 함께 확인.
- 같은 화면을 remount 없이 1920×1080→390×844→1440×640→1440×900으로 변경해 중앙 정렬/균일 축소/스크롤 없음 확인. 10프레임 동안 Stage 스타일 mutation 0, observer 안정성 확인.
## 변경 파일 및 보존
| 파일 | 이번 변경 |
|---|---|
| `src/org-chart/org-chart-page-previews.tsx` | Department 설명/옵션 제거 및 디자인 모드 선택, Full Composition 정렬 helper 연결. Overview JSX 보존 |
| `src/org-chart/core-component-preview.tsx` | Department에만 적용되는 선택형 디자인 예제 간소화. 기존 workdesk/standalone 경로 보존 |
| `src/org-chart/center-composition-preview.ts` | 신규 Story-only 실측/Stage 정렬 helper와 observer cleanup |
| `examples/org-chart/verify-p9-1.mjs` | 신규 범위 검증/수정 전후 캡처/동일 mount 리사이즈 runner |
| `docs/org-chart/implementation-report-p9-1.md` | 이 보고서 |
시작 시점 authored 파일 811개 중 기존 파일 2개만 변경, 809개 SHA-256 동일. 신규 authored 파일 3개. Core/React 패키지, 카드·색상·공통 CSS, Expanded Story/CSS/기능, 메뉴/ID 설정과 P7~P9 보고서/runner는 변경하지 않았다. [시작 snapshot](../../test-results/org-chart-p9-1/baseline.json), [최종 audit](../../test-results/org-chart-p9-1/final-state.json).
## 변경 범위 검증
| 검증 | 결과 |
|---|---|
| 두 페이지 실제 Chromium | **44/44 PASS**, 신규 console/pageerror 0. [원본](../../test-results/org-chart-p9-1/browser.json) |
| 동일 mount 리사이즈/스타일 안정성 | **17/17 PASS**, 신규 console/pageerror 0. [원본](../../test-results/org-chart-p9-1/browser-resize.json) |
| 변경 Story/helper Typecheck | **PASS**: `node node_modules/typescript/bin/tsc -p test-results/org-chart-p9-1/story-tsconfig.json` |
| Storybook production Build | **PASS**: `npm.cmd exec -- storybook build -o storybook-static --disable-telemetry`. [log](../../test-results/org-chart-p9-1/build.log), 기존 500kB chunk 경고/플러그인 timing 진단 유지, build 오류 없음 |
| Storybook 공개 메뉴 | **PASS**, 기존 Overview / Department Colors / Full Composition / Expanded OrgChart 4개 ID/index 유지. manager 설정 동일 hash와 P8 메뉴 배치 PASS 재사용 |
| Git diff/공백 | **PASS**, `git diff --check` 및 신규 authored 파일 공백 확인 |
| Git 보호 | **Stage·Commit·Push·Merge·main 수정/checkout·PR·Reset·Rebase·Force Push 모두 미진행**, staged 파일 0, branch/HEAD 동일 |
P7~P9 정상 결과는 동일 소스 근거와 함께 재사용했다. 전체 Guard·과거 브라우저 suite·Expanded 상호작용·2,100명 성능 검사는 반복하지 않았다.
## NOT VERIFIED / 검토 대기
- P9 Guard 원본의 FAIL / RUNTIME·DESIGN_INTENT·FINAL NOT VERIFIED 및 기존 접근성 대비 잔여 사항을 그대로 보존한다. 이번 브라우저 PASS로 원본 상태를 덮어쓰지 않았다.
- 최종 사용자 디자인 승인, 다른 브라우저/실기기/스크린리더/SSR·배포는 **NOT VERIFIED**.
- Expanded 기능은 소스 hash 보존 및 P7~P9 PASS 재사용 근거다. 이번 기능 재검증/추가 디자인 수정은 진행하지 않았다. 사용자 검토를 기다린다.
## Storybook 및 화면
- [Department Colors](http://127.0.0.1:6061/?path=/story/orgchart--department-colors): [1920px](../../test-results/org-chart-p9-1/after-department-1920.png), [1440px](../../test-results/org-chart-p9-1/after-department-1440.png), [390px](../../test-results/org-chart-p9-1/after-department-390.png)
- [Full Composition](http://127.0.0.1:6061/?path=/story/orgchart--full-composition): [1920px](../../test-results/org-chart-p9-1/after-fixed-1920.png), [1440px](../../test-results/org-chart-p9-1/after-fixed-1440.png), [390px](../../test-results/org-chart-p9-1/after-fixed-390.png)
- 수정 전 캡처는 같은 결과 폴더의 `before-*.png`로 보존.
docs/org-chart/implementation-report-p9-2.md
+112
View File
@@ -0,0 +1,112 @@
# HMDesign OrgChart P9.2 — Full Composition 중앙 정렬 · 회사 선택 통합
RESULT: **PASS — 요청한 P9.2 변경 범위.** 기존 Guard FAIL/NOT VERIFIED 및 사용자 디자인 승인 상태는 별도로 유지한다.
## 작업 기준·시간
- 범위: `STORYBOOK_ONLY`, 기존 실제 React Storybook 수정.
- 작업 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작/완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`. 원격 조회·Fetch·Pull 없음.
- Started At: 2026-10-13 10:53:44 KST
- Completed At: 2026-10-13 11:06:16 KST
- Actual Duration: 12분 32초
- Estimated Duration: 최초 35~50분 — 구조 확인 8분 / 수정 15~20분 / 검증·캡처·보고 12~22분.
- Variance: 예상보다 22분 28초~37분 28초 짧음.
## Full Composition 원인·수정
P9.1은 6개 조직 카드의 시각적 합집합 중심을 전체 Stage 중심으로 취급했다. 가용 폭도 부모의 border-box 폭으로 구해 Border/Padding이 있을 때 실제 콘텐츠 영역과 달라졌다. 따라서 1920·1440px에서 Stage가 약 16.12px 오른쪽으로 이동했고, 비대칭 여백에서 약 51.44px 오차와 실제 콘텐츠 밖 배치가 발생했다.
실제 사용자에게 보이는 회색 배경 `section.hm-orgchart-story-full[aria-label="Full Composition"]`을 Content Wrapper로 사용한다. 경로는 StoryPage → StorySection의 `.sb-page-section-body` → 이 section → React OrgChart host/Shadow DOM → Core Scale Wrapper `.hm-orgchart-composition` → `.hm-orgchart-stage[data-workdesk-artwork]`다.
Wrapper의 BoundingRect에서 왼쪽 Border·Padding을 더하고 오른쪽 Border·Padding을 빼 콘텐츠 가용 영역을 계산한다. 그 중심과 변환된 전체 Stage BoundingRect 중심의 차이를 실측해 전체 Stage 하나에 CSS translate를 적용한다. 임의 고정 이동값·조직별 좌표 수정이 없으며 Core transform/width-height fit과 원본 1920×914.5px을 유지한다. P9.1의 카드 중심에 맞춘 추가 scale 보정은 제거했다.
| 화면 폭 | Wrapper Left | Wrapper Right | Wrapper Center X | Stage Left | Stage Right | Stage Center X | 수정 전 오차 | 수정 후 오차 |
|---|---:|---:|---:|---:|---:|---:|---:|---:|
| 1920px | 360.000 | 1560.000 | 960.000 | 360.000000 | 1560.000000 | 960.000000 | +16.117645 | 0.000000 |
| 1440px | 120.000 | 1320.000 | 720.000 | 121.967201 | 1318.032753 | 719.999977 | +16.117462 | -0.000023 |
| 390px | 16.000 | 374.000 | 195.000 | 16.000000 | 374.000000 | 195.000000 | +4.808695 | 0.000000 |
canonical 화면에서 Wrapper 중심이 Viewport 중심과 우연히 일치한다. 기준이 Viewport가 아님은 비대칭 조건에서 확인했다: 1440px Viewport 중심720, 실제 콘텐츠 중심680, Stage 중심680. Padding만 재분배하면 콘텐츠/Stage 중심714로 같이 이동한다. 1010/390px 동일 mount resize에서도 오차 최대0.000016px이다.
- Full Composition 브라우저 **43/43 PASS**, canonical3개+비대칭 Border/Padding+동일 폭 Padding 재분배+1010/390 resize7조건.
- 152개 내부 요소의 DOM·정규화 상대 좌표·computed style 및 이미지139개의 SHA-256을 수정 전과 비교해 일치.
- 카드43개·조직6개·연결경로5개·대표자·허브·협업 화살표·우측통계·좌측파견/휴직·하단관계사·배경/장식 유지.
- 실제 rendered Stage와 모든 측정 콘텐츠가 부모 콘텐츠 영역에 포함됨. 잘림·카드/통계의 부적절한 충돌0건, 문서/사용 가능한 내부 스크롤바0건.
- 기존 Core `overflow:hidden`은 변경하지 않았다. transform 전 자연1920×915 layout 때문에 Scale Wrapper raw scrollWidth/scrollHeight가 client 크기보다 큰 기존 값은 보존된다. 이를 raw overflow0으로 보고하지 않으며, 실제 변환 후 Stage/콘텐츠 포함 검사로 잘림이 없음을 별도로 증명했다.
- 정렬 후12프레임 Stage style mutation0, observer 반복 루프 없음.
- [수정 전 측정](../../test-results/org-chart-p9-2/before-composition.json), [수정 후 원본](../../test-results/org-chart-p9-2/browser-composition.json).
## Expanded 회사 선택
외부에 펼쳐진 회사 체크박스7개와 전체 회사/선택 해제 버튼을 제거하고, 기존 FilterBar 데이터 범위·직원 수 사이에 회사 선택 드롭다운1개를 배치했다. 공개 MultiSelect export가 없고 Select는 단일값 API이므로 실제 HM `Popover + Checkbox + Label + Button + Separator`를 렌더링한다. 기존 library 의존성을 사용하며 추가 설치 없음.
실제 P5-0 preset ID/이름 `hanmac/한맥기술, saman/삼안, jangheon-industry/장헌산업, jangheon/장헌, ptc/피티씨, halla/한라산업개발, baron/바론컨설턴트`를 그대로 사용한다.
| 선택 상태 | 닫힘 요약 | 전체 선택 상태 | 실제 결과 |
|---|---|---|---|
| 7개 | 전체 회사 (7개) | checked | 전체 회사 Root/기존 합산20명 |
| 1개 | 한맥기술 또는 실제 선택회사명 | mixed | 해당 회사만 표시 |
| 2개 | 2개 회사 선택 | mixed | 한맥기술+삼안 반영 |
| 0개 | 회사를 선택하세요 | unchecked | 빈 forest·0명·오류 없음 |
- 전체 선택·해제·단일·복수·개별 제외·부분 선택에서 전체 선택을 확인했다. 닫고 다시 열어도 상태 유지.
- 회사 선택은 draft/applied의 companyIds에 즉시 반영한다. 데이터 범위·직원 수의 기존 draft→데이터 적용 정책은 보존한다. 미적용 범위/인원수를 바꾼 뒤 회사만 체크해도 적용된 범위/인원수는 그대로다.
- 회사별100명: 한맥기술100명 → 삼안 추가 즉시200명. 회사별20/300명도 단일회사 실제 확인.
- 전체 합산20/100/300명: 기존 P7 weighted partition 후 선택회사만 필터하는 계약 유지, 선택회사에 재분배하지 않음. 데이터 helper/직원JSON/Core 계약 source hash 동일.
- TB/LR/Hybrid 대표모드에서 선택된6개 회사/직원 및 제외된회사 반영 확인. 흰 제목·연결 방향별 Border, 그룹 접기/Space 펼치기, HM 직원 Dialog identity/ESC/카드focus복귀, 실제 Zoom·pointer Pan·Fit PASS.
- Enter로 열기, Tab으로 전체/회사checkbox 접근, Space 조작, ESC/trigger 클릭/외부 클릭 닫기, ESC trigger focus복귀 PASS. 접근성 이름 및 aria-checked true/mixed/false 제공, 기존 HM focus 스타일 사용.
- 실제 public Popover Portal 사용. 1920/1440/768/390px에서 표시 및 요청한 닫힘/열림/전체/부분선택 캡처. 1920/768/390px 모든8개checkbox의 panel 포함·viewport 포함·가로overflow없음 확인.
- Expanded 최초 원본44PASS/1FAIL 중 FAIL은 검증 코드가 존재하지 않는 `.hm-orgchart-empty` 안내요소를 찾은 문제였다. 기존 Core empty 계약은 자식이 없는 forest이므로 probe만 수정하고 실패한 항목만 재실행2/2PASS. 앱 코드는 변경하지 않았으며 성공한 테스트를 재실행하지 않았다. **최종45개 항목PASS**. 원본 실패기록은 보존하고 [종합/provenance](../../test-results/org-chart-p9-2/verification-summary.json)에 해소 근거를 연결했다.
- [최초 원본](../../test-results/org-chart-p9-2/browser-expanded.json), [empty항목 보정](../../test-results/org-chart-p9-2/browser-expanded-empty.json).
## 기술 검증·보존
| 항목 | 결과 |
|---|---|
| 변경 Story/helper Typecheck | PASS — `node node_modules/typescript/bin/tsc -p test-results/org-chart-p9-2/story-tsconfig.json` |
| Storybook production build | PASS — `npm.cmd exec -- storybook build -o storybook-static --disable-telemetry`. 기존500kB chunk 경고/plugin timing 진단 유지, 오류없음 |
| 신규 console/pageerror | 두 변경 및 보정/변수근거 실행 모두0건 |
| 기존 공개메뉴·StoryID | Overview / Department Colors / Full Composition / Expanded OrgChart4개 동일. OrgChart root/Patterns 다음 메뉴설정 hash 동일, 기존P8 manager증거 재사용 |
| Fixed/Auto CSS 격리 | Core/React 패키지와 공통CSS hash 동일. 신규StoryCSS는 설정컨트롤/Portal만 대상으로 하며 Shadow 내부 Fixed/Auto 카드·레이아웃을 변경하지 않음 |
| Overview·Department Colors | JSX/스타일/helper/CSF hash 동일. P9.1 간소화 결과 보존 |
| 코드리뷰·변경범위 | 독립 read-only 리뷰 finding0. 소스3개만 수정, baseline 나머지 파일 SHA-256 동일 |
| diff/공백 | `git diff --check` PASS 및 신규 authored파일 whitespace 확인 |
Core/React 데이터 생성·레이아웃 알고리즘·Theme·카드SVG·회사색은 수정하지 않았다. 기존 P7~P9.1 PASS를 동일 소스 근거로 재사용하며 전체2100명 성능·과거전체suite·전체Guard는 반복하지 않았다.
## Guard·미검증
이번 PARTIAL/STORYBOOK Guard 원본은 **status/staticStatus/runtimeStatus NOT VERIFIED**, 신규FAIL0. 원본 issue2개:
- `TOKEN-001 NOT VERIFIED`: StoryCSS의 `--radix-popover-content-available-height`. HM 공개 Popover/Radix가 런타임에 선언하는 위치변수이므로 연결consumerTheme 정적 선언만으로 확인되지 않는다. 실제 변수값과 maxHeight 일치를 [추가 런타임 근거](../../test-results/org-chart-p9-2/browser-expanded-token.json)로 확인했다. 원본 미검증을 덮어쓰지 않았다.
- `TOKEN-002 NOT VERIFIED`: 기존 StoryPage 동적class site. 소스불변.
styleEvidence는 **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**, 결합styleVerification은 생성하지 않았으며 NOT VERIFIED다. 실제 computed/상호작용PASS는 사용자 디자인의도 승인으로 확대하지 않는다.
기존 P9 Guard의 status/staticStatus **FAIL**, runtime **NOT VERIFIED**, TOKEN-00110FAIL/TOKEN-00210NOT VERIFIED 및 패키지CSS SCOPE-0012NOT VERIFIED 원본/보고서/hash를 그대로 보존한다. 이번 PARTIAL 검사가 이전 전체범위 결과를 대체하지 않는다. 삼안·장헌산업 흰 제목 대비 잔여진단, Compact NOT SUPPORTED도 유지한다.
사용자 최종 디자인 승인·다른브라우저/실기기/스크린리더·모든옵션조합·SSR/배포는 NOT VERIFIED. 요청범위 완료 후 사용자 검토 대기하며 P10은 시작하지 않았다.
## 변경파일
| 파일 | P9.2 변경 |
|---|---|
| src/org-chart/center-composition-preview.ts | 실제부모 content-box 기준 전체Stage 중앙정렬 |
| src/org-chart/org-chart-expanded.stories.tsx | HM 회사선택Popover·전체/부분/미선택·즉시회사반영 |
| src/org-chart/org-chart-expanded-story.css | trigger/요약/Portal 콘텐츠레이아웃 |
| examples/org-chart/verify-p9-2-composition.mjs | 중앙정렬 수정전후·포함·내부보존·scroll/resize검증 |
| examples/org-chart/verify-p9-2.mjs | 회사선택·데이터·키보드·레이아웃·Portal 검증 |
| docs/org-chart/implementation-report-p9-2.md | 이 보고서 |
test-results/org-chart-p9-2 및 storybook-static은 생성검증산출물이다. [시작baseline](../../test-results/org-chart-p9-2/baseline.json), [최종audit](../../test-results/org-chart-p9-2/final-state.json), [typecheck log](../../test-results/org-chart-p9-2/typecheck.log), [build log](../../test-results/org-chart-p9-2/build.log), [Guard원본](../../test-results/org-chart-p9-2/guard.json).
**Stage·Commit·Push·Merge·main checkout·PR·Pull·Reset·Rebase·Force Push 모두 미진행.** 시작과완료branch/HEAD 동일, staged파일0. 기존미커밋P7~P9.1변경 보존.
## 실제 Storybook·캡처
- [Full Composition](http://127.0.0.1:6062/?path=/story/orgchart--full-composition): [1920px](../../test-results/org-chart-p9-2/after-full-composition-1920.png), [1440px](../../test-results/org-chart-p9-2/after-full-composition-1440.png), [390px](../../test-results/org-chart-p9-2/after-full-composition-390.png).
- [Expanded OrgChart](http://127.0.0.1:6062/?path=/story/orgchart--expanded-org-chart): [닫힘](../../test-results/org-chart-p9-2/expanded-closed.png), [열림](../../test-results/org-chart-p9-2/expanded-open-all.png), [전체선택](../../test-results/org-chart-p9-2/expanded-all-selected.png), [부분선택](../../test-results/org-chart-p9-2/expanded-open-partial.png), [2회사100명씩](../../test-results/org-chart-p9-2/expanded-closed-partial.png), [390px열림](../../test-results/org-chart-p9-2/expanded-open-390.png).
- [수정전회사UI](../../test-results/org-chart-p9-2/before-expanded-1440.png). 수정전FullComposition은 같은폴더before-full-composition-1920/1440/390.png에 보존.
docs/org-chart/implementation-report-p9-3.md
+148
View File
@@ -0,0 +1,148 @@
# HMDesign OrgChart P9.3 — Pan 유지 · 회사 안팎 소속 변경 Drag & Drop
RESULT: **PASS — P9.3에서 요청한 기능 변경 범위.** 회사 간 이동 금지 조건은 2026-10-13 사용자의 최신 요청으로 취소되었다. Guard의 NOT VERIFIED와 디자인 승인 상태는 기능 PASS와 별도로 보존한다.
## 작업 기준·시간
- 범위: 기존 Expanded React Storybook과 공유 Vanilla Core의 Auto 동작. 신규 업무 화면·Story·Navigation·서버 API 없음.
- 작업 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작/완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`. 원격 조회·Fetch·Pull 없음.
- Started At: 2026-10-13 11:11:19 KST
- Completed At: 2026-10-13 11:50:58 KST
- Actual Duration: 39분 39초
- Estimated Duration: 최초 50~70분 — 분석10분 / 구현25~35분 / 통합 검증15~25분. 회사 간 허용 정책 변경 시 추가15~25분 예상 안내.
- Variance: 최초 예상보다 10분21초~30분21초 짧음.
## 엔진·입력 처리
기존 `orgchart@6.0.0`의 `filterAllowedDropNodes`, `dropHandler`, `dragendHandler` 및 `nodedrop.orgchart`/`otherdropped.orgchart` 이벤트를 재사용한다. 이벤트의 기본 DOM 변경은 `preventDefault()`로 취소하고 검증한 불변 데이터로 Core를 갱신한다. 여러 회사는 독립 엔진 인스턴스이므로 모든 표시 트리에 Drop 후보를 계산하고 다른 회사 트리의 대상도 최종 검증한다. 새로운 DnD 의존성을 추가하지 않았다.
Core의 Pointer 처리에서 화면 좌표6px 임계값, Pointer capture, 실제 Shadow DOM hit-test를 담당한다. 빈 공간에서 시작하면 기존 Pan, 직원 카드에서 시작하면 직원 이동, 그룹 타이틀에서 시작하면 그룹 이동이다. 임계값 미만의 클릭은 기존 직원 팝업·그룹 접기를 실행한다. Drag 후 발생하는 포인터 click은 차단하며 키보드 click은 유지한다. ESC·Pointer cancel·포커스 상실은 이동을 취소한다. Viewport 밖 Drop은 데이터 변경 없이 거부한다.
브라우저 touch 에뮬레이션에서 카드 Drag와 빈 공간 Pan 모두 PASS. 자식의 implicit touch capture 변경을 상위 Viewport 취소로 오인하지 않도록 대상 요소를 구분한다. 실기기 터치는 NOT VERIFIED다.
## 소속 변경 계약·결과
기존 `organization.companyId`는 조직 트리의 회사, `employee.affiliationId`는 직원의 관계사 소속이다. 조직의 회사 값은 기존 상위 조직 상속 계약으로 판정하며, 같은 회사 이동에서 파견 등 기존 affiliation을 덮어쓰지 않는다. 기존 필드만 사용하고 데이터 스키마를 확장하지 않았다.
| 이동 | 실제 데이터 변경 | 보존 |
|---|---|---|
| 같은 회사 직원 | 대상 `organizationId` | `affiliationId`, 직원 ID·개인정보·전체 인원 |
| 회사 간 직원 | 대상 `organizationId`와 대상 회사 `affiliationId` | 직원 ID·개인정보·전체 인원 |
| 같은 회사 그룹 | 그룹 `parentId` | 하위 관계·회사·직원 소속·조직장·ID |
| 회사 간 그룹 | 그룹 `parentId`, 전체 하위 조직 `companyId`, 전체 하위 직원 `affiliationId` | 하위 조직 연결·조직장·ID·직원 총원 |
회사 간 예시에서 `virtual-006`을 `saman-division-1`로 옮기면 실제 `organizationId=saman-division-1`, `affiliationId=saman`이 된다. Story의 회사별20명·한맥기술/삼안 표시 조건에서 한맥의10명 하위 그룹을 삼안으로 옮기면 양쪽 집계는 **한맥20→10명, 삼안20→30명, 선택 합계40명 유지**다. 숨긴5개 회사를 포함하는 세션 전체140명도 유지된다. 조직·직원 ID 중복은 없다.
다음 이동은 이유를 표시하고 데이터 변경 없이 거부한다: 조직장 직원, 회사 Root, 자기 자신, 자손 조직, 기존 부모/소속, 없는 source/target, 잘못된 데이터 및 회사 참조. 회사 간 이동 대상의 affiliation 항목이 없으면 임의 소속을 만들지 않고 거부한다. 회사 Root는 이동 대상이 될 수 있지만 Root 자체를 옮길 수 없다.
성공 시 검증된 새 데이터는 깊이 동결된 브라우저 상태가 된다. `OrgChartHandle.move()`, `getData()`, `onMove`를 통해 Vanilla/React에서 같은 정책을 사용한다. 원본 DataSource·JSON·서버·DB·localStorage에 기록하지 않는다. 전체 페이지 재로딩은 원래 데이터로 돌아간다.
## 재배치·색상·집계·팝업
현재 데이터를 기준으로 기존 자동 레이아웃, 부모 연결선, 직접/하위 포함 인원, 회사별 인원, affiliation 현황과 직원 팝업 context를 다시 만든다. 성공한 이동 시 열린 React HM Dialog를 닫아 이전 소속 정보가 남지 않으며, 다시 클릭하면 현재 조직·회사 정보를 표시한다. 기존 회사 palette에서 대상 회사 main color를 그룹 제목과 직원의 연결 방향 강조 Border에 적용한다. palette·카드 SVG·카드 크기 변경 없음.
이동 시 Zoom/Pan 값과 기존 조직 ID 기준 접기 상태를 보존한다. 숨긴 조직의 Drop 후보는 현재 표시 범위에서 제외한다. 이동 후 Fit은 다시 계산한 forest 전체를 포함한다. 회사 선택은 세션의 표시 필터로 처리하므로 숨겼다 다시 표시해도 소속 변경이 유지된다. `데이터 적용`은 지정 조건의 샘플을 다시 만들며 `초기화`는 최초 설정/소속/이동 안내로 돌아간다.
| 표시 유형 | 같은 회사 직원/그룹 | 회사 간 직원 | 회사 간 하위 그룹 | 연결선·Border·Fit |
|---|---|---|---|---|
| TB | PASS | PASS | PASS | PASS |
| LR | PASS | PASS | PASS | PASS |
| Hybrid | PASS | PASS | PASS | PASS |
Hybrid의 회사 간 직원 이동은 별도 실제 포인터 시나리오에서 회사·조직·색상·양쪽 집계·HM Dialog 갱신을 확인했다. Hybrid 시작 Depth 전체 조합, 특정 그룹 세로 배치 전체 조합은 NOT VERIFIED다. Compact 지원 범위는 기존과 동일하다.
TB에서 Zoom100%·65%·140%, Fit 이후 Pan한 상태의 Drop을 확인했다. LR/Hybrid 대표 실제 그룹 Drag와 회사 간 이동 후 세 유형의 Fit 포함 검사를 확인했다. 모든 Zoom×모드 조합을 재검증하지 않았다.
## 접근성·화면
직원 카드/그룹 타이틀에 초점을 둔 뒤 **Alt+M → 방향키 또는 Home/End로 대상 선택 → Enter/Space로 이동**, ESC/Tab으로 취소할 수 있다. 이동 가능·거부 후보는 선 모양과 텍스트로도 구분하고 live 안내를 제공한다. 성공 후 이동된 카드 또는 대상 제목으로 초점이 이동하며, 거부·취소 시 source 초점을 복구한다. Collapse가 꺼져 있어도 제목을 이동 source로 사용할 수 있다. 직원 팝업이 꺼져 있어도 키보드 이동을 위한 카드 초점을 제공한다.
Story는 기존 HM FilterBar·Button·Checkbox·Popover·Label·Select·Separator와 실제 HM Dialog를 유지한다. 데이터 조건은 기존 FilterBar API와 맞으므로 그대로 재사용한다. 기존 네 메뉴만 유지하며 신규 Navigation은 없다. 최종 회사별 인원/이동 안내를 390·768·1280·1440px에서 확인해 문서와 텍스트 overflow가 없었다. 실제 스크린리더·운영체제 보조기술 검증은 NOT VERIFIED다.
## 통합 검증
| 검사 | 결과 | 근거 |
|---|---|---|
| 새 이동 정책 단위 테스트 | 11/11 PASS | `node packages/org-chart/test.mjs src/data/moves.test.ts`, 실행 출력은 도구 기록에 보존 |
| Vanilla Core 변경 검사 | 51개 고유 assertion PASS / FAIL0 | [통합 결과](../../test-results/org-chart-p9-3/verification-summary.json), `core-browser*.json` |
| 실제 React Storybook 이동/입력 검사 | 117개 고유 assertion PASS / FAIL0 | 같은 통합 결과, `browser-editing*.json` |
| Fixed·기존 메뉴·최초 반응형 최소 회귀 | 9/9 PASS | [원본](../../test-results/org-chart-p9-3/preservation.json) |
| 최신 안내·회사별 집계 반응형 | 5/5 PASS | [원본](../../test-results/org-chart-p9-3/responsive-current.json) |
| Core Typecheck·Build | PASS | `typecheck-core.log`, `build-core.log` |
| React Typecheck·Build | PASS | `typecheck-react.log`, `build-react.log`; 최종 React 소스 기준 빌드 유지 |
| 변경 Story Typecheck·Storybook production build | PASS | `story-tsconfig.json`, `typecheck-story.log`, `build-storybook.log` |
| 신규 console/page 오류 | 0 | 각 브라우저 실행의 오류 결과 |
| JSON·palette·원본 artwork 불변 / 기존 작업 보존 | PASS | [SHA-256·Git 감사](../../test-results/org-chart-p9-3/final-state.json) |
| `git diff --check` | PASS | 최종 변경 상태 검사 |
고유 assertion 합계는 원본 실행 횟수의 합이 아니다. 같은 이름은 최종 결과로 교체했다. Reset의 잘못된 root selector 검사는 명시적 이름 대응표로 수정된 실제 Root/원래 소속 검사의 PASS를 연결했다. 최신 정책으로 취소된 회사 간 거부 검사6건은 최종 합계에서 제외하고 원본을 보존한다. 단위 테스트와 브라우저 assertion 수를 하나의 테스트 수로 합하지 않는다.
최초 실제 Drag hit-test가 detached fragment를 참조한 문제와 touch capture 문제는 소스 수정 후 실패 범위만 재검증했다. LR 검증에서 Pan 첫 좌표가 Viewport 밖으로 나간 문제와 Reset 검증의 존재하지 않는 root selector는 검증 코드만 수정했다. 초기 FAIL/진단 JSON을 삭제하거나 PASS로 덮어쓰지 않았다. 현재 통합 기능 결과에 미해결 FAIL 없음. 기존 P7~P9.2 전체 브라우저 suite·20/100/300명 전체 조합을 반복하지 않았다.
### Guard·미검증
최종 `STORYBOOK / PARTIAL` Guard 대상은 변경된 Expanded Story와 Auto editing CSS다. [Guard 원본](../../test-results/org-chart-p9-3/guard.json)의 **FAIL0 / status NOT VERIFIED / staticStatus NOT VERIFIED / runtimeStatus NOT VERIFIED**를 유지한다.
- `SCOPE-001`: package CSS가 증명된 Story graph 밖이다. 별도 Core build와 실제 Shadow DOM 브라우저 검사 결과를 제공한다.
- 기존 `TOKEN-001`: Radix의 `--radix-popover-content-available-height` 선언 범위.
- 기존 `TOKEN-002`: 공통 StoryPage의 동적 className.
- `styleEvidence`: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**. 결합 `styleVerification`도 NOT VERIFIED다.
브라우저에서 회사 색상과 Border 및 editing token을 확인한 것은 해당 기능의 런타임 근거다. 전체 HM CSS 결합 디자인 승인으로 해석하지 않는다. 기존 P9~P9.2 전체 Guard FAIL/NOT VERIFIED와 보고서는 변경하지 않았다. 사용자 디자인 승인, 실제 터치 기기, 실제 스크린리더, Chrome 외 브라우저, 전체 레이아웃/옵션 조합, 300명 이상 Drag 성능, 서버 저장·SSR은 NOT VERIFIED다.
## Fixed 보호·변경 파일
Fixed Full Composition의 DOM hash, 이미지139개 SHA-256, 요소152개 computed style/정규화 좌표가 P9.2 최종 스냅샷과 일치했다. 중앙 정렬·직원 카드43개·연결경로5개·충돌0 유지. Fixed에 편집 상태·Drop 후보·안내를 추가하지 않았다. 이 검사 이후 회사 간 정책 변경은 Auto 데이터/bridge/Story에 한정되므로 정상 Fixed 검사를 반복하지 않았다.
시작 시 미커밋 authored 파일47개를 SHA-256과 패치로 보존했다. 그중 관련13개에 P9.3을 추가하고 나머지34개는 byte 단위로 동일하다. Full Composition Story·P9.2 보고서·기존 카드·palette·fixture·lockfile·package dependency는 변경하지 않았다. Git 전체 diff에는 누적 변경이 포함되므로 이번 범위를 Git 전체 경로 목록으로 간주하지 않는다.
관련 기존 파일13개:
```text
docs/org-chart/expanded-usage.md
packages/org-chart-react/README.md
packages/org-chart-react/src/OrgChart.tsx
packages/org-chart/README.md
packages/org-chart/src/core/engine.ts
packages/org-chart/src/core/expanded-content.ts
packages/org-chart/src/core/expanded-viewport.ts
packages/org-chart/src/core/index.ts
packages/org-chart/src/core/types.ts
packages/org-chart/src/core/vendor.d.ts
packages/org-chart/src/data/index.ts
packages/org-chart/src/styles/org-chart-expanded.css
src/org-chart/org-chart-expanded.stories.tsx
```
새 authored 파일7개:
```text
docs/org-chart/implementation-report-p9-3.md
examples/org-chart/verify-p9-3-core.mjs
examples/org-chart/verify-p9-3-preservation.mjs
examples/org-chart/verify-p9-3.mjs
packages/org-chart/src/core/expanded-editing.ts
packages/org-chart/src/data/moves.test.ts
packages/org-chart/src/data/moves.ts
```
`packages/*/dist`, `storybook-static`, `test-results`, `_local`, logs 등은 검증 생성물이며 authored 변경 목록에서 제외한다. 기존 baseline 기록은 `_local/p9-3/baseline-files.json`과 `baseline.patch`에 남겼다.
**Stage·Commit·Push·Merge·main checkout·PR·Reset·Clean·Rebase·Force Push 미진행.** Staged0, 시작/완료 branch·HEAD 동일. P9.3에서 종료하며 P10을 시작하지 않았다.
## 실제 Storybook·캡처
- [Expanded OrgChart](http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart): 실제 React production Storybook.
- [TB 회사 간 그룹 이동 후 Fit](../../test-results/org-chart-p9-3/tb-cross-company-fit.png)
- [LR 회사 간 그룹 이동 후 Fit](../../test-results/org-chart-p9-3/lr-cross-company-fit.png)
- [Hybrid 회사 간 그룹 이동 후 Fit](../../test-results/org-chart-p9-3/hybrid-cross-company-fit.png)
- [직원 이동 후보](../../test-results/org-chart-p9-3/tb-staff-drop-hover.png) / [직원 이동 완료](../../test-results/org-chart-p9-3/tb-staff-moved.png)
- [키보드 이동 완료](../../test-results/org-chart-p9-3/keyboard-move-complete.png)
- [최신390px](../../test-results/org-chart-p9-3/expanded-current-390.png) / [768px](../../test-results/org-chart-p9-3/expanded-current-768.png) / [1280px](../../test-results/org-chart-p9-3/expanded-current-1280.png) / [1440px](../../test-results/org-chart-p9-3/expanded-current-1440.png)
- [Fixed 보존1440px](../../test-results/org-chart-p9-3/fixed-preserved-1440.png)
- [공유 Vanilla Core](../../test-results/org-chart-p9-3/vanilla-cross-company.png)
미리보기 서버는 `_local/p9-3/serve.mjs`로 실행한 로컬6064 세션이다. 정적 Storybook 배포나 외부 공개는 수행하지 않았다.
docs/org-chart/implementation-report-p9-4.md
+125
View File
@@ -0,0 +1,125 @@
# HMDesign OrgChart P9.4 — Department Colors · 회사별 데이터 · Drag & Drop ON/OFF
RESULT: **PASS — 요청한 P9.4 기능과 두 추가 수정 범위.** 기존 Guard FAIL과 미검증은 별도로 유지한다. P10과 Git 작업은 시작하지 않았다.
## 작업 기준과 시간
- 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작/완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`. 원격 조회·Fetch·Pull 없음; 현재 원격 SHA는 NOT VERIFIED.
- 범위: 기존 React Storybook 두 페이지와 공유 Vanilla Core/React Auto 편집 설정. 신규 화면·메뉴·API·의존성 없음.
- Started At: 2026-10-13 12:19:16 KST
- Completed At: 2026-10-13 12:43:09 KST
- Actual Duration: 23분 53초
- Estimated Duration: 최초 45~60분. 이후 Department 이름 및 Expanded 외곽 스타일 추가 요청도 같은 작업에 반영.
- Variance: 예상보다 21분 7초~36분 7초 짧음
## Department Colors
간소화 코드가 기존 Core에서 만든 대표자 DOM을 제외하고 있었다. 그 DOM을 보존하여 대표자 → 조직 타이틀 → 대형 그룹장 → 소형 직원 순으로 표시한다. 대표자 한 개, 146×74px, 대표이사, Noto Sans KR, 대표자 뱃지 0개이며 Full Composition과 SVG·사진·Typography가 같다. 원본 카드 Presenter/SVG를 수정하지 않았다.
실제 `src/center/center-stories.css`와 Tunnel의 `sample / stage / variant-grid` 클래스를 Department 전용 Shadow DOM에 연결했다. 공통 배경 `rgba(217,217,217,.48)`, Border `1px solid rgba(64,5,0,.14)`, Radius 8px, Shadow 없음, 내부 Padding 24px와 Gap 14px를 재사용한다. 조직별 Gradient·흰색 타이틀·직원 카드 모양·146×68 / 108×52 크기는 보존한다. 2열→모바일 1열이며 설명·Legend·대비 진단·카드별 Caption을 다시 추가하지 않았다.
추가 이름 요청은 **Department 디자인 미리보기에서만** 처리한다. 표본 이름 `홍길동`을 `홍 길 동`으로 형식화한 표시 데이터 사본으로 Core를 호출하며, 이름의 접근성 표기는 `홍길동`이다. 표시 중인 13개 카드와 Tooltip이 같은 이름을 사용한다. 모든 직원 레코드에 이름만 적용하므로 그룹장/일반 직원에도 동일 정책이다. 원본 JSON·Employee ID·직위·직책·뱃지·조직·사진은 그대로다. 공통 EmployeeCard renderer와 Full Composition/Expanded 데이터는 변경하지 않았다.
## Expanded 데이터 선택
데이터 범위 UI와 전체 합산 설명을 제거했다. 기존 HM `FilterBar / Popover / Checkbox / Label / Button / Separator / Select`를 실제 렌더링한다. 회사 선택·전체 선택/해제·복수 선택·선택 요약·ESC/외부 클릭·키보드 조작을 유지한다. 공개 helper의 `scope: 'total'` 기능과 Fixture는 보존했다.
직원 수는 항상 회사별20/100/300명이다. 최초7개×20명=140명, 1개×20/100/300명, 2개×100명=200명, 7개×300명=2,100명을 실제 DOM Employee ID와 회사 Root 집계로 확인했다. ID 중복과 조직장 중복 집계가 없고 0개 회사는 명시적 빈 상태다.
회사 선택은 즉시 표시를 갱신하며 숨김·복귀 시 완료한 이동을 보존한다. 직원 수는 기존 **데이터 적용** 정책을 유지한다. 적용/초기화 때 새 예시 Source를 만들고 세션 이동을 초기화하므로 새 Fixture와 섞이지 않는다. 전체7개 회사의 세션 Source를 유지하고 선택된 회사의 현재 소속 기준 인원 합계를 별도로 표시한다. 숨긴 회사를 포함한 `전체` 세션 인원과 선택 합계를 구분한다.
## 공유 Drag & Drop 정책
Core 옵션과 React prop에 `dragDropEnabled?: boolean`을 추가했으며 기본값은 **false**다. Vanilla는 `setDragDropEnabled(boolean)` / `getDragDropEnabled()`를 제공한다. React는 독립 layout effect로 같은 handle의 setter를 호출한다. 옵션 변경으로 재생성·Source 재요청·레이아웃 재계산을 하지 않는다.
실제 HM Switch의 명칭은 **Drag & Drop**, 상태는 ON/OFF다. OFF는 pointer·Alt+M·engine drop 판정·공개 `handle.move()`에서 차단하며 공개 이동은 `EDITING_DISABLED`를 반환한다. 순수 데이터 이동 helper는 기존 계약을 유지한다. Highlight·이동 커서/단축키 안내도 상태에 맞춘다.
ON은 기존 P9.3 엔진/검증/불변 이동을 재사용한다. 직원·그룹의 회사 안팎 이동, 하위 조직·직원 소속, 대상 회사색·인원 집계·Border·연결선·배치를 유지한다. Root·자기 자신·자손/순환·잘못된 대상 등 기존 보호 정책을 교체하지 않았다.
OFF 전환은 진행 중 pointer/keyboard 이동을 취소하고 capture·Drop 강조·pending 상태를 해제한다. Drag 후 잘못된 pointer click을 차단하며 이미 완료한 이동을 보존한다. Source load는1회, 데이터·DOM forest·Viewport가 옵션 변경 후 동일함을 Vanilla에서 확인했다. Pan·Zoom·Fit·접기/펼치기·직원 Dialog는 독립 기능이다. Fixed는 옵션을 무시하고 Auto setter/move를 거부하며 ON/OFF UI를 추가하지 않는다.
## Expanded 외곽 스타일 추가 요청
「확장형 조직도 · 가상 데이터」의 외곽만 실제 Center Storybook 공통 카드의 배경·Border·Radius로 통일했다. 기존 Wrapper에 `sb-center`를 연결하고 선언된 `--sb-center-card-*` 값을 전용 `--hm-orgchart-expanded-preview-*` 입력으로 전달한다. Wrapper의 기존 간격을 보존하고 `.hm-orgchart-expanded` 외곽에서만 세 입력을 소비한다.
내부 Viewport·직원 카드 배경·회사별 그룹 타이틀/흰 글자·컨트롤·Padding·레이아웃을 유지한다. Vanilla에서 입력을 생략하면 기존 외곽 기본값을 사용한다. 새 색상 복사·Theme/공통 Center CSS 수정·직원 카드 override는 없다.
## 통합 검증과 증거
- [기본 변경 범위 브라우저](../../test-results/org-chart-p9-4/browser.json): **78/78 PASS**, console/pageerror0. Department 공통 카드 비교, 회사별 인원/선택, OFF/ON 이동·Pan·Dialog·접기·취소, TB/LR/Hybrid 대표 동작,390/768/1280/1440px, 공개4개 Story ID.
- [공유 Vanilla API](../../test-results/org-chart-p9-4/core-api-cancel-default-fixed.json): **21/21 PASS**, 기본 OFF·4종 이동 차단/허용·Source load1·capture 해제·키보드 취소·total helper 호환·Fixed 보호.
- [Fixed 최소 회귀](../../test-results/org-chart-p9-4/fixed-preservation.json): **4/4 PASS**. P9.2 DOM hash·139개 자산 hash·152개 스타일/정규화 좌표 동일, 중앙 오차 약0px, 카드43개·연결선5개·충돌0, 편집 UI 없음.
- [Department 추가 이름](../../test-results/org-chart-p9-4/browser-department-names.json): **7/7 PASS**, 13개 이름과 ID·직위·뱃지·SVG·사진·Typography·Gradient·크기 보존.
- [외곽 스타일와 이름 모바일](../../test-results/org-chart-p9-4/browser-expanded-frame-names-mobile.json): **7/7 PASS**, 실제 공통 카드와3개 computed 값 동일, 내부 카드/타이틀색 보존, OFF/ON·390px, console/pageerror0. 회사 이동은 최종 스타일 캡처를 위한 예시이며 기존 이동 PASS를 반복 집계하지 않는다.
- Core/React 패키지 Typecheck·Build PASS. 변경 Story/helper Typecheck PASS. 추가 이름과 외곽 CSS를 반영한 최종 [Storybook build](../../test-results/org-chart-p9-4/storybook-build-frame.log) PASS. 기존500kB chunk 경고와 plugin timing 진단은 유지한다.
- `git diff --check` PASS. 독립 읽기 전용 Core/React/Department 리뷰에 새 구체적 버그 없음.
Vanilla 최초 실행은 테스트 HTML의 `id="chart"`가 `window.chart`와 충돌했고 Fixed probe가 기존 thrown Error를 반환값으로 오인했다. 앱 변경 없이 테스트만 수정했다. [원본 실패](../../test-results/org-chart-p9-4/core-initial.json)를 보존하고 실패한 구간만 재검사했다. 위 실행들의 중복 공통 오류 검사를 합산하여 고유 테스트 수로 주장하지 않는다. 추가 요청 후 기존 정상 기능 suite를 재실행하지 않았다.
## Guard와 NOT VERIFIED
[초기 PARTIAL Guard](../../test-results/org-chart-p9-4/guard.json): **status/staticStatus FAIL, runtimeStatus NOT VERIFIED**, 기존TOKEN-00110FAIL / NOT VERIFIED13. [P9/P9.3 비교](../../test-results/org-chart-p9-4/guard-comparison.json)에서 FAIL10 모두 기존과 같고 신규FAIL0이다. 새 Department CSS의 `?url` 로딩은 정적 graph에 증명되지 않아 SCOPE-001 NOT VERIFIED이며 실제 Shadow DOM computed 비교를 별도로 제공한다.
추가 요청 이후에는 수정 범위만 다시 검사했다.
- [이름 변경 Guard](../../test-results/org-chart-p9-4/guard-department-names.json): 기존FAIL10 / NOT VERIFIED10, status/staticStatusFAIL / runtimeNOT VERIFIED. styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(해당 정적 scope) / FINAL NOT VERIFIED.
- [Expanded 외곽 Guard](../../test-results/org-chart-p9-4/guard-expanded-frame.json): **FAIL0 / NOT VERIFIED3**, status/staticStatus/runtimeStatusNOT VERIFIED. package CSS scope, 기존Radix 위치 변수, 기존StoryPage 동적class 미검증. styleEvidence STATIC PASS / RUNTIME·DESIGN_INTENT·FINAL NOT VERIFIED.
초기 Guard 원본은 추가 요청 이전 소스 fingerprint의 기록이며, 뒤의 수정 범위 결과와 각각 보존한다. 결합 styleVerification은 생성하지 않았고 NOT VERIFIED다. 실제 기능/computed PASS를 전체 CSS 디자인 승인으로 확대하지 않는다. 기존 전체 Guard FAIL·삼안/장헌산업 흰 제목 대비 잔여 진단·Compact NOT SUPPORTED를 보존한다.
사용자 최종 디자인 승인·실제 터치 기기·스크린리더·Chrome 외 브라우저·모든 옵션 조합·2,100명 전체 성능/Drag 성능·서버 저장·SSR/배포는 NOT VERIFIED다. 기존 P7~P9.3의 승인 카드·배치·성능/메뉴 증거를 필요한 범위에서 재사용했다.
## 변경 파일과 작업 보존
시작 baseline697개(일반684 + 승인 카드 SVG byte 사본13)를 비교했다. 이번 요청 관련 기존 파일12개 변경,685개 동일, 누락0. [Source 감사](../../test-results/org-chart-p9-4/source-preservation.json)에 파일별 SHA와 보호 범위를 기록했다. Fixture7·승인 SVG13·카드 Presenter·palette·Full Composition·Overview·메뉴·의존성·HM UI/Pattern/Theme·Center 공통 CSS와 기존 설정/Popover CSS를 보존했다. baseline에서 빠진 일부 기존 한글 경로는 별도로 기록했으며 모든 저장소 파일의 byte 보존을 주장하지 않는다.
수정한 기존 authored12개:
```text
docs/org-chart/expanded-usage.md
packages/org-chart/README.md
packages/org-chart/src/core/types.ts
packages/org-chart/src/core/index.ts
packages/org-chart/src/core/expanded-editing.ts
packages/org-chart/src/data/moves.ts
packages/org-chart/src/styles/org-chart-expanded.css
packages/org-chart-react/README.md
packages/org-chart-react/src/OrgChart.tsx
src/org-chart/core-component-preview.tsx
src/org-chart/org-chart-expanded.stories.tsx
src/org-chart/org-chart-expanded-story.css
```
새 authored5개:
```text
src/org-chart/department-colors-preview.css
examples/org-chart/verify-p9-4.mjs
examples/org-chart/verify-p9-4-core.mjs
examples/org-chart/verify-p9-4-preservation.mjs
docs/org-chart/implementation-report-p9-4.md
```
`packages/*/dist`, `storybook-static`, `test-results`와 로그는 검증 생성물이다. 현재 Git 설정은 `김수현 <shkim4@samaneng.com>`이며 사용자 문서의 이름과 다르지만 설정을 변경하지 않았다. [최종 Git 상태](../../test-results/org-chart-p9-4/final-state.json)를 별도로 기록했다.
**Stage·Commit·Push·Merge·main checkout·PR·Pull·Reset·Rebase·Force Push 미진행.** 시작/완료 branch·HEAD 동일, staged0. 기존 P7~P9.3 미커밋 변경을 보존했으며 P9.4에서 사용자 검토를 기다린다.
## 실제 Storybook과 최종 캡처
- [Department Colors](http://127.0.0.1:6064/?path=/story/orgchart--department-colors)
- [Expanded OrgChart](http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart)
요청된7개 캡처는 추가 수정까지 반영한 현재 Storybook에서 새로 촬영했다.
1. [Department 대표자](../../test-results/org-chart-p9-4/department-representative-current.png)
2. [Department 전체 간소화/이름 통일](../../test-results/org-chart-p9-4/department-full-current.png)
3. [Expanded 데이터 범위 제거/최종 외곽](../../test-results/org-chart-p9-4/expanded-frame-scope-removed.png)
4. [회사 선택 드롭다운](../../test-results/org-chart-p9-4/expanded-frame-company-dropdown.png)
5. [Drag & Drop OFF](../../test-results/org-chart-p9-4/expanded-frame-off.png)
6. [Drag & Drop ON](../../test-results/org-chart-p9-4/expanded-frame-on.png)
7. [회사 간 이동 후 최종 화면](../../test-results/org-chart-p9-4/expanded-frame-company-moved.png)
추가: [Department390px](../../test-results/org-chart-p9-4/department-names-390.png), [Expanded390px](../../test-results/org-chart-p9-4/expanded-frame-390.png), [Fixed1440px](../../test-results/org-chart-p9-4/fixed-preserved-1440.png). 이름/외곽 추가 이전 캡처도 원본 기록으로 보존하고 최종 캡처와 구분한다.
docs/org-chart/implementation-report-p9-5-core-dialog-close.md
+49
View File
@@ -0,0 +1,49 @@
# P9.5 추가 — Core 직원 팝업 X 닫기 버튼
RESULT: PASS (요청한 닫기 버튼 및 팝업 동작 범위)
## 변경
- 실제 HM Dialog의 `Button variant="ghost" size="icon-sm"`과 Lucide `XIcon`을 확인했다. HM Dialog/Button 자체는 수정하지 않았다.
- Core에서 같은 두 SVG 경로와 viewBox, Stroke 2, Round cap/join을 native DOM으로 생성한다. React 의존성은 추가하지 않았다.
- 버튼 28×28px, 아이콘 16×16px, Padding 0, 투명 Border 1px, 기본 Radius 3.2px, 상단/우측 CSS 8px를 적용했다. BoundingRect 기준 외곽에서 9px이며 팝업 Border 1px를 포함한 값이다.
- HM 선언값/상속 변수를 사용한다. 기본 색 #0a221d, Hover #f4f1ea, Focus Border #266651 + 같은 색 50%의 3px Ring, 150ms transition, 눌림 Y +1px. Vanilla fallback은 실제 HM 선언된 기본값이다.
- 우상단 absolute 버튼으로 바꾸면서 기존 텍스트 버튼의 Header 높이를 유지해 Title/본문/팝업 크기를 보존했다. 직원 정보 데이터와 닫기 이벤트 로직은 수정하지 않았다.
## 검증
- React Full Composition의 Core 팝업과 React 없는 public Vanilla Core에서 각각 1440×900 / 390×900 검증: 48 PASS, 0 FAIL.
- 실제 HM Dialog의 Normal/Hover/Focus와 버튼 및 아이콘의 CSS/BoundingRect/경로를 비교했다. X 클릭, ESC, Tab/Shift+Tab trap, 직원 카드 Focus 복귀를 확인했다.
- 기존 외부 클릭 정책 유지: Backdrop 클릭은 닫히지 않는다.
- Dark Hover 및 눌림 실제 이동량만 추가 비교: React/Vanilla 4 PASS. HM은 CSS translate, Core는 transform을 사용하므로 초기 속성 이름 비교 실패를 실제 이동량 비교로 바로잡았다. 최초 결과는 states-initial.json에 보존했다. 제품 코드 추가 수정은 없었다.
- 1440px React/Vanilla 팝업: 420×276.5px → 420×276.5px. 390px React/Vanilla 팝업: 358×276.5px → 358×276.5px. 모두 Title/본문 좌표 변화 0px; 본문 시작 y=386.25px 유지. 배경/Border/Typography/데이터도 동일하다.
- 기존 닫기 버튼: 약 41.922×29.5px → 28×28px, 외곽 상단/우측 inset 25px → 9px.
- 최초 실제 1440px 기준 측정을 저장했고, 나머지 크기의 전후 비교는 저장한 기존 CSS와 기존 닫기 markup을 동일 팝업에 잠시 적용해 측정했다.
- Core Typecheck / Core Build / Storybook Build / git diff --check PASS. 신규 Console/Page 오류 0. P9.4/P9.5 전체 회귀는 반복하지 않았다.
Guard 1회: 원본 status/staticStatus NOT VERIFIED (SCOPE-001: package 구현이 proven Storybook graph 밖). styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS (검사 없음) / FINAL NOT VERIFIED. Guard 원본을 보존했고 위 실제 브라우저 증거를 별도로 기록했다. 디자인 최종 승인과 다른 브라우저/OS는 NOT VERIFIED.
## 파일과 증거
수정 구현: `packages/org-chart/src/core/employee-info-dialog.ts`, `packages/org-chart/src/styles/employee-info-dialog.css`.
추가 검증/보고: `examples/org-chart/verify-p9-5-core-dialog-close.mjs`, 본 문서. 생성물과 로그는 `test-results/org-chart-p9-5-core-dialog-close/`에 보관한다.
- 측정: `result.json`, `states.json`, `baseline-popup.json`, `reference.json`.
- 캡처: `react-1440-popup.png`, `react-390-popup.png`, `vanilla-1440-popup.png`, `vanilla-390-popup.png`, `hm-reference.png`.
- 검토 URL: http://127.0.0.1:6064/?path=/story/orgchart--full-composition
- 기존 6064 서버 종료를 확인해 동일 URL의 loopback static Storybook/Core 서버를 복구했다. 사용자 기존 탭은 오류 화면의 data URL 정책으로 제어되지 않아 새 검토 탭에 실제 팝업을 열어 확인했다.
## 보존 및 Git
- 시작 시점 authored 파일 SHA256을 캡처했다. 기존 P9.5 레이아웃/화살촉, Expanded, HM UI, 기존 미커밋 파일은 이 작업에서 수정하지 않았다.
- 작업 중 `docs/org-chart/ai-page-generation-rules.md`의 외부 변경을 감지했다. 이 작업에서 편집/복구/덮어쓰기하지 않았다.
- `feature/orgchart-package`, HEAD `7614507583927a25a270963a74ff044be0557b9f` 유지, Staged 파일 0. Stage/Commit/Push/Merge/PR/Reset/Rebase 미진행.
Started At: 2026-10-13 13:51:35 KST
Completed At: 2026-10-13 14:04:24 KST
Actual Duration: 12분 49초
Estimated Duration: 15분
Variance: -131초
사용자 시각 검토 대기.
docs/org-chart/implementation-report-p9-5-full-composition.md
+118
View File
@@ -0,0 +1,118 @@
# HMDesign OrgChart P9.5 — Full Composition 적응형 배치
RESULT: **PASS — 요청한 Full Composition의 배치·디자인 및 직접 영향 범위.** 기존 Expanded P9.5 보고서와 P7~P9.4 기록을 보존했다. 사용자 디자인 승인은 별도 검토를 기다린다.
## 상단·중앙·하단 분리
기존 DOM에 내부 `data-composition-region`을 부여했으며 전체 DOM을 다시 만들지 않았다. 상단은 제목·기준일과 우측 인원 표, 중앙은 대표자·허브·6개 조직/직원·연결선·화살표·장식, 하단은 파견/휴직과 관계사 바로 구분한다. 상단은 콘텐츠 컨테이너의 앵커이며 sticky/스크롤 추적이 아니다. 하단 두 모듈은 각각 bottom 앵커를 유지한다.
원본1920×914.5는 디자인 기준으로 보존한다. 하나의 배율 `min(1, 실제 가용 폭/1920, 실제 가용 높이/914.5)`로 표시한다. 세로 여유가 있으면 Stage 사용 높이를 `가용 높이/배율`로 확장하되 카드·장식·Typography를 확대하지 않는다. 실제 상단 Rect의 가장 아래 지점과 하단 Rect의 가장 위 지점 사이에서 중앙 콘텐츠 합집합 Rect의 중심을 계산한다. 기준보다 새로 확보된 높이 범위 안에서만 수직 오프셋을 적용한다.
대표자·허브·조직 viewport·원본914.5px SVG overlay·배경 장식은 같은 중앙 오프셋으로 이동한다. meeting/grid의 bottom 좌표는 원본 기준 top 좌표로 환산했고 sky 높이도914.5로 유지한다. management 곡선은 Stage 대신 overlay 원점에서 측정하여 이동량이 두 번 적용되지 않도록 했다. 장식과 다른 요소의 전후 좌표 차이는 브라우저 서브픽셀 정밀도 안이며 grid의 bottom→top 변환에서 약0.016디자인px 반올림 차이가 있다.
높이가 부족하면 Stage914.5와 중앙 오프셋0을 유지하여 전체 비례 축소를 재사용한다. 기준 배치가 원래 사용하는 일부 세로 범위는 가로 위치가 다른 상단/하단 모듈과 공유한다. BoundingRect 합집합만으로 충돌을 판단하지 않고 실제 카드·타이틀·고정 모듈의 x/y 교차를 검사했으며 실제 겹침은0건이다. 모든 실제 콘텐츠가 가용 영역 안에 들어옴을 검사하여 기존 `overflow:hidden`만으로 잘림을 감추지 않았다.
P9.2 Content Wrapper 기준 가로 중앙 계산식과 전체 Stage 이동 단위는 그대로다. 1440×900의 새 소수점 배율에서 기존4자리 반올림이 `translate:1.6401↔1.6402px`로 왕복하는 현상이 확인되어0.001px 미만이면 보정 쓰기를 멈추는 조건만 추가했다. 계산 기준·공식·Stage X좌표계는 변경하지 않았다. 20프레임 style mutation은20→0건으로 안정화됐다.
부모 컨테이너의 높이만 바뀌는 경우도 같은 ResizeObserver 경로를 사용한다. 배율이 동일해도 중앙 위치가 바뀌면 기존 `hm-orgchart-scale` 내부 위치 변경 알림을 재사용하여 이름 툴팁을 이전 좌표에 남기지 않는다. 새 팝업·새 이벤트 API·새 라이브러리는 추가하지 않았다.
## 협업 화살표·하단 간격
수정 전 실제 화면에서 **5개 모두 정상 표시**되어 복원할 누락 자산은 없었다. `team-arrow-blue-short.png`2회와 blue-purple/purple-teal/teal-green각1회, 총4개 원본PNG·5개 SVG image를 보존했다. 중복 경로나 화살표를 추가하지 않았다. 로딩·SHA-256·카드/타이틀 비충돌·실제 캡처에서 화살표를 숨기기 전후의 픽셀 기여까지 확인했다. 원본 overlay z4와 조직 viewport z7은 유지하며, 수직 transform으로 생기는 axis stacking context는 z12를 명시하여 허브를 곡선 위에 유지한다.
파견·휴직 CSS 하단 앵커70→82디자인px로 **12px 위로** 옮겼다. 실제 기준 Rect는 `(x32,y748.5,w240,h84) → (x32,y736.5,w240,h84)`다. 관계사 바는 `(x57,y835.109375,w1806,h55.390625)`와 로고·문자·높이를 유지한다. 그룹/바 간격은 **2.609375→14.609375디자인px**다. CSS Grid의12px Stage padding 때문에 실제 관계사 바의 하단 inset은24px이며 이 값도 유지한다.
실제1920×914.5 콘텐츠 벤치마크에서 배율1, Stage 높이914.5, 중앙 오프셋0, 카드43개, 가로 오차0이며 위 간격은 화면상 **14.609375px**다. 축소 화면의 가시 간격은 같은 배율로 축소되며 모든 화면에서12~16화면px라고 주장하지 않는다.
## 화면별 실제 측정
모든 수치는 CSS px다. 중앙 이동은 기존 기준 좌표에서의 화면상 추가 이동이며, 가로 오차는 Viewport가 아닌 실제 `.hm-orgchart-story-full`의 Border/Padding을 제외한 content-box 중심과 전체 Stage 중심의 차이다.
- **1920×1080**: 배율62.50%, 중앙+114.043px, 가로 오차0. 상단Y297.50~420.752, 중앙Y433.604~915.898, 파견/휴직Y928.75~981.25, 관계사Y990.381~1025.00, 하단 모듈 간격9.131px.
- **1920×1440**: 배율62.50%, 중앙+294.043px, 가로 오차0. 상단Y297.50~420.752, 중앙Y613.604~1095.898, 파견/휴직Y1288.75~1341.25, 관계사Y1350.381~1385.00, 간격9.131px.
- **1440×900**: 배율62.329%, 중앙 이동0, 가로 오차+0.000061. 상단Y297.479~420.395, 중앙Y319.480~800.456, 파견/휴직Y749.054~801.411, 관계사Y810.517~845.041, 간격9.106px. 부족한 높이에서 기존 상대 배치를 유지하므로 중앙 합집합의 가용 영역 세로 중심 오차−24.756px를 숨기지 않는다.
- **1280×1024**: 배율62.656%, 중앙+86.994px, 가로 오차−0.000050. 상단Y295.909~419.469, 중앙Y405.019~888.520, 파견/휴직Y874.070~926.701, 관계사Y935.855~970.561, 간격9.154px. 일부 세로 범위 공유가 있지만 실제 직원/고정 하단 요소 교차0건이다.
- **390×844**: 배율18.646%, 중앙+183.147px, 가로 오차0. 상단Y308.237~345.008, 중앙Y497.966~641.851, 파견/휴직Y794.809~810.472, 관계사Y813.196~823.524, 간격2.724px.
1920×1080→1920×1440 동일 mount 높이 변경에서 상단은 그대로, 하단은360px 아래로, 중앙은180px 아래로 이동한다. 추가 세로 여백을 중앙 위아래로 분배하며 실제 가용 세로 중앙 오차는 충분한 화면에서 약0.000046px 이하이다. 1920/1440/390의 기존1px 가로 허용 범위를 충분히 만족한다.
문서 가로·세로 스크롤0, 실제 사용 가능한 내부 스크롤바0, 카드/타이틀/통계/화살표/하단 바 잘림0이다. transform 전의 자연 layout scrollWidth/scrollHeight가 더 큰 기존 raw 값은 [원본 JSON](../../test-results/org-chart-p9-5-full/after.json)에 함께 기록했다. raw overflow와 실제 표시 영역 포함 여부를 혼동하지 않는다.
- [수정 전 원본 Rect](../../test-results/org-chart-p9-5-full/before.json)
- [수정 후 원본 Rect](../../test-results/org-chart-p9-5-full/after.json)
- [요약 Rect·간격·배율](../../test-results/org-chart-p9-5-full/layout-summary.json)
- [동일 mount·정렬 안정성·실제 기준 크기](../../test-results/org-chart-p9-5-full/stability-recheck.json)
## 직접 영향 검증과 보호
- 5개 화면의 배치·상대 좌표·크기/타이포·집계/로고·5화살표·장식·잘림·충돌·스크롤: **69/69 PASS**.
- 실제 화살표 픽셀·PNG SHA, 4개 동일 mount Resize의 상대 좌표/5경로, management 끝점, native 직원 팝업·ESC·초점 복귀, 공개 그룹 링크: **기존 성공43개 보존**. 최초 정렬 안정성1FAIL은 원본에 보존하고 [영향 구간9/9 PASS](../../test-results/org-chart-p9-5-full/stability-recheck.json)로 연결했다. 동일 성공 검사와 공통 오류 검사를 하나의 총 테스트 수로 중복 합산하지 않는다.
- 현재 Full Story는 organizationLinks를 지정하지 않아 그룹 anchor0개다. 이를 원래와 동일하게 보존했으며 공개 Core의 `organizationLinks`는 임시 readOnly mount에서 실제 href·keyboard focus·Enter activation까지 확인했다. 외부 페이지 이동은 차단했으므로 목적지 서버/네트워크 동작은 NOT VERIFIED다.
- [부모 높이만 변경](../../test-results/org-chart-p9-5-full/anchor-notification.json): **5/5 PASS**, 오류0. viewport1920×1080을 유지하고 parent914.5→1014.5px로 변경했을 때 배율1, 중앙 오프셋0→89.7188px, 대표자·허브·조직의 이동89.718811px가 일치하며 기존 위치 변경 알림은1회 발생했다. 실제 paint 포함·문서/내부 스크롤 없음도 확인했다. 성공한69/43/9개 구간은 재실행하지 않았다.
- Core typecheck/build, 수정된 Story helper 단독 Typecheck, 변경 반영 최종 Storybook build PASS. Storybook의 기존 큰 chunk/plugin timing 안내는 유지한다.
- `git diff --check` PASS. 기존 CRLF 안내만 남는다. 독립 읽기 전용 구조/코드 검토에서 현재 Full 기준의 새 구체적 결함 없음.
- Fixed SVG·Gradient·Noto Sans KR·사진·뱃지·Typography·원본 직원JSON·통계·로고·팝업/링크 구현은 수정하지 않았다. Expanded의 이전 P9.5 중앙 정렬 코드/Story/CSS·Overview·Department Colors·HM Component/Pattern/Theme·의존성도 시작 SHA-256을 유지한다. 기존 P7~P9.4 전체 suite는 반복하지 않았다.
[최초 interaction 원본](../../test-results/org-chart-p9-5-full/interactions.json) 및 [수정 전 정렬 루프](../../test-results/org-chart-p9-5-full/stability-before-fix.json)를 보존한다. 첫 Core Typecheck의 DOM 타입 선택 문제는 HTMLElement generic으로 수정했고 원본 로그를 보존했다. helper Typecheck의 최초 CLI는 TypeScript7의 `--ignoreConfig` 요구로 중단됐으며 해당 옵션으로 파일 범위를 검사했다. 이를 앱 오류로 보고하지 않는다.
## Guard·NOT VERIFIED
Core/CSS [초기 PARTIAL Guard](../../test-results/org-chart-p9-5-full/guard.json)는 FAIL0 / NOT VERIFIED3(SCOPE-001), 원본 status/staticStatus/runtimeStatus NOT VERIFIED다. 마지막 [위치 알림 수정1파일](../../test-results/org-chart-p9-5-full/guard-position-notify.json)도 FAIL0 / NOT VERIFIED1(SCOPE-001)이며 같은 package graph 한계다. 실제 build/browser 근거를 별도로 제공한다.
[가로 helper PARTIAL Guard](../../test-results/org-chart-p9-5-full/guard-alignment.json)는 issue0, status/staticStatus NOT APPLICABLE, runtime NOT VERIFIED다. 처음 잘못 지정한 file target의 Storybook graph 범위 진단은 별도 원본을 보존하고 프로젝트 root의 수정 파일 범위로 바로잡았다. 세 결과의 styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(검사 항목 없음) / FINAL NOT VERIFIED이며 결합 styleVerification과 전체 CSS 디자인 승인은 NOT VERIFIED다. 기존 P9.4 Guard FAIL 기록을 덮어쓰지 않았다.
최종 사용자 디자인 승인, Chrome 외 브라우저·실기기·스크린리더·모든 숨김 모듈/동적 데이터 조합·외부 링크 목적지·SSR/배포는 NOT VERIFIED다. 이번 결과는 현재 Workdesk Full Composition과 직접 영향 경로다.
## 수정 파일과 Git
기존 authored 파일5개:
1. `packages/org-chart/src/core/org-chart-content.ts` — 논리 영역·가용 높이/중앙 Rect 배치·기존 위치 알림.
2. `packages/org-chart/src/core/workdesk-artwork.ts` — overlay 기준 곡선 원점.
3. `packages/org-chart/src/styles/org-chart-readonly.css` — 하단 간격·중앙 레이어/장식 앵커.
4. `src/org-chart/center-composition-preview.ts` — 계산식 유지,0.001px 미만 왕복 보정 억제.
5. `docs/org-chart/ui-composition.md` — 현재 Full 계약과 이전 기록의 구분.
새 authored 파일은 `verify-p9-5-full.mjs`, `verify-p9-5-full-interactions.mjs`, 이 보고서다. `test-results/org-chart-p9-5-full`, Core dist, storybook-static과 로그는 검증 생성물이다.
[시작 파일 SHA-256 감사](../../test-results/org-chart-p9-5-full/source-preservation.json):832개 중 위5개 변경,827개 동일,누락0. 브랜치`feature/orgchart-package`, 시작/완료 HEAD`7614507583927a25a270963a74ff044be0557b9f`, origin`https://gitea.hmac.kr/b25027/HMDesign.git`, staged0. 기준 원격 SHA는 사용자 제공값과 로컬 HEAD가 일치하며 현재 live remote SHA는 조회하지 않았다.
**Stage·Commit·Push·Merge·main Checkout·PR·Reset·Rebase·Force Push·Clean·Fetch·Pull 미진행.** Expanded 등 기존 미커밋 작업을 보존했다. 요청 범위 완료 후 사용자 검토를 기다린다.
## 실제 Storybook과 캡처
[Full Composition](http://127.0.0.1:6064/?path=/story/orgchart--full-composition)
- [1920×1080](../../test-results/org-chart-p9-5-full/after-1920x1080.png)
- [1920×1440](../../test-results/org-chart-p9-5-full/after-1920x1440.png)
- [1440×900](../../test-results/org-chart-p9-5-full/after-1440x900.png)
- [1280×1024](../../test-results/org-chart-p9-5-full/after-1280x1024.png)
- [390×844](../../test-results/org-chart-p9-5-full/after-390x844.png)
- [화살표 실제 표시](../../test-results/org-chart-p9-5-full/interaction-artwork-1920x1080.png)
- [직원 팝업](../../test-results/org-chart-p9-5-full/interaction-employee-popup.png)
## 시간
- Started At:2026-10-13 13:05:08 KST
- Estimated Duration:약35분 (탐색10분·보완15분·직접 검증10분)
- Completed At:2026-10-13 13:33:06 KST
- Actual Duration:27분 58초
- Variance:예상보다 7분 2초 짧음
## 대표자 화살촉 후속 정정
사용자 첨부에서 표시한 대표자 카드 아래의 상향 화살촉은 조직 간 PNG 화살표5개와 별개였다. 앞선5개 화살표 검증에는 이 누락 요소가 포함되지 않았다. Workdesk 원본 `org-arrow-jang-head`의 solid Chevron path와 색을 복원하고, Core의 Stage padding을 포함한 실제 카드 하단에 원본8.7디자인px 간격으로 배치했다. 점선 상단만 Chevron 아래로 이어지도록 보완했고 허브 방향 끝점과5개 기존 연결선·팀 화살표는 보존한다.
[후속 측정](../../test-results/org-chart-p9-5-arrowhead/after.json):1920×1080·1920×1440·390×844에서25/25 PASS, 화살촉0→1개, 실제 픽셀 표시·축 정렬·카드 비충돌·세로 이동·축소 확인. 이전 수치와 PASS는 당시 검사 범위의 기록이며 이 후속 보완과 구분한다. [복원 후 확대 캡처](../../test-results/org-chart-p9-5-arrowhead/after-1920x1080-detail.png).
최초3개 원본 모양 비교는 테스트 정규식이 `d` 대신 `kind`를 추출하여 FAIL이었다. [원본](../../test-results/org-chart-p9-5-arrowhead/after-initial.json)을 보존하고 실제 캡처된 DOM의3개 비교만 다시 평가했다. 성공한22개 브라우저 검사를 반복하지 않았다. Core Typecheck/Build·최종 Storybook Build·diff check PASS, console/pageerror0. [화살촉 변경1파일 Guard](../../test-results/org-chart-p9-5-arrowhead/guard.json)는 FAIL0/SCOPE-001 NOT VERIFIED1, 원본 status/staticStatus/runtimeStatus 및 전체 CSS 승인은 NOT VERIFIED다.
시작835개 파일 중 artwork와 이 후속 보고서2개만 변경,833개 동일,누락0. Expanded·카드·Theme·팀 PNG4종·이전 중앙/하단 배치 코드와 미커밋 작업을 보존했다. 열려 있던 Full Composition 미리보기 탭을 새 빌드로 갱신하고 실제 화살촉 DOM 표시를 확인했다. Stage·Commit·Push·Merge 미진행.
- Started At:2026-10-13 13:37:01 KST
- Completed At:2026-10-13 13:46:55 KST
- Actual Duration:9분 54초
- Estimated Duration:약10분
- Variance:예상보다 0분 6초 짧음
사용자 후속 요청에 따라 화살촉 위쪽 끝을 실제 대표자 카드 하단에 직접 붙였다. 이전8.7디자인px 간격을0으로 바꾸고 연결선 시작점도 함께 조정했다. [붙임 검증](../../test-results/org-chart-p9-5-arrowhead-touch/after.json):3개 화면25/25 PASS, 측정 간격 약0px(최대0.0001디자인px), 기존5개 협업 화살표·카드·허브·세로 배치 보존. [최종 확대 캡처](../../test-results/org-chart-p9-5-arrowhead-touch/after-1920x1080-detail.png). 기존 간격 기록은 당시 상태로 보존한다.
docs/org-chart/implementation-report-p9-5.md
+84
View File
@@ -0,0 +1,84 @@
# HMDesign OrgChart P9.5 — Expanded 중앙 정렬
Expanded의 실제 표시 영역에 중앙 오차가 있어 공유 Core의 배치만 보완했다. 기존 P9.4 PASS suite는 재실행하지 않았다.
## 실제 측정 기준과 수정 전후
실제 React Storybook의 Shadow DOM에서 다음 경로를 측정했다.
`.hm-orgchart-content → .hm-orgchart-expanded → .hm-orgchart-viewport → .hm-orgchart-forest → .hm-orgchart-tree`
중앙 기준은 외곽 카드 전체가 아닌 Pan/Zoom 콘텐츠 캔버스 `.hm-orgchart-viewport`의 client 영역이다. `getBoundingClientRect().left + clientLeft + clientWidth / 2`를 사용하여 Border를 제외한다. 전체 표시 경계는 모든 회사의 조직 article(타이틀·직원 카드)과 조직 연결선 path의 합집합이다. Forest와 개별 Tree Wrapper의 BoundingRect도 별도로 기록했다. 연결선은 Forest 전체와 같은 transform을 사용한다.
1440×1100px 브라우저에서 외곽 Expanded Wrapper는 `left=120, width=1200`, Viewport는 `left=137, width=1166`, client 콘텐츠는 `left=138, width=1164`, 가로 중앙은 `720px`였다.
Forest/Tree Wrapper 자체의 수정 전 가로 오차는 약 0px였지만, LR의 뒤쪽 margin과 Hybrid의 앞쪽 padding 때문에 실제 카드·타이틀의 중앙은 달랐다. 단일 회사·20명 기준:
- TB 가로: `0 → 0px`.
- LR 가로: `-14.697845 → 0px` (음수는 왼쪽).
- Hybrid 가로: `+3.631989 → 0px`.
- TB Fit 세로: `-10.751465 → 0px`.
1/2/7개 회사 × 회사당 20/100/300명 × TB/LR/Hybrid의 27개 조합에서 수정 전 최대 절대 가로 오차는 `14.697845px`, 수정 후 자동 정렬·Fit 최대 절대 가로 오차는 `0.00006103515625px`다. Fit 최대 세로 오차는 `10.751465 → 0px`다. 수치는 CSS px이며 브라우저 부동소수점 측정 정밀도를 포함한다. 자동 배치는 가로 중앙과 상단 여백만 맞추므로 세로 중앙 오차를 완료 조건으로 주장하지 않는다.
기존 자동 Fit과 수정 후 자동 중앙 배치는 배율 정책이 다르므로 각각 배율을 함께 기록했다. 단일 회사·20명은 TB `44.34% → 100%`, LR `61.24% → 100%`, Hybrid `30.27% → 100%`; 최초 7회사·20명은 `22.07% → 100%`다. 실제 카드/엔진 크기는 변경하지 않았다. 명시적 Fit에서는 TB 약45.78%, LR 약62.59%, Hybrid 약30.27%로 전체 표시 영역을 담는다.
LR/Hybrid에서는 여백을 포함한 Wrapper 박스 중심과 표시 영역 중심이 의도적으로 다르다. 예를 들어 LR 100%에서 Forest/Tree 박스는 콘텐츠 중앙보다24px 오른쪽에 있으며, 실제 표시 영역 중심은 중앙에 일치한다. Wrapper와 표시 영역을 혼동하여 박스 중앙만 PASS로 판단하지 않는다.
- [수정 전 1/2회사 측정](../../test-results/org-chart-p9-5/before.json)
- [수정 전 7회사 측정](../../test-results/org-chart-p9-5/before-seven.json)
- [수정 후 전체 측정](../../test-results/org-chart-p9-5/after.json)
- [동일 조건 비교](../../test-results/org-chart-p9-5/centering-comparison.json)
## 최소 변경
- `expanded-viewport.ts`: 렌더링된 콘텐츠의 경계를 Forest 로컬 좌표로 측정한다. 자동 배치는 현재 배율을 유지하고, 명시적 Fit만 전체 표시 영역에 맞춰 축소하여 가로·세로 중앙에 배치한다. Center/Fit/수동 이동을 구분하므로 observer가 Fit 직후 상단 배치로 되돌리지 않는다.
- `core/index.ts`: 재생성 전에 수동 이동 여부를 보관하여 새 Expanded controller에 전달한다. Pan·Zoom·100% 복원·화면 밖 focus 노출 이후에는 회사/데이터/레이아웃/Resize에 의해 배율과 이동 위치를 임의로 바꾸지 않는다. 명시적 Fit은 수동 보존을 해제한다.
- `expanded-usage.md`: 자동 배치와 명시적 Fit, 수동 위치 보존 정책을 현재 동작에 맞췄다.
공개 API/React props/CSS/카드/엔진/연결선 renderer/Drag & Drop hit testing은 변경하지 않았다. Fixed는 기존 `createOrgChartContent` 경로를 유지하고 Expanded controller를 사용하지 않는다.
## 이번 레이아웃 검증
- 실제 Chromium `153.0.8010.12`, React Storybook: 중앙·Fit·탐색 **124/124 PASS**, console/pageerror0.
- 자동 중앙27개: 가로 중앙 일치, 배율100% 유지.
- Fit27개: 가로·세로 중앙 일치, 전체 표시 경계가 콘텐츠 안의16px 여백에 들어옴. 최대7개×300명=2,100명 Forest 포함.
- 최초 렌더링과 회사 선택·20/100/300명 적용·TB/LR/Hybrid 변경에 새 경계 반영.
- 수동 Pan 이후 Resize·회사 선택·직원 수·TB→LR에서 scale/x/y 동일. 이후 명시적 Fit으로 중앙 복귀.
- 390/768/1280/1440px: 단일 회사의 자동 가로 중앙 및 Fit 가로·세로 중앙.
- [변환 좌표 및 실제 포인터](../../test-results/org-chart-p9-5/geometry.json): **62/62 PASS**, console/pageerror0. 카드·연결선의 Forest 로컬 좌표는 Pan/Zoom/Fit 전후 최대 `0.000370833px` 차이로 동일하다. 각 상태·방향에서 직원 연결선20개, LR/Hybrid에서 조직 SVG route10개를 확인했다. 끝점 오차는 최대 `0.500552px`이며 정수 offset 치수와 소수점 렌더링 차이를 고려한0.75로컬px 허용치 안이다. TB의 기존 조직 pseudo-element 연결선 renderer/소스는 보존하고 공통 transform을 확인했으며 pseudo-route 내부 전체 재검증은 반복하지 않았다.
- 중앙 배치→Fit→수동 Pan 상태에서 TB `virtual-022 → hanmac-cell-0`, LR `virtual-032 → hanmac-office-1`, Hybrid `virtual-027 → hanmac-team-sibling` 실제 pointer 이동 성공. 화면상의 source/target hit·allowed highlight·release 후 소속이 의도한 조직과 일치한다. [Hybrid 이동 캡처](../../test-results/org-chart-p9-5/geometry-pointer-hybrid.png).
- Core typecheck/build와 수정 코드가 포함된 Storybook build PASS. 빌드는 실행 결과를 확인했으며 기존 P9.4 기능 suite는 반복하지 않았다.
- `git diff --check` PASS. 기존 CRLF 안내 경고만 존재.
- 독립 읽기 전용 검토에서 새 구체적 결함 없음.
수정 전 첫 측정의7회사 구간은 테스트의 회사명 매칭 오류로 중단됐다. 정상 완료한1/2회사 수치37개를 보존하고, 전체 선택을 사용하는7회사 구간19개만 보완 실행했다. 최초 측정1개가 중복이며 비교 JSON은 이름으로 합쳤다. localhost/브라우저 실행 제한은 도구 환경에서 해결했으며 앱 변경으로 해결했다고 주장하지 않는다.
좌표 probe의 [원본33PASS/18FAIL](../../test-results/org-chart-p9-5/geometry-initial.json)도 보존했다. 끝점12개 판단은 이미 캡처된 실제0.5px 차이를0.75로컬px 기준으로 해석했으며 브라우저를 다시 실행하지 않았다. 포인터 source/target을 조직도 캔버스와 브라우저 viewport 양쪽 안으로 제한하고 focus 후 client 좌표를 다시 측정하여 실패한 pointer 구간만 재실행했다. 최종62개는 보존/재해석한41개와 새 pointer20개 및 최종 오류 검사1개이며 원본 수와 중복 합산하지 않았다. 앱 소스를 변경하여 테스트 실패를 감추지 않았다.
## Guard 및 미검증
[변경 Core 2파일 PARTIAL Guard](../../test-results/org-chart-p9-5/guard.json)는 FAIL0 / NOT VERIFIED2다. 원본 status/staticStatus/runtimeStatus는 **NOT VERIFIED**이며 패키지 구현2파일이 proven Storybook graph 밖이라는 SCOPE-001이다. 실제 패키지 build와 브라우저 증거를 별도로 기록했다. styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(검사 항목 없음) / FINAL NOT VERIFIED다. 결합 styleVerification은 생성하지 않았으며 전체 CSS 디자인 승인을 주장하지 않는다. 기존 P9.4 Guard FAIL과 미검증 기록은 보존한다.
실제 터치 기기·스크린리더·Chrome 외 브라우저·모든 Depth/개별 Hybrid override 조합·2,100명 성능·사용자 디자인 승인·서버/SSR/배포는 NOT VERIFIED다. 이번 검증은 중앙 배치와 그 변환 좌표의 영향 범위에 한정한다.
## 기존 작업 보존과 Git
[시작 파일 감사](../../test-results/org-chart-p9-5/source-preservation.json):829개 중 기존3개만 변경,826개 SHA-256 동일,누락0. Fixed Full Composition·카드·연결선·Drag & Drop·React·P9.4 Story/CSS/데이터·Theme/Component/Pattern의 시작 파일을 보존했다. Fixed의 기존 브라우저 PASS는 재실행하지 않고 소스 보존과 호출 경로 분리로 영향 범위를 확인했다.
- 폴더:`D:\디자인시스템\HMDesign-OrgChart`
- 브랜치:`feature/orgchart-package`
- 시작/완료 HEAD:`7614507583927a25a270963a74ff044be0557b9f`
- staged0. Stage·Commit·Push·Merge·Checkout·Reset·Clean·Fetch·Pull·Rebase·PR 미진행. 현재 원격 SHA는 NOT VERIFIED.
새 authored 파일은 `examples/org-chart/verify-p9-5.mjs`, `examples/org-chart/verify-p9-5-geometry.mjs`, 이 보고서3개다. `test-results`, `packages/org-chart/dist`, `storybook-static`는 검증 생성물이다. 기존 미커밋 변경을 커밋 대상으로 묶지 않았다.
[실제 Expanded Storybook](http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart), [최초100% 캡처](../../test-results/org-chart-p9-5/after-initial.png), [단일 회사 Fit 캡처](../../test-results/org-chart-p9-5/after-single-fit.png).
## 시간
- Started At:2026-10-13 12:45:15 KST
- Estimated Duration:약25분 (탐색7분·보완8분·레이아웃 검증10분)
- Completed At:2026-10-13 13:04:27 KST
- Actual Duration:19분 12초
- Variance:예상보다 5분 48초 짧음
docs/org-chart/implementation-report-p9.md
+89
View File
@@ -0,0 +1,89 @@
# HMDesign OrgChart P9 — Storybook 디자인 보완 보고
RESULT: **PASS — P9 변경 범위.**
Overview와 Fixed의 표·관계사 내부 디자인을 공유하고 Department Colors 카드 미리보기 행을 정렬했다.
기존 Guard FAIL·미검증과 접근성 잔여 이슈를 별도로 보존한다. P10은 시작하지 않았다.
## 작업 기준과 시간
- 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작·완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`
- 범위: `STORYBOOK_ONLY`, 실제 React Storybook, 기존 P7·P8 미커밋 변경 보존.
- Started At: `2026-10-13 10:13:21 KST`
- Completed At: `2026-10-13 10:28:23 KST`
- Actual Duration: `15분 2초`
- Estimated Duration: `35–50분` — 분석 10분 / 최소 수정 15–20분 / 통합 검증·보고 10–20분
- Variance: `예상보다 19분 58초–34분 58초 짧음`
## 요청 항목별 결과
| 항목 | 결과와 근거 |
|---|---|
| Overview 제목 3개 | **관계사·회사 로고 / 조직·직위별 인원 현황 / 관계사별 인원 현황**. 기존 외부 제목 두 곳을 요청한 정확한 명칭으로 보완. |
| 조직·직위별 인원 표 | **PASS**. Fixed와 동일한 제목·7개 조직 행·5개 직위 열·소계·합계 41명. 각 행·직위 합계 검산, 실제 DOM 및 computed Typography·배경·Border·Height·Padding·정렬·줄바꿈·Radius·Shadow·폰트 동일. |
| Fixed Summary 재사용 | 기존 `createOrganizationTotals`와 `createAffiliationBar`를 Story 전용 선택형 `presentation="workdesk"`로 호출. 동일 `org-chart-p3-summary.css` selector를 공유. 표 디자인 중복 CSS 및 Fixed 절대 좌표 복사 없음. 기본 standalone Presenter와 공개 API는 유지. |
| 관계사별 인원 현황 | **PASS**. 동일 로고·회사명·인원수·총계 41명·내부 Typography·Border·배경·Radius·Shadow 재사용. Overview 제목 유지. 페이지 폭에 따른 wrapping과 높이만 독립 조정하며 모바일 줄 구분선은 숨김. |
| 로고 영역 | **PASS**. 기존 승인 로고 7개 모두 로드, 원본 자산·색·비율 및 `object-fit:contain` 보존. 로고 자체에 새 배경·Border·Shadow 추가 없음. 기존 외부 견본 컨테이너 유지. |
| Department Colors | **PASS**. 기존 Fixed 조직색 6개·HEX·SVG 카드·폰트 보존. CSS subgrid로 같은 행의 제목·설명·컬러 legend 블록·카드·대비 안내 시작점을 정렬. 1920/1440에서 같은 행 카드 preview Y가 정확히 일치. 390에서는 단일 열·잘림 없음. 카드 종류별 146×68/108×52 및 대표자 146×74 유지. |
| Full Composition | **PASS**. 수정 전후 원본 1920×915, Stage DOM SHA-256 및 검사한 모든 표·관계사·카드 computed 값 동일. 확정 배경·카드·허브·화살표·장식·파견/휴직·통계·하단 바 보존. 3개 화면에서 전체 bounds·비례 축소·휠 후 내부 offset 0, 문서 가로/세로 스크롤 없음. Fixed 레이아웃/JS 수정 없음. |
| Expanded OrgChart | **PASS**. TB/LR/Hybrid를 1920×1080·1440×900·390×844에서 확인. 기존 20명 fixture·Fit·연결선·방향별 Border·7회사 색·흰 제목 유지. 대표 그룹 Hover·Focus·Collapsed·Expanded 흰색 확인. 카드 원래 외형과 Placeholder 유지. |
| HMDesign UI Dialog | **PASS**. 실제 공개 Export `Dialog`와 `DialogContent` 등 사용. 직원 카드 클릭→단일 HM Portal·identity·focus, Core native popup 중복 없음, Tab 유지·ESC·닫기 버튼·카드 focus 복귀, 390px 표시 확인. React/Fixed/Vanilla 연결 소스 변경 없음. Fixed/Vanilla native 경로는 기존 P7·P8 PASS와 동일 소스 근거 재사용. |
| 공통 Storybook 스타일 | **PASS**. 기존 `StoryPage / StoryPageHeader / StorySection` 및 공통 CSS 유지. 4페이지 실제 제목·설명·섹션 Typography/Border 동일. 페이지 envelope/gutter 설정 소스 보존. Core Shadow DOM 독립 Scope 유지. 코드 예제 형식 변경 없음. |
| 메뉴·ID | **PASS**. 공개 4페이지·기존 ID/URL 유지. 독립 OrgChart root·Patterns 다음 순서·내부 숨김 정책은 변경하지 않은 P8 설정/CSF 및 기존 manager PASS 재사용. 내부 Story 삭제 없음. |
| 변경 범위 검사 | 본 브라우저 **85/85 PASS**, 누락된 Expanded 1920px만 추가 **10/10 PASS**. 서로 다른 실행의 중복 오류 체크를 합산한 전체 고유 검사 수는 주장하지 않음. Core/Story 타입 검사·Core/Storybook production build·diff 검사 PASS. |
| 신규 콘솔 오류 | 두 실행 모두 **0**, pageerror/console error 없음. |
| 기존 검증 재사용 | P7 데이터 정책·2,100명·Zoom/Pan·독립 옵션·회사색/상태, P8 메뉴 위치/공통 frame/최소 기능 PASS를 관련 소스 동일 근거와 함께 재사용. 전체 과거 suite·2,100명 성능 검사 재실행 없음. |
| Git 보호 | **Stage·Commit·Push·Merge·main checkout·Pull·Reset·Rebase·Force Push·PR 모두 미진행.** staged 파일 0, branch/HEAD 동일. 기존 809개 authored 파일 중 P9 대상 4개만 변경, 805개 hash 동일. 신규 authored 파일은 runner와 이 보고서 2개. |
## 수정 범위와 검증
| P9 파일 | 변경 |
|---|---|
| `src/org-chart/org-chart-page-previews.tsx` | Overview 정확한 제목, Fixed Summary Presenter 선택, 설명 정합화 |
| `src/org-chart/core-component-preview.tsx` | Story-only 선택형 Workdesk Presenter, 기본 독립 Summary 유지 |
| `packages/org-chart/src/styles/org-chart-p3-summary.css` | 기존 Fixed 스타일 selector 공유, Overview 흐름·wrapping만 보완 |
| `packages/org-chart/src/styles/org-chart-content.css` | Department Colors 5개 콘텐츠 블록 행 정렬 |
| `examples/org-chart/verify-p9.mjs` | P9 표·집계·스타일 동등성/반응형/보존/Dialog/메뉴 검증 |
| `docs/org-chart/implementation-report-p9.md` | 이 보고서 |
집계 selector·fixture·회사색·승인 이미지·독립 Summary API·Fixed 좌표/레이아웃·Auto 알고리즘·React Dialog·공통 Theme·StoryPage·메뉴 설정은 변경하지 않았다.
P8 helper의 다른 페이지 구현은 유지하고 Overview 부분만 수정했다.
`packages/*/dist` 및 `test-results/org-chart-p9`는 기존 ignore 정책의 생성 산출물이며 Stage하지 않았다.
| 실행 | 결과 |
|---|---|
| `npm.cmd run typecheck:org-chart` | PASS, JS/API 변경 없이 공유 Core CSS의 패키지 계약 확인 |
| `npm.cmd run build:org-chart` | PASS, 최종 CSS specificity 보완 반영 |
| `node node_modules/typescript/bin/tsc -p test-results/org-chart-p9/story-tsconfig.json` | PASS, 수정 Story/helper 및 전체 관련 CSF 포함 |
| Storybook 최종 production build | PASS, [최종 log](../../test-results/org-chart-p9/build-final.log). 기존 500kB chunk-size 경고와 bundler plugin timing 진단, build 오류 없음. |
| P9 실제 브라우저 | [85/85 raw](../../test-results/org-chart-p9/browser.json), [1920 Expanded 추가 10/10 raw](../../test-results/org-chart-p9/browser-expanded-1920.json). Chrome 155.0.8059.39, 기존 Playwright 사용, 패키지 설치/업데이트 없음. |
| 독립 Summary 최소 회귀 | 원래 internal Story의 상세 직접/하위 포함/합계 및 Affiliation 카드 layout 유지 확인. |
| 소스 보존·Git | [baseline](../../test-results/org-chart-p9/baseline.json), [최종 audit](../../test-results/org-chart-p9/final-state.json), `git diff --check` PASS. |
동일 조건의 성공 검사를 반복하지 않았다. 최초 캡처에서 Overview bar wrapping의 CSS specificity 충돌을 발견해 preview-only selector를 보완했다. 해당 CSS 보완으로 기존 build가 무효화됐으므로 영향을 받는 Core/Storybook build만 갱신했다. 소스 변경이 없는 타입 검사는 반복하지 않았다.
브라우저 85개 검사 이후 누락된 1920px Expanded 9개 모드/스타일 검사와 오류 검사를 추가했으며 기존 폭 검사는 반복하지 않았다.
## Guard·NOT VERIFIED·P10 잔여
[Guard 원본](../../test-results/org-chart-p9/guard.json)의 **status/staticStatus FAIL / runtimeStatus NOT VERIFIED**를 보존한다.
[범위 분류](../../test-results/org-chart-p9/guard-scope.json)에서 P8 기존 **TOKEN-001 10 FAIL / TOKEN-002 10 NOT VERIFIED**가 모두 동일함을 확인했다. **신규 FAIL 0**이다.
선택한 Core CSS 두 파일에는 **SCOPE-001 2 NOT VERIFIED**가 추가된다. 패키지 stylesheet는 Storybook 정적 import graph 밖이므로 Core build와 실제 브라우저 동등성/보존 결과를 별도 증거로 연결한다. 이를 Guard PASS로 덮어쓰지 않았다.
- Guard styleEvidence: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**.
- 결합 `styleVerification`은 생성하지 않았으며 **NOT VERIFIED**. 기록한 실제 computed PASS는 전체 CSS/임의 외부 props의 인증 또는 사용자 디자인 의도 승인이 아니다.
- 기존 삼안·장헌산업 흰색 제목의 일반 텍스트 대비 미달 진단 유지. 확정 회사색·흰색을 임의 변경하지 않았다.
- Compact **NOT SUPPORTED**, 전체 옵션 조합·스크린리더·다른 브라우저·실기기·SSR/hydration·API/배포·장시간 2,100명은 기존 상태 유지/이번 **NOT VERIFIED**.
- P10에서 사용자 최종 디자인 검토, 접근성 대비 해결 정책과 Guard 패키지 CSS 근거 범위를 우선 확정할 수 있다. 새 기능/Compact/API/Docker/알고리즘 수정은 별도 범위 확정이 필요하다.
- **P10 및 Git 작업은 사용자 검토를 기다린다.**
## 실제 화면
- [Overview 1920px](../../test-results/org-chart-p9/overview-1920.png), [1440px](../../test-results/org-chart-p9/overview-1440.png), [390px](../../test-results/org-chart-p9/overview-390.png)
- [Department Colors 1440px](../../test-results/org-chart-p9/department-colors-1440.png), [390px](../../test-results/org-chart-p9/department-colors-390.png), [모바일 상세](../../test-results/org-chart-p9/department-first-390.png)
- [Full Composition 1920px](../../test-results/org-chart-p9/full-composition-1920.png), [1440px](../../test-results/org-chart-p9/full-composition-1440.png), [390px](../../test-results/org-chart-p9/full-composition-390.png)
- [Expanded TB 1920px](../../test-results/org-chart-p9/expanded-tb-1920.png), [LR 1920px](../../test-results/org-chart-p9/expanded-lr-1920.png), [Hybrid 1920px](../../test-results/org-chart-p9/expanded-hybrid-1920.png), [LR 390px](../../test-results/org-chart-p9/expanded-lr-390.png), [원래 크기 카드](../../test-results/org-chart-p9/expanded-card-100-percent.png)
- [실제 HM Dialog 1440px](../../test-results/org-chart-p9/hm-dialog-1440.png), [390px](../../test-results/org-chart-p9/hm-dialog-390.png)
현재 미리보기: [Overview](http://127.0.0.1:6061/?path=/story/orgchart--logo-personnel-summary), [Department Colors](http://127.0.0.1:6061/?path=/story/orgchart--department-colors), [Full Composition](http://127.0.0.1:6061/?path=/story/orgchart--full-composition), [Expanded OrgChart](http://127.0.0.1:6061/?path=/story/orgchart--expanded-org-chart).
docs/org-chart/ui-composition.md
+10
View File
@@ -1,5 +1,15 @@
# OrgChart UI Composition
## P9.5 Full Composition 적응형 앵커 (2026-10-13)
Workdesk 조회 전용 Full Composition은 원본1920×914.5를 디자인 좌표계로 유지한다. 상단 제목·기준일·인원 표, 중앙 대표자·허브·조직/직원·연결선·화살표·장식, 하단 파견/휴직·관계사 바를 논리적 영역으로 표시한다. 상단 앵커는 콘텐츠 내 배치이며 sticky/스크롤 추적이 아니다.
배율은 `min(1, 실제 콘텐츠 가용 폭 / 1920, 실제 가용 높이 / 914.5)`다. 원본보다 키우지 않는다. 높이가 남으면 Stage의 사용 높이를 `가용 높이 / 배율`로 확보하고, 상단·하단의 실제 Rect 사이에 중앙 내용 Rect의 중심을 맞춘다. 장식은 원본 크기와 좌표를 유지하고 중앙과 같은 수직 오프셋으로 움직인다. 높이가 부족하면914.5 기준의 기존 상대 좌표를 유지하여 전체를 비례 축소한다. 하단 그룹과 가로 중앙 정렬은 중앙 오프셋에 포함하지 않는다.
파견·휴직은 하단 CSS 앵커를70→82디자인px로 바꾸어 기준에서12px 위로 옮겼다. 관계사 바의55.4px 높이·로고·문자와 하단 앵커는 유지하며 실제 그룹/바 간격은 약14.61디자인px다. 협업 화살표5개는 이미 정상 표시 중이어서 원본4개PNG·5개 배치를 보존했다. management 연결선은 이동된 overlay 원점을 기준으로 계산하여 중앙 이동의 이중 적용을 막는다.
P9.2의 실제 Content Wrapper 기준 가로 중앙 계산과 Expanded/Overview/Department 경로는 유지한다. 기존 P2~P9.4 보고서는 당시 기록으로 보존하고, 현재 측정은 [Full Composition P9.5 보고서](implementation-report-p9-5-full-composition.md)에서 구분한다.
## P3.2 후속 — 대표자 뱃지 미사용 (2026-10-12)
대표자 카드는 모든 실행 경로와 독립 견본에서 직책·역할·상태 뱃지 및 빈 attributes/뱃지 행을 생성하지 않는다. 표시 직위 `대표이사`, 이름 `홍 길 동`, 승인 카드 146×74 및 기존 Typography·사진·로고를 유지하며 직위↔이름 간격은 0px이다. 원본 fixture의 대표자 직위는 `경영진`이므로 `대표이사`는 카드 표시에만 적용한다. 직원 JSON·정보 팝업 원문·공개 API와 다른 1Depth/2Depth 카드의 뱃지 정책은 그대로 유지한다. 아래 P3.2 및 이전 보고서·검증은 당시 기록으로 보존한다.
docs/org-chart/verification-p9-5-popup-parity.md
+59
View File
@@ -0,0 +1,59 @@
# P9.5 Core X 버튼 — 실제 소비 화면 비교 검증
RESULT: PASS (요청 화면의 기본/선택 팝업 디자인과 기존 동작)
## 실제 팝업 사용 경로
- Storybook Full Composition: 화면은 React OrgChart Wrapper지만 팝업은 Core native dialog. Fixed는 Core 팝업을 사용한다.
- Storybook Expanded OrgChart 기본값: React HMDesign Dialog. 실제 공개 HM Dialog를 사용하는 HMEmployeeDialog Portal이다.
- Storybook Expanded OrgChart에서 직원 정보 팝업을 Core 기본 팝업으로 선택: Core native dialog.
- 실제 Vanilla index.html, p1.html?mode=readOnly (Full Composition), expanded.html: 모두 Core native dialog. React 없이 공식 Core API를 사용한다.
열린 DOM과 위치로 구분했다. Core는 ShadowRoot 안의 dialog.hm-orgchart-employee-dialog[open], React HM은 Document Portal의 data-component=HMOrgChartEmployeeDialog / data-state=open이다. HM 모드에서도 닫힌 Core dialog DOM은 존재할 수 있으므로 단순 DOM 존재를 팝업 사용 증거로 보지 않았다.
## 실행 범위와 결과
- 위 6개 경로 × 1440×900 / 390×900: 118 PASS, 0 FAIL.
- 기준: 실제 Components/Overlay/Dialog 대표 All Story에서 여는 HM Dialog의 ghost/icon-sm X 버튼. Expanded의 실제 HM 직원 Dialog도 같은 기준값을 확인했다.
- 모든 버튼 28×28px, SVG 16×16px, 두 Lucide X 경로 동일, Stroke 2, round cap/join, Padding 0, Radius 3.2px, CSS top/right 8px. 팝업 Border 1px를 포함한 실제 외곽 inset은 각각 9px.
- 기본색 rgb(10,34,29), Hover rgb(244,241,234), Focus Border rgb(38,102,81) 및 같은 색 50%의 3px Ring이 일치했다. HM의 투명 shadow layers와 Core의 단일 ring 표현은 동일한 가시 링이다.
- X 클릭/ESC 닫기, 카드 Focus 복귀, 키보드 Enter 재열기, 선택된 직원/본문 데이터 유지 PASS. 신규 Console/Page 오류 0.
- 외부 클릭 정책은 각각 유지: Core는 열린 상태 유지, React HMDesign Dialog는 닫고 직원 카드로 Focus 복귀.
- 팝업 본문 구성은 각 기존 디자인을 유지한다. HM에는 Description/Avatar/Footer 닫기 버튼이 있고 Core에는 기존 간단한 직원 정보 목록이 있다. 이번 검증에서 이를 동일 본문으로 변경하지 않았다.
- 소스와 실제 캡처를 비교 검토했다. 전체 레이아웃/Drag & Drop 회귀는 반복하지 않았다.
## Vanilla 예제 산출물 갱신
시작 시 packages/org-chart/dist는 2026-10-13 수정본이었으나 examples/org-chart/dist/assets는 2026-10-12 복사본이었다. 실제 예제는 assets/index.js 및 style.css를 읽으므로 이전 복사본에서는 새 X가 반영되지 않는 상태였다.
기존 node examples/org-chart/prepare.mjs 경로로 최신 Core 배포 파일을 실제 예제 dist에 복사했다. 제품 소스 수정 없이 생성물만 갱신했다. 갱신 후 index.js / style.css 각각의 SHA256이 Core 배포 파일과 정확히 동일함을 확인했다. 이전/이후 manifest는 artifacts-before.json / artifacts-after.json이다.
기존 Typecheck/Core Build/Storybook Build PASS는 제품 소스가 그대로이므로 재사용했다. Guard도 UI 변경이 없어 반복하지 않았다. 이전 Guard 원본의 SCOPE-001 및 CSS Runtime/Final NOT VERIFIED는 유지하며 본 브라우저 측정은 별도 증거다.
## 증거 및 검토 URL
결과: test-results/org-chart-p9-5-popup-parity/result.json
스크립트: examples/org-chart/verify-p9-5-popup-parity.mjs
보존: test-results/org-chart-p9-5-popup-parity/preservation.json
- Full Composition: http://127.0.0.1:6064/?path=/story/orgchart--full-composition
- Expanded OrgChart: http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart
- Vanilla 기본: http://127.0.0.1:4178/index.html
- Vanilla Full Composition: http://127.0.0.1:4178/p1.html?mode=readOnly
- Vanilla Expanded: http://127.0.0.1:4178/expanded.html
팝업 및 전체 문맥 캡처는 test-results/org-chart-p9-5-popup-parity/의 각 경로명-폭-popup.png / context.png에 보관한다. 주요 비교 캡처는 storybook-expanded-hm-1440-popup.png, storybook-expanded-core-1440-popup.png, vanilla-full-1440-popup.png이다.
## 보존 / 미검증 / 시간
시작 시점 기존 authored 파일 SHA256 변화 0, 기존 P9.5 미커밋 변경 보존. 제품 소스 추가 수정 없음. 검증 스크립트와 본 보고서만 추가했고 예제 dist 생성물을 갱신했다.
feature/orgchart-package 및 HEAD 7614507583927a25a270963a74ff044be0557b9f 유지. Staged 파일 0. Stage/Commit/Push/Merge/PR/Reset/Rebase 미진행.
NOT VERIFIED: 다른 브라우저/OS/Theme, Classic 패키징, 별도 React 독립 예제, 팝업 사용 안 함/소비자 Custom callback 경로, 최종 디자인 승인. 요청 화면의 Core/HM 기본/선택 경로 검증에는 해당 누락이 없다.
Started At: 2026-10-13 14:05:05 KST
Completed At: 2026-10-13 14:12:21 KST
Actual Duration: 7분 16초
Estimated Duration: 12분
Variance: -284초
examples/org-chart/verify-p7.mjs
+545
View File
@@ -0,0 +1,545 @@
// P7 change-only integration verification. Historical suites are not replayed.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import http from 'node:http';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p7');
await fs.mkdir(output, { recursive: true });
const template = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-expanded-large.json'), 'utf8'));
const small = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-expanded-small.json'), 'utf8'));
const fixed = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-p1.json'), 'utf8'));
const results = [], measurements = [], errors = [];
const only = process.argv.slice(2);
const run = section => (!only.length && !['repair', 'react-repair', 'options-tail', 'story-menu', 'lr-reference', 'lr-residue', 'performance', 'dialog-narrow'].includes(section)) || only.includes(section);
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', detail });
writeFileSync(path.join(output, 'progress.json'), JSON.stringify({ results }, null, 2));
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.ttf': 'font/ttf', '.json': 'application/json', '.svg': 'image/svg+xml' };
const server = http.createServer(async (request, response) => {
try {
const pathname = decodeURIComponent(new URL(request.url, 'http://localhost').pathname);
if (pathname === '/favicon.ico') return response.writeHead(204).end();
if (pathname === '/shell') return response.writeHead(200, { 'Content-Type': 'text/html' }).end('<!doctype html><html lang="ko"><head><link rel="icon" href="data:,"><style>@font-face{font-family:"Noto Sans KR";src:url(/public/fonts/NotoSansKR-variable.ttf);font-weight:100 900}body{margin:0}#chart{width:100%}</style></head><body><main id="chart"></main></body></html>');
const file = path.resolve(root, pathname.startsWith('/assets/') ? 'test-results/org-chart-p7/react-build/dist' + pathname : '.' + pathname);
const relative = path.relative(root, file);
if (relative.startsWith('..') || path.isAbsolute(relative)) return response.writeHead(403).end();
response.writeHead(200, { 'Content-Type': mime[path.extname(file)] ?? 'application/octet-stream' }).end(await fs.readFile(file));
} catch { response.writeHead(404).end(); }
});
await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
const origin = `http://127.0.0.1:${server.address().port}`;
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });
page.on('pageerror', e => errors.push(e.message));
page.on('console', m => { if (m.type() === 'error') errors.push({ message: m.text(), location: m.location() }); });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 5; i++) await new Promise(resolve => requestAnimationFrame(resolve)); });
async function ready(count) {
await page.waitForFunction(count => {
const s = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return s && (count === undefined || s.querySelectorAll('.hm-orgchart-employee').length === count) && [...s.querySelectorAll('link')].every(link => link.sheet) && !s.querySelector('.hm-orgchart-shell[aria-busy="true"]');
}, count);
await settle();
}
async function mount(data, options = {}, baseline = false) {
await page.goto(origin + '/shell');
await page.evaluate(async ({ origin, data, options, baseline }) => {
const base = origin + (baseline ? '/test-results/org-chart-p7/baseline-dist' : '/packages/org-chart/dist');
window.mod = await import(base + '/index.js');
window.handle = window.mod.createOrgChart({ container: document.getElementById('chart'), dataSource: new window.mod.JsonOrgChartDataSource(data), stylesheetUrls: { engine: base + '/engine.css', core: base + '/style.css' }, ...options });
const started = performance.now();
await window.handle.mount();
window.mountMs = performance.now() - started;
}, { origin, data, options, baseline });
await ready();
}
async function example(scope, employeeCount, companyIds) {
return page.evaluate(({ template, scope, employeeCount, companyIds }) => window.mod.createOrgChartExampleDataset(template, { scope, employeeCount, companyIds }), { template, scope, employeeCount, companyIds });
}
async function measure() {
return page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot;
const box = e => { const r = e.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height }; };
const cards = [...s.querySelectorAll('.hm-orgchart-employee')].map(c => {
const cs = getComputedStyle(c), a = c.closest('.hm-orgchart-organization'), p = a?.querySelector(`path[data-employee-id="${c.dataset.employeeId}"]`);
let x = 0, y = 0, cur = c;
while (a && cur && cur !== a) { x += cur.offsetLeft; y += cur.offsetTop; cur = cur.offsetParent; }
const d = c.dataset.connectionDirection;
const target = d === 'left' ? [x, y + c.offsetHeight / 2] : d === 'right' ? [x + c.offsetWidth, y + c.offsetHeight / 2] : [x + c.offsetWidth / 2, y];
return { id: c.dataset.employeeId, company: c.dataset.companyId, kind: c.dataset.cardKind, size: [c.offsetWidth, c.offsetHeight], box: box(c), name: c.querySelector('.hm-orgchart-person-name')?.textContent, role: c.querySelector('.hm-orgchart-person-role')?.textContent, asset: c.dataset.cardAsset, direction: d, border: [cs.borderTopColor, cs.borderRightColor, cs.borderBottomColor, cs.borderLeftColor], background: cs.backgroundImage, endpointError: p ? Math.hypot(Number(p.dataset.endX) - target[0], Number(p.dataset.endY) - target[1]) : null };
});
const v = s.querySelector('.hm-orgchart-viewport'), f = s.querySelector('.hm-orgchart-forest');
return { cards, nodes: [...s.querySelectorAll('.node[data-depth]')].map(n => ({ id: n.dataset.organizationId, parent: n.dataset.parentId, depth: Number(n.dataset.depth), company: n.dataset.companyId, box: box(n), article: box(n.querySelector('.hm-orgchart-organization')), collapsed: n.dataset.collapsed })), titles: [...s.querySelectorAll('.hm-orgchart-organization-name')].map(t => ({ text: t.textContent, background: getComputedStyle(t).backgroundColor, color: getComputedStyle(t).color, company: t.closest('[data-company-id]')?.dataset.companyId })), viewport: box(v), forest: box(f), scroll: [v.scrollLeft, v.scrollTop, v.scrollWidth, v.clientWidth, v.scrollHeight, v.clientHeight], document: [document.documentElement.scrollWidth, innerWidth, document.documentElement.scrollHeight, document.documentElement.clientHeight], layout: s.querySelector('.hm-orgchart-expanded')?.dataset.autoLayout, paths: [...s.querySelectorAll('.hm-orgchart-organization-connectors path')].map(p => ({ ...p.dataset, d: p.getAttribute('d') })), heap: performance.memory?.usedJSHeapSize, domCount: s.querySelectorAll('*').length };
});
}
const overlap = boxes => boxes.some((a, i) => boxes.slice(i + 1).some(b => Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > 0.5 && Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > 0.5));
const fit = m => m.forest.x >= m.viewport.x - 1 && m.forest.y >= m.viewport.y - 1 && m.forest.x + m.forest.width <= m.viewport.x + m.viewport.width + 1 && m.forest.y + m.forest.height <= m.viewport.y + m.viewport.height + 1;
const endpoint = m => m.cards.every(c => c.endpointError !== null && c.endpointError < 1);
const border = m => m.cards.every(c => { const i = { top: 0, right: 1, left: 3 }[c.direction]; return i === undefined ? c.border.every(b => b === c.border[2]) : c.border[i] !== c.border[2] && c.border.every((b, j) => j === i || b === c.border[2]); });
async function screenshot(name) { await page.screenshot({ path: path.join(output, name + '.png'), fullPage: true }); }
async function setLayout(options) { await page.evaluate(options => window.handle.setAutoLayout(options), options); await ready(); }
async function select(label, option) {
await page.getByRole('combobox', { name: label, exact: true }).click();
await page.getByRole('option', { name: option, exact: true }).click();
await settle();
}
async function hmPopup(name) {
const first = page.locator('.hm-orgchart-employee').first();
const id = await first.getAttribute('data-employee-id');
await first.focus(); await first.press('Enter');
const d = page.locator('[data-component="HMOrgChartEmployeeDialog"]');
await d.waitFor();
const details = await d.evaluate(d => ({ role: d.getAttribute('role'), employee: d.dataset.employeeId, focus: d.contains(document.activeElement), unscaled: !d.closest('.hm-orgchart-forest'), bodyPortal: d.parentElement === document.body, text: d.textContent, transform: getComputedStyle(d).transform }));
check(details.employee === id && details.role === 'dialog' && details.focus && details.unscaled, name + ': actual HM Dialog, exact employee, Portal and focus', details);
check(await page.locator('dialog[open]').count() === 0 && await page.getByRole('dialog').count() === 1, name + ': only one popup');
await screenshot(name.replaceAll(' ', '-') + '-dialog');
await page.keyboard.press('Tab'); await page.keyboard.press('Shift+Tab');
check(await d.evaluate(d => d.contains(document.activeElement)), name + ': keyboard focus remains in Dialog');
await page.keyboard.press('Escape'); await d.waitFor({ state: 'hidden' }); await settle();
check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), name + ': ESC returns focus to employee');
await first.press('Space'); await d.waitFor();
await d.getByRole('button', { name: '닫기', exact: true }).last().click(); await d.waitFor({ state: 'hidden' }); await settle();
check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), name + ': close button returns focus');
}
try {
if (run('core')) {
// Exact old fixture checks compare only unchanged layout/card geometry, since white titles predate P7.
await mount(small, { layoutMode: 'auto', displayMode: 'readOnly' }, true); const oldTB = await measure();
await mount(small, { layoutMode: 'auto', displayMode: 'readOnly' }); const newTB = await measure();
const signature = m => ({ cards: m.cards.map(c => [c.id, c.box, c.size, c.role, c.name]), nodes: m.nodes.map(n => [n.id, n.box, n.article]) });
check(JSON.stringify(signature(oldTB)) === JSON.stringify(signature(newTB)), 'TB existing fixture geometry remains unchanged');
for (const count of [20, 100, 300]) {
const data = await example('total', count);
await page.evaluate(data => window.handle.update(data), data); await ready(count);
const m = await measure();
check(m.cards.length === count && new Set(m.cards.map(c => c.id)).size === count && new Set(m.nodes.map(n => n.company)).size === 7, `Total ${count}: all seven companies and unique employees`);
check(!overlap(m.cards.map(c => c.box)) && !overlap(m.nodes.map(n => n.article)), `Total ${count}: no card or organization overlap`);
check(fit(m), `Total ${count}: data update refreshes Fit bounds`, { forest: m.forest, viewport: m.viewport });
}
for (const count of [20, 100, 300]) {
const data = await example('per-company', count, ['saman']);
await page.evaluate(data => window.handle.update(data), data); await ready(count);
check((await measure()).cards.every(c => c.company === 'saman'), `Single company ${count}: exact selected company`);
}
const data = await example('per-company', 100, ['hanmac', 'saman']);
await page.evaluate(data => window.handle.update(data), data); await ready(200);
check(new Set((await measure()).cards.map(c => c.company)).size === 2, 'Two companies ×100 render exactly 200');
const all = await example('total', 300);
await page.evaluate(data => window.handle.update(data), all); await ready(300);
const dims = (await measure()).cards.map(c => c.size);
for (const options of [{ type: 'lr' }, { type: 'tb' }, { type: 'hybrid', hybridStartDepth: 2 }, { type: 'tb' }, { type: 'lr' }, { type: 'hybrid', hybridStartDepth: 3 }, { type: 'hybrid', hybridStartDepth: 4 }]) {
const started = Date.now(); await setLayout(options); const ms = Date.now() - started; const m = await measure();
check(m.cards.length === 300 && new Set(m.cards.map(c => c.id)).size === 300, `${JSON.stringify(options)}: preserves complete data`);
check(!overlap(m.cards.map(c => c.box)) && !overlap(m.nodes.map(n => n.article)), `${JSON.stringify(options)}: no card or group overlap`);
check(fit(m), `${JSON.stringify(options)}: complete Fit`, { forest: m.forest, viewport: m.viewport });
check(endpoint(m) && border(m), `${JSON.stringify(options)}: connector endpoints and single accent side agree`);
check(JSON.stringify(m.cards.map(c => c.size)) === JSON.stringify(dims), `${JSON.stringify(options)}: card dimensions preserved`);
if (options.type === 'lr') {
check(m.nodes.every(n => !n.parent || m.nodes.some(p => p.id === n.parent && p.article.x + p.article.width < n.article.x)), 'LR: every child to the right of its parent');
const parents = new Set(m.nodes.map(n => n.parent).filter(Boolean));
check([...parents].every(id => { const siblings = m.nodes.filter(n => n.parent === id); return siblings.every((n, i) => i === 0 || n.article.y >= siblings[i - 1].article.y + siblings[i - 1].article.height); }), 'LR: siblings stack vertically');
check(m.cards.every(c => c.direction === 'left'), 'LR: cards use left incoming accent');
} else {
check(m.nodes.every(n => !n.parent || m.nodes.some(p => p.id === n.parent && p.article.y + p.article.height < n.article.y)), `${JSON.stringify(options)}: each child remains under its own parent`);
if (options.type === 'hybrid') {
const parents = new Set(m.nodes.filter(n => n.depth + 1 >= options.hybridStartDepth).map(n => n.parent).filter(Boolean));
check([...parents].every(id => { const siblings = m.nodes.filter(n => n.parent === id); return siblings.every((n, i) => i === 0 || n.article.y >= siblings[i - 1].article.y + siblings[i - 1].article.height); }), `Hybrid Depth ${options.hybridStartDepth}: siblings below own parent form a vertical list`);
}
}
measurements.push({ name: JSON.stringify(options), switchAndSettleMs: ms, value: m });
if (options.type === 'lr' || options.type === 'hybrid') await screenshot(options.type + '-' + (options.hybridStartDepth ?? '300'));
}
await setLayout({ type: 'tb' });
const rootId = (await measure()).nodes.find(n => !n.parent).id;
let toggle = page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${rootId}"]`);
await toggle.focus(); await toggle.press('Enter'); await ready();
const collapsedCount = (await measure()).cards.length;
for (const type of ['lr', 'hybrid', 'tb']) { await setLayout({ type }); check((await measure()).cards.length === collapsedCount, `Collapse state preserved switching to ${type}`); }
toggle = page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${rootId}"]`); await toggle.focus(); await toggle.press('Space'); await ready(300);
check(await toggle.getAttribute('aria-expanded') === 'true', 'Keyboard expands group after mode transitions');
for (const depth of [1, 2, 3]) {
await setLayout({ type: 'hybrid', initialVisibleDepth: depth }); const m = await measure();
check(m.nodes.every(n => n.depth + 1 <= depth), `Initial visible Depth ${depth}: no deeper group displayed`);
}
await setLayout({ type: 'lr', initialVisibleDepth: 'all' }); await ready(300);
await page.evaluate(() => window.handle.setSelectedCompanies(['hanmac', 'saman'])); await ready();
check(new Set((await measure()).nodes.map(n => n.company)).size === 2, 'Company selection independent of LR');
await setLayout({ type: 'hybrid', hybridStartDepth: 2 });
check(new Set((await measure()).nodes.map(n => n.company)).size === 2, 'Selected companies preserved changing to Hybrid');
await page.evaluate(() => window.handle.setSelectedCompanies([])); await ready(0);
check(await page.locator('.hm-orgchart-expanded-empty').count() === 1, 'Empty company selection safe');
await page.evaluate(() => window.handle.setSelectedCompanies()); await ready(300);
for (const type of ['tb', 'lr', 'hybrid']) {
await setLayout({ type }); const m = await measure();
check(m.titles.every(t => t.color === 'rgb(255, 255, 255)'), `${type}: all company title text remains white`);
const v = page.locator('.hm-orgchart-viewport'), vb = await v.boundingBox();
const before = await page.evaluate(() => window.handle.getViewportState());
await page.mouse.move(vb.x + 10, vb.y + 10); await page.mouse.down(); await page.mouse.move(vb.x + 50, vb.y + 30); await page.mouse.up();
const after = await page.evaluate(() => window.handle.getViewportState());
check(after.x !== before.x && after.y !== before.y, `${type}: trusted pointer Pan`);
await page.getByRole('button', { name: '100% 복원', exact: true }).click();
await page.getByRole('button', { name: '확대', exact: true }).click();
check((await page.evaluate(() => window.handle.getViewportState())).scale > 1, `${type}: Zoom independent`);
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
check(fit(await measure()), `${type}: toolbar Fit`);
}
// Vanilla popup remains outside the scaled forest, closes with ESC and restores card.
const first = page.locator('.hm-orgchart-employee').first(), id = await first.getAttribute('data-employee-id');
await first.focus(); await first.press('Enter'); await page.locator('dialog[open]').waitFor();
check(await page.locator('dialog[open]').evaluate(d => !d.closest('.hm-orgchart-forest') && getComputedStyle(d).transform === 'none' && d.contains(d.getRootNode().activeElement)), 'Vanilla default popup focus and unscaled layer');
await page.keyboard.press('Escape'); await settle();
check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), 'Vanilla ESC restores employee focus');
// Higher scale has its own measurement; P5's 300 benchmark is not used.
const huge = await example('per-company', 300);
await mount(huge, { layoutMode: 'auto', displayMode: 'readOnly', autoLayout: { type: 'lr' } }); await ready(2100);
const hugeLR = await measure();
check(!overlap(hugeLR.cards.map(c => c.box)) && fit(hugeLR), '2100 LR: full rendering, no card overlap and Fit');
measurements.push({ name: '2100 LR initial full', mountMs: await page.evaluate(() => window.mountMs), value: hugeLR }); await screenshot('2100-lr');
const largeStart = Date.now(); await setLayout({ type: 'hybrid', hybridStartDepth: 3 }); await ready(2100); const hugeHybrid = await measure();
check(!overlap(hugeHybrid.cards.map(c => c.box)) && fit(hugeHybrid), '2100 Hybrid: full rendering, no card overlap and Fit');
measurements.push({ name: '2100 Hybrid full', switchAndSettleMs: Date.now() - largeStart, value: hugeHybrid });
await setLayout({ type: 'hybrid', initialVisibleDepth: 2 }); const limited = await measure();
check(limited.cards.length < 2100 && limited.nodes.every(n => n.depth < 2), '2100 independent visible depth reduces initial rendering');
measurements.push({ name: '2100 Depth2', value: limited });
// Minimum Fixed regression from captured pre-P7 public distribution.
await mount(fixed, { displayMode: 'readOnly' }, true); const beforeFixed = await measure();
await mount(fixed, { displayMode: 'readOnly' }); const afterFixed = await measure();
const fixedSig = m => m.cards.map(c => [c.id, c.box, c.size, c.name, c.role, c.asset, c.border, c.background]);
check(JSON.stringify(fixedSig(beforeFixed)) === JSON.stringify(fixedSig(afterFixed)), 'Fixed card geometry/SVG/text/gradient/border unchanged');
check(await page.locator('.hm-orgchart-expanded-toggle').count() === 0, 'Fixed contains no new Auto controls');
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('dialog[open]').waitFor(); await page.keyboard.press('Escape');
check(await page.locator('dialog[open]').count() === 0, 'Fixed original popup retains open/ESC'); await screenshot('fixed-1440');
}
if (run('repair')) {
await mount(small, { layoutMode: 'auto', displayMode: 'readOnly' });
for (const count of [20, 100, 300]) {
const data = await example('total', count);
await page.evaluate(data => window.handle.update(data), data); await ready(count);
check(fit(await measure()), `Total ${count}: data update refreshes Fit bounds`);
}
for (const options of [{ type: 'lr' }, { type: 'hybrid', hybridStartDepth: 2 }, { type: 'hybrid', hybridStartDepth: 3 }, { type: 'hybrid', hybridStartDepth: 4 }, { type: 'tb', hybridOrganizationIds: ['hanmac-root'] }]) {
await setLayout(options); const m = await measure();
check(!overlap(m.cards.map(c => c.box)) && !overlap(m.nodes.map(n => n.article)), `Corrected ${JSON.stringify(options)}: no group/card overlap`);
check(fit(m) && endpoint(m) && border(m), `Corrected ${JSON.stringify(options)}: Fit, card endpoints and accents`);
if (options.type === 'lr') {
check(m.nodes.every(n => !n.parent || m.nodes.some(p => p.id === n.parent && p.article.x + p.article.width < n.article.x)), 'Corrected LR: every child right of its parent');
const parents = new Set(m.nodes.map(n => n.parent).filter(Boolean));
check([...parents].every(id => { const siblings = m.nodes.filter(n => n.parent === id); return siblings.every((n, i) => i === 0 || n.article.y >= siblings[i - 1].article.y + siblings[i - 1].article.height); }), 'LR: siblings stack vertically');
} else {
check(m.nodes.every(n => !n.parent || m.nodes.some(p => p.id === n.parent && p.article.y + p.article.height < n.article.y)), `${JSON.stringify(options)}: each child remains under its own parent`);
const parents = new Set(m.nodes.filter(n => options.type === 'hybrid' ? n.depth + 1 >= options.hybridStartDepth : n.company === 'hanmac').map(n => n.parent).filter(Boolean));
check([...parents].every(id => { const siblings = m.nodes.filter(n => n.parent === id); return siblings.every((n, i) => i === 0 || n.article.y >= siblings[i - 1].article.y + siblings[i - 1].article.height); }), `Hybrid Depth ${options.hybridStartDepth ?? 'group'}: siblings below own parent form a vertical list`);
}
const pathValid = await page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot;
return [...s.querySelectorAll('.hm-orgchart-tree')].every(tree => {
const nodes = [...tree.querySelectorAll('.node[data-organization-id]')];
const paths = [...tree.querySelectorAll('.hm-orgchart-organization-connectors path')];
const scale = Number(s.querySelector('.hm-orgchart-viewport').dataset.scale);
return paths.length === nodes.filter(n => n.dataset.parentId).length && paths.every(p => {
const node = nodes.find(n => n.dataset.organizationId === p.dataset.organizationId);
if (!node || node.dataset.parentId !== p.dataset.parentId) return false;
const r = node.querySelector('.hm-orgchart-organization-name').getBoundingClientRect(), t = tree.getBoundingClientRect();
const nums = p.getAttribute('d').match(/-?\d+(?:\.\d+)?/g).map(Number);
const direction = p.dataset.direction;
const x = direction === 'left' ? nums.at(-1) : nums.at(-2);
const y = direction === 'left' ? nums.at(-2) : nums.at(-1);
return Math.abs(x - ((r.left - t.left) / scale + (direction === 'left' ? 0 : node.querySelector('.hm-orgchart-organization-name').offsetWidth / 2))) < 1
&& Math.abs(y - ((r.top - t.top) / scale + (direction === 'left' ? node.querySelector('.hm-orgchart-organization-name').offsetHeight / 2 : 0))) < 1;
});
});
});
check(pathValid, `Corrected ${JSON.stringify(options)}: actual organization paths follow own parent and heading endpoints`);
measurements.push({ name: 'Corrected ' + JSON.stringify(options), value: m });
await screenshot('corrected-' + options.type + '-' + (options.hybridStartDepth ?? 'group'));
}
const huge = await example('per-company', 300);
await mount(huge, { layoutMode: 'auto', displayMode: 'readOnly', autoLayout: { type: 'lr' } }); await ready(2100);
const m = await measure();
check(!overlap(m.cards.map(c => c.box)) && fit(m), 'Corrected 2100 LR: full rendering/no overlap/Fit');
measurements.push({ name: 'Corrected 2100 LR full', mountMs: await page.evaluate(() => window.mountMs), value: m });
await screenshot('2100-lr');
const started = Date.now(); await setLayout({ type: 'hybrid', hybridStartDepth: 3 }); await ready(2100);
const hybrid = await measure();
check(!overlap(hybrid.cards.map(c => c.box)) && fit(hybrid), 'Corrected 2100 Hybrid: full rendering/no overlap/Fit');
measurements.push({ name: 'Corrected 2100 Hybrid full', switchAndSettleMs: Date.now() - started, value: hybrid });
await screenshot('2100-hybrid');
}
if (run('story')) {
await page.goto((process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6056') + '/iframe.html?id=orgchart--expanded-org-chart&viewMode=story');
await ready(20);
check(await page.locator('.hm-orgchart-story-companies').first().getByRole('checkbox').count() === 7 && new Set((await measure()).nodes.map(n => n.company)).size === 7, 'Story total20: all seven company controls and rendered trees');
for (const count of [100, 300]) {
await select('전체 직원 수', `${count}명`);
check(await page.locator('.hm-orgchart-employee').count() !== count, `Story total${count}: draft choice does not render before Apply`);
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(count);
check((await measure()).cards.length === count, `Story total${count}: actual selector applies count`);
}
await page.getByRole('button', { name: '선택 해제', exact: true }).click();
await page.getByRole('checkbox', { name: '한맥기술', exact: true }).check();
await select('데이터 범위', '회사별');
for (const count of [20, 100, 300]) {
await select('회사당 직원 수', `${count}명`);
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(count);
check((await measure()).cards.every(c => c.company === 'hanmac'), `Story per-company${count}: exact chosen roster`);
}
await page.getByRole('checkbox', { name: '삼안', exact: true }).check();
await select('회사당 직원 수', '100명');
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(200);
check(new Set((await measure()).cards.map(c => c.company)).size === 2, 'Story two companies100: actual 200');
for (const [label, type] of [['가로형 LR', 'lr'], ['혼합형 Hybrid', 'hybrid'], ['세로형 TB', 'tb']]) {
await select('조직도 표시 유형', label); await ready(200);
check((await measure()).layout === type, `Story layout ${type}: real screen switched`);
await screenshot('story-' + type + '-200');
}
check(await page.getByRole('combobox', { name: '혼합형 시작 Depth', exact: true }).isDisabled(), 'Story Hybrid depth limited outside Hybrid');
await select('조직도 표시 유형', '혼합형 Hybrid');
for (const depth of [2, 3, 4]) { await select('혼합형 시작 Depth', `Depth ${depth}부터 세로 배치`); await ready(200); check(!overlap((await measure()).cards.map(c => c.box)), `Story HybridDepth${depth}: actual control applied safely`); }
await hmPopup('Story HM');
// Source/company disappearance closes the external popup safely.
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor();
await page.evaluate(() => {
const overlay = document.querySelector('[data-component="HMOrgChartEmployeeDialog"]');
// Escape to dismiss first; normal UI then commits an empty company view.
overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
});
await page.keyboard.press('Escape');
await page.getByRole('button', { name: '선택 해제', exact: true }).click();
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(0);
check(await page.locator('[data-component="HMOrgChartEmployeeDialog"]').count() === 0 && await page.locator('.hm-orgchart-expanded-empty').count() === 1, 'Story empty selection safely clears view/popup');
await page.getByRole('button', { name: '초기화', exact: true }).click(); await ready(20);
await select('조직도 표시 유형', '세로형 TB');
const rootId = (await measure()).nodes.find(n => !n.parent).id;
const toggle = page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${rootId}"]`);
await toggle.focus(); await toggle.press('Enter'); await ready(); const collapsed = await page.locator('.hm-orgchart-employee').count();
await select('직원 정보 팝업', 'Core 기본 팝업'); await ready();
check(await page.locator('.hm-orgchart-employee').count() === collapsed, 'Story popup ownership switch retains independent collapse');
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('dialog[open]').waitFor(); await page.keyboard.press('Escape');
await select('직원 정보 팝업', '사용 안 함'); await ready();
await page.locator('.hm-orgchart-employee').first().press('Enter'); await settle();
check(await page.getByRole('dialog').count() === 0, 'Story popup none: no default or HM popup');
await select('직원 정보 팝업', 'HMDesign Dialog'); await ready();
await toggle.focus(); await toggle.press('Enter'); await ready(20);
for (const width of [390, 768, 1280, 1440]) {
await page.setViewportSize({ width, height: width === 390 ? 844 : 1100 }); await settle();
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
const m = await measure();
check(m.document[0] <= width && m.scroll[0] === 0 && m.scroll[1] === 0, `Story ${width}px: no document overflow/hidden viewport scroll`, { document: m.document, scroll: m.scroll });
measurements.push({ name: `Story ${width}px`, value: m });
await screenshot('story-' + width);
}
await select('조직도 표시 유형', '가로형 LR');
await select('초기 표시 Depth', '2Depth까지');
await page.getByRole('button', { name: '전체 회사', exact: true }).click();
await select('데이터 범위', '회사별'); await select('회사당 직원 수', '300명');
check(await page.getByText(/대용량 2,100명 전환 예정/).count() === 1, 'Story2100: scale disclosed before data commit');
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready();
check(await page.getByText(/실제 직원 합계 2,100명/).count() === 1 && (await measure()).nodes.every(n => n.depth < 2), 'Story2100: source count retained with independent initial-depth reduction');
await screenshot('story-2100-depth2');
await page.getByRole('button', { name: '초기화', exact: true }).click();
await select('초기 표시 Depth', '전체 펼침'); await select('조직도 표시 유형', '세로형 TB'); await ready(20);
check(await page.getByRole('alert').count() === 0, 'Story has no lifecycle error alert');
}
if (run('react')) {
await page.goto(origin + '/test-results/org-chart-p7/react-build/dist/index.html'); await ready(20);
await hmPopup('React production');
for (const type of ['lr', 'hybrid']) {
await page.evaluate(type => window.p7.setAutoLayout({ type }), type); await ready(20);
await hmPopup('React ' + type);
}
// Layout replacement while Dialog is open preserves selected identity and restores replacement card.
const id = await page.locator('.hm-orgchart-employee').first().getAttribute('data-employee-id');
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor();
await page.evaluate(() => window.p7.setAutoLayout({ type: 'tb' })); await settle();
check(await page.locator('[data-component="HMOrgChartEmployeeDialog"]').getAttribute('data-employee-id') === id, 'React layout change retains popup employee identity');
await page.keyboard.press('Escape'); await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor({ state: 'hidden' }); await settle();
check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), 'React mode rerender returns focus to replacement card');
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor();
await page.evaluate(() => window.p7.setCompanies(['saman'])); await settle();
check(await page.locator('[data-component="HMOrgChartEmployeeDialog"]').count() === 0, 'React company disappearance clears external popup');
await page.evaluate(() => window.p7.setCompanies(undefined)); await ready(20);
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor();
await page.evaluate(() => window.p7.setInput({ scope: 'per-company', employeeCount: 100, companyIds: ['saman'] })); await ready(100);
await page.locator('[data-component="HMOrgChartEmployeeDialog"]').waitFor({ state: 'hidden' });
check(await page.locator('[data-component="HMOrgChartEmployeeDialog"]').count() === 0, 'React source change clears stale popup');
const m = await measure(); check(m.cards.every(c => c.company === 'saman'), 'React generated100: source identity matches shared Vanilla contract');
measurements.push({ name: 'React generated100', value: m });
}
if (run('react-repair')) {
await page.goto(origin + '/test-results/org-chart-p7/react-build/dist/index.html'); await ready(20);
const id = await page.locator('.hm-orgchart-employee').first().getAttribute('data-employee-id');
await page.locator('.hm-orgchart-employee').first().press('Enter'); const d = page.locator('[data-component="HMOrgChartEmployeeDialog"]'); await d.waitFor();
await page.evaluate(() => window.p7.setAutoLayout({ type: 'lr' })); await settle();
await page.keyboard.press('Escape'); await d.waitFor({ state: 'hidden' }); await settle();
check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), 'React mode rerender returns focus to replacement card');
await page.locator('.hm-orgchart-employee').first().press('Enter'); await d.waitFor();
await page.evaluate(() => window.p7.setInput({ scope: 'per-company', employeeCount: 100, companyIds: ['saman'] })); await ready(100); await d.waitFor({ state: 'hidden' });
check(await d.count() === 0, 'React source change clears stale popup');
}
if (run('options')) {
await mount(small, { layoutMode: 'auto', displayMode: 'readOnly' });
for (const type of ['tb', 'lr', 'hybrid']) {
await setLayout({ type });
for (const config of [{ collapse: false, zoom: true, pan: true }, { collapse: true, zoom: false, pan: true }, { collapse: true, zoom: true, pan: false }, { collapse: false, zoom: false, pan: false }]) {
const before = await page.evaluate(() => window.handle.getViewportState());
await page.evaluate(config => window.handle.setInteractions(config), config); await ready(20);
const after = await page.evaluate(() => window.handle.getViewportState());
const v = page.locator('.hm-orgchart-viewport');
const root = page.locator('.hm-orgchart-expanded-toggle').first();
check(await root.isDisabled() === !config.collapse && await page.getByRole('button', { name: '확대', exact: true }).isDisabled() === !config.zoom && await v.getAttribute('data-pan-enabled') === String(config.pan), `${type} independent ${JSON.stringify(config)}: only requested capabilities disabled`);
check(JSON.stringify(before) === JSON.stringify(after), `${type} independent ${JSON.stringify(config)}: setter retains viewport state`);
const box = await v.boundingBox(); const panBefore = await page.evaluate(() => window.handle.getViewportState());
await page.mouse.move(box.x + 8, box.y + 8); await page.mouse.down(); await page.mouse.move(box.x + 60, box.y + 30); await page.mouse.up();
const panAfter = await page.evaluate(() => window.handle.getViewportState());
check((panAfter.x !== panBefore.x || panAfter.y !== panBefore.y) === config.pan, `${type} independent ${JSON.stringify(config)}: trusted Pan respects flag`);
if (!config.zoom) {
await page.keyboard.down('Control'); await page.mouse.wheel(0, -80); await page.keyboard.up('Control'); await settle();
check((await page.evaluate(() => window.handle.getViewportState())).scale === panAfter.scale, `${type} disabled Zoom ignores Ctrl-wheel`);
}
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
check(fit(await measure()), `${type} independent ${JSON.stringify(config)}: Fit remains usable`);
}
await page.evaluate(() => window.handle.setInteractions({ collapse: true, zoom: true, pan: true })); await ready(20);
await page.locator('.hm-orgchart-employee').first().press('Enter'); await page.locator('dialog[open]').waitFor(); await page.keyboard.press('Escape');
check(await page.locator('dialog[open]').count() === 0, `${type}: popup works independently of feature flags`);
}
await page.evaluate(() => { window.handle.zoomTo(1); });
await page.evaluate(() => window.handle.setInteractions({ pan: false, zoom: true, collapse: true })); await ready(20);
await page.locator('.hm-orgchart-employee').last().focus(); await settle();
const focus = await page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot, v = s.querySelector('.hm-orgchart-viewport'), c = s.activeElement;
const r = c.getBoundingClientRect(), b = v.getBoundingClientRect();
return { visible: r.left >= b.left && r.right <= b.right && r.top >= b.top && r.bottom <= b.bottom, scale: v.dataset.scale, scroll: [v.scrollLeft, v.scrollTop] };
});
check(focus.visible && focus.scale === '1' && focus.scroll.every(n => n === 0), 'Pan disabled: keyboard reveals offscreen card at unchanged Zoom with no hidden scroll', focus);
// Actual new React/Story settings and changed content layout, without replaying all data scenarios.
await page.goto((process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6056') + '/iframe.html?id=orgchart--expanded-org-chart&viewMode=story'); await ready(20);
for (const [label, type] of [['세로형 TB', 'tb'], ['가로형 LR', 'lr'], ['혼합형 Hybrid', 'hybrid']]) {
await select('조직도 표시 유형', label); await ready(20);
await page.getByRole('checkbox', { name: '접기·펼치기 사용', exact: true }).uncheck();
await page.getByRole('checkbox', { name: 'Zoom 사용', exact: true }).uncheck();
await page.getByRole('checkbox', { name: 'Pan 사용', exact: true }).uncheck(); await ready(20);
check(await page.locator('.hm-orgchart-expanded-toggle').first().isDisabled() && await page.getByRole('button', { name: '확대', exact: true }).isDisabled() && await page.locator('.hm-orgchart-viewport').getAttribute('data-pan-enabled') === 'false', `Story ${type}: all independent checkboxes control actual Core`);
await hmPopup('Final ' + type);
await page.getByRole('checkbox', { name: '접기·펼치기 사용', exact: true }).check();
await page.getByRole('checkbox', { name: 'Zoom 사용', exact: true }).check();
await page.getByRole('checkbox', { name: 'Pan 사용', exact: true }).check(); await ready(20);
}
await select('직원 정보 팝업', '사용 안 함'); await ready(20);
check(await page.locator('.hm-orgchart-employee[role="button"]').count() === 0 && await page.locator('.hm-orgchart-employee[tabindex="0"]').count() === 0, 'Story popup none: no false actionable card semantics');
await select('직원 정보 팝업', 'HMDesign Dialog'); await ready(20);
}
if (run('options') || run('options-tail')) {
if (run('options-tail')) {
await page.goto((process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6056') + '/iframe.html?id=orgchart--expanded-org-chart&viewMode=story'); await ready(20);
}
await select('조직도 표시 유형', '세로형 TB');
await select('특정 그룹 세로 배치', '한맥기술 · 가상 조직'); await ready(20);
check(await page.locator('[data-group-hybrid="true"]').count() === 1, 'Story per-group Hybrid: real applied local branch');
await select('조직도 표시 유형', '가로형 LR'); await ready(20);
check(await page.getByRole('combobox', { name: '특정 그룹 세로 배치', exact: true }).isDisabled(), 'Story per-group Hybrid: incompatible LR selection disabled and cleared');
await select('조직도 표시 유형', '세로형 TB');
for (const width of [390, 768, 1280, 1440]) {
await page.setViewportSize({ width, height: width === 390 ? 844 : 1100 }); await settle();
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle(); const m = await measure();
check(m.document[0] <= width && m.scroll[0] === 0 && m.scroll[1] === 0 && fit(m), `Final Story ${width}px: added options fit and no overflow`, { document: m.document, scroll: m.scroll, forest: m.forest, viewport: m.viewport });
measurements.push({ name: `Final Story ${width}px`, value: m }); await screenshot('story-' + width);
}
const presetColors = { hanmac: 'rgb(203, 46, 40)', saman: 'rgb(240, 131, 0)', 'jangheon-industry': 'rgb(69, 128, 166)', jangheon: 'rgb(29, 65, 141)', ptc: 'rgb(132, 51, 142)', halla: 'rgb(0, 104, 183)', baron: 'rgb(12, 54, 127)' };
const colors = (await measure()).titles;
check(colors.every(t => t.color === 'rgb(255, 255, 255)' && t.background === presetColors[t.company]), 'Seven company titles preserve exact preset colors and requested white text', colors);
const title = page.locator('.hm-orgchart-organization-name').first();
await page.locator('.hm-orgchart-expanded-toggle').first().hover();
check(await title.evaluate(t => getComputedStyle(t).color) === 'rgb(255, 255, 255)', 'White company title remains on hover');
await page.locator('.hm-orgchart-expanded-toggle').first().focus();
check(await title.evaluate(t => getComputedStyle(t).color) === 'rgb(255, 255, 255)', 'White company title remains on keyboard focus');
await page.locator('.hm-orgchart-expanded-toggle').first().press('Enter'); await settle();
check(await title.evaluate(t => getComputedStyle(t).color) === 'rgb(255, 255, 255)', 'White company title remains collapsed');
await page.locator('.hm-orgchart-expanded-toggle').first().press('Enter'); await settle();
check(await title.evaluate(t => getComputedStyle(t).color) === 'rgb(255, 255, 255)', 'White company title remains expanded');
}
if (run('options-tail') || run('story-menu')) {
const index = await (await page.request.get((process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6056') + '/index.json')).json();
const names = Object.values(index.entries).filter(e => e.title === 'OrgChart' && e.type === 'story' && !e.tags.includes('internal') && !e.tags.includes('verification')).map(e => e.name).sort();
check(JSON.stringify(names) === JSON.stringify(['Department Colors', 'Expanded OrgChart', 'Full Composition', 'Logo · Personnel Summary'].sort()), 'Story menu retains exactly the original four user entries', names);
}
if (run('lr-reference') || run('lr-residue')) {
await mount(template, { layoutMode: 'auto', displayMode: 'readOnly', autoLayout: { type: 'lr' } }); await ready(300);
if (run('lr-reference')) {
const upright = await page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot;
const elements = [...s.querySelectorAll('.orgchart, .node, .hm-orgchart-organization, .hm-orgchart-employee, .hm-orgchart-avatar, .hm-orgchart-person-name, .hm-orgchart-person-role')];
return { l2r: s.querySelectorAll('.orgchart.l2r').length, rotated: elements.filter(e => getComputedStyle(e).transform !== 'none').map(e => [e.className, getComputedStyle(e).transform]), photos: [...s.querySelectorAll('.hm-orgchart-avatar')].every(e => e.offsetWidth === 36 && e.offsetHeight === 36) };
});
check(upright.l2r === 7 && upright.rotated.length === 0 && upright.photos, 'LR reference: actual l2r engine class on all seven trees; photos/text/card remain upright', upright);
const route = async () => page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot, scale = Number(s.querySelector('.hm-orgchart-viewport').dataset.scale);
return [...s.querySelectorAll('.hm-orgchart-tree')].every(tree => {
const nodes = [...tree.querySelectorAll('.node[data-organization-id]')], paths = [...tree.querySelectorAll('.hm-orgchart-organization-connectors path')], t = tree.getBoundingClientRect();
return paths.length === nodes.filter(n => n.dataset.parentId).length && paths.every(p => {
const node = nodes.find(n => n.dataset.organizationId === p.dataset.organizationId), parent = nodes.find(n => n.dataset.organizationId === p.dataset.parentId);
if (!node || !parent || node.dataset.parentId !== parent.dataset.organizationId) return false;
const start = parent.querySelector('.hm-orgchart-organization-name').getBoundingClientRect(), end = node.querySelector('.hm-orgchart-organization-name').getBoundingClientRect();
const values = p.getAttribute('d').match(/-?\d+(?:\.\d+)?/g).map(Number);
return Math.abs(values[0] - (start.right - t.left) / scale) < 1 && Math.abs(values[1] - (start.top + start.height / 2 - t.top) / scale) < 1
&& Math.abs(values.at(-1) - (end.left - t.left) / scale) < 1 && Math.abs(values.at(-2) - (end.top + end.height / 2 - t.top) / scale) < 1;
});
});
});
const branch = page.locator('.node[data-organization-id="hanmac-division-0"] > .hm-orgchart-organization .hm-orgchart-expanded-toggle').first();
const before = await measure(); await branch.press('Enter'); await ready(); const closed = await measure();
check(closed.cards.length < before.cards.length && closed.nodes.length < before.nodes.length && await route() && !overlap(closed.nodes.map(n => n.article)) && endpoint(closed) && border(closed), 'LR reference: collapsed branch removes descendants and recalculates both connector endpoints and layout');
await branch.press('Enter'); await ready(300); const opened = await measure();
check(await route() && !overlap(opened.nodes.map(n => n.article)) && endpoint(opened) && border(opened), 'LR reference: reopened branch updates both parent/child endpoints without overlap');
}
await setLayout({ type: 'tb' }); await setLayout({ type: 'hybrid', hybridStartDepth: 3 }); await setLayout({ type: 'lr' });
const clean = await page.evaluate(() => {
const s = document.querySelector('.hm-orgchart-host').shadowRoot;
return { trees: s.querySelectorAll('.orgchart').length, l2r: s.querySelectorAll('.orgchart.l2r').length, vertical: s.querySelectorAll('.nodes.vertical').length, svgs: s.querySelectorAll('.hm-orgchart-organization-connectors').length, paths: s.querySelectorAll('.hm-orgchart-organization-connectors path').length, nodes: [...s.querySelectorAll('.node[data-parent-id]')].filter(n => n.dataset.parentId).length };
});
check(clean.trees === 7 && clean.l2r === 7 && clean.vertical === 0 && clean.svgs === 7 && clean.paths === clean.nodes, 'LR reference: TB/Hybrid/LR return has one fresh engine and SVG per company, no stale vertical lists', clean);
await page.evaluate(() => window.handle.zoomTo(1)); await page.locator('.hm-orgchart-employee').first().focus(); await settle(); await screenshot('lr-card-upright');
measurements.push({ name: 'LR reference upright and refreshed paths', value: await measure() });
}
if (run('performance')) {
for (const options of [{ type: 'lr' }, { type: 'hybrid', hybridStartDepth: 2 }, { type: 'hybrid', hybridStartDepth: 3 }, { type: 'hybrid', hybridStartDepth: 4 }]) {
const started = Date.now(); await mount(template, { layoutMode: 'auto', displayMode: 'readOnly', autoLayout: options }); await ready(300);
const readyMs = Date.now() - started, mountMs = await page.evaluate(() => window.mountMs);
const toggle = page.locator('.node[data-organization-id="hanmac-division-0"] > .hm-orgchart-organization .hm-orgchart-expanded-toggle').first();
const collapseStarted = Date.now(); await toggle.press('Enter'); await ready(); const collapseMs = Date.now() - collapseStarted;
await toggle.press('Enter'); await ready(300);
const zoomStarted = Date.now(); await page.getByRole('button', { name: '확대', exact: true }).click(); await settle(); const zoomMs = Date.now() - zoomStarted;
const fitStarted = Date.now(); await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle(); const fitMs = Date.now() - fitStarted;
const value = await measure();
measurements.push({ name: '300 performance ' + JSON.stringify(options), mountMs, fullReadyMs: readyMs, collapseMs, zoomMs, fitMs, value });
check(value.cards.length === 300 && fit(value), '300 performance sample completes at full data: ' + JSON.stringify(options), { mountMs, fullReadyMs: readyMs, collapseMs, zoomMs, fitMs, heap: value.heap, domCount: value.domCount });
}
}
if (run('dialog-narrow')) {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto((process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6056') + '/iframe.html?id=orgchart--expanded-org-chart&viewMode=story'); await ready(20);
await page.locator('.hm-orgchart-employee').first().press('Enter'); const d = page.locator('[data-component="HMOrgChartEmployeeDialog"]'); await d.waitFor(); await settle();
const bounds = await d.evaluate(d => {
const r = d.getBoundingClientRect();
return { x: r.left, y: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height, scrollWidth: d.scrollWidth, clientWidth: d.clientWidth, fields: [...d.querySelectorAll('dd')].map(e => ({ text: e.textContent, scroll: e.scrollWidth, client: e.clientWidth })), active: d.contains(document.activeElement) };
});
check(bounds.x >= 0 && bounds.y >= 0 && bounds.right <= 390 && bounds.bottom <= 844 && bounds.scrollWidth <= bounds.clientWidth && bounds.fields.every(f => f.scroll <= f.client) && bounds.active, 'HM Dialog 390px: content, fields, focus fit viewport without horizontal overflow', bounds);
await screenshot('hm-dialog-390'); await page.keyboard.press('Escape'); await d.waitFor({ state: 'hidden' });
}
check(errors.length === 0, 'No new console or runtime errors', errors);
} catch (error) {
check(false, 'Verification runner completed', { message: error.message, stack: error.stack });
} finally {
const pass = results.filter(r => r.status === 'PASS').length;
const fail = results.filter(r => r.status === 'FAIL').length;
await fs.writeFile(path.join(output, only.length ? `browser-${only.join('-')}.json` : 'browser.json'), JSON.stringify({ pass, fail, results, errors, measurements, chrome: await browser.version() }, null, 2));
console.log(JSON.stringify({ pass, fail, errors: errors.length }));
await browser.close(); await new Promise(resolve => server.close(resolve));
process.exitCode = fail ? 1 : 0;
}
examples/org-chart/verify-p8.mjs
+376
View File
@@ -0,0 +1,376 @@
// P8 Storybook presentation-only browser checks. P7 units/full suites stay unrun.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p8');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6057').replace(/\/$/, '');
const sections = process.argv.slice(2);
const run = section => (!sections.length && !['full-repair', 'route-final'].includes(section)) || sections.includes(section);
const results = [], measurements = [], errors = [];
const startedAt = new Date().toISOString();
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, 'browser-progress.json'), JSON.stringify({ startedAt, origin, sections, results, measurements, errors }, null, 2));
function check(pass, name, detail) {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) });
persist();
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
}
const stories = [
{ id: 'orgchart--logo-personnel-summary', name: 'Overview', file: 'overview' },
{ id: 'orgchart--department-colors', name: 'Department Colors', file: 'department-colors' },
{ id: 'orgchart--full-composition', name: 'Full Composition', file: 'full-composition' },
{ id: 'orgchart--expanded-org-chart', name: 'Expanded OrgChart', file: 'expanded-org-chart' },
];
const patterns = ['patterns-data-filter-bar--all', 'patterns-layout-page-header--all', 'patterns-layout-loading-screen--all'];
const internalIds = [
'orgchart--logo', 'orgchart--position-summary', 'orgchart--affiliation-summary',
...['business-management', 'business-planning', 'talent-growth', 'integrated-system', 'design-planning', 'solution-sales', 'top-leader', 'organization-leader', 'employee'].map(name => 'orgchart-components-cards--' + name),
...['position-summary', 'affiliation-summary', 'status-summary'].map(name => 'orgchart-components-summaries--' + name),
...['basic-organization', 'organization-hierarchy', 'employee-cards', 'organization-summary', 'json-data-update', 'loading-empty-error', 'responsive-container', 'multiple-instances'].map(name => 'orgchart-content--' + name),
];
const browser = await launchChromium({ headless: true });
const context = await browser.newContext({ viewport: { width: 1440, height: 1100 } });
const page = await context.newPage();
context.on('page', p => {
p.on('pageerror', error => errors.push({ url: p.url(), type: 'pageerror', message: error.message }));
p.on('console', message => { if (message.type() === 'error') errors.push({ url: p.url(), type: 'console', message: message.text(), location: message.location() }); });
});
// The initial page predates the context event listener.
page.on('pageerror', error => errors.push({ url: page.url(), type: 'pageerror', message: error.message }));
page.on('console', message => { if (message.type() === 'error') errors.push({ url: page.url(), type: 'console', message: message.text(), location: message.location() }); });
page.setDefaultTimeout(20000);
async function settle(target = page) {
await target.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 5; i++) await new Promise(resolve => requestAnimationFrame(resolve)); });
}
async function ready(expected) {
await page.locator('.sb-page-title').waitFor();
await page.waitForFunction(expected => {
const hosts = [...document.querySelectorAll('.hm-orgchart-host,.hm-orgchart-component-host')];
if (!hosts.length) return false;
return hosts.every(host => {
const shadow = host.shadowRoot;
return shadow && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& !shadow.querySelector('[aria-busy="true"]')
&& (expected === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === expected);
});
}, expected);
await settle();
}
async function gotoStory(story, width = 1440) {
await page.setViewportSize({ width, height: 1100 });
await page.goto(`${origin}/iframe.html?id=${story.id}&viewMode=story`);
await ready(story.file === 'expanded-org-chart' ? 20 : undefined);
}
async function capture(file, fullPage = true) { await page.screenshot({ path: path.join(output, file + '.png'), fullPage }); }
async function section(name, work) {
if (!run(name)) return;
try { await work(); }
catch (error) { check(false, `${name}: runner completed`, { message: error.message, stack: error.stack }); }
}
async function commonStyle() {
return page.evaluate(() => {
const properties = {
'.sb-page': ['fontFamily', 'color', 'paddingTop', 'paddingBottom', 'boxSizing', 'width'],
'.sb-page-inner': ['width', 'boxSizing'],
'.sb-page-header': ['paddingBottom', 'borderBottomWidth', 'borderBottomColor', 'fontSize', 'lineHeight'],
'.sb-page-kicker': ['fontSize', 'fontWeight', 'color', 'marginBottom'],
'.sb-page-title': ['fontSize', 'fontWeight', 'lineHeight', 'marginTop', 'marginBottom'],
'.sb-page-description': ['fontSize', 'fontWeight', 'lineHeight', 'marginBottom'],
'.sb-page-section': ['marginTop', 'scrollMarginTop'],
'.sb-page-section-header': ['paddingBottom', 'marginBottom', 'borderBottomWidth', 'borderBottomColor'],
'.sb-page-section-title': ['fontSize', 'lineHeight', 'fontWeight', 'marginTop', 'marginBottom'],
'.sb-page-section-description': ['fontSize', 'lineHeight', 'fontWeight', 'marginTop', 'color'],
};
return Object.fromEntries(Object.entries(properties).map(([selector, keys]) => {
const element = document.querySelector(selector);
if (!element) return [selector, null];
const css = getComputedStyle(element);
const style = Object.fromEntries(keys.map(key => [key, css[key]]));
if (selector === '.sb-page-inner') {
// Chrome can expose auto margins as 0px after the Core's Typed OM
// ancestor inspection. Actual symmetric gutters are the user contract.
const outer = element.parentElement.getBoundingClientRect(), inner = element.getBoundingClientRect();
style.leftGutter = inner.left - outer.left;
style.rightGutter = outer.right - inner.right;
}
return [selector, style];
}));
});
}
async function pageGeometry() {
return page.evaluate(() => {
const rect = element => { if (!element) return null; const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
const documentGeometry = { scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth, innerWidth, scrollHeight: document.documentElement.scrollHeight, clientHeight: document.documentElement.clientHeight };
const frame = { page: rect(document.querySelector('.sb-page')), inner: rect(document.querySelector('.sb-page-inner')), title: document.querySelector('.sb-page-title')?.textContent };
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
const wrapper = shadow?.querySelector('.hm-orgchart-composition');
const stage = shadow?.querySelector('.hm-orgchart-stage');
const fixed = wrapper && stage ? {
wrapper: rect(wrapper), stage: rect(stage), baseWidth: stage.offsetWidth, baseHeight: stage.offsetHeight,
scale: Number(wrapper.dataset.scale), matrix: getComputedStyle(stage).transform,
scroll: ['.hm-orgchart-shell', '.hm-orgchart-content', '.hm-orgchart-composition', '.hm-orgchart-viewport'].map(selector => {
const element = shadow.querySelector(selector);
if (!element) return { selector, missing: true };
const css = getComputedStyle(element);
return { selector, clientWidth: element.clientWidth, scrollWidth: element.scrollWidth, clientHeight: element.clientHeight, scrollHeight: element.scrollHeight, scrollLeft: element.scrollLeft, scrollTop: element.scrollTop, overflowX: css.overflowX, overflowY: css.overflowY };
}),
visibleBounds: [...stage.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-organization,.hm-orgchart-summary,.hm-orgchart-logo,.hm-orgchart-workdesk-overlay')].map(element => ({ className: element.className, box: rect(element) })),
} : null;
return { document: documentGeometry, frame, fixed };
});
}
async function autoState() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const viewport = shadow.querySelector('.hm-orgchart-viewport'), forest = shadow.querySelector('.hm-orgchart-forest');
const rect = element => { const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
return { type: shadow.querySelector('.hm-orgchart-expanded')?.dataset.autoLayout, employees: shadow.querySelectorAll('.hm-orgchart-employee').length,
organizations: shadow.querySelectorAll('.node[data-depth]').length, scale: Number(viewport.dataset.scale), x: Number(viewport.dataset.panX), y: Number(viewport.dataset.panY),
viewport: rect(viewport), forest: rect(forest), zoomEnabled: viewport.dataset.zoomEnabled, panEnabled: viewport.dataset.panEnabled,
scroll: { left: viewport.scrollLeft, top: viewport.scrollTop, width: viewport.scrollWidth, clientWidth: viewport.clientWidth, height: viewport.scrollHeight, clientHeight: viewport.clientHeight } };
});
}
const autoFits = state => state.forest.x >= state.viewport.x - 1 && state.forest.y >= state.viewport.y - 1 && state.forest.right <= state.viewport.right + 1 && state.forest.bottom <= state.viewport.bottom + 1;
const fixedHasNoInternalScroll = fixed => fixed.scroll.filter(item => !item.missing).every(item => item.scrollLeft === 0 && item.scrollTop === 0 && (
item.selector === '.hm-orgchart-composition'
? item.overflowX === 'hidden' && item.overflowY === 'hidden'
: item.scrollWidth <= item.clientWidth + 1 && item.scrollHeight <= item.clientHeight + 1
));
async function select(label, option) {
await page.getByRole('combobox', { name: label, exact: true }).click();
await page.getByRole('option', { name: option, exact: true }).click();
await settle();
}
try {
await section('manager', async () => {
const response = await page.request.get(origin + '/index.json');
check(response.ok(), 'Storybook index responds', { status: response.status() });
const index = await response.json();
await fs.writeFile(path.join(output, 'story-index.json'), JSON.stringify(index, null, 2));
const entries = Object.values(index.entries);
const publicEntries = entries.filter(entry => (entry.title === 'OrgChart' || entry.title.startsWith('OrgChart/')) && entry.type === 'story' && !entry.tags?.some(tag => ['internal', 'verification'].includes(tag)));
check(publicEntries.length === 4 && stories.every(story => publicEntries.some(entry => entry.id === story.id && entry.name === story.name)), 'Exactly four public names and original Story IDs', publicEntries.map(({ id, name, title, tags }) => ({ id, name, title, tags })));
check(internalIds.every(id => index.entries[id]?.tags?.includes('internal')), 'Existing internal Story IDs retained', { expected: internalIds, missingOrPublic: internalIds.filter(id => !index.entries[id]?.tags?.includes('internal')) });
check(new Set(entries.map(entry => entry.id)).size === entries.length, 'Story index contains no duplicate IDs');
const manager = await context.newPage();
await manager.goto(`${origin}/?path=/story/${stories[0].id}`);
await manager.locator('#storybook-explorer-tree').waitFor();
await manager.locator(`#storybook-explorer-tree a[id="${stories[0].id}"]`).waitFor();
await manager.waitForFunction(() => [...document.querySelectorAll('#storybook-explorer-tree [data-item-id]')].some(row => row.dataset.itemId === 'orgchart' && row.dataset.hmDepth === '0'));
await manager.waitForFunction(() => {
const preview = document.querySelector('#storybook-preview-iframe')?.contentDocument;
const hosts = [...preview?.querySelectorAll('.hm-orgchart-component-host') ?? []];
return preview?.querySelector('.sb-page-title')?.textContent === 'Overview' && hosts.length > 0
&& hosts.every(host => host.shadowRoot && [...host.shadowRoot.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet));
});
await manager.frameLocator('#storybook-preview-iframe').locator('.sb-page-title').evaluate(async element => {
const document = element.ownerDocument, view = document.defaultView;
await document.fonts.ready;
for (let i = 0; i < 5; i++) await new Promise(resolve => view.requestAnimationFrame(resolve));
});
await settle(manager);
const sidebar = await manager.evaluate(() => [...document.querySelectorAll('#storybook-explorer-tree [data-item-id]')].map(row => {
const primary = row.querySelector(':scope > a[id],:scope > button[id]');
const label = primary?.querySelector('.hm-manager-label')?.textContent ?? primary?.textContent ?? row.querySelector(':scope > button')?.textContent ?? row.textContent;
return { id: row.dataset.itemId, text: label?.trim(), depth: Number(row.dataset.hmDepth), section: row.dataset.hmSection, type: row.dataset.nodetype, href: primary?.getAttribute('href'), visible: row.getBoundingClientRect().height > 0 };
}));
await fs.writeFile(path.join(output, 'manager-sidebar.json'), JSON.stringify(sidebar, null, 2));
const roots = sidebar.filter(row => row.depth === 0 && row.visible);
const patternsRoot = roots.findIndex(row => row.id === 'patterns'), orgRoot = roots.findIndex(row => row.id === 'orgchart'), centerRoot = roots.findIndex(row => row.id === 'center-graphic');
check(patternsRoot >= 0 && orgRoot === patternsRoot + 1 && centerRoot === orgRoot + 1, 'OrgChart is between Patterns and Center Graphic at manager depth 0', roots);
const publicRows = sidebar.filter(row => stories.some(story => story.id === row.id));
check(JSON.stringify(publicRows.map(row => row.text)) === JSON.stringify(stories.map(story => story.name)) && publicRows.every(row => row.depth === 1), 'Four manager pages follow requested order at one child depth', publicRows);
check(sidebar.filter(row => row.id.startsWith('orgchart--')).length === 4 && internalIds.every(id => !sidebar.some(row => row.id === id)), 'Internal pages remain default hidden with no duplicate public row');
const sidebarHeight = await manager.locator('#storybook-sidebar-region').evaluate(element => Math.max(element.scrollHeight, ...[...element.querySelectorAll('[data-radix-scroll-area-content]')].map(item => item.scrollHeight)));
await manager.setViewportSize({ width: 1440, height: Math.max(1100, Math.min(2400, sidebarHeight + 100)) });
await settle(manager);
await manager.screenshot({ path: path.join(output, 'manager-full-sidebar.png'), fullPage: true });
await manager.locator('#storybook-sidebar-region').screenshot({ path: path.join(output, 'manager-sidebar.png') });
await manager.close();
});
await section('route-final', async () => {
const expected = {
overview: { hosts: 3, selectors: ['[data-component="Logo"]', '[data-component="PositionSummary"]', '[data-component="AffiliationSummary"]'] },
'department-colors': { hosts: 1, selectors: ['[data-component="DepartmentColors"]', '.hm-orgchart-employee'] },
'full-composition': { hosts: 1, selectors: ['.hm-orgchart-composition', '.hm-orgchart-stage', '.hm-orgchart-employee'] },
'expanded-org-chart': { hosts: 1, selectors: ['.hm-orgchart-expanded', '.hm-orgchart-viewport', '.hm-orgchart-employee'] },
};
for (const story of stories) {
await gotoStory(story);
const rendered = await page.evaluate(({ selectors }) => {
const hosts = [...document.querySelectorAll('.hm-orgchart-host,.hm-orgchart-component-host')];
return { title: document.querySelector('.sb-page-title')?.textContent, hosts: hosts.length,
specimens: Object.fromEntries(selectors.map(selector => [selector, hosts.reduce((total, host) => total + host.shadowRoot.querySelectorAll(selector).length, 0)])),
employees: hosts.reduce((total, host) => total + host.shadowRoot.querySelectorAll('.hm-orgchart-employee').length, 0),
autoLayout: hosts.find(host => host.classList.contains('hm-orgchart-host'))?.shadowRoot.querySelector('.hm-orgchart-expanded')?.dataset.autoLayout };
}, expected[story.file]);
check(rendered.title === story.name && rendered.hosts === expected[story.file].hosts && Object.values(rendered.specimens).every(count => count > 0)
&& (story.file !== 'expanded-org-chart' || (rendered.employees === 20 && rendered.autoLayout === 'tb')), `${story.name}: final CSF old URL loads expected Core specimens`, { url: page.url(), ...rendered });
measurements.push({ name: story.name + ' final retained route', rendered });
await capture(story.file + '-1440');
}
});
await section('styles', async () => {
const references = [];
for (const id of patterns) {
await page.setViewportSize({ width: 1440, height: 1100 });
await page.goto(`${origin}/iframe.html?id=${id}&viewMode=story`);
await page.locator('.sb-page-title').waitFor(); await settle();
references.push({ id, style: await commonStyle() });
}
const reference = references[0].style;
check(references.every(item => JSON.stringify(item.style) === JSON.stringify(reference)), 'Three existing Pattern pages share the measured StoryPage frame', references);
for (const story of stories) {
await gotoStory(story);
const style = await commonStyle();
measurements.push({ name: story.name + ' common StoryPage computed styles', style });
check(JSON.stringify(style) === JSON.stringify(reference), story.name + ': StoryPage title, spacing, section and inner styles match Pattern pages', { reference: patterns[0], difference: Object.keys(reference).filter(key => JSON.stringify(reference[key]) !== JSON.stringify(style[key])), style });
await capture(story.file + '-1440');
if (['full-composition', 'expanded-org-chart'].includes(story.file)) {
const shielding = await page.evaluate(() => {
const pageFrame = document.querySelector('.sb-page');
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const keys = ['fontFamily', 'fontSize', 'lineHeight', 'color', 'backgroundColor', 'backgroundImage', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRadius', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'width', 'height'];
const snapshot = () => ['.hm-orgchart-employee', '.hm-orgchart-organization', '.hm-orgchart-organization-name', '.hm-orgchart-person-name', '.hm-orgchart-summary'].flatMap(selector => [...shadow.querySelectorAll(selector)].map(element => ({ selector, id: element.dataset.employeeId ?? element.dataset.organizationId, style: Object.fromEntries(keys.map(key => [key, getComputedStyle(element)[key]])) })));
const withFrame = snapshot(), previous = pageFrame.className;
try { pageFrame.className = ''; return { withFrame, withoutFrame: snapshot() }; }
finally { pageFrame.className = previous; }
});
check(JSON.stringify(shielding.withFrame) === JSON.stringify(shielding.withoutFrame), story.name + ': StoryPage frame does not override Core shadow typography, colors, borders or dimensions', { elements: shielding.withFrame.length, changed: shielding.withFrame.filter((value, index) => JSON.stringify(value) !== JSON.stringify(shielding.withoutFrame[index])) });
await settle();
}
}
});
await section('widths', async () => {
for (const story of stories) for (const width of [390, 768, 1280, 1440]) {
await gotoStory(story, width);
const geometry = await pageGeometry();
measurements.push({ name: `${story.name} ${width}px`, geometry });
check(geometry.document.scrollWidth <= geometry.document.clientWidth + 1 && geometry.document.scrollWidth <= width + 1, `${story.name} ${width}px: no document horizontal overflow`, geometry.document);
check(geometry.frame.title === story.name, `${story.name} ${width}px: direct URL renders requested page`, { url: page.url(), title: geometry.frame.title });
if (geometry.fixed) {
const fixed = geometry.fixed;
const matrix = fixed.matrix === 'none' ? [1, 0, 0, 1] : fixed.matrix.slice(7, -1).split(',').map(Number);
const uniform = Math.abs(matrix[0] - matrix[3]) < 0.0001 && Math.abs(matrix[1]) < 0.0001 && Math.abs(matrix[2]) < 0.0001;
const bounds = fixed.stage.x >= fixed.wrapper.x - 1 && fixed.stage.y >= fixed.wrapper.y - 1 && fixed.stage.right <= fixed.wrapper.right + 1 && fixed.stage.bottom <= fixed.wrapper.bottom + 1;
const noScroll = fixedHasNoInternalScroll(fixed);
check(fixed.scale > 0 && fixed.scale <= 1 && uniform && Math.abs(fixed.stage.width / fixed.baseWidth - matrix[0]) < 0.001 && Math.abs(fixed.stage.height / fixed.baseHeight - matrix[3]) < 0.001 && bounds, `Full Composition ${width}px: uniform scale and entire stage fit content wrapper`, fixed);
check(noScroll, `Full Composition ${width}px: no internal horizontal or vertical scroll`, { note: 'The overflow-hidden composition retains unscaled transformed extents in CSSOM; complete visible stage bounds are checked separately.', scroll: fixed.scroll });
check(fixed.visibleBounds.every(({ box }) => box.x >= fixed.stage.x - 1 && box.y >= fixed.stage.y - 1 && box.right <= fixed.stage.right + 1 && box.bottom <= fixed.stage.bottom + 1), `Full Composition ${width}px: cards and summaries remain inside complete stage`, fixed.visibleBounds);
}
if (width === 390) await capture(story.file + '-390');
}
});
await section('full-repair', async () => {
await page.setViewportSize({ width: 1440, height: 1100 });
await page.goto(`${origin}/iframe.html?id=${patterns[0]}&viewMode=story`);
await page.locator('.sb-page-title').waitFor(); await settle();
const reference = await commonStyle();
await gotoStory(stories[2]);
const style = await commonStyle();
const inspection = await page.evaluate(() => ['.sb-page', '.sb-page-inner'].map(selector => {
const element = document.querySelector(selector), css = getComputedStyle(element), rect = element.getBoundingClientRect();
return { selector, display: css.display, marginLeft: css.marginLeft, marginRight: css.marginRight, marginInline: css.marginInline, rect: { x: rect.x, y: rect.y, width: rect.width, right: rect.right }, inline: element.getAttribute('style') };
}));
check(JSON.stringify(style) === JSON.stringify(reference), 'Full Composition repair: common styles and actual centered gutters match existing Pattern', { style, inspection, reference });
await capture('full-composition-1440');
for (const width of [390, 768, 1280, 1440]) {
await gotoStory(stories[2], width);
const before = await pageGeometry();
const wrapper = await page.locator('.hm-orgchart-composition').boundingBox();
await page.mouse.move(wrapper.x + wrapper.width / 2, wrapper.y + Math.min(30, wrapper.height / 2));
await page.mouse.wheel(80, 80); await settle();
const after = await pageGeometry();
const fixed = after.fixed;
const bounds = fixed.stage.x >= fixed.wrapper.x - 1 && fixed.stage.y >= fixed.wrapper.y - 1 && fixed.stage.right <= fixed.wrapper.right + 1 && fixed.stage.bottom <= fixed.wrapper.bottom + 1;
check(fixedHasNoInternalScroll(fixed) && bounds && fixed.visibleBounds.every(({ box }) => box.x >= fixed.stage.x - 1 && box.y >= fixed.stage.y - 1 && box.right <= fixed.stage.right + 1 && box.bottom <= fixed.stage.bottom + 1), `Full Composition repair ${width}px: no wheel-scroll area or clipped transformed contents`, { before: before.fixed.scroll, after: fixed.scroll, wrapper: fixed.wrapper, stage: fixed.stage, document: after.document });
measurements.push({ name: `Full Composition repair ${width}px`, geometry: after });
}
});
await section('smoke', async () => {
await gotoStory(stories[3]);
for (const label of ['데이터 범위', '전체 직원 수', '조직도 표시 유형', '혼합형 시작 Depth', '특정 그룹 세로 배치', '초기 표시 Depth', '직원 정보 팝업']) check(await page.getByRole('combobox', { name: label, exact: true }).count() === 1, `Expanded: ${label} control preserved`);
for (const label of ['접기·펼치기 사용', 'Zoom 사용', 'Pan 사용']) check(await page.getByRole('checkbox', { name: label, exact: true }).isChecked(), `Expanded: independent ${label} control enabled`);
check(await page.getByRole('checkbox').count() === 10 && await page.getByRole('button', { name: '데이터 적용', exact: true }).count() === 1 && await page.getByRole('button', { name: '초기화', exact: true }).count() === 1, 'Expanded: seven company selections and apply/reset actions preserved');
await select('전체 직원 수', '100명');
check((await autoState()).employees === 20, 'Expanded: draft count waits for data apply');
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(100);
check((await autoState()).employees === 100 && (await page.locator('[data-component="OrgChartExampleCounts"]').textContent()).includes('100'), 'Expanded: data apply renders 100 employee records');
for (const [option, type] of [['세로형 TB', 'tb'], ['가로형 LR', 'lr'], ['혼합형 Hybrid', 'hybrid']]) {
await select('조직도 표시 유형', option); await ready(100);
const state = await autoState();
check(state.type === type && state.employees === 100 && autoFits(state), `Expanded: ${type} switch preserves data and Fit`, state);
}
await select('초기 표시 Depth', '2Depth까지'); await ready();
const depths = await page.locator('.node[data-depth]').evaluateAll(nodes => nodes.map(node => Number(node.dataset.depth)));
check(depths.every(depth => depth < 2), 'Expanded: initial Depth control still limits visible groups', depths);
await select('초기 표시 Depth', '전체 펼침'); await ready(100);
const beforeCollapse = await autoState();
const toggle = page.locator('.hm-orgchart-expanded-toggle').first();
const organizationId = await toggle.getAttribute('data-organization-id');
await toggle.focus(); await toggle.press('Enter'); await ready();
const collapsed = await autoState();
check(await toggle.getAttribute('aria-expanded') === 'false' && collapsed.organizations < beforeCollapse.organizations && collapsed.employees < beforeCollapse.employees, 'Expanded: Enter collapses a group and its descendants', { organizationId, before: beforeCollapse, after: collapsed });
await page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${organizationId}"]`).press('Space'); await ready(100);
check(await page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${organizationId}"]`).getAttribute('aria-expanded') === 'true', 'Expanded: Space expands the same group');
await page.getByRole('checkbox', { name: 'Zoom 사용', exact: true }).uncheck(); await ready();
check((await autoState()).zoomEnabled === 'false' && await page.getByRole('button', { name: '확대', exact: true }).isDisabled(), 'Expanded: independent Zoom switch disables only Zoom action');
await page.getByRole('checkbox', { name: 'Zoom 사용', exact: true }).check(); await ready();
await page.getByRole('button', { name: '100% 복원', exact: true }).click();
const beforeZoom = await autoState();
await page.getByRole('button', { name: '확대', exact: true }).click(); await settle();
check((await autoState()).scale > beforeZoom.scale, 'Expanded: Zoom changes actual forest scale');
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
const beforePan = await autoState();
await page.locator('.hm-orgchart-viewport').scrollIntoViewIfNeeded();
const viewport = await page.locator('.hm-orgchart-viewport').boundingBox();
await page.mouse.move(viewport.x + 10, viewport.y + 10); await page.mouse.down(); await page.mouse.move(viewport.x + 50, viewport.y + 35); await page.mouse.up(); await settle();
const afterPan = await autoState();
check(afterPan.x !== beforePan.x && afterPan.y !== beforePan.y, 'Expanded: pointer Pan changes both forest coordinates', { before: beforePan, after: afterPan });
await page.getByRole('checkbox', { name: 'Pan 사용', exact: true }).uncheck(); await ready();
check((await autoState()).panEnabled === 'false' && (await autoState()).zoomEnabled === 'true', 'Expanded: independent Pan switch leaves Zoom enabled');
await page.getByRole('checkbox', { name: 'Pan 사용', exact: true }).check(); await ready();
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
check(autoFits(await autoState()), 'Expanded: toolbar Fit contains complete forest');
const employee = page.locator('.hm-orgchart-employee').first(), employeeId = await employee.getAttribute('data-employee-id');
await employee.focus(); await employee.press('Enter');
const dialog = page.locator('[data-component="HMOrgChartEmployeeDialog"]');
await dialog.waitFor({ state: 'visible' }); await settle();
const popup = await dialog.evaluate(element => ({ role: element.getAttribute('role'), employeeId: element.dataset.employeeId, portal: element.parentElement === document.body, focusInside: element.contains(document.activeElement), text: element.textContent, box: (() => { const r = element.getBoundingClientRect(); return { x: r.x, right: r.right, width: r.width }; })() }));
check(popup.role === 'dialog' && popup.employeeId === employeeId && popup.portal && popup.focusInside && await page.getByRole('dialog').count() === 1 && await page.locator('dialog[open]').count() === 0, 'Expanded: actual single HM Dialog with exact employee and Portal focus', popup);
await page.keyboard.press('Tab'); await page.keyboard.press('Shift+Tab');
check(await dialog.evaluate(element => element.contains(document.activeElement)), 'Expanded: HM Dialog traps Tab focus');
await capture('expanded-hm-dialog', false);
await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'hidden' }); await settle();
const focusedEmployee = () => page.evaluate(() => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId);
check(await focusedEmployee() === employeeId, 'Expanded: ESC closes HM Dialog and returns employee focus');
await employee.press('Space'); await dialog.waitFor({ state: 'visible' });
await dialog.getByRole('button', { name: '닫기', exact: true }).click(); await dialog.waitFor({ state: 'hidden' }); await settle();
check(await focusedEmployee() === employeeId, 'Expanded: HM close button returns employee focus');
await page.setViewportSize({ width: 390, height: 844 }); await settle();
await employee.focus(); await employee.press('Enter'); await dialog.waitFor({ state: 'visible' }); await settle();
const narrow = await dialog.evaluate(element => { const r = element.getBoundingClientRect(); return { x: r.x, right: r.right, width: r.width, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, documentScrollWidth: document.documentElement.scrollWidth, innerWidth }; });
check(narrow.x >= -1 && narrow.right <= 391 && narrow.scrollWidth <= narrow.clientWidth + 1 && narrow.documentScrollWidth <= 390, 'Expanded: actual HM Dialog fits 390px', narrow);
await capture('expanded-hm-dialog-390', false);
await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'hidden' });
// Department Colors remains a live Core specimen with its original option.
await gotoStory(stories[1]);
const longNameButton = page.getByRole('button', { name: '긴 이름 검증 시작', exact: true });
await longNameButton.click(); await ready();
check(await page.getByRole('button', { name: '긴 이름 검증 종료', exact: true }).getAttribute('aria-pressed') === 'true' && await page.locator('.hm-orgchart-person-name').filter({ hasText: '아주긴가상이름표시검증사례' }).count() > 0, 'Department Colors: original long-name specimen option remains functional');
});
} finally {
check(errors.length === 0, 'No new browser page or console errors', errors);
const result = { startedAt, completedAt: new Date().toISOString(), origin, sections, browser: browser.version(), results, measurements, errors, pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length,
limitations: ['Historical P7 units/full suites were not repeated.', 'Common computed styles prove runtime parity; design intent approval remains separate.', 'Document vertical scrolling caused by StoryPage text is reported separately from internal chart scrolling.', 'The smoke checks are a narrow regression sample, not full option-combination or accessibility certification.'] };
const suffix = sections.length ? '-' + sections.join('-') : '';
await fs.writeFile(path.join(output, `browser${suffix}.json`), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p8/browser${suffix}.json` }));
await context.close(); await browser.close();
if (result.fail) process.exitCode = 1;
}
examples/org-chart/verify-p9-1.mjs
+280
View File
@@ -0,0 +1,280 @@
// Focused P9.1 before/after evidence. Does not repeat P7-P9 or interact with Expanded.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-1');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6061').replace(/\/$/, '');
const baselineMode = process.argv.includes('--baseline');
const resizeOnly = process.argv.includes('--resize-only');
const sizes = [{ width: 1920, height: 1080 }, { width: 1440, height: 900 }, { width: 390, height: 844 }];
const stories = { department: 'orgchart--department-colors', fixed: 'orgchart--full-composition' };
const publicStories = ['orgchart--logo-personnel-summary', ...Object.values(stories), 'orgchart--expanded-org-chart'];
const startedAt = new Date().toISOString(), results = [], snapshots = {}, errors = [];
await fs.mkdir(output, { recursive: true });
const progressFile = path.join(output, resizeOnly ? 'browser-resize-progress.json' : baselineMode ? 'browser-baseline-progress.json' : 'browser-progress.json');
const persist = () => writeFileSync(progressFile, JSON.stringify({ startedAt, origin, baselineMode, resizeOnly, results, snapshots, errors }, null, 2));
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) });
persist();
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const equal = (a, b) => JSON.stringify(a) === JSON.stringify(b);
const near = (a, b, tolerance = 0.15) => a && b && Object.keys(a).every(key => Math.abs(a[key] - b[key]) <= tolerance);
const contains = (outer, inner, tolerance = 1) => outer && inner && inner.x >= outer.x - tolerance && inner.y >= outer.y - tolerance && inner.right <= outer.right + tolerance && inner.bottom <= outer.bottom + tolerance;
const browser = await launchChromium({ headless: true });
const context = await browser.newContext({ viewport: sizes[0] });
context.on('page', target => {
target.on('pageerror', error => { errors.push({ type: 'pageerror', url: target.url(), message: error.message }); persist(); });
target.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', url: target.url(), message: message.text(), location: message.location() }); persist(); } });
});
const page = await context.newPage();
page.setDefaultTimeout(20000);
async function settle() {
await page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 8; i++) await new Promise(resolve => requestAnimationFrame(resolve)); });
}
async function goto(name, size) {
await page.setViewportSize(size);
await page.goto(`${origin}/iframe.html?id=${stories[name]}&viewMode=story`);
await page.locator('.sb-page-title').waitFor();
await page.waitForFunction(() => {
const hosts = [...document.querySelectorAll('.hm-orgchart-host,.hm-orgchart-component-host')];
return hosts.length === 1 && hosts.every(host => host.shadowRoot && !host.shadowRoot.querySelector('[aria-busy="true"]') && [...host.shadowRoot.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet));
});
// Force offscreen lazy placeholders to load in verification only. The same
// browser-only attribute is applied to both baseline and final DOM hashes.
await page.evaluate(async () => {
const shadow = document.querySelector('.hm-orgchart-host,.hm-orgchart-component-host').shadowRoot;
await Promise.all([...shadow.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode().catch(() => {}); }));
});
await page.waitForFunction(() => [...document.querySelector('.hm-orgchart-host,.hm-orgchart-component-host').shadowRoot.querySelectorAll('img')].every(image => image.complete && image.naturalWidth > 0));
await settle();
}
async function snapshot() {
return page.evaluate(async () => {
const host = document.querySelector('.hm-orgchart-host,.hm-orgchart-component-host');
const shadow = host?.shadowRoot;
const all = selector => [...(shadow?.querySelectorAll(selector) ?? [])];
const first = selector => shadow?.querySelector(selector);
const rect = element => {
if (!element) return null;
const r = element.getBoundingClientRect();
return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom };
};
const union = elements => {
const boxes = elements.map(rect).filter(box => box && box.width > 0 && box.height > 0);
if (!boxes.length) return null;
const x = Math.min(...boxes.map(box => box.x)), y = Math.min(...boxes.map(box => box.y));
const right = Math.max(...boxes.map(box => box.right)), bottom = Math.max(...boxes.map(box => box.bottom));
return { x, y, width: right - x, height: bottom - y, right, bottom };
};
const styleKeys = ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'backgroundColor', 'backgroundImage', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderRadius', 'boxShadow', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'width', 'height', 'minWidth', 'minHeight', 'textAlign', 'whiteSpace', 'overflowWrap', 'verticalAlign', 'objectFit', 'objectPosition', 'gap', 'rowGap', 'columnGap'];
const style = element => element ? Object.fromEntries(styleKeys.map(key => [key, getComputedStyle(element)[key]])) : null;
const hash = async input => [...new Uint8Array(await crypto.subtle.digest('SHA-256', typeof input === 'string' ? new TextEncoder().encode(input) : input))].map(byte => byte.toString(16).padStart(2, '0')).join('');
const assetHashes = new Map();
const assets = async element => Promise.all([...element.querySelectorAll('img')].map(async image => {
const url = image.currentSrc || image.src;
if (!assetHashes.has(url)) assetHashes.set(url, fetch(url).then(response => { if (!response.ok) throw new Error(`Asset HTTP ${response.status}: ${url.slice(0, 120)}`); return response.arrayBuffer(); }).then(hash));
return { hash: await assetHashes.get(url), naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight, loaded: image.complete && image.naturalWidth > 0 };
}));
const visible = element => { const r = rect(element); return r?.width > 0 && r.height > 0 && getComputedStyle(element).display !== 'none'; };
const scroll = element => {
if (!element) return null;
const css = getComputedStyle(element);
return { scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, scrollHeight: element.scrollHeight, clientHeight: element.clientHeight, left: element.scrollLeft, top: element.scrollTop, overflowX: css.overflowX, overflowY: css.overflowY };
};
const common = Object.fromEntries(['.sb-page', '.sb-page-inner', '.sb-page-title', '.sb-page-section-title', '.sb-page-section-header', '.sb-page-section-body'].map(selector => [selector, style(document.querySelector(selector))]));
// Page/section height is content-dependent; typography, borders and gutters are invariant.
for (const value of Object.values(common)) if (value) for (const key of ['height', 'minHeight']) delete value[key];
const documentScroll = { viewportWidth: innerWidth, viewportHeight: innerHeight, root: scroll(document.documentElement), body: scroll(document.body), scrollingElement: scroll(document.scrollingElement) };
const departmentRoot = first('.hm-orgchart-department-colors');
const departments = departmentRoot ? await Promise.all([...departmentRoot.querySelectorAll('.hm-orgchart-color-preview')].map(async row => {
const heading = row.querySelector('.hm-orgchart-color-department-name');
const preview = row.querySelector('.hm-orgchart-preview-grid');
const cards = [...row.querySelectorAll('.hm-orgchart-employee')];
const headingBox = rect(heading), cardBox = union(cards);
return {
name: heading?.textContent, box: rect(row), heading: headingBox, headingStyle: style(heading), preview: rect(preview), previewStyle: style(preview),
gap: headingBox && cardBox ? cardBox.y - headingBox.bottom : null,
visibleChildren: [...row.children].filter(visible).map(child => ({ tag: child.tagName, className: child.className })),
cards: await Promise.all(cards.map(async card => ({
kind: card.dataset.cardKind, width: card.offsetWidth, height: card.offsetHeight, box: rect(card), hash: await hash(card.outerHTML), assets: await assets(card),
subtree: [card, ...card.querySelectorAll('*')].map(child => ({ tag: child.tagName, className: typeof child.className === 'string' ? child.className : child.className?.baseVal, style: style(child) })),
}))),
};
})) : null;
const unwantedSelectors = '.hm-orgchart-color-legend,.hm-orgchart-contrast-note,.hm-orgchart-contrast-comparison,.hm-orgchart-card-caption,.hm-orgchart-representative-preview,.hm-orgchart-department-colors > p,.hm-orgchart-color-preview > p';
const unwanted = departmentRoot ? [...departmentRoot.querySelectorAll(unwantedSelectors)].filter(visible).map(element => ({ className: element.className, text: element.textContent.slice(0, 150) })) : [];
const wrapper = first('.hm-orgchart-composition'), stage = first('.hm-orgchart-stage');
let fixed = null;
if (stage) {
const stageBox = rect(stage), scale = stageBox.width / stage.offsetWidth;
const available = rect(document.querySelector('.hm-orgchart-story-full'));
const trees = all('.hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree');
// Measure rendered visible six-column content, never the full-width tree viewport.
const bodyElements = trees.flatMap(tree => [...tree.querySelectorAll('.hm-orgchart-organization-name,.hm-orgchart-employee')]);
const body = union(bodyElements);
const normalized = box => box ? { x: (box.x - stageBox.x) / scale, y: (box.y - stageBox.y) / scale, width: box.width / scale, height: box.height / scale } : null;
const selectors = '.hm-orgchart-employee,.hm-orgchart-organization-name,.hm-orgchart-organization-totals,.hm-orgchart-organization-totals-title,.hm-orgchart-workdesk-summary-frame,.hm-orgchart-workdesk-position-table,.hm-orgchart-workdesk-position-table th,.hm-orgchart-workdesk-position-table td,.hm-orgchart-slot-side,.hm-orgchart-slot-belowTree,.hm-orgchart-status-group,.hm-orgchart-summary-title,.hm-orgchart-slot-footer,.hm-orgchart-affiliation-bar,.hm-orgchart-affiliation-bar-item,.hm-orgchart-axis,.hm-orgchart-top-leaders,.hm-orgchart-hub,.hm-orgchart-workdesk-overlay,.hm-orgchart-workdesk-decoration';
const elements = [...stage.querySelectorAll(selectors)];
const invariants = await Promise.all(elements.map(async (element, index) => ({
key: `${element.tagName}:${typeof element.className === 'string' ? element.className : element.className.baseVal}:${element.dataset.employeeId ?? element.dataset.organizationId ?? element.dataset.contentSlot ?? element.dataset.workdeskDecoration ?? ''}:${index}`,
box: normalized(rect(element)), style: style(element), htmlHash: await hash(element.outerHTML),
})));
const collisionElements = [...stage.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-organization-name,.hm-orgchart-organization-totals,.hm-orgchart-affiliation-bar,.hm-orgchart-status-group > .hm-orgchart-summary-title')].filter(visible);
const collisions = [];
for (let i = 0; i < collisionElements.length; i++) for (let j = i + 1; j < collisionElements.length; j++) {
const a = collisionElements[i], b = collisionElements[j];
if (a.contains(b) || b.contains(a)) continue;
const ra = normalized(rect(a)), rb = normalized(rect(b));
const width = Math.min(ra.x + ra.width, rb.x + rb.width) - Math.max(ra.x, rb.x);
const height = Math.min(ra.y + ra.height, rb.y + rb.height) - Math.max(ra.y, rb.y);
if (width > 0.5 && height > 0.5) collisions.push({ pair: `${i}:${j}`, a: a.className, b: b.className, width, height });
}
const matrix = getComputedStyle(stage).transform.match(/matrix\(([^)]+)\)/)?.[1].split(',').map(Number);
fixed = {
scale, verticalScale: stageBox.height / parseFloat(getComputedStyle(stage).height), matrix, stage: stageBox, available, wrapper: rect(wrapper), host: rect(host), baseWidth: stage.offsetWidth, baseHeight: stage.offsetHeight, computedBaseWidth: parseFloat(getComputedStyle(stage).width), computedBaseHeight: parseFloat(getComputedStyle(stage).height),
treeCount: trees.length, body, bodyStage: normalized(body), bodyElementCount: bodyElements.length, bodyCenter: body?.x + body?.width / 2, availableCenter: available?.x + available?.width / 2,
centerDelta: body && available ? body.x + body.width / 2 - available.x - available.width / 2 : null,
htmlHash: await hash(stage.innerHTML), invariants, assets: await assets(stage), collisions,
scroll: ['.hm-orgchart-shell', '.hm-orgchart-content', '.hm-orgchart-composition', '.hm-orgchart-viewport'].map(selector => ({ selector, ...scroll(first(selector)) })),
allVisibleContained: bodyElements.every(element => { const b = rect(element); return b.x >= stageBox.x - 1 && b.y >= stageBox.y - 1 && b.right <= stageBox.right + 1 && b.bottom <= stageBox.bottom + 1; }),
};
}
return {
title: document.querySelector('.sb-page-title')?.textContent, common, documentScroll, departments, unwanted,
optionsPresent: [...document.querySelectorAll('button')].filter(visible).some(button => /긴 이름 검증/.test(button.textContent)),
sectionTitles: [...document.querySelectorAll('.sb-page-section-title')].map(element => element.textContent), fixed,
};
});
}
function documentFits(state, bothAxes) {
const d = state.documentScroll;
return [d.root, d.body, d.scrollingElement].filter(Boolean).every(value => value.scrollWidth <= d.viewportWidth + 1 && (!bothAxes || value.scrollHeight <= d.viewportHeight + 1));
}
function preserveDepartment(before, after) {
return before.departments?.length === after.departments?.length && after.departments.every((row, index) => {
const old = before.departments[index];
return row.name === old.name && equal(row.headingStyle, old.headingStyle) && row.cards.length === old.cards.length && row.cards.every((card, i) => equal({ kind: card.kind, width: card.width, height: card.height, hash: card.hash, assets: card.assets, subtree: card.subtree }, { kind: old.cards[i].kind, width: old.cards[i].width, height: old.cards[i].height, hash: old.cards[i].hash, assets: old.cards[i].assets, subtree: old.cards[i].subtree }));
});
}
function preserveFixed(before, after) {
return before.htmlHash === after.htmlHash && equal(before.assets, after.assets) && before.invariants.length === after.invariants.length && after.invariants.every((item, index) => {
const old = before.invariants[index];
return old.key === item.key && old.htmlHash === item.htmlHash && equal(old.style, item.style) && near(old.box, item.box);
});
}
let fatal;
try {
const baseline = baselineMode ? null : JSON.parse(await fs.readFile(path.join(output, 'visual-baseline.json'), 'utf8'));
if (resizeOnly) {
// Mount once; every following measurement reuses this exact document and
// proves ResizeObserver handles both viewport axes without a page reload.
await goto('fixed', sizes[1]);
snapshots.fixed = {};
for (const size of [sizes[0], sizes[2], { width: 1440, height: 640 }, sizes[1]]) {
await page.setViewportSize(size);
await page.waitForFunction(() => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
const available = document.querySelector('.hm-orgchart-story-full')?.getBoundingClientRect();
const elements = [...(shadow?.querySelectorAll('.hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree .hm-orgchart-organization-name,.hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree .hm-orgchart-employee') ?? [])];
if (!available || !elements.length) return false;
const boxes = elements.map(element => element.getBoundingClientRect());
const left = Math.min(...boxes.map(box => box.left)), right = Math.max(...boxes.map(box => box.right));
return Math.abs((left + right) / 2 - available.x - available.width / 2) <= 1;
});
await settle();
const state = await snapshot(), fixed = state.fixed, key = `${size.width}x${size.height}`;
const before = baseline.snapshots.fixed[size.width].fixed;
const stability = await page.evaluate(async () => {
const stage = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('.hm-orgchart-stage');
let styleMutations = 0;
const observer = new MutationObserver(records => { styleMutations += records.length; });
observer.observe(stage, { attributes: true, attributeFilter: ['style'] });
const signatures = [stage.getAttribute('style')];
for (let frame = 0; frame < 10; frame++) {
await new Promise(resolve => requestAnimationFrame(resolve));
signatures.push(stage.getAttribute('style'));
}
styleMutations += observer.takeRecords().length;
observer.disconnect();
return { frames: 10, styleMutations, stable: signatures.every(signature => signature === signatures[0]), signatures: [...new Set(signatures)] };
});
snapshots.fixed[key] = { ...state, stability };
check(fixed.treeCount === 6 && Math.abs(fixed.centerDelta) <= 1 && contains(fixed.available, fixed.stage) && contains(fixed.host, fixed.stage) && fixed.allVisibleContained && Math.abs(fixed.scale - fixed.verticalScale) <= 0.0001,
`Resize ${key}: six-group body stays centered and full stage fits with uniform scale`, { bodyCenter: fixed.bodyCenter, availableCenter: fixed.availableCenter, delta: fixed.centerDelta, scale: fixed.scale, verticalScale: fixed.verticalScale, stage: fixed.stage, available: fixed.available });
const offsets = await page.evaluate(() => ({ x: scrollX, y: scrollY }));
check(documentFits(state, true) && offsets.x === 0 && offsets.y === 0 && fixed.scroll.every(item => item.left === undefined || (item.left === 0 && item.top === 0)),
`Resize ${key}: no document overflow or document/internal scroll offsets`, { document: state.documentScroll, offsets, internal: fixed.scroll });
check(preserveFixed(before, fixed), `Resize ${key}: cards, connectors and statistics keep baseline stage-relative geometry and styles`, { beforeHTMLHash: before.htmlHash, afterHTMLHash: fixed.htmlHash, elementCount: fixed.invariants.length });
check(stability.stable && stability.styleMutations === 0, `Resize ${key}: stage style stops mutating over 10 animation frames`, stability);
await page.screenshot({ path: path.join(output, `after-resize-fixed-${key}.png`), fullPage: true });
}
} else {
for (const name of Object.keys(stories)) {
snapshots[name] = {};
for (const size of sizes) {
await goto(name, size);
const state = await snapshot();
snapshots[name][size.width] = state;
await page.screenshot({ path: path.join(output, `${baselineMode ? 'before' : 'after'}-${name}-${size.width}.png`), fullPage: true });
if (baselineMode) {
check(name === 'department' ? state.departments?.length === 6 : state.fixed?.treeCount === 6, `Baseline ${name} ${size.width}: six groups and actual browser geometry captured`);
continue;
}
const before = baseline.snapshots[name][size.width];
check(state.title === before.title && equal(state.common, before.common), `${name} ${size.width}: common StoryPage title, typography and gutters preserved`);
if (name === 'department') {
check(state.departments?.length === 6 && state.departments.every(row => row.name && row.cards.length === 2 && row.cards.some(card => card.kind === 'leader') && row.cards.some(card => card.kind === 'employee')), `Department ${size.width}: six titles, 1Depth large leaders and 2Depth small employee cards`, state.departments?.map(row => ({ name: row.name, cards: row.cards.map(card => ({ kind: card.kind, width: card.width, height: card.height })) })));
check(state.unwanted.length === 0 && !state.optionsPresent && !state.sectionTitles.includes('표시 옵션') && state.departments.every(row => row.visibleChildren.length === 2), `Department ${size.width}: descriptions, provenance, legends, contrast and captions removed`, { unwanted: state.unwanted, optionsPresent: state.optionsPresent, sections: state.sectionTitles, children: state.departments.map(row => row.visibleChildren) });
check(preserveDepartment(before, state), `Department ${size.width}: exact existing header colors/gradient, card DOM, assets, typography and computed styles preserved`);
check(state.departments.every(row => row.gap >= 1 && row.cards.every(card => contains(row.box, card.box)) && contains(row.box, row.heading)), `Department ${size.width}: header/card separation and complete card containment`, state.departments.map(row => ({ name: row.name, beforeGap: before.departments.find(old => old.name === row.name)?.gap, afterGap: row.gap })));
check(state.departments.every((row, i, rows) => rows.every((other, j) => i === j || Math.abs(row.box.y - other.box.y) > 1 || Math.abs(row.preview.y - other.preview.y) <= 1)), `Department ${size.width}: card starts align across each shared desktop row`);
check(documentFits(state, false), `Department ${size.width}: no document horizontal overflow`, state.documentScroll);
} else {
const fixed = state.fixed, old = before.fixed;
check(fixed.treeCount === 6 && Math.abs(fixed.centerDelta) <= 1, `Full Composition ${size.width}: actual six-group body centered in available Storybook region`, { before: { bodyCenter: old.bodyCenter, availableCenter: old.availableCenter, delta: old.centerDelta, bounds: old.body }, after: { bodyCenter: fixed.bodyCenter, availableCenter: fixed.availableCenter, delta: fixed.centerDelta, bounds: fixed.body } });
check(fixed.baseWidth === 1920 && fixed.baseHeight === 915 && Math.abs(fixed.computedBaseHeight - 914.5) <= 0.02 && fixed.scale > 0 && fixed.scale <= 1 && Math.abs(fixed.scale - fixed.verticalScale) <= 0.0001 && fixed.matrix && Math.abs(fixed.matrix[0] - fixed.matrix[3]) <= 0.0001 && contains(fixed.available, fixed.stage) && contains(fixed.host, fixed.stage) && fixed.allVisibleContained, `Full Composition ${size.width}: original 1920 x 914.5 canvas fully fits with uniform scale`, { scale: fixed.scale, verticalScale: fixed.verticalScale, matrix: fixed.matrix, stage: fixed.stage, available: fixed.available, host: fixed.host, naturalSize: [fixed.baseWidth, fixed.baseHeight], computedBaseHeight: fixed.computedBaseHeight });
check(preserveFixed(old, fixed), `Full Composition ${size.width}: all stage-relative cards, headers, axis, connectors, decorations, side/status/footer geometry and styles preserved`, { beforeHTMLHash: old.htmlHash, afterHTMLHash: fixed.htmlHash, elementCount: fixed.invariants.length, assetCount: fixed.assets.length });
const newCollisions = fixed.collisions.filter(collision => !old.collisions.some(previous => previous.pair === collision.pair));
check(newCollisions.length === 0, `Full Composition ${size.width}: no new card/header/statistics overlaps`, { baselineOverlapCount: old.collisions.length, afterOverlapCount: fixed.collisions.length, newCollisions });
// Transformed fixed-size child layout can retain an unscaled scrollWidth
// in the existing hidden fit shell. Full painted-stage containment is
// separately mandatory; only unchanged hidden-shell overflow is exempt.
const internalFits = fixed.scroll.every((item, index) => item.scrollWidth === undefined || (item.left === 0 && item.top === 0
&& (item.scrollWidth <= item.clientWidth + 1 || (item.overflowX === 'hidden' && old.scroll[index].overflowX === 'hidden'))
&& (item.scrollHeight <= item.clientHeight + 1 || (item.overflowY === 'hidden' && old.scroll[index].overflowY === 'hidden'))));
check(documentFits(state, true) && internalFits, `Full Composition ${size.width}: no document or internal horizontal/vertical scroll`, { document: state.documentScroll, internal: fixed.scroll });
const wheelBefore = await page.evaluate(() => ({ x: scrollX, y: scrollY }));
await page.mouse.move(fixed.available.x + fixed.available.width / 2, fixed.available.y + Math.min(40, fixed.available.height / 2));
await page.mouse.wheel(120, 120);
await settle();
const wheelAfter = await page.evaluate(() => ({ x: scrollX, y: scrollY }));
check(equal(wheelBefore, wheelAfter), `Full Composition ${size.width}: wheel does not scroll document`, { before: wheelBefore, after: wheelAfter });
}
}
}
if (!baselineMode) {
const response = await page.request.get(`${origin}/index.json`), index = await response.json();
const entries = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title.startsWith('OrgChart/') && !(entry.tags ?? []).includes('internal'));
check(entries.length === 4 && equal(entries.map(entry => entry.id).sort(), publicStories.sort()), 'Storybook: all four public OrgChart menu entries retained', entries.map(entry => ({ id: entry.id, title: entry.title, name: entry.name })));
}
}
} catch (error) {
fatal = { message: error.message, stack: error.stack };
check(false, 'Focused P9.1 runner completed', fatal);
} finally {
check(errors.length === 0, 'No browser console or page errors', errors);
const result = { startedAt, completedAt: new Date().toISOString(), origin, browser: browser.version(), baselineMode, resizeOnly, sizes, results, snapshots, errors, fatal, pass: results.filter(result => result.status === 'PASS').length, fail: results.filter(result => result.status === 'FAIL').length,
limitations: ['Only the two P9.1 pages and public Storybook index checked; Expanded interactions and historical P7-P9 suites were not repeated.', 'Browser rendering and computed style preservation do not replace user design approval.', 'Other browsers, real devices, screen readers and production deployment remain NOT VERIFIED.'] };
const resultName = resizeOnly ? 'browser-resize.json' : baselineMode ? 'visual-baseline.json' : 'browser.json';
await fs.writeFile(path.join(output, resultName), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p9-1/${resultName}`, centers: Object.entries(snapshots.fixed ?? {}).map(([viewport, state]) => ({ viewport, bodyCenter: state.fixed?.bodyCenter, availableCenter: state.fixed?.availableCenter, delta: state.fixed?.centerDelta })) }));
await context.close();
await browser.close();
if (result.fail) process.exitCode = 1;
}
examples/org-chart/verify-p9-2-composition.mjs
+150
View File
@@ -0,0 +1,150 @@
// P9.2 only: measure the actual visible Content Wrapper and the entire scaled Stage.
// --baseline captures P9.1 without asserting its centering; the final run compares invariants.
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-2');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6062').replace(/\/$/, '');
const baselineMode = process.argv.includes('--baseline');
const prefix = baselineMode ? 'before' : 'after';
const sizes = [{ width: 1920, height: 1080 }, { width: 1440, height: 900 }, { width: 390, height: 844 }];
const startedAt = new Date().toISOString(), results = [], snapshots = {}, errors = [];
await fs.mkdir(output, { recursive: true });
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: sizes[0] });
page.on('pageerror', error => errors.push({ type: 'pageerror', message: error.message }));
page.on('console', message => { if (message.type() === 'error') errors.push({ type: 'console', message: message.text() }); });
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', detail });
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const contains = (a, b, tolerance = 1) => b.left >= a.left - tolerance && b.right <= a.right + tolerance && b.top >= a.top - tolerance && b.bottom <= a.bottom + tolerance;
const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
const near = (a, b) => Object.keys(a).every(key => Math.abs(a[key] - b[key]) <= .15);
const preserved = (a, b) => a && a.htmlHash === b.htmlHash && same(a.assets, b.assets) && a.elements.length === b.elements.length && b.elements.every((item, i) => {
const old = a.elements[i]; return old.key === item.key && old.hash === item.hash && same(old.style, item.style) && near(old.box, item.box);
});
async function settle() {
await page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 12; i++) await new Promise(resolve => requestAnimationFrame(resolve)); });
}
async function open(size) {
await page.setViewportSize(size);
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);
await page.locator('.sb-page-title').waitFor();
await page.waitForFunction(() => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow?.querySelector('.hm-orgchart-stage[data-workdesk-artwork]') && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet);
});
await page.evaluate(async () => {
await Promise.all([...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode(); }));
});
await settle();
}
async function snapshot() {
return page.evaluate(async () => {
const wrapper = document.querySelector('.hm-orgchart-story-full');
const shadowHost = wrapper.querySelector('.hm-orgchart-host');
const shadow = shadowHost.shadowRoot;
const scaleWrapper = shadow.querySelector('.hm-orgchart-composition');
const stage = shadow.querySelector('.hm-orgchart-stage[data-workdesk-artwork]');
const rect = element => { const r = element.getBoundingClientRect(); return Object.fromEntries(['left', 'right', 'top', 'bottom', 'width', 'height'].map(key => [key, r[key]])); };
const css = getComputedStyle(wrapper), wb = rect(wrapper), sb = rect(stage), sc = getComputedStyle(stage);
const inset = Object.fromEntries(['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth'].map(key => [key, parseFloat(css[key]) || 0]));
const content = {
left: wb.left + inset.borderLeftWidth + inset.paddingLeft,
right: wb.right - inset.borderRightWidth - inset.paddingRight,
top: wb.top + inset.borderTopWidth + inset.paddingTop,
bottom: wb.bottom - inset.borderBottomWidth - inset.paddingBottom,
};
content.width = content.right - content.left; content.height = content.bottom - content.top;
const scale = sb.width / stage.offsetWidth;
const normalized = box => ({ x: (box.left - sb.left) / scale, y: (box.top - sb.top) / scale, width: box.width / scale, height: box.height / scale });
const hash = async value => [...new Uint8Array(await crypto.subtle.digest('SHA-256', typeof value === 'string' ? new TextEncoder().encode(value) : value))].map(byte => byte.toString(16).padStart(2, '0')).join('');
const selectors = '.hm-orgchart-employee,.hm-orgchart-organization-name,.hm-orgchart-organization-totals,.hm-orgchart-organization-totals-title,.hm-orgchart-workdesk-summary-frame,.hm-orgchart-workdesk-position-table,.hm-orgchart-workdesk-position-table th,.hm-orgchart-workdesk-position-table td,.hm-orgchart-slot-side,.hm-orgchart-slot-belowTree,.hm-orgchart-status-group,.hm-orgchart-summary-title,.hm-orgchart-slot-footer,.hm-orgchart-affiliation-bar,.hm-orgchart-affiliation-bar-item,.hm-orgchart-axis,.hm-orgchart-top-leaders,.hm-orgchart-hub,.hm-orgchart-workdesk-overlay,.hm-orgchart-workdesk-decoration';
const styleKeys = ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'backgroundColor', 'backgroundImage', 'border', 'borderRadius', 'boxShadow', 'padding', 'margin', 'width', 'height', 'gap', 'objectFit'];
const elements = await Promise.all([...stage.querySelectorAll(selectors)].map(async (element, index) => ({
key: `${element.tagName}:${typeof element.className === 'string' ? element.className : element.className.baseVal}:${element.dataset.employeeId ?? element.dataset.organizationId ?? element.dataset.contentSlot ?? element.dataset.workdeskDecoration ?? ''}:${index}`,
box: normalized(rect(element)), hash: await hash(element.outerHTML),
style: Object.fromEntries(styleKeys.map(key => [key, getComputedStyle(element)[key]])),
})));
const assetHashes = new Map();
const assets = await Promise.all([...stage.querySelectorAll('img')].map(async image => {
const url = image.currentSrc || image.src;
if (!assetHashes.has(url)) assetHashes.set(url, fetch(url).then(r => r.arrayBuffer()).then(hash));
return { hash: await assetHashes.get(url), width: image.naturalWidth, height: image.naturalHeight, loaded: image.complete && image.naturalWidth > 0 };
}));
const visible = element => { const r = rect(element); return r.width > 0 && r.height > 0 && getComputedStyle(element).display !== 'none'; };
const painted = [...stage.querySelectorAll(selectors)].filter(visible).map(element => ({ key: typeof element.className === 'string' ? element.className : element.className.baseVal, bounds: rect(element) }));
const collisionElements = [...stage.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-organization-name,.hm-orgchart-organization-totals,.hm-orgchart-affiliation-bar,.hm-orgchart-status-group > .hm-orgchart-summary-title')].filter(visible);
const collisions = [];
for (let i = 0; i < collisionElements.length; i++) for (let j = i + 1; j < collisionElements.length; j++) {
const a = collisionElements[i], b = collisionElements[j]; if (a.contains(b) || b.contains(a)) continue;
const ra = normalized(rect(a)), rb = normalized(rect(b));
const width = Math.min(ra.x + ra.width, rb.x + rb.width) - Math.max(ra.x, rb.x);
const height = Math.min(ra.y + ra.height, rb.y + rb.height) - Math.max(ra.y, rb.y);
if (width > .5 && height > .5) collisions.push({ pair: `${i}:${j}`, a: a.className, b: b.className, width, height });
}
const scroll = element => { const cs = getComputedStyle(element); return { scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, scrollHeight: element.scrollHeight, clientHeight: element.clientHeight, overflowX: cs.overflowX, overflowY: cs.overflowY }; };
return {
wrapper: { selector: '.hm-orgchart-story-full', tag: wrapper.tagName, ariaLabel: wrapper.getAttribute('aria-label'), background: css.backgroundColor, bounds: wb, inset, content },
sectionBody: rect(wrapper.closest('.sb-page-section-body')), shadowHost: rect(shadowHost), scaleWrapper: rect(scaleWrapper),
stage: sb, contentCenter: (content.left + content.right) / 2, stageCenter: (sb.left + sb.right) / 2,
centerDifference: (sb.left + sb.right - content.left - content.right) / 2,
viewportCenter: innerWidth / 2, baseWidth: parseFloat(sc.width), baseHeight: parseFloat(sc.height), scale, verticalScale: sb.height / parseFloat(sc.height),
coreTransform: sc.transform, additionalScale: sc.scale, translate: sc.translate, htmlHash: await hash(stage.innerHTML), elements, assets, painted, collisions,
counts: { trees: stage.querySelectorAll('.hm-orgchart-forest[data-layout="workdesk"] > .hm-orgchart-tree').length, cards: stage.querySelectorAll('.hm-orgchart-employee').length, overlays: stage.querySelectorAll('.hm-orgchart-workdesk-overlay').length, paths: stage.querySelectorAll('.hm-orgchart-workdesk-overlay path').length, side: stage.querySelectorAll('.hm-orgchart-slot-side').length, status: stage.querySelectorAll('.hm-orgchart-slot-belowTree').length, footer: stage.querySelectorAll('.hm-orgchart-slot-footer').length },
document: { width: innerWidth, height: innerHeight, root: scroll(document.documentElement), body: scroll(document.body), scrolling: scroll(document.scrollingElement) },
scroll: [wrapper, shadowHost, ...['.hm-orgchart-shell', '.hm-orgchart-content', '.hm-orgchart-composition', '.hm-orgchart-viewport'].map(selector => shadow.querySelector(selector)).filter(Boolean)].map(element => ({ selector: element.className, ...scroll(element) })),
};
});
}
async function stability() {
return page.evaluate(async () => {
const stage = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('.hm-orgchart-stage');
let changes = 0; const observer = new MutationObserver(records => { changes += records.length; });
observer.observe(stage, { attributes: true, attributeFilter: ['style'] });
for (let i = 0; i < 12; i++) await new Promise(resolve => requestAnimationFrame(resolve));
observer.disconnect(); return { styleMutations: changes };
});
}
const baseline = baselineMode ? null : JSON.parse(await fs.readFile(path.join(output, 'before-composition.json'), 'utf8'));
async function record(key) {
const state = await snapshot(); snapshots[key] = state;
await page.screenshot({ path: path.join(output, `${prefix}-full-composition-${key}.png`), fullPage: true });
if (baselineMode) return;
check(Math.abs(state.centerDifference) <= 1, `${key}: whole Stage centered in visible wrapper content box`, { wrapper: state.wrapper, stage: state.stage, contentCenter: state.contentCenter, stageCenter: state.stageCenter, centerDifference: state.centerDifference, viewportCenter: state.viewportCenter });
check(state.baseWidth === 1920 && state.baseHeight === 914.5 && state.scale > 0 && state.scale <= 1 && Math.abs(state.scale - state.verticalScale) <= .0001 && contains(state.wrapper.content, state.stage), `${key}: original canvas fully contained with uniform proportional fit`, { baseWidth: state.baseWidth, baseHeight: state.baseHeight, scale: state.scale, verticalScale: state.verticalScale, stage: state.stage, content: state.wrapper.content });
const outside = state.painted.filter(item => !contains(state.stage, item.bounds) || !contains(state.wrapper.content, item.bounds));
check(outside.length === 0 && state.collisions.length === 0, `${key}: painted cards, lines and statistics remain visible without collisions`, { outside, collisions: state.collisions, counts: state.counts });
check(preserved(baseline.snapshots[key], state), `${key}: P9.1 inner DOM, assets, styles and normalized geometry preserved`, { beforeHash: baseline.snapshots[key]?.htmlHash, afterHash: state.htmlHash, elements: state.elements.length, assets: state.assets.length });
const d = state.document;
const documentFits = [d.root, d.body, d.scrolling].every(item => item.scrollWidth <= d.width + 1 && item.scrollHeight <= d.height + 1);
const scrollable = state.scroll.filter(item => ['auto', 'scroll'].includes(item.overflowX) && item.scrollWidth > item.clientWidth + 1 || ['auto', 'scroll'].includes(item.overflowY) && item.scrollHeight > item.clientHeight + 1);
check(documentFits && scrollable.length === 0, `${key}: no document or interactive chart scrollbars`, { document: d, scrollable, scroll: state.scroll });
check((await stability()).styleMutations === 0, `${key}: alignment settles without observer feedback loop`);
}
let fatal;
try {
for (const size of sizes) { await open(size); await record(String(size.width)); }
await open(sizes[1]);
await page.evaluate(() => {
const wrapper = document.querySelector('.hm-orgchart-story-full');
// Perturb the actual visible wrapper, not a proxy box; keep standard document flow.
Object.assign(wrapper.style, { boxSizing: 'border-box', width: 'calc(100% - 80px)', marginLeft: '23px', padding: '17px 53px 19px 11px', borderStyle: 'solid', borderColor: '#789', borderWidth: '2px 7px 5px 3px' });
});
await settle(); await record('asymmetric-1440');
await page.evaluate(() => { document.querySelector('.hm-orgchart-story-full').style.padding = '17px 19px 19px 45px'; });
await settle(); await record('padding-shift-1440');
await page.setViewportSize({ width: 1010, height: 840 }); await settle(); await record('asymmetric-resize-1010');
await page.setViewportSize(sizes[2]); await settle(); await record('asymmetric-resize-390');
if (!baselineMode) check(errors.length === 0, 'No new Full Composition console or page errors', errors);
} catch (error) { fatal = error.stack; check(false, 'Runner completed', fatal); }
finally {
const result = { startedAt, completedAt: new Date().toISOString(), origin, browser: browser.version(), baselineMode, sizes, results, snapshots, errors, fatal, pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, baselineMode ? 'before-composition.json' : 'browser-composition.json'), JSON.stringify(result, null, 2));
await browser.close(); console.log(JSON.stringify({ baselineMode, pass: result.pass, fail: result.fail, output }));
if (result.fail) process.exitCode = 1;
}
examples/org-chart/verify-p9-2.mjs
+183
View File
@@ -0,0 +1,183 @@
// P9.2 Expanded selection integration only. Historical suites are preserved.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
import { companyColorPresets, createOrgChartExampleDataset } from '../../packages/org-chart/dist/index.js';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-2');
const origin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6062';
const only = process.argv.slice(2), run = name => !only.length || only.includes(name);
const suffix = only.length ? '-' + only.join('-') : '';
const template = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-expanded-large.json'), 'utf8'));
const companies = Object.values(companyColorPresets), ids = companies.map(company => company.companyId);
const results = [], measurements = [], errors = [], startedAt = new Date().toISOString();
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, `expanded-progress${suffix}.json`), JSON.stringify({ startedAt, results, measurements, errors }, null, 2));
const check = (pass, name, detail) => { results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) }); persist(); if (!pass) console.log('FAIL', name, JSON.stringify(detail)); };
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });
page.setDefaultTimeout(15000);
page.on('pageerror', error => { errors.push({ type: 'pageerror', message: error.message }); persist(); });
page.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', message: message.text(), location: message.location() }); persist(); } });
const trigger = () => page.getByRole('button', { name: /^회사 선택/ });
const panel = () => page.getByRole('dialog', { name: '회사 선택', exact: true });
const checkbox = name => panel().getByRole('checkbox', { name, exact: true });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 8; i++) await new Promise(requestAnimationFrame); });
async function ready(count) {
await page.waitForFunction(count => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& (count === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === count);
}, count);
await settle();
}
async function goto(size = { width: 1440, height: 1100 }) {
await page.setViewportSize(size);
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
await trigger().waitFor(); await ready(20);
}
async function open() { await trigger().click(); await panel().waitFor(); await settle(); }
async function close() { await page.keyboard.press('Escape'); await panel().waitFor({ state: 'hidden' }); await settle(); }
async function select(label, option) { await page.getByRole('combobox', { name: label, exact: true }).click(); await page.getByRole('option', { name: option, exact: true }).click(); await ready(); }
async function apply(count) { await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(count); }
const expectedTotal = (count, selected) => selected.length ? createOrgChartExampleDataset(template, { scope: 'total', employeeCount: count, companyIds: selected }).employees.length : 0;
async function state() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot, expanded = shadow.querySelector('.hm-orgchart-expanded');
const viewport = shadow.querySelector('.hm-orgchart-viewport'), forest = shadow.querySelector('.hm-orgchart-forest');
const rect = element => { if (!element) return null; const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
return { countText: document.querySelector('[data-component="OrgChartExampleCounts"]').textContent.trim(), employees: shadow.querySelectorAll('.hm-orgchart-employee').length,
roots: [...shadow.querySelectorAll('.hm-orgchart-company-tree')].map(element => element.dataset.companyId), type: expanded?.dataset.autoLayout,
empty: forest?.children.length === 0, scale: Number(viewport?.dataset.scale), panX: Number(viewport?.dataset.panX), panY: Number(viewport?.dataset.panY), viewport: rect(viewport), forest: rect(forest),
documentWidth: document.documentElement.scrollWidth, width: innerWidth,
cards: [...shadow.querySelectorAll('.hm-orgchart-employee')].map(element => ({ id: element.dataset.employeeId, companyId: element.dataset.companyId, direction: element.dataset.connectionDirection })),
titles: [...shadow.querySelectorAll('.node[data-company-id] .hm-orgchart-organization-name')].map(element => ({ companyId: element.closest('.node').dataset.companyId, color: getComputedStyle(element).color })),
autoControlsInFixed: Boolean(shadow.querySelector('.hm-orgchart-stage .hm-orgchart-expanded-toggle')) };
});
}
async function snap(name, fullPage = false) { await page.screenshot({ path: path.join(output, `${name}.png`), fullPage }); }
async function section(name, action) { if (!run(name)) return; try { await action(); } catch (error) { check(false, `${name}: execution completed`, { message: error.message, stack: error.stack }); await snap(`failure-${name}`, true).catch(() => {}); } }
await section('dropdown', async () => {
await goto(); await snap('expanded-closed', true);
check((await trigger().innerText()).includes('전체 회사 (7개)') && await page.locator('.hm-orgchart-story-settings').first().getByRole('checkbox').count() === 0, 'Closed: summary and no external company checkboxes');
await trigger().focus(); await trigger().press('Enter'); await panel().waitFor(); await settle();
const structure = await panel().evaluate(element => ({ portal: element.closest('.sb-page') === null, count: element.querySelectorAll('[role="checkbox"]').length, focusedFirst: element.querySelector('[role="checkbox"]') === document.activeElement }));
check(structure.portal && structure.count === 8 && structure.focusedFirst && await checkbox('전체 선택').getAttribute('aria-checked') === 'true', 'Open via keyboard: HM Portal and focus on select-all', structure);
await snap('expanded-open-all');
await page.keyboard.press('Space'); await ready(0);
let s = await state(); measurements.push({ name: 'empty', state: s });
check(await checkbox('전체 선택').getAttribute('aria-checked') === 'false' && (await trigger().innerText()).includes('회사를 선택하세요') && s.employees === 0 && s.countText.includes('0개 회사') && Boolean(s.empty), 'Space select-all off: empty state without error', s);
await page.keyboard.press('Tab');
check(await checkbox('한맥기술').evaluate(element => element === document.activeElement), 'Tab reaches first individual checkbox');
await page.keyboard.press('Space'); await ready(expectedTotal(20, ['hanmac']));
check(await checkbox('한맥기술').getAttribute('aria-checked') === 'true' && await checkbox('전체 선택').getAttribute('aria-checked') === 'mixed' && (await trigger().innerText()).includes('한맥기술'), 'Individual Space: one company summary and indeterminate');
await page.keyboard.press('Tab'); await page.keyboard.press('Space'); await ready(expectedTotal(20, ['hanmac', 'saman']));
check(await checkbox('삼안').getAttribute('aria-checked') === 'true' && (await trigger().innerText()).includes('2개 회사 선택'), 'Multiple keyboard selection: two company summary');
await snap('expanded-open-partial'); await close();
check(await trigger().evaluate(element => element === document.activeElement) && await trigger().getAttribute('aria-expanded') === 'false', 'ESC closes and restores focus');
await open();
check(await checkbox('한맥기술').getAttribute('aria-checked') === 'true' && await checkbox('삼안').getAttribute('aria-checked') === 'true', 'Selection persists after reopen');
await checkbox('한맥기술').click(); await ready(expectedTotal(20, ['saman']));
check((await trigger().innerText()).includes('삼안'), 'Individual deselect removes only that company');
await checkbox('전체 선택').click(); await ready(20);
check(await checkbox('전체 선택').getAttribute('aria-checked') === 'true' && await panel().getByRole('checkbox', { checked: true }).count() === 8, 'Indeterminate select-all selects seven companies');
await snap('expanded-all-selected');
await trigger().click(); await panel().waitFor({ state: 'hidden' }); check(await trigger().getAttribute('aria-expanded') === 'false', 'Trigger click closes');
await open(); await page.locator('.sb-page-title').click(); await panel().waitFor({ state: 'hidden' }); check(true, 'Outside click closes');
});
await section('data', async () => {
await goto(); await open(); await checkbox('전체 선택').click(); await ready(0); await checkbox('한맥기술').click(); await ready(expectedTotal(20, ['hanmac'])); await close();
await select('데이터 범위', '회사별'); await select('회사당 직원 수', '100명'); await apply(100);
let s = await state(); check(s.employees === 100 && s.countText.includes('회사당 100명') && s.countText.includes('합계 100명'), 'Per-company 100: one company produces 100', s.countText);
await open(); await checkbox('삼안').click(); await ready(200); s = await state(); measurements.push({ name: 'per-company-two', state: s });
check(s.employees === 200 && s.countText.includes('2개 회사') && s.countText.includes('합계 200명'), 'Second company immediately produces 200 without Apply', s.countText);
await close(); await snap('expanded-closed-partial', true);
await select('데이터 범위', '전체 회사 합산'); await select('전체 직원 수', '20명');
await open(); await checkbox('삼안').click(); await ready(100); s = await state();
check(s.employees === 100 && s.countText.includes('회사당 100명'), 'Company change preserves pending scope/count Apply boundary', s.countText);
await close(); await apply(expectedTotal(20, ['hanmac'])); s = await state();
check(s.employees === expectedTotal(20, ['hanmac']) && !s.countText.includes('회사당'), 'Total20 preserves P7 weighted partition without redistribution', s.countText);
for (const count of [100, 300]) {
await select('전체 직원 수', `${count}명`); await apply(expectedTotal(count, ['hanmac'])); s = await state();
check(s.employees === expectedTotal(count, ['hanmac']), `Total${count} selected-company partition`, { count: s.employees, expected: expectedTotal(count, ['hanmac']) });
}
await select('데이터 범위', '회사별'); await select('회사당 직원 수', '20명'); await apply(20); check((await state()).employees === 20, 'Per-company20 selection retained');
await select('회사당 직원 수', '300명'); await apply(300); check((await state()).employees === 300, 'Per-company300 selection retained');
await page.getByRole('button', { name: '초기화', exact: true }).click(); await ready(20); check((await trigger().innerText()).includes('전체 회사 (7개)'), 'Reset restores original total20 and all seven');
});
await section('modes', async () => {
await goto(); await open(); await checkbox('바론컨설턴트').click(); await ready(expectedTotal(20, ids.filter(id => id !== 'baron'))); await close();
const selected = ids.filter(id => id !== 'baron'), count = expectedTotal(20, selected);
for (const [option, type] of [['세로형 TB', 'tb'], ['가로형 LR', 'lr'], ['혼합형 Hybrid', 'hybrid']]) {
if (type !== 'tb') await select('조직도 표시 유형', option);
await ready(count); const s = await state(); measurements.push({ name: type, state: s });
check(s.type === type && s.employees === count && s.cards.every(card => selected.includes(card.companyId)) && new Set(s.cards.map(card => card.companyId)).size === 6, `${type}: chosen companies render and excluded company absent`, s.countText);
check(s.titles.length > 0 && s.titles.every(title => title.color === 'rgb(255, 255, 255)') && s.cards.every(card => ['top', 'left', 'right'].includes(card.direction)), `${type}: existing white titles and directional cards`);
}
const toggle = page.locator('.hm-orgchart-expanded-toggle:not(:disabled)').first();
const id = await toggle.getAttribute('data-organization-id'); await toggle.click(); await ready();
const current = () => page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${id}"]`);
check(await current().getAttribute('aria-expanded') === 'false', 'Group collapse after selection'); await current().press('Space'); await ready(); check(await current().getAttribute('aria-expanded') === 'true', 'Group expands with Space');
const employee = page.locator('.hm-orgchart-employee').first(), employeeId = await employee.getAttribute('data-employee-id'); await employee.click();
const dialog = page.locator('[data-component="HMOrgChartEmployeeDialog"]'); await dialog.waitFor();
check(await dialog.getAttribute('data-employee-id') === employeeId && await page.getByRole('dialog').count() === 1, 'Employee HM Dialog identity after company changes');
await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'hidden' }); await settle();
check(await page.evaluate(() => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId) === employeeId, 'Employee Dialog ESC returns card focus');
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle(); const before = await state();
await page.getByRole('button', { name: '확대', exact: true }).click(); await settle(); const zoom = await state(); check(zoom.scale > before.scale, 'Zoom remains functional');
const viewport = page.locator('.hm-orgchart-viewport'); await viewport.scrollIntoViewIfNeeded(); const box = await viewport.boundingBox(); const panBefore = await state();
await page.mouse.move(box.x + 8, box.y + box.height - 8); await page.mouse.down(); await page.mouse.move(box.x + 58, box.y + box.height - 38, { steps: 5 }); await page.mouse.up(); await settle(); const pan = await state();
check(Math.abs(pan.panX - panBefore.panX) >= 40 && Math.abs(pan.panY - panBefore.panY) >= 20, 'Pointer Pan remains functional', { before: [panBefore.panX, panBefore.panY], after: [pan.panX, pan.panY] });
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle(); const fit = await state();
check(fit.forest.x >= fit.viewport.x - 1 && fit.forest.right <= fit.viewport.right + 1 && fit.forest.y >= fit.viewport.y - 1 && fit.forest.bottom <= fit.viewport.bottom + 1, 'Fit contains complete selected forest', fit);
});
await section('responsive', async () => {
for (const size of [{ width: 1920, height: 1080 }, { width: 768, height: 1024 }, { width: 390, height: 844 }]) {
await goto(size); await open();
const bounds = await panel().evaluate(element => { const r = element.getBoundingClientRect(); return { x: r.x, right: r.right, y: r.y, bottom: r.bottom, width: r.width, height: r.height, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, portal: !element.closest('.sb-page'), checkboxesVisible: [...element.querySelectorAll('[role="checkbox"]')].every(child => { const b = child.getBoundingClientRect(); return b.left >= r.left && b.right <= r.right && b.top >= r.top && b.bottom <= r.bottom; }) }; });
check(bounds.portal && bounds.x >= -1 && bounds.right <= size.width + 1 && bounds.y >= -1 && bounds.bottom <= size.height + 1 && bounds.scrollWidth <= bounds.clientWidth + 1 && bounds.checkboxesVisible, `${size.width}: Portal panel and all options fit without clipping`, bounds);
check((await state()).documentWidth <= size.width + 1, `${size.width}: no horizontal page overflow`);
await snap(`expanded-open-${size.width}`); await close();
const summary = await trigger().evaluate(element => { const r = element.getBoundingClientRect(); return { width: r.width, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, label: element.textContent }; });
check(summary.scrollWidth <= summary.clientWidth + 1, `${size.width}: concise trigger fits control`, summary);
await snap(`expanded-closed-${size.width}`, true);
}
});
// Isolate a corrected empty-forest probe without replaying successful sections.
if (only.includes('empty')) await section('empty', async () => {
await goto(); await trigger().focus(); await trigger().press('Enter'); await panel().waitFor();
await page.keyboard.press('Space'); await ready(0); const s = await state();
check(await checkbox('전체 선택').getAttribute('aria-checked') === 'false' && (await trigger().innerText()).includes('회사를 선택하세요') && s.employees === 0 && s.countText.includes('0개 회사') && s.empty, 'Space select-all off: empty forest without error', s);
await snap('expanded-empty');
});
// Runtime evidence for Radix's public positioning variable, opaque to Guard.
if (only.includes('token')) await section('token', async () => {
await goto(); await open();
const evidence = await panel().evaluate(element => {
const css = getComputedStyle(element);
return { variable: '--radix-popover-content-available-height', actual: css.getPropertyValue('--radix-popover-content-available-height').trim(), maxHeight: css.maxHeight, component: element.dataset.component, width: innerWidth, height: innerHeight };
});
measurements.push({ name: 'Radix runtime variable', evidence });
check(parseFloat(evidence.actual) > 0 && evidence.maxHeight === evidence.actual, 'HM Popover declares Radix available-height variable at runtime', evidence);
});
await section('menu', async () => {
const index = await (await page.request.get(`${origin}/index.json`)).json();
const entries = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title.startsWith('OrgChart/') && !(entry.tags ?? []).includes('internal'));
const expected = ['orgchart--logo-personnel-summary', 'orgchart--department-colors', 'orgchart--full-composition', 'orgchart--expanded-org-chart'];
check(entries.length === 4 && entries.every(entry => expected.includes(entry.id)), 'Existing four public Story IDs retained', entries.map(entry => ({ id: entry.id, title: entry.title })));
});
check(errors.length === 0, 'New console/page errors: zero', errors);
const result = { startedAt, completedAt: new Date().toISOString(), browser: browser.version(), origin, sections: only, results, measurements, errors, pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, `browser-expanded${suffix}.json`), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p9-2/browser-expanded${suffix}.json` }));
await browser.close(); if (result.fail) process.exitCode = 1;
examples/org-chart/verify-p9-3-core.mjs
+371
View File
@@ -0,0 +1,371 @@
// P9.3 public Vanilla Core API and engine bridge checks only.
// Requires the parent-controlled static server and an already built Core.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-3');
const origin = process.env.ORGCHART_CORE_ORIGIN ?? 'http://127.0.0.1:6064';
const only = process.argv.slice(2), run = section => !only.length || only.includes(section);
const suffix = only.length ? '-' + only.join('-') : '';
const startedAt = new Date().toISOString(), results = [], measurements = [], errors = [];
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, `core-progress${suffix}.json`), JSON.stringify({ startedAt, results, measurements, errors }, null, 2));
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) });
persist(); if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
page.setDefaultTimeout(15000);
page.on('pageerror', error => { errors.push({ type: 'pageerror', message: error.message }); persist(); });
page.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', message: message.text(), location: message.location() }); persist(); } });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 6; i++) await new Promise(requestAnimationFrame); });
async function ready() {
await page.waitForFunction(() => window.fixtureReady && window.chart?.getState().status === 'ready'
&& [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet));
await settle();
}
async function fresh(extra) {
await page.goto(`${origin}/vanilla.html`); await ready();
if (extra) { await page.evaluate(extra => window.mountChart('auto', extra), extra); await ready(); }
}
const employee = id => page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`);
const title = id => page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${id}"]`);
async function pointerMove(source, target) {
const from = await source.boundingBox(), to = await target.boundingBox();
if (!from || !to) throw new Error('Pointer move source/target has no rendered bounds');
const start = { x: from.x + from.width / 2, y: from.y + from.height / 2 }, end = { x: to.x + to.width / 2, y: to.y + to.height / 2 };
await page.mouse.move(start.x, start.y); await page.mouse.down();
await page.mouse.move(start.x + 8, start.y + 8, { steps: 2 });
await page.mouse.move(end.x, end.y, { steps: 10 });
const feedback = await page.evaluate(() => [...window.shadow.querySelectorAll('.node[data-drop-state]')].map(node => ({ id: node.dataset.organizationId, state: node.dataset.dropState, hover: node.dataset.dropHover })));
await page.mouse.up(); await ready();
return feedback;
}
async function snapshot() {
return page.evaluate(() => {
const data = window.chart.getData(), state = window.chart.getState(), shadow = window.shadow;
return { data, summary: state.status === 'ready' ? state.summary.raw : undefined,
viewport: window.chart.getViewportState(), moves: window.moves, events: window.bridgeEvents,
cards: [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({ id: card.dataset.employeeId, organization: card.closest('.node').dataset.organizationId, direction: card.dataset.connectionDirection })),
groups: [...shadow.querySelectorAll('.node[data-organization-id]')].map(node => ({ id: node.dataset.organizationId, parent: node.dataset.parentId, collapsed: node.dataset.collapsed })),
organizationPaths: [...shadow.querySelectorAll('.hm-orgchart-organization-connectors path')].map(node => ({ id: node.dataset.organizationId, parent: node.dataset.parentId })),
dialogCount: shadow.querySelectorAll('dialog[open]').length,
feedback: shadow.querySelector('.hm-orgchart-move-feedback')?.textContent };
});
}
try {
if (run('api')) {
await fresh();
const initial = await snapshot();
check(initial.data.employees.length === 20 && initial.data.organizations.length === 15, 'Vanilla public Core mounts raw multi-company fixture');
const frozen = await page.evaluate(() => {
const data = window.chart.getData(), before = JSON.stringify(data);
const deep = value => value === null || typeof value !== 'object' || (Object.isFrozen(value) && Object.values(value).every(deep));
try { data.employees[0].name = 'consumer mutation'; } catch { /* Frozen snapshots may throw in strict mode. */ }
return { deepFrozen: deep(data), unchanged: JSON.stringify(data) === before, copied: data !== window.fixture, fixtureUnchanged: JSON.stringify(window.fixture) === window.fixtureOriginal };
});
check(frozen.deepFrozen && frozen.unchanged && frozen.copied && frozen.fixtureUnchanged, 'getData is a deeply frozen owned snapshot; consumer input preserved', frozen);
const moved = await page.evaluate(() => window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-division-1' }));
await ready(); const afterEmployee = await snapshot();
check(moved.moved && moved.previousOrganizationId === 'hanmac-office-0' && moved.request.sourceId === 'virtual-006', 'Public employee move reports original relation and request', moved.moved ? { previousOrganizationId: moved.previousOrganizationId, request: moved.request } : moved);
const beforePerson = initial.data.employees.find(person => person.id === 'virtual-006'), afterPerson = afterEmployee.data.employees.find(person => person.id === 'virtual-006');
check(afterPerson.organizationId === 'hanmac-division-1' && JSON.stringify({ ...afterPerson, organizationId: beforePerson.organizationId }) === JSON.stringify(beforePerson), 'Employee identity, affiliation and personal fields survive new organization');
check(afterEmployee.data.employees.length === initial.data.employees.length && new Set(afterEmployee.cards.map(card => card.id)).size === 20
&& afterEmployee.cards.filter(card => card.id === 'virtual-006').length === 1 && afterEmployee.cards.find(card => card.id === 'virtual-006').organization === 'hanmac-division-1', 'Employee count unchanged and one rendered card under new group');
check(afterEmployee.summary.total === initial.summary.total
&& afterEmployee.summary.byOrganization['hanmac-office-0'].direct === initial.summary.byOrganization['hanmac-office-0'].direct - 1
&& afterEmployee.summary.byOrganization['hanmac-division-1'].direct === initial.summary.byOrganization['hanmac-division-1'].direct + 1, 'Public summary direct totals update without changing overall count');
const group = await page.evaluate(() => window.chart.move({ kind: 'organization', sourceId: 'hanmac-division-0', targetOrganizationId: 'hanmac-division-1' }));
await ready(); const afterGroup = await snapshot();
check(group.moved && group.previousOrganizationId === 'hanmac-root'
&& afterGroup.data.organizations.find(org => org.id === 'hanmac-division-0').parentId === 'hanmac-division-1'
&& afterGroup.data.organizations.find(org => org.id === 'hanmac-office-0').parentId === 'hanmac-division-0'
&& JSON.stringify(afterGroup.data.employees) === JSON.stringify(afterEmployee.data.employees), 'Public organization move updates parent only and retains descendants/staff', group.moved ? group.request : group);
const unchanged = JSON.stringify(afterGroup.data);
const invalid = [
[{ kind: 'organization', sourceId: 'hanmac-division-0', targetOrganizationId: 'hanmac-office-0' }, 'DESCENDANT_TARGET'],
[{ kind: 'organization', sourceId: 'hanmac-division-0', targetOrganizationId: 'hanmac-division-0' }, 'SELF_TARGET'],
[{ kind: 'organization', sourceId: 'hanmac-root', targetOrganizationId: 'hanmac-division-1' }, 'ROOT_PROTECTED'],
[{ kind: 'employee', sourceId: 'virtual-001', targetOrganizationId: 'hanmac-division-1' }, 'LEADER_PROTECTED'],
[{ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-division-1' }, 'SAME_ORGANIZATION'],
[{ kind: 'employee', sourceId: 'missing-employee', targetOrganizationId: 'hanmac-division-1' }, 'SOURCE_NOT_FOUND'],
[{ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'missing-group' }, 'TARGET_NOT_FOUND'],
];
for (const [request, code] of invalid) {
const result = await page.evaluate(request => window.chart.move(request), request);
check(!result.moved && result.code === code && await page.evaluate(expected => JSON.stringify(window.chart.getData()) === expected, unchanged), `Public move rejects ${code} and preserves complete dataset`, result);
}
check(await page.evaluate(expected => window.moves.length === expected && window.moves.filter(move => move.moved).length === 2, 2 + invalid.length), 'onMove receives successful moves and every policy rejection exactly once');
const callback = await page.evaluate(async () => { window.throwCallback = true; const result = await window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-office-1' }); window.throwCallback = false; return { moved: result.moved, status: window.chart.getState().status }; });
await ready(); check(callback.moved && callback.status === 'ready', 'Consumer onMove exception cannot fail Core transaction', callback);
check(await page.evaluate(() => JSON.stringify(window.fixture) === window.fixtureOriginal), 'All public edits leave original JSON input unchanged');
measurements.push({ section: 'api', state: await snapshot() });
}
if (run('cross')) {
// User's later instruction permits cross-company moves. The earlier
// CROSS_COMPANY rejection evidence remains preserved as superseded history.
await fresh(); const before = await snapshot();
const employeeResult = await page.evaluate(() => window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'saman-division-1' }));
await ready(); const afterEmployee = await snapshot();
const oldEmployee = before.data.employees.find(person => person.id === 'virtual-006'), newEmployee = afterEmployee.data.employees.find(person => person.id === 'virtual-006');
check(employeeResult.moved && employeeResult.previousOrganizationId === 'hanmac-office-0'
&& newEmployee.organizationId === 'saman-division-1' && newEmployee.affiliationId === 'saman'
&& JSON.stringify({ ...newEmployee, organizationId: oldEmployee.organizationId, affiliationId: oldEmployee.affiliationId }) === JSON.stringify(oldEmployee),
'Cross-company public employee move updates actual organizationId/affiliationId and preserves identity', employeeResult.moved ? { request: employeeResult.request, person: newEmployee } : employeeResult);
check(afterEmployee.data.employees.length === 20 && afterEmployee.cards.length === 20 && new Set(afterEmployee.cards.map(card => card.id)).size === 20
&& afterEmployee.summary.total === before.summary.total
&& afterEmployee.summary.byAffiliation.hanmac === before.summary.byAffiliation.hanmac - 1
&& afterEmployee.summary.byAffiliation.saman === before.summary.byAffiliation.saman + 1
&& afterEmployee.summary.byOrganization['hanmac-root'].inclusive === before.summary.byOrganization['hanmac-root'].inclusive - 1
&& afterEmployee.summary.byOrganization['saman-root'].inclusive === before.summary.byOrganization['saman-root'].inclusive + 1,
'Cross-company employee move retains total and updates source/target company plus affiliation counts');
const employeeColor = await employee('virtual-006').evaluate(card => {
const probe = document.createElement('span'); probe.style.color = window.mod.companyColorPresets.saman.primary; window.shadow.append(probe);
const expected = getComputedStyle(probe).color; probe.remove();
return { company: card.dataset.companyId, organization: card.closest('.node').dataset.organizationId, border: getComputedStyle(card).borderTopColor, expected };
});
check(employeeColor.company === 'saman' && employeeColor.organization === 'saman-division-1' && employeeColor.border === employeeColor.expected,
'Cross-company employee card uses destination existing company preset', employeeColor);
await employee('virtual-006').click(); const popup = page.locator('.hm-orgchart-employee-dialog[open]'); await popup.waitFor();
const popupState = await popup.evaluate(dialog => {
const field = name => [...dialog.querySelectorAll('dt')].find(term => term.textContent === name)?.nextElementSibling?.textContent;
return { id: dialog.dataset.employeeId, organization: field('소속'), affiliation: field('관계사') };
});
check(popupState.id === 'virtual-006' && popupState.organization === afterEmployee.data.organizations.find(org => org.id === 'saman-division-1').name
&& popupState.affiliation === afterEmployee.data.affiliations.find(affiliation => affiliation.id === 'saman').name,
'Vanilla employee Dialog reflects destination company and organization after cross move', popupState);
await page.keyboard.press('Escape'); await popup.waitFor({ state: 'hidden' }); await settle();
const groupResult = await page.evaluate(() => window.chart.move({ kind: 'organization', sourceId: 'hanmac-division-0', targetOrganizationId: 'saman-division-1' }));
await ready(); const afterGroup = await snapshot();
const subtree = new Set(['hanmac-division-0', 'hanmac-office-0']);
const subtreePeople = afterEmployee.data.employees.filter(person => subtree.has(person.organizationId));
check(groupResult.moved && groupResult.previousOrganizationId === 'hanmac-root'
&& afterGroup.data.organizations.find(org => org.id === 'hanmac-division-0').parentId === 'saman-division-1'
&& afterGroup.data.organizations.find(org => org.id === 'hanmac-office-0').parentId === 'hanmac-division-0'
&& afterGroup.data.organizations.filter(org => subtree.has(org.id)).every(org => org.companyId === 'saman')
&& afterGroup.data.employees.filter(person => subtree.has(person.organizationId)).every(person => person.affiliationId === 'saman')
&& subtreePeople.every(old => JSON.stringify(afterGroup.data.employees.find(person => person.id === old.id)) === JSON.stringify({ ...old, affiliationId: 'saman' })),
'Cross-company public group move retargets subtree companyId and staff affiliationId while retaining hierarchy and identities', groupResult.moved ? { request: groupResult.request, subtreePeople } : groupResult);
check(afterGroup.data.employees.length === 20 && afterGroup.cards.length === 20 && new Set(afterGroup.cards.map(card => card.id)).size === 20
&& afterGroup.summary.byAffiliation.hanmac === afterEmployee.summary.byAffiliation.hanmac - subtreePeople.length
&& afterGroup.summary.byAffiliation.saman === afterEmployee.summary.byAffiliation.saman + subtreePeople.length
&& afterGroup.summary.byOrganization['hanmac-root'].inclusive === afterEmployee.summary.byOrganization['hanmac-root'].inclusive - subtreePeople.length
&& afterGroup.summary.byOrganization['saman-root'].inclusive === afterEmployee.summary.byOrganization['saman-root'].inclusive + subtreePeople.length,
'Cross-company group transfer updates company/affiliation aggregate totals without duplication');
const groupColors = await page.evaluate(() => {
const probe = document.createElement('span'); probe.style.color = window.mod.companyColorPresets.saman.primary; window.shadow.append(probe);
const expected = getComputedStyle(probe).color; probe.remove();
return [...window.shadow.querySelectorAll('.node')].filter(node => ['hanmac-division-0', 'hanmac-office-0'].includes(node.dataset.organizationId))
.map(node => ({ id: node.dataset.organizationId, company: node.dataset.companyId, title: getComputedStyle(node.querySelector('.hm-orgchart-organization-name')).backgroundColor, expected,
cards: [...node.querySelectorAll('.hm-orgchart-employee')].map(card => ({ company: card.dataset.companyId, border: getComputedStyle(card).borderTopColor })) }));
});
check(groupColors.length === 2 && groupColors.every(node => node.company === 'saman' && node.title === node.expected
&& node.cards.every(card => card.company === 'saman' && card.border === node.expected)), 'Transferred subtree uses destination presets on group headings and employee borders', groupColors);
check(await page.evaluate(() => window.moves.length === 2 && window.moves.every(result => result.moved)
&& JSON.stringify(window.fixture) === window.fixtureOriginal && window.mod.validateOrgChartDataset(window.chart.getData()).valid
&& Object.isFrozen(window.chart.getData()) && Object.isFrozen(window.chart.getData().employees[0])),
'Cross-company API callbacks occur once per success; data remains valid/frozen and original fixture unchanged');
await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
check(await employee('virtual-006').count() === 0 && await title('hanmac-division-0').count() === 0, 'Destination-company filter removes transferred employee/subtree from source-company view');
await page.evaluate(() => window.chart.setSelectedCompanies(['saman'])); await ready();
check(await employee('virtual-006').count() === 1 && await title('hanmac-division-0').count() === 1 && await title('hanmac-office-0').count() === 1,
'Destination-company filter restores transferred employee/subtree exactly once');
measurements.push({ section: 'cross-api', state: await snapshot() });
await fresh();
const employeeMarks = await pointerMove(employee('virtual-006'), title('saman-division-1'));
const employeePointer = await snapshot();
check(employeeMarks.some(node => node.id === 'saman-division-1' && node.state === 'allowed' && node.hover === 'allowed')
&& employeePointer.events.some(event => event.type === 'otherdropped.orgchart' && event.defaultPrevented && event.targetId === 'saman-division-1')
&& employeePointer.data.employees.find(person => person.id === 'virtual-006').organizationId === 'saman-division-1'
&& employeePointer.data.employees.find(person => person.id === 'virtual-006').affiliationId === 'saman',
'Real cross-tree employee pointer marks destination allowed and reuses canceled upstream external-drop bridge', { marks: employeeMarks, events: employeePointer.events });
await page.evaluate(() => window.chart.fitToView()); await settle();
const groupMarks = await pointerMove(title('hanmac-division-0'), title('saman-division-1'));
const groupPointer = await snapshot();
check(groupMarks.some(node => node.id === 'saman-division-1' && node.state === 'allowed' && node.hover === 'allowed')
&& groupPointer.events.some(event => event.type === 'nodedrop.orgchart' && event.defaultPrevented && event.targetId === 'saman-division-1')
&& groupPointer.data.organizations.find(org => org.id === 'hanmac-division-0').parentId === 'saman-division-1'
&& groupPointer.data.organizations.find(org => org.id === 'hanmac-office-0').companyId === 'saman',
'Real cross-tree group pointer reuses canceled upstream node-drop bridge and retargets subtree', { marks: groupMarks, events: groupPointer.events });
check(groupPointer.moves.length === 2 && groupPointer.moves.every(move => move.moved) && groupPointer.dialogCount === 0
&& groupPointer.data.employees.length === 20 && new Set(groupPointer.cards.map(card => card.id)).size === 20
&& await page.evaluate(() => JSON.stringify(window.fixture) === window.fixtureOriginal),
'Cross-tree pointer transactions have one callback each, no popup/duplicate and immutable original fixture');
measurements.push({ section: 'cross-pointer', state: groupPointer });
await page.screenshot({ path: path.join(output, 'vanilla-cross-company.png'), fullPage: true });
}
if (run('bridge')) {
await fresh(); await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
const before = await snapshot();
const marks = await pointerMove(employee('virtual-006'), title('hanmac-division-1'));
const staff = await snapshot();
check(marks.some(group => group.id === 'hanmac-division-1' && group.state === 'allowed' && group.hover === 'allowed')
&& marks.some(group => group.id === 'hanmac-office-0' && group.state === 'blocked'), 'Vanilla pointer card gesture exposes valid/invalid/hover targets', marks);
check(staff.events.some(event => event.type === 'otherdropped.orgchart' && event.defaultPrevented && event.sourceId === 'virtual-006' && event.targetId === 'hanmac-division-1')
&& staff.data.employees.find(person => person.id === 'virtual-006').organizationId === 'hanmac-division-1', 'Real employee pointer uses canceled upstream otherdropped bridge and updates data', staff.events);
check(staff.dialogCount === 0 && JSON.stringify(staff.viewport) === JSON.stringify(before.viewport), 'Employee drag opens no Dialog and retains Pan/Zoom transform', { before: before.viewport, after: staff.viewport, dialogs: staff.dialogCount });
await page.evaluate(() => window.chart.fitToView()); await settle();
const groupMarks = await pointerMove(title('hanmac-division-0'), title('hanmac-division-1'));
const groups = await snapshot();
check(groupMarks.some(group => group.id === 'hanmac-office-0' && group.state === 'blocked')
&& groups.events.some(event => event.type === 'nodedrop.orgchart' && event.defaultPrevented && event.sourceId === 'hanmac-division-0' && event.targetId === 'hanmac-division-1')
&& groups.data.organizations.find(org => org.id === 'hanmac-division-0').parentId === 'hanmac-division-1', 'Real organization pointer uses canceled upstream nodedrop bridge and protects descendant', { marks: groupMarks, events: groups.events });
check(groups.data.employees.length === 20 && new Set(groups.groups.map(group => group.id)).size === groups.groups.length
&& groups.groups.find(group => group.id === 'hanmac-office-0').parent === 'hanmac-division-0'
&& groups.groups.find(group => group.id === 'hanmac-division-0').collapsed === 'false', 'Group pointer move keeps complete subtree and avoids post-drag collapse');
await page.evaluate(() => window.chart.setAutoLayout({ type: 'lr' })); await ready();
const routed = await snapshot();
check(routed.organizationPaths.some(route => route.id === 'hanmac-division-0' && route.parent === 'hanmac-division-1')
&& !routed.organizationPaths.some(route => route.id === 'hanmac-division-0' && route.parent === 'hanmac-root')
&& routed.cards.every(card => card.direction === 'left'), 'LR regenerated connector follows changed parent and card incoming borders');
await page.screenshot({ path: path.join(output, 'vanilla-core-lr.png'), fullPage: true });
measurements.push({ section: 'bridge', state: routed });
}
if (run('lifecycle')) {
await fresh();
await page.evaluate(() => window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-division-1' })); await ready();
await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
await title('hanmac-division-1').click(); await ready();
const collapsed = await snapshot();
check(collapsed.groups.find(group => group.id === 'hanmac-division-1').collapsed === 'true', 'Moved employee target remains ordinarily collapsible');
for (const type of ['lr', 'hybrid', 'tb']) {
await page.evaluate(type => window.chart.setAutoLayout({ type }), type); await ready();
check(await title('hanmac-division-1').getAttribute('aria-expanded') === 'false'
&& await page.evaluate(() => window.chart.getData().employees.find(person => person.id === 'virtual-006').organizationId === 'hanmac-division-1'), `Local relation and collapse survive layout ${type}`);
}
const hiddenState = await page.evaluate(() => JSON.stringify(window.chart.getData()));
await page.evaluate(() => window.chart.setSelectedCompanies(['saman'])); await ready();
check(await page.locator('.node[data-company-id="hanmac"]').count() === 0
&& await page.evaluate(expected => JSON.stringify(window.chart.getData()) === expected, hiddenState), 'Hiding a company preserves all browser-state relations');
await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
check(await title('hanmac-division-1').getAttribute('aria-expanded') === 'false', 'Company restore keeps saved collapsed target');
await title('hanmac-division-1').click(); await ready();
check(await employee('virtual-006').count() === 1 && await employee('virtual-006').evaluate(card => card.closest('.node').dataset.organizationId) === 'hanmac-division-1', 'Company restore shows moved employee exactly once in new group');
const raced = await page.evaluate(async () => {
let resolveSource;
const delayed = { load: () => new Promise(resolve => { resolveSource = resolve; }) };
const first = window.chart.reload(delayed);
const rejected = await window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-office-1' });
const fresh = structuredClone(window.fixture); fresh.metadata.dataVersion = 'p9.3-newer-request';
await window.chart.update(fresh);
resolveSource(window.fixture); await first;
return { rejected, version: window.chart.getData().metadata.dataVersion, organization: window.chart.getData().employees.find(person => person.id === 'virtual-006').organizationId, status: window.chart.getState().status };
});
await ready();
check(!raced.rejected.moved && raced.rejected.code === 'INVALID_DATA', 'Move during pending source request is safely rejected', raced.rejected);
check(raced.version === 'p9.3-newer-request' && raced.organization === 'hanmac-office-0' && raced.status === 'ready', 'Stale asynchronous reload cannot overwrite newer dataset request', raced);
const simultaneous = await page.evaluate(async () => {
const one = window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-division-1' });
const two = window.chart.move({ kind: 'employee', sourceId: 'virtual-007', targetOrganizationId: 'hanmac-office-1' });
const outcomes = await Promise.all([one, two]);
return { outcomes: outcomes.map(result => ({ moved: result.moved, code: result.code })), data: window.chart.getData(), valid: window.mod.validateOrgChartDataset(window.chart.getData()).valid, status: window.chart.getState().status };
});
await ready();
check(simultaneous.outcomes[0].moved && !simultaneous.outcomes[1].moved && simultaneous.outcomes[1].code === 'INVALID_DATA'
&& simultaneous.valid && simultaneous.status === 'ready' && simultaneous.data.employees.length === 20
&& simultaneous.data.employees.find(person => person.id === 'virtual-006').organizationId === 'hanmac-division-1'
&& simultaneous.data.employees.find(person => person.id === 'virtual-007').organizationId === 'hanmac-division-1', 'Concurrent public moves serialize safely; loading request rejects without losing data', { outcomes: simultaneous.outcomes, status: simultaneous.status, valid: simultaneous.valid });
measurements.push({ section: 'lifecycle', state: await snapshot() });
}
if (run('touch')) {
await fresh(); await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
await page.evaluate(() => {
window.touchPointers = [];
for (const type of ['pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture']) {
window.addEventListener(type, event => window.touchPointers.push({ type, pointerType: event.pointerType, isPrimary: event.isPrimary,
x: event.clientX, y: event.clientY, editing: window.shadow.querySelector('.hm-orgchart-viewport').dataset.editDragging,
feedback: window.shadow.querySelector('.hm-orgchart-move-feedback').textContent }));
}
});
const from = await employee('virtual-006').boundingBox(), to = await title('hanmac-division-1').boundingBox();
const start = { x: from.x + from.width / 2, y: from.y + from.height / 2 }, end = { x: to.x + to.width / 2, y: to.y + to.height / 2 };
const session = await page.context().newCDPSession(page);
await session.send('Emulation.setTouchEmulationEnabled', { enabled: true, maxTouchPoints: 1 });
await session.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [start] });
for (let step = 1; step <= 8; step++) {
await session.send('Input.dispatchTouchEvent', { type: 'touchMove', touchPoints: [{ x: start.x + (end.x - start.x) * step / 8, y: start.y + (end.y - start.y) * step / 8 }] });
}
await session.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] });
await ready();
const touch = await page.evaluate(() => ({ pointers: window.touchPointers,
organization: window.chart.getData().employees.find(person => person.id === 'virtual-006').organizationId,
events: window.bridgeEvents, dialogs: window.shadow.querySelectorAll('dialog[open]').length }));
check(touch.pointers.some(event => event.pointerType === 'touch' && event.isPrimary)
&& touch.organization === 'hanmac-division-1' && touch.events.some(event => event.type === 'otherdropped.orgchart' && event.defaultPrevented) && touch.dialogs === 0,
'Synthetic browser touch input generates primary touch pointer, moves card and suppresses Dialog', touch);
measurements.push({ section: 'touch', state: touch, realDevice: 'NOT VERIFIED' });
await session.send('Emulation.setTouchEmulationEnabled', { enabled: false }); await session.detach();
}
if (run('touch-pan')) {
await fresh(); await page.evaluate(() => window.chart.setSelectedCompanies(['hanmac'])); await ready();
const setup = await page.evaluate(() => {
const viewport = window.shadow.querySelector('.hm-orgchart-viewport'), box = viewport.getBoundingClientRect();
const left = box.left + 24, right = Math.min(box.right - 72, innerWidth - 72), top = box.top + 24, bottom = Math.min(box.bottom - 72, innerHeight - 72);
for (let y = top; y <= bottom; y += 40) {
for (let x = left; x <= right; x += 40) {
const hit = window.shadow.elementFromPoint(x, y);
if (hit && viewport.contains(hit) && !hit.closest('button,a,.hm-orgchart-employee,.node')) {
window.touchPanPointers = [];
viewport.addEventListener('pointerdown', event => window.touchPanPointers.push({ pointerType: event.pointerType, isPrimary: event.isPrimary }));
return { point: { x, y }, sourceClass: String(hit.className), before: window.chart.getViewportState(), moves: window.moves.length };
}
}
}
throw new Error('No safe visible blank point for touch Pan');
});
const session = await page.context().newCDPSession(page);
await session.send('Emulation.setTouchEmulationEnabled', { enabled: true, maxTouchPoints: 1 });
await session.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [setup.point] });
for (let step = 1; step <= 8; step++) {
await session.send('Input.dispatchTouchEvent', { type: 'touchMove', touchPoints: [{ x: setup.point.x + 40 * step / 8, y: setup.point.y + 30 * step / 8 }] });
}
await session.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] }); await settle();
const after = await page.evaluate(() => ({ viewport: window.chart.getViewportState(), moves: window.moves.length,
pointers: window.touchPanPointers, editing: window.shadow.querySelector('.hm-orgchart-viewport').dataset.editDragging,
panDragging: window.shadow.querySelector('.hm-orgchart-viewport').dataset.dragging }));
check(after.pointers.some(event => event.pointerType === 'touch' && event.isPrimary)
&& Math.abs(after.viewport.x - setup.before.x - 40) < 1 && Math.abs(after.viewport.y - setup.before.y - 30) < 1
&& after.viewport.scale === setup.before.scale && after.moves === setup.moves && !after.editing && !after.panDragging,
'Synthetic touch blank-space Pan translates forest, retains scale and triggers no card move', { setup, after });
measurements.push({ section: 'touch-pan', setup, after, realDevice: 'NOT VERIFIED' });
await session.send('Emulation.setTouchEmulationEnabled', { enabled: false }); await session.detach();
}
if (run('fixed')) {
await fresh(); await page.evaluate(() => window.mountChart('fixed')); await ready();
const fixed = await page.evaluate(async () => {
const before = window.shadow.querySelector('.hm-orgchart-stage')?.outerHTML;
let rejection;
try { await window.chart.move({ kind: 'employee', sourceId: 'virtual-006', targetOrganizationId: 'hanmac-division-1' }); }
catch (error) { rejection = error.message; }
return { rejection, unchanged: before === window.shadow.querySelector('.hm-orgchart-stage')?.outerHTML,
expanded: window.shadow.querySelectorAll('.hm-orgchart-expanded-toggle,.hm-orgchart-move-feedback,[data-edit-source],[data-drop-state]').length,
draggable: window.shadow.querySelectorAll('[draggable="true"]').length, status: window.chart.getState().status, data: window.chart.getData(), events: window.moves.length };
});
check(fixed.rejection?.includes('Auto mode') && fixed.unchanged && fixed.status === 'ready' && fixed.events === 0, 'Fixed public handle rejects editing and retains rendered stage', fixed);
check(fixed.expanded === 0 && fixed.draggable === 0 && fixed.data === undefined, 'Fixed has no editing controls, native drag or Auto browser-state API');
}
check(errors.length === 0, 'Vanilla Core change-only verification has no console/page errors', errors);
} catch (error) {
check(false, 'Unexpected verification error', { message: error.message, stack: error.stack });
await page.screenshot({ path: path.join(output, `vanilla-error${suffix}.png`), fullPage: true }).catch(() => {});
} finally {
await browser.close();
const completedAt = new Date().toISOString();
const counts = { PASS: results.filter(result => result.status === 'PASS').length, FAIL: results.filter(result => result.status === 'FAIL').length };
await fs.writeFile(path.join(output, `core-browser${suffix}.json`), JSON.stringify({ startedAt, completedAt, origin, counts, results, measurements, errors }, null, 2));
console.log(JSON.stringify({ counts, origin, output: `test-results/org-chart-p9-3/core-browser${suffix}.json` }));
if (counts.FAIL || errors.length) process.exitCode = 1;
}
examples/org-chart/verify-p9-3-preservation.mjs
+40
View File
@@ -0,0 +1,40 @@
import fs from 'node:fs/promises';
import path from 'node:path';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output = path.resolve('test-results/org-chart-p9-3');
const origin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064';
const browser = await launchChromium({headless:true});
const page = await browser.newPage({viewport:{width:1440,height:900}});
const results=[],errors=[];
page.on('pageerror',e=>errors.push(e.message));
page.on('console',m=>{if(m.type()==='error')errors.push(m.text());});
const check=(ok,name,detail)=>{results.push({name,status:ok?'PASS':'FAIL',detail});if(!ok)console.log('FAIL',name,detail);};
const ready=async()=>{await page.waitForFunction(()=>{const s=document.querySelector('.hm-orgchart-host')?.shadowRoot;return s&&!s.querySelector('[aria-busy="true"]')&&s.querySelector('.hm-orgchart-employee')&&[...s.querySelectorAll('link')].every(l=>l.sheet);});await page.evaluate(async()=>{await document.fonts.ready;for(let i=0;i<12;i++)await new Promise(requestAnimationFrame);});};
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);await ready();
await page.evaluate(async()=>{await Promise.all([...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('img')].map(async i=>{i.loading='eager';await i.decode();}));});
// Reuse the exact original measurement function; do not rerun P9.2's suite.
const priorSource=await fs.readFile('examples/org-chart/verify-p9-2-composition.mjs','utf8');
const from=priorSource.indexOf('async function snapshot()'),to=priorSource.indexOf('async function stability()',from);
const state=await new Function('page',priorSource.slice(from,to)+'; return snapshot();')(page);
const previous=JSON.parse(await fs.readFile('test-results/org-chart-p9-2/browser-composition.json','utf8')).snapshots['1440'];
const same=(a,b)=>JSON.stringify(a)===JSON.stringify(b);
const normalizedEqual=state.elements.every((e,i)=>{const old=previous.elements[i];return old?.key===e.key&&old.hash===e.hash&&same(old.style,e.style)&&Object.keys(e.box).every(k=>Math.abs(e.box[k]-old.box[k])<.15);});
check(previous.htmlHash===state.htmlHash&&same(previous.assets,state.assets)&&normalizedEqual,'Fixed P9.2 DOM, 139 image hashes, 152 element styles/geometry preserved',{before:previous.htmlHash,after:state.htmlHash,elements:state.elements.length,assets:state.assets.length});
check(Math.abs(state.centerDifference)<1&&state.collisions.length===0&&state.counts.cards===43&&state.counts.paths===5,'Fixed center/card/connector minimal regression',{centerDifference:state.centerDifference,counts:state.counts,collisions:state.collisions});
check(await page.evaluate(()=>!document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('[data-edit-dragging],[data-drop-state],.hm-orgchart-move-feedback')),'Fixed has no editing UI');
await page.screenshot({path:path.join(output,'fixed-preserved-1440.png'),fullPage:true});
await page.goto(`${origin}/`);
await page.waitForFunction(()=>Boolean(document.querySelector('a[href*="orgchart--expanded-org-chart"]')));
const menus=await page.locator('a[href*="orgchart--"]').allTextContents();
check(menus.includes('Overview')&&menus.includes('Department Colors')&&menus.includes('Full Composition')&&menus.includes('Expanded OrgChart'),'Four existing Storybook menu entries preserved',menus);
for(const width of [390,768,1280,1440]){
await page.setViewportSize({width,height:1100});
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);await ready();
const metrics=await page.evaluate(()=>{const s=document.querySelector('.hm-orgchart-host').shadowRoot,v=s.querySelector('.hm-orgchart-viewport'),f=s.querySelector('.hm-orgchart-move-feedback'),c=getComputedStyle(f);return {width:innerWidth,scrollWidth:document.documentElement.scrollWidth,viewportWidth:v.clientWidth,rawInnerScrollWidth:v.scrollWidth,feedbackHeight:f.clientHeight,feedbackScrollHeight:f.scrollHeight,feedbackColor:c.color,feedbackFontWeight:c.fontWeight,unresolvedTokens:[...['--hm-orgchart-resolved-fg-secondary','--hm-orgchart-resolved-action-primary','--hm-orgchart-resolved-stroke-default','--hm-orgchart-resolved-stroke-input-focus']].filter(k=>!getComputedStyle(f).getPropertyValue(k).trim())};});
check(metrics.scrollWidth<=width+1&&metrics.viewportWidth>0&&metrics.feedbackScrollHeight<=metrics.feedbackHeight+1&&metrics.unresolvedTokens.length===0,`${width}: responsive move instructions, viewport and token declarations`,metrics);
await page.screenshot({path:path.join(output,`expanded-${width}.png`),fullPage:true});
}
check(errors.length===0,'No new console/page errors',errors);
await fs.writeFile(path.join(output,'preservation.json'),JSON.stringify({origin,results,errors,fixedSnapshot:state},null,2));
await browser.close();console.log(JSON.stringify({pass:results.filter(x=>x.status==='PASS').length,fail:results.filter(x=>x.status==='FAIL').length}));
if(results.some(x=>x.status==='FAIL'))process.exitCode=1;
examples/org-chart/verify-p9-3.mjs
+400
View File
@@ -0,0 +1,400 @@
// P9.3 browser-state editing only. Exact section names allow failed probes to
// rerun without replaying previously successful P7-P9.2 or P9.3 checks.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
import { companyColorPresets } from '../../packages/org-chart/dist/index.js';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-3');
const origin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064';
const only = process.argv.slice(2), suffix = only.length ? `-${only.join('-')}` : '';
const results = [], measurements = [], errors = [], startedAt = new Date().toISOString();
const colors = Object.fromEntries(Object.values(companyColorPresets).map(preset => [preset.companyId,
`rgb(${[1, 3, 5].map(index => parseInt(preset.primary.slice(index, index + 2), 16)).join(', ')})`]));
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, `browser-progress${suffix}.json`), JSON.stringify({ startedAt, results, measurements, errors }, null, 2));
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) }); persist();
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1920, height: 1700 } });
page.setDefaultTimeout(15000);
page.on('pageerror', error => { errors.push({ type: 'pageerror', message: error.message }); persist(); });
page.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', message: message.text(), location: message.location() }); persist(); } });
const viewport = () => page.locator('.hm-orgchart-viewport');
const employee = id => page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`);
const node = id => page.locator(`.node[data-organization-id="${id}"]`);
const title = id => page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${id}"]`);
const feedback = () => page.locator('.hm-orgchart-move-feedback');
const companyTrigger = () => page.getByRole('button', { name: /^회사 선택/ });
const companyPanel = () => page.getByRole('dialog', { name: '회사 선택', exact: true });
const companyCheckbox = name => companyPanel().getByRole('checkbox', { name, exact: true });
const dialog = () => page.locator('[data-component="HMOrgChartEmployeeDialog"]');
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 8; i++) await new Promise(requestAnimationFrame); });
async function ready(count) {
await page.waitForFunction(count => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& (count === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === count);
}, count);
await settle();
}
async function select(label, option) {
await page.getByRole('combobox', { name: label, exact: true }).click();
await page.getByRole('option', { name: option, exact: true }).click(); await ready();
}
async function chooseCompanies(names) {
await companyTrigger().click(); await companyPanel().waitFor();
const all = companyCheckbox('전체 선택');
// The established mixed select-all action selects all first, then none.
for (let i = 0; i < 2 && await all.getAttribute('aria-checked') !== 'false'; i++) { await all.click(); await ready(); }
await ready(0);
for (const name of names) { await companyCheckbox(name).click(); await ready(); }
await page.keyboard.press('Escape'); await companyPanel().waitFor({ state: 'hidden' }); await ready();
}
async function setup({ companies = ['한맥기술'], layout = 'tb' } = {}) {
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
await companyTrigger().waitFor(); await ready(20);
await chooseCompanies(companies);
await select('데이터 범위', '회사별');
await page.getByRole('button', { name: '데이터 적용', exact: true }).click(); await ready(companies.length * 20);
if (layout !== 'tb') await select('조직도 표시 유형', layout === 'lr' ? '가로형 LR' : '혼합형 Hybrid');
await viewport().scrollIntoViewIfNeeded(); await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
}
async function state() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const viewport = shadow.querySelector('.hm-orgchart-viewport'), expanded = shadow.querySelector('.hm-orgchart-expanded');
const rect = element => { const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
const nodes = [...shadow.querySelectorAll('.node[data-organization-id]')].map(element => ({
id: element.dataset.organizationId, parentId: element.dataset.parentId, companyId: element.dataset.companyId,
domParentId: element.closest('.hierarchy')?.parentElement?.closest('.hierarchy')?.querySelector(':scope > .node')?.dataset.organizationId ?? '',
direct: Number(element.dataset.directEmployeeCount), inclusive: Number(element.dataset.inclusiveEmployeeCount), collapsed: element.dataset.collapsed,
}));
const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(element => ({
id: element.dataset.employeeId, organizationId: element.closest('.node').dataset.organizationId, companyId: element.dataset.companyId,
direction: element.dataset.connectionDirection, kind: element.dataset.cardKind,
border: { top: getComputedStyle(element).borderTopColor, left: getComputedStyle(element).borderLeftColor, right: getComputedStyle(element).borderRightColor },
}));
const paths = [...shadow.querySelectorAll('.hm-orgchart-organization-connectors path')].map(path => ({ id: path.dataset.organizationId, parentId: path.dataset.parentId, d: path.getAttribute('d') }));
const employeePaths = [...shadow.querySelectorAll('.hm-orgchart-employee-connectors path')].map(path => ({ id: path.dataset.employeeId, organizationId: path.closest('.node').dataset.organizationId, direction: path.dataset.direction, d: path.getAttribute('d') }));
const feedback = shadow.querySelector('.hm-orgchart-move-feedback');
return { layout: expanded?.dataset.autoLayout, scale: Number(viewport.dataset.scale), panX: Number(viewport.dataset.panX), panY: Number(viewport.dataset.panY),
viewport: rect(viewport), forest: rect(shadow.querySelector('.hm-orgchart-forest')), nodes, cards, paths, employeePaths, feedback: { status: feedback?.dataset.moveStatus, text: feedback?.textContent },
drop: [...shadow.querySelectorAll('[data-drop-state]')].map(element => ({ id: element.dataset.organizationId, state: element.dataset.dropState, hover: element.dataset.dropHover })),
dragging: viewport.dataset.editDragging, panDragging: viewport.dataset.dragging, activeEmployee: shadow.activeElement?.dataset.employeeId,
activeOrganization: shadow.activeElement?.dataset.organizationId,
countText: document.querySelector('[data-component="OrgChartExampleCounts"]')?.textContent.trim(), dialogs: document.querySelectorAll('[data-component="HMOrgChartEmployeeDialog"]').length,
employeesVisible: cards.length, employeeCount: cards.length, organizationCount: nodes.length,
companyRoots: nodes.filter(org => org.parentId === '').map(org => org.companyId),
};
});
}
const relationState = s => JSON.stringify({ nodes: s.nodes, cards: s.cards.map(({ id, organizationId, direction }) => ({ id, organizationId, direction })) });
async function blankPoint() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot, viewport = shadow.querySelector('.hm-orgchart-viewport'), box = viewport.getBoundingClientRect();
for (const [dx, dy] of [[8, 8], [8, box.height - 8], [box.width - 8, 8], [box.width - 8, box.height - 8], [box.width / 2, box.height - 8]]) {
const point = { x: box.left + dx, y: box.top + dy }, hit = shadow.elementFromPoint(point.x, point.y);
if (hit && !hit.closest('button,a,.hm-orgchart-employee,.node')) return point;
}
throw new Error('No visible blank Pan point found');
});
}
async function pan(dx, dy) {
const p = await blankPoint(); await page.mouse.move(p.x, p.y); await page.mouse.down();
const v = await viewport().boundingBox();
// Cross the six-pixel Pan threshold inside the viewport before the requested
// motion. A large first upward step from its top edge never reaches the
// viewport's pointermove listener and therefore cannot establish capture.
await page.mouse.move(p.x + Math.sign(v.x + v.width / 2 - p.x) * 8, p.y, { steps: 2 });
await page.mouse.move(p.x + dx, p.y + dy, { steps: 8 }); await page.mouse.up(); await settle();
}
async function centerPair(source, target) {
await viewport().scrollIntoViewIfNeeded(); await source.focus(); await settle();
for (let pass = 0; pass < 3; pass++) {
const a = await source.boundingBox(), b = await target.boundingBox(), v = await viewport().boundingBox();
if (!a || !b || !v) throw new Error('Drag source or target has no geometry');
const left = Math.min(a.x, b.x), right = Math.max(a.x + a.width, b.x + b.width);
const top = Math.min(a.y, b.y), bottom = Math.max(a.y + a.height, b.y + b.height);
if (right - left > v.width - 24 || bottom - top > v.height - 24) throw new Error(`Drag pair exceeds viewport at current scale: ${JSON.stringify({ a, b, v })}`);
const dx = v.x + v.width / 2 - (left + right) / 2, dy = v.y + v.height / 2 - (top + bottom) / 2;
if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break;
await pan(dx, dy);
}
}
async function drag(source, target, { inspect = false, screenshot } = {}) {
await centerPair(source, target);
const a = await source.boundingBox(), b = await target.boundingBox();
const before = await state();
await page.mouse.move(a.x + a.width / 2, a.y + a.height / 2); await page.mouse.down();
await page.mouse.move(a.x + a.width / 2 + 8, a.y + a.height / 2, { steps: 2 });
const started = inspect ? await state() : undefined;
await page.mouse.move(b.x + b.width / 2, b.y + b.height / 2, { steps: 14 });
const hover = inspect ? await state() : undefined;
if (screenshot) await snap(screenshot);
await page.mouse.up(); await ready();
return { before, started, hover, pointer: { source: a, target: b }, after: await state() };
}
async function snap(name) { await page.screenshot({ path: path.join(output, `${name}.png`), fullPage: false }); }
async function section(name, action) {
if (only.length && !only.includes(name) && !(name.startsWith('mode-') && only.includes('modes'))) return;
try { await action(); } catch (error) {
check(false, `${name}: execution completed`, { message: error.message, stack: error.stack });
await page.mouse.up().catch(() => {}); await snap(`failure-${name}`).catch(() => {});
}
}
function checkConsistency(s, name, total = 20) {
const uniqueEmployees = new Set(s.cards.map(card => card.id)), uniqueOrganizations = new Set(s.nodes.map(org => org.id));
check(uniqueEmployees.size === s.cards.length && uniqueOrganizations.size === s.nodes.length && s.cards.length === total, `${name}: unique cards/groups and total preserved`, { cards: s.cards.length, groups: s.nodes.length, total });
check(s.nodes.every(org => org.parentId === org.domParentId), `${name}: dabeng DOM hierarchy matches current parentId`);
check(s.cards.every(card => card.border[card.direction] === colors[card.companyId]), `${name}: company accent border matches each connector direction`);
check(s.employeePaths.length === s.cards.length && new Set(s.employeePaths.map(path => path.id)).size === s.cards.length
&& s.employeePaths.every(path => path.d && !/NaN|Infinity/.test(path.d) && s.cards.some(card => card.id === path.id && card.organizationId === path.organizationId && card.direction === path.direction)), `${name}: employee connectors refreshed once per card`);
check(s.paths.every(path => path.d && !/NaN|Infinity/.test(path.d) && s.nodes.some(org => org.id === path.id && org.parentId === path.parentId))
&& new Set(s.paths.map(path => path.id)).size === s.paths.length, `${name}: organization connectors use current parents without duplicate paths`);
}
await section('staff', async () => {
await setup();
const result = await drag(employee('virtual-022'), title('hanmac-office-sibling'), { inspect: true, screenshot: 'tb-staff-drop-hover' });
measurements.push({ name: 'TB employee move', ...result });
check(result.started.dragging === 'true' && result.started.drop.some(target => target.state === 'allowed') && result.started.drop.some(target => target.state === 'blocked'), 'Employee threshold starts editing and marks allowed/blocked targets');
check(result.hover.drop.find(target => target.id === 'hanmac-office-sibling')?.hover === 'allowed', 'Employee valid target hover is identified');
check(result.after.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && !result.after.cards.some(card => card.id === 'virtual-022' && card.organizationId === 'hanmac-office-0'), 'Employee membership moves to new group once');
check(result.after.feedback.status === 'success' && result.after.dialogs === 0 && result.after.drop.length === 0, 'Employee success announces completion and suppresses click/Dialog');
check(Math.abs(result.before.scale - result.after.scale) < .0001 && Math.abs(result.before.panX - result.hover.panX) < .1 && Math.abs(result.before.panY - result.hover.panY) < .1 && !result.hover.panDragging, 'Card Drag preserves Zoom and does not execute Pan');
const sourceBefore = result.before.nodes.find(org => org.id === 'hanmac-office-0'), sourceAfter = result.after.nodes.find(org => org.id === 'hanmac-office-0');
const targetBefore = result.before.nodes.find(org => org.id === 'hanmac-office-sibling'), targetAfter = result.after.nodes.find(org => org.id === 'hanmac-office-sibling');
check(sourceAfter.direct === sourceBefore.direct - 1 && sourceAfter.inclusive === sourceBefore.inclusive - 1 && targetAfter.direct === targetBefore.direct + 1 && targetAfter.inclusive === targetBefore.inclusive + 1, 'Employee source/destination direct and inclusive counts update');
checkConsistency(result.after, 'TB employee');
await employee('virtual-022').click(); await dialog().waitFor();
const organization = await dialog().locator('dl > div').filter({ has: page.locator('dt', { hasText: '소속 조직' }) }).locator('dd').innerText();
check(organization === '가상 계획실' && await dialog().getAttribute('data-employee-id') === 'virtual-022', 'HM Dialog shows new organization and same employee ID', organization);
await page.keyboard.press('Escape'); await dialog().waitFor({ state: 'hidden' }); await settle();
check((await state()).activeEmployee === 'virtual-022', 'HM Dialog returns focus to moved card');
await snap('tb-staff-moved');
});
await section('groups', async () => {
await setup();
const result = await drag(title('hanmac-office-0'), title('hanmac-office-1'), { inspect: true, screenshot: 'tb-group-drop-hover' });
measurements.push({ name: 'TB group move', ...result });
check(result.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1', 'Group parentId changes to dropped organization');
const descendants = ['hanmac-cell-0', 'hanmac-team-0', 'hanmac-team-sibling'];
check(descendants.every(id => result.after.nodes.find(org => org.id === id)?.parentId === result.before.nodes.find(org => org.id === id)?.parentId)
&& result.after.cards.every(card => result.before.cards.find(before => before.id === card.id)?.organizationId === card.organizationId), 'Group move retains subtree and every employee membership');
const inclusive = result.before.nodes.find(org => org.id === 'hanmac-office-0').inclusive;
check(result.after.nodes.find(org => org.id === 'hanmac-division-0').inclusive === result.before.nodes.find(org => org.id === 'hanmac-division-0').inclusive - inclusive
&& result.after.nodes.find(org => org.id === 'hanmac-division-1').inclusive === result.before.nodes.find(org => org.id === 'hanmac-division-1').inclusive + inclusive, 'Group move updates ancestor inclusive counts');
check(result.after.feedback.status === 'success' && result.after.nodes.find(org => org.id === 'hanmac-office-0').collapsed === 'false' && result.after.dialogs === 0, 'Title Drag suppresses collapse and Dialog');
checkConsistency(result.after, 'TB group'); await snap('tb-group-moved');
await title('hanmac-office-0').click(); await ready(); check(await title('hanmac-office-0').getAttribute('aria-expanded') === 'false', 'Moved group title click still collapses');
await title('hanmac-office-0').press('Space'); await ready(20); check(await title('hanmac-office-0').getAttribute('aria-expanded') === 'true', 'Moved group Space still expands');
});
await section('invalid', async () => {
await setup({ companies: ['한맥기술', '삼안'] });
for (const [name, source, target, reason] of [
['protected leader', employee('virtual-002'), title('hanmac-office-sibling'), '조직장'],
['group descendant cycle', title('hanmac-office-0'), title('hanmac-cell-0'), '순환'],
['group self', title('hanmac-office-0'), title('hanmac-office-0'), '자기 자신'],
['company root', title('hanmac-root'), title('hanmac-office-sibling'), '최상위'],
]) {
const result = await drag(source, target, { inspect: true });
check(relationState(result.before) === relationState(result.after) && result.after.feedback.status === 'failure' && result.after.feedback.text.includes(reason), `${name}: rejects with reason and retains data`, result.after.feedback);
const targetId = await target.getAttribute('data-organization-id');
check(result.hover.drop.find(item => item.id === targetId)?.hover === 'blocked' && result.after.dialogs === 0, `${name}: blocked hover and no Dialog`);
}
await centerPair(employee('virtual-022'), title('hanmac-office-sibling'));
const before = await state(), source = await employee('virtual-022').boundingBox(), box = await viewport().boundingBox();
await page.mouse.move(source.x + source.width / 2, source.y + source.height / 2); await page.mouse.down();
await page.mouse.move(source.x + source.width / 2 + 8, source.y + source.height / 2);
await page.mouse.move(box.x + box.width + 12, box.y + 50, { steps: 12 }); await page.mouse.up(); await ready();
const after = await state(); check(relationState(before) === relationState(after) && after.feedback.status === 'failure' && !after.dragging && after.dialogs === 0, 'Outside viewport release cancels edit without changing data', after.feedback);
await snap('invalid-drop-rejected');
});
await section('pan-click', async () => {
await setup(); await centerPair(employee('virtual-022'), title('hanmac-office-sibling'));
const before = await state(); await pan(85, -45); const after = await state();
check(Math.abs(after.panX - before.panX - 85) < 1 && Math.abs(after.panY - before.panY + 45) < 1 && after.scale === before.scale && relationState(after) === relationState(before), 'Blank-space pointer Pan preserves Zoom and every relationship');
await centerPair(employee('virtual-022'), title('hanmac-office-sibling'));
const box = await employee('virtual-022').boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); await page.mouse.down();
await page.mouse.move(box.x + box.width / 2 + 2, box.y + box.height / 2 + 1); const small = await state(); await page.mouse.up();
await dialog().waitFor(); check(!small.dragging && await dialog().getAttribute('data-employee-id') === 'virtual-022', 'Movement below six-pixel threshold remains employee click');
await page.keyboard.press('Escape'); await dialog().waitFor({ state: 'hidden' });
await title('hanmac-office-sibling').click(); await ready(); check(await title('hanmac-office-sibling').getAttribute('aria-expanded') === 'false', 'Simple group click collapses');
await title('hanmac-office-sibling').click(); await ready(20); check(await title('hanmac-office-sibling').getAttribute('aria-expanded') === 'true', 'Simple group click expands');
});
await section('zoom', async () => {
await setup();
let current = 'hanmac-office-0';
for (const scale of [1, .65, 1.4]) {
await page.getByRole('button', { name: '100% 복원', exact: true }).click(); await settle();
if (scale !== 1) { const p = await blankPoint(); await page.mouse.move(p.x, p.y); await page.keyboard.down('Control'); await page.mouse.wheel(0, -Math.log(scale) / .002); await page.keyboard.up('Control'); await settle(); }
check(Math.abs((await state()).scale - scale) < .002, `${scale}: actual Ctrl+wheel Zoom reaches requested scale`);
const target = current === 'hanmac-office-0' ? 'hanmac-office-sibling' : 'hanmac-office-0';
const result = await drag(employee('virtual-022'), title(target));
check(result.after.cards.find(card => card.id === 'virtual-022')?.organizationId === target && Math.abs(result.after.scale - scale) < .002 && result.after.dialogs === 0, `${scale}: actual pointer Drop uses transformed screen coordinates`);
measurements.push({ name: `zoom-${scale}`, before: result.before, after: result.after }); current = target;
}
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
await pan(48, 24);
const target = current === 'hanmac-office-0' ? 'hanmac-office-sibling' : 'hanmac-office-0';
const result = await drag(employee('virtual-022'), title(target));
check(result.after.cards.find(card => card.id === 'virtual-022')?.organizationId === target && result.after.scale === result.before.scale, 'Drop after Fit and Pan uses current transformed target');
await snap('zoom-pan-drop-complete');
});
for (const layout of ['lr', 'hybrid']) await section(`mode-${layout}`, async () => {
await setup({ layout });
const staff = await drag(employee('virtual-022'), title('hanmac-office-sibling'));
check(staff.after.layout === layout && staff.after.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && staff.after.feedback.status === 'success', `${layout}: actual employee Drag supported`);
const group = await drag(title('hanmac-office-0'), title('hanmac-office-1'), { inspect: true });
check(group.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1' && group.after.feedback.status === 'success', `${layout}: actual group Drag supported`);
check(group.after.paths.some(path => path.id === 'hanmac-office-0' && path.parentId === 'hanmac-office-1'), `${layout}: moved group connector uses new parent`);
checkConsistency(group.after, layout); measurements.push({ name: `${layout}-moves`, staff: staff.after, group: group.after, groupDrag: group });
await snap(`${layout}-group-moved`);
});
await section('retained', async () => {
await setup();
await title('hanmac-office-sibling').click(); await ready();
const moved = await drag(employee('virtual-022'), title('hanmac-office-sibling'));
check(moved.after.feedback.status === 'success' && await title('hanmac-office-sibling').getAttribute('aria-expanded') === 'false' && await employee('virtual-022').count() === 0, 'Drop onto collapsed target updates relationship and retains collapsed view');
await title('hanmac-office-sibling').click(); await ready(20);
check((await state()).cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling', 'Expanding target reveals moved employee once');
await title('hanmac-office-0').click(); await ready();
const group = await drag(title('hanmac-office-0'), title('hanmac-office-1'));
check(group.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1' && await title('hanmac-office-0').getAttribute('aria-expanded') === 'false', 'Moving collapsed source group retains its collapsed state');
await title('hanmac-office-0').click(); await ready(20);
check((await state()).nodes.find(org => org.id === 'hanmac-cell-0')?.parentId === 'hanmac-office-0', 'Moved collapsed subtree is restored when source expands');
await chooseCompanies([]); await ready(0); await chooseCompanies(['한맥기술']); await ready(20);
const shown = await state(); check(shown.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && shown.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1', 'Company hide/re-show retains employee and group edits without duplicate data');
checkConsistency(shown, 'Re-shown company');
await page.getByRole('button', { name: '초기화', exact: true }).click(); await ready(20);
const reset = await state(); check(reset.companyRoots.length === 7 && reset.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-division-0' && reset.feedback.status === 'idle', 'Reset regenerates original virtual data/settings and clears move feedback');
});
// A failed reset assertion can be checked without repeating successful
// collapsed-target/company-selection probes in the retained section.
await section('reset', async () => {
await setup(); await drag(title('hanmac-office-0'), title('hanmac-office-1'));
const edited = await state();
await page.getByRole('button', { name: '초기화', exact: true }).click(); await ready(20);
const reset = await state();
check(edited.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1'
&& reset.companyRoots.length === 7 && reset.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-division-0' && reset.feedback.status === 'idle',
'Reset clears actual group edit, restores seven company roots and original membership, and clears feedback', { before: edited.feedback, after: reset.feedback, roots: reset.companyRoots });
});
await section('hybrid-cross-staff', async () => {
await setup({ companies: ['한맥기술', '삼안'], layout: 'hybrid' });
const staff = await drag(employee('virtual-022'), title('saman-office-0'), { inspect: true, screenshot: 'hybrid-cross-company-staff-hover' });
const card = staff.after.cards.find(card => card.id === 'virtual-022');
check(staff.hover.drop.find(target => target.id === 'saman-office-0')?.hover === 'allowed'
&& card?.organizationId === 'saman-office-0' && card.companyId === 'saman' && card.border[card.direction] === colors.saman && staff.after.feedback.status === 'success',
'hybrid: cross-company staff Drag updates organization, company and color', staff.after.feedback);
check(staff.after.nodes.find(org => org.id === 'hanmac-root').inclusive === 19 && staff.after.nodes.find(org => org.id === 'saman-root').inclusive === 21
&& staff.after.cards.length === 40 && new Set(staff.after.cards.map(card => card.id)).size === 40 && staff.after.dialogs === 0,
'hybrid: cross-company staff updates both company totals without duplication/click');
await employee('virtual-022').click(); await dialog().waitFor();
const company = await dialog().locator('dl > div').filter({ has: page.locator('dt', { hasText: '소속 회사' }) }).locator('dd').innerText();
const organization = await dialog().locator('dl > div').filter({ has: page.locator('dt', { hasText: '소속 조직' }) }).locator('dd').innerText();
check(company === '삼안' && organization === '가상 1실', 'Hybrid cross-company HM Dialog shows changed company and organization', { company, organization });
});
await section('cross-company', async () => {
for (const layout of ['tb', 'lr', 'hybrid']) {
await setup({ companies: ['한맥기술', '삼안'], layout });
let initial = await state();
if (layout !== 'hybrid') {
const staff = await drag(employee('virtual-022'), title('saman-office-0'), { inspect: true, screenshot: `${layout}-cross-company-staff-hover` });
const card = staff.after.cards.find(card => card.id === 'virtual-022');
check(staff.hover.drop.find(target => target.id === 'saman-office-0')?.hover === 'allowed'
&& card?.organizationId === 'saman-office-0' && card.companyId === 'saman' && card.border[card.direction] === colors.saman && staff.after.feedback.status === 'success', `${layout}: cross-company staff Drag updates organization, company and color`, staff.after.feedback);
check(staff.after.nodes.find(org => org.id === 'hanmac-root').inclusive === 19 && staff.after.nodes.find(org => org.id === 'saman-root').inclusive === 21
&& staff.after.cards.length === 40 && staff.after.dialogs === 0, `${layout}: cross-company staff updates both company totals without duplication/click`);
if (layout === 'tb') {
await employee('virtual-022').click(); await dialog().waitFor();
const company = await dialog().locator('dl > div').filter({ has: page.locator('dt', { hasText: '소속 회사' }) }).locator('dd').innerText();
const organization = await dialog().locator('dl > div').filter({ has: page.locator('dt', { hasText: '소속 조직' }) }).locator('dd').innerText();
check(company === '삼안' && organization === '가상 1실', 'Cross-company HM Dialog shows changed company and organization', { company, organization });
await page.keyboard.press('Escape'); await dialog().waitFor({ state: 'hidden' }); await settle();
}
initial = staff.after;
}
const subtree = new Set(['hanmac-office-0', 'hanmac-cell-0', 'hanmac-team-0', 'hanmac-team-sibling']);
const transferred = initial.nodes.find(org => org.id === 'hanmac-office-0').inclusive;
const subtreeEmployees = initial.cards.filter(card => subtree.has(card.organizationId)).map(card => card.id);
const group = await drag(title('hanmac-office-0'), title('saman-office-1'), { inspect: true, screenshot: `${layout}-cross-company-group-hover` });
check(group.hover.drop.find(target => target.id === 'saman-office-1')?.hover === 'allowed'
&& group.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'saman-office-1' && group.after.feedback.status === 'success', `${layout}: cross-company group Drag changes real parent`, group.after.feedback);
check(group.after.nodes.filter(org => subtree.has(org.id)).every(org => org.companyId === 'saman')
&& subtreeEmployees.every(id => { const card = group.after.cards.find(card => card.id === id); return card?.companyId === 'saman' && subtree.has(card.organizationId) && card.border[card.direction] === colors.saman; })
&& group.after.nodes.find(org => org.id === 'hanmac-cell-0')?.parentId === 'hanmac-office-0', `${layout}: entire transferred subtree retains IDs/hierarchy and receives target company colors`);
check(group.after.nodes.find(org => org.id === 'hanmac-root').inclusive === initial.nodes.find(org => org.id === 'hanmac-root').inclusive - transferred
&& group.after.nodes.find(org => org.id === 'saman-root').inclusive === initial.nodes.find(org => org.id === 'saman-root').inclusive + transferred, `${layout}: cross-company group updates both company headcounts`);
checkConsistency(group.after, `${layout} cross-company`, 40);
measurements.push({ name: `${layout} cross-company transfers`, initial, groupDrag: group }); await snap(`${layout}-cross-company-complete`);
if (layout === 'tb') {
const samanCount = group.after.nodes.find(org => org.id === 'saman-root').inclusive;
const hanmacCount = group.after.nodes.find(org => org.id === 'hanmac-root').inclusive;
await chooseCompanies(['삼안']); await ready(samanCount); let shown = await state();
check(shown.cards.length === samanCount && shown.countText.includes(`합계 ${samanCount}명`) && shown.cards.some(card => card.id === 'virtual-022')
&& shown.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'saman-office-1', 'Destination-only selection retains transferred employee/subtree and shows current destination headcount', shown.countText);
await chooseCompanies(['한맥기술']); await ready(hanmacCount); shown = await state();
check(shown.cards.length === hanmacCount && shown.countText.includes(`합계 ${hanmacCount}명`) && !shown.cards.some(card => card.id === 'virtual-022')
&& !shown.nodes.some(org => org.id === 'hanmac-office-0'), 'Source-only selection excludes transferred data and shows current source headcount', shown.countText);
await chooseCompanies(['한맥기술', '삼안']); await ready(40); shown = await state();
check(new Set(shown.cards.map(card => card.id)).size === 40 && shown.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'saman-office-1', 'Both companies re-show preserves cross-company edits without duplicate cards');
}
}
});
await section('keyboard', async () => {
await setup(); await employee('virtual-022').focus(); await settle();
await page.keyboard.press('Alt+m'); await settle(); const opened = await state();
check(opened.dragging === 'true' && opened.drop.some(target => target.hover === 'allowed'), 'Alt+M starts keyboard movement with an allowed target');
const initialHover = opened.drop.find(target => target.hover)?.id;
await page.keyboard.press('ArrowRight'); await settle(); check((await state()).drop.find(target => target.hover)?.id !== initialHover, 'Keyboard Arrow changes target');
await page.keyboard.press('Escape'); await settle(); const cancelled = await state();
check(!cancelled.dragging && cancelled.feedback.status === 'cancelled' && cancelled.activeEmployee === 'virtual-022' && cancelled.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-0', 'Escape cancels keyboard edit, retains data and returns source focus');
await page.keyboard.press('Alt+m'); await settle();
for (let i = 0; i < 30 && (await state()).drop.find(target => target.hover)?.id !== 'hanmac-office-sibling'; i++) { await page.keyboard.press('ArrowRight'); await settle(); }
check((await state()).drop.find(target => target.hover)?.id === 'hanmac-office-sibling', 'Keyboard selects intended same-company destination');
await page.keyboard.press('Enter'); await ready(20); const completed = await state();
check(completed.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && completed.feedback.status === 'success' && completed.dialogs === 0, 'Keyboard Enter commits movement without employee Dialog');
await title('hanmac-office-0').focus(); await settle(); await page.keyboard.press('Alt+m'); await settle();
for (let i = 0; i < 30 && (await state()).drop.find(target => target.hover)?.id !== 'hanmac-office-1'; i++) { await page.keyboard.press('ArrowDown'); await settle(); }
await page.keyboard.press('Enter'); await ready(20);
check((await state()).nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1', 'Keyboard group move changes parent through same policy');
await snap('keyboard-move-complete');
});
await section('fit-cross', async () => {
for (const layout of ['tb', 'lr', 'hybrid']) {
await setup({ companies: ['한맥기술', '삼안'], layout });
await drag(title('hanmac-office-0'), title('saman-office-1'));
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
const fitted = await state();
check(fitted.feedback.status === 'success' && fitted.forest.x >= fitted.viewport.x - 1 && fitted.forest.right <= fitted.viewport.right + 1
&& fitted.forest.y >= fitted.viewport.y - 1 && fitted.forest.bottom <= fitted.viewport.bottom + 1,
`${layout}: Fit contains recalculated forest bounds after cross-company subtree transfer`, { viewport: fitted.viewport, forest: fitted.forest, scale: fitted.scale });
measurements.push({ name: `${layout} post-transfer Fit`, state: fitted }); await snap(`${layout}-cross-company-fit`);
}
});
check(errors.length === 0, 'New console/page errors: zero', errors);
const result = { startedAt, completedAt: new Date().toISOString(), browser: browser.version(), origin, sections: only, results, measurements, errors,
notVerified: ['Physical touch device', 'Actual screen reader'], pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, `browser-editing${suffix}.json`), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p9-3/browser-editing${suffix}.json` }));
await browser.close(); if (result.fail) process.exitCode = 1;
examples/org-chart/verify-p9-4-core.mjs
+100
View File
@@ -0,0 +1,100 @@
// Focused public Vanilla API and dynamic-option parity with React Story evidence.
import fs from 'node:fs/promises';
import path from 'node:path';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output = path.resolve('test-results/org-chart-p9-4');
const origin = (process.env.ORGCHART_CORE_ORIGIN ?? 'http://127.0.0.1:6074').replace(/\/$/, '');
const only = process.argv.slice(2), run = name => !only.length || only.includes(name), suffix = only.length ? `-${only.join('-')}` : '';
const results = [], errors = [], measurements = [], startedAt = new Date().toISOString();
await fs.mkdir(output, { recursive:true });
const check = (pass, name, detail) => { results.push({ name, status:pass ? 'PASS':'FAIL', ...(detail === undefined ? {} : { detail }) }); if (!pass) console.log('FAIL', name, JSON.stringify(detail)); };
const browser = await launchChromium({ headless:true }), page = await browser.newPage({ viewport:{ width:1440,height:1000 } });
page.setDefaultTimeout(15000);
page.on('pageerror', error => errors.push({ type:'pageerror', message:error.message }));
page.on('console', message => { if (message.type() === 'error') errors.push({ type:'console', message:message.text() }); });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 8; i++) await new Promise(requestAnimationFrame); });
async function ready() { await page.waitForFunction(() => window.fixtureReady && window.chart?.getState().status === 'ready' && [...window.shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)); await settle(); }
async function fresh(extra, mode = 'auto') {
await page.goto(`${origin}/test-results/org-chart-p9-4/vanilla.html`); await ready();
if (extra || mode !== 'auto') { await page.evaluate(({ extra, mode }) => window.mountChart(mode, extra ?? {}), { extra,mode }); await ready(); }
}
async function section(name, action) { if (!run(name)) return; try { await action(); } catch (error) { check(false, `${name}: execution completed`, { message:error.message,stack:error.stack }); await page.mouse.up().catch(() => {}); await page.screenshot({ path:path.join(output,`core-failure-${name}.png`) }).catch(() => {}); } }
const employee = id => page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`);
const requests = [
{ kind:'employee',sourceId:'virtual-022',targetOrganizationId:'hanmac-office-sibling' },
{ kind:'organization',sourceId:'hanmac-office-0',targetOrganizationId:'hanmac-office-1' },
{ kind:'employee',sourceId:'virtual-022',targetOrganizationId:'saman-office-0' },
{ kind:'organization',sourceId:'hanmac-office-0',targetOrganizationId:'saman-office-1' },
];
await section('api', async () => {
await fresh();
const before = await page.evaluate(() => ({ enabled:window.chart.getDragDropEnabled(), data:JSON.stringify(window.chart.getData()), loads:window.loads }));
check(before.enabled === false && before.loads === 1, 'Vanilla omitted option defaults OFF and loads source once', before.loads);
for (const request of requests) {
const rejection = await page.evaluate(request => window.chart.move(request), request);
check(!rejection.moved && rejection.code === 'EDITING_DISABLED' && await page.evaluate(data => JSON.stringify(window.chart.getData()) === data, before.data), `OFF public move rejects ${request.kind} to ${request.targetOrganizationId} without changing data`, rejection);
}
const pure = await page.evaluate(request => window.mod.applyOrgChartMove(window.fixture, request), requests[0]);
check(pure.moved, 'Pure data transformation remains compatible outside interactive OFF policy', pure.moved ? pure.request : pure);
const legacy = await page.evaluate(() => {
const original = JSON.stringify(window.template);
const total = window.mod.createOrgChartExampleDataset(window.template, { scope:'total',employeeCount:100 });
const perCompany = window.mod.createOrgChartExampleDataset(window.template, { scope:'per-company',employeeCount:20,companyIds:['hanmac','saman'] });
return { total:total.employees.length,totalValid:window.mod.validateOrgChartDataset(total).valid,perCompany:perCompany.employees.length,sourceUnchanged:JSON.stringify(window.template) === original };
});
check(legacy.total === 100 && legacy.totalValid && legacy.perCompany === 40 && legacy.sourceUnchanged, 'Public total scope remains compatible while Expanded uses company counts', legacy);
const toggle = await page.evaluate(() => {
const data = window.chart.getData(), forest = window.shadow.querySelector('.hm-orgchart-forest'), viewport = window.chart.getViewportState();
window.chart.setDragDropEnabled(true); const on = window.chart.getDragDropEnabled(); window.chart.setDragDropEnabled(false); const off = window.chart.getDragDropEnabled();
return { on,off,dataSame:data === window.chart.getData(),forestSame:forest === window.shadow.querySelector('.hm-orgchart-forest'),viewportSame:JSON.stringify(viewport) === JSON.stringify(window.chart.getViewportState()),loads:window.loads };
});
check(toggle.on && !toggle.off && toggle.dataSame && toggle.forestSame && toggle.viewportSame && toggle.loads === before.loads, 'Vanilla setter changes policy without data reload, DOM remount or viewport reset', toggle);
await page.evaluate(() => window.chart.setDragDropEnabled(true));
for (const request of requests) {
const moved = await page.evaluate(request => window.chart.move(request), request); await ready();
check(moved.moved, `ON public move permits ${request.kind} to ${request.targetOrganizationId}`, moved.moved ? moved.request : moved);
}
const after = await page.evaluate(() => {
const data = window.chart.getData(), before = JSON.stringify(data), forest = window.shadow.querySelector('.hm-orgchart-forest'); window.chart.setDragDropEnabled(false);
return { same:JSON.stringify(window.chart.getData()) === before,owned:data === window.chart.getData(),forestSame:forest === window.shadow.querySelector('.hm-orgchart-forest'),
unique:new Set(data.employees.map(employee => employee.id)).size === data.employees.length,total:data.employees.length,valid:window.mod.validateOrgChartDataset(data).valid,
employee:data.employees.find(employee => employee.id === 'virtual-022'),group:data.organizations.find(group => group.id === 'hanmac-office-0'),fixturePreserved:JSON.stringify(window.fixture) === window.fixtureOriginal,loads:window.loads };
});
check(after.same && after.owned && after.forestSame && after.unique && after.total === 40 && after.valid && after.fixturePreserved && after.loads === 1
&& after.employee.organizationId === 'saman-office-0' && after.group.parentId === 'saman-office-1', 'Vanilla OFF preserves completed cross-company moves, unique IDs and original fixture without reload', after);
await page.screenshot({ path:path.join(output,'vanilla-on-off-preserved.png'),fullPage:true }); measurements.push({ name:'public API',before,toggle,after });
});
await section('cancel', async () => {
await fresh({ dragDropEnabled:true }); await page.evaluate(() => { window.pointerId = undefined; window.shadow.querySelector('.hm-orgchart-viewport').addEventListener('pointerdown', event => { window.pointerId = event.pointerId; }, { capture:true }); });
const box = await employee('virtual-022').boundingBox();
await page.mouse.move(box.x + box.width/2,box.y + box.height/2); await page.mouse.down(); await page.mouse.move(box.x + box.width/2 + 12,box.y + box.height/2,{ steps:2 }); await settle();
const before = await page.evaluate(() => { const v = window.shadow.querySelector('.hm-orgchart-viewport'); return { dragging:v.dataset.editDragging,captured:v.hasPointerCapture(window.pointerId),data:JSON.stringify(window.chart.getData()) }; });
const after = await page.evaluate(() => { window.chart.setDragDropEnabled(false); const v = window.shadow.querySelector('.hm-orgchart-viewport'); return { dragging:v.dataset.editDragging,captured:v.hasPointerCapture(window.pointerId),highlight:window.shadow.querySelectorAll('[data-drop-state],[data-drop-hover],[data-edit-source]').length,data:JSON.stringify(window.chart.getData()) }; });
await page.mouse.up(); await settle();
check(before.dragging === 'true' && before.captured && !after.dragging && !after.captured && after.highlight === 0 && before.data === after.data, 'Vanilla live pointer OFF releases capture and clears all pending/highlight state', { before:{ ...before,data:undefined },after:{ ...after,data:undefined } });
check(await page.locator('.hm-orgchart-employee-dialog[open]').count() === 0 && await page.evaluate(data => JSON.stringify(window.chart.getData()) === data,before.data), 'Vanilla canceled pointer release neither commits nor opens Dialog');
await page.evaluate(() => window.chart.setDragDropEnabled(true)); await employee('virtual-022').focus(); await page.keyboard.press('Alt+m'); await settle();
const keyboardBefore = await page.evaluate(() => window.shadow.querySelector('.hm-orgchart-viewport').dataset.editDragging);
await page.evaluate(() => window.chart.setDragDropEnabled(false)); await page.keyboard.press('Enter'); await settle();
check(keyboardBefore === 'true' && await page.evaluate(data => !window.shadow.querySelector('[data-edit-dragging],[data-drop-state],[data-drop-hover]') && JSON.stringify(window.chart.getData()) === data,before.data), 'Vanilla active keyboard move is canceled and stale Enter cannot commit');
});
await section('default', async () => {
for (const [flag,expected] of [[undefined,false],[false,false],[true,true]]) {
await fresh(flag === undefined ? undefined : { dragDropEnabled:flag });
const actual = await page.evaluate(() => ({ value:window.chart.getDragDropEnabled(),attribute:window.shadow.querySelector('.hm-orgchart-viewport').dataset.dragDropEnabled,shortcuts:[...window.shadow.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-expanded-toggle')].map(element => element.getAttribute('aria-keyshortcuts')) }));
check(actual.value === expected && actual.attribute === String(expected) && actual.shortcuts.every(value => expected ? value === 'Alt+M' : value === null), `Vanilla option ${String(flag)} matches React default/setter policy and keyboard affordances`, actual.value);
}
});
await section('fixed', async () => {
await fresh({ dragDropEnabled:true },'fixed');
const fixed = await page.evaluate(async () => {
let setterRejected = false; try { window.chart.setDragDropEnabled(true); } catch (error) { setterRejected = /Auto/.test(error.message); }
let moveRejected = false; try { await window.chart.move({ kind:'employee',sourceId:'emp-001',targetOrganizationId:'management-plan' }); } catch (error) { moveRejected = /Auto/.test(error.message); }
return { enabled:window.chart.getDragDropEnabled(),setterRejected,moveRejected,editingUI:window.shadow.querySelectorAll('[data-drag-drop-enabled],[data-edit-dragging],[data-drop-state],.hm-orgchart-move-feedback').length,loads:window.loads };
});
check(!fixed.enabled && fixed.setterRejected && fixed.moveRejected && fixed.editingUI === 0, 'Fixed ignores dragDropEnabled option, rejects Auto setter/move and adds no editing UI', fixed);
});
check(errors.length === 0,'Vanilla new console/page errors: zero',errors);
const result = { startedAt,completedAt:new Date().toISOString(),browser:browser.version(),origin,sections:only,results,measurements,errors,pass:results.filter(item => item.status === 'PASS').length,fail:results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output,`core${suffix}.json`),JSON.stringify(result,null,2)); await browser.close();
console.log(JSON.stringify({ pass:result.pass,fail:result.fail,output:`test-results/org-chart-p9-4/core${suffix}.json` })); if (result.fail) process.exitCode = 1;
examples/org-chart/verify-p9-4-preservation.mjs
+38
View File
@@ -0,0 +1,38 @@
// Compare protected source hashes to the captured pre-P9.4 state and one Fixed
// screen to existing P9.2 evidence. No full historical regression suite replay.
import fs from 'node:fs/promises';
import path from 'node:path';
import { createHash } from 'node:crypto';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output = path.resolve('test-results/org-chart-p9-4'), origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064').replace(/\/$/, '');
const results = [],errors = [],startedAt = new Date().toISOString();
const check = (pass,name,detail) => { results.push({ name,status:pass ? 'PASS':'FAIL', ...(detail === undefined ? {} : { detail }) }); if (!pass) console.log('FAIL',name,JSON.stringify(detail)); };
const fixedOnly = process.argv.includes('--fixed-only');
const baseline = fixedOnly ? { files:[] } : JSON.parse(await fs.readFile(path.join(output,'baseline.json'),'utf8'));
const protectedPath = name => /^examples\/org-chart\/data.*\.json$/.test(name) || /^packages\/org-chart\/src\/assets\//.test(name)
|| ['packages/org-chart/src/company-color-presets.ts','packages/org-chart/src/core/style-presets.ts','packages/org-chart/src/core/employee-card.ts',
'packages/org-chart/src/styles/employee-card.css','packages/org-chart/src/core/workdesk-artwork.ts','packages/org-chart/src/core/workdesk-layout.ts',
'src/org-chart/center-composition-preview.ts','src/org-chart/org-chart-full-composition.stories.tsx','src/org-chart/org-chart-department-colors.stories.tsx',
'src/org-chart/org-chart-overview-internal.stories.tsx'].includes(name);
const protectedFiles = baseline.files.filter(file => protectedPath(file.path));
const changed = [];
for (const file of protectedFiles) { const actual = createHash('sha256').update(await fs.readFile(path.resolve(file.path))).digest('hex').toUpperCase(); if (actual !== file.sha256.toUpperCase()) changed.push({ path:file.path,before:file.sha256,after:actual }); }
if (!fixedOnly) check(protectedFiles.length > 20 && changed.length === 0,'Pre-P9.4 fixtures, approved SVG/images, card renderer/styles, company/department presets and Fixed source hashes preserved',{ checked:protectedFiles.length,changed });
const browser = await launchChromium({ headless:true }), page = await browser.newPage({ viewport:{ width:1440,height:900 } });
page.on('pageerror',error => errors.push(error.message)); page.on('console',message => { if (message.type() === 'error') errors.push(message.text()); });
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);
await page.waitForFunction(() => { const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot; return shadow?.querySelector('.hm-orgchart-stage[data-workdesk-artwork]') && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet); });
await page.evaluate(async () => { await document.fonts.ready; await Promise.all([...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode(); })); for (let i = 0; i < 12; i++) await new Promise(requestAnimationFrame); });
const priorSource = await fs.readFile('examples/org-chart/verify-p9-2-composition.mjs','utf8');
const from = priorSource.indexOf('async function snapshot()'),to = priorSource.indexOf('async function stability()',from);
const snapshot = await new Function('page',priorSource.slice(from,to) + '; return snapshot();')(page);
const previous = JSON.parse(await fs.readFile('test-results/org-chart-p9-2/browser-composition.json','utf8')).snapshots['1440'];
const same = (a,b) => JSON.stringify(a) === JSON.stringify(b);
const normalizedEqual = snapshot.elements.every((element,index) => { const old = previous.elements[index]; return old?.key === element.key && old.hash === element.hash && same(old.style,element.style) && Object.keys(element.box).every(key => Math.abs(element.box[key] - old.box[key]) < .15); });
check(previous.htmlHash === snapshot.htmlHash && same(previous.assets,snapshot.assets) && normalizedEqual,'Fixed DOM, 139 asset hashes and 152 styles/geometry match preserved P9.2 evidence',{ previous:previous.htmlHash,current:snapshot.htmlHash,elements:snapshot.elements.length,assets:snapshot.assets.length });
check(Math.abs(snapshot.centerDifference) < 1 && snapshot.collisions.length === 0 && snapshot.counts.cards === 43 && snapshot.counts.paths === 5,'Fixed minimal center/cards/connectors regression',{ centerDifference:snapshot.centerDifference,counts:snapshot.counts,collisions:snapshot.collisions });
check(await page.evaluate(() => !document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('[data-drag-drop-enabled],[data-edit-dragging],[data-drop-state],.hm-orgchart-move-feedback')),'Fixed has no ON/OFF or editing UI');
await page.screenshot({ path:path.join(output,'fixed-preserved-1440.png'),fullPage:true });
check(errors.length === 0,'Preservation browser console/page errors: zero',errors);
const result = { startedAt,completedAt:new Date().toISOString(),origin,results,errors,protectedFiles:protectedFiles.map(file => file.path),fixedSnapshot:snapshot,pass:results.filter(item => item.status === 'PASS').length,fail:results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output,'fixed-preservation.json'),JSON.stringify(result,null,2)); await browser.close(); console.log(JSON.stringify({ pass:result.pass,fail:result.fail })); if (result.fail) process.exitCode = 1;
examples/org-chart/verify-p9-4.mjs
+447
View File
@@ -0,0 +1,447 @@
// Focused P9.4 Storybook deltas. Run named sections to repair only failed probes.
// Existing P7-P9.3 evidence is preserved and is not replayed by this harness.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { createHash } from 'node:crypto';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-4');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064').replace(/\/$/, '');
const only = process.argv.slice(2), suffix = only.length ? `-${only.join('-')}` : '';
const results = [], measurements = [], errors = [], startedAt = new Date().toISOString();
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, `browser-progress${suffix}.json`), JSON.stringify({ startedAt, results, measurements, errors }, null, 2));
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) }); persist();
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1920, height: 1700 } });
page.setDefaultTimeout(20000);
page.on('pageerror', error => { errors.push({ type: 'pageerror', message: error.message }); persist(); });
page.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', message: message.text(), location: message.location() }); persist(); } });
const viewport = () => page.locator('.hm-orgchart-viewport');
const employee = id => page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`);
const title = id => page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${id}"]`);
const companyTrigger = () => page.getByRole('button', { name: /^회사 선택/ });
const companyPanel = () => page.getByRole('dialog', { name: '회사 선택', exact: true });
const companyCheckbox = name => companyPanel().getByRole('checkbox', { name, exact: true });
const dialog = () => page.locator('[data-component="HMOrgChartEmployeeDialog"]');
const editSwitch = () => page.getByRole('switch', { name: /Drag & Drop|조직 이동/ });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 8; i++) await new Promise(requestAnimationFrame); });
async function ready(count) {
await page.waitForFunction(count => {
const shadow = document.querySelector('.hm-orgchart-host,.hm-orgchart-component-host')?.shadowRoot;
return shadow && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& (count === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === count);
}, count, { timeout: 45000 }); await settle();
}
async function select(label, option) {
await page.getByRole('combobox', { name: label, exact: true }).click();
await page.getByRole('option', { name: option, exact: true }).click(); await ready();
}
async function countPerCompany(count, expected) {
await select('회사당 직원 수', `${count}명`);
const apply = page.getByRole('button', { name: '데이터 적용', exact: true });
if (await apply.count() && await apply.isEnabled()) await apply.click();
await ready(expected);
}
async function chooseCompanies(names) {
await companyTrigger().click(); await companyPanel().waitFor();
const all = companyCheckbox('전체 선택');
for (let i = 0; i < 2 && await all.getAttribute('aria-checked') !== 'false'; i++) { await all.click(); await ready(); }
await ready(0);
for (const name of names) { await companyCheckbox(name).click(); await ready(); }
await page.keyboard.press('Escape'); await companyPanel().waitFor({ state: 'hidden' }); await ready();
}
async function toggle(enabled, { programmatic = false } = {}) {
const control = editSwitch();
if (await control.getAttribute('aria-checked') !== String(enabled)) {
// A live pointer must remain down while an external settings change cancels
// it. DOM click is the same React handler and does not synthesize pointerup.
if (programmatic) await control.evaluate(element => element.click()); else await control.click();
}
await settle();
}
async function setup({ companies = ['한맥기술'], layout = 'tb', enabled = false } = {}) {
await page.setViewportSize({ width: 1920, height: 1700 });
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
await companyTrigger().waitFor(); await ready(140);
await chooseCompanies(companies); await ready(companies.length * 20);
if (layout !== 'tb') await select('조직도 표시 유형', layout === 'lr' ? '가로형 LR' : '혼합형 Hybrid');
await toggle(enabled); await viewport().scrollIntoViewIfNeeded();
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
}
async function state() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const viewport = shadow.querySelector('.hm-orgchart-viewport'), expanded = shadow.querySelector('.hm-orgchart-expanded');
const rect = element => { const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
const nodes = [...shadow.querySelectorAll('.node[data-organization-id]')].map(element => ({
id: element.dataset.organizationId, parentId: element.dataset.parentId, companyId: element.dataset.companyId,
direct: Number(element.dataset.directEmployeeCount), inclusive: Number(element.dataset.inclusiveEmployeeCount), collapsed: element.dataset.collapsed,
}));
const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(element => ({
id: element.dataset.employeeId, organizationId: element.closest('.node').dataset.organizationId, companyId: element.dataset.companyId,
direction: element.dataset.connectionDirection, kind: element.dataset.cardKind,
border: { top: getComputedStyle(element).borderTopColor, left: getComputedStyle(element).borderLeftColor, right: getComputedStyle(element).borderRightColor },
}));
const feedback = shadow.querySelector('.hm-orgchart-move-feedback');
return { layout: expanded?.dataset.autoLayout, scale: Number(viewport.dataset.scale), panX: Number(viewport.dataset.panX), panY: Number(viewport.dataset.panY),
viewport: rect(viewport), forest: rect(shadow.querySelector('.hm-orgchart-forest')), nodes, cards,
feedback: { status: feedback?.dataset.moveStatus, text: feedback?.textContent },
drop: [...shadow.querySelectorAll('[data-drop-state]')].map(element => ({ id: element.dataset.organizationId, state: element.dataset.dropState, hover: element.dataset.dropHover })),
dragging: viewport.dataset.editDragging, panDragging: viewport.dataset.dragging, activeEmployee: shadow.activeElement?.dataset.employeeId,
activeOrganization: shadow.activeElement?.dataset.organizationId, dragDropEnabled: viewport.dataset.dragDropEnabled,
countText: document.querySelector('[data-component="OrgChartExampleCounts"]')?.textContent.trim(), dialogs: document.querySelectorAll('[data-component="HMOrgChartEmployeeDialog"]').length,
companyRoots: nodes.filter(org => org.parentId === '').map(org => org.companyId), documentWidth: document.documentElement.scrollWidth,
};
});
}
const relations = s => JSON.stringify({ nodes: s.nodes.map(({ id, parentId, companyId }) => ({ id, parentId, companyId })), cards: s.cards.map(({ id, organizationId, companyId }) => ({ id, organizationId, companyId })) });
async function blankPoint() {
return page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot, viewport = shadow.querySelector('.hm-orgchart-viewport'), box = viewport.getBoundingClientRect();
for (const [dx, dy] of [[8, 8], [8, box.height - 8], [box.width - 8, 8], [box.width - 8, box.height - 8], [box.width / 2, box.height - 8]]) {
const point = { x: box.left + dx, y: box.top + dy }, hit = shadow.elementFromPoint(point.x, point.y);
if (hit && !hit.closest('button,a,.hm-orgchart-employee,.node')) return point;
} throw new Error('No visible blank Pan point found');
});
}
async function pan(dx, dy) {
const p = await blankPoint(); await page.mouse.move(p.x, p.y); await page.mouse.down(); const v = await viewport().boundingBox();
await page.mouse.move(p.x + Math.sign(v.x + v.width / 2 - p.x) * 8, p.y, { steps: 2 });
await page.mouse.move(p.x + dx, p.y + dy, { steps: 8 }); await page.mouse.up(); await settle();
}
async function centerPair(source, target) {
await viewport().scrollIntoViewIfNeeded(); await source.focus(); await settle();
for (let pass = 0; pass < 3; pass++) {
const a = await source.boundingBox(), b = await target.boundingBox(), v = await viewport().boundingBox();
if (!a || !b || !v) throw new Error('Drag source/target has no geometry');
const left = Math.min(a.x, b.x), right = Math.max(a.x + a.width, b.x + b.width), top = Math.min(a.y, b.y), bottom = Math.max(a.y + a.height, b.y + b.height);
if (right - left > v.width - 24 || bottom - top > v.height - 24) throw new Error('Drag pair exceeds viewport at current scale');
const dx = v.x + v.width / 2 - (left + right) / 2, dy = v.y + v.height / 2 - (top + bottom) / 2;
if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break; await pan(dx, dy);
}
}
async function drag(source, target, beforeRelease) {
await centerPair(source, target); const a = await source.boundingBox(), b = await target.boundingBox(), before = await state();
await page.mouse.move(a.x + a.width / 2, a.y + a.height / 2); await page.mouse.down();
await page.mouse.move(a.x + a.width / 2 + 8, a.y + a.height / 2, { steps: 2 });
await page.mouse.move(b.x + b.width / 2, b.y + b.height / 2, { steps: 14 }); const hover = await state();
if (beforeRelease) await beforeRelease();
await page.mouse.up(); await ready(); return { before, hover, after: await state() };
}
async function snap(name, fullPage = false) { await page.screenshot({ path: path.join(output, `${name}.png`), fullPage }); }
async function section(name, action) {
if (only.length && !only.includes(name)) return;
try { await action(); } catch (error) { check(false, `${name}: execution completed`, { message: error.message, stack: error.stack }); await page.mouse.up().catch(() => {}); await snap(`failure-${name}`, true).catch(() => {}); }
}
function counts(s, companies, perCompany, name) {
const grouped = Object.fromEntries(companies.map(id => [id, s.cards.filter(card => card.companyId === id).length]));
check(s.cards.length === companies.length * perCompany && new Set(s.cards.map(card => card.id)).size === s.cards.length
&& new Set(s.nodes.map(org => org.id)).size === s.nodes.length && Object.values(grouped).every(count => count === perCompany), `${name}: unique IDs and exact per-company employee counts`, grouped);
check(s.companyRoots.length === companies.length && s.nodes.filter(org => org.parentId === '').every(org => org.inclusive === perCompany), `${name}: root totals count organizational leaders exactly once`);
check(s.countText?.includes(`합계 ${(companies.length * perCompany).toLocaleString('ko-KR')}명`), `${name}: displayed total matches Employee IDs`, s.countText);
}
await section('department', async () => {
await page.setViewportSize({ width: 1440, height: 1000 });
await page.goto(`${origin}/iframe.html?id=orgchart--department-colors&viewMode=story`); await ready();
await page.evaluate(async () => { await Promise.all([...document.querySelector('.hm-orgchart-component-host').shadowRoot.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode(); })); });
const department = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-component-host').shadowRoot, root = shadow.querySelector('.hm-orgchart-department-colors');
const cards = [...root.querySelectorAll('[data-card-asset-size="representative"]')], card = cards[0];
const styles = element => Object.fromEntries(['fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color'].map(key => [key, getComputedStyle(element)[key]]));
const renderedCard = element => ({ id: element?.dataset.employeeId, width: element?.offsetWidth, height: element?.offsetHeight,
role: element?.querySelector('.hm-orgchart-person-role')?.textContent, name: element?.querySelector('.hm-orgchart-person-name')?.textContent,
badgeCount: element?.querySelectorAll('.hm-orgchart-job-title,.hm-orgchart-status-label').length,
background: element?.querySelector('.hm-orgchart-card-background')?.src, photo: element?.querySelector('.hm-orgchart-avatar img')?.src,
roleStyle: element ? styles(element.querySelector('.hm-orgchart-person-role')) : {}, nameStyle: element ? styles(element.querySelector('.hm-orgchart-person-name')) : {} });
const rows = [...root.querySelectorAll('.hm-orgchart-color-preview')].map(row => ({ title: row.querySelector('.hm-orgchart-color-department-name')?.textContent,
gradient: getComputedStyle(row.querySelector('.hm-orgchart-color-department-name')).backgroundImage,
color: getComputedStyle(row.querySelector('.hm-orgchart-color-department-name')).color,
cards: [...row.querySelectorAll('.hm-orgchart-employee')].map(card => ({ kind: card.dataset.cardKind, width: card.offsetWidth, height: card.offsetHeight, asset: card.dataset.cardAsset })) }));
const unwanted = root.querySelectorAll('.hm-orgchart-color-legend,.hm-orgchart-contrast-note,.hm-orgchart-contrast-comparison,.hm-orgchart-card-caption,.hm-orgchart-color-preview > p').length;
const frame = root.querySelector('.tunnel-reference__sample'), stage = frame?.querySelector('.tunnel-reference__stage');
return { representativeCount: cards.length, card: renderedCard(card), rows, unwanted,
frameStyle: frame ? Object.fromEntries(['backgroundColor','border','borderRadius','boxShadow','padding','overflow'].map(key => [key, getComputedStyle(frame)[key]])) : {},
stageStyle: stage ? Object.fromEntries(['padding','overflowX','maxWidth'].map(key => [key, getComputedStyle(stage)[key]])) : {},
representativeFirst: Boolean(card && root.firstElementChild?.contains(card)), documentWidth: document.documentElement.scrollWidth };
});
check(department.representativeCount === 1 && department.card.width === 146 && department.card.height === 74, 'Department representative: one shared 146x74 card', department.card);
check(department.card.role === '대표이사' && department.card.name === '홍 길 동' && department.card.badgeCount === 0 && /Noto Sans KR/.test(department.card.nameStyle.fontFamily), 'Department representative: approved text, font and zero badges');
check(department.representativeFirst && department.rows.length === 6 && department.rows.every(row => row.cards.length === 2 && row.cards[0].kind === 'leader' && row.cards[0].width === 146 && row.cards[0].height === 68 && row.cards[1].width === 108 && row.cards[1].height === 52), 'Department order: representative, six group titles, large leaders and small employees');
check(department.unwanted === 0, 'Department compact preview retains no legends, contrast/debug prose or duplicate card captions');
await snap('department-representative'); await snap('department-full', true);
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`); await ready();
const fixedCard = await page.locator('[data-card-asset-size="representative"]').evaluate(element => {
const styles = target => Object.fromEntries(['fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color'].map(key => [key, getComputedStyle(target)[key]]));
return { id: element.dataset.employeeId, background: element.querySelector('.hm-orgchart-card-background')?.src, photo: element.querySelector('.hm-orgchart-avatar img')?.src,
roleStyle: styles(element.querySelector('.hm-orgchart-person-role')), nameStyle: styles(element.querySelector('.hm-orgchart-person-name')) };
});
check(['id','background','photo','roleStyle','nameStyle'].every(key => JSON.stringify(fixedCard[key]) === JSON.stringify(department.card[key])), 'Department and Fixed representative reuse identical SVG, avatar and typography', { department: department.card, fixed: fixedCard });
const prior = JSON.parse(await fs.readFile(path.join(root, 'test-results/org-chart-p9-1/browser.json'), 'utf8')).snapshots?.department?.['1440'];
if (prior?.departments) check(department.rows.every((row, i) => row.gradient === prior.departments[i].headingStyle.backgroundImage && row.color === prior.departments[i].headingStyle.color), 'Department approved group gradients and white titles preserve P9.1 baseline');
else check(false, 'Department historical approved gradient evidence exists', 'Check P9.1 browser.json snapshot structure');
await page.goto(`${origin}/iframe.html?id=center-graphic-facility--tunnel&viewMode=story`); await page.locator('.tunnel-reference__sample').first().waitFor(); await settle();
const reference = await page.locator('.tunnel-reference__sample').first().evaluate(frame => {
const stage = frame.querySelector('.tunnel-reference__stage');
return { frameStyle: Object.fromEntries(['backgroundColor','border','borderRadius','boxShadow','padding','overflow'].map(key => [key, getComputedStyle(frame)[key]])),
stageStyle: Object.fromEntries(['padding','overflowX','maxWidth'].map(key => [key, getComputedStyle(stage)[key]])) };
});
check(JSON.stringify(reference.frameStyle) === JSON.stringify(department.frameStyle) && JSON.stringify(reference.stageStyle) === JSON.stringify(department.stageStyle), 'Department shares actual Tunnel preview frame, background, border, radius, shadow, padding and overflow', { department: { frameStyle: department.frameStyle, stageStyle: department.stageStyle }, reference });
measurements.push({ name: 'Department', department, fixedCard, reference });
});
await section('department-names', async () => {
// User's later naming correction only; keep every prior P9.4 PASS as evidence.
const previous = JSON.parse(await fs.readFile(path.join(output, 'browser.json'), 'utf8')).measurements.find(item => item.name === 'Department').department;
const oldStyles = JSON.parse(await fs.readFile(path.join(root, 'test-results/org-chart-p9-1/browser.json'), 'utf8')).snapshots.department['1440'].departments;
const fixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-p1.json'), 'utf8'));
await page.setViewportSize({ width:1440, height:1000 });
await page.goto(`${origin}/iframe.html?id=orgchart--department-colors&viewMode=story`); await ready();
await page.evaluate(async () => { await Promise.all([...document.querySelector('.hm-orgchart-component-host').shadowRoot.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode(); })); });
const current = await page.evaluate(async () => {
const shadow = document.querySelector('.hm-orgchart-component-host').shadowRoot, root = shadow.querySelector('.hm-orgchart-department-colors');
const hash = async data => [...new Uint8Array(await crypto.subtle.digest('SHA-256', data))].map(byte => byte.toString(16).padStart(2,'0')).join('');
const keys = ['fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color'];
const styles = element => Object.fromEntries(keys.map(key => [key,getComputedStyle(element)[key]]));
const card = async element => ({ id:element.dataset.employeeId,kind:element.dataset.cardKind,asset:element.dataset.cardAsset,width:element.offsetWidth,height:element.offsetHeight,
name:element.querySelector('.hm-orgchart-person-name')?.textContent,role:element.querySelector('.hm-orgchart-person-role')?.textContent,
badges:[...element.querySelectorAll('.hm-orgchart-job-title')].map(badge => badge.textContent),
roleStyle:styles(element.querySelector('.hm-orgchart-person-role')),nameStyle:styles(element.querySelector('.hm-orgchart-person-name')),
assets:await Promise.all([...element.querySelectorAll('img')].map(async image => ({ hash:await hash(await (await fetch(image.currentSrc || image.src)).arrayBuffer()),naturalWidth:image.naturalWidth,naturalHeight:image.naturalHeight,loaded:image.complete && image.naturalWidth > 0 }))) });
return { cards:await Promise.all([...root.querySelectorAll('.hm-orgchart-employee')].map(card)),
rows:await Promise.all([...root.querySelectorAll('.hm-orgchart-color-preview')].map(async row => ({ title:row.querySelector('.hm-orgchart-color-department-name').textContent,
gradient:getComputedStyle(row.querySelector('.hm-orgchart-color-department-name')).backgroundImage,color:getComputedStyle(row.querySelector('.hm-orgchart-color-department-name')).color,
cards:await Promise.all([...row.querySelectorAll('.hm-orgchart-employee')].map(card)) }))) };
});
check(current.cards.length === 13 && current.cards.every(card => card.name === '홍 길 동'), 'Department naming correction: all thirteen displayed names are 홍 길 동', current.cards.map(({ id,name }) => ({ id,name })));
const rolePreserved = current.cards.every(card => {
const person = fixture.employees.find(employee => employee.id === card.id);
const expectedRole = card.kind === 'topLeader' ? '대표이사' : person?.position.replace(/\s+/gu,'');
const expectedBadges = card.kind === 'topLeader' ? [] : person?.jobTitle ? [person.jobTitle] : [];
return Boolean(person) && card.role === expectedRole && JSON.stringify(card.badges) === JSON.stringify(expectedBadges);
});
check(rolePreserved && new Set(current.cards.map(card => card.id)).size === 13, 'Department naming correction preserves fixture Employee IDs, positions and organizational badges');
check(current.rows.length === previous.rows.length && current.rows.every((row,index) => {
const old = previous.rows[index]; return row.title === old.title && row.gradient === old.gradient && row.color === old.color
&& row.cards.length === old.cards.length && row.cards.every((card,i) => ['kind','width','height','asset'].every(key => card[key] === old.cards[i][key]));
}), 'Department naming correction preserves P9.4 group titles, colors, gradients, card sizes and artwork mappings');
const styleKeys = ['fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color'];
check(current.rows.every((row,index) => row.cards.every((card,i) => {
const old = oldStyles[index].cards[i];
const role = old.subtree.find(item => item.className === 'hm-orgchart-person-role')?.style, name = old.subtree.find(item => item.className === 'hm-orgchart-person-name')?.style;
return styleKeys.every(key => card.roleStyle[key] === role?.[key] && card.nameStyle[key] === name?.[key]) && JSON.stringify(card.assets) === JSON.stringify(old.assets);
})), 'Department naming correction preserves approved card SVG/photo hashes and typography from P9.1');
const baseline = JSON.parse(await fs.readFile(path.join(output, 'baseline.json'), 'utf8'));
const safe = baseline.files.filter(file => /^examples\/org-chart\/data.*\.json$/.test(file.path) || /^packages\/org-chart\/src\/assets\//.test(file.path)
|| ['packages/org-chart/src/core/employee-card.ts','packages/org-chart/src/styles/employee-card.css','packages/org-chart/src/core/org-chart-content.ts','packages/org-chart/src/core/render.ts','src/org-chart/org-chart-full-composition.stories.tsx'].includes(file.path));
const changed = [];
for (const file of safe) { const hash = createHash('sha256').update(await fs.readFile(path.join(root,file.path))).digest('hex'); if (hash.toUpperCase() !== file.sha256.toUpperCase()) changed.push(file.path); }
check(changed.length === 0 && safe.length > 20, 'Department naming correction leaves original fixtures, shared card renderer/styles, Fixed presenter and approved assets unchanged', { checked:safe.length,changed });
const representative = current.cards.find(card => card.kind === 'topLeader');
check(representative.width === previous.card.width && representative.height === previous.card.height && representative.badges.length === 0
&& JSON.stringify(representative.nameStyle) === JSON.stringify(previous.card.nameStyle) && JSON.stringify(representative.roleStyle) === JSON.stringify(previous.card.roleStyle), 'Department representative retains 146x74, zero badges and P9.4 typography');
await snap('department-names',true); measurements.push({ name:'Department naming correction',current });
});
await section('data', async () => {
await setup();
check(await page.getByRole('combobox', { name: '데이터 범위', exact: true }).count() === 0 && !await page.getByText('전체 회사 합산', { exact: true }).count(), 'Expanded removes both data-scope choices');
counts(await state(), ['hanmac'], 20, 'one company x20');
for (const count of [100, 300]) { await countPerCompany(count, count); counts(await state(), ['hanmac'], count, `one company x${count}`); }
await countPerCompany(100, 100); await chooseCompanies(['한맥기술', '삼안']); await ready(200);
counts(await state(), ['hanmac', 'saman'], 100, 'two companies x100'); await snap('expanded-scope-removed', true);
await companyTrigger().click(); await companyPanel().waitFor(); await companyCheckbox('전체 선택').click(); await ready(700);
await page.keyboard.press('Escape'); await companyPanel().waitFor({ state: 'hidden' }); await countPerCompany(300, 2100);
const allIds = ['hanmac','saman','jangheon-industry','jangheon','ptc','halla','baron'];
counts(await state(), allIds, 300, 'seven companies x300'); measurements.push({ name: 'seven x300', state: await state() });
await chooseCompanies([]); await ready(0); const empty = await state();
check(empty.cards.length === 0 && empty.companyRoots.length === 0 && empty.countText.includes('0개 회사') && await page.locator('.hm-orgchart-expanded-empty').count() === 1, 'Zero selected companies renders explicit empty state');
await snap('expanded-empty'); await chooseCompanies(['한맥기술']); await ready(300); counts(await state(), ['hanmac'], 300, 'selection after empty');
});
await section('dropdown', async () => {
await setup(); await chooseCompanies(['한맥기술']); await companyTrigger().focus(); await page.keyboard.press('Enter'); await companyPanel().waitFor();
check(await companyCheckbox('전체 선택').evaluate(element => element === document.activeElement), 'Company dropdown keyboard opening focuses select-all');
await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.keyboard.press('Space'); await ready(40);
check(await companyCheckbox('삼안').getAttribute('aria-checked') === 'true' && await companyCheckbox('전체 선택').getAttribute('aria-checked') === 'mixed', 'Company keyboard Space selects second company and mixed state');
await snap('company-dropdown'); await page.keyboard.press('Escape'); await companyPanel().waitFor({ state: 'hidden' });
check(await companyTrigger().evaluate(element => element === document.activeElement), 'Company ESC closes and restores trigger focus');
await companyTrigger().click(); await companyPanel().waitFor(); await page.locator('.sb-page-title').click(); await companyPanel().waitFor({ state: 'hidden' });
check(true, 'Company outside click closes existing HM Popover');
});
await section('off', async () => {
await setup({ companies: ['한맥기술', '삼안'] });
check(await editSwitch().getAttribute('aria-checked') === 'false', 'Drag & Drop defaults OFF'); await snap('drag-drop-off', true);
for (const [name, source, target] of [
['employee within company', employee('virtual-022'), title('hanmac-office-sibling')],
['group within company', title('hanmac-office-0'), title('hanmac-office-1')],
['employee across companies', employee('virtual-022'), title('saman-office-0')],
['group across companies', title('hanmac-office-0'), title('saman-office-1')],
]) {
const result = await drag(source, target);
check(relations(result.before) === relations(result.after) && !result.hover.dragging && result.hover.drop.length === 0 && result.after.drop.length === 0, `OFF blocks ${name} and all Drop highlights`);
}
for (const source of [employee('virtual-022'), title('hanmac-office-0')]) {
await source.focus(); const before = await state(); await page.keyboard.press('Alt+m'); await settle(); const after = await state();
check(!after.dragging && after.drop.length === 0 && relations(after) === relations(before), 'OFF blocks Alt+M on employee/group without highlighting');
}
await viewport().scrollIntoViewIfNeeded(); const before = await state(); await pan(70, -35); const after = await state();
check(Math.abs(after.panX - before.panX - 70) < 1 && Math.abs(after.panY - before.panY + 35) < 1 && relations(before) === relations(after), 'OFF preserves blank-space Pan');
await title('hanmac-office-sibling').click(); await ready(); check(await title('hanmac-office-sibling').getAttribute('aria-expanded') === 'false', 'OFF group click collapses');
await title('hanmac-office-sibling').press('Space'); await ready(40); check(await title('hanmac-office-sibling').getAttribute('aria-expanded') === 'true', 'OFF group Space expands');
await employee('virtual-022').click(); await dialog().waitFor(); check(await dialog().getAttribute('data-employee-id') === 'virtual-022', 'OFF employee click opens HM Dialog');
await page.keyboard.press('Escape'); await dialog().waitFor({ state: 'hidden' }); await settle();
check((await state()).activeEmployee === 'virtual-022', 'OFF Dialog closes and restores employee focus');
const zoomBefore = await state(); await page.getByRole('button', { name: '확대', exact: true }).click(); await settle(); check((await state()).scale > zoomBefore.scale, 'OFF Zoom remains available');
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle(); const fit = await state();
check(fit.forest.x >= fit.viewport.x - 1 && fit.forest.right <= fit.viewport.right + 1 && fit.forest.y >= fit.viewport.y - 1 && fit.forest.bottom <= fit.viewport.bottom + 1, 'OFF Fit contains selected forest');
measurements.push({ name: 'OFF browsing', state: fit });
});
await section('on', async () => {
await setup({ companies: ['한맥기술', '삼안'], enabled: true }); await snap('drag-drop-on', true);
const inside = await drag(employee('virtual-022'), title('hanmac-office-sibling'));
check(inside.after.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && inside.after.feedback.status === 'success', 'ON employee move within company');
const groupInside = await drag(title('hanmac-office-0'), title('hanmac-office-1'));
check(groupInside.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-office-1' && groupInside.after.feedback.status === 'success', 'ON group move within company');
const cross = await drag(employee('virtual-022'), title('saman-office-0'));
const moved = cross.after.cards.find(card => card.id === 'virtual-022');
check(moved?.companyId === 'saman' && moved.organizationId === 'saman-office-0' && moved.border[moved.direction] === 'rgb(240, 131, 0)' && cross.after.feedback.status === 'success', 'ON cross-company employee move updates actual company, organization and approved accent');
const crossGroup = await drag(title('hanmac-office-0'), title('saman-office-1'));
check(crossGroup.after.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'saman-office-1'
&& ['hanmac-office-0','hanmac-cell-0','hanmac-team-0','hanmac-team-sibling'].every(id => crossGroup.after.nodes.find(org => org.id === id)?.companyId === 'saman') && crossGroup.after.feedback.status === 'success', 'ON cross-company group move preserves and recolors complete subtree');
check(crossGroup.after.cards.length === 40 && new Set(crossGroup.after.cards.map(card => card.id)).size === 40 && crossGroup.after.nodes.filter(org => org.parentId === '').reduce((sum, org) => sum + org.inclusive, 0) === 40, 'ON cross-company moves preserve unique Employee IDs and aggregate total');
await snap('cross-company-moved', true);
const beforeOff = await state(); await toggle(false); const afterOff = await state();
check(relations(beforeOff) === relations(afterOff) && afterOff.drop.length === 0 && !afterOff.dragging, 'Turning OFF retains completed employee and group moves');
await toggle(true); check(relations(beforeOff) === relations(await state()), 'Turning ON again preserves completed moves without reloading data');
await employee('virtual-022').click(); await dialog().waitFor(); check(await dialog().getAttribute('data-employee-id') === 'virtual-022', 'ON moved employee remains clickable');
await page.keyboard.press('Escape'); await dialog().waitFor({ state: 'hidden' });
await title('hanmac-office-0').click(); await ready(); check(await title('hanmac-office-0').getAttribute('aria-expanded') === 'false', 'ON group click still collapses');
await title('hanmac-office-0').press('Space'); await ready(40); check(await title('hanmac-office-0').getAttribute('aria-expanded') === 'true', 'ON group Space still expands');
await countPerCompany(100, 200); const fresh = await state();
check(fresh.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-0' && fresh.nodes.find(org => org.id === 'hanmac-office-0')?.parentId === 'hanmac-division-0' && fresh.drop.length === 0 && !fresh.dragging, 'Data Apply rebuilds fixture without mixing completed session moves or drag state');
measurements.push({ name: 'ON transfers', inside, groupInside, cross, crossGroup, afterOff });
});
await section('cancel', async () => {
await setup({ enabled: true });
let cancelledDuringPointer;
const pointer = await drag(employee('virtual-022'), title('hanmac-office-sibling'), async () => { await toggle(false, { programmatic: true }); cancelledDuringPointer = await state(); });
check(pointer.hover.dragging === 'true' && pointer.hover.drop.some(target => target.hover === 'allowed'), 'ON pointer edit is active before disable');
check(!cancelledDuringPointer.dragging && cancelledDuringPointer.drop.length === 0 && relations(pointer.before) === relations(pointer.after) && pointer.after.dialogs === 0, 'OFF during pointer move cancels edit/highlights and suppresses release click');
await toggle(true); await employee('virtual-022').focus(); await page.keyboard.press('Alt+m'); await settle(); const opened = await state();
check(opened.dragging === 'true' && opened.drop.some(target => target.hover === 'allowed'), 'ON Alt+M starts keyboard edit');
await toggle(false, { programmatic: true }); await page.keyboard.press('Enter'); await settle(); const cancelled = await state();
check(!cancelled.dragging && cancelled.drop.length === 0 && cancelled.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-0' && cancelled.dialogs === 0, 'OFF cancels active keyboard edit and blocks stale Enter commit');
await toggle(true); await employee('virtual-022').focus(); await page.keyboard.press('Alt+m'); await settle();
for (let i = 0; i < 40 && (await state()).drop.find(target => target.hover)?.id !== 'hanmac-office-sibling'; i++) { await page.keyboard.press('ArrowRight'); await settle(); }
await page.keyboard.press('Enter'); await ready(20); const keyboard = await state();
check(keyboard.cards.find(card => card.id === 'virtual-022')?.organizationId === 'hanmac-office-sibling' && keyboard.feedback.status === 'success' && keyboard.dialogs === 0, 'Re-enabled keyboard move commits through common ON policy');
measurements.push({ name: 'disable cancellation', pointer, cancelledDuringPointer, opened, cancelled, keyboard });
});
await section('modes', async () => {
await setup({ companies: ['한맥기술', '삼안'] });
for (const [layout, option] of [['tb','세로형 TB'],['lr','가로형 LR'],['hybrid','혼합형 Hybrid']]) {
if (layout !== 'tb') await select('조직도 표시 유형', option); await ready(40); const s = await state();
check(s.layout === layout && s.cards.length === 40 && s.cards.every(card => ['top','left','right'].includes(card.direction)), `${layout}: layout and existing directional cards work with default OFF`);
}
});
await section('responsive', async () => {
for (const width of [390,768,1280,1440]) {
await page.setViewportSize({ width, height: 1100 }); await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`); await companyTrigger().waitFor(); await ready(140);
const metric = await editSwitch().evaluate(element => ({ label: element.getAttribute('aria-label') || element.getAttribute('aria-labelledby') || document.querySelector(`label[for="${element.id}"]`)?.textContent, checked: element.getAttribute('aria-checked'), scrollWidth: document.documentElement.scrollWidth, switchVisible: element.getBoundingClientRect().width > 0 }));
check(metric.scrollWidth <= width + 1 && metric.switchVisible && metric.checked === 'false' && Boolean(metric.label), `${width}: OFF switch is named and settings have no horizontal overflow`, metric);
await snap(`expanded-${width}`, true); await companyTrigger().click(); await companyPanel().waitFor();
const bounds = await companyPanel().evaluate(element => { const r = element.getBoundingClientRect(); return { x: r.left, right: r.right, y: r.top, bottom: r.bottom, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth }; });
check(bounds.x >= -1 && bounds.right <= width + 1 && bounds.y >= -1 && bounds.bottom <= 1101 && bounds.scrollWidth <= bounds.clientWidth + 1, `${width}: retained company dropdown fits viewport`, bounds);
await page.keyboard.press('Escape'); await companyPanel().waitFor({ state: 'hidden' });
await page.goto(`${origin}/iframe.html?id=orgchart--department-colors&viewMode=story`); await ready();
const departmentOverflow = await page.evaluate(() => ({ width: innerWidth, scrollWidth: document.documentElement.scrollWidth }));
check(departmentOverflow.scrollWidth <= width + 1, `${width}: Department preview containers fit viewport`, departmentOverflow);
await snap(`department-${width}`, true);
}
});
await section('expanded-frame', async () => {
// Later outer-frame style correction only. Existing layout/move suites remain
// the evidence for those features; moving a sample below is for fresh capture.
await page.setViewportSize({ width:1440,height:1100 });
await page.goto(`${origin}/iframe.html?id=center-graphic-facility--tunnel&viewMode=story`); await page.locator('.tunnel-reference__sample').first().waitFor(); await settle();
const reference = await page.locator('.tunnel-reference__sample').first().evaluate(element => {
const css = getComputedStyle(element); return { backgroundColor:css.backgroundColor,border:css.border,borderRadius:css.borderRadius };
});
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`); await companyTrigger().waitFor(); await ready(140);
const frameSnapshot = () => page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot, root = shadow.querySelector('.hm-orgchart-expanded'), css = getComputedStyle(root);
return { frame:{ backgroundColor:css.backgroundColor,border:css.border,borderRadius:css.borderRadius },
inputs:Object.fromEntries(['--hm-orgchart-expanded-preview-background','--hm-orgchart-expanded-preview-border','--hm-orgchart-expanded-preview-radius'].map(name => [name,css.getPropertyValue(name).trim()])),
cards:[...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({ id:card.dataset.employeeId,background:getComputedStyle(card).backgroundColor,width:card.offsetWidth,height:card.offsetHeight,kind:card.dataset.cardKind })),
titles:[...shadow.querySelectorAll('.node[data-company-id] .hm-orgchart-organization-name')].map(title => ({ company:title.closest('.node').dataset.companyId,color:getComputedStyle(title).color,background:getComputedStyle(title).backgroundColor })),
layout:root.dataset.autoLayout,width:innerWidth,documentWidth:document.documentElement.scrollWidth,
pan:shadow.querySelector('.hm-orgchart-viewport').dataset.panEnabled,zoom:shadow.querySelector('.hm-orgchart-viewport').dataset.zoomEnabled,
editing:shadow.querySelector('.hm-orgchart-viewport').dataset.dragDropEnabled };
});
const before = await frameSnapshot();
check(JSON.stringify(before.frame) === JSON.stringify(reference) && Object.values(before.inputs).every(value => value.length > 0), 'Expanded outer frame matches actual Tunnel shared background, border and radius', { expanded:before.frame,reference,inputs:before.inputs });
const expectedColors = { hanmac:'rgb(203, 46, 40)',saman:'rgb(240, 131, 0)','jangheon-industry':'rgb(69, 128, 166)',jangheon:'rgb(29, 65, 141)',ptc:'rgb(132, 51, 142)',halla:'rgb(0, 104, 183)',baron:'rgb(12, 54, 127)' };
check(before.cards.length === 140 && before.cards.every(card => card.background === 'rgb(255, 255, 255)') && before.titles.every(title => title.color === 'rgb(255, 255, 255)' && title.background === expectedColors[title.company]), 'Expanded outer-frame style preserves white employee backgrounds and approved company/white group titles');
check(before.layout === 'tb' && before.editing === 'false' && await editSwitch().getAttribute('aria-checked') === 'false'
&& await page.getByRole('checkbox',{ name:'Pan 사용',exact:true }).getAttribute('aria-checked') === 'true'
&& await page.getByRole('checkbox',{ name:'Zoom 사용',exact:true }).getAttribute('aria-checked') === 'true'
&& await page.getByRole('checkbox',{ name:'접기·펼치기 사용',exact:true }).getAttribute('aria-checked') === 'true', 'Expanded frame correction preserves TB, default OFF and enabled browsing controls');
await snap('expanded-frame-off',true); await snap('expanded-frame-scope-removed',true);
await companyTrigger().click(); await companyPanel().waitFor(); await snap('expanded-frame-company-dropdown');
await page.keyboard.press('Escape'); await companyPanel().waitFor({ state:'hidden' });
await toggle(true); const on = await frameSnapshot();
check(JSON.stringify(on.frame) === JSON.stringify(before.frame) && JSON.stringify(on.cards) === JSON.stringify(before.cards) && JSON.stringify(on.titles) === JSON.stringify(before.titles), 'ON toggle leaves corrected outer frame and all card/title styling unchanged');
await snap('expanded-frame-on',true);
await page.setViewportSize({ width:390,height:1100 }); await settle(); const narrow = await frameSnapshot();
check(narrow.documentWidth <= 391 && JSON.stringify(narrow.frame) === JSON.stringify(reference), '390px corrected Expanded frame fits page and retains shared style', { width:narrow.width,scrollWidth:narrow.documentWidth,frame:narrow.frame });
await snap('expanded-frame-390',true);
await setup({ companies:['한맥기술','삼안'],enabled:true });
const captureMove = await drag(employee('virtual-022'),title('saman-office-0'));
await page.getByRole('button',{ name:'Fit to View',exact:true }).click(); await settle(); await snap('expanded-frame-company-moved',true);
measurements.push({ name:'Expanded outer-frame correction',reference,before,on,narrow,
captureOnlyMove:{ status:captureMove.after.feedback.status,employee:captureMove.after.cards.find(card => card.id === 'virtual-022'),countText:captureMove.after.countText,note:'Fresh moved sample screenshot; previous P9.4 movement PASS is retained without rerunning its assertions.' } });
});
await section('names-mobile', async () => {
// Only the narrow viewport and current captures are new; all thirteen names,
// roles/artwork/typography already passed the department-names section.
await page.setViewportSize({ width:1440,height:1000 }); await page.goto(`${origin}/iframe.html?id=orgchart--department-colors&viewMode=story`); await ready();
await page.evaluate(async () => { await Promise.all([...document.querySelector('.hm-orgchart-component-host').shadowRoot.querySelectorAll('img')].map(async image => { image.loading = 'eager'; await image.decode(); })); });
await snap('department-full-current',true); await page.locator('.hm-orgchart-representative-preview').screenshot({ path:path.join(output,'department-representative-current.png') });
await page.setViewportSize({ width:390,height:1100 }); await settle();
const narrow = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-component-host').shadowRoot;
const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => { const box = card.getBoundingClientRect(); return { id:card.dataset.employeeId,left:box.left,right:box.right,name:card.querySelector('.hm-orgchart-person-name').textContent }; });
return { width:innerWidth,documentWidth:document.documentElement.scrollWidth,cards };
});
check(narrow.documentWidth <= 391 && narrow.cards.every(card => card.left >= -1 && card.right <= 391), '390px corrected Department names/cards stay within page without horizontal overflow', narrow);
await snap('department-names-390',true); measurements.push({ name:'Department narrow capture',narrow });
});
await section('menu', async () => {
const index = await (await page.request.get(`${origin}/index.json`)).json();
const entries = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title.startsWith('OrgChart/') && !(entry.tags ?? []).includes('internal'));
const expected = ['orgchart--logo-personnel-summary','orgchart--department-colors','orgchart--full-composition','orgchart--expanded-org-chart'];
check(entries.length === 4 && entries.every(entry => expected.includes(entry.id)), 'Four existing public OrgChart Story IDs retained', entries.map(entry => ({ id: entry.id, title: entry.title })));
});
check(errors.length === 0, 'New console/page errors: zero', errors);
const result = { startedAt, completedAt: new Date().toISOString(), browser: browser.version(), origin, sections: only, results, measurements, errors,
notVerified: ['Physical touch device','Actual screen reader','Design intent approval'], pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, `browser${suffix}.json`), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p9-4/browser${suffix}.json` }));
await browser.close(); if (result.fail) process.exitCode = 1;
examples/org-chart/verify-p9-5-arrowhead.mjs
+54
View File
@@ -0,0 +1,54 @@
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root=fileURLToPath(new URL('../../',import.meta.url));
const output=path.join(root,process.env.ORGCHART_ARROW_OUTPUT??'test-results/org-chart-p9-5-arrowhead');
const phase=process.argv[2]??'after', origin=process.env.ORGCHART_STORY_ORIGIN??'http://127.0.0.1:6064';
const browser=await launchChromium({headless:true}),page=await browser.newPage({viewport:{width:1920,height:1080}});
const checks=[],measurements=[],errors=[];
page.on('pageerror',e=>errors.push(e.message));page.on('console',m=>{if(m.type()==='error')errors.push(m.text());});
await fs.mkdir(output,{recursive:true});
const check=(pass,name,detail)=>{checks.push({name,status:pass?'PASS':'FAIL',detail});if(!pass)console.log('FAIL',name,JSON.stringify(detail));};
const settle=()=>page.evaluate(async()=>{await document.fonts.ready;for(let i=0;i<20;i++)await new Promise(requestAnimationFrame);});
const before=phase==='after'?JSON.parse(await fs.readFile(path.join(output,'before.json'),'utf8')):null;
const reference=await fs.readFile('D:/디자인시스템/gpd-workdesk/sample/조직도_v1.3/org-dashboard-data.js','utf8');
const originalD=reference.match(/id:\s*"jang-arrow-head",[\s\S]*?\bd:\s*"([^"]+)"/)[1];
try{
for(const size of [{width:1920,height:1080},{width:1920,height:1440},{width:390,height:844}]){
await page.setViewportSize(size);await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);
await page.waitForFunction(()=>{const s=document.querySelector('.hm-orgchart-host')?.shadowRoot;return s?.querySelector('.hm-orgchart-stage[data-workdesk-artwork]')&&!s.querySelector('[aria-busy="true"]')&&[...s.querySelectorAll('link[rel="stylesheet"]')].every(l=>l.sheet);});await settle();
const snapshot=await page.evaluate(()=>{
const s=document.querySelector('.hm-orgchart-host').shadowRoot,stage=s.querySelector('.hm-orgchart-stage'),overlay=s.querySelector('.hm-orgchart-workdesk-overlay');
const r=e=>{const b=e.getBoundingClientRect();return{x:b.left,y:b.top,width:b.width,height:b.height,right:b.right,bottom:b.bottom};};
const o=r(overlay),scale=o.width/1920,local=e=>{const b=r(e);return{x:(b.x-o.x)/scale,y:(b.y-o.y)/scale,width:b.width/scale,height:b.height/scale};};
const card=s.querySelector('.hm-orgchart-top-leaders .hm-orgchart-employee'),hub=s.querySelector('.hm-orgchart-hub'),head=s.querySelector('[data-arrow-head="representative"]'),line=s.querySelector('[data-connector="representative-to-hub"]');
return{scale,offset:Number(s.querySelector('.hm-orgchart-composition').dataset.centerOffset),card:local(card),hub:local(hub),crop:{card:r(card),hub:r(hub)},head:head?{d:head.getAttribute('d'),fill:getComputedStyle(head).fill,stroke:getComputedStyle(head).stroke,transform:head.getAttribute('transform'),box:local(head),screen:r(head)}:null,headCount:s.querySelectorAll('[data-arrow-head="representative"]').length,
line:{d:line.getAttribute('d'),transform:line.getAttribute('transform'),start:line.getPointAtLength(0),end:line.getPointAtLength(line.getTotalLength())},team:[...s.querySelectorAll('image[data-arrow]')].map(e=>({id:e.dataset.arrow,box:local(e),href:e.getAttribute('href')})),
connections:s.querySelectorAll('[data-connector]').length,cards:s.querySelectorAll('.hm-orgchart-employee').length,scroll:[document.documentElement.scrollWidth,document.documentElement.scrollHeight]};
});
const name=`${size.width}x${size.height}`; measurements.push({name,...snapshot});
const clip={x:Math.max(0,Math.floor(snapshot.crop.card.x-30)),y:Math.max(0,Math.floor(snapshot.crop.card.y-10)),width:Math.ceil(snapshot.crop.card.width+60),height:Math.ceil(snapshot.crop.hub.bottom-snapshot.crop.card.y+25)};
await page.screenshot({path:path.join(output,`${phase}-${name}-detail.png`),clip,animations:'disabled'});
if(phase==='after'){
const old=before.measurements.find(m=>m.name===name),h=snapshot.head;
check(snapshot.headCount===1&&h?.d===originalD&&h.fill==='rgb(69, 99, 159)'&&h.stroke==='none',`${name}: exact original solid chevron restored once`,h);
if(!h)continue;
const gap=h.box.y-(snapshot.card.y+snapshot.card.height);
check(Math.abs(gap)<.01,`${name}: upward tip attaches to representative bottom edge`,gap);
check(Math.abs(h.box.x+h.box.width/2-(snapshot.card.x+snapshot.card.width/2))<.1,`${name}: arrow aligned to card/connector axis`,h.box);
const headBottom=h.box.y+h.box.height,lineStart=Number(snapshot.line.d.match(/M[^ ]+ ([^V]+)/)[1])-17;
check(Math.abs(lineStart-headBottom)<.2,`${name}: chevron meets existing dashed stem`,{headBottom,lineStart});
check(snapshot.connections===5&&snapshot.cards===old.cards&&snapshot.team.length===5&&snapshot.team.every((a,i)=>a.id===old.team[i].id&&a.href===old.team[i].href&&['x','y','width','height'].every(k=>Math.abs(a.box[k]-old.team[i].box[k])<.05)),`${name}: five team arrows/relations and cards unchanged`);
check(['card','hub'].every(key=>['x','y','width','height'].every(k=>Math.abs(snapshot[key][k]-old[key][k])<.05)),`${name}: representative/hub placement preserved`);
const target=page.locator('[data-arrow-head="representative"]');
const shown=await page.screenshot({clip,animations:'disabled'});await target.evaluate(e=>e.style.visibility='hidden');
const hidden=await page.screenshot({clip,animations:'disabled'});await target.evaluate(e=>e.style.removeProperty('visibility'));
check(!shown.equals(hidden),`${name}: restored arrow actually paints visible pixels`,{shownBytes:shown.length,hiddenBytes:hidden.length});
check(snapshot.scroll[0]<=size.width+1&&snapshot.scroll[1]<=size.height+1,`${name}: no new document scroll`,snapshot.scroll);
}
}
}catch(e){check(false,'Targeted arrow check completed',{message:e.message,stack:e.stack});}
check(!errors.length,'Console/page errors zero',errors);
const result={phase,origin,measurements,checks,errors,pass:checks.filter(c=>c.status==='PASS').length,fail:checks.filter(c=>c.status==='FAIL').length};
await fs.writeFile(path.join(output,`${phase}.json`),JSON.stringify(result,null,2));await browser.close();console.log(JSON.stringify({phase,pass:result.pass,fail:result.fail,measurements:measurements.map(m=>({name:m.name,head:m.head?.box,card:m.card,connections:m.connections}))}));if(result.fail)process.exitCode=1;
examples/org-chart/verify-p9-5-core-dialog-close.mjs
+101
View File
@@ -0,0 +1,101 @@
// Focused comparison with the real HM Dialog; no P9.4/P9.5 layout regression replay.
import fs from 'node:fs/promises';
import path from 'node:path';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output = path.resolve('test-results/org-chart-p9-5-core-dialog-close');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064').replace(/\/$/, '');
const oldCss = await fs.readFile(path.join(output, 'before-employee-info-dialog.css'), 'utf8');
const data = JSON.parse(await fs.readFile('examples/org-chart/data-p1.json', 'utf8'));
const checks = [], measurements = [], errors = [], startedAt = new Date().toISOString();
const check = (pass, name, detail) => { checks.push({ name, status:pass ? 'PASS':'FAIL', detail }); if (!pass) console.log('FAIL', name, JSON.stringify(detail)); };
const browser = await launchChromium({ headless:true });
const page = await browser.newPage({ viewport:{ width:1440,height:900 } });
page.on('pageerror', error => errors.push(error.message));
page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 12; i++) await new Promise(requestAnimationFrame); });
const coreClose = '.hm-orgchart-employee-dialog-close', coreDialog = '.hm-orgchart-employee-dialog';
const refClose = '[data-slot="dialog-content"] button[data-variant="ghost"]';
async function measure(selector) {
return page.locator(selector).evaluate(button => {
const rect = el => { const r=el.getBoundingClientRect(); return { x:r.x,y:r.y,width:r.width,height:r.height }; };
const css=getComputedStyle(button), parent=button.closest('dialog,[data-slot="dialog-content"]'), box=rect(button), pbox=rect(parent), svg=button.querySelector('svg');
const fields=parent.querySelector('dl'), title=parent.querySelector('h2');
return { box,dialog:pbox,inset:{ top:box.y-pbox.y,right:pbox.x+pbox.width-box.x-box.width },
css:Object.fromEntries(['padding','border','borderRadius','color','backgroundColor','outlineStyle','outlineOffset','boxShadow','transition','cursor','fontSize','lineHeight','position','top','right','boxSizing','backgroundClip','userSelect'].map(k=>[k,css[k]])),
svg:svg && { box:rect(svg),attrs:Object.fromEntries(['viewBox','fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','aria-hidden'].map(k=>[k,svg.getAttribute(k)])),paths:[...svg.querySelectorAll('path')].map(p=>p.getAttribute('d')) },
title:title && { box:rect(title),text:title.textContent },fields:fields && { box:rect(fields),html:fields.innerHTML },
container:Object.fromEntries(['padding','backgroundColor','color','border','borderRadius','fontFamily','fontSize','lineHeight','maxHeight'].map(k=>[k,getComputedStyle(parent)[k]])),
accessibleName:button.getAttribute('aria-label'),focusVisible:button.matches(':focus-visible'),open:parent.open
};
});
}
const equivalent=(a,b)=>JSON.stringify(a)===JSON.stringify(b);
const rectNear=(a,b)=>Object.keys(a).every(k=>Math.abs(a[k]-b[k])<.02);
await page.goto(`${origin}/iframe.html?id=components-overlay-dialog--all&viewMode=story`);
await page.getByRole('button',{ name:'기본',exact:true }).click(); await page.locator(refClose).waitFor(); await settle();
await page.locator(refClose).evaluate(el=>el.blur()); await page.mouse.move(0,0);
const reference={ normal:await measure(refClose) };
await page.locator(refClose).hover(); await settle(); reference.hover=await measure(refClose);
await page.mouse.move(0,0); await page.keyboard.press('Tab'); await page.locator(refClose).focus(); await settle(); reference.focus=await measure(refClose);
check(reference.focus.focusVisible, 'Actual HM Dialog keyboard focus reference captured', reference.focus.css);
await page.locator('[data-slot="dialog-content"]').screenshot({path:path.join(output,'hm-reference.png')});
measurements.push({name:'actual HM Dialog',...reference});
for (const mode of ['React Story / Core popup','Vanilla / no React']) {
for (const width of [1440,390]) {
await page.setViewportSize({width,height:900});
if (mode.startsWith('React')) {
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);
} else {
await page.route('**/p95-native-dialog-fixture', route=>route.fulfill({contentType:'text/html',body:'<!doctype html><html lang="ko"><meta charset="utf-8"><title>Core close verification</title><body><main id="fixture" style="height:850px"></main></body></html>'}));
await page.goto(`${origin}/p95-native-dialog-fixture`);
await page.evaluate(async data=>{
const api=await import('/core/index.js');
window.chart=api.createOrgChart({container:document.querySelector('#fixture'),dataSource:new api.JsonOrgChartDataSource(data),displayMode:'readOnly',stylesheetUrls:{engine:'/core/engine.css',core:'/core/style.css'}});
await window.chart.mount();
},data);
}
await page.locator('.hm-orgchart-top-leaders .hm-orgchart-employee').waitFor();
await page.waitForFunction(()=>[...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('link[rel="stylesheet"]')].every(link=>link.sheet)); await settle();
const trigger=page.locator('.hm-orgchart-top-leaders .hm-orgchart-employee');
const label=`${mode} ${width}`;
await trigger.click(); await page.locator(`${coreDialog}[open]`).waitFor(); await settle();
// Reapply the captured pre-change stylesheet/markup on this same popup to
// compare body geometry at each width/runtime without a second application.
await page.locator(coreClose).evaluate((button,css)=>{
window.savedCloseNodes=[...button.childNodes]; button.textContent='닫기';
window.oldCloseStyle=document.createElement('style'); window.oldCloseStyle.textContent=`${css}\n.hm-orgchart-employee-dialog-close { all: revert; padding:var(--hm-orgchart-resolved-spacing-xs) var(--hm-orgchart-resolved-spacing-sm);border:var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);border-radius:var(--hm-orgchart-resolved-radius-control-md);background:var(--hm-orgchart-resolved-bg-content);color:inherit;font:inherit;cursor:pointer;box-sizing:border-box; } .hm-orgchart-employee-dialog-header { min-height:0; }`;
button.getRootNode().append(window.oldCloseStyle);
},oldCss);
const before=await measure(coreClose);
await page.locator(coreClose).evaluate(button=>{button.replaceChildren(...window.savedCloseNodes);window.oldCloseStyle.remove();});
await page.locator(coreClose).evaluate(el=>el.blur()); await page.mouse.move(0,0); await settle();
const normal=await measure(coreClose);
const compareKeys=['padding','border','borderRadius','color','backgroundColor','outlineStyle','outlineOffset','transition','cursor','fontSize','lineHeight','position','top','right','boxSizing','backgroundClip','userSelect'];
check(compareKeys.every(k=>normal.css[k]===reference.normal.css[k]),`${label}: HM normal button styles match`,{actual:normal.css,reference:reference.normal.css});
check(normal.box.width===reference.normal.box.width && normal.box.height===reference.normal.box.height && equivalent(normal.inset,reference.normal.inset),`${label}: 28px button and top/right inset match`,{box:normal.box,inset:normal.inset});
check(normal.svg.box.width===16 && normal.svg.box.height===16 && equivalent(normal.svg.attrs,reference.normal.svg.attrs) && equivalent(normal.svg.paths,reference.normal.svg.paths),`${label}: actual Lucide X geometry/stroke matches`,normal.svg);
check(rectNear(before.dialog,normal.dialog) && rectNear(before.fields.box,normal.fields.box) && rectNear(before.title.box,normal.title.box) && equivalent(before.container,normal.container) && before.fields.html===normal.fields.html,`${label}: popup size, title, body geometry, background and data preserved`,{before,after:normal});
check(normal.accessibleName==='직원 정보 닫기',`${label}: accessible close name preserved`);
await page.locator(coreClose).hover(); await settle(); const hover=await measure(coreClose);
check(hover.css.backgroundColor===reference.hover.css.backgroundColor && hover.css.color===reference.hover.css.color,`${label}: HM hover matches`,hover.css);
await page.mouse.move(0,0); await page.keyboard.press('Tab'); await page.locator(coreClose).focus(); await settle(); const focus=await measure(coreClose);
check(focus.focusVisible && focus.css.border===reference.focus.css.border && focus.css.outlineStyle==='none' && focus.css.boxShadow.includes('oklab(0.462622 -0.0726663 0.0150061 / 0.5) 0px 0px 0px 3px'),`${label}: HM focus border and 3px 50% ring match`,focus.css);
await page.keyboard.press('Tab'); await page.keyboard.press('Shift+Tab');
check(await page.locator(coreClose).evaluate(el=>el.getRootNode().activeElement===el),`${label}: Tab/Shift+Tab focus trap retained`);
await page.mouse.click(5,5); await settle();
check(await page.locator(`${coreDialog}[open]`).count()===1,`${label}: existing outside-click stays open policy retained`);
await page.locator(coreClose).click(); await settle();
check(await page.locator(`${coreDialog}[open]`).count()===0 && await trigger.evaluate(el=>el.getRootNode().activeElement===el),`${label}: X click closes and restores employee focus`);
await trigger.click(); await page.keyboard.press('Escape'); await settle();
check(await page.locator(`${coreDialog}[open]`).count()===0 && await trigger.evaluate(el=>el.getRootNode().activeElement===el),`${label}: ESC closes and restores employee focus`);
await trigger.focus(); await page.keyboard.press('Enter'); await settle(); await page.keyboard.press('Tab');
const screen=mode.startsWith('React')?'react':'vanilla';
await page.locator(coreDialog).screenshot({path:path.join(output,`${screen}-${width}-popup.png`)});
if (mode.startsWith('Vanilla')) check(await page.evaluate(()=>!window.React && ![...document.querySelectorAll('script')].some(el=>/react/i.test(el.src))),`${label}: native Core mounting has no React runtime`);
measurements.push({name:label,before,normal,hover,focus});
}
}
check(errors.length===0,'No new console/page errors',errors);
const result={startedAt,completedAt:new Date().toISOString(),origin,browser:browser.version(),checks,measurements,errors,pass:checks.filter(c=>c.status==='PASS').length,fail:checks.filter(c=>c.status==='FAIL').length};
await fs.writeFile(path.join(output,'result.json'),JSON.stringify(result,null,2)); await browser.close();
console.log(JSON.stringify({pass:result.pass,fail:result.fail,output})); if(result.fail)process.exitCode=1;
examples/org-chart/verify-p9-5-full-interactions.mjs
+246
View File
@@ -0,0 +1,246 @@
// P9.5 Full Composition only: same-mount resize, artwork coordinates and native interactions.
import fs from 'node:fs/promises';
import path from 'node:path';
import { createHash } from 'node:crypto';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-5-full');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064').replace(/\/$/, '');
const baseline = JSON.parse(await fs.readFile(path.join(output, 'before.json'), 'utf8'));
const fixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-p1.json'), 'utf8'));
const names = ['team-arrow-blue-short.png', 'team-arrow-blue-purple.png', 'team-arrow-purple-teal.png', 'team-arrow-teal-green.png'];
const assetHashes = Object.fromEntries(await Promise.all(names.map(async name => [name, createHash('sha256').update(await fs.readFile(path.join(root, 'packages/org-chart/src/assets/workdesk', name))).digest('hex')])));
const arrowAssets = { 'blue-short-1': names[0], 'blue-short-2': names[0], 'blue-purple': names[1], 'purple-teal': names[2], 'teal-green': names[3] };
const checks = [], measurements = [], errors = [], arrowPaint = [];
const startedAt = new Date().toISOString();
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
page.setDefaultTimeout(30000);
page.on('pageerror', error => errors.push({ type: 'pageerror', message: error.message }));
page.on('console', message => { if (message.type() === 'error') errors.push({ type: 'console', message: message.text() }); });
const check = (pass, name, detail) => { checks.push({ name, status: pass ? 'PASS' : 'FAIL', detail }); if (!pass) console.log('FAIL', name, JSON.stringify(detail)); };
const notVerified = (name, detail) => checks.push({ name, status: 'NOT VERIFIED', detail });
const near = (a, b, tolerance = .15) => Object.keys(a).every(key => Math.abs(a[key] - b[key]) <= tolerance);
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 20; i++) await new Promise(requestAnimationFrame); });
async function ready() {
await page.waitForFunction(() => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow?.querySelector('.hm-orgchart-stage[data-workdesk-artwork]') && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet);
});
await page.evaluate(async () => { await Promise.all([...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('img')].map(image => image.decode())); });
await settle();
}
async function snapshot(name) {
const value = await page.evaluate(async () => {
const host = document.querySelector('.hm-orgchart-story-full'), shadow = host.querySelector('.hm-orgchart-host').shadowRoot;
const stage = shadow.querySelector('.hm-orgchart-stage'), wrapper = shadow.querySelector('.hm-orgchart-composition');
const rect = element => { const r = element.getBoundingClientRect(); return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height }; };
const origin = rect(stage), scale = origin.width / stage.offsetWidth, offset = Number(wrapper.dataset.centerOffset) || 0;
const normal = element => { const r = rect(element); return { x: (r.left - origin.left) / scale, y: (r.top - origin.top) / scale - offset, width: r.width / scale, height: r.height / scale }; };
const hash = async bytes => [...new Uint8Array(await crypto.subtle.digest('SHA-256', bytes))].map(byte => byte.toString(16).padStart(2, '0')).join('');
const central = [...stage.querySelectorAll('.hm-orgchart-axis .hm-orgchart-employee,.hm-orgchart-hub,.hm-orgchart-viewport .hm-orgchart-employee,.hm-orgchart-viewport .hm-orgchart-organization-name')].map((element, index) => ({ key: `${element.className}:${element.dataset.employeeId ?? element.closest('.node')?.dataset.organizationId ?? ''}:${index}`, box: normal(element) }));
const arrows = await Promise.all([...stage.querySelectorAll('image[data-arrow]')].map(async element => {
const href = element.getAttribute('href'), image = new Image(); image.src = href; await image.decode();
return { id: element.dataset.arrow, box: normal(element), rect: rect(element), hash: await hash(await (await fetch(href)).arrayBuffer()), loaded: image.naturalWidth > 0, attributes: Object.fromEntries(['x', 'y', 'width', 'height', 'preserveAspectRatio'].map(key => [key, element.getAttribute(key)])) };
}));
const paths = [...stage.querySelectorAll('.hm-orgchart-workdesk-overlay path')].map(element => {
const point = element.getPointAtLength(element.getTotalLength()), screen = new DOMPoint(point.x, point.y).matrixTransform(element.getScreenCTM());
return { id: element.dataset.connector, d: element.getAttribute('d'), box: normal(element), endpoint: { x: screen.x, y: screen.y } };
});
const management = rect(stage.querySelector('.node[data-organization-id="business-management"] .hm-orgchart-organization-name'));
const hostRect = rect(host), css = getComputedStyle(host);
const left = hostRect.left + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.paddingLeft) || 0);
const right = hostRect.right - (parseFloat(css.borderRightWidth) || 0) - (parseFloat(css.paddingRight) || 0);
const line = paths.find(item => item.id === 'hub-to-business-management');
return { size: { width: innerWidth, height: innerHeight }, stage: origin, scale, offset, canvasHeight: Number(wrapper.dataset.canvasHeight), sameMount: stage === window.__p95MountedStage,
horizontalError: (origin.left + origin.right - left - right) / 2, central, arrows, paths,
managementEndpointError: { x: line.endpoint.x - (management.left + management.right) / 2, y: line.endpoint.y - management.top - 2 * scale },
links: [...stage.querySelectorAll('.hm-orgchart-organization-link')].map(element => ({ href: element.href, text: element.textContent })) };
});
measurements.push({ name, ...value });
return value;
}
async function stability() {
return page.evaluate(async () => {
const stage = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('.hm-orgchart-stage');
const records = [];
const observer = new MutationObserver(items => { for (const item of items) records.push({ oldStyle: item.oldValue, style: stage.getAttribute('style'), at: performance.now() }); });
observer.observe(stage, { attributes: true, attributeFilter: ['style'], attributeOldValue: true });
for (let i = 0; i < 20; i++) await new Promise(requestAnimationFrame);
observer.disconnect(); return { count: records.length, records };
});
}
// Directly affected by the adaptive-anchor notification: a bounded parent
// grows while viewport and scale remain unchanged. Do not replay other checks.
if (process.argv.includes('--anchor-notify-only')) {
const probes = [];
try {
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`); await ready();
const value = await page.evaluate(async data => {
const api = await import('/core/index.js'), host = document.createElement('section');
Object.assign(host.style, { position: 'fixed', left: '0', top: '0', width: '1920px', height: '914.5px', zIndex: '1000', overflow: 'hidden' }); document.body.append(host);
const handle = api.createOrgChart({ container: host, dataSource: new api.JsonOrgChartDataSource(data), displayMode: 'readOnly', stylesheetUrls: { engine: '/core/engine.css', core: '/core/style.css' } });
try {
await handle.mount();
const shadow = host.querySelector('.hm-orgchart-host').shadowRoot;
await Promise.all([...shadow.querySelectorAll('link[rel="stylesheet"]')].map(link => link.sheet ? Promise.resolve() : new Promise((resolve, reject) => { link.addEventListener('load', resolve, { once: true }); link.addEventListener('error', reject, { once: true }); })));
const waitFrames = async () => { await document.fonts.ready; for (let i = 0; i < 20; i++) await new Promise(requestAnimationFrame); };
await waitFrames();
const wrapper = shadow.querySelector('.hm-orgchart-composition'), stage = shadow.querySelector('.hm-orgchart-stage');
let notifications = 0; wrapper.addEventListener('hm-orgchart-scale', () => { notifications++; });
const rect = element => { const r = element.getBoundingClientRect(); return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height }; };
const scroll = element => ({ width: element.scrollWidth, clientWidth: element.clientWidth, height: element.scrollHeight, clientHeight: element.clientHeight, overflowX: getComputedStyle(element).overflowX, overflowY: getComputedStyle(element).overflowY });
const measure = () => ({ size: { width: innerWidth, height: innerHeight }, host: rect(host), stage: rect(stage), scale: rect(stage).width / 1920, centerOffset: Number(wrapper.dataset.centerOffset), canvasHeight: Number(wrapper.dataset.canvasHeight), notifications,
representative: rect(stage.querySelector('.hm-orgchart-top-leaders .hm-orgchart-employee')), hub: rect(stage.querySelector('.hm-orgchart-hub')), tree: rect(stage.querySelector('.hm-orgchart-viewport')),
scroll: { root: scroll(document.documentElement), body: scroll(document.body), host: scroll(host), wrapper: scroll(wrapper), viewport: scroll(stage.querySelector('.hm-orgchart-viewport')) },
painted: [...stage.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-organization-name,image[data-arrow],.hm-orgchart-heading,.hm-orgchart-slot-side,.hm-orgchart-slot-footer')].map(rect) });
const before = measure(); host.style.height = '1014.5px'; await waitFrames(); const after = measure();
return { before, after };
} finally { handle.destroy(); host.remove(); }
}, fixture);
probes.push(value);
check(value.before.scale === 1 && value.after.scale === 1 && value.before.size.width === value.after.size.width && value.before.size.height === value.after.size.height, 'Bounded parent height-only resize retains scale 1 without viewport resize', { before: value.before.scale, after: value.after.scale, viewport: value.after.size });
check(value.before.centerOffset === 0 && value.after.centerOffset > value.before.centerOffset && value.after.canvasHeight > value.before.canvasHeight && value.after.representative.top > value.before.representative.top && value.after.hub.top > value.before.hub.top && value.after.tree.top > value.before.tree.top, 'Bounded parent height-only resize recalculates central anchors', { beforeOffset: value.before.centerOffset, afterOffset: value.after.centerOffset, representativeDelta: value.after.representative.top - value.before.representative.top, hubDelta: value.after.hub.top - value.before.hub.top, treeDelta: value.after.tree.top - value.before.tree.top });
check(value.before.notifications === 0 && value.after.notifications > 0, 'Adaptive anchor change emits existing hm-orgchart-scale notification at unchanged scale', { before: value.before.notifications, after: value.after.notifications });
const scrollable = Object.entries(value.after.scroll).filter(([, item]) => ['auto', 'scroll'].includes(item.overflowX) && item.width > item.clientWidth + 1 || ['auto', 'scroll'].includes(item.overflowY) && item.height > item.clientHeight + 1);
const documentFits = ['root', 'body'].every(key => value.after.scroll[key].width <= 1921 && value.after.scroll[key].height <= 1081);
const inside = value.after.painted.every(item => item.left >= value.after.host.left - 1 && item.right <= value.after.host.right + 1 && item.top >= value.after.host.top - 1 && item.bottom <= value.after.host.bottom + 1);
check(!scrollable.length && documentFits && inside && value.after.stage.bottom <= value.after.host.bottom + 1, 'Bounded parent resize keeps actual content contained without document or internal scrollbars', { scrollable, scroll: value.after.scroll, inside });
} catch (error) { check(false, 'Anchor notification probe completed', { message: error.message, stack: error.stack }); }
check(errors.length === 0, 'Anchor notification probe console/page errors zero', errors);
const result = { checks, probes, errors, pass: checks.filter(item => item.status === 'PASS').length, fail: checks.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, 'anchor-notification.json'), JSON.stringify(result, null, 2));
await browser.close(); console.log(JSON.stringify({ pass: result.pass, fail: result.fail, checks, output: path.join(output, 'anchor-notification.json') })); process.exit(result.fail ? 1 : 0);
}
// Repeat only a failed stability probe, preserving its first-run evidence.
if (process.argv.includes('--stability-only')) {
const probes = [];
try {
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`); await ready();
await page.evaluate(() => { window.__p95MountedStage = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('.hm-orgchart-stage'); });
for (const size of [{ width: 1920, height: 1080 }, { width: 1920, height: 1440 }, { width: 1440, height: 900 }, { width: 1920, height: 1080 }]) {
await page.setViewportSize(size); await settle();
const state = await page.evaluate(() => {
const host = document.querySelector('.hm-orgchart-story-full'), shadow = host.querySelector('.hm-orgchart-host').shadowRoot;
const stage = shadow.querySelector('.hm-orgchart-stage'), wrapper = shadow.querySelector('.hm-orgchart-composition');
const r = stage.getBoundingClientRect(), h = host.getBoundingClientRect(), css = getComputedStyle(host);
const left = h.left + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.paddingLeft) || 0), right = h.right - (parseFloat(css.borderRightWidth) || 0) - (parseFloat(css.paddingRight) || 0);
return { horizontalError: (r.left + r.right - left - right) / 2, sameMount: stage === window.__p95MountedStage, offset: Number(wrapper.dataset.centerOffset), scale: r.width / 1920 };
});
probes.push({ size, ...state });
check(state.sameMount && Math.abs(state.horizontalError) <= 1, `${size.width}x${size.height}-${probes.length}: modified centering helper retains same mount within 1px`, probes.at(-1));
if (size.width === 1440) {
const probe = await stability();
probes.at(-1).stability = probe;
check(probe.count === 0, '1440x900: twenty settled frames have zero Stage style mutations (failed item recheck)', probe);
}
}
const benchmark = await page.evaluate(async data => {
const api = await import('/core/index.js'), host = document.createElement('section');
Object.assign(host.style, { position: 'fixed', left: '0', top: '0', width: '1920px', height: '914.5px', zIndex: '1000', overflow: 'hidden' }); document.body.append(host);
const handle = api.createOrgChart({ container: host, dataSource: new api.JsonOrgChartDataSource(data), displayMode: 'readOnly', stylesheetUrls: { engine: '/core/engine.css', core: '/core/style.css' } });
try {
await handle.mount();
const shadow = host.querySelector('.hm-orgchart-host').shadowRoot;
await Promise.all([...shadow.querySelectorAll('link[rel="stylesheet"]')].map(link => link.sheet ? Promise.resolve() : new Promise((resolve, reject) => { link.addEventListener('load', resolve, { once: true }); link.addEventListener('error', reject, { once: true }); })));
await document.fonts.ready; for (let i = 0; i < 20; i++) await new Promise(requestAnimationFrame);
const stage = shadow.querySelector('.hm-orgchart-stage'), wrapper = shadow.querySelector('.hm-orgchart-composition');
const rect = element => { const r = element.getBoundingClientRect(); return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height }; };
const s = rect(stage), h = rect(host), status = rect(stage.querySelector('.hm-orgchart-slot-belowTree')), footer = rect(stage.querySelector('.hm-orgchart-slot-footer'));
return { scale: s.width / 1920, centerOffset: Number(wrapper.dataset.centerOffset), canvasHeight: Number(wrapper.dataset.canvasHeight), stage: s, host: h, status, footer, gap: footer.top - status.bottom, cards: stage.querySelectorAll('.hm-orgchart-employee').length, horizontalError: (s.left + s.right - h.left - h.right) / 2 };
} finally { handle.destroy(); host.remove(); }
}, fixture);
probes.push({ name: 'public-1920x914.5-base-benchmark', ...benchmark });
check(benchmark.scale === 1 && benchmark.centerOffset === 0 && benchmark.canvasHeight === 914.5 && Math.abs(benchmark.stage.height - 914.5) < .02, 'Original 1920x914.5 design benchmark retains scale 1 and center offset 0', benchmark);
check(Math.abs(benchmark.gap - 14.609375) < .02, 'Original design benchmark exposes 14.609375px status/footer gap', benchmark.gap);
check(benchmark.cards === 43 && Math.abs(benchmark.horizontalError) <= 1, 'Original design benchmark retains cards and content horizontal center', benchmark);
} catch (error) { check(false, 'Stability reproduction completed', { message: error.message, stack: error.stack }); }
check(errors.length === 0, 'Stability reproduction console/page errors zero', errors);
const result = { checks, probes, errors, pass: checks.filter(item => item.status === 'PASS').length, fail: checks.filter(item => item.status === 'FAIL').length };
await fs.writeFile(path.join(output, 'stability-recheck.json'), JSON.stringify(result, null, 2));
await browser.close(); console.log(JSON.stringify(result)); process.exit(result.fail ? 1 : 0);
}
try {
await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`); await ready();
await page.evaluate(() => { window.__p95MountedStage = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector('.hm-orgchart-stage'); });
let first;
for (const size of [{ width: 1920, height: 1080 }, { width: 1920, height: 1440 }, { width: 1440, height: 900 }, { width: 1920, height: 1080 }]) {
await page.setViewportSize(size); await settle();
const name = `${size.width}x${size.height}-${measurements.length + 1}`, current = await snapshot(name); first ??= current;
check(current.sameMount, `${name}: same Full Composition mount retained`);
check(Math.abs(current.horizontalError) < .75, `${name}: actual wrapper horizontal center retained`, current.horizontalError);
check(current.central.length === first.central.length && current.central.every((item, index) => item.key === first.central[index].key && near(item.box, first.central[index].box)), `${name}: representative, hub and all organization/card relative coordinates retained after center offset`, { count: current.central.length, offset: current.offset });
check(current.paths.length === 5 && current.paths.every((item, index) => item.id === first.paths[index].id && item.d === first.paths[index].d && near(item.box, first.paths[index].box)), `${name}: all five SVG paths share central movement without coordinate drift`, current.paths);
check(Math.abs(current.managementEndpointError.x) < .05 && Math.abs(current.managementEndpointError.y) < .05, `${name}: management connector endpoint meets live header`, current.managementEndpointError);
check(current.arrows.length === 5 && current.arrows.every((item, index) => item.loaded && item.id === first.arrows[index].id && near(item.box, first.arrows[index].box) && item.hash === assetHashes[arrowAssets[item.id]]), `${name}: five original arrow assets and relative geometry retained`, current.arrows.map(({ id, hash, box }) => ({ id, hash, box })));
const old = baseline.measurements.find(item => item.name === `${size.width}x${size.height}`);
check(current.arrows.every(item => { const previous = old.arrows.find(arrow => arrow.id === item.id); return near(item.box, { x: previous.box.x, y: previous.box.y, width: previous.box.width, height: previous.box.height }); }), `${name}: collaboration arrow base placement unchanged from pre-P9.5 measurement`);
const settled = await stability();
check(settled.count === 0, `${name}: twenty settled frames have zero Stage style mutations`, settled);
}
check(measurements[1].offset > measurements[0].offset && Math.abs(measurements[3].offset - measurements[0].offset) < .01, 'Taller viewport increases center offset and reverse resize restores it', measurements.map(({ name, offset, canvasHeight }) => ({ name, offset, canvasHeight })));
check(first.links.length === 0, 'Canonical Full Story retains its existing unconfigured group titles', first.links);
// Compare each actually rendered arrow crop against the same crop with only
// that arrow hidden. A changed image proves painted pixels, not merely DOM presence.
for (const arrow of measurements.at(-1).arrows) {
const r = arrow.rect, left = Math.max(0, Math.floor(r.left)), top = Math.max(0, Math.floor(r.top));
const clip = { x: left, y: top, width: Math.ceil(r.right) - left, height: Math.ceil(r.bottom) - top };
const shown = await page.screenshot({ clip, animations: 'disabled' });
await page.evaluate(id => { const element = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector(`image[data-arrow="${id}"]`); element.dataset.p95OldStyle = element.getAttribute('style') ?? ''; element.style.visibility = 'hidden'; }, arrow.id);
const hidden = await page.screenshot({ clip, animations: 'disabled' });
await page.evaluate(id => { const element = document.querySelector('.hm-orgchart-host').shadowRoot.querySelector(`image[data-arrow="${id}"]`); const style = element.dataset.p95OldStyle; if (style) element.setAttribute('style', style); else element.removeAttribute('style'); delete element.dataset.p95OldStyle; }, arrow.id);
const painted = !shown.equals(hidden); arrowPaint.push({ id: arrow.id, painted, clip, pngBytes: shown.length });
check(painted, `${arrow.id}: collaboration arrow contributes visible painted pixels`, arrowPaint.at(-1));
}
await page.screenshot({ path: path.join(output, 'interaction-artwork-1920x1080.png'), fullPage: true, animations: 'disabled' });
const employee = page.locator('.hm-orgchart-viewport .hm-orgchart-employee').first();
const employeeId = await employee.getAttribute('data-employee-id');
await employee.focus(); await page.keyboard.press('Enter');
const dialog = page.locator('.hm-orgchart-employee-dialog[open]'); await dialog.waitFor();
check(await dialog.getAttribute('data-employee-id') === employeeId && (await dialog.textContent()).includes('홍 길 동'), 'Full employee keyboard activation opens existing popup with employee identity', { employeeId });
await page.screenshot({ path: path.join(output, 'interaction-employee-popup.png'), fullPage: true });
await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'hidden' }); await settle();
check(await employee.evaluate(element => element === element.getRootNode().activeElement), 'Full employee popup ESC restores card focus');
// The Story intentionally has no configured links. Exercise the public link
// API in an isolated temporary Workdesk mount; suppress native navigation.
const coreAvailable = await fetch(`${origin}/core/index.js`).then(response => response.ok).catch(() => false);
if (!coreAvailable) notVerified('Public organizationLinks native keyboard interaction', '/core/index.js route unavailable; canonical Story does not configure group links.');
else {
const linkState = await page.evaluate(async data => {
const api = await import('/core/index.js');
const host = document.createElement('section'); host.id = 'p95-link-probe';
Object.assign(host.style, { position: 'fixed', left: '0', top: '0', width: '1200px', height: '600px', zIndex: '1000', overflow: 'hidden' });
document.body.append(host);
const href = 'https://example.invalid/group/business';
const handle = api.createOrgChart({ container: host, dataSource: new api.JsonOrgChartDataSource(data), displayMode: 'readOnly', stylesheetUrls: { engine: '/core/engine.css', core: '/core/style.css' }, organizationLinks: { 'business-management': href } });
await handle.mount();
const shadow = host.querySelector('.hm-orgchart-host').shadowRoot;
await Promise.all([...shadow.querySelectorAll('link[rel="stylesheet"]')].map(link => link.sheet ? Promise.resolve() : new Promise((resolve, reject) => { link.addEventListener('load', resolve, { once: true }); link.addEventListener('error', reject, { once: true }); })));
for (let i = 0; i < 20; i++) await new Promise(requestAnimationFrame);
const link = shadow.querySelector('.hm-orgchart-organization-link');
window.__p95LinkProbe = { handle, host, shadow, clicks: 0 };
link.addEventListener('click', event => { event.preventDefault(); window.__p95LinkProbe.clicks++; });
return { links: shadow.querySelectorAll('.hm-orgchart-organization-link').length, href: link.href, nativeTag: link.tagName, tabIndex: link.tabIndex, beforeCards: shadow.querySelectorAll('.hm-orgchart-employee').length };
}, fixture);
const link = page.locator('#p95-link-probe .hm-orgchart-organization-link');
await link.focus();
check(await link.evaluate(element => element === element.getRootNode().activeElement) && linkState.links === 1 && linkState.nativeTag === 'A' && linkState.tabIndex === 0 && linkState.href === 'https://example.invalid/group/business', 'Public Full group link retains native anchor href and keyboard focus', linkState);
await page.keyboard.press('Enter'); await settle();
const afterLink = await page.evaluate(() => ({ clicks: window.__p95LinkProbe.clicks, cards: window.__p95LinkProbe.shadow.querySelectorAll('.hm-orgchart-employee').length, dialogs: window.__p95LinkProbe.shadow.querySelectorAll('dialog[open]').length, url: location.href }));
check(afterLink.clicks === 1 && afterLink.cards === linkState.beforeCards && afterLink.dialogs === 0 && afterLink.url.includes('orgchart--full-composition'), 'Group link keyboard activation preserves chart and suppresses network navigation', afterLink);
await page.evaluate(() => { window.__p95LinkProbe.handle.destroy(); window.__p95LinkProbe.host.remove(); delete window.__p95LinkProbe; });
}
} catch (error) { check(false, 'Focused Full interaction run completed', { message: error.message, stack: error.stack }); }
finally {
await page.evaluate(() => { if (window.__p95LinkProbe) { window.__p95LinkProbe.handle.destroy(); window.__p95LinkProbe.host.remove(); delete window.__p95LinkProbe; } }).catch(() => {});
check(errors.length === 0, 'No Full interaction console/page errors', errors);
const result = { startedAt, completedAt: new Date().toISOString(), origin, browser: browser.version(), checks, measurements, arrowPaint, assetHashes, errors, pass: checks.filter(item => item.status === 'PASS').length, fail: checks.filter(item => item.status === 'FAIL').length, notVerified: checks.filter(item => item.status === 'NOT VERIFIED').length };
await fs.writeFile(path.join(output, 'interactions.json'), JSON.stringify(result, null, 2));
await browser.close(); console.log(JSON.stringify({ pass: result.pass, fail: result.fail, notVerified: result.notVerified, output: path.join(output, 'interactions.json') }));
if (result.fail) process.exitCode = 1;
}
examples/org-chart/verify-p9-5-full.mjs
+94
View File
@@ -0,0 +1,94 @@
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root,'test-results/org-chart-p9-5-full');
const phase = process.argv[2] ?? 'after';
const origin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064';
const sizes = [{width:1920,height:1080},{width:1920,height:1440},{width:1440,height:900},{width:1280,height:1024},{width:390,height:844}];
const browser = await launchChromium({headless:true});
const page = await browser.newPage({viewport:sizes[0]});
const measurements = [], checks = [], errors = [];
page.setDefaultTimeout(30000);
page.on('pageerror',e=>errors.push(e.message));
page.on('console',m=>{if(m.type()==='error')errors.push(m.text());});
await fs.mkdir(output,{recursive:true});
const check=(pass,name,detail)=>{checks.push({name,status:pass?'PASS':'FAIL',detail});if(!pass)console.log('FAIL',name,JSON.stringify(detail));};
const settle=()=>page.evaluate(async()=>{await document.fonts.ready;for(let i=0;i<16;i++)await new Promise(requestAnimationFrame);});
async function ready(){
await page.waitForFunction(()=>{const s=document.querySelector('.hm-orgchart-host')?.shadowRoot;return s?.querySelector('.hm-orgchart-stage[data-workdesk-artwork]')&&!s.querySelector('[aria-busy="true"]')&&[...s.querySelectorAll('link[rel="stylesheet"]')].every(l=>l.sheet);});
await page.evaluate(async()=>{await Promise.all([...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('img')].map(async i=>{i.loading='eager';await i.decode();}));}); await settle();
}
async function snapshot(name){
const s=await page.evaluate(async()=>{
const host=document.querySelector('.hm-orgchart-story-full'),shadow=host.querySelector('.hm-orgchart-host').shadowRoot;
const wrapper=shadow.querySelector('.hm-orgchart-composition'),stage=shadow.querySelector('.hm-orgchart-stage');
const rect=e=>{const r=e.getBoundingClientRect();return{left:r.left,right:r.right,top:r.top,bottom:r.bottom,width:r.width,height:r.height};};
const hb=rect(host),st=rect(stage),css=getComputedStyle(host),scale=st.width/1920;
const content={left:hb.left+parseFloat(css.borderLeftWidth)+parseFloat(css.paddingLeft),right:hb.right-parseFloat(css.borderRightWidth)-parseFloat(css.paddingRight),top:hb.top+parseFloat(css.borderTopWidth)+parseFloat(css.paddingTop),bottom:hb.bottom-parseFloat(css.borderBottomWidth)-parseFloat(css.paddingBottom)};
content.width=content.right-content.left;content.height=content.bottom-content.top;
const union=items=>{const b=[...items].map(rect).filter(r=>r.width&&r.height);const left=Math.min(...b.map(r=>r.left)),right=Math.max(...b.map(r=>r.right)),top=Math.min(...b.map(r=>r.top)),bottom=Math.max(...b.map(r=>r.bottom));return{left,right,top,bottom,width:right-left,height:bottom-top};};
const norm=b=>({x:(b.left-st.left)/scale,y:(b.top-st.top)/scale,width:b.width/scale,height:b.height/scale});
const heading=rect(stage.querySelector('.hm-orgchart-heading')),side=rect(stage.querySelector('.hm-orgchart-slot-side'));
const axis=rect(stage.querySelector('.hm-orgchart-axis')),tree=rect(stage.querySelector('.hm-orgchart-viewport'));
const status=rect(stage.querySelector('.hm-orgchart-slot-belowTree')),footer=rect(stage.querySelector('.hm-orgchart-slot-footer'));
const center=union(stage.querySelectorAll('.hm-orgchart-axis .hm-orgchart-employee,.hm-orgchart-hub,.hm-orgchart-viewport .hm-orgchart-employee,.hm-orgchart-viewport .hm-orgchart-organization-name'));
const cards=[...stage.querySelectorAll('.hm-orgchart-employee')].map(e=>({id:e.dataset.employeeId,rect:rect(e),box:norm(rect(e)),role:e.querySelector('.hm-orgchart-person-role')?.textContent,name:e.querySelector('.hm-orgchart-person-name')?.textContent,asset:e.dataset.cardAssetSize,style:Object.fromEntries(['fontFamily','fontSize','fontWeight','lineHeight','backgroundImage','backgroundColor','width','height'].map(k=>[k,getComputedStyle(e)[k]]))}));
const titles=[...stage.querySelectorAll('.hm-orgchart-viewport .hm-orgchart-organization-name')].map(e=>({id:e.closest('.node').dataset.organizationId,rect:rect(e),box:norm(rect(e)),style:Object.fromEntries(['fontFamily','fontSize','fontWeight','lineHeight','color','backgroundImage','width','height'].map(k=>[k,getComputedStyle(e)[k]]))}));
const arrows=await Promise.all([...stage.querySelectorAll('image[data-arrow]')].map(async e=>{
const img=new Image();img.src=e.getAttribute('href');await img.decode();
const box=rect(e);const blockers=[...stage.querySelectorAll('.hm-orgchart-employee,.hm-orgchart-organization-name,.hm-orgchart-hub')].filter(el=>{const r=rect(el);return Math.min(box.right,r.right)-Math.max(box.left,r.left)>.5&&Math.min(box.bottom,r.bottom)-Math.max(box.top,r.top)>.5;}).map(e=>e.className);
return{id:e.dataset.arrow,rect:box,box:norm(box),loaded:img.naturalWidth>0,natural:[img.naturalWidth,img.naturalHeight],blockers,display:getComputedStyle(e).display,visibility:getComputedStyle(e).visibility};
}));
const paths=[...stage.querySelectorAll('.hm-orgchart-workdesk-overlay path')].map(e=>({id:e.dataset.connector,d:e.getAttribute('d'),rect:rect(e)}));
const decorations=[...stage.querySelectorAll('.hm-orgchart-workdesk-decoration')].map(e=>({id:e.dataset.workdeskAsset,box:norm(rect(e)),rect:rect(e)}));
const centralCards=cards.filter(c=>!stage.querySelector('.hm-orgchart-slot-belowTree [data-employee-id="'+c.id+'"]'));
const collisions=centralCards.filter(c=>Math.min(c.rect.right,status.right)-Math.max(c.rect.left,status.left)>.5&&Math.min(c.rect.bottom,status.bottom)-Math.max(c.rect.top,status.top)>.5).map(c=>c.id);
const scroll=e=>({width:e.scrollWidth,clientWidth:e.clientWidth,height:e.scrollHeight,clientHeight:e.clientHeight,overflowX:getComputedStyle(e).overflowX,overflowY:getComputedStyle(e).overflowY});
return{size:{width:innerWidth,height:innerHeight},host:hb,content,wrapper:rect(wrapper),stage:st,scale,baseWidth:stage.offsetWidth,stageLayoutHeight:parseFloat(getComputedStyle(stage).height),top:{heading,side,bounds:union([stage.querySelector('.hm-orgchart-heading'),stage.querySelector('.hm-orgchart-slot-side')])},axis,tree,center,status,footer,
logical:{heading:norm(heading),side:norm(side),axis:norm(axis),tree:norm(tree),status:norm(status),footer:norm(footer),center:norm(center)},gap:footer.top-status.bottom,gapDesign:(footer.top-status.bottom)/scale,
horizontalError:(st.left+st.right-content.left-content.right)/2,centerOffset:Number(wrapper.dataset.centerOffset)||0,
centerAvailable:{top:Math.max(heading.bottom,side.bottom),bottom:status.top},centerErrorY:(center.top+center.bottom-Math.max(heading.bottom,side.bottom)-status.top)/2,
cards,titles,arrows,paths,decorations,collisions,totals:stage.querySelector('.hm-orgchart-slot-side').textContent,affiliations:stage.querySelector('.hm-orgchart-slot-footer').textContent,
layer:{overlay:getComputedStyle(stage.querySelector('.hm-orgchart-workdesk-overlay')).zIndex,tree:getComputedStyle(stage.querySelector('.hm-orgchart-viewport')).zIndex},
scroll:{root:scroll(document.documentElement),body:scroll(document.body),host:scroll(host),wrapper:scroll(wrapper)}};
});measurements.push({name,...s});await fs.writeFile(path.join(output,`${phase}-progress.json`),JSON.stringify({measurements,checks,errors},null,2));return s;
}
try{
const baseline=phase==='after'?JSON.parse(await fs.readFile(path.join(output,'before.json'),'utf8')):null;
for(const size of sizes){
await page.setViewportSize(size);await page.goto(`${origin}/iframe.html?id=orgchart--full-composition&viewMode=story`);await ready();
const name=`${size.width}x${size.height}`,s=await snapshot(name);
await page.screenshot({path:path.join(output,`${phase}-${name}.png`),fullPage:true});
if(phase==='after'){
const old=baseline.measurements.find(m=>m.name===name);
check(Math.abs(s.horizontalError)<=1,`${name}: wrapper horizontal center`,s.horizontalError);
check(s.arrows.length===5&&s.arrows.every(a=>a.loaded&&a.visibility==='visible'&&a.display!=='none'&&!a.blockers.length),`${name}: 5 loaded arrows without card/title intersections`,s.arrows);
check(s.gapDesign>=12&&s.gapDesign<=16,`${name}: status/footer design gap`,{before:old.gapDesign,after:s.gapDesign,visible:s.gap});
check(s.collisions.length===0,`${name}: center/status no collisions`,s.collisions);
check(s.cards.length===old.cards.length&&s.cards.every((c,i)=>c.id===old.cards[i].id&&JSON.stringify(c.style)===JSON.stringify(old.cards[i].style))&&s.titles.every((t,i)=>t.id===old.titles[i].id&&JSON.stringify(t.style)===JSON.stringify(old.titles[i].style)),`${name}: card/title typography and geometry preserved`);
check(s.totals===old.totals&&s.affiliations===old.affiliations,`${name}: headcounts/logos/text preserved`);
const movedBox=(current,previous)=>Math.abs(current.x-previous.x)<.1&&Math.abs(current.width-previous.width)<.1&&Math.abs(current.height-previous.height)<.1&&Math.abs(current.y-previous.y-s.centerOffset)<.1;
const inOldStatus=c=>c.box.x>=old.logical.status.x-.1&&c.box.x+c.box.width<=old.logical.status.x+old.logical.status.width+.1&&c.box.y>=old.logical.status.y-.1&&c.box.y+c.box.height<=old.logical.status.y+old.logical.status.height+.1;
check(s.cards.every((c,i)=>inOldStatus(old.cards[i])||movedBox(c.box,old.cards[i].box))&&s.titles.every((t,i)=>movedBox(t.box,old.titles[i].box))&&movedBox(s.logical.axis,old.logical.axis)&&movedBox(s.logical.tree,old.logical.tree),`${name}: entire central chart keeps relative coordinates`,s.centerOffset);
check(s.arrows.every((a,i)=>a.id===old.arrows[i].id&&movedBox(a.box,old.arrows[i].box))&&s.paths.every((p,i)=>p.id===old.paths[i].id&&p.d===old.paths[i].d)&&s.decorations.every((d,i)=>d.id===old.decorations[i].id&&movedBox(d.box,old.decorations[i].box)),`${name}: 5 arrows/connectors/decorations share center offset without resizing`);
check(s.scroll.root.width<=size.width+1&&s.scroll.root.height<=size.height+1&&s.scroll.body.width<=size.width+1&&s.scroll.body.height<=size.height+1,`${name}: document no horizontal/vertical scroll`,s.scroll);
const outside=[...s.cards.map(c=>c.rect),...s.titles.map(t=>t.rect),...s.arrows.map(a=>a.rect),s.top.heading,s.top.side,s.footer].filter(r=>r.left<s.content.left-1||r.right>s.content.right+1||r.top<s.content.top-1||r.bottom>s.content.bottom+1);
check(!outside.length,`${name}: all actual content contained, no overflow clipping`,outside);
check(Math.abs(s.logical.heading.y-old.logical.heading.y)<.2&&Math.abs(s.logical.side.y-old.logical.side.y)<.2,`${name}: top anchors unchanged`,{old:old.top,after:s.top});
const footerInset=(s.stage.bottom-s.footer.bottom)/s.scale;
check(Math.abs(footerInset-(old.stage.bottom-old.footer.bottom)/old.scale)<.2,`${name}: footer bottom anchor`,footerInset);
const centerBase=old.logical.center;
const deltas=s.cards.filter(c=>!c.id.startsWith('leave-')&&!c.id.startsWith('dispatch-')).map(c=>{const previous=old.cards.find(o=>o.id===c.id);return{x:c.box.x-previous.box.x,y:c.box.y-previous.box.y};});
const central=s.cards.filter(c=>s.tree.top<=c.rect.top&&c.rect.bottom<=s.tree.bottom+.5);
check(Math.abs(s.scale-Math.min(1,s.content.width/1920,s.content.height/914.5))<.002,`${name}: one proportional scale without enlargement`,s.scale);
if(s.centerAvailable.bottom-s.centerAvailable.top>=s.center.height)check(Math.abs(s.centerErrorY)<1,`${name}: center occupies available vertical middle`,s.centerErrorY);
}
}
}catch(e){check(false,'Full layout measurement completed',{message:e.message,stack:e.stack});}
check(!errors.length,'Console/page errors zero',errors);
const result={phase,origin,browser:browser.version(),measurements,checks,errors,pass:checks.filter(c=>c.status==='PASS').length,fail:checks.filter(c=>c.status==='FAIL').length};
await fs.writeFile(path.join(output,`${phase}.json`),JSON.stringify(result,null,2));await browser.close();
console.log(JSON.stringify({phase,measurements:measurements.map(m=>({name:m.name,scale:m.scale,h:m.stageLayoutHeight,center:m.logical.center,status:m.logical.status,footer:m.logical.footer,gap:m.gapDesign,arrows:m.arrows.map(a=>({id:a.id,blockers:a.blockers})),centerError:m.centerErrorY})),pass:result.pass,fail:result.fail}));if(result.fail)process.exitCode=1;
examples/org-chart/verify-p9-5-geometry.mjs
+187
View File
@@ -0,0 +1,187 @@
// Focused P9.5 transform geometry and pointer-coordinate probes; no P9.4 replay.
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-5');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6064').replace(/\/$/, '');
const startedAt = new Date().toISOString(), checks = [], measurements = [], errors = [];
const pointerOnly = process.argv.includes('--pointer-only');
await fs.mkdir(output, { recursive: true });
if (pointerOnly) {
const initial = JSON.parse(await fs.readFile(path.join(output, 'geometry-initial.json'), 'utf8'));
measurements.push(...initial.measurements);
for (const c of initial.checks) {
if (c.name === 'Focused geometry browser console/page errors zero') continue;
if (c.name.includes(': pointer move starts at fitted scale')) continue;
if (c.status === 'PASS') checks.push(c);
else if (c.name.endsWith(': connector endpoints reach intended targets')) {
checks.push({ ...c, status: c.detail.maxLocalError < 0.75 ? 'PASS' : 'FAIL', detail: { ...c.detail, toleranceLocalPx: 0.75, reason: 'Integer offset geometry and fractional CSS widths differ by up to 0.5 local px; evaluated from preserved initial measurements without browser replay.' } });
}
}
}
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1700 } });
page.setDefaultTimeout(30000);
page.on('pageerror', error => errors.push({ type: 'pageerror', message: error.message }));
page.on('console', message => { if (message.type() === 'error') errors.push({ type: 'console', message: message.text() }); });
const check = (pass, name, detail) => { checks.push({ name, status: pass ? 'PASS' : 'FAIL', detail }); fs.writeFile(path.join(output, 'geometry-progress.json'), JSON.stringify({ startedAt, checks, measurements, errors }, null, 2)).catch(() => {}); if (!pass) console.log('FAIL', name, JSON.stringify(detail)); };
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 10; i++) await new Promise(requestAnimationFrame); });
async function ready(count) {
await page.waitForFunction(count => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& (count === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === count);
}, count, { timeout: 60000 });
await settle();
}
async function setup(type, label) {
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
await page.getByRole('button', { name: /^회사 선택/ }).waitFor(); await ready(140);
await page.getByRole('button', { name: /^회사 선택/ }).click();
const panel = page.getByRole('dialog', { name: '회사 선택', exact: true }); await panel.waitFor();
const all = panel.getByRole('checkbox', { name: '전체 선택', exact: true });
for (let i = 0; i < 2 && await all.getAttribute('aria-checked') !== 'false'; i++) { await all.click(); await ready(); }
await ready(0); await panel.getByRole('checkbox', { name: '한맥기술', exact: true }).click(); await ready(20);
await page.keyboard.press('Escape'); await panel.waitFor({ state: 'hidden' });
if (type !== 'tb') {
await page.getByRole('combobox', { name: '조직도 표시 유형', exact: true }).click();
await page.getByRole('option', { name: label, exact: true }).click(); await ready(20);
}
await page.locator('.hm-orgchart-viewport').scrollIntoViewIfNeeded(); await settle();
}
async function snapshot(name) {
const measurement = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const viewport = shadow.querySelector('.hm-orgchart-viewport'), forest = shadow.querySelector('.hm-orgchart-forest');
const scale = Number(viewport.dataset.scale), origin = forest.getBoundingClientRect();
const localPoint = p => ({ x: (p.x - origin.left) / scale, y: (p.y - origin.top) / scale });
const localRect = element => { const r = element.getBoundingClientRect(); return { x: (r.left - origin.left) / scale, y: (r.top - origin.top) / scale, width: r.width / scale, height: r.height / scale }; };
const endPoint = p => localPoint(p.getPointAtLength(p.getTotalLength()).matrixTransform(p.getScreenCTM()));
const employeePaths = [...shadow.querySelectorAll('.hm-orgchart-employee-connectors path')].map(p => {
const article = p.closest('.hm-orgchart-organization');
const card = [...article.querySelectorAll('.hm-orgchart-employee')].find(card => card.dataset.employeeId === p.dataset.employeeId);
const box = localRect(card), direction = p.dataset.direction;
const expected = direction === 'left' ? { x: box.x, y: box.y + box.height / 2 }
: direction === 'right' ? { x: box.x + box.width, y: box.y + box.height / 2 } : { x: box.x + box.width / 2, y: box.y };
const endpoint = endPoint(p);
return { id: p.dataset.employeeId, direction, d: p.getAttribute('d'), endpoint, expected, error: Math.hypot(endpoint.x - expected.x, endpoint.y - expected.y) };
});
const organizationPaths = [...shadow.querySelectorAll('.hm-orgchart-organization-connectors path')].map(p => {
const tree = p.closest('.hm-orgchart-tree');
const node = [...tree.querySelectorAll('.node')].find(node => node.dataset.organizationId === p.dataset.organizationId);
const heading = localRect(node.querySelector('.hm-orgchart-organization-name'));
const expected = p.dataset.direction === 'left' ? { x: heading.x, y: heading.y + heading.height / 2 } : { x: heading.x + heading.width / 2, y: heading.y };
const endpoint = endPoint(p);
return { id: p.dataset.organizationId, parentId: p.dataset.parentId, direction: p.dataset.direction, d: p.getAttribute('d'), endpoint, expected, error: Math.hypot(endpoint.x - expected.x, endpoint.y - expected.y) };
});
const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({ id: card.dataset.employeeId, organizationId: card.closest('.node').dataset.organizationId, ...localRect(card) }));
return { layout: shadow.querySelector('.hm-orgchart-expanded').dataset.autoLayout, scale, x: Number(viewport.dataset.panX), y: Number(viewport.dataset.panY), cards, employeePaths, organizationPaths, organizationConnectorPresentation: organizationPaths.length ? 'measured-svg' : 'existing-TB-pseudo-elements' };
});
measurements.push({ name, ...measurement }); return measurement;
}
function validateEndpoints(s, label) {
const paths = [...s.employeePaths, ...s.organizationPaths];
check(s.cards.length === 20 && s.employeePaths.length === 20, `${label}: all 20 cards retain employee connectors`, { cards: s.cards.length, employeePaths: s.employeePaths.length });
check(paths.every(p => p.error < 0.75), `${label}: connector endpoints reach intended targets`, { paths: paths.length, organizationPaths: s.organizationPaths.length, maxLocalError: Math.max(0, ...paths.map(p => p.error)), toleranceLocalPx: 0.75 });
if (s.layout !== 'tb') check(s.organizationPaths.length > 0, `${label}: organization routes are measured`, s.organizationPaths.length);
}
function compareGeometry(before, after, label) {
let maxDelta = 0;
const cardKeys = ['x', 'y', 'width', 'height'];
for (const a of before.cards) {
const b = after.cards.find(b => b.id === a.id);
if (!b) { maxDelta = Infinity; break; }
for (const key of cardKeys) maxDelta = Math.max(maxDelta, Math.abs(a[key] - b[key]));
}
for (const key of ['employeePaths', 'organizationPaths']) for (const a of before[key]) {
const b = after[key].find(b => b.id === a.id);
if (!b || a.d !== b.d) { maxDelta = Infinity; break; }
maxDelta = Math.max(maxDelta, Math.abs(a.endpoint.x - b.endpoint.x), Math.abs(a.endpoint.y - b.endpoint.y));
}
check(maxDelta < 0.1, `${label}: forest-local card/connector geometry is unchanged`, { maxLocalDelta: maxDelta, beforeScale: before.scale, afterScale: after.scale });
}
async function pan() {
await page.locator('.hm-orgchart-viewport').focus();
await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowUp'); await settle();
}
async function pointerMove(type) {
const toggle = page.getByRole('switch', { name: /Drag & Drop|조직 이동/ });
if (await toggle.getAttribute('aria-checked') !== 'true') await toggle.click();
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
const fitted = await snapshot(`${type}-drag-fit`); await pan();
const panned = await snapshot(`${type}-drag-pan`);
check(panned.x !== fitted.x && panned.y !== fitted.y && panned.scale === fitted.scale, `${type}: pointer move starts at fitted scale with nonzero manual Pan`, { fitted: { x: fitted.x, y: fitted.y, scale: fitted.scale }, panned: { x: panned.x, y: panned.y, scale: panned.scale } });
const pair = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot, viewport = shadow.querySelector('.hm-orgchart-viewport').getBoundingClientRect();
const box = element => { const r = element.getBoundingClientRect(); return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, x: r.left + r.width / 2, y: r.top + r.height / 2 }; };
const inside = r => r.left > viewport.left + 4 && r.right < viewport.right - 4 && r.top > viewport.top + 4 && r.bottom < viewport.bottom - 4
&& r.left > 4 && r.right < innerWidth - 4 && r.top > 4 && r.bottom < innerHeight - 4;
const sources = [...shadow.querySelectorAll('.hm-orgchart-employees .hm-orgchart-employee')].map(element => ({ element, rect: box(element) })).filter(item => inside(item.rect));
sources.sort((a, b) => Math.hypot(a.rect.x - (viewport.left + viewport.right) / 2, a.rect.y - (viewport.top + viewport.bottom) / 2) - Math.hypot(b.rect.x - (viewport.left + viewport.right) / 2, b.rect.y - (viewport.top + viewport.bottom) / 2));
for (const source of sources) {
const sourceOrg = source.element.closest('.node').dataset.organizationId;
const targets = [...shadow.querySelectorAll('.hm-orgchart-expanded-toggle')].filter(element => element.dataset.organizationId !== sourceOrg && element.closest('.node').dataset.parentId !== '').map(element => ({ element, rect: box(element) })).filter(item => inside(item.rect));
targets.sort((a, b) => Math.hypot(a.rect.x - source.rect.x, a.rect.y - source.rect.y) - Math.hypot(b.rect.x - source.rect.x, b.rect.y - source.rect.y));
if (targets.length) return { employeeId: source.element.dataset.employeeId, beforeOrganizationId: sourceOrg, targetOrganizationId: targets[0].element.dataset.organizationId, source: source.rect, target: targets[0].rect };
}
throw new Error('No visible employee/other-organization pointer pair after Fit/Pan');
});
// Native pointer focus may reveal/scroll a source. Settle that before taking
// client coordinates, and verify both endpoints through live shadow hit tests.
await page.locator(`.hm-orgchart-employee[data-employee-id="${pair.employeeId}"]`).focus(); await settle();
const actualPair = await page.evaluate(pair => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const employee = [...shadow.querySelectorAll('.hm-orgchart-employee')].find(item => item.dataset.employeeId === pair.employeeId);
const target = [...shadow.querySelectorAll('.hm-orgchart-expanded-toggle')].find(item => item.dataset.organizationId === pair.targetOrganizationId);
const center = element => { const r = element.getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2 }; };
const sourcePoint = center(employee), targetPoint = center(target);
return { ...pair, source: sourcePoint, target: targetPoint, sourceHit: shadow.elementFromPoint(sourcePoint.x, sourcePoint.y)?.closest('.hm-orgchart-employee')?.dataset.employeeId, targetHit: shadow.elementFromPoint(targetPoint.x, targetPoint.y)?.closest('.node[data-organization-id]')?.dataset.organizationId };
}, pair);
check(actualPair.sourceHit === pair.employeeId && actualPair.targetHit === pair.targetOrganizationId, `${type}: focused pointer endpoints are visible and hit intended DOM targets`, actualPair);
await page.mouse.move(actualPair.source.x, actualPair.source.y); await page.mouse.down();
await page.mouse.move(actualPair.source.x + 8, actualPair.source.y, { steps: 2 });
await page.mouse.move(actualPair.target.x, actualPair.target.y, { steps: 14 });
const hover = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
return { dragging: shadow.querySelector('.hm-orgchart-viewport').dataset.editDragging, target: shadow.querySelector('[data-drop-hover="allowed"]')?.dataset.organizationId, feedback: shadow.querySelector('.hm-orgchart-move-feedback').textContent };
});
check(hover.dragging === 'true' && hover.target === pair.targetOrganizationId, `${type}: actual pointer hit testing highlights intended transformed target`, { pair, hover });
await page.mouse.up();
await page.waitForFunction(({ employeeId, targetOrganizationId }) => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const card = [...shadow.querySelectorAll('.hm-orgchart-employee')].find(card => card.dataset.employeeId === employeeId);
return card?.closest('.node').dataset.organizationId === targetOrganizationId && shadow.querySelector('.hm-orgchart-move-feedback').dataset.moveStatus === 'success';
}, pair); await ready(20);
const moved = await snapshot(`${type}-after-pointer-move`);
check(moved.cards.find(card => card.id === pair.employeeId)?.organizationId === pair.targetOrganizationId, `${type}: pointer release moves employee to intended organization`, pair);
validateEndpoints(moved, `${type} after pointer move`);
}
try {
for (const [type, label] of [['tb', '세로형 TB'], ['lr', '가로형 LR'], ['hybrid', '혼합형 Hybrid']]) {
try {
await setup(type, label);
if (!pointerOnly) {
const centered = await snapshot(`${type}-centered`); validateEndpoints(centered, `${type} centered`);
await pan(); const panned = await snapshot(`${type}-panned`); compareGeometry(centered, panned, `${type} Pan`); validateEndpoints(panned, `${type} panned`);
await page.getByRole('button', { name: '확대', exact: true }).click(); await settle();
const zoomed = await snapshot(`${type}-zoomed`); compareGeometry(centered, zoomed, `${type} Zoom`); validateEndpoints(zoomed, `${type} zoomed`);
await page.getByRole('button', { name: 'Fit to View', exact: true }).click(); await settle();
const fitted = await snapshot(`${type}-fitted`); compareGeometry(centered, fitted, `${type} Fit`); validateEndpoints(fitted, `${type} fitted`);
}
await pointerMove(type);
if (type === 'hybrid') await page.screenshot({ path: path.join(output, 'geometry-pointer-hybrid.png'), fullPage: true });
} catch (error) {
check(false, `${type}: focused geometry section completed`, { message: error.message, stack: error.stack });
await page.mouse.up().catch(() => {});
}
}
} finally {
check(errors.length === 0, 'Focused geometry browser console/page errors zero', errors);
const result = { startedAt, completedAt: new Date().toISOString(), origin, browser: browser.version(), repairedPointerOnly: pointerOnly, initialEvidence: pointerOnly ? 'geometry-initial.json' : undefined, scope: 'P9.5 only: 1 company × 20 staff; TB/LR/Hybrid transforms and one actual employee pointer move per mode; existing TB organization pseudo-elements unchanged', measurements, checks, errors, pass: checks.filter(c => c.status === 'PASS').length, fail: checks.filter(c => c.status === 'FAIL').length };
await fs.writeFile(path.join(output, 'geometry.json'), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, measurements: measurements.length, output: path.join(output, 'geometry.json') }));
await browser.close(); if (result.fail) process.exitCode = 1;
}
examples/org-chart/verify-p9-5-popup-parity.mjs
+87
View File
@@ -0,0 +1,87 @@
// Verify actual consumers and OPEN popup ownership, not just the presence of DOM.
import fs from 'node:fs/promises';
import path from 'node:path';
import { createHash } from 'node:crypto';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const output=path.resolve('test-results/org-chart-p9-5-popup-parity');
const story=(process.env.ORGCHART_STORY_ORIGIN??'http://127.0.0.1:6064').replace(/\/$/,'');
const vanilla=(process.env.ORGCHART_VANILLA_ORIGIN??'http://127.0.0.1:4178').replace(/\/$/,'');
const checks=[],measurements=[],errors=[],startedAt=new Date().toISOString();
const check=(pass,name,detail)=>{checks.push({name,status:pass?'PASS':'FAIL',detail});if(!pass)console.log('FAIL',name,JSON.stringify(detail));};
const browser=await launchChromium({headless:true}),page=await browser.newPage({viewport:{width:1440,height:900}});
page.setDefaultTimeout(15000);
page.on('pageerror',error=>errors.push(error.message));page.on('console',msg=>{if(msg.type()==='error')errors.push(msg.text());});
const settle=()=>page.evaluate(async()=>{await document.fonts.ready;for(let i=0;i<12;i++)await new Promise(requestAnimationFrame);});
const coreOpen='dialog.hm-orgchart-employee-dialog[open]',hmOpen='[data-component="HMOrgChartEmployeeDialog"][data-state="open"]';
const refClose='[data-slot="dialog-content"] button[data-variant="ghost"]';
async function snapshot(selector){return page.locator(selector).evaluate(button=>{
const rect=el=>{const r=el.getBoundingClientRect();return{x:r.x,y:r.y,width:r.width,height:r.height};};
const c=getComputedStyle(button),box=rect(button),popup=button.closest('dialog,[data-slot="dialog-content"]'),pbox=rect(popup),svg=button.querySelector('svg');
return{box,popup:pbox,inset:{top:box.y-pbox.y,right:pbox.x+pbox.width-box.x-box.width},focusVisible:button.matches(':focus-visible'),
css:Object.fromEntries(['width','height','padding','border','borderRadius','color','backgroundColor','outlineStyle','outlineOffset','transition','cursor','position','top','right','boxSizing','backgroundClip','boxShadow'].map(k=>[k,c[k]])),
svg:svg&&{box:rect(svg),attrs:Object.fromEntries(['viewBox','fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','aria-hidden'].map(k=>[k,svg.getAttribute(k)])),paths:[...svg.querySelectorAll('path')].map(p=>p.getAttribute('d'))},
popupType:popup.matches('dialog')?'Core native':'React HMDesign Dialog',employeeId:popup.dataset.employeeId,
content:popup.querySelector('dl')?.textContent,closeName:button.getAttribute('aria-label')||button.textContent.trim(),root:button.getRootNode() instanceof ShadowRoot?'ShadowRoot':'Document'
};
});}
await page.goto(`${story}/iframe.html?id=components-overlay-dialog--all&viewMode=story`);await page.getByRole('button',{name:'기본',exact:true}).click();await page.locator(refClose).waitFor();await settle();
await page.locator(refClose).evaluate(el=>el.blur());await page.mouse.move(0,0);const reference={normal:await snapshot(refClose)};
await page.locator(refClose).hover();await settle();reference.hover=await snapshot(refClose);
await page.mouse.move(0,0);await page.keyboard.press('Tab');await page.locator(refClose).focus();await settle();reference.focus=await snapshot(refClose);
await page.locator('[data-slot="dialog-content"]').screenshot({path:path.join(output,'hm-dialog-reference-popup.png')});
measurements.push({name:'HM Dialog actual public component',...reference});
const cases=[
{name:'storybook-full',url:`${story}/iframe.html?id=orgchart--full-composition&viewMode=story`,kind:'Core native'},
{name:'storybook-expanded-hm',url:`${story}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`,kind:'React HMDesign Dialog'},
{name:'storybook-expanded-core',url:`${story}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`,kind:'Core native',coreOption:true},
{name:'vanilla-index',url:`${vanilla}/index.html`,kind:'Core native',vanilla:true},
{name:'vanilla-full',url:`${vanilla}/p1.html?mode=readOnly`,kind:'Core native',vanilla:true},
{name:'vanilla-expanded',url:`${vanilla}/expanded.html`,kind:'Core native',vanilla:true},
];
const near=(a,b)=>Math.abs(a-b)<.02,eq=(a,b)=>JSON.stringify(a)===JSON.stringify(b);
for(const width of [1440,390])for(const item of cases){
const label=`${item.name} ${width}`;await page.setViewportSize({width,height:900});await page.goto(item.url);
await page.waitForFunction(()=>{const root=document.querySelector('.hm-orgchart-host')?.shadowRoot;return root?.querySelector('.hm-orgchart-employee[role="button"]')&&[...root.querySelectorAll('link[rel="stylesheet"]')].every(link=>link.sheet);});await settle();
if(item.coreOption){await page.getByRole('combobox',{name:'직원 정보 팝업',exact:true}).click();await page.getByRole('option',{name:'Core 기본 팝업',exact:true}).click();await settle();}
// Use a rendered card inside the horizontally clipped viewport; the Forest
// may legitimately extend beyond the viewport without shrinking its cards.
const choice=await page.evaluate(()=>{
const root=document.querySelector('.hm-orgchart-host').shadowRoot,v=root.querySelector('.hm-orgchart-viewport').getBoundingClientRect();
const cards=[...root.querySelectorAll('.hm-orgchart-employee[role="button"]')];
const candidates=cards.filter(el=>{const r=el.getBoundingClientRect();return r.width>0&&r.height>0&&r.left>=Math.max(0,v.left)&&r.right<=Math.min(innerWidth,v.right);});
const card=(candidates.length?candidates:cards).sort((a,b)=>Math.abs(a.getBoundingClientRect().left-innerWidth/2)-Math.abs(b.getBoundingClientRect().left-innerWidth/2))[0];
return{employeeId:card.dataset.employeeId,aria:card.getAttribute('aria-label')};
});
const trigger=page.locator(`.hm-orgchart-employee[data-employee-id="${choice.employeeId}"]`).first();
await trigger.click();const popupSelector=item.kind==='Core native'?coreOpen:hmOpen;await page.locator(popupSelector).waitFor();await settle();
const closeSelector=item.kind==='Core native'?`${coreOpen} .hm-orgchart-employee-dialog-close`:`${hmOpen} button[data-variant="ghost"]`;
const ownership=await page.evaluate(()=>({core:[...document.querySelectorAll('.hm-orgchart-host')].reduce((n,h)=>n+h.shadowRoot.querySelectorAll('dialog.hm-orgchart-employee-dialog[open]').length,0),hm:document.querySelectorAll('[data-component="HMOrgChartEmployeeDialog"][data-state="open"]').length}));
check(ownership.core===(item.kind==='Core native'?1:0)&&ownership.hm===(item.kind==='Core native'?0:1),`${label}: actual open popup owner matches`,ownership);
await page.locator(closeSelector).evaluate(el=>el.blur());await page.mouse.move(0,0);await settle();const normal=await snapshot(closeSelector);
const keys=['width','height','padding','border','borderRadius','color','backgroundColor','outlineStyle','outlineOffset','transition','cursor','position','top','right','boxSizing','backgroundClip'];
check(keys.every(k=>normal.css[k]===reference.normal.css[k]),`${label}: HM normal X button CSS matches`,normal.css);
check(near(normal.box.width,28)&&near(normal.box.height,28)&&near(normal.svg?.box.width,16)&&near(normal.svg?.box.height,16)&&eq(normal.inset,reference.normal.inset)&&eq(normal.svg?.attrs,reference.normal.svg.attrs)&&eq(normal.svg?.paths,reference.normal.svg.paths),`${label}: HM X shape, stroke, size and inset match`,normal);
await page.locator(popupSelector).screenshot({path:path.join(output,`${item.name}-${width}-popup.png`)});
await page.screenshot({path:path.join(output,`${item.name}-${width}-context.png`)});
await page.locator(closeSelector).hover();await settle();const hover=await snapshot(closeSelector);
check(hover.css.backgroundColor===reference.hover.css.backgroundColor&&hover.css.color===reference.hover.css.color,`${label}: HM hover matches`,hover.css);
await page.mouse.move(0,0);await page.keyboard.press('Tab');await page.locator(closeSelector).focus();await settle();const focus=await snapshot(closeSelector);
check(focus.focusVisible&&focus.css.border===reference.focus.css.border&&focus.css.outlineStyle==='none'&&focus.css.boxShadow.includes('oklab(0.462622 -0.0726663 0.0150061 / 0.5) 0px 0px 0px 3px'),`${label}: HM focus ring matches`,focus.css);
// Compare the actual policies: Core retains the open dialog on backdrop;
// Radix HM Dialog closes it. Closing must restore the original shadow card.
const expectedOpen=item.kind==='Core native';await page.mouse.click(2,2);await settle();
check((await page.locator(popupSelector).count()>0)===expectedOpen,`${label}: existing outside-click policy retained`,{expected:expectedOpen?'stay open':'close'});
if(!expectedOpen){check(await trigger.evaluate(el=>el.getRootNode().activeElement===el),`${label}: outside-close restores employee focus`);await trigger.click();await page.locator(popupSelector).waitFor();await settle();}
await page.locator(closeSelector).click();await settle();
check(await page.locator(popupSelector).count()===0&&await trigger.evaluate(el=>el.getRootNode().activeElement===el),`${label}: X closes and returns focus`);
await trigger.focus();await page.keyboard.press('Enter');await page.locator(popupSelector).waitFor();await settle();
const reopened=await snapshot(closeSelector);check(reopened.employeeId===normal.employeeId&&reopened.content===normal.content,`${label}: reopen keeps selected employee/body data`);
await page.keyboard.press('Escape');await settle();check(await page.locator(popupSelector).count()===0&&await trigger.evaluate(el=>el.getRootNode().activeElement===el),`${label}: ESC closes and returns focus`);
if(item.vanilla)check(await page.evaluate(()=>!window.React&&[...document.querySelectorAll('script[src]')].every(s=>!/(?:react|storybook)/i.test(s.src))),`${label}: actual example runs without React`);
measurements.push({name:label,url:item.url,expectedOwner:item.kind,ownership,choice,normal,hover,focus});
}
const copied=[];for(const file of ['index.js','style.css']){const hash=async location=>createHash('sha256').update(await fs.readFile(location)).digest('hex');copied.push({file,core:await hash(`packages/org-chart/dist/${file}`),vanilla:await hash(`examples/org-chart/dist/assets/${file}`)});}
check(copied.every(item=>item.core===item.vanilla),'Actual Vanilla example JS/CSS are byte-identical to modified Core build',copied);
check(errors.length===0,'New console/page errors: zero',errors);
const result={startedAt,completedAt:new Date().toISOString(),browser:browser.version(),checks,measurements,copied,errors,pass:checks.filter(c=>c.status==='PASS').length,fail:checks.filter(c=>c.status==='FAIL').length};
await fs.writeFile(path.join(output,'result.json'),JSON.stringify(result,null,2));await browser.close();console.log(JSON.stringify({pass:result.pass,fail:result.fail,output}));if(result.fail)process.exitCode=1;
examples/org-chart/verify-p9-5.mjs
+126
View File
@@ -0,0 +1,126 @@
import fs from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9-5');
const phase = process.argv[2] ?? 'after';
const origin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6065';
await fs.mkdir(output, { recursive: true });
const browser = await launchChromium({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });
page.setDefaultTimeout(30000);
const errors = [], measurements = [], checks = [];
page.on('pageerror', error => errors.push(error.message));
page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
const settle = () => page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 12; i++) await new Promise(requestAnimationFrame); });
async function ready(count) {
await page.waitForFunction(count => {
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
return shadow && !shadow.querySelector('[aria-busy="true"]') && [...shadow.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet)
&& (count === undefined || shadow.querySelectorAll('.hm-orgchart-employee').length === count);
}, count, { timeout: 60000 });
await settle();
}
async function measure(name) {
const value = await page.evaluate(() => {
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
const viewport = shadow.querySelector('.hm-orgchart-viewport'), forest = shadow.querySelector('.hm-orgchart-forest');
const rect = element => { const r = element.getBoundingClientRect(); return { left:r.left,top:r.top,width:r.width,height:r.height,right:r.right,bottom:r.bottom }; };
const union = elements => {
const boxes = [...elements].filter(element => element.getClientRects().length && getComputedStyle(element).visibility !== 'hidden').map(rect).filter(r => r.width > 0 && r.height > 0);
if (!boxes.length) return null;
const left = Math.min(...boxes.map(r => r.left)), right = Math.max(...boxes.map(r => r.right));
const top = Math.min(...boxes.map(r => r.top)), bottom = Math.max(...boxes.map(r => r.bottom));
return { left,right,top,bottom,width:right-left,height:bottom-top };
};
const v = rect(viewport), f = rect(forest);
const content = { left:v.left+viewport.clientLeft,top:v.top+viewport.clientTop,width:viewport.clientWidth,height:viewport.clientHeight };
const cx = content.left + content.width/2, cy = content.top + content.height/2;
const trees = union(shadow.querySelectorAll('.hm-orgchart-tree'));
const visible = union(shadow.querySelectorAll('.hm-orgchart-organization'));
const error = bounds => bounds ? { x:(bounds.left+bounds.right)/2-cx,y:(bounds.top+bounds.bottom)/2-cy } : null;
return { wrapper:rect(shadow.querySelector('.hm-orgchart-expanded')),viewport:v,content,contentCenter:{x:cx,y:cy},forest:f,trees,visible,
error:{forest:error(f),trees:error(trees),visible:error(visible)},scale:Number(viewport.dataset.scale),x:Number(viewport.dataset.panX),y:Number(viewport.dataset.panY),
unscaledForest:{width:forest.offsetWidth,height:forest.offsetHeight},employees:shadow.querySelectorAll('.hm-orgchart-employee').length,
companies:shadow.querySelectorAll('.node[data-parent-id=""]').length,layout:shadow.querySelector('.hm-orgchart-expanded').dataset.autoLayout };
});
measurements.push({ name, ...value });
await fs.writeFile(path.join(output, `${phase}-progress.json`), JSON.stringify({ measurements,checks,errors }, null, 2));
return value;
}
const check = (pass, name, detail) => { checks.push({name,status:pass?'PASS':'FAIL',detail}); if (!pass) console.log('FAIL',name,JSON.stringify(detail)); };
const centered = (s, name, vertical = false) => check(Math.abs(s.error.visible.x) < 0.75 && (!vertical || Math.abs(s.error.visible.y) < 0.75), name, s.error);
async function select(label, option) {
await page.getByRole('combobox', { name:label, exact:true }).click();
await page.getByRole('option', { name:option, exact:true }).click(); await ready();
}
async function companies(names) {
await page.getByRole('button',{name:/^회사 선택/}).click();
const panel = page.getByRole('dialog',{name:'회사 선택',exact:true}); await panel.waitFor();
const all = panel.getByRole('checkbox',{name:'전체 선택',exact:true});
for (let i=0;i<2 && await all.getAttribute('aria-checked') !== 'false';i++) { await all.click(); await ready(); }
await ready(0);
if (names.length === 7) { await all.click(); await ready(140); await page.keyboard.press('Escape'); await panel.waitFor({state:'hidden'}); return; }
for (const name of names) { await panel.getByRole('checkbox',{name,exact:true}).click(); await ready(); }
await page.keyboard.press('Escape'); await panel.waitFor({state:'hidden'}); await ready();
}
async function count(count, total) {
await select('회사당 직원 수',`${count}명`);
const apply = page.getByRole('button',{name:'데이터 적용',exact:true}); if (await apply.isEnabled()) await apply.click(); await ready(total);
}
async function open() {
await page.goto(`${origin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
await page.getByRole('button',{name:/^회사 선택/}).waitFor(); await ready(140);
}
async function fit() { await page.getByRole('button',{name:'Fit to View',exact:true}).click(); await settle(); }
try {
await open(); const initial = await measure('initial-7x20-tb');
await page.screenshot({path:path.join(output,`${phase}-initial.png`),fullPage:true});
if (phase === 'after') { centered(initial,'Initial 7-company forest horizontally centered'); check(initial.scale === 1,'Initial oversized forest keeps 100% scale',initial.scale); }
for (const [companyNames, label] of [[['한맥기술'],'one'],[['한맥기술','삼안'],'two'],[['한맥기술','삼안','장헌산업','장헌','피티씨','한라','바론'],'seven']]) {
if (process.argv[3] && process.argv[3] !== label) continue;
for (const size of [20,100,300]) {
for (const [type,labelText] of [['tb','세로형 TB'],['lr','가로형 LR'],['hybrid','혼합형 Hybrid']]) {
await open(); await companies(companyNames); await count(size,companyNames.length*size);
await select('조직도 표시 유형',labelText);
const s = await measure(`${label}-${size}-${type}-auto`);
if (phase === 'after') { centered(s,`${label}/${size}/${type}: automatic horizontal center`); check(s.scale === 1,`${label}/${size}/${type}: no automatic shrink`,s.scale); }
await fit(); const fitted = await measure(`${label}-${size}-${type}-fit`);
if (phase === 'after') {
centered(fitted,`${label}/${size}/${type}: Fit center both axes`,true);
check(fitted.visible.left >= fitted.content.left+15 && fitted.visible.right <= fitted.content.left+fitted.content.width-15
&& fitted.visible.top >= fitted.content.top+15 && fitted.visible.bottom <= fitted.content.top+fitted.content.height-15,`${label}/${size}/${type}: Fit contains visible tree`,fitted.visible);
}
}
}
}
if (phase === 'after') {
// User Pan preservation across resize and deliberate content/layout changes.
await open(); await companies(['한맥기술']); await fit();
const viewport = page.locator('.hm-orgchart-viewport'); await viewport.scrollIntoViewIfNeeded(); await viewport.focus();
await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowUp'); await settle();
const panned = await measure('user-pan');
await page.setViewportSize({width:1280,height:1100}); await ready(); const resized = await measure('pan-resize');
await companies(['한맥기술','삼안']); const filtered = await measure('pan-company');
await count(100,200); const changed = await measure('pan-data');
await select('조직도 표시 유형','가로형 LR'); const switched = await measure('pan-layout');
for (const [name,s] of [['resize',resized],['company selection',filtered],['data',changed],['layout',switched]]) {
check(s.x===panned.x && s.y===panned.y && s.scale===panned.scale,`Manual Pan retained through ${name}`,{before:panned,after:s});
}
await fit(); centered(await measure('fit-after-pan'),'Explicit Fit restores center after user Pan',true);
for (const width of [390,768,1280,1440]) {
await page.setViewportSize({width,height:1100}); await open(); await companies(['한맥기술']);
centered(await measure(`width-${width}-initial`),`${width}px automatic horizontal center`);
await fit(); centered(await measure(`width-${width}-fit`),`${width}px Fit center`,true);
}
await page.setViewportSize({width:1440,height:1100}); await open(); await companies(['한맥기술']);
await fit(); await page.screenshot({path:path.join(output,'after-single-fit.png'),fullPage:true});
}
} catch(error) { check(false,'Measurement completed',{message:error.message,stack:error.stack}); }
check(errors.length===0,'Browser console/page errors zero',errors);
const result = {phase,origin,browser:browser.version(),measurements,checks,errors,pass:checks.filter(c=>c.status==='PASS').length,fail:checks.filter(c=>c.status==='FAIL').length};
await fs.writeFile(path.join(output,`${phase}.json`),JSON.stringify(result,null,2));
console.log(JSON.stringify({phase,measurements:measurements.length,pass:result.pass,fail:result.fail,initial:measurements[0],output:path.join(output,`${phase}.json`)}));
await browser.close(); if(result.fail) process.exitCode=1;
examples/org-chart/verify-p9.mjs
+251
View File
@@ -0,0 +1,251 @@
// P9 focused visual integration checks. Historical P7/P8 full suites stay unrun.
import fs from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { createHash } from 'node:crypto';
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p9');
const origin = (process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6061').replace(/\/$/, '');
const args = process.argv.slice(2), baselineMode = args.includes('--baseline');
const sections = args.flatMap((arg, index) => arg === '--section' ? (args[index + 1] ?? '').split(',') : arg.startsWith('--section=') ? arg.slice(10).split(',') : []).filter(Boolean);
const run = name => !sections.length || sections.includes(name);
const widths = args.filter(arg => arg.startsWith('--width=')).map(arg => Number(arg.slice(8)));
const suffix = (baselineMode ? '-baseline' : sections.length ? '-' + sections.join('-') : '') + (widths.length ? '-' + widths.join('-') : '');
const startedAt = new Date().toISOString(), results = [], measurements = [], errors = [];
await fs.mkdir(output, { recursive: true });
const persist = () => writeFileSync(path.join(output, `browser-progress${suffix}.json`), JSON.stringify({ startedAt, origin, baselineMode, sections, results, measurements, errors }, null, 2));
const check = (pass, name, detail) => {
results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) }); persist();
if (!pass) console.log('FAIL', name, JSON.stringify(detail));
};
const stories = {
overview: 'orgchart--logo-personnel-summary', department: 'orgchart--department-colors',
fixed: 'orgchart--full-composition', expanded: 'orgchart--expanded-org-chart',
};
const sizes = [{ width: 1920, height: 1080 }, { width: 1440, height: 900 }, { width: 390, height: 844 }];
const selectedSizes = sizes.filter(size => !widths.length || widths.includes(size.width));
const colors = { hanmac: '#cb2e28', saman: '#f08300', 'jangheon-industry': '#4580a6', jangheon: '#1d418d', ptc: '#84338e', halla: '#0068b7', baron: '#0c367f' };
const browser = await launchChromium({ headless: true });
const context = await browser.newContext({ viewport: sizes[1] });
context.on('page', target => {
target.on('pageerror', error => { errors.push({ type: 'pageerror', url: target.url(), message: error.message }); persist(); });
target.on('console', message => { if (message.type() === 'error') { errors.push({ type: 'console', url: target.url(), message: message.text(), location: message.location() }); persist(); } });
});
const page = await context.newPage();
page.setDefaultTimeout(20000);
let expectedHosts = 1;
async function settle() { await page.evaluate(async () => { await document.fonts.ready; for (let i = 0; i < 5; i++) await new Promise(resolve => requestAnimationFrame(resolve)); }); }
async function ready(requirePage = true) {
if (requirePage) await page.locator('.sb-page-title').waitFor();
await page.waitForFunction(expected => {
const hosts = [...document.querySelectorAll('.hm-orgchart-host,.hm-orgchart-component-host')];
return hosts.length === expected && hosts.every(host => host.shadowRoot && [...host.shadowRoot.querySelectorAll('link[rel="stylesheet"]')].every(link => link.sheet) && !host.shadowRoot.querySelector('[aria-busy="true"]') && [...host.shadowRoot.querySelectorAll('img')].every(image => image.complete));
}, expectedHosts);
await settle();
}
async function goto(name, size = sizes[1]) { expectedHosts = name === 'overview' ? 3 : 1; await page.setViewportSize(size); await page.goto(`${origin}/iframe.html?id=${stories[name]}&viewMode=story`); await ready(); }
async function capture(name, fullPage = true) { await page.screenshot({ path: path.join(output, name + '.png'), fullPage }); }
async function select(label, option) { await page.getByRole('combobox', { name: label, exact: true }).click(); await page.getByRole('option', { name: option, exact: true }).click(); await ready(); }
async function section(name, work) { if (!run(name)) return; try { await work(); } catch (error) { check(false, `${name}: runner completed`, { message: error.message, stack: error.stack }); } }
const equal = (a, b) => JSON.stringify(a) === JSON.stringify(b);
async function snapshot() {
return page.evaluate(async () => {
const shadows = [...document.querySelectorAll('.hm-orgchart-host,.hm-orgchart-component-host')].map(host => host.shadowRoot).filter(Boolean);
const all = selector => shadows.flatMap(shadow => [...shadow.querySelectorAll(selector)]);
const first = selector => all(selector)[0];
const rect = element => { if (!element) return null; const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
const properties = ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color', 'backgroundColor', 'backgroundImage', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderRadius', 'boxShadow', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'textAlign', 'whiteSpace', 'overflowWrap', 'verticalAlign'];
const style = (element, dimensions = false) => element ? Object.fromEntries([...properties, ...(dimensions ? ['width', 'height'] : [])].map(key => [key, getComputedStyle(element)[key]])) : null;
const table = first('.hm-orgchart-workdesk-position-table');
const summary = table ? {
title: first('.hm-orgchart-organization-totals-title')?.textContent,
rows: [...table.rows].map(row => [...row.cells].map(cell => ({ text: cell.textContent, tag: cell.tagName, scope: cell.getAttribute('scope'), position: cell.dataset.position ?? null, total: cell.dataset.totalCount ?? null }))),
styles: {
section: style(first('.hm-orgchart-organization-totals')),
title: style(first('.hm-orgchart-organization-totals-title'), true), frame: style(first('.hm-orgchart-workdesk-summary-frame'), true), table: style(table, true),
cells: [...table.rows].map(row => [...row.cells].map(cell => style(cell, true))),
},
footer: [...table.tFoot.rows[0].cells].slice(1).map(cell => Number(cell.textContent)),
body: [...table.tBodies[0].rows].map(row => [...row.cells].slice(1).map(cell => Number(cell.textContent))),
} : null;
const bar = first('.hm-orgchart-affiliation-bar');
const affiliation = bar ? {
items: [...bar.querySelectorAll('.hm-orgchart-affiliation-bar-item')].map(item => ({ id: item.dataset.affiliationId ?? 'total', count: item.dataset.employeeCount ?? item.dataset.totalCount, name: item.querySelector('dt')?.textContent, value: item.querySelector('dd')?.textContent })),
styles: { bar: style(bar), items: [...bar.querySelectorAll('.hm-orgchart-affiliation-bar-item')].map(item => ({ item: style(item), name: style(item.querySelector('dt')), value: style(item.querySelector('dd')), mark: style(item.querySelector('.hm-orgchart-affiliation-mark'), true), imageFit: item.querySelector('img') ? getComputedStyle(item.querySelector('img')).objectFit : null })) },
box: rect(bar),
} : null;
const wrapper = first('.hm-orgchart-composition'), stage = first('.hm-orgchart-stage');
const scale = Number(wrapper?.dataset.scale ?? 1), stageBox = rect(stage);
const round = value => Math.round(value * 20) / 20;
const fixed = stage ? {
scale, wrapper: rect(wrapper), stage: stageBox, baseWidth: stage.offsetWidth, baseHeight: stage.offsetHeight, matrix: getComputedStyle(stage).transform,
stageStyle: style(stage), background: getComputedStyle(wrapper).backgroundColor,
htmlHash: [...new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(stage.innerHTML)))].map(byte => byte.toString(16).padStart(2, '0')).join(''),
preflightElements: all('.hm-orgchart-stage .hm-orgchart-employee,.hm-orgchart-stage .hm-orgchart-organization-totals,.hm-orgchart-stage .hm-orgchart-organization-totals-title,.hm-orgchart-stage .hm-orgchart-workdesk-summary-frame,.hm-orgchart-stage .hm-orgchart-workdesk-position-table,.hm-orgchart-stage .hm-orgchart-workdesk-position-table th,.hm-orgchart-stage .hm-orgchart-workdesk-position-table td,.hm-orgchart-stage .hm-orgchart-affiliation-bar,.hm-orgchart-stage .hm-orgchart-affiliation-bar-list,.hm-orgchart-stage .hm-orgchart-affiliation-bar-item,.hm-orgchart-stage .hm-orgchart-affiliation-bar-item dt,.hm-orgchart-stage .hm-orgchart-affiliation-bar-item dd,.hm-orgchart-stage .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark').map(element => ({ className: element.className, text: element.textContent, style: Object.fromEntries(['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color', 'backgroundColor', 'backgroundImage', 'width', 'height', 'padding', 'border', 'borderRadius', 'boxShadow', 'textAlign', 'whiteSpace', 'gap', 'display', 'flexWrap', 'alignItems', 'justifyContent'].map(key => [key, getComputedStyle(element)[key]])) })),
invariants: all('.hm-orgchart-stage .hm-orgchart-employee,.hm-orgchart-stage .hm-orgchart-organization,.hm-orgchart-stage .hm-orgchart-organization-totals,.hm-orgchart-stage .hm-orgchart-affiliation-bar,.hm-orgchart-stage .hm-orgchart-workdesk-overlay').map(element => {
const r = rect(element); return { className: element.className, id: element.dataset.employeeId ?? element.dataset.organizationId ?? null, box: { x: round((r.x - stageBox.x) / scale), y: round((r.y - stageBox.y) / scale), width: round(r.width / scale), height: round(r.height / scale) }, style: style(element, true) };
}),
scroll: ['.hm-orgchart-shell', '.hm-orgchart-content', '.hm-orgchart-composition', '.hm-orgchart-viewport'].map(selector => {
const element = first(selector); if (!element) return { selector, missing: true };
const css = getComputedStyle(element); return { selector, left: element.scrollLeft, top: element.scrollTop, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth, scrollHeight: element.scrollHeight, clientHeight: element.clientHeight, overflowX: css.overflowX, overflowY: css.overflowY };
}),
} : null;
const logos = all('[data-component="Logo"] .hm-orgchart-affiliation-mark').map(mark => {
const img = mark.querySelector('img'); return { id: mark.dataset.affiliationId, available: mark.dataset.logoAvailable, box: rect(mark), loaded: Boolean(img?.complete && img.naturalWidth > 0), naturalWidth: img?.naturalWidth, naturalHeight: img?.naturalHeight, fit: img ? getComputedStyle(img).objectFit : null, style: style(mark) };
});
const department = first('[data-component="DepartmentColors"]');
const departments = department ? [...department.querySelectorAll('.hm-orgchart-color-preview')].map(row => ({
name: row.querySelector('.hm-orgchart-color-department-name').textContent, box: rect(row), preview: rect(row.querySelector('.hm-orgchart-preview-grid')),
swatches: [...row.querySelectorAll('[data-color-variable]')].map(swatch => ({ variable: swatch.dataset.colorVariable, property: swatch.dataset.cssProperty, value: swatch.parentElement.querySelector('.hm-orgchart-color-value').textContent })),
cards: [...row.querySelectorAll('.hm-orgchart-employee')].map(card => ({ kind: card.dataset.cardKind, width: card.offsetWidth, height: card.offsetHeight, box: rect(card), font: getComputedStyle(card).fontFamily, asset: card.dataset.cardAssetSize })),
})) : null;
const viewport = first('.hm-orgchart-expanded .hm-orgchart-viewport'), forest = first('.hm-orgchart-forest');
const expanded = first('.hm-orgchart-expanded');
const hex = color => color.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, (_, r, g, b) => '#' + [r, g, b].map(x => Number(x).toString(16).padStart(2, '0')).join(''));
const auto = expanded ? {
type: expanded.dataset.autoLayout, viewport: rect(viewport), forest: rect(forest), employees: expanded.querySelectorAll('.hm-orgchart-employee').length,
titles: [...expanded.querySelectorAll('.node[data-company-id]')].map(node => { const title = node.querySelector('.hm-orgchart-organization-name'), toggle = node.querySelector('.hm-orgchart-expanded-toggle'); return { company: node.dataset.companyId, color: hex(getComputedStyle(title).color), buttonColor: hex(getComputedStyle(toggle).color), background: hex(getComputedStyle(title).backgroundColor) }; }),
cards: [...expanded.querySelectorAll('.hm-orgchart-employee')].map(card => { const css = getComputedStyle(card), direction = card.dataset.connectionDirection; return { company: card.dataset.companyId, direction, width: card.offsetWidth, height: card.offsetHeight, border: hex(css[direction === 'left' ? 'borderLeftColor' : direction === 'right' ? 'borderRightColor' : 'borderTopColor']), image: Boolean(card.querySelector('img')) }; }),
connectors: expanded.querySelectorAll('svg,.edge,.lines').length,
} : null;
const common = Object.fromEntries(['.sb-page-title', '.sb-page-description', '.sb-page-section-title', '.sb-page-section-header'].map(selector => [selector, style(document.querySelector(selector))]));
return { title: document.querySelector('.sb-page-title')?.textContent, titles: [...document.querySelectorAll('.sb-page-section-title')].map(element => element.textContent), document: { width: innerWidth, scrollWidth: document.documentElement.scrollWidth, scrollHeight: document.documentElement.scrollHeight, clientHeight: document.documentElement.clientHeight }, common, summary, affiliation, logos, departments, fixed, auto };
});
}
function noHorizontalOverflow(state) { return state.document.scrollWidth <= state.document.width + 1; }
function contains(outer, inner, tolerance = 1) { return outer && inner && inner.x >= outer.x - tolerance && inner.y >= outer.y - tolerance && inner.right <= outer.right + tolerance && inner.bottom <= outer.bottom + tolerance; }
function fitted(state) { return state.auto && contains(state.auto.viewport, state.auto.forest, 2); }
function affiliationStyles(styles) {
// Overview's permitted wrapping uses vertical content padding rather than a
// fixed 55.4px bar height. Every item/typography/logo style remains shared.
return { ...styles, bar: Object.fromEntries(Object.entries(styles.bar).filter(([key]) => !['paddingTop', 'paddingBottom'].includes(key))) };
}
function sourceInvariant(fixed) { return { width: fixed.baseWidth, height: fixed.baseHeight, style: fixed.stageStyle, contents: fixed.invariants }; }
function geometryNear(a, b) {
if (!a || !b || a.width !== b.width || a.height !== b.height || !equal(a.style, b.style) || a.contents.length !== b.contents.length) return false;
return a.contents.every((item, index) => { const other = b.contents[index]; return item.className === other.className && item.id === other.id && equal(item.style, other.style) && Object.keys(item.box).every(key => Math.abs(item.box[key] - other.box[key]) <= 0.1); });
}
try {
if (baselineMode) {
const snapshots = {};
for (const name of ['overview', 'department', 'fixed']) { await goto(name); snapshots[name] = await snapshot(); await capture(`baseline-${name}-1440`); }
check(Boolean(snapshots.fixed.summary && snapshots.fixed.affiliation && snapshots.fixed.fixed), 'Baseline: Fixed shared presenters and geometry captured');
await fs.writeFile(path.join(output, 'visual-baseline.json'), JSON.stringify({ startedAt, completedAt: new Date().toISOString(), origin, viewport: sizes[1], snapshots }, null, 2));
} else {
const baselinePath = await fs.access(path.join(output, 'preflight.json')).then(() => 'preflight.json', () => 'visual-baseline.json');
const baseline = JSON.parse(await fs.readFile(path.join(output, baselinePath), 'utf8'));
const preflightFixed = baselinePath === 'preflight.json' ? baseline.snapshots.fixed[0] : null;
const preflightHash = preflightFixed ? createHash('sha256').update(preflightFixed.stage.html).digest('hex') : null;
await goto('fixed'); const reference = await snapshot();
await section('overview', async () => {
for (const size of selectedSizes) {
await goto('overview', size); const state = await snapshot(); measurements.push({ name: `Overview ${size.width}`, state });
check(equal(state.titles, ['관계사·회사 로고', '조직·직위별 인원 현황', '관계사별 인원 현황']), `Overview ${size.width}: exact three confirmed section titles`, state.titles);
check(Boolean(state.summary) && equal(state.summary.rows, reference.summary.rows), `Overview ${size.width}: table rows, positions and totals equal Fixed`, state.summary?.rows);
check(Boolean(state.summary) && equal(state.summary.styles, reference.summary.styles), `Overview ${size.width}: table, heading, cells, borders and font reuse Fixed computed styles`, { overview: state.summary?.styles, fixed: reference.summary.styles });
check(Boolean(state.summary) && state.summary.footer.every(Number.isFinite) && state.summary.footer.slice(0, -1).reduce((a, b) => a + b, 0) === state.summary.footer.at(-1) && state.summary.body.every(row => row.slice(0, -1).reduce((a, b) => a + b, 0) === row.at(-1)), `Overview ${size.width}: numeric position sums and row subtotals reconcile`, { footer: state.summary?.footer, body: state.summary?.body });
check(Boolean(state.affiliation) && equal(state.affiliation.items, reference.affiliation.items) && equal(affiliationStyles(state.affiliation.styles), affiliationStyles(reference.affiliation.styles)), `Overview ${size.width}: affiliation data, typography, logos, border and background reuse Fixed`, { overview: state.affiliation, fixed: reference.affiliation });
const previewBox = await page.locator('.sb-page-section').last().locator('.sb-page-section-body').boundingBox();
check(state.affiliation?.box.x >= previewBox.x - 1 && state.affiliation.box.right <= previewBox.x + previewBox.width + 1 && state.affiliation.box.y >= previewBox.y - 1 && state.affiliation.box.bottom <= previewBox.y + previewBox.height + 1, `Overview ${size.width}: complete affiliation bar is contained in page flow`, { bar: state.affiliation?.box, preview: previewBox });
check(state.logos.length === 7 && state.logos.every(logo => logo.available === 'true' && logo.loaded && logo.fit === 'contain' && logo.naturalWidth > 0 && logo.naturalHeight > 0), `Overview ${size.width}: seven approved logos loaded with preserved contain sizing`, state.logos);
check(noHorizontalOverflow(state), `Overview ${size.width}: no document horizontal overflow`, state.document);
check(equal(state.common, reference.common), `Overview ${size.width}: common StoryPage typography and border remain identical`);
await capture(`overview-${size.width}`);
}
});
await section('department', async () => {
for (const size of selectedSizes) {
await goto('department', size); const state = await snapshot(); measurements.push({ name: `Department ${size.width}`, state });
check(state.departments?.length === 6 && state.departments.every(row => row.swatches.every(swatch => /#[0-9a-f]{6}/i.test(swatch.value))), `Department ${size.width}: six preserved organization color previews have computed HEX values`, state.departments?.map(row => ({ name: row.name, values: row.swatches })));
check(state.departments?.every(row => row.cards.every(card => card.width === (card.kind === 'employee' ? 108 : 146) && card.height === (card.kind === 'employee' ? 52 : 68) && card.font.includes('Noto Sans KR') && contains(row.box, card.box))), `Department ${size.width}: original card geometry, font and containment`, state.departments?.map(row => ({ name: row.name, cards: row.cards })));
check(noHorizontalOverflow(state) && equal(state.common, reference.common), `Department ${size.width}: responsive page retains shared frame styles`, state.document);
check(state.departments?.every((row, index, rows) => rows.every((other, otherIndex) => otherIndex === index || Math.abs(row.box.y - other.box.y) > 1 || Math.abs(row.preview.y - other.preview.y) <= 1)), `Department ${size.width}: card-preview starts align across each shared row`, state.departments?.map(row => ({ name: row.name, rowY: row.box.y, previewY: row.preview.y })));
measurements.push({ name: `Department ${size.width} card-preview alignment`, previews: state.departments?.map(row => ({ name: row.name, row: row.box, preview: row.preview })) });
await capture(`department-colors-${size.width}`);
}
});
await section('fixed', async () => {
for (const size of selectedSizes) {
await goto('fixed', size); const before = await snapshot();
await page.locator('.hm-orgchart-composition').scrollIntoViewIfNeeded();
const box = await page.locator('.hm-orgchart-composition').boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + Math.min(30, box.height / 2)); await page.mouse.wheel(80, 80); await settle();
const state = await snapshot(), fixed = state.fixed; measurements.push({ name: `Fixed ${size.width}`, state });
const matrix = fixed.matrix.match(/matrix\(([^)]+)\)/)?.[1].split(',').map(Number);
check(fixed.scale > 0 && fixed.scale <= 1 && matrix && Math.abs(matrix[0] - matrix[3]) < 0.0001 && contains(fixed.wrapper, fixed.stage) && fixed.invariants.every(item => item.box.x >= -1 && item.box.y >= -1 && item.box.x + item.box.width <= fixed.baseWidth + 1 && item.box.y + item.box.height <= fixed.baseHeight + 1), `Fixed ${size.width}: complete chart bounds and proportional fit`, { scale: fixed.scale, matrix, wrapper: fixed.wrapper, stage: fixed.stage });
check(fixed.scroll.every(item => item.missing || (item.left === 0 && item.top === 0 && (item.overflowX === 'hidden' || item.scrollWidth <= item.clientWidth + 1) && (item.overflowY === 'hidden' || item.scrollHeight <= item.clientHeight + 1))), `Fixed ${size.width}: no actual internal scroll after wheel`, { before: before.fixed.scroll, after: fixed.scroll });
const preserved = preflightFixed ? fixed.baseWidth === preflightFixed.stage.width && fixed.baseHeight === preflightFixed.stage.height && equal(fixed.preflightElements, preflightFixed.elements) && fixed.htmlHash === preflightHash : geometryNear(sourceInvariant(fixed), sourceInvariant(baseline.snapshots.fixed.fixed)) && equal(state.summary, baseline.snapshots.fixed.summary) && equal(state.affiliation.items, baseline.snapshots.fixed.affiliation.items) && equal(state.affiliation.styles, baseline.snapshots.fixed.affiliation.styles);
check(preserved, `Fixed ${size.width}: baseline card/layout and summary styling preserved`, { baseline: baselinePath, naturalWidth: fixed.baseWidth, naturalHeight: fixed.baseHeight, baselineElementCount: preflightFixed?.elements.length, elementCount: fixed.preflightElements.length, computedStylesEqual: preflightFixed ? equal(fixed.preflightElements, preflightFixed.elements) : undefined, stageDOMHashEqual: preflightFixed ? fixed.htmlHash === preflightHash : undefined });
check(noHorizontalOverflow(state), `Fixed ${size.width}: no document horizontal overflow`, state.document);
await page.evaluate(() => scrollTo(0, 0)); await capture(`full-composition-${size.width}`);
}
});
await section('expanded', async () => {
for (const size of selectedSizes) {
await goto('expanded', size);
for (const [option, type] of [['세로형 TB', 'tb'], ['가로형 LR', 'lr'], ['혼합형 Hybrid', 'hybrid']]) {
if (type !== 'tb') await select('조직도 표시 유형', option);
const state = await snapshot(); measurements.push({ name: `Expanded ${type} ${size.width}`, state });
check(state.auto?.type === type && state.auto.employees === 20 && fitted(state) && noHorizontalOverflow(state), `Expanded ${type} ${size.width}: representative layout renders unchanged sample and Fits`, state.auto);
check(state.auto?.titles.length > 0 && state.auto.titles.every(title => title.color === '#ffffff' && title.buttonColor === '#ffffff' && title.background === colors[title.company]) && new Set(state.auto.titles.map(title => title.company)).size === 7, `Expanded ${type} ${size.width}: all company title backgrounds and white text preserved`, state.auto?.titles);
check(state.auto?.cards.every(card => card.border === colors[card.company] && ['top', 'left', 'right'].includes(card.direction)) && state.auto.connectors > 0, `Expanded ${type} ${size.width}: company colored directional borders and connectors`, state.auto?.cards);
await capture(`expanded-${type}-${size.width}`);
}
}
if (!widths.length) {
await goto('expanded');
const toggle = page.locator('.hm-orgchart-expanded-toggle:not(:disabled)').first(), id = await toggle.getAttribute('data-organization-id');
await toggle.hover(); check(await toggle.evaluate(element => getComputedStyle(element).color) === 'rgb(255, 255, 255)', 'Expanded: hover title remains white');
await toggle.focus(); check(await toggle.evaluate(element => getComputedStyle(element).color) === 'rgb(255, 255, 255)', 'Expanded: focus title remains white');
await toggle.press('Enter'); await ready();
const current = () => page.locator(`.hm-orgchart-expanded-toggle[data-organization-id="${id}"]`);
check(await current().getAttribute('aria-expanded') === 'false' && await current().evaluate(element => getComputedStyle(element).color) === 'rgb(255, 255, 255)', 'Expanded: collapsed title remains white');
await current().press('Space'); await ready();
check(await current().getAttribute('aria-expanded') === 'true' && await current().evaluate(element => getComputedStyle(element).color) === 'rgb(255, 255, 255)', 'Expanded: expanded title remains white');
}
});
await section('dialog', async () => {
for (const size of [sizes[1], sizes[2]]) {
await goto('expanded', size);
const employee = page.locator('.hm-orgchart-employee').first(), employeeId = await employee.getAttribute('data-employee-id');
await employee.click(); const dialog = page.locator('[data-component="HMOrgChartEmployeeDialog"]'); await dialog.waitFor({ state: 'visible' }); await settle();
const state = await dialog.evaluate(element => { const r = element.getBoundingClientRect(); return { role: element.getAttribute('role'), employeeId: element.dataset.employeeId, portal: element.parentElement === document.body, focusInside: element.contains(document.activeElement), x: r.x, right: r.right, width: r.width, scrollWidth: element.scrollWidth, clientWidth: element.clientWidth }; });
check(state.role === 'dialog' && state.employeeId === employeeId && state.portal && state.focusInside && await page.getByRole('dialog').count() === 1 && await page.locator('dialog[open]').count() === 0 && state.x >= -1 && state.right <= size.width + 1 && state.scrollWidth <= state.clientWidth + 1, `HM Dialog ${size.width}: actual single HM Portal, identity, focus and responsive bounds`, state);
await page.keyboard.press('Tab'); await page.keyboard.press('Shift+Tab'); check(await dialog.evaluate(element => element.contains(document.activeElement)), `HM Dialog ${size.width}: Tab focus remains inside`);
await capture(`hm-dialog-${size.width}`, false);
const focusedEmployee = () => page.evaluate(() => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId);
await page.keyboard.press('Escape'); await dialog.waitFor({ state: 'hidden' }); await settle(); check(await focusedEmployee() === employeeId, `HM Dialog ${size.width}: ESC returns focus to source card`);
await employee.press('Enter'); await dialog.waitFor({ state: 'visible' }); await dialog.getByRole('button', { name: '닫기', exact: true }).click(); await dialog.waitFor({ state: 'hidden' }); await settle(); check(await focusedEmployee() === employeeId, `HM Dialog ${size.width}: close button returns focus to source card`);
}
});
await section('menu', async () => {
const response = await page.request.get(`${origin}/index.json`), index = await response.json();
const entries = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title.startsWith('OrgChart/') && !(entry.tags ?? []).includes('internal'));
check(entries.length === 4 && equal(entries.map(entry => entry.id).sort(), Object.values(stories).sort()), 'Storybook: exactly four public OrgChart pages and all retained IDs', entries.map(entry => ({ id: entry.id, title: entry.title })));
});
await section('independent', async () => {
expectedHosts = 1; await page.setViewportSize(sizes[1]);
for (const [id, kind] of [['orgchart--position-summary', 'PositionSummary'], ['orgchart--affiliation-summary', 'AffiliationSummary']]) {
await page.goto(`${origin}/iframe.html?id=${id}&viewMode=story`); await ready(false);
const state = await page.evaluate(kind => {
const shadow = document.querySelector('.hm-orgchart-component-host').shadowRoot, root = shadow.querySelector(`[data-component="${kind}"]`);
return { kind, rootClass: root.className, total: root.querySelector('.hm-orgchart-raw-total')?.textContent, header: [...root.querySelectorAll('thead th')].map(element => element.textContent), footer: root.querySelector('tfoot')?.textContent, affiliationItems: root.querySelectorAll('.hm-orgchart-affiliation-item').length, workdeskPresenters: shadow.querySelectorAll('.hm-orgchart-workdesk-position-table,.hm-orgchart-affiliation-bar,.hm-orgchart-summary-preview').length };
}, kind);
check(state.workdeskPresenters === 0 && state.total?.includes('41') && (kind === 'PositionSummary' ? state.rootClass.includes('hm-orgchart-position-summary') && state.header.includes('소계 (직접)') && state.header.includes('하위 포함') && state.footer.includes('전체 합계') : state.rootClass === 'hm-orgchart-affiliation-summary' && state.affiliationItems === 7), `Independent ${kind}: default presenter and aggregation contract preserved`, state);
}
});
}
} catch (error) { check(false, 'P9 runner completed', { message: error.message, stack: error.stack }); }
finally {
check(errors.length === 0, 'No new browser console or page errors', errors);
const result = { startedAt, completedAt: new Date().toISOString(), origin, baselineMode, sections, widths, browser: browser.version(), results, measurements, errors, pass: results.filter(item => item.status === 'PASS').length, fail: results.filter(item => item.status === 'FAIL').length,
limitations: ['Focused P9 verification only; historical P7/P8 full suites and 2,100 employee tests were not repeated.', 'Shared computed styles demonstrate runtime reuse; CSS design intent approval and original Guard NOT VERIFIED remain separate.', 'StoryPage document vertical scroll is distinct from chart internal scrolling.', 'White text company colors remain approved; Saman and Jangheon Industry contrast remains a recorded accessibility issue.', 'Other browsers, physical devices, screen readers, SSR and deployment remain NOT VERIFIED.'] };
await fs.writeFile(path.join(output, `browser${suffix}.json`), JSON.stringify(result, null, 2));
console.log(JSON.stringify({ pass: result.pass, fail: result.fail, errors: errors.length, output: `test-results/org-chart-p9/browser${suffix}.json` }));
await context.close(); await browser.close(); if (result.fail) process.exitCode = 1;
}
package-lock.json
Generated
+7 -1
View File
@@ -10709,7 +10709,13 @@
"@hm-design/org-chart": "0.1.0"
},
"peerDependencies": {
"react": "^19.0.0"
"react": "^19.0.0",
"@hm-design/ui": "0.1.0"
},
"peerDependenciesMeta": {
"@hm-design/ui": {
"optional": true
}
}
},
"packages/ui": {
packages/org-chart-react/README.md
+18 -5
View File
@@ -1,6 +1,6 @@
# @hm-design/org-chart-react v0.1
React 19 lifecycle adapter for `@hm-design/org-chart@0.1.0`. The wrapper renders one empty host container and delegates all organization DOM, engine work, validation, summaries, interactions and Shadow DOM styles to the existing Vanilla Core. It has no navigation, page layout, fetch client or separate node design.
React 19 lifecycle adapter for `@hm-design/org-chart@0.1.0`. The wrapper delegates organization DOM, engine work, validation, summaries, interactions and Shadow DOM styles to the existing Vanilla Core. Auto can optionally show employee information with the public HM Dialog in a separate React Portal. It has no navigation, page layout, fetch client or separate node design.
## Usage
@@ -33,7 +33,7 @@ export function OrganizationContent({ data }: { data: OrgChartDataset }) {
}
```
The `?url` imports above are Vite asset imports, not a universal browser feature. Other hosts resolve the two Core public CSS entries to actual deployment URLs. Importing CSS only into the document does not style the Core's Shadow DOM. Engine CSS is linked first, then standalone Core CSS. P1 owns its colors, typography and geometry without depending on HM Theme. Set public `--hm-orgchart-*` properties on the wrapper container to override only this instance. No HM common variables are redefined. The wrapper does not depend on `@hm-design/ui`; P3 adds lookup Props without replacing the Core renderer. For independent Tree/Summary integration, use the [Core factories](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/standalone-components-p1.md) in a ref/effect without copying their UI.
The `?url` imports above are Vite asset imports, not a universal browser feature. Other hosts resolve the two Core public CSS entries to actual deployment URLs. Importing CSS only into the document does not style the Core's Shadow DOM. Engine CSS is linked first, then standalone Core CSS. P1 owns its colors, typography and geometry without depending on HM Theme. Set public `--hm-orgchart-*` properties on the wrapper container to override only this instance. No HM common variables are redefined. Default Core rendering does not load `@hm-design/ui`; opting into `employeePopup="hm-dialog"` loads the optional peer and requires the consumer's HM Theme CSS. Bundlers may resolve that optional dynamic chunk during a build even for a default consumer. For independent Tree/Summary integration, use the [Core factories](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/standalone-components-p1.md) in a ref/effect without copying their UI.
## Public API
@@ -52,9 +52,13 @@ Keyboard focus reveals offscreen controls at the current Zoom; group-title Hover
feedback and drag/keyboard activation are implemented in the shared Core.
- Optional `companyId`: legacy Auto fallback company preset (default `hanmac`). Explicit/inherited organization company identity takes priority; Fixed ignores company colors. Changing it recreates the handle. See [Core README](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/packages/org-chart/README.md).
- Optional `selectedCompanyIds`: undefined selects all, [] selects none. Changes call Core selection on the existing instance, preserving per-company collapse state and source counts.
- Optional `autoLayout`: `{ type: 'tb' | 'lr' | 'hybrid', hybridStartDepth: 2 | 3 | 4, initialVisibleDepth: 1 | 2 | 3 | 'all', hybridOrganizationIds?: readonly string[] }` (each field optional). Changes use Core `setAutoLayout` on the existing instance; TB/LR/Hybrid changes retain valid collapse state. Per-group hybrid IDs apply only to TB; clear them when selecting LR/global Hybrid. Omission follows Core defaults (TB, Hybrid depth 3, all visible).
- Optional `interactions`: `{ collapse?: boolean, zoom?: boolean, pan?: boolean }`, all enabled by default. Auto independently enables/disables group toggles, Zoom controls/wheel Zoom and drag Pan via Core `setInteractions` on the same instance. Omitted fields are enabled, and removing the prop restores all three defaults. Existing collapse and viewport state remain; TB/LR/Hybrid has no interaction prerequisite. Fixed ignores this option and keeps its existing behavior.
- Optional `employeePopup`: `'core'` (default), `'hm-dialog'`, or `'none'`. Applies only to Auto; Fixed retains its existing Core popup. HM Dialog requires the optional `@hm-design/ui@0.1.0` peer and the consumer's real HM Theme/Tailwind CSS entry. It is loaded lazily so default/Core-only consumers do not load HM UI. An explicit `onEmployeeClick` always takes precedence and suppresses either default popup. HM popup state closes on source/company changes and resolves the employee's replacement card in the original ShadowRoot when returning focus after a layout render. Auto uses Core `setEmployeeClickHandler` to change popup ownership on the same instance, retaining company selection, layout, collapse and viewport state.
- Optional `companyTopNodes`, `employeeConnections`, `zoom`: immutable Core configuration maps/range. Identity changes recreate the handle; memoize these objects. Names, positions and profile overrides affect only Auto presentation, not callback data.
- Optional `organizationLinks`: existing organization-ID-to-URL map, applied only to original 1Depth titles. Missing/blank values retain plain titles. Core validates HTTP(S)/relative URLs and rejects invalid URLs, other schemes and credentials. Treat the map as immutable and memoize it; a new map recreates the handle.
- Optional `onEmployeeClick(employee, context)`: host-owned information UI, replacing the Core's built-in popup. `context` contains the existing `organization`, `affiliation`, focusable `trigger` card and `originalEvent`. It works in both modes and receives untouched Employee data.
- Optional `onMove(result: OrgChartMoveResult)`: latest committed callback receives Auto employee/group move outcomes (`moved` distinguishes success from rejection). Successful moves close an open HM employee Dialog, so its employee context cannot become stale. Changing this callback does not recreate or reload Core. Movement changes the Core's in-memory snapshot; no fixture or server is written.
- Optional `aggregationPolicy`: the Core's `ApprovedAggregationPolicy`.
- Optional `className` and `style`: applied only to React's outer container.
- Optional `onStateChange(state: OrgChartState)`: latest committed callback receives actual Core state changes.
@@ -62,7 +66,7 @@ feedback and drag/keyboard activation are implemented in the shared Core.
The container is owned by React; its dedicated children are owned by Core. There are no React children, imperative handle, title, employee or engine manipulation Props. Titles, descriptions, presentation groups, organization order and metadata use the common data contract. An omitted lifecycle error callback leaves unexpected operation errors handled but does not produce a second error UI or console log. Consumer state callback errors follow the Core's isolation behavior; lifecycle error callback exceptions are also contained.
Without `onEmployeeClick`, all employee cards open the same Core read-only information dialog on click, Enter or Space. It uses only existing employee/organization/affiliation fields and omits missing values. readOnly names match the displayed `홍 길 동` card while source data remains unchanged. The native modal sits outside the scaled Stage and supports Close, ESC, focus trapping and return to the card. Group-link events remain separate; a visible name tooltip closes before popup activation. A custom callback owns its popup's accessibility and cleanup.
Without `onEmployeeClick`, employee cards follow `employeePopup` in Auto: Core read-only information dialog (default), public HM Dialog, or no popup. Fixed always retains the Core popup. Both dialogs use only existing employee/organization/affiliation fields and omit missing values. Core readOnly names match the displayed card while source data remains unchanged; HM Dialog shows source employee data. The native modal sits outside the scaled Stage and HM Dialog uses a React Portal; both support Close, ESC, focus trapping and return to the card. Group-link events remain separate; a visible name tooltip closes before popup activation. A custom callback owns its popup's accessibility and cleanup.
```tsx
<OrgChart
@@ -78,11 +82,20 @@ Both map and popup function above are supplied by the host; no real destination
## Lifecycle and updates
P9.4 adds `dragDropEnabled?: boolean` (default `false`) for Auto. Pass `true` to
enable employee/group pointer, keyboard and public Core moves. Changing this prop
calls the shared Core `setDragDropEnabled` synchronously on the existing handle;
it neither remounts nor reloads the source. Switching OFF cancels active movement,
clears highlights and retains completed moves, popup, collapse and viewport state.
Pan/Zoom/Fit remain independent. Fixed ignores the prop.
Mount creates one new Core handle, subscribes to its state and calls `mount(container)`. Mount already loads the source; the wrapper does not perform an additional initial reload. The wrapper does not synthesize `idle`, `destroyed` or `empty` callbacks. Current Core emits `loading`, then `ready`/`error`; employees `[]` is ready, organizations `[]` is error. An `empty` type member does not establish a supported Empty State.
A new `dataSource` object triggers the existing handle's `reload(nextSource)`. This starts Core's latest revision and aborts or ignores older responses. Updating fields inside the same source object is not a reload signal. `JsonOrgChartDataSource` captures inline input at its construction; create a new source for a new immutable snapshot. Memoize sources rather than constructing one on every render.
Changing callback identity updates the latest committed callback without reload or recreation. Adding/removing `onEmployeeClick` switches built-in/custom popup ownership and recreates the handle. Abandoned concurrent renders do not update callbacks. Policy or `organizationLinks` identity changes, displayMode changes, or either stylesheet URL string value changes dispose the previous handle and create a new one because the Core offers no configuration setter. Replacing the stylesheet URL object with the same two strings does not recreate. Treat policy and link-map objects as immutable and memoize them; changing an object internally is not a configuration update signal.
Changing callback identity updates the latest committed callback without reload or recreation. In Auto, adding/removing `onEmployeeClick` or changing `employeePopup` updates Core's employee handler without replacing the handle. Fixed retains its original ownership policy: adding/removing `onEmployeeClick` recreates the handle. Abandoned concurrent renders do not update callbacks. Policy or `organizationLinks` identity changes, displayMode changes, or either stylesheet URL string value changes dispose the previous handle and create a new one because these settings have no Core setter. Replacing the stylesheet URL object with the same two strings does not recreate. Treat policy and link-map objects as immutable and memoize them; changing an object internally is not a configuration update signal.
Auto separates blank-space Pan from employee-card/group-title movement. Click continues to open employee information or toggle a group; employees and groups may move within or across companies. Employee moves update `organizationId`; group moves update `parentId` and retain the subtree and IDs. Within-company moves preserve existing affiliations, including dispatched employees. Cross-company employee moves additionally update `affiliationId` to the target company; cross-company group moves update the moved group's and every descendant's `companyId` and their employees' `affiliationId`. The target company controls colors and counts; leaders and company roots remain protected. Focus a card/title and press Alt+M to begin keyboard movement, arrow keys to choose a target, Enter to confirm, or ESC to cancel. Employee cards retain a keyboard focus entry point when `employeePopup="none"`. Fixed has no movement editing.
Cleanup invalidates the wrapper generation, unsubscribes, calls Core's terminal `destroy()` and clears its handle reference. React Strict Mode's setup → cleanup → setup uses a fresh handle. Old generations cannot deliver state/lifecycle callbacks to the new instance; superseded operation rejection handlers are also ignored. Cleanup runs before replacement, leaving at most one active Core per wrapper container. The wrapper does not repeat engine disposal or DOM removal itself.
@@ -92,7 +105,7 @@ Committed callback publication, Core ownership and source updates use layout eff
## Package boundary and verification limits
The build emits ESM `dist/index.js` plus TypeScript declarations, preserves the `"use client"` boundary and leaves React (including `react/jsx-runtime`) and `@hm-design/org-chart` external. React is a `^19.0.0` peer, matching the repository's existing React package convention; Core `0.1.0` is a runtime dependency. React DOM is supplied by the consuming app and is not imported by this package. Core must be built before wrapper typecheck/build in this workspace because dependency resolution uses its public declarations.
The build emits ESM `dist/index.js`, a lazy HM Dialog chunk, and TypeScript declarations. It preserves the `"use client"` boundary and leaves React (including `react/jsx-runtime`), `@hm-design/org-chart`, and optional `@hm-design/ui` external. React is a `^19.0.0` peer, matching the repository's existing React package convention; Core `0.1.0` is a runtime dependency. React DOM is supplied by the consuming app and is not imported by this package. Core must be built before wrapper typecheck/build in this workspace because dependency resolution uses its public declarations.
From the repository root:
packages/org-chart-react/package.json
+2 -1
View File
@@ -20,5 +20,6 @@
"prepack": "npm run build"
},
"dependencies": { "@hm-design/org-chart": "0.1.0" },
"peerDependencies": { "react": "^19.0.0" }
"peerDependencies": { "react": "^19.0.0", "@hm-design/ui": "0.1.0" },
"peerDependenciesMeta": { "@hm-design/ui": { "optional": true } }
}
packages/org-chart-react/src/HMEmployeeDialog.tsx
+82
View File
@@ -0,0 +1,82 @@
"use client";
import { useLayoutEffect, useRef } from 'react';
import {
Avatar, AvatarFallback, AvatarImage, Button, Dialog, DialogBody, DialogClose,
DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from '@hm-design/ui';
import type { Employee, OrgChartEmployeeClickContext } from '@hm-design/org-chart';
export interface EmployeeDialogSelection {
employee: Employee;
context: OrgChartEmployeeClickContext;
}
const statusNames = { active: '재직', dispatched: '파견', onLeave: '휴직' } as const;
/** Lazy React-only adapter. The Core and Vanilla remain independent of HM UI. */
export default function HMEmployeeDialog({ selection, onClose }: {
selection: EmployeeDialogSelection | null;
onClose: () => void;
}) {
const returnTarget = useRef<EmployeeDialogSelection | null>(null);
const returnRoot = useRef<ShadowRoot | null>(null);
const returnContainer = useRef<HTMLElement | null>(null);
useLayoutEffect(() => {
if (!selection) return;
returnTarget.current = selection;
const root = selection.context.trigger.getRootNode();
const Shadow = selection.context.trigger.ownerDocument.defaultView?.ShadowRoot;
returnRoot.current = Shadow && root instanceof Shadow ? root : null;
returnContainer.current = returnRoot.current?.host.parentElement ?? null;
}, [selection]);
function restoreFocus(event: Event) {
event.preventDefault();
const previous = returnTarget.current;
returnTarget.current = null;
if (!previous) return;
const { trigger } = previous.context;
// A mode/selection render can replace the card while the Portal is open.
// Retain its ShadowRoot before replacement and resolve the same employee.
const shadow = returnRoot.current;
const currentRoot = shadow?.host.isConnected ? shadow : returnContainer.current?.firstElementChild?.shadowRoot;
const replacement = [...currentRoot?.querySelectorAll<HTMLElement>('.hm-orgchart-employee') ?? []]
.find(card => card.dataset.employeeId === previous.employee.id);
const target = trigger.isConnected ? trigger : replacement
?? currentRoot?.querySelector<HTMLElement>('.hm-orgchart-shell');
target?.focus({ preventScroll: true });
}
const displayed = selection ?? returnTarget.current;
const employee = displayed?.employee;
const context = displayed?.context;
const image = employee?.profileImage
?? context?.trigger.querySelector<HTMLImageElement>('.hm-orgchart-avatar img')?.src;
const fields: [string, string | null | undefined][] = employee ? [
['이름', employee.name], ['직위', employee.position],
['소속 회사', context?.affiliation?.name], ['소속 조직', context?.organization?.name],
['직책', employee.jobTitle], ['근무 상태', statusNames[employee.workStatus]],
] : [];
return <Dialog open={selection !== null} onOpenChange={open => { if (!open) onClose(); }}>
<DialogContent onCloseAutoFocus={restoreFocus} data-component="HMOrgChartEmployeeDialog" data-employee-id={employee?.id}>
<DialogHeader>
<DialogTitle>직원 정보</DialogTitle>
<DialogDescription>조직도에서 선택한 직원의 정보를 확인합니다.</DialogDescription>
</DialogHeader>
<DialogBody>
<Avatar size="lg">
{image ? <AvatarImage src={image} alt="" referrerPolicy="no-referrer" /> : null}
<AvatarFallback>{employee?.name.slice(0, 1)}</AvatarFallback>
</Avatar>
<dl style={{ display: 'grid', gap: '0.75rem', margin: '1rem 0 0' }}>{fields.filter(([, value]) => Boolean(value)).map(([label, value]) => <div key={label} style={{ display: 'grid', gridTemplateColumns: '5rem minmax(0, 1fr)', gap: '0.75rem' }}>
<dt style={{ fontWeight: 600 }}>{label}</dt><dd style={{ margin: 0, minWidth: 0, overflowWrap: 'anywhere' }}>{value}</dd>
</div>)}</dl>
</DialogBody>
<DialogFooter>
<DialogClose asChild><Button variant="cancel" appearance="solid">닫기</Button></DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>;
}
packages/org-chart-react/src/OrgChart.tsx
+134 -11
View File
@@ -1,14 +1,39 @@
"use client";
import { useLayoutEffect, useRef } from 'react';
import { lazy, Suspense, useLayoutEffect, useRef, useState } from 'react';
import { createOrgChart } from '@hm-design/org-chart';
import type { OrgChartDataSource, OrgChartHandle } from '@hm-design/org-chart';
import type { OrgChartAutoLayoutOptions, OrgChartDataSource, OrgChartHandle, OrgChartInteractionOptions, OrgChartOptions } from '@hm-design/org-chart';
import type { OrgChartProps } from './types.js';
import type { EmployeeDialogSelection } from './HMEmployeeDialog.js';
const HMEmployeeDialog = lazy(() => import('./HMEmployeeDialog.js'));
function annotateEmployeeCards(shadow: ShadowRoot, popup: NonNullable<OrgChartProps['employeePopup']>, customCallback: boolean) {
const actionable = customCallback || popup !== 'none';
for (const card of shadow.querySelectorAll<HTMLElement>('.hm-orgchart-employee')) {
const name = card.querySelector('.hm-orgchart-person-name')?.textContent ?? '';
const position = card.querySelector('.hm-orgchart-person-role')?.textContent ?? '';
// Auto cards also provide keyboard movement when the information popup is
// disabled; popup ownership must not remove that Core keyboard entry point.
card.tabIndex = 0;
if (actionable) card.setAttribute('role', 'button');
else card.removeAttribute('role');
card.setAttribute('aria-label', `${name} ${position}${actionable ? ' 직원 정보 보기' : ''}`.trim());
if (actionable && !customCallback) card.setAttribute('aria-haspopup', 'dialog');
else card.removeAttribute('aria-haspopup');
}
}
interface Instance {
readonly handle: OrgChartHandle;
readonly generation: number;
source: OrgChartDataSource;
autoLayout: OrgChartAutoLayoutOptions | undefined;
interactions: OrgChartInteractionOptions | undefined;
dragDropEnabled: boolean;
readonly employeeClick: NonNullable<OrgChartOptions['onEmployeeClick']>;
employeeCallbackEnabled: boolean;
popupMode: 'core' | 'hm-dialog' | 'none';
operation: number;
}
@@ -19,6 +44,9 @@ export function OrgChart({
stylesheetUrls,
displayMode,
layoutMode,
autoLayout,
interactions,
dragDropEnabled = false,
companyId,
selectedCompanyIds,
companyTopNodes,
@@ -26,6 +54,8 @@ export function OrgChart({
zoom,
organizationLinks,
onEmployeeClick,
onMove,
employeePopup = 'core',
className,
style,
onStateChange,
@@ -34,17 +64,22 @@ export function OrgChart({
const containerRef = useRef<HTMLDivElement>(null);
const instanceRef = useRef<Instance | null>(null);
const generationRef = useRef(0);
const committedRef = useRef({ dataSource, onStateChange, onLifecycleError, onEmployeeClick });
const [employeeSelection, setEmployeeSelection] = useState<EmployeeDialogSelection | null>(null);
const committedRef = useRef({ dataSource, onStateChange, onLifecycleError, onEmployeeClick, onMove, employeePopup });
// Publish committed values before Core effects run, without letting callback
// identity changes or abandoned concurrent renders alter Core ownership.
useLayoutEffect(() => {
committedRef.current = { dataSource, onStateChange, onLifecycleError, onEmployeeClick };
}, [dataSource, onStateChange, onLifecycleError, onEmployeeClick]);
committedRef.current = { dataSource, onStateChange, onLifecycleError, onEmployeeClick, onMove, employeePopup };
}, [dataSource, onStateChange, onLifecycleError, onEmployeeClick, onMove, employeePopup]);
const engineStylesheetUrl = stylesheetUrls.engine;
const coreStylesheetUrl = stylesheetUrls.core;
const hasEmployeeCallback = typeof onEmployeeClick === 'function';
const popupMode = layoutMode === 'auto' ? employeePopup : 'core';
const adapterOwnsPopup = popupMode !== 'core';
const hasAdapterCallback = hasEmployeeCallback || popupMode !== 'core';
const fixedHasEmployeeCallback = layoutMode !== 'auto' && hasEmployeeCallback;
// Ownership changes are synchronous with the commit: an old request cannot
// notify between a committed unmount/source change and a passive cleanup.
@@ -54,6 +89,7 @@ export function OrgChart({
const generation = ++generationRef.current;
let handle: OrgChartHandle | undefined;
let unsubscribe: (() => void) | undefined;
let popupObserver: MutationObserver | undefined;
const reportError = (error: unknown) => {
if (generationRef.current !== generation) return;
@@ -63,23 +99,35 @@ export function OrgChart({
try {
const source = committedRef.current.dataSource;
const employeeClick: NonNullable<OrgChartOptions['onEmployeeClick']> = (employee, context) => {
if (generationRef.current !== generation) return;
const callback = committedRef.current.onEmployeeClick;
if (callback) callback(employee, context);
else if (committedRef.current.employeePopup === 'hm-dialog') setEmployeeSelection({ employee, context });
};
handle = createOrgChart({
dataSource: source,
aggregationPolicy,
stylesheetUrls: { engine: engineStylesheetUrl, core: coreStylesheetUrl },
displayMode,
layoutMode,
autoLayout,
interactions,
dragDropEnabled,
companyId,
selectedCompanyIds,
companyTopNodes,
employeeConnections,
zoom,
organizationLinks,
onEmployeeClick: hasEmployeeCallback ? (employee, context) => {
if (generationRef.current === generation) committedRef.current.onEmployeeClick?.(employee, context);
} : undefined,
onEmployeeClick: hasAdapterCallback ? employeeClick : undefined,
onMove: result => {
if (generationRef.current !== generation) return;
if (result.moved) setEmployeeSelection(null);
committedRef.current.onMove?.(result);
},
});
const instance: Instance = { handle, source, generation, operation: 1 };
const instance: Instance = { handle, source, autoLayout, interactions, dragDropEnabled, employeeClick, employeeCallbackEnabled: hasAdapterCallback, popupMode, generation, operation: 1 };
instanceRef.current = instance;
unsubscribe = handle.subscribe(state => {
if (instanceRef.current === instance && generationRef.current === generation) {
@@ -92,6 +140,18 @@ export function OrgChart({
void handle.mount(container).catch(error => {
if (instanceRef.current === instance && instance.operation === operation) reportError(error);
});
const shadow = container.firstElementChild?.shadowRoot;
if (shadow && layoutMode === 'auto') {
const annotateCards = () => {
annotateEmployeeCards(shadow, committedRef.current.employeePopup, Boolean(committedRef.current.onEmployeeClick));
};
const Observer = container.ownerDocument.defaultView?.MutationObserver;
if (Observer) {
popupObserver = new Observer(annotateCards);
popupObserver.observe(shadow, { childList: true, subtree: true });
}
annotateCards();
}
} catch (error) {
reportError(error);
}
@@ -100,6 +160,7 @@ export function OrgChart({
// Invalidate callbacks and promise continuations before terminal disposal.
if (generationRef.current === generation) ++generationRef.current;
if (instanceRef.current?.generation === generation) instanceRef.current = null;
popupObserver?.disconnect();
try { unsubscribe?.(); }
catch (error) {
try { committedRef.current.onLifecycleError?.(error); }
@@ -113,7 +174,64 @@ export function OrgChart({
}
}
};
}, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, layoutMode, companyId, companyTopNodes, employeeConnections, zoom, organizationLinks, hasEmployeeCallback]);
}, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, layoutMode, companyId, companyTopNodes, employeeConnections, zoom, organizationLinks, fixedHasEmployeeCallback]);
useLayoutEffect(() => {
const instance = instanceRef.current;
if (!instance || layoutMode !== 'auto' || (instance.employeeCallbackEnabled === hasAdapterCallback && instance.popupMode === popupMode)) return;
try {
instance.handle.setEmployeeClickHandler(hasAdapterCallback ? instance.employeeClick : undefined);
instance.employeeCallbackEnabled = hasAdapterCallback;
instance.popupMode = popupMode;
} catch (error) {
try { committedRef.current.onLifecycleError?.(error); }
catch { /* Match Core's callback ownership isolation. */ }
}
}, [hasAdapterCallback, popupMode, layoutMode]);
useLayoutEffect(() => {
// Close a host-owned popup before committing a changed source/company view;
// no asynchronous fixture request can leave a stale employee displayed.
setEmployeeSelection(null);
const shadow = containerRef.current?.firstElementChild?.shadowRoot;
if (shadow && layoutMode === 'auto') {
annotateEmployeeCards(shadow, popupMode, hasEmployeeCallback);
}
}, [dataSource, selectedCompanyIds, popupMode, hasEmployeeCallback, layoutMode, adapterOwnsPopup]);
useLayoutEffect(() => {
const instance = instanceRef.current;
if (!instance || layoutMode !== 'auto' || instance.autoLayout === autoLayout) return;
instance.autoLayout = autoLayout;
void instance.handle.setAutoLayout(autoLayout ?? { type: 'tb', hybridStartDepth: 3, initialVisibleDepth: 'all', hybridOrganizationIds: [] }).catch(error => {
if (instanceRef.current !== instance) return;
try { committedRef.current.onLifecycleError?.(error); }
catch { /* Keep layout setter failures in the lifecycle error contract. */ }
});
}, [autoLayout, layoutMode]);
useLayoutEffect(() => {
const instance = instanceRef.current;
if (!instance || layoutMode !== 'auto' || instance.dragDropEnabled === dragDropEnabled) return;
try {
instance.handle.setDragDropEnabled(dragDropEnabled);
instance.dragDropEnabled = dragDropEnabled;
} catch (error) {
try { committedRef.current.onLifecycleError?.(error); }
catch { /* Keep option changes in the lifecycle error contract. */ }
}
}, [dragDropEnabled, layoutMode]);
useLayoutEffect(() => {
const instance = instanceRef.current;
if (!instance || layoutMode !== 'auto' || instance.interactions === interactions) return;
instance.interactions = interactions;
void instance.handle.setInteractions({ collapse: true, zoom: true, pan: true, ...interactions }).catch(error => {
if (instanceRef.current !== instance) return;
try { committedRef.current.onLifecycleError?.(error); }
catch { /* Interaction controls use the existing lifecycle error contract. */ }
});
}, [interactions, layoutMode]);
useLayoutEffect(() => {
const instance = instanceRef.current;
@@ -139,5 +257,10 @@ export function OrgChart({
});
}, [dataSource]);
return <div ref={containerRef} className={className} style={style} />;
return <>
<div ref={containerRef} className={className} style={style} />
{popupMode === 'hm-dialog' && !hasEmployeeCallback ? <Suspense fallback={null}>
<HMEmployeeDialog selection={employeeSelection} onClose={() => setEmployeeSelection(null)} />
</Suspense> : null}
</>;
}
packages/org-chart-react/src/types.ts
+6 -2
View File
@@ -1,11 +1,15 @@
import type { CSSProperties } from 'react';
import type { OrgChartOptions, OrgChartState } from '@hm-design/org-chart';
/** The Core owns data, rendering, organization links and employee information
* interactions; React owns its dedicated container. */
/** The Core owns data, organization rendering and interactions; React owns its
* dedicated container and the optional Portal-based HM employee information UI. */
export interface OrgChartProps extends Omit<OrgChartOptions, 'container' | 'onStateChange'> {
className?: string;
style?: CSSProperties;
/** Auto only. Opt into the public HM Dialog (requires @hm-design/ui + its
* Theme), retain the Vanilla popup, or suppress the default information UI.
* An explicit onEmployeeClick callback always owns the popup instead. */
employeePopup?: 'core' | 'hm-dialog' | 'none';
/** Latest committed callback. Controlled data/style failures arrive as error states. */
onStateChange?: (state: OrgChartState) => void;
/** Unexpected create/mount/reload/cleanup errors, rather than controlled error states. */
packages/org-chart/README.md
+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 파일·서버 저장은 수행하지 않는다.
packages/org-chart/src/core/auto-layout-policy.test.ts
+88
View File
@@ -0,0 +1,88 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import { applyInitialVisibility, autoEngineOptions, resolveAutoLayout, resolveInteractions } from './auto-layout-policy.js';
import { createOrgChart } from './index.js';
import { engineTree, type RenderContext } from './render.js';
import type { Organization, OrganizationTreeNode } from '../data/index.js';
const organization = (id: string, parentId: string | null): Organization => ({ id, parentId, name: id, type: parentId ? 'team' : 'root', leaderId: null, displayOrder: 0 });
const organizations = [organization('root', null), organization('a', 'root'), organization('b', 'root'), organization('a1', 'a'), organization('a2', 'a1')];
test('each independent layout policy selects compatible installed engine options', () => {
assert.deepEqual(autoEngineOptions(resolveAutoLayout()), { direction: 't2b', visibleLevel: 999 });
assert.deepEqual(autoEngineOptions(resolveAutoLayout({ type: 'lr', initialVisibleDepth: 1 })), { direction: 'l2r', visibleLevel: 999 });
for (const depth of [2, 3, 4] as const) assert.deepEqual(autoEngineOptions(resolveAutoLayout({ type: 'hybrid', hybridStartDepth: depth })), { direction: 't2b', visibleLevel: 999, verticalLevel: depth });
});
test('collapse, Zoom and Pan have independent validated defaults', () => {
assert.deepEqual(resolveInteractions(), { collapse: true, zoom: true, pan: true });
assert.deepEqual(resolveInteractions({ collapse: false }), { collapse: false, zoom: true, pan: true });
assert.deepEqual(resolveInteractions({ zoom: false }), { collapse: true, zoom: false, pan: true });
assert.deepEqual(resolveInteractions({ pan: false }), { collapse: true, zoom: true, pan: false });
assert.throws(() => resolveInteractions({ zoom: 0 as unknown as boolean }), /interactions.zoom must be boolean/);
});
test('incompatible per-group/global/directional combinations fail explicitly', () => {
assert.throws(() => resolveAutoLayout({ type: 'lr', hybridOrganizationIds: ['a'] }), /supported only with TB/);
assert.throws(() => resolveAutoLayout({ type: 'hybrid', hybridOrganizationIds: ['a'] }), /supported only with TB/);
assert.throws(() => resolveAutoLayout({ initialVisibleDepth: 0 as 1 }), /initialVisibleDepth/);
assert.throws(() => resolveAutoLayout({ hybridStartDepth: 5 as 2 }), /hybridStartDepth/);
assert.throws(() => resolveAutoLayout({ hybridOrganizationIds: [''] }), /nonempty/);
const input = ['a', 'a'];
const resolved = resolveAutoLayout({ hybridOrganizationIds: input });
input.push('b');
assert.deepEqual(resolved.hybridOrganizationIds, ['a']);
assert.ok(Object.isFrozen(resolved.hybridOrganizationIds));
});
test('initial depth is one-based and user expansion survives subsequent renders and new data', () => {
const collapsed = new Set<string>(), initialized = new Set<string>();
applyInitialVisibility(organizations, collapsed, initialized, 2);
assert.deepEqual([...collapsed], ['a', 'b', 'a1', 'a2']);
collapsed.delete('a');
applyInitialVisibility([...organizations, organization('b1', 'b')], collapsed, initialized, 2);
assert.equal(collapsed.has('a'), false);
assert.equal(collapsed.has('b1'), true);
applyInitialVisibility(organizations, collapsed, initialized, 'all', true);
assert.equal(collapsed.size, 0);
collapsed.add('a1');
applyInitialVisibility(organizations.filter(item => item.id !== 'a2'), collapsed, initialized, 'all');
assert.equal(collapsed.has('a1'), true);
assert.equal(initialized.has('a2'), false);
});
test('Depth 1 projection keeps independent company roots while collapsed descendants stay out of DOM', () => {
const roots: OrganizationTreeNode[] = [{ organization: organizations[0]!, children: [{ organization: organizations[1]!, children: [{ organization: organizations[3]!, children: [] }] }] }];
const collapsed = new Set<string>(), initialized = new Set<string>();
applyInitialVisibility(organizations, collapsed, initialized, 1);
const context = { orderedOrganizations: [], readOnly: true, collapsedOrganizations: collapsed, autoLayout: resolveAutoLayout() } as unknown as RenderContext;
const tree = engineTree(roots, 'initial', context);
assert.equal(tree.length, 1);
assert.equal(tree[0]!.children, undefined);
assert.deepEqual(context.orderedOrganizations.map(item => item.id), ['root']);
});
test('per-group Hybrid projection marks only the selected parent and leaves source immutable', () => {
const roots: OrganizationTreeNode[] = [{ organization: organizations[0]!, children: [{ organization: organizations[1]!, children: [{ organization: organizations[3]!, children: [] }] }, { organization: organizations[2]!, children: [] }] }];
const before = structuredClone(roots);
const context = { orderedOrganizations: [], readOnly: true, autoLayout: resolveAutoLayout({ hybridOrganizationIds: ['a'] }) } as unknown as RenderContext;
const tree = engineTree(roots, 'groups', context);
assert.equal(tree[0]!.hybrid, undefined);
assert.equal(tree[0]!.level, 1);
assert.equal(tree[0]!.children![0]!.hybrid, true);
assert.equal(tree[0]!.children![0]!.level, 2);
assert.equal(tree[0]!.children![0]!.children![0]!.level, 3);
assert.equal(tree[0]!.children![1]!.hybrid, undefined);
assert.deepEqual(roots, before);
});
test('Fixed ignores Auto configuration and facade defaults keep existing TB fully expanded', () => {
const options = { dataSource: { load: async () => ({}) }, stylesheetUrls: { engine: '/engine.css', core: '/style.css' } };
const fixed = createOrgChart({ ...options, autoLayout: { type: 'invalid' as 'tb' } });
assert.equal(fixed.getAutoLayout().type, 'tb');
fixed.destroy();
const expanded = createOrgChart({ ...options, layoutMode: 'auto' });
assert.equal(expanded.getAutoLayout().initialVisibleDepth, 'all');
assert.equal(expanded.getAutoLayout().type, 'tb');
expanded.destroy();
});
packages/org-chart/src/core/auto-layout-policy.ts
+59
View File
@@ -0,0 +1,59 @@
import type { Organization } from '../data/index.js';
import type { OrgChartAutoLayoutOptions, OrgChartAutoLayoutType, OrgChartInteractionOptions } from './types.js';
export function resolveInteractions(options: OrgChartInteractionOptions = {}): Readonly<Required<OrgChartInteractionOptions>> {
for (const key of ['collapse', 'zoom', 'pan'] as const) {
if (options[key] !== undefined && typeof options[key] !== 'boolean') throw new TypeError(`interactions.${key} must be boolean`);
}
return Object.freeze({ collapse: options.collapse ?? true, zoom: options.zoom ?? true, pan: options.pan ?? true });
}
export interface ResolvedAutoLayout {
readonly type: OrgChartAutoLayoutType;
readonly hybridStartDepth: 2 | 3 | 4;
readonly initialVisibleDepth: 1 | 2 | 3 | 'all';
readonly hybridOrganizationIds: readonly string[];
}
/** Match installed dabeng 6's mutually exclusive directional/vertical policies. */
export function resolveAutoLayout(options: OrgChartAutoLayoutOptions = {}): ResolvedAutoLayout {
const type = options.type ?? 'tb';
const hybridStartDepth = options.hybridStartDepth ?? 3;
const initialVisibleDepth = options.initialVisibleDepth ?? 'all';
if (!['tb', 'lr', 'hybrid'].includes(type)) throw new TypeError('autoLayout.type must be tb, lr or hybrid');
if (![2, 3, 4].includes(hybridStartDepth)) throw new TypeError('autoLayout.hybridStartDepth must be 2, 3 or 4');
if (![1, 2, 3, 'all'].includes(initialVisibleDepth)) throw new TypeError('autoLayout.initialVisibleDepth must be 1, 2, 3 or all');
if (options.hybridOrganizationIds !== undefined && (!Array.isArray(options.hybridOrganizationIds) || options.hybridOrganizationIds.some(id => typeof id !== 'string' || !id.trim()))) throw new TypeError('autoLayout.hybridOrganizationIds must contain nonempty organization IDs');
const hybridOrganizationIds = Object.freeze([...new Set(options.hybridOrganizationIds ?? [])]);
if (type !== 'tb' && hybridOrganizationIds.length) throw new TypeError('Per-group hybridOrganizationIds are supported only with TB; clear them before selecting LR or Hybrid');
return Object.freeze({ type, hybridStartDepth, initialVisibleDepth, hybridOrganizationIds });
}
export function autoEngineOptions(layout: ResolvedAutoLayout): { direction: 't2b' | 'l2r'; verticalLevel?: number; visibleLevel: number } {
// Core owns collapse state and prunes its projection. Upstream visibleLevel
// would retain hidden descendants that disagree with Core keyboard/state APIs.
return { direction: layout.type === 'lr' ? 'l2r' : 't2b', visibleLevel: 999,
...(layout.type === 'hybrid' ? { verticalLevel: layout.hybridStartDepth } : {}) };
}
/** Apply the visibleLevel policy to new IDs only, keeping user changes stable. */
export function applyInitialVisibility(organizations: readonly Organization[], collapsed: Set<string>, initialized: Set<string>, visibleDepth: ResolvedAutoLayout['initialVisibleDepth'], reset = false): void {
const valid = new Set(organizations.map(organization => organization.id));
for (const id of collapsed) if (!valid.has(id) || reset) collapsed.delete(id);
for (const id of initialized) if (!valid.has(id) || reset) initialized.delete(id);
const byId = new Map(organizations.map(organization => [organization.id, organization]));
for (const organization of organizations) {
if (initialized.has(organization.id)) continue;
initialized.add(organization.id);
if (visibleDepth === 'all') continue;
let depth = 1;
let current = organization;
const seen = new Set([current.id]);
while (current.parentId) {
const parent = byId.get(current.parentId);
if (!parent || seen.has(parent.id)) break;
seen.add(parent.id); current = parent; depth++;
}
if (depth >= visibleDepth) collapsed.add(organization.id);
}
}
packages/org-chart/src/core/employee-info-dialog.ts
+13 -1
View File
@@ -27,8 +27,20 @@ export function createEmployeeInfoDialog(
const closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.className = 'hm-orgchart-employee-dialog-close';
closeButton.textContent = '닫기';
closeButton.setAttribute('aria-label', '직원 정보 닫기');
// HM Dialog's Lucide XIcon, kept as native SVG for the shared Vanilla Core.
const closeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
for (const [name, value] of Object.entries({
width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none',
stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round',
'stroke-linejoin': 'round', 'aria-hidden': 'true', focusable: 'false',
})) closeIcon.setAttribute(name, value);
for (const d of ['M18 6 6 18', 'm6 6 12 12']) {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', d);
closeIcon.append(path);
}
closeButton.append(closeIcon);
const fields = document.createElement('dl');
fields.className = 'hm-orgchart-employee-dialog-fields';
header.append(title, closeButton);
packages/org-chart/src/core/engine.ts
+53 -1
View File
@@ -1,10 +1,17 @@
import type OrgChart from 'orgchart';
import type { EngineNode } from 'orgchart';
import type { EngineNode, EngineOptions } from 'orgchart';
export type RenderEngineNode = EngineNode;
export interface EngineEditing {
canDrop(source: HTMLElement, target: HTMLElement): boolean;
onDrop(source: HTMLElement, target: HTMLElement): void;
}
export interface EngineAdapter {
update(data: RenderEngineNode[]): void;
toggle(node: HTMLElement): boolean | undefined;
prepareDrag(source: HTMLElement): void;
drop(source: HTMLElement, target: HTMLElement): void;
cancelDrag(): void;
dispose(): void;
}
@@ -51,6 +58,8 @@ export function createEngineAdapter(
viewport: HTMLElement,
data: RenderEngineNode[],
decorate: (node: HTMLElement, data: RenderEngineNode, signal: AbortSignal) => void,
layoutOptions: Pick<EngineOptions, 'direction' | 'verticalLevel' | 'visibleLevel'> = {},
editing?: EngineEditing,
): EngineAdapter {
const Abort = viewport.ownerDocument.defaultView?.AbortController ?? AbortController;
let generation = new Abort();
@@ -59,7 +68,12 @@ export function createEngineAdapter(
const forest = viewport.ownerDocument.createElement('div');
forest.className = 'hm-orgchart-forest';
viewport.append(forest);
function cancelDrag(): void {
if (!editing) return;
for (const instance of instances) instance.dragendHandler();
}
function releaseGeneration(): void {
cancelDrag();
generation.abort();
for (const instance of instances) {
instance.disconnectInitObserver();
@@ -84,8 +98,10 @@ export function createEngineAdapter(
treeContainer.className = 'hm-orgchart-tree';
forest.append(treeContainer);
const instance = new Engine(treeContainer, {
...layoutOptions,
data: root, pan: false, zoom: false, minimap: false, draggable: false, exportButton: false,
chartClass: 'hm-orgchart-engine',
...(editing ? { dropCriteria: (source: HTMLElement, _parent: HTMLElement | null, target: HTMLElement) => editing.canDrop(source, target) } : {}),
nodeTemplate: () => '<article class="hm-orgchart-organization"></article>',
createNode: (node, value) => decorate(node, value, generation.signal),
});
@@ -108,6 +124,23 @@ export function createEngineAdapter(
}
function bindGeneration(): void {
forest.addEventListener('transitionend', syncButtons, { signal: generation.signal });
if (!editing) return;
for (const instance of instances) {
// Core owns immutable data and rerendering. Reuse upstream drop events,
// but cancel its DOM/data mutation before either horizontal or hybrid path.
const commitDrop = (event: Event) => {
event.preventDefault();
const detail = (event as CustomEvent<{ draggedNode?: HTMLElement; draggedItem?: HTMLElement; dropZone: HTMLElement }>).detail;
if (!detail) return;
const source = detail.draggedNode ?? detail.draggedItem;
const target = detail.dropZone;
if (source && target && instance.chart?.contains(source) && instances.some(candidate => candidate.chart?.contains(target)) && editing.canDrop(source, target)) {
editing.onDrop(source, target);
}
};
instance.chart?.addEventListener('nodedrop.orgchart', commitDrop, { signal: generation.signal });
instance.chart?.addEventListener('otherdropped.orgchart', commitDrop, { signal: generation.signal });
}
}
build(data);
bindGeneration();
@@ -133,6 +166,25 @@ export function createEngineAdapter(
syncButtons();
return !expanded;
},
prepareDrag(source) {
if (disposed || !editing) return;
cancelDrag();
if (!instances.some(candidate => candidate.chart?.contains(source))) return;
// Independent company trees share one editing policy. Upstream caches the
// source and filters targets within its own chart, so filter each tree.
for (const instance of instances) instance.filterAllowedDropNodes(source);
},
drop(source, target) {
if (disposed || !editing) return;
const instance = instances.find(candidate => candidate.chart?.contains(source));
if (!instance || !instances.some(candidate => candidate.chart?.contains(target)) || !editing.canDrop(source, target)) { cancelDrag(); return; }
// Refresh upstream's cached source and allowed targets for the final data
// policy check. Pointer coordinates and thresholds stay in the Core UI.
for (const candidate of instances) candidate.filterAllowedDropNodes(source);
void instance.dropHandler({ dropZone: target });
cancelDrag();
},
cancelDrag,
dispose() {
if (disposed) return;
disposed = true;
packages/org-chart/src/core/expanded-content.ts
+19 -6
View File
@@ -19,6 +19,13 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
node.dataset.organizationType = organization.type;
node.dataset.companyId = companyId;
node.dataset.collapsed = String(collapsed);
node.draggable = false;
const counts = context.summary.raw.byOrganization[organization.id];
node.dataset.directEmployeeCount = String(counts?.direct ?? 0);
node.dataset.inclusiveEmployeeCount = String(counts?.inclusive ?? 0);
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);
node.style.setProperty('--hm-orgchart-expanded-title-ink', ['saman', 'jangheon-industry'].includes(companyId) ? 'var(--hm-orgchart-resolved-fg-primary)' : 'var(--hm-orgchart-resolved-on-action-primary)');
preset.secondary.forEach((color, index) => node.style.setProperty(`--hm-orgchart-expanded-secondary-${index + 1}`, color));
@@ -34,10 +41,11 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
button.className = 'hm-orgchart-expanded-toggle';
button.dataset.organizationId = organization.id;
button.textContent = `${top?.organizationName ?? organization.name} ${hasChildren ? collapsed ? '▸' : '▾' : '·'}`;
button.setAttribute('aria-label', `${top?.organizationName ?? organization.name} 하위 조직·직원`);
button.setAttribute('aria-label', `${top?.organizationName ?? organization.name} 하위 조직·직원 · 직접 ${counts?.direct ?? 0}명 · 하위 포함 ${counts?.inclusive ?? 0}명`);
button.setAttribute('aria-expanded', String(!collapsed));
button.disabled = !hasChildren;
button.addEventListener('click', event => { event.stopPropagation(); context.toggleExpanded?.(organization.id); }, { signal });
// Empty titles remain focusable move sources/targets. Collapse is independent.
button.setAttribute('aria-disabled', String(!hasChildren || context.interactions?.collapse === false));
button.addEventListener('click', event => { event.stopPropagation(); if (hasChildren && context.interactions?.collapse !== false) context.toggleExpanded?.(organization.id); }, { signal });
heading.append(button);
const href = context.organizationLinks?.[organization.id];
if (href) {
@@ -51,6 +59,7 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
}
article.append(heading);
const colorCard = (card: HTMLElement, affiliationId: string) => {
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})`);
@@ -59,7 +68,7 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
if (leader && top?.display !== 'hidden' && top?.display !== 'titleOnly') {
const presentation = top ? { ...leader, position: top.title ?? leader.position, name: top.name ?? leader.name, profileImage: top.profileImage === undefined ? leader.profileImage : top.profileImage } : leader;
const card = colorCard(createEmployeeCard(document, presentation, { kind: organization.parentId === null ? 'topLeader' : 'leader', expandedPresentation: true, hideStatusLabel: true }, signal), leader.affiliationId);
card.dataset.connectionDirection = 'top';
card.dataset.connectionDirection = context.autoLayout?.type === 'lr' ? 'left' : 'top';
article.append(card);
} else if (leader && top?.display === 'titleOnly') {
const title = document.createElement('p');
@@ -70,7 +79,7 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
if (!collapsed && staff.length) {
const employees = document.createElement('div');
employees.className = 'hm-orgchart-employees';
const direction = context.employeeConnections?.[organization.id] ?? 'top';
const direction = context.employeeConnections?.[organization.id] ?? layoutDirection;
employees.dataset.connectionDirection = direction;
for (const employee of staff) {
const card = colorCard(createEmployeeCard(document, employee, { kind: 'employee', expandedPresentation: true, hideStatusLabel: true }, signal), employee.affiliationId);
@@ -86,6 +95,10 @@ export function createExpandedOrgChartContent(document: Document, context: Rende
content.className = 'hm-orgchart-expanded';
content.dataset.component = 'ExpandedOrgChartContent';
content.dataset.layoutMode = 'auto';
content.dataset.autoLayout = context.autoLayout?.type ?? 'tb';
content.dataset.hybridStartDepth = String(context.autoLayout?.hybridStartDepth ?? 3);
content.dataset.initialVisibleDepth = String(context.autoLayout?.initialVisibleDepth ?? 'all');
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)])) {
@@ -94,6 +107,6 @@ export function createExpandedOrgChartContent(document: Document, context: Rende
}
tree.setAttribute('aria-label', '확장형 조직 계층도 · Ctrl 또는 Command + 휠로 확대 · 드래그로 이동');
content.append(createHeading(document, context), tree);
alignExpandedLevels(tree, signal, layoutReady);
alignExpandedLevels(tree, signal, layoutReady, context.autoLayout);
return content;
}
packages/org-chart/src/core/expanded-editing.ts
+161
View File
@@ -0,0 +1,161 @@
import type { OrgChartMoveRequest, OrgChartMoveValidation } from '../data/index.js';
import type { EngineAdapter } from './engine.js';
export interface ExpandedEditing {
setEnabled(enabled: boolean): void;
}
/** The pointer threshold is shared conceptually with Pan (6 screen pixels).
* Upstream owns allowedDrop and drop events; Core owns immutable relationships.
* Browser hit testing already includes the forest's Zoom/Pan transform. */
export function createExpandedEditing(viewport: HTMLElement, feedback: HTMLElement, signal: AbortSignal,
engine: EngineAdapter, validate: (request: OrgChartMoveRequest) => OrgChartMoveValidation,
move: (request: OrgChartMoveRequest) => void, suppressClick: () => void, initiallyEnabled = false): ExpandedEditing {
const document = viewport.ownerDocument, view = document.defaultView!;
let enabled = initiallyEnabled;
const nodes = () => [...viewport.querySelectorAll<HTMLElement>('.node[data-organization-id]')];
let pending: { source: HTMLElement; id: number; x: number; y: number; moved: boolean } | undefined;
let keyboardSource: HTMLElement | undefined;
let hover: HTMLElement | undefined;
const sourceFor = (target: EventTarget | null): HTMLElement | undefined => {
if (!(target instanceof view.Element)) return;
const employee = target.closest<HTMLElement>('.hm-orgchart-employee');
if (employee && viewport.contains(employee)) return employee;
const title = target.closest('.hm-orgchart-expanded-toggle');
if (title && viewport.contains(title)) return title.closest<HTMLElement>('.node') ?? undefined;
};
const requestFor = (source: HTMLElement, target?: HTMLElement): OrgChartMoveRequest => ({
kind: source.matches('.hm-orgchart-employee') ? 'employee' : 'organization',
sourceId: source.dataset.employeeId ?? source.dataset.organizationId!,
targetOrganizationId: target?.dataset.organizationId ?? '',
});
const name = (node: HTMLElement) => node.querySelector('.hm-orgchart-expanded-toggle')?.textContent ?? node.dataset.organizationId!;
function clear(): void {
engine.cancelDrag();
for (const element of viewport.querySelectorAll<HTMLElement>('[data-drop-state], [data-drop-hover], [data-edit-source]')) {
delete element.dataset.dropState; delete element.dataset.dropHover; delete element.dataset.editSource;
}
hover = undefined; delete viewport.dataset.editDragging;
}
function start(source: HTMLElement): void {
clear(); engine.prepareDrag(source);
source.dataset.editSource = 'true'; viewport.dataset.editDragging = 'true';
for (const target of nodes()) target.dataset.dropState = validate(requestFor(source, target)).allowed ? 'allowed' : 'blocked';
feedback.dataset.moveStatus = 'dragging';
feedback.textContent = '이동할 조직에 놓으세요. 회사 간 이동도 가능합니다. 조직장·최상위 조직은 이동할 수 없습니다.';
}
function selectTarget(source: HTMLElement, target?: HTMLElement): void {
if (hover) delete hover.dataset.dropHover;
hover = target;
if (!target) return;
const policy = validate(requestFor(source, target));
target.dataset.dropHover = policy.allowed ? 'allowed' : 'blocked';
feedback.textContent = policy.allowed ? `${name(target)} · 이동 가능` : `${name(target)} · ${policy.message}`;
}
const hitTarget = (x: number, y: number) => {
const box = viewport.getBoundingClientRect();
if (x < box.left || x >= box.right || y < box.top || y >= box.bottom) return;
// The presenter binds before its fragment is attached to the host Shadow DOM.
// Resolve the live root at hit-test time instead of retaining that fragment.
const root = viewport.getRootNode();
const hit = (root instanceof view.ShadowRoot ? root : document).elementFromPoint(x, y);
const node = hit?.closest<HTMLElement>('.node[data-organization-id]');
return node && viewport.contains(node) ? node : undefined;
};
function drop(source: HTMLElement, target?: HTMLElement): boolean {
if (!enabled) { clear(); return false; }
const request = requestFor(source, target), policy = validate(request);
// The upstream otherdropped event intentionally skips its allowedDrop check.
// Always revalidate before entering either upstream drop-event route.
if (target && policy.allowed) engine.drop(source, target);
else move(request);
clear();
return policy.allowed && !!target;
}
viewport.addEventListener('dragstart', event => event.preventDefault(), { capture: true, signal });
viewport.addEventListener('pointerdown', event => {
if (!enabled || event.button !== 0 || !event.isPrimary || keyboardSource) return;
const source = sourceFor(event.target);
if (!source) return;
pending = { source, id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
}, { signal });
view.addEventListener('pointermove', event => {
if (!enabled || !pending || pending.id !== event.pointerId) return;
if (!pending.moved && Math.hypot(event.clientX - pending.x, event.clientY - pending.y) < 6) return;
if (!pending.moved) {
pending.moved = true; viewport.setPointerCapture(event.pointerId); start(pending.source);
}
event.preventDefault();
selectTarget(pending.source, hitTarget(event.clientX, event.clientY));
}, { passive: false, signal });
function finish(event: PointerEvent): void {
if (!pending || pending.id !== event.pointerId) return;
const drag = pending; pending = undefined;
if (viewport.hasPointerCapture(event.pointerId)) viewport.releasePointerCapture(event.pointerId);
if (!drag.moved) return;
suppressClick();
if (event.type === 'pointerup') drop(drag.source, hitTarget(event.clientX, event.clientY));
else { clear(); feedback.dataset.moveStatus = 'cancelled'; feedback.textContent = '이동을 취소했습니다.'; }
}
view.addEventListener('pointerup', finish, { signal });
view.addEventListener('pointercancel', finish, { signal });
viewport.addEventListener('lostpointercapture', event => {
// Touch initially captures its card. Transferring capture to the viewport
// releases that descendant and bubbles here; the viewport still owns Drag.
if (event.target !== viewport || !pending?.moved) return;
pending = undefined; clear(); feedback.textContent = '이동을 취소했습니다.';
}, { signal });
const cancel = (restoreFocus = true) => {
const source = keyboardSource;
if (pending?.moved) suppressClick();
const id = pending?.id; pending = undefined; keyboardSource = undefined;
if (id !== undefined && viewport.hasPointerCapture(id)) viewport.releasePointerCapture(id);
clear(); feedback.dataset.moveStatus = 'cancelled'; feedback.textContent = '이동을 취소했습니다.';
const focus = source?.matches('.node') ? source.querySelector<HTMLElement>('.hm-orgchart-expanded-toggle') : source;
if (restoreFocus) focus?.focus({ preventScroll: true });
};
view.addEventListener('blur', () => { if (pending || keyboardSource) cancel(); }, { signal });
viewport.addEventListener('keydown', event => {
if (!enabled) return;
if (event.key === 'Escape' && (keyboardSource || pending)) { event.preventDefault(); event.stopImmediatePropagation(); cancel(); return; }
if (!keyboardSource && event.altKey && event.key.toLowerCase() === 'm') {
const source = sourceFor(event.target);
if (!source) return;
event.preventDefault(); event.stopImmediatePropagation(); keyboardSource = source; start(source);
const targets = nodes(), target = targets.find(target => validate(requestFor(source, target)).allowed) ?? targets[0];
selectTarget(source, target);
if (target) { target.tabIndex = -1; target.focus({ preventScroll: true }); }
return;
}
if (!keyboardSource) return;
if (['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
event.preventDefault(); event.stopImmediatePropagation();
const targets = nodes(), index = Math.max(0, targets.indexOf(hover!));
const next = event.key === 'Home' ? 0 : event.key === 'End' ? targets.length - 1
: (index + (['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1) + targets.length) % targets.length;
selectTarget(keyboardSource, targets[next]);
if (hover) { hover.tabIndex = -1; hover.focus({ preventScroll: true }); }
} else if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault(); event.stopImmediatePropagation(); const source = keyboardSource; keyboardSource = undefined;
if (!drop(source, hover)) {
const focus = source.matches('.node') ? source.querySelector<HTMLElement>('.hm-orgchart-expanded-toggle') : source;
focus?.focus({ preventScroll: true });
}
} else if (event.key === 'Tab') { event.preventDefault(); event.stopImmediatePropagation(); cancel(); }
}, { capture: true, signal });
signal.addEventListener('abort', () => {
const id = pending?.id; pending = undefined; keyboardSource = undefined;
if (id !== undefined && viewport.hasPointerCapture(id)) viewport.releasePointerCapture(id);
clear();
}, { once: true });
return {
setEnabled(next) {
if (enabled === next) return;
enabled = next;
if (!enabled) {
if (pending || keyboardSource) cancel(false);
else clear();
}
},
};
}
packages/org-chart/src/core/expanded-layout.ts
+61 -2
View File
@@ -1,7 +1,9 @@
/** 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. */
export function alignExpandedLevels(viewport: HTMLElement, signal: AbortSignal, layoutReady: () => void = () => {}): void {
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]')];
@@ -10,15 +12,20 @@ export function alignExpandedLevels(viewport: HTMLElement, signal: AbortSignal,
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 = `${heights.get(node.dataset.depth!) ?? 0}px`;
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 = () => {
@@ -36,6 +43,58 @@ export function alignExpandedLevels(viewport: HTMLElement, signal: AbortSignal,
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 {
packages/org-chart/src/core/expanded-viewport.ts
+54 -20
View File
@@ -5,20 +5,25 @@ export interface ExpandedViewport {
panBy(x: number, y: number): void;
fit(): void;
state(): OrgChartViewportState;
hasManualPosition(): boolean;
layoutReady(): void;
}
/** One transformed forest, shared by HTML and React; dialogs live in the shell. */
export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLElement, signal: AbortSignal,
config: { min: number; max: number; step: number }, initial?: OrgChartViewportState, fitInitially = true): ExpandedViewport {
config: { min: number; max: number; step: number; zoomEnabled?: boolean; panEnabled?: boolean }, initial?: OrgChartViewportState, centerInitially = true, initialManualPosition = false): ExpandedViewport {
const document = viewport.ownerDocument;
const view = document.defaultView!;
const forest = viewport.querySelector<HTMLElement>('.hm-orgchart-forest')!;
let { scale, x, y } = initial ?? { scale: 1, x: 0, y: 0 };
let initialFit = fitInitially;
let manualPosition = initialManualPosition;
let placement: 'center' | 'fit' | undefined = centerInitially && !manualPosition ? 'center' : undefined;
let drag: { id: number; x: number; y: number; moved: boolean } | undefined;
let suppressClick = false;
let focusFrame = 0;
const zoomEnabled = config.zoomEnabled !== false, panEnabled = config.panEnabled !== false;
viewport.dataset.zoomEnabled = String(zoomEnabled);
viewport.dataset.panEnabled = String(panEnabled);
const output = document.createElement('output');
output.setAttribute('aria-label', '현재 배율');
output.setAttribute('aria-live', 'polite');
@@ -29,35 +34,61 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
viewport.dataset.panX = String(x);
viewport.dataset.panY = String(y);
output.textContent = `${Math.round(scale * 100)}%`;
buttons[0].disabled = scale >= config.max;
buttons[1].disabled = scale <= config.min;
buttons[0].disabled = !zoomEnabled || scale >= config.max;
buttons[1].disabled = !zoomEnabled || scale <= config.min;
};
const clamp = (value: number) => Math.max(config.min, Math.min(config.max, value));
// Engine wrappers reserve asymmetric margins (LR) and empty row space (TB).
// Center the complete rendered content, including organization connector rails,
// in forest-local coordinates so Pan/Zoom do not affect the measured bounds.
const contentBounds = () => {
const origin = forest.getBoundingClientRect();
let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
for (const element of forest.querySelectorAll('.hm-orgchart-organization, .hm-orgchart-organization-connectors path')) {
const rect = element.getBoundingClientRect();
if ((!rect.width && !rect.height) || !element.getClientRects().length) continue;
left = Math.min(left, (rect.left - origin.left) / scale);
top = Math.min(top, (rect.top - origin.top) / scale);
right = Math.max(right, (rect.right - origin.left) / scale);
bottom = Math.max(bottom, (rect.bottom - origin.top) / scale);
}
return Number.isFinite(left) ? { left, top, width: right - left, height: bottom - top } : undefined;
};
const position = (fit: boolean) => {
const bounds = contentBounds();
if (!bounds || !bounds.width || !bounds.height || !viewport.clientWidth || !viewport.clientHeight) return;
if (fit) {
// Only an explicit Fit shrinks to contain, even below manual Zoom's min.
scale = Math.max(Number.EPSILON, Math.min((viewport.clientWidth - 32) / bounds.width, (viewport.clientHeight - 32) / bounds.height, 1));
}
x = (viewport.clientWidth - bounds.width * scale) / 2 - bounds.left * scale;
y = (fit ? Math.max(16, (viewport.clientHeight - bounds.height * scale) / 2) : 16) - bounds.top * scale;
apply();
};
const preservePosition = () => { manualPosition = true; placement = undefined; };
const controller: ExpandedViewport = {
zoomTo(next, anchor = { x: viewport.clientWidth / 2, y: viewport.clientHeight / 2 }) {
if (!zoomEnabled) return;
if (!Number.isFinite(next)) return;
initialFit = false;
preservePosition();
const value = clamp(next), factor = value / scale;
x = anchor.x - (anchor.x - x) * factor;
y = anchor.y - (anchor.y - y) * factor;
scale = value; apply();
},
panBy(dx, dy) { if (!Number.isFinite(dx) || !Number.isFinite(dy)) return; initialFit = false; x += dx; y += dy; apply(); },
panBy(dx, dy) { if (!panEnabled || !Number.isFinite(dx) || !Number.isFinite(dy)) return; preservePosition(); x += dx; y += dy; apply(); },
fit() {
if (!forest.offsetWidth || !forest.offsetHeight) return;
scale = clamp(Math.min((viewport.clientWidth - 32) / forest.offsetWidth, (viewport.clientHeight - 32) / forest.offsetHeight, 1));
x = (viewport.clientWidth - forest.offsetWidth * scale) / 2;
y = Math.max(16, (viewport.clientHeight - forest.offsetHeight * scale) / 2);
apply();
manualPosition = false; placement = 'fit'; position(true);
},
state: () => ({ scale, x, y }),
layoutReady() { if (initialFit) controller.fit(); },
hasManualPosition: () => manualPosition,
layoutReady() { if (placement) position(placement === 'fit'); },
};
const actions: [string, () => void][] = [
['확대', () => controller.zoomTo(scale * config.step)],
['축소', () => controller.zoomTo(scale / config.step)],
['100% 복원', () => { initialFit = false; scale = 1; x = 16; y = 16; apply(); }],
['Fit to View', () => { initialFit = true; controller.fit(); }],
['100% 복원', () => { preservePosition(); scale = 1; x = 16; y = 16; apply(); }],
['Fit to View', () => controller.fit()],
];
toolbar.setAttribute('role', 'group');
toolbar.setAttribute('aria-label', '조직도 확대·이동 도구');
@@ -69,9 +100,10 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
}
toolbar.append(output);
const hint = document.createElement('span');
hint.textContent = '드래그 이동 · Ctrl/⌘ + 휠 확대 · 방향키 이동';
hint.textContent = [panEnabled ? '드래그·방향키 이동' : '', zoomEnabled ? 'Ctrl/⌘ + 휠 확대' : ''].filter(Boolean).join(' · ');
toolbar.append(hint);
viewport.addEventListener('wheel', event => {
if (!zoomEnabled) return;
if (!event.ctrlKey && !event.metaKey) return;
event.preventDefault();
const box = viewport.getBoundingClientRect();
@@ -80,12 +112,13 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
viewport.addEventListener('keydown', event => {
if (event.target !== viewport) return;
const shifts: Record<string, [number, number]> = { ArrowLeft: [40, 0], ArrowRight: [-40, 0], ArrowUp: [0, 40], ArrowDown: [0, -40] };
if (shifts[event.key]) { event.preventDefault(); controller.panBy(...shifts[event.key]!); }
if (shifts[event.key]) { event.preventDefault(); if (panEnabled) controller.panBy(...shifts[event.key]!); }
else if (event.key === '+' || event.key === '=') { event.preventDefault(); controller.zoomTo(scale * config.step); }
else if (event.key === '-') { event.preventDefault(); controller.zoomTo(scale / config.step); }
}, { signal });
// Tab can reach cards outside a zoomed/panned forest. Reveal the focused
// control without changing scale or using the viewport's hidden scroll area.
// Keyboard focus visibility remains available when manual Pan is disabled.
viewport.addEventListener('focusin', event => {
const target = event.target;
if (!(target instanceof view.HTMLElement) || !forest.contains(target)) return;
@@ -99,11 +132,12 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
const right = left + viewport.clientWidth - 16, bottom = top + viewport.clientHeight - 16;
const dx = box.left < left ? left - box.left : box.right > right ? right - box.right : 0;
const dy = box.top < top ? top - box.top : box.bottom > bottom ? bottom - box.bottom : 0;
if (dx || dy) controller.panBy(dx, dy);
if (dx || dy) { preservePosition(); x += dx; y += dy; apply(); }
});
}, { signal });
viewport.addEventListener('pointerdown', event => {
if (event.button !== 0 || event.isPrimary === false || (event.target as Element).closest('button,a')) return;
if (!panEnabled) return;
if (event.button !== 0 || event.isPrimary === false || (event.target as Element).closest('button,a,.hm-orgchart-employee')) return;
suppressClick = false;
drag = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
}, { signal });
@@ -123,7 +157,7 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
};
viewport.addEventListener('pointerup', finish, { signal });
viewport.addEventListener('pointercancel', finish, { signal });
viewport.addEventListener('lostpointercapture', () => { drag = undefined; delete viewport.dataset.dragging; }, { signal });
viewport.addEventListener('lostpointercapture', event => { if (event.target === viewport) { drag = undefined; delete viewport.dataset.dragging; } }, { signal });
// Release outside the viewport must not leave a pending drag.
view.addEventListener('pointerup', finish, { signal });
viewport.addEventListener('click', event => {
@@ -133,7 +167,7 @@ export function createExpandedViewport(viewport: HTMLElement, toolbar: HTMLEleme
if (event.detail === 0) return;
event.preventDefault(); event.stopImmediatePropagation();
}, { capture: true, signal });
const observer = new view.ResizeObserver(() => { if (initialFit) controller.fit(); });
const observer = new view.ResizeObserver(() => { if (placement) position(placement === 'fit'); });
observer.observe(viewport);
signal.addEventListener('abort', () => { observer.disconnect(); drag = undefined; if (focusFrame) view.cancelAnimationFrame(focusFrame); }, { once: true });
apply();
packages/org-chart/src/core/index.ts
+164 -14
View File
@@ -1,5 +1,5 @@
import { calculateSummary, normalizeOrgChartDataset, validateOrgChartDataset } from '../data/index.js';
import type { OrgChartDataSource, ValidationIssue } from '../data/index.js';
import { applyOrgChartMove, calculateSummary, createOrgChartMoveValidator, normalizeOrgChartDataset, validateOrgChartDataset } from '../data/index.js';
import type { OrgChartDataset, OrgChartMoveRequest, OrgChartMoveResult, OrgChartMoveValidation, OrgChartDataSource, ValidationIssue } from '../data/index.js';
import { createEngineAdapter, loadEngine } from './engine.js';
import type { EngineAdapter, EngineConstructor } from './engine.js';
import { decorateNode, engineTree } from './render.js';
@@ -9,6 +9,8 @@ import { createExpandedOrgChartContent } from './expanded-content.js';
import { getCompanyColorPreset } from '../company-color-presets.js';
import { resolveExpandedCompanies, validateTopNodes } from './expanded-company.js';
import { createExpandedViewport, type ExpandedViewport } from './expanded-viewport.js';
import { createExpandedEditing, type ExpandedEditing } from './expanded-editing.js';
import { applyInitialVisibility, autoEngineOptions, resolveAutoLayout, resolveInteractions } from './auto-layout-policy.js';
import { createPositionSummary } from './position-summary.js';
import { createAffiliationSummary } from './affiliation-summary.js';
import { createStatusSummary } from './status-summary.js';
@@ -54,6 +56,13 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
if (options.layoutMode !== undefined && options.layoutMode !== 'fixed' && options.layoutMode !== 'auto') throw new TypeError('layoutMode must be "fixed" or "auto"');
const layoutMode = options.layoutMode ?? 'fixed';
const expanded = view === 'composition' && layoutMode === 'auto';
if (expanded && options.dragDropEnabled !== undefined && typeof options.dragDropEnabled !== 'boolean') throw new TypeError('dragDropEnabled must be a boolean');
let dragDropEnabled = expanded && (options.dragDropEnabled ?? false);
let expandedEditing: ExpandedEditing | undefined;
let autoLayout = resolveAutoLayout(expanded ? options.autoLayout : undefined);
let interactionOptions = resolveInteractions(expanded ? options.interactions : undefined);
let resetVisibility = false;
let renderedLayoutKey: string | undefined;
const expandedCompanyPreset = expanded ? getCompanyColorPreset(options.companyId ?? 'hanmac') : undefined;
if (expanded && !expandedCompanyPreset) throw new TypeError('companyId must be a registered company preset in Auto mode');
const topNodes = expanded ? freeze(structuredClone(options.companyTopNodes ?? {})) : {};
@@ -67,15 +76,22 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
};
let selectedCompanies = expanded ? copySelection(options.selectedCompanyIds) : undefined;
let availableCompanies: string[] = [];
let latestData: unknown;
let latestData: OrgChartDataset | undefined;
let moveValidator: ((request: OrgChartMoveRequest) => OrgChartMoveValidation) | undefined;
let moveMessage = '';
let moveStatus = 'idle';
let blockPointerClick = false;
let focusEmployee: string | undefined;
const collapsedOrganizations = new Set<string>();
const initializedOrganizations = new Set<string>();
let expandedViewport: ExpandedViewport | undefined;
let fitNext = true;
let focusOrganization: string | undefined;
const readOnly = view === 'composition' && options.displayMode === 'readOnly';
const organizationLinks: Record<string, string> = Object.create(null);
if (options.onEmployeeClick !== undefined && typeof options.onEmployeeClick !== 'function') throw new TypeError('onEmployeeClick must be a function');
const employeeClickCallback = options.onEmployeeClick;
if (options.onMove !== undefined && typeof options.onMove !== 'function') throw new TypeError('onMove must be a function');
let employeeClickCallback = options.onEmployeeClick;
for (const [id, value] of Object.entries(options.organizationLinks ?? {})) {
if (value === undefined || value === '') continue;
if (typeof value !== 'string') throw new TypeError('organizationLinks values must be URL strings');
@@ -131,6 +147,49 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
if (!container) throw new Error('Mount OrgChart before update or reload');
}
const moveRequest = (source: HTMLElement, target: HTMLElement): OrgChartMoveRequest => ({
kind: source.matches('.hm-orgchart-employee') ? 'employee' : 'organization',
sourceId: source.dataset.employeeId ?? source.dataset.organizationId!, targetOrganizationId: target.dataset.organizationId!,
});
function validateMove(request: OrgChartMoveRequest): OrgChartMoveValidation {
if (!dragDropEnabled) return { allowed: false, code: 'EDITING_DISABLED', message: 'Drag & Drop이 OFF입니다. 조직 이동을 사용하려면 ON으로 설정하세요.' };
// An explicitly configured company top card also owns a protected reference.
if (request?.kind === 'employee' && Object.values(topNodes).some(top => top.employeeId === request.sourceId)) {
return { allowed: false, code: 'LEADER_PROTECTED', message: '회사 상단에 지정된 직원은 상단 직원 지정 정책을 먼저 변경해야 이동할 수 있습니다.' };
}
return moveValidator?.(request) ?? { allowed: false, code: 'INVALID_DATA', message: '조직 데이터를 불러온 뒤 이동하세요.' };
}
function notifyMove(result: OrgChartMoveResult): void {
try { options.onMove?.(result); } catch { /* Host callbacks never own the Core transaction. */ }
}
async function move(request: OrgChartMoveRequest): Promise<OrgChartMoveResult> {
assertMounted();
if (!expanded) throw new Error('Organization editing is available only in Auto mode');
const policy = validateMove(request);
let result: OrgChartMoveResult = !latestData || state.status !== 'ready'
? { moved: false, code: 'INVALID_DATA', message: '조직 데이터를 불러온 뒤 이동하세요.' }
: !policy.allowed ? { moved: false, code: policy.code, message: policy.message }
: applyOrgChartMove(latestData, request);
if (!result.moved) {
moveMessage = `이동 실패 · ${result.message}`; moveStatus = 'failure';
const feedback = content?.querySelector<HTMLElement>('.hm-orgchart-move-feedback');
if (feedback) { feedback.textContent = moveMessage; feedback.dataset.moveStatus = moveStatus; }
notifyMove(result); return result;
}
const label = request.kind === 'employee' ? result.data.employees.find(item => item.id === request.sourceId)?.name
: result.data.organizations.find(item => item.id === request.sourceId)?.name;
const target = result.data.organizations.find(item => item.id === request.targetOrganizationId)!;
moveMessage = `이동 완료 · ${label} → ${target.name}`; moveStatus = 'success';
focusEmployee = request.kind === 'employee' ? request.sourceId : undefined;
focusOrganization = request.targetOrganizationId; fitNext = false;
const { version } = begin();
try { await apply(result.data, version); }
catch { fail(version, [{ code: 'CORE_RENDER', path: 'core', message: 'Move rerender failed' }]); }
if (!active(version) || state.status !== 'ready') result = { moved: false, code: 'INVALID_DATA', message: '이동 중 다른 데이터 요청이 시작되었거나 화면을 갱신할 수 없습니다.' };
if (active(version)) notifyMove(result);
return result;
}
function begin(): { version: number; signal: AbortSignal } {
request?.abort();
const Abort = container?.ownerDocument.defaultView?.AbortController ?? AbortController;
@@ -147,12 +206,14 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
employeeDialog?.close();
contentGeneration?.abort();
contentGeneration = undefined;
expandedEditing = undefined;
engine?.dispose();
engine = undefined;
renderContext = undefined;
viewport = undefined;
expandedViewport = undefined;
latestData = undefined;
moveValidator = undefined;
content?.replaceChildren();
}
@@ -190,6 +251,7 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
card.tabIndex = 0;
card.setAttribute('role', 'button');
if (!employeeClickCallback) card.setAttribute('aria-haspopup', 'dialog');
else card.removeAttribute('aria-haspopup');
const name = card.querySelector('.hm-orgchart-person-name')?.textContent ?? '';
const position = card.querySelector('.hm-orgchart-person-role')?.textContent ?? '';
card.setAttribute('aria-label', `${name} ${position} 직원 정보 보기`);
@@ -230,16 +292,17 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
const issues = [...companyState.issues, ...validateTopNodes(data, normalized.roots, companyState.companies, topNodes)];
if (issues.length) { fail(version, issues); return; }
availableCompanies = companyState.companyIds;
const validIds = new Set(data.organizations.map(org => org.id));
for (const id of collapsedOrganizations) if (!validIds.has(id)) collapsedOrganizations.delete(id);
applyInitialVisibility(data.organizations, collapsedOrganizations, initializedOrganizations, autoLayout.initialVisibleDepth, resetVisibility);
resetVisibility = false;
latestData = data;
moveValidator = createOrgChartMoveValidator(data);
}
const summary = freeze(calculateSummary(data, policy));
const topLeaderIds = new Set(view === 'composition' ? normalized.roots.filter(node => node.organization.type === 'root' && node.organization.leaderId).map(node => node.organization.leaderId!) : []);
const nextContext: RenderContext = { data, summary, orderedOrganizations: [], employeesByOrganization: normalized.employeesByOrganization, topLeaderIds, readOnly: readOnly || expanded, organizationLinks, expandedCompanyPreset,
organizationCompanies: companyState?.companies, collapsedOrganizations: expanded ? collapsedOrganizations : undefined,
companyTopNodes: topNodes, employeeConnections, toggleExpanded: id => {
if (destroyed || !latestData) return;
companyTopNodes: topNodes, employeeConnections, autoLayout: expanded ? autoLayout : undefined, interactions: expanded ? interactionOptions : undefined, toggleExpanded: id => {
if (destroyed || !latestData || !interactionOptions.collapse) return;
if (collapsedOrganizations.has(id)) collapsedOrganizations.delete(id); else collapsedOrganizations.add(id);
focusOrganization = id; fitNext = false;
const { version } = begin();
@@ -264,6 +327,7 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
if (LoadedEngine) Engine = LoadedEngine;
const document = content!.ownerDocument;
const previousViewport = expandedViewport?.state();
const previousManualPosition = expandedViewport?.hasManualPosition();
employeeDialog?.close();
contentGeneration?.abort();
const Abort = document.defaultView?.AbortController ?? AbortController;
@@ -275,10 +339,18 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
}
const activeElement = root!.shadowRoot?.activeElement;
if (needsEngine) {
const layoutKey = expanded ? `${autoLayout.type}:${autoLayout.hybridStartDepth}` : 'fixed';
// Upstream init merges old options. Rebuild only the engine when changing
// direction/vertical policy so obsolete verticalLevel cannot survive LR.
if (engine && renderedLayoutKey !== layoutKey) { engine.dispose(); engine = undefined; }
if (engine) engine.update(tree);
else engine = createEngineAdapter(Engine!, viewport!, tree, (node, value, signal) => {
if (renderContext) decorateNode(node, value, renderContext, signal, target => engine?.toggle(target));
});
}, expanded ? autoEngineOptions(autoLayout) : undefined, expanded ? {
canDrop: (source, target) => validateMove(moveRequest(source, target)).allowed,
onDrop: (source, target) => { void move(moveRequest(source, target)); },
} : undefined);
renderedLayoutKey = layoutKey;
}
// If regeneration removed keyboard focus, offer the stable viewport next.
const nextContent = view === 'composition' ? expanded
@@ -292,8 +364,25 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
const toolbar = document.createElement('div');
toolbar.className = 'hm-orgchart-expanded-toolbar';
nextContent.insertBefore(toolbar, viewport!);
expandedViewport = createExpandedViewport(viewport!, toolbar, contentGeneration.signal, zoom, previousViewport, fitNext);
expandedViewport = createExpandedViewport(viewport!, toolbar, contentGeneration.signal,
{ ...zoom, zoomEnabled: interactionOptions.zoom, panEnabled: interactionOptions.pan }, previousViewport, fitNext, previousManualPosition);
fitNext = false;
const feedback = document.createElement('p');
feedback.className = 'hm-orgchart-move-feedback'; feedback.id = `${prefix}-move-feedback`;
feedback.setAttribute('role', 'status'); feedback.setAttribute('aria-live', 'polite'); feedback.setAttribute('aria-atomic', 'true');
feedback.dataset.moveStatus = moveStatus;
feedback.textContent = moveMessage || (dragDropEnabled
? 'Drag & Drop ON · 카드/제목: 이동 · Alt+M: 키보드 이동 · 빈 공간: Pan'
: 'Drag & Drop OFF · 직원 정보·그룹 접기·빈 공간 Pan 사용 가능');
nextContent.insertBefore(feedback, viewport!);
viewport!.dataset.dragDropEnabled = String(dragDropEnabled);
expandedEditing = createExpandedEditing(viewport!, feedback, contentGeneration.signal, engine!, validateMove,
request => { void move(request); }, () => { blockPointerClick = true; }, dragDropEnabled);
for (const source of nextContent.querySelectorAll<HTMLElement>('.hm-orgchart-employee, .hm-orgchart-expanded-toggle')) {
if (dragDropEnabled) source.setAttribute('aria-keyshortcuts', 'Alt+M');
else source.removeAttribute('aria-keyshortcuts');
source.setAttribute('aria-describedby', feedback.id);
}
const selection = document.createElement('p');
selection.className = 'hm-orgchart-expanded-selection';
selection.setAttribute('aria-live', 'polite');
@@ -311,7 +400,9 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
prepareEmployeeCards(nextContent);
content!.replaceChildren(nextContent);
const restoreFocus = !!activeElement && (activeElement === viewport || !activeElement.isConnected);
const focusTarget = focusOrganization ? [...content!.querySelectorAll<HTMLButtonElement>('.hm-orgchart-expanded-toggle')].find(button => button.dataset.organizationId === focusOrganization) : undefined;
const focusTarget = (focusEmployee ? [...content!.querySelectorAll<HTMLElement>('.hm-orgchart-employee')].find(card => card.dataset.employeeId === focusEmployee) : undefined)
?? (focusOrganization ? [...content!.querySelectorAll<HTMLButtonElement>('.hm-orgchart-expanded-toggle')].find(button => button.dataset.organizationId === focusOrganization) : undefined);
focusEmployee = undefined;
focusOrganization = undefined;
if (focusTarget) focusTarget.focus({ preventScroll: true });
else if (restoreFocus) (expanded ? viewport! : readOnly ? shell! : viewport ?? content!.querySelector<HTMLElement>('.hm-orgchart-summary-scroll') ?? shell!).focus({ preventScroll: true });
@@ -323,7 +414,7 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
async function reload(nextSource?: OrgChartDataSource): Promise<void> {
assertMounted();
if (expanded) fitNext = true;
if (expanded) { fitNext = true; moveMessage = ''; moveStatus = 'idle'; }
if (nextSource) {
if (typeof nextSource.load !== 'function') throw new TypeError('An OrgChartDataSource is required');
source = nextSource;
@@ -391,6 +482,14 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
const Abort = document.defaultView?.AbortController ?? AbortController;
interactions = new Abort();
employeeDialog = createEmployeeInfoDialog(shell, interactions.signal, prefix, readOnly);
if (expanded) {
// This capture guard survives the generation replaced by a successful drop.
shell.addEventListener('pointerdown', () => { blockPointerClick = false; }, { capture: true, signal: interactions.signal });
shell.addEventListener('click', event => {
if (!blockPointerClick || event.detail === 0) return;
blockPointerClick = false; event.preventDefault(); event.stopImmediatePropagation();
}, { capture: true, signal: interactions.signal });
}
content.addEventListener('click', activateEmployee, { signal: interactions.signal });
content.addEventListener('keydown', event => {
if (event.key === 'Enter' || event.key === ' ') activateEmployee(event);
@@ -399,6 +498,7 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
},
async update(input) {
assertMounted();
if (expanded) fitNext = true;
// Capture before begin() invokes callbacks that can mutate consumer input.
let captured: unknown;
try { captured = snapshot(input); }
@@ -444,8 +544,58 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or
if (latestData) { const { version } = begin(); await apply(latestData, version); }
},
getSelectedCompanies() { return Object.freeze([...(selectedCompanies ?? availableCompanies)]); },
zoomTo(scale) { expandedViewport?.zoomTo(scale); },
panBy(x, y) { expandedViewport?.panBy(x, y); },
async setAutoLayout(patch) {
assertMounted();
if (!expanded) throw new Error('Auto layout configuration is available only in Auto mode');
const next = resolveAutoLayout({ ...autoLayout, ...patch });
resetVisibility = resetVisibility || next.initialVisibleDepth !== autoLayout.initialVisibleDepth;
autoLayout = next; fitNext = true;
if (latestData) { const { version } = begin(); await apply(latestData, version); }
},
getAutoLayout() { return autoLayout; },
setEmployeeClickHandler(handler) {
assertMounted();
if (!expanded) throw new Error('Popup ownership changes are available only in Auto mode');
if (handler !== undefined && typeof handler !== 'function') throw new TypeError('Employee click handler must be a function or undefined');
employeeDialog?.close();
employeeClickCallback = handler;
if (content) prepareEmployeeCards(content);
},
async setInteractions(patch) {
assertMounted();
if (!expanded) throw new Error('Interaction configuration is available only in Auto mode');
interactionOptions = resolveInteractions({ ...interactionOptions, ...patch });
fitNext = false;
if (latestData) { const { version } = begin(); await apply(latestData, version); }
},
getInteractions() { return interactionOptions; },
setDragDropEnabled(enabled) {
assertMounted();
if (!expanded) throw new Error('Drag & Drop configuration is available only in Auto mode');
if (typeof enabled !== 'boolean') throw new TypeError('dragDropEnabled must be a boolean');
if (enabled === dragDropEnabled) return;
dragDropEnabled = enabled;
expandedEditing?.setEnabled(enabled);
if (viewport) viewport.dataset.dragDropEnabled = String(enabled);
const feedback = content?.querySelector<HTMLElement>('.hm-orgchart-move-feedback');
const cancelled = feedback?.dataset.moveStatus === 'cancelled';
moveMessage = ''; moveStatus = cancelled ? 'cancelled' : 'idle';
if (feedback) {
feedback.dataset.moveStatus = moveStatus;
feedback.textContent = (cancelled ? '이동을 취소했습니다. ' : '') + (enabled
? 'Drag & Drop ON · 카드/제목: 이동 · Alt+M: 키보드 이동 · 빈 공간: Pan'
: 'Drag & Drop OFF · 직원 정보·그룹 접기·빈 공간 Pan 사용 가능');
}
for (const source of content?.querySelectorAll<HTMLElement>('.hm-orgchart-employee, .hm-orgchart-expanded-toggle') ?? []) {
if (enabled) source.setAttribute('aria-keyshortcuts', 'Alt+M');
else source.removeAttribute('aria-keyshortcuts');
}
},
getDragDropEnabled() { return dragDropEnabled; },
move,
getData() { return latestData; },
zoomTo(scale) { if (interactionOptions.zoom) expandedViewport?.zoomTo(scale); },
panBy(x, y) { if (interactionOptions.pan) expandedViewport?.panBy(x, y); },
fitToView() { expandedViewport?.fit(); },
getViewportState() { return expandedViewport?.state(); },
};
packages/org-chart/src/core/org-chart-content.ts
+48 -9
View File
@@ -8,6 +8,7 @@ import { createOrganizationTotals } from './organization-totals.js';
import { createAffiliationBar } from './affiliation-bar.js';
import { applyWorkdeskLayout } from './workdesk-layout.js';
import { addWorkdeskArtwork } from './workdesk-artwork.js';
import { workdeskCanvas } from './workdesk-layout.js';
type SummaryComponent = 'PositionSummary' | 'AffiliationSummary' | 'StatusSummary';
type ContentSlot = 'side' | 'footer' | 'belowTree';
@@ -115,6 +116,11 @@ export function createOrgChartContent(
if (slots.side.childElementCount) stage.append(slots.side);
else content.classList.add('hm-orgchart-composition-no-side');
if (slots.footer.childElementCount) stage.append(slots.footer);
if (stage.dataset.workdeskArtwork) {
heading.dataset.compositionRegion = slots.side.dataset.compositionRegion = 'top';
main.querySelector<HTMLElement>('.hm-orgchart-axis')!.dataset.compositionRegion = tree.dataset.compositionRegion = 'center';
slots.belowTree.dataset.compositionRegion = slots.footer.dataset.compositionRegion = 'bottom';
}
observeStageScale(content, stage, signal, readOnly);
return content;
}
@@ -129,7 +135,7 @@ function observeStageScale(wrapper: HTMLElement, stage: HTMLElement, signal: Abo
const view = wrapper.ownerDocument.defaultView;
if (!view) return;
let frame: number | undefined;
let applied = { scale: NaN, width: NaN, height: NaN };
let applied = { scale: NaN, width: NaN, height: NaN, canvasHeight: NaN, centerOffset: 0 };
const ancestors: HTMLElement[] = [];
const collectAncestors = () => {
// The constructor runs before insertion; discover the real host only once
@@ -175,23 +181,56 @@ function observeStageScale(wrapper: HTMLElement, stage: HTMLElement, signal: Abo
collectAncestors();
const available = wrapper.clientWidth; // integer floor: never overflows the host
const baseWidth = stage.offsetWidth;
const baseHeight = stage.offsetHeight;
const adaptive = fitHeight && stage.dataset.workdeskArtwork === 'true';
const baseHeight = adaptive ? workdeskCanvas.height : stage.offsetHeight;
if (!available || !baseWidth || !baseHeight) return;
let scale = Math.min(1, available / baseWidth);
const availableHeight = fitHeight ? heightLimit() : baseHeight * scale;
if (fitHeight) {
const availableHeight = heightLimit();
scale = Math.min(scale, availableHeight / baseHeight);
}
if (Math.abs(scale - applied.scale) < 0.0005 && baseWidth === applied.width && baseHeight === applied.height) return;
if (!adaptive && Math.abs(scale - applied.scale) < 0.0005 && baseWidth === applied.width && baseHeight === applied.height) return;
if (adaptive && !scale) return;
const canvasHeight = adaptive ? Math.max(baseHeight, availableHeight / scale) : baseHeight;
const scaleChanged = scale !== applied.scale;
applied = { scale, width: baseWidth, height: baseHeight };
stage.style.transform = scale < 1 ? `scale(${scale})` : '';
wrapper.style.height = `${baseHeight * scale}px`;
if (Math.abs(scale - applied.scale) >= 0.000001 || baseWidth !== applied.width || canvasHeight !== applied.canvasHeight) {
stage.style.transform = scale < 1 ? `scale(${scale})` : '';
if (adaptive) stage.style.setProperty('--hm-orgchart-workdesk-stage-height', `${canvasHeight}px`);
wrapper.style.height = `${canvasHeight * scale}px`;
}
let centerOffset = 0;
if (adaptive && canvasHeight > baseHeight + 0.01) {
const origin = stage.getBoundingClientRect();
const local = (element: Element) => {
const rect = element.getBoundingClientRect();
return { top: (rect.top - origin.top) / scale, bottom: (rect.bottom - origin.top) / scale };
};
const center = [...stage.querySelectorAll('.hm-orgchart-axis .hm-orgchart-employee,.hm-orgchart-hub,.hm-orgchart-viewport .hm-orgchart-employee,.hm-orgchart-viewport .hm-orgchart-organization-name,image[data-arrow]')]
.filter(element => element.getClientRects().length).map(local);
const top = [...stage.querySelectorAll('[data-composition-region="top"]')].map(local);
const bottom = [...stage.querySelectorAll('[data-composition-region="bottom"]')].filter(element => element.childElementCount).map(local);
if (center.length && top.length) {
const start = Math.min(...center.map(rect => rect.top)) - applied.centerOffset;
const end = Math.max(...center.map(rect => rect.bottom)) - applied.centerOffset;
const bottomAnchor = bottom.length ? Math.min(...bottom.map(rect => rect.top)) : canvasHeight - (parseFloat(view.getComputedStyle(stage).paddingBottom) || 0);
const target = (Math.max(...top.map(rect => rect.bottom)) + bottomAnchor - start - end) / 2;
// Keep the baseline intact when the screen is short; share only newly
// available height until the entire central chart fits between anchors.
centerOffset = Math.max(0, Math.min(canvasHeight - baseHeight, target));
}
}
if (adaptive && (Math.abs(centerOffset - applied.centerOffset) > 0.01 || !Number.isFinite(applied.scale))) {
stage.style.setProperty('--hm-orgchart-workdesk-center-offset', `${centerOffset.toFixed(4)}px`);
} else centerOffset = applied.centerOffset;
const positionChanged = adaptive && (Math.abs(canvasHeight - applied.canvasHeight) > 0.01 || Math.abs(centerOffset - applied.centerOffset) > 0.01);
applied = { scale, width: baseWidth, height: baseHeight, canvasHeight, centerOffset };
wrapper.dataset.scale = scale.toFixed(4);
wrapper.dataset.baseWidth = String(baseWidth);
wrapper.dataset.baseHeight = String(baseHeight);
// Open tooltips were positioned from pre-scale geometry; let them close.
if (scaleChanged) wrapper.dispatchEvent(new view.CustomEvent('hm-orgchart-scale', { bubbles: true }));
if (adaptive) { wrapper.dataset.canvasHeight = String(canvasHeight); wrapper.dataset.centerOffset = centerOffset.toFixed(4); }
// Open tooltips use the old card bounds. A bounded parent can move the
// central chart without changing scale or emitting a window resize.
if (scaleChanged || positionChanged) wrapper.dispatchEvent(new view.CustomEvent('hm-orgchart-scale', { bubbles: true }));
};
const schedule = () => { if (frame === undefined && !signal.aborted) frame = view.requestAnimationFrame(apply); };
const observer = new view.ResizeObserver(schedule);
packages/org-chart/src/core/render.ts
+8 -1
View File
@@ -6,7 +6,8 @@ import { getDepartmentCardAsset } from './department-card-assets.js';
import type { OrgChartOrganizationLinks } from './types.js';
import type { CompanyColorPreset } from '../company-color-presets.js';
import { decorateExpandedNode } from './expanded-content.js';
import type { OrgChartConnectionDirection, OrgChartTopNode } from './types.js';
import type { OrgChartConnectionDirection, OrgChartTopNode, OrgChartInteractionOptions } from './types.js';
import type { ResolvedAutoLayout } from './auto-layout-policy.js';
const organizationNames = { root: '최상위 조직', division: '부문', office: '실', div: 'Div', cell: '셀', team: '팀' } as const;
@@ -25,6 +26,8 @@ export interface RenderContext {
collapsedOrganizations?: ReadonlySet<string>;
companyTopNodes?: Readonly<Record<string, OrgChartTopNode>>;
employeeConnections?: Readonly<Record<string, OrgChartConnectionDirection>>;
autoLayout?: ResolvedAutoLayout;
interactions?: Readonly<Required<OrgChartInteractionOptions>>;
toggleExpanded?: (organizationId: string) => void;
}
@@ -35,6 +38,10 @@ export function engineTree(roots: OrganizationTreeNode[], prefix: string, contex
context.orderedOrganizations.push(tree.organization);
return {
id: `${prefix}-org-${index}`, name: '', organizationIndex: index, depth, groupVariant: variant,
// Make public (root=Depth 1) semantics explicit rather than depending on
// upstream's detached-DOM ancestor inference during mode reconstruction.
...(context.autoLayout ? { level: depth + 1 } : {}),
...(context.autoLayout?.type === 'tb' && context.autoLayout.hybridOrganizationIds.includes(tree.organization.id) ? { hybrid: true } : {}),
...(tree.children.length && !context.collapsedOrganizations?.has(tree.organization.id) ? { children: tree.children.map((child, childIndex) => convert(child, depth + 1, context.readOnly ? variant : depth === startDepth ? childIndex % 6 : variant)) } : {}),
};
}
packages/org-chart/src/core/types.ts
+49 -2
View File
@@ -1,4 +1,4 @@
import type { Affiliation, ApprovedAggregationPolicy, Employee, OrgChartDataSource, OrgChartSummary, Organization, ValidationIssue } from '../data/index.js';
import type { Affiliation, ApprovedAggregationPolicy, Employee, OrgChartDataSource, OrgChartDataset, OrgChartMoveRequest, OrgChartMoveResult, OrgChartSummary, Organization, ValidationIssue } from '../data/index.js';
export type OrgChartState =
| { readonly status: 'idle' | 'loading' | 'empty' | 'destroyed' }
@@ -14,6 +14,27 @@ export type OrgChartDisplayMode = 'interactive' | 'readOnly';
* with natural overflow; Fixed preserves the Workdesk composition. */
export type OrgChartLayoutMode = 'fixed' | 'auto';
/** Independent Auto presentation policies. Root organizations are Depth 1. */
export type OrgChartAutoLayoutType = 'tb' | 'lr' | 'hybrid';
export interface OrgChartAutoLayoutOptions {
type?: OrgChartAutoLayoutType;
/** Hybrid only. The first displayed depth rendered as parent-local lists. */
hybridStartDepth?: 2 | 3 | 4;
/** Initial expansion policy; changing it intentionally resets collapse state.
* Later user toggles survive layout and data changes for valid organizations. */
initialVisibleDepth?: 1 | 2 | 3 | 'all';
/** TB only. Each listed organization's descendants use a local vertical list.
* Cannot be combined with LR or global Hybrid. */
hybridOrganizationIds?: readonly string[];
}
export interface OrgChartInteractionOptions {
/** Auto only; each optional feature defaults to enabled and is independent. */
collapse?: boolean;
zoom?: boolean;
/** Disables manual pointer/arrow/API Pan; keyboard focus reveal stays available. */
pan?: boolean;
}
/** Links are keyed by the existing organization ID. Only 1Depth titles use them. */
export type OrgChartOrganizationLinks = Readonly<Record<string, string | undefined>>;
@@ -52,8 +73,15 @@ export interface OrgChartOptions {
companyId?: string;
/** Auto only. undefined means all companies; [] is an explicit empty selection. */
selectedCompanyIds?: readonly string[];
/** Auto only; Fixed ignores these independent presentation options. */
autoLayout?: OrgChartAutoLayoutOptions;
interactions?: OrgChartInteractionOptions;
/** Auto-only employee/group editing. Omission disables pointer, keyboard and
* handle moves; Pan and employee information remain independent. Fixed ignores it. */
dragDropEnabled?: boolean;
companyTopNodes?: Readonly<Record<string, OrgChartTopNode>>;
/** Actual staff connector route, default top. Leaders always connect from above. */
/** Actual TB/Hybrid staff connector route, default top; their leaders connect
* from above. LR always routes employees from the left. */
employeeConnections?: Readonly<Record<string, OrgChartConnectionDirection>>;
zoom?: { min?: number; max?: number; step?: number };
/** No entry (or an empty URL) keeps an ordinary title. HTTP(S) and relative URLs are supported. */
@@ -61,6 +89,9 @@ export interface OrgChartOptions {
/** Optional host-owned information UI. When supplied, it replaces the default read-only dialog.
* Called for every employee card in interactive and readOnly modes. */
onEmployeeClick?: (employee: Employee, context: OrgChartEmployeeClickContext) => void;
/** Auto-only browser-state editing. Called after a move or policy rejection;
* never saves to the source or a server. Consumer callback errors are isolated. */
onMove?: (result: OrgChartMoveResult) => void;
onStateChange?: (state: OrgChartState) => void;
}
@@ -75,6 +106,22 @@ export interface OrgChartHandle {
/** Auto view state is separate from the immutable source. Fixed rejects selection changes. */
setSelectedCompanies(ids?: readonly string[]): Promise<void>;
getSelectedCompanies(): readonly string[];
/** Merge an Auto-only presentation patch without remounting or losing valid collapse state. */
setAutoLayout(options: OrgChartAutoLayoutOptions): Promise<void>;
getAutoLayout(): Readonly<OrgChartAutoLayoutOptions>;
/** Auto only. Change popup ownership without rebuilding or changing view state.
* undefined restores the existing Core dialog. */
setEmployeeClickHandler(handler?: OrgChartOptions['onEmployeeClick']): void;
/** Auto only. Merge independent feature flags while retaining view state. */
setInteractions(options: OrgChartInteractionOptions): Promise<void>;
getInteractions(): Readonly<OrgChartInteractionOptions>;
/** Auto only. Cancel active editing without reloading or resetting completed moves. */
setDragDropEnabled(enabled: boolean): void;
getDragDropEnabled(): boolean;
/** Auto only. Uses the same policy as pointer and keyboard moves. */
move(request: OrgChartMoveRequest): Promise<OrgChartMoveResult>;
/** Immutable current Auto dataset, including hidden companies and local moves. */
getData(): OrgChartDataset | undefined;
zoomTo(scale: number): void;
panBy(x: number, y: number): void;
fitToView(): void;
packages/org-chart/src/core/vendor.d.ts
Vendored
+7
View File
@@ -16,6 +16,10 @@ declare module 'orgchart' {
draggable: boolean;
exportButton: boolean;
chartClass: string;
direction?: 't2b' | 'l2r';
verticalLevel?: number;
visibleLevel?: number;
dropCriteria?: (source: HTMLElement, parent: HTMLElement | null, target: HTMLElement) => boolean;
nodeTemplate: () => string;
createNode: (node: HTMLElement, data: EngineNode) => void;
}
@@ -34,5 +38,8 @@ declare module 'orgchart' {
unbindPan(): void;
unbindZoom(): void;
detachMinimap(): void;
filterAllowedDropNodes(source: HTMLElement): void;
dropHandler(event: { dropZone: HTMLElement }): Promise<void>;
dragendHandler(): void;
}
}
packages/org-chart/src/core/workdesk-artwork.ts
+24 -3
View File
@@ -66,7 +66,16 @@ export function addWorkdeskArtwork(stage: HTMLElement, hub: HTMLElement, signal:
curves.setAttribute('transform', 'translate(162 202)');
overlay.append(curves);
for (const [id, d] of hubPaths) path(id, d, curves);
path('representative-to-hub', 'M935 142V286').setAttribute('transform', 'translate(0 -17)');
const representative = path('representative-to-hub', 'M935 142V286');
representative.setAttribute('transform', 'translate(0 -17)');
// Original Workdesk org-arrow-jang-head: a solid upward chevron, separate
// from the five team PNG arrows and the dashed representative connector.
const representativeHead = document.createElementNS(svgNamespace, 'path');
representativeHead.dataset.arrowHead = 'representative';
representativeHead.setAttribute('d', 'M0.00652573 5.54699C-0.0317927 5.092 0.0997532 4.66961 0.37176 4.32434L3.97332 0.436642C4.57335 -0.142366 5.40409 -0.144766 6.01239 0.424923L9.63348 4.33508C10.7765 5.85831 9.00989 7.82069 7.56414 6.63684L4.99774 3.88781L2.44207 6.62609C1.53083 7.44647 0.11378 6.8181 0.00652573 5.54699Z');
representativeHead.setAttribute('fill', '#45639F');
representativeHead.setAttribute('transform', 'translate(930 121.2969)');
overlay.append(representativeHead);
const business = path('hub-to-business-management', 'M834 204C650 204 250 235 105 256.2');
for (const [id, source, x, y, width, height] of arrows) {
const image = document.createElementNS(svgNamespace, 'image');
@@ -86,10 +95,22 @@ export function addWorkdeskArtwork(stage: HTMLElement, hub: HTMLElement, signal:
if (signal.aborted || !stage.isConnected) return;
const header = stage.querySelector<HTMLElement>('.node[data-organization-id="business-management"] .hm-orgchart-organization-name');
if (!header) return;
const origin = stage.getBoundingClientRect();
// The central chart and overlay move together inside the adaptive stage.
// Measuring against the overlay avoids adding that offset a second time.
const origin = overlay.getBoundingClientRect();
const bounds = header.getBoundingClientRect();
const scale = origin.width / stage.offsetWidth;
const scale = origin.width / workdeskCanvas.width;
if (!scale) return;
const card = stage.querySelector<HTMLElement>('.hm-orgchart-top-leaders .hm-orgchart-employee');
if (card) {
const leader = card.getBoundingClientRect();
const axis = (leader.left + leader.width / 2 - origin.left) / scale;
// Attach the upward tip to the live card's bottom edge in the same
// overlay coordinates, including proportional scale and center offset.
const headTop = (leader.bottom - origin.top) / scale;
representativeHead.setAttribute('transform', `translate(${(axis - 5).toFixed(4)} ${headTop.toFixed(4)})`);
representative.setAttribute('d', `M${axis.toFixed(4)} ${(headTop + 7 + 17).toFixed(4)}V286`);
}
const x = (bounds.left + bounds.width / 2 - origin.left) / scale;
const y = (bounds.top - origin.top) / scale + 2;
business.setAttribute('d', `M834 204C650 204 250 235 ${x.toFixed(2)} ${y.toFixed(2)}`);
packages/org-chart/src/data/examples.test.ts
+111
View File
@@ -0,0 +1,111 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import fixture from '../../../../examples/org-chart/data-expanded-large.json';
import { companyColorPresets, type CompanyId } from '../company-color-presets.js';
import {
calculateSummary, createOrgChartExampleDataset, JsonOrgChartDataSource,
normalizeOrgChartDataset, snapshotOrgChartDataset, validateOrgChartDataset,
type OrgChartDataset, type OrgChartExampleEmployeeCount,
} from './index.js';
const base = fixture as OrgChartDataset;
const companies = Object.keys(companyColorPresets) as CompanyId[];
const sizes: OrgChartExampleEmployeeCount[] = [20, 100, 300];
function assertContract(dataset: OrgChartDataset) {
const result = validateOrgChartDataset(dataset);
assert.equal(result.valid, true, result.valid ? undefined : JSON.stringify(result.issues));
assert.equal(new Set(dataset.employees.map(employee => employee.id)).size, dataset.employees.length);
assert.equal(new Set(dataset.organizations.map(org => org.id)).size, dataset.organizations.length);
assert.equal(new Set(dataset.affiliations.map(affiliation => affiliation.id)).size, dataset.affiliations.length);
const summary = calculateSummary(dataset).raw;
assert.equal(summary.total, dataset.employees.length, 'leaders count once as employees');
const pending = normalizeOrgChartDataset(dataset).roots.map(node => ({ node, depth: 1 }));
let maximumDepth = 0;
while (pending.length) {
const { node, depth } = pending.pop()!;
maximumDepth = Math.max(maximumDepth, depth);
pending.push(...node.children.map(child => ({ node: child, depth: depth + 1 })));
}
assert.ok(maximumDepth >= 3);
assert.ok(new Set(Object.values(summary.byOrganization).map(value => value.direct)).size > 1, 'unequal organization membership');
}
for (const employeeCount of sizes) {
test(`total ${employeeCount} contains exactly that many unique employees across all seven preset companies`, () => {
const dataset = createOrgChartExampleDataset(base, { scope: 'total', employeeCount });
assertContract(dataset);
assert.equal(dataset.employees.length, employeeCount);
assert.deepEqual(dataset.affiliations.map(item => item.id), companies);
for (const companyId of companies) assert.ok(dataset.employees.some(employee => employee.affiliationId === companyId));
});
test(`per-company ${employeeCount} supports every company, pairs, and the full seven-company selection`, () => {
for (const companyId of companies) {
const dataset = createOrgChartExampleDataset(base, { scope: 'per-company', employeeCount, companyIds: [companyId] });
assertContract(dataset);
assert.equal(dataset.employees.length, employeeCount);
assert.ok(dataset.organizations.every(org => org.companyId === companyId));
assert.ok(dataset.employees.every(employee => employee.affiliationId === companyId));
}
for (const companyIds of [['hanmac', 'saman'], companies] as CompanyId[][]) {
const dataset = createOrgChartExampleDataset(base, { scope: 'per-company', employeeCount, companyIds });
assertContract(dataset);
assert.equal(dataset.employees.length, employeeCount * companyIds.length);
for (const id of companyIds) assert.equal(dataset.employees.filter(employee => employee.affiliationId === id).length, employeeCount);
}
});
}
test('total company filtering preserves company allocation without redistribution or lost ancestors', () => {
for (const employeeCount of sizes) {
const complete = createOrgChartExampleDataset(base, { scope: 'total', employeeCount });
const selected = createOrgChartExampleDataset(base, { scope: 'total', employeeCount, companyIds: ['saman', 'hanmac'] });
assertContract(selected);
assert.deepEqual(selected.employees, complete.employees.filter(employee => ['hanmac', 'saman'].includes(employee.affiliationId)));
assert.deepEqual(selected.organizations.map(org => org.id), complete.organizations.filter(org => ['hanmac', 'saman'].includes(org.companyId!)).map(org => org.id));
}
});
test('total 300 reuses every P5-3 large employee record and the original organization IDs', () => {
const dataset = createOrgChartExampleDataset(base, { scope: 'total', employeeCount: 300 });
const originalById = new Map(base.employees.map(employee => [employee.id, employee]));
assert.equal(dataset.employees.length, base.employees.length);
for (const employee of dataset.employees) assert.deepEqual(employee, originalById.get(employee.id));
assert.deepEqual(dataset.organizations, base.organizations);
});
test('selections are deterministic sets and snapshots never mutate the source or another result', async () => {
const before = structuredClone(base);
const frozen = snapshotOrgChartDataset(base);
const first = createOrgChartExampleDataset(frozen, { scope: 'per-company', employeeCount: 100, companyIds: ['saman', 'hanmac', 'saman'] });
const equivalent = createOrgChartExampleDataset(frozen, { scope: 'per-company', employeeCount: 100, companyIds: ['hanmac', 'saman'] });
assert.deepEqual(first, equivalent);
assert.notEqual(first, equivalent);
assert.notEqual(first.employees[0], equivalent.employees[0]);
assert.ok(Object.isFrozen(first) && Object.isFrozen(first.organizations) && Object.isFrozen(first.employees[0]));
assert.throws(() => { first.employees[0]!.name = 'changed'; }, TypeError);
assert.deepEqual(base, before);
assert.deepEqual(await new JsonOrgChartDataSource(first).load(), first);
const single = createOrgChartExampleDataset(base, { scope: 'per-company', employeeCount: 100, companyIds: ['saman'] });
assert.deepEqual(single.employees, first.employees.filter(employee => employee.affiliationId === 'saman'));
});
test('expansion resolves source IDs that already use the generated employee namespace', () => {
const template = structuredClone(base);
const employee = template.employees.find(employee => employee.affiliationId === 'hanmac' && !template.organizations.some(org => org.leaderId === employee.id))!;
employee.id = 'p7-virtual-hanmac-050';
const dataset = createOrgChartExampleDataset(template, { scope: 'per-company', employeeCount: 100 });
assertContract(dataset);
assert.ok(dataset.employees.some(employee => employee.id === 'p7-virtual-hanmac-050-example'));
});
test('invalid scale, company IDs, empty view selection, and incomplete templates fail explicitly', () => {
assert.throws(() => createOrgChartExampleDataset(base, { scope: 'invalid' as 'total', employeeCount: 20 }), /scope/);
assert.throws(() => createOrgChartExampleDataset(base, { scope: 'total', employeeCount: 99 as 20 }), /employeeCount/);
assert.throws(() => createOrgChartExampleDataset(base, { scope: 'total', employeeCount: 20, companyIds: ['unknown' as CompanyId] }), /presets/);
assert.throws(() => createOrgChartExampleDataset(base, { scope: 'total', employeeCount: 20, companyIds: [] }), /empty view selection/);
const incomplete = structuredClone(base);
incomplete.employees = incomplete.employees.filter(employee => employee.affiliationId !== 'baron');
incomplete.organizations.filter(org => org.companyId === 'baron').forEach(org => { org.leaderId = null; });
assert.throws(() => createOrgChartExampleDataset(incomplete, { scope: 'total', employeeCount: 20 }), /all seven/);
});
packages/org-chart/src/data/examples.ts
+124
View File
@@ -0,0 +1,124 @@
import { companyColorPresets, type CompanyId } from '../company-color-presets.js';
import { normalizeOrgChartDataset } from './normalize.js';
import { snapshotOrgChartDataset } from './snapshot.js';
import { validateOrgChartDataset } from './validate.js';
import type { Employee, OrgChartDataset, Organization } from './types.js';
export type OrgChartExampleScope = 'total' | 'per-company';
export type OrgChartExampleEmployeeCount = 20 | 100 | 300;
export interface OrgChartExampleSelection {
/** Total is allocated across all seven companies before company filtering. */
scope: OrgChartExampleScope;
employeeCount: OrgChartExampleEmployeeCount;
/** Omission selects all companies. An empty selection belongs to view state. */
companyIds?: readonly CompanyId[];
}
const companyIds = Object.keys(companyColorPresets) as CompanyId[];
/** Deterministic virtual examples derived from an existing seven-company fixture.
* This provider is independent of layout, React and popup policy. Use its result
* with the existing JsonOrgChartDataSource; no production/API source is replaced.
*
* The P5-3 large fixture's hierarchy and employee records are reused. Larger
* company examples add virtual, company-namespaced employees. Neither the fixture
* nor a previously returned dataset is modified. Total-company selection never
* redistributes unselected companies' staff into a remaining company.
*/
export function createOrgChartExampleDataset(template: OrgChartDataset, selection: OrgChartExampleSelection): OrgChartDataset {
if (!selection || !['total', 'per-company'].includes(selection.scope)) throw new RangeError('Example scope must be total or per-company.');
if (![20, 100, 300].includes(selection.employeeCount)) throw new RangeError('Example employeeCount must be 20, 100 or 300.');
const requested = selection.companyIds ?? companyIds;
if (!Array.isArray(requested) || !requested.length) throw new RangeError('Example data requires at least one company; use an empty view selection to hide all companies.');
if (requested.some(id => !Object.hasOwn(companyColorPresets, id))) throw new RangeError('Example companyIds require registered company presets.');
// Preset order makes equivalent set selections identical, including IDs/order.
const selected = companyIds.filter(id => requested.includes(id));
const validation = validateOrgChartDataset(template);
if (!validation.valid) throw new TypeError('Example template must be a valid OrgChart dataset.');
const base = validation.data;
const organizationCompanies = resolveTemplateCompanies(base);
const rosters = new Map<CompanyId, Employee[]>(companyIds.map(id => [id, []]));
for (const employee of base.employees) {
const company = organizationCompanies.get(employee.organizationId)!;
if (employee.affiliationId !== company) throw new TypeError('Example employees must belong to their organization company affiliation.');
rosters.get(company)!.push(employee);
}
if (companyIds.some(id => !rosters.get(id)!.length)) throw new TypeError('Example template must contain employees from all seven companies.');
const counts = selection.scope === 'total'
? allocateTotal(selection.employeeCount, companyIds.map(id => rosters.get(id)!.length))
: companyIds.map(() => selection.employeeCount);
const chosen = new Set<CompanyId>(selected);
const organizations: Organization[] = base.organizations.filter(org => chosen.has(organizationCompanies.get(org.id)!))
.map(org => ({ ...org, companyId: organizationCompanies.get(org.id)! }));
const employees: Employee[] = [];
const existingIds = new Set(base.employees.map(employee => employee.id));
const organizationPool = new Map<CompanyId, Organization[]>(selected.map(id => [id, organizations.filter(org => org.companyId === id && org.parentId !== null)]));
for (const id of selected) {
const roster = rosters.get(id)!;
const count = counts[companyIds.indexOf(id)]!;
employees.push(...roster.slice(0, count).map(employee => ({ ...employee })));
// Unequal weighted placement reuses the original tree instead of cloning it.
const pool = organizationPool.get(id)!;
const weighted = (pool.length ? pool : organizations.filter(org => org.companyId === id))
.flatMap((org, index) => Array.from({ length: 1 + index % 4 }, () => org));
for (let index = roster.length; index < count; index++) {
let employeeId = `p7-virtual-${id}-${String(index + 1).padStart(3, '0')}`;
// A caller fixture may already use our namespace. Resolve collisions without
// changing the input or tying identity to the other selected companies.
while (existingIds.has(employeeId)) employeeId += '-example';
existingIds.add(employeeId);
const organization = weighted[(index - roster.length) % weighted.length]!;
employees.push({
id: employeeId, organizationId: organization.id, affiliationId: id,
name: `가상직원 ${companyColorPresets[id].companyName} ${String(index + 1).padStart(3, '0')}`,
position: ['사원', '선임', '책임', '수석'][index % 4]!, jobTitle: null,
profileImage: null, workStatus: 'active',
});
}
}
const employeeIds = new Set(employees.map(employee => employee.id));
for (const organization of organizations) if (organization.leaderId && !employeeIds.has(organization.leaderId)) organization.leaderId = null;
const organizationIds = new Set(organizations.map(org => org.id));
return snapshotOrgChartDataset({
...base, organizations, employees,
affiliations: base.affiliations.filter(affiliation => chosen.has(affiliation.id as CompanyId)),
...(base.relations ? { relations: base.relations.filter(relation => organizationIds.has(relation.sourceOrganizationId) && organizationIds.has(relation.targetOrganizationId)) } : {}),
...(base.presentation ? { presentation: { ...base.presentation, organizationOrder: base.presentation.organizationOrder.filter(id => organizationIds.has(id)) } } : {}),
metadata: { ...base.metadata, dataVersion: `p7-example-${selection.scope}-${selection.employeeCount}-${selected.join('_')}`, updateNote: '가상 예시 데이터 · 운영 정보 아님' },
});
}
function resolveTemplateCompanies(data: OrgChartDataset): Map<string, CompanyId> {
const employees = new Map(data.employees.map(employee => [employee.id, employee]));
const result = new Map<string, CompanyId>();
const pending = normalizeOrgChartDataset(data).roots.map(node => ({ node, inherited: undefined as CompanyId | undefined }));
while (pending.length) {
const { node, inherited } = pending.pop()!;
const company = node.organization.companyId ?? inherited ?? (node.organization.leaderId ? employees.get(node.organization.leaderId)?.affiliationId : undefined);
if (!company || !Object.hasOwn(companyColorPresets, company) || (inherited && company !== inherited)) throw new TypeError('Example template requires a consistent registered company on each organization tree.');
result.set(node.organization.id, company as CompanyId);
pending.push(...node.children.map(child => ({ node: child, inherited: company as CompanyId })));
}
return result;
}
/** Largest-remainder allocation, with at least one employee in every company. */
function allocateTotal(total: number, weights: number[]): number[] {
const sum = weights.reduce((value, weight) => value + weight, 0);
const targets = weights.map(weight => total * weight / sum);
const counts = targets.map(target => Math.max(1, Math.floor(target)));
let current = counts.reduce((value, count) => value + count, 0);
while (current !== total) {
const adding = current < total;
let candidate = -1;
let greatest = -Infinity;
counts.forEach((count, index) => {
if (!adding && count <= 1) return;
const difference = adding ? targets[index]! - count : count - targets[index]!;
if (difference > greatest) { greatest = difference; candidate = index; }
});
counts[candidate]! += adding ? 1 : -1;
current += adding ? 1 : -1;
}
return counts;
}
packages/org-chart/src/data/index.ts
+4
View File
@@ -4,3 +4,7 @@ export { normalizeOrgChartDataset } from './normalize.js';
export { calculateSummary } from './summary.js';
export { snapshotOrgChartDataset } from './snapshot.js';
export { JsonOrgChartDataSource, OrgChartSourceError, type OrgChartSourceErrorCode, type JsonOrgChartDataSourceOptions } from './source.js';
export { createOrgChartExampleDataset } from './examples.js';
export type { OrgChartExampleScope, OrgChartExampleEmployeeCount, OrgChartExampleSelection } from './examples.js';
export { createOrgChartMoveValidator, validateOrgChartMove, applyOrgChartMove } from './moves.js';
export type { OrgChartMoveRequest, OrgChartMoveFailureCode, OrgChartMoveFailure, OrgChartMoveValidation, OrgChartMoveResult } from './moves.js';
packages/org-chart/src/data/moves.test.ts
+214
View File
@@ -0,0 +1,214 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import { applyOrgChartMove, createOrgChartMoveValidator, validateOrgChartMove, type OrgChartMoveFailureCode, type OrgChartMoveRequest } from './moves.js';
import { calculateSummary } from './summary.js';
import { normalizeOrgChartDataset } from './normalize.js';
import { snapshotOrgChartDataset } from './snapshot.js';
import { validateOrgChartDataset } from './validate.js';
import type { Employee, OrgChartDataset } from './types.js';
function member(id: string, organizationId: string, affiliationId = 'company-a'): Employee {
return { id, organizationId, affiliationId, name: `가상 ${id}`, position: '선임', jobTitle: null, profileImage: './profiles/virtual.png', workStatus: 'active' };
}
function fixture(): OrgChartDataset {
return {
schemaVersion: '0.1-draft',
organizations: [
{ id: 'a-root', companyId: 'company-a', parentId: null, name: '가상 A', type: 'root', leaderId: 'root-leader', displayOrder: 0 },
{ id: 'a-division', parentId: 'a-root', name: '가상 본부', type: 'division', leaderId: null, displayOrder: 4 },
{ id: 'a-team', parentId: 'a-division', name: '가상 팀', type: 'team', leaderId: 'team-leader', displayOrder: 8 },
{ id: 'a-cell', parentId: 'a-team', name: '가상 셀', type: 'cell', leaderId: null, displayOrder: 7 },
{ id: 'a-other', parentId: 'a-root', name: '가상 다른 본부', type: 'division', leaderId: null, displayOrder: 2 },
{ id: 'b-root', companyId: 'company-b', parentId: null, name: '가상 B', type: 'root', leaderId: null, displayOrder: 1 },
{ id: 'b-team', parentId: 'b-root', name: '가상 B 팀', type: 'team', leaderId: null, displayOrder: 1 },
],
employees: [member('root-leader', 'a-root'), member('team-leader', 'a-team'), member('staff', 'a-team', 'company-b'), member('cell-staff', 'a-cell'), member('b-staff', 'b-team', 'company-b')],
affiliations: [{ id: 'company-a', name: '가상 A 회사' }, { id: 'company-b', name: '가상 B 회사' }],
relations: [{ id: 'support', sourceOrganizationId: 'a-team', targetOrganizationId: 'a-other', type: 'support' }],
presentation: {
title: '가상 조직도', description: null, hubText: null,
groups: { showEmployees: true, showSummary: true, showDispatched: true, showOnLeave: true, showAffiliations: true },
organizationOrder: ['a-other', 'a-team'],
},
metadata: { asOfDate: '2026-10-13', dataVersion: 'move-test' },
};
}
function request(kind: OrgChartMoveRequest['kind'], sourceId: string, targetOrganizationId: string): OrgChartMoveRequest {
return { kind, sourceId, targetOrganizationId };
}
function expectRejected(data: OrgChartDataset, move: OrgChartMoveRequest, code: OrgChartMoveFailureCode) {
const before = JSON.stringify(data);
const policy = validateOrgChartMove(data, move);
assert.equal(policy.allowed, false);
if (!policy.allowed) { assert.equal(policy.code, code); assert.ok(policy.message.length > 0); }
const result = applyOrgChartMove(data, move);
assert.equal(result.moved, false);
if (!result.moved) assert.equal(result.code, code);
assert.equal(JSON.stringify(data), before, 'rejected movement retains every input record');
}
test('employee move changes organizationId alone, retains affiliation and IDs, updates counts, and owns frozen state', () => {
const original = snapshotOrgChartDataset(fixture());
const before = JSON.stringify(original);
const move = request('employee', 'staff', 'a-other');
const result = applyOrgChartMove(original, move);
assert.equal(result.moved, true);
if (!result.moved) return;
assert.equal(result.previousOrganizationId, 'a-team');
assert.deepEqual(result.request, move);
assert.deepEqual(result.data.employees.find(employee => employee.id === 'staff'), { ...original.employees.find(employee => employee.id === 'staff')!, organizationId: 'a-other' });
assert.deepEqual(result.data, { ...original, employees: original.employees.map(employee => employee.id === 'staff' ? { ...employee, organizationId: 'a-other' } : employee) });
assert.equal(JSON.stringify(original), before);
assert.ok(Object.isFrozen(result.data) && Object.isFrozen(result.data.employees) && Object.isFrozen(result.data.employees[0]) && Object.isFrozen(result.request));
assert.notEqual(result.data.employees[0], original.employees[0]);
const normalized = normalizeOrgChartDataset(result.data);
assert.equal(normalized.employeesByOrganization.get('a-team')!.some(employee => employee.id === 'staff'), false);
assert.equal(normalized.employeesByOrganization.get('a-other')!.filter(employee => employee.id === 'staff').length, 1);
const beforeCounts = calculateSummary(original).raw;
const afterCounts = calculateSummary(result.data).raw;
assert.equal(afterCounts.total, beforeCounts.total);
assert.equal(afterCounts.byOrganization['a-team']!.direct, beforeCounts.byOrganization['a-team']!.direct - 1);
assert.equal(afterCounts.byOrganization['a-other']!.inclusive, beforeCounts.byOrganization['a-other']!.inclusive + 1);
assert.equal(new Set(result.data.employees.map(employee => employee.id)).size, original.employees.length);
assert.equal(validateOrgChartDataset(result.data).valid, true);
});
test('group move changes parentId alone, preserving subtree, leaders, sorting, company, relations and employee total', () => {
const original = snapshotOrgChartDataset(fixture());
const before = JSON.stringify(original);
const result = applyOrgChartMove(original, request('organization', 'a-team', 'a-other'));
assert.equal(result.moved, true);
if (!result.moved) return;
assert.equal(result.previousOrganizationId, 'a-division');
assert.deepEqual(result.data, { ...original, organizations: original.organizations.map(org => org.id === 'a-team' ? { ...org, parentId: 'a-other' } : org) });
assert.equal(JSON.stringify(original), before);
const normalized = normalizeOrgChartDataset(result.data);
assert.equal(normalized.organizationsById.get('a-cell')!.parentId, 'a-team');
assert.equal(normalized.organizationsById.get('a-team')!.leaderId, 'team-leader');
assert.equal(normalized.organizationsById.get('a-team')!.displayOrder, 8);
assert.equal(new Set(result.data.organizations.map(org => org.id)).size, original.organizations.length);
const beforeCounts = calculateSummary(original).raw;
const afterCounts = calculateSummary(result.data).raw;
assert.equal(afterCounts.total, beforeCounts.total);
assert.equal(afterCounts.byOrganization['a-team']!.inclusive, beforeCounts.byOrganization['a-team']!.inclusive);
assert.equal(afterCounts.byOrganization['a-division']!.inclusive, 0);
assert.equal(afterCounts.byOrganization['a-other']!.inclusive, beforeCounts.byOrganization['a-team']!.inclusive);
assert.equal(validateOrgChartDataset(result.data).valid, true);
});
test('employee policy rejects leaders, absent IDs and existing membership', () => {
const data = fixture();
expectRejected(data, request('employee', 'team-leader', 'a-other'), 'LEADER_PROTECTED');
expectRejected(data, request('employee', 'missing', 'a-other'), 'SOURCE_NOT_FOUND');
expectRejected(data, request('employee', 'staff', 'missing'), 'TARGET_NOT_FOUND');
expectRejected(data, request('employee', 'staff', 'a-team'), 'SAME_ORGANIZATION');
});
test('group policy rejects roots, self, descendants, existing parent and absent IDs', () => {
const data = fixture();
expectRejected(data, request('organization', 'a-root', 'a-other'), 'ROOT_PROTECTED');
expectRejected(data, request('organization', 'a-team', 'a-team'), 'SELF_TARGET');
expectRejected(data, request('organization', 'a-team', 'a-cell'), 'DESCENDANT_TARGET');
expectRejected(data, request('organization', 'a-team', 'a-division'), 'SAME_ORGANIZATION');
expectRejected(data, request('organization', 'missing', 'a-other'), 'SOURCE_NOT_FOUND');
expectRejected(data, request('organization', 'a-team', 'missing'), 'TARGET_NOT_FOUND');
});
test('cross-company employee move updates existing organization and affiliation references, company totals and immutable state', () => {
const data = fixture(); data.employees[2]!.affiliationId = 'company-a';
const original = snapshotOrgChartDataset(data), before = JSON.stringify(original);
const move = request('employee', 'staff', 'b-team');
assert.deepEqual(validateOrgChartMove(original, move), { allowed: true, previousOrganizationId: 'a-team', previousCompanyId: 'company-a', companyId: 'company-b' });
const result = applyOrgChartMove(original, move);
assert.equal(result.moved, true);
if (!result.moved) return;
assert.deepEqual(result.data, { ...original, employees: original.employees.map(employee => employee.id === 'staff'
? { ...employee, organizationId: 'b-team', affiliationId: 'company-b' } : employee) });
const beforeCounts = calculateSummary(original).raw, afterCounts = calculateSummary(result.data).raw;
assert.equal(afterCounts.total, beforeCounts.total);
assert.equal(afterCounts.byOrganization['a-root']!.inclusive, beforeCounts.byOrganization['a-root']!.inclusive - 1);
assert.equal(afterCounts.byOrganization['b-root']!.inclusive, beforeCounts.byOrganization['b-root']!.inclusive + 1);
assert.equal(afterCounts.byAffiliation['company-a'], beforeCounts.byAffiliation['company-a']! - 1);
assert.equal(afterCounts.byAffiliation['company-b'], beforeCounts.byAffiliation['company-b']! + 1);
assert.equal(new Set(result.data.employees.map(employee => employee.id)).size, original.employees.length);
assert.ok(Object.isFrozen(result.data.employees[2]));
assert.equal(JSON.stringify(original), before);
assert.equal(validateOrgChartDataset(result.data).valid, true);
});
test('cross-company group move transfers all descendant companies and employee affiliations while retaining subtree and leaders', () => {
const original = snapshotOrgChartDataset(fixture()), before = JSON.stringify(original);
const result = applyOrgChartMove(original, request('organization', 'a-team', 'b-team'));
assert.equal(result.moved, true);
if (!result.moved) return;
const subtree = new Set(['a-team', 'a-cell']);
assert.deepEqual(result.data, { ...original,
organizations: original.organizations.map(org => org.id === 'a-team' ? { ...org, parentId: 'b-team', companyId: 'company-b' }
: subtree.has(org.id) ? { ...org, companyId: 'company-b' } : org),
employees: original.employees.map(employee => subtree.has(employee.organizationId) ? { ...employee, affiliationId: 'company-b' } : employee),
});
assert.equal(result.data.organizations.find(org => org.id === 'a-cell')!.parentId, 'a-team');
assert.equal(result.data.organizations.find(org => org.id === 'a-team')!.leaderId, 'team-leader');
assert.equal(result.data.employees.find(employee => employee.id === 'team-leader')!.organizationId, 'a-team');
const beforeCounts = calculateSummary(original).raw, afterCounts = calculateSummary(result.data).raw;
const transferred = beforeCounts.byOrganization['a-team']!.inclusive;
assert.equal(afterCounts.total, beforeCounts.total);
assert.equal(afterCounts.byOrganization['a-root']!.inclusive, beforeCounts.byOrganization['a-root']!.inclusive - transferred);
assert.equal(afterCounts.byOrganization['b-root']!.inclusive, beforeCounts.byOrganization['b-root']!.inclusive + transferred);
assert.equal(afterCounts.byAffiliation['company-b'], 4);
assert.equal(new Set(result.data.organizations.map(org => org.id)).size, original.organizations.length);
assert.equal(new Set(result.data.employees.map(employee => employee.id)).size, original.employees.length);
assert.equal(JSON.stringify(original), before);
assert.equal(validateOrgChartDataset(result.data).valid, true);
assert.equal(validateOrgChartMove(result.data, request('organization', 'a-cell', 'a-other')).allowed, true, 'transferred subtree can subsequently move back');
});
test('cross-company moves reject unknown target affiliation rather than inventing a new company record', () => {
const data = fixture(); data.organizations[5]!.companyId = 'unregistered-company';
assert.equal(validateOrgChartDataset(data).valid, true);
expectRejected(data, request('employee', 'staff', 'b-team'), 'TARGET_AFFILIATION_MISSING');
expectRejected(data, request('organization', 'a-team', 'b-team'), 'TARGET_AFFILIATION_MISSING');
});
test('policy rejects malformed request, duplicate IDs, invalid source relationships and company hierarchy contradictions', () => {
expectRejected(fixture(), { kind: 'unknown', sourceId: 'staff', targetOrganizationId: 'a-other' } as unknown as OrgChartMoveRequest, 'INVALID_REQUEST');
const duplicate = fixture(); duplicate.employees.push({ ...duplicate.employees[2]! });
expectRejected(duplicate, request('employee', 'staff', 'a-other'), 'INVALID_DATA');
const cycle = fixture(); cycle.organizations[1]!.parentId = 'a-cell';
expectRejected(cycle, request('employee', 'staff', 'a-other'), 'INVALID_DATA');
const invalidEmployee = fixture(); invalidEmployee.employees[2]!.organizationId = 'missing';
expectRejected(invalidEmployee, request('employee', 'staff', 'a-other'), 'INVALID_DATA');
const conflict = fixture(); conflict.organizations[2]!.companyId = 'company-b';
expectRejected(conflict, request('organization', 'a-team', 'a-other'), 'INVALID_DATA');
});
test('legacy roots derive company through their leader but unresolved company identity prevents moves', () => {
const legacy = fixture(); delete legacy.organizations[0]!.companyId;
assert.equal(validateOrgChartMove(legacy, request('employee', 'staff', 'a-other')).allowed, true);
legacy.organizations[0]!.leaderId = null;
expectRejected(legacy, request('employee', 'staff', 'a-other'), 'COMPANY_UNKNOWN');
});
test('drop-target validator snapshots once and retains its policy if a caller later mutates the dataset', () => {
const data = fixture();
const policy = createOrgChartMoveValidator(data);
data.employees[2]!.organizationId = 'b-team';
assert.deepEqual(policy(request('employee', 'staff', 'a-other')), { allowed: true, previousOrganizationId: 'a-team', previousCompanyId: 'company-a', companyId: 'company-a' });
assert.deepEqual(validateOrgChartMove(data, request('employee', 'staff', 'a-other')), { allowed: true, previousOrganizationId: 'b-team', previousCompanyId: 'company-b', companyId: 'company-a' });
});
test('opaque IDs remain safe move keys without duplicate or synthetic records', () => {
const data = fixture();
data.organizations[4]!.id = '__proto__';
data.relations![0]!.targetOrganizationId = '__proto__';
data.presentation!.organizationOrder[0] = '__proto__';
const result = applyOrgChartMove(data, request('employee', 'staff', '__proto__'));
assert.equal(result.moved, true);
if (!result.moved) return;
assert.equal(result.data.employees.find(employee => employee.id === 'staff')!.organizationId, '__proto__');
assert.equal(result.data.employees.length, data.employees.length);
assert.equal(validateOrgChartDataset(result.data).valid, true);
});
packages/org-chart/src/data/moves.ts
+150
View File
@@ -0,0 +1,150 @@
import { normalizeOrgChartDataset } from './normalize.js';
import { validateOrgChartDataset } from './validate.js';
import type { OrgChartDataset } from './types.js';
/** Source IDs retain their original collection identity after a browser-state move. */
export interface OrgChartMoveRequest {
kind: 'employee' | 'organization';
sourceId: string;
targetOrganizationId: string;
}
export type OrgChartMoveFailureCode =
| 'EDITING_DISABLED'
| 'INVALID_DATA' | 'INVALID_REQUEST' | 'SOURCE_NOT_FOUND' | 'TARGET_NOT_FOUND'
| 'COMPANY_UNKNOWN' | 'TARGET_AFFILIATION_MISSING' | 'LEADER_PROTECTED' | 'ROOT_PROTECTED'
| 'SELF_TARGET' | 'DESCENDANT_TARGET' | 'SAME_ORGANIZATION';
export interface OrgChartMoveFailure {
code: OrgChartMoveFailureCode;
message: string;
}
export type OrgChartMoveValidation =
| { allowed: true; previousOrganizationId: string; previousCompanyId: string; companyId: string }
| ({ allowed: false } & OrgChartMoveFailure);
export type OrgChartMoveResult =
| { moved: true; data: OrgChartDataset; request: OrgChartMoveRequest; previousOrganizationId: string }
| ({ moved: false } & OrgChartMoveFailure);
const messages: Record<OrgChartMoveFailureCode, string> = {
EDITING_DISABLED: 'Drag & Drop이 OFF입니다. 조직 이동을 사용하려면 ON으로 설정하세요.',
INVALID_DATA: '조직 데이터의 관계가 유효하지 않아 이동할 수 없습니다.',
INVALID_REQUEST: '이동 요청이 올바르지 않습니다.',
SOURCE_NOT_FOUND: '이동할 직원 또는 조직이 존재하지 않습니다.',
TARGET_NOT_FOUND: '이동할 대상 조직이 존재하지 않습니다.',
COMPANY_UNKNOWN: '회사 소속을 확인할 수 없어 이동할 수 없습니다.',
TARGET_AFFILIATION_MISSING: '대상 회사의 소속 정보가 없어 회사 간 이동을 완료할 수 없습니다.',
LEADER_PROTECTED: '조직장은 조직장 지정 정책을 먼저 변경해야 이동할 수 있습니다.',
ROOT_PROTECTED: '회사 최상위 조직은 이동할 수 없습니다.',
SELF_TARGET: '조직을 자기 자신에게 이동할 수 없습니다.',
DESCENDANT_TARGET: '하위 조직으로 이동하면 순환 관계가 생겨 이동할 수 없습니다.',
SAME_ORGANIZATION: '이미 해당 조직에 속해 있습니다.',
};
function deny(code: OrgChartMoveFailureCode): OrgChartMoveValidation {
return { allowed: false, code, message: messages[code] };
}
/** Validate once for all highlighted drop targets. The closure owns an immutable
* dataset snapshot, so later consumer mutations cannot change a drag's policy.
* Company is the organization tree's identity, not an employee's affiliation.
* Legacy roots may establish it through their leader's affiliation; no arbitrary
* fallback company is invented when ownership cannot be established.
*/
export function createOrgChartMoveValidator(data: OrgChartDataset): (request: OrgChartMoveRequest) => OrgChartMoveValidation {
const validation = validateOrgChartDataset(data);
if (!validation.valid) return () => deny('INVALID_DATA');
const owned = validation.data;
const normalized = normalizeOrgChartDataset(owned);
const employees = new Map(owned.employees.map(employee => [employee.id, employee]));
const affiliations = new Set(owned.affiliations.map(affiliation => affiliation.id));
const leaders = new Set(owned.organizations.flatMap(org => org.leaderId === null ? [] : [org.leaderId]));
const companies = new Map<string, string | undefined>();
const pending = normalized.roots.map(node => ({ node, inherited: undefined as string | undefined }));
while (pending.length) {
const { node, inherited } = pending.pop()!;
const org = node.organization;
const company = org.companyId ?? inherited ?? (org.parentId === null && org.leaderId ? employees.get(org.leaderId)?.affiliationId : undefined);
if (inherited && company !== inherited) return () => deny('INVALID_DATA');
companies.set(org.id, company);
pending.push(...node.children.map(child => ({ node: child, inherited: company })));
}
return request => {
if (!request || !['employee', 'organization'].includes(request.kind)
|| typeof request.sourceId !== 'string' || !request.sourceId
|| typeof request.targetOrganizationId !== 'string' || !request.targetOrganizationId) return deny('INVALID_REQUEST');
const source = request.kind === 'employee' ? employees.get(request.sourceId) : normalized.organizationsById.get(request.sourceId);
if (!source) return deny('SOURCE_NOT_FOUND');
const target = normalized.organizationsById.get(request.targetOrganizationId);
if (!target) return deny('TARGET_NOT_FOUND');
const sourceOrganization = request.kind === 'employee'
? normalized.organizationsById.get(employees.get(request.sourceId)!.organizationId)!
: normalized.organizationsById.get(request.sourceId)!;
const previousOrganizationId = request.kind === 'employee' ? sourceOrganization.id : sourceOrganization.parentId;
if (request.kind === 'employee') {
if (sourceOrganization.id === target.id) return deny('SAME_ORGANIZATION');
if (leaders.has(request.sourceId)) return deny('LEADER_PROTECTED');
} else {
if (sourceOrganization.id === target.id) return deny('SELF_TARGET');
if (sourceOrganization.parentId === null || sourceOrganization.type === 'root') return deny('ROOT_PROTECTED');
if (sourceOrganization.parentId === target.id) return deny('SAME_ORGANIZATION');
let ancestor: typeof target | undefined = target;
while (ancestor) {
if (ancestor.id === sourceOrganization.id) return deny('DESCENDANT_TARGET');
ancestor = ancestor.parentId === null ? undefined : normalized.organizationsById.get(ancestor.parentId);
}
}
const sourceCompany = companies.get(sourceOrganization.id);
const targetCompany = companies.get(target.id);
if (!sourceCompany || !targetCompany) return deny('COMPANY_UNKNOWN');
if (sourceCompany !== targetCompany && !affiliations.has(targetCompany)) return deny('TARGET_AFFILIATION_MISSING');
return { allowed: true, previousOrganizationId: previousOrganizationId!, previousCompanyId: sourceCompany, companyId: targetCompany };
};
}
/** Pure policy check for a single keyboard or pointer move. */
export function validateOrgChartMove(data: OrgChartDataset, request: OrgChartMoveRequest): OrgChartMoveValidation {
return createOrgChartMoveValidator(data)(request);
}
/** Create a new validated, deeply frozen browser-state dataset. Same-company
* moves change membership alone. Cross-company employee moves also change the
* existing affiliationId; group moves retarget companyId for its whole subtree
* and affiliationId for every subtree employee. No new contract fields are used.
* IDs, descendants, leaders, personal data and display ordering are retained.
* Failed moves return no replacement data and never alter the input.
*/
export function applyOrgChartMove(data: OrgChartDataset, request: OrgChartMoveRequest): OrgChartMoveResult {
const policy = validateOrgChartMove(data, request);
if (!policy.allowed) return { moved: false, code: policy.code, message: policy.message };
const crossCompany = policy.previousCompanyId !== policy.companyId;
let candidate: OrgChartDataset;
if (request.kind === 'employee') {
candidate = { ...data, employees: data.employees.map(employee => employee.id === request.sourceId
? { ...employee, organizationId: request.targetOrganizationId, ...(crossCompany ? { affiliationId: policy.companyId } : {}) } : employee) };
} else {
const subtree = new Set<string>([request.sourceId]);
if (crossCompany) {
const children = new Map<string, string[]>();
for (const org of data.organizations) {
if (org.parentId === null) continue;
const siblings = children.get(org.parentId) ?? [];
siblings.push(org.id); children.set(org.parentId, siblings);
}
const pending = [request.sourceId];
while (pending.length) for (const id of children.get(pending.pop()!) ?? []) { subtree.add(id); pending.push(id); }
}
candidate = {
...data,
organizations: data.organizations.map(org => org.id === request.sourceId
? { ...org, parentId: request.targetOrganizationId, ...(crossCompany ? { companyId: policy.companyId } : {}) }
: crossCompany && subtree.has(org.id) ? { ...org, companyId: policy.companyId } : org),
employees: crossCompany ? data.employees.map(employee => subtree.has(employee.organizationId)
? { ...employee, affiliationId: policy.companyId } : employee) : data.employees,
};
}
const validation = validateOrgChartDataset(candidate);
if (!validation.valid) return { moved: false, code: 'INVALID_DATA', message: messages.INVALID_DATA };
return { moved: true, data: validation.data, request: Object.freeze({ ...request }), previousOrganizationId: policy.previousOrganizationId };
}
packages/org-chart/src/index.ts
+1 -1
View File
@@ -2,6 +2,6 @@ export * from './data/index.js';
export { companyColorPresets, getCompanyColorPreset } from './company-color-presets.js';
export type { CompanyColorPreset, CompanyId } from './company-color-presets.js';
export { createOrgChart } from './core/index.js';
export type { OrgChartConnectionDirection, OrgChartTopNode, OrgChartViewportState, OrgChartDisplayMode, OrgChartLayoutMode, OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './core/types.js';
export type { OrgChartInteractionOptions, OrgChartAutoLayoutType, OrgChartAutoLayoutOptions, OrgChartConnectionDirection, OrgChartTopNode, OrgChartViewportState, OrgChartDisplayMode, OrgChartLayoutMode, OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './core/types.js';
export { createOrgChartTree, createPositionSummary, createAffiliationSummary, createStatusSummary } from './components.js';
export type { OrgChartSummaryComponentOptions } from './components.js';
packages/org-chart/src/styles/employee-info-dialog.css
+47 -10
View File
@@ -6,8 +6,7 @@
}
.hm-orgchart-organization-link:hover { text-decoration: underline; }
.hm-orgchart-organization-link:focus-visible,
.hm-orgchart-employee[role="button"]:focus-visible,
.hm-orgchart-employee-dialog-close:focus-visible {
.hm-orgchart-employee[role="button"]:focus-visible {
outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
outline-offset: 3px;
}
@@ -27,16 +26,54 @@
.hm-orgchart-employee-dialog::backdrop {
background: color-mix(in srgb, var(--hm-orgchart-resolved-fg-primary) 38%, transparent);
}
.hm-orgchart-employee-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg); }
.hm-orgchart-employee-dialog-header {
display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg);
/* Reserve the former text button's height so the title, body and dialog size stay put. */
min-height: calc(1lh + 2 * var(--hm-orgchart-resolved-spacing-xs) + 2 * var(--hm-orgchart-resolved-border-width));
}
.hm-orgchart-employee-dialog-header h2 { margin: 0; font-size: 18px; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
.hm-orgchart-employee-dialog-close {
padding: var(--hm-orgchart-resolved-spacing-xs) var(--hm-orgchart-resolved-spacing-sm);
border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
border-radius: var(--hm-orgchart-resolved-radius-control-md);
background: var(--hm-orgchart-resolved-bg-content);
color: inherit;
font: inherit;
cursor: pointer;
/* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
--hm-orgchart-dialog-close-ink: var(--foreground, var(--hm-sem-fg-primary, #0a221d));
--hm-orgchart-dialog-close-hover: var(--muted, var(--hm-sem-bg-subtle, #f4f1ea));
--hm-orgchart-dialog-close-ring: var(--ring, var(--hm-sem-stroke-input-focus, #266651));
position: absolute;
top: calc(var(--spacing, .25rem) * 2);
right: calc(var(--spacing, .25rem) * 2);
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
box-sizing: border-box;
width: calc(var(--spacing, .25rem) * 7);
height: calc(var(--spacing, .25rem) * 7);
padding: 0;
border: 1px solid transparent;
border-radius: min(var(--radius-md, calc(var(--radius, var(--hm-radius-container, 4px)) * .8)), 12px);
background: transparent;
background-clip: padding-box;
color: var(--hm-orgchart-dialog-close-ink);
font: inherit; font-size: .875rem; line-height: calc(var(--spacing, .25rem) * 5); font-weight: 500;
outline: none; outline-offset: 0; box-shadow: none;
cursor: default; user-select: none; white-space: nowrap;
transition: all 150ms cubic-bezier(.4, 0, .2, 1);
}
.hm-orgchart-employee-dialog-close svg {
width: calc(var(--spacing, .25rem) * 4);
height: calc(var(--spacing, .25rem) * 4);
pointer-events: none; flex-shrink: 0;
}
.hm-orgchart-employee-dialog-close:hover {
background-color: var(--hm-orgchart-dialog-close-hover);
}
:host-context(.dark) .hm-orgchart-employee-dialog-close:hover,
.dark .hm-orgchart-employee-dialog-close:hover {
background-color: color-mix(in oklab, var(--hm-orgchart-dialog-close-hover) 50%, transparent);
}
.hm-orgchart-employee-dialog-close:focus-visible {
border-color: var(--hm-orgchart-dialog-close-ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-orgchart-dialog-close-ring) 50%, transparent);
}
.hm-orgchart-employee-dialog-close:active {
transform: translateY(1px);
}
.hm-orgchart-employee-dialog-fields {
display: grid;
packages/org-chart/src/styles/org-chart-content.css
+3
View File
@@ -124,6 +124,9 @@
.hm-orgchart-department-colors > p { grid-column: 1 / -1; }
.hm-orgchart-representative-preview { grid-column: 1 / -1; }
.hm-orgchart-color-preview { min-width: 0; padding: var(--hm-orgchart-resolved-spacing-lg); border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-current-border); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-current-card-background); overflow-wrap: anywhere; }
/* Align title, provenance, legend, cards and contrast blocks across each row
of specimens even when their descriptions wrap to different heights. */
.hm-orgchart-color-preview { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.hm-orgchart-color-department-name { display: flex; align-items: center; justify-content: center; min-height: var(--hm-orgchart-title-height, 40px); padding: 6px 12px; font-size: var(--hm-orgchart-title-font-size, 18px); line-height: var(--hm-orgchart-title-line-height, 26px); font-weight: var(--hm-orgchart-resolved-font-weight-bold); background: var(--hm-orgchart-current-gradient); color: var(--hm-orgchart-current-department-color); border-radius: var(--hm-orgchart-resolved-radius-container); }
.hm-orgchart-color-legend { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--hm-orgchart-resolved-spacing-sm); }
.hm-orgchart-color-legend dd { margin: 0; display: grid; gap: 4px; }
packages/org-chart/src/styles/org-chart-expanded.css
+78 -3
View File
@@ -14,7 +14,10 @@
width: 100%;
min-width: 0;
padding: var(--hm-orgchart-resolved-spacing-lg);
background: var(--hm-orgchart-resolved-bg-content);
/* Optional host review frame inputs affect only this outer Auto container. */
background: var(--hm-orgchart-expanded-preview-background, var(--hm-orgchart-resolved-bg-content));
border: var(--hm-orgchart-expanded-preview-border, 0);
border-radius: var(--hm-orgchart-expanded-preview-radius, 0);
}
.hm-orgchart-expanded .hm-orgchart-heading { margin: 0; }
.hm-orgchart-expanded .hm-orgchart-viewport {
@@ -69,7 +72,7 @@
min-height: 0;
padding: 0;
background: var(--hm-orgchart-expanded-primary);
color: var(--hm-orgchart-expanded-title-ink);
color: #ffffff;
font-size: var(--hm-orgchart-resolved-font-size-base);
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
line-height: 1.5;
@@ -143,7 +146,7 @@
}
.hm-orgchart-expanded-toggle:not(:disabled):hover,
.hm-orgchart-expanded-link:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.hm-orgchart-expanded-toggle:disabled { cursor: default; opacity: 0.75; }
.hm-orgchart-expanded-toggle:is(:disabled, [aria-disabled="true"]) { cursor: default; opacity: 0.75; }
.hm-orgchart-expanded-link { display: inline-flex; align-items: center; padding-inline: var(--hm-orgchart-resolved-spacing-sm); color: inherit; }
.hm-orgchart-expanded-toggle:focus-visible, .hm-orgchart-expanded-link:focus-visible,
.hm-orgchart-expanded-toolbar button:focus-visible {
@@ -161,6 +164,7 @@
.hm-orgchart-expanded-selection, .hm-orgchart-top-node-title { margin: 0; }
.hm-orgchart-expanded-empty { padding: var(--hm-orgchart-resolved-spacing-lg); }
.hm-orgchart-expanded .hm-orgchart-viewport[data-dragging] { cursor: grabbing; user-select: none; }
.hm-orgchart-expanded .hm-orgchart-viewport[data-pan-enabled="false"] { cursor: default; }
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] { cursor: default; }
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="left"],
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="right"] {
@@ -198,3 +202,74 @@
.hm-orgchart-expanded .hm-orgchart-person-text { gap: var(--hm-orgchart-expanded-person-gap); }
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-name { font-size: var(--hm-orgchart-expanded-name-size); font-weight: var(--hm-orgchart-expanded-name-weight); }
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-role { font-size: var(--hm-orgchart-expanded-position-size); }
/* P7: direction/vertical adapters keep dabeng's recursive hierarchy and the
existing HM card geometry. Plain TB continues to use its original rules. */
.hm-orgchart-expanded .hm-orgchart-tree { position: relative; flex: none; }
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-forest { flex-direction: column; }
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart.l2r {
position: relative; transform: none; transform-origin: 0 0;
}
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy {
display: flex; flex-direction: row; align-items: center;
}
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes {
flex-direction: column; align-items: flex-start;
}
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] {
flex: none; height: auto; min-height: 0;
margin: calc(var(--hm-orgchart-expanded-sibling-gap) / 2) var(--hm-orgchart-expanded-level-gap) calc(var(--hm-orgchart-expanded-sibling-gap) / 2) 0;
}
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] > .hm-orgchart-organization {
margin-inline: auto; padding-inline: var(--hm-orgchart-resolved-spacing-xxl);
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical,
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes,
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes.vertical {
display: flex; flex-direction: column; align-items: flex-start;
width: max-content; padding-left: var(--hm-orgchart-resolved-spacing-xxl);
gap: calc(var(--hm-orgchart-expanded-level-gap) / 2);
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical {
margin-inline: auto;
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes {
padding-top: calc(var(--hm-orgchart-expanded-level-gap) / 2);
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .hierarchy:has(> .node[data-depth]) > .nodes {
flex-direction: column; align-items: flex-start;
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] {
margin: 0; min-height: 0;
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] > .hm-orgchart-organization {
padding-inline: var(--hm-orgchart-resolved-spacing-xxl);
}
/* Measured Auto connector routes replace upstream fixed-card pseudo geometry
in LR/global Hybrid/TB per-group Hybrid only. */
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::before,
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::after,
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::before,
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::after {
content: none;
}
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node > .toggleBtn { display: none; }
.hm-orgchart-expanded .hm-orgchart-organization-connectors {
position: absolute; inset: 0; overflow: visible; pointer-events: none;
}
.hm-orgchart-expanded .hm-orgchart-organization-connectors path {
fill: none; stroke: var(--hm-orgchart-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width);
}
/* P9.3: outlines do not resize cards or replace company accents/connectors. */
.hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="true"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: grab; }
.hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="false"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: pointer; }
.hm-orgchart-expanded .hm-orgchart-move-feedback { margin: 0; overflow-wrap: anywhere; color: var(--hm-orgchart-resolved-fg-secondary); }
.hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="success"] { color: var(--hm-orgchart-resolved-action-primary); font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
.hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="failure"] { color: var(--hm-orgchart-resolved-fg-primary); text-decoration: underline; }
.hm-orgchart-expanded .hm-orgchart-viewport[data-edit-dragging] { cursor: grabbing; user-select: none; }
.hm-orgchart-expanded [data-edit-source="true"] { opacity: 0.55; }
.hm-orgchart-expanded .node[data-drop-state="allowed"] > .hm-orgchart-organization { outline: 2px dashed var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 2px; }
.hm-orgchart-expanded .node[data-drop-state="blocked"] > .hm-orgchart-organization { outline: 1px dotted var(--hm-orgchart-resolved-stroke-default); outline-offset: 2px; }
.hm-orgchart-expanded .node[data-drop-hover="allowed"] > .hm-orgchart-organization { outline: 3px solid var(--hm-orgchart-resolved-action-primary); }
.hm-orgchart-expanded .node[data-drop-hover="blocked"] > .hm-orgchart-organization { outline: 3px double var(--hm-orgchart-resolved-fg-secondary); }
packages/org-chart/src/styles/org-chart-p3-summary.css
+19 -11
View File
@@ -1,7 +1,7 @@
/* P3 read-only summary presenters. Values are from Workdesk index.css:
headcount-panel / bold-text / sidebar- / #summary-table and the bottom
.section legend. These are standalone OrgChart content, not HM overrides. */
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals {
display: flex;
flex-direction: column;
align-items: flex-end;
@@ -13,7 +13,7 @@
color: #18253a;
font-size: 14px;
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals-title {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals-title {
width: 176px;
margin: 0;
padding: 4px 0;
@@ -67,7 +67,7 @@
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { height: 20px; }
.hm-orgchart-workdesk-count-cell { font-variant-numeric: tabular-nums; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar {
display: flex;
align-items: center;
justify-content: center;
@@ -81,11 +81,11 @@
box-shadow: 0 5.4px 14.3px rgba(44, 68, 96, 0.08);
color: #1c2534;
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-list {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-list {
flex-wrap: nowrap;
gap: 26.8px;
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item {
position: relative;
height: 42.9px;
min-height: 42.9px;
@@ -95,8 +95,8 @@
font-weight: 500;
line-height: 19.7px;
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border: 0; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border: 0; }
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before {
content: '';
position: absolute;
top: 50%;
@@ -106,14 +106,22 @@
background: rgba(113, 142, 176, 0.48);
transform: translateY(-50%);
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item dt { gap: 0.9px; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item dt { gap: 0.9px; }
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
width: 39.3px;
height: 39.3px;
flex-basis: 39.3px;
}
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-total {
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-total {
color: #071d3a;
font-weight: 700;
}
/* Overview shares the bar's internal design, but lets its items wrap in the
page flow. No Fixed stage/absolute positioning is copied into the preview. */
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar { height: auto; padding-block: 6.25px; }
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar-list { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 767px) {
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before { display: none; }
}
packages/org-chart/src/styles/org-chart-readonly.css
+9 -3
View File
@@ -157,8 +157,8 @@
/* Workdesk compact artwork. Preserve flow placement for unknown organizations;
the measured preset alone enables this original 1920×914.5 coordinate layer. */
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] { grid-template-rows: 224.2px auto 1fr auto; height: 914.5px; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis { width: 198px; height: 224.2px; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] { grid-template-rows: 224.2px auto 1fr auto; height: var(--hm-orgchart-workdesk-stage-height, 914.5px); }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis { width: 198px; height: 224.2px; z-index: 12; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-top-leaders { position: absolute; top: 35.3px; z-index: 35; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-hub {
position: absolute;
@@ -192,7 +192,7 @@
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: relative; z-index: 7; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-side { position: relative; z-index: 18; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: relative; z-index: 32; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: absolute; left: 32px; bottom: 70px; width: 240px; margin: 0; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: absolute; left: 32px; bottom: 82px; width: 240px; margin: 0; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-status-summary { gap: 12px; flex-wrap: nowrap; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: absolute; left: 57px; right: 57px; bottom: 12px; margin: 0; }
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-person-role,
@@ -207,6 +207,12 @@
.hm-orgchart-workdesk-meeting { left: 68px; bottom: 32px; width: 557px; height: 344px; opacity: 0.8; mix-blend-mode: multiply; }
.hm-orgchart-workdesk-grid { left: 62px; bottom: 18.9px; width: 1768px; height: 275px; }
.hm-orgchart-workdesk-hub-frame { inset: 0; width: 100%; height: 100%; z-index: -1; object-position: top; }
/* One base-coordinate central layer; top and bottom modules keep their own
anchors. Decorations retain their original size and 914.5px coordinates. */
.hm-orgchart-stage[data-workdesk-artwork] :is(.hm-orgchart-axis,.hm-orgchart-viewport,.hm-orgchart-workdesk-overlay,.hm-orgchart-workdesk-decoration:not(.hm-orgchart-workdesk-hub-frame)) { transform: translateY(var(--hm-orgchart-workdesk-center-offset, 0px)); }
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-sky { bottom: auto; height: 914.5px; }
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-meeting { top: 538.5px; bottom: auto; }
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-grid { top: 620.6px; bottom: auto; }
/* P3: artwork owns representative/hub/top-level routes. Hide every engine
hierarchy route in readOnly only, including upstream pseudo-element paths. */
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy::before,
src/org-chart/center-composition-preview.ts
+58
View File
@@ -0,0 +1,58 @@
/** Story-only alignment of the entire transformed Workdesk stage in the visible
* Content Wrapper's content box. Core retains its proportional width/height fit. */
export function centerCompositionPreview(host: HTMLElement): () => void {
let frame: number | undefined;
let shadow: ShadowRoot | undefined;
let stage: HTMLElement | undefined;
const schedule = () => { frame ??= requestAnimationFrame(align); };
const resize = new ResizeObserver(schedule);
const mutation = new MutationObserver(schedule);
const outer = new MutationObserver(schedule);
const align = () => {
frame = undefined;
const nextShadow = host.querySelector('.hm-orgchart-host')?.shadowRoot;
if (!nextShadow) return;
if (shadow !== nextShadow) {
mutation.disconnect();
shadow = nextShadow;
mutation.observe(shadow, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'data-layout'] });
}
const wrapper = shadow.querySelector<HTMLElement>('.hm-orgchart-composition');
const nextStage = shadow.querySelector<HTMLElement>('.hm-orgchart-stage[data-workdesk-artwork]');
if (!wrapper || !nextStage) return;
if (stage !== nextStage) {
if (stage) resize.unobserve(stage);
stage = nextStage;
resize.observe(stage);
}
const container = host.getBoundingClientRect();
const css = getComputedStyle(host);
const inset = (key: 'borderLeftWidth' | 'borderRightWidth' | 'paddingLeft' | 'paddingRight') => parseFloat(css[key]) || 0;
const left = container.left + inset('borderLeftWidth') + inset('paddingLeft');
const right = container.right - inset('borderRightWidth') - inset('paddingRight');
const bounds = stage.getBoundingClientRect();
if (right <= left || !bounds.width) return;
// The stage keeps its unscaled layout width, so centering that width with
// flex/grid would misplace Core's transformed rectangle. Measure the actual
// rendered rectangle instead; translate it as one unit without changing the
// transform, scale, 1920 x 914.5 canvas or any stage-relative coordinates.
const difference = (left + right - bounds.left - bounds.right) / 2;
// Fractional proportional scales can alternate the rounded correction by
// 0.0001px. Keep the same content-box calculation without a feedback loop.
if (Math.abs(difference) < 0.001) return;
const translation = `${Number(((parseFloat(stage.style.translate) || 0) + difference).toFixed(4))}px`;
if (stage.style.translate !== translation) stage.style.translate = translation;
};
resize.observe(host);
// A padding redistribution can move the content center without resizing it.
outer.observe(host, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
window.addEventListener('resize', schedule);
document.fonts.addEventListener('loadingdone', schedule);
schedule();
return () => {
resize.disconnect(); mutation.disconnect(); outer.disconnect();
window.removeEventListener('resize', schedule);
document.fonts.removeEventListener('loadingdone', schedule);
if (frame !== undefined) cancelAnimationFrame(frame);
};
}
src/org-chart/core-component-preview.tsx
+53 -11
View File
@@ -3,28 +3,39 @@ import { useLayoutEffect, useRef } from 'react';
import { calculateSummary, normalizeOrgChartDataset, validateOrgChartDataset } from '@hm-design/org-chart';
import engineUrl from '@hm-design/org-chart/engine.css?url';
import coreUrl from '@hm-design/org-chart/style.css?url';
import centerPreviewUrl from '../center/center-stories.css?url';
import departmentPreviewUrl from './department-colors-preview.css?url';
import { createEmployeeCard, type EmployeeCardOptions } from '../../packages/org-chart/src/core/employee-card';
import { decorateNode, engineTree, type RenderContext } from '../../packages/org-chart/src/core/render';
import { applyOrganizationStyle } from '../../packages/org-chart/src/core/style-presets';
import { createPositionSummary } from '../../packages/org-chart/src/core/position-summary';
import { createAffiliationSummary } from '../../packages/org-chart/src/core/affiliation-summary';
import { createOrganizationTotals } from '../../packages/org-chart/src/core/organization-totals';
import { createAffiliationBar } from '../../packages/org-chart/src/core/affiliation-bar';
import { createStatusSummary } from '../../packages/org-chart/src/core/status-summary';
import { createLogoLegend } from '../../packages/org-chart/src/core/logo-legend';
import { createDepartmentColors, updateDepartmentColorValues } from '../../packages/org-chart/src/core/department-colors';
import fixture from '../../examples/org-chart/data-p1.json';
type PreviewKind = 'Logo' | 'DepartmentColors' | 'PositionSummary' | 'AffiliationSummary' | 'StatusSummary' | 'EmployeeCard' | 'OrganizationCards';
interface Props { kind: PreviewKind; data?: unknown; variant?: number; cardKind?: EmployeeCardOptions['kind'] }
interface Props { kind: PreviewKind; data?: unknown; variant?: number; cardKind?: EmployeeCardOptions['kind']; presentation?: 'standalone' | 'workdesk' | 'design' }
/** Story host only. Every pixel/card/count is rendered by the same Core modules
* used by Vanilla HTML and the production React Wrapper, not JSX copies. */
export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKind = 'employee' }: Props) {
export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKind = 'employee', presentation = 'standalone' }: Props) {
const ref = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
const validation = validateOrgChartDataset(data);
const host = ref.current!;
if (!validation.valid) { host.textContent = validation.issues.map(issue => issue.code).join(', '); return; }
const dataset = validation.data;
const compactDepartmentPreview = kind === 'DepartmentColors' && presentation === 'design';
const sampleName = '홍길동';
const displayedSampleName = [...sampleName].join(' ');
// Department-only display data: preserve original identity/roles/membership.
// Format before Core rendering so the shared overflow tooltip has the same name.
const dataset = compactDepartmentPreview
? { ...validation.data, employees: validation.data.employees.map(employee => ({ ...employee, name: displayedSampleName })) }
: validation.data;
const normalized = normalizeOrgChartDataset(dataset);
const context: RenderContext = {
data: dataset, summary: calculateSummary(dataset), orderedOrganizations: [], employeesByOrganization: normalized.employeesByOrganization,
@@ -35,17 +46,18 @@ export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKi
const root = document.createElement('div');
root.className = 'hm-orgchart-component-host';
const shadow = root.attachShadow({ mode: 'open' });
for (const href of [engineUrl, coreUrl]) {
for (const href of [engineUrl, coreUrl, ...(compactDepartmentPreview ? [centerPreviewUrl, departmentPreviewUrl] : [])]) {
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; shadow.append(link);
link.addEventListener('load', () => updateDepartmentColorValues(shell), { signal: controller.signal });
if (!compactDepartmentPreview) link.addEventListener('load', () => updateDepartmentColorValues(shell), { signal: controller.signal });
}
const shell = document.createElement('section');
shell.className = 'hm-orgchart-shell';
// Share Fixed's passive presenters/styles without its stage coordinates.
shell.className = presentation === 'workdesk' ? 'hm-orgchart-shell hm-orgchart-summary-preview' : 'hm-orgchart-shell';
let component: HTMLElement;
if (kind === 'Logo') component = createLogoLegend(document, context, controller.signal);
else if (kind === 'DepartmentColors') component = createDepartmentColors(document, context, controller.signal);
else if (kind === 'PositionSummary') component = createPositionSummary(document, context);
else if (kind === 'AffiliationSummary') component = createAffiliationSummary(document, context);
else if (kind === 'PositionSummary') component = presentation === 'workdesk' ? createOrganizationTotals(document, context) : createPositionSummary(document, context);
else if (kind === 'AffiliationSummary') component = presentation === 'workdesk' ? createAffiliationBar(document, context, controller.signal) : createAffiliationSummary(document, context);
else if (kind === 'StatusSummary') component = createStatusSummary(document, context, controller.signal);
else if (kind === 'OrganizationCards') {
const organization = normalized.roots[0]?.children[variant]?.organization ?? normalized.roots[0]!.organization;
@@ -70,12 +82,42 @@ export function CoreComponentPreview({ kind, data = fixture, variant = 0, cardKi
component = createEmployeeCard(document, employee ?? dataset.employees[0]!, { kind: cardKind, affiliationName: dataset.affiliations.find(item => item.id === employee?.affiliationId)?.name }, controller.signal);
applyOrganizationStyle(component, variant);
}
if (compactDepartmentPreview) {
// Keep the representative and department cards built by the shared Core.
// The Tunnel review frame styles wrappers only; approved artwork stays intact.
shell.classList.add('sb-center', 'hm-orgchart-department-preview');
const representative = component.querySelector<HTMLElement>(':scope > .hm-orgchart-representative-preview');
if (representative) {
const card = representative.querySelector<HTMLElement>('[data-card-kind="topLeader"]')!;
const header = document.createElement('header');
const title = document.createElement('h2'); title.textContent = '대표자 카드';
header.append(title);
const stage = document.createElement('div'); stage.className = 'tunnel-reference__stage hm-orgchart-department-stage';
stage.append(card);
representative.classList.add('tunnel-reference__sample');
representative.replaceChildren(header, stage);
}
const rows = Array.from(component.querySelectorAll<HTMLElement>(':scope > .hm-orgchart-color-preview'));
for (const row of rows) {
const heading = row.querySelector<HTMLElement>('.hm-orgchart-color-department-name')!;
const cards = row.querySelector<HTMLElement>('.hm-orgchart-preview-grid')!;
for (const caption of cards.querySelectorAll('.hm-orgchart-card-caption')) caption.remove();
const header = document.createElement('header'); header.append(heading);
const stage = document.createElement('div'); stage.className = 'tunnel-reference__stage hm-orgchart-department-stage';
stage.append(cards);
row.classList.add('tunnel-reference__sample');
row.replaceChildren(header, stage);
}
component.replaceChildren(...(representative ? [representative] : []), ...rows);
component.classList.add('hm-orgchart-department-colors-design', 'tunnel-reference__variant-grid');
for (const name of component.querySelectorAll<HTMLElement>('.hm-orgchart-person-name')) name.setAttribute('aria-label', sampleName);
}
component.dataset.component = kind;
shell.append(component); shadow.append(shell); host.replaceChildren(root);
updateDepartmentColorValues(shell);
const observer = kind === 'DepartmentColors' ? new ResizeObserver(() => updateDepartmentColorValues(shell)) : undefined;
if (!compactDepartmentPreview) updateDepartmentColorValues(shell);
const observer = kind === 'DepartmentColors' && !compactDepartmentPreview ? new ResizeObserver(() => updateDepartmentColorValues(shell)) : undefined;
observer?.observe(root);
return () => { observer?.disconnect(); controller.abort(); root.remove(); };
}, [kind, data, variant, cardKind]);
}, [kind, data, variant, cardKind, presentation]);
return <div ref={ref} className="hm-orgchart-story-chart" />;
}
src/org-chart/department-colors-preview.css
+43
View File
@@ -0,0 +1,43 @@
/* Department Colors Storybook adapter only. The actual Tunnel sample/stage
frame comes from center-stories.css; this sheet never selects employee cards. */
.hm-orgchart-department-preview .hm-orgchart-department-colors-design {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sb-center-column-gap);
}
.hm-orgchart-department-preview .hm-orgchart-color-preview {
grid-template-rows: auto 1fr;
grid-row: auto;
}
.hm-orgchart-department-preview .hm-orgchart-representative-preview {
grid-column: 1 / -1;
}
/* Group titles are OrgChart artwork. Preserve their established typography,
white text and organization gradient within the common review header. */
.hm-orgchart-department-preview .hm-orgchart-color-preview > header > .hm-orgchart-color-department-name {
box-sizing: border-box;
width: 100%;
color: var(--hm-orgchart-current-department-color);
font-size: var(--hm-orgchart-title-font-size, 18px);
line-height: var(--hm-orgchart-title-line-height, 26px);
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
}
.hm-orgchart-department-preview .hm-orgchart-department-stage {
display: grid;
justify-items: safe center;
align-items: center;
}
.hm-orgchart-department-preview .hm-orgchart-preview-grid {
margin-top: 0;
gap: var(--sb-center-column-gap);
}
@media (max-width: 760px) {
.hm-orgchart-department-preview .hm-orgchart-department-colors-design {
grid-template-columns: minmax(0, 1fr);
}
}
src/org-chart/org-chart-department-colors.stories.tsx
+8
View File
@@ -0,0 +1,8 @@
import { StrictMode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { DepartmentTypographyPreview } from './org-chart-page-previews';
const meta = { title: 'OrgChart/Department Colors', component: DepartmentTypographyPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof DepartmentTypographyPreview>;
export default meta;
type Story = StoryObj<typeof meta>;
export const DepartmentColors: Story = { name: 'Department Colors', parameters: { __id: 'orgchart--department-colors' } };
src/org-chart/org-chart-expanded-story.css
+66
View File
@@ -0,0 +1,66 @@
/* Existing Expanded Story content layout; HM widget styles stay unchanged. */
/* Reuse the existing Storybook review card surface through inherited inputs.
Only the outer Auto preview consumes these; its controls/artwork stay intact. */
.hm-orgchart-story-expanded .hm-orgchart-story-preview.sb-center {
--hm-orgchart-expanded-preview-background: var(--sb-center-card-background);
--hm-orgchart-expanded-preview-border: var(--sb-center-card-border);
--hm-orgchart-expanded-preview-radius: var(--sb-center-card-radius);
padding: 0;
}
.hm-orgchart-story-expanded .hm-orgchart-story-settings {
display: grid;
gap: 0.75rem;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
/* StorySection supplies the visible heading; keep each fieldset named for assistive technology. */
.hm-orgchart-story-expanded .hm-orgchart-story-section-legend {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hm-orgchart-story-expanded .hm-orgchart-story-controls {
align-items: flex-start;
}
.hm-orgchart-story-expanded .hm-orgchart-story-instance {
flex: 1 1 12rem;
}
.hm-orgchart-story-expanded .hm-orgchart-story-popup-setting {
flex: 0 1 24rem;
width: 100%;
}
.hm-orgchart-story-expanded .hm-orgchart-story-companies { margin: 0; }
.hm-orgchart-story-expanded .hm-orgchart-story-company-trigger {
width: 100%;
min-width: 0;
justify-content: space-between;
}
.hm-orgchart-story-expanded .hm-orgchart-story-company-summary {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* Popover is portaled outside StoryPage. Only this Story's content layout is
composed here; the HM panel surface, padding and widget states stay intact. */
.hm-orgchart-story-company-popover {
max-height: var(--radix-popover-content-available-height);
overflow-y: auto;
}
.hm-orgchart-story-company-options {
display: grid;
gap: 0.75rem;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
src/org-chart/org-chart-expanded.stories.tsx
+238 -38
View File
@@ -1,54 +1,254 @@
import { StrictMode, useId, useState } from 'react';
import { StrictMode, useEffect, useId, useMemo, useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button, Checkbox, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@hm-design/ui';
import { OrgChart } from '@hm-design/org-chart-react';
import { companyColorPresets, JsonOrgChartDataSource, type OrgChartConnectionDirection } from '@hm-design/org-chart';
import { ChevronDownIcon } from 'lucide-react';
import {
Button, Checkbox, FilterBar, FilterBarActions, Label,
Popover, PopoverContent, PopoverTrigger, Separator,
Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch,
} from '@hm-design/ui';
import { OrgChart, type OrgChartProps } from '@hm-design/org-chart-react';
import {
companyColorPresets, createOrgChartExampleDataset, JsonOrgChartDataSource,
type CompanyId, type OrgChartAutoLayoutOptions, type OrgChartDataset, type OrgChartExampleSelection, type OrgChartInteractionOptions,
} from '@hm-design/org-chart';
import engineUrl from '@hm-design/org-chart/engine.css?url';
import coreUrl from '@hm-design/org-chart/style.css?url';
import small from '../../examples/org-chart/data-expanded-small.json';
import medium from '../../examples/org-chart/data-expanded-medium.json';
import { StoryPage, StoryPageHeader, StorySection } from '@/components/story-page';
import large from '../../examples/org-chart/data-expanded-large.json';
import './org-chart-stories.css';
import '../center/center-stories.css';
import './org-chart-expanded-story.css';
const fixtures = { small, medium, large };
const sources = { small: new JsonOrgChartDataSource(small), medium: new JsonOrgChartDataSource(medium), large: new JsonOrgChartDataSource(large) };
const template = large as OrgChartDataset;
const companies = Object.values(companyColorPresets);
const allCompanies = companies.map(company => company.companyId as CompanyId);
const compositionStylesheets = { engine: engineUrl, core: coreUrl };
const topNodes = { ptc: { title: '기술총괄', name: '가상책임자 5' } };
const connections: Record<string, OrgChartConnectionDirection> = Object.fromEntries(large.organizations.map((org, index) => [org.id, (['top', 'left', 'right'] as const)[index % 3]! ]));
type DataSettings = Required<Pick<OrgChartExampleSelection, 'employeeCount' | 'companyIds'>>;
const initialSettings: DataSettings = { employeeCount: 20, companyIds: allCompanies };
/** Company state is passed to the shared Core without filtering/mutating JSON. */
/** Existing Expanded Story only: public FilterBar layout/actions match data
* conditions. The preview selects samples rather than searching employees. */
function ExpandedPreview() {
const id = useId();
const [size, setSize] = useState<keyof typeof fixtures>('small');
const [selected, setSelected] = useState<string[] | undefined>();
const companies = fixtures[size].affiliations;
const visible = selected ?? companies.map(company => company.id);
return <section className="hm-orgchart-story" aria-label="Expanded OrgChart · P5-4">
<p className="hm-orgchart-story-note"><strong>확장형 조직도</strong> — 회사별 독립 조직 · 타이틀 클릭으로 접기·펼치기 · 확대 및 드래그 이동. 모든 직원은 가상 데이터입니다.</p>
<div className="hm-orgchart-story-controls">
<div className="hm-orgchart-story-instance">
<Label id={`${id}-data-label`} htmlFor={`${id}-data`}>가상 데이터</Label>
<Select value={size} onValueChange={value => { setSize(value as keyof typeof fixtures); setSelected(undefined); }}>
<SelectTrigger id={`${id}-data`} aria-labelledby={`${id}-data-label`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="small">Small · 20명</SelectItem><SelectItem value="medium">Medium · 100명</SelectItem><SelectItem value="large">Large · 300명</SelectItem></SelectContent>
</Select>
const [draft, setDraft] = useState<DataSettings>(initialSettings);
const [applied, setApplied] = useState<DataSettings>(initialSettings);
const [dataRevision, setDataRevision] = useState(0);
const [layout, setLayout] = useState<OrgChartAutoLayoutOptions>({ type: 'tb', hybridStartDepth: 2, initialVisibleDepth: 'all' });
const [popup, setPopup] = useState<OrgChartProps['employeePopup']>('hm-dialog');
const [interactions, setInteractions] = useState<OrgChartInteractionOptions>({ collapse: true, zoom: true, pan: true });
const [dragDropEnabled, setDragDropEnabled] = useState(false);
const [error, setError] = useState<string | null>(null);
const dataset = useMemo(() => createOrgChartExampleDataset(template, {
scope: 'per-company',
employeeCount: applied.employeeCount,
// Company selection is view state. Keep every company in the canonical
// session source so hiding/revealing a company retains successful moves.
companyIds: allCompanies,
}), [applied.employeeCount, dataRevision]);
const source = useMemo(() => new JsonOrgChartDataSource(dataset), [dataset]);
// Core owns edits. This read model updates counts/options without replacing
// dataSource and reloading the unchanged fixture over a successful move.
const [session, setSession] = useState(() => ({ baseline: dataset, current: dataset }));
const currentDataset = session.baseline === dataset ? session.current : dataset;
const organizationCompanies = useMemo(() => {
const byId = new Map(currentDataset.organizations.map(organization => [organization.id, organization]));
const companyById = new Map<string, CompanyId>();
for (const organization of currentDataset.organizations) {
let current = organization;
while (!current.companyId && current.parentId && byId.has(current.parentId)) current = byId.get(current.parentId)!;
if (current.companyId) companyById.set(organization.id, current.companyId as CompanyId);
}
return companyById;
}, [currentDataset]);
const groupChoices = useMemo(() => {
const parents = new Set(currentDataset.organizations.map(organization => organization.parentId));
return currentDataset.organizations.filter(organization => parents.has(organization.id)).map(organization => {
const companyId = organizationCompanies.get(organization.id);
if (!companyId || !applied.companyIds.includes(companyId)) return null;
const company = companies.find(item => item.companyId === companyId);
const prefix = company ? `${company.companyName} · ` : '';
return { id: organization.id, name: organization.name.startsWith(prefix) ? organization.name : `${prefix}${organization.name}` };
}).filter((organization): organization is { id: string; name: string } => organization !== null);
}, [currentDataset, organizationCompanies, applied.companyIds]);
useEffect(() => {
const valid = new Set(groupChoices.map(organization => organization.id));
setLayout(current => {
const previous = current.hybridOrganizationIds ?? [];
const ids = previous.filter(organizationId => valid.has(organizationId));
return ids.length === previous.length ? current : { ...current, hybridOrganizationIds: ids };
});
}, [groupChoices]);
const predicted = draft.companyIds.length * draft.employeeCount;
const displayedTotal = new Set(currentDataset.employees.filter(employee => {
const companyId = organizationCompanies.get(employee.organizationId);
return companyId !== undefined && applied.companyIds.includes(companyId);
}).map(employee => employee.id)).size;
const sessionTotal = new Set(currentDataset.employees.map(employee => employee.id)).size;
const companyEmployeeCounts = useMemo(() => {
const employeeIds = new Map<CompanyId, Set<string>>(allCompanies.map(companyId => [companyId, new Set<string>()]));
for (const employee of currentDataset.employees) {
const companyId = organizationCompanies.get(employee.organizationId);
if (companyId) employeeIds.get(companyId)?.add(employee.id);
}
return new Map([...employeeIds].map(([companyId, ids]) => [companyId, ids.size]));
}, [currentDataset, organizationCompanies]);
const companyCountSummary = applied.companyIds.map(companyId => `${companies.find(company => company.companyId === companyId)!.companyName} ${companyEmployeeCounts.get(companyId) ?? 0}명`).join(' · ');
const pending = draft.employeeCount !== applied.employeeCount
|| draft.companyIds.join() !== applied.companyIds.join();
const selectedCompanyCount = draft.companyIds.length;
const companySummary = selectedCompanyCount === allCompanies.length ? `전체 회사 (${allCompanies.length}개)`
: selectedCompanyCount === 1 ? companies.find(company => company.companyId === draft.companyIds[0])!.companyName
: selectedCompanyCount > 1 ? `${selectedCompanyCount}개 회사 선택` : '회사를 선택하세요';
const allCompaniesChecked = selectedCompanyCount === allCompanies.length ? true
: selectedCompanyCount > 0 ? 'indeterminate' : false;
const changeCompanies = (companyIds: readonly CompanyId[]) => {
const selected = allCompanies.filter(companyId => companyIds.includes(companyId));
setError(null);
// Company filtering is immediate; pending employee-count changes still belong
// to the existing Data Apply action and P7 dataset generation contract.
setDraft(current => ({ ...current, companyIds: selected }));
setApplied(current => ({ ...current, companyIds: selected }));
};
return <StoryPage className="hm-orgchart-story-page hm-orgchart-story-expanded">
<StoryPageHeader
kicker="HM DESIGN SYSTEM / ORGCHART"
title="Expanded OrgChart"
description="데이터·회사·표시 유형을 선택하고 직원 카드를 눌러 정보를 확인하세요. 모든 직원은 가상 데이터입니다."
/>
<StorySection title="데이터 설정" description="회사 선택은 즉시 반영됩니다. 회사당 직원 수 변경은 데이터 적용을 눌러 반영합니다.">
<fieldset className="hm-orgchart-story-settings">
<legend className="hm-orgchart-story-section-legend">데이터 설정</legend>
<FilterBar layout="list-extended">
<div className="hm-orgchart-story-instance">
<Label id={`${id}-companies-label`} htmlFor={`${id}-companies`}>회사 선택</Label>
<Popover>
<PopoverTrigger asChild>
<Button id={`${id}-companies`} type="button" variant="cancel" appearance="outline"
className="hm-orgchart-story-company-trigger" aria-labelledby={`${id}-companies-label ${id}-companies-summary`}>
<span id={`${id}-companies-summary`} className="hm-orgchart-story-company-summary">{companySummary}</span>
<ChevronDownIcon aria-hidden="true" />
</Button>
</PopoverTrigger>
<PopoverContent align="start" aria-labelledby={`${id}-companies-label`} data-component="OrgChartCompanySelection" className="hm-orgchart-story-company-popover">
<fieldset className="hm-orgchart-story-company-options">
<legend className="sr-only">표시할 회사 · 복수 선택 가능</legend>
<div className="hm-orgchart-story-company">
<Checkbox id={`${id}-companies-all`} checked={allCompaniesChecked} onCheckedChange={checked => changeCompanies(checked === true ? allCompanies : [])} />
<Label htmlFor={`${id}-companies-all`}>전체 선택</Label>
</div>
<Separator />
{companies.map(company => <div key={company.companyId} className="hm-orgchart-story-company">
<Checkbox id={`${id}-${company.companyId}`} checked={draft.companyIds.includes(company.companyId as CompanyId)} onCheckedChange={checked => {
changeCompanies(checked === true ? [...draft.companyIds, company.companyId as CompanyId] : draft.companyIds.filter(value => value !== company.companyId));
}} />
<Label htmlFor={`${id}-${company.companyId}`}>{company.companyName}</Label>
</div>)}
</fieldset>
</PopoverContent>
</Popover>
</div>
<div className="hm-orgchart-story-instance">
<Label id={`${id}-size-label`} htmlFor={`${id}-size`}>회사당 직원 수</Label>
<Select value={String(draft.employeeCount)} onValueChange={value => setDraft(current => ({ ...current, employeeCount: Number(value) as DataSettings['employeeCount'] }))}>
<SelectTrigger id={`${id}-size`} aria-labelledby={`${id}-size-label`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent>{[20, 100, 300].map(count => <SelectItem key={count} value={String(count)}>{count}명</SelectItem>)}</SelectContent>
</Select>
</div>
<FilterBarActions>
<Button variant="primary" appearance="solid" onClick={() => { setError(null); setApplied({ ...draft, companyIds: [...draft.companyIds] }); setDataRevision(current => current + 1); }}>데이터 적용</Button>
<Button variant="cancel" appearance="outline" onClick={() => { setError(null); setDraft(initialSettings); setApplied(initialSettings); setDataRevision(current => current + 1); }}>초기화</Button>
</FilterBarActions>
</FilterBar>
<p className="hm-orgchart-story-note" role="status" aria-live="polite">
{pending ? '적용 예정' : '예시 생성 기준'}: {draft.companyIds.length}개 회사 · 회사당 {draft.employeeCount}명 · 총 {predicted.toLocaleString('ko-KR')}명{pending ? ' · 데이터 적용을 눌러 반영하세요.' : ''}
</p>
<p className="hm-orgchart-story-note">회사 숨김·다시 표시는 현재 소속 변경을 유지합니다. 데이터 적용은 선택한 조건의 예시를 새로 만들고, 초기화는 최초 데이터 설정과 소속으로 돌아갑니다.</p>
</fieldset>
</StorySection>
<StorySection title="레이아웃 설정" description="TB·LR·Hybrid 표시 유형과 초기 표시 Depth를 설정합니다.">
<fieldset className="hm-orgchart-story-settings">
<legend className="hm-orgchart-story-section-legend">레이아웃 설정</legend>
<div className="hm-orgchart-story-controls">
<div className="hm-orgchart-story-instance">
<Label id={`${id}-layout-label`} htmlFor={`${id}-layout`}>조직도 표시 유형</Label>
<Select value={layout.type} onValueChange={value => setLayout(current => ({ ...current, type: value as OrgChartAutoLayoutOptions['type'], hybridOrganizationIds: [] }))}>
<SelectTrigger id={`${id}-layout`} aria-labelledby={`${id}-layout-label`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="tb">세로형 TB</SelectItem><SelectItem value="lr">가로형 LR</SelectItem><SelectItem value="hybrid">혼합형 Hybrid</SelectItem></SelectContent>
</Select>
</div>
<div className="hm-orgchart-story-instance">
<Label id={`${id}-hybrid-label`} htmlFor={`${id}-hybrid`}>혼합형 시작 Depth</Label>
<Select value={String(layout.hybridStartDepth)} disabled={layout.type !== 'hybrid'} onValueChange={value => setLayout(current => ({ ...current, hybridStartDepth: Number(value) as 2 | 3 | 4 }))}>
<SelectTrigger id={`${id}-hybrid`} aria-labelledby={`${id}-hybrid-label`} aria-describedby={`${id}-hybrid-help`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent>{[2, 3, 4].map(depth => <SelectItem key={depth} value={String(depth)}>Depth {depth}부터 세로 배치</SelectItem>)}</SelectContent>
</Select>
<span id={`${id}-hybrid-help`} className="hm-orgchart-story-note">Hybrid에만 적용합니다.</span>
</div>
<div className="hm-orgchart-story-instance">
<Label id={`${id}-group-hybrid-label`} htmlFor={`${id}-group-hybrid`}>특정 그룹 세로 배치</Label>
<Select value={layout.hybridOrganizationIds?.[0] ?? 'none'} disabled={layout.type !== 'tb' || !applied.companyIds.length} onValueChange={value => setLayout(current => ({ ...current, hybridOrganizationIds: value === 'none' ? [] : [value] }))}>
<SelectTrigger id={`${id}-group-hybrid`} aria-labelledby={`${id}-group-hybrid-label`} aria-describedby={`${id}-group-hybrid-help`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="none">사용 안 함</SelectItem>{groupChoices.map(organization => <SelectItem key={organization.id} value={organization.id}>{organization.name}</SelectItem>)}</SelectContent>
</Select>
<span id={`${id}-group-hybrid-help`} className="hm-orgchart-story-note">TB에서 선택한 그룹 아래만 적용합니다. LR·Hybrid 전환 시 해제됩니다.</span>
</div>
<div className="hm-orgchart-story-instance">
<Label id={`${id}-depth-label`} htmlFor={`${id}-depth`}>초기 표시 Depth</Label>
<Select value={String(layout.initialVisibleDepth)} onValueChange={value => setLayout(current => ({ ...current, initialVisibleDepth: value === 'all' ? 'all' : Number(value) as 1 | 2 | 3 }))}>
<SelectTrigger id={`${id}-depth`} aria-labelledby={`${id}-depth-label`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent>{[1, 2, 3].map(depth => <SelectItem key={depth} value={String(depth)}>{depth}Depth까지</SelectItem>)}<SelectItem value="all">전체 펼침</SelectItem></SelectContent>
</Select>
</div>
</div>
<p className="hm-orgchart-story-note">Compact: 미지원. 기존 직원 카드 디자인을 보존하며, 압축 배치 선택은 제공하지 않습니다.</p>
</fieldset>
</StorySection>
<StorySection title="인터랙션·직원 정보" description="Drag & Drop과 탐색 기능을 개별 선택하고 직원 카드의 팝업 방식을 설정합니다.">
<div className="hm-orgchart-story-settings">
<fieldset className="hm-orgchart-story-companies">
<legend>독립 기능 설정 · 모든 표시 유형에서 개별 선택</legend>
<div className="hm-orgchart-story-company">
<Switch id={`${id}-drag-drop`} checked={dragDropEnabled} onCheckedChange={setDragDropEnabled} aria-describedby={`${id}-drag-drop-state`} />
<Label htmlFor={`${id}-drag-drop`}>Drag &amp; Drop</Label>
<span id={`${id}-drag-drop-state`}>{dragDropEnabled ? 'ON' : 'OFF'}</span>
</div>
{([
['collapse', '접기·펼치기 사용'], ['zoom', 'Zoom 사용'], ['pan', 'Pan 사용'],
] as const).map(([key, label]) => <div key={key} className="hm-orgchart-story-company">
<Checkbox id={`${id}-interaction-${key}`} checked={interactions[key]} onCheckedChange={checked => setInteractions(current => ({ ...current, [key]: checked === true }))} />
<Label htmlFor={`${id}-interaction-${key}`}>{label}</Label>
</div>)}
</fieldset>
<div className="hm-orgchart-story-controls">
<div className="hm-orgchart-story-instance hm-orgchart-story-popup-setting">
<Label id={`${id}-popup-label`} htmlFor={`${id}-popup`}>직원 정보 팝업</Label>
<Select value={popup} onValueChange={value => setPopup(value as OrgChartProps['employeePopup'])}>
<SelectTrigger id={`${id}-popup`} aria-labelledby={`${id}-popup-label`} size="medium"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="hm-dialog">HMDesign Dialog</SelectItem><SelectItem value="core">Core 기본 팝업</SelectItem><SelectItem value="none">사용 안 함</SelectItem></SelectContent>
</Select>
</div>
</div>
</div>
<Button variant="secondary" appearance="outline" onClick={() => setSelected(undefined)}>전체 회사</Button>
<Button variant="secondary" appearance="outline" onClick={() => setSelected([])}>선택 해제</Button>
</div>
<fieldset className="hm-orgchart-story-companies">
<legend>표시할 회사 · 복수 선택 가능</legend>
{companies.map(company => <div key={company.id} className="hm-orgchart-story-company">
<Checkbox id={`${id}-${company.id}`} checked={visible.includes(company.id)} onCheckedChange={checked => setSelected(checked === true ? [...visible, company.id] : visible.filter(value => value !== company.id))} />
<Label htmlFor={`${id}-${company.id}`}>{company.name}</Label>
<span className="hm-orgchart-story-note">{companyColorPresets[company.id as keyof typeof companyColorPresets].primary}</span>
</div>)}
</fieldset>
<OrgChart dataSource={sources[size]} stylesheetUrls={compositionStylesheets} displayMode="readOnly" layoutMode="auto" selectedCompanyIds={selected} companyTopNodes={topNodes} employeeConnections={connections} className="hm-orgchart-story-chart" />
</section>;
</StorySection>
<StorySection title="조직도 미리보기" description="직원 카드를 눌러 정보를 확인하고, 활성화한 탐색 기능으로 조직도를 살펴봅니다.">
<div className="hm-orgchart-story">
<p className="hm-orgchart-story-note">빈 공간 드래그는 Pan입니다. {dragDropEnabled ? '직원 카드·그룹 타이틀 드래그로 회사 안팎의 소속을 변경합니다. 키보드: Alt+M → 방향키 → Enter / ESC 취소.' : '소속 변경은 Drag & Drop을 ON으로 설정하면 사용할 수 있습니다.'} 클릭은 직원 정보·그룹 접기입니다.</p>
<p className="hm-orgchart-story-note" data-component="OrgChartExampleCounts" aria-live="polite">
표시 중: {applied.companyIds.length}개 회사 · 현재 소속 기준 직원 합계 {displayedTotal.toLocaleString('ko-KR')}명 / 전체 {sessionTotal.toLocaleString('ko-KR')}명
{companyCountSummary ? ` · ${companyCountSummary}` : ''}
</p>
{error ? <p role="alert" className="hm-orgchart-story-note">{error}</p> : null}
<div className="hm-orgchart-story-preview sb-center">
<OrgChart dataSource={source} stylesheetUrls={compositionStylesheets} displayMode="readOnly" layoutMode="auto" autoLayout={layout} interactions={interactions} dragDropEnabled={dragDropEnabled} selectedCompanyIds={applied.companyIds} companyTopNodes={topNodes} employeePopup={popup} className="hm-orgchart-story-chart" onMove={result => { if (result.moved) setSession({ baseline: dataset, current: result.data }); }} onLifecycleError={cause => setError(cause instanceof Error ? cause.message : '조직도 설정을 적용할 수 없습니다.')} onStateChange={state => { if (state.status === 'error') setError(state.issues.map(issue => issue.message).join(' / ')); }} />
</div>
</div>
</StorySection>
</StoryPage>;
}
const meta = { title: 'OrgChart', component: ExpandedPreview, parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof ExpandedPreview>;
const meta = { title: 'OrgChart/Expanded OrgChart', component: ExpandedPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof ExpandedPreview>;
export default meta;
type Story = StoryObj<typeof meta>;
export const ExpandedOrgChart: Story = { name: 'Expanded OrgChart' };
export const ExpandedOrgChart: Story = { name: 'Expanded OrgChart', parameters: { __id: 'orgchart--expanded-org-chart' } };
src/org-chart/org-chart-full-composition.stories.tsx
+8
View File
@@ -0,0 +1,8 @@
import { StrictMode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CompositionPreview } from './org-chart-page-previews';
const meta = { title: 'OrgChart/Full Composition', component: CompositionPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CompositionPreview>;
export default meta;
type Story = StoryObj<typeof meta>;
export const FullComposition: Story = { name: 'Full Composition', parameters: { __id: 'orgchart--full-composition' } };
src/org-chart/org-chart-overview-internal.stories.tsx
+12
View File
@@ -0,0 +1,12 @@
import { StrictMode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CoreComponentPreview } from './core-component-preview';
import './org-chart-stories.css';
const meta = { title: 'OrgChart/Verification/Overview', component: CoreComponentPreview, tags: ['internal'], parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CoreComponentPreview>;
export default meta;
type Story = StoryObj<typeof meta>;
// Literal IDs preserve every existing direct URL after moving the hidden CSF entries.
export const Logo: Story = { name: 'Logo', args: { kind: 'Logo' }, parameters: { __id: 'orgchart--logo' }, render: () => <CoreComponentPreview kind="Logo" /> };
export const PositionSummary: Story = { name: 'Position Summary', args: { kind: 'PositionSummary' }, parameters: { __id: 'orgchart--position-summary' }, render: () => <><p className="hm-orgchart-story-note">가상 직원 데이터 자동 집계 · 실제 운영 인원수가 아닙니다.</p><CoreComponentPreview kind="PositionSummary" /></> };
export const AffiliationSummary: Story = { name: 'Affiliation Summary', args: { kind: 'AffiliationSummary' }, parameters: { __id: 'orgchart--affiliation-summary' }, render: () => <><p className="hm-orgchart-story-note">가상 직원 데이터 자동 집계 · 실제 운영 인원수가 아닙니다.</p><CoreComponentPreview kind="AffiliationSummary" /></> };
src/org-chart/org-chart-p1.stories.tsx
+4 -52
View File
@@ -1,56 +1,8 @@
import { StrictMode, useMemo, useState } from 'react';
import { StrictMode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from '@hm-design/ui';
import { OrgChart } from '@hm-design/org-chart-react';
import { JsonOrgChartDataSource } from '@hm-design/org-chart';
import engineUrl from '@hm-design/org-chart/engine.css?url';
import coreUrl from '@hm-design/org-chart/style.css?url';
import fixture from '../../examples/org-chart/data-p1.json';
import './org-chart-stories.css';
import { CoreComponentPreview } from './core-component-preview';
import { OverviewPreview } from './org-chart-page-previews';
const compositionSource = new JsonOrgChartDataSource(fixture);
const compositionStylesheets = { engine: engineUrl, core: coreUrl };
/** View-only Workdesk composition: the same Core/React Wrapper with
* displayMode="readOnly". No Story notes, test controls or collapse buttons;
* JSON update/lifecycle and collapse checks stay in the internal Content Stories. */
function CompositionPreview() {
return <section className="hm-orgchart-story hm-orgchart-story-full" aria-label="Full Composition">
<OrgChart dataSource={compositionSource} stylesheetUrls={compositionStylesheets} displayMode="readOnly" className="hm-orgchart-story-chart" />
</section>;
}
function DepartmentTypographyPreview() {
const [longNames, setLongNames] = useState(false);
const data = useMemo(() => {
const data = structuredClone(fixture);
if (longNames) for (const id of ['mock-leader-00', 'mock-leader-01', 'mock-employee-01']) {
data.employees.find(item => item.id === id)!.name = '아주긴가상이름표시검증사례';
}
return data;
}, [longNames]);
return <section className="hm-orgchart-story">
<p className="hm-orgchart-story-note">기본 이름은 2–3음절의 가상 이름입니다. 긴 이름 검증에서는 폰트·사진·카드 크기를 유지하며 말줄임된 이름에 Hover 또는 Tab Focus로 전체 이름을 확인하고 Escape로 닫을 수 있습니다.</p>
<div className="hm-orgchart-story-controls"><Button appearance="outline" aria-pressed={longNames} onClick={() => setLongNames(value => !value)}>긴 이름 검증 {longNames ? '종료' : '시작'}</Button></div>
<CoreComponentPreview kind="DepartmentColors" data={data} />
</section>;
}
const meta = { title: 'OrgChart', component: CompositionPreview, parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof CompositionPreview>;
const meta = { title: 'OrgChart/Overview', component: OverviewPreview, parameters: { layout: 'fullscreen', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof OverviewPreview>;
export default meta;
type Story = StoryObj<typeof meta>;
export const LogoPersonnelSummary: Story = {
name: 'Logo · Personnel Summary',
render: () => <section className="hm-orgchart-story" aria-label="Logo · Personnel Summary">
<CoreComponentPreview kind="Logo" />
<CoreComponentPreview kind="PositionSummary" />
<CoreComponentPreview kind="AffiliationSummary" />
</section>,
};
export const DepartmentColors: Story = { name: 'Department Colors', render: () => <DepartmentTypographyPreview /> };
export const FullComposition: Story = { name: 'Full Composition' };
// Preserve existing standalone Story IDs for verification and direct links.
// The default manager excludes "internal"; user-facing navigation has three pages.
export const Logo: Story = { name: 'Logo', tags: ['internal'], render: () => <CoreComponentPreview kind="Logo" /> };
export const PositionSummary: Story = { name: 'Position Summary', tags: ['internal'], render: () => <><p className="hm-orgchart-story-note">가상 직원 데이터 자동 집계 · 실제 운영 인원수가 아닙니다.</p><CoreComponentPreview kind="PositionSummary" /></> };
export const AffiliationSummary: Story = { name: 'Affiliation Summary', tags: ['internal'], render: () => <><p className="hm-orgchart-story-note">가상 직원 데이터 자동 집계 · 실제 운영 인원수가 아닙니다.</p><CoreComponentPreview kind="AffiliationSummary" /></> };
export const LogoPersonnelSummary: Story = { name: 'Overview', parameters: { __id: 'orgchart--logo-personnel-summary' } };
src/org-chart/org-chart-page-previews.tsx
+53
View File
@@ -0,0 +1,53 @@
import { useLayoutEffect, useRef } from 'react';
import { OrgChart } from '@hm-design/org-chart-react';
import { JsonOrgChartDataSource } from '@hm-design/org-chart';
import engineUrl from '@hm-design/org-chart/engine.css?url';
import coreUrl from '@hm-design/org-chart/style.css?url';
import { StoryPage, StoryPageHeader, StorySection } from '@/components/story-page';
import fixture from '../../examples/org-chart/data-p1.json';
import './org-chart-stories.css';
import { CoreComponentPreview } from './core-component-preview';
import { centerCompositionPreview } from './center-composition-preview';
const compositionSource = new JsonOrgChartDataSource(fixture);
const compositionStylesheets = { engine: engineUrl, core: coreUrl };
/** View-only Workdesk composition: the same Core/React Wrapper with
* displayMode="readOnly". No Story notes, test controls or collapse buttons;
* JSON update/lifecycle and collapse checks stay in the internal Content Stories. */
export function CompositionPreview() {
const host = useRef<HTMLElement>(null);
useLayoutEffect(() => centerCompositionPreview(host.current!), []);
return <StoryPage className="hm-orgchart-story-page">
<StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Full Composition" description="Workdesk 기반 고정형 조직도입니다. 대표자와 6개 조직, 협업 허브 및 인원 현황을 한 화면에서 확인합니다." />
<StorySection title="고정형 조직도" description="직원 카드를 눌러 정보를 확인하세요. 미리보기 영역의 실제 폭에 맞춰 전체 구성을 비례 축소합니다.">
<section ref={host} className="hm-orgchart-story hm-orgchart-story-full" aria-label="Full Composition">
<OrgChart dataSource={compositionSource} stylesheetUrls={compositionStylesheets} displayMode="readOnly" className="hm-orgchart-story-chart" />
</section>
</StorySection>
</StoryPage>;
}
export function DepartmentTypographyPreview() {
return <StoryPage className="hm-orgchart-story-page">
<StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Department Colors" />
<StorySection title="조직별 컬러 · 카드 미리보기">
<div className="hm-orgchart-story-preview"><CoreComponentPreview kind="DepartmentColors" presentation="design" /></div>
</StorySection>
</StoryPage>;
}
export function OverviewPreview() {
return <StoryPage className="hm-orgchart-story-page">
<StoryPageHeader kicker="HM DESIGN SYSTEM / ORGCHART" title="Overview" description="회사 로고와 조직·직위별, 관계사별 인원 현황입니다. 인원 현황은 고정형 조직도와 같은 Core 집계·표시 디자인을 사용하며 기존 가상 데이터를 표시합니다." />
<StorySection title="관계사·회사 로고" description="회사 로고와 기존 안내를 확인합니다.">
<div className="hm-orgchart-story-preview"><CoreComponentPreview kind="Logo" /></div>
</StorySection>
<StorySection title="조직·직위별 인원 현황" description="기존 가상 직원 데이터를 조직·직위별로 집계합니다.">
<div className="hm-orgchart-story-preview"><CoreComponentPreview kind="PositionSummary" presentation="workdesk" /></div>
</StorySection>
<StorySection title="관계사별 인원 현황" description="동일 데이터의 관계사별 인원 현황입니다. 실제 운영 인원수가 아닙니다.">
<div className="hm-orgchart-story-preview"><CoreComponentPreview kind="AffiliationSummary" presentation="workdesk" /></div>
</StorySection>
</StoryPage>;
}
src/org-chart/org-chart-stories.css
+5 -1
View File
@@ -10,9 +10,13 @@
/* Full Composition scales itself to the available width; no host cap. */
.hm-orgchart-story-full { max-width: none; }
body:has(.hm-orgchart-story-full) { background: #F5F8FB; }
.hm-orgchart-story-full { background: #F5F8FB; }
/* Reuse StoryPage's inner/gutters; specimens receive the measured content width.
No page selector reaches into the Core's Shadow DOM. Fixed has no extra inset. */
.hm-orgchart-story-page .hm-orgchart-story { max-width: none; }
.hm-orgchart-story-page .hm-orgchart-story-preview { min-width: 0; max-width: 100%; }
.hm-orgchart-story-note {
margin: 0;
overflow-wrap: anywhere;