Release 1.2.1 (#573)

* Fixed iOS related display issues (#570)
* Fixed some scaling issue (#564)

Author: Danielku15

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@coderline/alphatab",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "alphaTab is a music notation and guitar tablature rendering library",
   "keywords": [
     "guitar",

package.json

@@ -2,15 +2,15 @@
   <PropertyGroup>
     <DebugType>portable</DebugType>
     <DebugSymbols>true</DebugSymbols>
-    <Version>1.1.0</Version>
-    <AssemblyVersion>1.1.0.0</AssemblyVersion>
+    <Version>1.2.1</Version>
+    <AssemblyVersion>1.2.1.0</AssemblyVersion>
     <FileVersion>$(AssemblyVersion)</FileVersion>
     <Authors>Danielku15</Authors>
     <Company>CoderLine</Company>
     <Product>AlphaTab</Product>
     <NeutralLanguage>en</NeutralLanguage>
     <Description>alphaTab is a cross platform music notation and guitar tablature rendering library.</Description>
-    <Copyright>Copyright © 2020, Daniel Kuschny and Contributors</Copyright>
+    <Copyright>Copyright © 2021, Daniel Kuschny and Contributors</Copyright>
     <PackageLicenseExpression>MPL-2.0</PackageLicenseExpression>
     <PackageProjectUrl>https://www.alphatab.net</PackageProjectUrl>
     <RepositoryUrl>https://github.com/CoderLine/alphaTab</RepositoryUrl>

src.csharp/Directory.Build.props

@@ -54,6 +54,7 @@ import { Logger } from '@src/Logger';
 import { LeftHandTapEffectInfo } from './rendering/effects/LeftHandTapEffectInfo';
 import { CapellaImporter } from './importer/CapellaImporter';
 import { ResizeObserverPolyfill } from './platform/javascript/ResizeObserverPolyfill';
+import { IntersectionObserverPolyfill } from './platform/javascript/IntersectionObserverPolyfill';
 
 export class LayoutEngineFactory {
     public readonly vertical: boolean;
@@ -124,6 +125,9 @@ export class Environment {
                 vertical-align: top;
                 overflow: visible;
             }
+            .at-surface-svg text {
+                dominant-baseline: central;
+            }             
             .at {
                  font-family: 'alphaTab';
                  speak: none;
@@ -456,11 +460,16 @@ export class Environment {
             if(!('ResizeObserver' in globalThis)) {
                 (globalThis as any).ResizeObserver = ResizeObserverPolyfill;
             }
+            // IntersectionObserver API does not on older iOS versions
+            // so we better add a polyfill for it
+            if (!('IntersectionObserver' in Environment.globalThis)) {
+                (Environment.globalThis as any).IntersectionObserver = IntersectionObserverPolyfill;
+            }            
         } else {
             AlphaTabWebWorker.init();
             AlphaSynthWebWorker.init();
         }
     }
 }
 
-Environment.platformInit();
+Environment.platformInit();

src/Environment.ts

@@ -0,0 +1,64 @@
+/**
+ * A polyfill of the InsersectionObserver
+ * @target web
+ */
+export class IntersectionObserverPolyfill {
+    private _callback: IntersectionObserverCallback;
+    private _elements: HTMLElement[] = [];
+
+    public constructor(callback: IntersectionObserverCallback) {
+        let timer: any = null;
+        const oldCheck = this._check.bind(this);
+        this._check = () => {
+            if (!timer) {
+                timer = setTimeout(() => {
+                    oldCheck();
+                    timer = null;
+                }, 100);
+            }
+        };
+
+        this._callback = callback;
+
+        window.addEventListener('resize', this._check, true);
+        document.addEventListener('scroll', this._check, true);
+    }
+
+    public observe(target: HTMLElement) {
+        if (this._elements.indexOf(target) >= 0) {
+            return;
+        }
+        this._elements.push(target);
+        this._check();
+    }
+
+    public unobserve(target: HTMLElement) {
+        this._elements = this._elements.filter(item => {
+            return item != target;
+        });
+    };
+
+    private _check() {
+        const entries: IntersectionObserverEntry[] = [];
+        this._elements.forEach(element => {
+            const rect = element.getBoundingClientRect();
+            const isVisible = (
+                rect.top + rect.height >= 0 &&
+                rect.top <= window.innerHeight &&
+                rect.left + rect.width >= 0 &&
+                rect.left <= window.innerWidth
+            );
+
+            if (isVisible) {
+                entries.push({
+                    target: element,
+                    isIntersecting: true
+                } as any);
+            }
+        });
+
+        if (entries.length) {
+            this._callback(entries, this as any);
+        }
+    }
+}

src/platform/javascript/IntersectionObserverPolyfill.ts

@@ -23,7 +23,7 @@ export abstract class SvgCanvas implements ICanvas {
 
     public beginRender(width: number, height: number): void {
         this.buffer = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="${width | 0}px" height="${height | 0
-            }px" class="at-surface-svg" style="dominant-baseline: central;">\n`;
+            }px" class="at-surface-svg">\n`;
         this._currentPath = '';
         this._currentPathIsEmpty = true;
         this.textBaseline = TextBaseline.Top;

src/platform/svg/SvgCanvas.ts

@@ -23,23 +23,24 @@ export class ChordDiagramGlyph extends EffectGlyph {
 
     public doLayout(): void {
         super.doLayout();
+        const scale = this.scale;
         let res: RenderingResources = this.renderer.resources;
-        this._textRow = res.effectFont.size * 1.5;
-        this._fretRow = res.effectFont.size * 1.5;
+        this._textRow = res.effectFont.size * 1.5 * scale;
+        this._fretRow = res.effectFont.size * 1.5 * scale;
         if (this._chord.firstFret > 1) {
-            this._firstFretSpacing = ChordDiagramGlyph.FretSpacing * this.scale;
+            this._firstFretSpacing = ChordDiagramGlyph.FretSpacing * scale;
         } else {
             this._firstFretSpacing = 0;
         }
         this.height =
             this._textRow +
             this._fretRow +
-            (ChordDiagramGlyph.Frets - 1) * ChordDiagramGlyph.FretSpacing * this.scale +
-            2 * ChordDiagramGlyph.Padding;
+            (ChordDiagramGlyph.Frets - 1) * ChordDiagramGlyph.FretSpacing * scale +
+            2 * ChordDiagramGlyph.Padding * scale;
         this.width =
             this._firstFretSpacing +
-            (this._chord.staff.tuning.length - 1) * ChordDiagramGlyph.StringSpacing * this.scale +
-            2 * ChordDiagramGlyph.Padding;
+            (this._chord.staff.tuning.length - 1) * ChordDiagramGlyph.StringSpacing * scale +
+            2 * ChordDiagramGlyph.Padding * scale;
     }
 
     public paint(cx: number, cy: number, canvas: ICanvas): void {
@@ -114,14 +115,14 @@ export class ChordDiagramGlyph extends EffectGlyph {
                         info[1] = guitarString;
                     }
                 }
-                let y: number = cy + fret * fretSpacing + fretSpacing / 2 + 0.5;
+                let y: number = cy + fret * fretSpacing + fretSpacing / 2 + 0.5 * this.scale;
                 let x: number = cx + (this._chord.strings.length - guitarString - 1) * stringSpacing;
                 canvas.fillCircle(x, y, circleRadius);
             }
         }
 
         for(const [fret, strings] of barreLookup) {
-            let y: number = cy + fret * fretSpacing + fretSpacing / 2 + this.scale;
+            let y: number = cy + fret * fretSpacing + fretSpacing / 2 + 0.5 * this.scale;
             let xLeft: number = cx + (this._chord.strings.length - strings[1] - 1) * stringSpacing;
             let xRight: number = cx + (this._chord.strings.length - strings[0] - 1) * stringSpacing;
             canvas.fillRect(xLeft, y - circleRadius, xRight - xLeft, circleRadius * 2);

src/rendering/glyphs/ChordDiagramGlyph.ts

@@ -26,7 +26,8 @@ export class VoiceContainerGlyph extends GlyphGroup {
     }
 
     public scaleToWidth(width: number): void {
-        let force: number = this.renderer.layoutingInfo.spaceToForce(width);
+        const scale = this.renderer.scale;
+        let force: number = this.renderer.layoutingInfo.spaceToForce(width / scale);
         this.scaleToForce(force);
     }