@vcmap/viewshed 3.0.5 → 4.0.0

package/src/{index.js → index.ts}

@@ -1,5 +1,9 @@
+import type { VcsMap } from '@vcmap/core';
 import { CesiumMap, moduleIdSymbol } from '@vcmap/core';
+import type { PluginConfigEditor, VcsPlugin, VcsUiApp } from '@vcmap/ui';
+import type { ColorOptions, ViewshedOptions } from './viewshed.js';
 import Viewshed, { ViewshedTypes } from './viewshed.js';
+import type { ViewshedManager } from './viewshedManager.js';
 import createViewshedManager, {
   ViewshedPluginModes,
 } from './viewshedManager.js';
@@ -7,46 +11,55 @@ import { setupViewshedWindow } from './util/windowHelper.js';
 import addViewshedToolButtons from './util/toolboxHelper.js';
 import { name, version, mapVersion } from '../package.json';
 import ViewshedCategory, { createCategory } from './viewshedCategory.js';
-import ViewshedConfigEditor, {
-  getDefaultOptions,
-} from './ViewshedConfigEditor.vue';
+import type { ViewshedConfig } from './ViewshedConfigEditor.vue';
+import ViewshedConfigEditor from './ViewshedConfigEditor.vue';
 
-/**
- * @typedef {Object} ViewshedPluginState
- * @property {import("./viewshedManager.js").ViewshedPluginModes | null} mode Which mode the plugin is currently in.
- * @property {import("./viewshed.js").ViewshedOptions | null} currentViewshed The currents viewshed options.
- */
+type ViewshedPluginState = {
+  /** Which mode the plugin is currently in. */
+  m?: ViewshedPluginModes | null;
+  /** The currents viewshed options. */
+  cv?: ViewshedOptions | null;
+};
 
-/**
- * @typedef {import("./viewshed.js").ColorOptions & {tools?: Array<ViewshedTypes>}} ViewshedPluginOptions
- */
+export type ViewshedPluginOptions = ColorOptions & {
+  tools?: ViewshedTypes[];
+};
 
-/**
- * Implementation of VcsPlugin interface. This function should not throw! Put exceptions in initialize instead.
- * @param {ViewshedPluginOptions} config - the configuration of this plugin instance, passed in from the app.
- * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T, ViewshedPluginState>}
- */
-export default function plugin(config) {
-  let viewshedManager;
-  let app;
-  let destroy = () => {};
+export function getDefaultOptions(): ViewshedConfig {
+  return {
+    visibleColor: Viewshed.getDefaultOptions().colorOptions.visibleColor,
+    shadowColor: Viewshed.getDefaultOptions().colorOptions.shadowColor,
+    tools: [...Object.values(ViewshedTypes)],
+  };
+}
+
+export type ViewshedPlugin = VcsPlugin<
+  ViewshedPluginOptions,
+  ViewshedPluginState
+>;
+
+export default function plugin(options: ViewshedPluginOptions): ViewshedPlugin {
+  let app: VcsUiApp;
+  let viewshedManager: ViewshedManager;
+  let destroy = (): void => {};
+
+  const defaultOptions = getDefaultOptions();
+  const config = { ...defaultOptions, ...options };
 
   return {
-    get name() {
+    get name(): string {
       return name;
     },
-    get version() {
+    get version(): string {
       return version;
     },
-    get mapVersion() {
+    get mapVersion(): string {
       return mapVersion;
     },
-    /**
-     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
-     * @param {ViewshedPluginState=} state
-     * @returns {Promise<void>}
-     */
-    async initialize(vcsUiApp, state) {
+    async initialize(
+      vcsUiApp: VcsUiApp,
+      state?: ViewshedPluginState,
+    ): Promise<void> {
       app = vcsUiApp;
       vcsUiApp.categoryClassRegistry.registerClass(
         this[moduleIdSymbol],
@@ -63,7 +76,7 @@ export default function plugin(config) {
         vcsUiApp,
         viewshedManager,
         name,
-        config.tools || getDefaultOptions().tools,
+        config.tools || defaultOptions.tools,
       );
       const { destroy: destroyViewshedWindow } = setupViewshedWindow(
         viewshedManager,
@@ -72,7 +85,7 @@ export default function plugin(config) {
       );
 
       const { activeMap } = vcsUiApp.maps;
-      function activateCachedViewshed(map) {
+      function activateCachedViewshed(map: VcsMap): void {
         if (state?.m && state.cv && map instanceof CesiumMap) {
           const activeViewshed = new Viewshed(state.cv);
           if (state.m === ViewshedPluginModes.VIEW) {
@@ -97,7 +110,7 @@ export default function plugin(config) {
         },
       );
 
-      destroy = () => {
+      destroy = (): void => {
         mapActivatedListener();
         destroyButtons();
         destroyViewshedWindow();
@@ -105,52 +118,40 @@ export default function plugin(config) {
         viewshedManager.destroy();
       };
     },
-    /**
-     * should return all default values of the configuration
-     * @returns {ViewshedPluginOptions}
-     */
     getDefaultOptions,
-    /**
-     * should return the plugin's serialization excluding all default values
-     * @returns {ViewshedPluginOptions}
-     */
-    toJSON() {
-      const serial = {};
-      if (
-        config.tools &&
-        getDefaultOptions().tools.length !== config.tools.length
-      ) {
+    toJSON(): ViewshedPluginOptions {
+      const serial: ViewshedPluginOptions = {};
+      if (config.tools && defaultOptions.tools.length !== config.tools.length) {
         serial.tools = [...config.tools];
       }
       if (
         config.shadowColor &&
-        config.shadowColor !== Viewshed.getDefaultOptions().shadowColor
+        config.shadowColor !== defaultOptions.shadowColor
       ) {
         serial.shadowColor = config.shadowColor;
       }
       if (
         config.visibleColor &&
-        config.visibleColor !== Viewshed.getDefaultOptions().visibleColor
+        config.visibleColor !== defaultOptions.visibleColor
       ) {
         serial.visibleColor = config.visibleColor;
       }
       return serial;
     },
-    /**
-     * should return the plugins state
-     * @param {boolean} forUrl
-     * @returns {ViewshedPluginState}
-     */
-    getState(forUrl) {
-      const state = {};
+    getState(forUrl?: boolean): ViewshedPluginState {
+      const state: ViewshedPluginState = {};
       const mode = viewshedManager.mode.value;
       const currentViewshed = viewshedManager.currentViewshed.value?.toJSON();
 
-      if (mode !== null && mode !== 'create' && currentViewshed) {
+      if (
+        mode !== null &&
+        mode !== ViewshedPluginModes.CREATE &&
+        currentViewshed
+      ) {
         state.m = mode;
         state.cv = currentViewshed;
-        if (forUrl && state.cv.properties?.title) {
-          if (Object.keys(state.properties).length === 1) {
+        if (forUrl && state.cv?.properties?.title) {
+          if (Object.keys(state.cv?.properties).length === 1) {
             delete state.cv.properties;
           } else {
             delete state.cv.properties.title;
@@ -160,11 +161,7 @@ export default function plugin(config) {
 
       return state;
     },
-    /**
-     * components for configuring the plugin and/ or custom items defined by the plugin
-     * @returns {Array<import("@vcmap/ui").PluginConfigEditor>}
-     */
-    getConfigEditors() {
+    getConfigEditors(): PluginConfigEditor<object>[] {
       return [
         {
           component: ViewshedConfigEditor,
@@ -176,7 +173,9 @@ export default function plugin(config) {
         },
       ];
     },
-    destroy: () => destroy(),
+    destroy: (): void => {
+      destroy();
+    },
     i18n: {
       en: {
         viewshed: {
@@ -191,7 +190,6 @@ export default function plugin(config) {
           heightMode: 'Height mode',
           relative: 'Relative to ground',
           absolute: 'Absolute',
-          new: 'New',
           cancel: 'Cancel',
           [ViewshedTypes.CONE]: 'Cone viewshed analysis',
           [ViewshedTypes.THREESIXTY]: '360° viewshed analysis',
@@ -199,7 +197,6 @@ export default function plugin(config) {
             [ViewshedTypes.CONE]: 'Create cone viewshed analysis',
             [ViewshedTypes.THREESIXTY]: 'Create 360° viewshed analysis',
           },
-          addToMyWorkspace: 'Add to My Workspace',
           temporary: 'Temporary',
           jumpToViewpoint: 'Jump to viewpoint',
           returnToViewpoint: 'Return to previous viewpoint',
@@ -231,7 +228,6 @@ export default function plugin(config) {
           heightMode: 'Höhenmodus',
           relative: 'Relativ zum Gelände',
           absolute: 'Absolut',
-          new: 'Neu',
           cancel: 'Abbrechen',
           [ViewshedTypes.CONE]: 'Sichtkegelanalyse',
           [ViewshedTypes.THREESIXTY]: '360° Sichtsanalyse',
@@ -239,7 +235,6 @@ export default function plugin(config) {
             [ViewshedTypes.CONE]: 'Sichtkegelanalyse erstellen',
             [ViewshedTypes.THREESIXTY]: '360° Sichtanalyse erstellen',
           },
-          addToMyWorkspace: 'Zu Mein Arbeitsbereich hinzufügen',
           temporary: 'Temporäre',
           jumpToViewpoint: 'Zu Standpunkt springen',
           returnToViewpoint: 'Zu vorherigem Standpunkt zurück springen',

package/src/util/{toolboxHelper.js → toolboxHelper.ts}

@@ -1,41 +1,53 @@
 import { CesiumMap } from '@vcmap/core';
+import type {
+  SelectToolboxComponentOptions,
+  SingleToolboxComponentOptions,
+  VcsUiApp,
+} from '@vcmap/ui';
 import { ToolboxType } from '@vcmap/ui';
 import { check, ofEnum } from '@vcsuite/check';
 import { reactive, watch } from 'vue';
 import { ViewshedTypes } from '../viewshed.js';
-import { ViewshedIcons } from './windowHelper.js';
+import { viewshedIcons } from './windowHelper.js';
+import type { ViewshedManager } from '../viewshedManager.js';
 import { ViewshedPluginModes } from '../viewshedManager.js';
 
-/**
- * @typedef {Object} ViewshedToolbox
- * @property {import("@vcmap/ui/src/manager/toolbox/toolboxManager").SelectToolboxComponentOptions} toolbox
- * @property {function():void} destroy
- */
+type ViewshedToolbox = {
+  toolbox: SingleToolboxComponentOptions | SelectToolboxComponentOptions;
+  destroy: () => void;
+};
 
 /**
  *
- * @param {import("@vcmap/ui").VcsUiApp} app The VcsUiApp instance
- * @param {import("../viewshedManager.js").ViewshedManager} manager The viewshed manager.
- * @param {string} name Name of toolbox.
- * @param {Array<string>} tools The tools to be available in the toolbox
- * @returns {ViewshedToolbox} A select toolbox with buttons to create 360 and cone viewshed.
+ * @param app The VcsUiApp instance
+ * @param manager The viewshed manager.
+ * @param name Name of toolbox.
+ * @param tools The tools to be available in the toolbox
+ * @returns A select toolbox with buttons to create 360 and cone viewshed.
  */
-function createViewshedToolbox(app, manager, name, tools) {
+function createViewshedToolbox(
+  app: VcsUiApp,
+  manager: ViewshedManager,
+  name: string,
+  tools: string[],
+): ViewshedToolbox {
   /**
-   * @param {string} tool The tool to create.
-   * @returns {{name:ViewshedTypes, icon:string, title:string, } | undefined} A tool object.
+   * @param tool The tool to create.
+   * @returns A tool object.
    */
-  function parseTool(tool) {
+  function parseTool(
+    tool: ViewshedTypes,
+  ): { name: ViewshedTypes; icon: string; title: string } | undefined {
     if (tool === ViewshedTypes.CONE) {
       return {
         name: ViewshedTypes.CONE,
-        icon: ViewshedIcons[ViewshedTypes.CONE],
+        icon: viewshedIcons[ViewshedTypes.CONE],
         title: `viewshed.create.${ViewshedTypes.CONE}`,
       };
     } else if (tool === ViewshedTypes.THREESIXTY) {
       return {
         name: ViewshedTypes.THREESIXTY,
-        icon: ViewshedIcons[ViewshedTypes.THREESIXTY],
+        icon: viewshedIcons[ViewshedTypes.THREESIXTY],
         title: `viewshed.create.${ViewshedTypes.THREESIXTY}`,
       };
     } else {
@@ -43,10 +55,10 @@ function createViewshedToolbox(app, manager, name, tools) {
     }
   }
 
-  let toolbox;
-  let currentViewshedWatcher;
+  let toolbox: SingleToolboxComponentOptions | SelectToolboxComponentOptions;
+  let currentViewshedWatcher: () => void;
   if (tools.length === 1) {
-    const tool = parseTool(tools[0]);
+    const tool = parseTool(tools[0] as ViewshedTypes)!;
     toolbox = {
       type: ToolboxType.SINGLE,
       action: reactive({
@@ -54,15 +66,15 @@ function createViewshedToolbox(app, manager, name, tools) {
         active: false,
         background: false,
         disabled: !(app.maps.activeMap instanceof CesiumMap),
-        callback() {
+        async callback() {
           if (this.active) {
             if (this.background && manager.currentViewshed.value) {
               manager.editViewshed(manager.currentViewshed.value);
             } else {
               manager.stop();
             }
-          } else {
-            manager.createViewshed(tool.name);
+          } else if (tool) {
+            await manager.createViewshed(tool.name);
           }
         },
       }),
@@ -76,7 +88,7 @@ function createViewshedToolbox(app, manager, name, tools) {
         active: false,
         background: false,
         disabled: !(app.maps.activeMap instanceof CesiumMap),
-        callback() {
+        async callback() {
           if (this.active) {
             if (this.background && manager.currentViewshed.value) {
               manager.editViewshed(manager.currentViewshed.value);
@@ -85,17 +97,17 @@ function createViewshedToolbox(app, manager, name, tools) {
             }
           } else {
             const toolName = this.tools[this.currentIndex].name;
-            manager.createViewshed(toolName);
+            await manager.createViewshed(toolName);
           }
         },
-        selected(newIndex) {
+        async selected(newIndex: number) {
           if (newIndex !== this.currentIndex) {
             this.currentIndex = newIndex;
           }
           const toolName = this.tools[this.currentIndex].name;
-          manager.createViewshed(toolName);
+          await manager.createViewshed(toolName);
         },
-        tools: tools.flatMap(parseTool),
+        tools: tools.flatMap((t) => parseTool(t as ViewshedTypes)),
       }),
     };
 
@@ -103,8 +115,10 @@ function createViewshedToolbox(app, manager, name, tools) {
       manager.currentViewshed,
       (currentViewshed) => {
         if (currentViewshed) {
-          toolbox.action.currentIndex = toolbox.action.tools.findIndex(
-            (tool) => tool.name === currentViewshed.type,
+          (toolbox as SelectToolboxComponentOptions).action.currentIndex = (
+            toolbox as SelectToolboxComponentOptions
+          ).action.tools.findIndex(
+            (tool) => (tool.name as ViewshedTypes) === currentViewshed.type,
           );
         }
       },
@@ -133,24 +147,29 @@ function createViewshedToolbox(app, manager, name, tools) {
   });
 
   return {
-    destroy() {
+    toolbox,
+    destroy(): void {
       viewshedModeWatcher();
       currentViewshedWatcher?.();
       mapChangedListener();
     },
-    toolbox,
   };
 }
 
 /**
  *
- * @param {import("@vcmap/ui").VcsUiApp} app The VcsUiApp instance
- * @param {import("../viewshedManager.js").ViewshedManager} manager The viewshed manager.
- * @param {string} name Name of toolbox action and owner of toolbox component
- * @param {Array<string>} tools The tools to be available in the toolbox
- * @returns {function():void} Function to remove toolbox component.
+ * @param app The VcsUiApp instance
+ * @param manager The viewshed manager.
+ * @param name Name of toolbox action and owner of toolbox component
+ * @param tools The tools to be available in the toolbox
+ * @returns Function to remove toolbox component.
  */
-export default function addToolButtons(app, manager, name, tools) {
+export default function addToolButtons(
+  app: VcsUiApp,
+  manager: ViewshedManager,
+  name: string,
+  tools: string[],
+): () => void {
   check(tools, [ofEnum(ViewshedTypes)]);
 
   const { toolbox: createToolbox, destroy: destroyCreateToolbox } =

package/src/util/{windowHelper.js → windowHelper.ts}

@@ -1,41 +1,40 @@
 import { ref, watch } from 'vue';
+import type {
+  CollectionComponentClass,
+  WindowComponentOptions,
+  VcsUiApp,
+} from '@vcmap/ui';
 import { WindowSlot, makeEditorCollectionComponentClass } from '@vcmap/ui';
 import ViewshedWindow from '../ViewshedWindow.vue';
 import { name } from '../../package.json';
+import type Viewshed from '../viewshed.js';
 import { ViewshedTypes } from '../viewshed.js';
+import type { ViewshedManager } from '../viewshedManager.js';
 import { ViewshedPluginModes } from '../viewshedManager.js';
 
-export const ViewshedIcons = {
+export const viewshedIcons = {
   [ViewshedTypes.CONE]: '$vcsViewshed',
   [ViewshedTypes.THREESIXTY]: '$vcsViewshedCone',
 };
 
 /**
- * @typedef {Object} ViewshedWindow
- * @property {function():void} destroy Destroys watchers and removes window.
- * @property {function():void} toggleWindow Toggles window. Only opens window when manager has current viewshed.
+ * @param manager The viewshed manager.
+ * @param app The VcsUiApp instance
+ * @param collectionComponent The collection component of the category.
+ * @returns The destroy function.
  */
-
-/**
- *
- * @param {import("../viewshedManager.js").ViewshedManager} manager The viewshed manager.
- * @param {import("@vcmap/ui").VcsUiApp} app The VcsUiApp instance
- * @param {import("@vcmap/ui").CollectionComponent} collectionComponent The collection component of the category.
- * @returns {ViewshedWindow} Viewshed window api.
- */
-export function setupViewshedWindow(manager, app, collectionComponent) {
-  /**
-   * @type {import("vue").Ref<undefined | string | string[]>}
-   */
-  const headerTitle = ref();
+export function setupViewshedWindow(
+  manager: ViewshedManager,
+  app: VcsUiApp,
+  collectionComponent: CollectionComponentClass<Viewshed>,
+): { destroy: () => void } {
+  const headerTitle = ref<string | string[]>('');
   const headerIcon = ref();
   const windowId = `${collectionComponent.id}-editor`;
 
-  const editor = {
+  const editor: WindowComponentOptions = {
     component: ViewshedWindow,
-    provides: {
-      manager,
-    },
+    provides: { manager },
     state: {
       headerTitle,
       headerIcon,
@@ -49,17 +48,19 @@ export function setupViewshedWindow(manager, app, collectionComponent) {
       ...editor,
       props: {
         selection: collectionComponent.selection,
-        getViewshed: () => collectionComponent.collection.getByKey(item.name),
+        getViewshed: (): Viewshed | undefined =>
+          collectionComponent.collection.getByKey(item.name),
       },
     }),
   });
 
-  function updateHeader() {
+  function updateHeader(): void {
     if (manager.currentViewshed.value) {
-      headerIcon.value = ViewshedIcons[manager.currentViewshed.value.type];
+      headerIcon.value = viewshedIcons[manager.currentViewshed.value.type];
 
       if (manager.currentIsPersisted.value) {
-        headerTitle.value = manager.currentViewshed.value.properties.title;
+        headerTitle.value = manager.currentViewshed.value.properties
+          .title as string;
       } else if (manager.mode.value === ViewshedPluginModes.CREATE) {
         headerTitle.value = `viewshed.create.${manager.currentViewshed.value.type}`;
       } else {
@@ -71,7 +72,7 @@ export function setupViewshedWindow(manager, app, collectionComponent) {
     }
   }
 
-  function updateWindow() {
+  function updateWindow(): void {
     updateHeader();
     if (
       manager.currentViewshed.value &&
@@ -115,7 +116,7 @@ export function setupViewshedWindow(manager, app, collectionComponent) {
   });
 
   return {
-    destroy() {
+    destroy(): void {
       app.windowManager.remove(windowId);
       viewshedListener();
       viewshedModeListener();