@itwin/map-layers 6.0.7 → 6.0.9

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @itwin/map-layers
 
-<!-- This log was last generated on Tue, 23 Sep 2025 14:41:33 GMT and should not be manually modified. -->
+<!-- This log was last generated on Mon, 03 Nov 2025 14:36:13 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 6.0.9
+
+Mon, 03 Nov 2025 14:36:13 GMT
+
+### Patches
+
+- Store user selected solid fill color to use as session default and add as new preset in picker ([#1481](https://github.com/iTwin/viewer-components-react/pull/1481))
+
+## 6.0.8
+
+Wed, 08 Oct 2025 20:11:56 GMT
+
+### Patches
+
+- Remove Dynamically Created Inline Styles ([#1463](https://github.com/iTwin/viewer-components-react/pull/1463))
+
 ## 6.0.7
 
-Tue, 23 Sep 2025 14:41:33 GMT
+Tue, 23 Sep 2025 14:41:43 GMT
 
 ### Patches
 

package/lib/cjs/BasemapColorPreferences.d.ts

@@ -0,0 +1,53 @@
+import type { GuidString } from "@itwin/core-bentley";
+/** @internal */
+export interface BasemapColorPreferencesContent {
+    customColor?: string;
+    activeColor?: string;
+}
+/** A wrapper around user preferences to store basemap solid fill colors.
+ * Supports both user-selected custom colors and active colors (which may be preset or custom).
+ * @internal
+ */
+export declare class BasemapColorPreferences {
+    private static readonly _preferenceNamespace;
+    private static readonly _preferenceKey;
+    /** Store the user-selected custom basemap color preference.
+     * This preserves the user's custom color choice even when they switch to presets.
+     * @param color TBGR color value as string
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)
+     */
+    static saveCustomColor(color: string, iTwinId: GuidString, iModelId?: GuidString): Promise<boolean>;
+    /** Store the currently active basemap color.
+     * This tracks what color is currently being used, whether it's custom or preset.
+     * @param color TBGR color value as string
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)
+     */
+    static saveActiveColor(color: string, iTwinId: GuidString, iModelId?: GuidString): Promise<boolean>;
+    /** Get the user's selected custom color.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored user-selected color as TBGR string, or undefined if not found
+     */
+    static getCustomColor(iTwinId: GuidString, iModelId?: GuidString): Promise<string | undefined>;
+    /** Get the currently active color.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored active color as TBGR string, or undefined if not found
+     */
+    static getActiveColor(iTwinId: GuidString, iModelId?: GuidString): Promise<string | undefined>;
+    /** Get all color preferences.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored preferences, or undefined if not found
+     */
+    static getPreferences(iTwinId: GuidString, iModelId?: GuidString): Promise<BasemapColorPreferencesContent | undefined>;
+    /** Save color preferences.
+     * @param preferences The preferences to save
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     */
+    private static savePreferences;
+}
+//# sourceMappingURL=BasemapColorPreferences.d.ts.map

package/lib/cjs/BasemapColorPreferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasemapColorPreferences.d.ts","sourceRoot":"","sources":["../../src/BasemapColorPreferences.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,gBAAgB;AAChB,MAAM,WAAW,8BAA8B;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAkC;IAC9E,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAqB;IAE3D;;;;;OAKG;WACiB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IAahH;;;;;OAKG;WACiB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IAahH;;;;OAIG;WACiB,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAK3G;;;;OAIG;WACiB,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAK3G;;;;OAIG;WACiB,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,8BAA8B,GAAG,SAAS,CAAC;IAyCnI;;;;OAIG;mBACkB,eAAe;CAsBrC"}

package/lib/cjs/BasemapColorPreferences.js

@@ -0,0 +1,142 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasemapColorPreferences = void 0;
+const core_frontend_1 = require("@itwin/core-frontend");
+const mapLayers_1 = require("./mapLayers");
+/** A wrapper around user preferences to store basemap solid fill colors.
+ * Supports both user-selected custom colors and active colors (which may be preset or custom).
+ * @internal
+ */
+class BasemapColorPreferences {
+    static _preferenceNamespace = "BasemapColor-SettingsService";
+    static _preferenceKey = "solidFillColors";
+    /** Store the user-selected custom basemap color preference.
+     * This preserves the user's custom color choice even when they switch to presets.
+     * @param color TBGR color value as string
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)
+     */
+    static async saveCustomColor(color, iTwinId, iModelId) {
+        try {
+            const existing = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);
+            const colorPreference = {
+                customColor: color,
+                activeColor: existing?.activeColor ?? color, // Keep existing active or set to this color
+            };
+            return await BasemapColorPreferences.savePreferences(colorPreference, iTwinId, iModelId);
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Store the currently active basemap color.
+     * This tracks what color is currently being used, whether it's custom or preset.
+     * @param color TBGR color value as string
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)
+     */
+    static async saveActiveColor(color, iTwinId, iModelId) {
+        try {
+            const existing = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);
+            const colorPreference = {
+                customColor: existing?.customColor, // Preserve user's custom color
+                activeColor: color,
+            };
+            return await BasemapColorPreferences.savePreferences(colorPreference, iTwinId, iModelId);
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Get the user's selected custom color.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored user-selected color as TBGR string, or undefined if not found
+     */
+    static async getCustomColor(iTwinId, iModelId) {
+        const preferences = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);
+        return preferences?.customColor;
+    }
+    /** Get the currently active color.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored active color as TBGR string, or undefined if not found
+     */
+    static async getActiveColor(iTwinId, iModelId) {
+        const preferences = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);
+        return preferences?.activeColor;
+    }
+    /** Get all color preferences.
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     * @returns The stored preferences, or undefined if not found
+     */
+    static async getPreferences(iTwinId, iModelId) {
+        if (!mapLayers_1.MapLayersUI.iTwinConfig) {
+            return undefined;
+        }
+        try {
+            const accessToken = undefined !== core_frontend_1.IModelApp.authorizationClient ? await core_frontend_1.IModelApp.authorizationClient.getAccessToken() : undefined;
+            // Try to get from iModel level first (more specific)
+            if (iModelId) {
+                try {
+                    const iModelResult = await mapLayers_1.MapLayersUI.iTwinConfig.get({
+                        accessToken,
+                        namespace: BasemapColorPreferences._preferenceNamespace,
+                        key: BasemapColorPreferences._preferenceKey,
+                        iTwinId,
+                        iModelId,
+                    });
+                    if (iModelResult) {
+                        return iModelResult;
+                    }
+                }
+                catch {
+                    // Fall through to try iTwin level
+                }
+            }
+            // Try iTwin level
+            const iTwinResult = await mapLayers_1.MapLayersUI.iTwinConfig.get({
+                accessToken,
+                namespace: BasemapColorPreferences._preferenceNamespace,
+                key: BasemapColorPreferences._preferenceKey,
+                iTwinId,
+            });
+            return iTwinResult;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /** Save color preferences.
+     * @param preferences The preferences to save
+     * @param iTwinId iTwin identifier
+     * @param iModelId iModel identifier (optional)
+     */
+    static async savePreferences(preferences, iTwinId, iModelId) {
+        if (!mapLayers_1.MapLayersUI.iTwinConfig) {
+            return false;
+        }
+        try {
+            const accessToken = undefined !== core_frontend_1.IModelApp.authorizationClient ? await core_frontend_1.IModelApp.authorizationClient.getAccessToken() : undefined;
+            await mapLayers_1.MapLayersUI.iTwinConfig.save({
+                accessToken,
+                content: preferences,
+                namespace: BasemapColorPreferences._preferenceNamespace,
+                key: BasemapColorPreferences._preferenceKey,
+                iTwinId,
+                iModelId,
+            });
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+}
+exports.BasemapColorPreferences = BasemapColorPreferences;
+//# sourceMappingURL=BasemapColorPreferences.js.map

package/lib/cjs/BasemapColorPreferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasemapColorPreferences.js","sourceRoot":"","sources":["../../src/BasemapColorPreferences.ts"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { MapLayersUI } from \"./mapLayers\";\n\nimport type { GuidString } from \"@itwin/core-bentley\";\n\n/** @internal */\nexport interface BasemapColorPreferencesContent {\n  customColor?: string; // TBGR color value as string - user's custom color choice\n  activeColor?: string; // TBGR color value as string - currently active color\n}\n\n/** A wrapper around user preferences to store basemap solid fill colors.\n * Supports both user-selected custom colors and active colors (which may be preset or custom).\n * @internal\n */\nexport class BasemapColorPreferences {\n  private static readonly _preferenceNamespace = \"BasemapColor-SettingsService\";\n  private static readonly _preferenceKey = \"solidFillColors\";\n\n  /** Store the user-selected custom basemap color preference.\n   * This preserves the user's custom color choice even when they switch to presets.\n   * @param color TBGR color value as string\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)\n   */\n  public static async saveCustomColor(color: string, iTwinId: GuidString, iModelId?: GuidString): Promise<boolean> {\n    try {\n      const existing = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);\n      const colorPreference: BasemapColorPreferencesContent = {\n        customColor: color,\n        activeColor: existing?.activeColor ?? color, // Keep existing active or set to this color\n      };\n      return await BasemapColorPreferences.savePreferences(colorPreference, iTwinId, iModelId);\n    } catch {\n      return false;\n    }\n  }\n\n  /** Store the currently active basemap color.\n   * This tracks what color is currently being used, whether it's custom or preset.\n   * @param color TBGR color value as string\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional, if not provided stores at iTwin level)\n   */\n  public static async saveActiveColor(color: string, iTwinId: GuidString, iModelId?: GuidString): Promise<boolean> {\n    try {\n      const existing = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);\n      const colorPreference: BasemapColorPreferencesContent = {\n        customColor: existing?.customColor, // Preserve user's custom color\n        activeColor: color,\n      };\n      return await BasemapColorPreferences.savePreferences(colorPreference, iTwinId, iModelId);\n    } catch {\n      return false;\n    }\n  }\n\n  /** Get the user's selected custom color.\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional)\n   * @returns The stored user-selected color as TBGR string, or undefined if not found\n   */\n  public static async getCustomColor(iTwinId: GuidString, iModelId?: GuidString): Promise<string | undefined> {\n    const preferences = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);\n    return preferences?.customColor;\n  }\n\n  /** Get the currently active color.\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional)\n   * @returns The stored active color as TBGR string, or undefined if not found\n   */\n  public static async getActiveColor(iTwinId: GuidString, iModelId?: GuidString): Promise<string | undefined> {\n    const preferences = await BasemapColorPreferences.getPreferences(iTwinId, iModelId);\n    return preferences?.activeColor;\n  }\n\n  /** Get all color preferences.\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional)\n   * @returns The stored preferences, or undefined if not found\n   */\n  public static async getPreferences(iTwinId: GuidString, iModelId?: GuidString): Promise<BasemapColorPreferencesContent | undefined> {\n    if (!MapLayersUI.iTwinConfig) {\n      return undefined;\n    }\n\n    try {\n      const accessToken = undefined !== IModelApp.authorizationClient ? await IModelApp.authorizationClient.getAccessToken() : undefined;\n\n      // Try to get from iModel level first (more specific)\n      if (iModelId) {\n        try {\n          const iModelResult = await MapLayersUI.iTwinConfig.get({\n            accessToken,\n            namespace: BasemapColorPreferences._preferenceNamespace,\n            key: BasemapColorPreferences._preferenceKey,\n            iTwinId,\n            iModelId,\n          });\n\n          if (iModelResult) {\n            return iModelResult;\n          }\n        } catch {\n          // Fall through to try iTwin level\n        }\n      }\n\n      // Try iTwin level\n      const iTwinResult = await MapLayersUI.iTwinConfig.get({\n        accessToken,\n        namespace: BasemapColorPreferences._preferenceNamespace,\n        key: BasemapColorPreferences._preferenceKey,\n        iTwinId,\n      });\n\n      return iTwinResult;\n    } catch {\n      return undefined;\n    }\n  }\n\n  /** Save color preferences.\n   * @param preferences The preferences to save\n   * @param iTwinId iTwin identifier\n   * @param iModelId iModel identifier (optional)\n   */\n  private static async savePreferences(preferences: BasemapColorPreferencesContent, iTwinId: GuidString, iModelId?: GuidString): Promise<boolean> {\n    if (!MapLayersUI.iTwinConfig) {\n      return false;\n    }\n\n    try {\n      const accessToken = undefined !== IModelApp.authorizationClient ? await IModelApp.authorizationClient.getAccessToken() : undefined;\n\n      await MapLayersUI.iTwinConfig.save({\n        accessToken,\n        content: preferences,\n        namespace: BasemapColorPreferences._preferenceNamespace,\n        key: BasemapColorPreferences._preferenceKey,\n        iTwinId,\n        iModelId,\n      });\n\n      return true;\n    } catch {\n      return false;\n    }\n  }\n}\n"]}

package/lib/cjs/ui/widget/BasemapPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BasemapPanel.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,qBAAqB,CAAC;AAmB7B,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAsVpD"}
+{"version":3,"file":"BasemapPanel.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,qBAAqB,CAAC;AAiC7B,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAwYpD"}

package/lib/cjs/ui/widget/BasemapPanel.js

@@ -36,9 +36,21 @@ const core_common_1 = require("@itwin/core-common");
 const core_frontend_1 = require("@itwin/core-frontend");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
+const BasemapColorPreferences_1 = require("../../BasemapColorPreferences");
 const mapLayers_1 = require("../../mapLayers");
 const MapLayerManager_1 = require("./MapLayerManager");
 const TransparencyPopupButton_1 = require("./TransparencyPopupButton");
+// Define preset colors in a single place to avoid duplication
+const PRESET_COLORS = [
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.grey),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightGrey),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGrey),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightBlue),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightGreen),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGreen),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.tan),
+    itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkBrown),
+];
 const customBaseMapValue = "customBaseMap";
 /** @internal */
 function BasemapPanel(props) {
@@ -82,7 +94,7 @@ function BasemapPanel(props) {
                 return mapImagery.backgroundBase.transparency;
             }
             else if (mapImagery.backgroundBase instanceof core_common_1.ColorDef) {
-                return mapImagery.backgroundBase.getAlpha() / 255;
+                return 1.0 - (mapImagery.backgroundBase.getAlpha() / 255);
             }
             else {
                 return 0;
@@ -147,8 +159,9 @@ function BasemapPanel(props) {
             }
         }
         else if (baseMap instanceof core_common_1.ColorDef) {
-            if (baseMap.getAlpha() !== baseMapTransparencyValue) {
-                setBaseMapTransparencyValue(baseMap.getAlpha() / 255);
+            const transparency = 1.0 - (baseMap.getAlpha() / 255);
+            if (transparency !== baseMapTransparencyValue) {
+                setBaseMapTransparencyValue(transparency);
             }
         }
     }, [baseMapTransparencyValue, baseMapVisible, selectedBaseMap, updateBaseMapOptions]);
@@ -183,16 +196,55 @@ function BasemapPanel(props) {
             setCustomBaseMap(selectedBaseMap);
         }
     }, [baseMapOptions, extraFormats, selectedBaseMap]);
-    const [presetColors] = React.useState([
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.grey),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightGrey),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGrey),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightBlue),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.lightGreen),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGreen),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.tan),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkBrown),
-    ]);
+    const getPresetColorsWithSaved = React.useCallback(async () => {
+        const defaultColors = [...PRESET_COLORS];
+        // Add saved custom color from preferences as the first color if available
+        try {
+            const iModel = activeViewport?.iModel;
+            if (iModel?.iTwinId) {
+                const savedColor = await BasemapColorPreferences_1.BasemapColorPreferences.getCustomColor(iModel.iTwinId, iModel.iModelId);
+                if (savedColor) {
+                    const savedColorValue = itwinui_react_1.ColorValue.fromTbgr(Number(savedColor));
+                    // Remove the saved color from default colors if it exists there
+                    const filteredColors = defaultColors.filter(color => color.toTbgr() !== savedColorValue.toTbgr());
+                    // Always put the saved color as the first color
+                    return [savedColorValue, ...filteredColors];
+                }
+            }
+        }
+        catch {
+            // Silently ignore preferences errors
+        }
+        return defaultColors;
+    }, [activeViewport]);
+    const [presetColors, setPresetColors] = React.useState(() => [...PRESET_COLORS]);
+    // Load saved color on component mount and when activeViewport changes
+    React.useEffect(() => {
+        const loadSavedColor = async () => {
+            const colors = await getPresetColorsWithSaved();
+            setPresetColors(colors);
+        };
+        void loadSavedColor();
+    }, [activeViewport, getPresetColorsWithSaved]);
+    // Persist a custom (non-preset) basemap color to user preferences and refresh preset list
+    const saveCustomBasemapColorPreference = React.useCallback(async (selectedColorTbgr, isPresetColor) => {
+        // Only save custom colors to preferences - preset colors don't overwrite user's custom color
+        if (isPresetColor)
+            return;
+        try {
+            const iModel = activeViewport?.iModel;
+            if (iModel?.iTwinId) {
+                const saved = await BasemapColorPreferences_1.BasemapColorPreferences.saveCustomColor(selectedColorTbgr.toString(), iModel.iTwinId, iModel.iModelId);
+                if (saved) {
+                    const colors = await getPresetColorsWithSaved();
+                    setPresetColors(colors);
+                }
+            }
+        }
+        catch {
+            // Silently ignore preferences errors
+        }
+    }, [activeViewport, getPresetColorsWithSaved]);
     const baseIsColor = React.useMemo(() => selectedBaseMap instanceof core_common_1.ColorDef, [selectedBaseMap]);
     const baseIsMap = React.useMemo(() => !baseIsColor && selectedBaseMap !== undefined, [baseIsColor, selectedBaseMap]);
     // bgColor is a 32 bit number represented in TBGR format
@@ -238,9 +290,14 @@ function BasemapPanel(props) {
             // change color and make sure previously set transparency is not lost.
             const curTransparency = activeViewport.displayStyle.backgroundMapBase instanceof core_common_1.ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;
             activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);
+            // Determine if this is a preset color or a custom color
+            const selectedColorTbgr = bgColorValue.toTbgr();
+            const isPresetColor = presetColors.some((presetColor) => presetColor.toTbgr() === selectedColorTbgr);
+            // Persist custom color (no-op if preset)
+            void saveCustomBasemapColorPreference(selectedColorTbgr, isPresetColor);
             setSelectedBaseMap(bgColorDef);
         }
-    }, [activeViewport]);
+    }, [activeViewport, presetColors, saveCustomBasemapColorPreference]);
     const handleBaseMapSelection = React.useCallback((value) => {
         if (activeViewport && value) {
             if (value === customBaseMapValue && customBaseMap) {

package/lib/cjs/ui/widget/BasemapPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasemapPanel.js","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\nimport \"./BasemapPanel.scss\";\nimport * as React from \"react\";\nimport { BackgroundMapType, BaseLayerSettings, BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorSwatch, ColorValue, IconButton, Popover, Select } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { useSourceMapContext } from \"./MapLayerManager\";\nimport { TransparencyPopupButton } from \"./TransparencyPopupButton\";\n\nimport type {\n  MapImagerySettings} from \"@itwin/core-common\";\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nconst customBaseMapValue = \"customBaseMap\";\ninterface ExtraFormat {\n    selectKeyFromSetting: (base: BaseMapLayerSettings) => string;\n}\n\ninterface BasemapPanelProps {\n  disabled?: boolean;\n}\n\n/** @internal */\nexport function BasemapPanel(props: BasemapPanelProps) {\n  const [useColorLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.ColorFill\"));\n  const { activeViewport, bases } = useSourceMapContext();\n  const [selectedBaseMap, setSelectedBaseMap] = React.useState<BaseLayerSettings | undefined>(() => {\n    return activeViewport?.displayStyle.settings.mapImagery.backgroundBase;\n  });\n\n  const [extraFormats] = React.useState<{[formatId: string]:ExtraFormat}>(()=>{\n    const extras: {[formatId: string]:ExtraFormat} = {};\n    // TODO: Use format string from format class instead of hardcoded string.\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(\"GoogleMaps\")) {\n      extras.GoogleMaps = {\n        selectKeyFromSetting: (base: BaseMapLayerSettings) => {\n          let key = base.formatId;\n          if (base.properties?.mapType !== undefined) {\n            key = `${key}.${base.properties?.mapType.toString()}`;\n            if (base.properties?.layerTypes) {\n              key = `${key}-${base.properties?.layerTypes.toString()}`;\n            }\n          }\n          return key;\n        }\n      }\n    }\n    return extras;\n  });\n\n  const getSelectKeyFromProvider = React.useCallback(\n    (base: BaseMapLayerSettings) => {\n      if (base.provider) {\n        return `${base.formatId}.${BackgroundMapType[base.provider.type]}`;\n      }\n      if (extraFormats[base.formatId]) {\n        return extraFormats[base.formatId].selectKeyFromSetting(base);\n      }\n      return base.name;\n    },\n    [extraFormats],\n  );\n\n  const [baseMapTransparencyValue, setBaseMapTransparencyValue] = React.useState(() => {\n    if (activeViewport) {\n      const mapImagery = activeViewport.displayStyle.settings.mapImagery;\n      if (mapImagery.backgroundBase instanceof ImageMapLayerSettings) {\n        return mapImagery.backgroundBase.transparency;\n      } else if (mapImagery.backgroundBase instanceof ColorDef) {\n        return mapImagery.backgroundBase.getAlpha() / 255;\n      } else {\n        return 0;\n      }\n    } else {\n      return 0;\n    }\n  });\n\n  const [customBaseMap, setCustomBaseMap] = React.useState<BaseMapLayerSettings | undefined>();\n  const [baseMapVisible, setBaseMapVisible] = React.useState(() => {\n    if (activeViewport && activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings) {\n      return activeViewport.displayStyle.backgroundMapBase.visible;\n    }\n    return false;\n  });\n\n  const getBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      const baseOptions: SelectOption<string>[] = [];\n\n      baseOptions.push({ value: useColorLabel, label: useColorLabel });\n\n      if (bases) {\n        baseOptions.push(\n          ...bases.map((base) => {\n            const value = getSelectKeyFromProvider(base);\n            const label = MapLayersUI.translate(`WellKnownBaseMaps.${value}`);\n            return { value, label };\n          }),\n        );\n      }\n\n      const baseMapSelectKey = baseMap ? getSelectKeyFromProvider(baseMap as BaseMapLayerSettings) : \"\";\n\n      // Add new custom base map definition (avoid adding duplicate entry)\n      if (baseMap instanceof BaseMapLayerSettings\n        && baseOptions.find((opt) => opt.value === baseMapSelectKey) === undefined\n        && !extraFormats[baseMap.formatId]) {\n        // Add new option for the custom base map\n        if (undefined === baseOptions.find((opt) => opt.label === baseMap.name)) {\n          setCustomBaseMap(baseMap);\n          baseOptions.push({ value: customBaseMapValue, label: baseMap.name });\n        }\n      } else if (customBaseMap) {\n        // Add previously defined custom map definition\n        baseOptions.push({ value: customBaseMapValue, label: customBaseMap.name });\n      }\n      return baseOptions;\n    },\n    [bases, customBaseMap, extraFormats, getSelectKeyFromProvider, useColorLabel],\n  );\n\n  const [baseMapOptions, setBaseMapOptions] = React.useState<SelectOption<string>[]>(() => getBaseMapOptions(selectedBaseMap));\n\n  const updateBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      setBaseMapOptions(getBaseMapOptions(baseMap));\n    },\n    [getBaseMapOptions],\n  );\n\n\n  const handleMapImageryChanged = React.useCallback(\n    (args: Readonly<MapImagerySettings>) => {\n      const baseMap = args.backgroundBase;\n\n      // Optimization:  If serialized 'backgroundBase' objects are identical, skip refresh\n      if (JSON.stringify(baseMap.toJSON()) === JSON.stringify(selectedBaseMap?.toJSON())) {\n        return;\n      }\n\n      setSelectedBaseMap(baseMap); // cache current base map objects\n      updateBaseMapOptions(baseMap);\n\n      if (baseMap instanceof ImageMapLayerSettings) {\n        if (baseMap.transparency !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(baseMap.transparency);\n        }\n\n        if (baseMap.visible !== baseMapVisible) {\n          setBaseMapVisible(baseMap.visible);\n        }\n      } else if (baseMap instanceof ColorDef) {\n        if (baseMap.getAlpha() !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(baseMap.getAlpha() / 255);\n        }\n      }\n    },\n    [baseMapTransparencyValue, baseMapVisible, selectedBaseMap, updateBaseMapOptions],\n  );\n\n  React.useEffect(() => {\n    const handleDisplayStyleChange = (vp: Viewport) => {\n      handleMapImageryChanged(vp.displayStyle.settings.mapImagery);\n    };\n    return activeViewport?.onDisplayStyleChanged.addListener(handleDisplayStyleChange);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor display style's onMapImageryChanged event\n  React.useEffect(() => {\n    return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor viewport updates, and refresh the widget accordingly .\n  // Note: This is needed for multiple viewport applications.\n  React.useEffect(() => {\n    if (activeViewport) {\n      handleMapImageryChanged(activeViewport.displayStyle.settings.mapImagery);\n    }\n  }, [activeViewport, handleMapImageryChanged]);\n\n  const handleBasemapTransparencyChange = React.useCallback(\n    (transparency: number) => {\n      if (activeViewport) {\n        activeViewport.displayStyle.changeBaseMapTransparency(transparency);\n        setBaseMapTransparencyValue(transparency);\n      }\n    },\n    [activeViewport],\n  );\n\n  // This effect is only to keep a custom base map option when a 'default' base map is picked.\n  React.useEffect(() => {\n    if (\n      selectedBaseMap instanceof BaseMapLayerSettings\n       && undefined === baseMapOptions.find((opt) => opt.label === selectedBaseMap.name)\n       && undefined === extraFormats[selectedBaseMap.formatId]\n    ) {\n      setCustomBaseMap(selectedBaseMap);\n    }\n  }, [baseMapOptions, extraFormats, selectedBaseMap]);\n\n  const [presetColors] = React.useState([\n    ColorValue.fromTbgr(ColorByName.grey),\n    ColorValue.fromTbgr(ColorByName.lightGrey),\n    ColorValue.fromTbgr(ColorByName.darkGrey),\n    ColorValue.fromTbgr(ColorByName.lightBlue),\n    ColorValue.fromTbgr(ColorByName.lightGreen),\n    ColorValue.fromTbgr(ColorByName.darkGreen),\n    ColorValue.fromTbgr(ColorByName.tan),\n    ColorValue.fromTbgr(ColorByName.darkBrown),\n  ]);\n\n  const baseIsColor = React.useMemo(() => selectedBaseMap instanceof ColorDef, [selectedBaseMap]);\n  const baseIsMap = React.useMemo(() => !baseIsColor && selectedBaseMap !== undefined, [baseIsColor, selectedBaseMap]);\n  // bgColor is a 32 bit number represented in TBGR format\n  const bgColor = React.useMemo(\n    () => (baseIsColor ? (selectedBaseMap as ColorDef).toJSON() : presetColors[0].toTbgr()),\n    [baseIsColor, selectedBaseMap, presetColors],\n  );\n  const [selectedBaseMapValue, setSelectedBaseMapValue] = React.useState<SelectOption<string>>({ value: \"\", label: \"\" });\n\n  React.useEffect(() => {\n    if (baseIsMap) {\n      if (selectedBaseMap instanceof BaseMapLayerSettings\n        && (selectedBaseMap.provider || extraFormats[selectedBaseMap.formatId])) {\n        const mapName = getSelectKeyFromProvider(selectedBaseMap);\n        const foundItem = baseMapOptions.find((value) => value.value === mapName);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      }\n\n      if (selectedBaseMap instanceof BaseMapLayerSettings) {\n        // We got a custom base map\n\n        // First check if the name matches a label of existing base map.\n        // If it matches, we assume it's a legacy base map definition missing the provider information.\n        let foundItem = baseMapOptions.find((opt) => opt.value !== customBaseMapValue && opt.label === selectedBaseMap.name);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n\n        // Use custom base map entry\n        foundItem = baseMapOptions.find((opt) => opt.value === customBaseMapValue);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      }\n    } else if (baseIsColor) {\n      setSelectedBaseMapValue(baseMapOptions[0]);\n      return;\n    }\n    setSelectedBaseMapValue({ value: \"\", label: \"\" });\n  }, [baseIsColor, baseIsMap, baseMapOptions, extraFormats, getSelectKeyFromProvider, selectedBaseMap]);\n\n  const handleBackgroundColorDialogOk = React.useCallback(\n    (bgColorValue: ColorValue) => {\n      if (activeViewport) {\n        const bgColorDef = ColorDef.fromTbgr(bgColorValue.toTbgr());\n        // change color and make sure previously set transparency is not lost.\n        const curTransparency =\n          activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n        activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n\n        setSelectedBaseMap(bgColorDef);\n      }\n    },\n    [activeViewport],\n  );\n\n  const handleBaseMapSelection = React.useCallback(\n    (value: string) => {\n      if (activeViewport && value) {\n        if (value === customBaseMapValue && customBaseMap) {\n          activeViewport.displayStyle.backgroundMapBase = customBaseMap;\n        } else if (bases) {\n          const baseMap = bases.find((provider) => getSelectKeyFromProvider(provider) === value);\n          if (baseMap) {\n            const baseProps = baseMap.toJSON();\n            if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n              activeViewport.displayStyle.backgroundMapBase = BaseLayerSettings.fromJSON({ ...baseProps, visible: baseMapVisible });\n            } else {\n              activeViewport.displayStyle.backgroundMapBase = BaseLayerSettings.fromJSON(baseProps)\n            }\n          } else {\n            const bgColorDef = ColorDef.fromJSON(bgColor);\n            const curTransparency =\n              activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n            activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n          }\n        }\n      }\n    },\n    [activeViewport, customBaseMap, bases, getSelectKeyFromProvider, baseMapVisible, bgColor],\n  );\n\n  const handleVisibilityChange = React.useCallback(() => {\n    if (activeViewport) {\n      const newState = !baseMapVisible;\n      // BaseMap visibility is only support when backgroundBase is an instance of BaseMapLayerSettings (i.e not a color)...\n      if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n        activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({ visible: newState });\n      }\n      setBaseMapVisible(newState);\n    }\n  }, [baseMapVisible, activeViewport]);\n\n  const [baseLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.BaseLayer\"));\n  const [selectBaseMapLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.SelectBaseMap\"));\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n\n  return (\n    <>\n      <span className=\"map-manager-base-label\">{baseLayerLabel}</span>\n      <div className=\"map-manager-base-item\">\n        <IconButton\n          data-testid=\"base-map-visibility-icon-button\"\n          className=\"map-manager-basemap-visibility\"\n          styleType=\"borderless\"\n           size=\"small\" label={toggleVisibility}\n           onClick={handleVisibilityChange}\n           disabled={props.disabled || !activeViewport || !(activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings)}>\n        {baseMapVisible\n          ? <SvgVisibilityShow data-testid=\"layer-visibility-icon-show\" />\n          : <SvgVisibilityHide data-testid=\"layer-visibility-icon-hide\" />}\n        </IconButton>\n        <Select\n          data-testid=\"base-map-select\"\n          className=\"map-manager-base-item-select\"\n          options={baseMapOptions}\n          placeholder={selectBaseMapLabel}\n          value={selectedBaseMapValue.value}\n          onChange={handleBaseMapSelection}\n          size=\"small\"\n          disabled={props.disabled}\n        />\n        {baseIsColor && (\n          <Popover\n            content={\n              <ColorPicker\n                selectedColor={ColorValue.fromTbgr(bgColor)}\n                onChangeComplete={handleBackgroundColorDialogOk}\n              >\n                <ColorBuilder />\n                <ColorInputPanel defaultColorFormat='rgb' />\n                <ColorPalette\n                  label=\"Preset Colors\"\n                  colors={presetColors}\n                />\n              </ColorPicker>\n            }\n          >\n            <IconButton label='Show color picker' styleType='borderless' className='map-manager-base-item-color components-color-swatch'>\n              <ColorSwatch color={ColorValue.fromTbgr(bgColor)} />\n            </IconButton>\n          </Popover>\n        )}\n        <TransparencyPopupButton disabled={props.disabled} transparency={baseMapTransparencyValue} onTransparencyChange={handleBasemapTransparencyChange} />\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"BasemapPanel.js","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\nimport \"./BasemapPanel.scss\";\nimport * as React from \"react\";\nimport { BackgroundMapType, BaseLayerSettings, BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorSwatch, ColorValue, IconButton, Popover, Select } from \"@itwin/itwinui-react\";\nimport { BasemapColorPreferences } from \"../../BasemapColorPreferences\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { useSourceMapContext } from \"./MapLayerManager\";\nimport { TransparencyPopupButton } from \"./TransparencyPopupButton\";\n\nimport type {\n  MapImagerySettings} from \"@itwin/core-common\";\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\n\n// Define preset colors in a single place to avoid duplication\nconst PRESET_COLORS = [\n  ColorValue.fromTbgr(ColorByName.grey),\n  ColorValue.fromTbgr(ColorByName.lightGrey),\n  ColorValue.fromTbgr(ColorByName.darkGrey),\n  ColorValue.fromTbgr(ColorByName.lightBlue),\n  ColorValue.fromTbgr(ColorByName.lightGreen),\n  ColorValue.fromTbgr(ColorByName.darkGreen),\n  ColorValue.fromTbgr(ColorByName.tan),\n  ColorValue.fromTbgr(ColorByName.darkBrown),\n];\n\nconst customBaseMapValue = \"customBaseMap\";\ninterface ExtraFormat {\n    selectKeyFromSetting: (base: BaseMapLayerSettings) => string;\n}\n\ninterface BasemapPanelProps {\n  disabled?: boolean;\n}\n\n/** @internal */\nexport function BasemapPanel(props: BasemapPanelProps) {\n  const [useColorLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.ColorFill\"));\n  const { activeViewport, bases } = useSourceMapContext();\n  const [selectedBaseMap, setSelectedBaseMap] = React.useState<BaseLayerSettings | undefined>(() => {\n    return activeViewport?.displayStyle.settings.mapImagery.backgroundBase;\n  });\n\n  const [extraFormats] = React.useState<{[formatId: string]:ExtraFormat}>(()=>{\n    const extras: {[formatId: string]:ExtraFormat} = {};\n    // TODO: Use format string from format class instead of hardcoded string.\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(\"GoogleMaps\")) {\n      extras.GoogleMaps = {\n        selectKeyFromSetting: (base: BaseMapLayerSettings) => {\n          let key = base.formatId;\n          if (base.properties?.mapType !== undefined) {\n            key = `${key}.${base.properties?.mapType.toString()}`;\n            if (base.properties?.layerTypes) {\n              key = `${key}-${base.properties?.layerTypes.toString()}`;\n            }\n          }\n          return key;\n        }\n      }\n    }\n    return extras;\n  });\n\n  const getSelectKeyFromProvider = React.useCallback(\n    (base: BaseMapLayerSettings) => {\n      if (base.provider) {\n        return `${base.formatId}.${BackgroundMapType[base.provider.type]}`;\n      }\n      if (extraFormats[base.formatId]) {\n        return extraFormats[base.formatId].selectKeyFromSetting(base);\n      }\n      return base.name;\n    },\n    [extraFormats],\n  );\n\n  const [baseMapTransparencyValue, setBaseMapTransparencyValue] = React.useState(() => {\n    if (activeViewport) {\n      const mapImagery = activeViewport.displayStyle.settings.mapImagery;\n      if (mapImagery.backgroundBase instanceof ImageMapLayerSettings) {\n        return mapImagery.backgroundBase.transparency;\n      } else if (mapImagery.backgroundBase instanceof ColorDef) {\n        return 1.0 - (mapImagery.backgroundBase.getAlpha() / 255);\n      } else {\n        return 0;\n      }\n    } else {\n      return 0;\n    }\n  });\n\n  const [customBaseMap, setCustomBaseMap] = React.useState<BaseMapLayerSettings | undefined>();\n  const [baseMapVisible, setBaseMapVisible] = React.useState(() => {\n    if (activeViewport && activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings) {\n      return activeViewport.displayStyle.backgroundMapBase.visible;\n    }\n    return false;\n  });\n\n  const getBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      const baseOptions: SelectOption<string>[] = [];\n\n      baseOptions.push({ value: useColorLabel, label: useColorLabel });\n\n      if (bases) {\n        baseOptions.push(\n          ...bases.map((base) => {\n            const value = getSelectKeyFromProvider(base);\n            const label = MapLayersUI.translate(`WellKnownBaseMaps.${value}`);\n            return { value, label };\n          }),\n        );\n      }\n\n      const baseMapSelectKey = baseMap ? getSelectKeyFromProvider(baseMap as BaseMapLayerSettings) : \"\";\n\n      // Add new custom base map definition (avoid adding duplicate entry)\n      if (baseMap instanceof BaseMapLayerSettings\n        && baseOptions.find((opt) => opt.value === baseMapSelectKey) === undefined\n        && !extraFormats[baseMap.formatId]) {\n        // Add new option for the custom base map\n        if (undefined === baseOptions.find((opt) => opt.label === baseMap.name)) {\n          setCustomBaseMap(baseMap);\n          baseOptions.push({ value: customBaseMapValue, label: baseMap.name });\n        }\n      } else if (customBaseMap) {\n        // Add previously defined custom map definition\n        baseOptions.push({ value: customBaseMapValue, label: customBaseMap.name });\n      }\n      return baseOptions;\n    },\n    [bases, customBaseMap, extraFormats, getSelectKeyFromProvider, useColorLabel],\n  );\n\n  const [baseMapOptions, setBaseMapOptions] = React.useState<SelectOption<string>[]>(() => getBaseMapOptions(selectedBaseMap));\n\n  const updateBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      setBaseMapOptions(getBaseMapOptions(baseMap));\n    },\n    [getBaseMapOptions],\n  );\n\n\n  const handleMapImageryChanged = React.useCallback(\n    (args: Readonly<MapImagerySettings>) => {\n      const baseMap = args.backgroundBase;\n\n      // Optimization:  If serialized 'backgroundBase' objects are identical, skip refresh\n      if (JSON.stringify(baseMap.toJSON()) === JSON.stringify(selectedBaseMap?.toJSON())) {\n        return;\n      }\n\n      setSelectedBaseMap(baseMap); // cache current base map objects\n      updateBaseMapOptions(baseMap);\n\n      if (baseMap instanceof ImageMapLayerSettings) {\n        if (baseMap.transparency !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(baseMap.transparency);\n        }\n\n        if (baseMap.visible !== baseMapVisible) {\n          setBaseMapVisible(baseMap.visible);\n        }\n      } else if (baseMap instanceof ColorDef) {\n        const transparency = 1.0 - (baseMap.getAlpha() / 255);\n        if (transparency !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(transparency);\n        }\n      }\n    },\n    [baseMapTransparencyValue, baseMapVisible, selectedBaseMap, updateBaseMapOptions],\n  );\n\n  React.useEffect(() => {\n    const handleDisplayStyleChange = (vp: Viewport) => {\n      handleMapImageryChanged(vp.displayStyle.settings.mapImagery);\n    };\n    return activeViewport?.onDisplayStyleChanged.addListener(handleDisplayStyleChange);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor display style's onMapImageryChanged event\n  React.useEffect(() => {\n    return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor viewport updates, and refresh the widget accordingly .\n  // Note: This is needed for multiple viewport applications.\n  React.useEffect(() => {\n    if (activeViewport) {\n      handleMapImageryChanged(activeViewport.displayStyle.settings.mapImagery);\n    }\n  }, [activeViewport, handleMapImageryChanged]);\n\n  const handleBasemapTransparencyChange = React.useCallback(\n    (transparency: number) => {\n      if (activeViewport) {\n        activeViewport.displayStyle.changeBaseMapTransparency(transparency);\n        setBaseMapTransparencyValue(transparency);\n      }\n    },\n    [activeViewport],\n  );\n\n  // This effect is only to keep a custom base map option when a 'default' base map is picked.\n  React.useEffect(() => {\n    if (\n      selectedBaseMap instanceof BaseMapLayerSettings\n        && undefined === baseMapOptions.find((opt) => opt.label === selectedBaseMap.name)\n        && undefined === extraFormats[selectedBaseMap.formatId]\n    ) {\n      setCustomBaseMap(selectedBaseMap);\n    }\n  }, [baseMapOptions, extraFormats, selectedBaseMap]);\n\n  const getPresetColorsWithSaved = React.useCallback(async () => {\n    const defaultColors = [...PRESET_COLORS];\n\n    // Add saved custom color from preferences as the first color if available\n    try {\n      const iModel = activeViewport?.iModel;\n      if (iModel?.iTwinId) {\n        const savedColor = await BasemapColorPreferences.getCustomColor(iModel.iTwinId, iModel.iModelId);\n        if (savedColor) {\n          const savedColorValue = ColorValue.fromTbgr(Number(savedColor));\n          // Remove the saved color from default colors if it exists there\n          const filteredColors = defaultColors.filter(color => color.toTbgr() !== savedColorValue.toTbgr());\n          // Always put the saved color as the first color\n          return [savedColorValue, ...filteredColors];\n        }\n      }\n    } catch {\n      // Silently ignore preferences errors\n    }\n\n    return defaultColors;\n  }, [activeViewport]);\n\n  const [presetColors, setPresetColors] = React.useState<ColorValue[]>(() => [...PRESET_COLORS]);\n\n  // Load saved color on component mount and when activeViewport changes\n  React.useEffect(() => {\n    const loadSavedColor = async () => {\n      const colors = await getPresetColorsWithSaved();\n      setPresetColors(colors);\n    };\n    void loadSavedColor();\n  }, [activeViewport, getPresetColorsWithSaved]);\n\n  // Persist a custom (non-preset) basemap color to user preferences and refresh preset list\n  const saveCustomBasemapColorPreference = React.useCallback(async (selectedColorTbgr: number, isPresetColor: boolean) => {\n    // Only save custom colors to preferences - preset colors don't overwrite user's custom color\n    if (isPresetColor)\n      return;\n\n    try {\n      const iModel = activeViewport?.iModel;\n      if (iModel?.iTwinId) {\n        const saved = await BasemapColorPreferences.saveCustomColor(selectedColorTbgr.toString(), iModel.iTwinId, iModel.iModelId);\n        if (saved) {\n          const colors = await getPresetColorsWithSaved();\n            setPresetColors(colors);\n        }\n      }\n    } catch {\n      // Silently ignore preferences errors\n    }\n  }, [activeViewport, getPresetColorsWithSaved]);\n\n  const baseIsColor = React.useMemo(() => selectedBaseMap instanceof ColorDef, [selectedBaseMap]);\n  const baseIsMap = React.useMemo(() => !baseIsColor && selectedBaseMap !== undefined, [baseIsColor, selectedBaseMap]);\n  // bgColor is a 32 bit number represented in TBGR format\n  const bgColor = React.useMemo(\n    () => (baseIsColor ? (selectedBaseMap as ColorDef).toJSON() : presetColors[0].toTbgr()),\n    [baseIsColor, selectedBaseMap, presetColors],\n  );\n  const [selectedBaseMapValue, setSelectedBaseMapValue] = React.useState<SelectOption<string>>({ value: \"\", label: \"\" });\n\n  React.useEffect(() => {\n    if (baseIsMap) {\n      if (selectedBaseMap instanceof BaseMapLayerSettings\n        && (selectedBaseMap.provider || extraFormats[selectedBaseMap.formatId])) {\n        const mapName = getSelectKeyFromProvider(selectedBaseMap);\n        const foundItem = baseMapOptions.find((value) => value.value === mapName);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      }\n\n      if (selectedBaseMap instanceof BaseMapLayerSettings) {\n        // We got a custom base map\n\n        // First check if the name matches a label of existing base map.\n        // If it matches, we assume it's a legacy base map definition missing the provider information.\n        let foundItem = baseMapOptions.find((opt) => opt.value !== customBaseMapValue && opt.label === selectedBaseMap.name);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n\n        // Use custom base map entry\n        foundItem = baseMapOptions.find((opt) => opt.value === customBaseMapValue);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      }\n    } else if (baseIsColor) {\n      setSelectedBaseMapValue(baseMapOptions[0]);\n      return;\n    }\n    setSelectedBaseMapValue({ value: \"\", label: \"\" });\n  }, [baseIsColor, baseIsMap, baseMapOptions, extraFormats, getSelectKeyFromProvider, selectedBaseMap]);\n\n  const handleBackgroundColorDialogOk = React.useCallback(\n    (bgColorValue: ColorValue) => {\n      if (activeViewport) {\n        const bgColorDef = ColorDef.fromTbgr(bgColorValue.toTbgr());\n        // change color and make sure previously set transparency is not lost.\n        const curTransparency =\n          activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n        activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n\n        // Determine if this is a preset color or a custom color\n        const selectedColorTbgr = bgColorValue.toTbgr();\n        const isPresetColor = presetColors.some((presetColor: ColorValue) => presetColor.toTbgr() === selectedColorTbgr);\n\n        // Persist custom color (no-op if preset)\n        void saveCustomBasemapColorPreference(selectedColorTbgr, isPresetColor);\n        setSelectedBaseMap(bgColorDef);\n      }\n    },\n    [activeViewport, presetColors, saveCustomBasemapColorPreference],\n  );\n\n  const handleBaseMapSelection = React.useCallback(\n    (value: string) => {\n      if (activeViewport && value) {\n        if (value === customBaseMapValue && customBaseMap) {\n          activeViewport.displayStyle.backgroundMapBase = customBaseMap;\n        } else if (bases) {\n          const baseMap = bases.find((provider) => getSelectKeyFromProvider(provider) === value);\n          if (baseMap) {\n            const baseProps = baseMap.toJSON();\n            if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n              activeViewport.displayStyle.backgroundMapBase = BaseLayerSettings.fromJSON({ ...baseProps, visible: baseMapVisible });\n            } else {\n              activeViewport.displayStyle.backgroundMapBase = BaseLayerSettings.fromJSON(baseProps)\n            }\n          } else {\n            const bgColorDef = ColorDef.fromJSON(bgColor);\n            const curTransparency =\n              activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n            activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n          }\n        }\n      }\n    },\n    [activeViewport, customBaseMap, bases, getSelectKeyFromProvider, baseMapVisible, bgColor],\n  );\n\n  const handleVisibilityChange = React.useCallback(() => {\n    if (activeViewport) {\n      const newState = !baseMapVisible;\n      // BaseMap visibility is only support when backgroundBase is an instance of BaseMapLayerSettings (i.e not a color)...\n      if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n        activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({ visible: newState });\n      }\n      setBaseMapVisible(newState);\n    }\n  }, [baseMapVisible, activeViewport]);\n\n  const [baseLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.BaseLayer\"));\n  const [selectBaseMapLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.SelectBaseMap\"));\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n\n  return (\n    <>\n      <span className=\"map-manager-base-label\">{baseLayerLabel}</span>\n      <div className=\"map-manager-base-item\">\n        <IconButton\n          data-testid=\"base-map-visibility-icon-button\"\n          className=\"map-manager-basemap-visibility\"\n          styleType=\"borderless\"\n           size=\"small\" label={toggleVisibility}\n           onClick={handleVisibilityChange}\n           disabled={props.disabled || !activeViewport || !(activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings)}>\n        {baseMapVisible\n          ? <SvgVisibilityShow data-testid=\"layer-visibility-icon-show\" />\n          : <SvgVisibilityHide data-testid=\"layer-visibility-icon-hide\" />}\n        </IconButton>\n        <Select\n          data-testid=\"base-map-select\"\n          className=\"map-manager-base-item-select\"\n          options={baseMapOptions}\n          placeholder={selectBaseMapLabel}\n          value={selectedBaseMapValue.value}\n          onChange={handleBaseMapSelection}\n          size=\"small\"\n          disabled={props.disabled}\n        />\n        {baseIsColor && (\n          <Popover\n            content={\n              <ColorPicker\n                selectedColor={ColorValue.fromTbgr(bgColor)}\n                onChangeComplete={handleBackgroundColorDialogOk}\n              >\n                <ColorBuilder />\n                <ColorInputPanel defaultColorFormat='rgb' />\n                <ColorPalette\n                  label=\"Preset Colors\"\n                  colors={presetColors}\n                />\n              </ColorPicker>\n            }\n          >\n            <IconButton label='Show color picker' styleType='borderless' className='map-manager-base-item-color components-color-swatch'>\n              <ColorSwatch color={ColorValue.fromTbgr(bgColor)} />\n            </IconButton>\n          </Popover>\n        )}\n        <TransparencyPopupButton disabled={props.disabled} transparency={baseMapTransparencyValue} onTransparencyChange={handleBasemapTransparencyChange} />\n      </div>\n    </>\n  );\n}\n"]}

package/lib/cjs/ui/widget/MapLayerDroppable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerDroppable.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAiBlC,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAI5E,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtF,6BAA6B,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjF,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwBD,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAyP9D"}
+{"version":3,"file":"MapLayerDroppable.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAiBlC,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAI5E,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtF,6BAA6B,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjF,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmBD,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAkP9D"}

package/lib/cjs/ui/widget/MapLayerDroppable.js

@@ -60,11 +60,6 @@ const StrictModeDroppable = ({ children, ...props }) => {
     }
     return (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { ...props, children: children });
 };
-const changeVisibilityByElementId = (element, visible) => {
-    if (element) {
-        element.setAttribute("style", `visibility: ${visible ? "visible" : "hidden"}`);
-    }
-};
 /** @internal */
 function MapLayerDroppable(props) {
     const containsLayer = props.layersList && props.layersList.length > 0;
@@ -106,15 +101,11 @@ function MapLayerDroppable(props) {
         vp.resetMapLayer(index);
         props.onItemEdited();
     }, [props]);
-    const changeSettingsMenuVisibility = (event, visible) => {
-        changeVisibilityByElementId(event.currentTarget.querySelector("#MapLayerSettingsMenuWrapper"), visible);
-        changeVisibilityByElementId(event.currentTarget.querySelector("#MapLayerSettingsSubLayersMenu"), visible);
-    };
     const renderItem = (dragProvided, _, rubric) => {
         (0, core_bentley_1.assert)(props.layersList !== undefined);
         const activeLayer = props.layersList[rubric.source.index];
         const outOfRange = activeLayer.treeVisibility === core_frontend_1.MapTileTreeScaleRangeVisibility.Hidden;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "map-manager-source-item", "data-id": rubric.source.index, ...dragProvided.draggableProps, ref: dragProvided.innerRef, onMouseEnter: (event) => changeSettingsMenuVisibility(event, true), onMouseLeave: (event) => changeSettingsMenuVisibility(event, false), children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Checkbox, { "data-testid": "select-item-checkbox", checked: activeLayer.selected, onChange: (event) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "map-manager-source-item", "data-id": rubric.source.index, ...dragProvided.draggableProps, ref: dragProvided.innerRef, children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Checkbox, { "data-testid": "select-item-checkbox", checked: activeLayer.selected, onChange: (event) => {
                         activeLayer.selected = event.target.checked;
                         props.onItemSelected(props.isOverlay, rubric.source.index);
                     } }), (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { disabled: props.disabled, size: "small", styleType: "borderless", className: "map-manager-item-visibility", label: toggleVisibility, onClick: () => {
@@ -130,7 +121,7 @@ function MapLayerDroppable(props) {
                                             }, mapLayerOptions: props.mapLayerOptions }));
                                     }
                                 }
-                            }, label: requireAuthTooltip, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgStatusWarning, {}) }))] }), (0, jsx_runtime_1.jsx)("div", { id: "MapLayerSettingsSubLayersMenu", className: "map-manager-item-sub-layer-container map-manager-hidden", children: activeLayer.subLayers && activeLayer.subLayers.length > 1 && ((0, jsx_runtime_1.jsx)(SubLayersPopupButton_1.SubLayersPopupButton, { checkboxStyle: "eye", expandMode: "rootGroupOnly", subLayers: props.activeViewport ? activeLayer.subLayers : undefined, singleVisibleSubLayer: activeLayer.provider?.mutualExclusiveSubLayer, onSubLayerStateChange: (subLayerId, isSelected) => {
+                            }, label: requireAuthTooltip, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgStatusWarning, {}) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "map-manager-item-sub-layer-container map-layer-settings-sublayers-menu", children: activeLayer.subLayers && activeLayer.subLayers.length > 1 && ((0, jsx_runtime_1.jsx)(SubLayersPopupButton_1.SubLayersPopupButton, { checkboxStyle: "eye", expandMode: "rootGroupOnly", subLayers: props.activeViewport ? activeLayer.subLayers : undefined, singleVisibleSubLayer: activeLayer.provider?.mutualExclusiveSubLayer, onSubLayerStateChange: (subLayerId, isSelected) => {
                             onSubLayerStateChange(activeLayer, subLayerId, isSelected);
                         } })) }), activeLayer.provider?.status === core_frontend_1.MapLayerImageryProviderStatus.RequireAuth && ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { disabled: props.disabled, size: "small", styleType: "borderless", onClick: () => {
                         const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);
@@ -143,7 +134,7 @@ function MapLayerDroppable(props) {
                                     }, mapLayerOptions: props.mapLayerOptions }));
                             }
                         }
-                    }, label: requireAuthTooltip, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgStatusWarning, {}) })), (0, jsx_runtime_1.jsx)("div", { id: "MapLayerSettingsMenuWrapper", className: "map-manager-hidden", children: (0, jsx_runtime_1.jsx)(MapLayerSettingsMenu_1.MapLayerSettingsMenu, { activeViewport: props.activeViewport, mapLayerSettings: activeLayer, onMenuItemSelection: props.onMenuItemSelected, disabled: props.disabled }) })] }, activeLayer.name));
+                    }, label: requireAuthTooltip, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgStatusWarning, {}) })), (0, jsx_runtime_1.jsx)("div", { className: "map-layer-settings-menu-wrapper", children: (0, jsx_runtime_1.jsx)(MapLayerSettingsMenu_1.MapLayerSettingsMenu, { activeViewport: props.activeViewport, mapLayerSettings: activeLayer, onMenuItemSelection: props.onMenuItemSelected, disabled: props.disabled }) })] }, activeLayer.name));
     };
     function renderDraggableContent(snapshot) {
         let node;