ElmでウェブブラウザのAPIを直接叩けるのは公式のパッケージだけで、サードパーティのパッケージではネイティブなモジュールもportも使うこともできません。でも、joakin/elm-canvas というパッケージが存在していて、公式で対応していないはずのCanvas APIを叩いているのです。どないなっとんねん！と思って調べたので、どんな方法でやっているのか簡単に紹介しておきます。
1. 外部に送信したいデータを、propertyを使って要素の"cmds"というプロパティに突っ込む
commands : Commands -> Attribute msg
commands list =
list
|> Encode.list identity
|> property "cmds"
既存のプロパティでなければどんな名前でもいいはずですが、em-canvasでは"cmds"というプロパティに突っ込んでいるようです。ちなみのこのデータの中身は、次のような感じのJSONになっていました。
[
{type: "function", name: "restore", args: []},
{type: "function", name: "fill", args: ["nonzero"]},
{type: "field", name: "fillStyle", value: "rgba(0%,0%,0%,0.3)"},
...
2. elm-canvasというCustom Elementsを描画する
toHtml : ( Int, Int ) -> List (Attribute msg) -> List Renderable -> Html msg
toHtml ( w, h ) attrs entities =
Html.node "elm-canvas"
[ commands (render entities) ]
[ canvas (height h :: width w :: attrs) []
]
1で定義したcommandsを使って、そのelm-canvasのcmdsプロパティにデータを突っ込んでいるわけです。ついでに、その内側に実際の描画先となるcanvas要素も作ってあります。
3. そのCustom Elementsの定義のsetアクセサで、Elm側から送られたデータを受け取る
customElements.define(
"elm-canvas",
class extends HTMLElement {
...
set cmds(values) {
this.commands = values;
this.render();
}
...
}
);
JavaScript側のelm-canvas要素の定義で、cmdsのsetアクセサを用意して、そこでデータを受け取ります。あとは受け取ったデータを元にCanvasの描画を行うだけです。
まとめ
というわけで、Custom Elementsのプロパティ越しにデータを送れば、elm-canvas.jsというスクリプトを別に読み込む必要はあるものの、ネイティブモジュールもportも使わずに、Elmのパッケージから外部のAPIを叩くことができるということがわかりました。このやり方ではJavaScript側からElm側へデータを送ることはできないので、measureTextのような機能は実現できないという制限はあるでしょうが、簡単な描画であればこれで十分でしょう。
……闇の魔術じゃん！
追記
……と思いきや、akira_さんから カスタムイベントでJSからElmへデータを送る方法が提案され、ElmからJSだけでなくJSからElmへとデータを送ることも問題なくできることがわかりました。portガン無視でデータを送りまくれるぞ！ 悪の枢軸ッ！