summaryrefslogtreecommitdiff
path: root/packages/web/src/components/app
diff options
context:
space:
mode:
authorJosh Kingsley <josh@joshkingsley.me>2025-11-24 15:46:22 +0200
committerJosh Kingsley <josh@joshkingsley.me>2025-11-24 15:46:22 +0200
commitd724cc0bf6ff6d351319e6fb00f5184a04e16ac0 (patch)
treecb43253479df5db8f4844e17e68a48ea5a212df4 /packages/web/src/components/app
parent7c966e105cd9f65853de1aba0ecce63aa56aca0b (diff)
chore: improve dev tasks
Diffstat (limited to 'packages/web/src/components/app')
-rw-r--r--packages/web/src/components/app/index.css12
-rw-r--r--packages/web/src/components/app/index.ts93
2 files changed, 0 insertions, 105 deletions
diff --git a/packages/web/src/components/app/index.css b/packages/web/src/components/app/index.css
deleted file mode 100644
index aaf2ced..0000000
--- a/packages/web/src/components/app/index.css
+++ /dev/null
@@ -1,12 +0,0 @@
-ntv-app {
- display: block;
- padding: 1.5rem;
-}
-
-ntv-app > ntv-toolbar {
- margin-bottom: 1.5rem;
-}
-
-ntv-app > ntv-grid + ntv-grid {
- margin-top: 1.5rem;
-}
diff --git a/packages/web/src/components/app/index.ts b/packages/web/src/components/app/index.ts
deleted file mode 100644
index a2c0c9d..0000000
--- a/packages/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();