web/src/components/app/index.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import defaultDoc from "../../defaultDoc";
import { Selection } from "../../selection";
import { Doc } from "../../types";
import ntvGrid, { NotiveGridElement } from "../grid";
import renderGrid from "../grid/renderGrid";
import ntvToolbar from "../toolbar";
import "./index.css";

export class NotiveAppElement extends HTMLElement {
  doc: Doc = defaultDoc();
  #selection?: Selection;

  get selection() {
    return this.#selection;
  }

  set selection(selection: Selection | undefined) {
    this.#selection = selection;
    this.#updateGridSelections();
  }

  #updateGridSelections() {
    this.querySelectorAll<NotiveGridElement>("ntv-grid").forEach((grid) => {
      grid.selection =
        this.#selection?.gridId === grid.grid?.id ? this.#selection : undefined;
    });
  }

  connectedCallback() {
    this.append(
      ntvToolbar(),

      ...this.doc.grids.map((grid) =>
        ntvGrid({
          grid: renderGrid(grid),
          dataset: { gridId: grid.id },
          ongridselectionchange: (event) => {
            this.selection = event.selection;
          },
        }),
      ),
    );
  }
}

customElements.define("ntv-app", NotiveAppElement);