@vcmap/ui 5.0.0-rc.10

package/src/contentTree/layerContentTreeItem.js

@@ -0,0 +1,235 @@
+import { ViewPoint } from '@vcmap/core';
+import { reactive } from '@vue/composition-api';
+import { StateActionState } from '../actions/stateRefAction.js';
+import { createGoToViewpointAction, createModalAction } from '../actions/actionHelper.js';
+import component from '../actions/styleSelector.vue';
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
+ * @property {string} layerName
+ */
+
+/**
+ * @typedef {VcsObjectContentTreeItemProperties} LayerContentTreeItemProperties
+ * @property {Array<string>} [availableStyles]
+ * @property {string} [defaultViewpoint] - the name the default viewpoint
+ */
+
+/**
+ * @param {ContentTreeItem} item
+ * @param {VcsUiApp} app
+ * @param {string=} viewpoint
+ */
+export function setViewpointAction(item, app, viewpoint) {
+  const name = 'ViewPointAction';
+  item.removeAction(name);
+
+  if (viewpoint) {
+    const action = createGoToViewpointAction(
+      {
+        name,
+        icon: 'mdi-crosshairs-gps',
+      },
+      viewpoint,
+      app.viewPoints,
+      app.maps,
+    );
+    item.addAction(action, 2);
+  }
+}
+
+/**
+ * @param {import("@vcmap/core").Layer} layer
+ * @returns {StateActionState}
+ */
+export function getStateFromLayer(layer) {
+  if (layer.active) {
+    return StateActionState.ACTIVE;
+  } else if (layer.loading) {
+    return StateActionState.LOADING;
+  }
+  return StateActionState.INACTIVE;
+}
+
+/**
+ * A layer item. Activates/deactivates the layer when clicked.
+ * @class
+ * @extends {VcsObjectContentTreeItem<LayerContentTreeItemProperties>}
+ */
+class LayerContentTreeItem extends VcsObjectContentTreeItem {
+  /**
+   * @todo this has to be refactored, just so we can read the config as is
+   * @returns {string}
+   */
+  static get className() { return 'LayerContentTreeItem'; }
+
+  /**
+   * @param {LayerContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    this.state = StateActionState.INACTIVE;
+
+    /**
+     * @type {string}
+     * @private
+     */
+    this._layerName = options.layerName;
+
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    this._listeners = [];
+
+    this._setup();
+  }
+
+  /**
+   * @type {import("@vcmap/core").Layer}
+   * @private
+   */
+  get _layer() {
+    return this._app.layers.getByKey(this._layerName);
+  }
+
+  /**
+   * @param {Array<string>=} availableStyles
+   * @private
+   */
+  _setStyleAction(availableStyles) {
+    const name = 'StyleSelector';
+    this.removeAction(name);
+    if (Array.isArray(availableStyles)) {
+      const { action, destroy } = createModalAction(
+        {
+          name,
+          icon: '$vcsColorSwatch',
+          title: 'content.styleAction.title',
+        },
+        {
+          component,
+          props: reactive({
+            availableStyles: availableStyles.slice(),
+            layerName: this._layerName,
+          }),
+        },
+        this._app.windowManager,
+        vcsAppSymbol,
+      );
+      this.addAction(action, 4);
+      this._listeners.push(destroy);
+    }
+  }
+
+  /**
+   * @private
+   */
+  _setLayerExtentAction() {
+    const name = 'LayerExtentAction';
+    this.removeAction(name);
+    if (this._layer) {
+      const { extent } = this._layer.toJSON();
+      if (extent) {
+        const viewpoint = ViewPoint.createViewPointFromExtent(this._layer.extent);
+        const action = createGoToViewpointAction(
+          {
+            name: 'LayerExtentAction',
+            title: 'content.layerExtentAction.title',
+          },
+          viewpoint,
+          this._app.viewPoints,
+          this._app.maps,
+        );
+        this.addAction(action, 8);
+      }
+    }
+  }
+
+  /**
+   * @param {LayerContentTreeItemProperties} properties
+   * @protected
+   */
+  _setProperties(properties) {
+    super._setProperties(properties);
+
+    this._setStyleAction(properties.availableStyles);
+    setViewpointAction(this, this._app, properties.defaultViewpoint);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+    /**
+     * Called when a layer is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").Layer} layer
+     */
+    const resetHandler = (layer) => {
+      if (layer.name === this._layerName) {
+        this._setup();
+      }
+    };
+
+    if (!this._layer) {
+      this.visible = false;
+      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+    } else {
+      this.visible = this._layer.isSupported(this._app.maps.activeMap);
+      this.state = getStateFromLayer(this._layer);
+      this._setLayerExtentAction();
+      this.setPropertiesFromObject(this._layer);
+
+      this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
+      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+
+      this._listeners.push(this._layer.stateChanged.addEventListener(() => {
+        this.state = getStateFromLayer(this._layer);
+      }));
+
+      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
+        this.visible = this._layer.isSupported(this._app.maps.activeMap);
+      }));
+    }
+  }
+
+  async clicked() {
+    if (this._layer) {
+      if (this.state === StateActionState.INACTIVE) {
+        await this._layer.activate();
+      } else {
+        this._layer.deactivate();
+      }
+    }
+  }
+
+  /**
+   * @returns {LayerContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerName = this._layerName;
+    return config;
+  }
+
+  destroy() {
+    super.destroy();
+    this._clearListeners();
+  }
+}
+
+export default LayerContentTreeItem;
+contentTreeClassRegistry.registerClass(LayerContentTreeItem.className, LayerContentTreeItem);

package/src/contentTree/layerGroupContentTreeItem.js

@@ -0,0 +1,154 @@
+import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import { getStateFromLayer, setViewpointAction } from './layerContentTreeItem.js';
+import { StateActionState } from '../actions/stateRefAction.js';
+
+/**
+ * @typedef {ContentTreeItemOptions} LayerGroupContentTreeItemOptions
+ * @property {Array<string>} layerNames
+ * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
+ */
+
+/**
+ * @param {Array<import("@vcmap/core").Layer>} layers
+ * @returns {StateActionState}
+ */
+function getStateFromLayers(layers) {
+  const states = layers.map(l => getStateFromLayer(l));
+  if (states.some(s => s === StateActionState.LOADING)) {
+    return StateActionState.LOADING;
+  }
+
+  if (states.every(s => s === StateActionState.INACTIVE)) {
+    return StateActionState.INACTIVE;
+  }
+
+  if (states.every(s => s === StateActionState.ACTIVE)) {
+    return StateActionState.ACTIVE;
+  }
+  return StateActionState.INDETERMINATE;
+}
+
+/**
+ * A layer group. When clicked will try to activate all layers in the group or deactivate all layer in the group if all are active.
+ * @class
+ * @extends {ContentTreeItem}
+ */
+class LayerGroupContentTreeItem extends ContentTreeItem {
+  /**
+   * @readonly
+   * @type {string}
+   */
+  static get className() { return 'LayerGroupContentTreeItem'; }
+
+  /**
+   * @param {LayerGroupContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    this.state = StateActionState.INACTIVE;
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNames = Array.isArray(options.layerNames) ?
+      options.layerNames.slice() :
+      [];
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [];
+
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._defaultViewpoint = options.defaultViewpoint || null;
+
+    this._setup();
+  }
+
+  /**
+   * @type {Array<import("@vcmap/core").Layer>}
+   * @private
+   */
+  get _layers() {
+    return this._layerNames
+      .map(n => this._app.layers.getByKey(n))
+      .filter(l => l);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+    /**
+     * Called when a layer is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").Layer} layer
+     */
+    const resetHandler = (layer) => {
+      if (this._layerNames.includes(layer.name)) {
+        this._setup();
+      }
+    };
+    const layers = this._layers;
+
+    this.visible = layers.some(l => l.isSupported(this._app.maps.activeMap));
+    this.state = getStateFromLayers(layers);
+    setViewpointAction(this, this._app, this._defaultViewpoint);
+
+    this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
+    this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+
+    layers.forEach((layer) => {
+      this._listeners.push(layer.stateChanged.addEventListener(() => {
+        this.state = getStateFromLayers(layers);
+      }));
+    });
+
+    this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
+      this.visible = !!layers.find(l => l.isSupported(this._app.maps.activeMap));
+    }));
+  }
+
+  async clicked() {
+    const layers = this._layers;
+    const activate = layers.some(l => !(l.active || l.loading));
+    if (activate) {
+      await Promise.all(layers.map(l => l.activate()));
+    } else {
+      layers.forEach((l) => { l.deactivate(); });
+    }
+  }
+
+  /**
+   * @returns {LayerGroupContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerNames = this._layerNames.slice();
+    if (this._defaultViewpoint) {
+      config.defaultViewpoint = this._defaultViewpoint;
+    }
+    return config;
+  }
+
+  destroy() {
+    this._clearListeners();
+    super.destroy();
+  }
+}
+
+export default LayerGroupContentTreeItem;
+contentTreeClassRegistry.registerClass(LayerGroupContentTreeItem.className, LayerGroupContentTreeItem);

package/src/contentTree/nodeContentTreeItem.js

@@ -0,0 +1,37 @@
+import { watch } from '@vue/composition-api';
+import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * A group item which has _no click handler_
+ * @class
+ * @extends {ContentTreeItem}
+ */
+class NodeContentTreeItem extends ContentTreeItem {
+  /**
+   * @returns {string}
+   */
+  static get className() { return 'NodeContentTreeItem'; }
+
+  /**
+   * @param {ContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    this.clickable = false;
+
+    this._childWatcher = watch(this._children, () => {
+      const children = this._children.value;
+      this.visible = children.some(c => c.visible);
+    }, { deep: true });
+  }
+
+  destroy() {
+    this._childWatcher();
+    super.destroy();
+  }
+}
+
+export default NodeContentTreeItem;
+contentTreeClassRegistry.registerClass(NodeContentTreeItem.className, NodeContentTreeItem);

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -0,0 +1,155 @@
+import { ObliqueMap, DefaultObliqueCollection } from '@vcmap/core';
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import { setViewpointAction } from './layerContentTreeItem.js';
+import { StateActionState } from '../actions/stateRefAction.js';
+import { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @typedef {ContentTreeItemOptions} ObliqueCollectionContentTreeItemOptions
+ * @property {string} collectionName
+ */
+
+/**
+ * @typedef {VcsObjectContentTreeItemProperties} ObliqueCollectionContentTreeItemProperties
+ * @property {string|import("@vcmap/core").ViewPoint} defaultViewpoint
+ */
+
+/**
+ * @type {DefaultObliqueCollection}
+ */
+const defaultCollection = new DefaultObliqueCollection({});
+
+/**
+ * An oblique collection item. Sets/unsets the oblique collection when clicked.
+ * @extends {VcsObjectContentTreeItem<ObliqueCollectionContentTreeItemProperties>}
+ */
+class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'ObliqueCollectionContentTreeItem'; }
+
+  /**
+   * @param {ObliqueCollectionContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    this.state = StateActionState.INACTIVE;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._collectionName = options.collectionName;
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [];
+
+    this._setup();
+  }
+
+  /**
+   * @type {import("@vcmap/core").ObliqueCollection}
+   * @private
+   */
+  get _collection() {
+    return this._app.obliqueCollections.getByKey(this._collectionName);
+  }
+
+  /**
+   * @param {ObliqueCollectionContentTreeItemProperties} properties
+   * @protected
+   */
+  _setProperties(properties) {
+    super._setProperties(properties);
+
+    setViewpointAction(this, this._app, properties.defaultViewpoint);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+
+    /**
+     * Called when an obliqueCollection is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").ObliqueCollection} collection
+     */
+    const resetCallback = (collection) => {
+      if (collection.name === this._collectionName) {
+        this._setup();
+      }
+    };
+
+    if (!this._collection) {
+      this.visible = false;
+      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+    } else {
+      const map = this._app.maps.activeMap;
+      if (map instanceof ObliqueMap) {
+        this.visible = true;
+        this.state = map.collection === this._collection ?
+          StateActionState.ACTIVE :
+          StateActionState.INACTIVE;
+        this._listeners.push(map.collectionChanged.addEventListener(() => {
+          this.state = map.collection === this._collection ?
+            StateActionState.ACTIVE :
+            StateActionState.INACTIVE;
+        }));
+      } else {
+        this.visible = false;
+      }
+
+      this.setPropertiesFromObject(this._collection);
+      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
+        this._setup();
+      }));
+
+      this._listeners.push(this._app.obliqueCollections.removed.addEventListener(resetCallback));
+      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+    }
+  }
+
+  async clicked() {
+    if (this.visible && this._collection && this._app.maps.activeMap instanceof ObliqueMap) {
+      const map = /** @type {import("@vcmap/core").Oblique} */ (this._app.maps.activeMap);
+      const vp = await map.getViewPoint();
+      if (this.state === StateActionState.INACTIVE) {
+        this.state = StateActionState.LOADING;
+        await map.setCollection(this._collection, vp);
+      } else if (this.state === StateActionState.ACTIVE) {
+        this.state = StateActionState.INACTIVE;
+        await map.setCollection(defaultCollection, vp);
+      }
+    }
+  }
+
+  /**
+   * @returns {ObliqueCollectionContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.collectionName = this._collectionName;
+    return config;
+  }
+
+  destroy() {
+    this._clearListeners();
+    super.destroy();
+  }
+}
+
+export default ObliqueCollectionContentTreeItem;
+contentTreeClassRegistry.registerClass(ObliqueCollectionContentTreeItem.className, ObliqueCollectionContentTreeItem);

package/src/contentTree/subContentTreeItem.js

@@ -0,0 +1,42 @@
+import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @type {symbol}
+ */
+export const subTreeSymbol = Symbol('SubTree');
+
+/**
+ * A sub tree item. Subtrees are rendered in their own (not the main content tree).
+ * They will receive their own toggle button in the nav bar.
+ * Only toplevel items can be content tree items (with a name which does not have a .)
+ * @class
+ * @extends {ContentTreeItem}
+ */
+class SubContentTreeItem extends ContentTreeItem {
+  static get className() { return 'SubContentTreeItem'; }
+
+  /**
+   * @param {ContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    if (!this.name || this.name.split('.').length > 1) {
+      throw new Error(`Sub trees may only be defined on top level. Tree ${this.name} is nested or undefined`);
+    }
+    this.clickable = false;
+  }
+
+  /**
+   * @returns {TreeViewItem}
+   */
+  getTreeViewItem() {
+    const treeViewItem = super.getTreeViewItem();
+    treeViewItem[subTreeSymbol] = true;
+    return treeViewItem;
+  }
+}
+
+export default SubContentTreeItem;
+contentTreeClassRegistry.registerClass(SubContentTreeItem.className, SubContentTreeItem);