デモ
このページのデモはすべてライブラリのソースを直接実行しています。表示範囲に入った時点で起動するため、1ページに複数のエディタがあってもフレームを奪い合いません。
既定のコントロール
Level 1。エディタを構築し、既定の UI を載せる。それだけです。表示している数値はオーバーレイ内の DOM ノード数で、図形が何個あっても数十個のまま変わりません。コントロール UI は選択中の対象に対してしか存在しないためです。
CSS による装飾
Level 2。クラス名・data 属性・CSS 変数が公開契約です。パネルで変更している内容はすべてスタイルシートから到達できます。
自作のコントロール
Level 3。枠もハンドルもフローティングツールバーも、このページのために書いたマークアップです。ポインタキャプチャ・キーボード操作・ARIA 属性は editor.controls.bindHandle から来ています。既定 UI が使っているものと同じプリミティブです。
ライブラリが知らない図形
組み込み図形と同じ ShapeUtil インターフェースで登録しています。星を選択してスライダーを動かしてみてください。
フリーハンドで描く
ストロークはただの path シェイプです。だから選択・リサイズ・シリアライズ・ベクタ書き出しが、描画ツール側で何も実装せずに最初から効きます。「間引き」を 0 にして描き直すと、ポインタが実際に吐いている点の数が分かります。
自作のツール
描画と選択は同じポインタイベントを取り合います。ツールはそれを分離する仕組みで、アプリケーション定義のツールも組み込みと同じ API で登録します。
テキストの編集
セッションはコアにあり、開いている間に画面へ出るものはコアにありません。トグルで、既定のダイアログとこのページ用に書いたインラインパネルを実行時に入れ替えています。
スナップ
図形の辺・中心への吸着がグリッドより優先されます。ドラッグ中に Alt を押すと一時的に無効になります。
ドキュメントと書き出し
JSON ペインは保存される内容そのもので、リアルタイムに更新されます。.hcanvas ファイルとして保存・読み込みができるほか、任意の倍率の PNG か SVG を書き出せます。SVG ではカスタムシェイプを含むすべての図形が自分の輪郭を提供します。
スクリーンリーダーに渡されるもの
非表示の図形リストと live リージョンは設計上見えません。だからこそ壊れたまま出荷されやすい部分です。ここでは両方を画面上に映しています。
5,000 個の図形
パンとズームは図形数によらず、1フレームあたり1要素に1回の transform 書き込みで済みます。注目すべき数値はオーバーレイのノード数です。