feat: implement replay system with action dispatchers and context switching between main and playback modes
This commit is contained in:
taDuc
@@ -0,0 +1,91 @@
|
||||
import type maplibregl from "maplibre-gl";
|
||||
import type { FeatureCollection } from "@/uhm/types/geo";
|
||||
|
||||
/**
|
||||
* Các hàm xử lý tương tác bản đồ cho hệ thống Replay.
|
||||
* Hầu hết các hàm yêu cầu instance của MapLibre GL.
|
||||
*/
|
||||
|
||||
export const mapActions = {
|
||||
// Di chuyển camera đến tọa độ [lng, lat]
|
||||
zoom_to_lnglat: (map: maplibregl.Map, lng: number, lat: number, zoom?: number) => {
|
||||
map.easeTo({
|
||||
center: [lng, lat],
|
||||
zoom: zoom ?? map.getZoom(),
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
|
||||
// Thay đổi mức zoom của bản đồ
|
||||
zoom_scale: (map: maplibregl.Map, zoom: number) => {
|
||||
map.easeTo({
|
||||
zoom,
|
||||
duration: 1500,
|
||||
});
|
||||
},
|
||||
|
||||
// Đặt trạng thái camera toàn diện (center, zoom, pitch, bearing)
|
||||
set_camera_view: (map: maplibregl.Map, state: { center: { lng: number; lat: number }; zoom: number; pitch: number; bearing: number }) => {
|
||||
map.easeTo({
|
||||
center: [state.center.lng, state.center.lat],
|
||||
zoom: state.zoom,
|
||||
pitch: state.pitch,
|
||||
bearing: state.bearing,
|
||||
duration: 2500,
|
||||
});
|
||||
},
|
||||
|
||||
// Di chuyển mượt mà đến một geometry dựa trên ID
|
||||
fly_to_geometry: (map: maplibregl.Map, geometryId: string | number, draft: FeatureCollection) => {
|
||||
const feature = draft.features.find(f => String(f.properties.id) === String(geometryId));
|
||||
if (!feature) return;
|
||||
|
||||
// Tính toán bounds từ geometry (giả định có helper hoặc dùng bbox của feature)
|
||||
// Ở đây tạm dùng center đơn giản nếu là Point, hoặc bounds nếu là đa giác
|
||||
if (feature.geometry.type === "Point") {
|
||||
map.flyTo({
|
||||
center: feature.geometry.coordinates as [number, number],
|
||||
zoom: Math.max(map.getZoom(), 10),
|
||||
duration: 3000,
|
||||
});
|
||||
} else {
|
||||
// Thực tế cần tính bbox, ở đây giả định map có hàm fitBounds hoặc tương đương
|
||||
// map.fitBounds(calculateBBox(feature.geometry), { padding: 50 });
|
||||
}
|
||||
},
|
||||
|
||||
// Xoay camera quanh một điểm
|
||||
rotate_around_point: (map: maplibregl.Map, duration: number = 5000) => {
|
||||
const startBearing = map.getBearing();
|
||||
map.easeTo({
|
||||
bearing: startBearing + 180,
|
||||
duration,
|
||||
easing: (t) => t,
|
||||
});
|
||||
},
|
||||
|
||||
// Thay đổi màu của một geometry (thao tác trực tiếp trên layer map)
|
||||
change_geometry_color: (map: maplibregl.Map, geometryId: string | number, color: string) => {
|
||||
const layerId = `uhm-geo-${geometryId}`; // Giả định format ID layer
|
||||
if (map.getLayer(layerId)) {
|
||||
map.setPaintProperty(layerId, 'fill-color', color);
|
||||
map.setPaintProperty(layerId, 'line-color', color);
|
||||
}
|
||||
},
|
||||
|
||||
// Ẩn/hiện nhãn (labels) trên bản đồ
|
||||
toggle_labels: (map: maplibregl.Map, visible: boolean) => {
|
||||
const style = map.getStyle();
|
||||
if (!style) return;
|
||||
style.layers.forEach(layer => {
|
||||
if (layer.type === 'symbol' && (layer as any).layout?.['text-field']) {
|
||||
map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Thay đổi bộ lọc thời gian trên bản đồ
|
||||
set_time_filter: (onYearChange: (year: number) => void, year: number) => {
|
||||
onYearChange(year);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Các hàm điều khiển nội dung dẫn chuyện và thuyết minh trong Replay.
|
||||
*/
|
||||
|
||||
export const narrativeActions = {
|
||||
// Đặt tiêu đề cho cảnh hiện tại
|
||||
set_title: (setTitle: (t: string) => void, title: string) => {
|
||||
setTitle(title);
|
||||
},
|
||||
|
||||
// Đặt nội dung mô tả chi tiết
|
||||
set_descriptions: (setDesc: (d: string) => void, descriptions: string) => {
|
||||
setDesc(descriptions);
|
||||
},
|
||||
|
||||
// Hiển thị hộp thoại hội thoại (Dialogue)
|
||||
show_dialog_box: (setDialog: (data: { avatar: string; text: string; side: 'left' | 'right' }) => void, avatar: string, text: string) => {
|
||||
setDialog({ avatar, text, side: 'left' });
|
||||
},
|
||||
|
||||
// Hiển thị hình ảnh lịch sử đè lên bản đồ
|
||||
display_historical_image: (setImage: (url: string | null) => void, imageUrl: string) => {
|
||||
setImage(imageUrl);
|
||||
},
|
||||
|
||||
// Hiển thị phụ đề (Subtitle)
|
||||
set_step_subtitle: (setSubtitle: (s: string | null) => void, subtitle: string) => {
|
||||
setSubtitle(subtitle);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
import type maplibregl from "maplibre-gl";
|
||||
import type { FeatureCollection } from "@/uhm/types/geo";
|
||||
import type { ReplayAction, UIFunctionName, MapFunctionName, NarrativeFunctionName } from "@/uhm/types/projects";
|
||||
import { mapActions } from "./mapActions";
|
||||
import { uiActions } from "./uiActions";
|
||||
import { narrativeActions } from "./narrativeActions";
|
||||
|
||||
/**
|
||||
* Interface định nghĩa các controller cần thiết để thực thi Replay.
|
||||
* Các thành phần UI sẽ cung cấp các hàm setter này cho Dispatcher.
|
||||
*/
|
||||
export interface ReplayControllers {
|
||||
map: maplibregl.Map | null;
|
||||
draft: FeatureCollection;
|
||||
|
||||
// UI Setters
|
||||
setTimelineVisible: (v: boolean) => void;
|
||||
setUIVisible: (v: boolean) => void;
|
||||
setSidebarOpen: (v: boolean) => void;
|
||||
onSelectWiki: (id: string) => void;
|
||||
addToast: (msg: string) => void;
|
||||
setPlaybackSpeed: (s: number) => void;
|
||||
onYearChange: (y: number) => void;
|
||||
|
||||
// Narrative Setters
|
||||
setTitle: (t: string) => void;
|
||||
setDescriptions: (d: string) => void;
|
||||
setDialog: (data: any) => void;
|
||||
setImage: (url: string | null) => void;
|
||||
setSubtitle: (s: string | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatcher trung tâm: Nhận một Action và thực thi logic tương ứng
|
||||
* bằng cách gọi đến các bộ Action con (map, ui, narrative).
|
||||
*/
|
||||
export const dispatchReplayAction = (controllers: ReplayControllers, action: ReplayAction<any>) => {
|
||||
const { function_name, params } = action;
|
||||
|
||||
// 1. Nhóm Map Actions
|
||||
if (controllers.map) {
|
||||
const map = controllers.map;
|
||||
switch (function_name as MapFunctionName) {
|
||||
case "zoom_to_lnglat":
|
||||
mapActions.zoom_to_lnglat(map, params[0], params[1], params[2]);
|
||||
return;
|
||||
case "zoom_scale":
|
||||
mapActions.zoom_scale(map, params[0]);
|
||||
return;
|
||||
case "set_camera_view":
|
||||
mapActions.set_camera_view(map, params[0]);
|
||||
return;
|
||||
case "fly_to_geometry":
|
||||
mapActions.fly_to_geometry(map, params[0], controllers.draft);
|
||||
return;
|
||||
case "rotate_around_point":
|
||||
mapActions.rotate_around_point(map, params[0]);
|
||||
return;
|
||||
case "toggle_labels":
|
||||
mapActions.toggle_labels(map, params[0]);
|
||||
return;
|
||||
case "set_time_filter":
|
||||
mapActions.set_time_filter(controllers.onYearChange, params[0]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Nhóm UI Actions
|
||||
switch (function_name as UIFunctionName) {
|
||||
case "hide_timeline":
|
||||
uiActions.hide_timeline(controllers.setTimelineVisible);
|
||||
return;
|
||||
case "hide_all_UI":
|
||||
uiActions.hide_all_UI(controllers.setUIVisible);
|
||||
return;
|
||||
case "open_wiki":
|
||||
uiActions.open_wiki(controllers.setSidebarOpen, controllers.onSelectWiki, params[0]);
|
||||
return;
|
||||
case "show_toast_message":
|
||||
uiActions.show_toast_message(controllers.addToast, params[0]);
|
||||
return;
|
||||
case "set_playback_speed":
|
||||
uiActions.set_playback_speed(controllers.setPlaybackSpeed, params[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Nhóm Narrative Actions
|
||||
switch (function_name as NarrativeFunctionName) {
|
||||
case "set_title":
|
||||
narrativeActions.set_title(controllers.setTitle, params[0]);
|
||||
return;
|
||||
case "set_descriptions":
|
||||
narrativeActions.set_descriptions(controllers.setDescriptions, params[0]);
|
||||
return;
|
||||
case "show_dialog_box":
|
||||
narrativeActions.show_dialog_box(controllers.setDialog, params[0], params[1]);
|
||||
return;
|
||||
case "display_historical_image":
|
||||
narrativeActions.display_historical_image(controllers.setImage, params[0]);
|
||||
return;
|
||||
case "set_step_subtitle":
|
||||
narrativeActions.set_step_subtitle(controllers.setSubtitle, params[0]);
|
||||
return;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Các hàm điều khiển giao diện người dùng (UI) trong chế độ Replay.
|
||||
*/
|
||||
|
||||
export const uiActions = {
|
||||
// Ẩn thanh Timeline
|
||||
hide_timeline: (setTimelineVisible: (v: boolean) => void) => {
|
||||
setTimelineVisible(false);
|
||||
},
|
||||
|
||||
// Ẩn toàn bộ UI để có trải nghiệm điện ảnh (Cinematic)
|
||||
hide_all_UI: (setUIVisible: (v: boolean) => void) => {
|
||||
setUIVisible(false);
|
||||
},
|
||||
|
||||
// Mở Wiki và tìm đến một ID cụ thể
|
||||
open_wiki: (setSidebarOpen: (v: boolean) => void, onSelectWiki: (id: string) => void, wikiId: string) => {
|
||||
setSidebarOpen(true);
|
||||
onSelectWiki(wikiId);
|
||||
},
|
||||
|
||||
// Hiển thị thông báo (toast)
|
||||
show_toast_message: (addToast: (msg: string) => void, message: string) => {
|
||||
addToast(message);
|
||||
},
|
||||
|
||||
// Thay đổi tốc độ phát Replay
|
||||
set_playback_speed: (setSpeed: (s: number) => void, speed: number) => {
|
||||
setSpeed(speed);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user