@vcmap/ui 6.1.0-rc.7 → 6.1.0

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -15,12 +15,14 @@
     v-model="localModelValue"
   >
     <template #selection="{ item, index }">
-      <span v-if="index === 0" class="text-truncate w-100">
-        {{ $st(getTitle(item.raw)) }}
-      </span>
-      <span v-if="index === 1" class="text-no-wrap">
-        (+{{ additionalItems }})
-      </span>
+      <slot name="selection" v-bind="{ item, index }">
+        <span v-if="index === 0" class="text-truncate w-100">
+          {{ $st(getTitle(item.raw)) }}
+        </span>
+        <span v-if="index === 1" class="text-no-wrap">
+          (+{{ additionalItems }})
+        </span>
+      </slot>
     </template>
 
     <template #append-inner="scope">

package/src/components/icons/+all.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color: string): import("ol/style/Icon").Options;
 export const IconIds: string[];
 export const IconNames: string[];
 export default Icons;

package/src/components/icons/+all.js

@@ -497,3 +497,17 @@ export const IconNames = Object.keys(Icons).map((name) => {
   return `$${name}`;
 });
 export default Icons;
+
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color) {
+  return {
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
+      color,
+    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    scale: 1,
+    color,
+  };
+}

package/src/components/lists/VcsActionList.vue

@@ -2,6 +2,7 @@
   <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
     <v-list-item
       v-for="(action, index) in actions"
+      :data-action-name="action.name"
       :key="`${action.name}-${index}`"
       :class="action.active ? 'text-primary' : ''"
       :disabled="action.disabled || disabled"

package/src/components/lists/VcsGroupedList.vue

@@ -142,7 +142,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="vcs-grouped-list">
     <VcsTreeviewSearchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
@@ -156,6 +156,7 @@
     >
       <vcs-expansion-panel
         v-for="(group, i) in groups"
+        :data-group-name="group.name"
         :key="i"
         :value="group.name"
         :disabled="group.disabled"

package/src/components/lists/VcsListItemComponent.vue

@@ -93,6 +93,7 @@
     :disabled="item.disabled"
     v-bind="$attrs"
     class="vcs-list-item-component"
+    :data-list-item-name="item.name"
   >
     <template #prepend="scope">
       <slot name="prepend" v-bind="scope">

package/src/components/lists/VcsTreeNode.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="vcs-tree-node" v-if="matchFilter">
+  <div
+    class="vcs-tree-node"
+    v-if="matchFilter"
+    :data-tree-item-name="item.name"
+  >
     <v-row
       no-gutters
       class="treenode flex-nowrap text-truncate"

package/src/components/lists/VcsTreeview.vue

@@ -114,7 +114,10 @@
         [() => props.items, () => props.openAll],
         () => {
           if (props.openAll) {
-            localOpenedItems.value = [...props.items.map((item) => item.name)];
+            const newItems = props.items
+              .map((item) => item.name)
+              .filter((name) => !localOpenedItems.value.includes(name));
+            localOpenedItems.value.push(...newItems);
           }
         },
         {

package/src/components/style/{MenuWrapper.vue → StyleMenuWrapper.vue}

@@ -5,6 +5,7 @@
         :model-value="!!modelValue"
         @update:modelValue="handleCheckbox"
         :disabled="disabled"
+        class="pr-1"
       />
       <v-menu
         :close-on-content-click="false"
@@ -73,7 +74,7 @@
    * @vue-prop {boolean} [disabled=false] - Disable the input
    */
   export default {
-    name: 'MenuWrapper',
+    name: 'StyleMenuWrapper',
     components: {
       VSheet,
       VMenu,

package/src/components/style/VcsFillMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-fill-menu"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
@@ -11,7 +11,7 @@
     <template #content>
       <VcsFillSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
@@ -19,7 +19,7 @@
   import { VSheet } from 'vuetify/components';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsFillSelector from './VcsFillSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -33,7 +33,7 @@
     components: {
       VSheet,
       VcsFillSelector,
-      MenuWrapper,
+      StyleMenuWrapper,
     },
     props: {
       modelValue: {

package/src/components/style/VcsImageMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-image-menu"
     :value-fallback="{
       radius: 10,
@@ -21,13 +21,13 @@
         class="pb-2"
       />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
   import { onMounted, ref, watch } from 'vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import VcsImageSelector, { drawImageStyle } from './VcsImageSelector.vue';
 
   /**
@@ -37,7 +37,7 @@
   export default {
     name: 'VcsImageMenu',
     components: {
-      MenuWrapper,
+      StyleMenuWrapper,
       VcsImageSelector,
     },
     props: {

package/src/components/style/VcsStrokeMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
     name="components.style.stroke"
@@ -18,7 +18,7 @@
     <template #content>
       <VcsStrokeSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
@@ -26,7 +26,7 @@
   import { VSheet } from 'vuetify/components';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsStrokeSelector from './VcsStrokeSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -40,7 +40,7 @@
     components: {
       VSheet,
       VcsStrokeSelector,
-      MenuWrapper,
+      StyleMenuWrapper,
     },
     props: {
       modelValue: {

package/src/components/style/VcsTextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuWrapper
+  <StyleMenuWrapper
     class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
@@ -13,14 +13,14 @@
     <template #content>
       <VcsTextSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
-  </MenuWrapper>
+  </StyleMenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsTextSelector from './VcsTextSelector.vue';
-  import MenuWrapper from './MenuWrapper.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.vue';
   import { rgbaObjectToString, useColorObject } from './composables.js';
 
   export const fallbackStyle = {
@@ -38,7 +38,7 @@
   export default {
     name: 'VcsTextMenu',
     components: {
-      MenuWrapper,
+      StyleMenuWrapper,
       VcsTextSelector,
     },
     props: {

package/src/contentTree/LayerTree.vue

@@ -16,12 +16,10 @@
 </template>
 
 <script>
-  import { inject, ref, watch } from 'vue';
+  import { inject, computed } from 'vue';
   import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
-  /** The open state Symbol of the ContentTree */
-  export const openStateMapSymbol = Symbol('openStateMap');
   /**
    * @description
    * Implements Treeview and shows content tree
@@ -37,52 +35,16 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = ref(app.contentTree.getTreeOpenState(props.windowState.id));
-      const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
-
-      function getWithVisibleChildren(item) {
-        return [
-          item.name,
-          ...(item.visibleChildren
-            ?.map((c) => getWithVisibleChildren(c))
-            ?.flat() ?? []),
-        ];
-      }
 
-      if (!app.contentTree[openStateMapSymbol]) {
-        app.contentTree[openStateMapSymbol] = new Map();
-      }
-      /**
-       * @type {Map<string, string[]>}
-       */
-      const openStateMap = app.contentTree[openStateMapSymbol];
-      // watch for new visible children, which should start init open
-      watch(
-        tree,
-        (value, oldValue) => {
-          if (openStateMap.has(app.maps.activeMap?.name)) {
-            open.value = openStateMap.get(app.maps.activeMap?.name);
-          } else {
-            const items = [...app.contentTree]
-              .filter((i) => i.initOpen && i.getTreeViewItem().visible)
-              .map(({ name }) => name);
-            const oldValues = oldValue
-              ? oldValue.map(getWithVisibleChildren).flat()
-              : [];
-            const changed = items.filter(
-              (name) => !oldValues.includes(name) && !open.value.includes(name),
-            );
-            open.value.push(...changed);
-          }
+      const open = computed({
+        get: () => app.contentTree.getTreeOpenState(props.windowState.id),
+        set: (value) => {
+          app.contentTree
+            .getTreeOpenState(props.windowState.id)
+            .splice(0, Infinity, ...value);
         },
-        { immediate: true },
-      );
-
-      watch(open, () => {
-        if (app.maps.activeMap) {
-          openStateMap.set(app.maps.activeMap.name, [...open.value]);
-        }
       });
+      const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
       return {
         tree,

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

@@ -1,5 +1,3 @@
-/** The open state Symbol of the ContentTree */
-export const openStateMapSymbol: unique symbol;
 declare const _default: import("vue").DefineComponent<{
     windowState: {
         type: ObjectConstructor;
@@ -7,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    open: import("vue").Ref<any>;
+    open: import("vue").WritableComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -78,6 +78,12 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
      * @private
      */
     private _setTreeView;
+    /**
+     * @param {ContentTreeItem} item
+     * @returns {string}
+     * @private
+     */
+    private _getSubtreeIdForItem;
     /**
      * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
      * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
@@ -107,6 +113,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
      */
     getChildrenForSubTree(id: string): Array<ContentTreeItem>;
     /**
+     * This returns a proxy to the subtrees open state. You should mutate this array in place.
      * @param {string} id
      * @returns {Array<string>}
      */

package/src/contentTree/contentTreeCollection.js

@@ -99,6 +99,10 @@ class ContentTreeCollection extends IndexedCollection {
           child.name,
           child.weightChanged.addEventListener(recreateTree),
         );
+        if (child.initOpen) {
+          const subTreeId = this._getSubtreeIdForItem(child);
+          this.getTreeOpenState(subTreeId).push(child.name);
+        }
       }),
       this.removed.addEventListener((child) => {
         recreateTree();
@@ -287,25 +291,42 @@ class ContentTreeCollection extends IndexedCollection {
         return tree.name;
       }),
     );
+
     subTrees.forEach((subTree) => {
-      if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
+      if (!this._subTreeViewItems.value.has(subTree.name)) {
         this._subTreeViewItems.value.set(subTree.name, subTree);
-        if (!this._app.uiConfig.config.hideContentTree) {
+      }
+
+      if (!this._app.uiConfig.config.hideContentTree) {
+        if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
           this._subTreeListeners.get(subTree.name)?.();
           this._subTreeListeners.set(
             subTree.name,
             this._createSubtreeActionButton(subTree),
           );
-        }
-      } else {
-        const buttonComponent = this._app.navbarManager.get(subTree.name);
-        if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
-          buttonComponent.weight = subTree[subTreeItemWeight];
+        } else {
+          const buttonComponent = this._app.navbarManager.get(subTree.name);
+          if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
+            buttonComponent.weight = subTree[subTreeItemWeight];
+          }
         }
       }
     });
   }
 
+  /**
+   * @param {ContentTreeItem} item
+   * @returns {string}
+   * @private
+   */
+  _getSubtreeIdForItem(item) {
+    const [parent] = item.name.split('.');
+    if (this._subTreeViewItems.value.has(parent)) {
+      return parent;
+    }
+    return defaultContentTreeComponentId;
+  }
+
   /**
    * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
    * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
@@ -376,6 +397,7 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
+   * This returns a proxy to the subtrees open state. You should mutate this array in place.
    * @param {string} id
    * @returns {Array<string>}
    */
@@ -383,9 +405,7 @@ class ContentTreeCollection extends IndexedCollection {
     const subTree = this._getSubTree(id);
     if (subTree) {
       if (!subTree[subTreeOpenStateSymbol]) {
-        subTree[subTreeOpenStateSymbol] = this.getChildrenForSubTree(id)
-          .filter((i) => i.initOpen)
-          .map((i) => i.name);
+        subTree[subTreeOpenStateSymbol] = [];
       }
       return subTree[subTreeOpenStateSymbol];
     }

package/src/contentTree/contentTreeItem.d.ts

@@ -99,14 +99,14 @@ declare class ContentTreeItem {
     static get className(): string;
     /**
      * @param {ContentTreeItemOptions} options
-     * @param {import("@src/vcsUiApp.js").default} app
+     * @param {import("../vcsUiApp.js").default} app
      */
-    constructor(options: ContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    constructor(options: ContentTreeItemOptions, app: import("../vcsUiApp.js").default);
     /**
      * @protected
-     * @type {import("@src/vcsUiApp.js").default}
+     * @type {import("../vcsUiApp.js").default}
      */
-    protected _app: import("@src/vcsUiApp.js").default;
+    protected _app: import("../vcsUiApp.js").default;
     /**
      * @type {import("vue").ShallowRef<Array<import("../actions/actionHelper.js").VcsAction>>}
      * @private

package/src/contentTree/contentTreeItem.js

@@ -65,12 +65,12 @@ class ContentTreeItem {
 
   /**
    * @param {ContentTreeItemOptions} options
-   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("../vcsUiApp.js").default} app
    */
   constructor(options, app) {
     /**
      * @protected
-     * @type {import("@src/vcsUiApp.js").default}
+     * @type {import("../vcsUiApp.js").default}
      */
     this._app = app;
 

package/src/contentTree/groupContentTreeItem.d.ts

@@ -12,6 +12,11 @@ export type GroupContentTreeItemOptions = import("./contentTreeItem.js").Content
  * @extends {ContentTreeItem}
  */
 declare class GroupContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {GroupContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: GroupContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
     /**
      * @type {boolean}
      * @private

package/src/contentTree/groupContentTreeItem.js

@@ -24,7 +24,7 @@ class GroupContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {GroupContentTreeItemOptions} options
    * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {

package/src/contentTree/layerContentTreeItem.js

@@ -35,7 +35,7 @@ export function setViewpointAction(item, app, viewpoint) {
     const action = createGoToViewpointAction(
       {
         name,
-        icon: 'mdi-crosshairs-gps',
+        icon: 'mdi-target',
       },
       viewpoint,
       app.viewpoints,

package/src/contentTree/nodeContentTreeItem.d.ts

@@ -1,10 +1,31 @@
 export default NodeContentTreeItem;
+export type NodeContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    disableIfChildrenDisabled?: boolean;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} NodeContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
 /**
  * A group item which has _no click handler_
  * @class
  * @extends {ContentTreeItem}
  */
 declare class NodeContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {NodeContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: NodeContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _disableIfChildrenDisabled;
     _childWatcher: import("vue").WatchStopHandle;
+    /**
+     * @returns {NodeContentTreeItemOptions}
+     */
+    toJSON(): NodeContentTreeItemOptions;
 }
 import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/nodeContentTreeItem.js

@@ -1,8 +1,14 @@
 import { watch } from 'vue';
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
 
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} NodeContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
+
 /**
  * A group item which has _no click handler_
  * @class
@@ -17,7 +23,7 @@ class NodeContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {NodeContentTreeItemOptions} options
    * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
@@ -25,16 +31,39 @@ class NodeContentTreeItem extends ContentTreeItem {
 
     this.clickable = false;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._disableIfChildrenDisabled = parseBoolean(
+      options.disableIfChildrenDisabled,
+      false,
+    );
+
     this._childWatcher = watch(
       this._children,
       () => {
         const children = this._children.value;
         this.visible = children.some((c) => c.visible);
+        if (this._disableIfChildrenDisabled) {
+          this.disabled = children.every((c) => c.disabled);
+        }
       },
-      { deep: true },
+      { deep: true, immediate: true },
     );
   }
 
+  /**
+   * @returns {NodeContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this._disableIfChildrenDisabled) {
+      config.disableIfChildrenDisabled = this._disableIfChildrenDisabled;
+    }
+    return config;
+  }
+
   destroy() {
     this._childWatcher();
     super.destroy();