History-client/lib/selectingEngine.ts

import maplibregl from "maplibre-gl";

type ModeGetter = () => "idle" | "draw" | "select" | "add-point" | "add-line" | "add-path" | "add-circle";

// Khởi tạo engine chọn feature và context menu edit/delete.
export function initSelect(
    map: maplibregl.Map,
    getMode: ModeGetter,
    onDelete?: (id: string | number) => void,
    onEdit?: (feature: maplibregl.MapGeoJSONFeature) => void,
    onSelectId?: (id: string | number | null) => void
) {
    const SELECTABLE_LAYERS = [
        "countries-fill",
        "countries-line",
        "routes-line",
        "places-circle",
        "places-symbol",
    ] as const;
    const selectedIds = new Set<number | string>();
    const hasContextActions = Boolean(onDelete || onEdit);
    let contextMenu: HTMLDivElement | null = null;
    let docClickHandler: ((ev: MouseEvent) => void) | null = null;

    // Bỏ highlight feature-state của toàn bộ đối tượng đang chọn.
    function clearSelection() {
        if (!selectedIds.size) return;
        selectedIds.forEach((id) => {
            map.setFeatureState({ source: "countries", id }, { selected: false });
        });
        selectedIds.clear();
        onSelectId?.(null);
    }

    // Chọn hoặc toggle đối tượng; giữ Alt để chọn cộng dồn/tắt chọn.
    function selectFeature(feature: maplibregl.MapGeoJSONFeature, additive: boolean) {
        const id = feature.id ?? feature.properties?.id;
        if (id === undefined || id === null) return;

        if (!additive) {
            clearSelection();
        }

        if (additive && selectedIds.has(id)) {
            // Alt + click on an already selected feature removes it from the selection
            map.setFeatureState({ source: "countries", id }, { selected: false });
            selectedIds.delete(id);
            onSelectId?.(selectedIds.size === 1 ? Array.from(selectedIds)[0] : null);
            return;
        }

        map.setFeatureState({ source: "countries", id }, { selected: true });
        selectedIds.add(id);
        onSelectId?.(selectedIds.size === 1 ? id : null);
    }

    // Chọn feature theo click trái, hỗ trợ additive bằng Alt.
    function onClick(e: maplibregl.MapLayerMouseEvent) {
        if (getMode() !== "select") return;

        const features = map.queryRenderedFeatures(e.point, {
            layers: [...SELECTABLE_LAYERS],
        }) as maplibregl.MapGeoJSONFeature[];

        if (!features.length) {
            clearSelection();
            return;
        }

        const additive = !!e.originalEvent?.altKey;
        selectFeature(features[0], additive);
    }

    // Hiển thị menu ngữ cảnh (sửa/xóa) khi click chuột phải.
    // Mở menu thao tác khi click phải lên feature.
    function onRightClick(e: maplibregl.MapLayerMouseEvent) {
        if (getMode() !== "select") return;

        e.preventDefault(); // block browser menu

        const features = map.queryRenderedFeatures(e.point, {
            layers: [...SELECTABLE_LAYERS],
        }) as maplibregl.MapGeoJSONFeature[];

        if (!features.length) return;

        const feature = features[0];
        const id = feature.id ?? feature.properties?.id;
        if (id === undefined || id === null) return;

        // if right-clicked item not selected, make it the sole selection
        if (!selectedIds.has(id)) {
            clearSelection();
            selectFeature(feature, false);
        }

        showContextMenu(
            e.originalEvent?.clientX ?? e.point.x,
            e.originalEvent?.clientY ?? e.point.y,
            feature
        );
    }

    // Đổi cursor pointer khi hover lên đối tượng có thể chọn.
    function onMove(e: maplibregl.MapLayerMouseEvent) {
        if (getMode() !== "select") return;

        const features = map.queryRenderedFeatures(e.point, {
            layers: [...SELECTABLE_LAYERS],
        });

        map.getCanvas().style.cursor = features.length ? "pointer" : "";
    }

    map.on("click", onClick);
    map.on("mousemove", onMove);
    if (hasContextActions) {
        map.on("contextmenu", onRightClick);
    }

    return () => {
        map.off("click", onClick);
        map.off("mousemove", onMove);
        if (hasContextActions) {
            map.off("contextmenu", onRightClick);
        }
        hideContextMenu();
    };

    // Ẩn và dọn dẹp context menu hiện tại.
    function hideContextMenu() {
        if (contextMenu) {
            contextMenu.remove();
            contextMenu = null;
        }
        if (docClickHandler) {
            document.removeEventListener("click", docClickHandler);
            docClickHandler = null;
        }
    }

    // Render menu ngữ cảnh tối giản gần vị trí con trỏ.
    function showContextMenu(
        x: number,
        y: number,
        clickedFeature: maplibregl.MapGeoJSONFeature
    ) {
        hideContextMenu();

        const menu = document.createElement("div");
        menu.style.position = "fixed";
        menu.style.left = `${x}px`;
        menu.style.top = `${y}px`;
        menu.style.background = "#0f172a";
        menu.style.color = "white";
        menu.style.border = "1px solid #1f2937";
        menu.style.borderRadius = "6px";
        menu.style.boxShadow = "0 4px 12px rgba(0,0,0,0.2)";
        menu.style.zIndex = "9999";
        menu.style.minWidth = "120px";
        menu.style.fontSize = "14px";
        menu.style.padding = "4px 0";

        // Tạo một item thao tác trong context menu.
        const createItem = (label: string, onClick: () => void) => {
            const item = document.createElement("div");
            item.textContent = label;
            item.style.padding = "8px 12px";
            item.style.cursor = "pointer";
            item.onmouseenter = () => (item.style.background = "#1f2937");
            item.onmouseleave = () => (item.style.background = "transparent");
            item.onclick = () => {
                onClick();
                hideContextMenu();
            };
            return item;
        };

        const selectedCount = selectedIds.size || 1;
        let hasMenuItems = false;

        if (selectedCount === 1 && clickedFeature.geometry?.type === "Polygon" && onEdit) {
            const single = clickedFeature;
            menu.appendChild(createItem("Chỉnh sửa", () => onEdit(single)));
            hasMenuItems = true;
        }

        if (onDelete) {
            menu.appendChild(
                createItem(
                    selectedCount > 1 ? `Xóa ${selectedCount} mục` : "Xóa",
                    () => {
                        const ids = selectedIds.size
                            ? Array.from(selectedIds)
                            : [clickedFeature.id ?? clickedFeature.properties?.id];
                        ids.forEach((eachId) => {
                            if (eachId !== undefined && eachId !== null) onDelete(eachId);
                        });
                        clearSelection();
                    }
                )
            );
            hasMenuItems = true;
        }

        if (!hasMenuItems) return;

        document.body.appendChild(menu);
        contextMenu = menu;

        // Đóng menu khi click ra ngoài vùng menu.
        const onDocClick = (ev: MouseEvent) => {
            if (!menu.contains(ev.target as Node)) {
                hideContextMenu();
            }
        };
        docClickHandler = onDocClick;
        setTimeout(() => document.addEventListener("click", onDocClick), 0);
    }
}