No locations yet.
Click the map or fill the form above!
@@ -822,15 +826,15 @@ This only affects the current session — built-in layers cannot be removed.`))r
`}).join(""),n.classList.remove("d-none"),e.querySelectorAll(".table-name-link").forEach(o=>{o.addEventListener("click",a=>{a.preventDefault(),al(o.dataset.table)})}),e.querySelectorAll(".table-clear-btn").forEach(o=>{o.addEventListener("click",async a=>{a.preventDefault();const i=o.dataset.table;if(confirm(`Clear local cache for "${i}"?
-The data will be re-downloaded from the server on the next app start.`))try{const s=await rr(i);ge(`Cleared ${s} row${s===1?"":"s"} from "${i}". It will re-download on next start.`),await $t()}catch(s){console.error("[App] Per-table clear failed:",s),F(`Could not clear "${i}": ${s.message}`)}})})}catch(r){console.error("[App] Failed to load table stats:",r),e.innerHTML='
Failed to load ',n.classList.remove("d-none")}t&&!t._wired&&(t._wired=!0,t.addEventListener("click",rl))}}async function rl(){if(confirm(`Delete all cached map layers from this device?
+The data will be re-downloaded from the server on the next app start.`))try{const s=await rr(i);ge(`Cleared ${s} row${s===1?"":"s"} from "${i}". It will re-download on next start.`),await $t()}catch(s){console.error("[App] Per-table clear failed:",s),O(`Could not clear "${i}": ${s.message}`)}})})}catch(r){console.error("[App] Failed to load table stats:",r),e.innerHTML='
Failed to load ',n.classList.remove("d-none")}t&&!t._wired&&(t._wired=!0,t.addEventListener("click",rl))}}async function rl(){if(confirm(`Delete all cached map layers from this device?
-The next time the app starts (or after a reload), every layer will be re-downloaded from the server. Your locally drawn data is not affected.`))try{const n=await Io(),e=n.reduce((t,r)=>t+r.count,0);ge(`Cleared ${e} row${e===1?"":"s"} across ${n.length} table${n.length===1?"":"s"}.`),await $t(),confirm("Reload the app now to re-download the layers fresh from the server?")&&window.location.reload()}catch(n){console.error("[App] Clear-all failed:",n),F("Failed to clear cached layers: "+n.message)}}async function al(n){const e=document.getElementById("tableContentModalLabel"),t=document.getElementById("table-content-body"),r=document.getElementById("table-content-info");e.textContent=`Table: ${n}`,t.innerHTML=`
+The next time the app starts (or after a reload), every layer will be re-downloaded from the server. Your locally drawn data is not affected.`))try{const n=await Io(),e=n.reduce((t,r)=>t+r.count,0);ge(`Cleared ${e} row${e===1?"":"s"} across ${n.length} table${n.length===1?"":"s"}.`),await $t(),confirm("Reload the app now to re-download the layers fresh from the server?")&&window.location.reload()}catch(n){console.error("[App] Clear-all failed:",n),O("Failed to clear cached layers: "+n.message)}}async function al(n){const e=document.getElementById("tableContentModalLabel"),t=document.getElementById("table-content-body"),r=document.getElementById("table-content-info");e.textContent=`Table: ${n}`,t.innerHTML=`
- `,r.textContent="",new ht(document.getElementById("tableContentModal")).show();try{const{columns:a,rows:i}=await za(n);if(i.length===0){t.innerHTML='
Table is empty
',r.textContent="0 rows";return}const s=a.map(c=>`
${U(c)} `).join(""),l=i.map(c=>`
${a.map(u=>{let f=c[u];if(f==null)return'NULL ';f=String(f);const p=f.length>120?f.substring(0,120)+"...":f;return`${U(p)} `}).join("")} `).join("");t.innerHTML=`
+ `,r.textContent="",new ht(document.getElementById("tableContentModal")).show();try{const{columns:a,rows:i}=await qa(n);if(i.length===0){t.innerHTML='
Table is empty
',r.textContent="0 rows";return}const s=a.map(c=>`
${U(c)} `).join(""),l=i.map(c=>`
${a.map(u=>{let p=c[u];if(p==null)return'NULL ';p=String(p);const f=p.length>120?p.substring(0,120)+"...":p;return`${U(f)} `}).join("")} `).join("");t.innerHTML=`
@@ -839,7 +843,7 @@ The next time the app starts (or after a reload), every layer will be re-downloa
${l}
- `,r.textContent=`${i.length}${i.length>=200?"+":""} row(s), ${a.length} column(s)`}catch(a){console.error("[App] Failed to load table content:",a),t.innerHTML=`
Failed to load: ${U(a.message)}
`}}async function il(){try{await Ga("lupmis-backup.sqlite3"),ge("Database exported successfully")}catch(n){console.error("[App] Export failed:",n),F("Export failed: "+n.message)}}async function sl(){try{const n=await ja(),e=new Blob([JSON.stringify(n,null,2)],{type:"application/json"}),t=URL.createObjectURL(e),r=document.createElement("a");r.href=t,r.download="locations.geojson",r.click(),URL.revokeObjectURL(t),ge(`Exported ${n.features.length} location(s)`)}catch(n){console.error("[App] GeoJSON Export failed:",n),F("GeoJSON Export failed: "+n.message)}}async function ll(){try{const n=await ko(),e=document.getElementById("status-content");e&&(e.innerHTML=`
+ `,r.textContent=`${i.length}${i.length>=200?"+":""} row(s), ${a.length} column(s)`}catch(a){console.error("[App] Failed to load table content:",a),t.innerHTML=`
Failed to load: ${U(a.message)}
`}}async function il(){try{await Ga("lupmis-backup.sqlite3"),ge("Database exported successfully")}catch(n){console.error("[App] Export failed:",n),O("Export failed: "+n.message)}}async function sl(){try{const n=await ja(),e=new Blob([JSON.stringify(n,null,2)],{type:"application/json"}),t=URL.createObjectURL(e),r=document.createElement("a");r.href=t,r.download="locations.geojson",r.click(),URL.revokeObjectURL(t),ge(`Exported ${n.features.length} location(s)`)}catch(n){console.error("[App] GeoJSON Export failed:",n),O("GeoJSON Export failed: "+n.message)}}async function ll(){try{const n=await ko(),e=document.getElementById("status-content");e&&(e.innerHTML=`
@@ -864,7 +868,7 @@ The next time the app starts (or after a reload), every layer will be re-downloa
- `),new ht(document.getElementById("statusModal")).show()}catch(n){console.error("[App] Failed to get status:",n),F("Failed to get status")}}function Pr(n){return n.replace(/^\(+/,"").replace(/\)+$/,"").split(",").map(e=>{const[t,r]=e.trim().split(/\s+/).map(Number);return[t,r]})}function cl(n){return{type:"Polygon",coordinates:n.trim().replace(/^POLYGON\s*\(\s*/i,"").replace(/\s*\)$/,"").split("),(").map(Pr)}}function dl(n){return{type:"MultiPolygon",coordinates:n.trim().replace(/^MULTIPOLYGON\s*\(\s*/i,"").replace(/\s*\)$/,"").split(")),((").map(o=>o.replace(/^\(+/,"").replace(/\)+$/,"").split("),(").map(Pr))}}function gt(n){if(!n)return null;const e=n.trim().toUpperCase();return e.startsWith("MULTIPOLYGON")?dl(n):e.startsWith("POLYGON")?cl(n):(console.warn("[App] Unsupported WKT type:",e.substring(0,30)),null)}function ul(n){if(!n?.success||!n?.data?.boundary)return console.warn("[App] API response missing success or boundary data"),null;const{boundary:e,districtid:t,district_name:r}=n.data,o=gt(e);return{type:"FeatureCollection",features:[{type:"Feature",properties:{districtid:t,district_name:r},geometry:o}]}}function Fn(n){if(!Array.isArray(n)||n.length===0)return null;const e=[];for(const t of n){const r=t.polygon||t.boundary,o=gt(r);if(!o)continue;const a={_layerType:"collector_zone"};for(const[i,s]of Object.entries(t))i==="polygon"||i==="boundary"||(a[i]=s);e.push({type:"Feature",properties:a,geometry:o})}return e.length===0?null:{type:"FeatureCollection",features:e}}const vo="lupmis-last-district";function pl(n){return n==null||String(n).length===0?"district_boundary":`district_boundary_${n}`}async function fl(){const e=Ke()?.district_id;if(e==null||String(e).length===0)return;const t=String(e);let r=null;try{r=localStorage.getItem(vo)}catch{}if(r!==null&&r!==t){console.warn(`[App] District changed ${r} → ${t}; clearing cached layers.`);try{await Io(),Do("Your district was updated — refreshing map data.")}catch(o){console.error("[App] Failed to clear caches on district change:",o)}}try{localStorage.setItem(vo,t)}catch{}}async function hl(){const n=Ke()?.district_id??null,e=pl(n),t=1,r={strokeColor:"#e11d48",strokeWidth:2.5,fillColor:"rgba(225,29,72,0.08)",typeDescription:"Vector / Polygon"},o=E?.getLayerGroup(t)||null;function a(s){if(!s)return;const l=s.getLayers(),c=[];l.forEach(d=>{d.get("title")==="District Boundary"&&c.push(d)}),c.forEach(d=>l.remove(d))}function i(s){if(!s||!E)return;const l=s.getSource().getExtent();l&&l[0]!==1/0&&E.getMap().getView().fit(l,{padding:[40,40,40,40],duration:600})}try{const s=V()&&Te(),l=await er(e);if(l){console.log("[App] District boundary loaded from local cache");const c=E?.addGeoJSONLayer(l,"District Boundary",r,o);s||i(c)}if(s){console.log("[App] Fetching district boundary from API...");const c=await ts(),d=ul(c);if(!d){console.warn("[App] Could not convert API response to GeoJSON");return}console.log("[App] District boundary:",d.features[0]?.properties?.district_name,"→",d.features[0]?.geometry?.coordinates?.length,"polygon(s)"),await Qn(e,d),l&&a(o||E?.getOverlayGroup());const u=E?.addGeoJSONLayer(d,"District Boundary",r,o);i(u),console.log("[App] District boundary loaded from API")}else l||console.log("[App] District boundary not available — offline and no local cache")}catch(s){console.error("[App] Failed to load district boundary:",s)}}function On(n){if(!Array.isArray(n)||n.length===0)return null;const e=[];for(const t of n){const r=t.polygon||t.geometry_wkt||t.geom,o=gt(r);o&&e.push({type:"Feature",properties:{_layerType:"upn_grid",upn_prefix:t.upn_prefix??null},geometry:o})}return e.length===0?null:{type:"FeatureCollection",features:e}}async function gl(){const e={strokeColor:"#5b21b6",strokeWidth:1.5,fillColor:"rgba(124,58,237,0.04)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(1)||null,r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"UPN Grid",e,t);if(!o){console.warn("[App] Could not create UPN Grid layer");return}o.setVisible(!1);const a=7;o.setStyle((s,l)=>{const c=[new M({stroke:new I({color:"rgba(255,255,255,0.95)",width:3.5})}),new M({stroke:new I({color:"#5b21b6",width:1.5,lineDash:[7,4]}),fill:new A({color:"rgba(124,58,237,0.04)"})})];if(l<=a){const d=s.get("upn_prefix");d!=null&&String(d).length>0&&c.push(new M({text:new pt({text:String(d),font:"600 12px Arial, sans-serif",fill:new A({color:"#3b0764"}),stroke:new I({color:"rgba(255,255,255,0.95)",width:3}),overflow:!0})}))}return c}),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&F("No UPN grid available locally. Connect to the internet to download it.")});function i(s){const l=new le().readFeatures(s,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(l)}try{const l=Ke()?.district_id??null,c=await xa(l);if(c){const p=On(c);p&&i(p),console.log("[App] UPN grid from cache:",c.length,"cells (district",l,")");return}if(!V()||!Te()){console.log("[App] UPN grid not available — offline and no cache for district",l);return}console.log("[App] Fetching UPN grid from API (district",l,")...");const d=await ls();if(!d?.success||!Array.isArray(d?.data)){console.warn("[App] getUpnGrid invalid response:",d);return}const u=d.data;console.log("[App] UPN grid from API:",u.length,"cells"),await Ea(u,l);const f=On(u);f&&i(f),console.log("[App] UPN grid loaded:",f?.features.length??0,"cells rendered")}catch(s){console.error("[App] Failed to load UPN grid:",s)}}async function ml(){const e={strokeColor:"#7c3aed",strokeWidth:1.5,fillColor:"rgba(124,58,237,0.12)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(1)||null;console.log("[App] loadCollectorZones — adminGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"Zones",e,t);if(!o){console.warn("[App] Could not create Zones layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&F("No collector zones available locally. Connect to the internet to download zone data.")});function a(i){const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(s)}try{const i=await va();if(i){const s=Fn(i);s&&(console.log("[App] Collector zones loaded from local cache:",s.features.length,"zones"),a(s))}if(V()&&Te()){console.log("[App] Fetching collector zones from API...");const s=await ns();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getCollectorZones API response invalid:",s);return}const l=s.data;console.log("[App] Collector zones from API:",l.length,"entries"),await _a(l);const c=Fn(l);if(!c){console.warn("[App] Could not convert zones to GeoJSON");return}a(c),console.log("[App] Collector zones updated from API:",c.features.length,"zones")}else i||console.log("[App] Collector zones not available — offline and no local cache")}catch(i){console.error("[App] Failed to load collector zones:",i)}}function Dn(n){if(!Array.isArray(n)||n.length===0)return null;const e=new Set,t=[];for(const r of n){const o=r.id||r.parcelid||r.parcel_id;if(o!=null){if(e.has(o))continue;e.add(o)}let a=null;if(r.geom&&r.geom.type&&r.geom.coordinates)a={type:r.geom.type,coordinates:r.geom.coordinates};else if(r.sp_boundary&&r.sp_boundary.type&&r.sp_boundary.coordinates)a={type:r.sp_boundary.type,coordinates:r.sp_boundary.coordinates};else{const l=r.boundary||r.geometry_wkt||r.polygon||r.wkt;a=gt(l)}if(!a)continue;const i=new Set(["polygon","boundary","geom","geometry_wkt","wkt","textboundary","sp_boundary","fetched_at"]),s={_layerType:"parcel"};for(const[l,c]of Object.entries(r))i.has(l)||(s[l]=c);t.push({type:"Feature",properties:s,geometry:a})}return t.length===0?null:{type:"FeatureCollection",features:t}}async function yl(){const e={strokeColor:"#0ea5e9",strokeWidth:1.5,fillColor:"rgba(14,165,233,0.12)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(4)||null;console.log("[App] loadParcels — landUseGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]};if(se=E?.addGeoJSONLayer(r,"Parcels",e,t),!se){console.warn("[App] Could not create Parcels layer");return}se.setVisible(!1),se.on("change:visible",()=>{se.getVisible()&&se.getSource().getFeatures().length===0&&F("No parcels available locally. Connect to the internet to download parcel data.")});function o(a){const i=new le().readFeatures(a,{featureProjection:"EPSG:3857"});se.getSource().clear(),se.getSource().addFeatures(i)}try{const a=await Ca();if(a){const i=Dn(a);i&&(console.log("[App] Parcels loaded from local cache:",i.features.length,"parcels"),o(i))}if(V()&&Te()){console.log("[App] Fetching parcels from API...");const i=await rs();if(!i?.success||!Array.isArray(i?.data)){console.warn("[App] getDistrictParcels API response invalid:",i);return}const s=i.data;console.log("[App] Parcels from API:",s.length,"entries"),s.length>0&&console.log("[App] First parcel keys:",Object.keys(s[0])),await Aa(s);const l=Dn(s);if(!l){console.warn("[App] Could not convert parcels to GeoJSON");return}o(l),console.log("[App] Parcels updated from API:",l.features.length,"parcels")}else a||console.log("[App] Parcels not available — offline and no local cache")}catch(a){console.error("[App] Failed to load parcels:",a)}}function Rn(n){if(!Array.isArray(n)||n.length===0)return null;const e=["polygon","boundary","geom","wkt","footprint"],t=[];for(const r of n){const o=r.polygon||r.boundary||r.geom||r.wkt||r.footprint;let a;if(typeof o=="object"&&o!==null&&o.type?a=o:a=gt(o),!a)continue;const i={_layerType:"building_footprint"};for(const[s,l]of Object.entries(r))e.includes(s)||typeof l=="object"&&l!==null||(i[s]=l);t.push({type:"Feature",properties:i,geometry:a})}return t.length===0?null:{type:"FeatureCollection",features:t}}async function bl(){const e={strokeColor:"#8b6f47",strokeWidth:1,fillColor:"rgba(139,111,71,0.18)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(5)||null;console.log("[App] loadBuildingFootprints — physInfraGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"Building footprints",e,t);if(!o){console.warn("[App] Could not create Building footprints layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&F("No building footprints available locally. Connect to the internet to download footprint data.")});function a(i){const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(s)}try{const i=await Ra();if(i){const s=Rn(i);s&&(console.log("[App] Building footprints loaded from local cache:",s.features.length,"footprints"),a(s))}if(V()&&Te()){console.log("[App] Fetching building footprints from API...");const s=await as();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getBuildingFootprints API response invalid:",s);return}const l=s.data;console.log("[App] Building footprints from API:",l.length,"entries"),l.length>0&&console.log("[App] First footprint keys:",Object.keys(l[0])),await Da(l);const c=Rn(l);if(!c){console.warn("[App] Could not convert building footprints to GeoJSON");return}a(c),console.log("[App] Building footprints updated from API:",c.features.length,"footprints")}else i||console.log("[App] Building footprints not available — offline and no local cache")}catch(i){console.error("[App] Failed to load building footprints:",i)}}function Mr(n,e){if(!Array.isArray(n)||n.length===0)return null;const t=new So,r=new le,o=["geom","geometry","wkt","polygon","boundary","road","line"],a=[];for(const i of n){const s=i.geom||i.geometry||i.wkt||i.polygon||i.boundary||i.road||i.line;if(!s)continue;let l;try{if(typeof s=="object"&&s!==null&&s.type){a.push({type:"Feature",properties:Nn(i,o,e),geometry:s});continue}l=t.readGeometry(s)}catch(d){console.warn(`[App] Could not parse WKT for ${e}:`,d,s?.toString().slice(0,60));continue}const c=JSON.parse(r.writeGeometry(l));a.push({type:"Feature",properties:Nn(i,o,e),geometry:c})}return a.length===0?null:{type:"FeatureCollection",features:a}}function Nn(n,e,t){const r={_layerType:t};for(const[o,a]of Object.entries(n))e.includes(o)||typeof a=="object"&&a!==null||(r[o]=a);return r}async function wl(){const n={strokeColor:"#78716c",strokeWidth:.8,typeDescription:"Vector / Line",fillColor:"rgba(0,0,0,0)"},e=E?.getLayerGroupByTitle("Biophysical Environment");console.log("[App] loadContoursHillshade — group:",e?e.get("title"):"null");const t={type:"FeatureCollection",features:[]},r=E?.addGeoJSONLayer(t,"Contours hillshade",n,e);if(!r){console.warn("[App] Could not create Contours hillshade layer");return}if(r.setVisible(!1),r.on("change:visible",()=>{r.getVisible()&&r.getSource().getFeatures().length===0&&F("No Contours hillshade data available. Connect to the internet to download it.")}),!V()||!Te()){console.log("[App] Contours hillshade not available — offline or server unreachable");return}try{console.log("[App] Fetching contours_hillshade from API...");const o=await is();if(!o?.success||!Array.isArray(o?.data)){console.warn("[App] getContoursHillshade API response invalid:",o);return}const a=o.data;console.log("[App] Contours hillshade from API:",a.length,"rows"),a.length>0&&console.log("[App] First row keys:",Object.keys(a[0]));const i=Mr(a,"contours_hillshade");if(!i){console.warn("[App] Could not convert contours to GeoJSON");return}const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});r.getSource().clear(),r.getSource().addFeatures(s),console.log("[App] Contours hillshade loaded:",s.length,"features")}catch(o){console.error("[App] Failed to load contours_hillshade:",o)}}async function _l(){const e={strokeColor:"#F0F1F0",strokeWidth:1.5,lineCasingColor:"#000000",lineCasingWidth:3.5,fillColor:"rgba(0,0,0,0)",typeDescription:"Vector / Line"},t=E?.getLayerGroup(5)||null;console.log("[App] loadOSMRoads — group:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"OSM_roads",e,t);if(!o){console.warn("[App] Could not create OSM_roads layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&F("No OSM roads available locally. Connect to the internet to download them.")});function a(i){const s=Mr(i,"osm_road");if(!s)return console.warn("[App] Could not convert OSM roads to GeoJSON"),0;const l=new le().readFeatures(s,{featureProjection:"EPSG:3857"});return o.getSource().clear(),o.getSource().addFeatures(l),l.length}try{const i=await $a();if(i){const s=a(i);console.log("[App] OSM_roads loaded from local cache:",s,"features")}if(V()&&Te()){console.log("[App] Fetching OSM_roads from API...");const s=await ss();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getOSMRoads API response invalid:",s);return}const l=s.data;console.log("[App] OSM_roads from API:",l.length,"rows"),l.length>0&&console.log("[App] First row keys:",Object.keys(l[0])),await Na(l);const c=a(l);console.log("[App] OSM_roads updated from API:",c,"features")}else i||console.log("[App] OSM_roads not available — offline and no local cache")}catch(i){console.error("[App] Failed to load OSM_roads:",i)}}function vl(){E?.addWMSLayer("Biophysical Environment","DEAfrica Coastlines v0.4","https://geoserver.digitalearth.africa/geoserver/wms","coastlines:DEAfrica_Coastlines",{serverType:"geoserver",visible:!1,onlineOnly:!0}),E?.addWMSLayer("Biophysical Environment","DEAfrica Slope (SRTM 30m)","https://ows.digitalearth.africa/wms","srtm_deriv",{serverType:null,style:"style_slope",visible:!1,opacity:.5,zIndex:-50,onlineOnly:!0,attributions:'©
Digital Earth Africa — SRTM-derived Slope',legendUrl:"https://ows.digitalearth.africa/legend/srtm_deriv/style_slope/legend.png"})}async function El(){const n="layer_categories";function e(t){const r=[...t].sort((o,a)=>a.id-o.id);for(const o of r)E?.addLayerGroup(o.id,o.name,o.description||"");console.log("[App] Created",t.length,"layer groups on map")}try{const t=await er(n);if(t&&(console.log("[App] Layer categories loaded from local cache:",t.length,"entries"),e(t)),V()&&Te()){console.log("[App] Fetching layer categories from API...");const r=await os();if(!r?.success||!Array.isArray(r?.data)){console.warn("[App] getLayers API response invalid:",r);return}const o=r.data;if(console.log("[App] Layer categories from API:",o.length,"entries"),await Qn(n,o),t){const a=E?.getOverlayGroup()?.getLayers();if(a){const i=[];a.forEach(s=>{s.get("layerId")!==void 0&&i.push(s)}),i.forEach(s=>a.remove(s))}}e(o),console.log("[App] Layer categories refreshed from API")}else t||console.log("[App] Layer categories not available — offline and no local cache")}catch(t){console.error("[App] Failed to load layer categories:",t)}}async function xl(){if(!V()){console.log("[App] Cannot sync - offline");return}console.log("[App] Sync placeholder - implement based on your backend")}const ue=[],Sl={strokeColor:"#e11d48",strokeWidth:2,fillColor:"rgba(225,29,72,0.12)"};function oe(n){Bt("error",n);const e=document.getElementById("file-import-alert");e&&(e.querySelector(".message-text").textContent=n,e.classList.remove("d-none"),setTimeout(()=>e.classList.add("d-none"),8e3))}function Fo(n,e,t){const r=Array.isArray(n)?n:[n];let o=0;for(const i of r){if(!i||i.type!=="FeatureCollection"||!i.features?.length)continue;const s=i.fileName?i.fileName.replace(/\.[^/.]+$/,""):e,l=E?.addGeoJSONLayer(i,s,Sl);l&&(l.set("removable",!0),l.set("typeTag","GEO"),ue.push(l),o+=i.features.length,kl(i,s,l).catch(c=>console.warn("[FileImport] Staging failed (layer remains view-only):",c)))}if(o===0){de(),oe("No features found in the file.");return}console.log(`[${t}] Added ${o} feature(s) from ${r.length} layer(s)`);const a=ue[ue.length-1];if(a){const i=a.getSource().getExtent();E?.getMap().getView().fit(i,{padding:[50,50,50,50],maxZoom:18})}Oo()}const Ll=new So;function Tl(n){return Ll.writeGeometry(n,{dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})}async function kl(n,e,t){const r=n?.features?.length??0;if(r===0){de();return}const{id:o}=await Sa({filename:e||"imported dataset",targetType:"other",featureCount:r});t.set("_externalImportId",o);const i=t.getSource().getFeatures().map(s=>{const l=s.getGeometry(),c=Il();return s.set("_externalImportId",o),s.set("_clientUuid",c),{client_uuid:c,geometry_wkt:l?Tl(l):"",properties:Pl(s.getProperties())}});await La(o,i),t.getSource().on("removefeature",async s=>{const l=s.feature,c=l?.get("_clientUuid"),d=l?.get("_externalImportId");if(!(!c||d==null))try{await Ma(c),console.log("[FileImport] Removed feature from staging:",c)}catch(u){console.warn("[FileImport] Failed to remove staging row:",u)}}),de(),As({importId:o,filename:e,fc:n,onResult:async s=>{try{await Ml(o,t,s)}catch(l){console.error("[FileImport] Failed to apply mapping result:",l),F("Could not save the import mapping: "+l.message)}}})}function Il(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,n=>{const e=Math.random()*16|0;return(n==="x"?e:e&3|8).toString(16)})}function Pl(n){const e={};for(const[t,r]of Object.entries(n||{}))t!=="geometry"&&(e[t]=r);return e}async function Ml(n,e,t){if(!t||t.action==="cancel"){e?.set("_externalImportStatus","other"),He(e);return}const{action:r,targetType:o,mapping:a}=t;if(!o||o==="other"){await Ft(n,{targetType:"other",mapping:null,status:"other"}),e?.set("_externalImportStatus","other"),He(e);return}await Ia(n,i=>Ts(i,a)),await Ft(n,{targetType:o,mapping:a,status:"mapped"}),e?.set("_externalImportStatus","mapped"),e?.set("_externalImportTargetType",o),He(e),r==="upload"&&await Ar(n,e)}async function Ar(n,e){e?.set("_externalImportStatus","uploading"),He(e);try{await Ft(n,{status:"uploading"});const t=await Ta(n),r=await ka(n),a={user_id_upload:Ke()?.user_id??null,import:{client_import_id:t.client_import_id,filename:t.filename,feature_count:r.length},features:r.map(i=>({client_uuid:i.client_uuid,geom:i.geometry_wkt,props:i.properties}))};console.log("[Upload]",{endpoint:`upload_${t.target_type}.php (not yet available on the server)`,target_type:t.target_type,body:a}),await Ft(n,{status:"mapped",lastUploadedAt:new Date().toISOString()}),e?.set("_externalImportStatus","mapped"),He(e),Do("The server upload endpoint is not yet available. The data stays staged locally — you can upload again later.")}catch(t){console.error("[Upload] Stub failed:",t),e?.set("_externalImportStatus","mapped"),He(e),F("Upload preparation failed: "+t.message)}}window.addEventListener("lupmis:export-gis",n=>{Qs(n.detail||{})});window.addEventListener("lupmis:analyse-features",async n=>{if(!E)return;const e=n.detail||{},t=[...e.parcelFeatures||[],...e.zoneFeatures||[],...Object.values(e.otherByLayer||{}).flat()];try{const{openAnalysisModal:r}=await Le(async()=>{const{openAnalysisModal:o}=await import("./analysis-modal-CYhcFxIW.js");return{openAnalysisModal:o}},__vite__mapDeps([7,8,9,1,2,10,0,3,11,12,6]));r(E,{scopeFeatures:t,scopeLabel:e.title||"drawn area"})}catch(r){console.error("[App] Could not load the Analysis panel:",r),F("Analysis tools could not be loaded — check your connection and try again.")}});window.addEventListener("lupmis:import-chip-click",n=>{const{importId:e,status:t,layer:r}=n.detail||{};t==="mapped"&&Ar(e,r).catch(o=>console.error("[FileImport] runUpload failed:",o))});function He(n){if(!n||!E)return;const e=E.getMap()?.getControls()?.getArray()?.find(t=>t?.constructor?.name==="LayerSwitcher"||t?.element?.classList?.contains("ol-layerswitcher"));e&&typeof e.drawPanel=="function"&&e.drawPanel()}function Oo(){const n=document.getElementById("imported-layers-info");if(!n)return;if(ue.length===0){n.innerHTML="",n.classList.add("d-none");return}n.innerHTML=`
+ `),new ht(document.getElementById("statusModal")).show()}catch(n){console.error("[App] Failed to get status:",n),O("Failed to get status")}}function Pr(n){return n.replace(/^\(+/,"").replace(/\)+$/,"").split(",").map(e=>{const[t,r]=e.trim().split(/\s+/).map(Number);return[t,r]})}function cl(n){return{type:"Polygon",coordinates:n.trim().replace(/^POLYGON\s*\(\s*/i,"").replace(/\s*\)$/,"").split("),(").map(Pr)}}function dl(n){return{type:"MultiPolygon",coordinates:n.trim().replace(/^MULTIPOLYGON\s*\(\s*/i,"").replace(/\s*\)$/,"").split(")),((").map(o=>o.replace(/^\(+/,"").replace(/\)+$/,"").split("),(").map(Pr))}}function gt(n){if(!n)return null;const e=n.trim().toUpperCase();return e.startsWith("MULTIPOLYGON")?dl(n):e.startsWith("POLYGON")?cl(n):(console.warn("[App] Unsupported WKT type:",e.substring(0,30)),null)}function ul(n){if(!n?.success||!n?.data?.boundary)return console.warn("[App] API response missing success or boundary data"),null;const{boundary:e,districtid:t,district_name:r}=n.data,o=gt(e);return{type:"FeatureCollection",features:[{type:"Feature",properties:{districtid:t,district_name:r},geometry:o}]}}function Fn(n){if(!Array.isArray(n)||n.length===0)return null;const e=[];for(const t of n){const r=t.polygon||t.boundary,o=gt(r);if(!o)continue;const a={_layerType:"collector_zone"};for(const[i,s]of Object.entries(t))i==="polygon"||i==="boundary"||(a[i]=s);e.push({type:"Feature",properties:a,geometry:o})}return e.length===0?null:{type:"FeatureCollection",features:e}}const vo="lupmis-last-district";function pl(n){return n==null||String(n).length===0?"district_boundary":`district_boundary_${n}`}async function fl(){const e=Ke()?.district_id;if(e==null||String(e).length===0)return;const t=String(e);let r=null;try{r=localStorage.getItem(vo)}catch{}if(r!==null&&r!==t){console.warn(`[App] District changed ${r} → ${t}; clearing cached layers.`);try{await Io(),Do("Your district was updated — refreshing map data.")}catch(o){console.error("[App] Failed to clear caches on district change:",o)}}try{localStorage.setItem(vo,t)}catch{}}async function hl(){const n=Ke()?.district_id??null,e=pl(n),t=1,r={strokeColor:"#e11d48",strokeWidth:2.5,fillColor:"rgba(225,29,72,0.08)",typeDescription:"Vector / Polygon"},o=E?.getLayerGroup(t)||null;function a(s){if(!s)return;const l=s.getLayers(),c=[];l.forEach(d=>{d.get("title")==="District Boundary"&&c.push(d)}),c.forEach(d=>l.remove(d))}function i(s){if(!s||!E)return;const l=s.getSource().getExtent();l&&l[0]!==1/0&&E.getMap().getView().fit(l,{padding:[40,40,40,40],duration:600})}try{const s=V()&&Te(),l=await er(e);if(l){console.log("[App] District boundary loaded from local cache");const c=E?.addGeoJSONLayer(l,"District Boundary",r,o);s||i(c)}if(s){console.log("[App] Fetching district boundary from API...");const c=await ts(),d=ul(c);if(!d){console.warn("[App] Could not convert API response to GeoJSON");return}console.log("[App] District boundary:",d.features[0]?.properties?.district_name,"→",d.features[0]?.geometry?.coordinates?.length,"polygon(s)"),await Qn(e,d),l&&a(o||E?.getOverlayGroup());const u=E?.addGeoJSONLayer(d,"District Boundary",r,o);i(u),console.log("[App] District boundary loaded from API")}else l||console.log("[App] District boundary not available — offline and no local cache")}catch(s){console.error("[App] Failed to load district boundary:",s)}}function On(n){if(!Array.isArray(n)||n.length===0)return null;const e=[];for(const t of n){const r=t.polygon||t.geometry_wkt||t.geom,o=gt(r);o&&e.push({type:"Feature",properties:{_layerType:"upn_grid",upn_prefix:t.upn_prefix??null},geometry:o})}return e.length===0?null:{type:"FeatureCollection",features:e}}async function gl(){const e={strokeColor:"#5b21b6",strokeWidth:1.5,fillColor:"rgba(124,58,237,0.04)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(1)||null,r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"UPN Grid",e,t);if(!o){console.warn("[App] Could not create UPN Grid layer");return}o.setVisible(!1);const a=7;o.setStyle((s,l)=>{const c=[new M({stroke:new I({color:"rgba(255,255,255,0.95)",width:3.5})}),new M({stroke:new I({color:"#5b21b6",width:1.5,lineDash:[7,4]}),fill:new A({color:"rgba(124,58,237,0.04)"})})];if(l<=a){const d=s.get("upn_prefix");d!=null&&String(d).length>0&&c.push(new M({text:new pt({text:String(d),font:"600 12px Arial, sans-serif",fill:new A({color:"#3b0764"}),stroke:new I({color:"rgba(255,255,255,0.95)",width:3}),overflow:!0})}))}return c}),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&O("No UPN grid available locally. Connect to the internet to download it.")});function i(s){const l=new le().readFeatures(s,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(l)}try{const l=Ke()?.district_id??null,c=await xa(l);if(c){const f=On(c);f&&i(f),console.log("[App] UPN grid from cache:",c.length,"cells (district",l,")");return}if(!V()||!Te()){console.log("[App] UPN grid not available — offline and no cache for district",l);return}console.log("[App] Fetching UPN grid from API (district",l,")...");const d=await ls();if(!d?.success||!Array.isArray(d?.data)){console.warn("[App] getUpnGrid invalid response:",d);return}const u=d.data;console.log("[App] UPN grid from API:",u.length,"cells"),await Ea(u,l);const p=On(u);p&&i(p),console.log("[App] UPN grid loaded:",p?.features.length??0,"cells rendered")}catch(s){console.error("[App] Failed to load UPN grid:",s)}}async function ml(){const e={strokeColor:"#7c3aed",strokeWidth:1.5,fillColor:"rgba(124,58,237,0.12)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(1)||null;console.log("[App] loadCollectorZones — adminGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"Zones",e,t);if(!o){console.warn("[App] Could not create Zones layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&O("No collector zones available locally. Connect to the internet to download zone data.")});function a(i){const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(s)}try{const i=await va();if(i){const s=Fn(i);s&&(console.log("[App] Collector zones loaded from local cache:",s.features.length,"zones"),a(s))}if(V()&&Te()){console.log("[App] Fetching collector zones from API...");const s=await ns();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getCollectorZones API response invalid:",s);return}const l=s.data;console.log("[App] Collector zones from API:",l.length,"entries"),await _a(l);const c=Fn(l);if(!c){console.warn("[App] Could not convert zones to GeoJSON");return}a(c),console.log("[App] Collector zones updated from API:",c.features.length,"zones")}else i||console.log("[App] Collector zones not available — offline and no local cache")}catch(i){console.error("[App] Failed to load collector zones:",i)}}function Dn(n){if(!Array.isArray(n)||n.length===0)return null;const e=new Set,t=[];for(const r of n){const o=r.id||r.parcelid||r.parcel_id;if(o!=null){if(e.has(o))continue;e.add(o)}let a=null;if(r.geom&&r.geom.type&&r.geom.coordinates)a={type:r.geom.type,coordinates:r.geom.coordinates};else if(r.sp_boundary&&r.sp_boundary.type&&r.sp_boundary.coordinates)a={type:r.sp_boundary.type,coordinates:r.sp_boundary.coordinates};else{const l=r.boundary||r.geometry_wkt||r.polygon||r.wkt;a=gt(l)}if(!a)continue;const i=new Set(["polygon","boundary","geom","geometry_wkt","wkt","textboundary","sp_boundary","fetched_at"]),s={_layerType:"parcel"};for(const[l,c]of Object.entries(r))i.has(l)||(s[l]=c);t.push({type:"Feature",properties:s,geometry:a})}return t.length===0?null:{type:"FeatureCollection",features:t}}async function yl(){const e={strokeColor:"#0ea5e9",strokeWidth:1.5,fillColor:"rgba(14,165,233,0.12)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(4)||null;console.log("[App] loadParcels — landUseGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]};if(se=E?.addGeoJSONLayer(r,"Parcels",e,t),!se){console.warn("[App] Could not create Parcels layer");return}se.setVisible(!1),se.on("change:visible",()=>{se.getVisible()&&se.getSource().getFeatures().length===0&&O("No parcels available locally. Connect to the internet to download parcel data.")});function o(a){const i=new le().readFeatures(a,{featureProjection:"EPSG:3857"});se.getSource().clear(),se.getSource().addFeatures(i)}try{const a=await Ca();if(a){const i=Dn(a);i&&(console.log("[App] Parcels loaded from local cache:",i.features.length,"parcels"),o(i))}if(V()&&Te()){console.log("[App] Fetching parcels from API...");const i=await rs();if(!i?.success||!Array.isArray(i?.data)){console.warn("[App] getDistrictParcels API response invalid:",i);return}const s=i.data;console.log("[App] Parcels from API:",s.length,"entries"),s.length>0&&console.log("[App] First parcel keys:",Object.keys(s[0])),await Aa(s);const l=Dn(s);if(!l){console.warn("[App] Could not convert parcels to GeoJSON");return}o(l),console.log("[App] Parcels updated from API:",l.features.length,"parcels")}else a||console.log("[App] Parcels not available — offline and no local cache")}catch(a){console.error("[App] Failed to load parcels:",a)}}function Rn(n){if(!Array.isArray(n)||n.length===0)return null;const e=["polygon","boundary","geom","wkt","footprint"],t=[];for(const r of n){const o=r.polygon||r.boundary||r.geom||r.wkt||r.footprint;let a;if(typeof o=="object"&&o!==null&&o.type?a=o:a=gt(o),!a)continue;const i={_layerType:"building_footprint"};for(const[s,l]of Object.entries(r))e.includes(s)||typeof l=="object"&&l!==null||(i[s]=l);t.push({type:"Feature",properties:i,geometry:a})}return t.length===0?null:{type:"FeatureCollection",features:t}}async function bl(){const e={strokeColor:"#8b6f47",strokeWidth:1,fillColor:"rgba(139,111,71,0.18)",typeDescription:"Vector / Polygon"},t=E?.getLayerGroup(5)||null;console.log("[App] loadBuildingFootprints — physInfraGroup:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"Building footprints",e,t);if(!o){console.warn("[App] Could not create Building footprints layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&O("No building footprints available locally. Connect to the internet to download footprint data.")});function a(i){const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});o.getSource().clear(),o.getSource().addFeatures(s)}try{const i=await Ra();if(i){const s=Rn(i);s&&(console.log("[App] Building footprints loaded from local cache:",s.features.length,"footprints"),a(s))}if(V()&&Te()){console.log("[App] Fetching building footprints from API...");const s=await as();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getBuildingFootprints API response invalid:",s);return}const l=s.data;console.log("[App] Building footprints from API:",l.length,"entries"),l.length>0&&console.log("[App] First footprint keys:",Object.keys(l[0])),await Da(l);const c=Rn(l);if(!c){console.warn("[App] Could not convert building footprints to GeoJSON");return}a(c),console.log("[App] Building footprints updated from API:",c.features.length,"footprints")}else i||console.log("[App] Building footprints not available — offline and no local cache")}catch(i){console.error("[App] Failed to load building footprints:",i)}}function Mr(n,e){if(!Array.isArray(n)||n.length===0)return null;const t=new So,r=new le,o=["geom","geometry","wkt","polygon","boundary","road","line"],a=[];for(const i of n){const s=i.geom||i.geometry||i.wkt||i.polygon||i.boundary||i.road||i.line;if(!s)continue;let l;try{if(typeof s=="object"&&s!==null&&s.type){a.push({type:"Feature",properties:Nn(i,o,e),geometry:s});continue}l=t.readGeometry(s)}catch(d){console.warn(`[App] Could not parse WKT for ${e}:`,d,s?.toString().slice(0,60));continue}const c=JSON.parse(r.writeGeometry(l));a.push({type:"Feature",properties:Nn(i,o,e),geometry:c})}return a.length===0?null:{type:"FeatureCollection",features:a}}function Nn(n,e,t){const r={_layerType:t};for(const[o,a]of Object.entries(n))e.includes(o)||typeof a=="object"&&a!==null||(r[o]=a);return r}async function wl(){const n={strokeColor:"#78716c",strokeWidth:.8,typeDescription:"Vector / Line",fillColor:"rgba(0,0,0,0)"},e=E?.getLayerGroupByTitle("Biophysical Environment");console.log("[App] loadContoursHillshade — group:",e?e.get("title"):"null");const t={type:"FeatureCollection",features:[]},r=E?.addGeoJSONLayer(t,"Contours hillshade",n,e);if(!r){console.warn("[App] Could not create Contours hillshade layer");return}if(r.setVisible(!1),r.on("change:visible",()=>{r.getVisible()&&r.getSource().getFeatures().length===0&&O("No Contours hillshade data available. Connect to the internet to download it.")}),!V()||!Te()){console.log("[App] Contours hillshade not available — offline or server unreachable");return}try{console.log("[App] Fetching contours_hillshade from API...");const o=await is();if(!o?.success||!Array.isArray(o?.data)){console.warn("[App] getContoursHillshade API response invalid:",o);return}const a=o.data;console.log("[App] Contours hillshade from API:",a.length,"rows"),a.length>0&&console.log("[App] First row keys:",Object.keys(a[0]));const i=Mr(a,"contours_hillshade");if(!i){console.warn("[App] Could not convert contours to GeoJSON");return}const s=new le().readFeatures(i,{featureProjection:"EPSG:3857"});r.getSource().clear(),r.getSource().addFeatures(s),console.log("[App] Contours hillshade loaded:",s.length,"features")}catch(o){console.error("[App] Failed to load contours_hillshade:",o)}}async function _l(){const e={strokeColor:"#F0F1F0",strokeWidth:1.5,lineCasingColor:"#000000",lineCasingWidth:3.5,fillColor:"rgba(0,0,0,0)",typeDescription:"Vector / Line"},t=E?.getLayerGroup(5)||null;console.log("[App] loadOSMRoads — group:",t?t.get("title"):"null");const r={type:"FeatureCollection",features:[]},o=E?.addGeoJSONLayer(r,"OSM_roads",e,t);if(!o){console.warn("[App] Could not create OSM_roads layer");return}o.setVisible(!1),o.on("change:visible",()=>{o.getVisible()&&o.getSource().getFeatures().length===0&&O("No OSM roads available locally. Connect to the internet to download them.")});function a(i){const s=Mr(i,"osm_road");if(!s)return console.warn("[App] Could not convert OSM roads to GeoJSON"),0;const l=new le().readFeatures(s,{featureProjection:"EPSG:3857"});return o.getSource().clear(),o.getSource().addFeatures(l),l.length}try{const i=await $a();if(i){const s=a(i);console.log("[App] OSM_roads loaded from local cache:",s,"features")}if(V()&&Te()){console.log("[App] Fetching OSM_roads from API...");const s=await ss();if(!s?.success||!Array.isArray(s?.data)){console.warn("[App] getOSMRoads API response invalid:",s);return}const l=s.data;console.log("[App] OSM_roads from API:",l.length,"rows"),l.length>0&&console.log("[App] First row keys:",Object.keys(l[0])),await Na(l);const c=a(l);console.log("[App] OSM_roads updated from API:",c,"features")}else i||console.log("[App] OSM_roads not available — offline and no local cache")}catch(i){console.error("[App] Failed to load OSM_roads:",i)}}function vl(){E?.addWMSLayer("Biophysical Environment","DEAfrica Coastlines v0.4","https://geoserver.digitalearth.africa/geoserver/wms","coastlines:DEAfrica_Coastlines",{serverType:"geoserver",visible:!1,onlineOnly:!0}),E?.addWMSLayer("Biophysical Environment","DEAfrica Slope (SRTM 30m)","https://ows.digitalearth.africa/wms","srtm_deriv",{serverType:null,style:"style_slope",visible:!1,opacity:.5,zIndex:-50,onlineOnly:!0,attributions:'©
Digital Earth Africa — SRTM-derived Slope',legendUrl:"https://ows.digitalearth.africa/legend/srtm_deriv/style_slope/legend.png"})}async function El(){const n="layer_categories";function e(t){const r=[...t].sort((o,a)=>a.id-o.id);for(const o of r)E?.addLayerGroup(o.id,o.name,o.description||"");console.log("[App] Created",t.length,"layer groups on map")}try{const t=await er(n);if(t&&(console.log("[App] Layer categories loaded from local cache:",t.length,"entries"),e(t)),V()&&Te()){console.log("[App] Fetching layer categories from API...");const r=await os();if(!r?.success||!Array.isArray(r?.data)){console.warn("[App] getLayers API response invalid:",r);return}const o=r.data;if(console.log("[App] Layer categories from API:",o.length,"entries"),await Qn(n,o),t){const a=E?.getOverlayGroup()?.getLayers();if(a){const i=[];a.forEach(s=>{s.get("layerId")!==void 0&&i.push(s)}),i.forEach(s=>a.remove(s))}}e(o),console.log("[App] Layer categories refreshed from API")}else t||console.log("[App] Layer categories not available — offline and no local cache")}catch(t){console.error("[App] Failed to load layer categories:",t)}}async function xl(){if(!V()){console.log("[App] Cannot sync - offline");return}console.log("[App] Sync placeholder - implement based on your backend")}const ue=[],Sl={strokeColor:"#e11d48",strokeWidth:2,fillColor:"rgba(225,29,72,0.12)"};function oe(n){Bt("error",n);const e=document.getElementById("file-import-alert");e&&(e.querySelector(".message-text").textContent=n,e.classList.remove("d-none"),setTimeout(()=>e.classList.add("d-none"),8e3))}function Fo(n,e,t){const r=Array.isArray(n)?n:[n];let o=0;for(const i of r){if(!i||i.type!=="FeatureCollection"||!i.features?.length)continue;const s=i.fileName?i.fileName.replace(/\.[^/.]+$/,""):e,l=E?.addGeoJSONLayer(i,s,Sl);l&&(l.set("removable",!0),l.set("typeTag","GEO"),ue.push(l),o+=i.features.length,kl(i,s,l).catch(c=>console.warn("[FileImport] Staging failed (layer remains view-only):",c)))}if(o===0){de(),oe("No features found in the file.");return}console.log(`[${t}] Added ${o} feature(s) from ${r.length} layer(s)`);const a=ue[ue.length-1];if(a){const i=a.getSource().getExtent();E?.getMap().getView().fit(i,{padding:[50,50,50,50],maxZoom:18})}Oo()}const Ll=new So;function Tl(n){return Ll.writeGeometry(n,{dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})}async function kl(n,e,t){const r=n?.features?.length??0;if(r===0){de();return}const{id:o}=await Sa({filename:e||"imported dataset",targetType:"other",featureCount:r});t.set("_externalImportId",o);const i=t.getSource().getFeatures().map(s=>{const l=s.getGeometry(),c=Il();return s.set("_externalImportId",o),s.set("_clientUuid",c),{client_uuid:c,geometry_wkt:l?Tl(l):"",properties:Pl(s.getProperties())}});await La(o,i),t.getSource().on("removefeature",async s=>{const l=s.feature,c=l?.get("_clientUuid"),d=l?.get("_externalImportId");if(!(!c||d==null))try{await Ma(c),console.log("[FileImport] Removed feature from staging:",c)}catch(u){console.warn("[FileImport] Failed to remove staging row:",u)}}),de(),As({importId:o,filename:e,fc:n,onResult:async s=>{try{await Ml(o,t,s)}catch(l){console.error("[FileImport] Failed to apply mapping result:",l),O("Could not save the import mapping: "+l.message)}}})}function Il(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,n=>{const e=Math.random()*16|0;return(n==="x"?e:e&3|8).toString(16)})}function Pl(n){const e={};for(const[t,r]of Object.entries(n||{}))t!=="geometry"&&(e[t]=r);return e}async function Ml(n,e,t){if(!t||t.action==="cancel"){e?.set("_externalImportStatus","other"),He(e);return}const{action:r,targetType:o,mapping:a}=t;if(!o||o==="other"){await Ft(n,{targetType:"other",mapping:null,status:"other"}),e?.set("_externalImportStatus","other"),He(e);return}await Ia(n,i=>Ts(i,a)),await Ft(n,{targetType:o,mapping:a,status:"mapped"}),e?.set("_externalImportStatus","mapped"),e?.set("_externalImportTargetType",o),He(e),r==="upload"&&await Ar(n,e)}async function Ar(n,e){e?.set("_externalImportStatus","uploading"),He(e);try{await Ft(n,{status:"uploading"});const t=await Ta(n),r=await ka(n),a={user_id_upload:Ke()?.user_id??null,import:{client_import_id:t.client_import_id,filename:t.filename,feature_count:r.length},features:r.map(i=>({client_uuid:i.client_uuid,geom:i.geometry_wkt,props:i.properties}))};console.log("[Upload]",{endpoint:`upload_${t.target_type}.php (not yet available on the server)`,target_type:t.target_type,body:a}),await Ft(n,{status:"mapped",lastUploadedAt:new Date().toISOString()}),e?.set("_externalImportStatus","mapped"),He(e),Do("The server upload endpoint is not yet available. The data stays staged locally — you can upload again later.")}catch(t){console.error("[Upload] Stub failed:",t),e?.set("_externalImportStatus","mapped"),He(e),O("Upload preparation failed: "+t.message)}}window.addEventListener("lupmis:export-gis",n=>{Qs(n.detail||{})});window.addEventListener("lupmis:analyse-features",async n=>{if(!E)return;const e=n.detail||{},t=[...e.parcelFeatures||[],...e.zoneFeatures||[],...Object.values(e.otherByLayer||{}).flat()];try{const{openAnalysisModal:r}=await Le(async()=>{const{openAnalysisModal:o}=await import("./analysis-modal-05Uf_OF7.js");return{openAnalysisModal:o}},__vite__mapDeps([7,0,1,2,3,8,9,10,11,12,6]));r(E,{scopeFeatures:t,scopeLabel:e.title||"drawn area"})}catch(r){console.error("[App] Could not load the Analysis panel:",r),O("Analysis tools could not be loaded — check your connection and try again.")}});window.addEventListener("lupmis:import-chip-click",n=>{const{importId:e,status:t,layer:r}=n.detail||{};t==="mapped"&&Ar(e,r).catch(o=>console.error("[FileImport] runUpload failed:",o))});function He(n){if(!n||!E)return;const e=E.getMap()?.getControls()?.getArray()?.find(t=>t?.constructor?.name==="LayerSwitcher"||t?.element?.classList?.contains("ol-layerswitcher"));e&&typeof e.drawPanel=="function"&&e.drawPanel()}function Oo(){const n=document.getElementById("imported-layers-info");if(!n)return;if(ue.length===0){n.innerHTML="",n.classList.add("d-none");return}n.innerHTML=`
`;return}const l=s.totals,c=s.byProvider.filter(p=>p.count>0).map(p=>`
- ${U(f.label)}
- ${f.count.toLocaleString()} / ${f.limit.toLocaleString()}
- ${r(f.estBytes)}
+ ${U(p.label)}
+ ${p.count.toLocaleString()} / ${p.limit.toLocaleString()}
+ ${r(p.estBytes)}
+ data-cache="${U(p.key)}" data-label="${U(p.label)}"
+ title="Clear ${U(p.label)} tiles only">
- `).join("");let d="";const u=await Gi();if(u&&u.quota>0){const f=(u.usage/u.quota*100).toFixed(1);d=`
+ `).join("");let d="";const u=await Gi();if(u&&u.quota>0){const p=(u.usage/u.quota*100).toFixed(1);d=`
- Total app storage: ${r(u.usage)} of ${r(u.quota)} available (${f}%)
+ Total app storage: ${r(u.usage)} of ${r(u.quota)} available (${p}%)
`}if(l.count===0){n.innerHTML=`
No tiles cached yet. Pan and zoom the map to start caching tiles automatically.
@@ -913,11 +917,11 @@ UTM: ${a}`)}function Rl(){const n=document.getElementById("gps-readout"),e=docum
${c}
- ${d}`,e.disabled=!1,n.querySelectorAll(".provider-clear-btn").forEach(f=>{f.addEventListener("click",async p=>{p.preventDefault();const h=f.dataset.cache,m=f.dataset.label||h;if(!confirm(`Clear cached "${m}" tiles?
+ ${d}`,e.disabled=!1,n.querySelectorAll(".provider-clear-btn").forEach(p=>{p.addEventListener("click",async f=>{f.preventDefault();const h=p.dataset.cache,m=p.dataset.label||h;if(!confirm(`Clear cached "${m}" tiles?
-Other providers are not affected. The tiles will re-download as you browse online.`))return;f.disabled=!0,await Bi(h)?console.log(`[Settings] Cleared tile cache for ${m}`):console.warn(`[Settings] Could not clear tile cache for ${m}`),await a()})})}finally{o=null}})(),o}e.addEventListener("click",async()=>{if(!confirm("Clear all cached map tiles from this device? You will need to be online to view them again."))return;e.disabled=!0,await $i()?console.log("[Settings] Tile caches cleared"):console.warn("[Settings] Tile-cache clear failed"),await a()}),t.addEventListener("show.bs.offcanvas",a),Ri(()=>{console.log("[Settings] SW controller changed → refreshing tile-cache stats"),a()}),a()}function zl(){const n=document.getElementById("download-tiles-btn"),e=document.getElementById("offline-download-modal");if(!n||!e)return;const t=ht.getOrCreateInstance(e),r=document.getElementById("offline-download-form-view"),o=document.getElementById("offline-download-progress-view"),a=document.getElementById("offline-download-done-view"),i=document.getElementById("offline-download-cancel-btn"),s=document.getElementById("offline-download-start-btn"),l=document.getElementById("offline-download-close-done-btn"),c=document.getElementById("offline-download-close-btn"),d=document.getElementById("offline-basemap-select"),u=document.getElementById("offline-min-zoom"),f=document.getElementById("offline-max-zoom"),p=document.getElementById("offline-ack-check"),h=document.getElementById("offline-estimate-detail"),m=document.getElementById("offline-estimate"),g=document.getElementById("offline-area-view"),y=document.getElementById("offline-area-district"),w=document.getElementById("offline-area-ghana"),_=document.getElementById("offline-area-view-info"),x=document.getElementById("offline-area-district-info"),L=document.getElementById("offline-progress-bar"),v=document.getElementById("offline-progress-percent"),S=document.getElementById("offline-progress-counts"),P=document.getElementById("offline-progress-ok"),k=document.getElementById("offline-progress-failed"),z=document.getElementById("offline-progress-eta"),q=document.getElementById("offline-done-title"),Z=document.getElementById("offline-done-detail");let B=null;function ce(G){return G?G<1024*1024?(G/1024).toFixed(0)+" KB":G<1024*1024*1024?(G/(1024*1024)).toFixed(1)+" MB":(G/(1024*1024*1024)).toFixed(2)+" GB":"0 KB"}function Q(G){if(!G||G<1e3)return"< 1 s";const J=Math.round(G/1e3);if(J<60)return J+" s";const K=Math.floor(J/60),ne=J%60;return K<60?`${K} min ${ne} s`:`${Math.floor(K/60)} h ${K%60} min`}function ye(){return g.checked?E?.getCurrentViewExtent()||null:y.checked?E?.getDistrictBoundaryExtent()?.extent||null:w.checked?Ki:null}function H(){const G=d.value,J=parseInt(u.value,10),K=parseInt(f.value,10);if(Number.isNaN(J)||Number.isNaN(K)||J>K){h.textContent="Invalid zoom range",m.classList.replace("alert-info","alert-warning"),s.disabled=!0;return}const ne=ye();if(!ne){h.textContent="Selected area is not available.",m.classList.replace("alert-info","alert-warning"),s.disabled=!0;return}const R=pr[G]?.maxZoom??19,W=Math.min(K,R),re=zi(ne,J,W),Gt=Vi(re);let we="";W
Zoom ${K} is above this provider's max (${R}); will clamp to ${R}. `),re>8e3&&(we+='More than 8 000 tiles — exceeds the per-provider cache limit. Earlier tiles will be evicted as new ones arrive. '),h.innerHTML=`${re.toLocaleString()} tiles · ~${ce(Gt)}`+we,m.classList.toggle("alert-warning",!!we),m.classList.toggle("alert-info",!we),s.disabled=!p.checked||re===0}function be(){E?.getCurrentViewExtent()?_.textContent=" · ready":_.textContent="",E?.getDistrictBoundaryExtent()?(x.textContent="",y.disabled=!1):(x.textContent=" (not loaded — connect online to fetch)",y.disabled=!0,y.checked&&(g.checked=!0))}function Ve(){r.classList.remove("d-none"),o.classList.add("d-none"),a.classList.add("d-none"),s.classList.remove("d-none"),i.classList.remove("d-none"),i.textContent="Cancel",l.classList.add("d-none"),c.disabled=!1,p.checked=!1,s.disabled=!0,B=null}n.addEventListener("click",()=>{Ve(),be(),H(),t.show()}),d.addEventListener("change",H),u.addEventListener("input",H),f.addEventListener("input",H),g.addEventListener("change",H),y.addEventListener("change",H),w.addEventListener("change",H),p.addEventListener("change",H),s.addEventListener("click",async()=>{const G=d.value,J=parseInt(u.value,10),K=parseInt(f.value,10),ne=ye();if(!ne)return;r.classList.add("d-none"),o.classList.remove("d-none"),s.classList.add("d-none"),i.textContent="Cancel download",c.disabled=!0,L.style.width="0%",L.setAttribute("aria-valuenow","0"),v.textContent="0%",S.textContent="0 of 0 tiles",P.textContent="0",k.textContent="0",z.textContent="—",B=new Wi({baseMap:G,extent3857:ne,minZoom:J,maxZoom:K,onProgress:W=>{if(W.total>0){const re=Math.min(100,Math.round(W.done/W.total*100));L.style.width=re+"%",L.setAttribute("aria-valuenow",String(re)),v.textContent=re+"%",S.textContent=`${W.done.toLocaleString()} of ${W.total.toLocaleString()} tiles`}P.textContent=W.ok.toLocaleString(),k.textContent=W.failed.toLocaleString(),z.textContent=W.etaMs!=null?Q(W.etaMs):"—"}});let R;try{R=await B.start()}catch(W){console.error("[OfflineDownload] failed:",W),R={phase:"error",done:0,total:0,ok:0,failed:0}}o.classList.add("d-none"),a.classList.remove("d-none"),i.classList.add("d-none"),l.classList.remove("d-none"),c.disabled=!1,R.phase==="cancelled"?(q.textContent="Download cancelled",Z.innerHTML=`Stopped after ${R.done.toLocaleString()} of ${R.total.toLocaleString()} tiles.${R.ok.toLocaleString()} tiles cached`+(R.failed>0?`, ${R.failed.toLocaleString()} failed`:"")+`.Zoom ${K} is above this provider's max (${R}); will clamp to ${R}. `),re>8e3&&(we+='More than 8 000 tiles — exceeds the per-provider cache limit. Earlier tiles will be evicted as new ones arrive. '),h.innerHTML=`${re.toLocaleString()} tiles · ~${ce(Gt)}`+we,m.classList.toggle("alert-warning",!!we),m.classList.toggle("alert-info",!we),s.disabled=!f.checked||re===0}function be(){E?.getCurrentViewExtent()?_.textContent=" · ready":_.textContent="",E?.getDistrictBoundaryExtent()?(x.textContent="",y.disabled=!1):(x.textContent=" (not loaded — connect online to fetch)",y.disabled=!0,y.checked&&(g.checked=!0))}function Ve(){r.classList.remove("d-none"),o.classList.add("d-none"),a.classList.add("d-none"),s.classList.remove("d-none"),i.classList.remove("d-none"),i.textContent="Cancel",l.classList.add("d-none"),c.disabled=!1,f.checked=!1,s.disabled=!0,B=null}n.addEventListener("click",()=>{Ve(),be(),H(),t.show()}),d.addEventListener("change",H),u.addEventListener("input",H),p.addEventListener("input",H),g.addEventListener("change",H),y.addEventListener("change",H),w.addEventListener("change",H),f.addEventListener("change",H),s.addEventListener("click",async()=>{const G=d.value,J=parseInt(u.value,10),K=parseInt(p.value,10),ne=ye();if(!ne)return;r.classList.add("d-none"),o.classList.remove("d-none"),s.classList.add("d-none"),i.textContent="Cancel download",c.disabled=!0,L.style.width="0%",L.setAttribute("aria-valuenow","0"),v.textContent="0%",S.textContent="0 of 0 tiles",P.textContent="0",k.textContent="0",q.textContent="—",B=new Wi({baseMap:G,extent3857:ne,minZoom:J,maxZoom:K,onProgress:W=>{if(W.total>0){const re=Math.min(100,Math.round(W.done/W.total*100));L.style.width=re+"%",L.setAttribute("aria-valuenow",String(re)),v.textContent=re+"%",S.textContent=`${W.done.toLocaleString()} of ${W.total.toLocaleString()} tiles`}P.textContent=W.ok.toLocaleString(),k.textContent=W.failed.toLocaleString(),q.textContent=W.etaMs!=null?Q(W.etaMs):"—"}});let R;try{R=await B.start()}catch(W){console.error("[OfflineDownload] failed:",W),R={phase:"error",done:0,total:0,ok:0,failed:0}}o.classList.add("d-none"),a.classList.remove("d-none"),i.classList.add("d-none"),l.classList.remove("d-none"),c.disabled=!1,R.phase==="cancelled"?(z.textContent="Download cancelled",Z.innerHTML=`Stopped after ${R.done.toLocaleString()} of ${R.total.toLocaleString()} tiles.${R.ok.toLocaleString()} tiles cached`+(R.failed>0?`, ${R.failed.toLocaleString()} failed`:"")+`. | ProxyHandler}\n */\nconst coincident = (self, {parse = JSON.parse, stringify = JSON.stringify, transform, interrupt} = JSON) => {\n // create a Proxy once for the given context (globalThis or Worker instance)\n if (!context.has(self)) {\n // ensure no SAB gets a chance to pass through this call\n const sendMessage = postPatched || self.postMessage;\n // ensure the CHANNEL and data are posted correctly\n const post = (transfer, ...args) => sendMessage.call(self, {[CHANNEL]: args}, {transfer});\n\n const handler = typeof interrupt === FUNCTION ? interrupt : interrupt?.handler;\n const delay = interrupt?.delay || 42;\n const decoder = new TextDecoder('utf-16');\n\n // automatically uses sync wait (worker -> main)\n // or fallback to async wait (main -> worker)\n const waitFor = (isAsync, sb) => isAsync ?\n waitAsync(sb, 0) :\n ((handler ? waitInterrupt(sb, delay, handler) : wait(sb, 0)), syncResult);\n\n // prevent Harakiri https://github.com/WebReflection/coincident/issues/18\n let seppuku = false;\n\n context.set(self, new Proxy(new Map, {\n // there is very little point in checking prop in proxy for this very specific case\n // and I don't want to orchestrate a whole roundtrip neither, as stuff would fail\n // regardless if from Worker we access non existent Main callback, and vice-versa.\n // This is here mostly to guarantee that if such check is performed, at least the\n // get trap goes through and then it's up to developers guarantee they are accessing\n // stuff that actually exists elsewhere.\n [HAS]: (_, action) => typeof action === 'string' && !action.startsWith('_'),\n\n // worker related: get any utility that should be available on the main thread\n [GET]: (_, action) => action === 'then' ? null : ((...args) => {\n // transaction id\n const id = uid++;\n\n // first contact: just ask for how big the buffer should be\n // the value would be stored at index [1] while [0] is just control\n let sb = new Int32Array(new SharedArrayBuffer(I32_BYTES * 2));\n\n // if a transfer list has been passed, drop it from args\n let transfer = [];\n if (buffers.has(args.at(-1) || transfer))\n buffers.delete(transfer = args.pop());\n\n // ask for invoke with arguments and wait for it\n post(transfer, id, sb, action, transform ? args.map(transform) : args);\n\n // helps deciding how to wait for results\n const isAsync = self !== globalThis;\n\n // warn users about possible deadlock still allowing them\n // to explicitly `proxy.invoke().then(...)` without blocking\n let deadlock = 0;\n if (seppuku && isAsync)\n deadlock = setTimeout(console.warn, 1000, `💀🔒 - Possible deadlock if proxy.${action}(...args) is awaited`);\n\n return waitFor(isAsync, sb).value.then(() => {\n clearTimeout(deadlock);\n\n // commit transaction using the returned / needed buffer length\n const length = sb[1];\n\n // filter undefined results\n if (!length) return;\n\n // calculate the needed ui16 bytes length to store the result string\n const bytes = UI16_BYTES * length;\n\n // round up to the next amount of bytes divided by 4 to allow i32 operations\n sb = new Int32Array(new SharedArrayBuffer(bytes + (bytes % I32_BYTES)));\n\n // ask for results and wait for it\n post([], id, sb);\n return waitFor(isAsync, sb).value.then(() => parse(\n decoder.decode(new Uint16Array(sb.buffer).slice(0, length)))\n );\n });\n }),\n\n // main thread related: react to any utility a worker is asking for\n [SET](actions, action, callback) {\n const type = typeof callback;\n if (type !== FUNCTION)\n throw new Error(`Unable to assign ${action} as ${type}`);\n // lazy event listener and logic handling, triggered once by setters actions\n if (!actions.size) {\n // maps results by `id` as they are asked for\n const results = new Map;\n // add the event listener once (first defined setter, all others work the same)\n self.addEventListener('message', async (event) => {\n // grub the very same library CHANNEL; ignore otherwise\n const details = event.data?.[CHANNEL];\n if (isArray(details)) {\n // if early enough, avoid leaking data to other listeners\n event.stopImmediatePropagation();\n const [id, sb, ...rest] = details;\n let error;\n // action available: it must be defined/known on the main thread\n if (rest.length) {\n const [action, args] = rest;\n if (actions.has(action)) {\n seppuku = true;\n try {\n // await for result either sync or async and serialize it\n const result = await actions.get(action)(...args);\n if (result !== void 0) {\n const serialized = stringify(transform ? transform(result) : result);\n // store the result for \"the very next\" event listener call\n results.set(id, serialized);\n // communicate the required SharedArrayBuffer length out of the\n // resulting serialized string\n sb[1] = serialized.length;\n }\n }\n catch (_) {\n error = _;\n }\n finally {\n seppuku = false;\n }\n }\n // unknown action should be notified as missing on the main thread\n else {\n error = new Error(`Unsupported action: ${action}`);\n }\n // unlock the wait lock later on\n sb[0] = 1;\n }\n // no action means: get results out of the well known `id`\n // wait lock automatically unlocked here as no `0` value would\n // possibly ever land at index `0`\n else {\n const result = results.get(id);\n results.delete(id);\n // populate the SharedArrayBuffer with utf-16 chars code\n for (let ui16a = new Uint16Array(sb.buffer), i = 0; i < result.length; i++)\n ui16a[i] = result.charCodeAt(i);\n }\n // release te worker waiting either the length or the result\n notify(sb, 0);\n if (error) throw error;\n }\n });\n }\n // store this action callback allowing the setter in the process\n return !!actions.set(action, callback);\n }\n }));\n }\n return context.get(self);\n};\n\ncoincident.transfer = (...args) => (buffers.add(args), args);\n\nexport default coincident;\n","export function createMutex() {\n let promise;\n let resolve;\n const lock = async () => {\n while (promise) {\n await promise;\n }\n promise = new Promise((res) => {\n resolve = res;\n });\n };\n const unlock = async () => {\n const res = resolve;\n promise = undefined;\n resolve = undefined;\n res?.();\n };\n return { lock, unlock };\n}\n//# sourceMappingURL=create-mutex.js.map","export async function normalizeDatabaseFile(dbFile, convertStreamTo) {\n let bufferOrStream;\n if (dbFile instanceof Blob) {\n bufferOrStream = dbFile.stream();\n }\n else {\n bufferOrStream = dbFile;\n }\n if (bufferOrStream instanceof ReadableStream && convertStreamTo) {\n const stream = bufferOrStream;\n const reader = stream.getReader();\n switch (convertStreamTo) {\n case 'callback':\n return async () => {\n const chunk = await reader.read();\n return chunk.value;\n };\n case 'buffer':\n const chunks = [];\n let streamDone = false;\n while (!streamDone) {\n const chunk = await reader.read();\n if (chunk.value)\n chunks.push(chunk.value);\n streamDone = chunk.done;\n }\n const arrayLength = chunks.reduce((length, chunk) => {\n return length + chunk.length;\n }, 0);\n const buffer = new Uint8Array(arrayLength);\n let offset = 0;\n chunks.forEach((chunk) => {\n buffer.set(chunk, offset);\n offset += chunk.length;\n });\n return buffer.buffer;\n }\n }\n else {\n return bufferOrStream;\n }\n}\n//# sourceMappingURL=normalize-database-file.js.map","import { normalizeDatabaseFile } from '../lib/normalize-database-file.js';\nexport class SQLiteMemoryDriver {\n constructor(sqlite3InitModule) {\n Object.defineProperty(this, \"sqlite3InitModule\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: sqlite3InitModule\n });\n Object.defineProperty(this, \"sqlite3\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"db\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"config\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"pointers\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: []\n });\n Object.defineProperty(this, \"writeCallbacks\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: new Set()\n });\n Object.defineProperty(this, \"storageType\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: 'memory'\n });\n }\n async init(config) {\n const { databasePath } = config;\n const flags = this.getFlags(config);\n if (!this.sqlite3InitModule) {\n const { default: sqlite3InitModule } = await import('@sqlite.org/sqlite-wasm');\n this.sqlite3InitModule = sqlite3InitModule;\n }\n if (!this.sqlite3) {\n this.sqlite3 = await this.sqlite3InitModule();\n }\n if (this.db) {\n await this.destroy();\n }\n this.db = new this.sqlite3.oo1.DB(databasePath, flags);\n this.config = config;\n this.initWriteHook();\n }\n onWrite(callback) {\n this.writeCallbacks.add(callback);\n return () => {\n this.writeCallbacks.delete(callback);\n };\n }\n async exec(statement) {\n if (!this.db)\n throw new Error('Driver not initialized');\n return this.execOnDb(this.db, statement);\n }\n async execBatch(statements) {\n if (!this.db)\n throw new Error('Driver not initialized');\n const results = [];\n this.db.transaction((tx) => {\n const prepared = new Map();\n try {\n for (let statement of statements) {\n let stmt = prepared.get(statement.sql);\n if (!stmt) {\n const newStmt = tx.prepare(statement.sql);\n prepared.set(statement.sql, newStmt);\n stmt = newStmt;\n }\n if (statement.params?.length) {\n stmt.bind(statement.params);\n }\n let columns = [];\n let rows = [];\n while (stmt.step()) {\n columns = stmt.getColumnNames([]);\n rows.push(stmt.get([]));\n }\n results.push({ columns, rows });\n stmt.reset();\n }\n }\n finally {\n prepared.forEach((stmt) => {\n stmt.finalize();\n });\n }\n });\n return results;\n }\n async isDatabasePersisted() {\n return false;\n }\n async getDatabaseSizeBytes() {\n const sizeResult = await this.exec({\n sql: `SELECT page_count * page_size AS size \n\t\t\t\tFROM pragma_page_count(), pragma_page_size()`,\n method: 'get',\n });\n const size = sizeResult?.rows?.[0];\n if (typeof size !== 'number') {\n throw new Error('Failed to query database size');\n }\n return size;\n }\n async createFunction(fn) {\n if (!this.db)\n throw new Error('Driver not initialized');\n switch (fn.type) {\n case 'callback':\n case 'scalar':\n this.db.createFunction({\n name: fn.name,\n xFunc: (_, ...args) => fn.func(...args),\n arity: -1,\n });\n break;\n case 'aggregate':\n this.db.createFunction({\n name: fn.name,\n xStep: (_, ...args) => fn.func.step(...args),\n xFinal: (_, ...args) => fn.func.final(...args),\n arity: -1,\n });\n break;\n }\n }\n async import(database) {\n if (!this.sqlite3 || !this.db || !this.config) {\n throw new Error('Driver not initialized');\n }\n const data = await normalizeDatabaseFile(database, 'buffer');\n const dataPointer = this.sqlite3.wasm.allocFromTypedArray(data);\n this.pointers.push(dataPointer);\n const resultCode = this.sqlite3.capi.sqlite3_deserialize(this.db, 'main', dataPointer, data.byteLength, data.byteLength, this.config.readOnly\n ? this.sqlite3.capi.SQLITE_DESERIALIZE_READONLY\n : this.sqlite3.capi.SQLITE_DESERIALIZE_RESIZEABLE);\n this.db.checkRc(resultCode);\n }\n async export() {\n if (!this.sqlite3 || !this.db) {\n throw new Error('Driver not initialized');\n }\n return {\n name: 'database.sqlite3',\n data: this.sqlite3.capi.sqlite3_js_db_export(this.db),\n };\n }\n async clear() { }\n async destroy() {\n this.closeDb();\n this.pointers.forEach((pointer) => this.sqlite3?.wasm.dealloc(pointer));\n this.pointers = [];\n this.writeCallbacks.clear();\n }\n getFlags(config) {\n const { readOnly, verbose } = config;\n const parts = [readOnly === true ? 'r' : 'cw', verbose === true ? 't' : ''];\n return parts.join('');\n }\n execOnDb(db, statement) {\n const statementData = {\n rows: [],\n columns: [],\n };\n const rows = db.exec({\n sql: statement.sql,\n bind: statement.params,\n returnValue: 'resultRows',\n rowMode: 'array',\n columnNames: statementData.columns,\n });\n switch (statement.method) {\n case 'run':\n break;\n case 'get':\n statementData.rows = rows[0] ?? [];\n break;\n case 'all':\n default:\n statementData.rows = rows;\n break;\n }\n return statementData;\n }\n initWriteHook() {\n if (!this.config?.reactive)\n return;\n if (!this.sqlite3 || !this.db) {\n throw new Error('Driver not initialized');\n }\n const opMap = {\n [this.sqlite3.capi.SQLITE_INSERT]: 'insert',\n [this.sqlite3.capi.SQLITE_UPDATE]: 'update',\n [this.sqlite3.capi.SQLITE_DELETE]: 'delete',\n };\n this.sqlite3.capi.sqlite3_update_hook(this.db, (_ctx, opId, _db, table, rowid) => {\n this.writeCallbacks.forEach((cb) => {\n cb({ table, rowid, operation: opMap[opId] });\n });\n }, 0);\n }\n closeDb() {\n if (this.db) {\n this.db.close();\n this.db = undefined;\n }\n }\n}\n//# sourceMappingURL=sqlite-memory-driver.js.map","/**\n * Lodash (Custom Build) \n * Based on Underscore.js 1.8.3 \n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\nexport function debounce(func, wait, options) {\n let lastArgs;\n let lastThis;\n let maxWait;\n let result;\n let timerId;\n let lastCallTime;\n let lastInvokeTime = 0;\n let leading = false;\n let maxing = false;\n let trailing = true;\n if (typeof func !== 'function') {\n throw new TypeError('Expected a function');\n }\n wait = Number(wait) || 0;\n if (typeof options === 'object' && options !== null) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? Math.max(Number(options.maxWait) || 0, wait) : 0;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n function invokeFunc(time) {\n const args = lastArgs;\n const thisArg = lastThis;\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n function leadingEdge(time) {\n lastInvokeTime = time;\n timerId = setTimeout(timerExpired, wait);\n return leading ? invokeFunc(time) : result;\n }\n function remainingWait(time) {\n const timeSinceLastCall = time - (lastCallTime ?? 0);\n const timeSinceLastInvoke = time - lastInvokeTime;\n const timeWaiting = wait - timeSinceLastCall;\n return maxing\n ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)\n : timeWaiting;\n }\n function shouldInvoke(time) {\n const timeSinceLastCall = time - (lastCallTime ?? 0);\n const timeSinceLastInvoke = time - lastInvokeTime;\n return (lastCallTime === undefined ||\n timeSinceLastCall >= wait ||\n timeSinceLastCall < 0 ||\n (maxing && timeSinceLastInvoke >= maxWait));\n }\n function timerExpired() {\n const time = Date.now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n function trailingEdge(time) {\n timerId = undefined;\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n function flush() {\n return timerId === undefined ? result : trailingEdge(Date.now());\n }\n function debounced() {\n const time = Date.now();\n const isInvoking = shouldInvoke(time);\n // @ts-ignore\n lastArgs = arguments;\n // @ts-ignore\n lastThis = this;\n lastCallTime = time;\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n//# sourceMappingURL=debounce.js.map","export function getQueryKey() {\n return crypto.randomUUID();\n}\n//# sourceMappingURL=get-query-key.js.map","import { getQueryKey } from './get-query-key.js';\nexport function getDatabaseKey(databasePath, clientKey) {\n switch (databasePath) {\n case 'session':\n case ':sessionStorage:':\n // The sessionStorage DB can be shared between clients in the same tab\n let sessionKey = sessionStorage._sqlocal_session_key;\n if (!sessionKey) {\n sessionKey = getQueryKey();\n sessionStorage._sqlocal_session_key = sessionKey;\n }\n return `session:${sessionKey}`;\n case 'local':\n case ':localStorage:':\n // There's only one localStorage DB per origin\n return 'local';\n case ':memory:':\n // Each memory DB is unique to a client\n return `memory:${clientKey}`;\n default:\n // OPFS DBs are shared by path across same-origin tabs\n return `path:${databasePath}`;\n }\n}\n//# sourceMappingURL=get-database-key.js.map","import coincident from 'coincident';\nimport { createMutex } from './lib/create-mutex.js';\nimport { SQLiteMemoryDriver } from './drivers/sqlite-memory-driver.js';\nimport { debounce } from './lib/debounce.js';\nimport { getDatabaseKey } from './lib/get-database-key.js';\nexport class SQLocalProcessor {\n constructor(driver) {\n Object.defineProperty(this, \"driver\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"config\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: {}\n });\n Object.defineProperty(this, \"userFunctions\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: new Map()\n });\n Object.defineProperty(this, \"initMutex\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: createMutex()\n });\n Object.defineProperty(this, \"transactionMutex\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: createMutex()\n });\n Object.defineProperty(this, \"transactionKey\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: null\n });\n Object.defineProperty(this, \"proxy\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"dirtyTables\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: new Set()\n });\n Object.defineProperty(this, \"effectsChannel\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"reinitChannel\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"onmessage\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"init\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (reason) => {\n if (!this.config.databasePath || !this.config.clientKey)\n return;\n await this.initMutex.lock();\n try {\n try {\n await this.driver.init(this.config);\n }\n catch {\n console.warn(`Persistence failed, so ${this.config.databasePath} will not be saved. For origin private file system persistence, make sure your web server is configured to use the correct HTTP response headers (See https://sqlocal.dev/guide/setup#cross-origin-isolation).`);\n this.config.databasePath = ':memory:';\n this.driver = new SQLiteMemoryDriver();\n await this.driver.init(this.config);\n }\n const dbKey = getDatabaseKey(this.config.databasePath, this.config.clientKey);\n this.reinitChannel = new BroadcastChannel(`_sqlocal_reinit_(${dbKey})`);\n this.reinitChannel.onmessage = (event) => {\n const message = event.data;\n if (this.config.clientKey === message.clientKey)\n return;\n switch (message.type) {\n case 'reinit':\n this.init(message.reason);\n break;\n case 'close':\n this.driver.destroy();\n break;\n }\n };\n if (this.config.reactive) {\n this.effectsChannel = new BroadcastChannel(`_sqlocal_effects_(${dbKey})`);\n this.driver.onWrite(async (change) => {\n this.dirtyTables.add(change.table);\n await this.transactionMutex.lock();\n this.emitEffectsDebounced();\n await this.transactionMutex.unlock();\n });\n }\n await Promise.all(Array.from(this.userFunctions.values()).map((fn) => {\n return this.initUserFunction(fn);\n }));\n await this.execInitStatements();\n this.emitMessage({ type: 'event', event: 'connect', reason });\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey: null,\n });\n await this.destroy();\n }\n finally {\n await this.initMutex.unlock();\n }\n }\n });\n Object.defineProperty(this, \"postMessage\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (event, _transfer) => {\n const message = event instanceof MessageEvent ? event.data : event;\n await this.initMutex.lock();\n switch (message.type) {\n case 'config':\n this.editConfig(message);\n break;\n case 'query':\n case 'batch':\n case 'transaction':\n this.exec(message);\n break;\n case 'function':\n this.createUserFunction(message);\n break;\n case 'getinfo':\n this.getDatabaseInfo(message);\n break;\n case 'import':\n this.importDb(message);\n break;\n case 'export':\n this.exportDb(message);\n break;\n case 'delete':\n this.deleteDb(message);\n break;\n case 'destroy':\n this.destroy(message);\n break;\n }\n await this.initMutex.unlock();\n }\n });\n Object.defineProperty(this, \"emitMessage\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: (message, transfer = []) => {\n if (this.onmessage) {\n this.onmessage(message, transfer);\n }\n }\n });\n Object.defineProperty(this, \"emitEffects\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: () => {\n if (!this.effectsChannel || this.dirtyTables.size === 0)\n return;\n this.effectsChannel.postMessage({\n type: 'effects',\n tables: [...this.dirtyTables],\n });\n this.dirtyTables.clear();\n }\n });\n Object.defineProperty(this, \"emitEffectsDebounced\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: debounce(() => this.emitEffects(), 32, {\n maxWait: 180,\n })\n });\n Object.defineProperty(this, \"editConfig\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: (message) => {\n this.config = message.config;\n this.init('initial');\n }\n });\n Object.defineProperty(this, \"exec\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n try {\n const response = {\n type: 'data',\n queryKey: message.queryKey,\n data: [],\n };\n switch (message.type) {\n case 'query':\n const partOfTransaction = this.transactionKey !== null &&\n this.transactionKey === message.transactionKey;\n try {\n if (!partOfTransaction) {\n await this.transactionMutex.lock();\n }\n const statementData = await this.driver.exec(message);\n response.data.push(statementData);\n }\n finally {\n if (!partOfTransaction) {\n await this.transactionMutex.unlock();\n }\n }\n break;\n case 'batch':\n try {\n await this.transactionMutex.lock();\n const results = await this.driver.execBatch(message.statements);\n response.data.push(...results);\n }\n finally {\n await this.transactionMutex.unlock();\n }\n break;\n case 'transaction':\n if (message.action === 'begin') {\n await this.transactionMutex.lock();\n this.transactionKey = message.transactionKey;\n await this.driver.exec({ sql: 'BEGIN' });\n }\n if ((message.action === 'commit' || message.action === 'rollback') &&\n this.transactionKey !== null &&\n this.transactionKey === message.transactionKey) {\n const sql = message.action === 'commit' ? 'COMMIT' : 'ROLLBACK';\n await this.driver.exec({ sql });\n this.transactionKey = null;\n await this.transactionMutex.unlock();\n }\n break;\n }\n this.emitMessage(response);\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey: message.queryKey,\n });\n }\n }\n });\n Object.defineProperty(this, \"execInitStatements\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n if (this.config.onInitStatements) {\n for (let statement of this.config.onInitStatements) {\n await this.driver.exec(statement);\n }\n }\n }\n });\n Object.defineProperty(this, \"getDatabaseInfo\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n try {\n this.emitMessage({\n type: 'info',\n queryKey: message.queryKey,\n info: {\n databasePath: this.config.databasePath,\n storageType: this.driver.storageType,\n databaseSizeBytes: await this.driver.getDatabaseSizeBytes(),\n persisted: await this.driver.isDatabasePersisted(),\n },\n });\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n queryKey: message.queryKey,\n error,\n });\n }\n }\n });\n Object.defineProperty(this, \"createUserFunction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n const { functionName: name, functionType: type, queryKey } = message;\n let fn;\n if (this.userFunctions.has(name)) {\n this.emitMessage({\n type: 'error',\n error: new Error(`A user-defined function with the name \"${name}\" has already been created for this SQLocal instance.`),\n queryKey,\n });\n return;\n }\n switch (type) {\n case 'callback':\n fn = {\n type,\n name,\n func: (...args) => {\n this.emitMessage({ type: 'callback', name, args });\n },\n };\n break;\n case 'scalar':\n fn = {\n type,\n name,\n func: this.proxy[`_sqlocal_func_${name}`],\n };\n break;\n case 'aggregate':\n fn = {\n type,\n name,\n func: {\n step: this.proxy[`_sqlocal_func_${name}_step`],\n final: this.proxy[`_sqlocal_func_${name}_final`],\n },\n };\n break;\n }\n try {\n await this.initUserFunction(fn);\n this.emitMessage({\n type: 'success',\n queryKey,\n });\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey,\n });\n }\n }\n });\n Object.defineProperty(this, \"initUserFunction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (fn) => {\n await this.driver.createFunction(fn);\n this.userFunctions.set(fn.name, fn);\n }\n });\n Object.defineProperty(this, \"importDb\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n const { queryKey, database } = message;\n let errored = false;\n try {\n await this.driver.import(database);\n if (this.driver.storageType === 'memory') {\n await this.execInitStatements();\n }\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey,\n });\n errored = true;\n }\n finally {\n if (this.driver.storageType !== 'memory') {\n await this.init('overwrite');\n }\n }\n if (!errored) {\n this.emitMessage({\n type: 'success',\n queryKey,\n });\n }\n }\n });\n Object.defineProperty(this, \"exportDb\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n const { queryKey } = message;\n try {\n const { name, data } = await this.driver.export();\n this.emitMessage({\n type: 'buffer',\n queryKey,\n bufferName: name,\n buffer: data,\n }, [data]);\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey,\n });\n }\n }\n });\n Object.defineProperty(this, \"deleteDb\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n const { queryKey } = message;\n let errored = false;\n try {\n await this.driver.clear();\n }\n catch (error) {\n this.emitMessage({\n type: 'error',\n error,\n queryKey,\n });\n errored = true;\n }\n finally {\n await this.init('delete');\n }\n if (!errored) {\n this.emitMessage({\n type: 'success',\n queryKey,\n });\n }\n }\n });\n Object.defineProperty(this, \"destroy\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n await this.driver.exec({ sql: 'PRAGMA optimize' });\n await this.driver.destroy();\n if (this.effectsChannel) {\n this.emitEffectsDebounced.flush();\n this.effectsChannel.close();\n this.effectsChannel = undefined;\n }\n if (this.reinitChannel) {\n this.reinitChannel.close();\n this.reinitChannel = undefined;\n }\n if (message) {\n this.emitMessage({\n type: 'success',\n queryKey: message.queryKey,\n });\n }\n }\n });\n const isInWorker = typeof WorkerGlobalScope !== 'undefined' &&\n globalThis instanceof WorkerGlobalScope;\n const proxy = isInWorker ? coincident(globalThis) : globalThis;\n this.proxy = proxy;\n this.driver = driver;\n }\n}\n//# sourceMappingURL=processor.js.map","export function sqlTag(queryTemplate, ...params) {\n return {\n sql: queryTemplate.join('?'),\n params,\n };\n}\n//# sourceMappingURL=sql-tag.js.map","function isArrayOfArrays(rows) {\n return !rows.some((row) => !Array.isArray(row));\n}\nexport function convertRowsToObjects(rows, columns) {\n let checkedRows;\n if (isArrayOfArrays(rows)) {\n checkedRows = rows;\n }\n else {\n checkedRows = [rows];\n }\n return checkedRows.map((row) => {\n const rowObj = {};\n columns.forEach((column, columnIndex) => {\n rowObj[column] = row[columnIndex];\n });\n return rowObj;\n });\n}\n//# sourceMappingURL=convert-rows-to-objects.js.map","import { sqlTag } from './sql-tag.js';\nfunction isDrizzleStatement(statement) {\n return (typeof statement === 'object' &&\n statement !== null &&\n 'getSQL' in statement &&\n typeof statement.getSQL === 'function');\n}\nfunction isStatement(statement) {\n return (typeof statement === 'object' &&\n statement !== null &&\n 'sql' in statement === true &&\n typeof statement.sql === 'string' &&\n 'params' in statement === true);\n}\nexport function normalizeStatement(statement) {\n if (typeof statement === 'function') {\n statement = statement(sqlTag);\n }\n if (isDrizzleStatement(statement)) {\n try {\n if (!('toSQL' in statement && typeof statement.toSQL === 'function')) {\n throw 1;\n }\n const drizzleStatement = statement.toSQL();\n if (!isStatement(drizzleStatement)) {\n throw 2;\n }\n const exec = 'all' in statement && typeof statement.all === 'function'\n ? statement.all\n : undefined;\n return {\n ...drizzleStatement,\n exec: exec ? () => exec() : undefined,\n };\n }\n catch {\n throw new Error('The passed statement could not be parsed.');\n }\n }\n const sql = statement.sql;\n let params = [];\n if ('params' in statement) {\n params = statement.params;\n }\n else if ('parameters' in statement) {\n params = statement.parameters;\n }\n return { sql, params };\n}\n//# sourceMappingURL=normalize-statement.js.map","import { sqlTag } from './sql-tag.js';\nexport function normalizeSql(maybeQueryTemplate, params) {\n let statement;\n if (typeof maybeQueryTemplate === 'string') {\n statement = { sql: maybeQueryTemplate, params };\n }\n else {\n statement = sqlTag(maybeQueryTemplate, ...params);\n }\n return statement;\n}\n//# sourceMappingURL=normalize-sql.js.map","export async function mutationLock(mode, bypass, config, mutation) {\n if (!bypass && 'locks' in navigator) {\n return navigator.locks.request(`_sqlocal_mutation_(${config.databasePath})`, { mode }, mutation);\n }\n else {\n return mutation();\n }\n}\n//# sourceMappingURL=mutation-lock.js.map","import { SQLiteMemoryDriver } from './sqlite-memory-driver.js';\nexport class SQLiteKvvfsDriver extends SQLiteMemoryDriver {\n constructor(storageType, sqlite3InitModule) {\n super(sqlite3InitModule);\n Object.defineProperty(this, \"storageType\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: storageType\n });\n }\n async init(config) {\n const flags = this.getFlags(config);\n if (config.readOnly) {\n throw new Error(`SQLite storage type \"${this.storageType}\" does not support read-only mode.`);\n }\n if (!this.sqlite3InitModule) {\n const { default: sqlite3InitModule } = await import('@sqlite.org/sqlite-wasm');\n this.sqlite3InitModule = sqlite3InitModule;\n }\n if (!this.sqlite3) {\n this.sqlite3 = await this.sqlite3InitModule();\n }\n if (this.db) {\n await this.destroy();\n }\n this.db = new this.sqlite3.oo1.JsStorageDb({\n filename: this.storageType,\n flags,\n });\n this.config = config;\n this.initWriteHook();\n }\n async isDatabasePersisted() {\n return navigator.storage?.persisted();\n }\n async getDatabaseSizeBytes() {\n if (!this.db)\n throw new Error('Driver not initialized');\n return this.db.storageSize();\n }\n async import(database) {\n const memdb = new SQLiteMemoryDriver();\n await memdb.init({});\n await memdb.import(database);\n await this.clear();\n await memdb.exec({\n sql: `VACUUM INTO 'file:${this.storageType}?vfs=kvvfs'`,\n });\n await memdb.destroy();\n }\n async clear() {\n if (!this.db)\n throw new Error('Driver not initialized');\n this.db.clearStorage();\n }\n async destroy() {\n this.closeDb();\n this.writeCallbacks.clear();\n }\n}\n//# sourceMappingURL=sqlite-kvvfs-driver.js.map","var _a, _b;\nimport coincident from 'coincident';\nimport { SQLocalProcessor } from './processor.js';\nimport { sqlTag } from './lib/sql-tag.js';\nimport { convertRowsToObjects } from './lib/convert-rows-to-objects.js';\nimport { normalizeStatement } from './lib/normalize-statement.js';\nimport { getQueryKey } from './lib/get-query-key.js';\nimport { normalizeSql } from './lib/normalize-sql.js';\nimport { mutationLock } from './lib/mutation-lock.js';\nimport { normalizeDatabaseFile } from './lib/normalize-database-file.js';\nimport { SQLiteMemoryDriver } from './drivers/sqlite-memory-driver.js';\nimport { SQLiteKvvfsDriver } from './drivers/sqlite-kvvfs-driver.js';\nimport { getDatabaseKey } from './lib/get-database-key.js';\nexport class SQLocal {\n constructor(config) {\n Object.defineProperty(this, \"config\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"clientKey\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"processor\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"isDestroyed\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: false\n });\n Object.defineProperty(this, \"bypassMutationLock\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: false\n });\n Object.defineProperty(this, \"transactionQueryKeyQueue\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: []\n });\n Object.defineProperty(this, \"userCallbacks\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: new Map()\n });\n Object.defineProperty(this, \"queriesInProgress\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: new Map()\n });\n Object.defineProperty(this, \"proxy\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"reinitChannel\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"effectsChannel\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: void 0\n });\n Object.defineProperty(this, \"processMessageEvent\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: (event) => {\n const message = event instanceof MessageEvent ? event.data : event;\n const queries = this.queriesInProgress;\n switch (message.type) {\n case 'success':\n case 'data':\n case 'buffer':\n case 'info':\n case 'error':\n if (message.queryKey && queries.has(message.queryKey)) {\n const [resolve, reject] = queries.get(message.queryKey);\n if (message.type === 'error') {\n reject(message.error);\n }\n else {\n resolve(message);\n }\n queries.delete(message.queryKey);\n }\n else if (message.type === 'error') {\n throw message.error;\n }\n break;\n case 'callback':\n const userCallback = this.userCallbacks.get(message.name);\n if (userCallback) {\n userCallback(...(message.args ?? []));\n }\n break;\n case 'event':\n this.config.onConnect?.(message.reason);\n break;\n }\n }\n });\n Object.defineProperty(this, \"createQuery\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (message) => {\n return mutationLock('shared', this.bypassMutationLock ||\n message.type === 'import' ||\n message.type === 'delete', this.config, async () => {\n if (this.isDestroyed === true) {\n throw new Error('This SQLocal client has been destroyed. You will need to initialize a new client in order to make further queries.');\n }\n const queryKey = getQueryKey();\n switch (message.type) {\n case 'import':\n this.processor.postMessage({\n ...message,\n queryKey,\n }, [message.database]);\n break;\n default:\n this.processor.postMessage({\n ...message,\n queryKey,\n });\n break;\n }\n return new Promise((resolve, reject) => {\n this.queriesInProgress.set(queryKey, [resolve, reject]);\n });\n });\n }\n });\n Object.defineProperty(this, \"broadcast\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: (message) => {\n this.reinitChannel.postMessage(message);\n }\n });\n Object.defineProperty(this, \"exec\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (sql, params, method = 'all', transactionKey) => {\n const message = await this.createQuery({\n type: 'query',\n transactionKey,\n sql,\n params,\n method,\n });\n const data = {\n rows: [],\n columns: [],\n };\n if (message.type === 'data') {\n data.rows = message.data[0]?.rows ?? [];\n data.columns = message.data[0]?.columns ?? [];\n }\n return data;\n }\n });\n Object.defineProperty(this, \"execBatch\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (statements) => {\n const message = await this.createQuery({\n type: 'batch',\n statements,\n });\n const data = new Array(statements.length).fill({\n rows: [],\n columns: [],\n });\n if (message.type === 'data') {\n message.data.forEach((result, resultIndex) => {\n data[resultIndex] = result;\n });\n }\n return data;\n }\n });\n Object.defineProperty(this, \"sql\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (queryTemplate, ...params) => {\n const statement = normalizeSql(queryTemplate, params);\n const { rows, columns } = await this.exec(statement.sql, statement.params, 'all');\n const resultRecords = convertRowsToObjects(rows, columns);\n return resultRecords;\n }\n });\n Object.defineProperty(this, \"batch\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (passStatements) => {\n const statements = passStatements(sqlTag);\n const data = await this.execBatch(statements);\n return data.map(({ rows, columns }) => {\n const resultRecords = convertRowsToObjects(rows, columns);\n return resultRecords;\n });\n }\n });\n Object.defineProperty(this, \"beginTransaction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n const transactionKey = getQueryKey();\n await this.createQuery({\n type: 'transaction',\n transactionKey,\n action: 'begin',\n });\n const query = async (passStatement) => {\n const statement = normalizeStatement(passStatement);\n if (statement.exec) {\n this.transactionQueryKeyQueue.push(transactionKey);\n return statement.exec();\n }\n const { rows, columns } = await this.exec(statement.sql, statement.params, 'all', transactionKey);\n const resultRecords = convertRowsToObjects(rows, columns);\n return resultRecords;\n };\n const sql = async (queryTemplate, ...params) => {\n const statement = normalizeSql(queryTemplate, params);\n const resultRecords = await query(statement);\n return resultRecords;\n };\n const commit = async () => {\n await this.createQuery({\n type: 'transaction',\n transactionKey,\n action: 'commit',\n });\n };\n const rollback = async () => {\n await this.createQuery({\n type: 'transaction',\n transactionKey,\n action: 'rollback',\n });\n };\n return {\n query,\n sql,\n commit,\n rollback,\n };\n }\n });\n Object.defineProperty(this, \"transaction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (transaction) => {\n return mutationLock('exclusive', false, this.config, async () => {\n let tx;\n this.bypassMutationLock = true;\n try {\n tx = await this.beginTransaction();\n const result = await transaction({\n sql: tx.sql,\n query: tx.query,\n });\n await tx.commit();\n return result;\n }\n catch (err) {\n await tx?.rollback();\n throw err;\n }\n finally {\n this.bypassMutationLock = false;\n }\n });\n }\n });\n Object.defineProperty(this, \"reactiveQuery\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: (passStatement) => {\n let value = [];\n let gotFirstValue = false;\n let isListening = false;\n let updateCount = 0;\n const statement = normalizeStatement(passStatement);\n const watchedTables = new Set();\n const subObservers = new Set();\n const errObservers = new Set();\n const runStatement = async () => {\n try {\n const updateOrder = ++updateCount;\n if (watchedTables.size === 0) {\n const usedTables = await this.sql(\"SELECT name, wr FROM tables_used(?) WHERE type = 'table'\", statement.sql);\n const readTables = new Set();\n const writtenTables = new Set();\n usedTables.forEach((table) => {\n if (typeof table.name !== 'string')\n return;\n table.wr\n ? writtenTables.add(table.name)\n : readTables.add(table.name);\n });\n if (readTables.size === 0) {\n throw new Error('The passed SQL does not read any tables.');\n }\n if (Array.from(writtenTables).some((table) => readTables.has(table))) {\n throw new Error('The passed SQL would mutate one or more of the tables that it reads. Doing this in a reactive query would create an infinite loop.');\n }\n readTables.forEach((name) => watchedTables.add(name));\n }\n const results = statement.exec\n ? await statement.exec()\n : await this.sql(statement.sql, ...statement.params);\n if (updateOrder === updateCount) {\n value = results;\n gotFirstValue = true;\n subObservers.forEach((observer) => observer(value));\n }\n }\n catch (err) {\n errObservers.forEach((observer) => {\n observer(err instanceof Error ? err : new Error(String(err)));\n });\n }\n };\n const onEffect = (message) => {\n if (message.data.tables.some((table) => watchedTables.has(table))) {\n runStatement();\n }\n };\n return {\n get value() {\n return value;\n },\n subscribe: (onData, onError) => {\n if (!this.effectsChannel) {\n throw new Error('This SQLocal instance is not configured for reactive queries. Set the \"reactive\" option to enable them.');\n }\n if (!onError) {\n onError = (err) => {\n throw err;\n };\n }\n subObservers.add(onData);\n errObservers.add(onError);\n if (!isListening) {\n this.effectsChannel.addEventListener('message', onEffect);\n isListening = true;\n runStatement();\n }\n else if (gotFirstValue) {\n onData(value);\n }\n return {\n unsubscribe: () => {\n subObservers.delete(onData);\n errObservers.delete(onError);\n if (subObservers.size !== 0)\n return;\n this.effectsChannel?.removeEventListener('message', onEffect);\n isListening = false;\n },\n };\n },\n };\n }\n });\n Object.defineProperty(this, \"createCallbackFunction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (funcName, func) => {\n await this.createQuery({\n type: 'function',\n functionName: funcName,\n functionType: 'callback',\n });\n this.userCallbacks.set(funcName, func);\n }\n });\n Object.defineProperty(this, \"createScalarFunction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (funcName, func) => {\n const key = `_sqlocal_func_${funcName}`;\n const attachFunction = () => {\n this.proxy[key] = func;\n };\n if (this.proxy === globalThis) {\n attachFunction();\n }\n await this.createQuery({\n type: 'function',\n functionName: funcName,\n functionType: 'scalar',\n });\n if (this.proxy !== globalThis) {\n attachFunction();\n }\n }\n });\n Object.defineProperty(this, \"createAggregateFunction\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (funcName, func) => {\n const key = `_sqlocal_func_${funcName}`;\n const attachFunction = () => {\n this.proxy[`${key}_step`] = func.step;\n this.proxy[`${key}_final`] = func.final;\n };\n if (this.proxy === globalThis) {\n attachFunction();\n }\n await this.createQuery({\n type: 'function',\n functionName: funcName,\n functionType: 'aggregate',\n });\n if (this.proxy !== globalThis) {\n attachFunction();\n }\n }\n });\n Object.defineProperty(this, \"getDatabaseInfo\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n const message = await this.createQuery({ type: 'getinfo' });\n if (message.type === 'info') {\n return message.info;\n }\n else {\n throw new Error('The database failed to return valid information.');\n }\n }\n });\n Object.defineProperty(this, \"getDatabaseFile\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n const message = await this.createQuery({ type: 'export' });\n if (message.type === 'buffer') {\n return new File([message.buffer], message.bufferName, {\n type: 'application/x-sqlite3',\n });\n }\n else {\n throw new Error('The database failed to export.');\n }\n }\n });\n Object.defineProperty(this, \"overwriteDatabaseFile\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (databaseFile, beforeUnlock) => {\n await mutationLock('exclusive', false, this.config, async () => {\n try {\n this.broadcast({\n type: 'close',\n clientKey: this.clientKey,\n });\n const database = await normalizeDatabaseFile(databaseFile, 'buffer');\n await this.createQuery({\n type: 'import',\n database,\n });\n if (typeof beforeUnlock === 'function') {\n this.bypassMutationLock = true;\n await beforeUnlock();\n }\n this.broadcast({\n type: 'reinit',\n clientKey: this.clientKey,\n reason: 'overwrite',\n });\n }\n finally {\n this.bypassMutationLock = false;\n }\n });\n }\n });\n Object.defineProperty(this, \"deleteDatabaseFile\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async (beforeUnlock) => {\n await mutationLock('exclusive', false, this.config, async () => {\n try {\n this.broadcast({\n type: 'close',\n clientKey: this.clientKey,\n });\n await this.createQuery({\n type: 'delete',\n });\n if (typeof beforeUnlock === 'function') {\n this.bypassMutationLock = true;\n await beforeUnlock();\n }\n this.broadcast({\n type: 'reinit',\n clientKey: this.clientKey,\n reason: 'delete',\n });\n }\n finally {\n this.bypassMutationLock = false;\n }\n });\n }\n });\n Object.defineProperty(this, \"destroy\", {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n await this.createQuery({ type: 'destroy' });\n if (typeof globalThis.Worker !== 'undefined' &&\n this.processor instanceof Worker) {\n this.processor.removeEventListener('message', this.processMessageEvent);\n this.processor.terminate();\n }\n this.queriesInProgress.clear();\n this.userCallbacks.clear();\n this.reinitChannel.close();\n this.effectsChannel?.close();\n this.isDestroyed = true;\n }\n });\n Object.defineProperty(this, _a, {\n enumerable: true,\n configurable: true,\n writable: true,\n value: () => {\n this.destroy();\n }\n });\n Object.defineProperty(this, _b, {\n enumerable: true,\n configurable: true,\n writable: true,\n value: async () => {\n await this.destroy();\n }\n });\n const clientConfig = typeof config === 'string' ? { databasePath: config } : config;\n const { onInit, onConnect, processor, ...commonConfig } = clientConfig;\n const { databasePath } = commonConfig;\n this.config = clientConfig;\n this.clientKey = getQueryKey();\n const dbKey = getDatabaseKey(databasePath, this.clientKey);\n this.reinitChannel = new BroadcastChannel(`_sqlocal_reinit_(${dbKey})`);\n if (commonConfig.reactive) {\n this.effectsChannel = new BroadcastChannel(`_sqlocal_effects_(${dbKey})`);\n }\n if (typeof processor !== 'undefined') {\n this.processor = processor;\n }\n else if (databasePath === 'local' || databasePath === ':localStorage:') {\n const driver = new SQLiteKvvfsDriver('local');\n this.processor = new SQLocalProcessor(driver);\n }\n else if (databasePath === 'session' ||\n databasePath === ':sessionStorage:') {\n const driver = new SQLiteKvvfsDriver('session');\n this.processor = new SQLocalProcessor(driver);\n }\n else if (typeof globalThis.Worker !== 'undefined' &&\n databasePath !== ':memory:') {\n this.processor = new Worker(new URL('./worker', import.meta.url), {\n type: 'module',\n });\n }\n else {\n const driver = new SQLiteMemoryDriver();\n this.processor = new SQLocalProcessor(driver);\n }\n if (this.processor instanceof SQLocalProcessor) {\n this.processor.onmessage = (message) => this.processMessageEvent(message);\n this.proxy = globalThis;\n }\n else {\n this.processor.addEventListener('message', this.processMessageEvent);\n this.proxy = coincident(this.processor);\n }\n this.processor.postMessage({\n type: 'config',\n config: {\n ...commonConfig,\n clientKey: this.clientKey,\n onInitStatements: onInit?.(sqlTag) ?? [],\n },\n });\n }\n}\n_a = Symbol.dispose, _b = Symbol.asyncDispose;\n//# sourceMappingURL=client.js.map","/**\n * Database Module\n *\n * Uses SQLocal directly with BroadcastChannel for cross-tab coordination.\n *\n * Why this approach instead of SharedWorker?\n * - SQLocal already uses its own internal worker for OPFS access\n * - Wrapping it in another SharedWorker adds complexity and causes issues\n * - BroadcastChannel provides simple cross-tab communication\n * - Each tab has its own SQLocal instance but they share the same OPFS database file\n *\n * Usage:\n * import { sql, dbReady, addLocation, getLocations } from './database.js';\n *\n * await dbReady;\n * await addLocation('Point A', -1.5, 7.5);\n * const locations = await getLocations();\n */\n\nimport { SQLocal } from 'sqlocal';\n\n// Database configuration\nconst DATABASE_PATH = 'lupmis2.db';\nconst BROADCAST_CHANNEL = 'lupmis-db-sync';\n\n// Create SQLocal instance\nconst db = new SQLocal(DATABASE_PATH);\n\n// Get the sql tagged template function\nconst { sql } = db;\n\nconsole.log('[Database] SQLocal instance created for:', DATABASE_PATH);\n\n// Export sql for direct queries\nexport { sql };\n\n// Create broadcast channel for cross-tab coordination\nconst channel = new BroadcastChannel(BROADCAST_CHANNEL);\n\n// Track if database is ready\nlet isReady = false;\nlet readyResolve;\nlet readyReject;\n\nexport const dbReady = new Promise((resolve, reject) => {\n readyResolve = resolve;\n readyReject = reject;\n});\n\n// Database change listeners\nconst changeListeners = new Set();\n\n/**\n * Subscribe to database changes (from any tab)\n * @param {Function} listener - Called with { table, action, id }\n * @returns {Function} Unsubscribe function\n */\nexport function onDatabaseChange(listener) {\n changeListeners.add(listener);\n return () => changeListeners.delete(listener);\n}\n\n// Handle messages from other tabs\nchannel.onmessage = (event) => {\n const { type, payload } = event.data;\n if (type === 'DB_CHANGE') {\n // Notify local listeners about changes from other tabs\n for (const listener of changeListeners) {\n try {\n listener(payload);\n } catch (e) {\n console.error('[Database] Change listener error:', e);\n }\n }\n }\n};\n\n/**\n * Broadcast a database change to other tabs\n */\nfunction broadcastChange(table, action, id = null) {\n channel.postMessage({\n type: 'DB_CHANGE',\n payload: { table, action, id, timestamp: Date.now() }\n });\n\n // Also notify local listeners\n for (const listener of changeListeners) {\n try {\n listener({ table, action, id, timestamp: Date.now(), local: true });\n } catch (e) {\n console.error('[Database] Change listener error:', e);\n }\n }\n}\n\n// ============================================================================\n// Database Initialization\n// ============================================================================\n\n/**\n * Initialize the database schema\n */\nexport async function initSchema() {\n try {\n console.log('[Database] Initializing schema...');\n\n // Test connection\n const testResult = await sql`SELECT sqlite_version() as version`;\n console.log('[Database] SQLite version:', testResult[0]?.version);\n\n // Create locations table\n console.log('[Database] Creating locations table...');\n await sql`\n CREATE TABLE IF NOT EXISTS locations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n longitude REAL NOT NULL,\n latitude REAL NOT NULL,\n description TEXT,\n category TEXT DEFAULT 'default',\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n updated_at TEXT DEFAULT CURRENT_TIMESTAMP,\n synced INTEGER DEFAULT 0\n )\n `;\n\n // Verify table exists\n const tablesAfterLocations = await sql`SELECT name FROM sqlite_master WHERE type='table' AND name='locations'`;\n console.log('[Database] Locations table exists:', tablesAfterLocations.length > 0);\n\n // Create sync_log table\n console.log('[Database] Creating sync_log table...');\n await sql`\n CREATE TABLE IF NOT EXISTS sync_log (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n table_name TEXT NOT NULL,\n record_id INTEGER NOT NULL,\n action TEXT NOT NULL,\n timestamp TEXT DEFAULT CURRENT_TIMESTAMP,\n synced INTEGER DEFAULT 0\n )\n `;\n\n // Create remote_data cache table\n console.log('[Database] Creating remote_data table...');\n await sql`\n CREATE TABLE IF NOT EXISTS remote_data (\n key TEXT PRIMARY KEY,\n data TEXT NOT NULL,\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // Create collector_zones table for caching zone data\n console.log('[Database] Creating collector_zones table...');\n await sql`\n CREATE TABLE IF NOT EXISTS collector_zones (\n id INTEGER PRIMARY KEY,\n zone_name TEXT,\n geometry_wkt TEXT,\n properties TEXT,\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // Create parcels table — mirrors the server's spatial.lu_parcels structure\n // (land-use parcels). Attribute columns match the server 1:1 so the local\n // data viewer shows real fields rather than a JSON blob.\n // status — local-only flag: 'verified' = downloaded from the API,\n // 'new' = drawn locally and pending server verification.\n // fetched_at — local-only cache timestamp.\n // Migrate older databases that used the previous JSON-blob schema\n // (id, geometry_wkt, properties, status, fetched_at): if the new `upn`\n // column is missing, drop the cached table so it is recreated with the\n // lu_parcels columns. Cached server parcels re-download on next load.\n console.log('[Database] Creating parcels table...');\n try {\n const cols = await sql`PRAGMA table_info(parcels)`;\n if (cols.length > 0 && !cols.some((c) => c.name === 'upn')) {\n console.log('[Database] Migrating parcels table to lu_parcels structure (dropping old cache)...');\n await sql`DROP TABLE parcels`;\n }\n } catch (e) {\n console.warn('[Database] parcels migration check failed:', e);\n }\n await sql`\n CREATE TABLE IF NOT EXISTS parcels (\n id INTEGER PRIMARY KEY,\n upn TEXT,\n style INTEGER,\n landuse TEXT,\n zone_code TEXT,\n zone_name TEXT,\n sector TEXT,\n block TEXT,\n parcel_no TEXT,\n prop_no TEXT,\n st_name TEXT,\n prop_add TEXT,\n fac_name TEXT,\n min_height INTEGER,\n max_height INTEGER,\n eff_date TEXT,\n lp_name TEXT,\n locality TEXT,\n mmda TEXT,\n last_update TEXT,\n remarks TEXT,\n geometry_wkt TEXT,\n created_at TEXT,\n updated_at TEXT,\n districtid INTEGER,\n status TEXT DEFAULT 'verified',\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // Create building_footprints table for caching footprint data\n console.log('[Database] Creating building_footprints table...');\n await sql`\n CREATE TABLE IF NOT EXISTS building_footprints (\n id INTEGER PRIMARY KEY,\n geometry_wkt TEXT,\n properties TEXT,\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // Create osm_roads table for caching the OSM road network\n console.log('[Database] Creating osm_roads table...');\n await sql`\n CREATE TABLE IF NOT EXISTS osm_roads (\n osm_id INTEGER PRIMARY KEY,\n geometry_wkt TEXT,\n properties TEXT,\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // UPN-grid table — district sub-division grid (one cell per UPN prefix).\n // The grid is static per district, so the cache is populated once and only\n // refreshed when the user is associated with a different district. The\n // districtid column lets getLocalUpnGrid() detect that mismatch.\n console.log('[Database] Creating upn_grid table...');\n await sql`\n CREATE TABLE IF NOT EXISTS upn_grid (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n districtid INTEGER,\n upn_prefix TEXT,\n geometry_wkt TEXT,\n fetched_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n // ── GPS trails ──────────────────────────────────────────────────────\n // Recorded field-movement tracks. These are the local store for the\n // reusable GeoTracker module (src/geotracker/). `client_uuid` lets the\n // server de-duplicate re-synced trails; `satellites` is nullable because\n // the web Geolocation API does not expose it (only native builds do).\n console.log('[Database] Creating gps_trails table...');\n await sql`\n CREATE TABLE IF NOT EXISTS gps_trails (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n client_uuid TEXT UNIQUE,\n name TEXT,\n district_id TEXT,\n started_at TEXT NOT NULL,\n ended_at TEXT,\n status TEXT NOT NULL DEFAULT 'recording',\n point_count INTEGER NOT NULL DEFAULT 0,\n distance_m REAL NOT NULL DEFAULT 0,\n synced INTEGER NOT NULL DEFAULT 0,\n remote_id TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `;\n\n console.log('[Database] Creating gps_trail_points table...');\n await sql`\n CREATE TABLE IF NOT EXISTS gps_trail_points (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n trail_id INTEGER NOT NULL,\n seq INTEGER NOT NULL,\n longitude REAL NOT NULL,\n latitude REAL NOT NULL,\n altitude REAL,\n accuracy REAL,\n altitude_accuracy REAL,\n heading REAL,\n speed REAL,\n satellites INTEGER,\n recorded_at TEXT NOT NULL\n )\n `;\n\n // ── External imports ────────────────────────────────────────────────\n // Staging for shapefile / GeoJSON / KML imports before they are uploaded\n // to the server. See LUPMIS2_Import_Upload_Design.docx §4.\n // external_imports — one row per imported file (the dataset)\n // external_import_features — staged features (rows pending upload)\n //\n // Status state machine (aligns with the database team's staged-upload\n // model — uploads land in spatial.lu_parcels_upload_tmp first, then a\n // supervisor promotes them to the live spatial.lu_parcels via the\n // migrated flag):\n //\n // 'imported' → 'mapped' → 'uploading' → 'submitted' → 'migrated'\n // ↘ 'failed'\n //\n // 'other' is a terminal display-only state (user chose \"Other / view only\").\n // 'submitted' = row exists in upload_tmp, awaiting supervisor review.\n // 'migrated' = supervisor approved & promoted to the live table.\n console.log('[Database] Creating external_imports table...');\n await sql`\n CREATE TABLE IF NOT EXISTS external_imports (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n filename TEXT NOT NULL,\n target_type TEXT NOT NULL DEFAULT 'other',\n mapping_json TEXT,\n status TEXT NOT NULL DEFAULT 'imported',\n feature_count INTEGER NOT NULL DEFAULT 0,\n error_count INTEGER NOT NULL DEFAULT 0,\n client_import_id TEXT UNIQUE,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n last_uploaded_at TEXT\n )\n `;\n\n console.log('[Database] Creating external_import_features table...');\n await sql`\n CREATE TABLE IF NOT EXISTS external_import_features (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n import_id INTEGER NOT NULL REFERENCES external_imports(id) ON DELETE CASCADE,\n client_uuid TEXT UNIQUE,\n geometry_wkt TEXT NOT NULL,\n properties_json TEXT,\n upload_status TEXT NOT NULL DEFAULT 'pending',\n server_id INTEGER,\n error_message TEXT\n )\n `;\n\n // Create indexes\n await sql`CREATE INDEX IF NOT EXISTS idx_locations_category ON locations(category)`;\n await sql`CREATE INDEX IF NOT EXISTS idx_locations_synced ON locations(synced)`;\n await sql`CREATE INDEX IF NOT EXISTS idx_gps_trails_synced ON gps_trails(synced, status)`;\n await sql`CREATE INDEX IF NOT EXISTS idx_gps_trail_points_trail ON gps_trail_points(trail_id, seq)`;\n await sql`CREATE INDEX IF NOT EXISTS idx_external_imports_status ON external_imports(status)`;\n await sql`CREATE INDEX IF NOT EXISTS idx_external_import_features_import ON external_import_features(import_id, upload_status)`;\n\n // Final verification\n const allTables = await sql`SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'`;\n console.log('[Database] All tables:', allTables.map(t => t.name));\n\n isReady = true;\n readyResolve(true);\n console.log('[Database] ✓ Schema initialized');\n\n } catch (error) {\n console.error('[Database] ✗ Schema init failed:', error);\n readyReject(error);\n throw error;\n }\n}\n\n// ============================================================================\n// Location Operations\n// ============================================================================\n\n/**\n * Add a new location\n */\nexport async function addLocation(name, longitude, latitude, options = {}) {\n const { description = null, category = 'default' } = options;\n\n console.log('[Database] Adding location:', name, longitude, latitude, category);\n\n try {\n // Check table exists first\n const tableCheck = await sql`SELECT name FROM sqlite_master WHERE type='table' AND name='locations'`;\n console.log('[Database] Table check before insert:', tableCheck);\n\n if (tableCheck.length === 0) {\n console.error('[Database] ✗ locations table does not exist!');\n throw new Error('locations table does not exist');\n }\n\n // Insert - using explicit values\n console.log('[Database] Executing INSERT...');\n await sql`\n INSERT INTO locations (name, longitude, latitude, description, category)\n VALUES (${name}, ${longitude}, ${latitude}, ${description}, ${category})\n `;\n console.log('[Database] INSERT completed');\n\n // Get the ID\n const idResult = await sql`SELECT last_insert_rowid() as id`;\n const newId = idResult[0]?.id;\n console.log('[Database] New ID:', newId);\n\n // Verify it was actually inserted\n const verifyResult = await sql`SELECT * FROM locations WHERE id = ${newId}`;\n console.log('[Database] Verify insert:', verifyResult);\n\n if (verifyResult.length === 0) {\n console.error('[Database] ✗ Insert verification failed - row not found!');\n throw new Error('Insert verification failed');\n }\n\n // Log for sync\n await sql`\n INSERT INTO sync_log (table_name, record_id, action)\n VALUES ('locations', ${newId}, 'INSERT')\n `;\n\n // Broadcast to other tabs\n broadcastChange('locations', 'INSERT', newId);\n\n console.log('[Database] ✓ Location added:', newId);\n return { id: newId };\n\n } catch (error) {\n console.error('[Database] ✗ Failed to add location:', error);\n throw error;\n}\n}\n\n/**\n * Get all locations\n */\nexport async function getLocations(options = {}) {\n const { category = null, limit = 1000 } = options;\n\n try {\n // First check if table exists\n const tableCheck = await sql`SELECT name FROM sqlite_master WHERE type='table' AND name='locations'`;\n console.log('[Database] getLocations - table exists:', tableCheck.length > 0);\n\n if (tableCheck.length === 0) {\n console.warn('[Database] locations table does not exist yet');\n return [];\n }\n\n let results;\n if (category) {\n results = await sql`\n SELECT * FROM locations\n WHERE category = ${category}\n ORDER BY created_at DESC\n LIMIT ${limit}\n `;\n } else {\n results = await sql`\n SELECT * FROM locations\n ORDER BY created_at DESC\n LIMIT ${limit}\n `;\n}\n\n console.log('[Database] getLocations returned', results.length, 'rows');\n return results;\n\n } catch (error) {\n console.error('[Database] getLocations error:', error);\n return [];\n }\n}\n\nexport async function getLocation(id) {\n try {\n const results = await sql`SELECT * FROM locations WHERE id = ${id}`;\n return results[0] || null;\n } catch (error) {\n console.error('[Database] getLocation error:', error);\n return null;\n}\n}\n\n/**\n * Update a location\n */\nexport async function updateLocation(id, updates) {\n const { name, longitude, latitude, description, category } = updates;\n\n try {\n const location = await getLocation(id);\n if (!location) {\n throw new Error(`Location ${id} not found`);\n }\n\n await sql`\n UPDATE locations\n SET\n name = ${name ?? location.name},\n longitude = ${longitude ?? location.longitude},\n latitude = ${latitude ?? location.latitude},\n description = ${description ?? location.description},\n category = ${category ?? location.category},\n updated_at = CURRENT_TIMESTAMP,\n synced = 0\n WHERE id = ${id}\n `;\n\n // Log for sync\n await sql`\n INSERT INTO sync_log (table_name, record_id, action)\n VALUES ('locations', ${id}, 'UPDATE')\n `;\n\n // Broadcast to other tabs\n broadcastChange('locations', 'UPDATE', id);\n console.log('[Database] ✓ Location updated:', id);\n\n } catch (error) {\n console.error('[Database] ✗ updateLocation error:', error);\n throw error;\n}\n}\n\n/**\n * Delete a location\n */\nexport async function deleteLocation(id) {\n try {\n await sql`\n INSERT INTO sync_log (table_name, record_id, action)\n VALUES ('locations', ${id}, 'DELETE')\n `;\n\n await sql`DELETE FROM locations WHERE id = ${id}`;\n\n // Broadcast to other tabs\n broadcastChange('locations', 'DELETE', id);\n console.log('[Database] ✓ Location deleted:', id);\n\n } catch (error) {\n console.error('[Database] ✗ deleteLocation error:', error);\n throw error;\n}\n}\n\n/**\n * Get location count\n */\nexport async function getLocationCount() {\n try {\n const result = await sql`SELECT COUNT(*) as count FROM locations`;\n return result[0]?.count ?? 0;\n } catch (error) {\n console.error('[Database] getLocationCount error:', error);\n return 0;\n}\n}\n\n// ============================================================================\n// Sync Operations\n// ============================================================================\n\n/**\n * Get unsynced changes\n */\nexport async function getUnsyncedChanges() {\n return sql`SELECT * FROM sync_log WHERE synced = 0 ORDER BY timestamp ASC`;\n}\n\n/**\n * Mark changes as synced\n */\nexport async function markSynced(syncLogIds) {\n if (!syncLogIds.length) return;\n for (const id of syncLogIds) {\n await sql`UPDATE sync_log SET synced = 1 WHERE id = ${id}`;\n}\n}\n\n/**\n * Get locations that need syncing\n */\nexport async function getUnsyncedLocations() {\n return sql`SELECT * FROM locations WHERE synced = 0`;\n}\n\n/**\n * Mark locations as synced\n */\nexport async function markLocationsSynced(ids) {\n if (!ids.length) return;\n for (const id of ids) {\n await sql`UPDATE locations SET synced = 1 WHERE id = ${id}`;\n}\n}\n\n// ============================================================================\n// Remote Data Cache\n// ============================================================================\n\n/**\n * Save remote API data to the local cache.\n * Uses INSERT OR REPLACE so the same key is always overwritten.\n *\n * @param {string} key - Unique identifier (e.g. 'district_boundary')\n * @param {Object|Array} data - JSON-serialisable data to cache\n */\nexport async function saveRemoteData(key, data) {\n try {\n const json = JSON.stringify(data);\n await sql`\n INSERT OR REPLACE INTO remote_data (key, data, fetched_at)\n VALUES (${key}, ${json}, CURRENT_TIMESTAMP)\n `;\n console.log('[Database] ✓ Remote data cached:', key);\n } catch (error) {\n console.error('[Database] ✗ Failed to cache remote data:', key, error);\n throw error;\n }\n}\n\n/**\n * Retrieve cached remote data by key.\n *\n * @param {string} key - Unique identifier (e.g. 'district_boundary')\n * @returns {Promise} Parsed data, or null if not cached\n */\nexport async function getRemoteData(key) {\n try {\n const rows = await sql`SELECT data, fetched_at FROM remote_data WHERE key = ${key}`;\n if (rows.length === 0) return null;\n const parsed = JSON.parse(rows[0].data);\n console.log('[Database] ✓ Remote data loaded from cache:', key, '(fetched', rows[0].fetched_at + ')');\n return parsed;\n } catch (error) {\n console.error('[Database] ✗ Failed to read cached remote data:', key, error);\n return null;\n }\n}\n\n// ============================================================================\n// Collector Zones\n// ============================================================================\n\n/**\n * Save collector zones to the local table.\n * Replaces all existing rows.\n *\n * @param {Array} zones - Array of zone objects from the API\n */\nexport async function saveCollectorZones(zones) {\n try {\n await sql`DELETE FROM collector_zones`;\n for (const z of zones) {\n const props = JSON.stringify(z);\n await sql`\n INSERT INTO collector_zones (id, zone_name, geometry_wkt, properties, fetched_at)\n VALUES (${z.colzonenr || z.id}, ${z.colzonename || z.zone_name || ''}, ${z.polygon || z.boundary || ''}, ${props}, CURRENT_TIMESTAMP)\n `;\n }\n console.log('[Database] ✓ Saved', zones.length, 'collector zones');\n } catch (error) {\n console.error('[Database] ✗ Failed to save collector zones:', error);\n throw error;\n }\n}\n\n/**\n * Load all cached collector zones from the local table.\n * @returns {Promise} Array of zone objects, or null if empty\n */\nexport async function getLocalCollectorZones() {\n try {\n const rows = await sql`SELECT properties FROM collector_zones ORDER BY id`;\n if (rows.length === 0) return null;\n return rows.map(r => JSON.parse(r.properties));\n } catch (error) {\n console.error('[Database] ✗ Failed to read local collector zones:', error);\n return null;\n }\n}\n\n// ============================================================================\n// UPN Grid\n// ============================================================================\n\n/**\n * Save the UPN-grid for one district to the local table. Replaces any\n * previously cached grid (even if it was for a different district) — the\n * grid is static per district, so we only ever keep the current district's\n * cells locally.\n *\n * @param {Array} rows - Grid rows from the API\n * (each: { polygon, districtid, upn_prefix })\n * @param {number|string} districtId - The current district id\n */\nexport async function saveUpnGrid(rows, districtId) {\n try {\n await sql`BEGIN`;\n await sql`DELETE FROM upn_grid`;\n let saved = 0;\n for (const r of rows) {\n const wkt = r.polygon || r.geometry_wkt || r.geom || '';\n await sql`\n INSERT INTO upn_grid (districtid, upn_prefix, geometry_wkt, fetched_at)\n VALUES (${numOrNull(districtId)}, ${r.upn_prefix ?? null}, ${wkt}, CURRENT_TIMESTAMP)\n `;\n saved++;\n }\n await sql`COMMIT`;\n console.log('[Database] ✓ Saved', saved, 'UPN-grid cells (district', districtId, ')');\n } catch (error) {\n try { await sql`ROLLBACK`; } catch { /* no active txn */ }\n console.error('[Database] ✗ Failed to save UPN grid:', error);\n throw error;\n }\n}\n\n/**\n * Load the UPN-grid rows that belong to the given district. Returns null\n * if no cells are cached for that district — the caller should then fetch\n * from the API and call saveUpnGrid().\n *\n * @param {number|string} districtId\n * @returns {Promise}\n */\nexport async function getLocalUpnGrid(districtId) {\n try {\n const rows = await sql`\n SELECT id, districtid, upn_prefix, geometry_wkt\n FROM upn_grid\n WHERE districtid = ${numOrNull(districtId)}\n ORDER BY id\n `;\n if (rows.length === 0) return null;\n return rows;\n } catch (error) {\n console.error('[Database] ✗ Failed to read UPN grid:', error);\n return null;\n }\n}\n\n// ============================================================================\n// External imports (staging for shapefile / GeoJSON / KML uploads)\n// See LUPMIS2_Import_Upload_Design.docx §3 & §4.\n// ============================================================================\n\n/** Tiny RFC-4122-ish UUIDv4 (uses crypto.randomUUID when available). */\nfunction uuidv4() {\n if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n return crypto.randomUUID();\n }\n // Fallback for older browsers\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n const r = (Math.random() * 16) | 0;\n return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n });\n}\n\n/**\n * Create a new staging row for an imported dataset. Returns the import_id.\n *\n * @param {Object} opts\n * @param {string} opts.filename — original filename\n * @param {string} [opts.targetType] — initial target ('other' by default)\n * @param {number} [opts.featureCount] — number of features being staged\n * @returns {Promise<{ id: number, client_import_id: string }>}\n */\nexport async function createExternalImport(opts) {\n const { filename, targetType = 'other', featureCount = 0 } = opts;\n const clientImportId = uuidv4();\n try {\n await sql`\n INSERT INTO external_imports\n (filename, target_type, status, feature_count, client_import_id)\n VALUES\n (${filename}, ${targetType},\n ${targetType === 'other' ? 'other' : 'imported'},\n ${featureCount}, ${clientImportId})\n `;\n const idRow = await sql`SELECT last_insert_rowid() AS id`;\n const id = idRow[0]?.id;\n broadcastChange('external_imports', 'INSERT', id);\n return { id, client_import_id: clientImportId };\n } catch (error) {\n console.error('[Database] ✗ Failed to create external import:', error);\n throw error;\n }\n}\n\n/**\n * Bulk-insert staging features for an import. Wraps the inserts in a single\n * transaction (the upload payload is typically dozens to thousands of rows).\n *\n * @param {number} importId\n * @param {Array<{ geometry_wkt: string, properties: Object }>} features\n */\nexport async function addExternalImportFeatures(importId, features) {\n if (!Array.isArray(features) || features.length === 0) return 0;\n try {\n await sql`BEGIN`;\n let inserted = 0;\n for (const f of features) {\n const wkt = f.geometry_wkt || '';\n if (!wkt) continue;\n const propsJson = JSON.stringify(f.properties ?? {});\n const cuuid = f.client_uuid || uuidv4();\n await sql`\n INSERT INTO external_import_features\n (import_id, client_uuid, geometry_wkt, properties_json, upload_status)\n VALUES\n (${importId}, ${cuuid}, ${wkt}, ${propsJson}, 'pending')\n `;\n inserted++;\n }\n await sql`COMMIT`;\n broadcastChange('external_import_features', 'INSERT', importId);\n return inserted;\n } catch (error) {\n try { await sql`ROLLBACK`; } catch { /* no active txn */ }\n console.error('[Database] ✗ Failed to add import features:', error);\n throw error;\n }\n}\n\n/**\n * Update target type + mapping + status for a staged import. Pass any\n * subset of fields. Useful targets:\n * updateExternalImport(id, { targetType: 'parcels', mapping: {...},\n * status: 'mapped' })\n */\nexport async function updateExternalImport(importId, patch = {}) {\n try {\n const cur = await sql`SELECT * FROM external_imports WHERE id = ${importId}`;\n if (cur.length === 0) throw new Error(`Import ${importId} not found`);\n const row = cur[0];\n\n const targetType = patch.targetType ?? row.target_type;\n const mappingJson = patch.mapping !== undefined\n ? (patch.mapping ? JSON.stringify(patch.mapping) : null)\n : row.mapping_json;\n const status = patch.status ?? row.status;\n const errorCount = patch.errorCount ?? row.error_count;\n const lastUploadedAt = patch.lastUploadedAt ?? row.last_uploaded_at;\n\n await sql`\n UPDATE external_imports SET\n target_type = ${targetType},\n mapping_json = ${mappingJson},\n status = ${status},\n error_count = ${errorCount},\n last_uploaded_at = ${lastUploadedAt}\n WHERE id = ${importId}\n `;\n broadcastChange('external_imports', 'UPDATE', importId);\n } catch (error) {\n console.error('[Database] ✗ Failed to update external import:', error);\n throw error;\n }\n}\n\n/** Get an external_imports row by id (parsed mapping_json). */\nexport async function getExternalImport(importId) {\n try {\n const rows = await sql`SELECT * FROM external_imports WHERE id = ${importId}`;\n if (rows.length === 0) return null;\n const row = rows[0];\n return { ...row, mapping: row.mapping_json ? JSON.parse(row.mapping_json) : null };\n } catch (error) {\n console.error('[Database] ✗ Failed to read external import:', error);\n return null;\n }\n}\n\n/** List every external import, newest first. */\nexport async function listExternalImports() {\n try {\n return await sql`SELECT * FROM external_imports ORDER BY id DESC`;\n } catch (error) {\n console.error('[Database] ✗ Failed to list external imports:', error);\n return [];\n }\n}\n\n/** Get the staging features for an import (parsed properties_json). */\nexport async function getExternalImportFeatures(importId) {\n try {\n const rows = await sql`\n SELECT id, client_uuid, geometry_wkt, properties_json,\n upload_status, server_id, error_message\n FROM external_import_features\n WHERE import_id = ${importId}\n ORDER BY id\n `;\n return rows.map((r) => ({\n ...r,\n properties: r.properties_json ? JSON.parse(r.properties_json) : {},\n }));\n } catch (error) {\n console.error('[Database] ✗ Failed to read import features:', error);\n return [];\n }\n}\n\n/**\n * Bulk-rewrite the properties_json of every staged feature for an import.\n * Used after the user confirms a field-mapping: the caller passes a function\n * that receives each row's parsed properties and returns the remapped ones.\n * All updates run in a single transaction.\n *\n * @param {number} importId\n * @param {(props: Object) => Object} remap\n */\nexport async function remapImportedFeatureProperties(importId, remap) {\n try {\n const rows = await sql`\n SELECT id, properties_json\n FROM external_import_features\n WHERE import_id = ${importId}\n `;\n if (rows.length === 0) return 0;\n\n await sql`BEGIN`;\n let n = 0;\n for (const r of rows) {\n const before = r.properties_json ? JSON.parse(r.properties_json) : {};\n const after = remap(before) ?? {};\n await sql`\n UPDATE external_import_features\n SET properties_json = ${JSON.stringify(after)}\n WHERE id = ${r.id}\n `;\n n++;\n }\n await sql`COMMIT`;\n broadcastChange('external_import_features', 'UPDATE', importId);\n return n;\n } catch (error) {\n try { await sql`ROLLBACK`; } catch { /* */ }\n console.error('[Database] ✗ Failed to remap import features:', error);\n throw error;\n }\n}\n\n/**\n * Update a single staged feature's geometry (and properties, optionally).\n * Used when the user modifies an imported feature on the map (the EditBar\n * Modify interaction fires `modifyend`) — we write the new WKT back so the\n * next upload re-sends the corrected geometry.\n *\n * @param {string} clientUuid - the per-feature idempotency key on the OL feature\n * @param {string} geometryWkt - new geometry in EPSG:4326 WKT\n * @param {Object} [properties] - optional new properties (if omitted, leave as-is)\n */\nexport async function updateExternalImportFeatureGeometry(clientUuid, geometryWkt, properties) {\n try {\n if (properties !== undefined) {\n const propsJson = JSON.stringify(properties);\n await sql`\n UPDATE external_import_features\n SET geometry_wkt = ${geometryWkt}, properties_json = ${propsJson}\n WHERE client_uuid = ${clientUuid}\n `;\n } else {\n await sql`\n UPDATE external_import_features\n SET geometry_wkt = ${geometryWkt}\n WHERE client_uuid = ${clientUuid}\n `;\n }\n broadcastChange('external_import_features', 'UPDATE', clientUuid);\n } catch (error) {\n console.error('[Database] ✗ Failed to update import feature geometry:', error);\n throw error;\n }\n}\n\n/**\n * Delete a single staged feature by client_uuid, and decrement the parent\n * import's feature_count. Used when the user deletes an imported feature on\n * the map (EditBar Delete).\n *\n * @param {string} clientUuid\n */\nexport async function deleteExternalImportFeature(clientUuid) {\n try {\n // Look up parent import_id first so we can decrement its count atomically.\n const row = await sql`\n SELECT import_id FROM external_import_features WHERE client_uuid = ${clientUuid}\n `;\n if (row.length === 0) return; // already gone\n const importId = row[0].import_id;\n\n await sql`BEGIN`;\n try {\n await sql`DELETE FROM external_import_features WHERE client_uuid = ${clientUuid}`;\n await sql`\n UPDATE external_imports\n SET feature_count = MAX(0, feature_count - 1)\n WHERE id = ${importId}\n `;\n await sql`COMMIT`;\n } catch (e) {\n try { await sql`ROLLBACK`; } catch { /* */ }\n throw e;\n }\n broadcastChange('external_import_features', 'DELETE', clientUuid);\n broadcastChange('external_imports', 'UPDATE', importId);\n } catch (error) {\n console.error('[Database] ✗ Failed to delete import feature:', error);\n throw error;\n }\n}\n\n/** Delete a staged import (and its features via CASCADE). */\nexport async function deleteExternalImport(importId) {\n try {\n await sql`DELETE FROM external_imports WHERE id = ${importId}`;\n broadcastChange('external_imports', 'DELETE', importId);\n } catch (error) {\n console.error('[Database] ✗ Failed to delete external import:', error);\n throw error;\n }\n}\n\n// ============================================================================\n// Parcels\n// ============================================================================\n\n/** Coerce a value for an INTEGER column; '' / null / undefined / NaN → null. */\nfunction numOrNull(v) {\n if (v === '' || v === null || v === undefined) return null;\n const n = Number(v);\n return Number.isNaN(n) ? null : n;\n}\n\n/**\n * Save parcels to the local table (mirrors spatial.lu_parcels).\n * Replaces all server-cached rows. Each API field maps to its own column.\n * Geometry is taken from the server `geom` field (WKT, EPSG:4326).\n *\n * @param {Array} parcels - Array of parcel objects from the API\n */\nexport async function saveParcels(parcels) {\n try {\n // Wrap the bulk load in a single transaction — with ~25k parcels, per-row\n // auto-commits on OPFS would be prohibitively slow.\n await sql`BEGIN`;\n await sql`DELETE FROM parcels`;\n let saved = 0;\n for (const p of parcels) {\n const id = p.id ?? p.parcelid ?? p.parcel_id ?? null;\n if (id == null) continue; // skip rows without a usable ID\n // Geometry must be a WKT *string* for the geometry_wkt TEXT column.\n // The API sends WKT in `boundary` and a GeoJSON *object* in `geom`, so\n // prefer the string fields and only accept `geom` when it is a string.\n const wkt = p.boundary || p.geometry_wkt || p.polygon || p.wkt\n || (typeof p.geom === 'string' ? p.geom : '');\n await sql`\n INSERT OR REPLACE INTO parcels (\n id, upn, style, landuse, zone_code, zone_name, sector, block, parcel_no,\n prop_no, st_name, prop_add, fac_name, min_height, max_height, eff_date,\n lp_name, locality, mmda, last_update, remarks, geometry_wkt,\n created_at, updated_at, districtid, status, fetched_at\n ) VALUES (\n ${id}, ${p.upn ?? null}, ${numOrNull(p.style)}, ${p.landuse ?? null},\n ${p.zone_code ?? null}, ${p.zone_name ?? null}, ${p.sector ?? null},\n ${p.block ?? null}, ${p.parcel_no ?? null}, ${p.prop_no ?? null},\n ${p.st_name ?? null}, ${p.prop_add ?? null}, ${p.fac_name ?? null},\n ${numOrNull(p.min_height)}, ${numOrNull(p.max_height)}, ${p.eff_date ?? null},\n ${p.lp_name ?? null}, ${p.locality ?? null}, ${p.mmda ?? null},\n ${p.last_update ?? null}, ${p.remarks ?? null}, ${wkt},\n ${p.created_at ?? null}, ${p.updated_at ?? null}, ${numOrNull(p.districtid)},\n 'verified', CURRENT_TIMESTAMP\n )\n `;\n saved++;\n }\n await sql`COMMIT`;\n console.log('[Database] ✓ Saved', saved, 'parcels (from', parcels.length, 'rows,', parcels.length - saved, 'skipped/replaced)');\n } catch (error) {\n try { await sql`ROLLBACK`; } catch { /* no active txn */ }\n console.error('[Database] ✗ Failed to save parcels:', error);\n throw error;\n }\n}\n\n/**\n * Load all cached parcels from the local table.\n * Each row is a plain object keyed by column name (incl. geometry_wkt).\n * @returns {Promise} Array of parcel rows, or null if empty\n */\nexport async function getLocalParcels() {\n try {\n const rows = await sql`SELECT * FROM parcels ORDER BY id`;\n if (rows.length === 0) return null;\n return rows;\n } catch (error) {\n console.error('[Database] ✗ Failed to read local parcels:', error);\n return null;\n }\n}\n\n/**\n * Update a single parcel's attribute columns in the local table.\n * Geometry, id, created_at and status are left unchanged; updated_at is bumped.\n *\n * @param {number|string} parcelId - The parcel id\n * @param {Object} p - Updated attribute values (keys = lu_parcels columns)\n */\nexport async function updateParcel(parcelId, p) {\n try {\n await sql`\n UPDATE parcels SET\n upn = ${p.upn ?? null},\n style = ${numOrNull(p.style)},\n landuse = ${p.landuse ?? null},\n zone_code = ${p.zone_code ?? null},\n zone_name = ${p.zone_name ?? null},\n sector = ${p.sector ?? null},\n block = ${p.block ?? null},\n parcel_no = ${p.parcel_no ?? null},\n prop_no = ${p.prop_no ?? null},\n st_name = ${p.st_name ?? null},\n prop_add = ${p.prop_add ?? null},\n fac_name = ${p.fac_name ?? null},\n min_height = ${numOrNull(p.min_height)},\n max_height = ${numOrNull(p.max_height)},\n eff_date = ${p.eff_date ?? null},\n lp_name = ${p.lp_name ?? null},\n locality = ${p.locality ?? null},\n mmda = ${p.mmda ?? null},\n last_update = ${p.last_update ?? null},\n remarks = ${p.remarks ?? null},\n districtid = ${numOrNull(p.districtid)},\n updated_at = CURRENT_TIMESTAMP\n WHERE id = ${parcelId}\n `;\n console.log('[Database] ✓ Parcel updated:', parcelId);\n broadcastChange('parcels', 'UPDATE', parcelId);\n } catch (error) {\n console.error('[Database] ✗ Failed to update parcel:', parcelId, error);\n throw error;\n }\n}\n\n/**\n * Insert a newly drawn parcel into the local table.\n * The parcel is tagged with status='new' to indicate it needs verification.\n *\n * @param {string} geometryWkt - WKT geometry string (EPSG:4326)\n * @param {Object} p - Attribute values from the form (keys = lu_parcels columns)\n * @returns {Promise<{id: number}>} The new row id\n */\nexport async function insertNewParcel(geometryWkt, p = {}) {\n try {\n await sql`\n INSERT INTO parcels (\n id, upn, style, landuse, zone_code, zone_name, sector, block, parcel_no,\n prop_no, st_name, prop_add, fac_name, min_height, max_height, eff_date,\n lp_name, locality, mmda, last_update, remarks, geometry_wkt,\n created_at, updated_at, districtid, status, fetched_at\n ) VALUES (\n NULL, ${p.upn ?? null}, ${numOrNull(p.style)}, ${p.landuse ?? null},\n ${p.zone_code ?? null}, ${p.zone_name ?? null}, ${p.sector ?? null},\n ${p.block ?? null}, ${p.parcel_no ?? null}, ${p.prop_no ?? null},\n ${p.st_name ?? null}, ${p.prop_add ?? null}, ${p.fac_name ?? null},\n ${numOrNull(p.min_height)}, ${numOrNull(p.max_height)}, ${p.eff_date ?? null},\n ${p.lp_name ?? null}, ${p.locality ?? null}, ${p.mmda ?? null},\n ${p.last_update ?? null}, ${p.remarks ?? null}, ${geometryWkt},\n CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, ${numOrNull(p.districtid)},\n 'new', CURRENT_TIMESTAMP\n )\n `;\n const idResult = await sql`SELECT last_insert_rowid() as id`;\n const newId = idResult[0]?.id;\n console.log('[Database] ✓ New parcel inserted:', newId, '(status: new)');\n broadcastChange('parcels', 'INSERT', newId);\n return { id: newId };\n } catch (error) {\n console.error('[Database] ✗ Failed to insert new parcel:', error);\n throw error;\n }\n}\n\n// ============================================================================\n// Building Footprints\n// ============================================================================\n\n/**\n * Save building footprints to the local table.\n * Replaces all existing rows.\n *\n * @param {Array} footprints - Array of footprint objects from the API\n */\nexport async function saveBuildingFootprints(footprints) {\n try {\n // Log first entry's keys and value types to help debug field names\n if (footprints.length > 0) {\n const first = footprints[0];\n const types = {};\n for (const [k, v] of Object.entries(first)) {\n types[k] = v === null ? 'null' : typeof v;\n }\n console.log('[Database] First footprint field types:', types);\n }\n\n await sql`DELETE FROM building_footprints`;\n for (const f of footprints) {\n const props = JSON.stringify(f);\n\n // Geometry may arrive as a string (WKT) or an object (GeoJSON) —\n // coerce to a string so SQLocal can bind it.\n let rawWkt = f.polygon || f.boundary || f.geom || f.wkt || f.footprint || '';\n const wkt = typeof rawWkt === 'object' ? JSON.stringify(rawWkt) : String(rawWkt);\n\n // ID must be a primitive (number or null)\n let rawId = f.id || f.footprint_id || f.building_id || null;\n const id = (rawId !== null && typeof rawId === 'object') ? null : rawId;\n\n await sql`\n INSERT INTO building_footprints (id, geometry_wkt, properties, fetched_at)\n VALUES (${id}, ${wkt}, ${props}, CURRENT_TIMESTAMP)\n `;\n }\n console.log('[Database] ✓ Saved', footprints.length, 'building footprints');\n } catch (error) {\n console.error('[Database] ✗ Failed to save building footprints:', error);\n throw error;\n }\n}\n\n/**\n * Load all cached building footprints from the local table.\n * @returns {Promise} Array of footprint objects, or null if empty\n */\nexport async function getLocalBuildingFootprints() {\n try {\n const rows = await sql`SELECT properties FROM building_footprints ORDER BY id`;\n if (rows.length === 0) return null;\n return rows.map(r => JSON.parse(r.properties));\n } catch (error) {\n console.error('[Database] ✗ Failed to read local building footprints:', error);\n return null;\n }\n}\n\n/**\n * Save OSM roads to the local SQLite table.\n * Replaces all existing rows.\n *\n * @param {Array} roads - Array of road objects from the API\n */\nexport async function saveOSMRoads(roads) {\n try {\n if (roads.length > 0) {\n const first = roads[0];\n const types = {};\n for (const [k, v] of Object.entries(first)) {\n types[k] = v === null ? 'null' : typeof v;\n }\n console.log('[Database] First road field types:', types);\n }\n\n await sql`DELETE FROM osm_roads`;\n for (const r of roads) {\n const props = JSON.stringify(r);\n\n // Geometry — may arrive as WKT string or GeoJSON object\n let rawWkt = r.geom || r.geometry || r.wkt || r.road || r.line || '';\n const wkt = typeof rawWkt === 'object' ? JSON.stringify(rawWkt) : String(rawWkt);\n\n // osm_id must be a primitive — fall back to null if missing or malformed\n let rawId = r.osm_id ?? r.osmid ?? r.id ?? null;\n const osmId = (rawId !== null && typeof rawId === 'object') ? null : rawId;\n\n await sql`\n INSERT OR REPLACE INTO osm_roads (osm_id, geometry_wkt, properties, fetched_at)\n VALUES (${osmId}, ${wkt}, ${props}, CURRENT_TIMESTAMP)\n `;\n }\n console.log('[Database] ✓ Saved', roads.length, 'OSM roads');\n } catch (error) {\n console.error('[Database] ✗ Failed to save OSM roads:', error);\n throw error;\n }\n}\n\n/**\n * Load all cached OSM roads from the local table.\n * @returns {Promise} Array of road objects, or null if empty\n */\nexport async function getLocalOSMRoads() {\n try {\n const rows = await sql`SELECT properties FROM osm_roads ORDER BY osm_id`;\n if (rows.length === 0) return null;\n return rows.map(r => JSON.parse(r.properties));\n } catch (error) {\n console.error('[Database] ✗ Failed to read local OSM roads:', error);\n return null;\n }\n}\n\n// ============================================================================\n// Export / Import\n// ============================================================================\n\n/**\n * Export database for backup\n */\nexport async function exportDatabase() {\n return db.getDatabaseFile();\n}\n\n/**\n * Import database from backup\n */\nexport async function importDatabase(data) {\n await db.overwriteDatabaseFile(data);\n broadcastChange('*', 'IMPORT', null);\n}\n\n/**\n * Download database as file\n */\nexport async function downloadDatabase(filename = 'lupmis-backup.sqlite3') {\n const data = await exportDatabase();\n const blob = new Blob([data], { type: 'application/x-sqlite3' });\n const url = URL.createObjectURL(blob);\n\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.click();\n\n URL.revokeObjectURL(url);\n}\n\n// Export to GeoJSON\nexport async function exportToGeoJSON() {\n const locations = await getLocations();\n\n return {\n type: 'FeatureCollection',\n features: locations.map((loc) => ({\n type: 'Feature',\n properties: {\n id: loc.id,\n name: loc.name,\n category: loc.category,\n notes: loc.notes,\n created_at: loc.created_at,\n },\n geometry: {\n type: 'Point',\n coordinates: [loc.lon, loc.lat],\n },\n })),\n };\n}\n\n// ============================================================================\n// Utility & Debug\n// ============================================================================\n\n/**\n * Get database status\n */\nexport async function getDatabaseStatus() {\n try {\n const tables = await sql`\n SELECT name FROM sqlite_master\n WHERE type='table' AND name NOT LIKE 'sqlite_%'\n ORDER BY name\n `;\n\n const locationCount = await getLocationCount();\n\n return {\n ready: isReady,\n databasePath: DATABASE_PATH,\n tables: tables.map(t => t.name),\n locationCount\n };\n } catch (error) {\n return {\n ready: false,\n error: error.message\n };\n}\n}\n\n// ============================================================================\n// Cached-Layer Management\n// ============================================================================\n\n/**\n * Tables that hold data fetched from the server.\n *\n * Clearing these is safe — the corresponding loaders (loadParcels,\n * loadBuildingFootprints, loadOSMRoads, loadCollectorZones, …) will re-fetch\n * the data from the API on the next app start.\n *\n * NOT included: user-created tables (`locations`, `pending_changes`) — those\n * hold local work that must not be auto-deleted.\n */\nexport const CACHED_LAYER_TABLES = Object.freeze([\n 'parcels',\n 'building_footprints',\n 'osm_roads',\n 'collector_zones',\n 'upn_grid',\n 'remote_data',\n]);\n\n/**\n * Check whether a table name is in the cleared-layer allow-list.\n * @param {string} tableName\n * @returns {boolean}\n */\nexport function isCachedLayerTable(tableName) {\n return CACHED_LAYER_TABLES.includes(tableName);\n}\n\n/**\n * Delete all rows from a single cached-layer table.\n * Rejects unknown table names so this can't be abused to drop user data.\n *\n * @param {string} tableName - One of CACHED_LAYER_TABLES\n * @returns {Promise} Number of rows that were in the table before deletion\n */\nexport async function clearTable(tableName) {\n if (!isCachedLayerTable(tableName)) {\n throw new Error(`Refusing to clear \"${tableName}\" — not a known cached-layer table`);\n }\n\n const before = await sql(`SELECT COUNT(*) AS n FROM \"${tableName}\"`);\n const count = before[0]?.n ?? 0;\n\n await sql(`DELETE FROM \"${tableName}\"`);\n console.log(`[Database] ✓ Cleared \"${tableName}\" (${count} rows)`);\n broadcastChange(tableName, 'CLEAR', null);\n return count;\n}\n\n/**\n * Clear every cached-layer table (whatever exists in this database).\n * Tables that don't exist yet are skipped silently.\n *\n * @returns {Promise<{ table: string, count: number }[]>} per-table report\n */\nexport async function clearAllCachedLayers() {\n const existing = await sql`\n SELECT name FROM sqlite_master\n WHERE type='table' AND name IN (\n 'parcels', 'building_footprints', 'osm_roads', 'collector_zones', 'upn_grid', 'remote_data'\n )\n `;\n const existingNames = new Set(existing.map((r) => r.name));\n\n const results = [];\n for (const tableName of CACHED_LAYER_TABLES) {\n if (!existingNames.has(tableName)) continue;\n try {\n const count = await clearTable(tableName);\n results.push({ table: tableName, count });\n } catch (err) {\n console.error(`[Database] Failed to clear ${tableName}:`, err);\n results.push({ table: tableName, count: 0, error: err.message });\n }\n }\n\n const total = results.reduce((s, r) => s + r.count, 0);\n console.log(`[Database] ✓ Cleared all cached layers: ${total} rows across ${results.length} tables`);\n return results;\n}\n\n/**\n * Get a list of all tables with their row counts.\n * @returns {Promise>}\n */\nexport async function getTableStats() {\n const tables = await sql`\n SELECT name FROM sqlite_master\n WHERE type='table' AND name NOT LIKE 'sqlite_%'\n ORDER BY name\n `;\n\n if (tables.length === 0) return [];\n\n // Build a UNION ALL query — table names come from sqlite_master so safe to embed.\n // sql() accepts a plain string as first argument (not only tagged template).\n const query = tables\n .map(t => `SELECT '${t.name}' AS name, COUNT(*) AS count FROM \"${t.name}\"`)\n .join(' UNION ALL ');\n\n return sql(query);\n}\n\n/**\n * Get all rows from a given table (max 200 rows for safety).\n * Table name is validated against sqlite_master before querying.\n * @param {string} tableName - Name of the table to read\n * @param {number} [limit=200] - Max rows to return\n * @returns {Promise<{columns: string[], rows: Object[]}>}\n */\nexport async function getTableContent(tableName, limit = 200) {\n // Validate that the table actually exists (prevent injection)\n const valid = await sql`\n SELECT name FROM sqlite_master\n WHERE type='table' AND name = ${tableName}\n `;\n if (valid.length === 0) {\n throw new Error(`Table \"${tableName}\" does not exist`);\n }\n\n const rows = await sql(`SELECT * FROM \"${tableName}\" LIMIT ${limit}`);\n\n // Extract column names from the first row (or return empty)\n const columns = rows.length > 0 ? Object.keys(rows[0]) : [];\n\n return { columns, rows };\n}\n\n// Debug function - call from console to test\nexport async function testDatabase() {\n console.log('=== DATABASE TEST ===');\n\n try {\n // 1. Check connection\n const version = await sql`SELECT sqlite_version() as v`;\n console.log('1. SQLite version:', version[0].v);\n\n // 2. Check tables\n const tables = await sql`SELECT name FROM sqlite_master WHERE type='table'`;\n console.log('2. Tables:', tables.map(t => t.name));\n\n // 3. Try to insert a test row\n console.log('3. Inserting test row...');\n await sql`INSERT INTO locations (name, longitude, latitude, category) VALUES ('TEST', -1.0, 7.0, 'test')`;\n\n // 4. Read it back\n const rows = await sql`SELECT * FROM locations WHERE name = 'TEST'`;\n console.log('4. Test row:', rows);\n\n // 5. Count all rows\n const count = await sql`SELECT COUNT(*) as c FROM locations`;\n console.log('5. Total rows:', count[0].c);\n\n // 6. Delete test row\n await sql`DELETE FROM locations WHERE name = 'TEST'`;\n console.log('6. Test row deleted');\n\n console.log('=== TEST PASSED ===');\n return true;\n } catch (error) {\n console.error('=== TEST FAILED ===', error);\n return false;\n}\n}\n\n// Expose to window for debugging\nif (typeof window !== 'undefined') {\n window.testDatabase = testDatabase;\n window.dbStatus = getDatabaseStatus;\n}\n\nexport async function closeDatabase() {\n channel.close();\n if (db.destroy) {\n await db.destroy();\n}\n}\n\n// ============================================================================\n// GPS Trails (storage adapter for the reusable GeoTracker module)\n// ============================================================================\n//\n// These functions implement the GeoTracker \"storage adapter\" contract using\n// SQLocal. They are intentionally generic (no map / UI coupling) so the same\n// schema + helpers can be lifted into another app alongside src/geotracker/.\n\n/**\n * Create a new trail row (status='recording') and return its local id.\n * @param {object} meta { uuid, name, startedAt, districtId }\n * @returns {Promise} local trail id\n */\nexport async function createGpsTrail(meta) {\n const { uuid, name = null, startedAt, districtId = null } = meta;\n await sql`\n INSERT INTO gps_trails (client_uuid, name, district_id, started_at, status)\n VALUES (${uuid}, ${name}, ${districtId}, ${startedAt}, 'recording')\n `;\n const idResult = await sql`SELECT last_insert_rowid() as id`;\n const id = idResult[0]?.id;\n broadcastChange('gps_trails', 'insert', id);\n return id;\n}\n\n/**\n * Append one recorded point to a trail.\n * @param {number} trailId\n * @param {object} point normalized fix + { seq }\n */\nexport async function addGpsTrailPoint(trailId, point) {\n const {\n seq, lon, lat,\n altitude = null, accuracy = null, altitudeAccuracy = null,\n heading = null, speed = null, satellites = null, timestamp,\n } = point;\n const recordedAt = typeof timestamp === 'number' ? new Date(timestamp).toISOString() : (timestamp || new Date().toISOString());\n await sql`\n INSERT INTO gps_trail_points\n (trail_id, seq, longitude, latitude, altitude, accuracy, altitude_accuracy, heading, speed, satellites, recorded_at)\n VALUES\n (${trailId}, ${seq}, ${lon}, ${lat}, ${altitude}, ${accuracy}, ${altitudeAccuracy}, ${heading}, ${speed}, ${satellites}, ${recordedAt})\n `;\n}\n\n/**\n * Finalise a trail: mark completed and store the summary.\n * @param {number} trailId\n * @param {object} summary { endedAt, pointCount, distanceM }\n */\nexport async function finishGpsTrail(trailId, summary) {\n const { endedAt, pointCount = 0, distanceM = 0 } = summary;\n await sql`\n UPDATE gps_trails\n SET ended_at = ${endedAt}, point_count = ${pointCount}, distance_m = ${distanceM}, status = 'completed'\n WHERE id = ${trailId}\n `;\n broadcastChange('gps_trails', 'update', trailId);\n}\n\n/**\n * Trails that are completed but not yet pushed to the server.\n * @returns {Promise}\n */\nexport async function getUnsyncedGpsTrails() {\n return sql`SELECT * FROM gps_trails WHERE synced = 0 AND status = 'completed' ORDER BY started_at ASC`;\n}\n\n/**\n * All points of a trail, in recorded order.\n * @param {number} trailId\n * @returns {Promise}\n */\nexport async function getGpsTrailPoints(trailId) {\n return sql`SELECT * FROM gps_trail_points WHERE trail_id = ${trailId} ORDER BY seq ASC`;\n}\n\n/**\n * Mark a trail as synced and record the server-assigned id.\n * @param {number} trailId\n * @param {string|number|null} remoteId\n */\nexport async function markGpsTrailSynced(trailId, remoteId = null) {\n await sql`UPDATE gps_trails SET synced = 1, remote_id = ${remoteId} WHERE id = ${trailId}`;\n broadcastChange('gps_trails', 'update', trailId);\n}\n\n/**\n * List trails (most recent first) for a history/list UI.\n * @returns {Promise}\n */\nexport async function getGpsTrails() {\n return sql`SELECT * FROM gps_trails ORDER BY started_at DESC`;\n}\n\n/**\n * Delete a trail and all its points.\n * @param {number} trailId\n */\nexport async function deleteGpsTrail(trailId) {\n await sql`DELETE FROM gps_trail_points WHERE trail_id = ${trailId}`;\n await sql`DELETE FROM gps_trails WHERE id = ${trailId}`;\n broadcastChange('gps_trails', 'delete', trailId);\n}\n\nexport default {\n sql,\n dbReady,\n initSchema,\n addLocation,\n getLocations,\n getLocation,\n updateLocation,\n deleteLocation,\n getLocationCount,\n getUnsyncedChanges,\n getUnsyncedLocations,\n markSynced,\n markLocationsSynced,\n saveRemoteData,\n getRemoteData,\n saveCollectorZones,\n getLocalCollectorZones,\n saveUpnGrid,\n getLocalUpnGrid,\n createExternalImport,\n addExternalImportFeatures,\n updateExternalImport,\n getExternalImport,\n listExternalImports,\n getExternalImportFeatures,\n remapImportedFeatureProperties,\n updateExternalImportFeatureGeometry,\n deleteExternalImportFeature,\n deleteExternalImport,\n saveParcels,\n getLocalParcels,\n updateParcel,\n insertNewParcel,\n saveBuildingFootprints,\n getLocalBuildingFootprints,\n saveOSMRoads,\n getLocalOSMRoads,\n createGpsTrail,\n addGpsTrailPoint,\n finishGpsTrail,\n getUnsyncedGpsTrails,\n getGpsTrailPoints,\n markGpsTrailSynced,\n getGpsTrails,\n deleteGpsTrail,\n CACHED_LAYER_TABLES,\n isCachedLayerTable,\n clearTable,\n clearAllCachedLayers,\n exportDatabase,\n exportToGeoJSON,\n importDatabase,\n downloadDatabase,\n getDatabaseStatus,\n getTableStats,\n getTableContent,\n testDatabase,\n onDatabaseChange,\n closeDatabase\n};\n","/**\n * Measurement unit formatting — Metric / Imperial.\n *\n * The active system is persisted in localStorage('measurement-system').\n * Every formatter reads the current setting so the UI updates immediately\n * after the user flips the toggle.\n *\n * All input values are in metres (length) or square metres (area).\n */\n\n// ── Conversion constants ────────────────────────────────────────────────────\nconst M_TO_FT = 3.28084;\nconst M_TO_MI = 0.000621371;\nconst SQM_TO_SQFT = 10.7639;\nconst SQM_TO_ACRE = 0.000247105;\nconst SQM_TO_SQMI = 3.861e-7;\n\n// ── System accessor ─────────────────────────────────────────────────────────\n\n/** @returns {'metric'|'imperial'} */\nexport function getSystem() {\n return localStorage.getItem('measurement-system') || 'metric';\n}\n\n// ── Length / distance ───────────────────────────────────────────────────────\n\n/**\n * Format a length value (in metres) for display.\n * Metric: m / km\n * Imperial: ft / mi\n */\nexport function formatLength(metres) {\n if (getSystem() === 'imperial') {\n const ft = metres * M_TO_FT;\n if (ft >= 5280) {\n return (Math.round(metres * M_TO_MI * 100) / 100) + ' mi';\n }\n return Math.round(ft) + ' ft';\n }\n // metric\n if (metres > 1000) {\n return (Math.round(metres / 1000 * 100) / 100) + ' km';\n }\n return (Math.round(metres * 100) / 100) + ' m';\n}\n\n/**\n * Format a length with both large and small units (for info popups).\n * Metric: \"1.23 km (1,230 m)\" or \"456 m\"\n * Imperial: \"1.23 mi (6,494 ft)\" or \"456 ft\"\n */\nexport function formatLengthFull(metres) {\n if (getSystem() === 'imperial') {\n const ft = metres * M_TO_FT;\n const mi = metres * M_TO_MI;\n if (ft >= 5280) {\n return `${mi.toFixed(2)} mi (${ft.toLocaleString('en', { maximumFractionDigits: 0 })} ft)`;\n }\n return `${ft.toLocaleString('en', { maximumFractionDigits: 1 })} ft`;\n }\n if (metres >= 1000) {\n return `${(metres / 1000).toFixed(2)} km (${metres.toLocaleString('en', { maximumFractionDigits: 0 })} m)`;\n }\n return `${metres.toLocaleString('en', { maximumFractionDigits: 1 })} m`;\n}\n\n// ── Area ────────────────────────────────────────────────────────────────────\n\n/**\n * Format an area value (in square metres) for display.\n * Metric: m² / km²\n * Imperial: ft² / acres / mi²\n */\nexport function formatArea(sqMetres) {\n if (getSystem() === 'imperial') {\n const acres = sqMetres * SQM_TO_ACRE;\n if (acres >= 640) {\n return (Math.round(sqMetres * SQM_TO_SQMI * 100) / 100) + ' mi²';\n }\n if (acres >= 1) {\n return (Math.round(acres * 100) / 100) + ' acres';\n }\n return Math.round(sqMetres * SQM_TO_SQFT).toLocaleString('en') + ' ft²';\n }\n // metric\n if (sqMetres > 1000000) {\n return (Math.round(sqMetres / 1000000 * 100) / 100) + ' km²';\n }\n return (Math.round(sqMetres * 100) / 100) + ' m²';\n}\n\n/**\n * Format an area with both large and small units (for info popups).\n * Metric: \"1.23 km² (1,230,000 m²)\" or \"456 m²\"\n * Imperial: \"1.23 mi² (787 acres)\" or \"2.5 acres\" or \"456 ft²\"\n */\nexport function formatAreaFull(sqMetres) {\n if (getSystem() === 'imperial') {\n const sqft = sqMetres * SQM_TO_SQFT;\n const acres = sqMetres * SQM_TO_ACRE;\n const sqmi = sqMetres * SQM_TO_SQMI;\n if (acres >= 640) {\n return `${sqmi.toFixed(2)} mi² (${acres.toLocaleString('en', { maximumFractionDigits: 0 })} acres)`;\n }\n if (acres >= 1) {\n return `${acres.toLocaleString('en', { maximumFractionDigits: 1 })} acres (${sqft.toLocaleString('en', { maximumFractionDigits: 0 })} ft²)`;\n }\n return `${sqft.toLocaleString('en', { maximumFractionDigits: 0 })} ft²`;\n }\n if (sqMetres > 1000000) {\n return `${(sqMetres / 1000000).toFixed(2)} km² (${sqMetres.toLocaleString('en', { maximumFractionDigits: 0 })} m²)`;\n }\n return `${sqMetres.toLocaleString('en', { maximumFractionDigits: 0 })} m²`;\n}\n\n// ── Circle helper ───────────────────────────────────────────────────────────\n\n/**\n * Format the area of a circle given its radius (in metres).\n */\nexport function formatCircleExtent(radiusMetres) {\n return formatArea(Math.PI * radiusMetres * radiusMetres);\n}\n","/**\n * Pure geometry functions for splitting a polygon by a line.\n *\n * No OpenLayers dependency — operates on raw coordinate arrays.\n */\n\n/**\n * Compute the intersection point of two 2D line segments.\n * Segment A: p1→p2, Segment B: p3→p4.\n *\n * @param {number[]} p1\n * @param {number[]} p2\n * @param {number[]} p3\n * @param {number[]} p4\n * @param {number} [eps=1e-10] tolerance for parallel check\n * @returns {{ point: number[], t: number, u: number } | null}\n * t = parametric position on segment A (0–1),\n * u = parametric position on segment B (0–1)\n */\nfunction segmentIntersection(p1, p2, p3, p4, eps = 1e-10) {\n const dx1 = p2[0] - p1[0];\n const dy1 = p2[1] - p1[1];\n const dx2 = p4[0] - p3[0];\n const dy2 = p4[1] - p3[1];\n\n const denom = dx1 * dy2 - dy1 * dx2;\n if (Math.abs(denom) < eps) return null; // parallel / collinear\n\n const dx3 = p3[0] - p1[0];\n const dy3 = p3[1] - p1[1];\n\n const t = (dx3 * dy2 - dy3 * dx2) / denom;\n const u = (dx3 * dy1 - dy3 * dx1) / denom;\n\n if (t < -eps || t > 1 + eps || u < -eps || u > 1 + eps) return null;\n\n return {\n point: [p1[0] + t * dx1, p1[1] + t * dy1],\n t: Math.max(0, Math.min(1, t)),\n u: Math.max(0, Math.min(1, u)),\n };\n}\n\n/**\n * Signed area of a ring (shoelace formula).\n * Positive = counter-clockwise, negative = clockwise.\n */\nfunction signedArea(ring) {\n let area = 0;\n for (let i = 0, n = ring.length; i < n - 1; i++) {\n area += (ring[i][0] * ring[i + 1][1]) - (ring[i + 1][0] * ring[i][1]);\n }\n return area / 2;\n}\n\n/**\n * Test whether a point is inside a ring (ray-casting algorithm).\n */\nfunction pointInRing(pt, ring) {\n let inside = false;\n for (let i = 0, j = ring.length - 2; i < ring.length - 1; j = i++) {\n const xi = ring[i][0], yi = ring[i][1];\n const xj = ring[j][0], yj = ring[j][1];\n if (((yi > pt[1]) !== (yj > pt[1])) &&\n (pt[0] < (xj - xi) * (pt[1] - yi) / (yj - yi) + xi)) {\n inside = !inside;\n }\n }\n return inside;\n}\n\n/**\n * Squared distance between two points.\n */\nfunction dist2(a, b) {\n return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2;\n}\n\n/**\n * Find all intersection points between a cutting line and a polygon ring.\n *\n * @param {number[][]} ring Closed ring coordinates (first === last)\n * @param {number[][]} line LineString coordinates (2+ points)\n * @returns {Array<{ point: number[], ringSegIdx: number, ringT: number, lineSegIdx: number, lineT: number }>}\n */\nfunction findIntersections(ring, line) {\n const hits = [];\n const eps = 1e-10;\n\n for (let li = 0; li < line.length - 1; li++) {\n for (let ri = 0; ri < ring.length - 1; ri++) {\n const ix = segmentIntersection(ring[ri], ring[ri + 1], line[li], line[li + 1], eps);\n if (!ix) continue;\n\n // Skip if intersection is at the very start of the ring segment\n // but was already caught as the end of the previous segment\n const pt = ix.point;\n\n // Avoid duplicate hits at shared vertices\n let isDup = false;\n for (const h of hits) {\n if (dist2(h.point, pt) < 1e-6) {\n isDup = true;\n break;\n }\n }\n if (isDup) continue;\n\n hits.push({\n point: pt,\n ringSegIdx: ri,\n ringT: ix.t,\n lineSegIdx: li,\n lineT: ix.u,\n });\n }\n }\n\n // Sort by position along the cutting line\n hits.sort((a, b) => {\n if (a.lineSegIdx !== b.lineSegIdx) return a.lineSegIdx - b.lineSegIdx;\n return a.lineT - b.lineT;\n });\n\n return hits;\n}\n\n/**\n * Insert intersection points into a ring, returning the expanded ring\n * and the new indices of the inserted points.\n *\n * @param {number[][]} ring Closed ring (first === last)\n * @param {Array<{ point: number[], ringSegIdx: number, ringT: number }>} hits\n * Sorted by ringSegIdx then ringT.\n * @returns {{ ring: number[][], indices: number[] }}\n */\nfunction insertPointsIntoRing(ring, hits) {\n // Sort hits by ring position (segment index, then parametric t) so\n // we can insert from back to front without shifting earlier indices.\n const sorted = hits.map((h, i) => ({ ...h, origOrder: i }));\n sorted.sort((a, b) => {\n if (a.ringSegIdx !== b.ringSegIdx) return a.ringSegIdx - b.ringSegIdx;\n return a.ringT - b.ringT;\n });\n\n const expanded = ring.slice(); // copy\n const indices = new Array(sorted.length);\n\n // Insert from the end so that earlier insertions don't shift later indices.\n for (let k = sorted.length - 1; k >= 0; k--) {\n const h = sorted[k];\n const insertIdx = h.ringSegIdx + 1;\n\n // Check if this point is essentially identical to an existing vertex\n const snapDist = 1e-6;\n if (dist2(h.point, expanded[h.ringSegIdx]) < snapDist) {\n indices[h.origOrder] = h.ringSegIdx;\n continue;\n }\n if (dist2(h.point, expanded[h.ringSegIdx + 1]) < snapDist) {\n indices[h.origOrder] = h.ringSegIdx + 1;\n continue;\n }\n\n // Insert the new point\n expanded.splice(insertIdx, 0, h.point);\n indices[h.origOrder] = insertIdx;\n\n // Adjust indices for all previously recorded insertions\n // that reference a position >= insertIdx\n for (let j = k + 1; j < sorted.length; j++) {\n if (indices[sorted[j].origOrder] >= insertIdx) {\n indices[sorted[j].origOrder]++;\n }\n }\n }\n\n return { ring: expanded, indices };\n}\n\n/**\n * Extract a slice of a ring from index i0 to i1 (going forward, wrapping).\n * Both endpoints are included.\n *\n * @param {number[][]} ring Closed ring (first === last); length includes closing vertex\n * @param {number} i0 Start index (inclusive)\n * @param {number} i1 End index (inclusive)\n * @returns {number[][]}\n */\nfunction ringSlice(ring, i0, i1) {\n const n = ring.length - 1; // number of unique vertices (ring is closed)\n // Normalise indices into the [0, n-1] range\n const start = ((i0 % n) + n) % n;\n const end = ((i1 % n) + n) % n;\n const result = [];\n let idx = start;\n while (true) {\n result.push(ring[idx]);\n if (idx === end) break;\n idx = (idx + 1) % n;\n }\n return result;\n}\n\n/**\n * Extract the cutting line segment between two intersection points.\n *\n * @param {number[][]} line Full cutting line coordinates\n * @param {{ point: number[], lineSegIdx: number, lineT: number }} hit0\n * @param {{ point: number[], lineSegIdx: number, lineT: number }} hit1\n * @returns {number[][]} Coordinates from hit0.point to hit1.point along the line\n */\nfunction cuttingLineSlice(line, hit0, hit1) {\n const result = [hit0.point];\n\n // Include all intermediate line vertices between the two hit segments\n const startSeg = hit0.lineSegIdx;\n const endSeg = hit1.lineSegIdx;\n\n for (let i = startSeg + 1; i <= endSeg; i++) {\n result.push(line[i]);\n }\n\n // Add the end intersection point if it's not the same as the last vertex\n if (dist2(result[result.length - 1], hit1.point) > 1e-10) {\n result.push(hit1.point);\n }\n\n return result;\n}\n\n/**\n * Ensure a ring has the desired winding order.\n * @param {number[][]} ring Closed ring\n * @param {boolean} ccw true for counter-clockwise\n * @returns {number[][]}\n */\nfunction ensureWinding(ring, ccw) {\n const area = signedArea(ring);\n if ((ccw && area < 0) || (!ccw && area > 0)) {\n return ring.slice().reverse();\n }\n return ring;\n}\n\n/**\n * Close a ring (ensure first === last).\n */\nfunction closeRing(coords) {\n if (coords.length < 2) return coords;\n const first = coords[0];\n const last = coords[coords.length - 1];\n if (dist2(first, last) > 1e-10) {\n return [...coords, first.slice()];\n }\n return coords;\n}\n\n/**\n * Extend a cutting line so that both endpoints lie outside the polygon ring.\n * If an endpoint is inside, we extend the first/last segment outward past the\n * bounding box diagonal so it definitely exits.\n *\n * @param {number[][]} line Cutting line coordinates\n * @param {number[][]} ring Closed polygon ring\n * @returns {number[][]} Extended line (may be the original if already outside)\n */\nfunction extendLineOutsideRing(line, ring) {\n // Compute bounding-box diagonal for a generous extension distance\n let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n for (const pt of ring) {\n if (pt[0] < minX) minX = pt[0];\n if (pt[1] < minY) minY = pt[1];\n if (pt[0] > maxX) maxX = pt[0];\n if (pt[1] > maxY) maxY = pt[1];\n }\n const diag = Math.sqrt((maxX - minX) ** 2 + (maxY - minY) ** 2) || 1;\n\n const result = line.slice();\n\n // Extend start if inside\n if (pointInRing(result[0], ring)) {\n const p0 = result[0];\n const p1 = result[1];\n const dx = p0[0] - p1[0];\n const dy = p0[1] - p1[1];\n const len = Math.sqrt(dx * dx + dy * dy) || 1;\n const scale = diag * 2 / len;\n result[0] = [p0[0] + dx * scale, p0[1] + dy * scale];\n }\n\n // Extend end if inside\n const last = result.length - 1;\n if (pointInRing(result[last], ring)) {\n const pN = result[last];\n const pN1 = result[last - 1];\n const dx = pN[0] - pN1[0];\n const dy = pN[1] - pN1[1];\n const len = Math.sqrt(dx * dx + dy * dy) || 1;\n const scale = diag * 2 / len;\n result[last] = [pN[0] + dx * scale, pN[1] + dy * scale];\n }\n\n return result;\n}\n\n/**\n * Split a polygon by a cutting line.\n *\n * The cutting line can start or end inside the polygon — the algorithm will\n * automatically extend it outward so it crosses the boundary at exactly 2\n * points. Multi-vertex cutting lines (with corners or approximated arcs)\n * are fully supported.\n *\n * @param {number[][][]} polygonCoords Polygon coordinates:\n * [exteriorRing, ...holeRings] where each ring is closed (first === last)\n * @param {number[][]} lineCoords Cutting line coordinates (2+ points)\n * @returns {number[][][][] | null} Two polygon coordinate arrays, or null if split failed\n */\nexport function splitPolygonByLine(polygonCoords, lineCoords) {\n const exteriorRing = polygonCoords[0];\n const holes = polygonCoords.slice(1);\n\n // Extend the cutting line if its endpoints are inside the polygon\n const extendedLine = extendLineOutsideRing(lineCoords, exteriorRing);\n\n // 1. Find intersections between cutting line and exterior ring\n const hits = findIntersections(exteriorRing, extendedLine);\n\n // We need exactly 2 intersection points for a simple split\n if (hits.length !== 2) {\n console.warn(`[polygonSplit] Expected 2 intersections, got ${hits.length}`);\n return null;\n }\n\n const [hit0, hit1] = hits;\n\n // 2. Insert intersection points into the ring\n const { ring: expandedRing, indices } = insertPointsIntoRing(exteriorRing, hits);\n const idx0 = indices[0];\n const idx1 = indices[1];\n\n // Ensure idx0 < idx1 for consistent traversal\n const [iA, iB] = idx0 < idx1 ? [idx0, idx1] : [idx1, idx0];\n const [hitA, hitB] = idx0 < idx1 ? [hit0, hit1] : [hit1, hit0];\n\n // 3. Get the cutting line segment between the two intersection points\n const cutForward = idx0 < idx1\n ? cuttingLineSlice(extendedLine, hit0, hit1)\n : cuttingLineSlice(extendedLine, hit1, hit0);\n const cutReverse = cutForward.slice().reverse();\n\n // 4. Build two polygon rings\n // Ring A: walk ring from iA to iB (forward), then cutting line reversed back to iA\n const sliceAB = ringSlice(expandedRing, iA, iB);\n const ringA = closeRing([...sliceAB, ...cutReverse.slice(1)]);\n\n // Ring B: walk ring from iB to iA (wrapping), then cutting line forward back to iB\n const sliceBA = ringSlice(expandedRing, iB, iA);\n const ringB = closeRing([...sliceBA, ...cutForward.slice(1)]);\n\n // 5. Match winding order to original\n const originalCCW = signedArea(exteriorRing) > 0;\n const finalA = ensureWinding(ringA, originalCCW);\n const finalB = ensureWinding(ringB, originalCCW);\n\n // 6. Build polygon coordinate arrays, assigning holes to the correct piece\n const polyA = [finalA];\n const polyB = [finalB];\n\n for (const hole of holes) {\n // Use the centroid of the hole to determine containment\n const centroid = holeCentroid(hole);\n if (pointInRing(centroid, finalA)) {\n polyA.push(hole);\n } else {\n polyB.push(hole);\n }\n }\n\n return [polyA, polyB];\n}\n\n/**\n * Compute the centroid of a closed ring.\n */\nfunction holeCentroid(ring) {\n let cx = 0, cy = 0;\n const n = ring.length - 1; // exclude closing vertex\n for (let i = 0; i < n; i++) {\n cx += ring[i][0];\n cy += ring[i][1];\n }\n return [cx / n, cy / n];\n}\n","/**\n * Lightweight toast notification system.\n *\n * Usage:\n * import { showToast } from '../toast.js';\n *\n * showToast('Something went wrong', 'error');\n * showToast('Merge successful!', 'success');\n * showToast('Select two adjacent polygons', 'info');\n */\n\n// ── Palette ──────────────────────────────────────────────────────────────────\n\nconst THEMES = {\n success: { bg: '#10b981', icon: '\\u2705' }, // green\n error: { bg: '#ef4444', icon: '\\u274c' }, // red\n warning: { bg: '#f59e0b', icon: '\\u26a0\\ufe0f' }, // amber\n info: { bg: '#0ea5e9', icon: '\\u2139\\ufe0f' }, // cyan\n};\n\n// ── Container (created once, appended to ) ────────────────────────────\n\nlet container = null;\n\nfunction ensureContainer() {\n if (container) return container;\n container = document.createElement('div');\n container.style.cssText = `\n position: fixed;\n top: 16px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10000;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n pointer-events: none;\n `;\n document.body.appendChild(container);\n return container;\n}\n\n// ── Public API ──────────────────────────────────────────────────────────────\n\n/**\n * Display a toast notification.\n *\n * @param {string} message Plain-text message to show.\n * @param {'success'|'error'|'warning'|'info'} [type='info']\n * @param {number} [duration=4000] Auto-dismiss time in ms.\n */\nexport function showToast(message, type = 'info', duration = 4000) {\n const parent = ensureContainer();\n const theme = THEMES[type] || THEMES.info;\n\n const el = document.createElement('div');\n el.style.cssText = `\n background: ${theme.bg};\n color: #fff;\n padding: 10px 18px;\n border-radius: 8px;\n font-family: var(--font-body, 'Exo', sans-serif);\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 4px 12px rgba(0,0,0,0.25);\n pointer-events: auto;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.25s ease, transform 0.25s ease;\n transform: translateY(-8px);\n max-width: 420px;\n text-align: center;\n line-height: 1.4;\n `;\n el.textContent = `${theme.icon} ${message}`;\n\n parent.appendChild(el);\n\n // Animate in\n requestAnimationFrame(() => {\n el.style.opacity = '1';\n el.style.transform = 'translateY(0)';\n });\n\n // Dismiss helper\n const dismiss = () => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(-8px)';\n setTimeout(() => el.remove(), 300);\n };\n\n // Click to dismiss early\n el.addEventListener('click', dismiss);\n\n // Auto-dismiss\n setTimeout(dismiss, duration);\n}\n","/**\n * PolygonSplitInteraction\n *\n * A two-phase OpenLayers interaction for splitting polygons:\n * Phase 1 – SELECT: hover to highlight, click to select a polygon\n * Phase 2 – DRAW: draw a cutting line, double-click to finish\n *\n * After a successful split the original feature is removed and two new\n * coloured features are added. The interaction fires `beforesplit` and\n * `aftersplit` events compatible with ol-ext's UndoRedo.\n */\n\nimport ol_interaction_Interaction from 'ol/interaction/Interaction';\nimport ol_interaction_Draw from 'ol/interaction/Draw';\nimport VectorSource from 'ol/source/Vector';\nimport VectorLayer from 'ol/layer/Vector';\nimport Feature from 'ol/Feature';\nimport { Style, Stroke, Fill, Circle as CircleStyle } from 'ol/style';\nimport { LineString } from 'ol/geom';\nimport { Polygon as PolygonGeom } from 'ol/geom';\nimport { splitPolygonByLine } from '../geom/polygonSplit.js';\nimport { showToast } from '../toast.js';\n\n// Marker colours for the two split pieces\nconst SPLIT_COLORS = [\n { stroke: '#ef4444', fill: 'rgba(239,68,68,0.25)' }, // red\n { stroke: '#3b82f6', fill: 'rgba(59,130,246,0.25)' }, // blue\n];\n\n// Highlight style for the selected polygon (phase 1)\nconst HIGHLIGHT_STYLE = new Style({\n stroke: new Stroke({ color: '#0ea5e9', width: 3 }),\n fill: new Fill({ color: 'rgba(14,165,233,0.15)' }),\n});\n\n// Style for the cutting-line sketch (phase 2)\nconst SKETCH_STYLE = new Style({\n stroke: new Stroke({ color: '#f43f5e', width: 2, lineDash: [8, 6] }),\n image: new CircleStyle({\n radius: 5,\n fill: new Fill({ color: '#f43f5e' }),\n stroke: new Stroke({ color: '#fff', width: 1.5 }),\n }),\n});\n\nexport class PolygonSplitInteraction extends ol_interaction_Interaction {\n /**\n * @param {Object} options\n * @param {VectorSource|VectorSource[]} [options.sources] Sources containing\n * polygons to split. If omitted the interaction searches all visible\n * vector layers on the map.\n * @param {number} [options.snapDistance=25] Pixel distance for hover highlight.\n */\n constructor(options = {}) {\n super({\n handleEvent: (e) => this._handleEvent(e),\n });\n\n this.snapDistance_ = options.snapDistance || 25;\n this._sources = options.sources\n ? (Array.isArray(options.sources) ? options.sources : [options.sources])\n : null;\n\n // Phase: 'select' | 'draw' | 'pick'\n this._phase = 'select';\n this._selectedFeature = null;\n this._selectedSource = null;\n this._drawInteraction = null;\n this._splitFeatures = null; // the two pieces (for pick phase)\n\n // Overlay layer for highlighting the polygon under the cursor / selected\n this._overlaySource = new VectorSource({ useSpatialIndex: false });\n this._overlayLayer = new VectorLayer({\n source: this._overlaySource,\n displayInLayerSwitcher: false,\n style: HIGHLIGHT_STYLE,\n });\n }\n\n /* ------------------------------------------------------------------ */\n /* Map lifecycle */\n /* ------------------------------------------------------------------ */\n\n setMap(map) {\n if (this.getMap()) {\n this.getMap().removeLayer(this._overlayLayer);\n this._removeDrawInteraction();\n }\n super.setMap(map);\n if (map) {\n this._overlayLayer.setMap(map);\n }\n }\n\n setActive(active) {\n super.setActive(active);\n if (!active) {\n this._reset();\n }\n }\n\n /* ------------------------------------------------------------------ */\n /* Source helpers */\n /* ------------------------------------------------------------------ */\n\n _getSources() {\n if (this._sources) return this._sources;\n if (!this.getMap()) return [];\n const sources = [];\n const collect = (layers) => {\n layers.forEach((layer) => {\n if (layer.getVisible()) {\n if (layer.getSource && layer.getSource() instanceof VectorSource) {\n sources.push(layer.getSource());\n } else if (layer.getLayers) {\n collect(layer.getLayers());\n }\n }\n });\n };\n collect(this.getMap().getLayers());\n return sources;\n }\n\n /* ------------------------------------------------------------------ */\n /* Event router */\n /* ------------------------------------------------------------------ */\n\n _handleEvent(e) {\n if (!this.getActive()) return true;\n\n if (this._phase === 'select') {\n if (e.type === 'pointermove') return this._onSelectMove(e);\n if (e.type === 'singleclick') return this._onSelectClick(e);\n }\n // In 'draw' phase the Draw interaction handles events directly;\n // we only intercept Escape to cancel.\n if (this._phase === 'draw') {\n if (e.type === 'keydown' && e.originalEvent?.key === 'Escape') {\n this._cancelDraw();\n return false;\n }\n }\n\n // In 'pick' phase the user selects which split piece keeps the UPN\n if (this._phase === 'pick') {\n if (e.type === 'pointermove') return this._onPickMove(e);\n if (e.type === 'singleclick') return this._onPickClick(e);\n if (e.type === 'keydown' && e.originalEvent?.key === 'Escape') {\n this._reset();\n return false;\n }\n }\n\n return true;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 1: SELECT */\n /* ------------------------------------------------------------------ */\n\n _onSelectMove(e) {\n const map = this.getMap();\n if (!map) return true;\n\n this._overlaySource.clear();\n\n const hit = this._closestPolygon(e);\n if (hit) {\n // Show highlight copy\n const clone = hit.feature.clone();\n this._overlaySource.addFeature(clone);\n map.getTargetElement().style.cursor = 'pointer';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onSelectClick(e) {\n const hit = this._closestPolygon(e);\n if (!hit) return true;\n\n this._selectedFeature = hit.feature;\n this._selectedSource = hit.source;\n\n // Keep highlight visible during draw phase\n this._overlaySource.clear();\n const clone = hit.feature.clone();\n this._overlaySource.addFeature(clone);\n\n this._startDrawPhase();\n return false; // consume the click\n }\n\n /**\n * Find the closest polygon feature within snap distance.\n */\n _closestPolygon(e) {\n let best = null;\n let bestDist = this.snapDistance_ + 1;\n\n for (const source of this._getSources()) {\n const feat = source.getClosestFeatureToCoordinate(e.coordinate);\n if (!feat) continue;\n const geom = feat.getGeometry();\n if (!geom) continue;\n const type = geom.getType();\n if (type !== 'Polygon' && type !== 'MultiPolygon') continue;\n\n const closest = geom.getClosestPoint(e.coordinate);\n const line = new LineString([e.coordinate, closest]);\n const distPx = line.getLength() / e.frameState.viewState.resolution;\n\n if (distPx < bestDist) {\n bestDist = distPx;\n best = { feature: feat, source, coord: closest };\n }\n }\n return best;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 2: DRAW cutting line */\n /* ------------------------------------------------------------------ */\n\n _startDrawPhase() {\n this._phase = 'draw';\n const map = this.getMap();\n if (!map) return;\n\n map.getTargetElement().style.cursor = 'crosshair';\n\n this._drawInteraction = new ol_interaction_Draw({\n type: 'LineString',\n style: SKETCH_STYLE,\n });\n\n this._drawInteraction.on('drawend', (evt) => {\n const cuttingLine = evt.feature.getGeometry().getCoordinates();\n this._performSplit(cuttingLine);\n });\n\n map.addInteraction(this._drawInteraction);\n }\n\n _removeDrawInteraction() {\n if (this._drawInteraction && this.getMap()) {\n this.getMap().removeInteraction(this._drawInteraction);\n }\n this._drawInteraction = null;\n }\n\n _cancelDraw() {\n this._removeDrawInteraction();\n this._reset();\n }\n\n /* ------------------------------------------------------------------ */\n /* Split logic */\n /* ------------------------------------------------------------------ */\n\n _performSplit(cuttingLineCoords) {\n const feature = this._selectedFeature;\n const source = this._selectedSource;\n const geom = feature.getGeometry();\n\n let polygonCoords;\n if (geom.getType() === 'Polygon') {\n polygonCoords = geom.getCoordinates();\n } else if (geom.getType() === 'MultiPolygon') {\n // For MultiPolygon, try to split each sub-polygon and use the\n // first one that produces a valid result.\n // For now, use the first polygon ring.\n polygonCoords = geom.getCoordinates()[0];\n }\n\n const result = splitPolygonByLine(polygonCoords, cuttingLineCoords);\n\n if (!result) {\n console.warn('[PolygonSplit] Split failed — line must cross the polygon boundary at exactly 2 points.');\n // Stay in draw phase so user can retry\n this._removeDrawInteraction();\n this._startDrawPhase();\n return;\n }\n\n const [coordsA, coordsB] = result;\n\n // Create two new features from the split result\n const featureA = feature.clone();\n featureA.setGeometry(new PolygonGeom(coordsA));\n featureA.setStyle(new Style({\n stroke: new Stroke({ color: SPLIT_COLORS[0].stroke, width: 2.5 }),\n fill: new Fill({ color: SPLIT_COLORS[0].fill }),\n }));\n\n const featureB = feature.clone();\n featureB.setGeometry(new PolygonGeom(coordsB));\n featureB.setStyle(new Style({\n stroke: new Stroke({ color: SPLIT_COLORS[1].stroke, width: 2.5 }),\n fill: new Fill({ color: SPLIT_COLORS[1].fill }),\n }));\n\n // Dispatch beforesplit (compatible with ol-ext UndoRedo)\n const splitFeatures = [featureA, featureB];\n this.dispatchEvent({\n type: 'beforesplit',\n original: feature,\n features: splitFeatures,\n });\n source.dispatchEvent({\n type: 'beforesplit',\n original: feature,\n features: splitFeatures,\n });\n\n // Replace the original feature. Group the remove + two adds into a single\n // UndoRedo block (via the map-level undoblockstart/undoblockend events the\n // ol-ext UndoRedo interaction listens for) so the whole split is reversed\n // by ONE undo press instead of three.\n const splitMap = this.getMap();\n splitMap?.dispatchEvent('undoblockstart');\n source.removeFeature(feature);\n source.addFeature(featureA);\n source.addFeature(featureB);\n splitMap?.dispatchEvent('undoblockend');\n\n // Dispatch aftersplit\n this.dispatchEvent({\n type: 'aftersplit',\n original: feature,\n features: splitFeatures,\n });\n source.dispatchEvent({\n type: 'aftersplit',\n original: feature,\n features: splitFeatures,\n });\n\n // Clean up draw interaction\n this._removeDrawInteraction();\n\n // If the original was a parcel, enter pick phase for UPN assignment\n const isParcel = feature.get('_layerType') === 'parcel';\n if (isParcel) {\n this._splitFeatures = splitFeatures;\n this._phase = 'pick';\n this._overlaySource.clear();\n const map = this.getMap();\n if (map) map.getTargetElement().style.cursor = '';\n showToast('Click the polygon that should keep the original identifier.', 'info', 5000);\n\n this.dispatchEvent({\n type: 'splitparcel',\n features: splitFeatures,\n originalProps: feature.getProperties(),\n source,\n });\n } else {\n this._reset();\n }\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 3: PICK — select which split piece keeps the UPN */\n /* ------------------------------------------------------------------ */\n\n _onPickMove(e) {\n const map = this.getMap();\n if (!map) return true;\n\n this._overlaySource.clear();\n\n const hit = this._closestSplitPiece(e);\n if (hit) {\n const clone = hit.clone();\n this._overlaySource.addFeature(clone);\n map.getTargetElement().style.cursor = 'pointer';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onPickClick(e) {\n const hit = this._closestSplitPiece(e);\n if (!hit) return true;\n\n this.dispatchEvent({\n type: 'splitpick',\n picked: hit,\n features: this._splitFeatures,\n });\n\n this._reset();\n return false;\n }\n\n /**\n * Find the closest split piece to the cursor.\n */\n _closestSplitPiece(e) {\n if (!this._splitFeatures) return null;\n let best = null;\n let bestDist = this.snapDistance_ + 1;\n\n for (const feat of this._splitFeatures) {\n const geom = feat.getGeometry();\n if (!geom) continue;\n const closest = geom.getClosestPoint(e.coordinate);\n const line = new LineString([e.coordinate, closest]);\n const distPx = line.getLength() / e.frameState.viewState.resolution;\n if (distPx < bestDist) {\n bestDist = distPx;\n best = feat;\n }\n }\n return best;\n }\n\n /* ------------------------------------------------------------------ */\n /* Reset */\n /* ------------------------------------------------------------------ */\n\n _reset() {\n this._phase = 'select';\n this._selectedFeature = null;\n this._selectedSource = null;\n this._splitFeatures = null;\n this._overlaySource.clear();\n this._removeDrawInteraction();\n\n const map = this.getMap();\n if (map) {\n map.getTargetElement().style.cursor = '';\n }\n }\n}\n","/**\n * Pure geometry functions for merging two adjacent polygons.\n *\n * No OpenLayers dependency — operates on raw coordinate arrays.\n */\n\n/**\n * Squared distance between two points.\n */\nfunction dist2(a, b) {\n return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2;\n}\n\n/**\n * Signed area of a ring (shoelace formula).\n * Positive = counter-clockwise, negative = clockwise.\n */\nfunction signedArea(ring) {\n let area = 0;\n for (let i = 0, n = ring.length; i < n - 1; i++) {\n area += (ring[i][0] * ring[i + 1][1]) - (ring[i + 1][0] * ring[i][1]);\n }\n return area / 2;\n}\n\n/**\n * Test whether a point is inside a ring (ray-casting algorithm).\n */\nfunction pointInRing(pt, ring) {\n let inside = false;\n for (let i = 0, j = ring.length - 2; i < ring.length - 1; j = i++) {\n const xi = ring[i][0], yi = ring[i][1];\n const xj = ring[j][0], yj = ring[j][1];\n if (((yi > pt[1]) !== (yj > pt[1])) &&\n (pt[0] < (xj - xi) * (pt[1] - yi) / (yj - yi) + xi)) {\n inside = !inside;\n }\n }\n return inside;\n}\n\n/**\n * Ensure a ring has the desired winding order.\n */\nfunction ensureWinding(ring, ccw) {\n const area = signedArea(ring);\n if ((ccw && area < 0) || (!ccw && area > 0)) {\n return ring.slice().reverse();\n }\n return ring;\n}\n\n/**\n * Close a ring (ensure first === last).\n */\nfunction closeRing(coords) {\n if (coords.length < 2) return coords;\n if (dist2(coords[0], coords[coords.length - 1]) > 1e-10) {\n return [...coords, coords[0].slice()];\n }\n return coords;\n}\n\n/**\n * Perpendicular distance from a point to a segment.\n *\n * @param {number[]} pt\n * @param {number[]} segA Segment start\n * @param {number[]} segB Segment end\n * @returns {number} Squared distance\n */\nfunction distToSegmentSq(pt, segA, segB) {\n const dx = segB[0] - segA[0];\n const dy = segB[1] - segA[1];\n const lenSq = dx * dx + dy * dy;\n\n if (lenSq < 1e-20) return dist2(pt, segA); // degenerate segment\n\n // Parametric position of the projection\n let t = ((pt[0] - segA[0]) * dx + (pt[1] - segA[1]) * dy) / lenSq;\n t = Math.max(0, Math.min(1, t));\n\n const projX = segA[0] + t * dx;\n const projY = segA[1] + t * dy;\n return (pt[0] - projX) ** 2 + (pt[1] - projY) ** 2;\n}\n\n/**\n * Find the ring edge closest to a click coordinate.\n *\n * @param {number[][]} ring Closed ring\n * @param {number[]} clickCoord [x, y]\n * @returns {{ segIdx: number, distSq: number }}\n */\nfunction findClosestEdge(ring, clickCoord) {\n let bestIdx = 0;\n let bestDist = Infinity;\n const n = ring.length - 1; // unique vertices\n\n for (let i = 0; i < n; i++) {\n const d = distToSegmentSq(clickCoord, ring[i], ring[(i + 1) % n === 0 ? n : i + 1]);\n if (d < bestDist) {\n bestDist = d;\n bestIdx = i;\n }\n }\n return { segIdx: bestIdx, distSq: bestDist };\n}\n\n/**\n * Check if two coordinates are equal within tolerance.\n */\nfunction coordsEqual(a, b, tolSq) {\n return dist2(a, b) < tolSq;\n}\n\n/**\n * Test whether a point lies within tolerance of any edge of a ring.\n *\n * Unlike coordsEqual (vertex-to-vertex), this checks whether the point is\n * close to the ring's *boundary* — it projects onto segments, so it works\n * even when the two polygons have different vertex density along the shared\n * edge or when vertices are slightly offset from separate digitisation.\n *\n * @param {number[]} pt Point to test\n * @param {number[][]} ring Closed ring\n * @param {number} tolSq Squared distance tolerance\n * @returns {boolean}\n */\nfunction isVertexNearRing(pt, ring, tolSq) {\n const n = ring.length - 1;\n for (let i = 0; i < n; i++) {\n if (distToSegmentSq(pt, ring[i], ring[i + 1]) < tolSq) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Find the shared boundary between two polygon rings.\n *\n * Adjacent polygons share edges in reverse winding direction:\n * if A walks P→Q along the shared boundary, B walks Q→P.\n *\n * The algorithm has two stages:\n *\n * 1. **Seed validation** — uses `isVertexNearRing` (vertex-to-edge proximity)\n * to confirm the user-clicked edges actually lie on a common boundary.\n * This is the forgiving check that handles offset vertices from separate\n * digitisation.\n *\n * 2. **Lockstep extension** — walks both rings together (A forward, B in\n * the opposite direction) and extends the shared boundary one vertex at\n * a time. Three cases are tried at each step:\n * a) Both rings advance: vertex-to-vertex match (classic case).\n * b) Only A advances: A has an extra vertex that projects onto B's\n * frontier edge (different vertex density).\n * c) Only B advances: vice-versa.\n * Because extension is coupled to the *frontier edge* of the other ring\n * (not the entire ring), it cannot overshoot into non-shared territory,\n * even for small or closely-spaced polygons.\n *\n * @param {number[][]} ringA Closed ring\n * @param {number[][]} ringB Closed ring\n * @param {number} seedIdxA Seed edge index on ring A\n * @param {number} seedIdxB Seed edge index on ring B\n * @param {number} tolerance Distance tolerance (in map units)\n * @returns {{ startA: number, endA: number, startB: number, endB: number, reversed: boolean } | null}\n */\nfunction findSharedBoundary(ringA, ringB, seedIdxA, seedIdxB, tolerance) {\n const nA = ringA.length - 1; // unique vertices\n const nB = ringB.length - 1;\n const tolSq = tolerance * tolerance;\n\n // ── Validate seed edges ─────────────────────────────────────────────\n // Both vertices of the seed edge on A must be near ring B's boundary,\n // or both vertices of the seed edge on B must be near ring A's boundary.\n // This uses vertex-to-edge proximity so it handles offset digitisation.\n const a0 = ringA[seedIdxA];\n const a1 = ringA[(seedIdxA + 1) % nA];\n const b0 = ringB[seedIdxB];\n const b1 = ringB[(seedIdxB + 1) % nB];\n\n const a0NearB = isVertexNearRing(a0, ringB, tolSq);\n const a1NearB = isVertexNearRing(a1, ringB, tolSq);\n const b0NearA = isVertexNearRing(b0, ringA, tolSq);\n const b1NearA = isVertexNearRing(b1, ringA, tolSq);\n\n if (!(a0NearB && a1NearB) && !(b0NearA && b1NearA)) {\n console.warn('[polygonMerge] Seed edges are not on the shared boundary');\n return null;\n }\n\n // ── Determine winding direction ─────────────────────────────────────\n // Reversed (the normal case): A's a0 ≈ B's b1 and A's a1 ≈ B's b0.\n let reversed;\n if (coordsEqual(a0, b1, tolSq) && coordsEqual(a1, b0, tolSq)) {\n reversed = true;\n } else if (coordsEqual(a0, b0, tolSq) && coordsEqual(a1, b1, tolSq)) {\n reversed = false;\n } else {\n // Vertices don't match exactly — use proximity to decide direction\n reversed = dist2(a0, b1) < dist2(a0, b0);\n }\n\n // ── Initialise shared boundary ──────────────────────────────────────\n let startA = seedIdxA;\n let endA = (seedIdxA + 1) % nA;\n let startB, endB;\n\n if (reversed) {\n // A walks startA → endA, B walks startB ← endB (reversed ring order)\n startB = (seedIdxB + 1) % nB;\n endB = seedIdxB;\n } else {\n startB = seedIdxB;\n endB = (seedIdxB + 1) % nB;\n }\n\n // ── Extend forward (endA++, endB-- if reversed) ─────────────────────\n // Walk both rings in lockstep. At each step try three strategies:\n // 1. Both advance — vertices match (vertex-to-vertex).\n // 2. Only A advances — A's next vertex projects onto B's frontier edge.\n // 3. Only B advances — B's next vertex projects onto A's frontier edge.\n let safety = nA + nB;\n while (safety-- > 0) {\n const nextA = (endA + 1) % nA;\n const nextB = reversed ? (endB - 1 + nB) % nB : (endB + 1) % nB;\n if (nextA === startA || nextB === startB) break; // wrapped around\n\n // Case 1: vertex-to-vertex match\n if (coordsEqual(ringA[nextA], ringB[nextB], tolSq)) {\n endA = nextA;\n endB = nextB;\n continue;\n }\n\n // Case 2: A has extra vertex — project onto B's frontier edge\n if (distToSegmentSq(ringA[nextA], ringB[endB], ringB[nextB]) < tolSq) {\n endA = nextA;\n continue;\n }\n\n // Case 3: B has extra vertex — project onto A's frontier edge\n if (distToSegmentSq(ringB[nextB], ringA[endA], ringA[nextA]) < tolSq) {\n endB = nextB;\n continue;\n }\n\n break; // no match — end of shared boundary\n }\n\n // ── Extend backward (startA--, startB++ if reversed) ────────────────\n safety = nA + nB;\n while (safety-- > 0) {\n const prevA = (startA - 1 + nA) % nA;\n const prevB = reversed ? (startB + 1) % nB : (startB - 1 + nB) % nB;\n if (prevA === endA || prevB === endB) break;\n\n // Case 1: vertex-to-vertex match\n if (coordsEqual(ringA[prevA], ringB[prevB], tolSq)) {\n startA = prevA;\n startB = prevB;\n continue;\n }\n\n // Case 2: A has extra vertex — project onto B's frontier edge\n if (distToSegmentSq(ringA[prevA], ringB[startB], ringB[prevB]) < tolSq) {\n startA = prevA;\n continue;\n }\n\n // Case 3: B has extra vertex — project onto A's frontier edge\n if (distToSegmentSq(ringB[prevB], ringA[startA], ringA[prevA]) < tolSq) {\n startB = prevB;\n continue;\n }\n\n break;\n }\n\n return { startA, endA, startB, endB, reversed };\n}\n\n/**\n * Walk a ring from startIdx to endIdx (exclusive), going forward and wrapping.\n * Skips startIdx and stops before reaching endIdx.\n * Returns the vertices of the non-shared portion.\n *\n * @param {number[][]} ring Closed ring\n * @param {number} fromIdx Start walking from this index (inclusive)\n * @param {number} toIdx Stop at this index (inclusive)\n * @returns {number[][]}\n */\nfunction walkRing(ring, fromIdx, toIdx) {\n const n = ring.length - 1;\n const result = [];\n let idx = fromIdx;\n while (true) {\n result.push(ring[idx]);\n if (idx === toIdx) break;\n idx = (idx + 1) % n;\n // Safety: prevent infinite loops\n if (result.length > n + 1) break;\n }\n return result;\n}\n\n/**\n * Merge two adjacent polygons along their shared boundary.\n *\n * @param {number[][][]} polygonCoordsA Polygon A coordinates [exteriorRing, ...holes]\n * @param {number[][][]} polygonCoordsB Polygon B coordinates [exteriorRing, ...holes]\n * @param {number[]} clickCoordA Click coordinate on the shared edge of polygon A\n * @param {number[]} clickCoordB Click coordinate on the shared edge of polygon B\n * @param {number} [tolerance=5] Distance tolerance in map units (default 5 metres in EPSG:3857).\n * A larger tolerance handles polygons that were digitised separately and\n * whose shared vertices don't coincide exactly.\n * @returns {{ coords: number[][][], error?: undefined } | { coords: null, error: string }}\n * On success: `{ coords: [...] }`. On failure: `{ coords: null, error: 'reason' }`.\n */\nexport function mergePolygons(polygonCoordsA, polygonCoordsB, clickCoordA, clickCoordB, tolerance = 5) {\n const ringA = polygonCoordsA[0];\n const ringB = polygonCoordsB[0];\n const holesA = polygonCoordsA.slice(1);\n const holesB = polygonCoordsB.slice(1);\n\n // 1. Find seed edges (closest to user clicks)\n const seedA = findClosestEdge(ringA, clickCoordA);\n const seedB = findClosestEdge(ringB, clickCoordB);\n\n // 2. Find shared boundary\n const shared = findSharedBoundary(ringA, ringB, seedA.segIdx, seedB.segIdx, tolerance);\n if (!shared) {\n console.warn('[polygonMerge] Could not find shared boundary between polygons — seed edges are not near the other ring');\n return { coords: null, error: 'The selected edges are not on a shared boundary. Click edges that lie on the common border between the two polygons.' };\n }\n\n const { startA, endA, startB, endB, reversed } = shared;\n const nA = ringA.length - 1;\n const nB = ringB.length - 1;\n\n // 3. Stitch the non-shared portions together\n // A's shared goes from startA → endA. Non-shared: endA → startA (forward, wrapping).\n // B's shared (reversed case) goes from startB backward to endB.\n // Non-shared: startB → endB (forward).\n // B's shared (same-dir case) goes from startB → endB.\n // Non-shared: endB → startB (forward, wrapping).\n //\n // The last vertex of partA (startA) must coincide with the first vertex\n // of partB for a clean join.\n\n const partA = walkRing(ringA, endA, startA);\n\n let partB;\n if (reversed) {\n // B's non-shared goes from startB forward to endB.\n // startB vertex ≈ startA vertex (they meet at one end of the shared boundary).\n partB = walkRing(ringB, startB, endB);\n } else {\n // B's non-shared goes from endB forward to startB.\n partB = walkRing(ringB, endB, startB);\n }\n\n // partA ends at startA, partB starts at a vertex that should coincide.\n // Skip the first vertex of partB to avoid the duplicate junction point.\n const merged = [...partA, ...partB.slice(1)];\n\n // Snap the closing junction. With non-coincident vertices (separate\n // digitisation) the last vertex of partB may be a few metres from the\n // first vertex of partA (ringA[endA]). Replace it to avoid a tiny\n // sliver edge that closeRing would otherwise create.\n const tolSq = tolerance * tolerance;\n if (merged.length > 2 && dist2(merged[merged.length - 1], merged[0]) < tolSq) {\n merged[merged.length - 1] = merged[0].slice();\n }\n\n const mergedRing = closeRing(merged);\n\n // 4. Validate: the merged ring should have a reasonable area\n const areaA = Math.abs(signedArea(ringA));\n const areaB = Math.abs(signedArea(ringB));\n const areaMerged = Math.abs(signedArea(mergedRing));\n const expectedArea = areaA + areaB;\n\n // Allow 10% tolerance for area mismatch (shared edges can cause slight differences)\n if (areaMerged < expectedArea * 0.5 || areaMerged > expectedArea * 1.5) {\n console.warn(`[polygonMerge] Area mismatch: A=${areaA.toFixed(1)}, B=${areaB.toFixed(1)}, merged=${areaMerged.toFixed(1)}, expected≈${expectedArea.toFixed(1)}`);\n return { coords: null, error: 'Merge produced an invalid polygon (area mismatch). The polygons may not be truly adjacent — try clicking closer to the shared boundary.' };\n }\n\n // 5. Match winding order to original\n const originalCCW = signedArea(ringA) > 0;\n const finalRing = ensureWinding(mergedRing, originalCCW);\n\n // 6. Collect holes from both polygons\n const allHoles = [...holesA, ...holesB];\n // Filter: only include holes that actually fall inside the merged ring\n const validHoles = allHoles.filter(hole => {\n const cx = hole.reduce((s, p) => s + p[0], 0) / (hole.length - 1);\n const cy = hole.reduce((s, p) => s + p[1], 0) / (hole.length - 1);\n return pointInRing([cx, cy], finalRing);\n });\n\n return { coords: [finalRing, ...validHoles] };\n}\n","/**\n * PolygonMergeInteraction\n *\n * A four-phase OpenLayers interaction for merging two adjacent polygons:\n * Phase 1 – SELECT_A: hover to highlight, click to select polygon A\n * Phase 2 – SELECT_B: hover to highlight, click to select polygon B\n * Phase 3 – CLICK_EDGE_A: hover highlights edge, click to pick shared edge on A\n * Phase 4 – CLICK_EDGE_B: hover highlights edge, click to pick shared edge on B → merge\n *\n * After a successful merge the two original features are removed and one\n * merged feature (coloured green) is added. If both originals were parcels,\n * a `mergedparcel` event is fired so external code can present a UPN chooser.\n */\n\nimport ol_interaction_Interaction from 'ol/interaction/Interaction';\nimport VectorSource from 'ol/source/Vector';\nimport VectorLayer from 'ol/layer/Vector';\nimport Feature from 'ol/Feature';\nimport { Style, Stroke, Fill, Text } from 'ol/style';\nimport { LineString, Polygon as PolygonGeom } from 'ol/geom';\nimport { mergePolygons } from '../geom/polygonMerge.js';\nimport { showToast } from '../toast.js';\n\n// ── Styles ───────────────────────────────────────────────────────────────────\n\nconst HIGHLIGHT_A = new Style({\n stroke: new Stroke({ color: '#0ea5e9', width: 3 }),\n fill: new Fill({ color: 'rgba(14,165,233,0.15)' }),\n});\n\nconst HIGHLIGHT_B = new Style({\n stroke: new Stroke({ color: '#f59e0b', width: 3 }),\n fill: new Fill({ color: 'rgba(245,158,11,0.15)' }),\n});\n\n// Labelled versions for permanent highlights (shown after selection)\nconst LABEL_A = new Style({\n stroke: new Stroke({ color: '#0ea5e9', width: 3 }),\n fill: new Fill({ color: 'rgba(14,165,233,0.15)' }),\n text: new Text({\n text: 'A',\n font: 'bold 22px Exo, sans-serif',\n fill: new Fill({ color: '#0ea5e9' }),\n stroke: new Stroke({ color: '#fff', width: 4 }),\n overflow: true,\n }),\n});\n\nconst LABEL_B = new Style({\n stroke: new Stroke({ color: '#f59e0b', width: 3 }),\n fill: new Fill({ color: 'rgba(245,158,11,0.15)' }),\n text: new Text({\n text: 'B',\n font: 'bold 22px Exo, sans-serif',\n fill: new Fill({ color: '#f59e0b' }),\n stroke: new Stroke({ color: '#fff', width: 4 }),\n overflow: true,\n }),\n});\n\nconst EDGE_STYLE = new Style({\n stroke: new Stroke({ color: '#ec4899', width: 4, lineDash: [10, 6] }),\n});\n\nconst MERGE_STYLE = new Style({\n stroke: new Stroke({ color: '#10b981', width: 2.5 }),\n fill: new Fill({ color: 'rgba(16,185,129,0.3)' }),\n});\n\n// ── Interaction ──────────────────────────────────────────────────────────────\n\nexport class PolygonMergeInteraction extends ol_interaction_Interaction {\n /**\n * @param {Object} [options]\n * @param {number} [options.snapDistance=25] Pixel distance for hover detection.\n * @param {number} [options.tolerance=5] Map-unit tolerance for shared-edge matching.\n */\n constructor(options = {}) {\n super({\n handleEvent: (e) => this._handleEvent(e),\n });\n\n this.snapDistance_ = options.snapDistance || 25;\n this.tolerance_ = options.tolerance || 5;\n\n // Phase: 'select_a' | 'select_b' | 'click_edge_a' | 'click_edge_b'\n this._phase = 'select_a';\n\n // Selected features and their sources\n this._featureA = null;\n this._sourceA = null;\n this._featureB = null;\n this._sourceB = null;\n\n // Clicked edge coordinates (map coords)\n this._edgeClickA = null;\n this._edgeClickB = null;\n\n // Overlay for polygon highlights\n this._highlightSource = new VectorSource({ useSpatialIndex: false });\n this._highlightLayer = new VectorLayer({\n source: this._highlightSource,\n displayInLayerSwitcher: false,\n style: (f) => f.get('_highlightStyle') || HIGHLIGHT_A,\n });\n\n // Overlay for edge highlights\n this._edgeSource = new VectorSource({ useSpatialIndex: false });\n this._edgeLayer = new VectorLayer({\n source: this._edgeSource,\n displayInLayerSwitcher: false,\n style: EDGE_STYLE,\n });\n }\n\n /* ------------------------------------------------------------------ */\n /* Map lifecycle */\n /* ------------------------------------------------------------------ */\n\n setMap(map) {\n if (this.getMap()) {\n this.getMap().removeLayer(this._highlightLayer);\n this.getMap().removeLayer(this._edgeLayer);\n }\n super.setMap(map);\n if (map) {\n this._highlightLayer.setMap(map);\n this._edgeLayer.setMap(map);\n }\n }\n\n setActive(active) {\n super.setActive(active);\n if (!active) this._reset();\n }\n\n /* ------------------------------------------------------------------ */\n /* Source helpers */\n /* ------------------------------------------------------------------ */\n\n _getSources() {\n if (!this.getMap()) return [];\n const sources = [];\n const collect = (layers) => {\n layers.forEach((layer) => {\n if (layer.getVisible()) {\n if (layer.getSource && layer.getSource() instanceof VectorSource) {\n sources.push(layer.getSource());\n } else if (layer.getLayers) {\n collect(layer.getLayers());\n }\n }\n });\n };\n collect(this.getMap().getLayers());\n return sources;\n }\n\n /* ------------------------------------------------------------------ */\n /* Event router */\n /* ------------------------------------------------------------------ */\n\n _handleEvent(e) {\n if (!this.getActive()) return true;\n\n // Escape cancels at any phase\n if (e.type === 'keydown' && e.originalEvent?.key === 'Escape') {\n this._reset();\n return false;\n }\n\n switch (this._phase) {\n case 'select_a':\n if (e.type === 'pointermove') return this._onSelectMove(e, null);\n if (e.type === 'singleclick') return this._onSelectAClick(e);\n break;\n case 'select_b':\n if (e.type === 'pointermove') return this._onSelectMove(e, this._featureA);\n if (e.type === 'singleclick') return this._onSelectBClick(e);\n break;\n case 'click_edge_a':\n if (e.type === 'pointermove') return this._onEdgeMove(e, this._featureA);\n if (e.type === 'singleclick') return this._onEdgeAClick(e);\n break;\n case 'click_edge_b':\n if (e.type === 'pointermove') return this._onEdgeMove(e, this._featureB);\n if (e.type === 'singleclick') return this._onEdgeBClick(e);\n break;\n }\n return true;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 1 & 2: SELECT polygons */\n /* ------------------------------------------------------------------ */\n\n _onSelectMove(e, skipFeature) {\n const map = this.getMap();\n if (!map) return true;\n\n // Keep existing highlights for already-selected polygons\n this._highlightSource.clear();\n this._edgeSource.clear();\n this._rebuildHighlights();\n\n const hit = this._closestPolygon(e, skipFeature);\n if (hit) {\n const style = this._phase === 'select_a' ? HIGHLIGHT_A : HIGHLIGHT_B;\n const clone = hit.feature.clone();\n clone.set('_highlightStyle', style);\n this._highlightSource.addFeature(clone);\n map.getTargetElement().style.cursor = 'pointer';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onSelectAClick(e) {\n const hit = this._closestPolygon(e, null);\n if (!hit) return true;\n\n this._featureA = hit.feature;\n this._sourceA = hit.source;\n this._phase = 'select_b';\n\n this._rebuildHighlights();\n return false;\n }\n\n _onSelectBClick(e) {\n const hit = this._closestPolygon(e, this._featureA);\n if (!hit) return true;\n\n this._featureB = hit.feature;\n this._sourceB = hit.source;\n this._phase = 'click_edge_a';\n\n this._rebuildHighlights();\n this.getMap().getTargetElement().style.cursor = 'crosshair';\n return false;\n }\n\n /**\n * Find the closest polygon feature within snap distance.\n * Optionally skip a feature (used in phase 2 to avoid re-selecting A).\n */\n _closestPolygon(e, skipFeature) {\n let best = null;\n let bestDist = this.snapDistance_ + 1;\n\n for (const source of this._getSources()) {\n const feat = source.getClosestFeatureToCoordinate(e.coordinate);\n if (!feat) continue;\n if (skipFeature && feat === skipFeature) continue;\n const geom = feat.getGeometry();\n if (!geom) continue;\n const type = geom.getType();\n if (type !== 'Polygon' && type !== 'MultiPolygon') continue;\n\n const closest = geom.getClosestPoint(e.coordinate);\n const line = new LineString([e.coordinate, closest]);\n const distPx = line.getLength() / e.frameState.viewState.resolution;\n\n if (distPx < bestDist) {\n bestDist = distPx;\n best = { feature: feat, source, coord: closest };\n }\n }\n return best;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 3 & 4: CLICK edges */\n /* ------------------------------------------------------------------ */\n\n _onEdgeMove(e, feature) {\n const map = this.getMap();\n if (!map) return true;\n\n this._edgeSource.clear();\n\n const edge = this._closestEdgeSegment(feature, e);\n if (edge) {\n const edgeFeat = new Feature(new LineString([edge.segStart, edge.segEnd]));\n this._edgeSource.addFeature(edgeFeat);\n map.getTargetElement().style.cursor = 'crosshair';\n }\n return true;\n }\n\n _onEdgeAClick(e) {\n this._edgeClickA = e.coordinate;\n this._phase = 'click_edge_b';\n this._edgeSource.clear();\n return false;\n }\n\n _onEdgeBClick(e) {\n this._edgeClickB = e.coordinate;\n this._performMerge();\n return false;\n }\n\n /**\n * Find the closest edge segment of a polygon feature to the cursor.\n */\n _closestEdgeSegment(feature, e) {\n const geom = feature.getGeometry();\n let ring;\n if (geom.getType() === 'Polygon') {\n ring = geom.getCoordinates()[0];\n } else if (geom.getType() === 'MultiPolygon') {\n ring = geom.getCoordinates()[0][0];\n } else {\n return null;\n }\n\n const resolution = e.frameState.viewState.resolution;\n let bestDist = Infinity;\n let bestSeg = null;\n const n = ring.length - 1;\n\n for (let i = 0; i < n; i++) {\n const a = ring[i];\n const b = ring[i + 1];\n const dx = b[0] - a[0], dy = b[1] - a[1];\n const lenSq = dx * dx + dy * dy;\n if (lenSq < 1e-20) continue;\n\n let t = ((e.coordinate[0] - a[0]) * dx + (e.coordinate[1] - a[1]) * dy) / lenSq;\n t = Math.max(0, Math.min(1, t));\n const projX = a[0] + t * dx, projY = a[1] + t * dy;\n const distPx = Math.sqrt((e.coordinate[0] - projX) ** 2 + (e.coordinate[1] - projY) ** 2) / resolution;\n\n if (distPx < bestDist) {\n bestDist = distPx;\n bestSeg = { segStart: a, segEnd: b };\n }\n }\n return bestDist <= this.snapDistance_ ? bestSeg : null;\n }\n\n /* ------------------------------------------------------------------ */\n /* Merge logic */\n /* ------------------------------------------------------------------ */\n\n _performMerge() {\n const featureA = this._featureA;\n const featureB = this._featureB;\n const sourceA = this._sourceA;\n const sourceB = this._sourceB;\n\n // Extract polygon coordinates\n const geomA = featureA.getGeometry();\n const geomB = featureB.getGeometry();\n const coordsA = geomA.getType() === 'Polygon' ? geomA.getCoordinates() : geomA.getCoordinates()[0];\n const coordsB = geomB.getType() === 'Polygon' ? geomB.getCoordinates() : geomB.getCoordinates()[0];\n\n const result = mergePolygons(coordsA, coordsB, this._edgeClickA, this._edgeClickB, this.tolerance_);\n\n if (!result.coords) {\n showToast(result.error || 'Merge failed — try clicking on the shared boundary.', 'error', 5000);\n // Return to edge click phase for retry\n this._edgeClickA = null;\n this._edgeClickB = null;\n this._phase = 'click_edge_a';\n this._edgeSource.clear();\n return;\n }\n\n // Create merged feature (clone A for default properties)\n const mergedFeature = featureA.clone();\n mergedFeature.setGeometry(new PolygonGeom(result.coords));\n mergedFeature.setStyle(MERGE_STYLE);\n\n // Dispatch beforemerge events\n const evtData = {\n type: 'beforemerge',\n original: [featureA, featureB],\n merged: mergedFeature,\n };\n this.dispatchEvent(evtData);\n sourceA.dispatchEvent({ ...evtData });\n if (sourceB !== sourceA) {\n sourceB.dispatchEvent({ ...evtData });\n }\n\n // Replace originals with merged. Group the two removes + one add into a\n // single UndoRedo block (map-level undoblockstart/undoblockend) so the\n // whole merge — across both source layers — is reversed by ONE undo press.\n const mergeMap = this.getMap();\n mergeMap?.dispatchEvent('undoblockstart');\n sourceA.removeFeature(featureA);\n sourceB.removeFeature(featureB);\n sourceA.addFeature(mergedFeature);\n mergeMap?.dispatchEvent('undoblockend');\n\n // Dispatch aftermerge events\n const afterEvt = {\n type: 'aftermerge',\n original: [featureA, featureB],\n merged: mergedFeature,\n };\n this.dispatchEvent(afterEvt);\n sourceA.dispatchEvent({ ...afterEvt });\n if (sourceB !== sourceA) {\n sourceB.dispatchEvent({ ...afterEvt });\n }\n\n // If both features were parcels, fire mergedparcel so MapView can show the UPN chooser\n const isParcelA = featureA.get('_layerType') === 'parcel';\n const isParcelB = featureB.get('_layerType') === 'parcel';\n if (isParcelA && isParcelB) {\n this.dispatchEvent({\n type: 'mergedparcel',\n merged: mergedFeature,\n propsA: featureA.getProperties(),\n propsB: featureB.getProperties(),\n coordinate: this._edgeClickA,\n });\n showToast('Polygons merged — choose which identifier to keep.', 'success');\n } else {\n showToast('Polygons merged successfully.', 'success');\n }\n\n // Clean up\n this._reset();\n }\n\n /* ------------------------------------------------------------------ */\n /* Highlight management */\n /* ------------------------------------------------------------------ */\n\n /**\n * Rebuild the permanent highlights for already-selected polygons.\n */\n _rebuildHighlights() {\n // Remove previous non-hover highlights\n const toRemove = [];\n this._highlightSource.getFeatures().forEach((f) => {\n if (f.get('_permanent')) toRemove.push(f);\n });\n toRemove.forEach((f) => this._highlightSource.removeFeature(f));\n\n if (this._featureA) {\n const cloneA = this._featureA.clone();\n cloneA.set('_highlightStyle', LABEL_A);\n cloneA.set('_permanent', true);\n this._highlightSource.addFeature(cloneA);\n }\n if (this._featureB) {\n const cloneB = this._featureB.clone();\n cloneB.set('_highlightStyle', LABEL_B);\n cloneB.set('_permanent', true);\n this._highlightSource.addFeature(cloneB);\n }\n }\n\n /* ------------------------------------------------------------------ */\n /* Reset */\n /* ------------------------------------------------------------------ */\n\n _reset() {\n this._phase = 'select_a';\n this._featureA = null;\n this._sourceA = null;\n this._featureB = null;\n this._sourceB = null;\n this._edgeClickA = null;\n this._edgeClickB = null;\n this._highlightSource.clear();\n this._edgeSource.clear();\n\n const map = this.getMap();\n if (map) {\n map.getTargetElement().style.cursor = '';\n }\n }\n}\n","/**\n * Pure geometry functions for dividing a polygon into N equal-area pieces.\n *\n * No OpenLayers dependency — operates on raw coordinate arrays.\n *\n * The algorithm finds the polygon's longest edge, then places N-1 cutting\n * lines perpendicular to that edge. Each cutting-line position is found\n * via binary search so that the piece it cuts off has exactly 1/N of the\n * remaining area. The actual cut is delegated to `splitPolygonByLine()`.\n */\n\nimport { splitPolygonByLine } from './polygonSplit.js';\n\n// ── Utility helpers (self-contained) ─────────────────────────────────────────\n\nfunction dist2(a, b) {\n return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2;\n}\n\n/**\n * Signed area of a ring (shoelace formula).\n */\nfunction signedArea(ring) {\n let area = 0;\n for (let i = 0, n = ring.length; i < n - 1; i++) {\n area += ring[i][0] * ring[i + 1][1] - ring[i + 1][0] * ring[i][1];\n }\n return area / 2;\n}\n\n/**\n * Absolute polygon area, accounting for holes.\n */\nfunction polygonArea(coords) {\n let area = Math.abs(signedArea(coords[0]));\n for (let i = 1; i < coords.length; i++) {\n area -= Math.abs(signedArea(coords[i]));\n }\n return area;\n}\n\n/**\n * Find the longest edge of a ring and return direction vectors.\n *\n * @param {number[][]} ring Closed ring\n * @returns {{ p0: number[], p1: number[], along: number[], perp: number[] }}\n * `along` = unit vector along the longest edge,\n * `perp` = unit vector perpendicular to `along` (rotated 90° CCW)\n */\nfunction longestEdge(ring) {\n const n = ring.length - 1; // unique vertices\n let bestLen = -1;\n let bestI = 0;\n\n for (let i = 0; i < n; i++) {\n const d = dist2(ring[i], ring[i + 1]);\n if (d > bestLen) {\n bestLen = d;\n bestI = i;\n }\n }\n\n const p0 = ring[bestI];\n const p1 = ring[bestI + 1];\n const len = Math.sqrt(bestLen);\n const along = [(p1[0] - p0[0]) / len, (p1[1] - p0[1]) / len];\n // Perpendicular: rotate 90° CCW\n const perp = [-along[1], along[0]];\n\n return { p0, p1, along, perp };\n}\n\n/**\n * Build a cutting line perpendicular to `along` at parameter `t`.\n *\n * The line passes through `origin + t * along` and extends `extent` units\n * in both `perp` directions — long enough to fully cross the polygon.\n */\nfunction makeCuttingLine(origin, along, perp, t, extent) {\n const cx = origin[0] + t * along[0];\n const cy = origin[1] + t * along[1];\n return [\n [cx - extent * perp[0], cy - extent * perp[1]],\n [cx + extent * perp[0], cy + extent * perp[1]],\n ];\n}\n\n/**\n * Project the centroid of a polygon's exterior ring onto the `along` axis.\n * Returns the scalar parameter `t` relative to `origin`.\n */\nfunction centroidT(coords, origin, along) {\n const ring = coords[0];\n const n = ring.length - 1;\n let sx = 0, sy = 0;\n for (let i = 0; i < n; i++) {\n sx += ring[i][0];\n sy += ring[i][1];\n }\n const cx = sx / n - origin[0];\n const cy = sy / n - origin[1];\n return cx * along[0] + cy * along[1];\n}\n\n// ── Main export ──────────────────────────────────────────────────────────────\n\n/**\n * Divide a polygon into N equal-area pieces by parallel cuts perpendicular\n * to a user-selected edge.\n *\n * @param {number[][][]} polygonCoords Polygon coordinates [ring, ...holes]\n * @param {number} n Number of pieces (must be >= 1)\n * @param {number[][]} edgeCoords The selected edge `[p0, p1]` — cuts will be\n * perpendicular to this edge direction.\n * @returns {{ pieces: number[][][][], error?: undefined } | { pieces: null, error: string }}\n */\nexport function dividePolygon(polygonCoords, n, edgeCoords) {\n if (!Number.isInteger(n) || n < 1) {\n return { pieces: null, error: 'Number of divisions must be a positive integer.' };\n }\n if (n === 1) {\n return { pieces: [polygonCoords] };\n }\n\n const ring = polygonCoords[0];\n const totalArea = polygonArea(polygonCoords);\n\n if (totalArea < 1e-6) {\n return { pieces: null, error: 'Polygon has no measurable area.' };\n }\n\n // 1. Determine cutting direction from the selected edge\n let p0, along, perp;\n if (edgeCoords && edgeCoords.length === 2) {\n p0 = edgeCoords[0];\n const dx = edgeCoords[1][0] - edgeCoords[0][0];\n const dy = edgeCoords[1][1] - edgeCoords[0][1];\n const len = Math.sqrt(dx * dx + dy * dy);\n if (len < 1e-10) {\n return { pieces: null, error: 'Selected edge has zero length.' };\n }\n along = [dx / len, dy / len];\n perp = [-along[1], along[0]];\n } else {\n // Fallback: use longest edge\n const edge = longestEdge(ring);\n p0 = edge.p0;\n along = edge.along;\n perp = edge.perp;\n }\n const origin = p0;\n\n // 2. Project all vertices onto the `along` axis to find extent\n const nVerts = ring.length - 1;\n let tMin = Infinity, tMax = -Infinity;\n for (let i = 0; i < nVerts; i++) {\n const dx = ring[i][0] - origin[0];\n const dy = ring[i][1] - origin[1];\n const t = dx * along[0] + dy * along[1];\n if (t < tMin) tMin = t;\n if (t > tMax) tMax = t;\n }\n\n // Cutting line extent: enough to cross the polygon in the `perp` direction\n let perpMin = Infinity, perpMax = -Infinity;\n for (let i = 0; i < nVerts; i++) {\n const dx = ring[i][0] - origin[0];\n const dy = ring[i][1] - origin[1];\n const p = dx * perp[0] + dy * perp[1];\n if (p < perpMin) perpMin = p;\n if (p > perpMax) perpMax = p;\n }\n const extent = (perpMax - perpMin) * 1.5; // generous overshoot\n\n // 3. Iteratively cut pieces\n const pieces = [];\n let remaining = polygonCoords;\n let remainingCount = n;\n\n for (let i = 0; i < n - 1; i++) {\n const remainingArea = polygonArea(remaining);\n const targetArea = remainingArea / remainingCount;\n\n // Re-project the remaining polygon to get its current t-range\n const remRing = remaining[0];\n const remN = remRing.length - 1;\n let rMin = Infinity, rMax = -Infinity;\n for (let j = 0; j < remN; j++) {\n const dx = remRing[j][0] - origin[0];\n const dy = remRing[j][1] - origin[1];\n const t = dx * along[0] + dy * along[1];\n if (t < rMin) rMin = t;\n if (t > rMax) rMax = t;\n }\n\n // Binary search for the cutting position\n let lo = rMin;\n let hi = rMax;\n let bestT = (lo + hi) / 2;\n let bestPiece = null;\n let bestRemaining = null;\n let bestError = Infinity;\n\n for (let iter = 0; iter < 40; iter++) {\n const mid = (lo + hi) / 2;\n const line = makeCuttingLine(origin, along, perp, mid, extent);\n const result = splitPolygonByLine(remaining, line);\n\n if (!result) {\n // Cutting line didn't produce a valid split — nudge and retry\n // Try slightly shifted positions\n const nudge = (hi - lo) * 0.01;\n const lineA = makeCuttingLine(origin, along, perp, mid + nudge, extent);\n const resultA = splitPolygonByLine(remaining, lineA);\n if (resultA) {\n const [halfA, halfB] = resultA;\n const tA = centroidT(halfA, origin, along);\n const tB = centroidT(halfB, origin, along);\n const nearPiece = tA < tB ? halfA : halfB;\n const farPiece = tA < tB ? halfB : halfA;\n const nearArea = polygonArea(nearPiece);\n const err = Math.abs(nearArea - targetArea);\n if (err < bestError) {\n bestError = err;\n bestT = mid + nudge;\n bestPiece = nearPiece;\n bestRemaining = farPiece;\n }\n }\n // Try the other direction\n const lineB = makeCuttingLine(origin, along, perp, mid - nudge, extent);\n const resultB = splitPolygonByLine(remaining, lineB);\n if (resultB) {\n const [halfA, halfB] = resultB;\n const tA = centroidT(halfA, origin, along);\n const tB = centroidT(halfB, origin, along);\n const nearPiece = tA < tB ? halfA : halfB;\n const farPiece = tA < tB ? halfB : halfA;\n const nearArea = polygonArea(nearPiece);\n const err = Math.abs(nearArea - targetArea);\n if (err < bestError) {\n bestError = err;\n bestT = mid - nudge;\n bestPiece = nearPiece;\n bestRemaining = farPiece;\n }\n }\n // Bisect anyway to keep converging\n lo = mid;\n continue;\n }\n\n const [halfA, halfB] = result;\n const tA = centroidT(halfA, origin, along);\n const tB = centroidT(halfB, origin, along);\n const nearPiece = tA < tB ? halfA : halfB;\n const farPiece = tA < tB ? halfB : halfA;\n const nearArea = polygonArea(nearPiece);\n\n const err = Math.abs(nearArea - targetArea);\n if (err < bestError) {\n bestError = err;\n bestT = mid;\n bestPiece = nearPiece;\n bestRemaining = farPiece;\n }\n\n // Converged?\n if (err / remainingArea < 0.001) break;\n\n // Adjust search range\n if (nearArea < targetArea) {\n lo = mid; // need to cut farther out\n } else {\n hi = mid; // need to cut closer\n }\n }\n\n if (!bestPiece || !bestRemaining) {\n return {\n pieces: null,\n error: `Could not find a valid cut for piece ${i + 1} of ${n}. The polygon shape may be too irregular for equal division.`,\n };\n }\n\n pieces.push(bestPiece);\n remaining = bestRemaining;\n remainingCount--;\n }\n\n // The last remaining piece is the Nth piece\n pieces.push(remaining);\n\n return { pieces };\n}\n","/**\n * PolygonDivideInteraction\n *\n * A three-phase OpenLayers interaction for dividing a polygon into N\n * equal-area pieces:\n * Phase 1 – SELECT: hover to highlight, click to select a polygon\n * Phase 2 – EDGE: hover to highlight edges, click to pick the divide\n * direction (cuts will be perpendicular to this edge)\n * Phase 3 – FORM: wait for the popup form to call performDivide(n)\n *\n * After a successful divide the original feature is removed and N new\n * coloured features are added. The interaction fires `beforedivide` and\n * `afterdivide` events compatible with ol-ext's UndoRedo.\n */\n\nimport ol_interaction_Interaction from 'ol/interaction/Interaction';\nimport VectorSource from 'ol/source/Vector';\nimport VectorLayer from 'ol/layer/Vector';\nimport Feature from 'ol/Feature';\nimport { Style, Stroke, Fill } from 'ol/style';\nimport { LineString, Polygon as PolygonGeom } from 'ol/geom';\nimport { dividePolygon } from '../geom/polygonDivide.js';\nimport { showToast } from '../toast.js';\n\n// Highlight style for the selected polygon (phase 1)\nconst HIGHLIGHT_STYLE = new Style({\n stroke: new Stroke({ color: '#0ea5e9', width: 3 }),\n fill: new Fill({ color: 'rgba(14,165,233,0.15)' }),\n});\n\n// Style for the hovered edge (phase 2)\nconst EDGE_STYLE = new Style({\n stroke: new Stroke({ color: '#8b5cf6', width: 4, lineDash: [10, 6] }),\n});\n\n/**\n * Generate N visually distinct colours using evenly-spaced HSL hues.\n */\nfunction pieceColors(n) {\n const colors = [];\n for (let i = 0; i < n; i++) {\n const hue = Math.round((i * 360) / n);\n colors.push({\n stroke: `hsl(${hue}, 70%, 45%)`,\n fill: `hsla(${hue}, 70%, 55%, 0.25)`,\n });\n }\n return colors;\n}\n\nexport class PolygonDivideInteraction extends ol_interaction_Interaction {\n /**\n * @param {Object} options\n * @param {VectorSource|VectorSource[]} [options.sources] Specific sources\n * to search. If omitted the interaction searches all visible vector layers.\n * @param {number} [options.snapDistance=25] Pixel distance for hover.\n */\n constructor(options = {}) {\n super({\n handleEvent: (e) => this._handleEvent(e),\n });\n\n this.snapDistance_ = options.snapDistance || 25;\n this._sources = options.sources\n ? (Array.isArray(options.sources) ? options.sources : [options.sources])\n : null;\n\n // Phase: 'select' | 'edge' | 'form' | 'pick'\n this._phase = 'select';\n this._selectedFeature = null;\n this._selectedSource = null;\n this._selectedEdge = null; // [p0, p1] — the edge the user clicked\n this._dividedFeatures = null; // features created after divide (for pick phase)\n\n // Overlay layer for polygon highlight\n this._overlaySource = new VectorSource({ useSpatialIndex: false });\n this._overlayLayer = new VectorLayer({\n source: this._overlaySource,\n displayInLayerSwitcher: false,\n style: HIGHLIGHT_STYLE,\n });\n\n // Overlay layer for edge highlight\n this._edgeSource = new VectorSource({ useSpatialIndex: false });\n this._edgeLayer = new VectorLayer({\n source: this._edgeSource,\n displayInLayerSwitcher: false,\n style: EDGE_STYLE,\n });\n }\n\n /* ------------------------------------------------------------------ */\n /* Map lifecycle */\n /* ------------------------------------------------------------------ */\n\n setMap(map) {\n if (this.getMap()) {\n this.getMap().removeLayer(this._overlayLayer);\n this.getMap().removeLayer(this._edgeLayer);\n }\n super.setMap(map);\n if (map) {\n this._overlayLayer.setMap(map);\n this._edgeLayer.setMap(map);\n }\n }\n\n setActive(active) {\n super.setActive(active);\n if (!active) {\n this._reset();\n }\n }\n\n /* ------------------------------------------------------------------ */\n /* Source helpers */\n /* ------------------------------------------------------------------ */\n\n _getSources() {\n if (this._sources) return this._sources;\n if (!this.getMap()) return [];\n const sources = [];\n const collect = (layers) => {\n layers.forEach((layer) => {\n if (layer.getVisible()) {\n if (layer.getSource && layer.getSource() instanceof VectorSource) {\n sources.push(layer.getSource());\n } else if (layer.getLayers) {\n collect(layer.getLayers());\n }\n }\n });\n };\n collect(this.getMap().getLayers());\n return sources;\n }\n\n /* ------------------------------------------------------------------ */\n /* Event router */\n /* ------------------------------------------------------------------ */\n\n _handleEvent(e) {\n if (!this.getActive()) return true;\n\n // Escape cancels at any phase\n if (e.type === 'keydown' && e.originalEvent?.key === 'Escape') {\n if (this._phase === 'form') {\n this.cancelDivide();\n } else {\n this._reset();\n }\n return false;\n }\n\n if (this._phase === 'select') {\n if (e.type === 'pointermove') return this._onSelectMove(e);\n if (e.type === 'singleclick') return this._onSelectClick(e);\n }\n\n if (this._phase === 'edge') {\n if (e.type === 'pointermove') return this._onEdgeMove(e);\n if (e.type === 'singleclick') return this._onEdgeClick(e);\n }\n\n if (this._phase === 'pick') {\n if (e.type === 'pointermove') return this._onPickMove(e);\n if (e.type === 'singleclick') return this._onPickClick(e);\n }\n\n return true;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 1: SELECT polygon */\n /* ------------------------------------------------------------------ */\n\n _onSelectMove(e) {\n const map = this.getMap();\n if (!map) return true;\n\n this._overlaySource.clear();\n\n const hit = this._closestPolygon(e);\n if (hit) {\n const clone = hit.feature.clone();\n this._overlaySource.addFeature(clone);\n map.getTargetElement().style.cursor = 'pointer';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onSelectClick(e) {\n const hit = this._closestPolygon(e);\n if (!hit) return true;\n\n this._selectedFeature = hit.feature;\n this._selectedSource = hit.source;\n\n // Keep polygon highlight visible during edge phase\n this._overlaySource.clear();\n const clone = hit.feature.clone();\n clone.set('_permanent', true);\n this._overlaySource.addFeature(clone);\n\n this._phase = 'edge';\n showToast('Click the edge to divide along.', 'info', 3000);\n return false;\n }\n\n _closestPolygon(e) {\n let best = null;\n let bestDist = this.snapDistance_ + 1;\n\n for (const source of this._getSources()) {\n const feat = source.getClosestFeatureToCoordinate(e.coordinate);\n if (!feat) continue;\n const geom = feat.getGeometry();\n if (!geom) continue;\n const type = geom.getType();\n if (type !== 'Polygon' && type !== 'MultiPolygon') continue;\n\n const closest = geom.getClosestPoint(e.coordinate);\n const line = new LineString([e.coordinate, closest]);\n const distPx = line.getLength() / e.frameState.viewState.resolution;\n\n if (distPx < bestDist) {\n bestDist = distPx;\n best = { feature: feat, source };\n }\n }\n return best;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 2: EDGE selection */\n /* ------------------------------------------------------------------ */\n\n _onEdgeMove(e) {\n const map = this.getMap();\n if (!map) return true;\n\n this._edgeSource.clear();\n\n const edge = this._closestEdgeSegment(this._selectedFeature, e);\n if (edge) {\n const edgeFeat = new Feature(new LineString([edge.segStart, edge.segEnd]));\n this._edgeSource.addFeature(edgeFeat);\n map.getTargetElement().style.cursor = 'crosshair';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onEdgeClick(e) {\n const edge = this._closestEdgeSegment(this._selectedFeature, e);\n if (!edge) return true;\n\n this._selectedEdge = [edge.segStart, edge.segEnd];\n this._edgeSource.clear();\n\n this._phase = 'form';\n\n // Dispatch divideform so MapView can show the popup\n const geom = this._selectedFeature.getGeometry();\n const ext = geom.getExtent();\n const center = [(ext[0] + ext[2]) / 2, (ext[1] + ext[3]) / 2];\n\n this.dispatchEvent({\n type: 'divideform',\n feature: this._selectedFeature,\n source: this._selectedSource,\n coordinate: center,\n });\n\n return false;\n }\n\n /**\n * Find the closest edge segment of a polygon feature to the cursor.\n */\n _closestEdgeSegment(feature, e) {\n const geom = feature.getGeometry();\n let ring;\n if (geom.getType() === 'Polygon') {\n ring = geom.getCoordinates()[0];\n } else if (geom.getType() === 'MultiPolygon') {\n ring = geom.getCoordinates()[0][0];\n } else {\n return null;\n }\n\n const resolution = e.frameState.viewState.resolution;\n let bestDist = Infinity;\n let bestSeg = null;\n const n = ring.length - 1;\n\n for (let i = 0; i < n; i++) {\n const a = ring[i];\n const b = ring[i + 1];\n const dx = b[0] - a[0], dy = b[1] - a[1];\n const lenSq = dx * dx + dy * dy;\n if (lenSq < 1e-20) continue;\n\n let t = ((e.coordinate[0] - a[0]) * dx + (e.coordinate[1] - a[1]) * dy) / lenSq;\n t = Math.max(0, Math.min(1, t));\n const projX = a[0] + t * dx, projY = a[1] + t * dy;\n const distPx = Math.sqrt((e.coordinate[0] - projX) ** 2 + (e.coordinate[1] - projY) ** 2) / resolution;\n\n if (distPx < bestDist) {\n bestDist = distPx;\n bestSeg = { segStart: a, segEnd: b };\n }\n }\n return bestDist <= this.snapDistance_ ? bestSeg : null;\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 3: FORM — called externally by the popup */\n /* ------------------------------------------------------------------ */\n\n /**\n * Divide the selected polygon into `n` equal-area pieces.\n * Called by the MapView popup's Confirm handler.\n *\n * @param {number} n Number of pieces (>= 2)\n */\n performDivide(n) {\n if (this._phase !== 'form' || !this._selectedFeature) return;\n\n const feature = this._selectedFeature;\n const source = this._selectedSource;\n const geom = feature.getGeometry();\n\n let polygonCoords;\n if (geom.getType() === 'Polygon') {\n polygonCoords = geom.getCoordinates();\n } else if (geom.getType() === 'MultiPolygon') {\n polygonCoords = geom.getCoordinates()[0];\n }\n\n const result = dividePolygon(polygonCoords, n, this._selectedEdge);\n\n if (!result.pieces) {\n showToast(result.error || 'Division failed.', 'error', 5000);\n this._reset();\n return;\n }\n\n // Create N new coloured features\n const colors = pieceColors(n);\n const newFeatures = result.pieces.map((coords, i) => {\n const f = feature.clone();\n f.setGeometry(new PolygonGeom(coords));\n f.setStyle(new Style({\n stroke: new Stroke({ color: colors[i].stroke, width: 2.5 }),\n fill: new Fill({ color: colors[i].fill }),\n }));\n return f;\n });\n\n // Dispatch beforedivide (UndoRedo compatible)\n const evtData = {\n type: 'beforedivide',\n original: feature,\n features: newFeatures,\n };\n this.dispatchEvent(evtData);\n source.dispatchEvent({ ...evtData });\n\n // Replace original with pieces. Group the remove + all the adds into a\n // single UndoRedo block (map-level undoblockstart/undoblockend) so the\n // whole divide is reversed by ONE undo press regardless of piece count.\n const divideMap = this.getMap();\n divideMap?.dispatchEvent('undoblockstart');\n source.removeFeature(feature);\n for (const f of newFeatures) {\n source.addFeature(f);\n }\n divideMap?.dispatchEvent('undoblockend');\n\n // Dispatch afterdivide\n const afterEvt = {\n type: 'afterdivide',\n original: feature,\n features: newFeatures,\n };\n this.dispatchEvent(afterEvt);\n source.dispatchEvent({ ...afterEvt });\n\n // If original was a parcel, enter pick phase for UPN assignment\n const isParcel = feature.get('_layerType') === 'parcel';\n if (isParcel) {\n this._dividedFeatures = newFeatures;\n this._phase = 'pick';\n showToast('Click the polygon that should keep the original identifier.', 'info', 5000);\n\n this.dispatchEvent({\n type: 'dividedparcel',\n features: newFeatures,\n originalProps: feature.getProperties(),\n source,\n });\n } else {\n showToast(`Polygon divided into ${n} equal pieces.`, 'success');\n this._reset();\n }\n }\n\n /* ------------------------------------------------------------------ */\n /* Phase 4: PICK — select which piece keeps the UPN */\n /* ------------------------------------------------------------------ */\n\n _onPickMove(e) {\n const map = this.getMap();\n if (!map) return true;\n\n this._overlaySource.clear();\n\n // Highlight whichever divided piece is under the cursor\n const hit = this._closestDividedPiece(e);\n if (hit) {\n const clone = hit.clone();\n this._overlaySource.addFeature(clone);\n map.getTargetElement().style.cursor = 'pointer';\n } else {\n map.getTargetElement().style.cursor = '';\n }\n return true;\n }\n\n _onPickClick(e) {\n const hit = this._closestDividedPiece(e);\n if (!hit) return true;\n\n this.dispatchEvent({\n type: 'dividepick',\n picked: hit,\n features: this._dividedFeatures,\n });\n\n this._reset();\n return false;\n }\n\n /**\n * Find the closest divided piece to the cursor.\n */\n _closestDividedPiece(e) {\n if (!this._dividedFeatures) return null;\n let best = null;\n let bestDist = this.snapDistance_ + 1;\n\n for (const feat of this._dividedFeatures) {\n const geom = feat.getGeometry();\n if (!geom) continue;\n const closest = geom.getClosestPoint(e.coordinate);\n const line = new LineString([e.coordinate, closest]);\n const distPx = line.getLength() / e.frameState.viewState.resolution;\n if (distPx < bestDist) {\n bestDist = distPx;\n best = feat;\n }\n }\n return best;\n }\n\n /**\n * Cancel the divide operation and return to select phase.\n * Called by the MapView popup's Cancel handler.\n */\n cancelDivide() {\n this.dispatchEvent({ type: 'dividecancel' });\n this._reset();\n }\n\n /* ------------------------------------------------------------------ */\n /* Reset */\n /* ------------------------------------------------------------------ */\n\n _reset() {\n this._phase = 'select';\n this._selectedFeature = null;\n this._selectedSource = null;\n this._selectedEdge = null;\n this._dividedFeatures = null;\n this._overlaySource.clear();\n this._edgeSource.clear();\n\n const map = this.getMap();\n if (map) {\n map.getTargetElement().style.cursor = '';\n }\n }\n}\n","/**\n * MapView Component\n *\n * OpenLayers map with ol-ext LayerSwitcher for base map selection.\n *\n * Usage:\n * import { MapView } from './components/MapView.js';\n *\n * const map = new MapView('map', {\n * center: [-1.5, 7.5], // Ghana\n * zoom: 7,\n * basemap: 'osm'\n * });\n *\n * map.onClick((lon, lat) => console.log('Clicked:', lon, lat));\n * map.addMarker(lon, lat, { name: 'Point A' });\n */\n\nimport Map from 'ol/Map';\nimport View from 'ol/View';\nimport Overlay from 'ol/Overlay';\nimport TileLayer from 'ol/layer/Tile';\nimport ImageLayer from 'ol/layer/Image';\nimport LayerGroup from 'ol/layer/Group';\nimport VectorLayer from 'ol/layer/Vector';\nimport VectorImageLayer from 'ol/layer/VectorImage';\nimport VectorSource from 'ol/source/Vector';\nimport ImageWMS from 'ol/source/ImageWMS';\nimport TileWMS from 'ol/source/TileWMS';\n// NOTE: Cloud-Optimized GeoTIFF support (ol/source/GeoTIFF + ol/layer/WebGLTile)\n// is imported lazily inside addCOGLayer(). The underlying geotiff.js library adds\n// ~100 kB to the bundle, which shouldn't be paid by field users who never open a\n// raster on a metered connection.\nimport OSM from 'ol/source/OSM';\nimport XYZ from 'ol/source/XYZ';\nimport { fromLonLat, toLonLat } from 'ol/proj';\nimport { Point, LineString, Polygon as PolygonGeom } from 'ol/geom';\nimport Feature from 'ol/Feature';\nimport { Style, Circle, Fill, Stroke, Text } from 'ol/style';\nimport GeoJSON from 'ol/format/GeoJSON';\nimport { getArea, getLength } from 'ol/sphere';\nimport { fromCircle } from 'ol/geom/Polygon';\nimport ScaleLine from 'ol/control/ScaleLine';\nimport { formatLength, formatLengthFull, formatArea, formatAreaFull } from '../units.js';\n\n// ol-ext LayerSwitcher\nimport LayerSwitcher from 'ol-ext/control/LayerSwitcher';\n\n// ol-ext SearchNominatim\nimport SearchNominatim from 'ol-ext/control/SearchNominatim';\n\n// ol-ext EditBar for drawing/editing features\nimport EditBar from 'ol-ext/control/EditBar';\nimport Bar from 'ol-ext/control/Bar';\nimport Button from 'ol-ext/control/Button';\n\n// ol-ext TouchCursor for touch-enabled devices\nimport TouchCursor from 'ol-ext/interaction/TouchCursor';\n\n// ol-ext ModifyFeature for cross-layer modification\nimport ModifyFeature from 'ol-ext/interaction/ModifyFeature';\n\n// ol-ext UndoRedo interaction\nimport UndoRedo from 'ol-ext/interaction/UndoRedo';\n\n// ol-ext SnapGuides — snaps drawing vertices to alignment guides\nimport SnapGuides from 'ol-ext/interaction/SnapGuides';\n\n// ol Select interaction (for custom multi-layer Select)\nimport Select from 'ol/interaction/Select';\nimport DragBox from 'ol/interaction/DragBox';\nimport { click as clickCondition, platformModifierKeyOnly, shiftKeyOnly } from 'ol/events/condition';\n\n// ol-ext Split interaction (for line splitting) and Toggle control\nimport Split from 'ol-ext/interaction/Split';\nimport Toggle from 'ol-ext/control/Toggle';\nimport TextButton from 'ol-ext/control/TextButton';\n\n// Custom polygon split interaction\nimport { PolygonSplitInteraction } from '../interactions/PolygonSplitInteraction.js';\n\n// Custom polygon merge interaction\nimport { PolygonMergeInteraction } from '../interactions/PolygonMergeInteraction.js';\n\n// Custom polygon divide interaction\nimport { PolygonDivideInteraction } from '../interactions/PolygonDivideInteraction.js';\n\n// Toast notifications\nimport { showToast } from '../toast.js';\n\n// CSS imports\nimport 'ol/ol.css';\nimport 'ol-ext/dist/ol-ext.css';\nimport '../styles/layerswitcher.css';\n\nexport class MapView {\n constructor(targetId, options = {}) {\n this.options = options;\n this.markerSource = new VectorSource();\n this.clickCallbacks = [];\n\n // Category emoji and label mapping\n // Add new categories here - they will automatically appear in the dropdown\n this.categoryEmojis = {\n 'default': { emoji: '📍', label: 'Default' },\n 'water': { emoji: '💧', label: 'Water Point' },\n 'school': { emoji: '🏫', label: 'School' },\n 'health': { emoji: '🏥', label: 'Health Facility' },\n 'market': { emoji: '🏪', label: 'Market' },\n 'other': { emoji: '📌', label: 'Other' }\n };\n\n // Helper to get emoji for a category\n this.getEmoji = (category) => {\n const cat = this.categoryEmojis[category];\n return cat ? cat.emoji : '📍';\n };\n\n // Helper to generate category options HTML for select dropdowns\n this.getCategoryOptionsHtml = () => {\n return Object.entries(this.categoryEmojis)\n .map(([key, { emoji, label }]) =>\n `${emoji} ${label} `\n )\n .join('\\n ');\n };\n\n // Create emoji style helper\n this.createEmojiStyle = (emoji, fontSize = 24) => {\n return new Style({\n text: new Text({\n text: emoji,\n font: `${fontSize}px sans-serif`,\n textBaseline: 'bottom',\n textAlign: 'center',\n offsetY: -5,\n }),\n });\n };\n\n // Default marker style (pin emoji)\n this.defaultStyle = this.createEmojiStyle('📍', 32);\n\n // Selected marker style (larger)\n this.selectedStyle = this.createEmojiStyle('📍', 42);\n\n // Initialize category styles with emojis\n this.categoryStyles = {};\n for (const [category, { emoji }] of Object.entries(this.categoryEmojis)) {\n this.categoryStyles[category] = this.createEmojiStyle(emoji, 32);\n }\n\n // Create base layers group\n const baseLayers = this.createBaseLayers(options.basemap || 'topo');\n\n // Markers layer — hidden at startup; the user enables it from the\n // LayerSwitcher when they want to see location markers / category pins.\n this.markersLayer = new VectorLayer({\n title: 'Markers',\n source: this.markerSource,\n style: (feature) => this.getFeatureStyle(feature),\n visible: false,\n });\n\n // Overlay layers group (for remote data like boundaries)\n this.overlayGroup = new LayerGroup({\n title: 'Overlays',\n });\n\n // Create map\n // Layer order (bottom → top): Base Maps, Markers, Overlays\n // MapTools will insert Measurements and Drawings between Markers and Overlays.\n // initEditBar() will insert its Drawings group above those.\n // Final LayerSwitcher order (top → bottom):\n // Overlays, Drawings, Measurements, Markers, Base Maps\n this.map = new Map({\n target: targetId,\n layers: [\n baseLayers,\n this.markersLayer,\n this.overlayGroup,\n ],\n view: new View({\n center: fromLonLat(options.center || [0, 0]),\n zoom: options.zoom || 2,\n minZoom: options.minZoom || 2,\n maxZoom: options.maxZoom || 19,\n })\n });\n\n // Add LayerSwitcher control\n const layerSwitcher = new LayerSwitcher({\n collapsed: true,\n mouseover: true,\n extent: true,\n trash: false,\n oninfo: null,\n });\n this.map.addControl(layerSwitcher);\n\n // Apply the LUSPA branded icon to the LayerSwitcher's collapse button.\n // Done in JS so the URL respects Vite's BASE_URL — survives deployment\n // under any sub-path.\n // NOTE: folder name is `app-icons`, NOT `icons` — Apache aliases `/icons/`\n // by default to its own directory-listing thumbnails, which would\n // intercept this request server-side.\n queueMicrotask(() => {\n const btn = layerSwitcher.element?.querySelector(':scope > button');\n if (btn) {\n const baseUrl = (import.meta.env?.BASE_URL || '/').replace(/\\/?$/, '/');\n btn.style.backgroundImage = `url('${baseUrl}app-icons/luspa-72x72.png')`;\n }\n });\n\n // ------------------------------------------------------------------\n // Decorate each layer's as it's rendered:\n // • inject a type-tag chip (WMS / XYZ / VEC / …) next to the label\n // • add a green \"+\" button to the \"External Source\" group header\n // After each draw cycle, refresh the panel chrome (active count badge\n // + footer reset button). Schedule once per cycle via a microtask.\n // ------------------------------------------------------------------\n let _lsChromeScheduled = false;\n layerSwitcher.on('drawlist', (evt) => {\n this._decorateLayerListItem(evt.layer, evt.li);\n\n if (!_lsChromeScheduled) {\n _lsChromeScheduled = true;\n queueMicrotask(() => {\n _lsChromeScheduled = false;\n this._refreshLayerSwitcherChrome(layerSwitcher);\n });\n }\n });\n\n // Re-render the chrome whenever any layer's visibility changes (so the\n // active-count badge updates even when the user toggles via the panel).\n this.map.getLayers().on('change', () => {\n this._refreshLayerSwitcherChrome(layerSwitcher);\n });\n // Hook visibility events on every layer (recursive into groups).\n this._wireLayerSwitcherVisibilityHooks(layerSwitcher);\n\n // Create the add-layer dialog (hidden by default)\n this._createAddLayerDialog();\n\n // Create the legend panel (shows legends for visible layers that have one)\n this._createLegendPanel();\n\n // Add ScaleBar control\n this.scaleBar = new ScaleLine({\n bar: true,\n steps: 4,\n text: true,\n minWidth: 140,\n });\n this.map.addControl(this.scaleBar);\n\n // GPS rendering layers (current position + recorded trail) and the\n // expandable \"My Location\" control (Locate Me + Record Trail sub-buttons).\n this._initGpsRendering();\n this._createLocationControl();\n\n // Dedicated base-map picker — sits above the My Location button\n this._createBaseMapPicker();\n\n // Add SearchNominatim control\n const searchNominatim = new SearchNominatim({\n placeholder: 'Search location...',\n typing: 300, // Delay before search (ms)\n minLength: 3, // Minimum characters to start search\n maxItems: 10, // Maximum results to show\n collapsed: true, // Start collapsed\n // Limit search to improve relevance (can be adjusted)\n // countrycodes: 'gh', // Uncomment to limit to Ghana\n });\n this.map.addControl(searchNominatim);\n\n // Handle search result selection\n searchNominatim.on('select', (event) => {\n const searchResult = event.search;\n if (searchResult) {\n // SearchNominatim returns a plain object with lon/lat properties (as strings)\n const lon = parseFloat(searchResult.lon);\n const lat = parseFloat(searchResult.lat);\n const lonLat = [lon, lat];\n const coordinate = fromLonLat(lonLat);\n\n // Navigate to the selected location\n this.navigateTo(lon, lat, 14);\n\n // Trigger search select callbacks\n const result = {\n coordinate: coordinate,\n lonLat: lonLat,\n name: searchResult.display_name || searchResult.name || 'Unknown',\n searchResult: searchResult,\n };\n this.searchSelectCallbacks.forEach(cb => cb(result));\n }\n });\n\n // Store reference for external access\n this.searchNominatim = searchNominatim;\n this.searchSelectCallbacks = [];\n\n // Track selected feature\n this.selectedFeature = null;\n\n // Create popup overlay for hover\n this.createPopup();\n\n // Create info popup for double-click feature details\n this.createInfoPopup();\n\n // Create Add Location popup form\n this.createAddLocationPopup();\n\n // Create editable parcel form popup\n this.createParcelEditPopup();\n\n // Create drawn polygon attribute popup\n this.createDrawnPolygonPopup();\n\n // Create merge identifier (UPN) chooser popup\n this.createMergePopup();\n\n // Create divide polygon popup (number input)\n this.createDividePopup();\n\n // Double-click callbacks\n this.dblClickCallbacks = [];\n\n // EditBar is set up lazily via initEditBar() once the Drawings\n // layer/group is available (called from main.js after loadLayers).\n this.editBar = null;\n this.drawingsSource = null;\n this.drawingsLayer = null;\n this.touchCursor = null;\n this._editBarActive = false;\n }\n\n // ============================================================================\n // EditBar + Drawings Layer + TouchCursor\n // ============================================================================\n\n /**\n * Initialise the EditBar with a dedicated \"Drawings\" LayerGroup.\n *\n * A \"Drawings\" LayerGroup is created at the top of the overlay stack\n * containing a \"sketches\" VectorLayer for storing drawn features.\n * The EditBar, Select and Modify interactions are only active while\n * edit mode is on; in all other cases normal click / double-click\n * behaviour is preserved.\n *\n * Call this once from main.js after the layer groups have been created.\n */\n initEditBar() {\n // 1. Create a \"Drawings\" LayerGroup with a \"sketches\" VectorLayer inside\n this.drawingsSource = new VectorSource();\n this.drawingsLayer = new VectorLayer({\n title: 'sketches',\n source: this.drawingsSource,\n style: new Style({\n stroke: new Stroke({ color: '#f59e0b', width: 2.5 }),\n fill: new Fill({ color: 'rgba(245,158,11,0.15)' }),\n image: new Circle({\n radius: 6,\n fill: new Fill({ color: '#f59e0b' }),\n stroke: new Stroke({ color: '#fff', width: 1.5 }),\n }),\n }),\n });\n\n this._drawingsGroup = new LayerGroup({\n title: 'Drawings',\n layers: [this.drawingsLayer],\n });\n // Insert as a top-level map layer just before the Overlays group so the\n // LayerSwitcher order is: Overlays > Drawings > Measurements > Markers > Base Maps.\n // Find Overlays by reference rather than assuming it is the last layer —\n // other layers (e.g. the GPS trail/position layers added by\n // _initGpsRendering) may sit on top of it.\n const mapLayers = this.map.getLayers();\n const overlayIdx = mapLayers.getArray().indexOf(this.overlayGroup);\n mapLayers.insertAt(overlayIdx >= 0 ? overlayIdx : mapLayers.getLength(), this._drawingsGroup);\n\n // 2. Create a Select interaction that works on ALL vector layers.\n // It starts INACTIVE so it doesn't steal clicks from normal handlers.\n // Multi-select: a plain click selects a single feature (replacing the\n // selection); Shift-click toggles a feature in/out of the selection so\n // the user can build up a set to delete or move together. Shift-click is\n // the ol default toggleCondition, but we set it explicitly for clarity.\n this._selectInteraction = new Select({\n condition: clickCondition,\n toggleCondition: shiftKeyOnly,\n filter: (feature, layer) => !!layer,\n layers: (layer) => layer instanceof VectorLayer,\n });\n this._selectInteraction.setActive(false);\n this.map.addInteraction(this._selectInteraction);\n\n // 2b. Box-select — Ctrl/Cmd + drag draws a rectangle and adds every\n // intersecting feature to the selection. This is the discoverable\n // \"select multiple\" gesture (Shift-click also works, one at a time).\n // Plain drag still pans the map; Shift-drag is left free. The box is\n // only live while the Select tool itself is active (see the\n // change:active wiring below) so it never interferes with drawing.\n this._dragBoxSelect = new DragBox({ condition: platformModifierKeyOnly });\n this._dragBoxSelect.setActive(false);\n this.map.addInteraction(this._dragBoxSelect);\n this._dragBoxSelect.on('boxend', () => {\n const extent = this._dragBoxSelect.getGeometry().getExtent();\n const selected = this._selectInteraction.getFeatures();\n // Walk every visible vector layer the Select interaction would accept\n // and add features whose geometry intersects the box.\n this.map.getLayers().forEach((layer) => this._boxAddFromLayer(layer, extent, selected));\n this._refreshVertexOverlay?.();\n });\n // Keep box-select armed only while the Select sub-tool is active.\n this._selectInteraction.on('change:active', () => {\n this._dragBoxSelect.setActive(this._selectInteraction.getActive());\n });\n\n // 3. Create a ModifyFeature interaction bound to the selection.\n // Also starts inactive.\n this._modifyInteraction = new ModifyFeature({\n features: this._selectInteraction.getFeatures(),\n });\n this._modifyInteraction.setActive(false);\n\n // 3b. Fire onFeatureModified callbacks when a modification completes.\n // Consumers attach via onFeatureModified() and decide for themselves\n // whether to react (e.g. the staged-import code persists geometry\n // changes back to external_import_features).\n this._modifyInteraction.on('modifyend', (evt) => {\n if (!this._featureModifiedCallbacks?.length) return;\n const features = evt.features?.getArray?.() || [];\n for (const f of features) {\n for (const cb of this._featureModifiedCallbacks) {\n try { cb(f); } catch (err) { console.warn('[MapView] onFeatureModified callback failed:', err); }\n }\n }\n });\n\n // 4. UndoRedo interaction — watches the drawings source\n this._undoRedo = new UndoRedo();\n this.map.addInteraction(this._undoRedo);\n\n // 5. Build the EditBar — all interactions enabled.\n this.editBar = new EditBar({\n source: this.drawingsSource,\n interactions: {\n Select: this._selectInteraction,\n ModifySelect: this._modifyInteraction,\n DrawPoint: true,\n DrawLine: true,\n DrawPolygon: true,\n DrawRegular: true,\n DrawHole: true,\n Delete: true,\n Info: true,\n Transform: true,\n Split: false,\n },\n });\n this.map.addControl(this.editBar);\n\n // 5b. Persistent vertex overlay — when edit mode is active and the user\n // selects a polygon (or line) for modification, render a small dot\n // at every vertex so the user can see all editable nodes at a glance.\n // ol-ext's ModifyFeature only renders the closest vertex on hover; this\n // overlay complements that without subclassing the interaction.\n this._setupVertexOverlay();\n\n // 6. Add extra buttons (Undo, Redo, Save) as a sub-bar\n // inside the EditBar so they appear inline.\n const extraBar = new Bar({\n group: true,\n // Stable class so CSS can move this group (undo/redo/save/snap) to a\n // second row on small screens — see `.ol-editbar-actions` media query.\n className: 'ol-editbar-actions',\n controls: [\n new Button({\n html: '>}\n */\n _collectAllVertices(geom) {\n const out = [];\n const isCoord = (v) => Array.isArray(v) && typeof v[0] === 'number';\n\n const visitRing = (ring, isPolygonRing) => {\n const len = isPolygonRing && ring.length > 1 ? ring.length - 1 : ring.length;\n for (let i = 0; i < len; i++) out.push(ring[i]);\n };\n\n const type = geom.getType();\n const coords = geom.getCoordinates();\n\n switch (type) {\n case 'Polygon':\n // coords = [outerRing, hole1, hole2, …]\n for (const ring of coords) visitRing(ring, true);\n break;\n case 'MultiPolygon':\n // coords = [poly1, poly2, …]; each poly = [outerRing, hole1, …]\n for (const poly of coords) for (const ring of poly) visitRing(ring, true);\n break;\n case 'LineString':\n visitRing(coords, false);\n break;\n case 'MultiLineString':\n for (const line of coords) visitRing(line, false);\n break;\n default:\n // Fallback: deep walk to find arrays of [x, y]\n const walk = (v) => {\n if (isCoord(v)) out.push(v);\n else if (Array.isArray(v)) for (const sub of v) walk(sub);\n };\n walk(coords);\n }\n return out;\n }\n\n /**\n * Get the Drawings layer for external access.\n * @returns {VectorLayer}\n */\n getDrawingsLayer() {\n return this.drawingsLayer;\n }\n\n /**\n * Get the Drawings source for external access.\n * @returns {VectorSource}\n */\n getDrawingsSource() {\n return this.drawingsSource;\n }\n\n /**\n * Get the EditBar control for external access.\n * @returns {EditBar}\n */\n getEditBar() {\n return this.editBar;\n }\n\n /**\n * Update the ScaleBar units ('metric' or 'imperial').\n * @param {'metric'|'imperial'} system\n */\n setScaleBarUnits(system) {\n if (this.scaleBar) {\n this.scaleBar.setUnits(system === 'imperial' ? 'imperial' : 'metric');\n }\n }\n\n /**\n * Create the popup overlay element and add to map\n */\n createPopup() {\n // Create popup container element\n this.popupElement = document.createElement('div');\n this.popupElement.className = 'map-popup';\n this.popupElement.style.cssText = `\n position: absolute;\n background: var(--card, #fff);\n color: var(--card-foreground, #1e1a4b);\n border-radius: 8px;\n padding: 10px 14px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.25);\n font-family: var(--font-body, 'Exo', sans-serif);\n font-size: 13px;\n min-width: 150px;\n max-width: 280px;\n pointer-events: none;\n z-index: 1000;\n border: 1px solid var(--border, #1e1a4b1f);\n `;\n\n // Create the overlay\n this.popup = new Overlay({\n element: this.popupElement,\n positioning: 'bottom-center',\n offset: [0, -15],\n stopEvent: false,\n });\n\n this.map.addOverlay(this.popup);\n\n // Set up hover handler\n this.setupHoverPopup();\n }\n\n /**\n * Set up the hover popup behavior\n */\n setupHoverPopup() {\n let currentFeature = null;\n\n this.map.on('pointermove', (evt) => {\n if (evt.dragging) {\n this.hidePopup();\n return;\n }\n\n // Only find features that are location markers (have 'name' property)\n const feature = this.map.forEachFeatureAtPixel(evt.pixel, (f) => {\n // Only return features that have a 'name' property (location markers)\n if (f.get('name')) {\n return f;\n }\n return null;\n });\n\n if (feature && feature !== currentFeature) {\n currentFeature = feature;\n this.showPopup(feature, evt.coordinate);\n } else if (!feature && currentFeature) {\n currentFeature = null;\n this.hidePopup();\n }\n\n // Update cursor - only show pointer for location markers\n this.map.getTargetElement().style.cursor = feature ? 'pointer' : '';\n });\n\n // Hide popup when mouse leaves the map\n this.map.getTargetElement().addEventListener('mouseleave', () => {\n this.hidePopup();\n currentFeature = null;\n });\n }\n\n /**\n * Show popup with feature attributes\n */\n showPopup(feature, coordinate) {\n const name = feature.get('name') || 'Unnamed';\n const category = feature.get('category') || 'default';\n const description = feature.get('description');\n const lon = feature.get('lon');\n const lat = feature.get('lat');\n const emoji = this.getEmoji(category);\n\n // Build popup content\n let html = `\n \n ${emoji} ${this.escapeHtml(name)}\n
\n `;\n\n // Category badge\n const categoryColors = {\n 'water': '#3b82f6',\n 'school': '#f59e0b',\n 'health': '#ef4444',\n 'market': '#8b5cf6',\n 'default': '#2d5016',\n 'other': '#6b7280'\n };\n const catColor = categoryColors[category] || '#6b7280';\n html += `\n \n ${category} \n
\n `;\n\n // Description if available\n if (description) {\n html += `\n \n ${this.escapeHtml(description)}\n
\n `;\n }\n\n // Coordinates\n if (lon !== undefined && lat !== undefined) {\n html += `\n \n ${Number(lon).toFixed(5)}, ${Number(lat).toFixed(5)}\n
\n `;\n }\n\n this.popupElement.innerHTML = html;\n this.popup.setPosition(coordinate);\n }\n\n /**\n * Hide the popup\n */\n hidePopup() {\n this.popup.setPosition(undefined);\n }\n\n /**\n * Create the info popup overlay for double-click feature details\n */\n createInfoPopup() {\n this.infoPopupElement = document.createElement('div');\n this.infoPopupElement.className = 'map-info-popup';\n this.infoPopupElement.style.cssText = `\n position: absolute;\n background: var(--card, #fff);\n color: var(--card-foreground, #1e1a4b);\n border-radius: 10px;\n padding: 0;\n box-shadow: 0 4px 16px rgba(0,0,0,0.3);\n font-family: var(--font-body, 'Exo', sans-serif);\n font-size: 13px;\n min-width: 220px;\n max-width: 320px;\n max-height: 70vh;\n display: flex;\n flex-direction: column;\n z-index: 1001;\n border: 1px solid var(--border, #1e1a4b1f);\n overflow: hidden;\n `;\n\n this.infoPopup = new Overlay({\n element: this.infoPopupElement,\n positioning: 'bottom-center',\n offset: [0, -10],\n stopEvent: true,\n autoPan: true,\n autoPanAnimation: { duration: 250 },\n });\n\n this.map.addOverlay(this.infoPopup);\n }\n\n /**\n * Show the info popup with feature attributes and area\n * @param {Feature} feature - OpenLayers feature\n * @param {Array} coordinate - Map coordinate [x, y]\n * @param {Object} [options] - Display options\n * @param {string} [options.title='Feature Info'] - Popup header title\n * @param {string} [options.color='#e11d48'] - Header background colour\n */\n showInfoPopup(feature, coordinate, options = {}) {\n const { title = 'Feature Info', color = '#e11d48' } = options;\n const properties = feature.getProperties();\n const geometry = feature.getGeometry();\n const geomType = geometry.getType();\n\n // Build attributes table rows (skip geometry and internal keys)\n const skipKeys = ['geometry', '_layerType'];\n let rows = '';\n for (const [key, value] of Object.entries(properties)) {\n if (skipKeys.includes(key) || value === undefined || value === null) continue;\n rows += `\n \n ${this.escapeHtml(key)} \n ${this.escapeHtml(String(value))} \n \n `;\n }\n\n // Add measurement row based on geometry type\n if (geomType === 'Polygon' || geomType === 'MultiPolygon') {\n // Area for polygons\n const areaSqm = getArea(geometry, { projection: 'EPSG:3857' });\n const areaFormatted = formatAreaFull(areaSqm);\n rows += `\n \n area \n ${areaFormatted} \n \n `;\n } else if (geomType === 'LineString' || geomType === 'MultiLineString') {\n // Length for lines\n const lengthM = getLength(geometry, { projection: 'EPSG:3857' });\n const lengthFormatted = formatLengthFull(lengthM);\n rows += `\n \n length \n ${lengthFormatted} \n \n `;\n } else if (geomType === 'Point') {\n // Coordinates for points\n const coords = toLonLat(geometry.getCoordinates());\n const lon = coords[0].toFixed(6);\n const lat = coords[1].toFixed(6);\n rows += `\n \n longitude \n ${lon} \n \n \n latitude \n ${lat} \n \n `;\n }\n\n const html = `\n \n ${this.escapeHtml(title)} \n \n
\n \n `;\n\n this.infoPopupElement.innerHTML = html;\n this.infoPopup.setPosition(coordinate);\n\n // Close button handler\n this.infoPopupElement.querySelector('#info-popup-close').addEventListener('click', () => {\n this.hideInfoPopup();\n });\n }\n\n /**\n * Hide the info popup\n */\n hideInfoPopup() {\n this.infoPopup.setPosition(undefined);\n }\n\n // ============================================================================\n // Circle Intersection Analysis\n // ============================================================================\n\n /**\n * Analyse which features from overlay layers intersect a measurement circle\n * and show the results in the info popup.\n *\n * @param {Feature} circleFeature - The measurement circle feature (Circle geometry)\n * @param {Array} coordinate - Map coordinate for popup placement [x, y]\n */\n /**\n * Collect intersection results (parcels, zones, other) into a\n * structured { label, value } array for both HTML and PDF rendering.\n */\n _collectIntersectionRows(parcelFeatures, zoneFeatures, otherByLayer) {\n const dataRows = [];\n\n if (parcelFeatures.length > 0) {\n dataRows.push({ label: 'Parcels', value: String(parcelFeatures.length), color: '#0ea5e9' });\n }\n\n if (zoneFeatures.length > 0) {\n const names = zoneFeatures.map(f =>\n f.get('colzonename') || f.get('zone_name') || f.get('name') || 'unnamed'\n );\n dataRows.push({ label: 'Zones', value: String(zoneFeatures.length), color: '#7c3aed' });\n dataRows.push({ label: 'Zone Names', value: names.map(n => this.escapeHtml(n)).join(', '), color: '#7c3aed' });\n }\n\n for (const [title, features] of Object.entries(otherByLayer)) {\n dataRows.push({ label: this.escapeHtml(title), value: `${features.length} feature(s)` });\n }\n\n if (dataRows.length === 0) {\n dataRows.push({ label: '', value: 'No intersecting features found', empty: true });\n }\n\n return dataRows;\n }\n\n /**\n * Build the full popup HTML for an analysis popup (circle or area).\n *\n * @param {string} emoji - Header emoji\n * @param {string} title - e.g. \"Circle Analysis\"\n * @param {Array<{label:string, value:string, color?:string, empty?:boolean}>} dataRows\n * @returns {string} HTML\n */\n _buildAnalysisPopupHtml(emoji, title, dataRows) {\n let tableRows = '';\n for (const row of dataRows) {\n if (row.empty) {\n tableRows += `\n \n ${row.value} \n `;\n continue;\n }\n const labelColor = row.color || 'var(--muted-foreground, #7a7a7a)';\n const border = row._first ? '' : 'border-top:1px solid var(--border, #1e1a4b1f);';\n tableRows += `\n \n ${row.label} \n ${row.value} \n `;\n }\n\n return `\n \n ${emoji} ${title} \n \n
\n \n \n \n \n
`;\n }\n\n /**\n * Show the analysis popup, attach close + PDF / GIS export handlers.\n *\n * @param {string} emoji\n * @param {string} title - e.g. \"Area Analysis\" / \"Circle Analysis\"\n * @param {Array} dataRows - summary rows (PDF uses these)\n * @param {number[]} coordinate - popup anchor\n * @param {Object} [exportContext] - features + clip geometry for GIS export.\n * When omitted, the Export GIS button is\n * disabled (no features to export).\n * { kind: 'area' | 'circle',\n * clipGeometry,\n * parcelFeatures, zoneFeatures, otherByLayer }\n */\n _showAnalysisPopup(emoji, title, dataRows, coordinate, exportContext = null) {\n this.infoPopupElement.innerHTML = this._buildAnalysisPopupHtml(emoji, title, dataRows);\n this.infoPopup.setPosition(coordinate);\n\n this.infoPopupElement.querySelector('#info-popup-close').addEventListener('click', () => {\n this.hideInfoPopup();\n });\n\n // Summary rows, cleaned for the PDF report (HTML stripped, spacers removed).\n // These travel with the export event so the export modal can offer PDF\n // alongside the GIS formats — one \"Export\" entry point instead of two.\n const pdfRows = dataRows\n .filter((r) => !r.empty)\n .map((r) => ({ label: r.label, value: String(r.value).replace(/<[^>]*>/g, '') }));\n\n // Analyse — hand the intersecting features to the Analysis panel so the\n // user can run overlays / zonal statistics on just what the circle or\n // area caught. main.js owns the panel import.\n const analyseBtn = this.infoPopupElement.querySelector('#info-popup-analyse');\n if (analyseBtn) {\n const totalFeatures = exportContext\n ? exportContext.parcelFeatures.length\n + exportContext.zoneFeatures.length\n + Object.values(exportContext.otherByLayer).reduce((s, arr) => s + arr.length, 0)\n : 0;\n if (!exportContext || totalFeatures === 0) {\n analyseBtn.disabled = true;\n analyseBtn.style.opacity = '0.5';\n analyseBtn.style.cursor = 'not-allowed';\n analyseBtn.title = 'No intersecting features to analyse';\n } else {\n analyseBtn.addEventListener('click', () => {\n window.dispatchEvent(new CustomEvent('lupmis:analyse-features', {\n detail: { title, ...exportContext },\n }));\n });\n }\n }\n\n // GIS export — dispatches a window-level CustomEvent so main.js can open\n // the format/field-rename modal without MapView pulling in the writers.\n const gisBtn = this.infoPopupElement.querySelector('#info-popup-export-gis');\n if (gisBtn) {\n const total = exportContext\n ? exportContext.parcelFeatures.length\n + exportContext.zoneFeatures.length\n + Object.values(exportContext.otherByLayer).reduce((s, arr) => s + arr.length, 0)\n : 0;\n if (!exportContext || total === 0) {\n gisBtn.disabled = true;\n gisBtn.style.opacity = '0.5';\n gisBtn.style.cursor = 'not-allowed';\n gisBtn.title = 'No intersecting features to export';\n } else {\n gisBtn.addEventListener('click', () => {\n window.dispatchEvent(new CustomEvent('lupmis:export-gis', {\n detail: { title, pdfRows, ...exportContext },\n }));\n });\n }\n }\n }\n\n showCircleIntersectionPopup(circleFeature, coordinate) {\n const circleGeom = circleFeature.getGeometry();\n if (!circleGeom || typeof circleGeom.getCenter !== 'function') return;\n\n // Convert the OL Circle to a polygon (64 sides) for intersection testing\n const circlePoly = fromCircle(circleGeom, 64);\n const circleExtent = circlePoly.getExtent();\n\n const radius = circleFeature.get('_radius') || circleGeom.getRadius();\n\n // Collect intersecting features grouped by layer type\n const parcelFeatures = [];\n const zoneFeatures = [];\n const otherByLayer = {};\n\n const intersectsCircle = (feature) => {\n const geom = feature.getGeometry();\n if (!geom) return false;\n const fExtent = geom.getExtent();\n if (\n fExtent[2] < circleExtent[0] ||\n fExtent[0] > circleExtent[2] ||\n fExtent[3] < circleExtent[1] ||\n fExtent[1] > circleExtent[3]\n ) {\n return false;\n }\n return circlePoly.intersectsExtent(fExtent) && this._geometriesIntersect(circlePoly, geom);\n };\n\n const scanGroup = (group, groupTitle) => {\n group.getLayers().forEach((layer) => {\n if (layer instanceof LayerGroup) {\n scanGroup(layer, layer.get('title') || groupTitle);\n } else if (layer instanceof VectorLayer && layer.getVisible()) {\n const layerTitle = layer.get('title') || groupTitle || 'Unknown';\n const source = layer.getSource();\n if (!source) return;\n\n const candidates = source.getFeaturesInExtent(circleExtent);\n for (const f of candidates) {\n const fType = f.get('_layerType');\n if (fType === 'measure_circle' || fType === 'measure_circle_radius') continue;\n\n if (!intersectsCircle(f)) continue;\n\n if (fType === 'parcel') {\n parcelFeatures.push(f);\n } else if (fType === 'collector_zone') {\n zoneFeatures.push(f);\n } else {\n if (!otherByLayer[layerTitle]) otherByLayer[layerTitle] = [];\n otherByLayer[layerTitle].push(f);\n }\n }\n }\n });\n };\n\n scanGroup(this.overlayGroup, 'Overlays');\n\n // Build structured data rows\n const radiusFormatted = formatLength(radius);\n const areaSqm = Math.PI * radius * radius;\n const areaFormatted = formatArea(areaSqm);\n\n const dataRows = [\n { label: 'Radius', value: radiusFormatted, _first: true },\n { label: 'Area', value: areaFormatted },\n ...this._collectIntersectionRows(parcelFeatures, zoneFeatures, otherByLayer),\n ];\n\n this._showAnalysisPopup('⭕', 'Circle Analysis', dataRows, coordinate, {\n kind: 'circle',\n clipGeometry: circlePoly,\n parcelFeatures,\n zoneFeatures,\n otherByLayer,\n });\n }\n\n /**\n * Show an intersection-analysis popup for a measured area polygon.\n * Same logic as showCircleIntersectionPopup but works with an\n * arbitrary Polygon geometry instead of a circle.\n *\n * @param {Feature} polygonFeature - The measure_area feature\n * @param {number[]} coordinate - Map coordinate for the popup anchor\n */\n showAreaIntersectionPopup(polygonFeature, coordinate) {\n const polyGeom = polygonFeature.getGeometry();\n if (!polyGeom) return;\n\n const polyExtent = polyGeom.getExtent();\n\n // Compute area via ol/sphere for geodesic accuracy\n const areaSqm = getArea(polyGeom, { projection: 'EPSG:3857' });\n const areaFormatted = formatArea(areaSqm);\n\n // Compute perimeter\n const perimeterM = getLength(polyGeom, { projection: 'EPSG:3857' });\n const perimeterFormatted = formatLength(perimeterM);\n\n // Collect intersecting features grouped by layer type\n const parcelFeatures = [];\n const zoneFeatures = [];\n const otherByLayer = {};\n\n const intersectsPoly = (feature) => {\n const geom = feature.getGeometry();\n if (!geom) return false;\n const fExtent = geom.getExtent();\n if (\n fExtent[2] < polyExtent[0] ||\n fExtent[0] > polyExtent[2] ||\n fExtent[3] < polyExtent[1] ||\n fExtent[1] > polyExtent[3]\n ) {\n return false;\n }\n return polyGeom.intersectsExtent(fExtent) && this._geometriesIntersect(polyGeom, geom);\n };\n\n const scanGroup = (group, groupTitle) => {\n group.getLayers().forEach((layer) => {\n if (layer instanceof LayerGroup) {\n scanGroup(layer, layer.get('title') || groupTitle);\n } else if (layer instanceof VectorLayer && layer.getVisible()) {\n const layerTitle = layer.get('title') || groupTitle || 'Unknown';\n const source = layer.getSource();\n if (!source) return;\n\n const candidates = source.getFeaturesInExtent(polyExtent);\n for (const f of candidates) {\n const fType = f.get('_layerType');\n if (fType === 'measure_area' || fType === 'measure_circle' || fType === 'measure_circle_radius') continue;\n\n if (!intersectsPoly(f)) continue;\n\n if (fType === 'parcel') {\n parcelFeatures.push(f);\n } else if (fType === 'collector_zone') {\n zoneFeatures.push(f);\n } else {\n if (!otherByLayer[layerTitle]) otherByLayer[layerTitle] = [];\n otherByLayer[layerTitle].push(f);\n }\n }\n }\n });\n };\n\n scanGroup(this.overlayGroup, 'Overlays');\n\n // Build structured data rows\n const dataRows = [\n { label: 'Area', value: areaFormatted, _first: true },\n { label: 'Perimeter', value: perimeterFormatted },\n ...this._collectIntersectionRows(parcelFeatures, zoneFeatures, otherByLayer),\n ];\n\n this._showAnalysisPopup('📐', 'Area Analysis', dataRows, coordinate, {\n kind: 'area',\n clipGeometry: polyGeom,\n parcelFeatures,\n zoneFeatures,\n otherByLayer,\n });\n }\n\n /**\n * Test whether two geometries truly intersect (beyond just extent overlap).\n * Works for Polygon/MultiPolygon against any geometry type.\n *\n * @param {Geometry} geomA - First geometry (usually the circle polygon)\n * @param {Geometry} geomB - Second geometry\n * @returns {boolean}\n * @private\n */\n _geometriesIntersect(geomA, geomB) {\n const typeB = geomB.getType();\n\n // For polygons / multi-polygons: check if any coordinate of B is inside A,\n // or if any coordinate of A is inside B (covers overlap & containment).\n if (typeB === 'Polygon' || typeB === 'MultiPolygon') {\n // Check if any vertex of B lies inside A (use flatCoordinates for efficiency)\n const flatB = geomB.getFlatCoordinates();\n const stride = geomB.getStride();\n for (let i = 0; i < flatB.length; i += stride) {\n if (geomA.intersectsCoordinate([flatB[i], flatB[i + 1]])) return true;\n }\n // Check if any vertex of A lies inside B\n const flatA = geomA.getFlatCoordinates();\n const strideA = geomA.getStride();\n for (let i = 0; i < flatA.length; i += strideA) {\n if (geomB.intersectsCoordinate([flatA[i], flatA[i + 1]])) return true;\n }\n return false;\n }\n\n if (typeB === 'Point') {\n return geomA.intersectsCoordinate(geomB.getCoordinates());\n }\n\n if (typeB === 'LineString' || typeB === 'MultiLineString') {\n const flatB = geomB.getFlatCoordinates();\n const stride = geomB.getStride();\n for (let i = 0; i < flatB.length; i += stride) {\n if (geomA.intersectsCoordinate([flatB[i], flatB[i + 1]])) return true;\n }\n return false;\n }\n\n // Fallback: extent overlap is good enough\n return true;\n }\n\n // ============================================================================\n // Parcel Edit Popup (single-click editable form)\n // ============================================================================\n\n /**\n * Create the parcel edit popup overlay with a dynamic form.\n */\n createParcelEditPopup() {\n this.parcelEditElement = document.createElement('div');\n this.parcelEditElement.className = 'map-parcel-edit-popup';\n this.parcelEditElement.style.cssText = `\n position: absolute;\n background: var(--card, #fff);\n color: var(--card-foreground, #1e1a4b);\n border-radius: 10px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n font-family: var(--font-body, 'Exo', sans-serif);\n font-size: 13px;\n min-width: 280px;\n max-width: 360px;\n max-height: 420px;\n z-index: 1002;\n border: 2px solid var(--primary, #005eb8);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n `;\n\n this.parcelEditPopup = new Overlay({\n element: this.parcelEditElement,\n positioning: 'bottom-center',\n offset: [0, -10],\n stopEvent: true,\n autoPan: true,\n autoPanAnimation: { duration: 250 },\n });\n\n this.map.addOverlay(this.parcelEditPopup);\n\n // Callbacks for save events\n this._parcelEditCallbacks = [];\n // Track the current feature being edited\n this._parcelEditFeature = null;\n }\n\n /**\n * Show the parcel edit popup with an editable form for all feature attributes.\n * Internal keys (_layerType, geometry) are excluded from the form.\n *\n * @param {Feature} feature - The OL feature to edit\n * @param {Array} coordinate - Map coordinate [x, y]\n */\n showParcelEditPopup(feature, coordinate) {\n this._parcelEditFeature = feature;\n const properties = feature.getProperties();\n\n // Keys to skip in the form\n const skipKeys = ['geometry', '_layerType'];\n\n // Build form fields from feature properties\n let fieldsHtml = '';\n for (const [key, value] of Object.entries(properties)) {\n if (skipKeys.includes(key)) continue;\n const displayVal = (value === null || value === undefined) ? '' : String(value);\n const escapedKey = this.escapeHtml(key);\n const escapedVal = this.escapeHtml(displayVal);\n fieldsHtml += `\n \n ${escapedKey} \n
\n `;\n }\n\n const html = `\n \n ✏️ Edit Parcel \n × \n
\n \n `;\n\n this.parcelEditElement.innerHTML = html;\n this.parcelEditPopup.setPosition(coordinate);\n\n // Close / Cancel handlers\n this.parcelEditElement.querySelector('.parcel-edit-close').addEventListener('click', () => {\n this.hideParcelEditPopup();\n });\n this.parcelEditElement.querySelector('.parcel-edit-cancel').addEventListener('click', () => {\n this.hideParcelEditPopup();\n });\n\n // Form submit handler\n const form = this.parcelEditElement.querySelector('.parcel-edit-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n\n // Collect all edited values\n const formData = new FormData(form);\n const updatedProps = {};\n for (const [key, value] of formData.entries()) {\n updatedProps[key] = value;\n }\n\n // Restore internal properties that were excluded from the form\n updatedProps._layerType = 'parcel';\n\n // Update the feature's properties in-place\n for (const [key, value] of Object.entries(updatedProps)) {\n this._parcelEditFeature.set(key, value);\n }\n\n // Notify external listeners\n for (const cb of this._parcelEditCallbacks) {\n cb(this._parcelEditFeature, updatedProps);\n }\n\n this.hideParcelEditPopup();\n });\n }\n\n /**\n * Hide the parcel edit popup.\n */\n hideParcelEditPopup() {\n this.parcelEditPopup.setPosition(undefined);\n this._parcelEditFeature = null;\n }\n\n /**\n * Register a callback for when a parcel edit is saved.\n * Callback receives (feature, updatedProperties).\n *\n * @param {Function} callback\n */\n onParcelEdit(callback) {\n this._parcelEditCallbacks.push(callback);\n }\n\n // ============================================================================\n // Merge Identifier (UPN) Chooser Popup\n // ============================================================================\n\n /**\n * Create the merge identifier popup overlay.\n * Shown after two parcels are merged so the user can choose which UPN to keep.\n */\n createMergePopup() {\n this.mergePopupElement = document.createElement('div');\n this.mergePopupElement.className = 'map-merge-popup';\n this.mergePopupElement.style.cssText = `\n position: absolute;\n background: var(--card, #fff);\n color: var(--card-foreground, #1e1a4b);\n border-radius: 10px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n font-family: var(--font-body, 'Exo', sans-serif);\n font-size: 13px;\n min-width: 280px;\n max-width: 360px;\n z-index: 1002;\n border: 2px solid #10b981;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n `;\n\n this.mergePopup = new Overlay({\n element: this.mergePopupElement,\n positioning: 'bottom-center',\n offset: [0, -10],\n stopEvent: true,\n autoPan: true,\n autoPanAnimation: { duration: 250 },\n });\n\n this.map.addOverlay(this.mergePopup);\n }\n\n /**\n * Show the merge identifier popup so the user can pick which parcel's\n * attributes (including UPN) the merged polygon should inherit.\n *\n * @param {Feature} mergedFeature The newly created merged feature\n * @param {Object} propsA Properties from original parcel A\n * @param {Object} propsB Properties from original parcel B\n * @param {Array} coordinate Map coordinate [x, y] for popup placement\n */\n showMergeIdentifierPopup(mergedFeature, propsA, propsB, coordinate) {\n // Extract identifiers — try common parcel ID field names\n const idFields = ['UPN', 'upn', 'id', 'parcelid', 'parcel_id', 'PARCELID', 'PARCEL_ID', 'ID'];\n const getLabel = (props) => {\n for (const field of idFields) {\n if (props[field] !== undefined && props[field] !== null && String(props[field]).trim()) {\n return { field, value: String(props[field]) };\n }\n }\n return { field: 'id', value: 'Unknown' };\n };\n\n const labelA = getLabel(propsA);\n const labelB = getLabel(propsB);\n\n const html = `\n \n 🔗 Merged Parcel — Choose Identifier \n \n
\n \n
\n Select which parcel's attributes the merged polygon should keep:\n
\n
\n \n
Parcel A
\n
${this.escapeHtml(labelA.field)}: ${this.escapeHtml(labelA.value)}
\n
\n
\n \n
Parcel B
\n
${this.escapeHtml(labelB.field)}: ${this.escapeHtml(labelB.value)}
\n
\n
\n \n \n
\n
\n Divide Polygon \n \n
\n \n
\n Enter the number of equal pieces:\n
\n
\n
\n \n \n
\n
\n ${escapedKey} \n
\n `;\n }\n\n // Area display\n const geom = feature.getGeometry();\n const areaSqm = getArea(geom, { projection: 'EPSG:3857' });\n const areaFormatted = formatArea(areaSqm);\n\n const html = `\n \n 📐 Polygon Attributes \n × \n
\n \n Area: ${areaFormatted} \n
\n \n `;\n\n this.drawnPolygonElement.innerHTML = html;\n this.drawnPolygonPopup.setPosition(coordinate);\n\n // Close / Cancel handlers\n this.drawnPolygonElement.querySelector('.drawn-polygon-close').addEventListener('click', () => {\n this.hideDrawnPolygonPopup();\n });\n this.drawnPolygonElement.querySelector('.drawn-polygon-cancel').addEventListener('click', () => {\n this.hideDrawnPolygonPopup();\n });\n\n // Form submit handler\n const form = this.drawnPolygonElement.querySelector('.drawn-polygon-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n\n const formData = new FormData(form);\n const props = {};\n for (const [key, value] of formData.entries()) {\n props[key] = value;\n }\n\n // Set properties on the feature\n for (const [key, value] of Object.entries(props)) {\n this._drawnPolygonFeature.set(key, value);\n }\n\n // Tag as parcel so it integrates with existing parcel tools\n this._drawnPolygonFeature.set('_layerType', 'parcel');\n\n // Notify listeners\n for (const cb of this._drawnPolygonCallbacks) {\n cb(this._drawnPolygonFeature, props);\n }\n\n this.hideDrawnPolygonPopup();\n });\n }\n\n /**\n * Hide the drawn polygon attribute popup.\n */\n hideDrawnPolygonPopup() {\n this.drawnPolygonPopup.setPosition(undefined);\n this._drawnPolygonFeature = null;\n }\n\n /**\n * Register a callback for when drawn polygon attributes are saved.\n * Callback receives (feature, properties).\n *\n * @param {Function} callback\n */\n onDrawnPolygonSave(callback) {\n this._drawnPolygonCallbacks.push(callback);\n }\n\n /**\n * Register a callback fired after the user finishes modifying a feature\n * with the EditBar Modify interaction. Callback receives the OL feature\n * whose geometry just changed. Consumers (e.g. the import-staging code in\n * main.js) inspect the feature's tags (_externalImportId / _clientUuid)\n * to decide whether to react. Multiple callbacks are supported.\n *\n * @param {Function} callback - (feature) => void | Promise\n */\n onFeatureModified(callback) {\n if (!this._featureModifiedCallbacks) this._featureModifiedCallbacks = [];\n this._featureModifiedCallbacks.push(callback);\n }\n\n /**\n * Register a double-click callback.\n * Callback receives (lon, lat, feature, event).\n * Feature is the first feature found at the click pixel across all overlay layers,\n * or null if no feature was hit.\n * When a feature is hit, the default double-click-zoom is suppressed.\n */\n onDblClick(callback) {\n this.dblClickCallbacks.push(callback);\n\n // Set up the listener once\n if (this.dblClickCallbacks.length === 1) {\n this.map.on('dblclick', (evt) => {\n const [lon, lat] = toLonLat(evt.coordinate);\n\n // Find any feature at the clicked pixel (overlay layers, not just markers)\n let clickedFeature = null;\n this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {\n clickedFeature = feature;\n return true; // stop at first hit\n });\n\n // If a feature was hit, prevent the default double-click zoom\n if (clickedFeature) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n // Call all registered callbacks\n for (const cb of this.dblClickCallbacks) {\n cb(lon, lat, clickedFeature, evt);\n }\n\n // Return false to suppress DoubleClickZoom interaction when on a feature\n if (clickedFeature) return false;\n });\n }\n\n return () => {\n const idx = this.dblClickCallbacks.indexOf(callback);\n if (idx > -1) this.dblClickCallbacks.splice(idx, 1);\n };\n }\n\n /**\n * Escape HTML to prevent XSS\n */\n escapeHtml(text) {\n if (!text) return '';\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Create the Add Location popup form overlay\n */\n createAddLocationPopup() {\n // Create popup container element\n this.addLocationPopupElement = document.createElement('div');\n this.addLocationPopupElement.className = 'map-add-location-popup';\n this.addLocationPopupElement.innerHTML = `\n \n \n `;\n\n // Create the overlay\n this.addLocationPopup = new Overlay({\n element: this.addLocationPopupElement,\n positioning: 'bottom-center',\n offset: [0, -10],\n stopEvent: true, // Prevent click from propagating\n autoPan: true,\n autoPanAnimation: {\n duration: 250,\n },\n });\n\n this.map.addOverlay(this.addLocationPopup);\n\n // Store clicked coordinates\n this.addLocationCoords = null;\n\n // Set up close button handler\n const closeBtn = this.addLocationPopupElement.querySelector('.add-location-popup-close');\n closeBtn.addEventListener('click', () => {\n this.hideAddLocationPopup();\n });\n\n // Store form submit callbacks\n this.addLocationCallbacks = [];\n }\n\n /**\n * Show the Add Location popup at the specified coordinate\n */\n showAddLocationPopup(coordinate) {\n const [lon, lat] = toLonLat(coordinate);\n this.addLocationCoords = { lon, lat };\n\n // Update coordinates display\n const coordsEl = this.addLocationPopupElement.querySelector('#map-location-coords');\n coordsEl.textContent = `${lon.toFixed(6)}, ${lat.toFixed(6)}`;\n\n // Reset form\n const form = this.addLocationPopupElement.querySelector('#map-add-location-form');\n form.reset();\n\n // Position and show popup\n this.addLocationPopup.setPosition(coordinate);\n }\n\n /**\n * Hide the Add Location popup\n */\n hideAddLocationPopup() {\n this.addLocationPopup.setPosition(undefined);\n this.addLocationCoords = null;\n }\n\n /**\n * Register a callback for when a location is submitted via the map popup\n * Callback receives: { name, category, description, lon, lat }\n */\n onAddLocation(callback) {\n this.addLocationCallbacks.push(callback);\n\n // Set up form submit handler (only once)\n if (this.addLocationCallbacks.length === 1) {\n const form = this.addLocationPopupElement.querySelector('#map-add-location-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n\n if (!this.addLocationCoords) return;\n\n const formData = new FormData(form);\n const data = {\n name: formData.get('name'),\n category: formData.get('category'),\n description: formData.get('description'),\n lon: this.addLocationCoords.lon,\n lat: this.addLocationCoords.lat,\n };\n\n // Call all registered callbacks\n this.addLocationCallbacks.forEach(cb => cb(data));\n\n // Hide popup after submission\n this.hideAddLocationPopup();\n });\n }\n }\n\n /**\n * Create base layers group for LayerSwitcher\n */\n createBaseLayers(defaultBasemap) {\n\n\n const topoLayer = new TileLayer({\n title: 'Topographic',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'topo',\n source: new XYZ({\n url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',\n attributions: 'Map data: © OpenTopoMap',\n maxZoom: 17,\n crossOrigin: 'anonymous',\n }),\n });\n topoLayer.set('basemapKey', 'topo');\n\n const cartoLightLayer = new TileLayer({\n title: 'Carto Light',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'carto-light',\n source: new XYZ({\n url: 'https://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',\n attributions: '© CARTO',\n maxZoom: 19,\n crossOrigin: 'anonymous',\n }),\n });\n cartoLightLayer.set('basemapKey', 'carto-light');\n\n const cartoDarkLayer = new TileLayer({\n title: 'Carto Dark',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'carto-dark',\n source: new XYZ({\n url: 'https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',\n attributions: '© CARTO',\n maxZoom: 19,\n crossOrigin: 'anonymous',\n }),\n });\n cartoDarkLayer.set('basemapKey', 'carto-dark');\n\n const osmCycleLayer = new TileLayer({\n title: 'OSM Cycle map',\n type: 'base',\n zIndex: -100,\n visible: false, //defaultBasemap === 'osm',\n source: new OSM({\n \t\t\t\t\t\"url\" : \"https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=ae1339c46dd3446b9c491e7336d38760\"\n\t\t\t\t\t\t}),\n });\n\n osmCycleLayer.set('basemapKey', 'cycle');\n\n const satelliteLayer = new TileLayer({\n title: 'Satellite',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'satellite',\n source: new XYZ({\n url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',\n attributions: 'Tiles © Esri',\n maxZoom: 19,\n crossOrigin: 'anonymous',\n }),\n });\n satelliteLayer.set('basemapKey', 'satellite');\n const googleLayer = new TileLayer({\n title: 'Google Sat',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'googlesat',\n source: new XYZ({\n// url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',\n url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga',\n attributions: 'Tiles © Google',\n maxZoom: 19,\n crossOrigin: 'anonymous',\n }),\n });\n googleLayer.set('basemapKey', 'googlesat');\n\n const osmLayer = new TileLayer({\n title: 'OpenStreetMap',\n type: 'base',\n zIndex: -100,\n visible: defaultBasemap === 'osm',\n source: new OSM(),\n });\n osmLayer.set('basemapKey', 'osm');\n\n // Remember the base-map layers so setBaseMap() can toggle visibility later\n this._baseMapLayers = [\n cartoLightLayer, cartoDarkLayer, osmCycleLayer,\n satelliteLayer, googleLayer, osmLayer, topoLayer,\n ];\n\n\n // Return LayerGroup. Hidden from the main LayerSwitcher — base maps are\n // managed by the dedicated base-map picker (see _createBaseMapPicker)\n // accessed via the layers-stack icon above the My Location button.\n const baseGroup = new LayerGroup({\n title: 'Base Maps',\n layers: [\n cartoLightLayer,\n cartoDarkLayer,\n satelliteLayer,\n osmCycleLayer,\n googleLayer,\n osmLayer,\n topoLayer,\n ],\n });\n baseGroup.set('displayInLayerSwitcher', false);\n return baseGroup;\n }\n\n /**\n * Switch the active base map by key.\n * Sets exactly one base layer visible; hides all others.\n *\n * @param {string} key Basemap key: 'none' | 'topo' | 'osm' | 'satellite' | 'googlesat' | 'carto-light' | 'carto-dark' | 'cycle'\n * @returns {boolean} true if the key matched a known base layer (or 'none')\n */\n setBaseMap(key) {\n if (!this._baseMapLayers) return false;\n // 'none' switches the base map off entirely — hide every base layer so the\n // map renders on a blank background (useful over imagery overlays / when a\n // full-coverage overlay should stand alone).\n if (key === 'none') {\n for (const layer of this._baseMapLayers) layer.setVisible(false);\n console.log('[MapView] Base map switched off (none)');\n this.map.dispatchEvent({ type: 'basemapchange', key: 'none' });\n return true;\n }\n let matched = false;\n for (const layer of this._baseMapLayers) {\n const on = layer.get('basemapKey') === key;\n layer.setVisible(on);\n if (on) matched = true;\n }\n if (matched) {\n console.log('[MapView] Base map switched to:', key);\n // Notify external UIs (Settings dropdown, base-map picker, …) so they\n // can keep their visible state in sync.\n this.map.dispatchEvent({ type: 'basemapchange', key });\n }\n return matched;\n }\n\n /**\n * Build the floating \"Base Map\" picker — a small icon button stacked\n * directly above the My Location control, plus a slide-out card with\n * thumbnail chips for every selectable base map.\n *\n * Hidden in tandem with the main LayerSwitcher: clicking outside the\n * picker (or making a selection) closes it.\n *\n * Two-way sync with the existing Settings dropdown is via the\n * `basemapchange` event fired from setBaseMap().\n */\n _createBaseMapPicker() {\n // Configuration — must match the basemapKey set in createBaseLayers.\n // The colour gradients hint at each base map's character so the chip is\n // recognisable without rendering an actual tile preview.\n const OPTIONS = [\n { key: 'topo', label: 'Topographic', grad: 'linear-gradient(135deg,#e8d5b7,#a67c52)' },\n { key: 'osm', label: 'OpenStreetMap',grad: 'linear-gradient(135deg,#d4e6f1,#85c1e9)' },\n { key: 'satellite', label: 'Satellite', grad: 'linear-gradient(135deg,#1b4332,#40916c)' },\n { key: 'googlesat', label: 'Google Sat', grad: 'linear-gradient(135deg,#2a5d3d,#4a8c5a)' },\n { key: 'carto-light', label: 'Carto Light', grad: 'linear-gradient(135deg,#f5f5f5,#d4d4d4)' },\n { key: 'carto-dark', label: 'Carto Dark', grad: 'linear-gradient(135deg,#1a1a2e,#0f3460)' },\n // \"None\" turns the base map off — checkerboard hints at a blank/transparent background.\n { key: 'none', label: 'None', grad: 'repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 12px 12px' },\n ];\n\n const target = this.map.getTargetElement();\n if (!target) return;\n\n // ---------- Toggle button ----------\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'ls-basemap-toggle';\n btn.title = 'Switch base map';\n btn.setAttribute('aria-label', 'Switch base map');\n btn.innerHTML =\n '' +\n '' +\n '' +\n '' +\n ' ';\n target.appendChild(btn);\n\n // ---------- Picker panel ----------\n const panel = document.createElement('div');\n panel.className = 'ls-basemap-panel';\n panel.innerHTML =\n '' +\n '';\n target.appendChild(panel);\n\n this._basemapPanel = panel;\n this._basemapToggle = btn;\n\n /** Mark the radio matching the currently-visible base layer. */\n const syncSelection = (key) => {\n const k = key || this._baseMapLayers?.find((l) => l.getVisible())?.get('basemapKey');\n panel.querySelectorAll('input[name=\"lupmis-basemap\"]').forEach((r) => {\n r.checked = (r.value === k);\n });\n };\n syncSelection();\n\n // ---------- Events ----------\n\n // Toggle button → open / close the panel\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n const open = !panel.classList.contains('open');\n panel.classList.toggle('open', open);\n btn.classList.toggle('active', open);\n if (open) syncSelection();\n });\n\n // Click outside → close\n document.addEventListener('click', (e) => {\n if (!panel.classList.contains('open')) return;\n if (panel.contains(e.target) || btn.contains(e.target)) return;\n panel.classList.remove('open');\n btn.classList.remove('active');\n });\n\n // Selection → apply, persist, close\n panel.addEventListener('change', (e) => {\n const radio = e.target.closest('input[type=radio][name=\"lupmis-basemap\"]');\n if (!radio) return;\n const key = radio.value;\n this.setBaseMap(key);\n try { localStorage.setItem('default-basemap', key); } catch {}\n panel.classList.remove('open');\n btn.classList.remove('active');\n });\n\n // Keep the radio state synced when other UIs (Settings dropdown) change it\n this.map.on('basemapchange', (evt) => syncSelection(evt.key));\n }\n\n // ============================================================================\n // GPS: current-position + trail rendering, and the expandable Location control\n //\n // NOTE: MapView deliberately knows nothing about the GeoTracker engine,\n // SQLocal, or sync. It only (a) renders what it's told and (b) emits UI\n // intents via callbacks. main.js wires those intents to the GeoTracker so the\n // map stays reusable/decoupled.\n // ============================================================================\n\n /** Create the vector layers used to draw the live position and the trail. */\n _initGpsRendering() {\n this._gpsPositionSource = new VectorSource();\n this._gpsTrailSource = new VectorSource();\n this._gpsTrailCoords = []; // [ [x,y], ... ] in map projection\n\n // Trail line (drawn under the position marker)\n this._gpsTrailLayer = new VectorLayer({\n source: this._gpsTrailSource,\n zIndex: 940,\n style: new Style({\n stroke: new Stroke({ color: '#ff6d00', width: 4, lineCap: 'round', lineJoin: 'round' }),\n }),\n properties: { title: 'GPS Trail', displayInLayerSwitcher: false },\n });\n\n // Current position: accuracy halo + solid dot\n this._gpsPositionLayer = new VectorLayer({\n source: this._gpsPositionSource,\n zIndex: 950,\n style: (feature) => {\n if (feature.get('_kind') === 'accuracy') {\n return new Style({\n fill: new Fill({ color: 'rgba(0,94,184,0.12)' }),\n stroke: new Stroke({ color: 'rgba(0,94,184,0.35)', width: 1 }),\n });\n }\n return new Style({\n image: new Circle({\n radius: 7,\n fill: new Fill({ color: '#005eb8' }),\n stroke: new Stroke({ color: '#ffffff', width: 2.5 }),\n }),\n });\n },\n properties: { title: 'GPS Position', displayInLayerSwitcher: false },\n });\n\n this.map.addLayer(this._gpsTrailLayer);\n this.map.addLayer(this._gpsPositionLayer);\n\n this._gpsCallbacks = { locate: [], record: [] };\n this._gpsRecording = false;\n }\n\n /** Register a callback fired when the user taps \"Locate Me\". */\n onLocateMe(cb) { this._gpsCallbacks.locate.push(cb); }\n /** Register a callback fired when the user toggles trail recording. Receives the desired state (true=start). */\n onToggleRecording(cb) { this._gpsCallbacks.record.push(cb); }\n\n /**\n * Draw / move the current-position marker and accuracy halo.\n * @param {number} lon\n * @param {number} lat\n * @param {number|null} [accuracy] horizontal accuracy in metres\n */\n showCurrentPosition(lon, lat, accuracy = null) {\n if (lon == null || lat == null) return;\n const center = fromLonLat([lon, lat]);\n this._gpsPositionSource.clear();\n\n if (accuracy && accuracy > 0) {\n // Approximate the accuracy circle in projected units. Good enough for a\n // visual halo at typical zoom levels.\n const resAtLat = accuracy / Math.cos((lat * Math.PI) / 180);\n const halo = new Feature({ geometry: new PolygonGeom([this._circleRing(center, resAtLat)]) });\n halo.set('_kind', 'accuracy');\n this._gpsPositionSource.addFeature(halo);\n }\n const dot = new Feature({ geometry: new Point(center) });\n dot.set('_kind', 'dot');\n this._gpsPositionSource.addFeature(dot);\n }\n\n /** @private build a ring of coordinates approximating a circle (metres → projected). */\n _circleRing(center, radiusMeters, segments = 48) {\n // Convert metres to projected units (Web Mercator) roughly via the\n // resolution at the centre latitude.\n const ring = [];\n const metersPerUnit = 1; // EPSG:3857 units are metres (approx near equator/locally)\n const r = radiusMeters / metersPerUnit;\n for (let i = 0; i <= segments; i++) {\n const a = (i / segments) * 2 * Math.PI;\n ring.push([center[0] + r * Math.cos(a), center[1] + r * Math.sin(a)]);\n }\n return ring;\n }\n\n /** Smoothly center the view on a coordinate. */\n centerOn(lon, lat, zoom = 16) {\n const view = this.map.getView();\n view.animate({ center: fromLonLat([lon, lat]), zoom, duration: 500 });\n }\n\n /** Reset the trail line (call when a new recording starts). */\n startTrailRender() {\n this._gpsTrailCoords = [];\n this._gpsTrailSource.clear();\n }\n\n /** Append a coordinate to the growing trail line. */\n appendTrailPoint(lon, lat) {\n if (lon == null || lat == null) return;\n this._gpsTrailCoords.push(fromLonLat([lon, lat]));\n this._gpsTrailSource.clear();\n if (this._gpsTrailCoords.length >= 2) {\n this._gpsTrailSource.addFeature(new Feature({ geometry: new LineString(this._gpsTrailCoords) }));\n }\n }\n\n /** Remove the rendered trail (does not affect stored data). */\n clearTrailRender() {\n this._gpsTrailCoords = [];\n this._gpsTrailSource.clear();\n }\n\n /** Reflect recording state on the control button. */\n setRecordingState(active) {\n this._gpsRecording = !!active;\n if (this._recordBtn) {\n this._recordBtn.classList.toggle('recording', this._gpsRecording);\n this._recordBtn.title = this._gpsRecording ? 'Stop trail recording' : 'Record GPS trail';\n this._recordBtn.innerHTML = this._gpsRecording\n ? '' +\n ' ' +\n '' +\n ' ';\n target.appendChild(actions);\n\n this._locateToggle = toggle;\n this._locateActions = actions;\n this._locateMeBtn = actions.querySelector('.ls-locate-me');\n this._recordBtn = actions.querySelector('.ls-locate-record');\n\n const close = () => { actions.classList.remove('open'); toggle.classList.remove('active'); };\n const open = () => { actions.classList.add('open'); toggle.classList.add('active'); };\n\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n actions.classList.contains('open') ? close() : open();\n });\n\n // Tap outside closes the cluster (but never while recording, so the stop\n // button stays reachable).\n document.addEventListener('click', (e) => {\n if (!actions.classList.contains('open')) return;\n if (actions.contains(e.target) || toggle.contains(e.target)) return;\n if (this._gpsRecording) return;\n close();\n });\n\n this._locateMeBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n for (const cb of this._gpsCallbacks.locate) { try { cb(); } catch (err) { console.error(err); } }\n if (!this._gpsRecording) close();\n });\n\n this._recordBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n const next = !this._gpsRecording;\n for (const cb of this._gpsCallbacks.record) { try { cb(next); } catch (err) { console.error(err); } }\n });\n }\n\n /**\n * Get style for a feature (handles selection state)\n */\n getFeatureStyle(feature) {\n const category = feature.get('category') || 'default';\n const emoji = this.getEmoji(category);\n\n if (feature === this.selectedFeature) {\n // Return selected style with the correct emoji and highlight\n return [\n // Background highlight circle\n new Style({\n image: new Circle({\n radius: 22,\n fill: new Fill({ color: 'rgba(220, 38, 38, 0.25)' }),\n stroke: new Stroke({ color: '#dc2626', width: 3 }),\n }),\n }),\n // Emoji on top, larger\n new Style({\n text: new Text({\n text: emoji,\n font: '40px sans-serif',\n textBaseline: 'bottom',\n textAlign: 'center',\n offsetY: -5,\n }),\n }),\n ];\n }\n\n // Check for custom style\n const customStyle = feature.get('style');\n if (customStyle) {\n return customStyle;\n }\n\n // Return category-based emoji style\n if (this.categoryStyles[category]) {\n return this.categoryStyles[category];\n }\n\n return this.defaultStyle;\n }\n\n /**\n * Set category-based styles with emojis\n * @param {Object} styles - Map of category to config { emoji, label, fontSize }\n */\n setCategoryStyles(styles) {\n for (const [category, config] of Object.entries(styles)) {\n // Update category mapping if provided\n if (config.emoji) {\n if (!this.categoryEmojis[category]) {\n this.categoryEmojis[category] = { emoji: config.emoji, label: config.label || category };\n } else {\n this.categoryEmojis[category].emoji = config.emoji;\n if (config.label) {\n this.categoryEmojis[category].label = config.label;\n }\n }\n }\n\n // Create/update style\n const emoji = this.getEmoji(category);\n const fontSize = config.fontSize || 28;\n\n this.categoryStyles[category] = this.createEmojiStyle(emoji, fontSize);\n }\n\n // Refresh markers\n this.markerSource.changed();\n }\n\n /**\n * Add a single marker\n */\n addMarker(lon, lat, properties = {}) {\n console.log('[MapView] Adding marker at', lon, lat, 'with properties:', properties);\n\n const feature = new Feature({\n geometry: new Point(fromLonLat([lon, lat])),\n ...properties,\n });\n\n // Store original coordinates for easy access\n feature.set('lon', lon);\n feature.set('lat', lat);\n\n this.markerSource.addFeature(feature);\n console.log('[MapView] Marker added, total features:', this.markerSource.getFeatures().length);\n return feature;\n }\n\n /**\n * Add multiple markers from an array of location objects\n */\n addMarkers(locations) {\n console.log('[MapView] Adding', locations.length, 'markers');\n\n const features = locations.map((loc) => {\n const feature = new Feature({\n geometry: new Point(fromLonLat([loc.longitude, loc.latitude])),\n id: loc.id,\n name: loc.name,\n description: loc.description,\n category: loc.category,\n lon: loc.longitude,\n lat: loc.latitude,\n });\n return feature;\n });\n\n this.markerSource.addFeatures(features);\n console.log('[MapView] Markers added, total features:', this.markerSource.getFeatures().length);\n return features;\n }\n\n /**\n * Clear all markers\n */\n clearMarkers() {\n this.markerSource.clear();\n this.selectedFeature = null;\n }\n\n /**\n * Remove a specific marker by feature or ID\n */\n removeMarker(featureOrId) {\n if (typeof featureOrId === 'object') {\n this.markerSource.removeFeature(featureOrId);\n } else {\n const feature = this.markerSource.getFeatures().find(\n f => f.get('id') === featureOrId\n );\n if (feature) {\n this.markerSource.removeFeature(feature);\n }\n }\n }\n\n /**\n * Get all markers\n */\n getMarkers() {\n return this.markerSource.getFeatures();\n }\n\n /**\n * Find marker by ID\n */\n findMarker(id) {\n return this.markerSource.getFeatures().find(f => f.get('id') === id);\n }\n\n /**\n * Select a marker (highlights it)\n */\n selectMarker(featureOrId) {\n if (typeof featureOrId === 'object') {\n this.selectedFeature = featureOrId;\n } else {\n this.selectedFeature = this.findMarker(featureOrId);\n }\n this.markerSource.changed();\n return this.selectedFeature;\n }\n\n /**\n * Clear selection\n */\n clearSelection() {\n this.selectedFeature = null;\n this.markerSource.changed();\n }\n\n /**\n * Zoom to a specific location\n */\n zoomTo(lon, lat, zoom = 15) {\n this.map.getView().animate({\n center: fromLonLat([lon, lat]),\n zoom: zoom,\n duration: 500,\n });\n }\n\n /**\n * Fit view to show all markers\n */\n fitToMarkers(padding = 50) {\n const extent = this.markerSource.getExtent();\n if (extent && extent[0] !== Infinity) {\n this.map.getView().fit(extent, {\n padding: [padding, padding, padding, padding],\n duration: 500,\n maxZoom: 16,\n });\n }\n }\n\n /**\n * Get current map center in lon/lat\n */\n getCenter() {\n const center = this.map.getView().getCenter();\n return toLonLat(center);\n }\n\n /**\n * Get current zoom level\n */\n getZoom() {\n return this.map.getView().getZoom();\n }\n\n /**\n * Set map center\n */\n setCenter(lon, lat) {\n this.map.getView().setCenter(fromLonLat([lon, lat]));\n }\n\n /**\n * Set zoom level\n */\n setZoom(zoom) {\n this.map.getView().setZoom(zoom);\n }\n\n /**\n * Register click callback\n * Callback receives (lon, lat, feature, event)\n *\n * Single-click is delayed by 300 ms so that a double-click can cancel it.\n * If the click lands on an overlay feature (e.g. district boundary) the\n * single-click is suppressed entirely — only double-click will fire.\n */\n onClick(callback) {\n this.clickCallbacks.push(callback);\n\n // Set up click handler if this is the first callback\n if (this.clickCallbacks.length === 1) {\n this._clickTimer = null;\n\n // Double-click cancels any pending single-click\n this.map.on('dblclick', () => {\n if (this._clickTimer) {\n clearTimeout(this._clickTimer);\n this._clickTimer = null;\n }\n });\n\n this.map.on('click', (evt) => {\n // Cancel any previous pending click\n if (this._clickTimer) {\n clearTimeout(this._clickTimer);\n this._clickTimer = null;\n }\n\n // When NOT in edit / draw mode, immediately clear any feature\n // the Select interaction may have grabbed on this click so the\n // user never sees a selection flash.\n if (!this._editBarActive && this._selectInteraction) {\n this._selectInteraction.getFeatures().clear();\n }\n\n // Check what features sit under the click pixel\n let hasOverlayFeature = false;\n let hasParcelFeature = false;\n let markerFeature = null;\n this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {\n if (feature.get('_layerType') === 'parcel') {\n hasParcelFeature = true;\n }\n if (feature.get('name')) {\n markerFeature = feature;\n }\n hasOverlayFeature = true;\n });\n\n // If an overlay feature was hit, suppress single-click\n // UNLESS it's a parcel or a location marker\n if (hasOverlayFeature && !hasParcelFeature && !markerFeature) {\n return;\n }\n\n // Delay the single-click to allow double-click to cancel it\n const [lon, lat] = toLonLat(evt.coordinate);\n this._clickTimer = setTimeout(() => {\n this._clickTimer = null;\n\n // Find location marker at pixel\n let clickedFeature = null;\n this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {\n if (feature.get('name')) {\n clickedFeature = feature;\n return true;\n }\n });\n\n for (const cb of this.clickCallbacks) {\n cb(lon, lat, clickedFeature, evt);\n }\n }, 300);\n });\n }\n\n // Return unsubscribe function\n return () => {\n const index = this.clickCallbacks.indexOf(callback);\n if (index > -1) {\n this.clickCallbacks.splice(index, 1);\n }\n };\n }\n\n /**\n * Register pointer move callback (for hover effects)\n */\n onPointerMove(callback) {\n this.map.on('pointermove', (evt) => {\n if (evt.dragging) return;\n\n const [lon, lat] = toLonLat(evt.coordinate);\n\n // Only find location markers (features with 'name' property)\n let hoveredFeature = null;\n this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {\n if (feature.get('name')) {\n hoveredFeature = feature;\n return true;\n }\n });\n\n // Change cursor\n this.map.getTargetElement().style.cursor = hoveredFeature ? 'pointer' : '';\n\n callback(lon, lat, hoveredFeature, evt);\n });\n }\n\n /**\n * Enable cursor change on marker hover\n * Note: This is now handled automatically by the popup system\n */\n enableHoverCursor() {\n // Cursor changes are now handled by setupHoverPopup()\n // This method is kept for backwards compatibility\n }\n\n /**\n * Add a GeoJSON layer (visible in LayerSwitcher).\n * By default the layer is added to the root overlay group.\n * Pass a targetGroup (LayerGroup) to nest it inside a specific group.\n *\n * @param {Object} geojson - GeoJSON FeatureCollection or Feature\n * @param {string} title - Layer title for the LayerSwitcher\n * @param {Object} [styleOptions] - Optional style configuration\n * @param {string} [styleOptions.strokeColor='#3b82f6'] - Stroke color\n * @param {number} [styleOptions.strokeWidth=2] - Stroke width\n * @param {string} [styleOptions.fillColor='rgba(59,130,246,0.1)'] - Fill color\n * @param {number[]} [styleOptions.strokeDash] - Dash pattern for the stroke\n * (passed straight to ol/style/Stroke#lineDash, e.g. [4,4]). Useful for\n * contextual overlays (grids, draft outlines) so they read differently\n * from solid property boundaries.\n * @param {LayerGroup} [targetGroup] - Optional group to add the layer to\n * @returns {VectorLayer} The created layer\n */\n addGeoJSONLayer(geojson, title, styleOptions = {}, targetGroup = null) {\n const {\n strokeColor = '#3b82f6',\n strokeWidth = 2,\n strokeDash = null,\n fillColor = 'rgba(59,130,246,0.1)',\n // Optional line \"casing\": a thicker darker stroke drawn UNDERNEATH the\n // main stroke. Used for road-like layers to make light-colored lines\n // visible on any base map. Set lineCasingColor to enable; the casing\n // width defaults to strokeWidth + 2.\n lineCasingColor = null,\n lineCasingWidth = null,\n pointRadius = 5,\n pointFillColor = null, // defaults to strokeColor\n pointStrokeColor = '#ffffff',\n pointStrokeWidth = 1.5,\n } = styleOptions;\n\n const source = new VectorSource({\n features: new GeoJSON().readFeatures(geojson, {\n featureProjection: 'EPSG:3857',\n }),\n });\n\n // Build per-geometry styles. OpenLayers picks `image` for Point /\n // MultiPoint, `stroke`+`fill` for Polygon / MultiPolygon, and `stroke`\n // alone for LineString / MultiLineString. Putting all three on a single\n // Style is enough — but a Style with only stroke+fill leaves Points\n // invisible, which is what was happening on shapefile import.\n const fillStyle = new Fill({ color: fillColor });\n const pointStyle = new Circle({\n radius: pointRadius,\n fill: new Fill({ color: pointFillColor || strokeColor }),\n stroke: new Stroke({ color: pointStrokeColor, width: pointStrokeWidth }),\n });\n\n // If a line casing is requested, return an array of two Styles per\n // feature: the casing renders first (underneath), then the inner stroke.\n // For polygons the casing also outlines them; for points the casing has\n // no effect (Point geometries only render `image`).\n const mainStroke = new Stroke({\n color: strokeColor,\n width: strokeWidth,\n ...(strokeDash ? { lineDash: strokeDash } : {}),\n });\n\n let layerStyle;\n if (lineCasingColor) {\n const casingW = lineCasingWidth != null ? lineCasingWidth : strokeWidth + 2;\n layerStyle = [\n new Style({\n stroke: new Stroke({ color: lineCasingColor, width: casingW }),\n }),\n new Style({\n stroke: mainStroke,\n fill: fillStyle,\n image: pointStyle,\n }),\n ];\n } else {\n layerStyle = new Style({\n stroke: mainStroke,\n fill: fillStyle,\n image: pointStyle,\n });\n }\n\n const layer = new VectorLayer({\n title: title,\n source: source,\n style: layerStyle,\n });\n layer.set('typeTag', styleOptions.typeTag || 'VEC');\n\n // Derive a friendly \"Vector / Polygon\" / \"Vector / Line\" / \"Vector / Point\"\n // subtitle from the first feature's geometry type, unless the caller\n // already supplied one in styleOptions.\n //\n // Layers created EMPTY (parcels, OSM_roads, …, populated later from the\n // API) leave the subtitle absent until the first feature arrives —\n // see the `addfeature` listener below.\n const describeFromGeom = (geomType) => {\n if (!geomType) return null;\n if (geomType.includes('Polygon')) return 'Vector / Polygon';\n if (geomType.includes('LineString')) return 'Vector / Line';\n if (geomType.includes('Point')) return 'Vector / Point';\n return 'Vector';\n };\n\n if (styleOptions.typeDescription) {\n layer.set('typeDescription', styleOptions.typeDescription);\n } else {\n const feats = source.getFeatures();\n const initial = describeFromGeom(feats[0]?.getGeometry?.()?.getType?.());\n if (initial) {\n layer.set('typeDescription', initial);\n } else {\n // Source is empty — wait for the first feature and set then.\n const once = (ev) => {\n const desc = describeFromGeom(ev.feature.getGeometry?.()?.getType?.());\n if (desc) layer.set('typeDescription', desc);\n source.un('addfeature', once);\n };\n source.on('addfeature', once);\n }\n }\n\n const group = targetGroup || this.overlayGroup;\n group.getLayers().push(layer);\n\n console.log('[MapView] GeoJSON layer added:', title, '→', source.getFeatures().length, 'features',\n targetGroup ? `(in group \"${targetGroup.get('title')}\")` : '');\n return layer;\n }\n\n /**\n * Add a LayerGroup to the overlay group.\n * Used to create layer categories from the remote catalogue;\n * individual vector layers will be added into these groups later.\n *\n * @param {number|string} id - Unique layer group id (from the API)\n * @param {string} title - Group title for the LayerSwitcher\n * @param {string} [description=''] - Group description (stored as property)\n * @returns {LayerGroup} The created (empty) layer group\n */\n addLayerGroup(id, title, description = '') {\n const group = new LayerGroup({\n title: title.trim(),\n });\n\n // Store metadata for later use\n group.set('layerId', id);\n group.set('description', description);\n\n this.overlayGroup.getLayers().push(group);\n\n console.log('[MapView] Layer group added:', title.trim(), '(id:', id + ')');\n return group;\n }\n\n /**\n * Add a WMS layer to a layer group.\n *\n * @param {string} groupTitle Title of the target LayerGroup (e.g. 'Biophysical Environment')\n * @param {string} title Display title for the layer\n * @param {string} url WMS server URL\n * @param {string} layers WMS LAYERS parameter\n * @param {Object} [options] Extra options\n * @param {string} [options.serverType='geoserver'] Server type hint ('geoserver'|'mapserver'|'qgis'|null)\n * @param {string} [options.style] WMS STYLES parameter (e.g. 'colours' for DEAfrica DEM)\n * @param {boolean} [options.visible=true] Initial visibility\n * @param {string} [options.attributions] Attribution HTML\n * @param {number} [options.opacity=1] Layer opacity (0–1). Use ~0.5 for background-style layers.\n * @param {number} [options.zIndex] Render z-index. Use negative values (e.g. -10) to force the\n * layer behind all default-z-index layers regardless of group order.\n * @param {string} [options.legendUrl] URL of a legend image to display while the layer is visible.\n * @param {boolean} [options.onlineOnly=false] If true, show a toast when the user toggles the layer on\n * while offline, explaining that the layer requires connectivity.\n * @returns {TileLayer|null} The created layer, or null if group not found\n */\n addWMSLayer(groupTitle, title, url, layers, options = {}) {\n const group = this.getLayerGroupByTitle(groupTitle);\n if (!group) {\n console.warn(`[MapView] Layer group \"${groupTitle}\" not found — cannot add WMS layer \"${title}\"`);\n return null;\n }\n\n const params = { LAYERS: layers, TILED: true, WIDTH: 256, HEIGHT: 256 };\n if (options.style !== undefined) params.STYLES = options.style;\n\n const wmsSource = new TileWMS({\n url,\n params,\n serverType: options.serverType !== undefined ? options.serverType : 'geoserver',\n crossOrigin: 'anonymous',\n hidpi: false,\n attributions: options.attributions,\n });\n\n const wmsLayer = new TileLayer({\n title,\n visible: options.visible !== undefined ? options.visible : true,\n source: wmsSource,\n opacity: options.opacity !== undefined ? options.opacity : 1,\n zIndex: options.zIndex,\n });\n wmsLayer.set('typeTag', 'WMS');\n wmsLayer.set('typeDescription', 'WMS / Raster');\n\n // Show toast on tile load errors (e.g. server rejects request)\n wmsSource.on('tileloaderror', () => {\n showToast(`WMS layer \"${title}\" — tile load error. Check the URL and layer name.`, 'warning', 5000);\n });\n\n group.getLayers().push(wmsLayer);\n\n // Register legend AFTER push so that a failure here doesn't block the LayerSwitcher\n if (options.legendUrl) {\n try {\n this._registerLegend(wmsLayer, title, options.legendUrl);\n } catch (err) {\n console.warn(`[MapView] Could not register legend for \"${title}\":`, err);\n }\n }\n\n // Online-only warning: when the user toggles the layer on while offline,\n // surface a toast explaining why nothing will render.\n if (options.onlineOnly) {\n this._attachOnlineOnlyHandler(wmsLayer, title);\n }\n\n console.log(`[MapView] WMS layer added: \"${title}\" → group \"${groupTitle}\"`);\n return wmsLayer;\n }\n\n /**\n * Add an XYZ tile layer to a layer group.\n *\n * @param {string} groupTitle Title of the target LayerGroup\n * @param {string} title Display title for the layer\n * @param {string} url XYZ tile URL template (with {z}/{x}/{y} placeholders)\n * @param {Object} [options] Extra options\n * @param {boolean} [options.visible=true] Initial visibility\n * @param {string} [options.attributions] Attribution HTML\n * @param {number} [options.maxZoom=19] Maximum zoom level\n * @param {number} [options.opacity=1] Layer opacity (0–1). Use ~0.5 for background-style layers.\n * @param {number} [options.zIndex] Render z-index. Use negative values to force behind other layers.\n * @param {string} [options.legendUrl] URL of a legend image to display while the layer is visible.\n * @param {boolean} [options.onlineOnly=false] If true, show a toast when the user toggles the layer on\n * while offline, explaining that the layer requires connectivity.\n * @returns {TileLayer|null} The created layer, or null if group not found\n */\n addXYZLayer(groupTitle, title, url, options = {}) {\n const group = this.getLayerGroupByTitle(groupTitle);\n if (!group) {\n console.warn(`[MapView] Layer group \"${groupTitle}\" not found — cannot add XYZ layer \"${title}\"`);\n return null;\n }\n\n const xyzSource = new XYZ({\n url,\n crossOrigin: 'anonymous',\n maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19,\n attributions: options.attributions,\n });\n\n const xyzLayer = new TileLayer({\n title,\n visible: options.visible !== undefined ? options.visible : true,\n source: xyzSource,\n opacity: options.opacity !== undefined ? options.opacity : 1,\n zIndex: options.zIndex,\n });\n xyzLayer.set('typeTag', 'XYZ');\n xyzLayer.set('typeDescription', 'XYZ / Tile');\n\n // Show toast on tile load errors\n xyzSource.on('tileloaderror', () => {\n showToast(`XYZ layer \"${title}\" — tile load error. Check the URL.`, 'warning', 5000);\n });\n\n group.getLayers().push(xyzLayer);\n\n // Register legend AFTER push so that a failure here doesn't block the LayerSwitcher\n if (options.legendUrl) {\n try {\n this._registerLegend(xyzLayer, title, options.legendUrl);\n } catch (err) {\n console.warn(`[MapView] Could not register legend for \"${title}\":`, err);\n }\n }\n\n // Online-only warning: when the user toggles the layer on while offline,\n // surface a toast explaining why nothing will render.\n if (options.onlineOnly) {\n this._attachOnlineOnlyHandler(xyzLayer, title);\n }\n\n console.log(`[MapView] XYZ layer added: \"${title}\" → group \"${groupTitle}\"`);\n return xyzLayer;\n }\n\n /**\n * Add a Cloud-Optimized GeoTIFF (COG) raster layer.\n *\n * COGs are streamed by range-request and rendered on the GPU via\n * WebGLTile, so a large DEM or satellite scene can be displayed without\n * downloading the whole file. This is the display half of Stage 1's raster\n * support (analysis on rasters runs server-side — see the concept note).\n *\n * @param {string} groupTitle Title of the target LayerGroup\n * @param {string} title Display title for the layer\n * @param {string} url URL of the .tif (must be a valid COG, CORS-enabled)\n * @param {Object} [options]\n * @param {boolean} [options.visible=true]\n * @param {number} [options.opacity=1]\n * @param {number} [options.zIndex]\n * @param {boolean} [options.normalize=true] Auto-stretch values to 0–1 for display\n * @param {number} [options.min] Explicit min for contrast stretch\n * @param {number} [options.max] Explicit max for contrast stretch\n * @param {Object} [options.style] OpenLayers WebGLTile style (e.g. a colour ramp)\n * @param {string} [options.attributions]\n * @returns {Promise} the created layer (async: the COG libraries\n * are code-split and fetched on first use)\n */\n async addCOGLayer(groupTitle, title, url, options = {}) {\n const group = this.getLayerGroupByTitle(groupTitle);\n if (!group) {\n console.warn(`[MapView] Layer group \"${groupTitle}\" not found — cannot add COG layer \"${title}\"`);\n return null;\n }\n\n // Pre-flight the URL before handing it to geotiff.js. Without this, a bad\n // URL (a web page, a 404, a CORS block) surfaces only as an unhandled\n // AggregateError from the library's internal range-request machinery,\n // which tells the user nothing. A one-byte range request is cheap and\n // distinguishes the common failures precisely.\n const problem = await this._probeCOGUrl(url);\n if (problem) {\n console.warn(`[MapView] COG pre-flight failed for \"${title}\":`, problem);\n showToast(problem, 'error', 8000);\n return null;\n }\n\n // Lazy-load the GeoTIFF stack only when a raster is actually opened.\n let WebGLTileLayer, GeoTIFFSource;\n try {\n [{ default: WebGLTileLayer }, { default: GeoTIFFSource }] = await Promise.all([\n import('ol/layer/WebGLTile'),\n import('ol/source/GeoTIFF'),\n ]);\n } catch (err) {\n console.error('[MapView] Could not load COG support:', err);\n showToast('Raster (COG) support could not be loaded — check your connection.', 'error', 6000);\n return null;\n }\n\n let cogLayer = null;\n try {\n const sourceOpts = {\n sources: [{\n url,\n ...(options.min !== undefined ? { min: options.min } : {}),\n ...(options.max !== undefined ? { max: options.max } : {}),\n }],\n // normalize=true stretches band values into 0–1 so single-band rasters\n // (DEMs, indices) render without an explicit style.\n normalize: options.normalize !== undefined ? options.normalize : true,\n attributions: options.attributions,\n };\n const source = new GeoTIFFSource(sourceOpts);\n\n cogLayer = new WebGLTileLayer({\n title,\n source,\n visible: options.visible !== undefined ? options.visible : true,\n opacity: options.opacity !== undefined ? options.opacity : 1,\n zIndex: options.zIndex,\n ...(options.style ? { style: options.style } : {}),\n });\n cogLayer.set('typeTag', 'COG');\n cogLayer.set('typeDescription', 'Cloud-Optimized GeoTIFF');\n\n // Surface load failures — a non-COG or a CORS-blocked file is the usual cause.\n source.on('error', (evt) => {\n console.warn(`[MapView] COG \"${title}\" source error:`, evt);\n showToast(`Raster \"${title}\" could not be loaded. Check that the file is a valid COG and is CORS-enabled.`,\n 'warning', 6000);\n });\n\n group.getLayers().push(cogLayer);\n } catch (err) {\n console.error(`[MapView] Failed to add COG layer \"${title}\":`, err);\n showToast(`Could not add raster \"${title}\": ${err.message}`, 'error', 6000);\n return null;\n }\n\n if (options.onlineOnly) this._attachOnlineOnlyHandler(cogLayer, title);\n\n console.log(`[MapView] COG layer added: \"${title}\" → group \"${groupTitle}\"`);\n return cogLayer;\n }\n\n /**\n * Check that a URL can plausibly serve a Cloud-Optimized GeoTIFF.\n *\n * Issues a 1-byte range request and inspects the response. Returns a\n * human-readable problem description, or null when the URL looks usable.\n * This exists because geotiff.js reports these failures as an opaque\n * \"AggregateError: Request failed\" from deep inside its block reader.\n *\n * @param {string} url\n * @returns {Promise}\n * @private\n */\n async _probeCOGUrl(url) {\n let res;\n try {\n res = await fetch(url, { headers: { Range: 'bytes=0-0' } });\n } catch (err) {\n // Thrown for CORS rejections and network failures alike — the browser\n // deliberately doesn't tell us which, so say so rather than guess.\n return 'Could not reach that file. It may be offline, or the server may not ' +\n 'allow cross-origin (CORS) requests from this app.';\n }\n\n if (res.status === 404) return 'No file at that URL (404). Check the address.';\n if (!res.ok && res.status !== 206) {\n return `The server refused the request (HTTP ${res.status}).`;\n }\n\n const type = (res.headers.get('content-type') || '').toLowerCase();\n if (type.includes('text/html')) {\n return 'That URL is a web page, not a GeoTIFF. Paste the direct link to the ' +\n '.tif file itself — a documentation or viewer page will not work.';\n }\n if (type.startsWith('text/') || type.includes('json')) {\n return `That URL returns ${type.split(';')[0]}rather than image data. ` +\n 'Paste the direct link to the .tif file.';\n }\n // 200 instead of 206 means range requests are ignored: the file still\n // loads, but the whole thing is downloaded. Worth warning about, not fatal.\n if (res.status === 200) {\n showToast('This server does not support byte-range requests, so the whole raster ' +\n 'will be downloaded. It may be slow for a large file.', 'warning', 7000);\n }\n return null;\n }\n\n /**\n * The features currently selected with the Select tool (shift-click or\n * Ctrl/Cmd box-select). Used by the Analysis panel to restrict an analysis\n * to a hand-picked subset.\n * @returns {Array}\n */\n getSelectedFeatures() {\n if (!this._selectInteraction) return [];\n return this._selectInteraction.getFeatures().getArray().slice();\n }\n\n /**\n * List the vector layers a user can pick as analysis inputs.\n *\n * Walks the layer tree (recursing into groups) and returns the real,\n * feature-bearing layers — excluding helper overlays (vertex handles, GPS\n * trail/position, snap guides) which are never meaningful analysis inputs.\n *\n * @param {Object} [opts]\n * @param {boolean} [opts.visibleOnly=false] only include currently-visible layers\n * @param {boolean} [opts.nonEmptyOnly=true] skip layers with no features loaded\n * @returns {Array<{layer: VectorLayer, title: string, count: number}>}\n */\n listVectorLayers(opts = {}) {\n const { visibleOnly = false, nonEmptyOnly = true } = opts;\n const out = [];\n\n const walk = (layer) => {\n if (!layer) return;\n if (typeof layer.getLayers === 'function') {\n layer.getLayers().forEach(walk);\n return;\n }\n if (!(layer instanceof VectorLayer)) return;\n if (layer === this._vertexOverlayLayer ||\n layer === this._gpsTrailLayer ||\n layer === this._gpsPositionLayer ||\n layer.get('displayInLayerSwitcher') === false) return;\n if (visibleOnly && layer.getVisible && !layer.getVisible()) return;\n\n const source = layer.getSource && layer.getSource();\n if (!source || typeof source.getFeatures !== 'function') return;\n const count = source.getFeatures().length;\n if (nonEmptyOnly && count === 0) return;\n\n out.push({ layer, title: layer.get('title') || '(untitled layer)', count });\n };\n\n this.map.getLayers().forEach(walk);\n return out;\n }\n\n // ============================================================================\n // Add External Layer Dialog\n // ============================================================================\n\n /**\n * Create the add-layer dialog overlay (hidden by default).\n * Appended to the map target element so it stays within the map viewport.\n */\n _createAddLayerDialog() {\n this._addLayerDialog = document.createElement('div');\n this._addLayerDialog.className = 'map-add-layer-dialog';\n this._addLayerDialog.style.cssText = `\n display:none;position:absolute;top:0;left:0;right:0;bottom:0;\n z-index:1100;background:rgba(0,0,0,0.4);\n align-items:center;justify-content:center;\n `;\n\n const card = document.createElement('div');\n card.style.cssText = `\n background:var(--card, #fff);color:var(--card-foreground, #1e1a4b);\n border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35);\n font-family:var(--font-body, 'Exo', sans-serif);font-size:13px;\n width:340px;max-width:90vw;border:2px solid #10b981;overflow:hidden;\n `;\n\n card.innerHTML = `\n \n Add External Layer \n × \n
\n \n
\n
\n Server URL \n
\n
\n
Layer Name \n
\n
\n WMS LAYERS parameter (e.g. workspace:layer)\n
\n
\n
\n Display Title \n
\n
\n \n Add Layer\n \n \n Cancel\n \n
\n
after ol-ext renders it:\n * • inject a type-tag chip next to the layer label\n * • inject the green \"+\" button on the External Source group header\n *\n * Idempotent — safe to call repeatedly; each injected element checks\n * whether it already exists in the row.\n */\n _decorateLayerListItem(layer, li) {\n // 1. Type-tag chip (e.g. WMS / XYZ / VEC) next to the layer name.\n // Inserted INSIDE the label's so it doesn't collide with the\n // label's left padding (where ol-ext draws the checkbox via ::before).\n const tag = layer.get('typeTag'); // 'WMS' | 'WFS' | 'XYZ' | 'VEC' | 'GEO' | 'BASE'\n if (tag) {\n const labelSpan = li.querySelector(':scope > .li-content > label > span');\n if (labelSpan && !labelSpan.querySelector(':scope > .ls-type-tag')) {\n const chip = document.createElement('span');\n chip.className = `ls-type-tag ls-type-tag-${String(tag).toLowerCase()}`;\n chip.textContent = String(tag);\n chip.title = `${tag} layer`;\n labelSpan.appendChild(chip);\n }\n }\n\n // 2. Replace ol-ext's bar-drawn +/- chevron with the GeoView chevron SVG.\n // The SVG uses stroke=\"currentColor\", so CSS `color` (set in\n // layerswitcher.css) tints it. Rotation handles the open/closed state.\n const btnBar = li.querySelector(':scope > .ol-layerswitcher-buttons');\n if (btnBar) {\n const chevronEl = btnBar.querySelector(':scope > .expend-layers, :scope > .collapse-layers');\n if (chevronEl && !chevronEl.querySelector(':scope > svg.ls-chevron-svg')) {\n chevronEl.innerHTML =\n '' +\n ' ';\n }\n }\n\n // 3. Layer-type subtitle (\"Vector / Polygon\", \"WMS / Raster\", …) below\n // the layer name. Only rendered when layer.get('typeDescription') is\n // set. For layers that start empty and gain features later (the API\n // loaders), we listen for `change:typeDescription` and update or\n // insert the subtitle then.\n const content = li.querySelector(':scope > .li-content');\n const ensureSubtitle = () => {\n if (!content) return;\n const text = layer.get('typeDescription');\n let sub = content.querySelector(':scope > .ls-layer-subtitle');\n if (!text) {\n if (sub) sub.remove();\n return;\n }\n if (!sub) {\n sub = document.createElement('div');\n sub.className = 'ls-layer-subtitle';\n const label = content.querySelector(':scope > label');\n if (label && label.nextSibling) {\n content.insertBefore(sub, label.nextSibling);\n } else {\n content.appendChild(sub);\n }\n }\n sub.textContent = text;\n };\n ensureSubtitle();\n if (!layer._lsSubtitleHooked) {\n layer._lsSubtitleHooked = true;\n layer.on('change:typeDescription', () => {\n // The may not exist any more (panel re-rendered between events)\n // — guard with a fresh lookup via the LayerSwitcher next time it draws.\n // For now we just call ensureSubtitle bound to the original li.\n ensureSubtitle();\n });\n }\n\n // 4. Per-layer Remove button — only for layers explicitly marked\n // `removable: true` (external sources, imported files, …). Built-in\n // layers (Parcels, OSM_roads, district boundary, …) are NOT removable\n // so the user can't accidentally delete them.\n if (layer.get('removable') === true && btnBar && !btnBar.querySelector(':scope > .ls-remove-btn')) {\n const removeBtn = document.createElement('button');\n removeBtn.type = 'button';\n removeBtn.className = 'ls-remove-btn';\n removeBtn.title = 'Remove this layer';\n removeBtn.setAttribute('aria-label', 'Remove layer');\n removeBtn.innerHTML =\n '' +\n ' ';\n removeBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n this._removeLayer(layer);\n });\n btnBar.appendChild(removeBtn);\n }\n\n // 5b. Import-state chip on layers staged via the external-dataset import\n // flow (LUPMIS2_Import_Upload_Design.docx §3.2). The chip's text and\n // behaviour depend on `_externalImportStatus`:\n // 'mapped' → \"Upload N\" (click → upload)\n // 'uploading' → spinner (disabled)\n // 'submitted' → \"✓ submitted\" (in upload_tmp, awaiting review)\n // 'migrated' → \"✓ live\" (supervisor promoted to lu_parcels)\n // 'failed' → \"N errors — fix?\"\n // 'other'/null→ no chip\n // Clicks dispatch a window-level CustomEvent so main.js can react\n // without MapView knowing anything about staging.\n const importId = layer.get('_externalImportId');\n if (importId != null) {\n const labelSpan = li.querySelector(':scope > .li-content > label > span');\n let chip = labelSpan ? labelSpan.querySelector(':scope > .ls-import-chip') : null;\n const status = layer.get('_externalImportStatus') || 'mapped';\n const featureCount = layer.getSource()?.getFeatures().length ?? 0;\n const errorCount = layer.get('_externalImportErrorCount') ?? 0;\n\n // Decide chip appearance.\n const chipSpec = (() => {\n switch (status) {\n case 'mapped':\n return { text: `Upload ${featureCount}`, cls: 'ls-import-chip-mapped',\n title: 'Upload this dataset to the database', clickable: true };\n case 'uploading':\n return { text: '…', cls: 'ls-import-chip-uploading',\n title: 'Uploading…', clickable: false };\n case 'submitted':\n return { text: '✓ submitted', cls: 'ls-import-chip-submitted',\n title: 'Uploaded — awaiting supervisor review', clickable: false };\n case 'migrated':\n return { text: '✓ live', cls: 'ls-import-chip-migrated',\n title: 'Approved by supervisor and live on the server', clickable: false };\n case 'failed':\n return { text: `${errorCount} errors — fix?`, cls: 'ls-import-chip-failed',\n title: 'Some rows failed; click to review', clickable: true };\n case 'other':\n case null:\n case undefined:\n default:\n return null;\n }\n })();\n\n if (!chipSpec) {\n if (chip) chip.remove();\n } else if (labelSpan) {\n if (!chip) {\n chip = document.createElement('span');\n chip.className = 'ls-import-chip';\n labelSpan.appendChild(chip);\n }\n chip.className = `ls-import-chip ${chipSpec.cls}`;\n chip.textContent = chipSpec.text;\n chip.title = chipSpec.title;\n chip.style.cursor = chipSpec.clickable ? 'pointer' : 'default';\n chip.style.opacity = chipSpec.clickable ? '1' : '0.85';\n\n // Replace any prior listener by cloning the node.\n const fresh = chip.cloneNode(true);\n chip.replaceWith(fresh);\n chip = fresh;\n\n if (chipSpec.clickable) {\n chip.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n window.dispatchEvent(new CustomEvent('lupmis:import-chip-click', {\n detail: { importId, status, layer },\n }));\n });\n }\n }\n }\n\n // 5. \"+\" button on the External Source group\n const groupTitle = (layer.get('title') || '').toLowerCase();\n if (groupTitle.includes('external')) {\n this._externalSourceGroup = layer;\n // btnBar already resolved above (same .ol-layerswitcher-buttons element)\n if (btnBar && !btnBar.querySelector('.ol-add-layer')) {\n const addBtn = document.createElement('span');\n addBtn.className = 'ol-add-layer';\n addBtn.title = 'Add external layer';\n addBtn.textContent = '+';\n addBtn.style.cssText = `\n display:inline-flex !important;align-items:center;justify-content:center;\n width:22px !important;height:22px !important;border-radius:50%;\n background:#41b6a6 !important;color:#fff !important;\n font-size:15px !important;font-weight:700;\n cursor:pointer;line-height:1 !important;\n margin:0 4px 0 0;vertical-align:middle;\n transition:background 0.2s;box-sizing:border-box;border:none;\n `;\n addBtn.addEventListener('mouseenter', () => { addBtn.style.background = '#329686'; });\n addBtn.addEventListener('mouseleave', () => { addBtn.style.background = '#41b6a6'; });\n addBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n this.showAddLayerDialog();\n });\n btnBar.prepend(addBtn);\n }\n }\n }\n\n /**\n * Remove a layer from its parent group, after confirmation. Only called\n * from the per-layer × button injected by `_decorateLayerListItem` — and\n * that button is only injected for layers marked `removable: true`, so\n * built-in layers (Parcels, OSM_roads, …) can never reach this path.\n *\n * @param {Layer} layer\n */\n _removeLayer(layer) {\n const title = layer.get('title') || 'this layer';\n if (!confirm(`Remove \"${title}\" from the map?\\n\\nThis only affects the current session — built-in layers cannot be removed.`)) {\n return;\n }\n\n // Find the parent group that owns this layer and call .remove() on its\n // collection. Walk recursively from the overlay group.\n const visit = (group) => {\n const layers = group.getLayers();\n if (layers.getArray().includes(layer)) {\n layers.remove(layer);\n return true;\n }\n let removed = false;\n layers.forEach((child) => {\n if (!removed && child.getLayers) {\n removed = visit(child);\n }\n });\n return removed;\n };\n\n const ok = visit(this.overlayGroup);\n if (ok) {\n console.log(`[MapView] Removed layer \"${title}\"`);\n showToast(`Removed \"${title}\" from the map.`, 'info', 3000);\n } else {\n console.warn(`[MapView] Could not find layer \"${title}\" in any group`);\n }\n }\n\n /**\n * Inject (or refresh) the panel chrome — an \"active count\" badge at the top\n * and a footer row with \"Reset overlays\" button at the bottom.\n *\n * The chrome lives in `.panel-container` (the wrapping ), not inside\n * the `
` — that way the badge and footer are siblings of\n * the layer list rather than malformed children of a ``.\n *\n * Called from drawlist via queueMicrotask, so it runs once per redraw cycle\n * regardless of how many layers are in the panel.\n */\n _refreshLayerSwitcherChrome(layerSwitcher) {\n const panelContainer = layerSwitcher.element?.querySelector('.panel-container');\n const ul = layerSwitcher.element?.querySelector('ul.panel');\n if (!panelContainer || !ul) return;\n\n // --- Active-count badge (top of panel-container, before the