@vcmap/ui 6.0.0-rc.8 → 6.0.0

package/plugins/@vcmap-show-case/projection-example/src/ProjectionExample.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import { ref, toRaw } from 'vue';
+  import { mercatorProjection } from '@vcmap/core';
+  import { VContainer, VCol, VRow, VSwitch } from 'vuetify/components';
+  import { VcsProjection, VcsFormButton, VcsLabel } from '@vcmap/ui';
+
+  const projectionOptions = ref(mercatorProjection.toJSON());
+  const required = ref(false);
+  const hideRequestButton = ref(false);
+  const hideAlias = ref(false);
+  function reset() {
+    projectionOptions.value = mercatorProjection.toJSON();
+    console.log(mercatorProjection.toJSON());
+  }
+</script>
+
+<template>
+  <div>
+    <v-container>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('required') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="required" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('hideRequestButton') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="hideRequestButton" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('hideAlias') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="hideAlias" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-form-button @click="reset" class="w-100"
+            >Reset Web Mercator</vcs-form-button
+          >
+        </v-col>
+      </v-row>
+    </v-container>
+    <vcs-projection
+      v-model="projectionOptions"
+      :required="required"
+      :hide-request-button="hideRequestButton"
+      :hide-alias="hideAlias"
+      class="pa-1"
+    ></vcs-projection>
+    <div class="d-flex gc-2 justify-end mr-2">
+      <vcs-form-button @click="console.log(toRaw(projectionOptions))">{{
+        $t('projectionExample.log')
+      }}</vcs-form-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -1,11 +1,31 @@
 {
   "dependencies": {
     "@vcmap/print": "https://github.com/virtualcitySYSTEMS/map-print.git#main",
-    "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git",
-    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git",
     "@vcmap/walk": "https://github.com/virtualcitySYSTEMS/map-walk.git#main",
     "@vcmap/clipping-tool": "https://github.com/virtualcitySYSTEMS/map-clipping-tool.git#main",
+    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git#main",
+    "@vcmap/height-profile": "https://github.com/virtualcitySYSTEMS/map-heightprofile.git#main",
+    "@vcmap/flight": "https://github.com/virtualcitySYSTEMS/map-flight.git#main",
+    "@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/link-button": "https://github.com/virtualcitySYSTEMS/map-link-button.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",
+    "@vcmap/search-wfs": "https://github.com/virtualcitySYSTEMS/map-search-wfs.git#main",
+    "@vcmap/search-esri": "https://github.com/virtualcitySYSTEMS/map-search-esri.git#main",
+    "@vcmap/search-coordinate": "https://github.com/virtualcitySYSTEMS/map-search-coordinate.git#main",
+    "@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/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.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
          */
@@ -300,6 +312,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly medium?: {
                 readonly sse?: number | undefined;
@@ -309,6 +322,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly high?: {
                 readonly sse?: number | undefined;
@@ -318,6 +332,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
         } | undefined;
         /**

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
          */
@@ -220,6 +232,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly medium?: {
                 readonly sse?: number | undefined;
@@ -229,6 +242,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly high?: {
                 readonly sse?: number | undefined;
@@ -238,6 +252,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
         } | undefined;
         /**