Merge pull request GEOLYTIX#1703 from GEOLYTIX/patch

Patch v4.12.3

.gitignore

@@ -33,4 +33,5 @@ public/js/lib/*
 !tests/**
 !package.json
 !jsdoc*.json
-!codi.json
+!codi.json
+!nodemon.json

DEVELOPING.md

@@ -36,6 +36,107 @@ ESBuild must also be used to compile the CSS supporting the MAPP and MAPP.UI ele
 
     npx esbuild --bundle public/css/_ui.css --outfile=public/css/ui.css --loader:.svg=dataurl
 
+### Hot rebuild with VSCode Debugger
+
+A task can be added to the `.vscode/tasks.json` to execute `nodemon` and `browser-sync` concurrently. This will allow VSCode to rebuild the application on script changes in the editor.
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "start-watch",
+      "type": "shell",
+      "command": "npx concurrently 'npx nodemon' 'npm run browser-sync'",
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": "^.*$"
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Watching for changes...",
+          "endsPattern": "Build complete"
+        }
+      }
+    }
+  ]
+}
+```
+
+`start-watch` is a `preLaunchTask` which must be added to the debug configuration in the `.vscode/launch.json`.
+
+```json
+{
+  "type": "node",
+  "request": "launch",
+  "name": "Launch Server",
+  "program": "${workspaceFolder}/express.js",
+  "preLaunchTask": "start-watch",
+  "console": "integratedTerminal",
+  "internalConsoleOptions": "openOnSessionStart",
+  "env": {}
+}
+```
+
+The `browser-sync` script is defined in the `package.json` as `"npx browser-sync start --proxy localhost:3000 --port 3001 --ui-port 3002 --files public/js/lib/**/* --no-open --no-notify"`
+
+The application running on port 3000 will be proxied to port 3001 for the browser-sync event. The browser window will refresh when the node application rebuilds after changes to the script in a VSCode editor.
+
+#### VSCode / Chrome Debugging 
+
+An additional debug configuration in `.vscode/launch.json` is required to debug the mapp lib code in VSCode. 
+
+```json
+{
+  "type": "chrome",
+  "request": "launch",
+  "name": "Debug in Chrome",
+  "url": "http://localhost:3001",
+  "webRoot": "${workspaceFolder}/xyz/lib", //Please check your worksapceFolder
+  "sourceMaps": true,
+  "pauseForSourceMap": true
+}
+```
+
+The Chrome debug config must be launched as an additional session. VSCode run and debug panel will show 2 active sessions. A chrome instance should open with the url defined in the Chrome debug config.
+
+Breakpoints set in the mapp lib script will now be respected in the VSCode debug editor window. Breakpoints set in the Chrome dev tools will also break in the VSCode editor.
+
+The browser will automatically reload on changes to files in the `lib`, 'tests' and `public/css' directories. 
+
+#### Additional settings for VSCode
+
+Here are some additional settings to use in your ./vscode/settings.json file
+
+```json
+{
+  // Enables debugging when clicking links in the terminal or debug console
+  "debug.javascript.debugByLinkOptions": "always",
+
+  // Automatically opens the debug view when a breakpoint is hit
+  "debug.openDebug": "openOnDebugBreak",
+
+  // Shows variable values directly in the editor while debugging
+  "debug.inlineValues": "on",
+
+  // Always shows the debug status (running/stopped) in the status bar
+  "debug.showInStatusBar": "always",
+
+  // Keeps the debug toolbar fixed at the top of the editor
+  "debug.toolBarLocation": "docked",
+
+  // Shows breakpoint markers in the scroll bar for easy navigation
+  "debug.showBreakpointsInOverviewRuler": true,
+
+  // Shows dots in the editor gutter where breakpoints can be placed
+  "debug.showInlineBreakpointCandidates": true,
+
+  // Pauses execution if there's an error in a conditional breakpoint
+  "debug.javascript.breakOnConditionalError": true
+}
+```
+
 ## ESLint
 
 The codebase makes use of the [eslint](eslint.org) package to ensure that our code adhere to different rules and coding guidelines.

README.md

@@ -1,4 +1,4 @@
-**v4.12.2**
+**v4.12.3**
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 ![Codi Unit Tests](https://github.com/GEOLYTIX/xyz/actions/workflows/unit_tests.yml/badge.svg)
@@ -54,8 +54,6 @@ Dynamic module imports reduce the need to bundle 3rd party libraries such as [Ta
 
 Node.js v18+
 
-[bcrypt](https://www.npmjs.com/package/bcrypt) - A library to help you hash passwords.
-
 [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) - A Node implementation of JSON Web Token.
 
 [Node-Postgres](https://github.com/brianc/node-postgres) - PostgreSQL client for Node.

esbuild.config.mjs

@@ -0,0 +1,23 @@
+// esbuild.config.mjs
+import * as esbuild from 'esbuild'
+
+const isDev = process.env.NODE_ENV !== 'DEVELOPMENT';
+
+const buildOptions = {
+    entryPoints: ['./lib/mapp.mjs', './lib/ui.mjs'],
+    bundle: true,
+    minify: isDev,
+    sourcemap: true,
+    sourceRoot: '/lib',
+    format: 'iife',
+    outdir: './public/js/lib',
+    metafile: true,
+    logLevel: 'info'
+};
+
+try {
+    await esbuild.build(buildOptions);
+} catch (err) {
+    console.error('Build failed:', err);
+    process.exit(1);
+}

lib/mapp.mjs

@@ -34,21 +34,7 @@ import plugins from './plugins/_plugins.mjs'
 hooks.parse();
 
 const _ol = {
-  current: '10.2.1',
-  load: async () => await new Promise(resolve => {
-
-    const script = document.createElement('script')
-
-    script.type = 'application/javascript'
-
-    script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js'
-
-    script.onload = resolve
-
-    document.head.append(script)
-
-    console.warn('Openlayers library loaded from script tag.')
-  })
+  current: '10.2.1'
 }
 
 if (window.ol === undefined) {
@@ -58,10 +44,11 @@ if (window.ol === undefined) {
 } else {
 
   const olVersion = parseFloat(ol?.util.VERSION)
+  const olCurrent = parseFloat(_ol.current);
 
   console.log(`OpenLayers version ${olVersion}`)
 
-  if (olVersion < _ol.current) {
+  if (olVersion < olCurrent) {
 
     console.warn(`Update the current OpenLayers version:${ol?.util.VERSION} to ${_ol.current}.`)
   }
@@ -70,9 +57,9 @@ if (window.ol === undefined) {
 self.mapp = {
   ol: _ol,
 
-  version: '4.12.2',
+  version: '4.12.3',
 
-  hash: '52558fa8bbd8752e4f27036c7ca95a7f3426a205',
+  hash: '2e1f3b08ffcd0706a030c06a61dd0d15c673dfbc',
 
   host: document.head?.dataset?.dir || '',
 

lib/mapview/_mapview.mjs

@@ -55,8 +55,8 @@ The mapview decorator may return the async mapviewPromise method which must be a
 @param {object} mapview JSON params for a new mapview.
 @property {string} [mapview.host=mapp.host] The host domain/path for queries.
 @property {object} mapview.locale The locale defintion for the mapview.
-@property {array} [mapview.svgTemplates] SVG templates to load as mapp.utils.svgSymbols.templates
-@property {array} [mapview.syncPlugins] locale.plugins[] must be loaded prior to the execution of syncPlugins.
+@property {Object} [locale.svgTemplates] Object of template key and src values to be loaded as svg strings. locale.svg_templates is the legacy property.
+@property {array} [locale.syncPlugins] An array plugins to be loaded in order.
 
 @returns {mapview} Decorated Mapview.
 */
@@ -278,18 +278,10 @@ export default function decorate(mapview) {
       .dispatchEvent(new CustomEvent('changeEnd'), 500))
   })
 
-  // Check whether svgSymbols.templates have been loaded.
-  if (!mapp.utils.svgSymbols.templates) {
-
-    mapview.svgTemplates = mapview.locale.svg_templates
-  }
-
-  if (mapview.loadPlugins) {
+  // svgTemplates replaces the legacy svg_templates configuration
+  mapview.locale.svgTemplates ??= mapview.locale.svg_templates
 
-    mapview.syncPlugins ??= mapview.locale.syncPlugins
-  }
-
-  if (mapview.syncPlugins?.length || mapview.svgTemplates) {
+  if (mapview.locale.syncPlugins?.length || mapview.locale.svgTemplates) {
 
     return mapviewPromise(mapview)
   }
@@ -335,25 +327,25 @@ function changeEnd() {
 mapviewPromise is an async method which resolves to the mapview object. The method is returned from the mapview decorator if the creation of the mapview must be awaited in order to import and execute synchronous plugin methods or load svg_templates required for synchronous feature style render methods.
 
 @param {object} mapview 
-@property {array} [mapview.svgTemplates] Array of svg_templates [objects] to be loaded.
-@property {array} [mapview.syncPlugins] Array of plugins [key] to be executed in sync.
 @property {locale} mapview.locale The locale defintion for the mapview.
 @property {array} locale.plugins Array of plugins to dynamically import.
+@property {array} [locale.syncPlugins] Array of plugins [key] to be executed in sync.
+@property {array} [locale.svgTemplates] Array of svg_templates [objects] to be loaded.
 
 @returns {Promise<mapview>} The async method resolves to the decorated mapview object.
 */
 async function mapviewPromise(mapview) {
 
-  await mapp.utils.svgTemplates(mapview.svgTemplates)
+  await mapp.utils.svgTemplates(mapview.locale.svgTemplates)
 
   await mapp.utils.loadPlugins(mapview.locale.plugins);
 
-  mapview.syncPlugins ??= [];
-  
-  const syncPlugins = new Set(mapview.syncPlugins)
+  mapview.locale.syncPlugins ??= [];
+
+  const syncPlugins = new Set(mapview.locale.syncPlugins)
 
   // Execute synchronous plugins in order of array.
-  for (const key of mapview.syncPlugins) {
+  for (const key of mapview.locale.syncPlugins) {
 
     if (typeof mapp.plugins[key] !== 'function') continue;
 

lib/ui/elements/helpDialog.mjs

@@ -14,7 +14,9 @@ export default (params) => {
     top: '3em',
     left: '6em',
     contained: true,
-    close: true,
+    closeBtn: true,
+    minimizeBtn: true,
+    headerDrag: true,
     ...params
   }
 

lib/ui/locations/entries/layer.mjs

@@ -43,6 +43,12 @@ export default function layer(entry) {
     const layer = entry.mapview.locale.layers
       .find(layer => layer.key === entry.layer)
 
+    if (!layer) {
+
+      console.warn(`Layer [${entry.layer}] not found in mapview.locale`)
+      return;
+    }
+
     // Spread locale layer into entry.
     entry = {
       ...structuredClone(layer),
@@ -90,6 +96,19 @@ async function decorateLayer(entry) {
     }
   })
 
+  // The layer may be zoom level restricted.
+  if (entry.tables) {
+
+    if (!entry.tableCurrent()) entry.display_toggle.classList.add('disabled');
+
+    entry.mapview.Map.getTargetElement().addEventListener('changeEnd', () => {
+
+      entry.tableCurrent()
+        ? entry.display_toggle.classList.remove('disabled')
+        : entry.display_toggle.classList.add('disabled')
+    })
+  }
+
   entry.panel.append(entry.display_toggle)
 
   entry.style.elements ??= [
@@ -107,14 +126,6 @@ async function decorateLayer(entry) {
 
   entry.style.panel && entry.panel.append(entry.style.panel)
 
-  // The layer may be zoom level restricted.
-  entry.tables && entry.mapview.Map.getTargetElement().addEventListener('changeEnd', () => {
-
-    entry.tableCurrent()
-      ? entry.display_toggle.classList.remove('disabled')
-      : entry.display_toggle.classList.add('disabled')
-  })
-
   entry.location.removeCallbacks.push(() => {
     entry.hide()
     delete entry.mapview.layers[entry.key]
@@ -155,10 +166,15 @@ async function showLayer() {
     }
   }
 
-  entry.featureLookup &&= entry.data
-
   if (entry.featureSet && Array.isArray(entry.data)) {
+
+    // layer entry may have featureLookup or featureSet but not both.
+    delete entry.featureLookup
     entry.featureSet = new Set(entry.data)
+
+  } else {
+
+    entry.featureLookup &&= entry.data
   }
 
   entry.display = true;

lib/utils/_utils.mjs

@@ -34,6 +34,10 @@ import getCurrentPosition from './getCurrentPosition.mjs'
 
 import merge from './merge.mjs'
 
+import mobile from './mobile.mjs';
+
+import olScript from './olScript.mjs'
+
 import paramString from './paramString.mjs'
 
 import { polygonIntersectFeatures } from './polygonIntersectFeatures.mjs'
@@ -60,8 +64,6 @@ import { formatNumericValue, unformatStringValue } from './numericFormatter.mjs'
 
 import { versionCheck } from './versionCheck.mjs';
 
-import mobile from './mobile.mjs';
-
 export default {
   stats,
   render,
@@ -81,7 +83,7 @@ export default {
   loadPlugins,
   merge,
   mobile,
-  olScript: () => mapp.ol.load(),
+  olScript,
   paramString,
   polygonIntersectFeatures,
   promiseAll,