@vcmap/viewshed 3.0.3 → 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.ts

@@ -0,0 +1,183 @@
+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 type { ViewshedManager } from '../viewshedManager.js';
+import { ViewshedPluginModes } from '../viewshedManager.js';
+
+type ViewshedToolbox = {
+  toolbox: SingleToolboxComponentOptions | SelectToolboxComponentOptions;
+  destroy: () => void;
+};
+
+/**
+ *
+ * @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: VcsUiApp,
+  manager: ViewshedManager,
+  name: string,
+  tools: string[],
+): ViewshedToolbox {
+  /**
+   * @param tool The tool to create.
+   * @returns A tool object.
+   */
+  function parseTool(
+    tool: ViewshedTypes,
+  ): { name: ViewshedTypes; icon: string; title: string } | undefined {
+    if (tool === ViewshedTypes.CONE) {
+      return {
+        name: ViewshedTypes.CONE,
+        icon: viewshedIcons[ViewshedTypes.CONE],
+        title: `viewshed.create.${ViewshedTypes.CONE}`,
+      };
+    } else if (tool === ViewshedTypes.THREESIXTY) {
+      return {
+        name: ViewshedTypes.THREESIXTY,
+        icon: viewshedIcons[ViewshedTypes.THREESIXTY],
+        title: `viewshed.create.${ViewshedTypes.THREESIXTY}`,
+      };
+    } else {
+      return undefined;
+    }
+  }
+
+  let toolbox: SingleToolboxComponentOptions | SelectToolboxComponentOptions;
+  let currentViewshedWatcher: () => void;
+  if (tools.length === 1) {
+    const tool = parseTool(tools[0] as ViewshedTypes)!;
+    toolbox = {
+      type: ToolboxType.SINGLE,
+      action: reactive({
+        ...tool,
+        active: false,
+        background: false,
+        disabled: !(app.maps.activeMap instanceof CesiumMap),
+        async callback() {
+          if (this.active) {
+            if (this.background && manager.currentViewshed.value) {
+              manager.editViewshed(manager.currentViewshed.value);
+            } else {
+              manager.stop();
+            }
+          } else if (tool) {
+            await manager.createViewshed(tool.name);
+          }
+        },
+      }),
+    };
+  } else {
+    toolbox = {
+      type: ToolboxType.SELECT,
+      action: reactive({
+        name,
+        currentIndex: 0,
+        active: false,
+        background: false,
+        disabled: !(app.maps.activeMap instanceof CesiumMap),
+        async callback() {
+          if (this.active) {
+            if (this.background && manager.currentViewshed.value) {
+              manager.editViewshed(manager.currentViewshed.value);
+            } else {
+              manager.stop();
+            }
+          } else {
+            const toolName = this.tools[this.currentIndex].name;
+            await manager.createViewshed(toolName);
+          }
+        },
+        async selected(newIndex: number) {
+          if (newIndex !== this.currentIndex) {
+            this.currentIndex = newIndex;
+          }
+          const toolName = this.tools[this.currentIndex].name;
+          await manager.createViewshed(toolName);
+        },
+        tools: tools.flatMap((t) => parseTool(t as ViewshedTypes)),
+      }),
+    };
+
+    currentViewshedWatcher = watch(
+      manager.currentViewshed,
+      (currentViewshed) => {
+        if (currentViewshed) {
+          (toolbox as SelectToolboxComponentOptions).action.currentIndex = (
+            toolbox as SelectToolboxComponentOptions
+          ).action.tools.findIndex(
+            (tool) => (tool.name as ViewshedTypes) === currentViewshed.type,
+          );
+        }
+      },
+    );
+  }
+
+  const viewshedModeWatcher = watch(manager.mode, (mode) => {
+    if (mode === ViewshedPluginModes.VIEW) {
+      toolbox.action.background = true;
+      toolbox.action.active = true;
+    } else if (mode) {
+      toolbox.action.background = false;
+      toolbox.action.active = true;
+    } else {
+      toolbox.action.background = false;
+      toolbox.action.active = false;
+    }
+  });
+
+  const mapChangedListener = app.maps.mapActivated.addEventListener((map) => {
+    if (map instanceof CesiumMap) {
+      toolbox.action.disabled = false;
+    } else {
+      toolbox.action.disabled = true;
+    }
+  });
+
+  return {
+    toolbox,
+    destroy(): void {
+      viewshedModeWatcher();
+      currentViewshedWatcher?.();
+      mapChangedListener();
+    },
+  };
+}
+
+/**
+ *
+ * @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: VcsUiApp,
+  manager: ViewshedManager,
+  name: string,
+  tools: string[],
+): () => void {
+  check(tools, [ofEnum(ViewshedTypes)]);
+
+  const { toolbox: createToolbox, destroy: destroyCreateToolbox } =
+    createViewshedToolbox(app, manager, name, tools);
+  const createId = app.toolboxManager.add(createToolbox, name).id;
+
+  return () => {
+    app.toolboxManager.remove(createId);
+    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();