@lapis-notes/csv 0.0.0-stage → 0.2.0

package/dist/lib/sheet/sheet-paint.js

@@ -0,0 +1,274 @@
+import { SHEET_CELL_PADDING, SHEET_GUTTER_WIDTH, SHEET_HEADER_HEIGHT, SHEET_LETTER_HEIGHT, SHEET_LINE_HEIGHT, SHEET_ROW_HEIGHT, SHEET_SORT_HIT, SHEET_WRAP_MAX_LINES, chromeHeight, columnEdges, columnLetter, visibleBodyRange, visibleColumnRange, wrapLines, } from "./sheet-layout";
+function clipText(ctx, text, x, y, width, height, align = "left") {
+    if (width <= 1 || height <= 1)
+        return;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+    ctx.textAlign = align;
+    ctx.textBaseline = "middle";
+    const inset = 8;
+    const textX = align === "center" ? x + width / 2 : x + inset;
+    ctx.fillText(text, textX, y + height / 2);
+    ctx.restore();
+}
+function paintCellText(ctx, text, x, y, width, height, wrap) {
+    if (!wrap) {
+        clipText(ctx, text, x, y, width, height);
+        return;
+    }
+    if (width <= 1 || height <= 1)
+        return;
+    const inner = Math.max(1, width - SHEET_CELL_PADDING);
+    const lines = wrapLines(text, inner, (value) => ctx.measureText(value).width).slice(0, SHEET_WRAP_MAX_LINES);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    for (let line = 0; line < lines.length; line += 1) {
+        ctx.fillText(lines[line] ?? "", x + 8, y + 6 + line * SHEET_LINE_HEIGHT);
+    }
+    ctx.restore();
+}
+function hLine(ctx, x, y, width) {
+    if (width <= 0)
+        return;
+    ctx.fillRect(Math.round(x), Math.round(y), Math.round(width), 1);
+}
+function vLine(ctx, x, y, height) {
+    if (height <= 0)
+        return;
+    ctx.fillRect(Math.round(x), Math.round(y), 1, Math.round(height));
+}
+function columnColor(model, col) {
+    const colors = model.theme.columns;
+    return colors[col % Math.max(colors.length, 1)] || model.theme.text;
+}
+function headerFill(model, col) {
+    if (!model.colours)
+        return model.theme.header;
+    const tints = model.theme.headerTints;
+    return tints[col % Math.max(tints.length, 1)] || model.theme.header;
+}
+function fillSelection(ctx, model, x, y, width, height) {
+    ctx.fillStyle = model.theme.background;
+    ctx.fillRect(x, y, width, height);
+    ctx.fillStyle = model.theme.selection;
+    ctx.fillRect(x, y, width, height);
+}
+function columnSelected(model, col) {
+    const selection = model.selection;
+    if (!selection || model.body.length === 0)
+        return false;
+    return (selection.startIndex === 0 &&
+        selection.endIndex >= model.body.length - 1 &&
+        col >= selection.startCol &&
+        col <= selection.endCol);
+}
+function sheetSelected(model) {
+    const selection = model.selection;
+    if (!selection || model.body.length === 0 || model.widths.length === 0)
+        return false;
+    return (selection.startIndex === 0 &&
+        selection.endIndex >= model.body.length - 1 &&
+        selection.startCol === 0 &&
+        selection.endCol >= model.widths.length - 1);
+}
+function headerRowSelected(model) {
+    const selection = model.selection;
+    if (!selection || !model.headerRow || model.widths.length === 0)
+        return false;
+    return (selection.startIndex <= -1 &&
+        selection.endIndex >= -1 &&
+        selection.startCol === 0 &&
+        selection.endCol >= model.widths.length - 1);
+}
+function rowSelected(model, index) {
+    const selection = model.selection;
+    if (!selection || model.widths.length === 0)
+        return false;
+    return (index >= selection.startIndex &&
+        index <= selection.endIndex &&
+        selection.startCol === 0 &&
+        selection.endCol >= model.widths.length - 1);
+}
+export function paintSheet(canvas, model) {
+    const scale = globalThis.devicePixelRatio || 1;
+    const width = Math.max(1, Math.round(model.viewportWidth));
+    const height = Math.max(1, Math.round(model.viewportHeight));
+    if (canvas.width !== Math.round(width * scale) ||
+        canvas.height !== Math.round(height * scale)) {
+        canvas.width = Math.round(width * scale);
+        canvas.height = Math.round(height * scale);
+    }
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return;
+    ctx.reset();
+    ctx.setTransform(scale, 0, 0, scale, 0, 0);
+    const theme = model.theme;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = theme.background;
+    ctx.fillRect(0, 0, width, height);
+    ctx.font = `13px ${getComputedStyle(canvas).fontFamily || "monospace"}`;
+    const edges = columnEdges(model.widths);
+    const columns = visibleColumnRange({
+        scrollLeft: model.scrollLeft,
+        viewportWidth: width,
+        widths: model.widths,
+    });
+    const chrome = chromeHeight(model.headerRow);
+    const rows = visibleBodyRange({
+        scrollTop: model.scrollTop,
+        viewportHeight: height,
+        bodyCount: model.body.length,
+        offsets: model.rowOffsets,
+    });
+    const viewX = (documentX) => documentX - model.scrollLeft;
+    const rowBox = (index) => {
+        if (!model.rowOffsets) {
+            return {
+                y: chrome + index * SHEET_ROW_HEIGHT - model.scrollTop,
+                height: SHEET_ROW_HEIGHT,
+            };
+        }
+        const top = model.rowOffsets[index] ?? index * SHEET_ROW_HEIGHT;
+        const next = model.rowOffsets[index + 1] ?? top + SHEET_ROW_HEIGHT;
+        return {
+            y: chrome + top - model.scrollTop,
+            height: Math.max(1, next - top),
+        };
+    };
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(SHEET_GUTTER_WIDTH, chrome, Math.max(0, width - SHEET_GUTTER_WIDTH), Math.max(0, height - chrome));
+    ctx.clip();
+    for (let index = rows.start; index < rows.end; index += 1) {
+        const box = rowBox(index);
+        const row = model.body[index] ?? [];
+        for (let col = columns.start; col < columns.end; col += 1) {
+            const x = viewX(edges[col] ?? 0);
+            const columnWidth = model.widths[col] ?? 0;
+            const selected = model.selection != null &&
+                index >= model.selection.startIndex &&
+                index <= model.selection.endIndex &&
+                col >= model.selection.startCol &&
+                col <= model.selection.endCol;
+            ctx.fillStyle = selected ? theme.selection : theme.background;
+            ctx.fillRect(x, box.y, columnWidth, box.height);
+            ctx.fillStyle = model.colours ? columnColor(model, col) : theme.text;
+            paintCellText(ctx, row[col] ?? "", x, box.y, columnWidth, box.height, model.wrap);
+            ctx.fillStyle = theme.grid;
+            hLine(ctx, x, box.y + box.height - 1, columnWidth);
+            vLine(ctx, x + columnWidth - 1, box.y, box.height);
+        }
+    }
+    ctx.restore();
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(SHEET_GUTTER_WIDTH, 0, Math.max(0, width - SHEET_GUTTER_WIDTH), chrome);
+    ctx.clip();
+    ctx.fillStyle = theme.header;
+    ctx.fillRect(SHEET_GUTTER_WIDTH, 0, width, chrome);
+    for (let col = columns.start; col < columns.end; col += 1) {
+        const x = viewX(edges[col] ?? 0);
+        const columnWidth = model.widths[col] ?? 0;
+        const picked = columnSelected(model, col);
+        const headerPicked = picked || headerRowSelected(model);
+        if (picked)
+            fillSelection(ctx, model, x, 0, columnWidth, SHEET_LETTER_HEIGHT);
+        else {
+            ctx.fillStyle = theme.header;
+            ctx.fillRect(x, 0, columnWidth, SHEET_LETTER_HEIGHT);
+        }
+        ctx.fillStyle = theme.muted;
+        clipText(ctx, columnLetter(col), x, 0, Math.max(0, columnWidth - SHEET_SORT_HIT), SHEET_LETTER_HEIGHT, "center");
+        if (model.headerRow) {
+            if (headerPicked) {
+                fillSelection(ctx, model, x, SHEET_LETTER_HEIGHT, columnWidth, SHEET_HEADER_HEIGHT);
+            }
+            else {
+                ctx.fillStyle = headerFill(model, col);
+                ctx.fillRect(x, SHEET_LETTER_HEIGHT, columnWidth, SHEET_HEADER_HEIGHT);
+            }
+            ctx.fillStyle = model.colours ? columnColor(model, col) : theme.text;
+            clipText(ctx, model.headerLabels[col] ?? "", x, SHEET_LETTER_HEIGHT, columnWidth, SHEET_HEADER_HEIGHT);
+        }
+        ctx.fillStyle = theme.grid;
+        vLine(ctx, x + columnWidth - 1, 0, chrome);
+    }
+    ctx.fillStyle = theme.grid;
+    hLine(ctx, SHEET_GUTTER_WIDTH, SHEET_LETTER_HEIGHT - 1, width);
+    if (model.headerRow)
+        hLine(ctx, SHEET_GUTTER_WIDTH, chrome - 1, width);
+    ctx.restore();
+    ctx.fillStyle = theme.gutter;
+    ctx.fillRect(0, 0, SHEET_GUTTER_WIDTH, height);
+    for (let index = rows.start; index < rows.end; index += 1) {
+        const box = rowBox(index);
+        const bottom = box.y + box.height;
+        if (bottom <= chrome)
+            continue;
+        const top = Math.max(box.y, chrome);
+        const picked = rowSelected(model, index);
+        ctx.fillStyle = picked ? theme.selection : theme.gutter;
+        ctx.fillRect(0, top, SHEET_GUTTER_WIDTH - 1, bottom - top);
+        ctx.fillStyle = theme.muted;
+        clipText(ctx, model.rowLabels[index] ?? String(index + 1), 0, box.y, SHEET_GUTTER_WIDTH - 1, box.height, "center");
+        ctx.fillStyle = theme.grid;
+        hLine(ctx, 0, box.y + box.height - 1, SHEET_GUTTER_WIDTH);
+    }
+    ctx.fillStyle = sheetSelected(model) ? theme.selection : theme.header;
+    ctx.fillRect(0, 0, SHEET_GUTTER_WIDTH, chrome);
+    if (model.headerRow) {
+        if (headerRowSelected(model)) {
+            fillSelection(ctx, model, 0, SHEET_LETTER_HEIGHT, SHEET_GUTTER_WIDTH - 1, SHEET_HEADER_HEIGHT);
+        }
+        else {
+            ctx.fillStyle = theme.gutter;
+            ctx.fillRect(0, SHEET_LETTER_HEIGHT, SHEET_GUTTER_WIDTH - 1, SHEET_HEADER_HEIGHT);
+        }
+        ctx.fillStyle = theme.muted;
+        clipText(ctx, "1", 0, SHEET_LETTER_HEIGHT, SHEET_GUTTER_WIDTH - 1, SHEET_HEADER_HEIGHT, "center");
+    }
+    ctx.fillStyle = theme.grid;
+    hLine(ctx, 0, SHEET_LETTER_HEIGHT - 1, SHEET_GUTTER_WIDTH);
+    if (model.headerRow)
+        hLine(ctx, 0, chrome - 1, SHEET_GUTTER_WIDTH);
+    vLine(ctx, SHEET_GUTTER_WIDTH - 1, 0, height);
+    const outline = (index, col, header, color) => {
+        const top = header
+            ? SHEET_LETTER_HEIGHT
+            : rowBox(index).y;
+        const x = viewX(edges[col] ?? 0);
+        const columnWidth = model.widths[col];
+        if (columnWidth == null)
+            return;
+        const boxWidth = columnWidth;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(x + 1, top + 1, Math.max(0, boxWidth - 2), (header ? SHEET_HEADER_HEIGHT : rowBox(index).height) - 2);
+        ctx.lineWidth = 1;
+    };
+    const paintOutline = (cell, color) => {
+        if (cell.header) {
+            outline(cell.index, cell.col, true, color);
+            return;
+        }
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(SHEET_GUTTER_WIDTH, chrome, Math.max(0, width - SHEET_GUTTER_WIDTH), Math.max(0, height - chrome));
+        ctx.clip();
+        outline(cell.index, cell.col, false, color);
+        ctx.restore();
+    };
+    if (model.search)
+        paintOutline(model.search, theme.search);
+    if (model.active)
+        paintOutline(model.active, theme.accent);
+}

package/dist/lib/sheet/sheet-theme.d.ts

@@ -0,0 +1,2 @@
+/** Repaint when the document switches between light and dark. */
+export declare function watchSheetTheme(node: HTMLElement, onChange: () => void): () => void;

package/dist/lib/sheet/sheet-theme.js

@@ -0,0 +1,26 @@
+const THEME_ATTRIBUTES = [
+    "class",
+    "style",
+    "data-theme",
+    "data-mode",
+    "data-ui-theme",
+];
+/** Repaint when the document switches between light and dark. */
+export function watchSheetTheme(node, onChange) {
+    const doc = node.ownerDocument;
+    const observer = new MutationObserver(onChange);
+    const options = { attributes: true, attributeFilter: THEME_ATTRIBUTES };
+    const seen = new Set();
+    for (let current = node; current; current = current.parentNode) {
+        if (seen.has(current) || !(current instanceof Element))
+            continue;
+        seen.add(current);
+        observer.observe(current, options);
+    }
+    const media = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener("change", onChange);
+    return () => {
+        observer.disconnect();
+        media?.removeEventListener("change", onChange);
+    };
+}

package/dist/lib/views/csv-view-mode.d.ts

@@ -0,0 +1,3 @@
+import type { CsvTablePresentation } from "../csv-view-settings";
+export type CsvViewMode = "table" | "canvas" | "source";
+export declare function csvViewMode(state: Record<string, unknown>, fallback?: CsvTablePresentation): CsvViewMode;

package/dist/lib/views/csv-view-mode.js

@@ -0,0 +1,6 @@
+export function csvViewMode(state, fallback = "canvas") {
+    const mode = state["mode"];
+    if (mode === "source" || mode === "canvas" || mode === "table")
+        return mode;
+    return fallback;
+}

package/dist/lib/views/csv-view.d.ts

@@ -0,0 +1,24 @@
+import { FileView, type TFile, type WorkspaceLeaf } from "@lapis-notes/api";
+import { csvViewMode, type CsvViewMode } from "./csv-view-mode";
+export type { CsvViewMode };
+export { csvViewMode };
+export declare class CsvFileView extends FileView {
+    #private;
+    constructor(leaf: WorkspaceLeaf);
+    getViewType(): string;
+    getDisplayText(): string;
+    getIcon(): string;
+    canAcceptExtension(extension: string): boolean;
+    mode(): CsvViewMode;
+    showMode(mode: CsvViewMode): void;
+    toggleMode(): void;
+    showCanvas(): void;
+    onLoadFile(file: TFile): Promise<void>;
+    onUnloadFile(_file: TFile): Promise<void>;
+    onRename(file: TFile): Promise<void>;
+    onload(): void;
+    onunload(): void;
+    private prepareHost;
+    private mountSurface;
+    private unmountSurface;
+}

package/dist/lib/views/csv-view.js

@@ -0,0 +1,125 @@
+import { FileView } from "@lapis-notes/api";
+import { mount, unmount } from "svelte";
+import CsvSourceView from "../components/csv-source-view.svelte";
+import { readDefaultCsvView } from "../csv-view-settings";
+import CsvSheet from "../CsvSheet.svelte";
+import CsvTable from "../CsvTable.svelte";
+import { CSV_EXTENSIONS, CSV_VIEW_TYPE } from "../ids";
+import { csvViewMode } from "./csv-view-mode";
+const tableExtensions = new Set(CSV_EXTENSIONS);
+export { csvViewMode };
+export class CsvFileView extends FileView {
+    #component = null;
+    constructor(leaf) {
+        super(leaf);
+    }
+    getViewType() {
+        return CSV_VIEW_TYPE;
+    }
+    getDisplayText() {
+        return this.file?.basename ?? "CSV";
+    }
+    getIcon() {
+        const mode = this.mode();
+        if (mode === "source")
+            return "file-code";
+        if (mode === "canvas")
+            return "grid-3x3";
+        return "table";
+    }
+    canAcceptExtension(extension) {
+        return tableExtensions.has(extension.toLowerCase());
+    }
+    mode() {
+        return csvViewMode(this.getState(), readDefaultCsvView(this.app));
+    }
+    showMode(mode) {
+        const file = this.file?.path ?? this.getState()["file"];
+        void this.leaf.setViewState({
+            type: CSV_VIEW_TYPE,
+            state: { ...this.getState(), file, mode },
+        });
+    }
+    toggleMode() {
+        this.showMode(this.mode() === "source" ? readDefaultCsvView(this.app) : "source");
+    }
+    showCanvas() {
+        this.showMode(this.mode() === "canvas" ? "table" : "canvas");
+    }
+    async onLoadFile(file) {
+        this.file = file;
+        this.mountSurface();
+    }
+    async onUnloadFile(_file) {
+        this.file = null;
+        this.unmountSurface();
+    }
+    async onRename(file) {
+        this.file = file;
+        this.mountSurface();
+    }
+    onload() {
+        this.prepareHost();
+    }
+    onunload() {
+        this.unmountSurface();
+    }
+    prepareHost() {
+        Object.assign(this.contentEl.style, {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            minWidth: "0",
+            minHeight: "0",
+            overflow: "hidden",
+        });
+    }
+    mountSurface() {
+        this.prepareHost();
+        this.unmountSurface();
+        const file = this.file;
+        if (!file)
+            return;
+        if (this.mode() === "source") {
+            this.#component = mount(CsvSourceView, {
+                target: this.contentEl,
+                props: {
+                    app: this.app,
+                    file,
+                    onShowTable: () => this.showMode("table"),
+                    onShowCanvas: () => this.showMode("canvas"),
+                },
+            });
+            return;
+        }
+        if (this.mode() === "canvas") {
+            this.#component = mount(CsvSheet, {
+                target: this.contentEl,
+                props: {
+                    app: this.app,
+                    file,
+                    onShowTable: () => this.showMode("table"),
+                    onToggleSource: () => this.showMode("source"),
+                },
+            });
+            return;
+        }
+        this.#component = mount(CsvTable, {
+            target: this.contentEl,
+            props: {
+                app: this.app,
+                file,
+                role: "file",
+                onToggleSource: () => this.showMode("source"),
+                onShowCanvas: () => this.showMode("canvas"),
+            },
+        });
+    }
+    unmountSurface() {
+        if (!this.#component)
+            return;
+        void unmount(this.#component);
+        this.#component = null;
+    }
+}