preview map editor 60%

lib/editingEngine.ts

@@ -13,6 +13,7 @@ export type EditingAPI = {
     bindEditEvents: (map: maplibregl.Map) => void;
 };
 
+// Tạo engine chỉnh sửa polygon đã có (kéo đỉnh, thêm đỉnh, commit/cancel).
 export function createEditingEngine(options: {
     mapRef: React.MutableRefObject<maplibregl.Map | null>;
     onUpdate: (id: string | number, geometry: Geometry) => void;
@@ -22,6 +23,7 @@ export function createEditingEngine(options: {
     const dragStateRef = { current: null as { idx: number } | null };
     const modifierRef = { current: { ctrl: false, meta: false } };
 
+    // Hủy trạng thái chỉnh sửa hiện tại và dọn hai source edit.
     const clearEditing = () => {
         editingRef.current = null;
         dragStateRef.current = null;
@@ -32,6 +34,7 @@ export function createEditingEngine(options: {
         (map.getSource("edit-handles") as maplibregl.GeoJSONSource | undefined)?.setData(empty);
     };
 
+    // Đồng bộ polygon tạm và các handle point lên map source.
     const updateEditSources = () => {
         const editing = editingRef.current;
         const map = mapRef.current;
@@ -62,6 +65,7 @@ export function createEditingEngine(options: {
         (map.getSource("edit-handles") as maplibregl.GeoJSONSource | undefined)?.setData(handles);
     };
 
+    // Chốt chỉnh sửa và emit geometry mới cho caller.
     const finishEditing = () => {
         const editing = editingRef.current;
         if (!editing) return;
@@ -73,10 +77,12 @@ export function createEditingEngine(options: {
         clearEditing();
     };
 
+    // Thoát chế độ chỉnh sửa mà không lưu thay đổi.
     const cancelEditing = () => {
         clearEditing();
     };
 
+    // Bắt đầu chỉnh sửa từ feature polygon được chọn.
     const beginEditing = (feature: maplibregl.MapGeoJSONFeature) => {
         if (feature.geometry.type !== "Polygon") return;
         const coords = (feature.geometry.coordinates?.[0] ?? []) as [number, number][];
@@ -92,6 +98,7 @@ export function createEditingEngine(options: {
         updateEditSources();
     };
 
+    // Kiểm tra trạng thái nhấn phím modifier để bật thao tác chèn đỉnh.
     const isModifierPressed = (e?: maplibregl.MapLayerMouseEvent | maplibregl.MapMouseEvent) => {
         const oe = e?.originalEvent as MouseEvent | undefined;
         return (
@@ -102,7 +109,9 @@ export function createEditingEngine(options: {
         );
     };
 
+    // Gắn toàn bộ sự kiện phục vụ chỉnh sửa hình.
     const bindEditEvents = (map: maplibregl.Map) => {
+        // Bắt đầu kéo một handle point.
         const onHandleDown = (e: maplibregl.MapLayerMouseEvent) => {
             if (!editingRef.current) return;
             const feature = e.features?.[0];
@@ -114,6 +123,7 @@ export function createEditingEngine(options: {
             map.dragPan.disable();
         };
 
+        // Cập nhật vị trí đỉnh trong lúc kéo chuột.
         const onHandleMove = (e: maplibregl.MapMouseEvent) => {
             const drag = dragStateRef.current;
             const editing = editingRef.current;
@@ -123,12 +133,14 @@ export function createEditingEngine(options: {
             updateEditSources();
         };
 
+        // Kết thúc kéo đỉnh và khôi phục trạng thái tương tác map.
         const stopDragging = () => {
             dragStateRef.current = null;
             map.getCanvas().style.cursor = "";
             map.dragPan.enable();
         };
 
+        // Bắt phím điều khiển phiên chỉnh sửa (Enter/Escape + modifier flags).
         const onKeyDown = (e: KeyboardEvent) => {
             if (e.key === "Control") {
                 modifierRef.current.ctrl = true;
@@ -143,6 +155,7 @@ export function createEditingEngine(options: {
             }
         };
 
+        // Hạ cờ modifier khi nhả phím.
         const onKeyUp = (e: KeyboardEvent) => {
             if (e.key === "Control") {
                 modifierRef.current.ctrl = false;
@@ -151,6 +164,7 @@ export function createEditingEngine(options: {
             }
         };
 
+        // Chèn thêm một đỉnh mới vào ring tại vị trí gần điểm click nhất.
         const onInsertHandle = (e: maplibregl.MapLayerMouseEvent) => {
             if (!editingRef.current) return;
             if (!isModifierPressed(e)) return;
@@ -177,6 +191,7 @@ export function createEditingEngine(options: {
             updateEditSources();
         };
 
+        // Ngắt kéo nếu con trỏ rời canvas.
         const onCanvasLeave = () => {
             stopDragging();
         };