@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/notifier/notifier.js

@@ -0,0 +1,129 @@
+import { ref, shallowRef } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * @typedef {Object} NotificationOptions
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} [timeout=5000]
+ */
+
+/**
+ * @typedef {Object} Notification
+ * @property {string} id
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} timeout
+ * @property {import("vue").Ref<boolean>} open
+ * @property {function():void} close
+ */
+
+/**
+ * @enum {string}
+ */
+export const NotificationType = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCESS: 'success',
+};
+
+/**
+ * @param {NotificationOptions} options
+ * @param {Notifier} notifier
+ * @returns {Notification}
+ */
+function createNotification(options, notifier) {
+  const { type, title, message, timeout } = options;
+  const id = uuidv4();
+  const open = ref(true);
+
+  return {
+    get id() {
+      return id;
+    },
+    get type() {
+      return type;
+    },
+    get title() {
+      return title;
+    },
+    get message() {
+      return message;
+    },
+    get timeout() {
+      return timeout ?? 5000;
+    },
+    get open() {
+      return open;
+    },
+    set open(value) {
+      open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
+      if (!open.value) {
+        this.close();
+      }
+    },
+    close() {
+      open.value = false;
+      setTimeout(() => {
+        notifier.remove(this);
+      }, 100);
+    },
+  };
+}
+
+/**
+ * API for adding snackbar notification to the VcsUiApp. This is simply a container and on its own will not render anything.
+ * Typically, you do not need to instantiate this yourself, but use the notifier on the {@see VcsUiApp}.
+ * @class
+ */
+class Notifier {
+  constructor() {
+    /**
+     * @type {import("vue").Ref<Array<Notification>>}
+     * @private
+     */
+    this._notifications = shallowRef([]);
+  }
+
+  /**
+   * @type {import("vue").Ref<Array<Notification>>}
+   * @readonly
+   */
+  get notifications() {
+    return this._notifications;
+  }
+
+  /**
+   * @param {NotificationOptions} notification
+   * @returns {Notification}
+   */
+  add(notification) {
+    const note = createNotification(notification, this);
+    // use spread since push won't trigger updates
+    this._notifications.value = [...this._notifications.value, note];
+    return note;
+  }
+
+  /**
+   * @param {Notification} notification
+   */
+  remove(notification) {
+    // reassign to trigger update
+    this._notifications.value = this._notifications.value.filter(
+      (n) => n !== notification,
+    );
+  }
+
+  /**
+   * @param {Notification} notification
+   * @returns {boolean}
+   */
+  has(notification) {
+    return this._notifications.value.includes(notification);
+  }
+}
+
+export default Notifier;

package/src/pluginHelper.js

@@ -1,5 +1,7 @@
 import { check } from '@vcsuite/check';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import { satisfies } from 'semver';
+import { version } from '../package.json';
 
 /**
  * @returns {Logger}
@@ -19,6 +21,52 @@ export const vcsAppSymbol = Symbol('vcsApp');
  */
 export const pluginFactorySymbol = Symbol('pluginFactory');
 
+/**
+ * A symbol added to each plugin which describes the base URL from which the plugin was loaded (without the filename)
+ * @type {symbol}
+ */
+export const pluginBaseUrlSymbol = Symbol('pluginBaseUrl');
+
+/**
+ * A symbol added to each plugin which describes the module URL from which the plugin was loaded (with the filename and including searchParams)
+ * @type {symbol}
+ */
+export const pluginModuleUrlSymbol = Symbol('pluginModuleUrl');
+/**
+ * A symbol added to each plugin which describes the configured version range
+ * @type {symbol}
+ */
+export const pluginVersionRangeSymbol = Symbol('pluginVersionRange');
+
+/**
+ * A helper function to create an absolute URL from a relative plugin asset URL. For example, when
+ * shipping your plugin with a "plugin-asset/icon.png", you can always retrieve said icon with getPluginAssetUrl(app, name, 'pluing-assets/icon.png')
+ * Sets the plugin version as searchParam.
+ * Returns null, if the plugin does not exist.
+ * @param {VcsUiApp} app
+ * @param {string} pluginName
+ * @param {string} asset
+ * @returns {string|null}
+ */
+export function getPluginAssetUrl(app, pluginName, asset) {
+  check(pluginName, String);
+  check(asset, String);
+
+  const plugin = app.plugins.getByKey(pluginName);
+  if (plugin && plugin[pluginBaseUrlSymbol]) {
+    const baseUrl = new URL(plugin[pluginBaseUrlSymbol]);
+    const assetUrl = new URL(asset.replace(/^\//, '/'), baseUrl);
+    baseUrl.searchParams.forEach((value, key) => {
+      if (!assetUrl.searchParams.has(key)) {
+        assetUrl.searchParams.set(key, value);
+      }
+    });
+    assetUrl.searchParams.set('version', plugin.version);
+    return assetUrl.toString();
+  }
+  return null;
+}
+
 /**
  * validates the name according to package name pattern
  * @param {string} name
@@ -28,27 +76,35 @@ export const pluginFactorySymbol = Symbol('pluginFactory');
 export function isValidPackageName(name) {
   check(name, String);
 
-  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    name,
+  );
 }
 
 /**
- * @param {VcsUiApp} app
  * @param {string} name
  * @param {PluginConfig} config
- * @param {string} [registry='https://plugins.virtualcitymap.de/']
  * @returns {Promise<VcsPlugin|null>}
  */
-export async function loadPlugin(app, name, config, registry = 'https://plugins.virtualcitymap.de/') {
+export async function loadPlugin(name, config) {
   let module = config.entry;
 
-  if (!module) {
-    module = `${registry.replace(/\/?$/, '')}/${name}/${config.version || '*'}/index.js`;
-  } else if (!/^(https?:\/\/|\/)/.test(module)) {
-    module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
+  if (!/^(https?:\/\/|\/)/.test(module)) {
+    module = `${window.location.origin}${window.location.pathname.replace(
+      /\/?$/,
+      '/',
+    )}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
+  } else if (module === 'http://localhost/_test') {
+    // early escape to bypass module loading for testing, see VcsUiApp.spec.js
+    return null;
+  }
+  if (config.version) {
+    const moduleUrl = new URL(module, window.location.href);
+    moduleUrl.searchParams.set('version', config.version);
+    module = moduleUrl.toString();
   }
-
   // if (!context.security.isTrustedUrl(module)) { XXX missing pipeline security
   //   getLogger().warning(`suppressed loading of insecure plugin ${module}`);
   //   return Promise.resolve();
@@ -56,25 +112,56 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
 
   try {
     let plugin;
-    if (window.VcsPluginLoaderFunction) { // TODO PluginLoaderfunction needs to be documented.
+    if (window.VcsPluginLoaderFunction) {
+      // TODO PluginLoaderfunction needs to be documented.
       plugin = await window.VcsPluginLoaderFunction(name, module);
     } else {
       plugin = await import(/* @vite-ignore */ module);
     }
     if (plugin.default == null || typeof plugin.default !== 'function') {
-      getLogger().error(`plugin ${name} does not provide a default exported function`);
+      getLogger().error(
+        `plugin ${name} does not provide a default exported function`,
+      );
       return null;
     }
-    const pluginInstance = await plugin.default(config);
+    const baseUrl = new URL(module);
+    baseUrl.pathname = baseUrl.pathname.replace(/\/[^/]+$/, '/');
+    const pluginInstance = await plugin.default(config, baseUrl.toString());
 
-    if (!pluginInstance.name) {
-      getLogger().error(`plugin ${name} does not expose a name`);
+    if (!(pluginInstance.name || pluginInstance.version)) {
+      getLogger().error(
+        `plugin ${name} does not conform to the VcsPlugin interface, which requires a name and version`,
+      );
       if (pluginInstance.destroy) {
         pluginInstance.destroy();
       }
       return null;
     }
+    if (!isValidPackageName(pluginInstance.name)) {
+      getLogger().warning(
+        `plugin ${pluginInstance.name} has no valid package name!`,
+      );
+    }
+    if (pluginInstance.mapVersion) {
+      if (
+        !satisfies(version, pluginInstance.mapVersion, {
+          includePrerelease: true,
+        })
+      ) {
+        getLogger().warning(
+          `plugin ${pluginInstance.name} of version ${pluginInstance.version} with map version range ${pluginInstance.mapVersion} does not satisfy version ${version} of this VC Map!`,
+        );
+      }
+    } else {
+      getLogger().warning(
+        `plugin ${pluginInstance.name} of version ${pluginInstance.version} does not provide a mapVersion!`,
+      );
+    }
+
     pluginInstance[pluginFactorySymbol] = plugin.default;
+    pluginInstance[pluginBaseUrlSymbol] = baseUrl.toString();
+    pluginInstance[pluginModuleUrlSymbol] = module;
+    pluginInstance[pluginVersionRangeSymbol] = config.version;
     return pluginInstance;
   } catch (err) {
     getLogger().error(`failed to load plugin ${name}`);
@@ -83,24 +170,65 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
   return null;
 }
 
+/**
+ * Returns relative url, if base is same, otherwise absolute url
+ * Removes version from searchParams, since version is serialized itself
+ * @param {string} base
+ * @param {string} pluginUrl
+ * @returns {string}
+ */
+export function getPluginEntry(base, pluginUrl) {
+  const baseUrl = new URL(base);
+  const pluginModuleUrl = new URL(pluginUrl);
+  pluginModuleUrl.searchParams.delete('version'); // semver is part of config
+  if (baseUrl.origin !== pluginModuleUrl.origin) {
+    return pluginModuleUrl.toString();
+  }
+  const baseSubs = baseUrl.pathname.split('/');
+  const pluginSubs = pluginModuleUrl.pathname.split('/');
+  pluginModuleUrl.pathname = pluginSubs
+    .filter((sub, idx) => sub !== baseSubs[idx])
+    .join('/');
+  return `${pluginModuleUrl.pathname}${pluginModuleUrl.search}`.substring(1);
+}
+
 /**
  * @param {VcsPlugin} plugin
  * @returns {Object}
  */
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
-  if (plugin[pluginFactorySymbol]) {
-    serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
+  serializedPlugin.name = plugin.name;
+  if (plugin[pluginVersionRangeSymbol]) {
+    serializedPlugin.version = plugin[pluginVersionRangeSymbol];
   }
+  serializedPlugin.entry = getPluginEntry(
+    window.location.href,
+    plugin[pluginModuleUrlSymbol],
+  );
+  serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
+  serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
+  serializedPlugin[pluginModuleUrlSymbol] = plugin[pluginModuleUrlSymbol];
+  serializedPlugin[pluginVersionRangeSymbol] = plugin[pluginVersionRangeSymbol];
   return serializedPlugin;
 }
 
 /**
  * @param {Object} serializedPlugin
- * @returns {Promise<VcsPlugin>}
+ * @returns {Promise<VcsPlugin|null>}
  */
 export async function deserializePlugin(serializedPlugin) {
-  const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
-  reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
-  return reincarnation;
+  if (serializedPlugin[pluginFactorySymbol]) {
+    const reincarnation = await serializedPlugin[pluginFactorySymbol](
+      serializedPlugin,
+    );
+    reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+    reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
+    reincarnation[pluginModuleUrlSymbol] =
+      serializedPlugin[pluginModuleUrlSymbol];
+    reincarnation[pluginVersionRangeSymbol] =
+      serializedPlugin[pluginVersionRangeSymbol];
+    return reincarnation;
+  }
+  return loadPlugin(serializedPlugin.name, serializedPlugin);
 }

package/src/search/ResultItem.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="ma-2 d-flex flex-row align-center" v-if="item">
+    <v-list-item-icon v-if="item.icon" class="px-1">
+      <v-icon>
+        {{ item.icon }}
+      </v-icon>
+    </v-list-item-icon>
+    <div class="px-2 d-flex align-center" :title="$t('search.select')">
+      <span v-html="marked" />
+    </div>
+    <VcsActionButtonList
+      v-if="hasActions"
+      :actions="item.actions"
+      :block-overflow="true"
+      :overflow-count="2"
+      right
+    />
+  </div>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VIcon, VListItemIcon } from 'vuetify/lib';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+
+  /**
+   * @param {string} text
+   * @param {string} query
+   * @returns {string}
+   */
+  function markText(text, query) {
+    let replacement = text;
+    if (query) {
+      const partials = query
+        .split(/[.,\s]/)
+        .filter((partial) => partial.trim());
+      partials.forEach((partial) => {
+        replacement = replacement.replaceAll(
+          new RegExp(`(^|[^>])(${partial})`, 'ig'),
+          '<span class="primary--text">$2</span>',
+        );
+      });
+    }
+    return replacement;
+  }
+
+  /**
+   * @description ResultItem with optional icon or image, title and optional actions
+   * @vue-prop {string} query - The query string to mark results
+   * @vue-prop {ResultItem} resultItem
+   * @vue-computed {boolean} hasActions - Whether result item has actions or not
+   * @vue-computed {string} marked - The result item's title with highlighted query string
+   */
+  export default {
+    name: 'ResultItem',
+    components: {
+      VcsActionButtonList,
+      VListItemIcon,
+      VIcon,
+    },
+    props: {
+      query: {
+        type: String,
+        default: '',
+      },
+      item: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const hasActions = computed(() => props.item?.actions?.length > 0);
+      const marked = computed(() => markText(props.item.title, props.query));
+
+      return {
+        hasActions,
+        marked,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/search/ResultsComponent.vue

@@ -0,0 +1,103 @@
+<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" 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"
+            class="base lighten-3"
+          />
+        </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';
+
+  /**
+   * @description 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/SearchComponent.vue

@@ -0,0 +1,116 @@
+<template>
+  <v-sheet>
+    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+      <v-icon class="pa-1"> $vcsSearch </v-icon>
+      <VcsTextField
+        class="d-inline-block user-select-none w-full mx-1"
+        autofocus
+        :loading="searching"
+        clearable
+        dense
+        :placeholder="$t('search.placeholder')"
+        v-model.trim="query"
+        @keydown.enter="search"
+        @input="reset"
+      />
+    </span>
+    <v-divider class="mt-1 base darken-1" v-if="!!results.length" />
+    <ResultsComponent :query="query" :results="results" />
+    <v-divider v-if="!!results.length" />
+    <div v-if="!!results.length" class="d-flex px-2 pt-2 pb-1 justify-end">
+      <VcsFormButton @click="zoomToAll" variant="outlined">
+        {{ $t('search.zoomToAll') }}
+      </VcsFormButton>
+    </div>
+  </v-sheet>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-input {
+      fieldset {
+        padding: 0 !important;
+      }
+      fieldset,
+      input {
+        border-color: transparent !important;
+      }
+    }
+    .v-icon .v-icon__component {
+      width: 16px;
+      height: 16px;
+    }
+  }
+</style>
+
+<script>
+  import { inject, onUnmounted, ref } from 'vue';
+  import { getLogger } from '@vcsuite/logger';
+  import { VSheet, VDivider, VIcon } from 'vuetify/lib';
+  import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
+  import ResultsComponent from './ResultsComponent.vue';
+  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
+
+  /**
+   * @description Stylized search component providing an input field for search inputs.
+   * Renders a list of results using {@link ResultsComponent }
+   */
+  export default {
+    components: {
+      VcsFormButton,
+      ResultsComponent,
+      VcsTextField,
+      VSheet,
+      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;
+      };
+
+      const zoomToAll = () => {
+        app.search.zoomToAll();
+      };
+
+      onUnmounted(() => {
+        clear();
+      });
+
+      return {
+        query,
+        searching,
+        results,
+        reset,
+        clear,
+        search,
+        zoomToAll,
+      };
+    },
+  };
+</script>