@vcmap/ui 5.0.0-rc.10

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -0,0 +1,98 @@
+import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @typedef {Object} VcsObjectContentTreeItemProperties
+ * @property {string|Object<string, string>} [title]
+ * @property {string} [icon]
+ * @property {string} [infoUrl]
+ */
+
+/**
+ * An abstract class for VcsObject based items.
+ * It handle the overriding/setting of its own values based on
+ * the VcsObjects properties bag.
+ * @class
+ * @template {VcsObjectContentTreeItemProperties} T
+ * @extends {ContentTreeItem}
+ * @abstract
+ */
+class VcsObjectContentTreeItem extends ContentTreeItem {
+  /**
+   * @type {string}
+   * @readonly
+   */
+  static get className() { return 'VcsObjectContentTreeItem'; }
+
+  /**
+   * @param {ContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    /**
+     * This object holds the properties which where configured on this item.
+     * @type {T}
+     * @protected
+     */
+    this._ownProperties = {
+      title: this.title,
+      icon: this.icon,
+      infoUrl: this.infoUrl,
+    };
+
+    /**
+     * @type {T}
+     * @private
+     */
+    this._currentObjectProperties = {};
+  }
+
+  /**
+   * Sets the VcsObjects properties on the current item.
+   * When extending this class with any other type, you must override this
+   * method to set other values defined in your type.
+   * This method is called, when the properties are set from this.setPropertiesFromObject.
+   * @param {T} properties
+   * @protected
+   */
+  _setProperties(properties) {
+    this.title = properties.title;
+    this.icon = properties.icon;
+    this.infoUrl = properties.infoUrl;
+  }
+
+  /**
+   * Sets the values on this item based on the objects properties bag.
+   * @param {import("@vcmap/core").VcsObject} object
+   */
+  setPropertiesFromObject(object) {
+    this._currentObjectProperties = object.properties;
+    const mergedProperties = { ...this._currentObjectProperties };
+    Object.entries(this._ownProperties)
+      .forEach(([key, value]) => {
+        if (value !== undefined) {
+          mergedProperties[key] = value;
+        }
+      });
+    this._setProperties(mergedProperties);
+  }
+
+  /**
+   * @returns {ContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    Object.entries(this._currentObjectProperties)
+      .forEach(([key, value]) => {
+        if (config[key] && config[key] === value && this._ownProperties[key] !== value) {
+          delete config[key];
+        }
+      });
+
+    return config;
+  }
+}
+
+contentTreeClassRegistry.registerClass(VcsObjectContentTreeItem.className, VcsObjectContentTreeItem);
+export default VcsObjectContentTreeItem;

package/src/contentTree/viewPointContentTreeItem.js

@@ -0,0 +1,107 @@
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @typedef {VcsObjectContentTreeItem.Options} ViewPointContentTreeItemOptions
+ * @property {string} viewpointName
+ */
+
+/**
+ * A viewpoint item. Sets the viewpoint on the currently active map when clicked.
+ * @extends {VcsObjectContentTreeItem<VcsObjectContentTreeItemProperties>}
+ * @class
+ */
+class ViewPointContentTreeItem extends VcsObjectContentTreeItem {
+  static get className() { return 'ViewPointContentTreeItem'; }
+
+  /**
+   * @param {ViewPointContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    options.icon = options.icon || '$vcsPoi'; // XXX _should_ this be the default?
+    super(options, app);
+
+    /**
+     * @type {string}
+     * @private
+     */
+    this._viewPointName = options.viewpointName;
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [];
+
+    this._setup();
+  }
+
+  /**
+   * @returns {import("@vcmap/core").ViewPoint}
+   */
+  get viewPoint() {
+    return this._app.viewPoints.getByKey(this._viewPointName);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+    /**
+     * Called when a viewPoint is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").ViewPoint} viewPoint
+     */
+    const resetCallback = (viewPoint) => {
+      if (viewPoint.name === this._viewPointName) {
+        this._setup();
+      }
+    };
+
+    if (!this.viewPoint) {
+      this.visible = false;
+      this._listeners.push(this._app.viewPoints.added.addEventListener(resetCallback));
+    } else {
+      this.visible = true;
+      this.setPropertiesFromObject(this.viewPoint);
+      this._listeners.push(this._app.viewPoints.added.addEventListener(resetCallback));
+      this._listeners.push(this._app.viewPoints.removed.addEventListener(resetCallback));
+    }
+  }
+
+  async clicked() {
+    if (this._app.maps.activeMap && this.viewPoint) {
+      await this._app.maps.activeMap.gotoViewPoint(this.viewPoint);
+    }
+  }
+
+  /**
+   * @returns {ViewPointContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (config.icon === '$vcsPoi') {
+      delete config.icon;
+    }
+
+    config.viewpointName = this._viewPointName;
+    return config;
+  }
+
+  destroy() {
+    this._clearListeners();
+    super.destroy();
+  }
+}
+
+export default ViewPointContentTreeItem;
+contentTreeClassRegistry.registerClass(ViewPointContentTreeItem.className, ViewPointContentTreeItem);

package/src/i18n/de.js

@@ -0,0 +1,55 @@
+const messages = {
+  navbar: {
+    maps: {
+      CesiumMap: '3D Karte aktivieren',
+      OpenlayersMap: '2D Karte aktivieren',
+      ObliqueMap: 'Schrägluftbilder aktivieren',
+    },
+    menu: {
+      tooltip: 'Menü',
+    },
+  },
+  content: {
+    title: 'Inhalte',
+    search: {
+      placeholder: 'Elemente suchen',
+    },
+    infoAction: {
+      title: 'Weitere Informationen',
+    },
+    stateAction: {
+      titleInactive: 'Deaktiviert',
+      titleActive: 'Aktiviert',
+      titleIndeterminate: 'Unbestimmbar',
+      titleLoading: 'Lädt...',
+    },
+    viewpointAction: {
+      title: 'Springe zur Ansicht',
+    },
+    styleAction: {
+      title: 'Öffne Stil Auswahl',
+    },
+    layerExtentAction: {
+      title: 'Jump to layer extent',
+    },
+  },
+  navigation: {
+    obliqueLeftTooltip: 'Schrägluftbild nach links drehen',
+    obliqueRightTooltip: 'Schrägluftbild nach rechts drehen',
+    zoomInTooltip: 'Hineinzoomen',
+    zoomOutTooltip: 'Herauszoomen',
+    pitchTooltip: 'Kamera pitch: {0}°',
+    overviewMapTooltip: 'Übersichtskarte',
+  },
+  settings: {
+    title: 'Einstellungen',
+    tooltip: 'Einstellungen',
+    languageTitle: 'Spracheinstellungen',
+    languageSelector: 'Sprache',
+  },
+  footer: {
+    title: 'Fußzeile',
+  },
+};
+
+export default messages;

package/src/i18n/en.js

@@ -0,0 +1,55 @@
+const messages = {
+  navbar: {
+    maps: {
+      CesiumMap: 'Activate 3D map',
+      OpenlayersMap: 'Activate 2D map',
+      ObliqueMap: 'Activate Oblique map',
+    },
+    menu: {
+      tooltip: 'Menu',
+    },
+  },
+  content: {
+    title: 'Content',
+    search: {
+      placeholder: 'Search elements',
+    },
+    infoAction: {
+      title: 'Info',
+    },
+    stateAction: {
+      titleInactive: 'Inactive',
+      titleActive: 'Active',
+      titleIndeterminate: 'Indetermine',
+      titleLoading: 'Loading',
+    },
+    viewpointAction: {
+      title: 'Go to viewpoint',
+    },
+    styleAction: {
+      title: 'Open Style selector',
+    },
+    layerExtentAction: {
+      title: 'Jump to layer extent',
+    },
+  },
+  navigation: {
+    obliqueLeftTooltip: 'Rotate view left',
+    obliqueRightTooltip: 'Rotate view right',
+    zoomInTooltip: 'Zoom in',
+    zoomOutTooltip: 'Zoom out',
+    pitchTooltip: 'Camera pitch: {0}°',
+    overviewMapTooltip: 'Overview Map',
+  },
+  settings: {
+    title: 'Settings',
+    tooltip: 'Settings',
+    languageTitle: 'Language settings',
+    languageSelector: 'Language',
+  },
+  footer: {
+    title: 'Footer',
+  },
+};
+
+export default messages;

package/src/i18n/i18nCollection.js

@@ -0,0 +1,138 @@
+// eslint-disable-next-line max-classes-per-file
+import { contextIdSymbol, IndexedCollection } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
+
+/**
+ * returns true if the given value is of type object and not an array.
+ * This function does not handle Maps and Sets and also returns true for these.
+ * This helper function is mainly used for the i18nCollection mergeDeep function
+ * @param {*} item
+ * @returns {boolean}
+ */
+export function isObject(item) {
+  return (!!item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * A symbol added to plugin messages added to this collection.
+ * @type {symbol}
+ */
+export const i18nPluginSymbol = Symbol('I18nPluginSymbol');
+
+/**
+ * Deep merge objects into a new Object. Can only handle stringifyable content.
+ * This will create a new deep copy of the given sources. No copy by reference.
+ * @param {...Object} sources
+ * @returns {Object}
+ */
+export function mergeDeep(...sources) {
+  return sources.reduce((prev, obj) => {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (isObject(prev[key]) && isObject(value)) { // recursive merge if both values are objects.
+        prev[key] = mergeDeep(prev[key], value);
+      } else if (isObject(prev[key])) { // do not override complex object with atomic value
+        getLogger('i18n').warning(
+          `Overwriting a complex Object I18n Key with a string value is not allowed. Value:
+          ${JSON.stringify(prev[key])}, newValue: ${JSON.stringify(obj[key])}`,
+        );
+      } else {
+        // JSON parse/stringify to create a deep copy of the to set value, so we do not pass parts
+        // of a source by reference
+        prev[key] = JSON.parse(JSON.stringify(value));
+      }
+    });
+    return prev;
+  }, {});
+}
+
+
+/**
+ * @extends {IndexedCollection<Object>}
+ */
+class I18nCollection extends IndexedCollection {
+  /**
+   * @param {function():string} getDynamicContextId - function to get the current dynamic context id
+   */
+  constructor(getDynamicContextId) {
+    super(false);
+    /**
+     * @type {function(): string}
+     * @private
+     */
+    this._getDynamicContextId = getDynamicContextId;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  add(item) {
+    if (!item[contextIdSymbol]) {
+      item[contextIdSymbol] = this._getDynamicContextId();
+    }
+    super.add(item);
+  }
+
+  /**
+   * @param {Array<Object>} configArray
+   * @param {string} contextId
+   * @returns {Promise<void>}
+   */
+  async parseItems(configArray, contextId) {
+    if (Array.isArray(configArray)) {
+      configArray.forEach((item) => {
+        item[contextIdSymbol] = contextId;
+        this.add(item);
+      });
+    }
+  }
+
+  /**
+   * @param {string} contextId
+   */
+  async removeContext(contextId) {
+    [...this]
+      .filter(item => item[contextIdSymbol] === contextId)
+      .forEach((item) => {
+        this.remove(item);
+      });
+  }
+
+  /**
+   * @param {string} contextId
+   * @returns {Array<Object>}
+   */
+  serializeContext(contextId) {
+    return [...this]
+      .filter(item => item[contextIdSymbol] === contextId)
+      .filter(item => !item[i18nPluginSymbol])
+      .map(item => JSON.parse(JSON.stringify(item)));
+  }
+
+  /**
+   * @param {string} plugin Name of the plugin
+   * @param {string} contextId
+   * @param {Object} messages
+   */
+  addPluginMessages(plugin, contextId, messages) {
+    messages[i18nPluginSymbol] = plugin;
+    this.add(messages);
+  }
+
+  /**
+   * returns a merged Message Object with the locale as a key and an Object with all the translated keys
+   * @returns {Object}
+   */
+  getMergedMessages() {
+    return mergeDeep(...this);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._getDynamicContextId = null;
+    super.destroy();
+  }
+}
+
+export default I18nCollection;