navigationRegions = new()
+ {
+ new RectangleHotSpot
+ {
+ Left = 20, Top = 50, Right = 180, Bottom = 120,
+ AlternateText = "Home Page",
+ NavigateUrl = "/"
+ },
+ new RectangleHotSpot
+ {
+ Left = 200, Top = 50, Right = 360, Bottom = 120,
+ AlternateText = "Products",
+ NavigateUrl = "/products"
+ },
+ new RectangleHotSpot
+ {
+ Left = 380, Top = 50, Right = 540, Bottom = 120,
+ AlternateText = "Contact Us",
+ NavigateUrl = "/contact"
+ }
+ };
+}
+```
+
+### Interactive Diagram with PostBack
+
+```razor
+@page "/floor-plan"
+
+Office Floor Plan
+Click on a room to see details
+
+
+
+@if (!string.IsNullOrEmpty(selectedRoom))
+{
+
+
@selectedRoom
+
@roomDetails
+
+
+
+}
+
+@code {
+ private string GetAltText()
+ {
+ if (!string.IsNullOrEmpty(AlternateText))
+ return AlternateText;
+ if (GenerateEmptyAlternateText)
+ return "";
+ return null;
+ }
+
+ private string GetId()
+ {
+ return !string.IsNullOrEmpty(ClientID) ? ClientID : null;
+ }
+
+ private string GetCssClassOrNull()
+ {
+ return !string.IsNullOrEmpty(CssClass) ? CssClass : null;
+ }
+
+ private string GetTitle()
+ {
+ return !string.IsNullOrEmpty(ToolTip) ? ToolTip : null;
+ }
+
+ private string GetLongDesc()
+ {
+ return !string.IsNullOrEmpty(DescriptionUrl) ? DescriptionUrl : null;
+ }
+
+ private string GetAlign()
+ {
+ return ImageAlign != Enums.ImageAlign.NotSet ? ImageAlign.ToString().ToLower() : null;
+ }
+
+ private string GetTargetOrNull(string target)
+ {
+ return !string.IsNullOrEmpty(target) ? target : null;
+ }
+
+ private string GetTabIndexOrNull(short tabIndex)
+ {
+ return tabIndex > 0 ? tabIndex.ToString() : null;
+ }
+
+ private string GetAccessKeyOrNull(string accessKey)
+ {
+ return !string.IsNullOrEmpty(accessKey) ? accessKey : null;
+ }
+}
diff --git a/src/BlazorWebFormsComponents/ImageMap.razor.cs b/src/BlazorWebFormsComponents/ImageMap.razor.cs
new file mode 100644
index 00000000..a02304d7
--- /dev/null
+++ b/src/BlazorWebFormsComponents/ImageMap.razor.cs
@@ -0,0 +1,97 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using BlazorWebFormsComponents.Enums;
+using BlazorWebFormsComponents.Interfaces;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorWebFormsComponents
+{
+ ///
+ /// Creates an image map control that displays an image with defined clickable hot spot regions.
+ ///
+ public partial class ImageMap : BaseStyledComponent, IImageComponent
+ {
+ ///
+ /// Gets or sets the alternate text to display in the ImageMap control when the image is unavailable.
+ ///
+ [Parameter]
+ public string AlternateText { get; set; } = string.Empty;
+
+ ///
+ /// Gets or sets the URL to a detailed description of the image in the ImageMap control.
+ ///
+ [Parameter]
+ public string DescriptionUrl { get; set; } = string.Empty;
+
+ ///
+ /// Gets or sets the alignment of the Image control in relation to other elements on the Web page.
+ ///
+ [Parameter]
+ public ImageAlign ImageAlign { get; set; } = ImageAlign.NotSet;
+
+ ///
+ /// Gets or sets the URL to the image to display in the ImageMap control.
+ ///
+ [Parameter]
+ public string ImageUrl { get; set; } = string.Empty;
+
+ ///
+ /// Gets or sets the ToolTip text for the ImageMap control.
+ ///
+ [Parameter]
+ public string ToolTip { get; set; } = string.Empty;
+
+ ///
+ /// Gets or sets the default behavior for the HotSpot objects in the ImageMap control when the HotSpot objects are clicked.
+ ///
+ [Parameter]
+ public HotSpotMode HotSpotMode { get; set; } = HotSpotMode.Navigate;
+
+ ///
+ /// Gets or sets the target window or frame in which to display the Web page content linked to when a HotSpot object in an ImageMap control is clicked.
+ ///
+ [Parameter]
+ public string Target { get; set; } = string.Empty;
+
+ ///
+ /// Gets the collection of HotSpot objects defined in the ImageMap control.
+ ///
+ [Parameter]
+ public List HotSpots { get; set; } = new List();
+
+ ///
+ /// Occurs when a HotSpot object in an ImageMap control is clicked.
+ ///
+ [Parameter]
+ public EventCallback OnClick { get; set; }
+
+ ///
+ /// Gets or sets a value that indicates whether the ImageMap control generates an empty alternate text attribute.
+ ///
+ [Parameter]
+ public bool GenerateEmptyAlternateText { get; set; }
+
+ private readonly string _mapId = $"ImageMap_{Guid.NewGuid():N}";
+
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+ }
+
+ ///
+ /// Handles the click event for a hot spot.
+ ///
+ /// The hot spot that was clicked
+ protected async Task HandleHotSpotClick(HotSpot hotSpot)
+ {
+ var effectiveMode = hotSpot.HotSpotMode != HotSpotMode.NotSet ? hotSpot.HotSpotMode : HotSpotMode;
+
+ if (effectiveMode == HotSpotMode.PostBack)
+ {
+ var eventArgs = new ImageMapEventArgs(hotSpot.PostBackValue);
+ await OnClick.InvokeAsync(eventArgs);
+ }
+ }
+ }
+}
diff --git a/src/BlazorWebFormsComponents/ImageMapEventArgs.cs b/src/BlazorWebFormsComponents/ImageMapEventArgs.cs
new file mode 100644
index 00000000..dcb1d4a0
--- /dev/null
+++ b/src/BlazorWebFormsComponents/ImageMapEventArgs.cs
@@ -0,0 +1,24 @@
+using System;
+
+namespace BlazorWebFormsComponents
+{
+ ///
+ /// Provides data for the Click event of an ImageMap control.
+ ///
+ public class ImageMapEventArgs : EventArgs
+ {
+ ///
+ /// Gets the PostBackValue associated with the HotSpot object in the ImageMap control that was clicked.
+ ///
+ public string PostBackValue { get; }
+
+ ///
+ /// Initializes a new instance of the ImageMapEventArgs class.
+ ///
+ /// The string assigned to the PostBackValue property of the HotSpot object that was clicked.
+ public ImageMapEventArgs(string postBackValue)
+ {
+ PostBackValue = postBackValue;
+ }
+ }
+}
diff --git a/src/BlazorWebFormsComponents/PolygonHotSpot.cs b/src/BlazorWebFormsComponents/PolygonHotSpot.cs
new file mode 100644
index 00000000..4f672795
--- /dev/null
+++ b/src/BlazorWebFormsComponents/PolygonHotSpot.cs
@@ -0,0 +1,25 @@
+namespace BlazorWebFormsComponents
+{
+ ///
+ /// Defines a polygon-shaped hot spot region in an ImageMap control.
+ ///
+ public class PolygonHotSpot : HotSpot
+ {
+ ///
+ /// Gets or sets a string of coordinates that represents the vertexes of a PolygonHotSpot object.
+ ///
+ public string Coordinates { get; set; } = string.Empty;
+
+ ///
+ /// Gets the shape type for this hot spot.
+ ///
+ /// "poly"
+ public override string GetShapeType() => "poly";
+
+ ///
+ /// Gets the coordinates for this polygonal hot spot.
+ ///
+ /// A comma-separated string of x,y coordinate pairs
+ public override string GetCoordinates() => Coordinates;
+ }
+}
diff --git a/src/BlazorWebFormsComponents/RectangleHotSpot.cs b/src/BlazorWebFormsComponents/RectangleHotSpot.cs
new file mode 100644
index 00000000..2409a299
--- /dev/null
+++ b/src/BlazorWebFormsComponents/RectangleHotSpot.cs
@@ -0,0 +1,40 @@
+namespace BlazorWebFormsComponents
+{
+ ///
+ /// Defines a rectangular hot spot region in an ImageMap control.
+ ///
+ public class RectangleHotSpot : HotSpot
+ {
+ ///
+ /// Gets or sets the x-coordinate of the left side of the rectangular region defined by this RectangleHotSpot object.
+ ///
+ public int Left { get; set; }
+
+ ///
+ /// Gets or sets the y-coordinate of the top of the rectangular region defined by this RectangleHotSpot object.
+ ///
+ public int Top { get; set; }
+
+ ///
+ /// Gets or sets the x-coordinate of the right side of the rectangular region defined by this RectangleHotSpot object.
+ ///
+ public int Right { get; set; }
+
+ ///
+ /// Gets or sets the y-coordinate of the bottom of the rectangular region defined by this RectangleHotSpot object.
+ ///
+ public int Bottom { get; set; }
+
+ ///
+ /// Gets the shape type for this hot spot.
+ ///
+ /// "rect"
+ public override string GetShapeType() => "rect";
+
+ ///
+ /// Gets the coordinates for this rectangular hot spot.
+ ///
+ /// A comma-separated string of coordinates in format: left,top,right,bottom
+ public override string GetCoordinates() => $"{Left},{Top},{Right},{Bottom}";
+ }
+}
diff --git a/status.md b/status.md
index 208cd7dc..b5d55381 100644
--- a/status.md
+++ b/status.md
@@ -2,18 +2,18 @@
| Category | Completed | In Progress | Not Started | Total |
|----------|-----------|-------------|-------------|-------|
-| Editor Controls | 17 | 0 | 10 | 27 |
+| Editor Controls | 18 | 0 | 9 | 27 |
| Data Controls | 7 | 0 | 2 | 9 |
| Validation Controls | 7 | 0 | 0 | 7 |
| Navigation Controls | 3 | 0 | 0 | 3 |
| Login Controls | 4 | 0 | 3 | 7 |
-| **TOTAL** | **38** | **0** | **15** | **53** |
+| **TOTAL** | **39** | **0** | **14** | **53** |
---
## Detailed Component Breakdown
-### 🟡 Editor Controls (15/27 - 56% Complete)
+### 🟡 Editor Controls (18/27 - 67% Complete)
| Component | Status | Notes |
|-----------|--------|-------|
@@ -34,7 +34,7 @@
| Calendar | 🔴 Not Started | Complex date picker |
| CheckBoxList | ✅ Complete | Documented, tested (26 tests) |
| FileUpload | 🔴 Not Started | Consider Blazor InputFile |
-| ImageMap | 🔴 Not Started | Clickable image regions |
+| ImageMap | ✅ Complete | Documented, tested (23 tests) |
| ListBox | ✅ Complete | Documented, tested, supports single/multi-select |
| Localize | 🔴 Not Started | Localization control |
| MultiView | 🔴 Not Started | Tab container |
@@ -143,12 +143,12 @@
#### Lower Priority / Consider Deferring
| Component | Complexity | Notes |
|-----------|------------|-------|
-| **BulletedList** | Low | Simple HTML list |
+| ~~**BulletedList**~~ | ~~Low~~ | ~~Simple HTML list~~ | ✅ Complete |
| **Calendar** | High | Complex date picker |
| **FileUpload** | Medium | Blazor has InputFile |
-| **ImageMap** | Medium | Clickable regions |
+| ~~**ImageMap**~~ | ~~Medium~~ | ~~Clickable regions~~ | ✅ Complete |
| **MultiView/View** | Medium | Tab-like container |
-| **Table** | Low | HTML table wrapper |
+| ~~**Table**~~ | ~~Low~~ | ~~HTML table wrapper~~ | ✅ Complete |
| **Localize** | Low | Localization |
| **Xml** | Medium | XML transform |
| **Substitution** | N/A | Cache-related, may not apply |