@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/application/attributionsHelper.js

@@ -0,0 +1,162 @@
+import { ref } from 'vue';
+import { ObliqueMap } from '@vcmap/core';
+
+/**
+ * @typedef {Object} Attribution.Options
+ * @property {string} provider - name of the data provider
+ * @property {number} [year] - year of dataset
+ * @property {URL} url - link to data provider
+ */
+
+/**
+ * @typedef {Object} AttributionEntry
+ * @property {string} key - name of the VcsObject the attribution applies to
+ * @property {string} title - title of the VcsObject the attribution applies to
+ * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ */
+
+/**
+ * merges attribution entries of same providers
+ * @param {Array<AttributionEntry>} entries
+ * @returns {Array<{provider: string, years: string, url: URL}>}
+ */
+export function mergeAttributions(entries) {
+  const providers = {};
+  entries.forEach(({ attributions }) => {
+    attributions.forEach(({ provider, year, url }) => {
+      const providerObject = providers[provider];
+      if (providerObject) {
+        if (year) {
+          const index = providerObject.years.indexOf(year);
+          if (url && index === -1) {
+            if (providerObject.years.every((y) => Number(y) < Number(year))) {
+              providerObject.url = url;
+            }
+            if (year) {
+              const set = new Set([...providerObject.years, Number(year)]);
+              providerObject.years = [...set].sort((a, b) => a - b);
+            }
+          }
+        }
+      } else {
+        providers[provider] = {
+          years: year ? [Number(year)] : [],
+          url,
+        };
+      }
+    });
+  });
+  return Object.keys(providers).map((provider) => ({
+    provider,
+    years: providers[provider].years.join(', '),
+    url: providers[provider].url,
+  }));
+}
+
+/**
+ * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+ * Each entry is defined by a key derived from the object's className and name, and it's associated attributions.
+ * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
+ * Returns a destroy function to clear listeners.
+ * @param {import("ui").VcsUiApp} app
+ * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ */
+export function getAttributions(app) {
+  /**
+   * @type {import("vue").Ref<Array<AttributionEntry>>}
+   */
+  const entries = ref([]);
+  /**
+   * @type {function():void}
+   */
+  let obliqueListener = () => {};
+
+  /**
+   * Adds an entry for an object using a combination of the object's className and name as key.
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function addAttributions(object) {
+    const { attributions } = object.properties;
+    if (!attributions) {
+      return;
+    }
+    const key = `${object.className}_${object.name}`;
+    const idx = entries.value.findIndex((e) => e.key === key);
+    if (idx < 0) {
+      entries.value.push({
+        key,
+        title:
+          object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions)
+          ? attributions
+          : [attributions],
+      });
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function removeAttributions(object) {
+    const idx = entries.value.findIndex(
+      (e) => e.key === `${object.className}_${object.name}`,
+    );
+    if (idx >= 0) {
+      entries.value.splice(idx, 1);
+    }
+  }
+
+  /**
+   * adds or removes a AttributionEntry on layer state changes
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   */
+  function syncAttributions(object) {
+    if (object?.properties?.attributions === undefined) {
+      return;
+    }
+    if (object.active || object.loaded) {
+      addAttributions(object);
+    } else {
+      removeAttributions(object);
+    }
+  }
+
+  /**
+   *
+   * @param {import("@vcmap/core").VcsMap} map
+   */
+  function initAttributions(map) {
+    if (!map) {
+      return;
+    }
+    obliqueListener();
+    entries.value.splice(0);
+    syncAttributions(map);
+    [...map.layerCollection].forEach((layer) => {
+      if (layer.isSupported(map)) {
+        syncAttributions(layer);
+      }
+    });
+    if (map instanceof ObliqueMap) {
+      syncAttributions(map.collection);
+      obliqueListener =
+        map.collectionChanged.addEventListener(syncAttributions);
+    }
+  }
+
+  const listeners = [
+    app.maps.mapActivated.addEventListener(initAttributions),
+    app.layers.stateChanged.addEventListener(syncAttributions),
+    app.layers.removed.addEventListener(removeAttributions),
+    app.maps.removed.addEventListener(removeAttributions),
+  ];
+
+  initAttributions(app.maps.activeMap);
+
+  const destroy = () => {
+    listeners.forEach((cb) => cb());
+    obliqueListener();
+  };
+
+  return { entries, destroy };
+}

package/src/callback/activateLayersCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} ActivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to activate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ActivateLayersCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ActivateLayersCallback';
+  }
+
+  /**
+   * @param {ActivateLayersOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNames = options.layerNames;
+  }
+
+  callback() {
+    this._layerNames
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.activate());
+  }
+
+  /**
+   * @returns {ActivateLayersOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerNames = this._layerNames.slice();
+    return config;
+  }
+}
+
+export default ActivateLayersCallback;
+callbackClassRegistry.registerClass(
+  ActivateLayersCallback.className,
+  ActivateLayersCallback,
+);

package/src/callback/applyLayerStyleCallback.js

@@ -0,0 +1,63 @@
+import { FeatureLayer } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} ApplyLayerStyleOptions
+ * @property {string} styleName - name of the style
+ * @property {string} layerName - name of the layer to apply the style
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ApplyLayerStyleCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ApplyLayerStyleCallback';
+  }
+
+  /**
+   * @param {ApplyLayerStyleOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._styleName = options.styleName;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._layerName = options.layerName;
+  }
+
+  callback() {
+    const style = this._app.styles.getByKey(this._styleName);
+    const layer = this._app.layers.getByKey(this._layerName);
+    if (style && layer && layer instanceof FeatureLayer) {
+      layer.setStyle(style);
+    }
+  }
+
+  /**
+   * @returns {ApplyLayerStyleOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.styleName = this._styleName;
+    config.layerName = this._layerName;
+    return config;
+  }
+}
+
+export default ApplyLayerStyleCallback;
+callbackClassRegistry.registerClass(
+  ApplyLayerStyleCallback.className,
+  ApplyLayerStyleCallback,
+);

package/src/callback/deactivateLayersCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} DeactivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to deactivate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class DeactivateLayersCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'DeactivateLayersCallback';
+  }
+
+  /**
+   * @param {DeactivateLayersOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNames = options.layerNames;
+  }
+
+  callback() {
+    this._layerNames
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.deactivate());
+  }
+
+  /**
+   * @returns {DeactivateLayersOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerNames = this._layerNames.slice();
+    return config;
+  }
+}
+
+export default DeactivateLayersCallback;
+callbackClassRegistry.registerClass(
+  DeactivateLayersCallback.className,
+  DeactivateLayersCallback,
+);

package/src/callback/goToViewpointCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} GoToViewpointOptions
+ * @property {string} viewpoint - name of the viewpoint
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class GoToViewpointCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'GoToViewpointCallback';
+  }
+
+  /**
+   * @param {GoToViewpointOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._viewpoint = options.viewpoint;
+  }
+
+  callback() {
+    const vp = this._app.viewpoints.getByKey(this._viewpoint);
+    if (this._app.maps.activeMap && vp) {
+      this._app.maps.activeMap.gotoViewpoint(vp);
+    }
+  }
+
+  /**
+   * @returns {GoToViewpointOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.viewpoint = this._viewpoint;
+    return config;
+  }
+}
+
+export default GoToViewpointCallback;
+callbackClassRegistry.registerClass(
+  GoToViewpointCallback.className,
+  GoToViewpointCallback,
+);

package/src/callback/vcsCallback.js

@@ -0,0 +1,66 @@
+import { ClassRegistry } from '@vcmap/core';
+
+/**
+ * @type {ClassRegistry<VcsCallback>}
+ */
+export const callbackClassRegistry = new ClassRegistry();
+
+/**
+ * creates instances of VcsCallback classes and executes its callback function
+ * @param {VcsUiApp} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ */
+export function executeCallbacks(app, vcsCallbackOptions) {
+  vcsCallbackOptions.forEach((options) =>
+    app.callbackClassRegistry.createFromTypeOptions(options, app)?.callback(),
+  );
+}
+
+/**
+ * @typedef {Object} VcsCallbackOptions
+ * @property {string} type
+ */
+
+/**
+ * @typedef {Object} VcsCallback
+ * @property {function():void} callback
+ */
+
+/**
+ * @class
+ * @abstract
+ */
+class VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'VcsCallback';
+  }
+
+  /**
+   * @param {VcsCallbackOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    /**
+     * @protected
+     * @type {VcsUiApp}
+     */
+    this._app = app;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  callback() {}
+
+  /**
+   * @returns {VcsCallbackOptions}
+   */
+  toJSON() {
+    return {
+      type: this.constructor.className,
+    };
+  }
+}
+
+export default VcsCallback;

package/src/components/ImageElementInjector.vue

@@ -0,0 +1,24 @@
+<template>
+  <div />
+</template>
+
+<script>
+  /**
+   * @description A component injecting an HTMLCanvasElement or HTMLImageElement in a div.
+   * @vue-prop {HTMLCanvasElement|HTMLImageElement} element
+   */
+  export default {
+    name: 'ImageElementInjector',
+    props: {
+      element: {
+        type: [HTMLCanvasElement, HTMLImageElement],
+        required: true,
+      },
+    },
+    mounted() {
+      this.$el.replaceWith(this.element);
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,14 +1,19 @@
 <template>
   <div v-if="actions.length > 0" :class="classes">
-    <VcsButton
+    <component
+      :is="button"
       class="d-flex"
-      v-for="(button, index) in buttons"
-      :key="`${button.name}-${index}`"
-      :tooltip="button.title"
-      :icon="button.icon"
-      :active="button.active"
-      @click.stop="button.callback($event)"
-      v-bind="{...$attrs}"
+      v-for="(btn, index) in buttons"
+      :key="`${btn.name}-${index}`"
+      :tooltip="btn.title"
+      :icon="btn.icon"
+      :active="btn.active"
+      :disabled="btn.disabled"
+      :has-update="btn.hasUpdate"
+      :background="btn.background"
+      @click.stop="btn.callback($event)"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
     />
     <v-menu
       v-if="overflowButtons.length > 0"
@@ -18,27 +23,33 @@
       offset-x
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
-          v-bind="{...$attrs, ...attrs}"
+        <component
+          :is="button"
+          v-bind="{ ...$attrs, ...attrs }"
           v-on="on"
           class="d-flex"
         >
-          <v-icon v-text="overflowIcon" />
-        </VcsButton>
+          <v-icon>{{ overflowIcon }}</v-icon>
+        </component>
       </template>
       <VcsActionList :actions="overflowButtons" />
     </v-menu>
-    <v-spacer v-else-if="blockOverflow" class="flex-grow-0 d-inline-block px-2" />
+    <v-spacer
+      v-else-if="blockOverflow"
+      class="flex-grow-0 d-inline-block px-2"
+    />
   </div>
 </template>
 <style lang="scss">
-.action-btn-wrap{
-  gap: 8px;
-}
+  .action-btn-wrap {
+    gap: 8px;
+  }
 </style>
 <script>
-
+  import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
+  import VcsToolButton from './VcsToolButton.vue';
+  import VcsFormButton from './VcsFormButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
   /**
@@ -46,6 +57,7 @@
    * A component rendering a list of actions with overflow mechanic using
    * {@link VcsButton} and {@link VcsActionList}.
    * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
    * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
@@ -54,13 +66,27 @@
    */
   export default {
     name: 'VcsActionButtonList',
-    components: { VcsActionList, VcsButton },
+    components: {
+      VcsActionList,
+      VcsButton,
+      VcsToolButton,
+      VcsFormButton,
+      VMenu,
+      VIcon,
+      VSpacer,
+    },
     props: {
       actions: {
         type: Array,
         required: true,
         validator: validateActions,
       },
+      button: {
+        type: String,
+        default: 'VcsButton',
+        validator: (type) =>
+          ['VcsButton', 'VcsToolButton', 'VcsFormButton'].includes(type),
+      },
       overflowCount: {
         type: Number,
         default: 2,
@@ -75,17 +101,21 @@
       },
     },
     computed: {
-      right() { return this.$attrs.right !== undefined && this.$attrs.right !== false; },
+      right() {
+        return this.$attrs.right !== undefined && this.$attrs.right !== false;
+      },
       buttons() {
-        const buttons = this.actions.filter(i => i.icon).slice(0, this.overflowCount);
+        const buttons = this.actions
+          .filter((i) => i.icon)
+          .slice(0, this.overflowCount);
         if (this.right) {
           return buttons.reverse();
         }
         return buttons;
       },
       overflowButtons() {
-        const buttonsNames = this.buttons.map(i => i.name);
-        return this.actions.filter(i => !buttonsNames.includes(i.name));
+        const buttonsNames = this.buttons.map((i) => i.name);
+        return this.actions.filter((i) => !buttonsNames.includes(i.name));
       },
       classes() {
         const classes = ['d-flex', 'align-center', 'action-btn-wrap'];