@vcmap/ui 5.0.0-rc.6

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/init.js

@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import { check, checkMaybe } from '@vcsuite/check';
+import { Context } from '@vcmap/core';
+import VcsAppComponent from './application/VcsApp.vue';
+import { vuetify } from './vuePlugins/vuetify.js';
+import { i18n } from './vuePlugins/i18n.js';
+import VcsUiApp from './vcsUiApp.js';
+
+/**
+ * creates and mounts a vcsApp
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export default async function initApp(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+  const app = new VcsUiApp();
+  new Vue({
+    vuetify,
+    i18n,
+    render: h => h(VcsAppComponent, {
+      props: {
+        appId: app.id,
+      },
+    }),
+  }).$mount(mountTarget);
+
+  if (configUrl) {
+    const config = await fetch(configUrl)
+      .then(response => response.json());
+    const context = new Context(config);
+    await app.addContext(context);
+  }
+  return app;
+}

package/src/lang/de.js

@@ -0,0 +1,60 @@
+const messages = {
+  general: {
+    save: 'Save',
+    reset: 'Reset',
+  },
+  search: {
+    title: 'Suche',
+    placeholder: 'Search for Street, Address, Landmark, POI',
+  },
+  oblique: {
+    title: 'Schrägansicht',
+    south: 'Süd',
+    west: 'West',
+    east: 'Ost',
+    north: 'Nord',
+  },
+  'action-content': {
+    'camera-flight': 'Camera Flight {index} in one line',
+    interpolation: 'Interpolation',
+    'total-flight-duration': 'Total flight duration',
+    'circular-flight-path': 'Circular flight path',
+    'show-flight-path': 'Show flight path',
+    'flight-viewpoint': 'Flight viewpoint',
+    'viewpoint-step': 'Viewpoint step {index}',
+  },
+  'layer-tree': {
+    title: 'Inhalte / Umgebung',
+    search: {
+      placeholder: 'Element, Ansicht...',
+    },
+  },
+  components: {
+    title: 'Components',
+  },
+  tools: {
+    title: 'Werkzeuge',
+  },
+  'poi-view': {
+    title: 'POI & Attributes',
+  },
+  'endless-list': {
+    'load-more': 'Weitere Einträge laden',
+    'amount-loaded': '{loaded} von {total} Einträge ',
+  },
+  'context-menu': {
+    regular: {
+      'zoom-in': 'Zoom in',
+      'zoom-out': 'Zoom out',
+      'rotate-90-cw': 'Rotate 90° CW',
+      'rotate-90-ccw': 'Rotate 90° CCW',
+      'pedestrian-mode': 'Predestrian mode',
+      'reset-view': 'Reset view',
+      paste: 'Paste',
+      'view-coordinates': 'View coordinates',
+      'copy-coordinates': 'Copy coordinates',
+    },
+  },
+};
+
+export default messages;

package/src/lang/en.js

@@ -0,0 +1,53 @@
+const messages = {
+  general: {
+    save: 'Save',
+    reset: 'Reset',
+  },
+  search: {
+    title: 'Suche',
+    placeholder: 'Search for Street, Address, Landmark, POI',
+  },
+  oblique: {
+    title: 'Schrägansicht',
+    south: 'Süd',
+    west: 'West',
+    east: 'Ost',
+    north: 'Nord',
+  },
+  'action-content': {
+    'camera-flight': 'Camera Flight {index} in one line',
+    interpolation: 'Interpolation',
+    'total-flight-duration': 'Total flight duration',
+    'circular-flight-path': 'Circular flight path',
+    'show-flight-path': 'Show flight path',
+    'flight-viewpoint': 'Flight viewpoint',
+    'viewpoint-step': 'Viewpoint step {index}',
+  },
+  'layer-tree': {
+    title: 'Inhalte / Umgebung',
+    search: {
+      placeholder: 'Element, Ansicht...',
+    },
+  },
+  components: {
+    title: 'Components',
+  },
+  tools: {
+    title: 'Werkzeuge',
+  },
+  contextMenu: {
+    regular: {
+      'zoom-in': 'Zoom in',
+      'zoom-out': 'Zoom out',
+      'rotate-90-cw': 'Rotate 90° CW',
+      'rotate-90-ccw': 'Rotate 90° CCW',
+      'pedestrian-mode': 'Predestrian mode',
+      'reset-view': 'Reset view',
+      paste: 'Paste',
+      'view-coordinates': 'View coordinates',
+      'copy-coordinates': 'Copy coordinates',
+    },
+  },
+};
+
+export default messages;

package/src/manager/buttonManager.js

@@ -0,0 +1,203 @@
+import { reactive } from '@vue/composition-api';
+import { VcsEvent } from '@vcmap/core';
+import { v4 as uuidv4 } from 'uuid';
+import { check, checkMaybe } from '@vcsuite/check';
+import { vcsAppSymbol } from '../pluginHelper.js';
+
+/**
+ * sorts by owner and optionally plugin order
+ * @param {ButtonComponent} a
+ * @param {ButtonComponent} b
+ * @param {string[]} [order] order of owners to sort by
+ * @returns {number}
+ */
+function sortByOwner(a, b, order = []) {
+  const sorted = [vcsAppSymbol, ...order];
+  return sorted.indexOf(b.owner) -
+    sorted.indexOf(a.owner);
+}
+
+/**
+ * filters actions by button location and returns actions (optionally sorted)
+ * @param {Array<ButtonComponent>} buttonComponents
+ * @param {ButtonLocation} location Button render position
+ * @param {string[]} [order] optional order to sort by (plugin names)
+ * @param {function(a: ButtonComponent, b: ButtonComponent, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
+ * @returns {Array<VcsAction>}
+ */
+export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
+  return buttonComponents
+    .filter(b => b.location === location)
+    .sort((a, b) => compareFn(a, b, order))
+    .map(b => b.action);
+}
+
+/**
+ * Possible render positions of buttons in navbar from left to right
+ * @enum
+ */
+export const ButtonLocation = {
+  MAP: 0,
+  CONTENT: 1,
+  TOOL: 2,
+  PROJECT: 3,
+  MENU: 4,
+};
+
+/**
+ * @typedef ButtonComponentOptions
+ * @property {string} [id] Optional ID, If not provided a uuid will be generated.
+ * @property {ButtonLocation} location Button render position
+ * @property {VcsAction} action Action performed by button.
+ */
+
+/**
+ * @typedef ButtonComponent
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner
+ * @property {ButtonLocation} location
+ * @property {VcsAction} action
+ */
+
+/**
+ * @class ButtonManager
+ * @description Manages a set of Map Buttons
+ * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
+ */
+export default class ButtonManager {
+  constructor() {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    this.added = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    this.removed = new VcsEvent();
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    this.componentIds = reactive([]);
+
+    /**
+     * @type {Map<string, ButtonComponent>}
+     * @private
+     */
+    this._buttonComponents = new Map();
+  }
+
+
+  /**
+   * @param {string} id
+   * @returns {ButtonComponent}
+   */
+  get(id) {
+    if (this.has(id)) {
+      return this._buttonComponents.get(id);
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return this._buttonComponents.has(id);
+  }
+
+  /**
+   * removes a button, Component will not be rendered anymore and will be destroyed. Add ButtonComponent again
+   * to show the component again
+   * @param {string} id
+   */
+  remove(id) {
+    const buttonComponent = this._buttonComponents.get(id);
+    if (buttonComponent) {
+      const index = this.componentIds.indexOf(id);
+      this.componentIds.splice(index, 1);
+      this._buttonComponents.delete(id);
+      this.removed.raiseEvent(buttonComponent);
+    }
+  }
+
+  /**
+   * adds a buttonComponent
+   * @param {ButtonComponentOptions} buttonComponentOptions
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @throws {Error} if a buttonComponent with the same ID has already been added
+   * @returns {ButtonComponent}
+   */
+  add(buttonComponentOptions, owner) {
+    checkMaybe(buttonComponentOptions.id, String);
+    check(buttonComponentOptions.location, Object.values(ButtonLocation));
+    check(buttonComponentOptions.action, {
+      name: String,
+      title: [undefined, String],
+      icon: [undefined, String],
+      callback: Function,
+      active: [undefined, Boolean],
+    });
+    check(owner, [String, vcsAppSymbol]);
+
+    if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
+      throw new Error(`A button with id ${buttonComponentOptions.id} has already been registered.`);
+    }
+    const id = buttonComponentOptions.id || uuidv4();
+
+    /**
+     * @type {ButtonComponent}
+     */
+    const buttonComponent = {
+      get id() {
+        return id;
+      },
+      get owner() {
+        return owner;
+      },
+      get location() {
+        return buttonComponentOptions.location;
+      },
+      get action() {
+        return reactive(buttonComponentOptions.action);
+      },
+    };
+
+    this._buttonComponents.set(id, buttonComponent);
+    this.componentIds.push(id);
+    this.added.raiseEvent(buttonComponent);
+    return buttonComponent;
+  }
+
+  /**
+   * removes all buttonComponents of a specific owner and fires removed Events
+   * @param {string|vcsAppSymbol} owner
+   */
+  removeOwner(owner) {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => {
+      if (owner === this.get(id).owner) {
+        this.remove(id);
+      }
+    });
+  }
+
+  /**
+   * removes all buttonComponents and fires removed Events
+   */
+  clear() {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => { this.remove(id); });
+  }
+
+  /**
+   * destroys the ButtonManager;
+   */
+  destroy() {
+    this.added.destroy();
+    this.removed.destroy();
+    this.componentIds.splice(0);
+    this._buttonComponents.clear();
+  }
+}

package/src/manager/toolbox/ToolboxManager.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-toolbar
+    dense
+    class="vcs-toolbox toolbar__secondary rounded-b mx-auto v-sheet"
+    :style="{ maxWidth: `${getWidth()}px` }"
+  >
+    <v-toolbar-items class="w-full">
+      <div class="d-flex align-center justify-space-between w-full">
+        <span
+          v-for="group of groups"
+          :key="group.id"
+        >
+          <component
+            v-if="group.type === 'customComponent'"
+            :is="group.component"
+            :icon="'$vcsObjectAttribute'"
+            :value="group.active"
+            @click.native="group.active = !group.active"
+            :group="group"
+          />
+          <Button
+            v-if="group.type === 'toggleButton'"
+            :group="group"
+            :icon="'$vcsObjectAttribute'"
+            :value="group.active"
+            @click.native="group.active = !group.active"
+          />
+          <ToolboxSingleSelectButton
+            v-if="toolboxGroupVisible(group) && group.type === 'singleSelectButton'"
+            :group="group"
+            @selected="id => selectSingleSelectOption(id)"
+            @set-open="({ id, open }) => setGroupOpen({ id, open })"
+          />
+          <ToolboxMultiSelectButton
+            v-if="toolboxGroupVisible(group) && group.type === 'multiSelectButton'"
+            :group="group"
+            @selected="id => selectMultiSlectOption(id)"
+            @set-open="({ id, open }) => setGroupOpen({ id, open })"
+          />
+        </span>
+      </div>
+    </v-toolbar-items>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+  .toolbar__secondary {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    &.v-toolbar {
+      ::v-deep .v-toolbar__content {
+        padding: 0;
+      }
+    }
+
+    &.theme--light.v-toolbar.v-sheet {
+      background-color: #ffffffda;
+    }
+  }
+</style>
+
+<script>
+
+  import { inject } from '@vue/composition-api';
+  import { VcsButton } from '@vcsuite/ui-components';
+
+  import ToolboxSingleSelectButton from './ToolboxSingleSelectButton.vue';
+  import ToolboxMultiSelectButton from './ToolboxMultiSelectButton.vue';
+
+  export default {
+    name: 'VcsToolbox',
+    props: {
+      width: {
+        type: Number,
+        default: 600,
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const { toolboxManager } = app;
+      const { state: { groups } } = toolboxManager;
+      const getWidth = () => toolboxManager.getNumberOfUsedSlots() * 75;
+      const toolboxGroupVisible = value => value &&
+        value.options &&
+        value.options.length;
+      const selectSingleSelectOption = (id) => {
+        toolboxManager.bringToTop(id);
+      };
+      const selectMultiSlectOption = (id) => {
+        toolboxManager.selectOption(id);
+      };
+      const setGroupOpen = ({ id, open }) => {
+        toolboxManager.setGroupOpen(id, open);
+      };
+
+      return {
+        groups,
+        getWidth,
+        selectSingleSelectOption,
+        selectMultiSlectOption,
+        setGroupOpen,
+        toolboxGroupVisible,
+      };
+    },
+    components: {
+      ToolboxSingleSelectButton,
+      ToolboxMultiSelectButton,
+      VcsButton,
+    },
+  };
+</script>