SVG.js (3)

その他ソフトウェア JavaScript/TypeScript

なんか面白い、作者 Fuzzyma〈Ulrich-Matthias Schäfer〉の発想が面白い。

WantToDo指向

「何をするか／したいか」に注目する発想をWantToDo指向とでも呼べば、FuzzymaはWantToDo指向で、次のToDo〈Doing〉を設定している。

  1. creating オブジェクトを生成する
  2. referencing オブジェクトを参照する
  3. searching （檜山が追加） 既存オブジェクトを探す
  4. manipulating 既存オブジェクトを操作する
  5. animating 既存オブジェクトをアニメートする
  6. importing/exporting 既存オブジェクトの外部書き出し、外部からの読み込み
  7. extending APIや機能の拡張
セレクター構文

CSSやjQueryのセレクター構文〈クエリー構文〉も使っている。セレクター構文（の文字列）は、creating, referencing, searching で使える。

  1. tag.class ： tag は、Domのタグ名〈XMLの要素名〉であり、オブジェクトのJSクラス名、.class はCSSクラス〈HTML class属性の項目〉
  2. #id ： id で一意識別されるオブジェクト
  3. .class ： tagは何でもよくて、CSSクラスだけで検索。「クラス」がオブジェクトのJSクラスか？ CSSクラスの要素のタグ名か？ ちゃんと判断。

FuzzymaとSVG.jsは、Zepto（最新リリースで2016）との併用を想定しているようだ。

プロキシノード

SVG.jsの管理下のノード／要素はプロキシ〈ラップ | ファセット〉でactual nodeを指すプロパティである「nodeプロパティ」を持つ。actual node（DOM管理下）側に instance というプロパティを持たせて、プロキシを逆参照している。DOMツリーの一部がSVG.s側に1:1プロキシされている。まさに昔のファセットアーキテクチャだ。（我々はマルチファセットを使っていたが。）

用語"node"がDOMのネイティブノードで、JSクラスは"Element"、用語"instance"はプロキシノードで、JSクラスは"SVG.Element"。SVGElementクラスもあるのかな？ だとすると、Element, SVGElement, SVG.Element となりややこしい。

getterまたはプロパティによる参照
  1. children() -- 子供達リスト
  2. first() -- 最初の子ノード
  3. get(index : Nat) -- index番目の子ノード
  4. last() -- 最後の子ノード
  5. root() -- ルート要素のプロキシノード、文書ノードではない。
  6. parent()
  7. parent() on the topmost svg document -- ネイティブのHTML要素。
  8. parents() -- get all ancestors
  9. reference(name : string) -- nameは要素の属性名。属性名がオブジェクト値を持つとき、そのオブジェクトを返す。
検索
  1. 大域関数 SVG(selector : string) : SVG.Dom -- セレクター文字列により、SVG.js管理下のSVG.Domオブジェクトを探して返す。メソッドチェーン内でが使うので最初の1個しか返さない。
  2. メソッド findOne(selector : string) : SVG.Dom -- self の配下を探してあれば1個返す。
  3. 関数 SVG.find(selector : string) : List<SVG.Dom> -- 管理下のすべてのノードを探してあればすべて返す。SVG.find(selector, 探す基点のノード) も使える。
  4. メソッド find(selector : string) : List<SVG.Dom> -- SVG.findのメソッド版
登録・生成
  1. SVG(node : NativeDomElement) : SVG.Element -- ネイティブDOMノードをSVG.js管理下にする。「ラップする」とか「プロキシを作る」とか言う。登録されたSVG.js要素〈ラップ | プロキシ | ファセット〉が返される。nodeがネイティブSVGである必要はない。
  2. SVG() : SVG.Svg -- SVGドキュメントが生成される。ドキュメントかルートノードか？ どうも不明。
  3. new SVG.Rect() : SVG.Rect -- クラスのオブジェクト・コンストラクタ関数で生成できる。

ドキュメントノードかルートノードか？ HTML要素かSVG要素か？ ネイティブノードかプロキシノードか？ あたりが錯綜している。後で要確認。

ツリー操作
  1. clear() -- 子ノードとサブツリーを完全に削除する。self は削除されないので、リーフになって残る。
  2. attr(name, val) -- 属性値をセットする。
  3. attr(object) -- JSON的な引数でセットする。
  4. attr(name, val, ns) -- 名前空間付きの属性に値をセットする。
  5. attr(name, null) -- 属性の削除（値にnullをセットではない）。nullの悪しき習慣 -- remove指令にnull値を使用する。
情報取得
  1. has(instance) : boolean -- 引数に指定されたインスタンスをサブツリー（子供かも？ 要確認）内に持つか？ 自分はどうなの？ 要確認。
  2. index(instance) : integer -- 引数に指定されたインスタンスの兄弟番号を返す。居ないなら -1 。
  3. attr(name) -- 指定された名前の属性値を取得。
  4. attr() -- すべての属性値をJSON形式で取得。
  5. attr(names : List<string>) -- 指定された名前達の属性値達を取得。リストで返るのか？ 要確認。
  6. x() -- x座標 グラフィカル〈幾何的〉情報
  7. y() -- y座標 グラフィカル〈幾何的〉情報
グラフィカルな操作
  1. move(x, y) -- オブジェクトをその座標系内で指定位置に動かす。
  2. x(x) -- x座標だけセットする。
  3. y(y) -- y座標だけセットする。
だが

眠くなってきた。中断。