Added usage of resize observer if available. (#516)

Author: Danielku15

package-lock.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@types/jasmine": "^3.6.2",
+    "@types/resize-observer-browser": "^0.1.5",
     "concurrently": "^5.3.0",
     "cors": "^2.8.5",
     "fs-extra": "^9.0.1",

package.json

@@ -12,17 +12,6 @@ public ControlContainer(Control control)
         {
             Control = control;
 
-            Scroll = new DelegatedEventEmitter(
-                value =>
-                {
-                    if (Control is ScrollableControl scroll)
-                    {
-                        scroll.Scroll += (sender, args) => value();
-                    }
-                },
-                value => { }
-            );
-
             Resize = new DelegatedEventEmitter(
                 value => { Control.Resize += (sender, args) => value(); },
                 value => { }
@@ -127,7 +116,6 @@ public void Clear()
             Control.Controls.Clear();
         }
 
-        public IEventEmitter Scroll { get; set; }
         public IEventEmitter Resize { get; set; }
         public IEventEmitterOfT<IMouseEventArgs> MouseDown { get; set; }
         public IEventEmitterOfT<IMouseEventArgs> MouseMove { get; set; }

src.csharp/AlphaTab.Windows/WinForms/ControlContainer.cs

@@ -14,17 +14,6 @@ public FrameworkElementContainer(FrameworkElement control)
         {
             Control = control;
 
-            Scroll = new DelegatedEventEmitter(
-                value =>
-                {
-                    if (Control is ScrollViewer scroll)
-                    {
-                        scroll.ScrollChanged += (sender, args) => value();
-                    }
-                },
-                value => { }
-            );
-
             Resize = new DelegatedEventEmitter(
                 value => { Control.SizeChanged += (sender, args) => value(); },
                 value => { }
@@ -153,7 +142,6 @@ public void Clear()
             }
         }
 
-        public IEventEmitter Scroll { get; set; }
         public IEventEmitter Resize { get; set; }
         public IEventEmitterOfT<IMouseEventArgs> MouseDown { get; set; }
         public IEventEmitterOfT<IMouseEventArgs> MouseMove { get; set; }

src.csharp/AlphaTab.Windows/Wpf/FrameworkElementContainer.cs

@@ -53,6 +53,7 @@ import { FontLoadingChecker } from '@src/util/FontLoadingChecker';
 import { Logger } from '@src/Logger';
 import { LeftHandTapEffectInfo } from './rendering/effects/LeftHandTapEffectInfo';
 import { CapellaImporter } from './importer/CapellaImporter';
+import { ResizeObserverPolyfill } from './platform/javascript/ResizeObserverPolyfill';
 
 export class LayoutEngineFactory {
     public readonly vertical: boolean;
@@ -450,6 +451,11 @@ export class Environment {
         Environment.registerJQueryPlugin();
         if (!Environment.isRunningInWorker) {
             Environment.HighDpiFactor = window.devicePixelRatio;
+            // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
+            // so we better add a polyfill for it 
+            if(!('ResizeObserver' in globalThis)) {
+                (globalThis as any).ResizeObserver = ResizeObserverPolyfill;
+            }
         } else {
             AlphaTabWebWorker.init();
             AlphaSynthWebWorker.init();

src/Environment.ts

@@ -63,11 +63,6 @@ export interface IContainer {
      */
     clear(): void;
 
-    /**
-     * This event occurs when a scroll on the control happened.
-     */
-    scroll: IEventEmitter;
-
     /**
      * This event occurs when the control was resized.
      */

src/platform/IContainer.ts

@@ -2,11 +2,23 @@ import { IEventEmitter, IEventEmitterOfT } from '@src/EventEmitter';
 import { IContainer } from '@src/platform/IContainer';
 import { IMouseEventArgs } from '@src/platform/IMouseEventArgs';
 import { BrowserMouseEventArgs } from '@src/platform/javascript/BrowserMouseEventArgs';
+import { Lazy } from '@src/util/Lazy';
 
 /**
  * @target web
  */
 export class HtmlElementContainer implements IContainer {
+    private static resizeObserver: Lazy<ResizeObserver> = new Lazy<ResizeObserver>(() => new ResizeObserver((entries) => {
+        for (const e of entries) {
+            let evt = new CustomEvent('resize', {
+                detail: e
+            });
+            e.target.dispatchEvent(evt);
+        }
+    }));
+
+    private _resizeListeners: number = 0;
+
     public get top(): number {
         return parseFloat(this.element.style.top);
     }
@@ -113,21 +125,29 @@ export class HtmlElementContainer implements IContainer {
             }
         };
 
-        this.scroll = {
-            on: (value: any) => {
-                window.addEventListener('scroll', value, true);
-            },
-            off: (value: any) => {
-                window.removeEventListener('scroll', value, true);
-            }
-        };
-
         this.resize = {
             on: (value: any) => {
-                window.addEventListener('resize', value, true);
+                if (this._resizeListeners === 0) {
+                    HtmlElementContainer.resizeObserver.value.observe(this.element);
+                }
+                this.element.addEventListener(
+                    'resize',
+                    value,
+                    true
+                );
+                this._resizeListeners++;
             },
             off: (value: any) => {
-                window.removeEventListener('resize', value, true);
+                this.element.removeEventListener(
+                    'resize',
+                    value,
+                    true
+                );
+                this._resizeListeners--;
+                if (this._resizeListeners <= 0) {
+                    this._resizeListeners = 0;
+                    HtmlElementContainer.resizeObserver.value.unobserve(this.element);
+                }
             }
         };
     }
@@ -142,11 +162,6 @@ export class HtmlElementContainer implements IContainer {
         this.element.style.left = x + 'px';
     }
 
-    /**
-     * This event occurs when a scroll on the control happened.
-     */
-    public scroll: IEventEmitter;
-
     /**
      * This event occurs when the control was resized.
      */

src/platform/javascript/HtmlElementContainer.ts

@@ -0,0 +1,41 @@
+/**
+ * A very basic polyfill of the ResizeObserver which triggers 
+ * a the callback on window resize for all registered targets.
+ * @target web
+ */
+export class ResizeObserverPolyfill {
+    private _callback: ResizeObserverCallback;
+    private _targets = new Set<Element>();
+
+    public constructor(callback: ResizeObserverCallback) {
+        this._callback = callback;
+        window.addEventListener('resize', this.onWindowResize.bind(this), false);
+    }
+
+    public observe(target: Element) {
+        this._targets.add(target);
+    }
+
+    public unobserve(target: Element) {
+        this._targets.delete(target);
+    }
+
+    public disconnect() {
+        this._targets.clear();
+    }
+
+
+    private onWindowResize() {
+        const entries: ResizeObserverEntry[] = [];
+        for (const t of this._targets) {
+            entries.push({
+                target: t,
+                // not used by alphaTab
+                contentRect: undefined!,
+                borderBoxSize: undefined!,
+                contentBoxSize: []
+            });
+        }
+        this._callback(entries, this);
+    }
+}