Merge branch 'main' into mvt-query

GEOLYTIX · Nov 22, 2023 · f435b4a · f435b4a
2 parents e4346a1 + dc22e27
commit f435b4a
Show file tree

Hide file tree

Showing 16 changed files with 321 additions and 236 deletions.
diff --git a/lib/layer/decorate.mjs b/lib/layer/decorate.mjs
@@ -60,6 +60,35 @@ export default async layer => {
         layer.draw?.defaults || {}))
     })
 
+    // Check whether feature is loaded on MVT update.
+    if (layer.format === 'mvt') {
+
+      layer.features = []
+
+      // Concat layer.features array with features from tileloadend
+      layer.source.on('tileloadend', concatFeatures);
+
+      function concatFeatures(e) {
+
+        layer.features = layer.features.concat(e.tile.getFeatures())
+      }
+
+      setTimeout(checkFeature, 1000)
+
+      function checkFeature() {
+
+        let found = layer.features?.find(F => F.properties?.id === location.id)
+
+        if (found) {
+
+          layer.source.un('tileloadend', concatFeatures);
+        } else {
+
+          layer.reload()
+        }
+      }
+    }
+
     // Layer must be reloaded to reflect geometry changes.
     layer.reload()
 
@@ -92,8 +121,18 @@ export default async layer => {
   // Layer style has multiple themes.
   if (layer.style?.themes) {
 
+    Object.keys(layer.style.themes).forEach(key => {
+
+      // Assign theme key as title if undefined.
+      layer.style.themes[key].title ??= key
+
+      if (layer.style.themes[key].skip) delete layer.style.themes[key]
+    })
+
     // Keep object theme.
-    layer.style.theme = typeof layer.style.theme === 'object' ? layer.style.theme
+    layer.style.theme = typeof layer.style.theme === 'object'
+
+      ? layer.style.theme
 
       // Assign theme from key [string], or first theme.
       : layer.style.themes[layer.style.theme || Object.keys(layer.style.themes)[0]];

diff --git a/lib/layer/format/mvt.mjs b/lib/layer/format/mvt.mjs
@@ -14,7 +14,7 @@ export default layer => {
 
   layer.reload = () => {
 
-    //layer.source.clear()
+    layer.source.clear()
     layer.source.refresh()
     layer.tilesLoaded = []
     layer.featureSource.refresh()

diff --git a/lib/ui/layers/panels/style.mjs b/lib/ui/layers/panels/style.mjs
@@ -193,6 +193,7 @@ export default layer => {
 
   // Add theme control
   if (Object.keys(layer.style.themes || 0).length > 1) {
+
     content.push(mapp.utils.html`
       <div>${mapp.dictionary.layer_style_select_theme}</div>
         ${mapp.ui.elements.dropdown({

diff --git a/mod/utils/merge.js b/mod/utils/merge.js
@@ -22,21 +22,20 @@ module.exports = function mergeDeep(target, ...sources) {
         // Call recursive merge for target key object.
         Object.hasOwn(target, key) && mergeDeep(target[key], source[key]);
 
-      // Target and Source are both arrays.
+        // Target and Source are both arrays.
       } else if (Array.isArray(source[key]) && Array.isArray(target[key])) {
 
 
         // Target and Source arrays are equal.
         if (source[key].every(item => target[key].includes(item))) {
-          
+
           // Do not merge.
           target[key] = source[key]
 
         } else {
 
           // Merge unequal arrays.
-
-          target[key] = [...target[key]||[], ...source[key]]
+          target[key] = [...target[key] || [], ...source[key]]
         }
 
       } else {

diff --git a/mod/workspace/getLayer.js b/mod/workspace/getLayer.js
@@ -18,10 +18,7 @@ module.exports = async (params) => {
 
   const locale = await getLocale(params)
 
-  if (locale instanceof Error) {
-
-    return locale
-  }
+  if (locale instanceof Error) return locale
 
   const roles = params.user?.roles || []
 
@@ -35,31 +32,36 @@ module.exports = async (params) => {
 
   let layer = locale.layers[params.layer]
 
+  // Return already merged layer.
+  if (layer.merged) return layer
+
   // Assign key value as key on layer object.
   layer.key ??= params.layer
 
+  // Merge layer --> template
   if (Object.hasOwn(workspace.templates, layer.template || layer.key)) {
 
-    // Merge the workspace template into the layer.
-    layer =  merge(await getTemplate(workspace.templates[layer.template || layer.key]), layer)
-  }
+    let template = structuredClone(await getTemplate(workspace.templates[layer.template || layer.key]))
 
-  if (Array.isArray(layer.templates)) for (const key of layer.templates){
-
-    let template = Object.hasOwn(workspace.templates, key) && await getTemplate(workspace.templates[key])
-
     // Merge the workspace template into the layer.
-    layer = merge(template, layer)
+    layer =  merge(template, layer)
   }
 
-  // Check for layer geom[s].
-  if ((layer.table || layer.tables) && (!layer.geom && !layer.geoms)) {
+  // Merge templates --> layer
+  for (const key of layer.templates || []){
+
+    if (!Object.hasOwn(workspace.templates, key)) continue;
 
-    console.warn(`Layer: ${layer.key},has a table or tables defined, but no geom or geoms.`)
+    let template =  structuredClone(await getTemplate(workspace.templates[key]))
+
+    // Merge the workspace template into the layer.
+    layer = merge(layer, template)
   }
 
   // Assign layer key as name with no existing name on layer object.
   layer.name ??= layer.key
 
+  layer.merged = true
+
   return layer
 }
diff --git a/mod/workspace/getLocale.js b/mod/workspace/getLocale.js
@@ -25,8 +25,10 @@ module.exports = async (params) => {
   // A template exists for the locale key.
   if (Object.hasOwn(workspace.templates, params.locale)) {
 
+    let template = structuredClone(await getTemplate(workspace.templates[params.locale]))
+
     // Merge the workspace template into workspace.
-    locale = merge(await getTemplate(workspace.templates[params.locale]), locale)
+    locale = merge(template, locale)
   }
 
   return locale

diff --git a/public/css/_button.css b/public/css/_button.css
@@ -34,7 +34,7 @@ button {
 
   &.flat {
     border-radius: 3px;
-    border-bottom: 1px solid var(--color-lighter);
+    border-bottom: 1px solid var(--color-light-secondary);
     padding: 0.3em;
 
     &.active {
@@ -44,8 +44,8 @@ button {
 
   &.raised {
     border-radius: 3px;
-    border: 1px solid var(--color-lighter);
-    box-shadow: 1px 1px 2px var(--color-lighter);
+    border: 1px solid var(--color-light-secondary);
+    box-shadow: 1px 1px 2px var(--color-light-secondary);
     padding: 0.3em;
 
     &.active {
@@ -92,7 +92,7 @@ button {
   width: 100%;
   padding: 0.3em 0.5em;
   background-color: white;
-  border: 1px solid var(--color-lighter);
+  border: 1px solid var(--color-light-secondary);
   border-radius: 3px;
   box-shadow: 1px 1px 3px var(--color-primary-light);
 

diff --git a/public/css/_colours.css b/public/css/_colours.css
@@ -6,9 +6,13 @@
 
     --color-primary-light: #939faa;
 
-    --color-light: #E9E3DD;
+    --color-light: #ffffff;
 
-    --color-lighter: #D5E1E6;
+    --color-light-secondary: #f2f2f2;
+
+    --color-light-tertiary: #fafafa;
+
+    --color-mid: #e3e3e3;
 
     --color-on: #E18335;
 

diff --git a/public/css/_drawer.css b/public/css/_drawer.css
@@ -7,7 +7,7 @@
 
 .drawer {
   padding: 5px;
-  background-color: white;
+  background-color: var(--color-light-tertiary);
 
   &.expandable:not(.empty)>.header:hover {
     cursor: pointer;
@@ -70,13 +70,13 @@
 
   &.flat {
     border-radius: 2px;
-    border: 1px solid var(--color-lighter);
+    border: 1px solid var(--color-light-secondary);
   }
 
   &.raised {
     border-radius: 2px;
     box-shadow: 1px 1px 3px var(--color-primary-light);
-    border: 1px solid var(--color-lighter);
+    border: 1px solid var(--color-light-secondary);
   }
 
   &.raised.empty {

diff --git a/public/css/_inputs.css b/public/css/_inputs.css
@@ -156,7 +156,7 @@ label.checkbox {
     }
 
     &>li.selected {
-      background-color: var(--color-lighter);
+      background-color: var(--color-light-secondary);
     }
 
     & .label {

diff --git a/public/css/_layerview.css b/public/css/_layerview.css
@@ -40,4 +40,21 @@
     padding-left: 4px;
     padding-right: 4px;
   }
+}
+
+#layers>.drawer.layer-group .drawer.layer-view {
+  background: var(--color-light);
+  border: none;
+  box-shadow: none;
+  border-top: 2px solid var(--color-light-secondary);
+}
+
+#layers>.layer-view>.drawer,
+#layers .drawer.layer-view .drawer {
+  border: none;
+  box-shadow: none;
+}
+
+#layers>.layer-view>.drawer {
+  background: var(--color-light);
 }
diff --git a/public/css/_locationview.css b/public/css/_locationview.css
@@ -13,7 +13,7 @@
   grid-template-columns: 1fr 1fr;
 
   & pre {
-    background-color: var(--color-lighter);
+    background-color: var(--color-light-secondary);
   }
 
   & .contents {
@@ -67,7 +67,9 @@
       cursor: help;
       border-radius: 2px;
       font-weight: bold;
-      background-color: var(--color-light);
+      font-size: 0.8em;
+      color: black;
+      background-color: var(--color-mid);
     }
   }
 

diff --git a/public/css/_tabview.css b/public/css/_tabview.css
@@ -23,7 +23,7 @@
     height: 50px;
     overflow-x: auto;
     display: flex;
-    background-color: var(--color-light);
+    background-color: var(--color-light-secondary);
 
     & > .tab > .header {
       height: 100%;

diff --git a/public/css/_ui.css b/public/css/_ui.css
@@ -149,7 +149,7 @@
 }
 
 .lighter-background {
-  background-color: var(--color-lighter);
+  background-color: var(--color-light-secondary);
 }
 
 .off-black {

diff --git a/public/css/mapp.css b/public/css/mapp.css
@@ -3,8 +3,9 @@
   --color-off-black: #3f3f3f;
   --color-primary: #003D57;
   --color-primary-light: #939faa;
-  --color-light: #E9E3DD;
-  --color-lighter: #D5E1E6;
+  --color-light: #ffffff;
+  --color-light-secondary: #f2f2f2;
+  --color-light-tertiary: #fafafa;
   --color-on: #E18335;
   --color-no: #A21309;
 }