@vcmap/ui 5.1.7 → 5.2.0

package/src/manager/panel/panelManager.js

@@ -0,0 +1,381 @@
+import { reactive } from 'vue';
+import { VcsEvent } from '@vcmap/core';
+import { check } from '@vcsuite/check';
+import { v4 as uuidv4 } from 'uuid';
+import { parseBoolean } from '@vcsuite/parsers';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+
+export const panelLocationSymbol = Symbol('panelLocation');
+export const panelPositionSymbol = Symbol('panelPosition');
+
+/**
+ * @readonly
+ * @enum {string}
+ * @property {string} LEFT - left panel (vertical)
+ * @property {string} RIGHT - right panel (vertical)
+ * @property {string} BOTTOM - bottom panel (horizontal)
+ */
+export const PanelLocation = {
+  LEFT: 'vcs-left',
+  RIGHT: 'vcs-right',
+  BOTTOM: 'vcs-bottom',
+};
+
+/**
+ * @typedef {Object} VerticalPanelPositionOptions
+ * @property {string} [width] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [maxWidth] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [minWidth] Can be a css position string (e.g. '320px' or '50%')
+ */
+
+/**
+ * @typedef {Object} HorizontalPanelPositionOptions
+ * @property {string} [height] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [maxHeight] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [minHeight] Can be a css position string (e.g. '320px' or '50%')
+ */
+
+/**
+ * @typedef {Object} PanelPosition
+ * @property {string?} left - The left CSS property participates in specifying the horizontal position of a panel.
+ * @property {string?} top - The top CSS property participates in specifying the vertical position of a panel.
+ * @property {string?} right - The right CSS property participates in specifying the horizontal position of a panel.
+ * @property {string?} bottom - The bottom CSS property participates in specifying the vertical position of a panel.
+ * @property {string} width - The width CSS property sets an element's width.
+ * @property {string} height - The height CSS property sets an element's height.
+ * @property {string} maxHeight - The maxHeight CSS property sets an element's maximal height.
+ * @property {string} maxWidth - The maxWidth CSS property sets an element's maximal width.
+ * @property {string} minHeight - The minHeight CSS property sets an element's minimal height.
+ * @property {string} minWidth - The minWidth CSS property sets an element's minimal width.
+ */
+
+/**
+ * @readonly
+ * @enum {Partial<PanelPosition>}
+ * @private
+ */
+export const DefaultPanelPositions = {
+  [PanelLocation.LEFT]: {
+    left: '0px',
+    width: '25%',
+    minWidth: '10%',
+    height: '100%',
+  },
+  [PanelLocation.RIGHT]: {
+    right: '0px',
+    width: '25%',
+    minWidth: '10%',
+    height: '100%',
+  },
+  [PanelLocation.BOTTOM]: {
+    bottom: '0px',
+    width: '100%',
+    height: '25%',
+    minHeight: '10%',
+    maxHeight: '75%',
+  },
+};
+
+/**
+ * @typedef {Object} PanelComponentOptions
+ * @property {string} [id] - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
+ * @property {import("vue").Component} [component] Optional component to be rendered in the panel.
+ * @property {Partial<PanelState>} [state]
+ * @property {Partial<VerticalPanelPositionOptions|HorizontalPanelPositionOptions>} [position] Will be merged with default position for panel
+ * @property {Object} [props]
+ * @property {Object} [provides]
+ */
+
+/**
+ * @typedef {Object} PanelState
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner Owner of the panel, set by panelManager on add
+ * @property {PanelLocation} location Location of the panel, set by panelManager on add
+ * @property {boolean} [resizable=true] Whether size of panel can be adapted
+ * @property {Object<string, string>} [styles] Can be used to add additional styles to the root PanelComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root PanelComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
+
+/**
+ * @typedef {Object} PanelComponent
+ * @property {string} id
+ * @property {import("vue").Component} component
+ * @property {Partial<PanelState>} state
+ * @property {Object} props
+ * @property {Object} provides
+ */
+
+/**
+ * @param {Partial<PanelComponent>} panelComponent
+ * @returns {PanelPosition|undefined}
+ */
+export function getPanelPosition(panelComponent) {
+  return panelComponent?.[panelPositionSymbol];
+}
+
+/**
+ * @param {PanelComponent} panelComponent
+ * @param {Partial<PanelPosition>} panelPosition
+ */
+export function setPanelPosition(panelComponent, panelPosition) {
+  const position = getPanelPosition(panelComponent);
+  const toUpdate = Object.keys(panelPosition).reduce((acc, key) => {
+    if (position?.[key] !== panelPosition[key]) {
+      acc[key] = panelPosition[key];
+    }
+    return acc;
+  }, {});
+  if (Object.keys(toUpdate).length > 0) {
+    Object.assign(panelComponent[panelPositionSymbol], panelPosition);
+  }
+}
+
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<PanelComponent,PanelComponentOptions>} IPanelManager
+ */
+
+/**
+ * @class PanelManager
+ * @description Manages a set of Panels
+ * @implements {IPanelManager}
+ */
+class PanelManager {
+  constructor() {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
+     */
+    this.added = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
+     */
+    this.removed = new VcsEvent();
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    this.componentIds = [];
+    /**
+     * @type {Map<PanelLocation, string>}
+     * @private
+     */
+    this._panelLocations = new Map();
+    /**
+     * @type {Map<string, PanelComponent>}
+     * @private
+     */
+    this._panelComponents = new Map();
+    /**
+     * @type {Map<string, PanelPosition>}
+     * @private
+     */
+    this._panelPositionsCache = new Map();
+  }
+
+  /**
+   * @param {string} id
+   * @returns {PanelComponent}
+   */
+  get(id) {
+    return this._panelComponents.get(id);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return this._panelComponents.has(id);
+  }
+
+  /**
+   *
+   * @param {PanelLocation} location
+   * @returns {PanelComponent}
+   */
+  getLocation(location) {
+    return this._panelComponents.get(this._panelLocations.get(location));
+  }
+
+  /**
+   *
+   * @param {PanelLocation} location
+   * @returns {boolean}
+   */
+  hasLocation(location) {
+    return this._panelLocations.has(location);
+  }
+
+  /**
+   *
+   * @param {PanelLocation} location
+   */
+  removePanelAtLocation(location) {
+    if (this.hasLocation(location)) {
+      this.remove(this.getLocation(location).id);
+    }
+  }
+
+  /**
+   * @param {string} id
+   * @returns {Partial<PanelPosition>|undefined}
+   */
+  getCachedPosition(id) {
+    return this._panelPositionsCache.get(id);
+  }
+
+  /**
+   * removes a panel, Component will not be rendered anymore and will be destroyed. Add PanelComponent again
+   * to show the component again
+   * @param {string} id
+   */
+  remove(id) {
+    check(id, String);
+    const panelComponent = this._panelComponents.get(id);
+    if (panelComponent) {
+      const { left, right, top, bottom, ...widthAndHeightOptions } =
+        getPanelPosition(panelComponent);
+      this._panelPositionsCache.set(panelComponent.id, {
+        ...widthAndHeightOptions,
+      });
+      this.componentIds.splice(this.componentIds.indexOf(id), 1);
+      this._panelComponents.delete(id);
+      this._panelLocations.delete(panelComponent[panelLocationSymbol]);
+      this.removed.raiseEvent(panelComponent);
+    }
+  }
+
+  /**
+   * Set width for LEFT and RIGHT or height for BOTTOM panels
+   * @param {string} id
+   * @param {VerticalPanelPositionOptions|HorizontalPanelPositionOptions} panelPositionOptions
+   */
+  setPanelPosition(id, panelPositionOptions) {
+    const panelComponent = this.get(id);
+    if (panelComponent) {
+      const { location } = panelComponent.state;
+      let allowedKeys = [];
+      if (location === PanelLocation.LEFT || location === PanelLocation.RIGHT) {
+        allowedKeys = ['width', 'minWidth', 'maxWidth'];
+      } else if (location === PanelLocation.BOTTOM) {
+        allowedKeys = ['height', 'minHeight', 'maxHeight'];
+      }
+      const toUpdate = Object.keys(panelPositionOptions)
+        .filter((key) => allowedKeys.includes(key))
+        .reduce((acc, key) => {
+          acc[key] = panelPositionOptions[key];
+          return acc;
+        }, {});
+      if (Object.keys(toUpdate).length > 0) {
+        setPanelPosition(panelComponent, toUpdate);
+      }
+    }
+  }
+
+  /**
+   * adds a panelComponent to the PanelManager and renders the Panel
+   * @param {PanelComponentOptions|PanelComponent} panelComponentOptions
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @param {PanelLocation} location panel render position
+   * @returns {PanelComponent}
+   */
+  add(panelComponentOptions, owner, location) {
+    check(owner, [String, vcsAppSymbol]);
+    check(location, Object.values(PanelLocation));
+
+    const id = panelComponentOptions.id || uuidv4();
+    const { component, position: panelPosition } = panelComponentOptions;
+
+    const styles = { ...panelComponentOptions?.state?.styles };
+    const classes = Array.isArray(panelComponentOptions?.state?.classes)
+      ? [...(panelComponentOptions?.state?.classes ?? [])]
+      : { ...panelComponentOptions?.state?.classes };
+
+    const state = reactive({
+      id,
+      owner,
+      location,
+      resizable: parseBoolean(panelComponentOptions?.state?.resizable, true),
+      styles,
+      classes,
+    });
+
+    const props = panelComponentOptions.props || {};
+    const provides = panelComponentOptions.provides || {};
+
+    const defaultPosition = DefaultPanelPositions[location];
+    const cachedPosition = this.getCachedPosition(id) || {};
+    const position = reactive({
+      ...defaultPosition,
+      ...cachedPosition,
+      ...panelPosition,
+    });
+    /**
+     * @type {PanelComponent}
+     */
+    const panelComponent = {
+      get id() {
+        return id;
+      },
+      get state() {
+        return state;
+      },
+      get component() {
+        return component;
+      },
+      get props() {
+        return props;
+      },
+      get provides() {
+        return provides;
+      },
+      [panelPositionSymbol]: position,
+      [panelLocationSymbol]: location,
+    };
+
+    this.remove(id);
+    this.removePanelAtLocation(location);
+    this._panelComponents.set(id, panelComponent);
+    this._panelLocations.set(location, id);
+    this.componentIds.push(id);
+    this.added.raiseEvent(panelComponent);
+    return panelComponent;
+  }
+
+  /**
+   * removes all panelComponents of a specific owner (plugin) and fires removed Events
+   * @param {string|vcsAppSymbol} owner
+   */
+  removeOwner(owner) {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => {
+      const { state } = this.get(id);
+      if (owner === state.owner) {
+        this.remove(id);
+      }
+    });
+  }
+
+  /**
+   * removes all panelComponents and fires removed Events
+   */
+  clear() {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
+    this._panelPositionsCache.clear();
+  }
+
+  /**
+   * destroys the panelManager;
+   */
+  destroy() {
+    this.added.destroy();
+    this.removed.destroy();
+    this.componentIds.splice(0);
+    this._panelComponents.clear();
+    this._panelPositionsCache.clear();
+  }
+}
+
+export default PanelManager;

package/src/manager/window/WindowManager.vue

@@ -60,6 +60,7 @@
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
+  import BalloonComponent from '../../featureInfo/BalloonComponent.vue';
   import {
     getPositionAppliedOnTarget,
     getTargetSize,
@@ -110,6 +111,19 @@
         const parentComponent =
           !windowComponent?.state?.dockable &&
           windowManager.get(windowComponent.parentId);
+
+        if (
+          windowComponent.component.name === BalloonComponent.name ||
+          (windowComponent.component.components &&
+            Object.hasOwn(
+              windowComponent.component.components,
+              BalloonComponent.name,
+            ))
+        ) {
+          // do not clip balloons to target
+          return windowComponent?.position;
+        }
+
         return getPositionAppliedOnTarget(
           windowComponent?.position,
           targetSize.value,

package/src/manager/window/windowHelper.js

@@ -40,7 +40,7 @@ export function getTargetSize(target) {
   if (!target) {
     return null;
   }
-  return target.parentElement.getBoundingClientRect();
+  return target.parentElement?.parentElement?.parentElement?.getBoundingClientRect();
 }
 
 /**

package/src/search/ResultItem.vue

@@ -37,7 +37,7 @@
       partials.forEach((partial) => {
         replacement = replacement.replaceAll(
           new RegExp(`(^|[^>])(${partial})`, 'ig'),
-          '<span class="primary--text">$2</span>',
+          '<span>$1<span class="primary--text">$2</span></span>',
         );
       });
     }

package/src/search/search.d.ts

@@ -24,8 +24,8 @@ export type SearchImpl = {
      * Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
      */
     name: string;
-    search: (arg0: string) => Array<ResultItem>;
-    suggest?: ((arg0: string) => Array<string>) | undefined;
+    search: (arg0: string) => Promise<Array<ResultItem>>;
+    suggest?: ((arg0: string) => Promise<Array<string>>) | undefined;
     /**
      * - should abort any ongoing requests to search or suggest without throwing an error
      */

package/src/search/search.js

@@ -34,8 +34,8 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
 /**
  * @typedef {Object} SearchImpl
  * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
- * @property {function(string):Array<ResultItem>} search
- * @property {function(string):Array<string>} [suggest] // XXX currently not implemented in UI at Beta state
+ * @property {function(string):Promise<Array<ResultItem>>} search
+ * @property {function(string):Promise<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
  */

package/src/vcsUiApp.d.ts

@@ -32,6 +32,10 @@ export type PluginConfigEditor = {
      * - The item the editor can be used for. Can be a name or className. Default is the plugin's name.
      */
     itemName?: string | undefined;
+    /**
+     * - An optional function returning an url referencing help or further information regarding the config editor.
+     */
+    infoUrlCallback?: (() => string) | undefined;
 };
 export type createPlugin<P extends Object, S extends Object> = (arg0: P, arg1: string) => VcsPlugin<P, S>;
 /**
@@ -115,6 +119,11 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _windowManager;
+    /**
+     * @type {PanelManager}
+     * @private
+     */
+    private _panelManager;
     /**
      * @type {NavbarManager}
      * @private
@@ -217,6 +226,10 @@ declare class VcsUiApp extends VcsApp {
      * @returns {WindowManager}
      */
     get windowManager(): WindowManager;
+    /**
+     * @returns {PanelManager}
+     */
+    get panelManager(): PanelManager;
     /**
      * @returns {NavbarManager}
      */
@@ -292,6 +305,7 @@ import { OverrideClassRegistry } from '@vcmap/core';
 import AbstractFeatureInfoView from './featureInfo/abstractFeatureInfoView.js';
 import ToolboxManager from './manager/toolbox/toolboxManager.js';
 import WindowManager from './manager/window/windowManager.js';
+import PanelManager from './manager/panel/panelManager.js';
 import NavbarManager from './manager/navbarManager.js';
 import FeatureInfo from './featureInfo/featureInfo.js';
 import OverviewMap from './navigation/overviewMap.js';

package/src/vcsUiApp.js

@@ -18,6 +18,7 @@ import ToolboxManager, {
   setupDefaultGroups,
 } from './manager/toolbox/toolboxManager.js';
 import WindowManager from './manager/window/windowManager.js';
+import PanelManager from './manager/panel/panelManager.js';
 import NavbarManager from './manager/navbarManager.js';
 // eslint-disable-next-line no-unused-vars
 import ContentTreeCollection, { // imported for type
@@ -66,6 +67,7 @@ import createSiteConfig from './siteConfig.js';
  * @property {import("vue").Component & { title: string | undefined}} component - A editor component to configure a plugin or item
  * @property {string} [collectionName='plugins'] - The collection the item belongs to. Default is plugins collection.
  * @property {string} [itemName] - The item the editor can be used for. Can be a name or className. Default is the plugin's name.
+ * @property {function():string} [infoUrlCallback] - An optional function returning an url referencing help or further information regarding the config editor.
  */
 
 /**
@@ -170,6 +172,7 @@ class VcsUiApp extends VcsApp {
     this._pluginListeners = [
       this._plugins.added.addEventListener((plugin) => {
         this._windowManager.removeOwner(plugin.name);
+        this._panelManager.removeOwner(plugin.name);
         this._navbarManager.removeOwner(plugin.name);
         this._toolboxManager.removeOwner(plugin.name);
         this._categoryManager.removeOwner(plugin.name);
@@ -195,6 +198,7 @@ class VcsUiApp extends VcsApp {
       }),
       this._plugins.removed.addEventListener(async (plugin) => {
         this._windowManager.removeOwner(plugin.name);
+        this._panelManager.removeOwner(plugin.name);
         this._navbarManager.removeOwner(plugin.name);
         this._toolboxManager.removeOwner(plugin.name);
         this._categoryManager.removeOwner(plugin.name);
@@ -238,6 +242,12 @@ class VcsUiApp extends VcsApp {
      * @private
      */
     this._windowManager = new WindowManager();
+    /**
+     * @type {PanelManager}
+     * @private
+     */
+    this._panelManager = new PanelManager();
+
     /**
      * @type {NavbarManager}
      * @private
@@ -384,6 +394,13 @@ class VcsUiApp extends VcsApp {
     return this._windowManager;
   }
 
+  /**
+   * @returns {PanelManager}
+   */
+  get panelManager() {
+    return this._panelManager;
+  }
+
   /**
    * @returns {NavbarManager}
    */
@@ -667,6 +684,7 @@ class VcsUiApp extends VcsApp {
    */
   destroy() {
     this.windowManager.destroy();
+    this.panelManager.destroy();
     this.navbarManager.destroy();
     this.toolboxManager.destroy();
     this.categoryManager.destroy();

package/dist/assets/index-c055a222.js

@@ -1 +0,0 @@
-import{initAppFromAppConfig as p}from"./ui.d91b1c.js";p("#app","app.config.json");