gristlabs_grist-core/app/client/components/UndoStack.ts
Jarosław Sadziński b6a431dd58 (core) Cursor in custom widgets
Summary:
Adding a new method `setCursorPos` in the widget API, and a new configuration option for the ready message `allowSelectBy` that exposes custom widgets in the `Select by` dropdown.
With this, a custom widget can control the position of the linked widgets and is able to change the column in the creator panel.

Test Plan: Added new test. Existing tests should pass.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

Differential Revision: https://phab.getgrist.com/D3993
2023-08-29 09:19:52 +02:00

178 lines
6.6 KiB
TypeScript

import {GristDoc} from 'app/client/components/GristDoc';
import * as dispose from 'app/client/lib/dispose';
import {MinimalActionGroup} from 'app/common/ActionGroup';
import {PromiseChain, setDefault} from 'app/common/gutil';
import {CursorPos} from 'app/plugin/GristAPI';
import {fromKo, Observable} from 'grainjs';
import * as ko from 'knockout';
import sortBy = require('lodash/sortBy');
export interface ActionGroupWithCursorPos extends MinimalActionGroup {
cursorPos?: CursorPos;
// For operations not done by the server, we supply a function to
// handle them.
op?: (ag: MinimalActionGroup, isUndo: boolean) => Promise<void>;
}
// Provides observables indicating disabled state for undo/redo.
export interface IUndoState {
isUndoDisabled: Observable<boolean>;
isRedoDisabled: Observable<boolean>;
}
/**
* Maintains the stack of actions which can be undone and redone, and maintains the
* position in this stack. Undo and redo actions are generated and sent to the server here.
*/
export class UndoStack extends dispose.Disposable {
public isDisabled: Observable<boolean>;
public undoDisabledObs: ko.Observable<boolean>;
public redoDisabledObs: ko.Observable<boolean>;
private _gristDoc: GristDoc;
private _stack: ActionGroupWithCursorPos[];
private _pointer: number;
private _linkMap: Map<number, ActionGroupWithCursorPos[]>;
// Chain of promises which send undo actions to the server. This delays the execution of the
// next action until the current one has been received and moved the pointer index.
private _undoChain = new PromiseChain<void>();
public create(log: MinimalActionGroup[], options: {gristDoc: GristDoc}) {
this._gristDoc = options.gristDoc;
this.isDisabled = Observable.create(this, false);
// TODO: _stack and _linkMap grow without bound within a single session.
// The top of the stack is stack.length - 1. The pointer points above the most
// recently applied (not undone) action.
this._stack = [];
this._pointer = 0;
// Map leading from actionNums to the action groups which link to them.
this._linkMap = new Map();
// Observables for when there is nothing to undo/redo.
this.undoDisabledObs = ko.observable(true);
this.redoDisabledObs = ko.observable(true);
// Set the history nav interface in the DocPageModel to properly enable/disabled undo/redo.
if (this._gristDoc.docPageModel) {
this._gristDoc.docPageModel.undoState.set({
isUndoDisabled: fromKo(this.undoDisabledObs),
isRedoDisabled: fromKo(this.redoDisabledObs)
});
}
// Initialize the stack from the log of recent actions from the server.
log.forEach(ag => { this.pushAction(ag); });
}
/**
* Should only be given own actions. Pays attention to actionNum, otherId, linkId, and
* uses those to adjust undo index.
*/
public pushAction(ag: MinimalActionGroup): void {
if (!ag.fromSelf) {
return;
}
const otherIndex = ag.otherId ?
this._stack.findIndex(a => a.actionNum === ag.otherId) : -1;
if (ag.linkId) {
// Link action. Add the action to the linkMap, but not to any stacks.
setDefault(this._linkMap, ag.linkId, []).push(ag);
} else if (otherIndex > -1) {
// Undo/redo action from the current session.
this._pointer = ag.isUndo ? otherIndex : otherIndex + 1;
} else {
// Either a normal action from the current session, or an undo/redo which
// applies to a non-recent action. Bury all undone actions.
if (!this.redoDisabledObs()) {
this._stack.splice(this._pointer);
}
// Reset pointer and add to the stack (if not an undo action).
if (!ag.otherId) {
this._stack.push(ag);
}
this._pointer = this._stack.length;
}
this.undoDisabledObs(this._pointer <= 0);
this.redoDisabledObs(this._pointer >= this._stack.length);
}
// Send an undo action. This should be called when the user presses 'undo'.
public async sendUndoAction(): Promise<void> {
if (this.isDisabled.get()) { return; }
return this._undoChain.add(() => this._sendAction(true));
}
// Send a redo action. This should be called when the user presses 'redo'.
public async sendRedoAction(): Promise<void> {
if (this.isDisabled.get()) { return; }
return this._undoChain.add(() => this._sendAction(false));
}
public enable(): void {
this.isDisabled.set(false);
}
public disable(): void {
this.isDisabled.set(true);
}
private async _sendAction(isUndo: boolean): Promise<void> {
// Pick the action group to undo or redo.
const ag = this._stack[isUndo ? this._pointer - 1 : this._pointer];
if (!ag) { return; }
try {
// Get all actions in the bundle that starts at the current index. Typically, an array with a
// single action group is returned.
const actionGroups = this._findActionBundle(ag);
// When we undo/redo, jump to the place where this action occurred, to bring the user to the
// context where the change was originally made. We jump first immediately to feel more
// responsive, then again when the action is done. The second jump matters more for most
// changes, but the first is the important one when Undoing an AddRecord.
this._gristDoc.moveToCursorPos(ag.cursorPos, ag).catch(() => { /* do nothing */ });
if (actionGroups.length === 1 && actionGroups[0].op) {
// this is an internal operation, rather than one done by the server,
// so we can't ask the server to undo it.
await actionGroups[0].op(actionGroups[0], isUndo);
} else {
await this._gristDoc.docComm.applyUserActionsById(
actionGroups.map(a => a.actionNum),
actionGroups.map(a => a.actionHash),
isUndo,
{ otherId: ag.actionNum });
}
this._gristDoc.moveToCursorPos(ag.cursorPos, ag).catch(() => { /* do nothing */ });
} catch (err) {
err.message = `Failed to apply ${isUndo ? 'undo' : 'redo'} action: ${err.message}`;
throw err;
}
}
/**
* Find all actionGroups in the bundle that starts with the given action group.
*/
private _findActionBundle(ag: ActionGroupWithCursorPos) {
const prevNums = new Set();
const actionGroups = [];
const queue = [ag];
// Follow references through the linkMap adding items to the array bundle.
while (queue.length) {
ag = queue.pop()!;
// Checking that actions are only accessed once prevents an infinite circular loop.
if (prevNums.has(ag.actionNum)) {
break;
}
actionGroups.push(ag);
prevNums.add(ag.actionNum);
queue.push(...this._linkMap.get(ag.actionNum) || []);
}
return sortBy(actionGroups, group => group.actionNum);
}
}