attachSuidoView関数
リファレンスの説明と例は英語です。見出しと目次は日本語です。
Lets the box box move and zoom the board drawn in svg (which must have a viewBox of the whole board). A
press that moves is not a tap: the click that follows a drag is swallowed. Call it once the drawing is in
the page; destroy removes every listener it added.
インポート
import { attachSuidoView } from "@johnmorrisdotca/suido/draw";定義
function attachSuidoView(box: HTMLElement, svg: SVGSVGElement, layout: { width: number; height: number; }, options?: SuidoViewerOptions): SuidoViewer引数
| 名前 | 型 | 説明 |
|---|---|---|
box | HTMLElement | The board drawing dimensions or DOM viewport specified by this signature. |
svg | SVGSVGElement | The existing native SVG board element. |
layout | { width: number; height: number; } | The decoded board with its dimensions, pipe masks and rule settings. |
options (省略可) | SuidoViewerOptions | Drawing, mounting or generator choices specified by the signature. |
戻り値
SuidoViewer
Lets the box box move and zoom the board drawn in svg (which must have a viewBox of the whole board). A press that moves is not a tap: the click that follows a drag is swallowed. Call it once the drawing is in the page; destroy removes every listener it added.
例
import { SUIDO_5X5 } from "@johnmorrisdotca/suido/levels-5x5";
import { decodeLayout } from "@johnmorrisdotca/suido";
import { attachSuidoView, drawSuido } from "@johnmorrisdotca/suido/draw";
const row = SUIDO_5X5[0];
const code = row[0];
const layout = decodeLayout(code)!;
const host = document.createElement("div");
document.body.append(host);
host.innerHTML = drawSuido(layout);
const svg = host.querySelector("svg")!;
const viewer = attachSuidoView(host,svg,layout);
console.log(viewer.get().zoom);
viewer.destroy();この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。