サンプルアプリ

デモが機能をひとつずつ取り上げるのに対して、こちらは小さいながらも完結したアプリケーションです。部品どうしが噛み合う必要があるのはこちらで、「ライブラリが対応している」と「実際に出せる」の差が出るのもこちらです。

各ページでライブラリのソースを直接実行しており、その下に全ソースを掲載しています。どれも数百行程度で、いちばん長いのはたいていツールバーです。

お絵描きフリーハンドで描いて、PNG と SVG で書き出し、共有シートに渡します。方眼紙作図格子の点から点へ線を引きます。頂点を動かすと、そこに集まる線がすべて追従します。元に戻すのは1回です。ドット絵32×32 の盤面。1マスが1シェイプなので、元に戻すも消しゴムも書き出しも最初から動いています。タングラム7つのピースと1つのシルエット。そして「できてはいけない操作」を到達不能にするツール。あみだくじはしごを玉が転がります。はしごは絵で、玉は絵ではありません。写真コラージュ写真を落とすと傾いたプリントになります。写真ごと1ファイルで保存できます。

見どころ

	ソースを読む価値がある部分
お絵描き	ストロークはただの path シェイプ。だからアプリ側に「描画のためのコード」がほとんどありません。
方眼紙作図	頂点を1つ動かすと、そこに触れている線が全部書き換わります。それでも履歴は1件です。
ドット絵	書き込みを1つも遅らせずに、ドラッグ全体を Undo 1回にしています。
タングラム	ピースを動かしたのと同じ確定の中で、吸い付きまで済ませています。
あみだくじ	毎秒60フレームのアニメーション。そのどれも文書に触れていません。
写真コラージュ	写真はシェイプの「横」に保存されます。上書きではありません。

6つとも素の TypeScript モジュールです。フレームワークも専用のビルド手順もありません。同じコードが React でも Vue でも、何もなくても動きます。