@vcmap/ui 6.2.0-rc.1 → 6.2.0-rc.2

package/plugins/@vcmap-show-case/panorama-inspector/src/index.js

@@ -0,0 +1,57 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import PanoramaInspector from './PanoramaInspector.vue';
+import ShowClickInteraction from './showClickInteraction.js';
+
+export default function panoramaInspector() {
+  let destroy;
+  let clickedInteraction;
+  let removeInteraction;
+  let clickedPrimitive;
+
+  return {
+    name,
+    version,
+    mapVersion,
+    get clickedInteraction() {
+      return clickedInteraction;
+    },
+    get clickedPrimitive() {
+      return clickedPrimitive;
+    },
+    async initialize(app) {
+      const { action, destroy: destroyAction } = createToggleAction(
+        {
+          name: 'Panorama Inspector',
+        },
+        {
+          id: 'panorama-inspector',
+          state: {
+            headerTitle: 'panoramaInspector.title',
+          },
+          component: PanoramaInspector,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        name,
+      );
+      app.navbarManager.add(
+        { id: 'panorama-inspector', action },
+        name,
+        ButtonLocation.MENU,
+      );
+      clickedInteraction = new ShowClickInteraction();
+      removeInteraction =
+        app.maps.eventHandler.addPersistentInteraction(clickedInteraction);
+      destroy = destroyAction;
+    },
+    destroy() {
+      destroy?.();
+      removeInteraction?.();
+      clickedInteraction?.destroy();
+      clickedInteraction = undefined;
+      clickedPrimitive?.destroy();
+      clickedPrimitive = undefined;
+    },
+  };
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/showClickInteraction.js

@@ -0,0 +1,20 @@
+import { AbstractInteraction, EventType, VcsEvent } from '@vcmap/core';
+
+export default class ShowClickInteraction extends AbstractInteraction {
+  constructor() {
+    super(EventType.CLICK);
+
+    this.clicked = new VcsEvent();
+  }
+
+  pipe(event) {
+    if (
+      event.map.className === 'PanoramaMap' &&
+      !event.map.getCesiumWidget().scene.screenSpaceCameraController
+        .enableInputs
+    ) {
+      this.clicked.raiseEvent(event);
+    }
+    return Promise.resolve(event);
+  }
+}

package/src/actions/actionHelper.js

@@ -6,6 +6,7 @@ import {
   Extent,
   MapCollection,
   mercatorProjection,
+  PanoramaMap,
   Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
@@ -56,6 +57,64 @@ export function getActionFromOptions(options) {
   return options;
 }
 
+/**
+ * @param {import("@vcmap/core").PanoramaMap} map
+ * @param {import("../actions/actionHelper.js").VcsAction} action
+ * @returns {() => void}
+ */
+function setupDisablePanorama(map, action) {
+  const datasetListeners = new Map();
+
+  action.disabled = true;
+  const setupDataset = (dataset) => {
+    datasetListeners.get(dataset.name)?.();
+    if (dataset.active) {
+      action.disabled = false;
+    }
+
+    const listener = dataset.stateChanged.addEventListener(() => {
+      if (!dataset.active) {
+        action.disabled = ![...map.layerCollection].find(
+          (d) => d.active && d.className === 'PanoramaDatasetLayer',
+        );
+      } else if (dataset.active) {
+        action.disabled = false;
+      }
+    });
+
+    datasetListeners.set(dataset.name, () => {
+      listener();
+      action.disabled = ![...map.layerCollection].find(
+        (d) => d.active && d.className === 'PanoramaDatasetLayer',
+      );
+    });
+  };
+
+  let datasetCollectionListeners = [];
+  const setupDatasets = () => {
+    datasetCollectionListeners.forEach((cb) => cb());
+    datasetListeners.forEach((cb) => cb());
+    datasetListeners.clear();
+
+    [...map.layerCollection].forEach(setupDataset);
+
+    datasetCollectionListeners = [
+      map.layerCollection.added.addEventListener(setupDataset),
+      map.layerCollection.removed.addEventListener((removedDataset) => {
+        datasetListeners.get(removedDataset.name)?.();
+        datasetListeners.delete(removedDataset.name);
+      }),
+    ];
+  };
+  setupDatasets();
+
+  return () => {
+    datasetCollectionListeners.forEach((cb) => cb());
+    datasetListeners.forEach((cb) => cb());
+    datasetListeners.clear();
+  };
+}
+
 /**
  * @param {ActionOptions} actionOptions
  * @param {string} mapName
@@ -79,11 +138,23 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
       maps.setActiveMap(mapName);
     },
   });
-  const destroyListener = maps.mapActivated.addEventListener((map) => {
-    action.active = map?.name === mapName;
+
+  const map = maps.getByKey(mapName);
+  let datasetListener;
+  if (map instanceof PanoramaMap) {
+    datasetListener = setupDisablePanorama(map, action);
+  }
+  const destroyListener = maps.mapActivated.addEventListener((activatedMap) => {
+    action.active = activatedMap?.name === mapName;
   });
 
-  return { action, destroy: destroyListener };
+  return {
+    action,
+    destroy() {
+      datasetListener?.();
+      destroyListener();
+    },
+  };
 }
 
 /**
@@ -145,6 +216,64 @@ export function createToggleAction(
 
 export const searchComponentId = 'searchId';
 
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{action: import("vue").UnwrapRef<VcsAction>, destroy: function():void}}
+ */
+function createSearchAction(app) {
+  const windowComponent = {
+    id: searchComponentId,
+    component: SearchComponent,
+    position: { width: 440 },
+    state: { hideHeader: true },
+    slot: WindowSlot.DYNAMIC_RIGHT,
+  };
+  const action = reactive({
+    name: 'search.title',
+    icon: '$vcsSearch',
+    title: 'search.tooltip',
+    active: false,
+    background: false,
+    callback() {
+      if (this.active && !this.background) {
+        app.windowManager.remove(searchComponentId);
+        this.active = false;
+        app.search.clearSearch();
+      } else {
+        app.windowManager.add(windowComponent, vcsAppSymbol);
+      }
+    },
+  });
+  const addedListener = app.windowManager.added.addEventListener(({ id }) => {
+    if (id === searchComponentId) {
+      action.active = true;
+      action.background = false;
+    }
+  });
+  const removedListener = app.windowManager.removed.addEventListener(
+    ({ id }) => {
+      if (id === searchComponentId) {
+        if (app.search.currentResults.value.length) {
+          action.active = true;
+          action.background = true;
+        } else {
+          action.active = false;
+          action.background = false;
+          app.search.clearSearch();
+        }
+      }
+    },
+  );
+
+  return {
+    action,
+    destroy: () => {
+      addedListener();
+      removedListener();
+    },
+  };
+}
+
 /**
  * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
  * @param {import("../vcsUiApp.js").default} app
@@ -156,38 +285,21 @@ export function createSearchButtonAction(app) {
   const uiConfig = app.uiConfig.config;
 
   const determineAction = () => {
-    if (app.windowManager.has(searchComponentId)) {
-      app.windowManager.remove(searchComponentId);
-    }
     if (
       !uiConfig.hideSearch &&
       app.search.size > 0 &&
       searchAction.value === null
     ) {
-      const action = createToggleAction(
-        {
-          name: 'search.title',
-          icon: '$vcsSearch',
-          title: 'search.tooltip',
-        },
-        {
-          id: searchComponentId,
-          component: SearchComponent,
-          state: { hideHeader: true },
-          slot: WindowSlot.DYNAMIC_RIGHT,
-          position: {
-            width: 440,
-          },
-        },
-        app.windowManager,
-        vcsAppSymbol,
-      );
-      destroyAction = action.destroy;
-      searchAction.value = reactive(action.action);
+      const { action, destroy } = createSearchAction(app);
+      destroyAction = destroy;
+      searchAction.value = action;
     } else if (
       (uiConfig.hideSearch || app.search.size === 0) &&
       searchAction.value !== null
     ) {
+      if (app.windowManager.has(searchComponentId)) {
+        app.windowManager.remove(searchComponentId);
+      }
       destroyAction();
       destroyAction = () => {};
       searchAction.value = null;

package/src/application/VcsApp.vue

@@ -170,11 +170,14 @@
       OpenlayersMap: '$vcs2d',
       CesiumMap: '$vcs3d',
       ObliqueMap: '$vcsObliqueView',
+      PanoramaMap: 'mdi-image',
     };
+
     const mapBtnWeight = {
       OpenlayersMap: 3,
       CesiumMap: 2,
       ObliqueMap: 1,
+      PanoramaMap: 0,
     };
 
     const mapButtonActionDestroy = {};
@@ -322,6 +325,14 @@
           vcsAppSymbol,
         );
       }
+
+      if (
+        app.uiConfig.config.autoCloseLegend &&
+        newValue.length === 0 &&
+        app.windowManager.has(legendComponentId)
+      ) {
+        app.windowManager.remove(legendComponentId);
+      }
       currentEntryLength = newValue.length;
     });
 

package/src/application/VcsApp.vue.d.ts

@@ -398,6 +398,10 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - automatically close the legend window, if no layer has a config
+         */
+        readonly autoCloseLegend?: boolean | undefined;
         /**
          * - can be used to apply a scale factor to the overviewMap
          */

package/src/application/VcsContainer.vue.d.ts

@@ -310,6 +310,10 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - automatically close the legend window, if no layer has a config
+         */
+        readonly autoCloseLegend?: boolean | undefined;
         /**
          * - can be used to apply a scale factor to the overviewMap
          */

package/src/application/VcsNavbar.vue

@@ -14,7 +14,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
-                :overflow-count="smAndDown ? 2 : 3"
+                :overflow-count="smAndDown ? 2 : 4"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -104,6 +104,7 @@
                   :tooltip="searchAction.title"
                   :icon="searchAction.icon"
                   :active="searchAction.active"
+                  :background="searchAction.background"
                   @click.stop="searchAction.callback($event)"
                   v-bind="{ ...$attrs }"
                 />

package/src/callback/activateMapCallback.d.ts

@@ -0,0 +1,30 @@
+export default ActivateMapCallback;
+export type ActivateMapCallbackOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    mapName: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { mapName: string }} ActivateMapCallbackOptions
+ * @property {string} mapName
+ */
+/**
+ * Callback to activate a map by name using the app's map collection.
+ * @class
+ * @extends VcsCallback
+ */
+declare class ActivateMapCallback extends VcsCallback {
+    /**
+     * @param {ActivateMapCallbackOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ActivateMapCallbackOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _mapName;
+    /**
+     * @returns {ActivateMapCallbackOptions}
+     */
+    toJSON(): ActivateMapCallbackOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateMapCallback.js

@@ -0,0 +1,63 @@
+import { getLogger } from '@vcsuite/logger';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { mapName: string }} ActivateMapCallbackOptions
+ * @property {string} mapName
+ */
+
+/**
+ * Callback to activate a map by name using the app's map collection.
+ * @class
+ * @extends VcsCallback
+ */
+class ActivateMapCallback extends VcsCallback {
+  /**
+   * @param {ActivateMapCallbackOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._mapName = options.mapName;
+  }
+
+  /**
+   * Activates the map with the given name.
+   */
+  callback() {
+    if (this._mapName) {
+      this._app.maps.setActiveMap(this._mapName).catch((error) => {
+        getLogger(ActivateMapCallback.className).error(
+          `Failed to activate map "${this._mapName}":`,
+          error,
+        );
+      });
+    }
+  }
+
+  /**
+   * @returns {ActivateMapCallbackOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.mapName = this._mapName;
+    return config;
+  }
+
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ActivateMapCallback';
+  }
+}
+
+callbackClassRegistry.registerClass(
+  ActivateMapCallback.className,
+  ActivateMapCallback,
+);
+export default ActivateMapCallback;

package/src/callback/activateOverviewMapCallback.d.ts

@@ -0,0 +1,7 @@
+export default ActivateOverviewMapCallback;
+/**
+ * Callback to activate the overview map using its API.
+ */
+declare class ActivateOverviewMapCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateOverviewMapCallback.js

@@ -0,0 +1,26 @@
+import { getLogger } from '@vcsuite/logger';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * Callback to activate the overview map using its API.
+ */
+class ActivateOverviewMapCallback extends VcsCallback {
+  static get className() {
+    return 'ActivateOverviewMapCallback';
+  }
+
+  callback() {
+    this._app.overviewMap.activate().catch((error) => {
+      getLogger(ActivateOverviewMapCallback.className).error(
+        'Failed to activate overview map:',
+        error,
+      );
+    });
+  }
+}
+
+callbackClassRegistry.registerClass(
+  ActivateOverviewMapCallback.className,
+  ActivateOverviewMapCallback,
+);
+export default ActivateOverviewMapCallback;

package/src/callback/deactivateOverviewMapCallback.d.ts

@@ -0,0 +1,7 @@
+export default DeactivateOverviewMapCallback;
+/**
+ * Callback to deactivate the overview map using its API.
+ */
+declare class DeactivateOverviewMapCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/deactivateOverviewMapCallback.js

@@ -0,0 +1,20 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * Callback to deactivate the overview map using its API.
+ */
+class DeactivateOverviewMapCallback extends VcsCallback {
+  static get className() {
+    return 'DeactivateOverviewMapCallback';
+  }
+
+  callback() {
+    this._app.overviewMap.deactivate();
+  }
+}
+
+callbackClassRegistry.registerClass(
+  DeactivateOverviewMapCallback.className,
+  DeactivateOverviewMapCallback,
+);
+export default DeactivateOverviewMapCallback;

package/src/components/lists/VcsGroupedList.vue

@@ -150,9 +150,10 @@
     />
     <v-expansion-panels
       variant="accordion"
+      flat
       multiple
       v-model="localOpenedGroups"
-      class="rounded-0"
+      class="rounded-0 panels"
     >
       <vcs-expansion-panel
         v-for="(group, i) in groups"
@@ -176,4 +177,11 @@
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .panels .vcs-expansion-panel:not(:last-child) {
+    border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+  }
+  :deep(.v-list-item-title) > span {
+    font-weight: bold;
+  }
+</style>

package/src/components/lists/VcsTreeNode.vue

@@ -307,6 +307,9 @@
     &.chevron-btn {
       margin-left: 4px;
       margin-right: 8px;
+      > span > i {
+        font-size: calc(var(--v-icon-size-multiplier) * 1.25em);
+      }
     }
   }
   // remove hover shadow over button

package/src/components/plugins/AbstractWorkspaceItemCreator.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-container class="pa-0 abstract-workspace-item-creator">
+    <slot />
+    <div v-if="showFooter">
+      <v-divider class="mt-3" />
+      <div class="d-flex w-full justify-space-between px-2 pt-2 pb-1">
+        <VcsFormButton
+          v-if="showAdd && !workspaceHidden"
+          icon="$vcsComponentsPlus"
+          :disabled="disableAdd"
+          :tooltip="tooltipAdd"
+          @click="$emit('addClicked', $event)"
+        />
+        <div class="d-flex gc-2 w-100 justify-end">
+          <slot name="secondaryButton" />
+          <VcsFormButton
+            variant="filled"
+            :disabled="disableNew"
+            :tooltip="tooltipNew"
+            @click="$emit('newClicked', $event)"
+          >
+            {{ $st(newButtonTitle) }}
+          </VcsFormButton>
+          <VcsActionButtonList :actions="actions" button="VcsFormButton" />
+        </div>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script>
+  import { VContainer, VDivider } from 'vuetify/components';
+  import { computed, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Basic wrapper for all plugins interacting with MyWorkspace.
+   * Providing a footer with add and new buttons.
+   * @vue-prop {boolean} [showFooter=true] - Flag to hide the footer.
+   * @vue-prop {boolean} [showAdd=true] - Flag to show an add button in the footer. You need to handle @addClicked in a child component.
+   * @vue-prop {boolean} [disableAdd=false] - Flag to render add button disabled.
+   * @vue-prop {boolean} [tooltipAdd='components.addToMyWorkspace'] - Option to change the add button tooltip.
+   * @vue-prop {boolean} [disableNew=false] - Flag to render new button disabled.
+   * @vue-prop {boolean} [tooltipNew''] - Option to change the add a tooltip to the new button.
+   * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+   * @vue-prop {string} [newButtonTitle='components.new'] - Option to change the new button title, e.g. to 'components.apply'.
+   * @vue-event {Event} addClicked - Event fired on clicking the reset button.
+   * @vue-event {Event} newClicked - Event fired on clicking the cancel button.
+   * @vue-slot secondaryButton An optionnal named slot to add a secondary button to the footer, rendered filled on the left of the new button.
+   */
+  export default {
+    name: 'AbstractWorkspaceItemCreator',
+    components: {
+      VContainer,
+      VDivider,
+      VcsFormButton,
+      VcsActionButtonList,
+    },
+    props: {
+      showFooter: {
+        type: Boolean,
+        default: true,
+      },
+      showAdd: {
+        type: Boolean,
+        default: true,
+      },
+      disableAdd: {
+        type: Boolean,
+        default: false,
+      },
+      tooltipAdd: {
+        type: String,
+        default: 'components.addToMyWorkspace',
+      },
+      newButtonTitle: {
+        type: String,
+        default: 'components.new',
+      },
+      disableNew: {
+        type: Boolean,
+        default: false,
+      },
+      tooltipNew: {
+        type: String,
+        default: '',
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    emits: ['addClicked', 'newClicked'],
+    setup() {
+      const app = inject('vcsApp');
+      return {
+        workspaceHidden: computed(() => !!app.uiConfig.config.workspaceHidden),
+      };
+    },
+  };
+</script>
+
+<style scoped></style>