AG-11385 Legend proxy DOM elements

packages/ag-charts-community/src/chart/chartContext.ts

@@ -92,7 +92,7 @@ export class ChartContext implements ModuleContext {
         this.gestureDetector = new GestureDetector(this.domManager);
         this.layoutService = new LayoutService();
         this.updateService = new UpdateService(updateCallback);
-        this.proxyInteractionService = new ProxyInteractionService(this.updateService, this.focusIndicator);
+        this.proxyInteractionService = new ProxyInteractionService(this.focusIndicator);
         this.seriesStateManager = new SeriesStateManager();
         this.callbackCache = new CallbackCache();
 
@@ -107,7 +107,6 @@ export class ChartContext implements ModuleContext {
     destroy() {
         // chart.ts handles the destruction of the scene and zoomManager.
         this.tooltipManager.destroy();
-        this.proxyInteractionService.destroy();
         this.regionManager.destroy();
         this.focusIndicator.destroy();
         this.keyNavManager.destroy();

packages/ag-charts-community/src/chart/dom/proxyInteractionService.ts

@@ -1,7 +1,6 @@
 import type { BBoxProvider, BBoxValues } from '../../util/bboxinterface';
 import { Debug } from '../../util/debug';
-import { createElement, setElementBBox } from '../../util/dom';
-import type { UpdateService } from '../updateService';
+import { createElement } from '../../util/dom';
 import type { FocusIndicator } from './focusIndicator';
 
 type ProxyType = 'button';
@@ -11,46 +10,23 @@ type ProxyParams<T extends ProxyType> = {
     id: string;
     textContext: string;
     parent: HTMLElement;
-    bboxprovider: BBoxProvider<BBoxValues>;
+    focusable: BBoxProvider<BBoxValues>;
     onclick?: (ev: MouseEvent) => void;
 };
 
 type ProxyReturnMap = {
     button: HTMLButtonElement;
 };
 
-type ProxyNode = {
-    element: HTMLElement;
-    bboxprovider: BBoxProvider<BBoxValues>;
-};
-
 export class ProxyInteractionService {
     // This debug option make the proxies button partially transparent instead of fully transparent.
     // To enabled this option, set window.agChartsDebug = ['showDOMProxies'].
     private readonly debugShowDOMProxies: boolean = Debug.check('showDOMProxies');
 
-    private readonly nodes: ProxyNode[] = [];
-    private readonly destroyFns: (() => void)[];
-
-    constructor(
-        updateService: UpdateService,
-        private readonly focusIndicator: FocusIndicator
-    ) {
-        this.destroyFns = [updateService.addListener('update-complete', () => this.update())];
-    }
-
-    public destroy() {
-        this.destroyFns.forEach((d) => d());
-    }
-
-    private update() {
-        for (const { element, bboxprovider } of this.nodes) {
-            setElementBBox(element, bboxprovider.getCachedBBox());
-        }
-    }
+    constructor(private readonly focusIndicator: FocusIndicator) {}
 
     createProxyElement<T extends ProxyType>(params: ProxyParams<T>): ProxyReturnMap[T] | undefined {
-        const { type, id, parent, bboxprovider, textContext, onclick } = params;
+        const { type, id, parent, focusable, textContext, onclick } = params;
         if (type === 'button') {
             const newButton = createElement('button');
 
@@ -60,7 +36,7 @@ export class ProxyInteractionService {
             newButton.style.opacity = this.debugShowDOMProxies ? '0.25' : '0';
             newButton.addEventListener('focus', (_event: FocusEvent): any => {
                 newButton.style.setProperty('pointerEvents', null);
-                this.focusIndicator.updateBBox(bboxprovider.getCachedBBox());
+                this.focusIndicator.updateBBox(focusable.getCachedBBox());
             });
             newButton.addEventListener('blur', (_event: FocusEvent): any => {
                 newButton.style.pointerEvents = 'none';
@@ -70,7 +46,6 @@ export class ProxyInteractionService {
                 newButton.addEventListener('click', onclick);
             }
 
-            this.nodes.push({ element: newButton, bboxprovider });
             parent.appendChild(newButton);
             return newButton;
         }

packages/ag-charts-community/src/chart/interaction/regionManager.ts

@@ -17,7 +17,7 @@ export type RegionName =
     | 'series'
     | 'toolbar';
 
-const REGION_TAB_ORDERING: RegionName[] = ['series', 'navigator', 'legend'];
+const REGION_TAB_ORDERING: RegionName[] = ['series', 'navigator'];
 
 // This type-map allows the compiler to automatically figure out the parameter type of handlers
 // specifies through the `addListener` method (see the `makeObserver` method).