@coderline/alphatab 1.6.0-alpha.1416 → 1.6.0-alpha.1418

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.6.0-alpha.1416 (develop, build 1416)
+ * alphaTab v1.6.0-alpha.1418 (develop, build 1418)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -29076,7 +29076,7 @@
             }
             switch (typeof v) {
                 case 'undefined':
-                    return null;
+                    return undefined;
                 case 'object': {
                     const m = v;
                     const families = m.get('families');
@@ -29156,10 +29156,13 @@
                     return Font.withFamilyList(families, fontSize, fontStyle, fontWeight);
                 }
                 default:
-                    return null;
+                    return undefined;
             }
         }
         static toJson(font) {
+            if (!font) {
+                return undefined;
+            }
             const o = new Map();
             o.set('families', font.families);
             o.set('size', font.size);
@@ -30166,6 +30169,14 @@
             /*@target web*/
             o.set("fontdirectory", obj.fontDirectory);
             /*@target web*/
+            if (obj.smuflFontSources !== null) {
+                const m = new Map();
+                o.set("smuflfontsources", m);
+                for (const [k, v] of obj.smuflFontSources) {
+                    m.set(k.toString(), v);
+                }
+            }
+            /*@target web*/
             o.set("file", obj.file);
             /*@target web*/
             o.set("tex", obj.tex);
@@ -30189,6 +30200,13 @@
                     obj.fontDirectory = v;
                     return true;
                 /*@target web*/
+                case "smuflfontsources":
+                    obj.smuflFontSources = new Map();
+                    JsonHelper.forEach(v, (v, k) => {
+                        obj.smuflFontSources.set(JsonHelper.parseEnum(k, exports.FontFileFormat), v);
+                    });
+                    return true;
+                /*@target web*/
                 case "file":
                     obj.file = v;
                     return true;
@@ -30232,6 +30250,7 @@
                 return null;
             }
             const o = new Map();
+            o.set("smuflfont", Font.toJson(obj.smuflFont));
             o.set("copyrightfont", Font.toJson(obj.copyrightFont));
             o.set("titlefont", Font.toJson(obj.titleFont));
             o.set("subtitlefont", Font.toJson(obj.subTitleFont));
@@ -30258,6 +30277,9 @@
         }
         static setProperty(obj, property, v) {
             switch (property) {
+                case "smuflfont":
+                    obj.smuflFont = Font.fromJson(v);
+                    return true;
                 case "copyrightfont":
                     obj.copyrightFont = Font.fromJson(v);
                     return true;
@@ -34235,15 +34257,6 @@
             this._color = new Color(0, 0, 0, 0xff);
             this._font = new Font('Arial', 10, FontStyle.Plain);
             this._lineWidth = 0;
-            const fontElement = document.createElement('span');
-            fontElement.classList.add('at');
-            document.body.appendChild(fontElement);
-            const style = window.getComputedStyle(fontElement);
-            let family = style.fontFamily;
-            if (family.startsWith('"') || family.startsWith("'")) {
-                family = family.substr(1, family.length - 2);
-            }
-            this._musicFont = new Font(family, Number.parseFloat(style.fontSize), FontStyle.Plain);
             this._measureCanvas = document.createElement('canvas');
             this._measureCanvas.width = 10;
             this._measureCanvas.height = 10;
@@ -34258,6 +34271,7 @@
             return null;
         }
         beginRender(width, height) {
+            this._musicFont = this.settings.display.resources.smuflFont;
             const scale = this.settings.display.scale;
             this._canvas = document.createElement('canvas');
             this._canvas.width = (width * Environment.HighDpiFactor) | 0;
@@ -43849,10 +43863,6 @@
             return this.areAllFontsLoaded();
         }
         areAllFontsLoaded() {
-            Environment.bravuraFontChecker.checkForFontAvailability();
-            if (!Environment.bravuraFontChecker.isFontLoaded) {
-                return false;
-            }
             let isAnyNotLoaded = false;
             for (const checker of this._fontCheckers.values()) {
                 if (!checker.isFontLoaded) {
@@ -43889,7 +43899,6 @@
             rootElement.classList.add('alphaTab');
             this.rootContainer = new HtmlElementContainer(rootElement);
             this.areWorkersSupported = 'Worker' in window;
-            Environment.bravuraFontChecker.fontLoaded.on(this.onFontLoaded.bind(this));
             this._intersectionObserver = new IntersectionObserver(this.onElementVisibilityChanged.bind(this), {
                 threshold: [0, 0.01, 1]
             });
@@ -43957,7 +43966,7 @@
                 this._contents = element.element.innerHTML;
                 element.element.innerHTML = '';
             }
-            this.createStyleElement(settings);
+            this.createStyleElements(settings);
             this._file = settings.core.file;
         }
         setupFontCheckers(settings) {
@@ -43983,10 +43992,15 @@
         }
         destroy() {
             this.rootContainer.element.innerHTML = '';
+            const webFont = this._webFont;
+            webFont.usages--;
+            if (webFont.usages <= 0) {
+                webFont.element.remove();
+            }
         }
         createCanvasElement() {
             const canvasElement = document.createElement('div');
-            canvasElement.className = 'at-surface';
+            canvasElement.classList.add('at-surface', `at${this._webFont.fontSuffix}`);
             canvasElement.style.fontSize = '0';
             canvasElement.style.overflow = 'hidden';
             canvasElement.style.lineHeight = '0';
@@ -44084,9 +44098,132 @@
                 initialRender();
             }
         }
-        createStyleElement(settings) {
-            const elementDocument = this._api.container.element.ownerDocument;
-            Environment.createStyleElement(elementDocument, settings.core.fontDirectory);
+        createStyleElements(settings) {
+            const root = this._api.container.element.ownerDocument;
+            BrowserUiFacade.createSharedStyleElement(root);
+            // SmuFl Font Specific style
+            const smuflFontSources = settings.core.smuflFontSources ?? CoreSettings.buildDefaultSmuflFontSources(settings.core.fontDirectory);
+            // create a simple unique hash for the font source definition
+            // as data urls might be used we don't want to just use the plain strings.
+            const hash = BrowserUiFacade.cyrb53(smuflFontSources.values());
+            // reuse existing style if available
+            const registeredWebFonts = BrowserUiFacade._registeredWebFonts;
+            if (registeredWebFonts.has(hash)) {
+                const webFont = registeredWebFonts.get(hash);
+                webFont.usages++;
+                webFont.checker.fontLoaded.on(this.onFontLoaded.bind(this));
+                this._webFont = webFont;
+                return;
+            }
+            const fontSuffix = registeredWebFonts.size === 0 ? '' : String(registeredWebFonts.size);
+            const familyName = `alphaTab${fontSuffix}`;
+            const src = Array.from(smuflFontSources.entries())
+                .map(e => `url(${JSON.stringify(e[1])}) format('${BrowserUiFacade.cssFormat(e[0])}')`)
+                .join(',');
+            const css = `
+            @font-face {
+                font-display: block;
+                font-family: '${familyName}';
+                src: ${src};
+                font-weight: normal;
+                font-style: normal;
+            }
+            .at-surface.at${fontSuffix} .at {
+                font-family: '${familyName}';
+                speak: none;
+                font-style: normal;
+                font-weight: normal;
+                font-variant: normal;
+                text-transform: none;
+                line-height: 1;
+                line-height: 1;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-size: ${Environment.MusicFontSize}px;
+                overflow: visible !important;
+            }`;
+            const styleElement = root.createElement('style');
+            styleElement.id = `alphaTabStyle${fontSuffix}`;
+            styleElement.innerHTML = css;
+            root.getElementsByTagName('head').item(0).appendChild(styleElement);
+            const checker = new FontLoadingChecker([familyName]);
+            checker.fontLoaded.on(this.onFontLoaded.bind(this));
+            this._fontCheckers.set(familyName, checker);
+            checker.checkForFontAvailability();
+            settings.display.resources.smuflFont = new Font(familyName, Environment.MusicFontSize, FontStyle.Plain, FontWeight.Regular);
+            const webFont = {
+                element: styleElement,
+                fontSuffix,
+                usages: 1,
+                checker
+            };
+            registeredWebFonts.set(hash, webFont);
+            this._webFont = webFont;
+        }
+        static cssFormat(format) {
+            switch (format) {
+                case exports.FontFileFormat.EmbeddedOpenType:
+                    return 'embedded-opentype';
+                case exports.FontFileFormat.Woff:
+                    return 'woff';
+                case exports.FontFileFormat.Woff2:
+                    return 'woff2';
+                case exports.FontFileFormat.OpenType:
+                    return 'opentype';
+                case exports.FontFileFormat.TrueType:
+                    return 'truetype';
+                case exports.FontFileFormat.Svg:
+                    return 'svg';
+            }
+        }
+        /**
+         * cyrb53 (c) 2018 bryc (github.com/bryc)
+         * License: Public domain (or MIT if needed). Attribution appreciated.
+         * A fast and simple 53-bit string hash function with decent collision resistance.
+         * Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity
+         * @param str
+         * @param seed
+         * @returns
+         */
+        static cyrb53(strings, seed = 0) {
+            let h1 = 0xdeadbeef ^ seed;
+            let h2 = 0x41c6ce57 ^ seed;
+            for (const str of strings) {
+                for (let i = 0; i < str.length; i++) {
+                    const ch = str.charCodeAt(i);
+                    h1 = Math.imul(h1 ^ ch, 2654435761);
+                    h2 = Math.imul(h2 ^ ch, 1597334677);
+                }
+            }
+            h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+            h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+            h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+            h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+            return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+        }
+        /**
+         * Creates the default CSS styles used across all alphaTab instances.
+         * @target web
+         * @internal
+         */
+        static createSharedStyleElement(root) {
+            let styleElement = root.getElementById('alphaTabStyle');
+            if (!styleElement) {
+                styleElement = document.createElement('style');
+                styleElement.id = 'alphaTabStyleShared';
+                const css = `
+                .at-surface * {
+                    cursor: default;
+                    vertical-align: top;
+                    overflow: visible;
+                }
+                .at-surface-svg text {
+                    dominant-baseline: central;
+                    white-space:pre;
+                }`;
+                styleElement.innerHTML = css;
+                document.getElementsByTagName('head').item(0).appendChild(styleElement);
+            }
         }
         parseTracks(tracksData) {
             if (!tracksData) {
@@ -44468,6 +44605,7 @@
             return new BackingTrackPlayer(new AudioElementBackingTrackSynthOutput(), this._api.settings.player.bufferTimeInMilliseconds);
         }
     }
+    BrowserUiFacade._registeredWebFonts = new Map();
 
     /**
      * Represents the progress of any data being loaded.
@@ -60725,9 +60863,9 @@
             print(`build date: ${VersionInfo.date}`);
         }
     }
-    VersionInfo.version = '1.6.0-alpha.1416';
-    VersionInfo.date = '2025-05-19T16:41:23.634Z';
-    VersionInfo.commit = '4aff072e1be5292482c3d77f434dd1555b6cbb8d';
+    VersionInfo.version = '1.6.0-alpha.1418';
+    VersionInfo.date = '2025-05-21T02:08:19.492Z';
+    VersionInfo.commit = '1f6342282295a9544ebc36ddd38d73d220d2caab';
 
     /**
      * A factory for custom layout engines.
@@ -60759,59 +60897,6 @@
      * @partial
      */
     class Environment {
-        /**
-         * @target web
-         * @internal
-         */
-        static createStyleElement(elementDocument, fontDirectory) {
-            let styleElement = elementDocument.getElementById('alphaTabStyle');
-            if (!styleElement) {
-                if (!fontDirectory) {
-                    Logger.error('AlphaTab', 'Font directory could not be detected, cannot create style element');
-                    return;
-                }
-                styleElement = elementDocument.createElement('style');
-                styleElement.id = 'alphaTabStyle';
-                const css = `
-            @font-face {
-                font-display: block;
-                font-family: 'alphaTab';
-                 src: url('${fontDirectory}Bravura.eot');
-                 src: url('${fontDirectory}Bravura.eot?#iefix') format('embedded-opentype')
-                      , url('${fontDirectory}Bravura.woff') format('woff')
-                      , url('${fontDirectory}Bravura.otf') format('opentype')
-                      , url('${fontDirectory}Bravura.svg#Bravura') format('svg');
-                 font-weight: normal;
-                 font-style: normal;
-            }
-            .at-surface * {
-                cursor: default;
-                vertical-align: top;
-                overflow: visible;
-            }
-            .at-surface-svg text {
-                dominant-baseline: central;
-                white-space:pre;
-            }
-            .at {
-                 font-family: 'alphaTab';
-                 speak: none;
-                 font-style: normal;
-                 font-weight: normal;
-                 font-variant: normal;
-                 text-transform: none;
-                 line-height: 1;
-                 line-height: 1;
-                 -webkit-font-smoothing: antialiased;
-                 -moz-osx-font-smoothing: grayscale;
-                 font-size: ${Environment.MusicFontSize}px;
-                 overflow: visible !important;
-            }`;
-                styleElement.innerHTML = css;
-                elementDocument.getElementsByTagName('head').item(0).appendChild(styleElement);
-                Environment.bravuraFontChecker.checkForFontAvailability();
-            }
-        }
         /**
          * @target web
          * @internal
@@ -60887,7 +60972,9 @@
             catch (e) {
             }
             // normal browser include as <script>
-            if ('document' in Environment.globalThis && document.currentScript) {
+            if ('document' in Environment.globalThis &&
+                document.currentScript &&
+                document.currentScript instanceof HTMLScriptElement) {
                 return document.currentScript.src;
             }
             return null;
@@ -61365,11 +61452,6 @@
      * @target web
      */
     Environment.fontDirectory = Environment.detectFontDirectory();
-    /**
-     * @target web
-     * @internal
-     */
-    Environment.bravuraFontChecker = new FontLoadingChecker(['alphaTab']);
     Environment.renderEngines = Environment.createDefaultRenderEngines();
     /**
      * @internal
@@ -61380,12 +61462,58 @@
      */
     Environment.staveProfiles = Environment.createDefaultStaveProfiles();
 
+    /**
+     * Lists the known file formats for font files.
+     * @target web
+     */
+    exports.FontFileFormat = void 0;
+    (function (FontFileFormat) {
+        /**
+         * .eot
+         */
+        FontFileFormat[FontFileFormat["EmbeddedOpenType"] = 0] = "EmbeddedOpenType";
+        /**
+         * .woff
+         */
+        FontFileFormat[FontFileFormat["Woff"] = 1] = "Woff";
+        /**
+         * .woff2
+         */
+        FontFileFormat[FontFileFormat["Woff2"] = 2] = "Woff2";
+        /**
+         * .otf
+         */
+        FontFileFormat[FontFileFormat["OpenType"] = 3] = "OpenType";
+        /**
+         * .ttf
+         */
+        FontFileFormat[FontFileFormat["TrueType"] = 4] = "TrueType";
+        /**
+         * .svg
+         */
+        FontFileFormat[FontFileFormat["Svg"] = 5] = "Svg";
+    })(exports.FontFileFormat || (exports.FontFileFormat = {}));
     /**
      * All main settings of alphaTab controlling rather general aspects of its behavior.
      * @json
      * @json_declaration
      */
     class CoreSettings {
+        /**
+         * Builds the default SMuFL font sources for the usage with alphaTab in cases
+         * where no custom {@link smuflFontSources} are provided.
+         * @param fontDirectory The {@link fontDirectory} configured.
+         * @target web
+         */
+        static buildDefaultSmuflFontSources(fontDirectory) {
+            const map = new Map();
+            // WOFF, WOFF2 and OTF should cover all our platform needs
+            const prefix = fontDirectory ?? '';
+            map.set(exports.FontFileFormat.Woff2, `${prefix}Bravura.woff2`);
+            map.set(exports.FontFileFormat.Woff, `${prefix}Bravura.woff`);
+            map.set(exports.FontFileFormat.OpenType, `${prefix}Bravura.otf`);
+            return map;
+        }
         /**
          * @target web
          */
@@ -61411,12 +61539,27 @@
              * where the Web Font files of [Bravura](https://github.com/steinbergmedia/bravura) are. Normally alphaTab expects
              * them to be in a `font` subfolder beside the script file. If this is not the case, this setting must be used to configure the path.
              * Alternatively also a global variable `ALPHATAB_FONT` can be set on the page before initializing alphaTab.
+             *
+             * Use {@link smuflFontSources} for more flexible font configuration.
              * @defaultValue `"${AlphaTabScriptFolder}/font/"`
              * @category Core - JavaScript Specific
              * @target web
              * @since 0.9.6
              */
             this.fontDirectory = null;
+            /**
+             * Defines the URLs from which to load the SMuFL compliant font files.
+             * @remarks
+             * These sources will be used to load and register the webfonts on the page so
+             * they are available for rendering the music sheet. The sources can be set to any
+             * CSS compatible URL which can be passed into `url()`.
+             * See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#url
+             * @defaultValue Bravura files located at {@link fontDirectory} .
+             * @category Core - JavaScript Specific
+             * @target web
+             * @since 1.6.0
+             */
+            this.smuflFontSources = null;
             /**
              * The full URL to the input file to be loaded.
              * @remarks