TodoEditor.ts

namespace myplugin.example {

    import controls = colibri.ui.controls;
    import ide = colibri.ui.ide;

    export const CAT_TODO_EDITOR = "myplugin.example.TodoEditorCategory";
    export const CMD_ADD_TASK = "myplugin.example.AddTask";
    export const CMD_MOVE_TASK_UP = "myplugin.example.MoveTaskUp";
    export const CMD_MOVE_TASK_DOWN = "myplugin.example.MoveTaskDown";

    /**
     * A custom, rich HTML-based editor that opens ".todo" files.
     *
     * Unlike the built-in tree-viewer editors, this editor builds its own DOM: a
     * scrollable list of task "cards" that pretty-print each task. It manages its
     * own selection and feeds it to:
     * - the Inspector view, through the editor Part's selection
     *   (setSelection / getPropertyProvider), and
     * - the Outline view, through TodoEditorOutlineProvider.
     *
     * Selection is kept in sync in both directions between the editor, the
     * outline, and the inspector.
     */
    export class TodoEditor extends ide.FileEditor {

        static ID = "myplugin.example.TodoEditor";

        private static _factory: ide.ContentTypeEditorFactory;

        static getFactory() {

            return this._factory || (this._factory = new ide.ContentTypeEditorFactory(
                "Todo Editor",
                CONTENT_TYPE_TODO,
                () => new TodoEditor()));
        }

        private _model: TodoModel;
        private _outlineProvider: TodoEditorOutlineProvider;
        private _propertyProvider: TodoEditorPropertySectionProvider;

        private _contentElement: HTMLDivElement;
        private _cardMap: Map<TodoTask, HTMLElement>;
        private _selectedTasks: TodoTask[];

        constructor() {
            super(TodoEditor.ID, TodoEditor.getFactory());

            this.addClass("TodoEditor");

            this._model = new TodoModel();
            this._outlineProvider = new TodoEditorOutlineProvider(this);
            this._propertyProvider = new TodoEditorPropertySectionProvider(this);

            this._cardMap = new Map();
            this._selectedTasks = [];
        }

        getModel() {
            return this._model;
        }

        protected createPart(): void {

            this._contentElement = document.createElement("div");
            this._contentElement.classList.add("TodoEditorArea");

            // Clicking the empty area clears the selection.
            this._contentElement.addEventListener("click", () => {

                this.setSelectedTasks([], true, false);
            });

            this.getElement().appendChild(this._contentElement);

            // Load the file content (async); the list renders when it is ready.
            this.updateContent();
        }

        private async updateContent() {

            const selectedNames = new Set(this._selectedTasks.map(t => t.getName()));

            const content = await ide.FileUtils.preloadAndGetFileString(this.getInput());

            let data: any = {};

            try {

                data = JSON.parse(content);

            } catch (e) {

                data = {};
            }

            this._model.readJSON(data);

            this._selectedTasks = this._model.getTasks().filter(t => selectedNames.has(t.getName()));

            this.render();

            this.setSelection(this._selectedTasks);

            this._outlineProvider.repaint();
        }

        protected async onEditorInputContentChangedByExternalEditor() {

            await this.updateContent();
        }

        async doSave() {

            const content = JSON.stringify(this._model.toJSON(), null, 4);

            try {

                await ide.FileUtils.setFileString_async(this.getInput(), content);

                this.setDirty(false);

            } catch (e) {

                console.error(e);
            }
        }

        // --- rendering ---

        private render() {

            if (!this._contentElement) {

                return;
            }

            this._contentElement.innerHTML = "";
            this._cardMap = new Map();

            const tasks = this._model.getTasks();

            if (tasks.length === 0) {

                const empty = document.createElement("div");
                empty.classList.add("TodoEditorEmpty");
                empty.textContent = 'No tasks yet. Use "Add Task" to create one.';
                this._contentElement.appendChild(empty);

            } else {

                for (const task of tasks) {

                    const card = this.buildCard(task);

                    this._cardMap.set(task, card);
                    this._contentElement.appendChild(card);
                }
            }

            this.updateHighlights();
        }

        private buildCard(task: TodoTask): HTMLElement {

            const card = document.createElement("div");
            card.classList.add("TodoTaskCard", "state-" + task.getState());

            const header = document.createElement("div");
            header.classList.add("TodoTaskCardHeader");

            const name = document.createElement("div");
            name.classList.add("TodoTaskName");
            name.textContent = task.getName();

            const state = document.createElement("span");
            state.classList.add("TodoTaskState", "state-" + task.getState());
            state.textContent = getTodoStateLabel(task.getState());

            header.appendChild(name);
            header.appendChild(state);

            const desc = document.createElement("div");
            desc.classList.add("TodoTaskDesc");

            if (task.getDescription()) {

                desc.textContent = task.getDescription();

            } else {

                desc.classList.add("empty");
                desc.textContent = "No description.";
            }

            card.appendChild(header);
            card.appendChild(desc);

            card.addEventListener("click", e => {

                e.stopPropagation();

                let selection: TodoTask[];

                if (e.ctrlKey || e.metaKey) {

                    selection = this._selectedTasks.indexOf(task) >= 0
                        ? this._selectedTasks.filter(t => t !== task)
                        : [...this._selectedTasks, task];

                } else {

                    selection = [task];
                }

                this.setSelectedTasks(selection, true, false);
            });

            return card;
        }

        private updateHighlights() {

            this._cardMap.forEach((card, task) => {

                card.classList.toggle("selected", this._selectedTasks.indexOf(task) >= 0);
            });
        }

        refreshViewers() {

            this.render();
            this._outlineProvider.repaint();
        }

        // --- selection ---

        getSelectedTasks(): TodoTask[] {

            return this._selectedTasks;
        }

        /**
         * Set the selected tasks and propagate to the inspector (via the Part
         * selection) and, when syncOutline is true, to the outline view.
         */
        setSelectedTasks(tasks: TodoTask[], syncOutline: boolean, reveal = true) {

            this._selectedTasks = tasks;

            this.updateHighlights();

            if (reveal && tasks.length > 0) {

                const card = this._cardMap.get(tasks[tasks.length - 1]);

                if (card) {

                    card.scrollIntoView({ block: "nearest" });
                }
            }

            // Updates the Part selection, which the Inspector view listens to.
            this.setSelection(tasks);

            if (syncOutline) {

                this._outlineProvider.setSelection(tasks, true, false);
                this._outlineProvider.repaint();
            }
        }

        // --- operations ---

        addTask() {

            const maker = new colibri.ui.ide.utils.NameMaker((t: TodoTask) => t.getName());
            maker.update(this._model.getTasks());

            const task = new TodoTask(maker.makeName("New Task"));

            this._model.addTask(task);

            this.setDirty(true);
            this.refreshViewers();

            this.setSelectedTasks([task], true);
        }

        deleteSelection() {

            const tasks = this.getSelectedTasks();

            if (tasks.length === 0) {

                return;
            }

            this._model.removeTasks(tasks);

            this.setDirty(true);
            this.refreshViewers();

            this.setSelectedTasks([], true, false);
        }

        moveSelection(dir: -1 | 1) {

            const tasks = this.getSelectedTasks();

            if (tasks.length === 0) {

                return;
            }

            this._model.moveTasks(tasks, dir);

            this.setDirty(true);
            this.refreshViewers();

            this.setSelectedTasks(tasks, true);
        }

        // --- outline & inspector wiring ---

        getEditorViewerProvider(key: string): ide.EditorViewerProvider {

            // "Outline" is phasereditor2d.outline.ui.views.OutlineView.EDITOR_VIEWER_PROVIDER_KEY.
            // We compare against the literal to avoid depending on the outline plugin's types.
            if (key === "Outline") {

                return this._outlineProvider;
            }

            return null;
        }

        getPropertyProvider() {

            return this._propertyProvider;
        }

        // --- toolbar & commands ---

        createEditorToolbar(parent: HTMLElement) {

            const manager = new controls.ToolbarManager(parent);

            manager.addCommand(CMD_ADD_TASK, { showText: true, text: "Add Task" });
            manager.addCommand(colibri.ui.ide.actions.CMD_DELETE, { showText: true, text: "Delete" });
            manager.addCommand(CMD_MOVE_TASK_UP, { showText: true, text: "Move Up" });
            manager.addCommand(CMD_MOVE_TASK_DOWN, { showText: true, text: "Move Down" });

            return manager;
        }

        static registerCommands(manager: ide.commands.CommandManager) {

            const editorScope = (args: ide.commands.HandlerArgs) =>
                args.activeEditor instanceof TodoEditor;

            const hasSelection = (args: ide.commands.HandlerArgs) =>
                editorScope(args) && (args.activeEditor as TodoEditor).getSelectedTasks().length > 0;

            manager.addCategory({
                id: CAT_TODO_EDITOR,
                name: "Todo Editor"
            });

            manager.add({
                command: {
                    id: CMD_ADD_TASK,
                    name: "Add Task",
                    category: CAT_TODO_EDITOR,
                    tooltip: "Add a new task.",
                    icon: colibri.getIcon(colibri.ICON_PLUS)
                },
                handler: {
                    testFunc: editorScope,
                    executeFunc: args => (args.activeEditor as TodoEditor).addTask()
                },
                keys: {
                    key: "A"
                }
            });

            // Reuse the global Delete command for our editor.
            manager.add({
                handler: {
                    testFunc: hasSelection,
                    executeFunc: args => (args.activeEditor as TodoEditor).deleteSelection()
                }
            }, colibri.ui.ide.actions.CMD_DELETE);

            manager.add({
                command: {
                    id: CMD_MOVE_TASK_UP,
                    name: "Move Task Up",
                    category: CAT_TODO_EDITOR,
                    tooltip: "Move the selected tasks up."
                },
                handler: {
                    testFunc: hasSelection,
                    executeFunc: args => (args.activeEditor as TodoEditor).moveSelection(-1)
                }
            });

            manager.add({
                command: {
                    id: CMD_MOVE_TASK_DOWN,
                    name: "Move Task Down",
                    category: CAT_TODO_EDITOR,
                    tooltip: "Move the selected tasks down."
                },
                handler: {
                    testFunc: hasSelection,
                    executeFunc: args => (args.activeEditor as TodoEditor).moveSelection(1)
                }
            });
        }
    }

    /**
     * Provides the tasks of the model as the roots of the tree. Used by the
     * Outline view (which still uses a tree viewer). Tasks have no children.
     */
    export class TodoContentProvider implements controls.viewers.ITreeContentProvider {

        getRoots(input: any): any[] {

            return input instanceof TodoModel ? input.getTasks() : [];
        }

        getChildren(parent: any): any[] {

            return [];
        }
    }
}