Cake.jsを解析してみる

経緯

HTML5のCanvasで、過去に作ったFlash（ムービーじゃないよ）を実装し直そうとしたところ、マウスイベント処理がクソダラ面倒くさかったので、そのへん簡単にしてくれるライブラリを探していたら、Cake.jsというものに出会った。かなり昔からメンテナンスされ続けているライブラリのようなのだが、Google CodeのWikiには、クラスやメソッドが網羅されていなかったり、JSDocも各クラスを__global__のフィールドとして名前と概要が掲載されているだけで、リファレンス的な使い方ができない。幸い、ソースコードは圧縮されていなかったので、いっその事7000行を超えるソースコードを読んで、（最低でもせめて自分が把握できる範囲で）クラスとメソッドを書きだしていきたいなぁ、と思った次第であります。

注意

JavaScriptの特性上、それが「クラス」なのか「メソッド」なのか「フィールド」なのかがすごく曖昧なので、下記のような定義の元、カテゴリ分けしている。

クラス: 外部参照可能なフィールドもしくはメソッドを持つリテラル。呼び出し時、newを伴わないものは静的クラス、newを伴うものは通常のクラス。何かを拡張しているわけではなければ基本クラス。拡張されていれば拡張クラス。
メソッド: 外部参照可能なフィールドもしくはメソッドを持たないリテラル。基本的にnewを伴って呼び出されない。
フィールド: 引数を持たずに呼び出せて、常に同じ値を返すもの

Cake.jsのクラスやメソッドなど

クラス一覧

Object: ネイティブObjectクラスを拡張している
Array: ネイティブArrayクラスを拡張している
Function: ネイティブFunctionクラスを拡張している（ブラウザ間差異の吸収？）
String: ネイティブStringクラスを拡張している（ブラウザ間差異の吸収？）
Math: ネイティブMathクラスを拡張している（ブラウザ間差異の吸収？）
RecordingContext: 基本クラス。よくわかんないけど、名前からして画面を記録してくれるのかしら。
Transformable: 静的メソッドを持つ抽象クラス。おそらく変形についてかんりしてるんだけど、抽象クラスなのか静的クラスなのかはっきりしろ。CanvasNodeクラスがこれを拡張している。
Timeline: 抽象クラス。フレームアニメーションが使えるようになる。cake.js自体にこのクラスを用いてるものはないが、自分でTimelineを伴ったクラスを設計する際に使用するものかと思われる。
Animatable: 抽象クラス。アニメーション可能にするためのクラスっぽい。CanvasNodeクラスがこれを拡張している。もちろん、静的メソッドを持つ。
CanvasNode: AnimatableクラスとTransformableクラスを拡張した、Cake.jsがデータを管理するためのクラス。Cake.js用Objectクラスか。
Canvas: CanvasNodeクラスを拡張した、Canvas管理クラス。
LinkNode: CanvasNodeクラスを拡張した、aタグに関するクラス。
AudioNode: CanvasNodeクラスを拡張した、音に関するクラス。なんかaudioタグとかでゴニョゴニョするっぽい？
ElementNode: CanvasNodeクラスを拡張した、HTMLタグ全般に関するクラス。コレ使って、任意のタグを生成してappendできる？
Drawable: CanvasNodeクラスを拡張した、Canvasに描画可能なオブジェクトのための抽象クラス。ASでいうところのDisplayObjectクラスみたいなもん？
Line: Drawableクラスを拡張した、直線クラス。
Circle: Drawableクラスを拡張した、円クラス。
Ellipse: Circleクラスを拡張した、Ellipseクラス。なにこれ？
Spiral: Drawableクラスを拡張した、スパイラルクラス。
Rectangle: Drawableクラスを拡張した、矩形クラス。
Polygon: Drawableクラスを拡張した、ポリゴンクラス。3Dできるの！？
CatmullRomSpline: Drawableクラスを拡張した、CatmullRomSplineクラス。なにこれ？
Path: Drawableクラスを拡張した、パスクラス。任意の形を作ることができる。普通にctx.beginPath();以降のmoveTo()とかlineTo()とかをオプションで指定してく感じ。
ImageNode: Drawableクラスを拡張した、画像クラス。
TextNode: Drawableクラスを拡張した、テキストクラス。
Gradient: グラデーションを管理する基本クラス。
Pattern: パターンを管理する基本クラス。

静的メソッド管理クラス

E: 静的クラス。DOMを作成する
Mouse: 静的クラス。おそらくマウスイベントを管理するためのクラス
Curves: 静的クラス。曲線演算用メソッド群。Mathクラスみたいなもん。
Colors: 静的クラス。色管理、変換を便利にしてくれるメソッド群。
CanvasSupport: 静的クラス。Canvas操作を便利にしてくれるメソッド群。なんかMath的なこともしてるな…
SVGparser: SVGファイルのパーサー。SVGParser.parse()でCanvasNodeインスタンスを返しているので、一種のファクトリクラスかも。

グローバルメソッド一覧

$A(obj:Array): Arrayインスタンスのコピーを返すメソッド
$(id:String): return document.getElementById(id);
T: T(str:String) : return docuemnt.createTextNode(str);
Klass: クラスを作るメソッド。継承とかそのへんを可能にする。

グローバルフィールド一覧

window.requestAnimFrame: ブラウザごとに異なるrequestAnimationFrame系のフィールドをラップしている
Browser: UAをラップしてる

とりま

ここまでは、JSDocと大差ないが、大雑把に全体像がつかめるような気がする。