@vcmap/viewshed 3.0.5 → 4.1.0

package/src/ViewshedWindow.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- CREATE -->
     <div v-if="viewshedMode === ViewshedPluginModes.CREATE">
       <VcsHelp v-if="viewshedType === ViewshedTypes.CONE">
         {{ $t('viewshed.createDescription') }}
@@ -7,19 +8,46 @@
       <VcsHelp v-else-if="viewshedType === ViewshedTypes.THREESIXTY">
         {{ $t('viewshed.createThreeSixtyDescription') }}
       </VcsHelp>
+      <v-row no-gutters class="px-1">
+        <v-col>
+          <VcsLabel html-for="heightMode">
+            {{ $t('viewshed.heightMode') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsSelect
+            id="heightMode"
+            :items="heightModes"
+            :model-value="heightMode"
+            @update:model-value="changeHeightMode"
+          />
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row no-gutters class="px-2 pt-2 pb-1 d-flex justify-end">
+        <VcsFormButton @click="cancel()">
+          {{ $t('viewshed.cancel') }}
+        </VcsFormButton>
+      </v-row>
     </div>
-    <VcsFormSection
-      v-else-if="
+    <!-- EDIT AND MOVE -->
+    <VcsWorkspaceWrapper
+      v-if="
         viewshedMode === ViewshedPluginModes.EDIT ||
         viewshedMode === ViewshedPluginModes.MOVE
       "
-      :header-actions="headerActions"
-      heading="viewshed.viewpoint"
-      :action-button-list-overflow-count="3"
+      :disable-add="currentIsPersisted"
+      class="wrapper"
+      @add-clicked="addToMyWorkspace"
+      @new-clicked="createNewViewshed"
     >
-      <v-container class="px-1 py-0">
-        <v-row no-gutters>
-          <span class="px-1 py-0">{{ $t('viewshed.position') }}</span>
+      <VcsFormSection
+        :header-actions="headerActions"
+        heading="viewshed.viewpoint"
+        :action-button-list-overflow-count="3"
+      >
+        <v-row no-gutters class="px-1">
+          <span class="px-1">{{ $t('viewshed.position') }}</span>
         </v-row>
         <v-row
           v-if="
@@ -27,6 +55,7 @@
             heightMode === HeightModes.ABSOLUTE
           "
           no-gutters
+          class="px-1"
         >
           <VcsFeatureTransforms
             :transformation-mode="TransformationMode.TRANSLATE"
@@ -35,7 +64,7 @@
             class="w-100"
           />
         </v-row>
-        <v-row v-else no-gutters>
+        <v-row v-else no-gutters class="px-1">
           <v-col
             v-for="(value, key, index) in position"
             :key="index"
@@ -43,7 +72,6 @@
           >
             <VcsTextField
               :model-value="value"
-              @update:model-value="(v) => setPosition(v, key, index)"
               type="number"
               :prefix="key"
               :step="key === 'Z' ? 1 : 0.0001"
@@ -54,14 +82,13 @@
                 !(key === 'Z' && heightMode === HeightModes.RELATIVE)
               "
               :hide-spin-buttons="true"
+              @update:model-value="(v: string) => setPosition(v, key, index)"
             />
           </v-col>
         </v-row>
-      </v-container>
-    </VcsFormSection>
-    <v-divider />
-    <v-container class="px-1 py-0">
-      <v-row no-gutters>
+      </VcsFormSection>
+      <v-divider />
+      <v-row no-gutters class="px-1">
         <v-col>
           <VcsLabel html-for="heightMode">
             {{ $t('viewshed.heightMode') }}
@@ -70,94 +97,40 @@
         <v-col>
           <VcsSelect
             id="heightMode"
-            :items="
-              Object.values(HeightModes).map((item) => ({
-                value: item,
-                title: `viewshed.${item}`,
-              }))
-            "
+            :items="heightModes"
             :model-value="heightMode"
             @update:model-value="changeHeightMode"
           />
         </v-col>
       </v-row>
-    </v-container>
-    <v-container
-      class="px-1 pt-0 pb-2"
-      v-if="
-        viewshedMode === ViewshedPluginModes.EDIT ||
-        viewshedMode === ViewshedPluginModes.MOVE
-      "
-    >
-      <v-row no-gutters v-for="(value, key) in parameters" :key="key">
-        <v-col
+      <div v-for="(value, key) in parameters" :key="key" class="px-1">
+        <VcsLabeledSlider
           v-if="
             key === 'distance' ||
             (viewshedType === ViewshedTypes.CONE && key !== 'showPrimitive')
           "
-        >
-          <v-row no-gutters class="px-1">
-            <v-col>
-              <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'">{{
-                `${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"
-                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]"
-              />
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-container>
-    <v-divider />
-    <div
-      v-if="
-        viewshedMode === ViewshedPluginModes.EDIT ||
-        viewshedMode === ViewshedPluginModes.MOVE
-      "
-      class="d-flex w-full justify-space-between px-2 pt-2 pb-1"
-    >
-      <VcsFormButton
-        @click="addToMyWorkspace()"
-        tooltip="viewshed.addToMyWorkspace"
-        icon="$vcsComponentsPlus"
-        :disabled="currentIsPersisted || undefined"
-      />
-      <VcsFormButton @click="createNewViewshed()" variant="filled">
-        {{ $t('viewshed.new') }}
-      </VcsFormButton>
-    </div>
-    <div
-      v-else-if="viewshedMode === ViewshedPluginModes.CREATE"
-      class="d-flex w-full justify-end px-2 pt-2 pb-1"
-    >
-      <VcsFormButton @click="cancel()" variant="outlined">
-        {{ $t('viewshed.cancel') }}
-      </VcsFormButton>
-    </div>
+          class="pa-0"
+          :label="`viewshed.${key}`"
+          :unit="key === 'distance' ? 'm' : '°'"
+          :min="parameterRanges[key][0]"
+          :max="parameterRanges[key][1]"
+          :step="1"
+          :text-input-cols="3"
+          allow-text-input
+          hide-spin-buttons
+          :model-value="Math.round(Number(value))"
+          @update:model-value="(v: number) => setParameter(key, v)"
+        />
+      </div>
+    </VcsWorkspaceWrapper>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+  import type { PropType, Ref } from 'vue';
   import {
     computed,
+    defineComponent,
     inject,
     onMounted,
     onUnmounted,
@@ -167,18 +140,26 @@
     watch,
     watchEffect,
   } from 'vue';
-  import { VCol, VContainer, VDivider, VRow } from 'vuetify/components';
+  import { VCol, VDivider, VRow } from 'vuetify/components';
+  import type { CesiumMap } from '@vcmap/core';
   import { TransformationMode, Viewpoint } from '@vcmap/core';
+  import type {
+    VcsUiApp,
+    VcsAction,
+    CollectionComponentListItem,
+  } from '@vcmap/ui';
   import {
     VcsFormButton,
+    VcsFeatureTransforms,
     VcsFormSection,
+    VcsHelp,
     VcsLabel,
+    VcsLabeledSlider,
     VcsSelect,
-    VcsSlider,
     VcsTextField,
-    VcsFeatureTransforms,
-    VcsHelp,
+    VcsWorkspaceWrapper,
   } from '@vcmap/ui';
+  import type { ViewshedManager } from './viewshedManager.js';
   import { ViewshedPluginModes, HeightModes } from './viewshedManager.js';
   import Viewshed, { ViewshedTypes } from './viewshed.js';
 
@@ -189,42 +170,42 @@
     pitch: [-90, 90],
   };
 
-  export default {
+  type ViewshedParameters = Pick<
+    Viewshed,
+    'heading' | 'showPrimitive' | 'distance' | 'fov' | 'pitch'
+  >;
+
+  export default defineComponent({
+    name: 'ViewshedWindow',
     components: {
-      VcsTextField,
-      VContainer,
-      VRow,
       VCol,
-      VcsSlider,
-      VcsLabel,
-      VcsFormSection,
       VDivider,
-      VcsSelect,
+      VRow,
       VcsFormButton,
       VcsFeatureTransforms,
+      VcsFormSection,
       VcsHelp,
+      VcsLabel,
+      VcsLabeledSlider,
+      VcsSelect,
+      VcsTextField,
+      VcsWorkspaceWrapper,
     },
-    name: 'ViewshedWindow',
     props: {
       getViewshed: {
-        type: Function,
-        required: false,
-        default: undefined,
+        type: Function as PropType<() => Viewshed | undefined>,
+        default: () => undefined,
       },
       selection: {
-        type: Object,
-        required: false,
-        default: undefined,
+        type: Object as PropType<
+          Ref<CollectionComponentListItem[]> | undefined
+        >,
+        default: () => undefined,
       },
     },
     setup(props) {
-      const viewshedManager =
-        /** @type {import("./viewshedManager.js").ViewshedManager} */ (
-          inject('manager')
-        );
-      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (
-        inject('vcsApp')
-      );
+      const viewshedManager = inject<ViewshedManager>('manager')!;
+      const app = inject('vcsApp') as VcsUiApp;
       const {
         currentViewshed,
         mode: viewshedMode,
@@ -235,40 +216,34 @@
       const movementDisabled = ref(
         app.maps.activeMap?.movementApiCallsDisabled ?? false,
       );
-      let movementDisabledListener = () => {};
+      let movementDisabledListener: (() => void) | undefined;
 
-      const selection = computed(() => props.selection);
-
-      let removePositionChangedListener = () => {};
+      let removePositionChangedListener = (): void => {};
 
       /**
        * Position of the viewshed as coordinates array. Z value is either absolute height (heightMode === HeightModes.ABSOLUTE) or relative height (heightMode === HeightModes.RELATIVE);
-       * @type {{X: number | undefined, Y: number | undefined, Z: number | undefined}}
        */
-      const position = reactive({
+      const position = reactive<{ X?: number; Y?: number; Z?: number }>({
         X: undefined,
         Y: undefined,
         Z: undefined,
       });
       /** Cached view point when jumping to view point of viewshed. This allows to jump back to prev position when clicking 'jump to viewpoint' again, without changing position. */
-      const cachedViewpoint = shallowRef();
+      const cachedViewpoint = shallowRef<Viewpoint | null>();
       /** If currently in `jumpToViewpoint` mode: sets cached viewpoint on null, deletes camera changed listener and reactivates viewshed. Otherwise empty function. */
-      let deleteCachedViewpoint = () => {};
+      let deleteCachedViewpoint = (): void => {};
 
-      /**
-       * @type {{showPrimitive: boolean, distance: number | undefined, fov: number | undefined, heading: number | undefined, pitch: number | undefined}}
-       */
-      const parameters = reactive({
+      const parameters = reactive<ViewshedParameters>({
         showPrimitive: false,
-        distance: undefined,
-        fov: undefined,
-        heading: undefined,
-        pitch: undefined,
+        distance: currentViewshed.value?.distance || 0,
+        fov: currentViewshed.value?.fov || 0,
+        heading: currentViewshed.value?.heading || 0,
+        pitch: currentViewshed.value?.pitch || 0,
       });
 
-      const viewshedType = ref();
+      const viewshedType = ref<ViewshedTypes | undefined>();
 
-      function updatePosition() {
+      function updatePosition(): void {
         if (currentViewshed.value) {
           position.X = currentViewshed.value.position[0];
           position.Y = currentViewshed.value.position[1];
@@ -279,7 +254,7 @@
         }
       }
 
-      function updateWindow() {
+      function updateWindow(): void {
         updatePosition();
 
         if (currentViewshed.value) {
@@ -320,19 +295,17 @@
       /**
        * Deactivates viewshed and sets up a camera changes listener, which is destroyed when `deleteCachedViewpoint()` is called.
        */
-      async function setUpCameraChangedListener() {
+      function setUpCameraChangedListener(): void {
         currentViewshed.value?.deactivate();
-        const camera = /** @type {import("@vcmap/core").CesiumMap} */ (
-          app.maps.activeMap
-        ).getScene()?.camera;
-        const listener = camera?.changed.addEventListener(() => {
-          deleteCachedViewpoint();
-        });
-        deleteCachedViewpoint = () => {
+        const camera = (app.maps.activeMap as CesiumMap).getScene()?.camera;
+        const listener = camera?.changed.addEventListener(
+          deleteCachedViewpoint,
+        );
+        deleteCachedViewpoint = (): void => {
           listener?.();
           cachedViewpoint.value = null;
-          currentViewshed.value?.activate(app.maps.activeMap);
-          deleteCachedViewpoint = () => {};
+          currentViewshed.value?.activate(app.maps.activeMap as CesiumMap);
+          deleteCachedViewpoint = (): void => {};
         };
       }
 
@@ -353,7 +326,7 @@
       onUnmounted(() => {
         removePositionChangedListener();
         deleteCachedViewpoint();
-        movementDisabledListener();
+        movementDisabledListener?.();
 
         if (!currentIsPersisted.value) {
           // in case of temp editor
@@ -367,15 +340,18 @@
             viewshedManager.stop();
           }
         }
-        if (selection.value) {
+        if (props.selection?.value) {
           // in case of collection component editor
-          if (selection.value.length > 1) {
+          if (props.selection.value.length > 1) {
             viewshedManager.setupMultiSelect();
-          } else if (selection.value.length === 1 && currentViewshed.value) {
+          } else if (
+            props.selection.value.length === 1 &&
+            currentViewshed.value
+          ) {
             viewshedManager.viewViewshed(currentViewshed.value);
           } else if (
             // when a persited viewshed is deselected, stops plugin
-            !selection.value.length &&
+            !props.selection.value.length &&
             viewshedMode.value === ViewshedPluginModes.EDIT
           ) {
             viewshedManager.stop(false);
@@ -385,16 +361,20 @@
 
       updateWindow();
 
-      function setParameter(key, value) {
+      function setParameter<K extends keyof ViewshedParameters>(
+        key: K,
+        value: ViewshedParameters[K],
+      ): void {
         deleteCachedViewpoint();
         if (currentViewshed.value) {
           parameters[key] = value;
+          // @ts-expect-error not typed
           currentViewshed.value[key] = value;
         }
       }
 
       const headerActions = computed(() => {
-        const actions = [];
+        const actions: VcsAction[] = [];
         if (viewshedType.value === ViewshedTypes.CONE) {
           actions.push({
             name: 'jumpToViewpoint',
@@ -425,7 +405,7 @@
                 );
                 setUpCameraChangedListener();
               } else if (cachedViewpoint.value) {
-                app.maps.activeMap?.gotoViewpoint(cachedViewpoint.value);
+                await app.maps.activeMap?.gotoViewpoint(cachedViewpoint.value);
                 deleteCachedViewpoint();
               }
             },
@@ -460,7 +440,7 @@
 
       return {
         position,
-        setPosition(value, key, index) {
+        setPosition(value: string, key: string, index: number): void {
           deleteCachedViewpoint();
           if (!currentViewshed.value) {
             return;
@@ -476,7 +456,7 @@
             newPosition[index] = Number(value);
             currentViewshed.value.position = newPosition;
           }
-          position[key] = Number(value);
+          position[key as keyof typeof position] = Number(value);
         },
         parameters,
         setParameter,
@@ -488,15 +468,27 @@
         ViewshedTypes,
         HeightModes,
         heightMode: viewshedManager.heightMode,
+        heightModes: Object.values(HeightModes).map((item) => ({
+          value: item,
+          title: `viewshed.${item}`,
+        })),
         TransformationMode,
-        changeHeightMode: viewshedManager.changeHeightMode,
-        async createNewViewshed() {
-          await viewshedManager.createViewshed(viewshedType.value);
+        changeHeightMode: (v: HeightModes): void => {
+          viewshedManager.changeHeightMode(v);
+        },
+        async createNewViewshed(): Promise<void> {
+          await viewshedManager.createViewshed(viewshedType.value!);
+        },
+        addToMyWorkspace: (): void => {
+          viewshedManager.persistCurrent();
+        },
+        cancel: (): void => {
+          viewshedManager.stop();
         },
-        addToMyWorkspace: () => viewshedManager.persistCurrent(),
-        cancel: () => viewshedManager.stop(),
         headerActions,
       };
     },
-  };
+  });
 </script>
+
+<style scoped lang="scss"></style>

package/src/callbacks/activateViewshedCallback.ts

@@ -0,0 +1,57 @@
+import { getLogger } from '@vcsuite/logger';
+import { parseEnumValue } from '@vcsuite/parsers';
+import { VcsCallback } from '@vcmap/ui';
+import type { VcsCallbackOptions, VcsUiApp } from '@vcmap/ui';
+import type { ViewshedPlugin, ViewshedPluginState } from '../index.js';
+import { name as pluginName } from '../../package.json';
+import { ViewshedPluginModes } from '../viewshedManager.js';
+import type { ViewshedOptions } from '../viewshed.js';
+
+export type ActivateViewshedCallbackOptions = VcsCallbackOptions &
+  ViewshedPluginState;
+
+class ActivateViewshedCallback extends VcsCallback {
+  static get className(): string {
+    return 'ActivateViewshedCallback';
+  }
+
+  private _mode: ViewshedPluginModes | null;
+  private _viewshedOptions: ViewshedOptions | null;
+  constructor(options: ActivateViewshedCallbackOptions, app: VcsUiApp) {
+    super(options, app);
+    this._mode = parseEnumValue<ViewshedPluginModes>(
+      options.m,
+      ViewshedPluginModes,
+      ViewshedPluginModes.CREATE,
+    );
+    this._viewshedOptions = options.cv || null;
+  }
+
+  callback(): void {
+    const plugin = (this._app as VcsUiApp).plugins.getByKey(pluginName) as
+      | ViewshedPlugin
+      | undefined;
+    if (!plugin) {
+      getLogger('ActivateViewshedCallback').warning(
+        `Plugin ${pluginName} not found`,
+      );
+      return;
+    }
+    plugin.state.m = this._mode;
+    plugin.state.cv = this._viewshedOptions;
+    plugin.activate();
+  }
+
+  toJSON(): ActivateViewshedCallbackOptions {
+    const config: ActivateViewshedCallbackOptions = super.toJSON();
+    if (this._mode) {
+      config.m = this._mode;
+    }
+    if (this._viewshedOptions) {
+      config.cv = structuredClone(this._viewshedOptions);
+    }
+    return config;
+  }
+}
+
+export default ActivateViewshedCallback;

package/src/callbacks/deactivateViewshedCallback.ts

@@ -0,0 +1,26 @@
+import { VcsCallback } from '@vcmap/ui';
+import type { VcsUiApp } from '@vcmap/ui';
+import { getLogger } from '@vcsuite/logger';
+import { name as pluginName } from '../../package.json';
+import type { ViewshedPlugin } from '../index.js';
+
+class DeactivateViewshedCallback extends VcsCallback {
+  static get className(): string {
+    return 'DeactivateViewshedCallback';
+  }
+
+  callback(): void {
+    const plugin = (this._app as VcsUiApp).plugins.getByKey(pluginName) as
+      | ViewshedPlugin
+      | undefined;
+    if (!plugin) {
+      getLogger('DeactivateShadowCallback').warning(
+        `Plugin ${pluginName} not found`,
+      );
+      return;
+    }
+    plugin.deactivate();
+  }
+}
+
+export default DeactivateViewshedCallback;