diff --git a/packages/geoview-core/src/api/plugin/footer-plugin.ts b/packages/geoview-core/src/api/plugin/footer-plugin.ts index 52e87324428..6e63a5a0863 100644 --- a/packages/geoview-core/src/api/plugin/footer-plugin.ts +++ b/packages/geoview-core/src/api/plugin/footer-plugin.ts @@ -1,5 +1,6 @@ import { TypeTabs } from '@/ui/tabs/tabs'; import { AbstractPlugin } from './abstract-plugin'; +import { logger } from '@/core/utils/logger'; /** ****************************************************************************************************************************** * Footer Plugin abstract class. @@ -31,6 +32,9 @@ export abstract class FooterPlugin extends AbstractPlugin { * Called when a footer plugin is being added */ onAdd(): void { + // Log + // No need to log, parent class does it well already via added() function. + // Set value to length of tabs(?) this.value = this.map()?.footerTabs.tabs.length; @@ -45,7 +49,22 @@ export abstract class FooterPlugin extends AbstractPlugin { * Called when a footer plugin is being removed */ onRemove(): void { + // Log + // No need to log, parent class does it well already via removed() function. + // Remove the footer tab if (this.value) this.map()?.footerTabs.removeFooterTab(this.footerProps!.id); } + + /** + * Called when a footer plugin has been selected in the tabs + */ + onSelected(): void { + // Log + logger.logTraceCore('footer-plugin.onSelected'); + + // TODO: Refactor - Move 'onSelected' in AbstractPlugin class so that AppBar can eventually benefit as well? + + // Nothing else here.. but inherited FooterPlugins might override this method to do stuff when they are selected! + } } diff --git a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx index a2beddf4028..9aabbd0e198 100644 --- a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx +++ b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx @@ -132,6 +132,9 @@ export function FooterTabs(): JSX.Element | null { */ const addTab = useCallback( (payload: FooterTabPayload) => { + // Log + logger.logTraceUseCallback('FOOTER-TABS - defaultFooterTabs', defaultFooterTabs); + const idx = defaultFooterTabs.findIndex((tab) => tab.id === payload.tab.id); if (idx !== -1) { defaultFooterTabs[idx].content = payload.tab.content; @@ -214,6 +217,25 @@ export function FooterTabs(): JSX.Element | null { setIsCollapsed(!isCollapsed); }; + /** + * Handles when the selected tab changes + * @param tab The newly selected tab + */ + const handleSelectedTabChanged = (tab: TypeTabs) => { + // If clicked on a tab with a plugin + if (api.maps[mapId].plugins[tab.id]) { + // Get the plugin + const theSelectedPlugin = api.maps[mapId].plugins[tab.id]; + + // A bit hacky, but not much other choice for now... + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if (typeof (theSelectedPlugin as any).onSelected === 'function') { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (theSelectedPlugin as any).onSelected(); + } + } + }; + const eventFooterTabsCreateListenerFunction = (payload: PayloadBaseClass) => { if (payloadIsAFooterTab(payload)) { addTab(payload); @@ -249,7 +271,7 @@ export function FooterTabs(): JSX.Element | null { // listen on tab removal api.event.on(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_REMOVE, eventFooterTabsRemoveListenerFunction, mapId); - // listen for tab selection + // listen for tab selection when selecting via the api call (NOT when user clicks on a tab, this is only for api calls) api.event.on(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_SELECT, eventFooterTabsSelectListenerFunction, mapId); return () => { api.event.off(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_CREATE, mapId, eventFooterTabsCreateListenerFunction); @@ -398,6 +420,7 @@ export function FooterTabs(): JSX.Element | null { void | undefined; TabContentVisibilty?: string | undefined; + onSelectedTabChanged?: (tab: TypeTabs) => void; } /** @@ -44,7 +45,7 @@ export interface TypeTabsProps { * @returns {JSX.Element} returns the tabs ui */ export function Tabs(props: TypeTabsProps): JSX.Element { - const { tabs, rightButtons, selectedTab, isCollapsed, handleCollapse, TabContentVisibilty = 'inherit' } = props; + const { tabs, rightButtons, selectedTab, isCollapsed, handleCollapse, onSelectedTabChanged, TabContentVisibilty = 'inherit' } = props; const { t } = useTranslation(); @@ -65,6 +66,9 @@ export function Tabs(props: TypeTabsProps): JSX.Element { const handleChange = (event: SyntheticEvent, newValue: number) => { setValue(newValue); setActiveFooterTab(t(tabs[newValue].label).toLowerCase()); + + // Callback + onSelectedTabChanged?.(tabs[newValue]); }; /** diff --git a/packages/geoview-geochart/src/index.tsx b/packages/geoview-geochart/src/index.tsx index 5fb6d7a054f..8e8d89ba044 100644 --- a/packages/geoview-geochart/src/index.tsx +++ b/packages/geoview-geochart/src/index.tsx @@ -73,6 +73,14 @@ class GeoChartFooterPlugin extends FooterPlugin { }; } + onSelected(): void { + // Call parent + super.onSelected(); + + // When the GeoChart Plugin in the Footer is selected, we redraw the chart, in case + this.redrawChart(); + } + /** * Callable plugin function to emit a Chart config event in order to update the Chart configuration on demand. * @param config PluginGeoChartConfig The GeoChart Config