@vcmap/viewshed 2.0.10 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/viewshed",
-  "version": "2.0.10",
+  "version": "3.0.0",
   "description": "Tool to simulate a \"viewer\" and their field of vision from a certain standpoint in the map. It allows the user to see which areas and buildings can or can't be seen from a specific standpoint, regarding different viewing distances, viewers' sizes and orientations.Th",
   "type": "module",
   "main": "src/index.js",
@@ -47,25 +47,25 @@
   },
   "prettier": "@vcsuite/eslint-config/prettier.js",
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^4.0.3",
-    "@vcmap/core": "^5.1.4",
-    "@vcmap/ui": "^5.1.5",
-    "ol": "^7.5.2",
-    "vue": "~2.7.3",
-    "vuetify": "~2.6.7"
+    "@vcmap-cesium/engine": "^11.0.2",
+    "@vcmap/core": "^6.0.0",
+    "@vcmap/ui": "^6.0.1",
+    "ol": "^10.2.1",
+    "vue": "~3.4.38",
+    "vuetify": "^3.7.3"
   },
   "devDependencies": {
-    "@vcmap/plugin-cli": "^3.0.0",
-    "@vcsuite/eslint-config": "^3.0.5",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@vcmap/plugin-cli": "^4.0.0",
+    "@vcsuite/eslint-config": "^3.0.8",
+    "@vitest/coverage-v8": "^2.0.1",
     "jest-canvas-mock": "^2.5.2",
     "jsdom": "^22.1.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vitest": "^0.34.6"
+    "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@vcsuite/check": "^1.1.2",
+    "@vcsuite/check": "^2.1.0",
     "@vcsuite/parsers": "^1.0.3"
   },
-  "mapVersion": "^5.1"
+  "mapVersion": "^6.0"
 }

package/src/ViewshedConfigEditor.vue

@@ -44,7 +44,7 @@
 
 <script>
   import { ref } from 'vue';
-  import { VCol, VColorPicker, VContainer, VRow } from 'vuetify/lib';
+  import { VCol, VColorPicker, VContainer, VRow } from 'vuetify/components';
   import {
     AbstractConfigEditor,
     VcsFormSection,
@@ -74,7 +74,6 @@
 
   export default {
     name: 'ViewshedConfigEditor',
-    title: 'Viewshed Editor',
     components: {
       AbstractConfigEditor,
       VcsFormSection,
@@ -97,14 +96,12 @@
     },
     setup(props) {
       /** @type {import("vue").Ref<import("./index.js").ViewshedPluginOptions>} */
-      const localConfig = ref({});
+      const config = props.getConfig();
       /** @type {import("vue").Ref<import("./index.js").ViewshedPluginOptions>} */
-      props.getConfig().then((config) => {
-        localConfig.value = Object.assign(getDefaultOptions(), config);
-      });
+      const localConfig = ref({ ...getDefaultOptions(), ...config });
 
-      async function apply() {
-        await props.setConfig(localConfig.value);
+      function apply() {
+        props.setConfig(localConfig.value);
       }
 
       return {
@@ -113,7 +110,7 @@
         apply,
         toolItems: Object.values(ViewshedTypes).map((type) => ({
           value: type,
-          text: `viewshed.${type}`,
+          title: `viewshed.${type}`,
         })),
       };
     },

package/src/ViewshedWindow.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div v-if="viewshedMode === ViewshedPluginModes.CREATE" class="px-2 py-1">
-      <template v-if="viewshedType === ViewshedTypes.CONE">
+    <div v-if="viewshedMode === ViewshedPluginModes.CREATE">
+      <VcsHelp v-if="viewshedType === ViewshedTypes.CONE">
         {{ $t('viewshed.createDescription') }}
-      </template>
-      <template v-else-if="viewshedType === ViewshedTypes.THREESIXTY">
+      </VcsHelp>
+      <VcsHelp v-else-if="viewshedType === ViewshedTypes.THREESIXTY">
         {{ $t('viewshed.createThreeSixtyDescription') }}
-      </template>
+      </VcsHelp>
     </div>
     <VcsFormSection
       v-else-if="
@@ -32,6 +32,7 @@
             :transformation-mode="TransformationMode.TRANSLATE"
             :feature-properties="{ altitudeMode: 'absolute' }"
             :allow-z-input="true"
+            class="w-100"
           />
         </v-row>
         <v-row v-else no-gutters>
@@ -41,11 +42,10 @@
             class="pb-1"
           >
             <VcsTextField
-              :value="value"
-              @input="(v) => setPosition(v, key, index)"
+              :model-value="value"
+              @update:model-value="(v) => setPosition(v, key, index)"
               type="number"
               :prefix="key"
-              :show-spin-buttons="true"
               :step="key === 'Z' ? 1 : 0.0001"
               :unit="key === 'Z' ? 'm' : '°'"
               :decimals="key === 'Z' ? 2 : 8"
@@ -53,6 +53,7 @@
                 viewshedMode === ViewshedPluginModes.MOVE &&
                 !(key === 'Z' && heightMode === HeightModes.RELATIVE)
               "
+              :hide-spin-buttons="true"
             />
           </v-col>
         </v-row>
@@ -62,21 +63,22 @@
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>
-          <VcsLabel>
+          <VcsLabel html-for="heightMode">
             {{ $t('viewshed.heightMode') }}
           </VcsLabel>
         </v-col>
         <v-col>
           <VcsSelect
+            id="heightMode"
             :items="
               Object.values(HeightModes).map((item) => ({
                 value: item,
-                text: `viewshed.${item}`,
+                title: `viewshed.${item}`,
               }))
             "
-            :value="heightMode"
-            @input="changeHeightMode"
-          ></VcsSelect>
+            :model-value="heightMode"
+            @update:model-value="changeHeightMode"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -94,28 +96,30 @@
             (viewshedType === ViewshedTypes.CONE && key !== 'showPrimitive')
           "
         >
-          <v-row no-gutters class="pr-1">
+          <v-row no-gutters class="px-1">
             <v-col>
-              <VcsLabel :html-for="key">
+              <VcsLabel :html-for="key" class="py-0">
                 {{ $t(`viewshed.${key}`) }}
               </VcsLabel>
             </v-col>
             <v-col class="d-flex justify-end align-center">
-              <span v-if="key === 'distance'">{{ `${value} m` }}</span>
-              <span v-else>{{ `${value} °` }}</span>
+              <span v-if="key === 'distance'">{{
+                `${Math.round(value)} m`
+              }}</span>
+              <span v-else>{{ `${Math.round(value)} °` }}</span>
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsSlider
                 :id="key"
-                :value="value"
-                @input="(v) => setParameter(key, v)"
+                class="pa-0"
+                :model-value="value"
+                @update:model-value="(v) => setParameter(key, v)"
                 type="number"
                 step="1"
                 :min="parameterRanges[key][0]"
                 :max="parameterRanges[key][1]"
-                height="15"
               />
             </v-col>
           </v-row>
@@ -144,7 +148,7 @@
       v-else-if="viewshedMode === ViewshedPluginModes.CREATE"
       class="d-flex w-full justify-end px-2 pt-2 pb-1"
     >
-      <VcsFormButton @click="cancel()" variant="filled">
+      <VcsFormButton @click="cancel()" variant="outlined">
         {{ $t('viewshed.cancel') }}
       </VcsFormButton>
     </div>
@@ -163,7 +167,7 @@
     watch,
     watchEffect,
   } from 'vue';
-  import { VCol, VContainer, VDivider, VRow } from 'vuetify/lib';
+  import { VCol, VContainer, VDivider, VRow } from 'vuetify/components';
   import { TransformationMode, Viewpoint } from '@vcmap/core';
   import {
     VcsFormButton,
@@ -173,6 +177,7 @@
     VcsSlider,
     VcsTextField,
     VcsFeatureTransforms,
+    VcsHelp,
   } from '@vcmap/ui';
   import { ViewshedPluginModes, HeightModes } from './viewshedManager.js';
   import Viewshed, { ViewshedTypes } from './viewshed.js';
@@ -197,6 +202,7 @@
       VcsSelect,
       VcsFormButton,
       VcsFeatureTransforms,
+      VcsHelp,
     },
     name: 'ViewshedWindow',
     props: {
@@ -225,6 +231,12 @@
         currentIsPersisted,
       } = viewshedManager;
 
+      /** Whether movement is disabled for the current map */
+      const movementDisabled = ref(
+        app.maps.activeMap?.movementApiCallsDisabled ?? false,
+      );
+      let movementDisabledListener = () => {};
+
       const selection = computed(() => props.selection);
 
       let removePositionChangedListener = () => {};
@@ -330,11 +342,18 @@
           // only the case for collection component editor
           viewshedManager.editViewshed(viewshed);
         }
+        movementDisabledListener =
+          app.maps.activeMap?.movementDisabledChanged.addEventListener(
+            (options) => {
+              movementDisabled.value = options.apiCalls;
+            },
+          );
       });
 
       onUnmounted(() => {
         removePositionChangedListener();
         deleteCachedViewpoint();
+        movementDisabledListener();
 
         if (!currentIsPersisted.value) {
           // in case of temp editor
@@ -384,6 +403,7 @@
               : 'viewshed.jumpToViewpoint',
             icon: 'mdi-human-male',
             active: !!cachedViewpoint.value,
+            disabled: movementDisabled.value,
             async callback() {
               viewshedManager.moveCurrentViewshed(false);
               if (currentViewshed.value && !cachedViewpoint.value) {

package/src/index.js

@@ -28,6 +28,7 @@ import ViewshedConfigEditor, {
  */
 export default function plugin(config) {
   let viewshedManager;
+  let app;
   let destroy = () => {};
 
   return {
@@ -46,6 +47,7 @@ export default function plugin(config) {
      * @returns {Promise<void>}
      */
     async initialize(vcsUiApp, state) {
+      app = vcsUiApp;
       vcsUiApp.categoryClassRegistry.registerClass(
         this[moduleIdSymbol],
         ViewshedCategory.className,
@@ -71,9 +73,12 @@ export default function plugin(config) {
 
       const { activeMap } = vcsUiApp.maps;
       function activateCachedViewshed(map) {
-        if (state?.mode && state.currentViewshed && map instanceof CesiumMap) {
-          const activeViewshed = new Viewshed(state.currentViewshed, activeMap);
-          if (state.mode === ViewshedPluginModes.VIEW) {
+        if (state?.m && state.cv && map instanceof CesiumMap) {
+          if (state.cv.properties.title) {
+            delete state.cv.properties.title;
+          }
+          const activeViewshed = new Viewshed(state.cv);
+          if (state.m === ViewshedPluginModes.VIEW) {
             viewshedManager.viewViewshed(activeViewshed);
           } else {
             viewshedManager.editViewshed(activeViewshed);
@@ -139,19 +144,33 @@ export default function plugin(config) {
      * @returns {ViewshedPluginState}
      */
     getState() {
-      return {
-        mode: viewshedManager.mode.value,
-        currentViewshed: viewshedManager.currentViewshed.value?.toJSON(),
-      };
+      const state = {};
+      const mode = viewshedManager.mode.value;
+      const currentViewshed = viewshedManager.currentViewshed.value?.toJSON();
+
+      if (mode !== null && mode !== 'create' && currentViewshed) {
+        state.m = mode;
+        state.cv = currentViewshed;
+      }
+
+      return state;
     },
     /**
      * components for configuring the plugin and/ or custom items defined by the plugin
      * @returns {Array<import("@vcmap/ui").PluginConfigEditor>}
      */
     getConfigEditors() {
-      return [{ component: ViewshedConfigEditor }];
+      return [
+        {
+          component: ViewshedConfigEditor,
+          title: 'viewshed.editor.title',
+          infoUrlCallback: app?.getHelpUrlCallback(
+            '/components/plugins/viewshedToolConfig.html',
+          ),
+        },
+      ];
     },
-    destroy,
+    destroy: () => destroy(),
     i18n: {
       en: {
         viewshed: {
@@ -162,14 +181,14 @@ export default function plugin(config) {
           position: 'Position',
           showPrimitive: 'Show viewpoint',
           viewpoint: 'Viewpoint',
-          viewshed: 'Viewshed',
+          viewshedCategory: 'Viewsheds',
           heightMode: 'Height mode',
-          relative: 'Relativ to ground',
+          relative: 'Relative to ground',
           absolute: 'Absolute',
           new: 'New',
           cancel: 'Cancel',
-          [ViewshedTypes.CONE]: 'Cone Viewshed',
-          [ViewshedTypes.THREESIXTY]: '360° Viewshed',
+          [ViewshedTypes.CONE]: 'Cone viewshed analysis',
+          [ViewshedTypes.THREESIXTY]: '360° viewshed analysis',
           create: 'Create',
           addToMyWorkspace: 'Add to My Workspace',
           temporary: 'Temporary',
@@ -182,6 +201,7 @@ export default function plugin(config) {
             'Click the map twice. First click places the origin, second defines the distance of the viewshed.',
           remove: 'Remove',
           editor: {
+            title: 'Viewshed Editor',
             general: 'General Settings',
             visibleColor: 'Visible color',
             shadowColor: 'Shadow color',
@@ -196,28 +216,29 @@ export default function plugin(config) {
           heading: 'Ausrichtung',
           pitch: 'Neigung',
           position: 'Position',
-          showPrimitive: 'Viewpoint zeigen',
-          viewpoint: 'Viewpoint',
-          viewshed: 'Viewshed',
+          showPrimitive: 'Standpunkt zeigen',
+          viewpoint: 'Standpunkt',
+          viewshedCategory: 'Sichtbarkeitsanalysen',
           heightMode: 'Höhenmodus',
           relative: 'Relativ zum Gelände',
           absolute: 'Absolut',
           new: 'Neu',
           cancel: 'Abbrechen',
-          [ViewshedTypes.CONE]: 'Kegel Viewshed',
-          [ViewshedTypes.THREESIXTY]: '360° Viewshed',
+          [ViewshedTypes.CONE]: 'Sichtkegelanalyse',
+          [ViewshedTypes.THREESIXTY]: '360° Sichtsanalyse',
           create: 'Erzeuge',
           addToMyWorkspace: 'Zu Mein Arbeitsbereich hinzufügen',
-          temporary: 'Temporärer',
-          jumpToViewpoint: 'Zu Viewpoint springen',
-          returnToViewpoint: 'Zu vorherigem Viewpoint zurück springen',
-          move: 'Viewpoint verschieben',
+          temporary: 'Temporäre',
+          jumpToViewpoint: 'Zu Standpunkt springen',
+          returnToViewpoint: 'Zu vorherigem Standpunkt zurück springen',
+          move: 'Standpunkt verschieben',
           createDescription:
-            'Klicke zweimal in die Karte. Der erste Klick platziert den Ursprung, der zweite die Distanz und die Richtung des Viewsheds.',
+            'Klicken Sie zweimal in die Karte. Der erste Klick platziert den Ursprung, der zweite die Distanz und die Richtung des Sichtkegels.',
           createThreeSixtyDescription:
-            'Klicke zweimal in die Karte. Der erste Klick platziert den Ursprung, der zweite die Distanz des Viewsheds.',
+            'Klicken Sie zweimal in die Karte. Der erste Klick platziert den Ursprung, der zweite die Distanz der Sichtbarkeitsanalyse.',
           remove: 'Entfernen',
           editor: {
+            title: 'Viewshed Editor',
             general: 'Allgemeine Einstellungen',
             visibleColor: 'Sichtbarer Bereich',
             shadowColor: 'Nicht sichtbarer Bereich',

package/src/util/toolboxHelper.js

@@ -1,6 +1,6 @@
 import { CesiumMap } from '@vcmap/core';
 import { ToolboxType } from '@vcmap/ui';
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 import { reactive, watch } from 'vue';
 import { ViewshedTypes } from '../viewshed.js';
 import { ViewshedIcons } from './windowHelper.js';
@@ -44,9 +44,9 @@ function createViewshedToolbox(app, manager, name, tools) {
       selected(newIndex) {
         if (newIndex !== this.currentIndex) {
           this.currentIndex = newIndex;
-          const toolName = this.tools[this.currentIndex].name;
-          manager.createViewshed(toolName);
         }
+        const toolName = this.tools[this.currentIndex].name;
+        manager.createViewshed(toolName);
       },
       tools: tools.flatMap((tool) => {
         if (tool === ViewshedTypes.CONE) {
@@ -119,7 +119,7 @@ function createViewshedToolbox(app, manager, name, tools) {
  * @returns {function():void} Function to remove toolbox component.
  */
 export default function addToolButtons(app, manager, name, tools) {
-  check(tools, [Object.values(ViewshedTypes)]);
+  check(tools, [ofEnum(ViewshedTypes)]);
 
   const { toolbox: createToolbox, destroy: destroyCreateToolbox } =
     createViewshedToolbox(app, manager, name, tools);

package/src/viewshed.js

@@ -305,6 +305,7 @@ export default class Viewshed extends VcsObject {
         this._shadowCamera.frustum
       ).fov = value * CesiumMath.RADIANS_PER_DEGREE;
       if (this._viewshedType === ViewshedTypes.CONE) {
+        this._updateShadowMap();
         this._updatePrimitive();
       }
     }
@@ -481,7 +482,7 @@ export default class Viewshed extends VcsObject {
   }
 
   _removePrimitive() {
-    if (this._primitive && !this._primitive.isDestroyed?.()) {
+    if (this._primitive && !this._primitive.isDestroyed()) {
       this._scene?.primitives.remove(this._primitive);
       this._primitive.destroy();
       this._primitive = null;

package/src/viewshedCategory.js

@@ -34,7 +34,7 @@ class ViewshedCategory extends Category {
         this._app?.maps.getByType(CesiumMap.className)[0]
       );
     if (cesiumMap) {
-      return new Viewshed(item, cesiumMap);
+      return new Viewshed(item);
     } else {
       throw new Error('No CesiumMap available');
     }
@@ -83,7 +83,7 @@ export async function createCategory(app) {
       {
         type: ViewshedCategory.className,
         name: 'Viewsheds',
-        title: 'Viewsheds',
+        title: 'viewshed.viewshedCategory',
       },
       name,
       {