@vcmap/ui 6.0.0-rc.9 → 6.0.0

package/plugins/@vcmap-show-case/{table-example → projection-example}/src/index.js

@@ -1,11 +1,11 @@
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from '../package.json';
-import DataTableExample from './DataTableExample.vue';
+import ProjectionExample from './ProjectionExample.vue';
 
 /**
  * @returns {VcsPlugin}
  */
-export default async function iconsExample() {
+export default async function projectionExample() {
   return {
     get name() {
       return packageJSON.name;
@@ -16,21 +16,20 @@ export default async function iconsExample() {
     get mapVersion() {
       return packageJSON.mapVersion;
     },
-    onVcsAppMounted(app) {
+    initialize(app) {
       const { action, destroy } = createToggleAction(
         {
-          name: 'Table Example',
-          title: 'Table Example Plugin',
+          name: 'Projection Example',
+          title: 'Projection Example Plugin',
+          icon: '$vcsBoundingBox',
         },
         {
-          id: 'table-example',
-          component: DataTableExample,
+          id: 'projection-example',
+          component: ProjectionExample,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
-            headerTitle: 'Table Example',
-          },
-          position: {
-            width: 500,
+            headerTitle: 'Projection Example',
+            headerIcon: '$vcsBoundingBox',
           },
         },
         app.windowManager,
@@ -39,6 +38,18 @@ export default async function iconsExample() {
       app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
+    i18n: {
+      de: {
+        projectionExample: {
+          openDialog: 'Dialog öffnen',
+          log: 'Log',
+        },
+      },
+      en: {
+        openDialog: 'Open Dialog',
+        log: 'Log',
+      },
+    },
     destroy() {
       if (this._destroyAction) {
         this._destroyAction();

package/plugins/@vcmap-show-case/search-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/search-example",
   "version": "1.0.0",
-  "mapVersion": "^6.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/simple-graph/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@vcmap-show-case/simple-graph",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0",
+  "mapVersion": "^6.0",
   "dependencies": {
     "@vcsuite/parsers": "^1.0.1"
-  },
-  "peerDependencies": {
-    "@vcmap/ui": "5.0.0-rc.2"
   }
 }

package/plugins/@vcmap-show-case/style-input-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/style-input-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

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

@@ -1,9 +1,9 @@
 # @vcmap-show-case/switch-map-callback-example
 
-This plugin adds a MapSwitcherCallback to the uiApp.
+This plugin demonstrates the concept of `VcsCallback` by adding a MapSwitcherCallback to the uiApp.
 
 This can be used to switch the map i the ContentTree,
-on Click of an Item.
+on Click of a ContentTreeItem.
 
 ```json
 

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

@@ -1,5 +1,6 @@
 {
   "name": "@vcmap-show-case/switch-map-callback-example",
   "version": "1.0.0",
-  "description": "An Example plugin to add a Map Switcher Callback"
+  "description": "An Example plugin to add a Map Switcher Callback",
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/switch-map-callback-example/src/index.js

@@ -1,4 +1,4 @@
-import { version, name } from '../package.json';
+import { version, mapVersion, name } from '../package.json';
 import SwitchMapCallback from './switchMapCallback.js';
 
 /**
@@ -13,6 +13,9 @@ export default function switchMapCallbackExample() {
     get version() {
       return version;
     },
+    get mapVersion() {
+      return mapVersion;
+    },
     /**
      * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
      */

package/plugins/@vcmap-show-case/theming-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/theming-example",
   "version": "1.0.0",
-  "mapVersion": "^6.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/toolbox-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/toolbox-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/vector-properties-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/vector-properties-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/viewpoint-component-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/viewpoint-component-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/window-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/window-tester",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

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

@@ -4,7 +4,7 @@
       v-for="(example, index) in examples"
       :key="`b-${index}`"
       @click="(e) => toggle(e, example)"
-      class="pa-1"
+      class="ma-1"
     >
       toggle {{ example }}
     </VcsFormButton>

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

@@ -1,6 +1,10 @@
 <template>
   <v-container>
-    <VcsFormButton v-for="num in [1, 2]" :key="num" @click.stop="toggle(num)"
+    <VcsFormButton
+      v-for="num in [1, 2]"
+      :key="num"
+      @click.stop="toggle(num)"
+      class="ma-1"
       >toggle child {{ num }}</VcsFormButton
     >
   </v-container>

package/plugins/@vcmap-show-case/wizard-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/wizard-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/package.json

@@ -9,7 +9,7 @@
     "@vcmap/swipe-tool": "https://github.com/virtualcitySYSTEMS/map-swipe-tool.git#main",
     "@vcmap/export": "https://github.com/virtualcitySYSTEMS/map-export.git#main",
     "@vcmap/viewshed": "https://github.com/virtualcitySYSTEMS/map-viewshed.git#main",
-    "@vcmap/measurement": "https://github.com/virtualcitySYSTEMS/map-measurement.git#main",
+    "@vcmap/measurement": "^2.0.0-rc.2",
     "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git#main",
     "@vcmap/draw": "https://github.com/virtualcitySYSTEMS/map-draw.git#main",
     "@vcmap/shadow": "https://github.com/virtualcitySYSTEMS/map-shadow.git#main",
@@ -19,9 +19,13 @@
     "@vcmap/link-button": "https://github.com/virtualcitySYSTEMS/map-link-button.git#main",
     "@vcmap/cesium-filters": "https://github.com/virtualcitySYSTEMS/map-cesium-filters.git#main",
     "@vcmap/search-nominatim": "https://github.com/virtualcitySYSTEMS/map-search-nominatim.git#main",
-    "@vcmap/create-link": "https://github.com/virtualcitySYSTEMS/map-create-link.git#main"
+    "@vcmap/create-link": "https://github.com/virtualcitySYSTEMS/map-create-link.git#main",
+    "@vcmap/module-selector": "^2.0.0",
+    "@vcmap/dynamic-layer": "git+ssh://git@gitlab.virtualcitysystems.de/vcsuite/npm/vcmap/dynamic-layer.git#feature-idra-catalogue",
+    "@vcmap/line-of-sight": "git+ssh://git@gitlab.virtualcitysystems.de/vcsuite/npm/vcmap/line-of-sight.git#feature-v1"
   },
   "optionalDependencies": {
-    "@vcmap/planning": "^6.0.0-rc.1"
+    "@vcmap/planning": "^6.0.0-rc.2",
+    "@vcmap/solar-revenue": "^2.0.0-rc.1"
   }
 }

package/src/actions/flightActions.js

@@ -36,33 +36,54 @@ export function createPlayAction(app, instance) {
       } else {
         player = await app.flights.setPlayerForFlight(instance);
         if (player) {
-          stateListener = player.stateChanged.addEventListener((state) => {
-            if (state === 'stopped') {
-              action.icon = '$vcsPlayCircle';
-              action.title = 'flight.playTooltip';
-            } else if (state === 'paused') {
-              action.icon = '$vcsPlayCircle';
-              action.title = 'flight.playTooltip';
-            } else {
-              action.icon = 'mdi-pause';
-              action.title = 'flight.pauseTooltip';
-            }
-          });
-          destroyListener = player.destroyed.addEventListener(() => {
-            player = null;
-            action.icon = '$vcsPlayCircle';
-            stateListener();
-            destroyListener();
-          });
           player.play();
         }
       }
     },
   });
 
+  function updateAction(state) {
+    if (state === 'stopped' || state === 'paused') {
+      action.icon = '$vcsPlayCircle';
+      action.title = 'flight.playTooltip';
+    } else {
+      action.icon = 'mdi-pause';
+      action.title = 'flight.pauseTooltip';
+    }
+  }
+
+  function destroyPlayer() {
+    player = undefined;
+    updateAction('stopped');
+    stateListener?.();
+    destroyListener?.();
+  }
+
+  function checkPlayer(_player) {
+    if (_player?.flightInstanceName === instance.name) {
+      player = _player;
+      updateAction(player.state);
+      stateListener = player.stateChanged.addEventListener((state) => {
+        updateAction(state);
+      });
+      destroyListener = player.destroyed.addEventListener(() => {
+        destroyPlayer();
+      });
+    } else {
+      destroyPlayer();
+    }
+  }
+  const playerListener = app.flights.playerChanged.addEventListener(
+    (_player) => {
+      checkPlayer(_player);
+    },
+  );
+  checkPlayer(app.flights.player);
+
   return {
     action,
     destroy: () => {
+      playerListener();
       if (player) {
         player.stop();
         player.destroy();
@@ -348,7 +369,7 @@ export async function createFlightVisualizationAction(
   const action = reactive({
     name: 'components.flight.hidePath',
     title: 'components.flight.hidePath',
-    icon: 'mdi-eye-outline',
+    icon: '$vcsEye',
     active,
     async callback() {
       if (!flightVis) {
@@ -360,7 +381,6 @@ export async function createFlightVisualizationAction(
         await flightVis.activate();
       }
       this.active = !this.active;
-      this.icon = this.active ? 'mdi-eye-outline' : 'mdi-eye-off-outline';
     },
   });
 

package/src/actions/listActions.d.ts

@@ -1,5 +1,5 @@
 /**
- * Creates an action for renaming an item in a VcsList.
+ * Creates an action for deleting an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection
  * @param {T} item
  * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]

package/src/actions/listActions.js

@@ -9,7 +9,7 @@ import { vcsAppSymbol } from '../pluginHelper.js';
 import { NotificationType } from '../notifier/notifier.js';
 
 /**
- * Creates an action for renaming an item in a VcsList.
+ * Creates an action for deleting an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection
  * @param {T} item
  * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]

package/src/application/VcsApp.vue

@@ -15,6 +15,7 @@
       class="d-flex gc-1 pa-0"
     >
       <VcsPositionDisplay />
+      <VcsObliqueFooter />
       <VcsTextPageFooter
         v-if="imprint"
         :text-page="imprint"
@@ -66,6 +67,7 @@
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
+  import VcsObliqueFooter from './VcsObliqueFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import VcsSplashScreen from './VcsSplashScreen.vue';
   import VcsTextPage from './VcsTextPage.vue';
@@ -723,6 +725,7 @@
       VcsPositionDisplay,
       VcsAttributionsFooter,
       VcsTextPageFooter,
+      VcsObliqueFooter,
       VcsSplashScreen,
       VcsNavbar,
       VContainer,

package/src/application/VcsApp.vue.d.ts

@@ -110,6 +110,10 @@ declare const _default: import("vue").DefineComponent<{
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */
         readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
+         */
+        readonly obliqueFooterTemplate?: string | undefined;
         /**
          * - an optional URL to a help landing page
          */
@@ -282,10 +286,18 @@ declare const _default: import("vue").DefineComponent<{
          * - can be used to hide the settings Window
          */
         readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to hide the oblique name in the footer
+         */
+        readonly hideObliqueFooter?: boolean | undefined;
         /**
          * - can be used to activate the overviewMap on startup
          */
         readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - can be used to activate a contentTree on startup
+         */
+        readonly contentTreeActiveOnStartup?: boolean | undefined;
         /**
          * - the display quality settings
          */

package/src/application/VcsAttributions.vue

@@ -12,7 +12,7 @@
           :key="attribution.provider"
           :title="`${$st(attribution.provider)} ${attribution.year}`"
         >
-          <a :href="attribution.url" target="_blank">
+          <a :href="attribution.url ? attribution.url : null" target="_blank">
             {{ $st(attribution.provider) }} {{ attribution.year }}
           </a>
         </v-list-item-subtitle>

package/src/application/VcsAttributionsFooter.vue

@@ -8,7 +8,7 @@
         class="attribution"
         :key="attribution.provider"
       >
-        <a :href="attribution.url" target="_blank">
+        <a :href="attribution.url ? attribution.url : null" target="_blank">
           {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
         </a>
       </span>

package/src/application/VcsContainer.vue

@@ -9,7 +9,6 @@
     }"
     fluid
     absolute
-    style="background: #1b5e20"
   >
     <template v-if="xs">
       <img

package/src/application/VcsContainer.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */
         readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
+         */
+        readonly obliqueFooterTemplate?: string | undefined;
         /**
          * - an optional URL to a help landing page
          */
@@ -202,10 +206,18 @@ declare const _default: import("vue").DefineComponent<{
          * - can be used to hide the settings Window
          */
         readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to hide the oblique name in the footer
+         */
+        readonly hideObliqueFooter?: boolean | undefined;
         /**
          * - can be used to activate the overviewMap on startup
          */
         readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - can be used to activate a contentTree on startup
+         */
+        readonly contentTreeActiveOnStartup?: boolean | undefined;
         /**
          * - the display quality settings
          */

package/src/application/VcsObliqueFooter.vue

@@ -0,0 +1,110 @@
+<template>
+  <span
+    v-if="content"
+    class="d-flex align-center overflow-hidden vcs-oblique-footer"
+    v-html="content"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .vcs-oblique-footer {
+    :deep(p) {
+      font-size: smaller;
+      margin: 0;
+    }
+  }
+</style>
+
+<script>
+  import { computed, inject, onUnmounted, shallowRef } from 'vue';
+  import { ObliqueMap, ObliqueViewDirection } from '@vcmap/core';
+  import { renderTemplate } from '../components/form-output/markdownHelper.js';
+
+  const i18nViewDirection = {
+    [ObliqueViewDirection.NORTH]: 'footer.oblique.north',
+    [ObliqueViewDirection.EAST]: 'footer.oblique.east',
+    [ObliqueViewDirection.SOUTH]: 'footer.oblique.south',
+    [ObliqueViewDirection.WEST]: 'footer.oblique.west',
+    [ObliqueViewDirection.NADIR]: 'footer.oblique.nadir',
+  };
+
+  /**
+   * @description Renders image information according to configured markdown template
+   * @vue-computed {string} content - the derived rendered image information
+   */
+  export default {
+    name: 'VcsObliqueFooter',
+    setup() {
+      const app = inject('vcsApp');
+
+      /**
+       * @returns {import("@vcmap/core").ObliqueImage|null}
+       */
+      function getImage() {
+        const map = app.maps.activeMap;
+        if (map instanceof ObliqueMap) {
+          return map.currentImage;
+        }
+        return null;
+      }
+
+      /**
+       * @param {import("@vcmap/core").ObliqueImage?} image
+       * @returns {import("@vcmap/core").ObliqueImage & {viewDirection: string}|null}
+       */
+      function getTranslatedImageInfo(image) {
+        if (image) {
+          return {
+            ...image,
+            viewDirection: app.vueI18n.t(
+              i18nViewDirection[image.viewDirection],
+            ),
+          };
+        }
+        return null;
+      }
+
+      const currentImage = shallowRef(getImage());
+
+      let imageChangedListener = () => {};
+      const mapChangedListener = app.maps.mapActivated.addEventListener(
+        (map) => {
+          imageChangedListener();
+          if (map instanceof ObliqueMap) {
+            currentImage.value = map.currentImage;
+            imageChangedListener = map.imageChanged.addEventListener(
+              (image) => {
+                currentImage.value = image;
+              },
+            );
+          } else if (currentImage.value) {
+            currentImage.value = null;
+            imageChangedListener = () => {};
+          }
+        },
+      );
+
+      onUnmounted(() => {
+        imageChangedListener();
+        mapChangedListener();
+      });
+
+      const content = computed(() => {
+        if (!app.uiConfig.config.hideObliqueFooter && currentImage.value) {
+          const template =
+            app.uiConfig.config.obliqueFooterTemplate ??
+            'footer.oblique.template';
+          return renderTemplate(
+            app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            getTranslatedImageInfo(currentImage.value),
+          );
+        }
+        return null;
+      });
+
+      return {
+        content,
+      };
+    },
+  };
+</script>

package/src/application/VcsObliqueFooter.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    content: import("vue").ComputedRef<string | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -15,6 +15,7 @@
       >{{ $st(textPage.title) }}</span
     >
     <v-tooltip
+      v-if="$st(textPage.tooltip)"
       :text="$st(textPage.tooltip)"
       activator="parent"
       location="top"

package/src/application/attributionsHelper.js

@@ -107,14 +107,14 @@ export function getAttributions(app) {
   }
 
   /**
-   * adds or removes a AttributionEntry on layer state changes
-   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   * adds or removes a AttributionEntry for layers or maps
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer} object
    */
   function syncAttributions(object) {
     if (object?.properties?.attributions === undefined) {
       return;
     }
-    if (object.active || object.loaded) {
+    if (object.active) {
       addAttributions(object);
     } else {
       removeAttributions(object);
@@ -138,9 +138,13 @@ export function getAttributions(app) {
       }
     });
     if (map instanceof ObliqueMap) {
-      syncAttributions(map.collection);
-      obliqueListener =
-        map.collectionChanged.addEventListener(syncAttributions);
+      addAttributions(map.collection);
+      obliqueListener = map.collectionChanged.addEventListener(
+        (obliqueCollection) => {
+          [...app.obliqueCollections].forEach(removeAttributions);
+          addAttributions(obliqueCollection);
+        },
+      );
     }
   }