https://github.com/minofrk/xelto-diagram-canvas.js
An implementation of <xelto-diagram> in TypeScript.
https://github.com/minofrk/xelto-diagram-canvas.js
custom-elements javascript typescript webcomponents xelto
Last synced: about 2 months ago
JSON representation
An implementation of <xelto-diagram> in TypeScript.
- Host: GitHub
- URL: https://github.com/minofrk/xelto-diagram-canvas.js
- Owner: minofrk
- License: mit
- Created: 2019-04-28T11:23:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-26T04:41:23.000Z (7 months ago)
- Last Synced: 2024-10-30T03:44:25.887Z (7 months ago)
- Topics: custom-elements, javascript, typescript, webcomponents, xelto
- Language: TypeScript
- Size: 690 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@minofrk/xelto-diagram-canvas
===============================================================================
[](https://www.npmjs.com/package/@minofrk/xelto-diagram-canvas)
[](LICENSE)
[](https://travis-ci.com/minofrk/xelto-diagram-canvas.js)
[](https://codecov.io/gh/minofrk/xelto-diagram-canvas.js)
HTML 内の `` タグに Canvas で描いた局面図を表示する Web Component です。
Usage
-------------------------------------------------------------------------------
ECMAScript 6 をサポートしたブラウザで動作します。
動作させたいページの `body` タグの最後に以下のコードを貼り付けます。xelto-canvas-diagram.js は [Releases](https://github.com/minofrk/xelto-diagram-canvas.js/releases) からダウンロードできますが、代わりに CDN を利用して読み込むタグを用いるとより簡単です。
```html
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
```
Microsoft Edge, Firefox などの Web Components 非対応ブラウザでも動かしたい場合は、[webcomponents-loader.js](https://www.jsdelivr.com/package/npm/@webcomponents/webcomponentsjs) を xelto-diagram-canvas.js よりも先に読み込ませれば動くようになります。
```html
```
ページ内の局面図を表示させたい場所に次のように `xelto-diagram` 要素を書き、その中に表示したい局面を [MSF 形式](https://github.com/minofrk/mino-seslax-format)で記述することで局面図を表示することができます。
```html
{
"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": []
}
```
以下は単に開始局面を表示するだけのページの例です。この例ではバージョン `0.0.1` の本体を CDN から取得して使用しています。
```html
{
"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": []
}
customElements.define('xelto-diagram', XeltoDiagramCanvas);
customElements.whenDefined('xelto-diagram').then(() => {
Array.from(document.querySelectorAll('xelto-diagram')).forEach(x => x.refresh());
});
```
### npm package
```
npm install @minofrk/xelto-diagram-canvas
```
このライブラリは `HTMLElement` を継承したクラス `XeltoDiagramCanvas` をエクスポートしています。これにより要素 `` を定義することで下記 API が利用可能になります。
API
-------------------------------------------------------------------------------
### Instance Methods
#### `refresh()`
局面図を再描画します。局面やフォントを変更してもこのメソッドを呼ばないと反映されません。
一度も `setState()` を呼ばずに `refresh()` を呼んだ場合、`customElements.define()` 時点での `` の内容を局面図として解釈することを試みます。内容が [MSF 形式](https://github.com/minofrk/mino-seslax-format)と互換性を持たない場合はエラー表示をします。ただし `customElements.define()` 時点で HTML の解析が済んでいないと内容を読み取れず常にエラー表示になってしまうので、`` の内容を描画したい場合は HTML の解析が終わってから `customElements.define()` するようにしてください。
#### `setState(state)`
表示する局面を設定します。設定する局面は [MSF 形式](https://github.com/minofrk/mino-seslax-format)に従うオブジェクトで表現します。
### Attributes
論理属性の `reversed` を指定すると駒の配置がソーン視点になります。
```html
...
```
### CSS
以下に挙げるスタイルを `` 要素に当てることで局面図の大きさやフォントなどを変えることができます。
- `width`
- `height`
- `font-family`
License
-------------------------------------------------------------------------------
See [LICENSE](LICENSE)