mapix

Constraint

1. 쓰는 쪽 사정을 알 수 없다

   내부 코드는 우리 앱의 스타일과 레이아웃을 전제해도 됩니다. 패키지는 안 됩니다. 스타일을 주입하지 않은 앱에서도 경고가 보여야 하고, 패널이 화면 절반을 덮은 레이아웃에서도 슬라이더가 쓸 만해야 합니다.

2. 포인터만 있는 게 아니다

   비교 슬라이더는 드래그로 조작하는 컴포넌트입니다. 드래그할 수 없는 사람에게도 같은 기능이 열려 있어야 합니다.

3. 남의 지도를 빌려 쓴다

   슬라이더는 소비자가 만든 지도 두 개를 받아 씁니다. 다 쓰고 나면 받았을 때 모습 그대로 돌려줘야 합니다. 드래그 도중에 제거되더라도요.

Decision

1. 경고 레이어를 지도에 직접 등록한다

   자기교차 경고의 소스와 레이어를 패키지가 지도에 직접 올립니다. 소비자가 스타일을 한 줄도 넣지 않아도 잘못 그린 도형이 빨갛게 드러납니다. 선 두께는 소비자가 흔히 쓰는 획 위에 얹어도 테두리가 새지 않도록 한 단계 두껍게 잡았습니다.

2. 끝점을 공유하는 건 교차가 아니다

   선분 교차를 엄격 부등호로 판정합니다. 이웃한 변은 반드시 끝점을 공유하므로, 등호를 허용하면 정상적인 폴리곤이 전부 경고에 걸립니다. 좌표는 평면으로 근사했습니다. 관심 지역 규모에서는 이 판정이 지도 곡률에 좌우되지 않습니다.

3. 슬라이더를 키보드로 완결시킨다

   손잡이를 role="slider"로 탭 순서에 넣고 방향키·PageUp/Down·Home/End를 붙였습니다. 키를 누르고 있는 동안 이벤트가 쏟아지지 않도록, 키를 떼거나 초점이 빠질 때 완료를 한 번만 알립니다.

4. 되돌릴 수 있게 만든다

   remove()는 지도 컨테이너가 처음 가지고 있던 인라인 스타일을 되써 넣고 붙인 리스너를 모두 뗍니다. 슬라이더에 잠깐 빌려준 지도를 다른 곳에서 다시 써도 흔적이 남지 않습니다.

Interface

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { DrawPolygon, DrawRectangle } from '@telepix-lab/mapix';

const draw = new MapboxDraw({
  displayControlsDefault: false,
  modes: { ...MapboxDraw.modes, draw_polygon: DrawPolygon },
});

map.addControl(draw);
draw.changeMode('draw_polygon', { maxVertices: 1000 });

const compare = new Compare(beforeMap, afterMap, container, {
  orientation: 'vertical',
  bounds: { min: 0.25, max: 0.95 },
  initialRatio: 0.6,
});

compare.on('slideend', (event) => {
  console.log(event.currentPosition);
});

compare.remove();

const result = await parseFile(file);

if (result.success && result.data) {
  const vertexCount = countVertices(result.data);
  // result.correction: 구조를 고쳤다면 무엇을 고쳤는지
} else {
  // result.errorCode: 고정된 기계 코드. 문구는 쓰는 쪽에서 정한다
  console.error(result.errorCode);
}

Engineering

Result