@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/public/assets/favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="SvgjsSvg1004" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" style="fill: none;"/>
+  <g>
+    <path id="SvgjsPath1003" d="m120.44,41.1l-22.64,22.9-30.07-30.44c-.98-1-2.33-1.56-3.73-1.56h52.71c1.4,0,2.73.56,3.73,1.56,2.04,2.05,2.06,5.4.05,7.48,0,0-.05.06-.05.06Z" style="fill: #86b110; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1002" d="m97.8,64l-30.09,30.44c-2.06,2.08-5.39,2.08-7.45,0-.98-1-1.55-2.36-1.55-3.78v-53.32c0-1.41.56-2.77,1.55-3.78,2.06-2.08,5.39-2.08,7.45,0l30.09,30.44Z" style="fill: #005434; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1001" d="m58.71,37.34v53.32c0,1.41.56,2.77,1.55,3.78L7.54,41.1c-2.04-2.05-2.06-5.4-.05-7.48l.05-.06c1-1,2.33-1.56,3.73-1.56h52.71c-1.4,0-2.73.56-3.73,1.56-.98.99-1.55,2.34-1.55,3.78Z" style="fill: #409d76; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1000" d="m120.44,94.44c-.98,1-2.33,1.56-3.73,1.56h-52.71c1.4,0,2.73-.56,3.73-1.56l30.09-30.44,22.64,22.9c2.04,2.05,2.06,5.4.05,7.48l-.05.06h-.02Z" style="fill: #00a0ba; isolation: isolate; opacity: .9;"/>
+  </g>
+</svg>

package/public/assets/font/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2009-2011 by Accademia di Belle Arti di Urbino and students of MA course of Visual design. Some rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/actions/StyleSelector.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        @click.stop="select(item.value)"
+      >
+        <v-list-item-title
+          :class="{ 'primary--text': item.value === currentStyleName }"
+        >
+          {{ item.text }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+    <v-list v-if="currentStyleLegend.length > 0">
+      <v-list-item
+        v-for="(entry, index) in currentStyleLegend"
+        :key="`style-legend-${index}`"
+        dense
+      >
+        <v-list-item-icon>
+          <v-chip :color="entry.color" />
+        </v-list-item-icon>
+        <v-list-item-content>
+          {{ entry.title }}
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script>
+  import { computed, inject, onUnmounted, ref } from 'vue';
+  import {
+    VChip,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+    VSheet,
+  } from 'vuetify/lib';
+
+  /**
+   * @description Modal listing available styles.
+   * On selection style is set to provided layer.
+   * @vue-prop {Array<string>} availableStyles - Name of available styles
+   * @vue-prop {string} layerName              - Name of a layer, the style shall be applied to on selection
+   */
+  export default {
+    name: 'StyleSelector',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VListItemTitle,
+      VChip,
+      VListItemContent,
+    },
+    props: {
+      availableStyles: {
+        type: Array,
+        default: () => [],
+      },
+      layerName: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props, { attrs }) {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      /** @type {import("@vcmap/core").FeatureLayer} */
+      const layer = app.layers.getByKey(props.layerName);
+      const currentStyleName = ref(layer.style.name);
+      const currentStyleLegend = ref([]);
+      const defaultStyle = layer.defaultStyle.name;
+
+      function setStyle(styleItem) {
+        currentStyleName.value = layer.style.name;
+        if (styleItem.legend) {
+          currentStyleLegend.value = styleItem.legend;
+        }
+      }
+      setStyle(layer.style);
+      // TODO error handling if layer is missing or not a feature layer
+      const styleChangedListener =
+        layer.styleChanged.addEventListener(setStyle);
+      onUnmounted(() => {
+        styleChangedListener();
+      });
+
+      const items = computed(() => {
+        return [
+          { text: 'Default', value: defaultStyle },
+          ...props.availableStyles.map((s) => ({ text: s, value: s })),
+        ];
+      });
+
+      function select(styleName) {
+        const style =
+          styleName === defaultStyle
+            ? layer.defaultStyle
+            : app.styles.getByKey(styleName);
+        layer.setStyle(style);
+        app.windowManager.remove(attrs['window-state'].id);
+      }
+
+      return {
+        currentStyleName,
+        currentStyleLegend,
+        items,
+        select,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/actions/actionHelper.js

@@ -1,8 +1,18 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
-import { Collection, MapCollection, ViewPoint } from '@vcmap/core';
+import {
+  Collection,
+  Extent,
+  MapCollection,
+  mercatorProjection,
+  Viewpoint,
+} from '@vcmap/core';
+import { Feature } from 'ol';
+import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getWindowPositionOptions } from '../manager/window/windowManager.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { getWindowPositionOptions } from '../manager/window/windowHelper.js';
+import SearchComponent from '../search/SearchComponent.vue';
 
 /**
  * @typedef {Object} ActionOptions
@@ -14,7 +24,7 @@ import { getWindowPositionOptions } from '../manager/window/windowManager.js';
 /**
  * @param {ActionOptions} actionOptions
  * @param {string} mapName
- * @param {OverrideMapCollection} maps
+ * @param {import("@vcmap/core").OverrideMapCollection} maps
  * @returns {{action: VcsAction, destroy: Function}}
  */
 export function createMapButtonAction(actionOptions, mapName, maps) {
@@ -49,11 +59,17 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createToggleAction(actionOptions, windowComponent, windowManager, owner) {
+export function createToggleAction(
+  actionOptions,
+  windowComponent,
+  windowManager,
+  owner,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
     title: [undefined, String],
+    hasUpdate: [undefined, Boolean],
   });
   check(windowComponent, { id: String });
   check(owner, [String, vcsAppSymbol]);
@@ -84,10 +100,68 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
+/**
+ * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
+ * @param {VcsUiApp} app
+ * @returns {{ searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction>|null>, destroy: function():void }}
+ */
+export function createSearchButtonAction(app) {
+  let destroyAction = () => {};
+  const searchAction = ref(null);
+  const determineAction = () => {
+    if (app.windowManager.has('searchId')) {
+      app.windowManager.remove('searchId');
+    }
+    if (app.search.size > 0 && searchAction.value === null) {
+      const action = createToggleAction(
+        {
+          name: 'search.title',
+          icon: '$vcsSearch',
+          title: 'search.tooltip',
+        },
+        {
+          id: 'searchId',
+          component: SearchComponent,
+          state: { hideHeader: true },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+          position: {
+            width: 440,
+          },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
+      destroyAction = action.destroy;
+      searchAction.value = reactive(action.action);
+    } else if (searchAction.value !== null) {
+      destroyAction();
+      destroyAction = () => {};
+      searchAction.value = null;
+    }
+  };
+  determineAction();
+  const listeners = [
+    app.search.added.addEventListener(determineAction),
+    app.search.removed.addEventListener(determineAction),
+  ];
+  const destroy = () => {
+    destroyAction();
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
+
+  return { searchAction, destroy };
+}
+
 /**
  * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
  * @param {OverviewMap} overviewMap
@@ -95,12 +169,16 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
  * @param {WindowManager}  windowManager
  * @returns {(function(): void)|*}
  */
-export function createOverviewMapAction(overviewMap, windowComponent, windowManager) {
+export function createOverviewMapAction(
+  overviewMap,
+  windowComponent,
+  windowManager,
+) {
   const { action, destroy } = createToggleAction(
     {
       name: 'overviewMapToggle',
       icon: '$vcsMap',
-      title: 'Overview Map',
+      title: 'navigation.overviewMapTooltip',
     },
     windowComponent,
     windowManager,
@@ -122,7 +200,9 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
 
   const destroyAction = () => {
     destroy();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
   return { action, destroy: destroyAction };
 }
@@ -132,11 +212,11 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
  * @param {ActionOptions} actionOptions
  * @param {WindowComponentOptions} modalComponent
- * @param {WindowManager}  windowManager
+ * @param {VcsUiApp}  app
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createModalAction(actionOptions, modalComponent, windowManager, owner) {
+export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -145,29 +225,18 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
   check(owner, [String, vcsAppSymbol]);
 
   const id = uuid();
+  const { position: windowPositionOptions, ...component } = modalComponent;
+  let modalActivator = null;
 
-  const addModal = (zIndex) => {
-    const child = document.getElementById(id);
-    if (!child) {
-      const elem = document.createElement('div');
-      elem.id = id;
-      Object.assign(elem.style, {
-        position: 'absolute',
-        zIndex,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      });
-      elem.onclick = () => { windowManager.remove(id); };
-      document.body.appendChild(elem);
-    }
-  };
-
-  const removeModal = () => {
-    const child = document.getElementById(id);
-    if (child) {
-      child.parentElement.removeChild(child);
+  /**
+   * Closes the modal at mousedown on an app element
+   * Requires mousedown event bubbling on app elements (same behaviour as v-menu).
+   * @param {MouseEvent} e
+   */
+  const handleMouseDown = (e) => {
+    const div = document.getElementById(`window-component--${id}`);
+    if (!div?.contains(e.target) && !modalActivator?.contains(e.target)) {
+      app.windowManager.remove(id);
     }
   };
 
@@ -177,37 +246,45 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
     callback(event) {
       if (!this.active) {
         this.active = true;
-        const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top);
+        const { left, top, width } =
+          event.currentTarget.getBoundingClientRect();
+        modalActivator = event.currentTarget;
+        const position = {
+          ...getWindowPositionOptions(left + width, top, app.maps.target),
+          ...windowPositionOptions,
+        };
         const state = { ...modalComponent?.state, hideHeader: true };
-        windowManager.add({ position, ...modalComponent, id, state }, owner);
-        addModal(windowManager.componentIds.length - 2);
+        app.windowManager.add({ position, ...component, id, state }, owner);
+        document.addEventListener('mousedown', handleMouseDown);
       } else {
         this.active = false;
-        windowManager.remove(id);
+        app.windowManager.remove(id);
       }
       return null;
     },
   };
 
   const listeners = [
-    windowManager.removed.addEventListener(({ id: windowId }) => {
+    app.windowManager.removed.addEventListener(({ id: windowId }) => {
       if (windowId === id) {
         action.active = false;
-        removeModal();
+        document.removeEventListener('mousedown', handleMouseDown);
       }
     }),
-    removeModal,
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
 /**
  * Creates an action which opens a given link in a new tab
  * @param {ActionOptions} actionOptions
- * @param {string} url
+ * @param {string|function():string} url
  * @returns {VcsAction}
  */
 export function createLinkAction(actionOptions, url) {
@@ -216,13 +293,17 @@ export function createLinkAction(actionOptions, url) {
     icon: [undefined, String],
     title: [undefined, String],
   });
-  check(url, String);
+  check(url, [String, Function]);
 
   return {
     ...actionOptions,
     callback() {
       const link = document.createElement('a');
-      link.href = url;
+      if (typeof url === 'string') {
+        link.href = url;
+      } else {
+        link.href = url();
+      }
       link.target = '_blank';
       link.click();
     },
@@ -231,22 +312,28 @@ export function createLinkAction(actionOptions, url) {
 
 /**
  * @param {ActionOptions} actionOptions
- * @param {string|import("@vcmap/core").ViewPoint} viewpoint
- * @param {import("@vcmap/core").Collection<import("@vcmap/core").ViewPoint>} viewpointCollection
+ * @param {string|import("@vcmap/core").Viewpoint} viewpoint
+ * @param {import("@vcmap/core").Collection<import("@vcmap/core").Viewpoint>} viewpointCollection
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction}
  */
-export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCollection, mapCollection) {
+export function createGoToViewpointAction(
+  actionOptions,
+  viewpoint,
+  viewpointCollection,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
     title: [undefined, String],
   });
-  check(viewpoint, [ViewPoint, String]);
+  check(viewpoint, [Viewpoint, String]);
   check(viewpointCollection, Collection);
   check(mapCollection, MapCollection);
 
   return {
+    title: 'content.viewpointAction.title',
     ...actionOptions,
     async callback() {
       let viewpointItem = viewpoint;
@@ -254,8 +341,56 @@ export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCol
         viewpointItem = viewpointCollection.getByKey(viewpoint);
       }
       if (viewpointItem) {
-        await mapCollection.activeMap.gotoViewPoint(viewpointItem);
+        await mapCollection.activeMap.gotoViewpoint(viewpointItem);
       }
     },
   };
 }
+
+/**
+ * calculates and returns a viewpoint using feature's extent
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @returns {Viewpoint|null}
+ */
+export function getViewpointFromFeature(feature) {
+  const extent = new Extent({
+    coordinates: feature.getGeometry()?.getExtent?.(),
+    projection: mercatorProjection,
+  });
+
+  if (!extent || !extent.isValid()) {
+    return null;
+  }
+  return Viewpoint.createViewpointFromExtent(extent);
+}
+
+/**
+ * Creates an action, which when clicked, zooms to the provided feature
+ * @param {ActionOptions} actionOptions
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("@vcmap/core").MapCollection} mapCollection
+ * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
+ */
+export function createZoomToFeatureAction(
+  actionOptions,
+  feature,
+  mapCollection,
+) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(feature, Feature);
+  check(mapCollection, MapCollection);
+
+  const viewpoint = getViewpointFromFeature(feature);
+
+  return {
+    title: 'search.zoomToFeatureAction',
+    ...actionOptions,
+    async callback() {
+      await mapCollection.activeMap.gotoViewpoint(viewpoint);
+    },
+  };
+}

package/src/actions/stateRefAction.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import { check } from '@vcsuite/check';
 
 /**
@@ -22,7 +22,7 @@ const stateIconMap = {
 /**
  * Creates an action
  * @param {string} name
- * @param {import("@vue/composition-api").Ref<StateActionState>} stateRef
+ * @param {import("vue").Ref<StateActionState>} stateRef
  * @param {function():void} callback
  * @returns {{ action: VcsAction, destroy: function():void }}
  */
@@ -34,7 +34,6 @@ export function createStateRefAction(name, stateRef, callback) {
   const currentState = stateRef.value;
   const action = {
     name,
-    title: 'Activate', // XXX make reactive i18n key based on state
     icon: stateIconMap[currentState],
     callback,
   };