summaryrefslogtreecommitdiff
path: root/web/src/components/app/index.ts
diff options
context:
space:
mode:
authorJosh Kingsley <josh@joshkingsley.me>2025-11-23 19:27:57 +0200
committerJosh Kingsley <josh@joshkingsley.me>2025-11-23 19:27:57 +0200
commit602145c956bb594ca0d0e10601cc4ad1a71cf70d (patch)
treed9f9980bd2054cff5819d01379f5c1c55f8eb66d /web/src/components/app/index.ts
parentc2a6efb1b761014a90d90373cad47a14054af40b (diff)
feat: integrate web and doc packages
Diffstat (limited to 'web/src/components/app/index.ts')
-rw-r--r--web/src/components/app/index.ts93
1 files changed, 0 insertions, 93 deletions
diff --git a/web/src/components/app/index.ts b/web/src/components/app/index.ts
deleted file mode 100644
index a2c0c9d..0000000
--- a/web/src/components/app/index.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { produce } from "immer";
-import defaultDoc from "../../defaultDoc";
-import NotiveElement, { customElement } from "../../element";
-import {
- changeSelectedSubdivisions,
- getSelectedSubdivisionsCount,
-} from "../../grid";
-import { Doc } from "../../types";
-import ntvGrid, { NotiveGridElement } from "../grid";
-import renderGrid from "../grid/renderGrid";
-import { GridSelection } from "../grid/selection";
-import ntvToolbar from "../toolbar";
-import "./index.css";
-
-@customElement("ntv-app")
-export class NotiveAppElement extends NotiveElement {
- doc: Doc = defaultDoc();
-
- #selectedGridId?: string;
- #selection?: GridSelection;
-
- setSelection(gridId: string, selection: GridSelection) {
- const grid = this.doc.grids.find((grid) => grid.id === gridId);
- if (!grid) throw new Error("Invalid grid ID");
-
- this.#selectedGridId = gridId;
- this.#selection = selection;
- this.#updateGridSelections();
-
- this.#toolbar.subdivisions = getSelectedSubdivisionsCount(grid, selection);
- }
-
- clearSelection() {
- this.#selectedGridId = undefined;
- this.#selection = undefined;
- this.#updateGridSelections();
- this.#toolbar.subdivisions = undefined;
- }
-
- #updateGridSelections() {
- this.querySelectorAll<NotiveGridElement>("ntv-grid").forEach((grid) => {
- grid.selection =
- this.#selectedGridId === grid.grid?.id ? this.#selection : undefined;
- });
- }
-
- #toolbar = ntvToolbar({
- onsubdivisionschange: ({ subdivisions }) => {
- if (!subdivisions) return;
-
- const gridId = this.#selectedGridId;
- const selection = this.#selection;
-
- if (!gridId || !selection) return;
-
- const gridIndex = this.doc.grids.findIndex((grid) => grid.id === gridId);
-
- this.doc = produce(this.doc, (doc) => {
- doc.grids[gridIndex] = changeSelectedSubdivisions(
- this.doc.grids[gridIndex],
- selection,
- subdivisions,
- );
- });
-
- this.querySelector<NotiveGridElement>(
- `ntv-grid[data-grid-id="${gridId}"]`,
- )!.grid = renderGrid(this.doc.grids[gridIndex]);
-
- this.clearSelection();
- },
- });
-
- connectedCallback() {
- this.append(
- this.#toolbar,
- ...this.doc.grids.map((grid) =>
- ntvGrid({
- grid: renderGrid(grid),
- dataset: { gridId: grid.id },
- ongridselectionchange: (event) => {
- this.setSelection(grid.id, event.selection);
- },
- oncellchange: (event) => {
- console.log(event);
- },
- }),
- ),
- );
- }
-}
-
-export default NotiveAppElement.makeFactory();