@vcmap/ui 5.0.0-rc.10

package/src/actions/actionHelper.js

@@ -0,0 +1,262 @@
+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 active = maps.activeMap?.name === mapName;
+  const action = {
+    ...actionOptions,
+    active,
+    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 an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
+ * @param {OverviewMap} overviewMap
+ * @param {WindowComponentOptions} windowComponent
+ * @param {WindowManager}  windowManager
+ * @returns {(function(): void)|*}
+ */
+export function createOverviewMapAction(overviewMap, windowComponent, windowManager) {
+  const { action, destroy } = createToggleAction(
+    {
+      name: 'overviewMapToggle',
+      icon: '$vcsMap',
+      title: 'navigation.overviewMapTooltip',
+    },
+    windowComponent,
+    windowManager,
+    vcsAppSymbol,
+  );
+
+  const listeners = [
+    windowManager.added.addEventListener(async ({ id }) => {
+      if (id === windowComponent.id) {
+        await overviewMap.activate();
+      }
+    }),
+    windowManager.removed.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        overviewMap.deactivate();
+      }
+    }),
+  ];
+
+  const destroyAction = () => {
+    destroy();
+    listeners.forEach((cb) => { cb(); });
+  };
+  return { action, destroy: destroyAction };
+}
+
+/**
+ * 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 {
+    title: 'content.viewpointAction.title',
+    ...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,59 @@
+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',
+};
+
+const stateI18nMap = {
+  [StateActionState.INACTIVE]: 'content.stateAction.titleInactive',
+  [StateActionState.ACTIVE]: 'content.stateAction.titleActive',
+  [StateActionState.INDETERMINATE]: 'content.stateAction.titleIndeterminate',
+  [StateActionState.LOADING]: 'content.stateAction.titleLoading',
+};
+
+
+/**
+ * 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: stateI18nMap[currentState],
+    icon: stateIconMap[currentState],
+    callback,
+  };
+
+  const destroy = watch(stateRef, () => {
+    action.icon = stateIconMap[stateRef.value];
+    action.title = stateI18nMap[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 { computed, inject, onUnmounted, ref } from '@vue/composition-api';
+  import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
+
+  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,143 @@
+<template>
+  <v-toolbar
+    absolute
+    dense
+    elevation="0"
+    :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
+    :color="'var(--v-basic-base)'"
+    :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
+    width="100%"
+  >
+    <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)"
+                class="mx-2"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="contentActions"
+                :overflow-count="$vuetify.breakpoint.xs ? 2 : 3"
+                large
+              />
+              <v-divider
+                v-if="contentActions.length > 0 && toolActions.length > 0"
+                class="mx-2"
+                vertical
+                inset
+              />
+              <VcsActionButtonList
+                :actions="toolActions"
+                v-if="$vuetify.breakpoint.mdAndUp"
+                large
+              />
+            </div>
+          </v-toolbar-items>
+        </v-col>
+        <v-col class="align-center d-flex justify-center">
+          <div v-if="$vuetify.breakpoint.mdAndUp" class="company-logo" />
+        </v-col>
+        <v-col class="align-content-end d-flex justify-end">
+          <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
+            <div class="d-flex align-center">
+              <VcsActionButtonList
+                :actions="projectActions"
+                large
+              />
+              <v-divider
+                v-if="projectActions.length > 0 && menuActions.length > 0"
+                vertical
+                inset
+                class="mx-2"
+              />
+              <v-menu
+                offset-y
+                v-if="shareActions.length > 0"
+              >
+                <template #activator="{ on, attrs }">
+                  <VcsButton
+                    v-bind="attrs"
+                    v-on="on"
+                    large
+                    tooltip="Share current view of the map."
+                    icon="$vcsShare"
+                  />
+                </template>
+                <VcsActionList
+                  :actions="shareActions"
+                  tooltip-position="left"
+                  :show-icon="true"
+                />
+              </v-menu>
+              <v-menu
+                offset-y
+                v-if="menuActions.length > 0"
+              >
+                <template #activator="{ on, attrs }">
+                  <VcsButton
+                    v-bind="attrs"
+                    v-on="on"
+                    large
+                    tooltip="navbar.menu.tooltip"
+                    icon="$vcsMenu"
+                  />
+                </template>
+                <VcsActionList
+                  :actions="menuActions"
+                  tooltip-position="left"
+                  :show-icon="true"
+                />
+              </v-menu>
+            </div>
+          </v-toolbar-items>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+  .v-toolbar__items > div{
+    gap: 8px;
+  }
+</style>
+
+<script>
+  import { inject, ref, computed } from '@vue/composition-api';
+  import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+  import VcsActionList from '../components/lists/VcsActionList.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+
+  export default {
+    name: 'VcsNavbar',
+    components: { VcsActionButtonList, VcsActionList, VcsButton },
+    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),
+        shareActions: getActions(ButtonLocation.SHARE),
+        menuActions: getActions(ButtonLocation.MENU),
+      };
+    },
+  };
+</script>