도형의 이동이 이렇게 간단하게 구현할 수 있는 시대가 되었습니다

FOSS4G 라고 하면 GIS, GIS 라고 하면 도형 편집이군요. 도형을 추가하거나 이동하거나 회전할 수 있는 기능입니다. 귀찮아요, 이것 프로그래밍하는 거야.

무엇이 귀찮은가 하면 여러가지 상태 없다＞)등등이 코드안에 엉망이 되어, 스파게티 코드가 되기 쉽다고 할까 「됩니다」.

예를 들면 「도형의 이동」의 흐름은,

모양을 마우스 다운 (= 선택)

그대로 마우스 무브(=이동)

마우스 버튼을 놓고 종료

라고 매우 단순하네요. 이것이 보통으로 코딩하면 플래그나 상태 관리의 폭풍이 되어 버린다.

라고 말했던 시대는 끝났습니다.
예를 들면, 아래의 화면.



이것은 흰색 사각형을 드래그하여 이동할 수 있다는 스마트 폰 앱의 예이지만,이 구현의 주요 부분은 단지 6 행입니다.

rectangle.DownEvent() // 1.図形をマウスダウン
    .SelectMany(rectangle.MoveEvent())  // 2.そのままマウスムーブ
    .Subscribe(e => {
        rectangle.SetX(e.RawX); // 移動の度に図形を移動
        rectangle.SetY(e.RawY);
    });

이 코드를 살펴보면 위의 흐름과 비슷하다는 것을 알 수 있습니다. 사람이 생각한 채로 코드에 떨어뜨릴 수 있다. 게다가 플래그나 상태 관리의 쓰레기가 전혀 없다. 놀라운! (3. 에 해당하는 코드가 필요한 것 같지만 괜찮아)

이를 실현하고 있는 것은 리액티브 프로그래밍 라는 개념. 무엇이든 간에 스트림(시계열에 데이터가 내려오는 무언가)에서 파악하자, 이벤트조차도. 이벤트는 스트림이므로, 나머지는 스트림의 가공이나 다른 스트림과의 합성으로 어떻게든 할 수 버립니다.

　리액티브+도형 넉넉의 다른 예는,

RxJS + Canvas

등이 있습니다. 이것은 HTML이므로 바로 시도할 수 있고 코드(Javascript)도 볼 수 있습니다.

리액티브 프로그래밍용의 저명한 라이브러리는 거의 오픈 소스, 리액티브 프로그래밍＋FOSS4G로 RxGIS (뭔가 멋지기 때문에 말하고 싶었을 뿐)

언젠가 또 GIS 만드는 것 같은 일이 있으면, 절대 Rx 사용해 만들거야! 라고 생각하고 있기 때문에 잘 부탁드립니다.

(위의 코드 예제의 모든 코드는 gist에 있습니다.)