Initial commit
This commit is contained in:
253
srcs/RobotNet10/Components/RobotNet10.MapEditor/README.md
Normal file
253
srcs/RobotNet10/Components/RobotNet10.MapEditor/README.md
Normal file
@@ -0,0 +1,253 @@
|
||||
# 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)
|
||||
|
||||
Reference in New Issue
Block a user