33 lines
1.9 KiB
JavaScript
33 lines
1.9 KiB
JavaScript
export function startDemo(api, inlineFixtures) {
|
|
const { createOrgChart, JsonOrgChartDataSource } = api;
|
|
const container = document.getElementById('chart-host');
|
|
const status = document.getElementById('status');
|
|
const stylesheetUrls = {
|
|
engine: new URL('./assets/engine.css', location.href).href,
|
|
core: new URL('./assets/style.css', location.href).href,
|
|
};
|
|
const source = () => new JsonOrgChartDataSource(inlineFixtures ? inlineFixtures.initial : './data-v1.json');
|
|
let chart;
|
|
function create() {
|
|
chart?.destroy();
|
|
chart = createOrgChart({ container, dataSource: source(), stylesheetUrls, onStateChange(state) {
|
|
status.textContent = state.status === 'ready' ? `Ready · ${state.dataVersion}`
|
|
: state.status === 'error' ? `Error · ${state.issues.map(issue => issue.code).join(', ')}` : state.status;
|
|
} });
|
|
return chart.mount();
|
|
}
|
|
async function update() {
|
|
const data = inlineFixtures ? inlineFixtures.changed : await (await fetch('./data-v2.json')).json();
|
|
await chart.update(data);
|
|
}
|
|
function destroy() { chart.destroy(); status.textContent = 'Destroyed · 새 인스턴스로 다시 생성할 수 있습니다.'; }
|
|
const actions = { reload: () => chart.reload(), update, destroy, recreate: create };
|
|
for (const [id, action] of Object.entries(actions)) document.getElementById(id).addEventListener('click', () => {
|
|
Promise.resolve().then(action).catch(() => { status.textContent = 'Core 호출 순서를 확인하세요.'; });
|
|
});
|
|
window.addEventListener('pagehide', () => chart.destroy(), { once: true });
|
|
// This example's inspection seam uses only public Core APIs, never engine internals.
|
|
window.OrgChartDemo = { api, container, stylesheetUrls, source, create, update, destroy, get chart() { return chart; } };
|
|
create().then(() => { window.orgChartReady = true; }).catch(() => { status.textContent = 'Mount failed'; });
|
|
}
|