preview map editor 60%

lib/drawingEngine.ts

@@ -3,6 +3,7 @@ import { Geometry } from "@/lib/useEditorState";
 
 type ModeGetter = () => "idle" | "draw" | "select" | "add-point" | "add-line" | "add-path" | "add-circle";
 
+// Khởi tạo engine vẽ polygon tự do theo chuỗi click.
 export function initDrawing(
     map: maplibregl.Map,
     getMode: ModeGetter,
@@ -10,9 +11,7 @@ export function initDrawing(
 ) {
     let coords: [number, number][] = [];
 
-    /**
-     * Close polygon ring if not closed.
-     */
+    // Đóng vòng polygon nếu điểm cuối chưa trùng điểm đầu.
     function closePolygon(c: [number, number][]) {
         if (c.length < 3) return c;
         const first = c[0];
@@ -24,9 +23,7 @@ export function initDrawing(
         return c;
     }
 
-    /**
-     * Update preview layer while drawing.
-     */
+    // Cập nhật layer preview trong lúc đang vẽ.
     function update(c: [number, number][]) {
         const closed = closePolygon(c);
 
@@ -45,6 +42,7 @@ export function initDrawing(
         });
     }
 
+    // Ghi nhận đỉnh polygon mới khi click map.
     function onClick(e: maplibregl.MapLayerMouseEvent) {
         if (getMode() !== "draw") return;
 
@@ -52,6 +50,7 @@ export function initDrawing(
         update(coords);
     }
 
+    // Render preview polygon với điểm chuột hiện tại.
     function onMove(e: maplibregl.MapLayerMouseEvent) {
         if (getMode() !== "draw" || coords.length === 0) return;
 
@@ -62,9 +61,7 @@ export function initDrawing(
         update(preview);
     }
 
-    /**
-     * Finalize polygon, emit geometry to caller, reset preview.
-     */
+    // Hoàn tất polygon, trả geometry ra ngoài và reset preview.
     function finishDrawing() {
         if (getMode() !== "draw" || coords.length < 3) return;
 
@@ -83,6 +80,7 @@ export function initDrawing(
         });
     }
 
+    // Lắng nghe Enter để chốt polygon.
     function onKeyDown(e: KeyboardEvent) {
         if (e.key === "Enter") {
             finishDrawing();