Drag & Resize 컴포넌트

작업중인 컴포넌트 하나 올려봅니다. 디자인툴에 많이 사용되죠 드래그하고 리사이징하는 기능인데요..
기본 기능에 몇가지 추가해 보았습니다. 

좌측 메뉴판에서 여러옵션을 줄수 있는데요..
먼저 add 버튼으로 캔버스에 인스턴스를 추가합니다. select 관리부터 시작해 보겠습니다.

Select Test
먼저 마우스에 의한 선택상황 체크를 테스트 해 봅니다. 각 체크박스에 따른 옵션이 따라 버튼을 누르면 적용되어 집니다.
예를 들면 selectedOption=false, selectableOption=true 옵션에 removeAll 버튼을 클릭하면 현재 선택 상황이 아닌 모든 인스턴스가 제거되는 식입니다. selected, selectable 버튼에 대한 설명은 툴팁으로 넣어놨습니다.

Drag Test
드래그 움직임 효과, 드래그 할때 모양 표시, 마그네틱(snap) 효과 옵션 입니다.
인스턴스 먼저 선택 후 (드래그) 동작하는 방식입니다.
Snap Sensitive와 snap mode 로 마그네틱 효과 조절할 수 있구요, SnapToObject Line은 snap mode가 SnapToObject일때만 활성화 됩니다. 말 그대로 라인 표시기능입니다. 두개 이상의 인스턴스가 있을때 확인 가능합니다.
다른건 모양표시라든지 움직임 효과에 대한 것입니다.
인스턴스 생성 위치를 랜덤으로 돌려놨는데 화면 밖에서 생성되서 안보일때가 있네요.

Resize Test 
앵커 핸들 모양과 위치 조절, 리사이징 움직임 효과, 리사이징시 영역 표시 방법, 마그네틱(snap) 효과 옵션입니다. 각 효과는 드래그 할때 말고 리사이징 할때만 적용됩니다. 아래 "강제 크기 변환" 버튼은 마우스가 아닌 코드상으로 사이즈 변경했을때 앵커 등이 잘 적응하는지 테스트(trace) 해보기 위한 용도입니다.

Canvas에 통합
캔버스를 만들어서 테스트 해 보았습니다. 스크롤이 좀 이상하게 되있긴 하지만 드래그와 리사이징은 잘 작동하는듯 합니다. 캔버스만 좀 수정하면 괜찮을듯 합니다.ㅎㅎ;
좌측 옵션은 위에서 봤던것들 입니다. 캔버스는 두개의 Group컨테이너를 겹쳐서 구현했습니다. 아래쪽 Group은 인스턴스 표시용으로 위쪽 Group은 리사이징툴 표시용으로 사용하는데, 리사이징 툴이 컨테이너의 child넘버에 간섭하지 않으면서 항상 인스턴스보다 위쪽에 나타나도록 하기위해 이렇게 해 보았습니다.

아래는 각 SWF의 테스트용 MXML과 SWC파일입니다.
마무리하고 배포할때쯤 되면 개인적으로 신경이 덜 쓰여지기 때문에 정보를 잘 정리해서 공개해야 하는데 항상 이런식으로 공개가 되는군요ㅜㅜ;
소스는 정리되는대로 올리도록 하겠습니다. 일단 사용하실 분은 swc를 이용해주세요

com.vulcan.application.uicontrol.zip

테스트를 위해선 Flex SDK 4.0이 필요합니다.

 [추가]

네이버 개발자 센터 소스가 공개되었습니다.
http://vulcan9.tistory.com/65