히트 테스트(Hit Testing)

히트 테스트를 사용하면 포인터 위치 아래에 있는 스케줄러 요소를 식별할 수 있습니다. 히트 테스트 결과는 렌더링된 DOM 조각의 구조에 의존하지 않고 화면 좌표를 원본 항목, 셀, 리소스 및 헤더와 연결합니다.

포인터 이벤트 테스트

MouseEvent를 hitTest에 전달한 다음 getHitInfo()를 호출해 일치하는 정보를 가져옵니다.

scheduler.hostElement.addEventListener('click', (event: MouseEvent) => {
  const hit = scheduler.hitTest(event);
  const info = hit.getHitInfo();

  if (!info) {
    return;
  }

  if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Item) {
    openEventDetails(info.item);
  } else if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Cell) {
    showCellActions(info.start, info.end, info.resources);
  }
});

hitTest는 페이지 좌표, Wijmo Point, MouseEvent 또는 HTMLElement를 인수로 받을 수 있습니다. 좌표의 출처에 맞는 형식을 사용하세요.

히트 테스트 유형 확인

SchedulerHitTestInfo.hitTestType은 일치하는 스케줄러 영역을 식별합니다.

히트 테스트 유형	`getHitInfo()` 결과	일반적인 용도
`Cell`	`CellInfo`	이벤트 생성 또는 시간/리소스 슬롯 확인
`Item`	`ItemInfo`	원본 항목 열기, 검사 또는 작업 수행
`ColumnHeader`	`BandInfo`	열 축의 레이블 또는 수준 확인
`RowHeader`	`BandInfo`	행 축의 레이블 또는 수준 확인
`None`	`null`	유효한 스케줄러 대상 외부의 클릭 무시

반환된 element는 일치한 스케줄러 요소이며, point에는 확인된 페이지 좌표가 포함됩니다. None과 null은 정상적인 결과 없음 상태로 처리하세요.

셀 정보 읽기

셀 히트 결과에는 해당 셀이 나타내는 시간 범위와 리소스 컨텍스트가 포함됩니다.

const hit = scheduler.hitTest(mouseEvent);
if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Cell) {
  const cell = hit.getHitInfo();
  scheduler.create({
    subject: 'New appointment',
    start: cell.start,
    end: cell.end,
    ...cell.resources,
  });
}

애플리케이션에서 작업 시간 규칙을 표시하거나 적용해야 하는 경우 셀의 isWorkingTime 값을 사용하세요.

이벤트 항목 정보 읽기

항목 히트 결과에는 원본 항목과 해당 항목의 리소스 및 충돌 컨텍스트가 포함됩니다.

scheduler.hostElement.addEventListener('dblclick', event => {
  const hit = scheduler.hitTest(event);
  if (hit.hitTestType !== wjScheduler.SchedulerHitTestType.Item) {
    return;
  }

  const itemInfo = hit.getHitInfo();
  openEventEditor(itemInfo.item);
});

여러 날짜 또는 리소스 섹션에 걸쳐 있는 이벤트는 렌더링된 조각이 여러 개일 수 있습니다. 히트 테스트는 각 조각을 동일한 원본 항목으로 연결하므로, 명령은 조각 요소가 아니라 itemInfo.item을 대상으로 실행해야 합니다.

헤더 정보 읽기

헤더 히트 결과는 축 방향, 수준 및 표시 텍스트를 설명하는 BandInfo를 반환합니다.

const hit = scheduler.hitTest(event);
if (hit.hitTestType === wjScheduler.SchedulerHitTestType.ColumnHeader ||
    hit.hitTestType === wjScheduler.SchedulerHitTestType.RowHeader) {
  const band = hit.getHitInfo();
  showAxisDetails(band.axis, band.level, band.text);
}

축 수준에 대한 명령을 처리할 때는 헤더 정보를 사용하세요. CSS 클래스나 헤더의 위치를 기준으로 축 수준을 추측하지 마세요.

히트 테스트를 안전하게 사용하기

히트 테스트는 현재 스케줄러에 표시된 요소만 확인합니다. 스케줄러 컨트롤 외부의 좌표나 이동 또는 크기 조정 중에 생성된 미리 보기 조각에 대한 데이터는 반환하지 않습니다.

애플리케이션 명령은 반환된 원본 정보를 기준으로 처리하고, 각 필드에 접근하기 전에 결과가 null인지 확인하세요.