attachSuidoViewfunction
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 it
import { attachSuidoView } from "@johnmorrisdotca/suido/draw";Definition
function attachSuidoView(box: HTMLElement, svg: SVGSVGElement, layout: { width: number; height: number; }, options?: SuidoViewerOptions): SuidoViewerParameters
| Name | Type | Description |
|---|---|---|
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 (optional) | SuidoViewerOptions | Drawing, mounting or generator choices specified by the signature. |
Returns
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.
Examples
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();