핵심 가이드

다중 사용자 레이어

loadUserCanvasOverlay()는 여러 사용자(또는 여러 버전)의 canvasData를 뷰어에 레이어로 주입합니다. 뷰어 이력 패널에 항목 목록이 나타나고, 사용자는 각 레이어를 켜고 끄며 원하는 조합으로 겹쳐 볼 수 있습니다.

계약 검토 — 법무·재무·현업 검토자의 표시를 한 화면에서 비교
도면 회람 — 공정별 담당자의 마킹을 선택적으로 표시
버전 비교 — 같은 문서의 v1 ↔ v3 차이를 시각적으로 확인

기본 사용 — 사용자별 레이어

문서 렌더가 끝난 뒤(onPdfLoaded)에 항목 배열을 전달합니다. 배열을 다시 전달하면 패널 전체가 새 목록으로 교체됩니다.

검토자 작업 겹쳐 보기 js

var viewer = Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/blueprint.pdf',

  onPdfLoaded: function () {
    // 문서 렌더 완료 후 — 검토자들의 작업을 레이어로 주입
    fetch('/api/annotations?docId=123')
      .then(function (res) { return res.json(); })
      .then(function (rows) {
        viewer.loadUserCanvasOverlay(rows.map(function (r) {
          return {
            canvasId:   String(r.id),       // 항목 고유 ID (필수)
            userName:   r.userName,         // 패널에 표시할 이름
            canvasData: r.canvasData,       // 해당 사용자의 저장본
            enabled:    false,              // 초기 표시 여부 (기본 꺼짐)
            regDt:      r.createdAt         // 표시용 등록 시각
          };
        }));
      });
  }
});

항목 필드

필드	타입		설명
`canvasId`	`string`	필수	항목 고유 식별자. 토글·이어서 편집의 대상 키입니다.
`userName`	`string`	선택	이력 패널에 표시할 이름.
`canvasData`	`string`	필수	해당 사용자·버전의 저장본(onSave로 받은 값 그대로).
`enabled`	`boolean`	선택	초기 표시 여부. 기본 `false`(꺼짐) — 사용자가 패널에서 켭니다.
`regDt`	`string`	선택	패널에 표시할 등록 시각 문자열.
`version`	`number`	선택	버전 번호 — 버전 이력 용도로 쓸 때 표기용.
`isCurrent`	`boolean`	선택	현재 편집 캔버스에 올라간 버전 표시 — 아래 버전 이력 모드 참고.

버전 이력 모드 — isCurrent

항목 중 하나에 isCurrent: true를 지정하면 뷰어가 버전 이력 모드로 동작합니다. 해당 항목은 패널에서 "편집 중"으로 표시되고(토글 불가), 오버레이로 중복 렌더되지 않습니다. 편집 캔버스에 이미 올라가 있는 버전이기 때문입니다.

버전 이력 패널 구성 js

// 같은 문서의 "내 버전 이력"을 패널에 올리는 패턴
// 최신 버전(목록 첫 항목)에 isCurrent: true를 표시하면
// 뷰어가 버전 이력 모드로 동작합니다.
var entries = versions.map(function (v, i) {
  return {
    canvasId:   'v' + v.version,
    userName:   v.userName + ' (v' + v.version + ')',
    canvasData: v.canvasData,
    regDt:      v.createdAt,
    version:    v.version,
    isCurrent:  i === 0    // 편집 캔버스에 올라간 현재 버전 표시
  };
});

viewer.loadUserCanvasOverlay(entries);

과거 버전에서 '이어서 편집'

버전 이력 모드에서 사용자는 패널의 과거 버전 항목을 편집 캔버스로 불러와 그 시점부터 다시 작업할 수 있습니다. 저장하면 새 버전으로 쌓이므로 기존 이력은 그대로 보존됩니다 — 저장과 버전 관리 참고.

저장 직후 패널 갱신

저장이 성공하면 서버에서 최신 목록을 다시 받아 loadUserCanvasOverlay()를 한 번 더 호출하는 것이 일반적인 패턴입니다.

onSave에서 패널 갱신 js

onSave: function (canvasData, ok) {
  if (!ok) return;
  saveToServer(canvasData).then(function () {   // saveToServer = 고객사 저장 API 호출(자리표시자)
    return fetch('/api/annotations?docId=123').then(function (r) { return r.json(); });
  }).then(function (rows) {
    viewer.loadUserCanvasOverlay(toEntries(rows));  // 패널 즉시 갱신
  });
}

initialCanvasData와의 차이

	`initialCanvasData`	`loadUserCanvasOverlay()`
용도	내 직전 작업 복원 — 이어서 편집	다른 사용자·다른 버전 참고 — 겹쳐 보기
편집 가능 여부	편집 캔버스에 올라감 — 수정 가능	읽기 레이어 — 토글만 가능
전달 시점	마운트 옵션 / `loadPdf*` 인자	마운트 후 메서드 호출 (주로 `onPdfLoaded`)
저장 시 포함	포함됨 (내 작업의 일부)	포함되지 않음 (참고용 표시)