selection bounds와 handles

이번에는 선택된 오브젝트 주변에 나타나는 파란 박스와 핸들입니다.

사용자는 이 UI를 보고 “아, 이게 선택됐구나” 하고 이해합니다. 그리고 corner handle을 잡고 resize하거나, 위쪽 rotation handle을 잡고 회전합니다.

즉 selection overlay는 단순한 장식이 아니라 편집 동작의 입구입니다.

selection bounds는 합집합이다

bounds = union(AABB_i)

selection overlay는 content가 아니라 tool UI입니다. 위치는 bounds에서 오지만 handle 크기는 screen px로 유지합니다.

선택된 오브젝트가 하나라면 그 오브젝트의 bounds가 selection bounds입니다. 여러 개라면 각 오브젝트의 transformed corner를 모아 min/max를 구합니다.

corner handles = (left, top), (right, top), ...
edge handles = midpoint(edge)

corner에는 resize handle, edge 중간에는 한 축 resize handle을 배치할 수 있습니다. rotation handle은 보통 bounds 위쪽으로 일정 screen 거리만큼 떨어뜨려 둡니다.

handle이 content layer 안에 들어가서 같이 zoom되면, zoom out에서 너무 작아지고 zoom in에서 너무 커집니다. 그래서 overlay에 screen pixel 크기로 그리는 편이 안정적입니다.

handle size = 8 screen px
handle position = project(world bounds point)

위치는 world bounds를 screen으로 투영해 정하고, 크기는 screen 기준으로 유지합니다. 이 둘을 구분하면 핸들이 훨씬 얌전합니다.

사각형, 텍스트, path, frame은 모두 다른 편집 핸들을 가질 수 있습니다. 같은 selection overlay 구조 위에 대상별 handle set을 얹는 방식이 좋습니다.

데모에서는 여러 도형을 선택했을 때 bounds가 각 도형의 어떤 점을 포함하는지 확인합니다.

오늘의 핵심은 selection overlay를 content가 아니라 도구 UI로 보는 것입니다. 오브젝트는 world에 있고, 핸들은 화면에서 잡기 좋아야 합니다.