@vcmap/ui 6.3.12 → 6.3.13

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-aaaf46c0.js";
+export * from "./ui-8f8426e4.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-c9f45cfc.js";
+export * from "./vue-dd509a16.js";

package/dist/assets/{vuetify-a9ccbd51.js → vuetify-8df23ea4.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-a9ccbd51.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-c9f45cfc.js";
+} await loadCss('./assets/vuetify-8df23ea4.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-dd509a16.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-a9ccbd51.js";
+export * from "./vuetify-8df23ea4.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.12",
+  "version": "6.3.13",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.5",
-    "@vcmap/core": "^6.3.10",
+    "@vcmap/core": "^6.3.11",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/@vcmap-show-case/extent-example/src/ExtentExample.vue

@@ -2,8 +2,9 @@
   <v-container class="pa-0">
     <VcsExtentEditor
       heading="Default WGS84 projection"
-      v-model="wgs84Extent"
+      :model-value="wgs84Extent"
       show-extent-on-startup
+      @update:model-value="handleWgs84ExtentUpdate"
     />
     <VcsExtentEditor
       heading="Mercator projection example"
@@ -25,7 +26,20 @@
         projection: mercatorProjection,
       }).toJSON();
 
-      return { wgs84Extent, mercatorExtent };
+      return {
+        wgs84Extent,
+        mercatorExtent,
+        handleWgs84ExtentUpdate(extent) {
+          const loggedExtent = {
+            ...extent,
+            coordinates: [
+              ...extent.coordinates.map((c) => Math.round(c * 100000) / 100000),
+            ],
+          };
+          console.log(loggedExtent);
+          wgs84Extent.coordinates = extent.coordinates;
+        },
+      };
     },
   };
 </script>

package/plugins/@vcmap-show-case/icons-example/src/AllIconsComponent.vue

@@ -1,19 +1,21 @@
 <template>
-  <v-sheet class="overflow-auto icons-window">
-    <vcs-list :items="icons" :searchable="true" :show-title="false" />
-  </v-sheet>
+  <vcs-list
+    class="icons-window"
+    :items="icons"
+    searchable
+    sticky-searchbar
+    :show-title="false"
+  />
 </template>
 
 <script>
   import { Icons, VcsList } from '@vcmap/ui';
-  import { VSheet } from 'vuetify/components';
   import { computed } from 'vue';
 
   export default {
     name: 'AllIconsComponent',
     components: {
       VcsList,
-      VSheet,
     },
     setup() {
       const createListItem = (icon) => {

package/plugins/@vcmap-show-case/notifier-tester/src/NotifierTester.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-sheet>
-    <v-text-field v-model="message" label="Message" />
-    <v-text-field v-model.number="timeout" label="Timeout" />
+  <v-sheet class="pa-1">
+    <VcsTextField class="py-2" v-model="message" label="Message" />
+    <VcsTextField class="py-2" v-model.number="timeout" label="Timeout" />
     <VcsCheckbox v-model="hasTimeout" label="Toggle Timeout" />
     <v-list>
       <v-list-item v-for="type in types" :key="type">
@@ -23,12 +23,11 @@
     VSheet,
     VList,
     VListItem,
-    VTextField,
     VIcon,
     VCard,
     VDivider,
   } from 'vuetify/components';
-  import { NotificationType, VcsCheckbox } from '@vcmap/ui';
+  import { NotificationType, VcsCheckbox, VcsTextField } from '@vcmap/ui';
   import { computed, inject, ref } from 'vue';
 
   export default {
@@ -37,11 +36,11 @@
       VSheet,
       VList,
       VListItem,
-      VTextField,
       VIcon,
       VCard,
       VDivider,
       VcsCheckbox,
+      VcsTextField,
     },
     setup() {
       const app = inject('vcsApp');

package/plugins/@vcmap-show-case/project-selector/README.md

@@ -8,13 +8,24 @@ You can add projects or modules and define the startup behavior of the plugin:
 
 ### ProjectSelectorConfig
 
-| Property        | Type                  | default       | Description                 |
-| --------------- | --------------------- | ------------- | --------------------------- |
-| selected        | string                | 'VC Map Base' | selected project on startup |
-| selectedModules | string[]              | []            | selected modules on startup |
-| open            | boolean               | false         | open plugin on startup      |
-| projects        | Array<ProjectOptions> | []            |                             |
-| modules         | Array<string>         | []            | list of config urls         |
+| Property          | Type                     | default       | Description                                 |
+| ----------------- | ------------------------ | ------------- | ------------------------------------------- |
+| selected          | string                   | 'VC Map Base' | selected project on startup                 |
+| selectedModules   | string[]                 | []            | selected modules on startup                 |
+| open              | boolean                  | false         | open plugin on startup                      |
+| projects          | Array<ProjectOptions>    | []            |                                             |
+| modules           | Array<string>            | []            | list of config urls                         |
+| additionalModules | Record<string, string[]> | {}            | child config urls keyed by parent module ID |
+
+When a parent module loads, its `additionalModules` are loaded with it. They are removed before the parent is unloaded. Keys must match the parent config's `_id`; values are URLs to child module configs:
+
+```json
+{
+  "additionalModules": {
+    "dev": ["config/dev/geojson.config.json", "config/dev/i3s.config.json"]
+  }
+}
+```
 
 ### ProjectOptions
 

package/plugins/@vcmap-show-case/project-selector/src/ProjectSelectorComponent.vue

@@ -86,3 +86,12 @@
     },
   };
 </script>
+<style scoped lang="scss">
+  :deep(.v-card-actions) {
+    padding: 0px;
+    min-height: 40px;
+  }
+  :deep(.v-card-item) {
+    padding: 0.5rem 1rem;
+  }
+</style>

package/plugins/@vcmap-show-case/project-selector/src/index.js

@@ -13,8 +13,10 @@ import en from './en.json';
  * @property {string} _id
  * @property {string} [name]
  * @property {string} [description]
- * @property {string} configUrl
+ * @property {string} [configUrl]
+ * @property {Object} [config]
  * @property {boolean} active
+ * @property {Array<VcsModuleState>} [modules]
  */
 
 /**
@@ -37,6 +39,7 @@ import en from './en.json';
  * @property {boolean} [open=false] - open plugin on startup
  * @property {Array<Project>} projects
  * @property {Array<string>} modules
+ * @property {Record<string, Array<string>>} [additionalModules] - child module URLs by parent module ID
  */
 
 /**
@@ -50,6 +53,7 @@ export default async function projectSelector(config) {
     open,
     projects = [],
     modules = [],
+    additionalModules = {},
   } = config;
 
   const pluginConfig = reactive({
@@ -70,6 +74,17 @@ export default async function projectSelector(config) {
     projects: /** @type {Array<Project>} */ [],
     modules: /** @type {Array<VcsModuleState>} */ [],
   });
+  const additionalModuleStates = new Map(
+    Object.entries(additionalModules).map(([moduleId, configUrls]) => [
+      moduleId,
+      configUrls.map((configUrl) => ({
+        _id: undefined,
+        configUrl,
+        active: false,
+      })),
+    ]),
+  );
+  let removeModuleRemovedListener;
 
   /**
    * @param {string} configUrl
@@ -113,6 +128,32 @@ export default async function projectSelector(config) {
     pluginState.projects.splice(projectIdx, 1);
   }
 
+  /**
+   * @param {VcsApp} app
+   * @param {VcsModuleState} moduleState
+   * @returns {Promise<void>}
+   */
+  async function unloadModule(app, moduleState) {
+    if (moduleState.modules) {
+      await Promise.all(
+        moduleState.modules.map((state) => unloadModule(app, state)),
+      );
+      moduleState.modules = undefined;
+      moduleState.active = false;
+      return;
+    }
+    if (app.getModuleById(moduleState._id)) {
+      await Promise.all(
+        (additionalModuleStates.get(moduleState._id) || []).map((state) =>
+          unloadModule(app, state),
+        ),
+      );
+      await app.removeModule(moduleState._id);
+      moduleState.active = false;
+      moduleState._id = undefined;
+    }
+  }
+
   /**
    * @param {VcsApp} app
    * @param {VcsModuleState} moduleState
@@ -123,6 +164,22 @@ export default async function projectSelector(config) {
       const response = await fetch(moduleState.configUrl);
       if (response.ok) {
         const configJson = await response.json();
+        if (Array.isArray(configJson.modules)) {
+          moduleState.modules = configJson.modules.map((moduleConfig) =>
+            typeof moduleConfig === 'string'
+              ? { _id: undefined, active: false, configUrl: moduleConfig }
+              : { _id: undefined, active: false, config: moduleConfig },
+          );
+          await Promise.all(
+            moduleState.modules.map((state) => loadModule(app, state)),
+          );
+          moduleState.name = configJson.name;
+          moduleState.description = configJson.description;
+          moduleState.active = moduleState.modules.every(
+            (state) => state.active,
+          );
+          return;
+        }
         const module = new VcsModule(configJson);
         if (!app.getModuleById(module._id)) {
           await app.addModule(module);
@@ -130,6 +187,11 @@ export default async function projectSelector(config) {
           moduleState.name = module.name;
           moduleState.description = module.description;
           moduleState.active = true;
+          await Promise.all(
+            (additionalModuleStates.get(module._id) || []).map((state) =>
+              loadModule(app, state),
+            ),
+          );
         }
       }
     } catch (err) {
@@ -140,19 +202,6 @@ export default async function projectSelector(config) {
     }
   }
 
-  /**
-   * @param {VcsApp} app
-   * @param {VcsModuleState} moduleState
-   * @returns {Promise<void>}
-   */
-  async function unloadModule(app, moduleState) {
-    if (app.getModuleById(moduleState._id)) {
-      await app.removeModule(moduleState._id);
-      moduleState.active = false;
-      moduleState._id = undefined;
-    }
-  }
-
   /**
    * @param {VcsApp} app
    * @param {Project} project
@@ -214,21 +263,11 @@ export default async function projectSelector(config) {
       const windowComponent = {
         id: 'project-selector',
         component: ProjectsComponent,
-        state: {
-          headerTitle: 'Project Selector',
-        },
-        position: {
-          left: '30%',
-          right: '30%',
-          top: '20%',
-          bottom: '20%',
-        },
+        state: { headerTitle: 'Project Selector' },
+        position: { left: '30%', right: '30%', top: '10%' },
       };
       const { action, destroy } = createToggleAction(
-        {
-          name: 'VC Map HOSTING',
-          icon: 'mdi-chevron-down',
-        },
+        { name: 'VC Map HOSTING', icon: 'mdi-chevron-down' },
         windowComponent,
         app.windowManager,
         packageJSON.name,
@@ -239,6 +278,23 @@ export default async function projectSelector(config) {
         ButtonLocation.PROJECT,
       );
       this._destroyAction = destroy;
+      removeModuleRemovedListener = app.moduleRemoved.addEventListener(
+        (module) => {
+          const moduleStates = [
+            ...pluginState.modules,
+            ...[...additionalModuleStates.values()].flat(),
+            ...pluginState.projects.flatMap(
+              ({ modules: projectModules }) => projectModules,
+            ),
+          ];
+          moduleStates.forEach((moduleState) => {
+            if (moduleState._id === module._id) {
+              moduleState.active = false;
+              moduleState._id = undefined;
+            }
+          });
+        },
+      );
 
       pluginConfig.modules.forEach((c) => addModule(c));
       pluginConfig.projects.forEach((p) => addProject(p));
@@ -260,6 +316,10 @@ export default async function projectSelector(config) {
       en,
     },
     destroy() {
+      if (removeModuleRemovedListener) {
+        removeModuleRemovedListener();
+        removeModuleRemovedListener = undefined;
+      }
       if (this._destroyAction) {
         this._destroyAction();
         this._destroyAction = null;

package/plugins/@vcmap-show-case/simple-graph/src/SimpleGraphComponent.vue

@@ -9,15 +9,22 @@
     :gradient="gradient"
     :fill="fill"
     :smooth="smooth"
-    :value="values"
-  />
+    :tooltip="{ class: ' bg-grey-darken-4' }"
+    auto-draw
+    interactive
+    :model-value="values"
+  >
+    <template #tooltip="{ index }">
+      {{ values[index] }}
+    </template>
+  </v-sparkline>
 </template>
 <script>
   import { VSparkline } from 'vuetify/components';
 
   export default {
     name: 'SimpleGraphComponent',
-    components: [VSparkline],
+    components: { VSparkline },
     props: {
       attributes: {
         type: Object,

package/plugins/@vcmap-show-case/simple-graph/src/index.js

@@ -1,10 +1,19 @@
 import SimpleGraphView from './simpleGraphView.js';
+import { name, version, mapVersion } from '../package.json';
 /**
  * @returns {VcsPlugin}
  */
 export default async function simpleGraph() {
   return {
-    name: '@vcmap/simpleGraph',
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
     onVcsAppMounted(app) {
       /** Example for registering custom component on FeatureInfo */
       app.featureInfoClassRegistry.registerClass(

package/plugins/@vcmap-show-case/switch-map-callback-example/README.md

@@ -14,7 +14,7 @@ on Click of a ContentTreeItem.
       "onClick": [
         {
           "type": "SwitchMapCallback",
-          "mapName": "ol3"
+          "mapName": "OpenlayersMap"
         }
       ]
     },

package/plugins/package.json

@@ -33,7 +33,8 @@
     "@vcmap/dynamic-layer": "^4.0.0",
     "@vcmap/geofence": "^1.0.2",
     "@vcmap/panorama": "^1.0.0",
-    "@vcmap/layer-settings": "^1.0.1"
+    "@vcmap/layer-settings": "^1.0.1",
+    "@vcmap/ladder-reachability": "^1.0.2"
   },
   "optionalDependencies": {
     "@vcmap/guided-tour": "^1.0.6",

package/src/application/VcsApp.vue

@@ -93,7 +93,6 @@
   } from './VcsSplashScreen.vue';
   import VcsTextPage from './VcsTextPage.vue';
   import VcsAttributions from './VcsAttributions.vue';
-  import { getAttributions } from './attributionsHelper.js';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
   import {
     getDataProtection,
@@ -747,9 +746,9 @@
    * @returns {{ attributionEntries: import("vue").Ref<Array<import("./attributionsHelper.js").AttributionEntry>>, attributionAction: import("../actions/actionHelper.js").VcsAction, destroyAttributions: function():void }}
    */
   export function setupAttributions(app) {
-    const { entries, destroy } = getAttributions(app);
+    const { entries } = app.attributions;
 
-    const { action: attributionAction, destroy: attributionDestroy } =
+    const { action: attributionAction, destroy: destroyAttributions } =
       createToggleAction(
         {
           name: 'attributionToggle',
@@ -773,10 +772,7 @@
     return {
       attributionEntries: entries,
       attributionAction,
-      destroyAttributions: () => {
-        destroy();
-        attributionDestroy();
-      },
+      destroyAttributions,
     };
   }
 

package/src/application/attributionsHelper.d.ts

@@ -11,6 +11,13 @@
  * @property {string} title - title of the VcsObject the attribution applies to
  * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
+/**
+ * @typedef {Object} Attributions
+ * @property {import("vue").UnwrapRef<Array<AttributionEntry>>} entries - reactive array of attribution entries
+ * @property {function(import("@vcmap/core").VcsMap, string|import('../pluginHelper.js').vcsAppSymbol): function():void} registerMap - function to register a map and its layer collection for an owner, returns a function to unregister it
+ * @property {function(string|import('../pluginHelper.js').vcsAppSymbol):void} removeOwner - unregister all maps registered by an owner
+ * @property {function():void} destroy - function to clear all listeners and clean up attributions
+ */
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
@@ -28,12 +35,9 @@ export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
  * 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("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {Attributions}
  */
-export function getAttributions(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
-    destroy: () => void;
-};
+export function getAttributions(app: import("../vcsUiApp.js").default): Attributions;
 export type AttributionOptions = {
     /**
      * - name of the data provider
@@ -66,3 +70,21 @@ export type AttributionEntry = {
      */
     attributions: AttributionOptions | Array<AttributionOptions>;
 };
+export type Attributions = {
+    /**
+     * - reactive array of attribution entries
+     */
+    entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
+    /**
+     * - function to register a map and its layer collection for an owner, returns a function to unregister it
+     */
+    registerMap: (arg0: import("@vcmap/core").VcsMap, arg1: string | symbol) => () => void;
+    /**
+     * - unregister all maps registered by an owner
+     */
+    removeOwner: (arg0: string | symbol) => void;
+    /**
+     * - function to clear all listeners and clean up attributions
+     */
+    destroy: () => void;
+};