@minofrk/xelto-diagram-canvas
v0.1.0
Published
An implementation of <xelto-diagram> in TypeScript.
Downloads
5
Maintainers
minofrkReadme
@minofrk/xelto-diagram-canvas
HTML 内の <xelto-diagram> タグに Canvas で描いた局面図を表示する Web Component です。
Usage
ECMAScript 6 をサポートしたブラウザで動作します。
動作させたいページの body タグの最後に以下のコードを貼り付けます。xelto-canvas-diagram.js は Releases からダウンロードできますが、代わりに CDN を利用して読み込むタグを用いるとより簡単です。
<!-- 本体読み込み（適宜書き換えてください） -->
<script src="./xelto-diagram-canvas.js"></script>
<!-- 局面図の描画を有効にするスクリプト -->
<script>
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
</script>Microsoft Edge, Firefox などの Web Components 非対応ブラウザでも動かしたい場合は、webcomponents-loader.js を xelto-diagram-canvas.js よりも先に読み込ませれば動くようになります。
<!-- webcomponents-loader.js 読み込みの例 -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-loader.js" integrity="sha256-Ao3dDPJ8Vd/wf6kjL2MlHNo8vYEeLyvDg8k0njnNS7Y=" crossorigin="anonymous"></script>ページ内の局面図を表示させたい場所に次のように xelto-diagram 要素を書き、その中に表示したい局面を MSF 形式で記述することで局面図を表示することができます。
<xelto-diagram>
{
"sast": "arxe",
"arxe": {
"txifol": [],
"evol": null
},
"sorn": {
"txifol": [],
"evol": null
},
"ele": [
["rav", "nen", "pin", "mir", "ket", "lin", "len"],
["din", "rez", "kun", "mat", "lax", "jil", "tan"],
[ null, null, null, null, null, null, null],
[ null, null, null, "tem", null, null, null],
[ null, null, null, null, null, null, null],
["pal", "ful", "mik", "fav", "zan", "gil", "ruj"],
["dyu", "lis", "mel", "ser", "dia", "vio", "ral"]
],
"korol": []
}
</xelto-diagram>以下は単に開始局面を表示するだけのページの例です。この例ではバージョン 0.0.1 の本体を CDN から取得して使用しています。
<!DOCTYPE html>
<html>
<body>
<xelto-diagram>
{
"sast": "arxe",
"arxe": {
"txifol": [],
"evol": null
},
"sorn": {
"txifol": [],
"evol": null
},
"ele": [
["rav", "nen", "pin", "mir", "ket", "lin", "len"],
["din", "rez", "kun", "mat", "lax", "jil", "tan"],
[ null, null, null, null, null, null, null],
[ null, null, null, "tem", null, null, null],
[ null, null, null, null, null, null, null],
["pal", "ful", "mik", "fav", "zan", "gil", "ruj"],
["dyu", "lis", "mel", "ser", "dia", "vio", "ral"]
],
"korol": []
}
</xelto-diagram>
<!-- webcomponents-loader.js 読み込みの例 -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-loader.js" integrity="sha256-Ao3dDPJ8Vd/wf6kjL2MlHNo8vYEeLyvDg8k0njnNS7Y=" crossorigin="anonymous"></script>
<!-- 本体読み込み（適宜書き換えてください） -->
<script src="https://cdn.jsdelivr.net/npm/@minofrk/[email protected]/umd/xelto-diagram-canvas.js" integrity="sha256-TMtKhz9JCIPMutuO/a/FPr8yMQIOMN4y/VmCWJjnHO8=" crossorigin="anonymous"></script>
<!-- 局面図の描画を有効にするスクリプト -->
<script>
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
</script>
</body>
</html>npm package
npm install @minofrk/xelto-diagram-canvasこのライブラリは HTMLElement を継承したクラス XeltoDiagramCanvas をエクスポートしています。これにより要素 <xelto-diagram> を定義することで下記 API が利用可能になります。
API
Instance Methods
refresh()
局面図を再描画します。局面やフォントを変更してもこのメソッドを呼ばないと反映されません。
一度も setState() を呼ばずに refresh() を呼んだ場合、customElements.define() 時点での <xelto-diagram> の内容を局面図として解釈することを試みます。内容が MSF 形式と互換性を持たない場合はエラー表示をします。ただし customElements.define() 時点で HTML の解析が済んでいないと内容を読み取れず常にエラー表示になってしまうので、<xelto-diagram> の内容を描画したい場合は HTML の解析が終わってから customElements.define() するようにしてください。
setState(state)
表示する局面を設定します。設定する局面は MSF 形式に従うオブジェクトで表現します。
Attributes
論理属性の reversed を指定すると駒の配置がソーン視点になります。
<xelto-diagram reversed>
...
</xelto-diagram>CSS
以下に挙げるスタイルを <xelto-diagram> 要素に当てることで局面図の大きさやフォントなどを変えることができます。
widthheightfont-family
License
See LICENSE