@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/workspace/model.ts

@@ -1,4 +1,8 @@
+import type { Command } from '../code/keymap';
 import { EditorDocument } from '../code/document';
+import { sanitize } from './keybindings';
+import type { FileTreeExport, FileTreeImportEntry } from '../tree';
+import { closable, compareKey, compareTab, order, place } from './tabs';
 
 
 type FileOperation = {
@@ -24,6 +28,9 @@ type WorkspaceAction = {
 
 type WorkspaceChange = { paths?: readonly string[] };
 
+// A read-only diff of two files, as they read when compared; its tab's document stays empty and never saves.
+type WorkspaceCompare = Readonly<{ modified: string; original: string; paths: readonly [string, string] }>;
+
 type WorkspaceConfirmation = {
     dirty: readonly string[];
     kind: 'close' | 'delete' | 'workspace';
@@ -36,9 +43,15 @@ type WorkspaceEntry = Readonly<{ kind: 'directory' | 'file'; path: string }>;
 
 type WorkspaceHost = {
     actions?: readonly WorkspaceAction[];
+    // The text a file's git gutter diffs against, like its HEAD revision; null for none.
+    baseline?: (cwd: string, path: string) => Promise<string | null>;
     confirm?: (request: WorkspaceConfirmation) => WorkspaceDecision | Promise<WorkspaceDecision>;
     copyPath(cwd: string, path: string): void | Promise<void>;
     delete(cwd: string, paths: readonly string[]): Promise<{ operationId: string }>;
+    // What a file dragged out of the explorer leaves on the desktop or in another app; null for nothing.
+    export?: (cwd: string, path: string) => FileTreeExport | null;
+    // Files and folders dropped in from the OS onto 'target', a folder path or '' for the top level.
+    import?: (cwd: string, target: string, entries: readonly FileTreeImportEntry[]) => Promise<void>;
     list(cwd: string): Promise<readonly WorkspaceEntry[]>;
     preferences?: {
         get(): Promise<Partial<WorkspacePreferences>>;
@@ -46,18 +59,43 @@ type WorkspaceHost = {
     };
     read(cwd: string, path: string): Promise<string>;
     rename(cwd: string, source: string, destination: string): Promise<{ operationId: string }>;
+    session?: {
+        get(): Promise<WorkspaceSession | null>;
+        set(session: WorkspaceSession): Promise<void>;
+    };
     undo(cwd: string, operationId: string): Promise<void>;
     watch(cwd: string, changed: (event: WorkspaceChange) => void): VoidFunction | Promise<VoidFunction>;
     write(cwd: string, path: string, content: string): Promise<void>;
 };
 
 type WorkspacePreferences = {
+    autoSave: 'delay' | 'focus' | 'off';
+    autoSaveDelay: number;
     explorerOpen: boolean;
     explorerSide: 'left' | 'right';
+    // Chords over the default keys, passed to every editor as 'keybindings'.
+    keybindings: Readonly<Record<string, Command | null>>;
     showWhitespace: boolean;
     wrapText: boolean;
 };
 
+type WorkspaceSession = {
+    active: string | null;
+    explorer: { expanded: string[]; scroll: number };
+    tabs: WorkspaceSessionTab[];
+};
+
+type WorkspaceSessionTab = {
+    // Unsaved text restored on load (hot exit); undefined when the tab was saved.
+    draft?: string;
+    folds: number[];
+    path: string;
+    pinned: boolean;
+    preview: boolean;
+    scroll: { left: number; top: number };
+    selection: { anchor: number; head: number };
+};
+
 type WorkspaceState = Readonly<{
     active: WorkspaceTab | undefined;
     busy: number;
@@ -77,10 +115,13 @@ type WorkspaceState = Readonly<{
 }>;
 
 type WorkspaceTab = {
+    readonly compare?: WorkspaceCompare;
     readonly document: EditorDocument;
     readonly id: number;
     missing: boolean;
     path: string;
+    pinned: boolean;
+    preview: boolean;
     saved: string;
     scroll: { left: number; top: number };
 };
@@ -88,9 +129,16 @@ type WorkspaceTab = {
 type WorkspaceTarget = { column?: number; line?: number; path: string; requestId?: number | string };
 
 
+const AUTO_SAVE_DELAY_MAX = 60_000;
+
+const AUTO_SAVE_DELAY_MIN = 100;
+
 const DEFAULTS: WorkspacePreferences = {
+    autoSave: 'off',
+    autoSaveDelay: 1000,
     explorerOpen: true,
     explorerSide: 'right',
+    keybindings: {},
     showWhitespace: false,
     wrapText: false
 };
@@ -178,6 +226,7 @@ class EditorWorkspaceModel {
     private tabId = 0;
     private tabs: WorkspaceTab[] = [];
     private unwatch: VoidFunction | undefined;
+    private watchers = new Set<(event: WorkspaceChange) => void>();
     private watchWork = Promise.resolve();
 
 
@@ -189,6 +238,14 @@ class EditorWorkspaceModel {
 
 
     private applyPreferences(preferences: Partial<WorkspacePreferences>) {
+        if (preferences.autoSave === 'delay' || preferences.autoSave === 'focus' || preferences.autoSave === 'off') {
+            this.preferences.autoSave = preferences.autoSave;
+        }
+
+        if (typeof preferences.autoSaveDelay === 'number' && Number.isFinite(preferences.autoSaveDelay)) {
+            this.preferences.autoSaveDelay = Math.min(Math.max(Math.round(preferences.autoSaveDelay), AUTO_SAVE_DELAY_MIN), AUTO_SAVE_DELAY_MAX);
+        }
+
         for (let key of ['explorerOpen', 'showWhitespace', 'wrapText'] as const) {
             if (typeof preferences[key] === 'boolean') {
                 this.preferences[key] = preferences[key];
@@ -198,6 +255,10 @@ class EditorWorkspaceModel {
         if (preferences.explorerSide === 'left' || preferences.explorerSide === 'right') {
             this.preferences.explorerSide = preferences.explorerSide;
         }
+
+        if (preferences.keybindings !== undefined) {
+            this.preferences.keybindings = sanitize(preferences.keybindings);
+        }
     }
 
     private async authorize(kind: WorkspaceConfirmation['kind'], tabs: readonly WorkspaceTab[], paths: readonly string[]) {
@@ -248,6 +309,30 @@ class EditorWorkspaceModel {
         return revisions;
     }
 
+    private async closeTabs(tabs: readonly WorkspaceTab[]) {
+        if (!tabs.length) {
+            return true;
+        }
+
+        let paths = tabs.map((tab) => tab.path);
+
+        for (let path of paths) {
+            this.closed.set(path, (this.closed.get(path) ?? 0) + 1);
+        }
+
+        if (!(await this.authorize('close', tabs, paths))) {
+            return false;
+        }
+
+        for (let tab of tabs) {
+            this.removeTab(tab);
+        }
+
+        this.emit();
+
+        return true;
+    }
+
     private desire(before: readonly WorkspaceEntry[], after: readonly WorkspaceEntry[]) {
         for (let entry of before) {
             this.overlay.set(entry.path, null);
@@ -374,6 +459,38 @@ class EditorWorkspaceModel {
         this.emit();
     }
 
+    /** Adds a tab whose text came from elsewhere, like a restored draft; undefined when the path is open or opening. */
+    adopt(path: string, content: string, saved: string, missing = false) {
+        if (this.disposed || this.opening.has(path) || this.tabs.some((tab) => tab.path === path)) {
+            return;
+        }
+
+        let tab: WorkspaceTab = {
+            document: new EditorDocument(content),
+            id: ++this.tabId,
+            missing,
+            path,
+            pinned: false,
+            preview: false,
+            saved,
+            scroll: { left: 0, top: 0 }
+        };
+
+        this.tabs.push(tab);
+        this.documents.set(tab.id, tab.document.subscribe((_, change) => {
+            if (change.textChanged && dirty(tab) !== this.dirty.get(tab.id)) {
+                if (dirty(tab)) {
+                    tab.preview = false;
+                }
+
+                this.emit();
+            }
+        }));
+        this.emit();
+
+        return tab;
+    }
+
     async close(path = this.state.active?.path) {
         if (!path) {
             return false;
@@ -397,6 +514,66 @@ class EditorWorkspaceModel {
         return true;
     }
 
+    closeOthers(path = this.state.active?.path) {
+        return this.closeTabs(closable(this.tabs, 'others', path));
+    }
+
+    closeRight(path = this.state.active?.path) {
+        return this.closeTabs(closable(this.tabs, 'right', path));
+    }
+
+    closeSaved() {
+        return this.closeTabs(closable(this.tabs, 'saved'));
+    }
+
+    /** Opens a read-only diff of two files in a tab of its own, or shows the one already open for them. */
+    async compare(original: string, modified: string) {
+        let paths: [string, string];
+
+        try {
+            paths = [workspacePath(original, this.cwd), workspacePath(modified, this.cwd)];
+        }
+        catch (error) {
+            this.status(`Compare failed: ${message(error)}`, true);
+            return;
+        }
+
+        let cwd = this.cwd,
+            epoch = this.epoch,
+            key = compareKey(paths[0], paths[1]),
+            tab = this.tabs.find((tab) => tab.path === key);
+
+        if (!tab) {
+            let texts: string[];
+
+            try {
+                texts = await Promise.all([this.host.read(cwd, paths[0]), this.host.read(cwd, paths[1])]);
+            }
+            catch (error) {
+                if (epoch === this.epoch) {
+                    this.status(`Compare failed: ${message(error)}`, true);
+                }
+
+                return;
+            }
+
+            if (epoch !== this.epoch || this.disposed) {
+                return;
+            }
+
+            tab = this.tabs.find((tab) => tab.path === key);
+
+            if (!tab) {
+                tab = compareTab(++this.tabId, { modified: texts[1], original: texts[0], paths });
+                this.tabs.push(tab);
+            }
+        }
+
+        this.activate(tab);
+
+        return tab;
+    }
+
     async copyPath(path: string) {
         try {
             await this.host.copyPath(this.cwd, workspacePath(path, this.cwd));
@@ -481,7 +658,17 @@ class EditorWorkspaceModel {
         this.listeners.clear();
     }
 
-    async open(value: string, line?: number, column = 1) {
+    /** Hears each event the host's watcher reports, once its refresh has started. */
+    onWatch(listener: (event: WorkspaceChange) => void) {
+        this.watchers.add(listener);
+
+        return () => {
+            this.watchers.delete(listener);
+        };
+    }
+
+    // A preview opens in place of the last preview tab; opening the file again without 'preview' keeps its tab.
+    async open(value: string, line?: number, column = 1, preview = false) {
         if (this.disposed) {
             return;
         }
@@ -521,13 +708,24 @@ class EditorWorkspaceModel {
                         id: ++this.tabId,
                         missing: false,
                         path,
+                        pinned: false,
+                        preview,
                         saved: content,
                         scroll: { left: 0, top: 0 }
                     };
 
-                    this.tabs.push(tab);
+                    let replaced = place(this.tabs, tab);
+
+                    if (replaced) {
+                        this.removeTab(replaced);
+                    }
+
                     this.documents.set(tab.id, tab.document.subscribe((_, change) => {
                         if (change.textChanged && dirty(tab) !== this.dirty.get(tab.id)) {
+                            if (dirty(tab)) {
+                                tab.preview = false;
+                            }
+
                             this.emit();
                         }
                     }));
@@ -556,6 +754,10 @@ class EditorWorkspaceModel {
             return;
         }
 
+        if (!preview) {
+            tab.preview = false;
+        }
+
         if (intent === this.openIntent) {
             this.active = tab.id;
 
@@ -586,6 +788,19 @@ class EditorWorkspaceModel {
         return this.open(target.path, target.line, target.column);
     }
 
+    pin(path: string, pinned = true) {
+        let tab = this.tabs.find((tab) => tab.path === path);
+
+        if (!tab || tab.pinned === pinned) {
+            return;
+        }
+
+        tab.pinned = pinned;
+        tab.preview = false;
+        order(this.tabs);
+        this.emit();
+    }
+
     async refresh(_paths?: readonly string[]) {
         if (this.disposed || !this.cwd) {
             return;
@@ -640,6 +855,10 @@ class EditorWorkspaceModel {
                     return;
                 }
 
+                if (tab.compare) {
+                    continue;
+                }
+
                 tab.missing = !entries.has(tab.path);
 
                 if (dirty(tab) || tab.missing) {
@@ -756,7 +975,7 @@ class EditorWorkspaceModel {
 
     save(tab = this.state.active) {
         return this.queue('Save', async () => {
-            if (!tab || !this.tabs.includes(tab)) {
+            if (!tab || !this.tabs.includes(tab) || tab.compare) {
                 return false;
             }
 
@@ -903,6 +1122,10 @@ class EditorWorkspaceModel {
                 let stop = await this.host.watch(this.cwd, (event) => {
                     if (epoch === this.epoch) {
                         this.watchWork = this.refresh(event.paths);
+
+                        for (let watcher of [...this.watchers]) {
+                            watcher(event);
+                        }
                     }
                 });
 
@@ -989,6 +1212,10 @@ class EditorWorkspaceModel {
         });
     }
 
+    unpin(path: string) {
+        this.pin(path, false);
+    }
+
     /** Tests/hosts can drain event-driven work without sleeps or polling timers. */
     async whenIdle() {
         for (;;) {
@@ -1012,11 +1239,14 @@ export { containsPath, DEFAULTS, dirty, EditorWorkspaceModel, workspacePath };
 export type {
     WorkspaceAction,
     WorkspaceChange,
+    WorkspaceCompare,
     WorkspaceConfirmation,
     WorkspaceDecision,
     WorkspaceEntry,
     WorkspaceHost,
     WorkspacePreferences,
+    WorkspaceSession,
+    WorkspaceSessionTab,
     WorkspaceState,
     WorkspaceTab,
     WorkspaceTarget

package/src/components/editor/workspace/navigate.ts

@@ -0,0 +1,194 @@
+import { effect, root } from '@esportsplus/reactivity';
+import { mac } from '~/shared/platform';
+import { keymap, type Command } from '../code/keymap';
+import type { CodeController } from '../code/view';
+import type { Selection } from '../code/document';
+import type { FileTreeController, FileTreeJump } from '../tree';
+import type { EditorWorkspaceModel, WorkspaceTab } from './model';
+import type { WorkspaceEditorController } from './index';
+import type hosted from './session';
+
+
+type Options = {
+    // The chords the shown editor runs commands on, so a rebound command moves across files under its new keys.
+    bindings: () => Readonly<Record<string, Command | null>> | undefined;
+    hosting: ReturnType<typeof hosted>;
+    model: EditorWorkspaceModel;
+    tree: () => FileTreeController | undefined;
+};
+
+type Step = 'moved' | 'none' | 'wrapped';
+
+
+const COMMANDS: Partial<Record<Command, [FileTreeJump, boolean]>> = {
+    nextChange: ['change', false],
+    nextProblem: ['problem', false],
+    previousChange: ['change', true],
+    previousProblem: ['problem', true]
+};
+
+// Diagnostics for a file just opened come from its language server a moment later.
+const PROBLEMS_WAIT = 1500;
+
+
+function caret(selection: Selection) {
+    return selection.direction === 'backward' ? selection.start : selection.end;
+}
+
+function code(controller: WorkspaceEditorController | undefined): controller is CodeController {
+    return !!controller && 'nextChange' in controller && 'nextProblem' in controller;
+}
+
+// The editor's own commands wrap around within the file; a caret that went back past where it was has wrapped.
+function step(controller: CodeController, kind: FileTreeJump, backward: boolean): Step {
+    let before = caret(controller.document.selection),
+        moved = kind === 'change'
+            ? (backward ? controller.previousChange() : controller.nextChange())
+            : (backward ? controller.previousProblem() : controller.nextProblem());
+
+    if (!moved) {
+        return 'none';
+    }
+
+    let after = caret(controller.document.selection);
+
+    return (backward ? after >= before : after <= before) ? 'wrapped' : 'moved';
+}
+
+function reported(controller: CodeController) {
+    return new Promise<void>((resolve) => {
+        let stop = root((dispose) => {
+                effect(() => {
+                    let { errors, warnings } = controller.state.problems;
+
+                    if (errors || warnings) {
+                        queueMicrotask(finish);
+                    }
+                });
+
+                return dispose;
+            }),
+            timer = setTimeout(finish, PROBLEMS_WAIT);
+
+        function finish() {
+            clearTimeout(timer);
+            stop();
+            resolve();
+        }
+    });
+}
+
+
+// Next and previous change or problem across files: within the shown file first, through the editor's own
+// commands, and once none are left that way, on to the next file the explorer marks, starting from its first.
+const navigate = ({ bindings, hosting, model, tree }: Options) => {
+    let bound: ReturnType<Options['bindings']> | null = null,
+        resolve = keymap(mac());
+
+    async function go(kind: FileTreeJump, backward = false) {
+        let active = model.state.active,
+            controller = active && (await hosting.whenShown(active)),
+            left: Selection | undefined,
+            result: Step = 'none';
+
+        if (active && code(controller) && model.state.active === active) {
+            left = controller.document.selection;
+            result = step(controller, kind, backward);
+
+            if (result === 'moved') {
+                return true;
+            }
+        }
+
+        hosting.mark();
+
+        let explorer = tree(),
+            element = explorer && (await (backward ? explorer.previous(kind) : explorer.next(kind)));
+
+        if (!element || element.id === active?.path) {
+            if (result === 'none') {
+                model.status(kind === 'change' ? 'No changes' : 'No problems');
+            }
+
+            return result !== 'none';
+        }
+
+        // The file left behind keeps its caret where it was, not where the wrap put it.
+        if (result === 'wrapped' && code(controller) && left) {
+            controller.select(left, false);
+        }
+
+        let tab = await model.open(element.id);
+
+        return !!tab && model.state.active === tab && arrive(tab, kind, backward);
+    }
+
+    async function arrive(tab: WorkspaceTab, kind: FileTreeJump, backward: boolean) {
+        let controller = await hosting.whenShown(tab);
+
+        if (!code(controller) || model.state.active !== tab) {
+            return !!controller;
+        }
+
+        if (kind === 'change') {
+            let text = await hosting.loaded(tab.path);
+
+            if (text != null) {
+                controller.setBaseline(text);
+            }
+        }
+        else if (!controller.state.problems.errors && !controller.state.problems.warnings) {
+            await reported(controller);
+        }
+
+        if (model.state.active !== tab) {
+            return false;
+        }
+
+        // From the far end, the editor's own wrap lands on the file's first one, or its last going backward.
+        controller.select({ start: backward ? 0 : controller.document.value.length }, false);
+        step(controller, kind, backward);
+
+        return true;
+    }
+
+    function keydown(event: KeyboardEvent) {
+        if (event.defaultPrevented || event.isComposing) {
+            return;
+        }
+
+        let next = bindings();
+
+        if (next !== bound) {
+            bound = next;
+            resolve = keymap(mac(), next);
+        }
+
+        let command = resolve(event),
+            jump = command && COMMANDS[command];
+
+        if (!jump) {
+            return;
+        }
+
+        // Ahead of the editor, which would only wrap around within its own file.
+        event.preventDefault();
+        event.stopPropagation();
+        void go(jump[0], jump[1]);
+    }
+
+    return {
+        connect(element: HTMLElement) {
+            let listening = new AbortController();
+
+            element.addEventListener('keydown', keydown, { capture: true, signal: listening.signal });
+
+            return () => listening.abort();
+        },
+        go
+    };
+};
+
+
+export default navigate;
+export { step };