@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.3

package/src/components/section/VcsFormSection.vue

@@ -64,6 +64,7 @@
    * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
+   * @vue-prop {boolean} [startHelpOpen=false] - If help text starts open.
    * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
   export default {
@@ -104,6 +105,10 @@
         type: String,
         default: undefined,
       },
+      startHelpOpen: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { slots }) {
       const open = ref(props.startOpen);
@@ -116,7 +121,7 @@
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
-        active: false,
+        active: props.startHelpOpen,
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;
@@ -128,7 +133,7 @@
        */
       const actions = computed(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
-          return [helpAction, ...props.headerActions];
+          return [...props.headerActions, helpAction];
         }
         return props.headerActions;
       });

package/src/components/section/VcsFormSection.vue.d.ts

@@ -28,6 +28,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    startHelpOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     open: import("vue").Ref<boolean>;
     showContent: import("vue").ComputedRef<boolean>;
@@ -64,6 +68,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    startHelpOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     disabled: boolean;
     headerActions: unknown[];
@@ -72,5 +80,6 @@ declare const _default: import("vue").DefineComponent<{
     helpText: string;
     expandable: boolean;
     startOpen: boolean;
+    startHelpOpen: boolean;
 }, {}>;
 export default _default;

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts

@@ -218,7 +218,7 @@ declare const _default: import("vue").DefineComponent<{
         getPrimitiveOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitiveOptions<import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType> | undefined;
         getPrimitive: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitive | null;
         getModel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesModelOptions | null;
-        renderAs: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => "geometry" | "model" | "primitive";
+        renderAs: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => "geometry" | "primitive" | "model";
         setVcsMeta: (vcsMeta: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta) => void;
         setValues: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions) => void;
         getValues: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;

package/src/contentTree/LayerTree.vue

@@ -20,7 +20,8 @@
   import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
-  const openStateMapSymbol = Symbol('openStateMap');
+  /** The open state Symbol of the ContentTree */
+  export const openStateMapSymbol = Symbol('openStateMap');
   /**
    * @description
    * Implements Treeview and shows content tree

package/src/contentTree/LayerTree.vue.d.ts

@@ -1,3 +1,5 @@
+/** The open state Symbol of the ContentTree */
+export const openStateMapSymbol: unique symbol;
 declare const _default: import("vue").DefineComponent<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -3,6 +3,7 @@
  * @returns {import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>}
  */
 export function createContentTreeCollection(app: import("@src/vcsUiApp.js").default): import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>;
+export const defaultContentTreeComponentId: "Content";
 export default ContentTreeCollection;
 export type ParentTreeViewItem = {
     treeViewItem?: import("./contentTreeItem.js").TreeViewItem | undefined;

package/src/contentTree/contentTreeCollection.js

@@ -20,6 +20,8 @@ import { ButtonLocation } from '../manager/navbarManager.js';
 const subTreeOpenStateSymbol = Symbol('SubTreeOpenState');
 const subTreeItemWeight = Symbol('SubTreeItemWeight');
 
+export const defaultContentTreeComponentId = 'Content';
+
 /**
  * @typedef {Object} ParentTreeViewItem
  * @property {import("./contentTreeItem.js").TreeViewItem} [treeViewItem]
@@ -77,7 +79,9 @@ class ContentTreeCollection extends IndexedCollection {
         contentTreeActiveOnStartup?.value &&
         contentTreeActiveOnStartup[moduleIdSymbol] !== this._app.dynamicModuleId
       ) {
-        const action = this._app.navbarManager.get('Content')?.action;
+        const action = this._app.navbarManager.get(
+          defaultContentTreeComponentId,
+        )?.action;
         if (action && !action.active) {
           action.callback();
         }
@@ -119,7 +123,7 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._defaultSubtreeItem = new SubContentTreeItem(
       {
-        name: 'Content',
+        name: defaultContentTreeComponentId,
         icon: '$vcsLayers',
         title: 'content.title',
         tooltip: 'content.title',
@@ -198,7 +202,7 @@ class ContentTreeCollection extends IndexedCollection {
       'contentTreeActiveOnStartup',
     );
     if (
-      id === 'Content' &&
+      id === defaultContentTreeComponentId &&
       contentTreeActiveOnStartup?.value &&
       contentTreeActiveOnStartup[moduleIdSymbol] !== this._app.dynamicModuleId
     ) {

package/src/contentTree/contentTreeItem.js

@@ -422,9 +422,11 @@ class ContentTreeItem {
       (a) => a[actionWeightSymbol] > weight,
     );
     if (insertIndex > -1) {
-      this._actions.value.splice(insertIndex, 0, action);
+      const newActions = [...this._actions.value];
+      newActions.splice(insertIndex, 0, action);
+      this._actions.value = newActions;
     } else {
-      this._actions.value.push(action);
+      this._actions.value = [...this._actions.value, action];
     }
   }
 

package/src/contentTree/groupContentTreeItem.js

@@ -33,11 +33,13 @@ class GroupContentTreeItem extends ContentTreeItem {
       () => {
         const children = this._children.value;
         this.visible = children.some((c) => c.visible);
-        if (children.every((c) => c.state === StateActionState.NONE)) {
+        if (
+          children.every((c) => c.state === StateActionState.NONE || !c.visible)
+        ) {
           this.state = StateActionState.NONE;
         } else {
           const childrenWithState = children.filter(
-            (c) => c.state !== StateActionState.NONE,
+            (c) => c.visible && c.state !== StateActionState.NONE,
           );
           if (
             childrenWithState.every((c) => c.state === StateActionState.ACTIVE)
@@ -54,7 +56,7 @@ class GroupContentTreeItem extends ContentTreeItem {
           }
         }
       },
-      { deep: true },
+      { deep: true, immediate: true },
     );
   }
 

package/src/featureInfo/ClusterFeatureComponent.vue

@@ -0,0 +1,58 @@
+<script setup>
+  import { ref, shallowRef, inject, onUnmounted } from 'vue';
+  import VcsGroupedList from '../components/lists/VcsGroupedList.vue';
+
+  const props = defineProps({
+    /** @type {import("../components/lists/VcsGroupedList.vue").VcsGroupedListItem} */
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    /** @type {import("../components/lists/VcsGroupedList.vue").VcsListGroup} */
+    groups: {
+      type: Array,
+      default: () => [],
+    },
+  });
+
+  const app = inject('vcsApp');
+  const open = ref(true);
+  const selected = shallowRef([]);
+
+  const selectionListener = app.featureInfo.featureChanged.addEventListener(
+    (f) => {
+      if (f === null) {
+        selected.value = [];
+      } else {
+        const item = props.items.find((i) => i.name === f.getId());
+        if (item) {
+          selected.value = [item];
+        }
+      }
+    },
+  );
+
+  onUnmounted(() => {
+    selectionListener();
+  });
+</script>
+
+<template>
+  <div>
+    <template v-if="items.length > 0">
+      <vcs-grouped-list
+        v-if="open"
+        :items="items"
+        :groups="groups"
+        v-model="selected"
+        selectable
+        single-select
+        searchable
+        open-all
+      />
+    </template>
+    <p v-else>{{ $t('featureInfo.cluster.empty') }}</p>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/featureInfo/ClusterFeatureComponent.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/featureInfo/abstractFeatureInfoView.js

@@ -1,7 +1,6 @@
-import { VcsObject } from '@vcmap/core';
+import { renderTemplate, VcsObject } from '@vcmap/core';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { defaultTagOptions } from '../components/tables/VcsTable.vue';
-import { renderTemplate } from '../components/form-output/markdownHelper.js';
 
 /**
  * @typedef {Object} FeatureInfoProps

package/src/featureInfo/featureInfo.d.ts

@@ -1,3 +1,10 @@
+/**
+ *
+ * @param {import("ol/style/Style.js").default?} style
+ * @param {import("@vcmap-cesium/engine").Color} fillColor
+ * @returns {import("ol/style/Style.js").default}
+ */
+export function getHighlightStyleFromStyle(style: import("ol/style/Style.js").default | null, fillColor: import("@vcmap-cesium/engine").Color): import("ol/style/Style.js").default;
 /**
  * @param {FeatureType} feature
  * @param {import("@vcmap/core").Layer} layer
@@ -5,6 +12,14 @@
  * @returns {import("ol/style/Style.js").default|import("@vcmap/core").VectorStyleItem}
  */
 export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/core").Layer, defaultFillColor: string): import("ol/style/Style.js").default | import("@vcmap/core").VectorStyleItem;
+/**
+ * @param {import("ol").Feature} clusterFeature
+ * @param {import("@vcmap/core").VectorClusterGroup} clusterGroup
+ * @param {import("ol/style/Style.js").default} clusterStyle
+ * @param {string} defaultFillColor
+ * @returns {import("ol/style/Style.js").default}
+ */
+export function getClusterHighlightStyle(clusterFeature: import("ol").Feature, clusterGroup: import("@vcmap/core").VectorClusterGroup, clusterStyle: import("ol/style/Style.js").default, defaultFillColor: string): import("ol/style/Style.js").default;
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {FeatureInfoSession}
@@ -69,7 +84,12 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      */
     private _windowId;
     /**
-     * @type {VcsEvent<FeatureType>}
+     * @type {string|null}
+     * @private
+     */
+    private _clusterWindowId;
+    /**
+     * @type {VcsEvent<FeatureType|null>}
      * @private
      */
     private _featureChanged;
@@ -83,6 +103,21 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * @private
      */
     private _selectedFeatureId;
+    /**
+     * @type {VcsEvent<import("ol").Feature|null>}
+     * @private
+     */
+    private _clusterFeatureChanged;
+    /**
+     * @type {import("ol").Feature|null}
+     * @private
+     */
+    private _selectedClusterFeature;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    private _selectedClusterFeatureId;
     /**
      * @type {Array<function():void>}
      * @private
@@ -96,6 +131,8 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      */
     private _scratchLayer;
     /**
+     * Emitted whenever a feature is selected or cleared.
+     * Does not reflect cluster feature changes!
      * @type {VcsEvent<null|FeatureType>}
      */
     get featureChanged(): VcsEvent<FeatureType | null>;
@@ -107,11 +144,29 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * @type {null|string}
      */
     get selectedFeatureId(): string | null;
+    /**
+     * Emitted whenever a cluster feature is selected or cleared.
+     * @type {VcsEvent<null|import("ol").Feature>}
+     */
+    get clusterFeatureChanged(): VcsEvent<Feature<import("ol/geom.js").Geometry> | null>;
+    /**
+     * @type {null|import("ol").Feature}
+     */
+    get selectedClusterFeature(): Feature<import("ol/geom.js").Geometry> | null;
+    /**
+     * @type {null|string}
+     */
+    get selectedClusterFeatureId(): string | null;
     /**
      * The window id of the current features FeatureInfoView window
      * @type {string|null}
      */
     get windowId(): string | null;
+    /**
+     * The window id of the current cluster feature window
+     * @type {string|null}
+     */
+    get clusterWindowId(): string | null;
     /**
      * @private
      */
@@ -136,11 +191,42 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * @returns {Promise<void>}
      */
     selectFeature(feature: FeatureType, position?: import("ol/coordinate.js").Coordinate | undefined, windowPosition?: import("ol/coordinate.js").Coordinate | undefined, featureInfoView?: AbstractFeatureInfoView | undefined): Promise<void>;
+    /**
+     * Selecting a cluster feature opens a window listing the features belonging to the cluster feature.
+     * To be listed the feature must meet the following criteria: a) the feature must be part of a layer, b) said layer must be managed in
+     * the same VcsApp as provided to the FeatureInfo on construction. if not providing a feature info view, then c) said layer must have a featureInfo property set on
+     * its properties bag and d) said featureInfo property must provide the name of a FeatureInfoView present on this FeatureInfos
+     * collection.
+     * The cluster feature will be cloned, highlighted and added on an internal scratch layer to ensure availability until deselection.
+     * The original cluster feature will be hidden until deselection.
+     * @param {import("ol").Feature} clusterFeature
+     * @returns {Promise<void>}
+     */
+    selectClusterFeature(clusterFeature: import("ol").Feature): Promise<void>;
     /**
      * Clears the current feature. remove window, highlighting and provided feature.
      * @private
      */
     private _clearInternal;
+    /**
+     * Clears the current cluster feature. remove window, highlighting and provided cluster feature.
+     * @private
+     */
+    private _clearClusterInternal;
+    /**
+     * Deselecting feature clears highlighting and closes FeatureInfoView. fires feature changed with null
+     */
+    clearFeature(): void;
+    /**
+     * Deselecting and removing cluster feature. Closing cluster window and fires cluster feature changed with null
+     */
+    clearCluster(): void;
+    /**
+     * Clears selection by deselecting current feature and cluster and closing all related windows.
+     * Fires feature changed and cluster feature changed events with null.
+     */
+    clearSelection(): void;
 }
 import { VcsEvent } from '@vcmap/core';
 import { Collection } from '@vcmap/core';
+import { Feature } from 'ol';