@vcmap/viewshed 2.0.1

package/src/index.js

@@ -0,0 +1,211 @@
+import { CesiumMap, moduleIdSymbol } from '@vcmap/core';
+import Viewshed, { ViewshedTypes } from './viewshed.js';
+import createViewshedManager, {
+  ViewshedPluginModes,
+} from './viewshedManager.js';
+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';
+
+/**
+ * @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.
+ */
+
+/**
+ * @typedef {import("./viewshed.js").ColorOptions & {tools?: Array<ViewshedTypes>}} ViewshedPluginOptions
+ */
+
+/**
+ * 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 destroy = () => {};
+
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @param {ViewshedPluginState=} state
+     * @returns {Promise<void>}
+     */
+    async initialize(vcsUiApp, state) {
+      vcsUiApp.categoryClassRegistry.registerClass(
+        this[moduleIdSymbol],
+        ViewshedCategory.className,
+        ViewshedCategory,
+      );
+      const viewshedCategoryHelper = await createCategory(vcsUiApp);
+      viewshedManager = createViewshedManager(
+        vcsUiApp,
+        config,
+        viewshedCategoryHelper,
+      );
+      const destroyButtons = addViewshedToolButtons(
+        vcsUiApp,
+        viewshedManager,
+        name,
+        config.tools || getDefaultOptions().tools,
+      );
+      const { destroy: destroyViewshedWindow } = setupViewshedWindow(
+        viewshedManager,
+        vcsUiApp,
+        viewshedCategoryHelper.collectionComponent,
+      );
+      destroy = () => {
+        destroyButtons();
+        destroyViewshedWindow();
+        viewshedCategoryHelper.destroy();
+      };
+
+      const { activeMap } = vcsUiApp.maps;
+      if (
+        state?.mode &&
+        state.currentViewshed &&
+        activeMap instanceof CesiumMap
+      ) {
+        const activeViewshed = new Viewshed(state.currentViewshed, activeMap);
+        if (state.mode === ViewshedPluginModes.VIEW) {
+          viewshedManager.viewViewshed(activeViewshed);
+        } else {
+          viewshedManager.editViewshed(activeViewshed);
+        }
+      }
+    },
+    /**
+     * 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
+      ) {
+        serial.tools = [...config.tools];
+      }
+      if (
+        config.shadowColor &&
+        config.shadowColor !== Viewshed.getDefaultOptions().shadowColor
+      ) {
+        serial.shadowColor = config.shadowColor;
+      }
+      if (
+        config.visibleColor &&
+        config.visibleColor !== Viewshed.getDefaultOptions().visibleColor
+      ) {
+        serial.visibleColor = config.visibleColor;
+      }
+      return serial;
+    },
+    /**
+     * should return the plugins state
+     * @returns {ViewshedPluginState}
+     */
+    getState() {
+      return {
+        mode: viewshedManager.mode.value,
+        currentViewshed: viewshedManager.currentViewshed.value?.toJSON(),
+      };
+    },
+    /**
+     * components for configuring the plugin and/ or custom items defined by the plugin
+     * @returns {Array<import("@vcmap/ui").PluginConfigEditor>}
+     */
+    getConfigEditors() {
+      return [{ component: ViewshedConfigEditor }];
+    },
+    destroy,
+    i18n: {
+      en: {
+        viewshed: {
+          distance: 'Distance',
+          fov: 'Field of view',
+          heading: 'Heading',
+          pitch: 'Pitch',
+          position: 'Position',
+          showPrimitive: 'Show viewpoint',
+          viewpoint: 'Viewpoint',
+          viewshed: 'Viewshed',
+          heightMode: 'Height mode',
+          relative: 'Relativ to ground',
+          absolute: 'Absolute',
+          new: 'New',
+          cancel: 'Cancel',
+          [ViewshedTypes.CONE]: 'Cone Viewshed',
+          [ViewshedTypes.THREESIXTY]: '360° Viewshed',
+          create: 'Create',
+          addToMyWorkspace: 'Add to My Workspace',
+          temporary: 'Temporary',
+          jumpToViewpoint: 'Jump to viewpoint',
+          returnToViewpoint: 'Return to previous viewpoint',
+          move: 'Move viewpoint',
+          createDescription:
+            'Click the map twice. First click places the origin, second defines the distance and direction of the viewshed.',
+          remove: 'Remove',
+          editor: {
+            general: 'General',
+            visibleColor: 'Visible color',
+            shadowColor: 'Shadow color',
+            tools: 'Tools',
+          },
+        },
+      },
+      de: {
+        viewshed: {
+          distance: 'Distanz',
+          fov: 'Sichtfeld',
+          heading: 'Ausrichtung',
+          pitch: 'Neigung',
+          position: 'Position',
+          showPrimitive: 'Viewpoint zeigen',
+          viewpoint: 'Viewpoint',
+          viewshed: 'Viewshed',
+          heightMode: 'Höhenmodus',
+          relative: 'Relativ zum Gelände',
+          absolute: 'Absolut',
+          new: 'Neu',
+          cancel: 'Abbrechen',
+          [ViewshedTypes.CONE]: 'Kegel Viewshed',
+          [ViewshedTypes.THREESIXTY]: '360° Viewshed',
+          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',
+          createDescription:
+            'Klicke zweimal in die Karte. Der erste Klick platziert den Ursprung, der zweite die Distanz und die Richtung des Viewsheds.',
+          remove: 'Entfernen',
+          editor: {
+            general: 'Generelles',
+            visibleColor: 'Sichtbarer Bereich',
+            shadowColor: 'Schatten Bereich',
+            tools: 'Werkzeuge',
+          },
+        },
+      },
+    },
+  };
+}

package/src/util/toolboxHelper.js

@@ -0,0 +1,133 @@
+import { CesiumMap } from '@vcmap/core';
+import { ToolboxType } from '@vcmap/ui';
+import { check } from '@vcsuite/check';
+import { reactive, watch } from 'vue';
+import { ViewshedTypes } from '../viewshed.js';
+import { ViewshedIcons } from './windowHelper.js';
+import { ViewshedPluginModes } from '../viewshedManager.js';
+
+/**
+ * @typedef {Object} ViewshedToolbox
+ * @property {import("@vcmap/ui/src/manager/toolbox/toolboxManager").SelectToolboxComponentOptions} toolbox
+ * @property {function():void} destroy
+ */
+
+/**
+ *
+ * @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.
+ */
+function createViewshedToolbox(app, manager, name, tools) {
+  const toolbox = {
+    type: ToolboxType.SELECT,
+    action: reactive({
+      name,
+      currentIndex: 0,
+      active: false,
+      background: false,
+      disabled: false,
+      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;
+          manager.createViewshed(toolName);
+        }
+      },
+      selected(newIndex) {
+        if (newIndex !== this.currentIndex) {
+          this.currentIndex = newIndex;
+          const toolName = this.tools[this.currentIndex].name;
+          manager.createViewshed(toolName);
+        }
+      },
+      tools: tools.flatMap((tool) => {
+        if (tool === ViewshedTypes.CONE) {
+          return {
+            name: ViewshedTypes.CONE,
+            icon: ViewshedIcons[ViewshedTypes.CONE],
+            title: `viewshed.${ViewshedTypes.CONE}`,
+          };
+        } else if (tool === ViewshedTypes.THREESIXTY) {
+          return {
+            name: ViewshedTypes.THREESIXTY,
+            icon: ViewshedIcons[ViewshedTypes.THREESIXTY],
+            title: `viewshed.${ViewshedTypes.THREESIXTY}`,
+          };
+        } else {
+          return [];
+        }
+      }),
+    }),
+  };
+
+  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 currentViewshedWatcher = watch(
+    manager.currentViewshed,
+    (currentViewshed) => {
+      if (currentViewshed) {
+        toolbox.action.currentIndex = toolbox.action.tools.findIndex(
+          (tool) => tool.name === currentViewshed.type,
+        );
+      }
+    },
+  );
+
+  const mapChangedListener = app.maps.mapActivated.addEventListener((map) => {
+    if (map instanceof CesiumMap) {
+      toolbox.action.disabled = false;
+    } else {
+      toolbox.action.disabled = true;
+      manager.stop();
+    }
+  });
+
+  return {
+    destroy() {
+      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.
+ */
+export default function addToolButtons(app, manager, name, tools) {
+  check(tools, [Object.values(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

@@ -0,0 +1,128 @@
+import { ref, watch } from 'vue';
+import { WindowSlot, makeEditorCollectionComponentClass } from '@vcmap/ui';
+import ViewshedWindow from '../ViewshedWindow.vue';
+import { name } from '../../package.json';
+import { ViewshedTypes } from '../viewshed.js';
+import { ViewshedPluginModes } from '../viewshedManager.js';
+
+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 {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();
+  const headerIcon = ref();
+  const windowId = `${collectionComponent.id}-editor`;
+
+  const editor = {
+    component: ViewshedWindow,
+    provides: {
+      manager,
+    },
+    state: {
+      headerTitle,
+      headerIcon,
+      styles: { width: '280px', height: 'auto' },
+      infoUrlCallback: app.getHelpUrlCallback('tools/viewshedTool.html'),
+    },
+  };
+
+  makeEditorCollectionComponentClass(app, collectionComponent, {
+    editor: (item) => ({
+      ...editor,
+      props: {
+        selection: collectionComponent.selection,
+        getViewshed: () => collectionComponent.collection.getByKey(item.name),
+      },
+    }),
+  });
+
+  function updateHeader() {
+    if (manager.currentViewshed.value) {
+      headerIcon.value = ViewshedIcons[manager.currentViewshed.value.type];
+
+      if (manager.currentIsPersisted.value) {
+        headerTitle.value = manager.currentViewshed.value.properties.title;
+      } else if (manager.mode.value === ViewshedPluginModes.CREATE) {
+        headerTitle.value = [
+          'viewshed.create',
+          `viewshed.${manager.currentViewshed.value.type}`,
+        ];
+      } else {
+        headerTitle.value = [
+          'viewshed.temporary',
+          `viewshed.${manager.currentViewshed.value.type}`,
+        ];
+      }
+    }
+  }
+
+  function updateWindow() {
+    updateHeader();
+    if (
+      manager.currentViewshed.value &&
+      !manager.currentIsPersisted.value &&
+      (manager.mode.value === ViewshedPluginModes.EDIT ||
+        manager.mode.value === ViewshedPluginModes.MOVE ||
+        manager.mode.value === ViewshedPluginModes.CREATE)
+    ) {
+      if (!app.windowManager.has(windowId)) {
+        app.windowManager.add(
+          {
+            ...editor,
+            id: windowId,
+            parentId: 'category-manager',
+            slot: WindowSlot.DYNAMIC_LEFT,
+          },
+          name,
+        );
+      }
+    }
+  }
+
+  const viewshedListener = watch(manager.currentViewshed, (curr) => {
+    if (curr) {
+      updateWindow();
+    }
+  });
+
+  const persistedListener = watch(manager.currentIsPersisted, (curr) => {
+    if (curr) {
+      updateHeader();
+    }
+  });
+
+  const viewshedModeListener = watch(manager.mode, () => {
+    if (!manager.mode.value) {
+      app.windowManager.remove(windowId);
+    } else {
+      updateWindow();
+    }
+  });
+
+  return {
+    destroy() {
+      app.windowManager.remove(windowId);
+      viewshedListener();
+      viewshedModeListener();
+      persistedListener();
+    },
+  };
+}