React.js+SVGでお絵かきソフトを作ってみるか・・・

取りあえず、こちらを参考にしながらReact.jsで実装してみよう。

sterfield.co.jp

こんな塩梅でmouseMove,mouseUpイベントを拾うのですが・・・
マウスぐりぐり動かすと、mouseUpイベントを拾いそこなうようで。
なんでだろう。

        <g onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} onMouseUp={this.handleMouseUp}>
          <circle id="circle"  cx="250" cy="250" r="250" fill="#888" />
          <circle  cx="250" cy="250" r="150" fill="#eee" />
        </g>

qiita.com

こちらに、
「onmousemove/handleMouseMoveのたびにsetStateなんかすると、猛烈な勢いで仮想DOMのパッチが当たり続けることになる。
この手の処理は常に更新され続ける"結果"をどっかに書き込んでおいて「適当なインターバルで」その書かれた値を元に画面を更新するのが定石であるようだ。
」

うーん。定石どおりやっていない。mouseMoveの度に、setStateしまくっているんですが。
そのせいかな？？

Fluxを勉強しないとだめのようで・・・チンプンカンプンなんですが。壁を乗り越えないと。

yutapon.hatenablog.com

reduxというのがあるらしいが・・

github.com

qiita.com

fluxxorというのもあるらしい.こっちのが取っつきやすそうだ。勉強しよう。

React.js + Flux入門 #scripty02 from Yahoo!デベロッパーネットワーク

www.slideshare.net

qiita.com

http://fluxxor.com/

結局FLUXとは無関係のようだった

マウスムーブぐりぐり中に、マウスアップが検知できないのは
FLUX化しても起きた。この辺読んで勉強の必要が

stackoverflow.com

HamWheelのソースを読むと

github.com
mousedownの時にmousemoveとmouseupのイベントリスナーを登録して、mousemoveの時に
removeリスナーしていると分かった。真似してみよう。

真似してみたけれど・・

マウスアップを検知できないことはなくなったようだけれども、
svgのタグにonMouseMove={this.handleMouseMove}と指定するのより動作がまったりするようになってしまった。

  handleMouseDown: function (event){
    event.preventDefault();
    console.log("handleMouseDown");
    if (this.state.mode == EDITING_MODE){
      var left = event.currentTarget.offsetLeft;
      var top = event.currentTarget.offsetTop;
      var paths = this.state.paths;
      var value = "M " + (event.pageX - left)+ " " + (event.pageY - top);
      this.getFlux().actions.addPath(value);
      this.setState({down : 1});
    }
    $(document.body).on('mousemove', this.handleMouseMove);
    $(document.body).on('mouseup', this.handleMouseUp);
  },
  handleMouseMove: function (event){

    console.log("handle mouse move");
    event.preventDefault();
    if (this.state.mode == EDITING_MODE && this.state.down == 1){
      var left = event.currentTarget.offsetLeft;
      var top = event.currentTarget.offsetTop;
      var value = "L " + (event.pageX - left) + " " + (event.pageY - top);
      this.getFlux().actions.extendPath(value);
    }
  },
  handleMouseUp: function (event){
    console.log("handle mouse up");
    event.preventDefault();
    if (this.state.mode == EDITING_MODE){
      this.setState({down : 0});
    }
    $(document.body).off('mousedown', this.handleMouseDown);
    $(document.body).off('mouseup', this.handleMouseUp);
  },