이동, 복제, 삭제, 잠금

이번에는 이동, 복제, 삭제, 잠금 같은 기본 편집 명령입니다.

버튼을 누르거나 단축키를 입력하면 화면이 바뀝니다. 그런데 에디터 내부에서는 “DOM을 바로 바꿨다”가 아니라 “모델에 명령을 적용했다”로 생각하는 편이 좋습니다.

명령으로 다루면 undo, redo, 저장, 협업으로 이어지기 쉽습니다.

모든 편집은 상태 변화다

move: position' = position + delta
duplicate: newNode = clone(node) with new id and offset
delete: model = model without selected ids

툴바, 단축키, 드래그는 서로 다른 입력일 뿐입니다. 모두 같은 command 입구로 들어가야 상태 변경과 기록이 일관됩니다.

이동은 위치에 delta를 더하는 일입니다. 복제는 새 id를 만들고, 위치를 살짝 옮기고, z order와 parent id를 정하는 일입니다. 삭제는 선택된 id를 모델에서 제거하는 일입니다.

DOM은 그 결과를 화면에 보여주는 projection입니다. 직접 DOM부터 바꾸면 나중에 기록을 남기기 어렵습니다.

toolbar 버튼, shortcut, context menu가 모두 같은 command 함수를 호출해야 합니다.

click toolbar -> moveCommand
press arrow key -> moveCommand
drag object -> moveCommand

입력 경로는 달라도 모델 변경 방식은 같아야 동작이 일관됩니다.

잠금은 style이라기보다 input policy에 가깝습니다. 화면에는 그대로 보이지만 hit testing에서 제외하거나 편집 명령을 거부합니다.

데모에서는 같은 이동 동작을 마우스 드래그와 키보드 방향키에서 같은 command로 실행하는 구조를 봅니다.

오늘의 핵심은 편집 동작을 작은 명령으로 쪼개는 것입니다. UI는 여러 개여도 상태 변경의 입구는 하나로 모으는 편이 좋습니다.