use latest version of timline poc
This commit is contained in:
254
packages/z-flutter/lib/main.dart
Normal file
254
packages/z-flutter/lib/main.dart
Normal file
@@ -0,0 +1,254 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:z_timeline/z_timeline.dart';
|
||||
|
||||
import 'bridge.dart';
|
||||
import 'state.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const MainApp());
|
||||
}
|
||||
|
||||
class MainApp extends StatefulWidget {
|
||||
const MainApp({super.key});
|
||||
|
||||
@override
|
||||
State<MainApp> createState() => _MainAppState();
|
||||
}
|
||||
|
||||
class _MainAppState extends State<MainApp> {
|
||||
TimelineState? _state;
|
||||
List<TimelineGroup> _groups = const [];
|
||||
List<TimelineEntry> _entries = const [];
|
||||
TimelineViewportNotifier? _viewport;
|
||||
bool _darkMode = true;
|
||||
|
||||
/// Height of the tiered header: 2 rows x 28px + 1px border.
|
||||
static const double _tieredHeaderHeight = 28.0 * 2 + 1;
|
||||
|
||||
/// Height of the breadcrumb bar.
|
||||
static const double _breadcrumbHeight = 40.0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initBridge();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_viewport?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _initBridge() {
|
||||
final initial = readInitialState();
|
||||
if (initial != null) {
|
||||
_applyState(TimelineState.fromJson(initial));
|
||||
}
|
||||
|
||||
onStateUpdated((json) {
|
||||
_applyState(TimelineState.fromJson(json));
|
||||
});
|
||||
}
|
||||
|
||||
void _applyState(TimelineState state) {
|
||||
final groups = _convertGroups(state);
|
||||
final entries = _convertEntries(state);
|
||||
final domain = _computeDomain(entries);
|
||||
|
||||
setState(() {
|
||||
_state = state;
|
||||
_groups = groups;
|
||||
_entries = entries;
|
||||
_darkMode = state.darkMode;
|
||||
|
||||
_viewport ??= TimelineViewportNotifier(
|
||||
start: domain.start,
|
||||
end: domain.end,
|
||||
);
|
||||
});
|
||||
|
||||
_emitContentHeight();
|
||||
}
|
||||
|
||||
/// Build an ordered list of [TimelineGroup] using [groupOrder].
|
||||
List<TimelineGroup> _convertGroups(TimelineState state) {
|
||||
return [
|
||||
for (final id in state.groupOrder)
|
||||
if (state.groups[id] case final g?)
|
||||
TimelineGroup(id: g.id, title: g.title),
|
||||
];
|
||||
}
|
||||
|
||||
/// Build a flat list of [TimelineEntry] from the normalized items map.
|
||||
List<TimelineEntry> _convertEntries(TimelineState state) {
|
||||
return [
|
||||
for (final item in state.items.values)
|
||||
() {
|
||||
final start = DateTime.parse(item.start);
|
||||
final end = item.end != null
|
||||
? DateTime.parse(item.end!)
|
||||
: start.add(const Duration(days: 1));
|
||||
|
||||
return TimelineEntry(
|
||||
id: item.id,
|
||||
groupId: item.groupId,
|
||||
start: start,
|
||||
end: end,
|
||||
lane: item.lane,
|
||||
hasEnd: item.end != null,
|
||||
);
|
||||
}(),
|
||||
];
|
||||
}
|
||||
|
||||
({DateTime start, DateTime end}) _computeDomain(List<TimelineEntry> entries) {
|
||||
if (entries.isEmpty) {
|
||||
final now = DateTime.now();
|
||||
return (
|
||||
start: now.subtract(const Duration(days: 30)),
|
||||
end: now.add(const Duration(days: 30)),
|
||||
);
|
||||
}
|
||||
|
||||
var earliest = entries.first.start;
|
||||
var latest = entries.first.end;
|
||||
for (final e in entries) {
|
||||
if (e.start.isBefore(earliest)) earliest = e.start;
|
||||
if (e.end.isAfter(latest)) latest = e.end;
|
||||
}
|
||||
|
||||
// Add 10% padding on each side
|
||||
final span = latest.difference(earliest);
|
||||
final padding = Duration(milliseconds: (span.inMilliseconds * 0.1).round());
|
||||
return (start: earliest.subtract(padding), end: latest.add(padding));
|
||||
}
|
||||
|
||||
void _onEntryMoved(
|
||||
TimelineEntry entry,
|
||||
DateTime newStart,
|
||||
String newGroupId,
|
||||
int newLane,
|
||||
) {
|
||||
final duration = entry.end.difference(entry.start);
|
||||
final newEnd = entry.hasEnd ? newStart.add(duration) : null;
|
||||
|
||||
// Optimistic update -- apply locally before the host round-trips.
|
||||
if (_state case final state?) {
|
||||
final oldItem = state.items[entry.id];
|
||||
if (oldItem != null) {
|
||||
final updatedItems = Map<String, TimelineItemData>.of(state.items);
|
||||
updatedItems[entry.id] = TimelineItemData(
|
||||
id: oldItem.id,
|
||||
groupId: newGroupId,
|
||||
title: oldItem.title,
|
||||
description: oldItem.description,
|
||||
start: newStart.toIso8601String(),
|
||||
end: newEnd?.toIso8601String(),
|
||||
lane: newLane,
|
||||
);
|
||||
final updatedState = TimelineState(
|
||||
timeline: state.timeline,
|
||||
groups: state.groups,
|
||||
items: updatedItems,
|
||||
groupOrder: state.groupOrder,
|
||||
selectedItemId: state.selectedItemId,
|
||||
darkMode: state.darkMode,
|
||||
);
|
||||
_applyState(updatedState);
|
||||
}
|
||||
}
|
||||
|
||||
emitEvent('entry_moved', <String, Object?>{
|
||||
'entryId': entry.id,
|
||||
'newStart': newStart.toIso8601String(),
|
||||
'newGroupId': newGroupId,
|
||||
'newLane': newLane,
|
||||
'newEnd': newEnd?.toIso8601String(),
|
||||
});
|
||||
}
|
||||
|
||||
void _emitContentHeight() {
|
||||
// Start with the fixed chrome heights.
|
||||
var totalHeight = _tieredHeaderHeight + _breadcrumbHeight;
|
||||
|
||||
for (final group in _groups) {
|
||||
totalHeight += ZTimelineConstants.groupHeaderHeight;
|
||||
final groupEntries = _entries.where((e) => e.groupId == group.id);
|
||||
var maxLane = 0;
|
||||
for (final e in groupEntries) {
|
||||
if (e.lane > maxLane) maxLane = e.lane;
|
||||
}
|
||||
final lanesCount = maxLane.clamp(0, 1000);
|
||||
totalHeight +=
|
||||
lanesCount * ZTimelineConstants.laneHeight +
|
||||
(lanesCount > 0
|
||||
? (lanesCount - 1) * ZTimelineConstants.laneVerticalSpacing
|
||||
: 0) +
|
||||
ZTimelineConstants.verticalOuterPadding * 2;
|
||||
}
|
||||
emitEvent('content_height', {'height': totalHeight});
|
||||
}
|
||||
|
||||
/// O(1) label lookup from the normalized items map.
|
||||
String _labelForEntry(TimelineEntry entry) {
|
||||
return _state?.items[entry.id]?.title ?? entry.id;
|
||||
}
|
||||
|
||||
static const _groupColors = [
|
||||
Color(0xFF4285F4), // blue
|
||||
Color(0xFF34A853), // green
|
||||
Color(0xFFFBBC04), // yellow
|
||||
Color(0xFFEA4335), // red
|
||||
Color(0xFF9C27B0), // purple
|
||||
Color(0xFF00BCD4), // cyan
|
||||
Color(0xFFFF9800), // orange
|
||||
Color(0xFF795548), // brown
|
||||
];
|
||||
|
||||
Color _colorForEntry(TimelineEntry entry) {
|
||||
final groupIndex = _groups.indexWhere((g) => g.id == entry.groupId);
|
||||
if (groupIndex < 0) return _groupColors[0];
|
||||
return _groupColors[groupIndex % _groupColors.length];
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final viewport = _viewport;
|
||||
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: _darkMode
|
||||
? ThemeData.dark(useMaterial3: true)
|
||||
: ThemeData.light(useMaterial3: true),
|
||||
home: Scaffold(
|
||||
backgroundColor: Colors.transparent,
|
||||
body: _state == null || viewport == null
|
||||
? const Center(child: Text('Waiting for state...'))
|
||||
: ZTimelineScope(
|
||||
viewport: viewport,
|
||||
child: Column(
|
||||
children: [
|
||||
const ZTimelineBreadcrumb(),
|
||||
const ZTimelineTieredHeader(),
|
||||
Expanded(
|
||||
child: ZTimelineInteractor(
|
||||
child: ZTimelineView(
|
||||
groups: _groups,
|
||||
entries: _entries,
|
||||
viewport: viewport,
|
||||
labelBuilder: _labelForEntry,
|
||||
colorBuilder: _colorForEntry,
|
||||
enableDrag: true,
|
||||
onEntryMoved: _onEntryMoved,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user