nw.jsでデスクトップアプリを作る（２５） - Firefoxで動くようにする対応およびWindows 10 のIE11への対応

gistにアップしていたサンプルコードがなぜかFirefoxで動かなくなっていた。

three.jsのPathのシリアライズ(2)

調べるとpath座標に浮動小数表記（9.5e-5みたいな）が混じっていたのであった。pathの内容解析を行いthree.pathに変換するコードは浮動小数表記には対応していないのでそこでエラーとなってしまっていたのである。とりあえずコードを浮動少数表記でもエラーとならないように対応した。しかしSVGの座標表記でそもそも浮動小数表記が許されるのかどうかである。それ自体誤りであれば、path解析コードの前の絶対命令→相対命令への変換コードを直さねばならない。

次にIE11への対応を行った。調べると私のコードがそもそも誤っており、なぜかFirefoxとChromeでは問題なく動いていたのである。

var m = path.node().createSVGPathSegMovetoRel
        (path.node().pathSegList[0].x - boundingBox.x.baseVal.value - boundingBox.width.baseVal.value / 2.0,
        path.node().pathSegList[0].y - boundingBox.y.baseVal.value - boundingBox.height.baseVal.value / 2.0
        );

上のコードはpathSegListを配列参照しているがこの部分が誤りである。修正後のコードは下

var m = path.node().createSVGPathSegMovetoRel
        (path.node().pathSegList.getItem(0).x - boundingBox.x.baseVal.value - boundingBox.width.baseVal.value / 2.0,
        path.node().pathSegList.getItem(0).y - boundingBox.y.baseVal.value - boundingBox.height.baseVal.value / 2.0
        );

規格上のSVGPathSegListは以下となっている。

interface SVGPathSegList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
  SVGPathSeg getItem(in unsigned long index) raises(DOMException);
  SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
  SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
};

コンテナ操作用のメソッドを使うのが正しく、配列のように扱うのはNGだったのだ。

そもそもこのコードはnw.js用なのでブラウザ互換を考えなくてもよいのだが。規格どおりの実装をしているかの確認という意味で複数のブラウザで検証することは有効かもしれない。いや、そもそもきちっと規格をおさえとかないといけないんだけども、頭に入んないんだなーこれが．．．。