fix(org-chart): separate fixed and expanded canvas backgrounds
This commit is contained in:
shkim4 committed
1 parent
cd7a0db916
commit
72d427fcd2
6 files changed
+166
-4
No files matched your search
@@ -71,12 +71,58 @@ await chart.mount();
|
||||
|
||||
이 방식은 **Custom Property 상속만** Shadow DOM을 통과한다. 호스트의 `.hm-orgchart-employee { ... }` 같은 selector는 Shadow 내부 카드에 적용되지 않는다. 내부 selector를 수정해야 하면 `stylesheetUrls.core` 파일 안에 작성한다. 호스트 class를 제거하면 기본값이 즉시 복원된다. 외부 테마를 동시에 쓸 경우 Shadow 파일의 `:host`에 같은 입력을 선언하면 조상에서 상속된 값보다 우선한다. 소비자가 직접 inline으로 입력 변수를 설정하면 소비자 inline이 우선하므로 CSS 파일 운영 시 이를 제거한다.
|
||||
|
||||
### P11.5 Fixed·Expanded 캔버스 배경 독립 설정 (2026-10-14)
|
||||
|
||||
캔버스 전용 입력은 `--hm-orgchart-fixed-canvas-background`와 `--hm-orgchart-expanded-canvas-background`다. 새 JS 옵션이나 React Props 없이 같은 Core CSS로 React·Vanilla에 적용된다.
|
||||
|
||||
- Fixed readOnly / Full Composition: 미지정 시 기존 `--hm-orgchart-bg-content` → `#F5F8FB` 유지. composition과 내부 stage에 함께 적용된다. Fixed interactive는 미지정 시 기존 투명 배경을 유지한다.
|
||||
- Expanded / Auto: 내부 viewport에만 적용. 미지정 시 기존 `--hm-orgchart-bg-surface` → `#FFFFFF`를 유지하여 기존 외부 테마 override가 무효화되지 않는다. 카드 배경·바깥 프레임의 `--hm-orgchart-expanded-preview-background`는 바뀌지 않는다.
|
||||
- Chart Only: 기본 흰 캔버스와 기존 Fit·Wheel Zoom·Pan 유지. Auto 내부 viewport이므로 Expanded 캔버스 입력을 지정하면 같은 방식으로 커스터마이징할 수 있다. Fixed Chart Only는 계속 미지원이다.
|
||||
- 각 전용 입력이 기존 공통 배경 입력보다 우선한다. 한쪽 전용 입력은 다른 유형에 영향을 주지 않는다. Storybook 페이지·Header·외부 Container는 적용 대상이 아니다.
|
||||
|
||||
호스트 HTML에 연결하는 CSS 예시:
|
||||
|
||||
```css
|
||||
.orgchart-canvas-theme {
|
||||
--hm-orgchart-fixed-canvas-background: #F5F8FB;
|
||||
--hm-orgchart-expanded-canvas-background: #FFFFFF;
|
||||
}
|
||||
```
|
||||
|
||||
React (앞 절의 공개 CSS URL import와 `dataSource` 사용):
|
||||
|
||||
```tsx
|
||||
import coreUrl from '@hm-design/org-chart/style.css?url';
|
||||
|
||||
<OrgChart className="orgchart-canvas-theme" dataSource={dataSource}
|
||||
displayMode="readOnly" stylesheetUrls={{ engine: engineUrl, core: coreUrl }} />
|
||||
<OrgChart className="orgchart-canvas-theme" dataSource={autoDataSource}
|
||||
layoutMode="auto" stylesheetUrls={{ engine: engineUrl, core: coreUrl }} />
|
||||
```
|
||||
|
||||
Vanilla (앞 절의 공개 ESM import와 CSS 서빙 경로 사용):
|
||||
|
||||
```js
|
||||
fixedContainer.classList.add('orgchart-canvas-theme');
|
||||
expandedContainer.classList.add('orgchart-canvas-theme');
|
||||
const stylesheetUrls = { engine: '/assets/org-chart/engine.css', core: '/assets/org-chart/style.css' };
|
||||
const fixed = createOrgChart({ container: fixedContainer, dataSource,
|
||||
displayMode: 'readOnly', stylesheetUrls });
|
||||
const expanded = createOrgChart({ container: expandedContainer, dataSource: autoDataSource,
|
||||
layoutMode: 'auto', stylesheetUrls });
|
||||
await fixed.mount();
|
||||
await expanded.mount();
|
||||
```
|
||||
|
||||
Shadow DOM 내부의 외부 CSS 파일을 사용할 때는 기존 기본 CSS import 뒤의 `:host`에 위 두 입력을 선언한다. 호스트 상속·`:host`·소비자 inline의 기존 우선순위는 그대로다. 같은 페이지에서 서로 다른 class 또는 각 컨테이너의 CSS 입력으로 인스턴스별 배경을 지정할 수 있다. 회사색·카드·연결선·팝업은 이 입력의 대상이 아니다.
|
||||
|
||||
### 공식 컬러 변수
|
||||
|
||||
아래 이름은 모두 `--hm-orgchart-` 접두사를 사용한다. `resolved-*`, `current-*`, `expanded-primary`, `expanded-card-primary`는 내부 계산 결과이므로 테마는 아래 공개 입력을 사용한다. 표에 없는 geometry API와 기존 table 변수는 그대로 유지한다.
|
||||
|
||||
| 입력 이름 (접두사 생략) | 적용 범위 / 기본값 정책 |
|
||||
|---|---|
|
||||
| `fixed-canvas-background`, `expanded-canvas-background` | Fixed composition/stage 및 Auto 내부 viewport의 독립 배경. 위 P11.5 절의 기존 입력 fallback 유지 |
|
||||
| `bg-surface`, `bg-content`, `bg-subtle`, `bg-brand` | 캔버스·내용·보조 배경·브랜드 배경. Fixed readOnly의 `bg-content` 미지정 기본값은 기존 `#F5F8FB` |
|
||||
| `fg-primary`, `fg-secondary` | 일반 텍스트 / 보조 텍스트 |
|
||||
| `stroke-default`, `stroke-input-default`, `stroke-input-focus` | 일반 Border / 입력 Border / Focus |
|
||||
@@ -840,6 +886,8 @@ React 없이 생성해 달라는 명시적 요청은 이 가이드의 Vanilla Co
|
||||
|
||||
위 항목은 UsageGuide 원본 문서 작업 당시의 범위다. **P10.2 추가 검증:** 통합 후 TS/TSX 예제 10개를 현재 package 공개 `.d.ts`에 연결해 strict·skipLibCheck=false로 확인했다(PASS). 기존 실제 npm pack A/B/C 설치·타입·Build·팝업 검사 PASS는 현재 배포 JS/타입/CSS의 byte 동일성을 확인해 재사용했다. 독립 Chart Only React/Vanilla Build와 위 브라우저 검사는 새로 수행했다. 이 가이드의 HMChart/CustomChart 예제 자체의 브라우저 시연, 전체 회귀·성능·SSR·스크린리더·모바일 touch는 NOT VERIFIED다.
|
||||
|
||||
**P11.6 추가 검증(2026-10-14):** 현재 가이드의 TS/TSX 블록 14개를 깨끗한 빌드의 공개 `.d.ts`에 연결해 strict·skipLibCheck=false로 검사했다(PASS). 앞 절의 변수를 사용하는 외부 CSS/P11.5 부분 예제 2개에는 명시된 데이터·Import 문맥을 보충했다. JSON 예제 2개는 실제 Validator PASS다. React·Vanilla 배경 독립 설정·테마 제거 복구·Chart Only 커스텀 배경과 새 Storybook 빌드는 추가 브라우저 20/20 PASS다. 예제 각각의 전체 브라우저 실행이나 Guard Runtime PASS를 뜻하지 않는다. 검사 범위·기존 증거 재사용·배포 플랫폼 미검증은 [P11.6 정합성 보고서](consistency-review-p11-6.md)를 따른다.
|
||||
|
||||
## 12. 관련 문서·실제 소스
|
||||
|
||||
필요한 부분만 확인한다.
|
||||
|
||||
Reference in new issue
Block a user