@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/featureInfo/tableFeatureInfoView.js

@@ -0,0 +1,120 @@
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import VcsTable from '../components/tables/VcsTable.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} TableFeatureInfoViewOptions
+ * @property {number} [itemsPerPage=10] - default has to be one of itemsPerPageArray
+ * @property {number[]} [itemsPerPageArray=[5, 10, 15]]
+ * @property {boolean} [showSearchbar]
+ * @property {string} [searchbarPlaceholder]
+ */
+
+/**
+ * @typedef {FeatureInfoProps} TableFeatureInfoViewProps
+ * @property {number} [itemsPerPage=10]
+ * @property {number[]} [itemsPerPageArray=[5, 10, 15]]
+ * @property {boolean} [showGroupBtn]
+ * @property {boolean} [showSearchbar]
+ * @property {string} [searchbarPlaceholder]
+ */
+
+/**
+ * @class
+ * @description A table view for feature attributes
+ * @extends {AbstractFeatureInfoView}
+ */
+class TableFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'TableFeatureInfoView';
+  }
+
+  /** @returns {TableFeatureInfoViewOptions} */
+  static getDefaultOptions() {
+    return {
+      itemsPerPageArray: [5, 10, 15],
+      itemsPerPage: 10,
+      showSearchbar: true,
+    };
+  }
+
+  /**
+   * @param {TableFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, VcsTable);
+    const defaultOptions = TableFeatureInfoView.getDefaultOptions();
+    /**
+     * @type {number[]}
+     */
+    this.itemsPerPageArray =
+      options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
+
+    const itemsPerPage = options.itemsPerPage || defaultOptions.itemsPerPage;
+    /**
+     * @type {number}
+     */
+    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage)
+      ? itemsPerPage
+      : this.itemsPerPageArray[0];
+    /**
+     * @type {boolean}
+     */
+    this.showSearchbar = options.showSearchbar || defaultOptions.showSearchbar;
+    /**
+     * @type {string}
+     */
+    this.searchbarPlaceholder = options.searchbarPlaceholder;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {TableFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      itemsPerPage: this.itemsPerPage,
+      itemsPerPageArray: this.itemsPerPageArray,
+      showSearchbar: this.showSearchbar,
+      searchbarPlaceholder: this.searchbarPlaceholder,
+      headers: [
+        { text: 'components.vcsTable.key', value: 'key', width: '128px' },
+        { text: 'components.vcsTable.value', value: 'value', width: '192px' },
+      ],
+    };
+  }
+
+  /**
+   * @returns {TableFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    const defaultOptions = TableFeatureInfoView.getDefaultOptions();
+    if (
+      this.itemsPerPageArray.length !==
+        defaultOptions.itemsPerPageArray.length ||
+      this.itemsPerPageArray.some(
+        (e, idx) => e !== defaultOptions.itemsPerPageArray[idx],
+      )
+    ) {
+      config.itemsPerPageArray = this.itemsPerPageArray;
+    }
+    if (this.itemsPerPage !== defaultOptions.itemsPerPage) {
+      config.itemsPerPage = this.itemsPerPage;
+    }
+    if (this.showSearchbar !== defaultOptions.showSearchbar) {
+      config.showSearchbar = this.showSearchbar;
+    }
+    if (this.searchbarPlaceholder) {
+      config.searchbarPlaceholder = this.searchbarPlaceholder;
+    }
+    return config;
+  }
+}
+
+export default TableFeatureInfoView;

package/src/i18n/de.js

@@ -0,0 +1,195 @@
+const messages = {
+  navbar: {
+    maps: {
+      CesiumMap: '3D-Karte aktivieren',
+      OpenlayersMap: '2D-Karte aktivieren',
+      ObliqueMap: 'Schrägluftbildkarte aktivieren',
+    },
+    menu: {
+      tooltip: 'Menü',
+    },
+    share: {
+      tooltip: 'Aktuellen Kartenausschnitt teilen',
+    },
+  },
+  content: {
+    title: 'Inhalte',
+    empty: 'Aktuell sind keine Einträge verfügbar.',
+    search: {
+      placeholder: 'Elemente suchen',
+    },
+    infoAction: {
+      title: 'Weitere Informationen',
+    },
+    viewpointAction: {
+      title: 'Zur Ansicht springen',
+    },
+    styleAction: {
+      title: 'Stilauswahl öffnen',
+    },
+    layerExtentAction: {
+      name: 'Auf Ebene zoomen',
+      title: 'Auf Ebenenausdehnung zoomen',
+    },
+  },
+  navigation: {
+    obliqueLeftTooltip: 'Ansicht nach links drehen',
+    obliqueRightTooltip: 'Ansicht nach rechts drehen',
+    zoomInTooltip: 'Hineinzoomen',
+    zoomOutTooltip: 'Herauszoomen',
+    pitchTooltip: 'Kameraneigung: {0}°',
+    overviewMapTooltip: 'Übersichtskarte',
+    homeButton: 'Zur Startansicht springen',
+  },
+  categoryManager: {
+    title: 'Mein Arbeitsbereich',
+    tooltip: 'Mein Arbeitsbereich',
+  },
+  collectionManager: {
+    more: 'Weitere anzeigen...',
+    empty: 'Es gibt noch keine Einträge.',
+  },
+  components: {
+    pin: 'Fenster andocken',
+    close: 'Fenster schließen',
+    apply: 'Anwenden',
+    cancel: 'Abbrechen',
+    vcsFormSection: {
+      help: 'Hilfe anzeigen',
+    },
+    vcsTable: {
+      key: 'Name',
+      value: 'Wert',
+    },
+    vcsDataTable: {
+      searchbarPlaceholder: 'Name, Wert, ...',
+      itemsPerPage: 'pro Seite',
+      ofItems: 'von',
+      nextPage: 'Nächste Seite',
+      formerPage: 'Vorherige Seite',
+      noDataPlaceholder: 'Keine Daten verfügbar',
+      noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
+    },
+    style: {
+      fill: 'Füllung',
+      stroke: 'Linie',
+      reset: 'Zurücksetzen',
+      lineWidth: 'Linienbreite',
+      type: 'Typ',
+      points: 'Points',
+      radius: 'Radius',
+      radius2: 'Radius2',
+      angle: 'Winkel',
+      rotation: 'Rotation',
+      scale: 'Skalierung',
+      opacity: 'Deckkraft',
+      image: 'Symbol',
+      icon: 'Icon',
+      presets: 'Vorlagen',
+      shape: 'Form',
+      circle: 'Kreis',
+      square: 'Quadrat',
+      rectangle: 'Rechteck',
+      triangle: 'Dreieck',
+      star: 'Stern',
+      cross: 'Kreuz',
+      x: 'X',
+      custom: 'Benutzerdefiniert',
+      bold: 'Fett',
+      italic: 'Kursiv',
+      text: 'Text',
+      enterText: 'Text hier eingeben',
+      offset: 'Versatz',
+    },
+    vectorProperties: {
+      header: 'Vektor Eigenschaften',
+      altitudeMode: 'Höhenmodus',
+      clampToGround: 'Auf Gelände legen',
+      absolute: 'Absolut',
+      relativeToGround: 'Relativ zum Gelände',
+      groundLevel: 'Geländehöhe',
+      classificationType: 'Klassifizierung',
+      none: 'Keine',
+      both: 'Beide',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Gelände',
+      heightAboveGround: 'Höhe über Gelände',
+      allowPicking: 'Auswahl erlauben',
+      scaleByDistance: 'Distanzskalierung',
+      eyeOffset: 'Blick Versatz',
+      storeys: 'Stockwerke',
+      storeyHeights: 'Stockwerkshöhe(n)',
+      aboveGround: 'Über Grund',
+      belowGround: 'Unter Grund',
+      modelUrl: 'Modell URL',
+      modelHeading: 'Modell Ausrichtung',
+      modelPitch: 'Modell Neigung',
+      modelRoll: 'Modell Rotation',
+      baseUrl: 'Basis URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Modell Skalierung',
+    },
+    validation: {
+      allowedRange: 'Erlaubter Wertebereich',
+      notValid: 'Eingabe nicht gültig',
+      required: 'Eingabe ist erforderlich',
+    },
+  },
+  settings: {
+    title: 'Einstellungen',
+    tooltip: 'Einstellungen',
+    languageSelector: 'Sprache',
+    theme: {
+      title: 'Farbschema',
+      dark: 'Dunkel',
+      light: 'Hell',
+    },
+  },
+  help: {
+    title: 'Hilfe',
+    tooltip: 'Externe Hilfeseite in neuem Browser Tab öffnen',
+  },
+  featureInfo: {
+    activateToolTitle: 'Informationswerkzeug aktivieren',
+    deactivateToolTitle: 'Informationswerkzeug deaktivieren',
+  },
+  legend: {
+    title: 'Legende',
+    tooltip: 'Legende',
+    empty: 'Aktuell sind keine Legendeneinträge verfügbar.',
+    openInNew: 'In neuem Browser Tab öffnen',
+    defaultLabelText: 'Text',
+  },
+  search: {
+    title: 'Suche',
+    tooltip: 'Suche',
+    select: 'Suchergebnis auswählen',
+    placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
+    zoomToFeatureAction: 'Auf Ergebnis zoomen',
+    zoomToAll: 'Auf alle Ergebnisse zoomen',
+  },
+  toolbox: {
+    flight: 'Flug',
+    miscellaneous: 'Verschiedenes',
+  },
+  footer: {
+    title: 'Fußzeile',
+    attributions: {
+      title: 'Attributionen',
+      tooltip: 'Öffne Attributionsfenster',
+      empty: 'Aktuell sind keine Attributionseinträge verfügbar.',
+    },
+  },
+  notification: {
+    error: 'Fehler',
+    warning: 'Warnung',
+    information: 'Information',
+    success: 'Erfolg',
+  },
+  datePicker: {
+    today: 'Heute',
+  },
+};
+
+export default messages;

package/src/i18n/en.js

@@ -0,0 +1,195 @@
+const messages = {
+  navbar: {
+    maps: {
+      CesiumMap: 'Enable 3D map',
+      OpenlayersMap: 'Enable 2D map',
+      ObliqueMap: 'Enable oblique imagery map',
+    },
+    menu: {
+      tooltip: 'Menu',
+    },
+    share: {
+      tooltip: 'Share current view of the map',
+    },
+  },
+  content: {
+    title: 'Content',
+    empty: 'Currently there are no entries available.',
+    search: {
+      placeholder: 'Search elements',
+    },
+    infoAction: {
+      title: 'Further informationen',
+    },
+    viewpointAction: {
+      title: 'Go to viewpoint',
+    },
+    styleAction: {
+      title: 'Open style selector',
+    },
+    layerExtentAction: {
+      name: 'Zoom to extent',
+      title: 'Zoom to layer extent',
+    },
+  },
+  navigation: {
+    obliqueLeftTooltip: 'Rotate view to left',
+    obliqueRightTooltip: 'Rotate view to right',
+    zoomInTooltip: 'Zoom in',
+    zoomOutTooltip: 'Zoom out',
+    pitchTooltip: 'Camera pitch: {0}°',
+    overviewMapTooltip: 'Show overview map',
+    homeButton: 'Go to home view',
+  },
+  categoryManager: {
+    title: 'My Workspace',
+    tooltip: 'My Workspace',
+  },
+  collectionManager: {
+    more: 'Show more...',
+    empty: 'There are no entries yet.',
+  },
+  components: {
+    pin: 'Dock window',
+    close: 'Close window',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    vcsFormSection: {
+      help: 'Show help',
+    },
+    vcsTable: {
+      key: 'Name',
+      value: 'Value',
+    },
+    vcsDataTable: {
+      searchbarPlaceholder: 'Name, value, ...',
+      itemsPerPage: 'per page',
+      ofItems: 'of',
+      nextPage: 'Next page',
+      formerPage: 'Previous page',
+      noDataPlaceholder: 'No data available',
+      noResultsPlaceholder: 'No matching records found',
+    },
+    style: {
+      fill: 'Fill',
+      stroke: 'Stroke',
+      reset: 'Reset',
+      lineWidth: 'Line width',
+      type: 'Type',
+      points: 'Points',
+      radius: 'Radius',
+      radius2: 'Radius2',
+      angle: 'Angle',
+      rotation: 'Rotation',
+      scale: 'Scale',
+      opacity: 'Opacity',
+      image: 'Symbol',
+      icon: 'Icon',
+      shape: 'Shape',
+      presets: 'Presets',
+      circle: 'Circle',
+      square: 'Square',
+      rectangle: 'Rectangle',
+      triangle: 'Triangle',
+      star: 'Star',
+      cross: 'Cross',
+      x: 'X',
+      custom: 'Custom',
+      bold: 'Bold',
+      italic: 'Italic',
+      text: 'Text',
+      enterText: 'Enter text here',
+      offset: 'Offset',
+    },
+    vectorProperties: {
+      header: 'Vector properties',
+      altitudeMode: 'Altitude mode',
+      clampToGround: 'Clamp to ground',
+      absolute: 'Absolute',
+      relativeToGround: 'Relative to ground',
+      groundLevel: 'Ground level',
+      classificationType: 'Classification',
+      none: 'None',
+      both: 'Both',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Terrain',
+      heightAboveGround: 'Height above ground',
+      allowPicking: 'Allow picking',
+      scaleByDistance: 'Scale by distance',
+      eyeOffset: 'Eye offset',
+      storeys: 'Storeys',
+      storeyHeights: 'Storey height(s)',
+      aboveGround: 'Above ground',
+      belowGround: 'Below ground',
+      modelUrl: 'Model URL',
+      modelHeading: 'Model heading',
+      modelPitch: 'Model pitch',
+      modelRoll: 'Model roll',
+      baseUrl: 'Base URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Model scale',
+    },
+    validation: {
+      allowedRange: 'Allowed value range',
+      notValid: 'Input not valid',
+      required: 'Input is required',
+    },
+  },
+  settings: {
+    title: 'Settings',
+    tooltip: 'Configure settings',
+    languageSelector: 'Language',
+    theme: {
+      title: 'Color theme',
+      dark: 'Dark',
+      light: 'Light',
+    },
+  },
+  help: {
+    title: 'Help',
+    tooltip: 'Open external help page in new browser tab',
+  },
+  featureInfo: {
+    activateToolTitle: 'Enable Info Tool',
+    deactivateToolTitle: 'Disable Info Tool',
+  },
+  legend: {
+    title: 'Legend',
+    tooltip: 'Legend',
+    empty: 'Currently there are no legend entries available.',
+    openInNew: 'Open in new tab',
+    defaultLabelText: 'Text',
+  },
+  search: {
+    title: 'Search',
+    tooltip: 'Search',
+    select: 'Select result item',
+    placeholder: 'Search for address or landmark/point of interest',
+    zoomToFeatureAction: 'Zoom to result',
+    zoomToAll: 'Zoom to all',
+  },
+  toolbox: {
+    flight: 'flight',
+    miscellaneous: 'miscellaneous',
+  },
+  footer: {
+    title: 'Footer',
+    attributions: {
+      title: 'Attributions',
+      tooltip: 'Open attributions window',
+      empty: 'Currently there are no attribution entries available.',
+    },
+  },
+  notification: {
+    error: 'Error',
+    warning: 'Warning',
+    information: 'Information',
+    success: 'Success',
+  },
+  datePicker: {
+    today: 'Today',
+  },
+};
+
+export default messages;

package/src/i18n/i18nCollection.js

@@ -0,0 +1,137 @@
+import { IndexedCollection, VcsEvent } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
+import en from './en.js';
+import de from './de.js';
+
+/**
+ * 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);
+}
+
+/**
+ * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
+ * Other locales can be supported by adding corresponding mapping objects with associated locale key.
+ * @typedef {Object} I18nConfigurationItem
+ * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @property {Object} [properties]
+ * @property {Object} [de]
+ * @property {Object} [en]
+ * ...
+ */
+
+/**
+ * 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)
+      .filter(([key]) => !['name', 'properties'].includes(key))
+      .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<I18nConfigurationItem>}
+ */
+class I18nCollection extends IndexedCollection {
+  /**
+   * @param {import("@vcmap/core").OverrideCollection<VcsPlugin>} pluginCollection
+   */
+  constructor(pluginCollection) {
+    super();
+    /**
+     * VC Map default I18n Messages
+     * @type {Object}
+     * @private
+     */
+    this._defaultMessages = { name: 'default', en, de };
+    /**
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
+     * @private
+     */
+    this._pluginCollection = pluginCollection;
+
+    this._pluginI18nListeners = [
+      this._pluginCollection.added.addEventListener((plugin) => {
+        if (plugin.i18n) {
+          this.changed.raiseEvent({ name: plugin.name, ...plugin.i18n });
+        }
+      }),
+      this._pluginCollection.removed.addEventListener((plugin) => {
+        if (plugin.i18n) {
+          this.changed.raiseEvent({ name: plugin.name, ...plugin.i18n });
+        }
+      }),
+    ];
+
+    this._i18nListener = [
+      this.added.addEventListener((added) => this.changed.raiseEvent(added)),
+      this.removed.addEventListener((removed) =>
+        this.changed.raiseEvent(removed),
+      ),
+      this.moved.addEventListener((moved) => this.changed.raiseEvent(moved)),
+    ];
+
+    /**
+     * Event raised, whenever a I18nConfigurationItem is added or removed or when a plugin with i18n keys is added or removed
+     * @type {VcsEvent<I18nConfigurationItem>}
+     */
+    this.changed = new VcsEvent();
+  }
+
+  /**
+   * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
+   * Includes all available plugin messages.
+   * @returns {Object}
+   */
+  getMergedMessages() {
+    const pluginMessages = [...this._pluginCollection]
+      .map((p) => p.i18n)
+      .filter((i) => i);
+    return mergeDeep(this._defaultMessages, ...pluginMessages, ...this);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._i18nListener.forEach((cb) => cb());
+    this._pluginI18nListeners.forEach((cb) => cb());
+    this._pluginCollection = null;
+    this.changed.destroy();
+    super.destroy();
+  }
+}
+
+export default I18nCollection;