webgis-poverty-pontianak/assets/js/features/draw_control.js

// --- Setup Leaflet Draw ---

// Layer terpisah untuk hasil gambar sementara sebelum disimpan
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

const drawControl = new L.Control.Draw({
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        },
        polyline: {
            metric: true
        },
        circle: false,
        circlemarker: false,
        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
        rectangle: false
    },
    edit: {
        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
        edit: false,
        remove: false
    }
});
// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS


// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
map.on(L.Draw.Event.DRAWSTART, function (e) {
    isDrawingMode = true;
});

map.on(L.Draw.Event.DRAWSTOP, function (e) {
    setTimeout(() => { 
        isDrawingMode = false; 
        window.currentDrawMode = null;
        window.activeDrawHandler = null;
        deactivateAddMode(); 
    }, 200);
});

window.activateDraw = function(type) {
    // Toggle: cek dari class button, lebih reliable daripada state variable
    const btnJalan = document.getElementById('btnMenuJalan');
    const btnParsil = document.getElementById('btnMenuParsil');
    const isJalanActive = btnJalan.classList.contains('active');
    const isParsilActive = btnParsil.classList.contains('active');
    
    if ((type === 'polyline' && isJalanActive) || (type === 'polygon' && isParsilActive)) {
        window.deactivateAddMode();
        return;
    }
    
    deactivateAddMode();
    window.currentDrawMode = type;
    
    if (type === 'polyline') {
        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
        handler.enable();
        window.activeDrawHandler = handler;
        btnJalan.classList.add('active');
        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
    } else if (type === 'polygon') {
        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
        handler.enable();
        window.activeDrawHandler = handler;
        btnParsil.classList.add('active');
        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
    }
};

map.on(L.Draw.Event.CREATED, function (e) {
    const type = e.layerType;
    const layer = e.layer;

    // Convert layer to GeoJSON geometry
    const geoJson = layer.toGeoJSON().geometry;
    const geoJsonStr = JSON.stringify(geoJson);

    if (type === 'polyline') {
        let length = 0;
        const latlngs = layer.getLatLngs();
        for (let i = 0; i < latlngs.length - 1; i++) {
            length += latlngs[i].distanceTo(latlngs[i + 1]);
        }
        
        // Gunakan Modal alih-alih prompt
        const bodyHTML = `
            <div class="form-group">
                <label>Nama Jalan</label>
                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
            </div>
            <div class="form-group">
                <label>Status</label>
                <select id="modalJalanStatus">
                    <option value="Nasional">Nasional</option>
                    <option value="Provinsi">Provinsi</option>
                    <option value="Kabupaten" selected>Kabupaten</option>
                </select>
            </div>
            <div class="form-group">
                <label>Panjang: ${length.toFixed(2)} m</label>
            </div>
        `;
        openModal("Tambah Jalan Baru", bodyHTML, function() {
            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
        });
        
    } 
    else if (type === 'polygon') {
        const latlngs = layer.getLatLngs()[0];
        let area = 0;
        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
            area = L.GeometryUtil.geodesicArea(latlngs);
        }

        const bodyHTML = `
            <div class="form-group">
                <label>Nama Pemilik/Area</label>
                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
            </div>
            <div class="form-group">
                <label>Status Tanah</label>
                <select id="modalParsilStatus">
                    <option value="SHM" selected>SHM</option>
                    <option value="HGB">HGB</option>
                    <option value="HGU">HGU</option>
                    <option value="HP">HP</option>
                </select>
            </div>
            <div class="form-group">
                <label>Luas: ${area.toFixed(2)} m²</label>
            </div>
        `;
        openModal("Tambah Parsil Tanah", bodyHTML, function() {
            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
        });
    }
});