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

handle drag n drop

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-03-02 09:09:00 +01:00
parent f3b645ac53
commit 22067c4904
8 changed files with 195 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/components/flutter-view.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from "react";
import type { FlutterEvent, FlutterTimelineState } from "@/lib/flutter-bridge";
declare global {
interface Window {
@@ -28,8 +29,8 @@ declare global {
}
type FlutterViewProps = {
state: Record<string, unknown>;
onEvent: (event: { type: string; payload?: Record<string, unknown> }) => void;
state: FlutterTimelineState;
onEvent: (event: FlutterEvent) => void;
className?: string;
height?: number;
};
@@ -60,10 +61,7 @@ export function FlutterView({
window.__zendegi__ = {
getState: () => JSON.stringify(stateRef.current),
onEvent: (json: string) => {
const event = JSON.parse(json) as {
type: string;
payload?: Record<string, unknown>;
};
const event = JSON.parse(json) as FlutterEvent;
onEventRef.current(event);
},
};

2
apps/web/src/functions/update-timeline-item.ts
View File

@@ -13,7 +13,7 @@ export const updateTimelineItem = createServerFn({ method: "POST" })
start: z.string().transform((s) => new Date(s)),
end: z
.string()
.nullable()
.nullish()
.transform((s) => (s ? new Date(s) : null)),
timelineGroupId: z.string().uuid(),
lane: z.number().int().min(1),

93
apps/web/src/hooks/use-entry-moved-mutation.ts Normal file
View File

@@ -0,0 +1,93 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import type { getTimeline } from "@/functions/get-timeline";
import { updateTimelineItem } from "@/functions/update-timeline-item";
type TimelineData = Awaited<ReturnType<typeof getTimeline>>;
type EntryMovedVars = {
entryId: string;
newStart: string;
newEnd: string | null;
newGroupId: string;
newLane: number;
};
export function useEntryMovedMutation(timelineId: string) {
const queryClient = useQueryClient();
const queryKey = ["timeline", timelineId];
return useMutation({
mutationFn: (vars: EntryMovedVars) =>
updateTimelineItem({
data: {
id: vars.entryId,
start: vars.newStart,
end: vars.newEnd,
timelineGroupId: vars.newGroupId,
lane: vars.newLane,
},
}),
onMutate: async (vars) => {
// Cancel in-flight fetches so they don't overwrite our optimistic update
await queryClient.cancelQueries({ queryKey });
const previous = queryClient.getQueryData<TimelineData>(queryKey);
queryClient.setQueryData<TimelineData>(queryKey, (old) => {
if (!old) return old;
let movedItem:
| TimelineData["groups"][number]["items"][number]
| undefined;
const groups = old.groups.map((group) => {
const filtered = group.items.filter((item) => {
if (item.id === vars.entryId) {
movedItem = item;
return false;
}
return true;
});
return { ...group, items: filtered };
});
if (!movedItem) return old;
return {
...old,
groups: groups.map((group) =>
group.id === vars.newGroupId
? {
...group,
items: [
...group.items,
{
...movedItem!,
start: new Date(vars.newStart),
end: vars.newEnd ? new Date(vars.newEnd) : null,
lane: vars.newLane,
timelineGroupId: vars.newGroupId,
},
],
}
: group
),
};
});
return { previous };
},
onError: (_err, _vars, context) => {
// Roll back to the previous cache state on server error
if (context?.previous) {
queryClient.setQueryData(queryKey, context.previous);
}
},
onSettled: () => {
// Re-fetch from server to ensure consistency
queryClient.invalidateQueries({ queryKey });
},
});
}

59
apps/web/src/lib/flutter-bridge.ts Normal file
View File

@@ -0,0 +1,59 @@
/**
* Typed contract for React <-> Flutter communication.
*
* State : React -> Flutter (pushed on every render)
* Events : Flutter -> React (emitted by user interaction in Flutter)
*
* Keep this file in sync with `packages/z-timeline/lib/state.dart` and
* the `emitEvent()` calls in `packages/z-timeline/lib/main.dart`.
*/
// ---------------------------------------------------------------------------
// State: React -> Flutter
// ---------------------------------------------------------------------------
export type FlutterTimelineItem = {
id: string;
title: string;
description: string | null;
start: string; // ISO-8601
end: string | null; // ISO-8601 | null for point-events
lane: number;
};
export type FlutterTimelineGroup = {
id: string;
title: string;
sortOrder: number;
items: Array<FlutterTimelineItem>;
};
export type FlutterTimelineData = {
id: string;
title: string;
groups: Array<FlutterTimelineGroup>;
};
export type FlutterTimelineState = {
timeline: FlutterTimelineData;
selectedItemId: string | null;
};
// ---------------------------------------------------------------------------
// Events: Flutter -> React (discriminated union on `type`)
// ---------------------------------------------------------------------------
export type FlutterEvent =
| { type: "content_height"; payload: { height: number } }
| { type: "item_selected"; payload: { itemId: string } }
| { type: "item_deselected" }
| {
type: "entry_moved";
payload: {
entryId: string;
newStart: string;
newEnd: string | null;
newGroupId: string;
newLane: number;
};
};

94
apps/web/src/routes/timeline.$timelineId.tsx
View File

@@ -1,9 +1,10 @@
import { useCallback, useMemo, useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { useSuspenseQuery, useQueryClient } from "@tanstack/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import type { FlutterEvent, FlutterTimelineState } from "@/lib/flutter-bridge";
import { timelineQueryOptions } from "@/functions/get-timeline";
import { updateTimelineItem } from "@/functions/update-timeline-item";
import { FlutterView } from "@/components/flutter-view";
import { useEntryMovedMutation } from "@/hooks/use-entry-moved-mutation";
export const Route = createFileRoute("/timeline/$timelineId")({
loader: async ({ context, params }) => {
@@ -16,12 +17,12 @@ export const Route = createFileRoute("/timeline/$timelineId")({
function RouteComponent() {
const { timelineId } = Route.useParams();
const timelineQuery = useSuspenseQuery(timelineQueryOptions(timelineId));
const timeline = timelineQuery.data;
const queryClient = useQueryClient();
const { data: timeline } = useSuspenseQuery(timelineQueryOptions(timelineId));
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
const [flutterHeight, setFlutterHeight] = useState<number | undefined>();
const entryMoved = useEntryMovedMutation(timelineId);
const flutterState = useMemo(
const flutterState: FlutterTimelineState = useMemo(
() => ({
timeline: {
id: timeline.id,
@@ -34,8 +35,8 @@ function RouteComponent() {
id: item.id,
title: item.title,
description: item.description,
start: item.start,
end: item.end,
start: item.start.toISOString(),
end: item.end?.toISOString() ?? null,
lane: item.lane,
})),
})),
@@ -45,89 +46,24 @@ function RouteComponent() {
[timeline, selectedItemId]
);
const [flutterHeight, setFlutterHeight] = useState<number | undefined>();
const handleEvent = useCallback(
(event: { type: string; payload?: Record<string, unknown> }) => {
(event: FlutterEvent) => {
switch (event.type) {
case "content_height":
setFlutterHeight(event.payload?.height as number);
setFlutterHeight(event.payload.height);
break;
case "item_selected":
// setSelectedItemId((event.payload?.itemId as string) ?? null);
setSelectedItemId(event.payload.itemId);
break;
case "item_deselected":
setSelectedItemId(null);
break;
case "entry_moved": {
const p = event.payload;
if (!p) break;
const entryId = p.entryId as string;
const newStart = p.newStart as string;
const newEnd = p.newEnd as string;
const newGroupId = p.newGroupId as string;
const newLane = p.newLane as number;
// Optimistic cache update
queryClient.setQueryData(
["timeline", timelineId],
(old: typeof timeline | undefined) => {
if (!old) return old;
let movedItem:
| (typeof old.groups)[number]["items"][number]
| undefined;
const groups = old.groups.map((group) => {
const filtered = group.items.filter((item) => {
if (item.id === entryId) {
movedItem = item;
return false;
}
return true;
});
return { ...group, items: filtered };
});
if (!movedItem) return old;
return {
...old,
groups: groups.map((group) =>
group.id === newGroupId
? {
...group,
items: [
...group.items,
{
...movedItem!,
start: newStart,
end: newEnd,
lane: newLane,
timelineGroupId: newGroupId,
},
],
}
: group
),
};
}
);
// Persist to DB
updateTimelineItem({
data: {
id: entryId,
start: newStart,
end: newEnd,
timelineGroupId: newGroupId,
lane: newLane,
},
});
case "entry_moved":
entryMoved.mutate(event.payload);
break;
}
}
},
[queryClient, timelineId]
[entryMoved]
);
return (

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

@@ -83,6 +83,7 @@ class _MainAppState extends State<MainApp> {
start: start,
end: end,
lane: item.lane,
hasEnd: item.end != null,
),
);
}
@@ -118,16 +119,21 @@ class _MainAppState extends State<MainApp> {
String newGroupId,
int newLane,
) {
final duration = entry.end.difference(entry.start);
final newEnd = newStart.add(duration);
emitEvent('entry_moved', {
final payload = <String, Object?>{
'entryId': entry.id,
'newStart': newStart.toIso8601String(),
'newEnd': newEnd.toIso8601String(),
'newGroupId': newGroupId,
'newLane': newLane,
});
};
if (entry.hasEnd) {
final duration = entry.end.difference(entry.start);
payload['newEnd'] = newStart.add(duration).toIso8601String();
} else {
payload['newEnd'] = null;
}
emitEvent('entry_moved', payload);
}
void _emitContentHeight() {

11
packages/z-timeline/lib/src/models/timeline_entry.dart
View File

@@ -8,6 +8,7 @@ class TimelineEntry {
required this.start,
required this.end,
required this.lane,
this.hasEnd = true,
}) : assert(!end.isBefore(start), 'Entry end must be on/after start');
final String id;
@@ -15,6 +16,7 @@ class TimelineEntry {
final DateTime start;
final DateTime end;
final int lane; // provided by consumer for stacking
final bool hasEnd; // false for point-events (end is synthetic)
bool overlaps(DateTime a, DateTime b) {
return !(end.isBefore(a) || start.isAfter(b));
@@ -26,6 +28,7 @@ class TimelineEntry {
DateTime? start,
DateTime? end,
int? lane,
bool? hasEnd,
}) {
return TimelineEntry(
id: id ?? this.id,
@@ -33,11 +36,12 @@ class TimelineEntry {
start: start ?? this.start,
end: end ?? this.end,
lane: lane ?? this.lane,
hasEnd: hasEnd ?? this.hasEnd,
);
}
@override
int get hashCode => Object.hash(id, groupId, start, end, lane);
int get hashCode => Object.hash(id, groupId, start, end, lane, hasEnd);
@override
bool operator ==(Object other) {
@@ -46,10 +50,11 @@ class TimelineEntry {
other.groupId == groupId &&
other.start == start &&
other.end == end &&
other.lane == lane;
other.lane == lane &&
other.hasEnd == hasEnd;
}
@override
String toString() =>
'TimelineEntry(id: $id, groupId: $groupId, start: $start, end: $end, lane: $lane)';
'TimelineEntry(id: $id, groupId: $groupId, start: $start, end: $end, lane: $lane, hasEnd: $hasEnd)';
}

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

@@ -54,6 +54,7 @@
{ 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 },
{ id: "e-10", title: "Kickoff meeting", start: "2026-01-01", end: null, lane: 3 },
],
},
{
@@ -74,6 +75,7 @@
{ 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 },
{ id: "e-11", title: "Go-live", start: "2026-01-28", end: null, lane: 3 },
],
},
],
@@ -115,7 +117,7 @@
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];
: null;
// Preserve the lane from the drop target
entry.lane = p.newLane;