feat(apps): 重构 UI 架构为 presentation 层并新增 l10n 国际化支持
This commit is contained in:
qzl
@@ -0,0 +1,240 @@
|
||||
import '../../data/models/schedule_item_model.dart';
|
||||
import 'day_timeline_metrics.dart';
|
||||
import 'day_view_scale.dart';
|
||||
|
||||
class DayEventLayout {
|
||||
final ScheduleItemModel event;
|
||||
final int startMinutes;
|
||||
final int endMinutes;
|
||||
final int column;
|
||||
final int columnCount;
|
||||
final double top;
|
||||
final double geometryHeight;
|
||||
final double visualHeight;
|
||||
final double left;
|
||||
final double width;
|
||||
|
||||
const DayEventLayout({
|
||||
required this.event,
|
||||
required this.startMinutes,
|
||||
required this.endMinutes,
|
||||
required this.column,
|
||||
required this.columnCount,
|
||||
required this.top,
|
||||
required this.geometryHeight,
|
||||
required this.visualHeight,
|
||||
required this.left,
|
||||
required this.width,
|
||||
});
|
||||
}
|
||||
|
||||
class DayEventLayoutEngine {
|
||||
const DayEventLayoutEngine();
|
||||
|
||||
List<DayEventLayout> layout({
|
||||
required List<ScheduleItemModel> events,
|
||||
required DayViewScale scale,
|
||||
required double eventAreaLeft,
|
||||
required double eventAreaWidth,
|
||||
required DateTime viewDate,
|
||||
double columnGap = DayTimelineMetrics.eventColumnGap,
|
||||
}) {
|
||||
if (events.isEmpty || eventAreaWidth <= 0) {
|
||||
return const [];
|
||||
}
|
||||
|
||||
final sorted =
|
||||
events
|
||||
.map((e) => _EventSpan.fromEvent(e, viewDate))
|
||||
.expand((spans) => spans)
|
||||
.where((span) => span.endMinutes > span.startMinutes)
|
||||
.toList()
|
||||
..sort((a, b) {
|
||||
final byStart = a.startMinutes.compareTo(b.startMinutes);
|
||||
if (byStart != 0) {
|
||||
return byStart;
|
||||
}
|
||||
final byEnd = a.endMinutes.compareTo(b.endMinutes);
|
||||
if (byEnd != 0) {
|
||||
return byEnd;
|
||||
}
|
||||
return a.event.id.compareTo(b.event.id);
|
||||
});
|
||||
|
||||
if (sorted.isEmpty) {
|
||||
return const [];
|
||||
}
|
||||
|
||||
final active = <_PlacedSpan>[];
|
||||
final clusters = <List<_PlacedSpan>>[];
|
||||
List<_PlacedSpan> currentCluster = [];
|
||||
var clusterEnd = sorted.first.endMinutes;
|
||||
|
||||
for (final span in sorted) {
|
||||
active.removeWhere((item) => item.endMinutes <= span.startMinutes);
|
||||
|
||||
if (currentCluster.isNotEmpty && span.startMinutes >= clusterEnd) {
|
||||
clusters.add(currentCluster);
|
||||
currentCluster = [];
|
||||
clusterEnd = span.endMinutes;
|
||||
} else if (span.endMinutes > clusterEnd) {
|
||||
clusterEnd = span.endMinutes;
|
||||
}
|
||||
|
||||
final usedColumns = active.map((item) => item.column).toSet();
|
||||
var column = 0;
|
||||
while (usedColumns.contains(column)) {
|
||||
column++;
|
||||
}
|
||||
|
||||
final placed = _PlacedSpan(
|
||||
event: span.event,
|
||||
startMinutes: span.startMinutes,
|
||||
endMinutes: span.endMinutes,
|
||||
column: column,
|
||||
);
|
||||
active.add(placed);
|
||||
currentCluster.add(placed);
|
||||
}
|
||||
|
||||
if (currentCluster.isNotEmpty) {
|
||||
clusters.add(currentCluster);
|
||||
}
|
||||
|
||||
final layouts = <DayEventLayout>[];
|
||||
for (final cluster in clusters) {
|
||||
final clusterColumnCount =
|
||||
cluster.map((item) => item.column).reduce((a, b) => a > b ? a : b) +
|
||||
1;
|
||||
final totalGap = (clusterColumnCount - 1) * columnGap;
|
||||
final columnWidth = clusterColumnCount > 0
|
||||
? ((eventAreaWidth - totalGap) / clusterColumnCount).toDouble()
|
||||
: eventAreaWidth;
|
||||
|
||||
for (final item in cluster) {
|
||||
final top = scale.pixelsForMinutes(item.startMinutes);
|
||||
final geometryHeight = scale.pixelsForMinutes(
|
||||
item.endMinutes - item.startMinutes,
|
||||
);
|
||||
final visualHeight = geometryHeight < 1 ? 1.0 : geometryHeight;
|
||||
final left = eventAreaLeft + item.column * (columnWidth + columnGap);
|
||||
|
||||
layouts.add(
|
||||
DayEventLayout(
|
||||
event: item.event,
|
||||
startMinutes: item.startMinutes,
|
||||
endMinutes: item.endMinutes,
|
||||
column: item.column,
|
||||
columnCount: clusterColumnCount,
|
||||
top: top,
|
||||
geometryHeight: geometryHeight,
|
||||
visualHeight: visualHeight,
|
||||
left: left,
|
||||
width: columnWidth,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return layouts;
|
||||
}
|
||||
}
|
||||
|
||||
class _EventSpan {
|
||||
final ScheduleItemModel event;
|
||||
final int startMinutes;
|
||||
final int endMinutes;
|
||||
|
||||
const _EventSpan({
|
||||
required this.event,
|
||||
required this.startMinutes,
|
||||
required this.endMinutes,
|
||||
});
|
||||
|
||||
static List<_EventSpan> fromEvent(
|
||||
ScheduleItemModel event,
|
||||
DateTime viewDate,
|
||||
) {
|
||||
final startAt = event.startAt;
|
||||
final endAt = event.endAt;
|
||||
final viewDateOnly = DateTime(viewDate.year, viewDate.month, viewDate.day);
|
||||
final startDateOnly = DateTime(startAt.year, startAt.month, startAt.day);
|
||||
final endDateOnly = endAt != null
|
||||
? DateTime(endAt.year, endAt.month, endAt.day)
|
||||
: startDateOnly;
|
||||
|
||||
final startMinOfDay = _minutesOfDay(startAt);
|
||||
final endMinOfDay = endAt != null
|
||||
? _minutesOfDay(endAt)
|
||||
: startMinOfDay + 60;
|
||||
|
||||
if (endDateOnly.isAfter(startDateOnly)) {
|
||||
if (viewDateOnly.isAtSameMomentAs(startDateOnly)) {
|
||||
final clampedStart = DayTimelineMetrics.clampMinuteOfDay(startMinOfDay);
|
||||
final clampedEnd = DayTimelineMetrics.minutesInDay;
|
||||
if (clampedEnd > clampedStart) {
|
||||
return [
|
||||
_EventSpan(
|
||||
event: event,
|
||||
startMinutes: clampedStart,
|
||||
endMinutes: clampedEnd,
|
||||
),
|
||||
];
|
||||
}
|
||||
} else if (viewDateOnly.isAtSameMomentAs(endDateOnly)) {
|
||||
final clampedStart = 0;
|
||||
final clampedEnd = DayTimelineMetrics.clampMinuteOfDay(endMinOfDay);
|
||||
if (clampedEnd > clampedStart) {
|
||||
return [
|
||||
_EventSpan(
|
||||
event: event,
|
||||
startMinutes: clampedStart,
|
||||
endMinutes: clampedEnd,
|
||||
),
|
||||
];
|
||||
}
|
||||
} else if (viewDateOnly.isAfter(startDateOnly) &&
|
||||
viewDateOnly.isBefore(endDateOnly)) {
|
||||
return [
|
||||
_EventSpan(
|
||||
event: event,
|
||||
startMinutes: 0,
|
||||
endMinutes: DayTimelineMetrics.minutesInDay,
|
||||
),
|
||||
];
|
||||
}
|
||||
return const [];
|
||||
}
|
||||
|
||||
final clampedStart = DayTimelineMetrics.clampMinuteOfDay(startMinOfDay);
|
||||
var clampedEnd = DayTimelineMetrics.clampMinuteOfDay(endMinOfDay);
|
||||
if (clampedEnd <= clampedStart) {
|
||||
clampedEnd = clampedStart + 1;
|
||||
}
|
||||
return [
|
||||
_EventSpan(
|
||||
event: event,
|
||||
startMinutes: clampedStart,
|
||||
endMinutes: clampedEnd,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
class _PlacedSpan {
|
||||
final ScheduleItemModel event;
|
||||
final int startMinutes;
|
||||
final int endMinutes;
|
||||
final int column;
|
||||
|
||||
const _PlacedSpan({
|
||||
required this.event,
|
||||
required this.startMinutes,
|
||||
required this.endMinutes,
|
||||
required this.column,
|
||||
});
|
||||
}
|
||||
|
||||
int _minutesOfDay(DateTime dateTime) {
|
||||
return dateTime.hour * 60 + dateTime.minute;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import 'day_view_scale.dart';
|
||||
|
||||
class DayTimelineMetrics {
|
||||
static const int hoursInDay = 24;
|
||||
static const int minutesInHour = 60;
|
||||
static const int minutesInDay = hoursInDay * minutesInHour;
|
||||
|
||||
static const double timeLabelWidth = 44;
|
||||
static const double timeLabelGap = 8;
|
||||
static const double eventRightInset = 4;
|
||||
static const double eventColumnGap = 4;
|
||||
|
||||
static double timelineHeight(DayViewScale scale) {
|
||||
return scale.pixelsForMinutes(minutesInDay);
|
||||
}
|
||||
|
||||
static double eventAreaLeft() {
|
||||
return timeLabelWidth + timeLabelGap;
|
||||
}
|
||||
|
||||
static double eventAreaWidth(double boardWidth) {
|
||||
final width = boardWidth - eventAreaLeft() - eventRightInset;
|
||||
return width > 0 ? width : 0;
|
||||
}
|
||||
|
||||
static int clampMinuteOfDay(int minute) {
|
||||
return minute.clamp(0, minutesInDay).toInt();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
class DayViewScale {
|
||||
static const double defaultHourHeight = 34.0;
|
||||
static const double minHourHeight = 34.0;
|
||||
static const double maxHourHeight = 68.0;
|
||||
|
||||
final double hourHeight;
|
||||
|
||||
const DayViewScale({required this.hourHeight});
|
||||
|
||||
factory DayViewScale.defaultScale() {
|
||||
return const DayViewScale(hourHeight: minHourHeight);
|
||||
}
|
||||
|
||||
DayViewScale copyWith({double? hourHeight}) {
|
||||
return DayViewScale(
|
||||
hourHeight: _clampHourHeight(hourHeight ?? this.hourHeight),
|
||||
);
|
||||
}
|
||||
|
||||
DayViewScale zoomByFactor(double factor) {
|
||||
if (factor <= 0) {
|
||||
return this;
|
||||
}
|
||||
return copyWith(hourHeight: hourHeight * factor);
|
||||
}
|
||||
|
||||
double pixelsForMinutes(int minutes) {
|
||||
return (minutes / 60) * hourHeight;
|
||||
}
|
||||
|
||||
double minutesForPixels(double pixels) {
|
||||
return (pixels / hourHeight) * 60;
|
||||
}
|
||||
|
||||
static double _clampHourHeight(double value) {
|
||||
return value.clamp(minHourHeight, maxHourHeight);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user