@vcmap/ui 5.0.0-rc.6

package/src/assets/logo.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="151" height="35.585" viewBox="0 0 151 35.585">
+  <g id="VCS_Logo_Color" data-name="VCS Logo Color" transform="translate(0)">
+    <path id="Path_271" data-name="Path 271" d="M245.674,76.716a3,3,0,0,1-2.116.868H213.62a3,3,0,0,0,2.116-.868l17.085-16.924,12.853,12.731A2.943,2.943,0,0,1,245.674,76.716Z" transform="translate(-180.688 -42)" fill="#00a0ba"/>
+    <path id="Path_272" data-name="Path 272" d="M199.938,38.964V68.618a2.944,2.944,0,0,0,.878,2.1L170.878,41.061a2.943,2.943,0,0,1,0-4.193A3,3,0,0,1,173,36h29.938a3,3,0,0,0-2.117.868A2.943,2.943,0,0,0,199.938,38.964Z" transform="translate(-170 -36)" fill="#409d76"/>
+    <path id="Path_273" data-name="Path 273" d="M231.848,53.792,214.764,70.717a3.014,3.014,0,0,1-4.233,0,2.948,2.948,0,0,1-.879-2.1V38.964a2.945,2.945,0,0,1,.879-2.1,3.014,3.014,0,0,1,4.233,0Z" transform="translate(-179.715 -36)" fill="#005434"/>
+    <path id="Path_274" data-name="Path 274" d="M245.674,41.061,232.821,53.792,215.736,36.868A3,3,0,0,0,213.62,36h29.938a3.005,3.005,0,0,1,2.116.868A2.943,2.943,0,0,1,245.674,41.061Z" transform="translate(-180.688 -36)" fill="#86b110"/>
+    <path id="Path_275" data-name="Path 275" d="M276.469,43.932c.18,0,.23.049.2.259l-1.849,6.874c-.442,1.7-.573,1.914-2.406,1.914-1.7,0-1.85-.2-2.325-1.914l-1.915-6.874c-.033-.211.032-.259.212-.259H270c.131,0,.147.049.214.259l1.7,6.453c.164.568.213.648.492.648.344,0,.409-.081.556-.648l1.653-6.453c.049-.211.082-.259.213-.259Z" transform="translate(-194.05 -38)" fill="#409d76"/>
+    <path id="Path_276" data-name="Path 276" d="M283.025,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,283.467,40.13Z" transform="translate(-197.219 -36.76)" fill="#409d76"/>
+    <path id="Path_277" data-name="Path 277" d="M291.515,44c.164.049.262.114.262.292v.989c0,.179-.1.259-.278.244h-1.49c-.982,0-1.277.162-1.277.875v6.226a.216.216,0,0,1-.245.243H287a.216.216,0,0,1-.245-.243V45.9c0-1.929,1.555-2.075,2.766-2.075A10.535,10.535,0,0,1,291.515,44Z" transform="translate(-198.604 -37.973)" fill="#409d76"/>
+    <path id="Path_278" data-name="Path 278" d="M295.885,40.611c.18-.049.278.049.278.227v2.27h1.62c.164,0,.262.082.262.243v1.022a.232.232,0,0,1-.262.259h-1.62v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.229-.259Z" transform="translate(-200.421 -37.159)" fill="#409d76"/>
+    <path id="Path_279" data-name="Path 279" d="M308.785,43.932a.216.216,0,0,1,.245.243v8.269c0,.211-.082.227-.245.259a19.837,19.837,0,0,1-3.65.276c-3.028,0-3.879-.47-3.879-3.859V44.175c0-.162.115-.243.278-.243h1.474c.164,0,.23.082.23.243v4.589c0,2.4.376,2.513,1.915,2.513h1.882v-7.1a.216.216,0,0,1,.245-.243Z" transform="translate(-202.158 -38)" fill="#409d76"/>
+    <path id="Path_280" data-name="Path 280" d="M316.88,49.077c-.867,0-1.261.276-1.261,1.087,0,.924.442,1.151,1.653,1.151a8.923,8.923,0,0,0,1.866-.178V49.077Zm4.239-2.593v5.642a.411.411,0,0,1-.328.47,15.409,15.409,0,0,1-3.683.357c-2.291,0-3.454-.357-3.454-2.707,0-2.059,1.1-2.578,3.11-2.578h2.374v-.844c0-.908-.541-1.3-1.851-1.3H314.6c-.2,0-.246-.049-.246-.243v-.989c0-.194.066-.227.229-.259a14.739,14.739,0,0,1,2.7-.211C320.17,43.824,321.12,44.732,321.12,46.483Z" transform="translate(-205.195 -37.973)" fill="#409d76"/>
+    <path id="Rectangle_510" data-name="Rectangle 510" d="M.325,0h1.33a.325.325,0,0,1,.325.325V12.078a.325.325,0,0,1-.325.325H.326A.326.326,0,0,1,0,12.077V.325A.325.325,0,0,1,.325,0Z" transform="translate(117.969 2.495)" fill="#409d76"/>
+    <path id="Path_281" data-name="Path 281" d="M342.55,44a.262.262,0,0,1,.245.292v.989c0,.162-.082.243-.262.243h-2.57c-1.752,0-1.98.568-1.98,2.854s.229,2.87,1.98,2.87h2.57c.18,0,.262.081.262.243v.989a.263.263,0,0,1-.245.292,17.086,17.086,0,0,1-2.587.179c-3.323,0-3.977-.909-3.977-4.572s.655-4.556,3.977-4.556A16.987,16.987,0,0,1,342.55,44Z" transform="translate(-210.667 -37.973)" fill="#409d76"/>
+    <path id="Path_282" data-name="Path 282" d="M348.821,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,349.263,40.13Z" transform="translate(-213.338 -36.76)" fill="#409d76"/>
+    <path id="Path_283" data-name="Path 283" d="M354.223,40.611c.18-.049.279.049.279.227v2.27h1.62a.228.228,0,0,1,.261.243v1.022a.232.232,0,0,1-.261.259H354.5v4.945c0,.713.212.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.23-.259Z" transform="translate(-214.714 -37.159)" fill="#409d76"/>
+    <path id="Path_284" data-name="Path 284" d="M367.2,43.932a.217.217,0,0,1,.246.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.949,17.949,0,0,1-2.766-.179.236.236,0,0,1-.213-.259v-.956c0-.178.066-.243.229-.243h2.636c1.637,0,2.029-.389,2.029-1.67v-.082a12.48,12.48,0,0,1-2.1.147c-3.028,0-3.8-1.022-3.8-4.3V44.175a.216.216,0,0,1,.245-.243h1.49a.216.216,0,0,1,.245.243v4.232c0,2.318.3,2.854,2.128,2.854a13.514,13.514,0,0,0,1.785-.1V44.175a.216.216,0,0,1,.245-.243Z" transform="translate(-216.445 -38)" fill="#409d76"/>
+    <path id="Path_285" data-name="Path 285" d="M275.307,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.261.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.212.7.9.956l2.145.778a2.183,2.183,0,0,1,1.669,2.367v.211c0,1.849-1.243,2.27-3.388,2.27-1.423,0-2.652-.1-3.191-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.175c1.1,0,1.441-.129,1.441-.7v-.162c0-.389-.2-.648-.934-.924l-2.16-.81a2.324,2.324,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.941,16.941,0,0,1,275.307,63.735Z" transform="translate(-194.276 -42.949)" fill="#005434"/>
+    <path id="Path_286" data-name="Path 286" d="M287.859,63.665a.216.216,0,0,1,.245.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.956,17.956,0,0,1-2.766-.179.236.236,0,0,1-.213-.259V74.56c0-.178.066-.243.229-.243h2.636c1.637,0,2.03-.389,2.03-1.67v-.081a12.57,12.57,0,0,1-2.1.146c-3.028,0-3.8-1.022-3.8-4.3V63.908a.216.216,0,0,1,.246-.243h1.49a.216.216,0,0,1,.245.243V68.14c0,2.318.294,2.854,2.128,2.854a13.509,13.509,0,0,0,1.784-.1V63.908a.216.216,0,0,1,.246-.243Z" transform="translate(-197.007 -42.977)" fill="#005434"/>
+    <path id="Path_287" data-name="Path 287" d="M299.154,63.735c.164.032.246.114.246.259v.956c0,.162-.082.243-.262.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.144.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.065-.259.261-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.947,16.947,0,0,1,299.154,63.735Z" transform="translate(-200.119 -42.949)" fill="#005434"/>
+    <path id="Path_288" data-name="Path 288" d="M305.925,60.343c.18-.049.279.049.279.227v2.27h1.621a.229.229,0,0,1,.262.243V64.1a.233.233,0,0,1-.262.259H306.2v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.263.263,0,0,1-.245.292,7.466,7.466,0,0,1-1.163.113c-1.277,0-2.6-.032-2.6-1.978V60.975c0-.162.082-.227.229-.259Z" transform="translate(-202.881 -42.136)" fill="#005434"/>
+    <path id="Path_289" data-name="Path 289" d="M312.99,67.463h3.748c-.016-1.751-.376-2.2-1.833-2.2C313.383,65.259,313.006,65.713,312.99,67.463Zm5.746.487v.487c0,.307-.1.437-.557.437H312.99c.049,1.718.442,2.107,2.029,2.107h2.8a.216.216,0,0,1,.245.243v1.006a.246.246,0,0,1-.23.275,20.493,20.493,0,0,1-2.93.178c-3.191,0-3.912-.907-3.912-4.555,0-3.664.72-4.573,3.912-4.573C317.982,63.556,318.7,64.432,318.736,67.95Z" transform="translate(-204.544 -42.949)" fill="#005434"/>
+    <path id="Path_290" data-name="Path 290" d="M335.8,67.134l-.033,5.221c0,.162-.066.243-.23.243h-1.489c-.164,0-.229-.081-.229-.243v-4.6c0-2.4-.376-2.513-1.8-2.513a10.087,10.087,0,0,0-1.636.129,6.5,6.5,0,0,1,.245,2.027l-.032,4.961c0,.179-.066.244-.213.244h-1.506a.217.217,0,0,1-.246-.244V67.426c0-2.091-.408-2.172-1.8-2.172h-1.391v7.1a.216.216,0,0,1-.246.243H323.7c-.164,0-.23-.081-.245-.243V64.07c0-.194.082-.227.245-.259a16.721,16.721,0,0,1,2.914-.259,7.382,7.382,0,0,1,2.815.486,9.167,9.167,0,0,1,2.75-.5C334.884,63.535,335.817,64.07,335.8,67.134Z" transform="translate(-207.598 -42.943)" fill="#005434"/>
+    <path id="Path_291" data-name="Path 291" d="M348.214,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.262.243h-3.012c-.688,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.143.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.956,16.956,0,0,1,348.214,63.735Z" transform="translate(-212.139 -42.949)" fill="#005434"/>
+  </g>
+</svg>

package/src/contentTree/LayerTree.vue

@@ -0,0 +1,40 @@
+<template>
+  <VcsTreeview
+    v-if="tree && tree.length"
+    :items="tree"
+    :open.sync="open"
+    :has-searchbar="true"
+    :searchbar-placeholder="'layer-tree.search.placeholder'"
+    item-children="visibleChildren"
+  />
+</template>
+
+
+<script>
+  import { inject } from '@vue/composition-api';
+  import { VcsTreeview } from '@vcsuite/ui-components';
+
+  /**
+   * @description
+   * Implements Treeview and shows 'vcs.vcm.widgets.legend.Legend'
+   */
+  export default {
+    name: 'VcsLayerTree',
+    components: { VcsTreeview },
+    props: {
+      windowState: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const app = inject('vcsApp');
+      const { id } = props.windowState;
+      const open = app.contentTree.getTreeOpenStateRef(id);
+      return {
+        tree: app.contentTree.getComputedVisibleTree(id),
+        open,
+      };
+    },
+  };
+</script>

package/src/contentTree/contentTreeCollection.js

@@ -0,0 +1,311 @@
+// eslint-disable-next-line max-classes-per-file
+import { IndexedCollection, makeOverrideCollection, getObjectFromClassRegistry } from '@vcmap/core';
+import { v4 as uuid } from 'uuid';
+import { computed, ref } from '@vue/composition-api';
+import ContentTreeItem from './contentTreeItem.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import SubContentTreeItem, { subTreeSymbol } from './subContentTreeItem.js';
+import LayerTree from './LayerTree.vue';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { createToggleAction } from '../actions/actionHelper.js';
+import { ButtonLocation } from '../manager/buttonManager.js';
+
+/**
+ * @type {symbol}
+ */
+const subTreeOpenStateSymbol = Symbol('SubTreeOpenState');
+
+/**
+ * @typedef {Object} ParentTreeViewItem
+ * @property {TreeViewItem} [treeViewItem]
+ * @property {Map<string, ParentTreeViewItem>} children
+ */
+
+/**
+ * @extends {IndexedCollection<ContentTreeItem>}
+ */
+class ContentTreeCollection extends IndexedCollection {
+  /**
+   * @param {VcsUiApp} app
+   */
+  constructor(app) {
+    super();
+    /**
+     * @type {VcsUiApp}
+     * @private
+     */
+    this._app = app;
+
+    const recreateTree = () => {
+      if (!this._suspendListeners) {
+        this._setTreeView();
+      }
+    };
+
+    /**
+     * A map of all item weightChanged listeners
+     * @type {Map<string, function():void>}
+     * @private
+     */
+    this._weightListeners = new Map();
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [
+      this.added.addEventListener((child) => {
+        recreateTree();
+        this._weightListeners.set(child.name, child.weightChanged.addEventListener(recreateTree));
+      }),
+      this.removed.addEventListener((child) => {
+        recreateTree();
+        if (this._weightListeners.has(child.name)) {
+          this._weightListeners.get(child.name)();
+          this._weightListeners.delete(child.name);
+        }
+      }),
+    ];
+    /**
+     * This is the default content tree.
+     * @type {SubContentTreeItem}
+     * @private
+     */
+    this._defaultSubtreeItem = new SubContentTreeItem({ name: 'Content', icon: '$vcsLayers' }, app);
+    /**
+     * @type {import("@vue/composition-api").Ref<Map<string, TreeViewItem>>}
+     * @private
+     */
+    this._subTreeViewItems = ref(new Map());
+    /**
+     * The subtree content action button destroy handlers
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._subTreeListeners = [];
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._suspendListeners = false;
+  }
+
+  /**
+   * @private
+   */
+  _clearSubTrees() {
+    this._subTreeViewItems.value.clear();
+    this._subTreeListeners.forEach((cb) => { cb(); });
+  }
+
+  /**
+   * @param {TreeViewItem} subTreeViewItem
+   * @param {WindowSlot} [slot]
+   * @returns {function():void}
+   * @private
+   */
+  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) { // TODO make configurable?
+    const id = uuid();
+    const app = this._app;
+    const { action, destroy } = createToggleAction(
+      // TODO icon & title are not reactive
+      {
+        name: subTreeViewItem.name,
+        icon: subTreeViewItem.icon,
+        title: subTreeViewItem.title,
+      },
+      {
+        component: LayerTree,
+        slot,
+        id,
+        state: {
+          headerIcon: subTreeViewItem.icon,
+          headerTitle: subTreeViewItem.title,
+        },
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    this._app.navbarManager.add({ id, action, location: ButtonLocation.CONTENT }, vcsAppSymbol);
+    this._subTreeViewItems.value.set(id, subTreeViewItem);
+    return () => {
+      app.windowManager.remove(id);
+      app.navbarManager.remove(id);
+      destroy();
+    };
+  }
+
+  /**
+   * @private
+   */
+  _setTreeView() {
+    this._clearSubTrees();
+    /** @type {Map<string, ParentTreeViewItem>} */
+    const baseTreeMap = new Map();
+    [...this._array]
+      .sort((a, b) => {
+        const depthA = a.name.split('.').length;
+        const depthB = b.name.split('.').length;
+        if (depthA === depthB) {
+          if (a.weight === b.weight) {
+            return 0;
+          }
+          return a.weight > b.weight ? -1 : 1;
+        }
+        return depthA > depthB ? 1 : -1;
+      })
+      .forEach((item) => {
+        const treeViewItem = item.getTreeViewItem();
+        const namespace = treeViewItem.name.split('.');
+        const name = namespace.pop();
+        /** @type {ParentTreeViewItem} */
+        let parentItem = { children: baseTreeMap };
+        namespace.forEach((parentName) => {
+          if (!parentItem) {
+            return;
+          }
+          parentItem = parentItem.children.get(parentName);
+        });
+
+        if (parentItem) {
+          parentItem.children.set(name, { treeViewItem, children: new Map() });
+        }
+      });
+
+    const setChildren = ({ treeViewItem, children }) => {
+      const childMaps = [...children.values()];
+      childMaps.forEach(setChildren);
+      treeViewItem.children.splice(0);
+      treeViewItem.children.push(...childMaps.map(c => c.treeViewItem));
+      return treeViewItem;
+    };
+
+    const topLevelItems = [...baseTreeMap.values()]
+      .map(setChildren);
+    const defaultSubTreeViewItem = this._defaultSubtreeItem.getTreeViewItem();
+    defaultSubTreeViewItem.children.splice(0);
+    defaultSubTreeViewItem.children.push(...topLevelItems.filter(i => !i[subTreeSymbol]));
+    const subTrees = [
+      defaultSubTreeViewItem,
+      ...topLevelItems.filter(i => i[subTreeSymbol]),
+    ];
+
+    this._subTreeListeners = subTrees.map(subTree => this._createSubtreeActionButton(subTree));
+  }
+
+  /**
+   * All ids of the currently managed subtrees. Ids are not persisted and will change if
+   * the trees get recalculated. The first ID is always the default tree. Other ids are subtree ids.
+   * Order of ids is dependent on their position in the collection and weight.
+   * @type {Array<string>}
+   * @readonly
+   */
+  get subTreeIds() {
+    return [...this._subTreeViewItems.value.keys()];
+  }
+
+  /**
+   * @param {string} id
+   * @returns {import("@vue/composition-api").ComputedRef<Array<TreeViewItem>>}
+   */
+  getComputedVisibleTree(id) {
+    return computed(() => {
+      const subTreesMap = this._subTreeViewItems.value;
+      if (subTreesMap.has(id)) {
+        return subTreesMap.get(id).visibleChildren;
+      }
+      return [];
+    });
+  }
+
+  /**
+   * @param {string} id
+   * @returns {TreeViewItem}
+   * @private
+   */
+  _getSubTree(id) {
+    const subTreesMap = this._subTreeViewItems.value;
+    return subTreesMap.get(id);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {Array<ContentTreeItem>}
+   */
+  getChildrenForSubTree(id) {
+    const subTree = this._getSubTree(id);
+    if (subTree) {
+      if (subTree === this._subTreeViewItems.value.values().next().value) {
+        const subTreeNames = [...this._subTreeViewItems.value.values()]
+          .filter(s => s !== subTree)
+          .map(s => s.name);
+        return this._array.filter(i => !subTreeNames.some(name => i.name.startsWith(name)));
+      }
+      return this._array.filter(i => i.name.startsWith(subTree.name));
+    }
+    return [];
+  }
+
+  /**
+   * @param {string} id
+   * @returns {import("@vue/composition-api").Ref<Array<string>>}
+   */
+  getTreeOpenStateRef(id) {
+    const subTree = this._getSubTree(id);
+    if (subTree) {
+      if (!subTree[subTreeOpenStateSymbol]) {
+        subTree[subTreeOpenStateSymbol] = ref(this.getChildrenForSubTree(id)
+          .filter(i => i.initOpen)
+          .map(i => i.name));
+      }
+      return subTree[subTreeOpenStateSymbol];
+    }
+    return ref([]);
+  }
+
+  destroy() {
+    this._clearSubTrees();
+    this._defaultSubtreeItem.destroy();
+    this._listeners.forEach((cb) => { cb(); });
+    this._weightListeners.forEach((cb) => { cb(); });
+    this._weightListeners.clear();
+    super.destroy();
+  }
+}
+
+export default ContentTreeCollection;
+
+/**
+ * Only used for intelisense, unconstructable
+ * @implements {import("@vcmap/core").OverrideCollection<ContentTreeItem>}
+ * @extends {ContentTreeCollection}
+ */
+// eslint-disable-next-line no-unused-vars
+class OverrideContentTreeCollection extends ContentTreeCollection {}
+
+/**
+ * @param {VcsUiApp} app
+ * @returns {OverrideContentTreeCollection}
+ */
+export function createContentTreeCollection(app) {
+  const collection = new ContentTreeCollection(app);
+
+  const overrideCollection = makeOverrideCollection(
+    collection,
+    () => app.dynamicContextId,
+    null,
+    config => getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
+    ContentTreeItem,
+  );
+
+  const originalParseItems = overrideCollection.parseItems.bind(overrideCollection);
+  overrideCollection.parseItems = async function parseItems(...args) {
+    this._suspendListeners = true;
+    await originalParseItems(...args);
+    this._suspendListeners = false;
+    this._setTreeView();
+  };
+
+  return overrideCollection;
+}