cables_dev/cables_ui/src/ui/components/tabs/tab_history.js

import undo from "../../utils/undo.js";

export default class MetaHistory
{
    constructor(tabs)
    {
        this.html = "";
        this._tab = new CABLES.UI.Tab("History", { "icon": "list", "infotext": "tab_history", "padding": true });
        tabs.addTab(this._tab);

        undo.setCallback(this.update.bind(this));

        this.update();
        this._tab.on("onActivate", () => { this.update(); });
    }

    update()
    {
        if (!this._tab.isVisible()) return;

        this.html = "<h2>Undo History</h2>";

        this.html += "<span onclick=\"CABLES.UI.undo.undo();\" class=\"iconbutton\"><span class=\"icon icon-arrow-left\" ></span></span>";
        this.html += "<span onclick=\"CABLES.UI.undo.redo();\" class=\"iconbutton\"><span class=\"icon icon-arrow-right\"></span></span>";

        const commands = undo.getCommands();

        this.html += "&nbsp;&nbsp;&nbsp;" + (undo.getIndex() + 1) + " / " + (commands.length) + "<br/><br/>";

        let groupSummary = [];
        let lastGroup = null;

        for (let i = -1; i < commands.length; i++)
        {
            let cmd = null;

            if (i == -1) cmd = { "groupName": "Open patch", "group": true };
            else cmd = commands[i];

            let style = "";
            if (!cmd.group || i == 0 || (i > 0 && lastGroup && lastGroup != cmd.group)) style += "margin-top:4px;";

            if (undo.getIndex() == i) style += "border-left:4px solid var(--color-10);background-color:var(--color-04);";
            else if (undo.getIndex() < i) style += "opacity:0.4;border-left:4px solid var(--color-06);background-color:var(--color-03);";
            else style += "border-left:4px solid var(--color-08);background-color:var(--color-03);";

            groupSummary.push(cmd.title);

            if (!cmd.group || cmd.groupName) this.html += "<div style=\"padding:2px;padding-left:7px;" + style + "\">";

            if (!cmd.group)
            {
                this.html += "<b>" + cmd.title + "</b>";
                groupSummary = [];
            }

            if (cmd.groupName)
            {
                if (i != -1 && groupSummary.length > 1)
                {
                    groupSummary.length = Math.min(groupSummary.length, 5);
                    this.html += groupSummary.join(", ");
                    this.html += "...<br/>";
                }

                this.html += "<b>" + cmd.groupName + "</b>";
                lastGroup = cmd.group;
                groupSummary = [];
            }

            this.html += "</div>";
        }

        this._tab.html(this.html);
    }

    show()
    {
        this.update();
    }
}