@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleToggleChild.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container>
-    <VcsFormButton @click="toggle">toggle child</VcsFormButton>
+    <VcsFormButton v-for="num in [1, 2]" :key="num" @click.stop="toggle(num)"
+      >toggle child {{ num }}</VcsFormButton
+    >
   </v-container>
 </template>
 
@@ -19,24 +21,26 @@
       const app = inject('vcsApp');
       const parentId = attrs['window-state'].id;
       const childId = `dynamicChild-${parentId}`;
-      const childComponent = {
-        id: childId,
-        parentId,
-        state: {
-          headerTitle: 'Example dynamicChild',
-          headerIcon: 'mdi-human-child',
-        },
-        component: WindowExampleContent,
-        slot: WindowSlot.DYNAMIC_CHILD,
-      };
 
       return {
-        toggle(e) {
-          if (app.windowManager.has(childId)) {
-            app.windowManager.remove(childId);
+        toggle(num) {
+          const id = `${childId}-${num}`;
+          if (app.windowManager.has(id)) {
+            app.windowManager.remove(id);
           } else {
-            e.stopPropagation();
-            app.windowManager.add(childComponent, owner);
+            app.windowManager.add(
+              {
+                id,
+                parentId,
+                state: {
+                  headerTitle: `Example dynamicChild ${num}`,
+                  headerIcon: 'mdi-human-child',
+                },
+                component: WindowExampleContent,
+                slot: WindowSlot.DYNAMIC_CHILD,
+              },
+              owner,
+            );
           }
         },
       };

package/plugins/@vcmap-show-case/window-tester/src/index.js

@@ -1,6 +1,5 @@
-import { ButtonLocation, createToggleAction, ToolboxType } from '@vcmap/ui';
+import { ButtonLocation, createToggleAction } from '@vcmap/ui';
 import packageJSON from '../package.json';
-import { getToolboxData } from './toolboxData.js';
 import windowExample from './WindowExample.vue';
 
 /**
@@ -42,21 +41,7 @@ export default async function windowTester() {
         packageJSON.name,
         ButtonLocation.TOOL,
       );
-      const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
-      toolboxData.forEach(
-        ([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
-          let group;
-          if (app.toolboxManager.has(toolboxComponentOptions.id)) {
-            group = app.toolboxManager.get(toolboxComponentOptions.id);
-          } else {
-            group = app.toolboxManager.add(toolboxComponentOptions, owner);
-          }
-          if (group.type === ToolboxType.GROUP && buttonComponents) {
-            buttonComponents.forEach((c) => group.buttonManager.add(c, owner));
-          }
-        },
-      );
-      this._destroyAction = [destroy, destroyToolboxData];
+      this._destroyAction = [destroy];
     },
     i18n: {
       de: {

package/plugins/package.json

@@ -6,7 +6,9 @@
     "@vcmap/shadow": "^1.0.1",
     "@vcmap/draw": "^1.0.0",
     "@vcmap/create-link": "^1.0.1",
-    "@vcmap/search-nominatim": "^1.0.1"
+    "@vcmap/search-nominatim": "^1.0.1",
+    "@vcmap/multi-view": "^1.0.1",
+    "@vcmap/cesium-filters": "^1.0.1"
   },
   "optionalDependencies": {}
 }

package/src/actions/StyleSelector.vue

@@ -70,7 +70,7 @@
       },
     },
     setup(props, { attrs }) {
-      /** @type {VcsUiApp} */
+      /** @type {import("@src/vcsUiApp.js").default} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
       const layer = app.layers.getByKey(props.layerName);
@@ -99,7 +99,7 @@
             text: app.styles.getByKey(name)?.properties?.title || name,
             value: name,
           }));
-        if (props.availableStyles.indexOf(defaultStyle) < 0) {
+        if (defaultStyle && props.availableStyles.indexOf(defaultStyle) < 0) {
           return [
             {
               text: 'Default',
@@ -108,11 +108,12 @@
             ...styles,
           ];
         }
-        const firstStyle = styles.find(({ value }) => value === defaultStyle);
-        return [
-          firstStyle,
-          ...styles.filter(({ value }) => value !== defaultStyle),
-        ];
+        return styles.sort((a) => {
+          if (a === defaultStyle) {
+            return -1;
+          }
+          return 0;
+        });
       });
 
       function select(styleName) {

package/src/actions/StyleSelector.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import("vue").DefineComponent<{
+    availableStyles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    layerName: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    currentStyleName: import("vue").Ref<string>;
+    currentStyleLegend: import("vue").Ref<never[]>;
+    items: import("vue").ComputedRef<any>;
+    select: (styleName: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    availableStyles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    layerName: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    availableStyles: unknown[];
+}>;
+export default _default;

package/src/actions/actionHelper.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @typedef {Object} ActionOptions
+ * @property {string} name
+ * @property {string} [title]
+ * @property {string} [icon]
+ */
+/**
+ * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ */
+/**
+ * @typedef {Object} VcsAction
+ * @property {string} name - reactive and translatable name rendered in overflow
+ * @property {string} [title] - reactive and translatable title rendered as tooltip
+ * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
+ * @property {ActionCallback} callback - callback function is triggered when the button is clicked
+ * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+ * @property {boolean} [hasUpdate=false] - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+ * @property {boolean} [background=false] - optional background state. If active and background, button is rendered in primary color outlined
+ * @property {boolean} [disabled=false] - optional flag to indicate that the action is disabled
+ */
+/**
+ * merges action options with defaults
+ * @param {VcsAction|ActionOptions & { callback: ActionCallback}} options
+ * @returns {VcsAction}
+ */
+export function getActionFromOptions(options: VcsAction | (ActionOptions & {
+    callback: ActionCallback;
+})): VcsAction;
+/**
+ * @param {ActionOptions} actionOptions
+ * @param {string} mapName
+ * @param {import("@vcmap/core").OverrideCollection<import("@vcmap/core").VcsMap, import("@vcmap/core").MapCollection>} maps
+ * @returns {{action: VcsAction, destroy: () => void}}
+ */
+export function createMapButtonAction(actionOptions: ActionOptions, mapName: string, maps: import("@vcmap/core").OverrideCollection<import("@vcmap/core").VcsMap, import("@vcmap/core").MapCollection>): {
+    action: VcsAction;
+    destroy: () => void;
+};
+/**
+ * Creates an action which will toggle the given window component (opening & closing the window). The window component must have an id set.
+ * @param {ActionOptions} actionOptions
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
+ * @param {import("../manager/window/windowManager.js").default}  windowManager
+ * @param {string|symbol} owner
+ * @returns {{action: VcsAction, destroy: function(): void}}
+ */
+export function createToggleAction(actionOptions: ActionOptions, windowComponent: import("../manager/window/windowManager.js").WindowComponentOptions, windowManager: import("../manager/window/windowManager.js").default, owner: string | symbol): {
+    action: VcsAction;
+    destroy: () => void;
+};
+/**
+ * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{ searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction>|null>, destroy: function():void }}
+ */
+export function createSearchButtonAction(app: import("../vcsUiApp.js").default): {
+    searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction> | null>;
+    destroy: () => void;
+};
+/**
+ * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
+ * @param {import("../navigation/overviewMap.js").default} overviewMap
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
+ * @param {import("../manager/window/windowManager.js").default}  windowManager
+ * @returns {{action: VcsAction, destroy: function(): void}}
+ */
+export function createOverviewMapAction(overviewMap: import("../navigation/overviewMap.js").default, windowComponent: import("../manager/window/windowManager.js").WindowComponentOptions, windowManager: import("../manager/window/windowManager.js").default): {
+    action: VcsAction;
+    destroy: () => void;
+};
+/**
+ * Creates a header less window which will close if anything outside of the window is clicked. The window will open
+ * at the clicked position (the actions position) by default, unless the window component already has a position set.
+ * @param {ActionOptions} actionOptions
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} modalComponent
+ * @param {import("../vcsUiApp.js").default}  app
+ * @param {string|symbol} owner
+ * @returns {{action: VcsAction, destroy: function(): void}}
+ */
+export function createModalAction(actionOptions: ActionOptions, modalComponent: import("../manager/window/windowManager.js").WindowComponentOptions, app: import("../vcsUiApp.js").default, owner: string | symbol): {
+    action: VcsAction;
+    destroy: () => void;
+};
+/**
+ * Creates an action which opens a given link in a new tab
+ * @param {ActionOptions} actionOptions
+ * @param {string|function():string} url
+ * @returns {VcsAction}
+ */
+export function createLinkAction(actionOptions: ActionOptions, url: string | (() => string)): VcsAction;
+/**
+ * @param {ActionOptions} actionOptions
+ * @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: ActionOptions, viewpoint: string | import("@vcmap/core").Viewpoint, viewpointCollection: import("@vcmap/core").Collection<import("@vcmap/core").Viewpoint>, mapCollection: import("@vcmap/core").MapCollection): VcsAction;
+/**
+ * calculates and returns a viewpoint using feature's extent
+ * @param {import("ol").Feature} feature
+ * @returns {Viewpoint|null}
+ */
+export function getViewpointFromFeature(feature: import("ol").Feature): Viewpoint | null;
+/**
+ * Creates an action, which when clicked, zooms to the provided feature
+ * @param {ActionOptions} actionOptions
+ * @param {import("ol").Feature} 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: ActionOptions, feature: import("ol").Feature, mapCollection: import("@vcmap/core").MapCollection): VcsAction | null;
+export type ActionOptions = {
+    name: string;
+    title?: string | undefined;
+    icon?: string | undefined;
+};
+export type ActionCallback = (arg0: PointerEvent) => void | Promise<void>;
+export type VcsAction = {
+    /**
+     * - reactive and translatable name rendered in overflow
+     */
+    name: string;
+    /**
+     * - reactive and translatable title rendered as tooltip
+     */
+    title?: string | undefined;
+    /**
+     * - icon rendered on the button. If no icon provided, item is rendered in overflow
+     */
+    icon?: string | undefined;
+    /**
+     * - callback function is triggered when the button is clicked
+     */
+    callback: ActionCallback;
+    /**
+     * - optional state of button. If active, button is rendered in primary color
+     */
+    active?: boolean | undefined;
+    /**
+     * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+     */
+    hasUpdate?: boolean | undefined;
+    /**
+     * - optional background state. If active and background, button is rendered in primary color outlined
+     */
+    background?: boolean | undefined;
+    /**
+     * - optional flag to indicate that the action is disabled
+     */
+    disabled?: boolean | undefined;
+};
+import { Viewpoint } from '@vcmap/core';

package/src/actions/actionHelper.js

@@ -12,7 +12,10 @@ import { reactive, ref } from 'vue';
 import { parseBoolean } from '@vcsuite/parsers';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
-import { getWindowPositionOptions } from '../manager/window/windowHelper.js';
+import {
+  getFittedWindowPositionOptionsFromMapEvent,
+  getTargetSize,
+} from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/SearchComponent.vue';
 
 /**
@@ -22,9 +25,25 @@ import SearchComponent from '../search/SearchComponent.vue';
  * @property {string} [icon]
  */
 
+/**
+ * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ */
+
+/**
+ * @typedef {Object} VcsAction
+ * @property {string} name - reactive and translatable name rendered in overflow
+ * @property {string} [title] - reactive and translatable title rendered as tooltip
+ * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
+ * @property {ActionCallback} callback - callback function is triggered when the button is clicked
+ * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+ * @property {boolean} [hasUpdate=false] - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+ * @property {boolean} [background=false] - optional background state. If active and background, button is rendered in primary color outlined
+ * @property {boolean} [disabled=false] - optional flag to indicate that the action is disabled
+ */
+
 /**
  * merges action options with defaults
- * @param {VcsAction|ActionOptions & { callback: Function}} options
+ * @param {VcsAction|ActionOptions & { callback: ActionCallback}} options
  * @returns {VcsAction}
  */
 export function getActionFromOptions(options) {
@@ -42,8 +61,8 @@ export function getActionFromOptions(options) {
 /**
  * @param {ActionOptions} actionOptions
  * @param {string} mapName
- * @param {import("@vcmap/core").OverrideMapCollection} maps
- * @returns {{action: VcsAction, destroy: Function}}
+ * @param {import("@vcmap/core").OverrideCollection<import("@vcmap/core").VcsMap, import("@vcmap/core").MapCollection>} maps
+ * @returns {{action: VcsAction, destroy: () => void}}
  */
 export function createMapButtonAction(actionOptions, mapName, maps) {
   check(actionOptions, {
@@ -72,10 +91,10 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
 /**
  * Creates an action which will toggle the given window component (opening & closing the window). The window component must have an id set.
  * @param {ActionOptions} actionOptions
- * @param {WindowComponentOptions} windowComponent
- * @param {WindowManager}  windowManager
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
+ * @param {import("../manager/window/windowManager.js").default}  windowManager
  * @param {string|symbol} owner
- * @returns {{action: VcsAction, destroy: Function}}
+ * @returns {{action: VcsAction, destroy: function(): void}}
  */
 export function createToggleAction(
   actionOptions,
@@ -128,7 +147,7 @@ export function createToggleAction(
 
 /**
  * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
- * @param {VcsUiApp} app
+ * @param {import("../vcsUiApp.js").default} app
  * @returns {{ searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction>|null>, destroy: function():void }}
  */
 export function createSearchButtonAction(app) {
@@ -182,10 +201,10 @@ export function createSearchButtonAction(app) {
 
 /**
  * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
- * @param {OverviewMap} overviewMap
- * @param {WindowComponentOptions} windowComponent
- * @param {WindowManager}  windowManager
- * @returns {(function(): void)|*}
+ * @param {import("../navigation/overviewMap.js").default} overviewMap
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
+ * @param {import("../manager/window/windowManager.js").default}  windowManager
+ * @returns {{action: VcsAction, destroy: function(): void}}
  */
 export function createOverviewMapAction(
   overviewMap,
@@ -229,10 +248,10 @@ export function createOverviewMapAction(
  * Creates a header less window which will close if anything outside of the window is clicked. The window will open
  * 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 {VcsUiApp}  app
+ * @param {import("../manager/window/windowManager.js").WindowComponentOptions} modalComponent
+ * @param {import("../vcsUiApp.js").default}  app
  * @param {string|symbol} owner
- * @returns {{action: VcsAction, destroy: Function}}
+ * @returns {{action: VcsAction, destroy: function(): void}}
  */
 export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
@@ -268,9 +287,16 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
           event.currentTarget.getBoundingClientRect();
         modalActivator = event.currentTarget;
         const position = {
-          ...getWindowPositionOptions(left + width, top, app.maps.target),
+          ...getFittedWindowPositionOptionsFromMapEvent(
+            { x: left + width, y: top - getTargetSize(app.maps.target).top },
+            windowPositionOptions?.width || 320,
+            windowPositionOptions?.height || 0,
+            app.maps.target,
+          ),
           ...windowPositionOptions,
         };
+        position.maxWidth = 320;
+        position.width = windowPositionOptions?.width || -1; // unset width magic. dont touch.
         const state = { ...modalComponent?.state, hideHeader: true };
         app.windowManager.add({ position, ...component, id, state }, owner);
         document.addEventListener('mousedown', handleMouseDown);
@@ -367,7 +393,7 @@ export function createGoToViewpointAction(
 
 /**
  * calculates and returns a viewpoint using feature's extent
- * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("ol").Feature} feature
  * @returns {Viewpoint|null}
  */
 export function getViewpointFromFeature(feature) {
@@ -385,7 +411,7 @@ export function getViewpointFromFeature(feature) {
 /**
  * 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("ol").Feature} feature
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
  */
@@ -402,13 +428,14 @@ export function createZoomToFeatureAction(
   check(feature, Feature);
   check(mapCollection, MapCollection);
 
-  const viewpoint = getViewpointFromFeature(feature);
-
   return {
     title: 'search.zoomToFeatureAction',
     ...actionOptions,
     async callback() {
-      await mapCollection.activeMap.gotoViewpoint(viewpoint);
+      const viewpoint = getViewpointFromFeature(feature);
+      if (viewpoint && viewpoint.isValid()) {
+        await mapCollection.activeMap.gotoViewpoint(viewpoint);
+      }
     },
   };
 }

package/src/actions/extentActions.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>} extent
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createZoomToExtentAction(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent>): import("./actionHelper.js").VcsAction;
+/**
+ * @param {import("@vcmap/core").Layer} layer
+ * @param {boolean} disabled
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: (function(): void)}}
+ */
+export function createLayerToggleAction(layer: import("@vcmap/core").Layer, disabled: boolean): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: (() => void);
+};
+/**
+ *
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>} extent
+ * @param {string} featureId
+ * @param {boolean} disabled
+ * @returns {{ action: import("./actionHelper.js").VcsAction, destroy:()=>void}}
+ */
+export function createExtentFeatureAction(app: import("@src/vcsUiApp.js").default, layer: import("@vcmap/core").VectorLayer, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent>, featureId: string, disabled: boolean): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
+/**
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
+ * @param {boolean} disabled
+ * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
+ */
+export function setupExtentComponentActions(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent> | import("vue").WritableComputedRef<import("@vcmap/core").Extent>, disabled: boolean): {
+    actions: Array<import("./actionHelper.js").VcsAction>;
+    destroy: () => void;
+    layer: import("@vcmap/core").VectorLayer;
+    featureId: string;
+};