Embedding the viewer

It needs a browser. The language (@jhzlo/resin) does not, and a page that only compiles or draws to a file never loads the viewer.

import ELK from "elkjs/lib/elk.bundled.js";
import { compile, toSvg } from "@jhzlo/resin";
import { Canvas, tableDetails } from "@jhzlo/resin/viewer";
import "@jhzlo/resin/viewer.css";

const { model } = compile(source);
const panel = document.querySelector<HTMLElement>("#panel")!; // marked class="rz-details"

const canvas = new Canvas(document.querySelector<HTMLElement>("#diagram")!, {
  onTap(hit) {
    if (!model) return;
    if (hit.table && hit.header) {
      panel.replaceChildren(tableDetails(model, hit.table, (name) => canvas.reveal(name), () => {}, () => {}) ?? "");
      canvas.focusTable(hit.table);
    } else if (hit.table) canvas.focus?.table(hit.table);
    else canvas.focus?.clear();
  },
});
canvas.setLook("aurora", matchMedia("(prefers-color-scheme: dark)").matches);
canvas.setGrid(true);

if (model) canvas.show(await toSvg(model, new ELK(), { ...canvas.drawOptions(), columns: "all" }), true);

The element given to Canvas is the page's to size; the canvas fills it. Lay out a large schema in a Web Worker so the page stays responsive: elkjs/lib/elk-api.js takes a workerUrl, and anything with a layout(graph) method that returns a promise can be passed to toSvg.

Canvas#

A press reports hit: table (the card pressed, a folded service's card being serviceCardId(service)), column (the row pressed), rowTable (in a folded service's card, the table of the row), service (a folded service's card, or the label of a service's area) and header (the press was on a card's header or on an area's label). What it does is up to the page; the playground opens the table panel from a header, the column popover from a row, and the service panel from a service.

Details#

tableDetails(model, table, open, pick, openService), serviceDetails(model, service, open, pick, openService) and columnDetails(model, table, column, open) return the playground's panels as elements: a table's columns (key, name, type, NULL or NOT NULL, description), indexes and references; a service's tables and what it depends on and is used by; one column's facts. They return null for a name the model does not have. open, pick and openService are called when a table name, a column or a service name in them is followed. Put them inside an element with the class rz-details.

Parts of a row#

cardParts(hidden, toggle) returns the control the playground uses to choose which parts of a row the cards show: one row of a card as a sample (FK customer_id IX Customer bigint NULL), in the card's type, colors and order, with the name of each part above it. Each part but the column's name is a button with aria-pressed; a part that is hidden fades. Pressing one calls toggle with the part (keys, tags, descriptions, types or nulls); keep the hidden parts, pass them to toSvg as hide, and build the control again.

import { CARD_PARTS, type CardPart } from "@jhzlo/resin";
import { cardParts } from "@jhzlo/resin/viewer";

const picker = document.querySelector("#parts")!;
let hide: CardPart[] = [];
const toggle = (part: CardPart) => {
  hide = CARD_PARTS.filter((p) => (p === part) !== hide.includes(p));
  picker.replaceChildren(cardParts(new Set(hide), toggle));
  // draw again with toSvg(model, elk, { ...options, hide })
};
picker.replaceChildren(cardParts(new Set(hide), toggle));

Styles#

@jhzlo/resin/viewer.css styles the canvas, the details and the parts of a row. It reads these custom properties, with light defaults; set them on :root or any ancestor, dark values included, to match the page: