@vcmap/ui 5.0.0-rc.6

package/src/actions/actionHelper.js

@@ -0,0 +1,221 @@
+import { v4 as uuid } from 'uuid';
+import { check } from '@vcsuite/check';
+import { Collection, MapCollection, ViewPoint } from '@vcmap/core';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import { getWindowPositionOptions } from '../manager/window/windowManager.js';
+
+/**
+ * @typedef {Object} ActionOptions
+ * @property {string} name
+ * @property {string} [title]
+ * @property {string} [icon]
+ */
+
+/**
+ * @param {ActionOptions} actionOptions
+ * @param {string} mapName
+ * @param {OverrideMapCollection} maps
+ * @returns {{action: VcsAction, destroy: Function}}
+ */
+export function createMapButtonAction(actionOptions, mapName, maps) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(mapName, String);
+  check(maps, MapCollection);
+
+  const action = {
+    ...actionOptions,
+    active: false,
+    callback() {
+      maps.setActiveMap(mapName);
+    },
+  };
+  const destroyListener = maps.mapActivated.addEventListener((map) => {
+    action.active = map.name === mapName;
+  });
+
+  return { action, destroy: destroyListener };
+}
+
+/**
+ * Creates an action which will toggle the given window component (opening & closing the window). The window component must have an id set.
+ * @param {ActionOptions} actionOptions
+ * @param {WindowComponentOptions} windowComponent
+ * @param {WindowManager}  windowManager
+ * @param {string|symbol} owner
+ * @returns {{action: VcsAction, destroy: Function}}
+ */
+export function createToggleAction(actionOptions, windowComponent, windowManager, owner) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(windowComponent, { id: String });
+  check(owner, [String, vcsAppSymbol]);
+
+  const action = {
+    ...actionOptions,
+    active: windowManager.has(windowComponent.id),
+    callback() {
+      if (this.active) {
+        windowManager.remove(windowComponent.id);
+      } else {
+        return windowManager.add(windowComponent, owner);
+      }
+      return null;
+    },
+  };
+
+  const listeners = [
+    windowManager.added.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.active = true;
+      }
+    }),
+    windowManager.removed.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.active = false;
+      }
+    }),
+  ];
+
+  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  return { action, destroy };
+}
+
+/**
+ * Creates a header less window which will close if anything outside of the window is clicked. The window will open
+ * at the clicked position (the actions position) by default, unless the window component already has a position set.
+ * @param {ActionOptions} actionOptions
+ * @param {WindowComponentOptions} modalComponent
+ * @param {WindowManager}  windowManager
+ * @param {string|symbol} owner
+ * @returns {{action: VcsAction, destroy: Function}}
+ */
+export function createModalAction(actionOptions, modalComponent, windowManager, owner) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(owner, [String, vcsAppSymbol]);
+
+  const id = uuid();
+
+  const addModal = (zIndex) => {
+    const child = document.getElementById(id);
+    if (!child) {
+      const elem = document.createElement('div');
+      elem.id = id;
+      Object.assign(elem.style, {
+        position: 'absolute',
+        zIndex,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      });
+      elem.onclick = () => { windowManager.remove(id); };
+      document.body.appendChild(elem);
+    }
+  };
+
+  const removeModal = () => {
+    const child = document.getElementById(id);
+    if (child) {
+      child.parentElement.removeChild(child);
+    }
+  };
+
+  const action = {
+    ...actionOptions,
+    active: false,
+    callback(event) {
+      if (!this.active) {
+        this.active = true;
+        const { left, top, width } = event.currentTarget.getBoundingClientRect();
+        const position = getWindowPositionOptions(left + width, top);
+        const state = { ...modalComponent?.state, hideHeader: true };
+        windowManager.add({ position, ...modalComponent, id, state }, owner);
+        addModal(windowManager.componentIds.length - 2);
+      } else {
+        this.active = false;
+        windowManager.remove(id);
+      }
+      return null;
+    },
+  };
+
+  const listeners = [
+    windowManager.removed.addEventListener(({ id: windowId }) => {
+      if (windowId === id) {
+        action.active = false;
+        removeModal();
+      }
+    }),
+    removeModal,
+  ];
+
+  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  return { action, destroy };
+}
+
+/**
+ * Creates an action which opens a given link in a new tab
+ * @param {ActionOptions} actionOptions
+ * @param {string} url
+ * @returns {VcsAction}
+ */
+export function createLinkAction(actionOptions, url) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(url, String);
+
+  return {
+    ...actionOptions,
+    callback() {
+      const link = document.createElement('a');
+      link.href = url;
+      link.target = '_blank';
+      link.click();
+    },
+  };
+}
+
+/**
+ * @param {ActionOptions} actionOptions
+ * @param {string|import("@vcmap/core").ViewPoint} viewpoint
+ * @param {import("@vcmap/core").Collection<import("@vcmap/core").ViewPoint>} viewpointCollection
+ * @param {import("@vcmap/core").MapCollection} mapCollection
+ * @returns {VcsAction}
+ */
+export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCollection, mapCollection) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(viewpoint, [ViewPoint, String]);
+  check(viewpointCollection, Collection);
+  check(mapCollection, MapCollection);
+
+  return {
+    ...actionOptions,
+    async callback() {
+      let viewpointItem = viewpoint;
+      if (typeof viewpointItem === 'string') {
+        viewpointItem = viewpointCollection.getByKey(viewpoint);
+      }
+      if (viewpointItem) {
+        await mapCollection.activeMap.gotoViewPoint(viewpointItem);
+      }
+    },
+  };
+}

package/src/actions/stateRefAction.js

@@ -0,0 +1,50 @@
+import { watch } from '@vue/composition-api';
+import { check } from '@vcsuite/check';
+
+/**
+ * @enum {number}
+ */
+export const StateActionState = {
+  NONE: 0,
+  INACTIVE: 1,
+  LOADING: 2,
+  ACTIVE: 3,
+  INDETERMINATE: 4,
+};
+
+const stateIconMap = {
+  [StateActionState.INACTIVE]: '$vcsCheckbox',
+  [StateActionState.ACTIVE]: '$vcsCheckboxChecked',
+  [StateActionState.INDETERMINATE]: '$vcsCheckboxIndeterminate',
+  [StateActionState.LOADING]: '$vcsProgress',
+};
+
+/**
+ * Creates an action
+ * @param {string} name
+ * @param {import("@vue/composition-api").Ref<StateActionState>} stateRef
+ * @param {function():void} callback
+ * @returns {{ action: VcsAction, destroy: function():void }}
+ */
+export function createStateRefAction(name, stateRef, callback) {
+  check(name, String);
+  check(stateRef?.value, Object.values(StateActionState));
+  check(callback, Function);
+
+  const currentState = stateRef.value;
+  const action = {
+    name,
+    title: 'Activate', // XXX make reactive i18n key based on state
+    icon: stateIconMap[currentState],
+    callback,
+  };
+
+  const destroy = watch(stateRef, () => {
+    action.icon = stateIconMap[stateRef.value];
+  });
+
+  return {
+    action,
+    destroy,
+  };
+}

package/src/actions/styleSelector.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-sheet v-if="items" class="pa-2">
+    <VcsSelect :items="items" v-model="currentStyle" />
+    <v-list v-if="currentStyleLegend.length > 0">
+      <v-list-item
+        v-for="(entry, index) in currentStyleLegend"
+        :key="`style-legend-${index}`"
+        dense
+      >
+        <v-list-item-icon>
+          <v-chip :color="entry.color" />
+        </v-list-item-icon>
+        <v-list-item-content>
+          {{ entry.title }}
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script>
+  import { VcsSelect } from '@vcsuite/ui-components';
+  import { computed, inject, onUnmounted, ref } from '@vue/composition-api';
+
+  export default {
+    name: 'StyleSelector',
+    components: {
+      VcsSelect,
+    },
+    props: {
+      availableStyles: {
+        type: Array,
+        default: () => [],
+      },
+      layerName: {
+        type: String,
+        required: true,
+      },
+    },
+    setup({ layerName, availableStyles }) {
+      /** @type {VcsApp} */
+      const app = inject('vcsApp');
+      /** @type {import("@vcmap/core").FeatureLayer} */
+      const layer = app.layers.getByKey(layerName);
+      const currentStyleName = ref(layer.style.name);
+      const currentStyleLegend = ref([]);
+      const defaultStyle = layer.defaultStyle.name;
+
+      function setStyle(styleItem) {
+        currentStyleName.value = layer.style.name;
+        if (styleItem.legend) {
+          currentStyleLegend.value = styleItem.legend;
+        }
+      }
+      setStyle(layer.style);
+      // TODO error handling if layer is missing or not a feature layer
+      const styleChangedListener = layer.styleChanged.addEventListener(setStyle);
+      onUnmounted(() => {
+        styleChangedListener();
+      });
+
+      const currentStyle = computed({
+        get() { return currentStyleName.value; },
+        set(styleName) {
+          const style = styleName === defaultStyle ?
+            layer.defaultStyle :
+            app.styles.getByKey(styleName);
+          layer.setStyle(style);
+        },
+      });
+
+      const items = computed(() => {
+        return [
+          { text: 'Default', value: defaultStyle },
+          ...availableStyles.map(s => ({ text: s, value: s })),
+        ];
+      });
+
+      return {
+        currentStyle,
+        currentStyleLegend,
+        items,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/application/Navbar.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-app-bar app absolute dense>
+    <v-container fluid class="pa-0">
+      <v-row no-gutters>
+        <v-col>
+          <v-toolbar-items>
+            <div class="d-flex align-center">
+              <VcsActionButtonList
+                :actions="mapActions"
+                :overflow-count="3"
+                large
+              />
+              <v-divider
+                v-if="mapActions.length > 0 && (contentActions.length > 0 || toolActions.length > 0)"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="contentActions"
+                large
+              />
+              <v-divider
+                v-if="contentActions.length > 0 && toolActions.length > 0"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="toolActions"
+                large
+              />
+            </div>
+          </v-toolbar-items>
+        </v-col>
+        <v-col class="align-center d-flex justify-center">
+          <div class="company-logo" />
+        </v-col>
+        <v-col class="align-content-end d-flex justify-end">
+          <v-toolbar-items>
+            <div class="d-flex align-center">
+              <VcsActionButtonList
+                :actions="projectActions"
+                large
+              />
+              <v-divider
+                v-if="projectActions.length > 0 && menuActions.length > 0"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="menuActions"
+                :overflow-count="3"
+                large
+              />
+            </div>
+          </v-toolbar-items>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-app-bar>
+</template>
+
+<script>
+
+  import { VcsActionButtonList } from '@vcsuite/ui-components';
+  import { inject, ref, computed } from '@vue/composition-api';
+  import { ButtonLocation, getActionsByLocation } from '../manager/buttonManager.js';
+
+  export default {
+    name: 'VcsNavbar',
+    components: { VcsActionButtonList },
+    setup() {
+      const app = inject('vcsApp');
+
+      const navbarButtonIds = ref(app.navbarManager.componentIds);
+      const buttonComponents = computed(() => navbarButtonIds.value.map(id => app.navbarManager.get(id)));
+      const getActions = location => computed(
+        () => getActionsByLocation(buttonComponents.value, location, [...app.plugins].map(p => p.name)),
+      );
+
+      return {
+        mapActions: getActions(ButtonLocation.MAP),
+        contentActions: getActions(ButtonLocation.CONTENT),
+        toolActions: getActions(ButtonLocation.TOOL),
+        projectActions: getActions(ButtonLocation.PROJECT),
+        menuActions: getActions(ButtonLocation.MENU),
+      };
+    },
+  };
+</script>

package/src/application/VcsApp.vue

@@ -0,0 +1,147 @@
+<template>
+  <v-app class="h-full" absolute>
+    <Navbar />
+    <v-main fill-height absolute>
+      <VcsMap :map-id="mapId" />
+      <MapNavigation />
+      <ToolboxManagerComponent v-if="toolboxManagerVisible" />
+      <WindowManagerComponent />
+    </v-main>
+    <v-footer app absolute>
+      footer
+    </v-footer>
+  </v-app>
+</template>
+
+
+<style scoped lang="scss">
+::v-deep .v-application--wrap {
+  min-height: fit-content;
+}
+</style>
+
+<script>
+  import { v4 as uuid } from 'uuid';
+  import {
+    onMounted,
+    onUnmounted,
+    provide,
+  } from '@vue/composition-api';
+  import { getVcsAppById } from '@vcmap/core';
+  import WindowManagerComponent from '../manager/window/WindowManager.vue';
+  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
+  import { ButtonLocation } from '../manager/buttonManager.js';
+  import { vcsAppSymbol } from '../pluginHelper.js';
+  import VcsMap from './VcsMap.vue';
+  import Navbar from './Navbar.vue';
+  import { createMapButtonAction } from '../actions/actionHelper.js';
+  import MapNavigation from '../navigation/mapNavigation.vue';
+
+  export default {
+    components: {
+      MapNavigation,
+      Navbar,
+      VcsMap,
+      WindowManagerComponent,
+      ToolboxManagerComponent,
+    },
+    props: {
+      appId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const id = uuid();
+      const app = getVcsAppById(props.appId);
+      provide('vcsApp', app);
+
+      const iconMap = {
+        OpenlayersMap: '$vcs2d',
+        CesiumMap: '$vcs3d',
+        ObliqueMap: '$vcsObliqueView',
+      };
+
+      const mapButtonActionDestroy = {};
+      const mapAddedDestroy = app.maps.added.addEventListener(
+        ({ className, name }) => {
+          if (mapButtonActionDestroy[name]) {
+            mapButtonActionDestroy[name]();
+          }
+          const { action, destroy } = createMapButtonAction(
+            {
+              name,
+              icon: iconMap[className],
+              title: `Activate ${ name}`,
+            },
+            name,
+            app.maps,
+          );
+          app.navbarManager.add({
+            id: `mapButton-${name}`,
+            location: ButtonLocation.MAP,
+            action,
+          }, vcsAppSymbol);
+          mapButtonActionDestroy[name] = () => {
+            app.navbarManager.remove(`mapButton-${name}`);
+            destroy();
+          };
+        },
+      );
+
+      const mapRemovedDestroy = app.maps.removed.addEventListener(({ name }) => {
+        if (mapButtonActionDestroy[name]) {
+          mapButtonActionDestroy[name]();
+          delete mapButtonActionDestroy[name];
+        }
+      });
+
+      let pluginAdded;
+      const pluginRemoved = app.plugins.removed.addEventListener(async (plugin) => {
+        app.windowManager.removeOwner(plugin.name);
+        app.navbarManager.removeOwner(plugin.name);
+      });
+
+      onMounted(() => {
+        pluginAdded = app.plugins.added.addEventListener((plugin) => {
+          app.windowManager.removeOwner(plugin.name);
+          app.navbarManager.removeOwner(plugin.name);
+          if (plugin.onVcsAppMounted) {
+            plugin.onVcsAppMounted(app);
+          }
+        });
+        [...app.plugins].forEach((plugin) => {
+          if (plugin.onVcsAppMounted) {
+            plugin.onVcsAppMounted(app);
+          }
+        });
+      });
+
+      onUnmounted(() => {
+        if (mapAddedDestroy) {
+          mapAddedDestroy();
+        }
+        if (mapRemovedDestroy) {
+          mapRemovedDestroy();
+        }
+        if (pluginAdded) {
+          pluginAdded();
+        }
+        if (pluginRemoved) {
+          pluginRemoved();
+        }
+        Object.values(mapButtonActionDestroy).forEach(cb => cb());
+      });
+
+      return {
+        mapId: `mapCollection-${id}`,
+        toolboxManagerVisible: app.toolboxManager.state.visible,
+      };
+    },
+    provide() {
+      return {
+        language: window.navigator.language.split('-')[0],
+      };
+    },
+  };
+</script>

package/src/application/VcsMap.vue

@@ -0,0 +1,57 @@
+<template>
+  <div :id="mapId" />
+</template>
+
+<style lang="scss" scoped>
+
+  ::v-deep {
+    .mapElement {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow: hidden; /* Fix for iFrame content */
+    }
+
+    .cesium-widget,
+    .cesium-widget canvas {
+      width: 100%;
+      height: 100%;
+      touch-action: none;
+    }
+  }
+
+</style>
+
+<script >
+  import { inject, onMounted, isReactive } from '@vue/composition-api';
+  import { getLogger as getLoggerByName } from '@vcsuite/logger';
+
+  /**
+   * @returns {Logger}
+   */
+  function getLogger() {
+    return getLoggerByName('VcsMap');
+  }
+
+
+  export default {
+    props: {
+      mapId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const app = inject('vcsApp');
+
+      onMounted(async () => {
+        app.maps.setTarget(props.mapId);
+        if (isReactive(app.maps.activeMap)) {
+          getLogger().error('Map is reactive, PLEASE FIX');
+        }
+      });
+    },
+  };
+</script>

package/src/application/empty-cmp.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-sheet style="height: 100%">
+    Statisches Window
+    <v-sheet />
+  </v-sheet>
+</template>