254 lines
6.9 KiB
Markdown
254 lines
6.9 KiB
Markdown
# RobotNet10.MapEditor
|
|
|
|
Map Editor UI component library for RobotNet10 system.
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
RobotNet10.MapEditor/
|
|
├── Pages/
|
|
│ └── LayoutManager.razor ⭐ Main page
|
|
│
|
|
├── Components/
|
|
│ ├── LayoutManager/
|
|
│ │ ├── LayoutTreePanel.razor ⭐ Tree hierarchy (Left panel)
|
|
│ │ ├── LayoutPreviewPanel.razor ⭐ Preview + Actions (Right panel)
|
|
│ │ └── Dialogs/
|
|
│ │ ├── CreateLayoutDialog.razor
|
|
│ │ ├── CreateVersionDialog.razor
|
|
│ │ ├── CreateLevelDialog.razor
|
|
│ │ ├── ImportLayoutDialog.razor
|
|
│ │ └── ExportLayoutDialog.razor
|
|
│ │
|
|
│ └── Shared/
|
|
│ └── SvgPreviewCanvas.razor ⭐ SVG mini preview
|
|
│
|
|
├── Services/
|
|
│ ├── API/
|
|
│ │ └── MapManagerApiService.cs ⭐ HTTP client wrapper
|
|
│ │
|
|
│ └── State/
|
|
│ └── LayoutManagerState.cs ⭐ State management
|
|
│
|
|
├── Models/
|
|
│ └── TreeItemModel.cs ⭐ Tree node model
|
|
│
|
|
├── _Imports.razor ⭐ Global imports
|
|
└── RobotNet10.MapEditor.csproj
|
|
```
|
|
|
|
## 🎯 Features
|
|
|
|
### LayoutManager Page
|
|
|
|
**Left Panel - Layout Tree:**
|
|
- ✅ Hierarchical view: Layout → Version → Level
|
|
- ✅ Context menu for each item
|
|
- ✅ Create/Delete operations
|
|
- ✅ Activate/Deactivate layouts
|
|
- ✅ Search functionality
|
|
|
|
**Right Panel - Preview:**
|
|
- ✅ SVG-based mini preview
|
|
- ✅ Shows background image, nodes, edges, stations
|
|
- ✅ Layout information display
|
|
- ✅ Editor settings (expandable)
|
|
- ✅ Edit and Export buttons
|
|
|
|
**Dialogs:**
|
|
- ✅ Create Layout (LayoutId, LayoutName, Description)
|
|
- ✅ Create Version (Version number, Description)
|
|
- ✅ Create Level (LevelId, Order, Editor settings)
|
|
- ✅ Import LIF (Upload JSON - placeholder)
|
|
- ✅ Export LIF (Download JSON - placeholder)
|
|
|
|
## 🔧 Dependencies
|
|
|
|
**NuGet Packages:**
|
|
- `Microsoft.AspNetCore.Components.Web` (10.0.0)
|
|
- `Microsoft.Extensions.Http` (10.0.0)
|
|
|
|
**Project References:**
|
|
- `RobotNet10.Components` (for MudBlazor)
|
|
- `RobotNet10.MapEditor.Shared` (for DTOs)
|
|
|
|
## 🚀 Usage
|
|
|
|
### 1. Register Services
|
|
|
|
In your Blazor application's `Program.cs`:
|
|
|
|
```csharp
|
|
using RobotNet10.MapEditor.Services.API;
|
|
using RobotNet10.MapEditor.Services.State;
|
|
|
|
var builder = WebApplication.CreateBuilder(args);
|
|
|
|
// Add HttpClient for MapManager API
|
|
builder.Services.AddHttpClient<MapManagerApiService>();
|
|
|
|
// Add State Management
|
|
builder.Services.AddScoped<LayoutManagerState>();
|
|
|
|
// Add MudBlazor (if not already added)
|
|
builder.Services.AddMudServices();
|
|
|
|
var app = builder.Build();
|
|
```
|
|
|
|
### 2. Configure API Base URL
|
|
|
|
In `appsettings.json`:
|
|
|
|
```json
|
|
{
|
|
"MapManagerApi": {
|
|
"BaseUrl": "https://localhost:5001"
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. Add Route to Navigation
|
|
|
|
Navigate to the page:
|
|
|
|
```csharp
|
|
Navigation.NavigateTo("/layout-manager");
|
|
```
|
|
|
|
Or add to navigation menu:
|
|
|
|
```razor
|
|
<MudNavLink Href="/layout-manager" Icon="@Icons.Material.Filled.Map">
|
|
Layout Manager
|
|
</MudNavLink>
|
|
```
|
|
|
|
## 📊 API Integration
|
|
|
|
The `MapManagerApiService` provides methods for:
|
|
|
|
**Layouts:**
|
|
- `SearchLayoutsAsync(search?)` - Get all layouts (with nested Versions & Levels)
|
|
- `CreateLayoutAsync(request)` - Create new layout
|
|
- `DeleteLayoutAsync(layoutId)` - Delete layout
|
|
- `ActivateLayoutAsync(layoutId)` - Activate layout
|
|
- `DeactivateLayoutAsync(layoutId)` - Deactivate layout
|
|
|
|
**Versions:**
|
|
- `CreateVersionAsync(layoutId, request)` - Create new version
|
|
- `GetVersionsAsync(layoutId)` - Get all versions
|
|
- `DeleteVersionAsync(versionId)` - Delete version
|
|
|
|
**Levels:**
|
|
- `CreateLevelAsync(versionId, request)` - Create new level
|
|
- `GetLevelsAsync(versionId)` - Get all levels
|
|
- `DeleteLevelAsync(levelId)` - Delete level
|
|
|
|
**Data & Images:**
|
|
- `GetLayoutDataAsync(levelId)` - Get nodes, edges, stations
|
|
- `GetLayoutImageAsync(levelId)` - Get background image
|
|
- `UploadLayoutImageAsync(levelId, stream, fileName)` - Upload image
|
|
|
|
## 🎨 State Management
|
|
|
|
The `LayoutManagerState` manages:
|
|
|
|
- **Data:** List of layouts with nested structure
|
|
- **Selection:** Currently selected layout, version, level
|
|
- **Preview:** Layout data and background image
|
|
- **UI State:** Loading states, search text
|
|
|
|
**Events:**
|
|
- `OnStateChanged` - Fired when state changes (for UI updates)
|
|
|
|
**Key Methods:**
|
|
- `LoadLayoutsAsync(search?)` - Load/reload all layouts
|
|
- `SelectLevelAsync(level)` - Select level and load preview
|
|
- `CreateLayoutAsync(request)` - Create and reload
|
|
- `DeleteLayoutAsync(layoutId)` - Delete and clear selection if needed
|
|
|
|
## 🔍 Component Details
|
|
|
|
### LayoutTreePanel
|
|
|
|
**Features:**
|
|
- MudTreeView with 3 levels (Layout → Version → Level)
|
|
- Context menu for each item
|
|
- Color-coded badges (Active status)
|
|
- Auto-expand when item is selected
|
|
|
|
**Context Menu Actions:**
|
|
- **Layout:** Add Version, Edit, Activate/Deactivate, Delete
|
|
- **Version:** Add Level, Delete
|
|
- **Level:** Edit, Upload Image, Delete
|
|
|
|
### LayoutPreviewPanel
|
|
|
|
**Features:**
|
|
- SVG preview canvas (auto-scaled to content)
|
|
- Layout information grid
|
|
- Expandable editor settings panel
|
|
- Action buttons (Edit, Export, Refresh)
|
|
|
|
### SvgPreviewCanvas
|
|
|
|
**Features:**
|
|
- Responsive SVG with auto-calculated viewBox
|
|
- Background image overlay (if available)
|
|
- Edges rendered as lines
|
|
- Nodes rendered as circles
|
|
- Stations rendered as rectangles
|
|
|
|
## ⚠️ Known Limitations
|
|
|
|
1. **Import/Export:** Backend endpoints not yet implemented
|
|
- Placeholders in `ImportLayoutDialog` and `ExportLayoutDialog`
|
|
- Will need to implement when backend is ready
|
|
|
|
2. **Upload Image:** Not yet implemented in tree context menu
|
|
- Need to create image upload dialog
|
|
|
|
3. **Edit Dialogs:** Update dialogs not yet created
|
|
- Edit Layout: TODO
|
|
- Edit Level: TODO
|
|
|
|
## 🔄 Next Steps
|
|
|
|
1. Implement Import/Export backend endpoints
|
|
2. Create image upload dialog component
|
|
3. Create update/edit dialogs
|
|
4. Add validation and error handling
|
|
5. Implement LayoutEditor page (SVG canvas editor)
|
|
|
|
## 📝 Notes
|
|
|
|
- All coordinates are in **meters** (VDMA LIF standard)
|
|
- Tree automatically expands to show selected item
|
|
- Preview auto-refreshes when level is selected
|
|
- State is scoped service (per user session)
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
**No layouts showing:**
|
|
- Check API base URL in `appsettings.json`
|
|
- Verify MapManager backend is running
|
|
- Check browser console for API errors
|
|
|
|
**Preview not loading:**
|
|
- Ensure level has data (nodes, edges)
|
|
- Check if background image exists
|
|
- Verify LayoutDataController is working
|
|
|
|
**Dialogs not working:**
|
|
- Ensure MudBlazor is properly configured
|
|
- Check DialogService is registered
|
|
- Verify Snackbar service is available
|
|
|
|
---
|
|
|
|
**Last Updated:** 2024-12-01
|
|
**Version:** 1.0
|
|
**Status:** ✅ MVP Complete (LayoutManager Page)
|
|
|