@deathbeds/jupyterlab-fonts/lib/manager.js

import { PromiseDelegate } from '@lumino/coreutils';
import { Signal } from '@lumino/signaling';
import { Menu } from '@lumino/widgets';
import { Stylist } from './stylist';
import { PACKAGE_NAME, CSS, CMD, TEXT_LABELS, TextKind, ROOT, TEXT_OPTIONS, FontFormat } from '.';
import { dataURISrc } from './util';
const ALL_PALETTE = 'Fonts';
const PALETTE = {
    code: 'Fonts (Code)',
    content: 'Fonts (Content)'
};
export class FontManager {
    constructor(commands, palette, notebooks) {
        this.licensePaneRequested = new Signal(this);
        this._fontFamilyMenus = new Map();
        this._fontSizeMenus = new Map();
        this._lineHeightMenus = new Map();
        this._ready = new PromiseDelegate();
        this._stylist = new Stylist();
        this._stylist.cacheUpdated.connect(this.settingsUpdate, this);
        this._commands = commands;
        this._palette = palette;
        this._notebooks = notebooks;
        this._notebooks.currentChanged.connect(this._onNotebooksChanged, this);
        this.makeMenus(commands);
        this.makeCommands();
        this.hack();
    }
    get ready() {
        return this._ready.promise;
    }
    get fonts() {
        return this._stylist.fonts;
    }
    get enabled() {
        if (!this.settings) {
            return false;
        }
        const enabled = !!this._settings.get('enabled').composite;
        return enabled;
    }
    set enabled(enabled) {
        if (!this.settings) {
            return;
        }
        this._settings
            .set('enabled', enabled)
            .then()
            .catch(console.warn);
    }
    get settings() {
        return this._settings;
    }
    get menu() {
        return this._menu;
    }
    get stylesheets() {
        return this._stylist.stylesheets;
    }
    set settings(settings) {
        if (this._settings) {
            this._settings.changed.disconnect(this.settingsUpdate, this);
        }
        this._settings = settings;
        if (settings) {
            settings.changed.connect(this.settingsUpdate, this);
        }
        this.settingsUpdate();
    }
    async dataURISrc(url, format = FontFormat.woff2) {
        return await dataURISrc(url, format);
    }
    registerFontFace(options) {
        this._stylist.fonts.set(options.name, options);
        this.registerFontCommands(options);
    }
    getVarName(property, { kind }) {
        if (kind == null) {
            return null;
        }
        return CSS[kind][property];
    }
    getTextStyle(property, { kind, notebook }) {
        var _a;
        if (!notebook && !this.settings) {
            return null;
        }
        try {
            const styles = ((_a = notebook) === null || _a === void 0 ? void 0 : _a.model) ? notebook.model.metadata.get(PACKAGE_NAME).styles
                : this._settings.get('styles').composite;
            let varName = this.getVarName(property, { kind });
            if (styles != null) {
                const rootStyle = styles[ROOT];
                if (rootStyle == null) {
                    return null;
                }
                return rootStyle[varName];
            }
        }
        catch (err) {
            //
        }
        return null;
    }
    async setTextStyle(property, value, { kind, notebook }) {
        var _a, _b, _c;
        if (!notebook && !this.settings) {
            return;
        }
        let oldStyles = {};
        if ((_a = notebook) === null || _a === void 0 ? void 0 : _a.model) {
            try {
                oldStyles = notebook
                    ? notebook.model.metadata.get(PACKAGE_NAME).styles
                    : this._settings.get('styles').composite;
            }
            catch (err) {
                //
            }
        }
        let styles = JSON.parse(JSON.stringify(oldStyles || {}));
        let root = (styles[ROOT] = styles[ROOT] ? styles[ROOT] : {});
        let varName = this.getVarName(property, { kind });
        if (root) {
            if (value == null) {
                delete root[varName];
            }
            else {
                root[varName] = value;
            }
        }
        if (notebook) {
            let metadata = (((_b = notebook.model) === null || _b === void 0 ? void 0 : _b.metadata.get(PACKAGE_NAME)) ||
                {});
            metadata = JSON.parse(JSON.stringify(metadata));
            metadata.styles = styles;
            switch (property) {
                case 'font-family':
                    if (value != null) {
                        await this.embedFont(value, metadata);
                    }
                    break;
                default:
                    break;
            }
            this.cleanMetadata(metadata);
            (_c = notebook.model) === null || _c === void 0 ? void 0 : _c.metadata.set(PACKAGE_NAME, metadata);
        }
        else {
            if (!Object.keys(styles[ROOT] || {}).length) {
                delete styles[ROOT];
            }
            try {
                await this._settings.set('styles', styles);
            }
            catch (err) {
                console.warn(err);
            }
        }
    }
    cleanMetadata(metadata) {
        const rawStyle = JSON.stringify(metadata.styles, null, 2);
        const oldFonts = Object.keys(metadata.fonts || {});
        for (let fontFamily of oldFonts) {
            let pattern = `'${fontFamily}'`;
            if (rawStyle.indexOf(pattern) === -1) {
                if (metadata.fonts) {
                    delete metadata.fonts[fontFamily];
                }
                if (metadata.fontLicenses) {
                    delete metadata.fontLicenses[fontFamily];
                }
            }
        }
    }
    async embedFont(fontFamily, metadata) {
        if (fontFamily == null) {
            return;
        }
        const unquoted = fontFamily.replace(/(['"]?)(.*)\1/, '$2');
        const registered = this._stylist.fonts.get(unquoted);
        if (!registered) {
            return;
        }
        try {
            const faces = await registered.faces();
            const oldFaces = (metadata.fonts || {});
            const oldLicenses = (metadata.fontLicenses ||
                {});
            oldFaces[unquoted] = faces;
            oldLicenses[unquoted] = {
                spdx: registered.license.spdx,
                name: registered.license.name,
                text: await registered.license.text(),
                holders: registered.license.holders
            };
            metadata.fonts = oldFaces;
            metadata.fontLicenses = oldLicenses;
        }
        catch (err) {
            console.warn('error embedding font');
            console.warn(err);
        }
    }
    _onNotebooksChanged() {
        let styled = this._stylist.notebooks();
        this._notebooks.forEach(notebook => {
            if (styled.indexOf(notebook) === -1) {
                this._registerNotebook(notebook);
            }
        });
    }
    _registerNotebook(notebook) {
        var _a;
        this._stylist.registerNotebook(notebook, true);
        let watcher = this._notebookMetaWatcher(notebook);
        if ((_a = notebook) === null || _a === void 0 ? void 0 : _a.model) {
            notebook.model.metadata.changed.connect(watcher);
        }
        notebook.disposed.connect(this._onNotebookDisposed);
        watcher();
        this.hack();
    }
    _onNotebookDisposed(notebook) {
        this._stylist.registerNotebook(notebook, false);
    }
    _notebookMetaWatcher(_notebook) {
        return () => {
            this._notebooks.forEach(notebook => {
                if (notebook.id !== notebook.id || !notebook.model) {
                    return;
                }
                const meta = notebook.model.metadata.get(PACKAGE_NAME);
                if (meta) {
                    this._stylist.stylesheet(meta, notebook);
                }
            });
        };
    }
    fontSizeOptions() {
        return Array.from(Array(25).keys()).map(i => `${i + 8}px`);
    }
    fontSizeCommands(prefix) {
        return this.fontSizeOptions().map(px => `${prefix}:${px}`);
    }
    makeCommands() {
        [TextKind.code, TextKind.content].map(kind => {
            ['Increase', 'Decrease'].map((label, i) => {
                var _a;
                let command = `${CMD[kind].fontSize}:${label.toLowerCase()}`;
                this._commands.addCommand(command, {
                    label: `${label} Code Font Size`,
                    execute: async () => {
                        let oldSize = this.getTextStyle('font-size', { kind });
                        let cfs = parseInt((oldSize || '0').replace(/px$/, ''), 10) || 13;
                        try {
                            await this.setTextStyle('font-size', `${cfs + (i ? -1 : 1)}px`, {
                                kind
                            });
                        }
                        catch (err) {
                            console.warn(err);
                        }
                    },
                    isVisible: () => this.enabled
                });
                (_a = this._fontSizeMenus.get(kind)) === null || _a === void 0 ? void 0 : _a.addItem({ command });
                this._palette.addItem({ command, category: PALETTE[kind], rank: 0 });
            });
            ['line-height', 'font-size', 'font-family'].forEach((prop) => {
                const command = `${kind}-${prop}:-reset`;
                this._commands.addCommand(command, {
                    label: `Default ${kind[0].toUpperCase()}${kind.slice(1)} ${TEXT_LABELS[prop]}`,
                    execute: () => this.setTextStyle(prop, null, { kind }),
                    isVisible: () => this.enabled,
                    isToggled: () => this.getTextStyle(prop, { kind }) == null
                });
            });
            TEXT_OPTIONS['line-height'](this).map(lineHeight => {
                var _a;
                const command = `${CMD[kind].lineHeight}:${lineHeight}`;
                this._commands.addCommand(command, {
                    label: `${lineHeight}`,
                    isToggled: () => this.getTextStyle('line-height', { kind }) === lineHeight,
                    isVisible: () => this.enabled,
                    execute: () => this.setTextStyle('line-height', lineHeight, { kind })
                });
                (_a = this._lineHeightMenus.get(kind)) === null || _a === void 0 ? void 0 : _a.addItem({ command });
            });
            TEXT_OPTIONS['font-size'](this).map(px => {
                var _a;
                const command = `${CMD[kind].fontSize}:${px}`;
                this._commands.addCommand(command, {
                    label: `${px}`,
                    isToggled: () => this.getTextStyle('font-size', { kind }) === px,
                    isVisible: () => this.enabled,
                    execute: () => this.setTextStyle('font-size', px, { kind })
                });
                (_a = this._fontSizeMenus.get(kind)) === null || _a === void 0 ? void 0 : _a.addItem({ command });
            });
        });
        ['Enable', 'Disable'].map((label, i) => {
            const command = `custom-fonts:${label.toLowerCase()}`;
            this._commands.addCommand(command, {
                label: `${label} Custom Fonts`,
                isVisible: () => this.enabled === !!i,
                execute: async () => {
                    if (!this._settings) {
                        return;
                    }
                    try {
                        await this._settings.set('enabled', !i);
                    }
                    catch (err) {
                        console.warn(err);
                    }
                }
            });
            this._palette.addItem({ command, category: ALL_PALETTE });
        });
    }
    fontPropMenu(parent, kind, property) {
        let menu = new Menu({ commands: parent.commands });
        menu.title.label = TEXT_LABELS[property];
        menu.addItem({
            command: `${kind}-${property}:-reset`
        });
        menu.addItem({
            type: 'separator'
        });
        parent.addItem({ type: 'submenu', submenu: menu });
        return menu;
    }
    makeMenus(commands) {
        this._menu = new Menu({ commands });
        this._menu.title.label = 'Fonts';
        [TextKind.code, TextKind.content].map(kind => {
            const submenu = new Menu({ commands });
            submenu.title.label = kind[0].toUpperCase() + kind.slice(1);
            this._menu.addItem({ type: 'submenu', submenu });
            const family = this.fontPropMenu(submenu, kind, 'font-family');
            const height = this.fontPropMenu(submenu, kind, 'line-height');
            const size = this.fontPropMenu(submenu, kind, 'font-size');
            this._fontFamilyMenus.set(kind, family);
            this._lineHeightMenus.set(kind, height);
            this._fontSizeMenus.set(kind, size);
        });
        this._menu.addItem({
            command: CMD.editFonts,
            args: { global: true }
        });
        this._menu.addItem({
            command: CMD.customFonts.enable
        });
        this._menu.addItem({
            command: CMD.customFonts.disable
        });
    }
    settingsUpdate() {
        let meta = {
            styles: this._settings.get('styles').composite
        };
        if (this.enabled) {
            this._stylist.stylesheet(meta, void 0, true);
        }
        else {
            this._stylist.hack(false);
        }
    }
    registerFontCommands(options) {
        [TextKind.code, TextKind.content].forEach(kind => {
            var _a;
            const slug = options.name.replace(/[^a-z\d]/gi, '-').toLowerCase();
            let command = `${CMD[kind].fontFamily}:${slug}`;
            this._commands.addCommand(command, {
                label: options.name,
                isToggled: () => {
                    let cff = this.getTextStyle('font-family', { kind });
                    return `${cff}`.indexOf(`'${options.name}'`) > -1;
                },
                isVisible: () => this.enabled,
                execute: async () => {
                    try {
                        await this.setTextStyle('font-family', `'${options.name}'`, {
                            kind
                        });
                    }
                    catch (err) {
                        console.warn(err);
                    }
                }
            });
            (_a = this._fontFamilyMenus.get(kind)) === null || _a === void 0 ? void 0 : _a.addItem({ command });
            this._palette.addItem({ command, category: PALETTE[kind] });
        });
    }
    requestLicensePane(font) {
        this.licensePaneRequested.emit(font);
    }
    hack() {
        this._stylist.hack();
        this._ready.resolve(void 0);
    }
}
//# sourceMappingURL=manager.js.map