Network map enhancements and fixes
This commit is contained in:
@@ -1,6 +1,52 @@
|
||||
import 'package:brick_offline_first_with_supabase/brick_offline_first_with_supabase.dart';
|
||||
import 'package:brick_supabase/brick_supabase.dart';
|
||||
|
||||
enum NetworkDeviceStatus {
|
||||
online,
|
||||
offline,
|
||||
warning,
|
||||
unknown;
|
||||
|
||||
String get wire {
|
||||
switch (this) {
|
||||
case NetworkDeviceStatus.online:
|
||||
return 'online';
|
||||
case NetworkDeviceStatus.offline:
|
||||
return 'offline';
|
||||
case NetworkDeviceStatus.warning:
|
||||
return 'warning';
|
||||
case NetworkDeviceStatus.unknown:
|
||||
return 'unknown';
|
||||
}
|
||||
}
|
||||
|
||||
String get label {
|
||||
switch (this) {
|
||||
case NetworkDeviceStatus.online:
|
||||
return 'Online';
|
||||
case NetworkDeviceStatus.offline:
|
||||
return 'Offline';
|
||||
case NetworkDeviceStatus.warning:
|
||||
return 'Warning';
|
||||
case NetworkDeviceStatus.unknown:
|
||||
return 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
static NetworkDeviceStatus fromWire(String? value) {
|
||||
switch (value) {
|
||||
case 'online':
|
||||
return NetworkDeviceStatus.online;
|
||||
case 'offline':
|
||||
return NetworkDeviceStatus.offline;
|
||||
case 'warning':
|
||||
return NetworkDeviceStatus.warning;
|
||||
default:
|
||||
return NetworkDeviceStatus.unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum NetworkDeviceKind {
|
||||
router,
|
||||
switchDevice,
|
||||
@@ -173,6 +219,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
final String? mac;
|
||||
final String? locationId;
|
||||
final NetworkImportSource importSource;
|
||||
final NetworkDeviceStatus status;
|
||||
final String? notes;
|
||||
final DateTime createdAt;
|
||||
final DateTime updatedAt;
|
||||
@@ -189,6 +236,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
this.mac,
|
||||
this.locationId,
|
||||
this.importSource = NetworkImportSource.manual,
|
||||
this.status = NetworkDeviceStatus.unknown,
|
||||
this.notes,
|
||||
required this.createdAt,
|
||||
required this.updatedAt,
|
||||
@@ -207,6 +255,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
mac: map['mac']?.toString(),
|
||||
locationId: map['location_id'] as String?,
|
||||
importSource: NetworkImportSource.fromWire(map['import_source'] as String?),
|
||||
status: NetworkDeviceStatus.fromWire(map['status'] as String?),
|
||||
notes: map['notes'] as String?,
|
||||
createdAt:
|
||||
DateTime.tryParse(map['created_at']?.toString() ?? '') ?? DateTime.now(),
|
||||
@@ -226,6 +275,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
if (mac != null) 'mac': mac,
|
||||
if (locationId != null) 'location_id': locationId,
|
||||
'import_source': importSource.wire,
|
||||
'status': status.wire,
|
||||
if (notes != null) 'notes': notes,
|
||||
};
|
||||
|
||||
@@ -239,6 +289,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
'mgmt_ip': mgmtIp,
|
||||
'mac': mac,
|
||||
'location_id': locationId,
|
||||
'status': status.wire,
|
||||
'notes': notes,
|
||||
};
|
||||
|
||||
@@ -252,6 +303,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
String? mgmtIp,
|
||||
String? mac,
|
||||
String? locationId,
|
||||
NetworkDeviceStatus? status,
|
||||
String? notes,
|
||||
}) {
|
||||
return NetworkDevice(
|
||||
@@ -266,6 +318,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
|
||||
mac: mac ?? this.mac,
|
||||
locationId: locationId ?? this.locationId,
|
||||
importSource: importSource,
|
||||
status: status ?? this.status,
|
||||
notes: notes ?? this.notes,
|
||||
createdAt: createdAt,
|
||||
updatedAt: updatedAt,
|
||||
|
||||
@@ -78,6 +78,7 @@ class NetworkDevicesController {
|
||||
String? mac,
|
||||
String? locationId,
|
||||
NetworkImportSource importSource = NetworkImportSource.manual,
|
||||
NetworkDeviceStatus status = NetworkDeviceStatus.unknown,
|
||||
String? notes,
|
||||
}) async {
|
||||
final client = ref.read(supabaseClientProvider);
|
||||
@@ -94,6 +95,7 @@ class NetworkDevicesController {
|
||||
'mac': ?mac,
|
||||
'location_id': ?locationId,
|
||||
'import_source': importSource.wire,
|
||||
'status': status.wire,
|
||||
'notes': ?notes,
|
||||
})
|
||||
.select()
|
||||
|
||||
@@ -39,6 +39,7 @@ class _NetworkMapDeviceEditScreenState
|
||||
final _notesCtrl = TextEditingController();
|
||||
NetworkDeviceKind _kind = NetworkDeviceKind.switchDevice;
|
||||
NetworkDeviceRole? _role;
|
||||
NetworkDeviceStatus _status = NetworkDeviceStatus.unknown;
|
||||
String? _siteId;
|
||||
String? _locationId;
|
||||
bool _saving = false;
|
||||
@@ -67,7 +68,7 @@ class _NetworkMapDeviceEditScreenState
|
||||
_notesCtrl.text = d.notes ?? '';
|
||||
_kind = d.kind;
|
||||
_role = d.role;
|
||||
// Resolve the device's location → its site for the pickers.
|
||||
_status = d.status;
|
||||
if (d.locationId != null) {
|
||||
_locationId = d.locationId;
|
||||
for (final l in locations) {
|
||||
@@ -179,6 +180,7 @@ class _NetworkMapDeviceEditScreenState
|
||||
name: _nameCtrl.text.trim(),
|
||||
kind: _kind,
|
||||
role: _role,
|
||||
status: _status,
|
||||
vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
|
||||
model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
|
||||
serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
|
||||
@@ -195,6 +197,7 @@ class _NetworkMapDeviceEditScreenState
|
||||
name: _nameCtrl.text.trim(),
|
||||
kind: _kind,
|
||||
role: _role,
|
||||
status: _status,
|
||||
vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
|
||||
model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
|
||||
serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
|
||||
@@ -219,6 +222,20 @@ class _NetworkMapDeviceEditScreenState
|
||||
);
|
||||
}
|
||||
|
||||
Icon _statusIcon(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
switch (_status) {
|
||||
case NetworkDeviceStatus.online:
|
||||
return const Icon(Icons.circle, size: 14, color: Color(0xFF388E3C));
|
||||
case NetworkDeviceStatus.offline:
|
||||
return Icon(Icons.circle, size: 14, color: cs.error);
|
||||
case NetworkDeviceStatus.warning:
|
||||
return const Icon(Icons.circle, size: 14, color: Color(0xFFF57C00));
|
||||
case NetworkDeviceStatus.unknown:
|
||||
return Icon(Icons.circle_outlined, size: 14, color: cs.onSurfaceVariant);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final existingAsync = widget.deviceId == null
|
||||
@@ -227,8 +244,6 @@ class _NetworkMapDeviceEditScreenState
|
||||
final sitesAsync = ref.watch(networkSitesProvider);
|
||||
final locationsAsync = ref.watch(networkLocationsProvider);
|
||||
|
||||
// For a new device under a specific site (from the /site/:id/device/new
|
||||
// route), pre-fill the site picker so the user can save without picking.
|
||||
if (!_initialized && widget.deviceId == null && widget.initialSiteId != null) {
|
||||
_siteId = widget.initialSiteId;
|
||||
}
|
||||
@@ -241,9 +256,18 @@ class _NetworkMapDeviceEditScreenState
|
||||
),
|
||||
title: Text(widget.deviceId == null ? 'New device' : 'Edit device'),
|
||||
actions: [
|
||||
TextButton(
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: FilledButton(
|
||||
onPressed: _saving ? null : _save,
|
||||
child: _saving ? const Text('Saving…') : const Text('Save'),
|
||||
child: _saving
|
||||
? const SizedBox(
|
||||
width: 16,
|
||||
height: 16,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: const Text('Save'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -262,53 +286,92 @@ class _NetworkMapDeviceEditScreenState
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// ── Identity ────────────────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.badge_outlined,
|
||||
title: 'Identity',
|
||||
children: [
|
||||
TextFormField(
|
||||
controller: _nameCtrl,
|
||||
autofocus: widget.deviceId == null,
|
||||
decoration: const InputDecoration(labelText: 'Name *'),
|
||||
validator: (v) => (v == null || v.trim().isEmpty)
|
||||
? 'Name is required'
|
||||
: null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
DropdownButtonFormField<NetworkDeviceKind>(
|
||||
_FieldRow(
|
||||
left: DropdownButtonFormField<NetworkDeviceKind>(
|
||||
initialValue: _kind,
|
||||
items: NetworkDeviceKind.values
|
||||
.map((k) =>
|
||||
DropdownMenuItem(value: k, child: Text(k.label)))
|
||||
.map((k) => DropdownMenuItem(
|
||||
value: k,
|
||||
child: Text(k.label),
|
||||
))
|
||||
.toList(),
|
||||
onChanged: (v) => setState(() => _kind = v ?? _kind),
|
||||
decoration: const InputDecoration(labelText: 'Type *'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
DropdownButtonFormField<NetworkDeviceRole?>(
|
||||
right: DropdownButtonFormField<NetworkDeviceRole?>(
|
||||
initialValue: _role,
|
||||
items: [
|
||||
const DropdownMenuItem<NetworkDeviceRole?>(
|
||||
value: null, child: Text('(none)')),
|
||||
value: null,
|
||||
child: Text('(none)'),
|
||||
),
|
||||
for (final r in NetworkDeviceRole.values)
|
||||
DropdownMenuItem(value: r, child: Text(r.label)),
|
||||
],
|
||||
onChanged: (v) => setState(() => _role = v),
|
||||
decoration:
|
||||
const InputDecoration(labelText: 'Logical role'),
|
||||
decoration: const InputDecoration(labelText: 'Role'),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
DropdownButtonFormField<NetworkDeviceStatus>(
|
||||
initialValue: _status,
|
||||
items: NetworkDeviceStatus.values
|
||||
.map((s) => DropdownMenuItem(
|
||||
value: s,
|
||||
child: Text(s.label),
|
||||
))
|
||||
.toList(),
|
||||
onChanged: (v) => setState(
|
||||
() => _status = v ?? NetworkDeviceStatus.unknown),
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Status',
|
||||
prefixIcon: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: _statusIcon(context),
|
||||
),
|
||||
prefixIconConstraints:
|
||||
const BoxConstraints(minWidth: 0, minHeight: 0),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// ── Location ─────────────────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.location_on_outlined,
|
||||
title: 'Location',
|
||||
children: [
|
||||
DropdownButtonFormField<String?>(
|
||||
initialValue: _siteId,
|
||||
items: [
|
||||
const DropdownMenuItem<String?>(
|
||||
value: null, child: Text('Unassigned')),
|
||||
value: null,
|
||||
child: Text('Unassigned'),
|
||||
),
|
||||
for (final s in sitesAsync.valueOrNull ?? [])
|
||||
DropdownMenuItem(value: s.id, child: Text(s.name)),
|
||||
],
|
||||
onChanged: (v) => setState(() {
|
||||
_siteId = v;
|
||||
// Reset location when site changes — old location wouldn't
|
||||
// belong to the new site.
|
||||
_locationId = null;
|
||||
}),
|
||||
decoration: const InputDecoration(
|
||||
@@ -344,7 +407,7 @@ class _NetworkMapDeviceEditScreenState
|
||||
labelText: 'Location',
|
||||
helperText: _siteId == null
|
||||
? 'Pick a site first.'
|
||||
: 'Specific building / floor / room / rack within the site.',
|
||||
: 'Building / floor / room / rack within the site.',
|
||||
enabled: _siteId != null,
|
||||
),
|
||||
),
|
||||
@@ -352,64 +415,73 @@ class _NetworkMapDeviceEditScreenState
|
||||
const SizedBox(width: 8),
|
||||
IconButton.filledTonal(
|
||||
tooltip: 'Add new location to this site',
|
||||
onPressed: _siteId == null
|
||||
? null
|
||||
: _showAddLocationDialog,
|
||||
onPressed:
|
||||
_siteId == null ? null : _showAddLocationDialog,
|
||||
icon: const Icon(Icons.add_location_alt_outlined),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// ── Hardware Details ─────────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.memory_outlined,
|
||||
title: 'Hardware Details',
|
||||
children: [
|
||||
_FieldRow(
|
||||
left: TextFormField(
|
||||
controller: _vendorCtrl,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Vendor (e.g. Ruijie, TP-Link)',
|
||||
labelText: 'Vendor',
|
||||
hintText: 'e.g. Ruijie, TP-Link',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
right: TextFormField(
|
||||
controller: _modelCtrl,
|
||||
decoration: const InputDecoration(labelText: 'Model'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _serialCtrl,
|
||||
decoration: const InputDecoration(labelText: 'Serial'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _mgmtIpCtrl,
|
||||
_FieldRow(
|
||||
left: TextFormField(
|
||||
controller: _serialCtrl,
|
||||
decoration:
|
||||
const InputDecoration(labelText: 'Management IP'),
|
||||
const InputDecoration(labelText: 'Serial'),
|
||||
),
|
||||
right: TextFormField(
|
||||
controller: _mgmtIpCtrl,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Management IP'),
|
||||
keyboardType: TextInputType.text,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _macCtrl,
|
||||
decoration: const InputDecoration(labelText: 'MAC address'),
|
||||
decoration:
|
||||
const InputDecoration(labelText: 'MAC address'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _notesCtrl,
|
||||
decoration: const InputDecoration(labelText: 'Notes'),
|
||||
maxLines: 3,
|
||||
maxLines: 4,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// ── Ports (edit mode only) ────────────────────────────────
|
||||
if (widget.deviceId != null) ...[
|
||||
const SizedBox(height: 16),
|
||||
_PortsSectionCard(
|
||||
deviceId: widget.deviceId!,
|
||||
onAddPort: () => _addPort(widget.deviceId!),
|
||||
),
|
||||
],
|
||||
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
children: [
|
||||
Text('Ports',
|
||||
style: Theme.of(context).textTheme.titleMedium),
|
||||
const Spacer(),
|
||||
TextButton.icon(
|
||||
onPressed: () => _addPort(widget.deviceId!),
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add port'),
|
||||
),
|
||||
],
|
||||
),
|
||||
_PortsList(deviceId: widget.deviceId!),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -421,12 +493,138 @@ class _NetworkMapDeviceEditScreenState
|
||||
}
|
||||
}
|
||||
|
||||
// ── Helper widgets ────────────────────────────────────────────────────────────
|
||||
|
||||
/// Outlined card with a section header (icon + title) and field children.
|
||||
class _SectionCard extends StatelessWidget {
|
||||
const _SectionCard({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.children,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final List<Widget> children;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
return Card.outlined(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: cs.primary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
title,
|
||||
style: tt.labelLarge?.copyWith(color: cs.primary),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
...children,
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Renders two widgets side-by-side on wide screens (≥480dp), stacked on narrow.
|
||||
class _FieldRow extends StatelessWidget {
|
||||
const _FieldRow({
|
||||
required this.left,
|
||||
required this.right,
|
||||
});
|
||||
|
||||
final Widget left;
|
||||
final Widget right;
|
||||
static const double threshold = 480;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
if (constraints.maxWidth >= threshold) {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: left),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: right),
|
||||
],
|
||||
);
|
||||
}
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
left,
|
||||
const SizedBox(height: 12),
|
||||
right,
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Ports section card with header and add-port button.
|
||||
class _PortsSectionCard extends StatelessWidget {
|
||||
const _PortsSectionCard({
|
||||
required this.deviceId,
|
||||
required this.onAddPort,
|
||||
});
|
||||
|
||||
final String deviceId;
|
||||
final VoidCallback onAddPort;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
return Card.outlined(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.cable_outlined, size: 16, color: cs.primary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Ports',
|
||||
style: tt.labelLarge?.copyWith(color: cs.primary),
|
||||
),
|
||||
const Spacer(),
|
||||
FilledButton.tonal(
|
||||
onPressed: onAddPort,
|
||||
child: const Text('Add port'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_PortsList(deviceId: deviceId),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PortsList extends ConsumerWidget {
|
||||
const _PortsList({required this.deviceId});
|
||||
final String deviceId;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final portsAsync = ref.watch(networkPortsByDeviceProvider(deviceId));
|
||||
return portsAsync.when(
|
||||
loading: () => const Padding(
|
||||
@@ -436,9 +634,19 @@ class _PortsList extends ConsumerWidget {
|
||||
error: (e, _) => Text('Error: $e'),
|
||||
data: (ports) {
|
||||
if (ports.isEmpty) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 8),
|
||||
child: Text('No ports yet.'),
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(Icons.cable_outlined,
|
||||
size: 32, color: cs.onSurfaceVariant),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'No ports configured yet.',
|
||||
style: TextStyle(color: cs.onSurfaceVariant),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
return Column(
|
||||
|
||||
@@ -7,6 +7,7 @@ import '../../providers/network_map/network_devices_provider.dart';
|
||||
import '../../providers/profile_provider.dart';
|
||||
import '../../widgets/app_state_view.dart';
|
||||
import '../../widgets/responsive_body.dart';
|
||||
import 'widgets/link_edit_dialog.dart';
|
||||
import 'widgets/port_edit_dialog.dart';
|
||||
import 'widgets/port_list_tile.dart';
|
||||
|
||||
@@ -98,6 +99,13 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
|
||||
return null;
|
||||
}
|
||||
|
||||
String? linkIdForPort(String portId) {
|
||||
for (final link in links) {
|
||||
if (link.portA == portId || link.portB == portId) return link.id;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return ResponsiveBody(
|
||||
maxWidth: 720,
|
||||
child: ListView(
|
||||
@@ -131,6 +139,29 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
|
||||
existing: port,
|
||||
)
|
||||
: null,
|
||||
onConnect: canEdit
|
||||
? (ctx) => showLinkEditDialog(
|
||||
context: ctx,
|
||||
ref: ref,
|
||||
portId: port.id,
|
||||
currentDeviceId: device.id,
|
||||
)
|
||||
: null,
|
||||
onDisconnect: canEdit
|
||||
? (_) {
|
||||
final lid = linkIdForPort(port.id);
|
||||
if (lid != null) {
|
||||
ref
|
||||
.read(networkDevicesControllerProvider)
|
||||
.deleteLink(lid);
|
||||
}
|
||||
}
|
||||
: null,
|
||||
onDelete: canEdit
|
||||
? () => ref
|
||||
.read(networkDevicesControllerProvider)
|
||||
.deletePort(port.id)
|
||||
: null,
|
||||
),
|
||||
if (device.notes != null && device.notes!.trim().isNotEmpty) ...[
|
||||
Padding(
|
||||
|
||||
@@ -8,15 +8,48 @@ import '../../providers/network_map/network_topology_provider.dart';
|
||||
import '../../providers/profile_provider.dart';
|
||||
import '../../widgets/app_state_view.dart';
|
||||
import 'widgets/topology_canvas.dart';
|
||||
import 'widgets/topology_legend.dart';
|
||||
import 'widgets/topology_minimap.dart';
|
||||
import 'widgets/zoom_controls.dart';
|
||||
|
||||
class NetworkMapSiteScreen extends ConsumerWidget {
|
||||
class NetworkMapSiteScreen extends ConsumerStatefulWidget {
|
||||
const NetworkMapSiteScreen({super.key, required this.siteId});
|
||||
|
||||
final String siteId;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final topologyAsync = ref.watch(topologyForSiteProvider(siteId));
|
||||
ConsumerState<NetworkMapSiteScreen> createState() =>
|
||||
_NetworkMapSiteScreenState();
|
||||
}
|
||||
|
||||
class _NetworkMapSiteScreenState extends ConsumerState<NetworkMapSiteScreen> {
|
||||
late final TransformationController _transformController;
|
||||
Map<String, Offset> _nodePositions = const {};
|
||||
Size _canvasSize = const Size(600, 400);
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_transformController = TransformationController();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_transformController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onLayoutUpdated(Map<String, Offset> positions, Size canvasSize) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_nodePositions = positions;
|
||||
_canvasSize = canvasSize;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final topologyAsync = ref.watch(topologyForSiteProvider(widget.siteId));
|
||||
final viewMode = ref.watch(topologyViewModeProvider);
|
||||
final sitesAsync = ref.watch(networkSitesProvider);
|
||||
final profileAsync = ref.watch(currentProfileProvider);
|
||||
@@ -27,7 +60,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
|
||||
|
||||
final siteName = sitesAsync.valueOrNull
|
||||
?.firstWhere(
|
||||
(s) => s.id == siteId,
|
||||
(s) => s.id == widget.siteId,
|
||||
orElse: () => sitesAsync.valueOrNull!.first,
|
||||
)
|
||||
.name;
|
||||
@@ -64,7 +97,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
|
||||
tooltip: 'Add device',
|
||||
icon: const Icon(Icons.add_circle_outline),
|
||||
onPressed: () =>
|
||||
context.go('/network-map/site/$siteId/device/new'),
|
||||
context.go('/network-map/site/${widget.siteId}/device/new'),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -72,15 +105,97 @@ class NetworkMapSiteScreen extends ConsumerWidget {
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (e, _) => AppErrorView(
|
||||
error: e,
|
||||
onRetry: () => ref.invalidate(topologyForSiteProvider(siteId)),
|
||||
onRetry: () => ref.invalidate(topologyForSiteProvider(widget.siteId)),
|
||||
),
|
||||
data: (graph) => TopologyCanvas(
|
||||
data: (graph) => _CanvasWithOverlays(
|
||||
graph: graph,
|
||||
viewMode: viewMode,
|
||||
onDeviceTap: (device) =>
|
||||
context.go('/network-map/device/${device.id}'),
|
||||
siteId: widget.siteId,
|
||||
transformController: _transformController,
|
||||
nodePositions: _nodePositions,
|
||||
canvasSize: _canvasSize,
|
||||
onLayoutUpdated: _onLayoutUpdated,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Canvas + all overlay widgets (legend, zoom controls, minimap) in a Stack.
|
||||
class _CanvasWithOverlays extends StatelessWidget {
|
||||
const _CanvasWithOverlays({
|
||||
required this.graph,
|
||||
required this.viewMode,
|
||||
required this.siteId,
|
||||
required this.transformController,
|
||||
required this.nodePositions,
|
||||
required this.canvasSize,
|
||||
required this.onLayoutUpdated,
|
||||
});
|
||||
|
||||
final TopologyGraph graph;
|
||||
final TopologyViewMode viewMode;
|
||||
final String siteId;
|
||||
final TransformationController transformController;
|
||||
final Map<String, Offset> nodePositions;
|
||||
final Size canvasSize;
|
||||
final void Function(Map<String, Offset>, Size) onLayoutUpdated;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final viewportSize = Size(constraints.maxWidth, constraints.maxHeight);
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
// ── Main topology canvas ─────────────────────────────────────
|
||||
Positioned.fill(
|
||||
child: TopologyCanvas(
|
||||
graph: graph,
|
||||
viewMode: viewMode,
|
||||
transformationController: transformController,
|
||||
onLayoutUpdated: onLayoutUpdated,
|
||||
onDeviceTap: (device) =>
|
||||
context.push('/network-map/device/${device.id}'),
|
||||
),
|
||||
),
|
||||
|
||||
// ── Legend — bottom-left ─────────────────────────────────────
|
||||
Positioned(
|
||||
left: 16,
|
||||
bottom: 16,
|
||||
child: const TopologyLegend(),
|
||||
),
|
||||
|
||||
// ── Zoom controls + minimap — bottom-right ───────────────────
|
||||
Positioned(
|
||||
right: 16,
|
||||
bottom: 16,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
// Minimap above zoom controls
|
||||
TopologyMinimap(
|
||||
graph: graph,
|
||||
nodePositions: nodePositions,
|
||||
canvasSize: canvasSize,
|
||||
controller: transformController,
|
||||
viewportSize: viewportSize,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
ZoomControls(
|
||||
controller: transformController,
|
||||
canvasSize: canvasSize,
|
||||
viewportSize: viewportSize,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../models/network/network_device.dart';
|
||||
import 'network_device_icon.dart';
|
||||
|
||||
/// A styled node representing one network device on the topology canvas.
|
||||
///
|
||||
/// Designed to feel solid at ~120-160dp wide so it remains legible at the
|
||||
/// "good for 200 nodes" zoom level called out in the V1 spec.
|
||||
///
|
||||
/// The node has three visual states beyond its default rest:
|
||||
/// - [isSelected]: stronger primary-tinted background + 2dp primary border.
|
||||
/// - [isHighlighted]: softer secondary tint + primary outline, used when an
|
||||
/// edge touching this device is hovered on the canvas.
|
||||
/// - [isSelected] takes precedence over [isHighlighted].
|
||||
/// Accepts an explicit [nodeSize] so role-based sizing can be applied by the
|
||||
/// canvas without this widget needing to know the layout strategy.
|
||||
class DeviceNode extends StatelessWidget {
|
||||
const DeviceNode({
|
||||
super.key,
|
||||
@@ -19,6 +14,7 @@ class DeviceNode extends StatelessWidget {
|
||||
this.portCount,
|
||||
this.isSelected = false,
|
||||
this.isHighlighted = false,
|
||||
this.nodeSize = const Size(160, 110),
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@@ -26,29 +22,9 @@ class DeviceNode extends StatelessWidget {
|
||||
final int? portCount;
|
||||
final bool isSelected;
|
||||
final bool isHighlighted;
|
||||
final Size nodeSize;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
IconData _iconForKind(NetworkDeviceKind kind) {
|
||||
switch (kind) {
|
||||
case NetworkDeviceKind.router:
|
||||
return Icons.router_outlined;
|
||||
case NetworkDeviceKind.switchDevice:
|
||||
return Icons.hub_outlined;
|
||||
case NetworkDeviceKind.ap:
|
||||
return Icons.wifi_outlined;
|
||||
case NetworkDeviceKind.firewall:
|
||||
return Icons.security_outlined;
|
||||
case NetworkDeviceKind.server:
|
||||
return Icons.dns_outlined;
|
||||
case NetworkDeviceKind.endpoint:
|
||||
return Icons.devices_outlined;
|
||||
case NetworkDeviceKind.patchPanel:
|
||||
return Icons.view_module_outlined;
|
||||
case NetworkDeviceKind.other:
|
||||
return Icons.device_unknown_outlined;
|
||||
}
|
||||
}
|
||||
|
||||
Color _accentForRole(ColorScheme cs, NetworkDeviceRole? role) {
|
||||
switch (role) {
|
||||
case NetworkDeviceRole.core:
|
||||
@@ -65,11 +41,25 @@ class DeviceNode extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
Color? _statusColor(ColorScheme cs, NetworkDeviceStatus status) {
|
||||
switch (status) {
|
||||
case NetworkDeviceStatus.online:
|
||||
return const Color(0xFF34A853); // Google green — universally understood
|
||||
case NetworkDeviceStatus.offline:
|
||||
return cs.error;
|
||||
case NetworkDeviceStatus.warning:
|
||||
return const Color(0xFFFBBC04); // Amber
|
||||
case NetworkDeviceStatus.unknown:
|
||||
return null; // No dot shown
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
final accent = _accentForRole(cs, device.role);
|
||||
final statusColor = _statusColor(cs, device.status);
|
||||
|
||||
final bgColor = isSelected
|
||||
? cs.primaryContainer
|
||||
@@ -105,8 +95,10 @@ class DeviceNode extends StatelessWidget {
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Container(
|
||||
width: 160,
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
width: nodeSize.width,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -114,7 +106,11 @@ class DeviceNode extends StatelessWidget {
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(_iconForKind(device.kind), size: 18, color: accent),
|
||||
NetworkDeviceIcon(
|
||||
kind: device.kind,
|
||||
color: accent,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
@@ -140,7 +136,8 @@ class DeviceNode extends StatelessWidget {
|
||||
if (device.vendor != null) device.vendor,
|
||||
if (device.model != null) device.model,
|
||||
].whereType<String>().join(' • '),
|
||||
style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
|
||||
style: tt.labelSmall?.copyWith(
|
||||
color: cs.onSurfaceVariant),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
@@ -167,6 +164,26 @@ class DeviceNode extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
),
|
||||
// Status dot — top-right, only shown when status is not unknown
|
||||
if (statusColor != null)
|
||||
Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: statusColor,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: bgColor,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../models/network/network_link.dart';
|
||||
import '../../../models/network/network_port.dart';
|
||||
import '../../../providers/network_map/network_devices_provider.dart';
|
||||
|
||||
/// Opens an M3 dialog to connect [portId] to a port on another device.
|
||||
///
|
||||
/// Returns true if a link was successfully created.
|
||||
Future<bool> showLinkEditDialog({
|
||||
required BuildContext context,
|
||||
required WidgetRef ref,
|
||||
required String portId,
|
||||
required String currentDeviceId,
|
||||
}) async {
|
||||
final result = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (_) => _LinkEditDialog(
|
||||
portId: portId,
|
||||
currentDeviceId: currentDeviceId,
|
||||
),
|
||||
);
|
||||
return result == true;
|
||||
}
|
||||
|
||||
class _LinkEditDialog extends ConsumerStatefulWidget {
|
||||
const _LinkEditDialog({
|
||||
required this.portId,
|
||||
required this.currentDeviceId,
|
||||
});
|
||||
|
||||
final String portId;
|
||||
final String currentDeviceId;
|
||||
|
||||
@override
|
||||
ConsumerState<_LinkEditDialog> createState() => _LinkEditDialogState();
|
||||
}
|
||||
|
||||
class _LinkEditDialogState extends ConsumerState<_LinkEditDialog> {
|
||||
String? _selectedDeviceId;
|
||||
String? _selectedPortId;
|
||||
NetworkLinkKind? _linkKind;
|
||||
final _cableLabelCtrl = TextEditingController();
|
||||
bool _saving = false;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_cableLabelCtrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _save() async {
|
||||
final portA = widget.portId;
|
||||
final portB = _selectedPortId;
|
||||
if (portB == null) return;
|
||||
setState(() => _saving = true);
|
||||
try {
|
||||
ref.invalidate(networkLinksProvider);
|
||||
final controller = ref.read(networkDevicesControllerProvider);
|
||||
await controller.createLink(
|
||||
portA: portA,
|
||||
portB: portB,
|
||||
linkKind: _linkKind,
|
||||
cableLabel: _cableLabelCtrl.text.trim().isEmpty
|
||||
? null
|
||||
: _cableLabelCtrl.text.trim(),
|
||||
);
|
||||
if (mounted) Navigator.of(context).pop(true);
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Failed to create link: $e'),
|
||||
backgroundColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) setState(() => _saving = false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final devicesAsync = ref.watch(networkDevicesProvider);
|
||||
final portsAsync = _selectedDeviceId != null
|
||||
? ref.watch(networkPortsByDeviceProvider(_selectedDeviceId!))
|
||||
: const AsyncValue<List<NetworkPort>>.data([]);
|
||||
final allLinksAsync = ref.watch(networkLinksProvider);
|
||||
|
||||
final otherDevices = (devicesAsync.valueOrNull ?? const [])
|
||||
.where((d) => d.id != widget.currentDeviceId)
|
||||
.toList()
|
||||
..sort((a, b) => a.name.compareTo(b.name));
|
||||
|
||||
final allLinks = allLinksAsync.valueOrNull ?? const [];
|
||||
final usedPortIds = <String>{
|
||||
for (final link in allLinks) ...[link.portA, link.portB],
|
||||
};
|
||||
|
||||
final devicePorts = portsAsync.valueOrNull ?? const [];
|
||||
final availablePorts =
|
||||
devicePorts.where((p) => !usedPortIds.contains(p.id)).toList();
|
||||
|
||||
final canSave = _selectedPortId != null && !_saving;
|
||||
|
||||
return AlertDialog(
|
||||
title: const Text('Connect port'),
|
||||
content: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
DropdownButtonFormField<String>(
|
||||
initialValue: _selectedDeviceId,
|
||||
decoration:
|
||||
const InputDecoration(labelText: 'Remote device *'),
|
||||
items: [
|
||||
for (final d in otherDevices)
|
||||
DropdownMenuItem(value: d.id, child: Text(d.name)),
|
||||
],
|
||||
onChanged: (v) => setState(() {
|
||||
_selectedDeviceId = v;
|
||||
_selectedPortId = null;
|
||||
}),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
DropdownButtonFormField<String>(
|
||||
key: ValueKey(_selectedDeviceId),
|
||||
initialValue: _selectedPortId,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Remote port *',
|
||||
helperText: _selectedDeviceId == null
|
||||
? 'Select a device first'
|
||||
: availablePorts.isEmpty
|
||||
? 'No available ports on this device'
|
||||
: null,
|
||||
),
|
||||
items: [
|
||||
for (final p in availablePorts)
|
||||
DropdownMenuItem(
|
||||
value: p.id,
|
||||
child: Text(p.portNumber),
|
||||
),
|
||||
],
|
||||
onChanged: _selectedDeviceId == null
|
||||
? null
|
||||
: (v) => setState(() => _selectedPortId = v),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
DropdownButtonFormField<NetworkLinkKind?>(
|
||||
initialValue: _linkKind,
|
||||
decoration: const InputDecoration(labelText: 'Link type'),
|
||||
items: [
|
||||
const DropdownMenuItem<NetworkLinkKind?>(
|
||||
value: null,
|
||||
child: Text('(unknown)'),
|
||||
),
|
||||
for (final k in NetworkLinkKind.values)
|
||||
DropdownMenuItem(value: k, child: Text(k.label)),
|
||||
],
|
||||
onChanged: (v) => setState(() => _linkKind = v),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
controller: _cableLabelCtrl,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Cable label',
|
||||
helperText: 'e.g. "CAT6-01", "SMF-A3" (optional)',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: _saving ? null : () => Navigator.pop(context, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: canSave ? _save : null,
|
||||
child: Text(_saving ? 'Saving…' : 'Connect'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../models/network/network_device.dart';
|
||||
|
||||
/// Custom-painted network equipment icon for each [NetworkDeviceKind].
|
||||
///
|
||||
/// Draws simplified but recognizable symbols matching professional network
|
||||
/// topology diagram conventions (Cisco-style silhouettes).
|
||||
class NetworkDeviceIcon extends StatelessWidget {
|
||||
const NetworkDeviceIcon({
|
||||
super.key,
|
||||
required this.kind,
|
||||
required this.color,
|
||||
this.size = 20,
|
||||
});
|
||||
|
||||
final NetworkDeviceKind kind;
|
||||
final Color color;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: size,
|
||||
height: size,
|
||||
child: CustomPaint(
|
||||
painter: _DeviceIconPainter(kind: kind, color: color),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DeviceIconPainter extends CustomPainter {
|
||||
_DeviceIconPainter({required this.kind, required this.color});
|
||||
|
||||
final NetworkDeviceKind kind;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
switch (kind) {
|
||||
case NetworkDeviceKind.router:
|
||||
_drawRouter(canvas, size);
|
||||
case NetworkDeviceKind.switchDevice:
|
||||
_drawSwitch(canvas, size);
|
||||
case NetworkDeviceKind.ap:
|
||||
_drawAp(canvas, size);
|
||||
case NetworkDeviceKind.firewall:
|
||||
_drawFirewall(canvas, size);
|
||||
case NetworkDeviceKind.server:
|
||||
_drawServer(canvas, size);
|
||||
case NetworkDeviceKind.endpoint:
|
||||
_drawEndpoint(canvas, size);
|
||||
case NetworkDeviceKind.patchPanel:
|
||||
_drawPatchPanel(canvas, size);
|
||||
case NetworkDeviceKind.other:
|
||||
_drawOther(canvas, size);
|
||||
}
|
||||
}
|
||||
|
||||
Paint get _stroke => Paint()
|
||||
..color = color
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeCap = StrokeCap.round
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..strokeWidth = 1.4;
|
||||
|
||||
Paint get _fill => Paint()
|
||||
..color = color
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
// ─── Router: cylinder body + 4 arrows ─────────────────────────────────────
|
||||
|
||||
void _drawRouter(Canvas canvas, Size s) {
|
||||
final cx = s.width / 2;
|
||||
final cy = s.height / 2;
|
||||
final r = s.width * 0.28;
|
||||
final p = _stroke;
|
||||
|
||||
// Circle body
|
||||
canvas.drawCircle(Offset(cx, cy), r, p);
|
||||
|
||||
// 4 directional arrows at N/S/E/W
|
||||
const arrowLen = 0.22;
|
||||
const arrowHead = 0.1;
|
||||
for (var i = 0; i < 4; i++) {
|
||||
final angle = i * math.pi / 2;
|
||||
final ax = cx + math.cos(angle) * (r + s.width * arrowLen);
|
||||
final ay = cy + math.sin(angle) * (r + s.width * arrowLen);
|
||||
final bx = cx + math.cos(angle) * (r + 1);
|
||||
final by = cy + math.sin(angle) * (r + 1);
|
||||
canvas.drawLine(Offset(bx, by), Offset(ax, ay), p);
|
||||
// Arrowhead
|
||||
final perp = angle + math.pi / 2;
|
||||
final hw = s.width * arrowHead;
|
||||
canvas.drawPath(
|
||||
Path()
|
||||
..moveTo(ax, ay)
|
||||
..lineTo(
|
||||
ax - math.cos(angle) * hw + math.cos(perp) * hw / 2,
|
||||
ay - math.sin(angle) * hw + math.sin(perp) * hw / 2,
|
||||
)
|
||||
..lineTo(
|
||||
ax - math.cos(angle) * hw - math.cos(perp) * hw / 2,
|
||||
ay - math.sin(angle) * hw - math.sin(perp) * hw / 2,
|
||||
)
|
||||
..close(),
|
||||
_fill,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Switch: rectangle + port lines ───────────────────────────────────────
|
||||
|
||||
void _drawSwitch(Canvas canvas, Size s) {
|
||||
final w = s.width * 0.86;
|
||||
final h = s.height * 0.42;
|
||||
final left = (s.width - w) / 2;
|
||||
final top = (s.height - h) / 2;
|
||||
final p = _stroke;
|
||||
|
||||
// Body
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromLTWH(left, top, w, h),
|
||||
const Radius.circular(2),
|
||||
),
|
||||
p,
|
||||
);
|
||||
|
||||
// Port lines (8 evenly spaced)
|
||||
const ports = 8;
|
||||
final portSpacing = w / (ports + 1);
|
||||
final portH = h * 0.5;
|
||||
final portTop = top + h * 0.2;
|
||||
for (var i = 1; i <= ports; i++) {
|
||||
final px = left + portSpacing * i;
|
||||
canvas.drawLine(
|
||||
Offset(px, portTop),
|
||||
Offset(px, portTop + portH),
|
||||
p,
|
||||
);
|
||||
}
|
||||
// Two legs at bottom center
|
||||
final legX1 = s.width * 0.38;
|
||||
final legX2 = s.width * 0.62;
|
||||
final bodyBottom = top + h;
|
||||
canvas.drawLine(
|
||||
Offset(legX1, bodyBottom),
|
||||
Offset(legX1, s.height * 0.85),
|
||||
p,
|
||||
);
|
||||
canvas.drawLine(
|
||||
Offset(legX2, bodyBottom),
|
||||
Offset(legX2, s.height * 0.85),
|
||||
p,
|
||||
);
|
||||
canvas.drawLine(
|
||||
Offset(legX1, s.height * 0.85),
|
||||
Offset(legX2, s.height * 0.85),
|
||||
p,
|
||||
);
|
||||
}
|
||||
|
||||
// ─── AP: semicircle waves + stem ──────────────────────────────────────────
|
||||
|
||||
void _drawAp(Canvas canvas, Size s) {
|
||||
final cx = s.width / 2;
|
||||
final base = s.height * 0.72;
|
||||
final p = _stroke;
|
||||
|
||||
// Stem
|
||||
canvas.drawLine(Offset(cx, base), Offset(cx, s.height * 0.88), p);
|
||||
canvas.drawLine(
|
||||
Offset(cx - s.width * 0.15, s.height * 0.88),
|
||||
Offset(cx + s.width * 0.15, s.height * 0.88),
|
||||
p,
|
||||
);
|
||||
|
||||
// 3 concentric arcs from narrow to wide
|
||||
for (var i = 1; i <= 3; i++) {
|
||||
final r = s.width * 0.13 * i;
|
||||
final rect = Rect.fromCircle(center: Offset(cx, base), radius: r);
|
||||
canvas.drawArc(rect, math.pi, -math.pi, false, p);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Firewall: brick-wall grid ─────────────────────────────────────────────
|
||||
|
||||
void _drawFirewall(Canvas canvas, Size s) {
|
||||
final w = s.width * 0.8;
|
||||
final h = s.height * 0.72;
|
||||
final left = (s.width - w) / 2;
|
||||
final top = (s.height - h) / 2;
|
||||
final p = _stroke;
|
||||
|
||||
// Outer rect
|
||||
canvas.drawRect(Rect.fromLTWH(left, top, w, h), p);
|
||||
|
||||
// 3 rows, 2 staggered bricks each
|
||||
final rowH = h / 3;
|
||||
for (var row = 0; row < 3; row++) {
|
||||
final rowTop = top + row * rowH;
|
||||
// horizontal mortar line
|
||||
if (row > 0) {
|
||||
canvas.drawLine(
|
||||
Offset(left, rowTop),
|
||||
Offset(left + w, rowTop),
|
||||
p,
|
||||
);
|
||||
}
|
||||
// vertical mortar — offset every other row by half a brick
|
||||
final offset = (row % 2 == 0) ? w / 2 : w / 4;
|
||||
canvas.drawLine(
|
||||
Offset(left + offset, rowTop),
|
||||
Offset(left + offset, rowTop + rowH),
|
||||
p,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Server: rack unit with LED dots ──────────────────────────────────────
|
||||
|
||||
void _drawServer(Canvas canvas, Size s) {
|
||||
final w = s.width * 0.72;
|
||||
final h = s.height * 0.78;
|
||||
final left = (s.width - w) / 2;
|
||||
final top = (s.height - h) / 2;
|
||||
final p = _stroke;
|
||||
final fp = _fill;
|
||||
|
||||
// Body
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromLTWH(left, top, w, h),
|
||||
const Radius.circular(2),
|
||||
),
|
||||
p,
|
||||
);
|
||||
|
||||
// 3 horizontal rack-unit dividers + LED dots
|
||||
final unitH = h / 3;
|
||||
for (var i = 0; i < 3; i++) {
|
||||
final unitTop = top + i * unitH;
|
||||
if (i > 0) {
|
||||
canvas.drawLine(
|
||||
Offset(left, unitTop),
|
||||
Offset(left + w, unitTop),
|
||||
p,
|
||||
);
|
||||
}
|
||||
// Small LED dot on right side of each unit
|
||||
canvas.drawCircle(
|
||||
Offset(left + w - w * 0.15, unitTop + unitH / 2),
|
||||
s.width * 0.05,
|
||||
fp,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Endpoint: monitor + stand ─────────────────────────────────────────────
|
||||
|
||||
void _drawEndpoint(Canvas canvas, Size s) {
|
||||
final monW = s.width * 0.76;
|
||||
final monH = s.height * 0.52;
|
||||
final left = (s.width - monW) / 2;
|
||||
final top = s.height * 0.08;
|
||||
final p = _stroke;
|
||||
|
||||
// Monitor bezel
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromLTWH(left, top, monW, monH),
|
||||
const Radius.circular(2),
|
||||
),
|
||||
p,
|
||||
);
|
||||
|
||||
// Screen inner (inset 2dp)
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromLTWH(left + 3, top + 3, monW - 6, monH - 6),
|
||||
const Radius.circular(1),
|
||||
),
|
||||
p,
|
||||
);
|
||||
|
||||
// Neck
|
||||
final neckX = s.width / 2;
|
||||
final neckTop = top + monH;
|
||||
canvas.drawLine(
|
||||
Offset(neckX, neckTop),
|
||||
Offset(neckX, neckTop + s.height * 0.18),
|
||||
p,
|
||||
);
|
||||
|
||||
// Base
|
||||
canvas.drawLine(
|
||||
Offset(s.width * 0.25, s.height * 0.88),
|
||||
Offset(s.width * 0.75, s.height * 0.88),
|
||||
p,
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Patch panel: flat rect with 2 rows of port circles ──────────────────
|
||||
|
||||
void _drawPatchPanel(Canvas canvas, Size s) {
|
||||
final w = s.width * 0.9;
|
||||
final h = s.height * 0.44;
|
||||
final left = (s.width - w) / 2;
|
||||
final top = (s.height - h) / 2;
|
||||
final p = _stroke;
|
||||
|
||||
// Body
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromLTWH(left, top, w, h),
|
||||
const Radius.circular(2),
|
||||
),
|
||||
p,
|
||||
);
|
||||
|
||||
// 2 rows × 5 port circles
|
||||
const cols = 5;
|
||||
const rows = 2;
|
||||
final colSpacing = w / (cols + 1);
|
||||
final rowSpacing = h / (rows + 1);
|
||||
final dotR = s.width * 0.04;
|
||||
for (var row = 1; row <= rows; row++) {
|
||||
for (var col = 1; col <= cols; col++) {
|
||||
canvas.drawCircle(
|
||||
Offset(left + colSpacing * col, top + rowSpacing * row),
|
||||
dotR,
|
||||
p,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Other: circle with question mark ─────────────────────────────────────
|
||||
|
||||
void _drawOther(Canvas canvas, Size s) {
|
||||
final cx = s.width / 2;
|
||||
final cy = s.height / 2;
|
||||
final r = s.width * 0.42;
|
||||
final p = _stroke;
|
||||
|
||||
canvas.drawCircle(Offset(cx, cy), r, p);
|
||||
|
||||
// "?" drawn as a small arc + dot
|
||||
final tp = TextPainter(
|
||||
text: TextSpan(
|
||||
text: '?',
|
||||
style: TextStyle(
|
||||
fontSize: s.width * 0.52,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: color,
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
textDirection: TextDirection.ltr,
|
||||
)..layout();
|
||||
tp.paint(
|
||||
canvas,
|
||||
Offset(cx - tp.width / 2, cy - tp.height / 2),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _DeviceIconPainter old) =>
|
||||
old.kind != kind || old.color != color;
|
||||
}
|
||||
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../models/network/network_port.dart';
|
||||
|
||||
enum _PortAction { editPort, connect, disconnect, deletePort }
|
||||
|
||||
class PortListTile extends StatelessWidget {
|
||||
const PortListTile({
|
||||
super.key,
|
||||
@@ -10,6 +12,8 @@ class PortListTile extends StatelessWidget {
|
||||
this.linkedPortLabel,
|
||||
this.canEdit = false,
|
||||
this.onTap,
|
||||
this.onConnect,
|
||||
this.onDisconnect,
|
||||
this.onDelete,
|
||||
});
|
||||
|
||||
@@ -18,6 +22,8 @@ class PortListTile extends StatelessWidget {
|
||||
final String? linkedPortLabel;
|
||||
final bool canEdit;
|
||||
final VoidCallback? onTap;
|
||||
final void Function(BuildContext)? onConnect;
|
||||
final void Function(BuildContext)? onDisconnect;
|
||||
final VoidCallback? onDelete;
|
||||
|
||||
@override
|
||||
@@ -64,10 +70,56 @@ class PortListTile extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
trailing: canEdit
|
||||
? IconButton(
|
||||
icon: const Icon(Icons.delete_outline),
|
||||
tooltip: 'Delete port',
|
||||
onPressed: onDelete,
|
||||
? PopupMenuButton<_PortAction>(
|
||||
tooltip: 'Port actions',
|
||||
onSelected: (action) {
|
||||
switch (action) {
|
||||
case _PortAction.editPort:
|
||||
onTap?.call();
|
||||
case _PortAction.connect:
|
||||
onConnect?.call(context);
|
||||
case _PortAction.disconnect:
|
||||
onDisconnect?.call(context);
|
||||
case _PortAction.deletePort:
|
||||
onDelete?.call();
|
||||
}
|
||||
},
|
||||
itemBuilder: (_) => [
|
||||
const PopupMenuItem(
|
||||
value: _PortAction.editPort,
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.edit_outlined),
|
||||
title: Text('Edit port'),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
if (!isLinked)
|
||||
const PopupMenuItem(
|
||||
value: _PortAction.connect,
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.add_link),
|
||||
title: Text('Connect to…'),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
if (isLinked)
|
||||
const PopupMenuItem(
|
||||
value: _PortAction.disconnect,
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.link_off),
|
||||
title: Text('Disconnect'),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: _PortAction.deletePort,
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.delete_outline),
|
||||
title: Text('Delete port'),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,245 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../models/network/network_device.dart';
|
||||
import '../../../models/network/network_link.dart';
|
||||
|
||||
/// Collapsible legend overlay explaining device role border colours and link
|
||||
/// type colours. Positioned at the bottom-left of the topology canvas view.
|
||||
class TopologyLegend extends StatefulWidget {
|
||||
const TopologyLegend({super.key});
|
||||
|
||||
@override
|
||||
State<TopologyLegend> createState() => _TopologyLegendState();
|
||||
}
|
||||
|
||||
class _TopologyLegendState extends State<TopologyLegend>
|
||||
with SingleTickerProviderStateMixin {
|
||||
bool _expanded = false;
|
||||
late final AnimationController _anim;
|
||||
late final Animation<double> _fade;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_anim = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
);
|
||||
_fade = CurvedAnimation(parent: _anim, curve: Curves.easeOut);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_anim.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _toggle() {
|
||||
setState(() => _expanded = !_expanded);
|
||||
if (_expanded) {
|
||||
_anim.forward();
|
||||
} else {
|
||||
_anim.reverse();
|
||||
}
|
||||
}
|
||||
|
||||
Color _roleColor(ColorScheme cs, NetworkDeviceRole role) {
|
||||
switch (role) {
|
||||
case NetworkDeviceRole.core:
|
||||
return cs.error;
|
||||
case NetworkDeviceRole.distribution:
|
||||
return cs.tertiary;
|
||||
case NetworkDeviceRole.access:
|
||||
return cs.primary;
|
||||
case NetworkDeviceRole.edge:
|
||||
return cs.secondary;
|
||||
case NetworkDeviceRole.endpoint:
|
||||
return cs.outline;
|
||||
}
|
||||
}
|
||||
|
||||
Color _linkColor(ColorScheme cs, NetworkLinkKind kind) {
|
||||
switch (kind) {
|
||||
case NetworkLinkKind.copper:
|
||||
return cs.primary;
|
||||
case NetworkLinkKind.fiber:
|
||||
return cs.tertiary;
|
||||
case NetworkLinkKind.wireless:
|
||||
return cs.secondary;
|
||||
case NetworkLinkKind.virtual:
|
||||
return cs.outline;
|
||||
case NetworkLinkKind.unknown:
|
||||
return cs.outline;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Expand/collapse toggle chip
|
||||
Material(
|
||||
color: cs.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
elevation: 2,
|
||||
child: InkWell(
|
||||
onTap: _toggle,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.legend_toggle_outlined,
|
||||
size: 16,
|
||||
color: cs.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'Legend',
|
||||
style: tt.labelSmall?.copyWith(
|
||||
color: cs.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
AnimatedRotation(
|
||||
turns: _expanded ? 0.5 : 0,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: Icon(
|
||||
Icons.expand_more,
|
||||
size: 16,
|
||||
color: cs.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Expandable panel
|
||||
FadeTransition(
|
||||
opacity: _fade,
|
||||
child: SizeTransition(
|
||||
sizeFactor: _fade,
|
||||
axisAlignment: -1,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
child: Material(
|
||||
color: cs.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
elevation: 3,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: SizedBox(
|
||||
width: 200,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// ── Device Roles ─────────────────────────────
|
||||
Text(
|
||||
'Device Roles',
|
||||
style: tt.labelSmall?.copyWith(
|
||||
color: cs.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
for (final role in NetworkDeviceRole.values)
|
||||
_LegendRow(
|
||||
color: _roleColor(cs, role),
|
||||
label: role.label,
|
||||
isLine: false,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Divider(
|
||||
height: 1,
|
||||
color: cs.outlineVariant.withValues(alpha: 0.5)),
|
||||
const SizedBox(height: 10),
|
||||
// ── Link Types ───────────────────────────────
|
||||
Text(
|
||||
'Link Types',
|
||||
style: tt.labelSmall?.copyWith(
|
||||
color: cs.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
for (final kind in NetworkLinkKind.values)
|
||||
_LegendRow(
|
||||
color: _linkColor(cs, kind),
|
||||
label: kind.label,
|
||||
isLine: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LegendRow extends StatelessWidget {
|
||||
const _LegendRow({
|
||||
required this.color,
|
||||
required this.label,
|
||||
required this.isLine,
|
||||
});
|
||||
|
||||
final Color color;
|
||||
final String label;
|
||||
final bool isLine;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final tt = Theme.of(context).textTheme;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||||
child: Row(
|
||||
children: [
|
||||
if (isLine)
|
||||
// Coloured line segment for link types
|
||||
Container(
|
||||
width: 20,
|
||||
height: 3,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
)
|
||||
else
|
||||
// Coloured square for device roles (border indicator)
|
||||
Container(
|
||||
width: 12,
|
||||
height: 12,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: color, width: 2),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
label,
|
||||
style: tt.labelSmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../models/network/network_device.dart';
|
||||
import '../../../models/network/topology_graph.dart';
|
||||
|
||||
/// Scaled-down overview of the topology canvas with a viewport indicator.
|
||||
///
|
||||
/// Shows all device nodes as small colour-coded rectangles and all edges as
|
||||
/// thin lines. A semi-transparent white rectangle indicates the current
|
||||
/// viewport within the full canvas. Tapping on the minimap pans the main
|
||||
/// canvas to centre on that point.
|
||||
class TopologyMinimap extends StatefulWidget {
|
||||
const TopologyMinimap({
|
||||
super.key,
|
||||
required this.graph,
|
||||
required this.nodePositions,
|
||||
required this.canvasSize,
|
||||
required this.controller,
|
||||
required this.viewportSize,
|
||||
});
|
||||
|
||||
final TopologyGraph graph;
|
||||
|
||||
/// Current interpolated node positions (top-left corners) from the canvas.
|
||||
final Map<String, Offset> nodePositions;
|
||||
|
||||
final Size canvasSize;
|
||||
final TransformationController controller;
|
||||
final Size viewportSize;
|
||||
|
||||
static const Size _minimapSize = Size(160, 100);
|
||||
|
||||
@override
|
||||
State<TopologyMinimap> createState() => _TopologyMinimapState();
|
||||
}
|
||||
|
||||
class _TopologyMinimapState extends State<TopologyMinimap> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.controller.addListener(_onTransformChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant TopologyMinimap oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (oldWidget.controller != widget.controller) {
|
||||
oldWidget.controller.removeListener(_onTransformChanged);
|
||||
widget.controller.addListener(_onTransformChanged);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
widget.controller.removeListener(_onTransformChanged);
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onTransformChanged() => setState(() {});
|
||||
|
||||
double get _scaleX {
|
||||
if (widget.canvasSize.width == 0) return 1;
|
||||
return TopologyMinimap._minimapSize.width / widget.canvasSize.width;
|
||||
}
|
||||
|
||||
double get _scaleY {
|
||||
if (widget.canvasSize.height == 0) return 1;
|
||||
return TopologyMinimap._minimapSize.height / widget.canvasSize.height;
|
||||
}
|
||||
|
||||
double get _scale => _scaleX < _scaleY ? _scaleX : _scaleY;
|
||||
|
||||
Offset _toMinimap(Offset canvasPoint) {
|
||||
final s = _scale;
|
||||
final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
|
||||
final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
|
||||
return Offset(canvasPoint.dx * s + offsetX, canvasPoint.dy * s + offsetY);
|
||||
}
|
||||
|
||||
/// Convert a tap on the minimap to a canvas point, then pan the main canvas
|
||||
/// so that point appears at the viewport centre.
|
||||
void _onTap(Offset localPos) {
|
||||
final s = _scale;
|
||||
if (s == 0) return;
|
||||
final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
|
||||
final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
|
||||
final canvasX = (localPos.dx - offsetX) / s;
|
||||
final canvasY = (localPos.dy - offsetY) / s;
|
||||
|
||||
final currentScale = widget.controller.value.getMaxScaleOnAxis();
|
||||
final tx = widget.viewportSize.width / 2 - canvasX * currentScale;
|
||||
final ty = widget.viewportSize.height / 2 - canvasY * currentScale;
|
||||
final result = Matrix4.translationValues(tx, ty, 0);
|
||||
result.multiply(Matrix4.diagonal3Values(currentScale, currentScale, 1.0));
|
||||
widget.controller.value = result;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
|
||||
return GestureDetector(
|
||||
onTapDown: (d) => _onTap(d.localPosition),
|
||||
child: Material(
|
||||
color: cs.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
elevation: 2,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: SizedBox(
|
||||
width: TopologyMinimap._minimapSize.width,
|
||||
height: TopologyMinimap._minimapSize.height,
|
||||
child: CustomPaint(
|
||||
painter: _MinimapPainter(
|
||||
graph: widget.graph,
|
||||
nodePositions: widget.nodePositions,
|
||||
canvasSize: widget.canvasSize,
|
||||
controller: widget.controller,
|
||||
viewportSize: widget.viewportSize,
|
||||
colorScheme: cs,
|
||||
scale: _scale,
|
||||
toMinimap: _toMinimap,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MinimapPainter extends CustomPainter {
|
||||
_MinimapPainter({
|
||||
required this.graph,
|
||||
required this.nodePositions,
|
||||
required this.canvasSize,
|
||||
required this.controller,
|
||||
required this.viewportSize,
|
||||
required this.colorScheme,
|
||||
required this.scale,
|
||||
required this.toMinimap,
|
||||
});
|
||||
|
||||
final TopologyGraph graph;
|
||||
final Map<String, Offset> nodePositions;
|
||||
final Size canvasSize;
|
||||
final TransformationController controller;
|
||||
final Size viewportSize;
|
||||
final ColorScheme colorScheme;
|
||||
final double scale;
|
||||
final Offset Function(Offset) toMinimap;
|
||||
|
||||
static const Size _nodeRectSize = Size(8, 5);
|
||||
|
||||
Color _roleColor(NetworkDeviceRole? role) {
|
||||
switch (role) {
|
||||
case NetworkDeviceRole.core:
|
||||
return colorScheme.error;
|
||||
case NetworkDeviceRole.distribution:
|
||||
return colorScheme.tertiary;
|
||||
case NetworkDeviceRole.access:
|
||||
return colorScheme.primary;
|
||||
case NetworkDeviceRole.edge:
|
||||
return colorScheme.secondary;
|
||||
case NetworkDeviceRole.endpoint:
|
||||
case null:
|
||||
return colorScheme.outline;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
// Edges
|
||||
final edgePaint = Paint()
|
||||
..color = colorScheme.outline.withValues(alpha: 0.4)
|
||||
..strokeWidth = 0.6
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeCap = StrokeCap.round;
|
||||
|
||||
for (final edge in graph.edges) {
|
||||
final fromPos = nodePositions[edge.fromDeviceId];
|
||||
final toPos = nodePositions[edge.toDeviceId];
|
||||
if (fromPos == null || toPos == null) continue;
|
||||
|
||||
// Use node centres
|
||||
final from = toMinimap(fromPos + const Offset(80, 55));
|
||||
final to = toMinimap(toPos + const Offset(80, 55));
|
||||
canvas.drawLine(from, to, edgePaint);
|
||||
}
|
||||
|
||||
// Device nodes
|
||||
for (final node in graph.nodes) {
|
||||
final pos = nodePositions[node.device.id];
|
||||
if (pos == null) continue;
|
||||
final minimapPos = toMinimap(pos);
|
||||
final rect = Rect.fromLTWH(
|
||||
minimapPos.dx - _nodeRectSize.width / 2,
|
||||
minimapPos.dy - _nodeRectSize.height / 2,
|
||||
_nodeRectSize.width,
|
||||
_nodeRectSize.height,
|
||||
);
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(rect, const Radius.circular(1.5)),
|
||||
Paint()
|
||||
..color = _roleColor(node.device.role)
|
||||
..style = PaintingStyle.fill,
|
||||
);
|
||||
}
|
||||
|
||||
// Viewport rectangle
|
||||
final m = controller.value;
|
||||
final currentScale = m.getMaxScaleOnAxis();
|
||||
if (currentScale > 0) {
|
||||
// The translation is in the 3rd column of the matrix
|
||||
final tx = m.getTranslation().x;
|
||||
final ty = m.getTranslation().y;
|
||||
|
||||
// Viewport in canvas coordinates
|
||||
final vpLeft = -tx / currentScale;
|
||||
final vpTop = -ty / currentScale;
|
||||
final vpWidth = viewportSize.width / currentScale;
|
||||
final vpHeight = viewportSize.height / currentScale;
|
||||
|
||||
final tl = toMinimap(Offset(vpLeft, vpTop));
|
||||
final br = toMinimap(Offset(vpLeft + vpWidth, vpTop + vpHeight));
|
||||
final vpRect = Rect.fromPoints(tl, br);
|
||||
|
||||
// Fill
|
||||
canvas.drawRect(
|
||||
vpRect,
|
||||
Paint()
|
||||
..color = colorScheme.primary.withValues(alpha: 0.08)
|
||||
..style = PaintingStyle.fill,
|
||||
);
|
||||
// Border
|
||||
canvas.drawRect(
|
||||
vpRect,
|
||||
Paint()
|
||||
..color = colorScheme.primary.withValues(alpha: 0.6)
|
||||
..strokeWidth = 1.0
|
||||
..style = PaintingStyle.stroke,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _MinimapPainter old) => true;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Vertical +/−/fit-to-view zoom controls for the topology canvas.
|
||||
/// Requires a [TransformationController] shared with the [InteractiveViewer].
|
||||
class ZoomControls extends StatelessWidget {
|
||||
const ZoomControls({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.canvasSize,
|
||||
required this.viewportSize,
|
||||
});
|
||||
|
||||
final TransformationController controller;
|
||||
|
||||
/// Full canvas size (from [computeSugiyamaLayout] result).
|
||||
final Size canvasSize;
|
||||
|
||||
/// Viewport widget size (the screen area the canvas is displayed in).
|
||||
final Size viewportSize;
|
||||
|
||||
static const double _zoomIn = 1.25;
|
||||
static const double _zoomOut = 0.8;
|
||||
static const double _minScale = 0.2;
|
||||
static const double _maxScale = 2.5;
|
||||
|
||||
void _applyZoom(double factor) {
|
||||
final current = controller.value.getMaxScaleOnAxis();
|
||||
final next = (current * factor).clamp(_minScale, _maxScale);
|
||||
final scale = next / current;
|
||||
final cx = viewportSize.width / 2;
|
||||
final cy = viewportSize.height / 2;
|
||||
// Compose: T(cx,cy) * Scale(s) * T(-cx,-cy) * currentTransform
|
||||
final result = Matrix4.translationValues(cx, cy, 0);
|
||||
result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
|
||||
result.multiply(Matrix4.translationValues(-cx, -cy, 0));
|
||||
result.multiply(controller.value);
|
||||
controller.value = result;
|
||||
}
|
||||
|
||||
void _fitToView() {
|
||||
if (canvasSize.isEmpty) return;
|
||||
final scaleX = viewportSize.width / canvasSize.width;
|
||||
final scaleY = viewportSize.height / canvasSize.height;
|
||||
final scale = (scaleX < scaleY ? scaleX : scaleY).clamp(_minScale, _maxScale);
|
||||
final tx = (viewportSize.width - canvasSize.width * scale) / 2;
|
||||
final ty = (viewportSize.height - canvasSize.height * scale) / 2;
|
||||
// Build: T(tx,ty,0) * Scale(s,s,1) — maps canvas (0,0) → (tx,ty) on screen
|
||||
final result = Matrix4.translationValues(tx, ty, 0);
|
||||
result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
|
||||
controller.value = result;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
|
||||
return Material(
|
||||
color: cs.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
elevation: 2,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_ZoomButton(
|
||||
icon: Icons.add,
|
||||
tooltip: 'Zoom in',
|
||||
onTap: () => _applyZoom(_zoomIn),
|
||||
),
|
||||
_Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
|
||||
_ZoomButton(
|
||||
icon: Icons.remove,
|
||||
tooltip: 'Zoom out',
|
||||
onTap: () => _applyZoom(_zoomOut),
|
||||
),
|
||||
_Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
|
||||
_ZoomButton(
|
||||
icon: Icons.fit_screen_outlined,
|
||||
tooltip: 'Fit to view',
|
||||
onTap: _fitToView,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ZoomButton extends StatelessWidget {
|
||||
const _ZoomButton({
|
||||
required this.icon,
|
||||
required this.tooltip,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String tooltip;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: Icon(icon, size: 18, color: cs.onSurfaceVariant),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Divider extends StatelessWidget {
|
||||
const _Divider({required this.color});
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Divider(height: 1, color: color),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
-- Add status column to network_devices for online/offline/warning indicators.
|
||||
ALTER TABLE network_devices
|
||||
ADD COLUMN IF NOT EXISTS status TEXT NOT NULL DEFAULT 'unknown'
|
||||
CHECK (status IN ('online', 'offline', 'warning', 'unknown'));
|
||||
Reference in New Issue
Block a user