@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/src/search/resultsComponent.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-list dense class="ma-0 overflow-y-auto vcs-search-results">
+    <v-list-item-group
+      v-model="highlighted"
+    >
+      <v-list-item
+        v-for="(item, index) in results"
+        :key="index"
+        color="secondary"
+        class="px-0"
+      >
+        <v-list-item-content>
+          <ResultItem
+            :item="item"
+            :query="query"
+            class="cursor-pointer"
+          />
+          <v-divider
+            v-if="index < results.length - 1"
+            :key="index"
+          />
+        </v-list-item-content>
+      </v-list-item>
+    </v-list-item-group>
+  </v-list>
+</template>
+
+<script>
+  import { inject, onUnmounted, ref, computed } from 'vue';
+  import { VDivider, VList, VListItem, VListItemContent, VListItemGroup } from 'vuetify/lib';
+  import ResultItem from './resultItem.vue';
+
+  /**
+   * ResultsComponent listing all available result items in a scrollable list
+   * @vue-prop {string} query - The query string forwarded to mark results within resultItem component.
+   * @vue-prop {Array<ResultItem>} results - Array of results.
+   * @vue-computed {import("vue").Ref<string>} highlighted - The highlighted result item. Updates also on feature select.
+   */
+  export default {
+    name: 'ResultsComponent',
+    components: {
+      ResultItem,
+      VList,
+      VListItemGroup,
+      VListItem,
+      VListItemContent,
+      VDivider,
+    },
+    props: {
+      query: {
+        type: String,
+        default: '',
+      },
+      results: {
+        type: Array,
+        required: true,
+      },
+    },
+    setup(props) {
+      const highlightedRef = ref(-1);
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const selectedListener = app.featureInfo.featureChanged.addEventListener((feature) => {
+        if (highlightedRef.value >= 0) {
+          if (feature && props.results[highlightedRef.value].feature === feature) {
+            return;
+          }
+          highlightedRef.value = -1;
+        } else if (feature) {
+          highlightedRef.value = props.results.findIndex(r => r.feature === feature);
+        }
+      });
+
+      onUnmounted(() => {
+        selectedListener();
+      });
+
+      return {
+        highlighted: computed({
+          get() { return highlightedRef.value; },
+          set(value) {
+            highlightedRef.value = value;
+            if (value >= 0) {
+              const item = props.results[value];
+              item.clicked();
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .vcs-search-results {
+    max-height: 400px;
+  }
+</style>

package/src/search/search.js

@@ -0,0 +1,326 @@
+import {
+  IndexedCollection,
+  markVolatile,
+  maxZIndex,
+  mercatorProjection,
+  VcsEvent,
+  vcsLayerName,
+  VectorLayer,
+  VectorStyleItem, Viewpoint,
+} from '@vcmap/core';
+import { shallowRef } from 'vue';
+import { check } from '@vcsuite/check';
+import { Icon } from 'ol/style.js';
+import { getLogger } from '@vcsuite/logger';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getViewpointFromFeature } from '../actions/actionHelper.js';
+
+/**
+ * A readonly rendering interface of a ResultItem.
+ * A ResultItem must provide either a feature, a clicked handler or both.
+ * @typedef {Object} ResultItem
+ * @property {string} title
+ * @property {string} [icon] An optional icon
+ * @property {Array<VcsAction>} [actions]
+ * @property {function():Promise<void>} [clicked] Obligatory, if no feature is provided. Can overwrite default zoom to feature behaviour.
+ * @property {import("ol").Feature|undefined} [feature] If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
+ */
+
+
+/**
+ * @interface SearchImpl
+ * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
+ * @property {function(q:string):Array<ResultItem>} search
+ * @property {function(q:string):Array<string>} [suggest] // XXX currently not implemented in UI at Beta state
+ * @property{function():void} abort - should abort any ongoing requests to search or suggest without throwing an error
+ * @property {function():void} destroy
+ */
+
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+function getPointResultIcon(color) {
+  return {
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(color)}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    scale: 1,
+    color,
+  };
+}
+
+/**
+ * sets up result layer for displaying search results
+ * @param {VcsUiApp} app
+ * @returns {{ resultLayer: import("@vcmap/core").VectorLayer, destroy: (function(): void)}}
+ */
+function setupSearchResultLayer(app) {
+  const resultLayer = new VectorLayer({
+    projection: mercatorProjection.toJSON(),
+    vectorProperties: {
+      altitudeMode: 'clampToGround',
+      classificationType: 'both',
+    },
+    properties: {
+      title: 'search.title',
+    },
+    zIndex: maxZIndex,
+  });
+  markVolatile(resultLayer);
+  app.layers.add(resultLayer);
+
+  const style = new VectorStyleItem({
+    image: getPointResultIcon(defaultPrimaryColor),
+    fill: {
+      color: 'rgba(237, 237, 237, 0.1)',
+    },
+    stroke: {
+      color: defaultPrimaryColor,
+      width: 5,
+    },
+  });
+  resultLayer.setStyle(style);
+
+  function setResultColor(color) {
+    style.stroke?.setColor(color);
+    style.image = new Icon(getPointResultIcon(color));
+    resultLayer.forceRedraw();
+  }
+
+  const listeners = [
+    app.uiConfig.added.addEventListener((item) => {
+      if (item.name === 'primaryColor') {
+        setResultColor(item.value);
+      }
+    }),
+    app.uiConfig.removed.addEventListener((item) => {
+      if (item.name === 'primaryColor') {
+        setResultColor(defaultPrimaryColor);
+      }
+    }),
+  ];
+
+  const destroy = () => {
+    resultLayer.destroy();
+    listeners.forEach(cb => cb());
+  };
+
+  return { resultLayer, destroy };
+}
+
+/**
+ * Symbol added to search implementations to specify the implementation's owner
+ * @type {symbol}
+ */
+const searchImplOwnerSymbol = Symbol('featureInfoView');
+
+
+/**
+ * Collection of SearchImpl
+ * @extends {IndexedCollection<SearchImpl<ResultItem>>}
+ */
+class Search extends IndexedCollection {
+  /**
+   * @param {VcsUiApp} app
+   */
+  constructor(app) {
+    super();
+
+    /**
+     * @type {VcsUiApp}
+     * @private
+     */
+    this._app = app;
+
+    /**
+     * An event triggered every time the currentResults array changes,
+     * either by a new search providing the new results or
+     * on clearing, if the results array has not been empty already.
+     * @type {import("@vcmap/core").VcsEvent<Array<ResultItem>>}
+     * @private
+     */
+    this._resultsChanged = new VcsEvent();
+
+    /**
+     * @type {import("vue").Ref<Array<ResultItem>>}
+     * @private
+     */
+    this._currentResults = shallowRef([]);
+    const { resultLayer, destroy } = setupSearchResultLayer(app);
+    /**
+     * @type {import("@vcmap/core").VectorLayer}
+     * @private
+     */
+    this._resultLayer = resultLayer;
+    /**
+     * @type {function():void}
+     * @private
+     */
+    this._destroyResultLayer = destroy;
+  }
+
+  /**
+   * An event triggered every time the currentResults array changes,
+   * either by a new search providing the new results or
+   * on clearing, if the results array has not been empty already.
+   * @type {import("@vcmap/core").VcsEvent<Array<ResultItem>>}
+   * @readonly
+   */
+  get resultsChanged() {
+    return this._resultsChanged;
+  }
+
+  /**
+   * @type {import("vue").Ref<Array<ResultItem>>}
+   * @readonly
+   */
+  get currentResults() {
+    return this._currentResults;
+  }
+
+  /**
+   * @type {VectorLayer}
+   * @readonly
+   */
+  get resultLayer() {
+    return this._resultLayer;
+  }
+
+  /**
+   * @param {SearchImpl} item
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @param {number=} index
+   */
+  add(item, owner, index) {
+    check(owner, [String, vcsAppSymbol]);
+    check(item.search, Function);
+    if (item.name !== owner) {
+      getLogger('Search').warning('SearchImplementations must be named as the plugin they are owned by.');
+    }
+    item[searchImplOwnerSymbol] = owner;
+    super.add(item, index);
+  }
+
+  /**
+   * removes all search implementations of a specific owner (plugin) and fires removed Events
+   * @param {string|vcsAppSymbol} owner
+   */
+  removeOwner(owner) {
+    this._array.forEach((impl) => {
+      if (impl[searchImplOwnerSymbol] === owner) {
+        super.remove(impl);
+      }
+    });
+  }
+
+  /**
+   * Get the results for a given query string.
+   * Available features are added to results layer and map is zoomed to all results (extent of result layer).
+   * Adds default clicked handler to result items with feature, which zooms to and highlights said feature. If feature has FeatureInfoView, feature is selected by featureInfo.
+   * @param {string} q
+   * @returns {Promise<Array<ResultItem>>}
+   */
+  async search(q) {
+    this.clearResults();
+    const promises = await Promise.allSettled([...this._array].map(impl => impl.search(q)));
+    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    if (!isAborted) {
+      const results = promises
+        .map((o) => {
+          if (o.status === 'rejected') {
+            getLogger('Search').warning(o.reason);
+            return [];
+          }
+          return o.value;
+        })
+        .flat();
+
+      this._currentResults.value = results
+        .filter(r => r.feature || r.clicked)
+        .map((item) => {
+          if (item.feature) {
+            this._resultLayer.addFeatures([item.feature]);
+            if (!item.clicked) {
+              const viewpoint = getViewpointFromFeature(item.feature);
+              item.clicked = () => {
+                this._app.maps.activeMap.gotoViewpoint(viewpoint);
+                return this._app.featureInfo.selectFeature(item.feature);
+              };
+            }
+          }
+          return item;
+        });
+      if (this._currentResults.value.length > 0) {
+        await this._resultLayer.activate();
+        const extent = this._resultLayer.getZoomToExtent();
+        const viewpoint = Viewpoint.createViewpointFromExtent(extent);
+        await this._app.maps.activeMap.gotoViewpoint(viewpoint);
+        this.resultsChanged.raiseEvent(this._currentResults.value.slice(0));
+      }
+    }
+    return this._currentResults.value;
+  }
+
+  /**
+   * Get the suggestions for a given query string
+   * @param {string} q
+   * @returns {Promise<Array<string>>}
+   */
+  async suggest(q) {
+    const promises = await Promise.allSettled([...this._array].map((impl) => {
+      if (impl.suggest) {
+        return impl.suggest(q);
+      }
+      return Promise.resolve([]);
+    }));
+    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    if (isAborted) {
+      return [];
+    }
+    const suggestions = promises
+      .map((o) => {
+        if (o.status === 'rejected') {
+          getLogger('Search').warning(o.reason);
+          return [];
+        }
+        return o.value;
+      })
+      .flat();
+    return suggestions;
+  }
+
+  /**
+   * Aborting any ongoing request
+   */
+  abort() {
+    [...this._array].forEach(impl => impl.abort?.());
+  }
+
+  /**
+   * Clears the results and aborts running request
+   */
+  clearResults() {
+    this.abort();
+    if (this._currentResults.value.length > 0) {
+      this._currentResults.value = [];
+      this.resultsChanged.raiseEvent(this._currentResults.value.slice(0));
+    }
+    this._resultLayer.removeAllFeatures();
+    this._resultLayer.deactivate();
+    if (this._app.featureInfo.selectedFeature?.[vcsLayerName] === this._resultLayer.name) {
+      this._app.featureInfo.clear();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    [...this._array].forEach(impl => impl.destroy());
+    this.resultsChanged.destroy();
+    this._destroyResultLayer();
+    super.destroy();
+  }
+}
+
+export default Search;

package/src/search/searchComponent.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-card>
+    <span class="d-flex justify-space-between align-center ma-1">
+      <v-icon
+        class="mx-2"
+      >
+        $vcsSearch
+      </v-icon>
+      <VcsTextField
+        class="font-size-14 d-inline-block user-select-none w-full mx-2"
+        autofocus
+        :loading="searching"
+        clearable
+        dense
+        :placeholder="$t('search.placeholder')"
+        v-model.trim="query"
+        @keydown.enter="search"
+        @keydown.esc="clear"
+        @input="reset"
+      />
+    </span>
+    <v-divider />
+    <ResultsComponent :query="query" :results="results" />
+  </v-card>
+</template>
+
+<style>
+
+</style>
+
+<script>
+  import { inject, onUnmounted, ref } from 'vue';
+  import { getLogger } from '@vcsuite/logger';
+  import { VCard, VDivider, VIcon } from 'vuetify/lib';
+  import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
+  import ResultsComponent from './resultsComponent.vue';
+
+  export default {
+    components: {
+      ResultsComponent,
+      VcsTextField,
+      VCard,
+      VIcon,
+      VDivider,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const searching = ref(false);
+      const query = ref(null);
+      const suggestions = ref([]);
+      const results = app.search.currentResults;
+
+      const reset = () => {
+        app.search.clearResults();
+        suggestions.value = [];
+      };
+
+      const clear = () => {
+        reset();
+        searching.value = false;
+        query.value = null;
+      };
+
+      const search = async () => {
+        reset();
+        searching.value = true;
+        try {
+          await app.search.search(query.value);
+        } catch (e) {
+          getLogger('Search').error(e);
+        }
+        searching.value = false;
+      };
+
+      onUnmounted(() => {
+        clear();
+      });
+
+      return {
+        query,
+        searching,
+        results,
+        reset,
+        clear,
+        search,
+      };
+    },
+  };
+</script>

package/src/styles/_typography.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .v-application {
   h1,
   h2,
@@ -12,6 +14,7 @@
   .caption,
   .tooltip,
   p {
+    font-size: $font-size;
     &:not(.v-icon) {
       font-family: 'Titillium Web', sans-serif !important;
     }

package/src/styles/utils/_cursor.scss

@@ -6,6 +6,10 @@
   cursor: pointer;
 }
 
+.cursor-auto {
+  cursor: auto;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed !important;
 }

package/src/styles/variables.scss

@@ -47,7 +47,6 @@ $icon-size: 20px; // 24px !default;
 $icon-size-dense: 16px; // 20px !default;
 
 /** VcsSelect **/
-
 $select-dense-selections-margin: 4px 4px 3px 0; // 5px 4px 3px 0 !default;
 
 // list box
@@ -61,18 +60,38 @@ $list-item-min-height: 32px; // 48px !default;
 $list-dense-min-height: 24px; // 40px !default;
 $list-item-content-padding: 4px 0; // 12px 0 !default;
 $list-dense-content-padding: 0 0; // 8px 0 !default;
-$list-item-action-icon-margin: 0 0; //32px !default;
+$list-item-action-icon-margin: 0; //32px !default;
 $list-item-action-margin: 0 0; // 12px 0 !default;
 $list-item-icon-margin: auto 0; // 16px 0 !default;
-
+$list-item-content-children-margin-bottom: 0; // 2px !default;
 
 /** Treeview **/
 $treeview-node-level-width: 16px;
 $treeview-node-margin: 4px;
 $treeview-node-height: 32px; // 48px !default;
 
-/** Expansion Panel */
+/** Expansion Panel **/
 $expansion-panel-header-min-height: 32px; // 48px !default;
 $expansion-panel-active-header-min-height: 32px; // 64px !default;
 $expansion-panel-header-padding: 6px 0; // 16px 24px !default;
 $expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;
+
+/** Footer **/
+$footer-padding: 0 8px; // 6px 16px !default;
+
+/** Wizard **/
+$stepper-vertical-padding-bottom: 16px; // 36px !default;
+$stepper-vertical-step-padding: 12px 8px;
+$stepper-vertical-content-ltr-margin: -14px 0 -14px 13px; // -8px -36px -16px 36px !default;
+$stepper-vertical-content-ltr-padding: 16px 8px 16px 16px; // 16px 23px 16px 60px !default;
+$stepper-vertical-step-step-margin: 8px;
+$stepper-step-step-min-width: 12px;
+$stepper-step-step-width: 12px;
+$stepper-step-step-height: 12px;
+
+/** Snackbar **/
+$snackbar-bottom: 36px;
+$snackbar-background-color: rgba(0, 0, 0, 0.8);
+$snackbar-content-padding: 8px;
+$snackbar-action-margin: 8px;
+$snackbar-wrapper-min-height: 36px;

package/src/vcsUiApp.js

@@ -30,6 +30,8 @@ import FeatureInfo from './featureInfo/featureInfo.js';
 import UiConfig from './uiConfig.js';
 import { createEmptyState, getStateFromURL } from './state.js';
 import { version } from '../package.json';
+import Search from './search/search.js';
+import Notifier from './notifier/notifier.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
@@ -125,6 +127,7 @@ class VcsUiApp extends VcsApp {
         this._toolboxManager.removeOwner(plugin.name);
         this._categoryManager.removeOwner(plugin.name);
         this._contextMenuManager.removeOwner(plugin.name);
+        this._search.removeOwner(plugin.name);
         if (plugin.i18n) {
           this.i18n.addPluginMessages(plugin.name, plugin[contextIdSymbol], plugin.i18n);
         }
@@ -133,7 +136,11 @@ class VcsUiApp extends VcsApp {
           if (this._cachedAppState.contextIds.includes(plugin[contextIdSymbol])) {
             state = this._cachedAppState.plugins.find(s => s.name === plugin.name);
           }
-          plugin.initialize(this, state?.state);
+          try {
+            plugin.initialize(this, state?.state);
+          } catch (e) {
+            getLogger().error(`Error in plugin ${plugin.name} initialize hook`, e);
+          }
         }
       }),
       this._plugins.removed.addEventListener(async (plugin) => {
@@ -142,6 +149,7 @@ class VcsUiApp extends VcsApp {
         this._toolboxManager.removeOwner(plugin.name);
         this._categoryManager.removeOwner(plugin.name);
         this._contextMenuManager.removeOwner(plugin.name);
+        this._search.removeOwner(plugin.name);
         this.i18n.removePluginMessages(plugin.name, plugin[contextIdSymbol]);
       }),
     ];
@@ -210,6 +218,18 @@ class VcsUiApp extends VcsApp {
      */
     this._contextMenuManager = new ContextMenuManager(this);
 
+    /**
+     * @type {Search}
+     * @private
+     */
+    this._search = new Search(this);
+
+    /**
+     * @type {Notifier}
+     * @private
+     */
+    this._notifier = new Notifier();
+
     /**
      * @type {AppState}
      * @private
@@ -283,12 +303,24 @@ class VcsUiApp extends VcsApp {
    */
   get contextMenuManager() { return this._contextMenuManager; }
 
+  /**
+   * @type {Search}
+   * @readonly
+   */
+  get search() { return this._search; }
+
   /**
    * @type {UiConfig}
    * @readonly
    */
   get uiConfig() { return this._uiConfig; }
 
+  /**
+   * @type {Notifier}
+   * @readonly
+   */
+  get notifier() { return this._notifier; }
+
   /**
    * Get the state of the application. When passed the forUrl flag, only a minimal set of states shall be provided for a sharable link to the current state (to ensure
    * the maximum URL length is not exceeded). This includes: layer active state & styling, active map, active viewpoint,
@@ -320,6 +352,7 @@ class VcsUiApp extends VcsApp {
           active: l.active || l.loading,
         };
         if (
+          l.style &&
           l.style.name !== l.defaultStyle.name &&
           this.styles.has(l.style) &&
           l.style[contextIdSymbol] !== defaultDynamicContextId &&
@@ -447,6 +480,7 @@ class VcsUiApp extends VcsApp {
     destroyCollection(this._plugins);
     destroyCollection(this._contentTree);
     destroyCollection(this._i18n);
+    destroyCollection(this._search);
     this._contentTreeClassRegistry.destroy();
     this._featureInfo.destroy();
     this._uiConfig.destroy();

package/src/vuePlugins/vuetify.js

@@ -46,6 +46,8 @@ export function createVuetify() {
           accent: '#757575',
           warning: '#FFCE00',
           error: '#FF5252',
+          info: '#2196F3',
+          success: '#4CAF50',
         },
       },
     },