@vcmap/ui 6.1.13 → 6.2.0-rc.1

package/src/navigation/VcsCompass.vue.d.ts

@@ -13,11 +13,13 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }, {
+    xs: import("vue").Ref<boolean>;
     rotationValue: import("vue").Ref<number>;
     compassRotation: import("vue").ComputedRef<number>;
     height: import("vue").ComputedRef<number>;
     width: import("vue").ComputedRef<number>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    alignNorth(): void;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     viewMode: {
         type: StringConstructor;
         required: true;
@@ -31,7 +33,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         required: false;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
     modelValue: number;
 }, {}>;

package/src/navigation/VcsZoomButton.vue

@@ -37,6 +37,7 @@
         default: false,
       },
     },
+    emits: ['zoom-in', 'zoom-out'],
   };
 </script>
 <style lang="scss" scoped>

package/src/navigation/VcsZoomButton.vue.d.ts

@@ -4,13 +4,16 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("zoom-in" | "zoom-out")[], "zoom-in" | "zoom-out", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         required: false;
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    "onZoom-in"?: ((...args: any[]) => any) | undefined;
+    "onZoom-out"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
 }, {}>;
 export default _default;

package/src/navigation/locatorHelper.js

@@ -165,7 +165,7 @@ const geolocationOptions = {
  * @param {import("../vcsUiApp.js").default} app
  * @returns {{ action: import("../actions/actionHelper.js").VcsAction, destroy: Function }}
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function createLocatorAction(app) {
   let primary = getColor(0.4, app);
 

package/src/notifier/NotifierComponent.vue

@@ -36,12 +36,12 @@
    * @description Renders notifications of different types
    */
   export default {
+    name: 'NotifierComponent',
     components: {
       VSnackbar,
       VcsButton,
       VIcon,
     },
-    name: 'NotifierComponent',
     setup() {
       const app = inject('vcsApp');
 

package/src/pluginHelper.js

@@ -73,7 +73,7 @@ export function getPluginAssetUrl(app, pluginName, asset) {
  * @param {string} name
  * @returns {boolean}
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function isValidPackageName(name) {
   check(name, String);
 
@@ -133,6 +133,7 @@ export async function loadPlugin(name, config) {
     let plugin;
     if (window.VcsPluginLoaderFunction) {
       // TODO PluginLoaderfunction needs to be documented.
+      // eslint-disable-next-line new-cap
       plugin = await window.VcsPluginLoaderFunction(name, module);
     } else {
       plugin = await import(/* @vite-ignore */ module);

package/src/search/ResultItem.vue

@@ -6,6 +6,7 @@
       </v-icon>
     </template>
     <template #title>
+      <!-- eslint-disable vue/no-v-html -->
       <v-list-item-title>
         <span v-html="marked" />
       </v-list-item-title>

package/src/search/SearchComponent.vue

@@ -60,41 +60,6 @@
   </v-sheet>
 </template>
 
-<style lang="scss" scoped>
-  :deep(.v-field .v-field__outline *) {
-    border-color: transparent !important;
-  }
-
-  .user-select-none {
-    user-select: none;
-  }
-
-  .suggestions {
-    font-style: italic;
-  }
-  .mobile-style .vcs-text-field.py-1 {
-    padding-bottom: 0 !important;
-    padding-right: 1px !important;
-  }
-  .button-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  .fixed-button {
-    flex-shrink: 0;
-  }
-
-  .ellipsis-button {
-    flex-shrink: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>
-
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
@@ -246,3 +211,38 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  :deep(.v-field .v-field__outline *) {
+    border-color: transparent !important;
+  }
+
+  .user-select-none {
+    user-select: none;
+  }
+
+  .suggestions {
+    font-style: italic;
+  }
+  .mobile-style .vcs-text-field.py-1 {
+    padding-bottom: 0 !important;
+    padding-right: 1px !important;
+  }
+  .button-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .fixed-button {
+    flex-shrink: 0;
+  }
+
+  .ellipsis-button {
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/src/search/markText.js

@@ -22,7 +22,7 @@ function isBlockWithinBlocks(blocks, candidate) {
  */
 function addPartialBlocks(text, partial, blocks) {
   let match;
-  // eslint-disable-next-line no-cond-assign
+
   while ((match = partial.exec(text))) {
     const block = {
       start: match.index,
@@ -39,7 +39,7 @@ function addPartialBlocks(text, partial, blocks) {
  * @param {string} query
  * @returns {string}
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function markText(text, query) {
   let replacement = text;
   if (query) {

package/src/state.d.ts

@@ -44,6 +44,15 @@ export type PluginState<T> = {
  * an encoded object, which is the plugins state.
  */
 export type UrlPluginState = [string, unknown];
+export type ClippingPolygonState = {
+    name: string;
+    active: boolean;
+};
+/**
+ * The URL state of a ClippingPolygon is an array. The first entry is the ClippingPolygon name,
+ * the second its active state encoded in an integer (1 active, 0 inactive).
+ */
+export type UrlClippingPolygonState = [string, number];
 /**
  * The URL state of a viewpoint is an array, the first entry is the camera position (or 0)
  * the second is the ground position (or 0), the third is the distance, the last three are
@@ -62,6 +71,7 @@ export type AppState = {
     layers: Array<LayerState>;
     plugins: Array<PluginState<unknown>>;
     activeObliqueCollection?: string | undefined;
+    clippingPolygons: Array<ClippingPolygonState>;
 };
 export type CachedAppState = AppState;
 /**
@@ -72,5 +82,6 @@ export type CachedAppState = AppState;
  * the fourth is an array of layer states
  * the fifth is an array of plugin states
  * the sixth is the currently active oblique collection or 0 if not applicable
+ * the seventh is an array of ClippingPolygons states
  */
-export type UrlAppState = [[0 | number[], 0 | number[], number, number, number, number, (number | undefined)?] | [import("ol/extent").Extent, number], string, Array<string>, Array<[string, number, string | 0]>, Array<[string, unknown]>, (string | 0)];
+export type UrlAppState = [[0 | number[], 0 | number[], number, number, number, number, (number | undefined)?] | [import("ol/extent").Extent, number], string, Array<string>, Array<[string, number, string | 0]>, Array<[string, unknown]>, (string | 0), Array<[string, number]>];

package/src/state.js

@@ -36,6 +36,18 @@ import {
  * @typedef {[string, unknown]} UrlPluginState
  */
 
+/**
+ * @typedef {Object} ClippingPolygonState
+ * @property {string} name
+ * @property {boolean} active
+ */
+
+/**
+ * The URL state of a ClippingPolygon is an array. The first entry is the ClippingPolygon name,
+ * the second its active state encoded in an integer (1 active, 0 inactive).
+ * @typedef {[string,number]} UrlClippingPolygonState
+ */
+
 /**
  * The URL state of a viewpoint is an array, the first entry is the camera position (or 0)
  * the second is the ground position (or 0), the third is the distance, the last three are
@@ -57,6 +69,7 @@ import {
  * @property {Array<LayerState>} layers
  * @property {Array<PluginState<unknown>>} plugins
  * @property {string} [activeObliqueCollection]
+ * @property {Array<ClippingPolygonState>} clippingPolygons
  */
 
 /**
@@ -72,7 +85,8 @@ import {
  * the fourth is an array of layer states
  * the fifth is an array of plugin states
  * the sixth is the currently active oblique collection or 0 if not applicable
- * @typedef {[UrlViewpointState|UrlExtentState,string,Array<string>,Array<UrlLayerState>,Array<UrlPluginState>,(string|0)]} UrlAppState
+ * the seventh is an array of ClippingPolygons states
+ * @typedef {[UrlViewpointState|UrlExtentState,string,Array<string>,Array<UrlLayerState>,Array<UrlPluginState>,(string|0), Array<UrlClippingPolygonState>]} UrlAppState
  */
 
 /**
@@ -88,6 +102,7 @@ export function createEmptyState() {
     moduleIds: [],
     layers: [],
     plugins: [],
+    clippingPolygons: [],
   };
 }
 
@@ -230,6 +245,22 @@ function writeUrlPluginState(state) {
   return [state.name, state.state];
 }
 
+/**
+ * @param {UrlClippingPolygonState} state
+ * @returns {ClippingPolygonState}
+ */
+function parseUrlClippingPolygonState(state) {
+  return { name: state[0], active: !!state[1] };
+}
+
+/**
+ * @param {ClippingPolygonState} state
+ * @returns {UrlClippingPolygonState}
+ */
+function writeUrlClippingPolygonState(state) {
+  return [state.name, state.active ? 1 : 0];
+}
+
 /**
  * @param {UrlAppState} urlState
  * @returns {AppState}
@@ -270,6 +301,15 @@ function parseUrlAppState(urlState) {
   if (typeof urlState[5] === 'string') {
     state.activeObliqueCollection = urlState[5];
   }
+  if (Array.isArray(urlState[6])) {
+    urlState[6].forEach((urlClippingPolygonState) => {
+      if (Array.isArray(urlClippingPolygonState)) {
+        state.clippingPolygons.push(
+          parseUrlClippingPolygonState(urlClippingPolygonState),
+        );
+      }
+    });
+  }
   return state;
 }
 
@@ -282,7 +322,7 @@ function writeUrlAppState(state, maxLength) {
   /**
    * @type {UrlAppState}
    */
-  const urlState = new Array(6).fill(0);
+  const urlState = new Array(7).fill(0);
   if (state.activeViewpoint) {
     urlState[0] = [
       state.activeViewpoint.cameraPosition?.slice() ?? 0,
@@ -301,6 +341,7 @@ function writeUrlAppState(state, maxLength) {
   urlState[2] = state.moduleIds.slice();
   urlState[3] = [];
   urlState[4] = [];
+  urlState[6] = [];
 
   if (state.activeObliqueCollection) {
     urlState[5] = state.activeObliqueCollection;
@@ -316,6 +357,18 @@ function writeUrlAppState(state, maxLength) {
     }
   });
 
+  state.clippingPolygons.forEach((clippingPolygonState) => {
+    const clippingPolygonUrlState =
+      writeUrlClippingPolygonState(clippingPolygonState);
+    if (
+      JSON.stringify(urlState).length +
+        JSON.stringify(clippingPolygonUrlState).length <
+      maxLength
+    ) {
+      urlState[6].push(clippingPolygonUrlState);
+    }
+  });
+
   state.plugins.forEach((pluginState) => {
     const urlPluginState = writeUrlPluginState(pluginState);
     if (
@@ -328,10 +381,11 @@ function writeUrlAppState(state, maxLength) {
 
   if (
     urlState[3].length !== state.layers.length ||
-    urlState[4].length !== state.plugins.length
+    urlState[4].length !== state.plugins.length ||
+    urlState[6].length !== state.clippingPolygons.length
   ) {
     getLogger('StateManagement').warning(
-      'State too large for URL: Not all layers and plugins are represented',
+      'State too large for URL: Not all layers, clipping polygons and plugins are represented',
     );
   }
 
@@ -368,6 +422,7 @@ export function setStateToUrl(state, url) {
     activeObliqueCollection: optional(String),
     layers: Array,
     plugins: Array,
+    clippingPolygons: Array,
     moduleIds: [String],
   });
   check(url, URL);

package/src/uiConfig.d.ts

@@ -47,10 +47,18 @@ export type UiConfigObject = {
      * - the company logo to display. this will override any and all css overrides.
      */
     logo?: string | undefined;
+    /**
+     * - the company logo to display in dark mode. this will override any and all css overrides. if not set, the `logo` will be used
+     */
+    logoDark?: string | undefined;
     /**
      * - an alternative logo to display in mobile view
      */
     mobileLogo?: string | undefined;
+    /**
+     * - an alternative logo to display in mobile view and dark mode. if not set, the `mobileLogo` will be used
+     */
+    mobileLogoDark?: string | undefined;
     /**
      * - an optional title to display next to the company logo
      */
@@ -155,6 +163,10 @@ export type UiConfigObject = {
      * - can be used to hide the contentTree
      */
     hideContentTree?: boolean | undefined;
+    /**
+     * - can be used to hide the rendering order action in the contentTree, which allows for temporary changes of rendering order
+     */
+    hideContentTreeRenderingOrder?: boolean | undefined;
     /**
      * - can be used to hide the legend
      */
@@ -188,7 +200,7 @@ export type UiConfigObject = {
      */
     openLegendOnAdd?: boolean | undefined;
     /**
-     * - can be used to apply a scale factor the the overviewMap
+     * - can be used to apply a scale factor to the overviewMap
      */
     overviewMapScaleFactor?: number | undefined;
 };
@@ -237,7 +249,9 @@ export type UiConfigObject = {
 /**
  * @typedef {Object} UiConfigObject
  * @property {string} [logo] - the company logo to display. this will override any and all css overrides.
+ * @property {string} [logoDark] - the company logo to display in dark mode. this will override any and all css overrides. if not set, the `logo` will be used
  * @property {string} [mobileLogo] - an alternative logo to display in mobile view
+ * @property {string} [mobileLogoDark] - an alternative logo to display in mobile view and dark mode. if not set, the `mobileLogo` will be used
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
@@ -264,6 +278,7 @@ export type UiConfigObject = {
  * @property {boolean} [hideFooter] - can be used to hide the footer
  * @property {boolean} [hideMyWorkspace] - can be used to hide the myWorkspace button
  * @property {boolean} [hideContentTree] - can be used to hide the contentTree
+ * @property {boolean} [hideContentTreeRenderingOrder] - can be used to hide the rendering order action in the contentTree, which allows for temporary changes of rendering order
  * @property {boolean} [hideLegend] - can be used to hide the legend
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [hideObliqueFooter] - can be used to hide the oblique name in the footer
@@ -272,7 +287,7 @@ export type UiConfigObject = {
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
- * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor the the overviewMap
+ * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor to the overviewMap
  */
 /**
  * @extends {Collection<UiConfigurationItem<unknown>>}
@@ -312,10 +327,18 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - the company logo to display. this will override any and all css overrides.
          */
         readonly logo?: string | undefined;
+        /**
+         * - the company logo to display in dark mode. this will override any and all css overrides. if not set, the `logo` will be used
+         */
+        readonly logoDark?: string | undefined;
         /**
          * - an alternative logo to display in mobile view
          */
         readonly mobileLogo?: string | undefined;
+        /**
+         * - an alternative logo to display in mobile view and dark mode. if not set, the `mobileLogo` will be used
+         */
+        readonly mobileLogoDark?: string | undefined;
         /**
          * - an optional title to display next to the company logo
          */
@@ -535,6 +558,10 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - can be used to hide the contentTree
          */
         readonly hideContentTree?: boolean | undefined;
+        /**
+         * - can be used to hide the rendering order action in the contentTree, which allows for temporary changes of rendering order
+         */
+        readonly hideContentTreeRenderingOrder?: boolean | undefined;
         /**
          * - can be used to hide the legend
          */
@@ -601,7 +628,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          */
         readonly openLegendOnAdd?: boolean | undefined;
         /**
-         * - can be used to apply a scale factor the the overviewMap
+         * - can be used to apply a scale factor to the overviewMap
          */
         readonly overviewMapScaleFactor?: number | undefined;
     };

package/src/uiConfig.js

@@ -50,7 +50,9 @@ import { reactive, readonly, ref } from 'vue';
 /**
  * @typedef {Object} UiConfigObject
  * @property {string} [logo] - the company logo to display. this will override any and all css overrides.
+ * @property {string} [logoDark] - the company logo to display in dark mode. this will override any and all css overrides. if not set, the `logo` will be used
  * @property {string} [mobileLogo] - an alternative logo to display in mobile view
+ * @property {string} [mobileLogoDark] - an alternative logo to display in mobile view and dark mode. if not set, the `mobileLogo` will be used
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
@@ -77,6 +79,7 @@ import { reactive, readonly, ref } from 'vue';
  * @property {boolean} [hideFooter] - can be used to hide the footer
  * @property {boolean} [hideMyWorkspace] - can be used to hide the myWorkspace button
  * @property {boolean} [hideContentTree] - can be used to hide the contentTree
+ * @property {boolean} [hideContentTreeRenderingOrder] - can be used to hide the rendering order action in the contentTree, which allows for temporary changes of rendering order
  * @property {boolean} [hideLegend] - can be used to hide the legend
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [hideObliqueFooter] - can be used to hide the oblique name in the footer
@@ -85,7 +88,7 @@ import { reactive, readonly, ref } from 'vue';
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
  * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
- * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor the the overviewMap
+ * @property {number} [overviewMapScaleFactor] - can be used to apply a scale factor to the overviewMap
  */
 
 /**

package/src/vcsUiApp.js

@@ -595,6 +595,16 @@ class VcsUiApp extends VcsApp {
         return layerState;
       });
 
+    state.clippingPolygons = [...this.clippingPolygons]
+      .filter(
+        (p) =>
+          p[moduleIdSymbol] !== defaultDynamicModuleId &&
+          p[moduleIdSymbol] !== volatileModuleId &&
+          ((p.active && !p.activeOnStartup) ||
+            (!p.active && p.activeOnStartup)),
+      )
+      .map((p) => ({ name: p.name, active: p.active }));
+
     const plugins = await Promise.all(
       [...this.plugins]
         .filter(
@@ -703,6 +713,16 @@ class VcsUiApp extends VcsApp {
           new Viewpoint(viewpointOptions),
         );
       }
+      this._cachedAppState.clippingPolygons.forEach((cpState) => {
+        const clippingPolygon = this.clippingPolygons.getByKey(cpState.name);
+        if (clippingPolygon) {
+          if (cpState.active) {
+            clippingPolygon.activate();
+          } else {
+            clippingPolygon.deactivate();
+          }
+        }
+      });
       this._cachedAppState.moduleIds.splice(
         this._cachedAppState.moduleIds.indexOf(module._id),
         1,