@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/components/lists/VcsTreeview.vue

@@ -5,7 +5,12 @@
       :placeholder="searchbarPlaceholder"
       v-model="localSearchValue"
     />
-    <div v-for="item in items" :key="item.name" class="vcs-treeitem">
+    <div
+      v-for="item in items"
+      :key="item.name"
+      class="vcs-treeitem"
+      :class="{ 'mobile-spacing': xs }"
+    >
       <VcsTreeNode
         class="root-node"
         :item="item"
@@ -27,6 +32,7 @@
 
 <script>
   import { watch } from 'vue';
+  import { useDisplay } from 'vuetify';
   import {
     useProxiedAtomicModel,
     useProxiedComplexModel,
@@ -108,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);
           }
         },
         {
@@ -125,6 +134,8 @@
         }
       }
 
+      const { xs } = useDisplay();
+
       return {
         localSearchValue,
         localOpenedItems,
@@ -135,10 +146,14 @@
             if (item?.clicked && !item?.disabled) {
               item.clicked(event);
             }
-          } else if ((props.openOnClick ?? false) !== false) {
+          } else if (
+            (props.openOnClick ?? false) !== false &&
+            !item?.disabled
+          ) {
             itemToggled(item.name);
           }
         },
+        xs,
       };
     },
   };
@@ -152,6 +167,28 @@
   .vcs-treeitem:not(:last-child) {
     border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
   }
+  :deep(
+      .mobile-spacing
+        > .vcs-tree-node
+        > .children
+        > .vcs-tree-node
+        > .treenode
+        > .vcs-action-button-list
+        > button:not(:last-child)
+    ) {
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
+  :deep(
+      .mobile-spacing
+        > .vcs-tree-node
+        > .treenode
+        > .vcs-action-button-list
+        > button:not(:last-child)
+    ) {
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
   .root-node {
     :deep(.level-0) {
       // Root Level Entries should be 40px high

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -45,6 +45,7 @@ declare const _default: import("vue").DefineComponent<{
     forwardSlots: string[];
     itemToggled: (itemName: any) => void;
     itemClicked(item: any, event: any): void;
+    xs: import("vue").Ref<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:opened" | "update:search")[], "update:opened" | "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -30,11 +30,18 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .disabled {
+    cursor: default;
+    opacity: var(--v-disabled-opacity);
+  }
 </style>
 <template>
   <div
     class="title-parent pr-2 vcs-treeview-title w-100"
-    :class="{ 'cursor-pointer': cursorPointer }"
+    :class="{
+      'cursor-pointer': cursorPointer && !item.disabled,
+      disabled: item.disabled,
+    }"
     ref="titleParent"
   >
     <span class="w-100">

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();
@@ -212,6 +216,7 @@ class ContentTreeCollection extends IndexedCollection {
       { id, action, weight: subTreeViewItem[subTreeItemWeight] },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
+      { mobile: true, desktop: true, tablet: true },
     );
     return () => {
       app.windowManager.remove(id);
@@ -286,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>>}
@@ -375,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>}
    */
@@ -382,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/flightContentTreeItem.d.ts

@@ -1,9 +1,11 @@
 export default FlightContentTreeItem;
 export type FlightContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     flightName: string;
+    showWhenNotSupported?: boolean;
 };
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string, showWhenNotSupported?: boolean }} FlightContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 /**
  * A flight item. Allows for playing a flight from the content tree.
@@ -23,6 +25,11 @@ declare class FlightContentTreeItem extends VcsObjectContentTreeItem<any> {
      * @private
      */
     private _flightName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<Function>}
      * @private

package/src/contentTree/flightContentTreeItem.js

@@ -1,11 +1,13 @@
 import { CesiumMap } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import { reactive } from 'vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string, showWhenNotSupported?: boolean }} FlightContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -36,6 +38,15 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._flightName = options.flightName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<Function>}
      * @private
@@ -161,7 +172,12 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
         this._app.flights.added.addEventListener(resetHandler),
       );
     } else {
-      this.visible = this._app.maps.activeMap instanceof CesiumMap;
+      let isCesium = this._app.maps.activeMap instanceof CesiumMap;
+      this.visible = isCesium || this._showWhenNotSupported;
+
+      if (this._showWhenNotSupported) {
+        this.disabled = !isCesium;
+      }
       this._setupPlayer();
       this.setPropertiesFromObject(this._flight);
 
@@ -174,7 +190,11 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
 
       this._listeners.push(
         this._app.maps.mapActivated.addEventListener(() => {
-          this.visible = this._app.maps.activeMap instanceof CesiumMap;
+          isCesium = this._app.maps.activeMap instanceof CesiumMap;
+          this.visible = isCesium || this._showWhenNotSupported;
+          if (this._showWhenNotSupported) {
+            this.disabled = !isCesium;
+          }
         }),
       );
     }
@@ -186,6 +206,9 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.flightName = this._flightName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/contentTree/groupContentTreeItem.d.ts

@@ -1,14 +1,35 @@
 export default GroupContentTreeItem;
+export type GroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    disableIfChildrenDisabled?: boolean;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} GroupContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
 /**
  * A clickable group item. When clicked, every child with a state not NONE will also be clicked.
  * @class
  * @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
+     */
+    private _disableIfChildrenDisabled;
     /**
      * @type {function():void}
      * @private
      */
     private _childWatcher;
+    /**
+     * @returns {GroupContentTreeItemOptions}
+     */
+    toJSON(): GroupContentTreeItemOptions;
 }
 import ContentTreeItem from './contentTreeItem.js';