jntn/zendegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

always set lane

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-02-25 20:00:43 +01:00
parent ea22da9e5a
commit f3b645ac53
13 changed files with 325 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/db/package.json
View File

@@ -16,6 +16,7 @@
"db:migrate": "drizzle-kit migrate",
"check-types": "tsc --noEmit",
"lint": "eslint .",
"db:fix-lanes": "node --env-file=../../apps/web/.env --import=tsx src/scripts/fix-lanes.ts",
"db:start": "docker compose up -d",
"db:watch": "docker compose up",
"db:stop": "docker compose stop",
@@ -34,6 +35,7 @@
"@zendegi/eslint-config": "workspace:*",
"drizzle-kit": "^0.31.8",
"eslint": "^9.17.0",
"tsx": "^4.21.0",
"typescript": "catalog:"
}
}

1
packages/db/src/schema/timeline.ts
View File

@@ -42,6 +42,7 @@ export const timelineItem = pgTable("timeline_item", {
start: timestamp("start", { withTimezone: true }).notNull().defaultNow(),
// Allow null to denote a event without duration
end: timestamp("end", { withTimezone: true }),
lane: integer("lane").notNull().default(1),
...timestamps,
});

88
packages/db/src/scripts/fix-lanes.ts Normal file
View File

@@ -0,0 +1,88 @@
/**
* One-time script to backfill lane values for existing timeline items.
*
* For each group: fetches items ordered by start, assigns lanes with
* the greedy algorithm, and updates the DB.
*
* Run from repo root:
* node --env-file=apps/web/.env --import=tsx packages/db/src/scripts/fix-lanes.ts
*/
import { eq } from "drizzle-orm";
import { drizzle } from "drizzle-orm/node-postgres";
import { timelineGroup, timelineItem } from "../schema/timeline";
const DATABASE_URL = process.env.DATABASE_URL;
if (!DATABASE_URL) {
throw new Error("DATABASE_URL is required");
}
interface ItemForLane {
id: string;
start: Date;
end: Date | null;
lane: number;
}
function assignLane(
existing: ItemForLane[],
newStart: Date,
newEnd: Date | null
): number {
const end = newEnd ?? new Date(newStart.getTime() + 24 * 60 * 60 * 1000);
for (let lane = 1; lane <= 100; lane++) {
const hasConflict = existing.some((item) => {
if (item.lane !== lane) return false;
const itemEnd =
item.end ?? new Date(item.start.getTime() + 24 * 60 * 60 * 1000);
return newStart < itemEnd && end > item.start;
});
if (!hasConflict) return lane;
}
return 1;
}
async function main() {
const db = drizzle(DATABASE_URL!);
const groups = await db.select({ id: timelineGroup.id }).from(timelineGroup);
console.log(`Found ${groups.length} groups`);
for (const group of groups) {
const items = await db
.select()
.from(timelineItem)
.where(eq(timelineItem.timelineGroupId, group.id))
.orderBy(timelineItem.start);
if (items.length === 0) continue;
const assigned: ItemForLane[] = [];
let updated = 0;
for (const item of items) {
const lane = assignLane(assigned, item.start, item.end);
assigned.push({ id: item.id, start: item.start, end: item.end, lane });
if (item.lane !== lane) {
await db
.update(timelineItem)
.set({ lane })
.where(eq(timelineItem.id, item.id));
updated++;
}
}
console.log(
`Group ${group.id}: ${items.length} items, ${updated} lanes updated`
);
}
console.log("Done");
process.exit(0);
}
main().catch((err) => {
console.error(err);
process.exit(1);
});

77
packages/z-timeline/lib/main.dart
View File

@@ -64,35 +64,25 @@ class _MainAppState extends State<MainApp> {
}
List<TimelineGroup> _convertGroups(List<TimelineGroupData> groups) {
return [
for (final g in groups) TimelineGroup(id: g.id, title: g.title),
];
return [for (final g in groups) TimelineGroup(id: g.id, title: g.title)];
}
List<TimelineEntry> _convertEntries(List<TimelineGroupData> groups) {
final entries = <TimelineEntry>[];
for (final group in groups) {
// Collect all items for this group to compute lanes
final groupItems = group.items;
final sorted = [...groupItems]..sort(
(a, b) => a.start.compareTo(b.start),
);
for (final item in sorted) {
for (final item in group.items) {
final start = DateTime.parse(item.start);
final end = item.end != null
? DateTime.parse(item.end!)
: start.add(const Duration(days: 1));
final lane = _assignLane(entries, group.id, start, end);
entries.add(
TimelineEntry(
id: item.id,
groupId: group.id,
start: start,
end: end,
lane: lane,
lane: item.lane,
),
);
}
@@ -100,26 +90,13 @@ class _MainAppState extends State<MainApp> {
return entries;
}
int _assignLane(
List<TimelineEntry> existing,
String groupId,
DateTime start,
DateTime end,
) {
final groupEntries = existing.where((e) => e.groupId == groupId);
for (var lane = 1; lane <= 100; lane++) {
final hasConflict = groupEntries.any(
(e) => e.lane == lane && e.overlaps(start, end),
);
if (!hasConflict) return lane;
}
return 1;
}
({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)));
return (
start: now.subtract(const Duration(days: 30)),
end: now.add(const Duration(days: 30)),
);
}
var earliest = entries.first.start;
@@ -132,10 +109,7 @@ class _MainAppState extends State<MainApp> {
// 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),
);
return (start: earliest.subtract(padding), end: latest.add(padding));
}
void _onEntryMoved(
@@ -144,34 +118,16 @@ class _MainAppState extends State<MainApp> {
String newGroupId,
int newLane,
) {
// Emit event to React via bridge
final duration = entry.end.difference(entry.start);
final newEnd = newStart.add(duration);
emitEvent('entry_moved', {
'entryId': entry.id,
'newStart': newStart.toIso8601String(),
'newEnd': newEnd.toIso8601String(),
'newGroupId': newGroupId,
'newLane': newLane,
});
// Update local state so Flutter UI reflects the move immediately
setState(() {
final duration = entry.end.difference(entry.start);
final newEnd = newStart.add(duration);
_entries = [
for (final e in _entries)
if (e.id == entry.id)
e.copyWith(
groupId: newGroupId,
start: newStart,
end: newEnd,
lane: newLane,
)
else
e,
];
});
_emitContentHeight();
}
void _emitContentHeight() {
@@ -184,9 +140,12 @@ class _MainAppState extends State<MainApp> {
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;
totalHeight +=
lanesCount * ZTimelineConstants.laneHeight +
(lanesCount > 0
? (lanesCount - 1) * ZTimelineConstants.laneVerticalSpacing
: 0) +
ZTimelineConstants.verticalOuterPadding * 2;
}
emitEvent('content_height', {'height': totalHeight});
}

17
packages/z-timeline/lib/src/widgets/group_drop_target.dart
View File

@@ -12,7 +12,10 @@ import 'timeline_view.dart';
/// A drop target wrapper for a timeline group.
///
/// Wraps group lanes content and handles drag-and-drop operations.
/// Wraps the entire group column (header + lanes) and handles drag-and-drop
/// operations. The [verticalOffset] accounts for the header height and padding
/// so that lane calculations are correct relative to the lanes stack.
///
/// The ghost overlay is rendered by the parent widget in the same Stack.
class GroupDropTarget extends StatelessWidget {
const GroupDropTarget({
@@ -24,6 +27,7 @@ class GroupDropTarget extends StatelessWidget {
required this.laneHeight,
required this.lanesCount,
required this.onEntryMoved,
required this.verticalOffset,
required this.child,
super.key,
});
@@ -36,6 +40,11 @@ class GroupDropTarget extends StatelessWidget {
final double laneHeight;
final int lanesCount;
final OnEntryMoved? onEntryMoved;
/// The vertical offset from the top of this widget to the top of the lanes
/// stack. This accounts for the group header height and any padding.
final double verticalOffset;
final Widget child;
@override
@@ -65,8 +74,12 @@ class GroupDropTarget extends StatelessWidget {
viewport.end,
);
// Subtract header + padding offset so Y is relative to the lanes stack.
// When the cursor is over the header, adjustedY is negative and clamps
// to lane 1.
final adjustedY = local.dy - verticalOffset;
final rawLane = LayoutCoordinateService.yToLane(
y: local.dy,
y: adjustedY,
laneHeight: laneHeight,
);
final maxAllowedLane = (lanesCount <= 0 ? 1 : lanesCount) + 1;

41
packages/z-timeline/lib/src/widgets/timeline_view.dart
View File

@@ -84,7 +84,7 @@ class ZTimelineView extends StatelessWidget {
projected[group.id] ?? const <ProjectedEntry>[];
final lanesCount = _countLanes(groupEntries);
return Column(
final column = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_GroupHeader(title: group.title, height: groupHeaderHeight),
@@ -98,11 +98,31 @@ class ZTimelineView extends StatelessWidget {
colorBuilder: colorBuilder,
labelBuilder: labelBuilder,
contentWidth: contentWidth,
onEntryMoved: onEntryMoved,
enableDrag: enableDrag,
),
],
);
// Wrap the entire group (header + lanes) in a DragTarget
// so dragging over headers still updates the ghost position.
if (enableDrag && onEntryMoved != null) {
return GroupDropTarget(
group: group,
entries: groupEntries,
allEntries: entries,
viewport: viewport,
contentWidth: contentWidth,
laneHeight: laneHeight,
lanesCount: lanesCount,
onEntryMoved: onEntryMoved,
verticalOffset:
groupHeaderHeight +
ZTimelineConstants.verticalOuterPadding,
child: column,
);
}
return column;
},
);
},
@@ -157,7 +177,6 @@ class _GroupLanes extends StatelessWidget {
required this.labelBuilder,
required this.colorBuilder,
required this.contentWidth,
required this.onEntryMoved,
required this.enableDrag,
});
@@ -170,7 +189,6 @@ class _GroupLanes extends StatelessWidget {
final EntryLabelBuilder labelBuilder;
final EntryColorBuilder colorBuilder;
final double contentWidth;
final OnEntryMoved? onEntryMoved;
final bool enableDrag;
@override
@@ -264,21 +282,6 @@ class _GroupLanes extends StatelessWidget {
),
);
// Wrap with DragTarget if drag is enabled
if (enableDrag && onEntryMoved != null) {
innerStack = GroupDropTarget(
group: group,
entries: entries,
allEntries: allEntries,
viewport: viewport,
contentWidth: contentWidth,
laneHeight: laneHeight,
lanesCount: lanesCount,
onEntryMoved: onEntryMoved,
child: innerStack,
);
}
return AnimatedSize(
duration: const Duration(milliseconds: 150),
curve: Curves.easeInOut,

3
packages/z-timeline/lib/state.dart
View File

@@ -61,6 +61,7 @@ class TimelineItemData {
final String? description;
final String start;
final String? end;
final int lane;
TimelineItemData({
required this.id,
@@ -68,6 +69,7 @@ class TimelineItemData {
this.description,
required this.start,
this.end,
required this.lane,
});
factory TimelineItemData.fromJson(Map<String, dynamic> json) {
@@ -77,6 +79,7 @@ class TimelineItemData {
description: json['description'] as String?,
start: json['start'] as String,
end: json['end'] as String?,
lane: json['lane'] as int,
);
}
}

37
packages/z-timeline/web/index.html
View File

@@ -51,9 +51,9 @@
title: "Design",
sortOrder: 0,
items: [
{ id: "e-1", title: "Brand identity", start: "2026-01-02", end: "2026-01-08" },
{ id: "e-2", title: "UI mockups", start: "2026-01-06", end: "2026-01-14" },
{ id: "e-3", title: "Design review", start: "2026-01-20", end: "2026-01-22" },
{ id: "e-1", title: "Brand identity", start: "2026-01-02", end: "2026-01-08", lane: 1 },
{ id: "e-2", title: "UI mockups", start: "2026-01-06", end: "2026-01-14", lane: 2 },
{ id: "e-3", title: "Design review", start: "2026-01-20", end: "2026-01-22", lane: 1 },
],
},
{
@@ -61,9 +61,9 @@
title: "Engineering",
sortOrder: 1,
items: [
{ id: "e-4", title: "API scaffolding", start: "2026-01-05", end: "2026-01-12" },
{ id: "e-5", title: "Auth flow", start: "2026-01-10", end: "2026-01-18" },
{ id: "e-6", title: "Dashboard UI", start: "2026-01-15", end: "2026-01-25" },
{ id: "e-4", title: "API scaffolding", start: "2026-01-05", end: "2026-01-12", lane: 1 },
{ id: "e-5", title: "Auth flow", start: "2026-01-10", end: "2026-01-18", lane: 2 },
{ id: "e-6", title: "Dashboard UI", start: "2026-01-15", end: "2026-01-25", lane: 3 },
],
},
{
@@ -71,9 +71,9 @@
title: "Launch",
sortOrder: 2,
items: [
{ id: "e-7", title: "QA testing", start: "2026-01-19", end: "2026-01-26" },
{ id: "e-8", title: "Beta release", start: "2026-01-24", end: "2026-01-28" },
{ id: "e-9", title: "Marketing prep", start: "2026-01-08", end: "2026-01-15" },
{ id: "e-7", title: "QA testing", start: "2026-01-19", end: "2026-01-26", lane: 1 },
{ id: "e-8", title: "Beta release", start: "2026-01-24", end: "2026-01-28", lane: 2 },
{ id: "e-9", title: "Marketing prep", start: "2026-01-08", end: "2026-01-15", lane: 1 },
],
},
],
@@ -111,15 +111,14 @@
}
if (entry) {
// Preserve duration, update start/end
var oldStart = new Date(entry.start);
var oldEnd = new Date(entry.end);
var duration = oldEnd - oldStart;
var newStart = new Date(p.newStart);
var newEnd = new Date(newStart.getTime() + duration);
// Update start/end from payload (ISO 8601 → date-only)
entry.start = new Date(p.newStart).toISOString().split("T")[0];
entry.end = p.newEnd
? new Date(p.newEnd).toISOString().split("T")[0]
: new Date(new Date(p.newStart).getTime() + (new Date(entry.end) - new Date(entry.start))).toISOString().split("T")[0];
entry.start = newStart.toISOString().split("T")[0];
entry.end = newEnd.toISOString().split("T")[0];
// Preserve the lane from the drop target
entry.lane = p.newLane;
// Add to target group
var targetGroup = state.timeline.groups.find(
@@ -129,6 +128,10 @@
targetGroup.items.push(entry);
}
// Push updated state back to Flutter
if (_updateState) {
_updateState(JSON.stringify(state));
}
}
} else if (event.type === "content_height") {
console.log("[z-timeline dev] content_height:", event.payload.height);