@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/init.js

@@ -1,36 +1,121 @@
-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;
-}
+import Vue from 'vue';
+import { check, checkMaybe, is } from '@vcsuite/check';
+import { VcsModule } from '@vcmap/core';
+import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
+import { vuetify } from './vuePlugins/vuetify.js';
+import VcsUiApp from './vcsUiApp.js';
+
+/**
+ * Base pattern to check VcsObjects
+ * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
+ */
+const VcsObjectPattern = {
+  type: String,
+  name: String,
+};
+
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
+ */
+export const VcsUiAppConfigPattern = {
+  id: [undefined, String],
+  layers: [undefined, [VcsObjectPattern]],
+  maps: [undefined, [VcsObjectPattern]],
+  styles: [undefined, [VcsObjectPattern]],
+  viewpoints: [undefined, [VcsObjectPattern]],
+  startingViewpointName: [undefined, String],
+  startingMapName: [undefined, String],
+  projection: [undefined, Object],
+  categories: [undefined, [{ name: String, items: [Object] }]],
+  obliqueCollections: [undefined, [VcsObjectPattern]],
+  plugins: [undefined, [Object]],
+  contentTree: [undefined, [Object]],
+  uiConfig: [undefined, [Object]],
+  featureInfo: [undefined, [VcsObjectPattern]],
+  i18n: [undefined, [Object]],
+};
+
+/**
+ * creates and mounts a vcsApp
+ * @param {string} mountTarget
+ * @returns {Promise<VcsUiApp>}
+ */
+export default async function initApp(mountTarget) {
+  check(mountTarget, String);
+  const app = new VcsUiApp();
+  new Vue({
+    vuetify,
+    i18n: app.vueI18n,
+    render: (h) =>
+      h(VcsAppComponentWrapper, {
+        props: {
+          appId: app.id,
+        },
+      }),
+  }).$mount(mountTarget);
+
+  return app;
+}
+
+/**
+ * Initializes app with an optional single config
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromModule(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+
+  const app = await initApp(mountTarget);
+  if (configUrl) {
+    const config = await fetch(configUrl).then((response) => response.json());
+    const module = new VcsModule(config);
+    await app.addModule(module);
+  }
+
+  return app;
+}
+
+/**
+ * Initializes app with a map config containing a set of config urls
+ * @param {string} mountTarget
+ * @param {string} appUrl app config containing further modules to be loaded
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromAppConfig(mountTarget, appUrl) {
+  check(mountTarget, String);
+  check(appUrl, String);
+
+  const app = await initApp(mountTarget);
+  /**
+   * @type {{modules: Array<string|import("@vcmap/core").VcsModuleConfig>}}
+   */
+  const appConfig = await fetch(appUrl).then((response) => response.json());
+
+  check(appConfig.modules, [String, Object]);
+
+  const modules = await Promise.all(
+    appConfig.modules.map(async (c) => {
+      if (is(c, VcsUiAppConfigPattern)) {
+        return new VcsModule(
+          /** @type{import("@vcmap/core").VcsModuleConfig} */ c,
+        );
+      } else if (is(c, String)) {
+        const response = await fetch(c);
+        if (response.ok) {
+          const config = await response.json();
+          return new VcsModule(config);
+        }
+      }
+      return null;
+    }),
+  );
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const module of modules) {
+    if (module) {
+      await app.addModule(module);
+    }
+  }
+}

package/src/legend/StyleLegendItem.vue

@@ -0,0 +1,176 @@
+<template>
+  <v-list dense>
+    <v-layout wrap :column="item.colNr === 1">
+      <v-flex
+        v-for="(row, idx) in item.rows"
+        :key="idx"
+        :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
+      >
+        <v-list-item dense class="pa-0" :class="determineInnerPadding(idx)">
+          <v-list-item-icon class="pr-2">
+            <v-img
+              v-if="
+                row.type === StyleRowType.Icon ||
+                row.type === StyleRowType.Shape
+              "
+              width="32"
+              height="24"
+              contain
+              :src="getImageSrcFromShape(row.image)"
+            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="24"
+              viewBox="0 0 32 24"
+              v-else
+            >
+              <text
+                v-if="row.type === StyleRowType.Text"
+                :style="`font:${row.text.font}`"
+                x="0"
+                y="17"
+                :stroke="getColor(row.text?.stroke?.color)"
+                :stroke-linecap="row.text?.stroke?.lineCap"
+                :stroke-linejoin="row.text?.stroke?.lineJoin"
+                :stroke-dasharray="row.text?.stroke?.lineDash"
+                :stroke-dashoffset="row.text?.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.text?.stroke?.miterLimit"
+                :stroke-width="row.text?.stroke?.width"
+                :fill="getColor(row.text?.fill?.color) || 'rgba(255,255,255,0)'"
+              >
+                {{ $t(row.label || 'legend.defaultLabelText') }}
+              </text>
+              <line
+                v-else-if="row.type === StyleRowType.Stroke"
+                x1="0"
+                y1="12"
+                x2="32"
+                y2="12"
+                :stroke="getColor(row.stroke?.color)"
+                :stroke-linecap="row.stroke?.lineCap"
+                :stroke-linejoin="row.stroke?.lineJoin"
+                :stroke-dasharray="row.stroke?.lineDash"
+                :stroke-dashoffset="row.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.stroke?.miterLimit"
+                :stroke-width="row.stroke?.width"
+              />
+              <rect
+                v-else-if="row.type === StyleRowType.Fill"
+                width="32"
+                height="24"
+                :stroke="getColor(row.stroke?.color)"
+                :stroke-linecap="row.stroke?.lineCap"
+                :stroke-linejoin="row.stroke?.lineJoin"
+                :stroke-dasharray="row.stroke?.lineDash"
+                :stroke-dashoffset="row.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.stroke?.miterLimit"
+                :stroke-width="row.stroke?.width"
+                :fill="getColor(row.fill?.color) || 'rgba(255,255,255,0)'"
+              />
+              <circle
+                v-else-if="row.type === StyleRowType.Circle"
+                cx="16"
+                cy="12"
+                :r="row.image?.radius || 8"
+                :stroke="getColor(row.image?.stroke?.color)"
+                :stroke-linecap="row.image?.stroke?.lineCap"
+                :stroke-linejoin="row.image?.stroke?.lineJoin"
+                :stroke-dasharray="row.image?.stroke?.lineDash"
+                :stroke-dashoffset="row.image?.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.image?.stroke?.miterLimit"
+                :stroke-width="row.image?.stroke?.width"
+                :fill="
+                  getColor(row.image?.fill?.color) || 'rgba(255,255,255,0)'
+                "
+              />
+            </svg>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title
+              class="pt-2"
+              :title="$t(row.tooltip || row.title)"
+            >
+              {{ $t(row.title) }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-flex>
+    </v-layout>
+  </v-list>
+</template>
+
+<script>
+  import { getStringColor } from '@vcmap/core';
+  import {
+    VFlex,
+    VImg,
+    VLayout,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
+  import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
+
+  /**
+   * @description A component rendering vector styles as list using {@link https://vuetifyjs.com/en/api/v-list-row v-list-row}
+   * @vue-prop {StyleLegendItem} item - an item with multiple rows of style information and corresponding title
+   */
+  export default {
+    name: 'StyleLegendItem',
+    components: {
+      VList,
+      VLayout,
+      VFlex,
+      VListItem,
+      VListItemIcon,
+      VImg,
+      VListItemContent,
+      VListItemTitle,
+    },
+    props: {
+      item: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      /**
+       * Determines if a list item has padding right or left, so it has correct spacing to second row.
+       * @param {number} index The index of the list item. Starts with 0.
+       * @returns {string} Vuetify padding helper.
+       */
+      function determineInnerPadding(index) {
+        // check if there are more than two columns
+        if (props.item.colNr !== 1) {
+          // check if even number. If so, it is located in the left column and needs padding on the right.
+          if (index % 2 === 0) {
+            return 'pr-2';
+          } else {
+            return 'pl-2';
+          }
+        }
+        return '';
+      }
+      return {
+        StyleRowType,
+        getImageSrcFromShape,
+        getColor(color) {
+          if (color) {
+            return getStringColor(color);
+          }
+          return null;
+        },
+        determineInnerPadding,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .v-list-item--dense {
+    height: 32px;
+  }
+</style>

package/src/legend/VcsLegend.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-sheet class="overflow-y-auto">
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="entries.length > 0"
+      v-model="panels"
+      class="rounded-0"
+    >
+      <v-expansion-panel
+        v-for="(entry, i) in entries"
+        :key="i"
+        class="px-2"
+        @change="entry.open = !entry.open"
+      >
+        <v-expansion-panel-header hide-actions>
+          <template #default="{ open }">
+            <div class="d-flex justify-space-between">
+              <div class="d-flex align-center">
+                <v-icon class="mr-1" :class="{ rotate: !open }">
+                  mdi-chevron-down
+                </v-icon>
+                {{ $t(entry.title) }}
+              </div>
+              <VcsActionButtonList :actions="entry.actions" />
+            </div>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="pl-6 pb-2">
+          <v-list dense>
+            <div v-for="(item, idx) in entry.legend" :key="idx">
+              <div v-if="item.type === LegendType.Image">
+                <img
+                  :src="$t(item.src)"
+                  :alt="item.src"
+                  class="legend-image"
+                  :title="item.tooltip"
+                />
+              </div>
+              <div v-else-if="item.type === LegendType.Iframe">
+                <iframe
+                  :id="`legendIframe${idx}`"
+                  :src="$t(item.src)"
+                  scrolling="no"
+                  style="width: 100%; height: 100%"
+                  frameBorder="0"
+                  @load="setIframeHeight(`legendIframe${idx}`)"
+                />
+              </div>
+              <style-legend-item v-else :item="item" />
+            </div>
+          </v-list>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <v-sheet v-else class="ma-2">
+      {{ $t('legend.empty') }}
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script>
+  import {
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VIcon,
+    VList,
+    VSheet,
+  } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { LegendType } from './legendHelper.js';
+  import StyleLegendItem from './StyleLegendItem.vue';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description A component rendering configured legend information for active layers.
+   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
+   */
+  export default {
+    name: 'VcsLegend',
+    components: {
+      VcsActionButtonList,
+      StyleLegendItem,
+      VExpansionPanels,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VIcon,
+      VList,
+      VSheet,
+    },
+    props: {
+      entries: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      /**
+       * adapts the iframe height on load
+       * @param {string} id - iframe's html id
+       */
+      const setIframeHeight = (id) => {
+        const iframe = document.getElementById(id);
+        iframe.style.height = `${iframe.contentWindow.document.documentElement.scrollHeight}px`;
+      };
+
+      /**
+       * @type {import("vue").ComputedRef<number[]>}
+       */
+      const panels = computed({
+        get() {
+          return [...Array(props.entries.length).keys()].filter(
+            (p, idx) => !!props.entries[idx].open,
+          );
+        },
+        set() {},
+      });
+
+      return {
+        LegendType,
+        setIframeHeight,
+        panels,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .legend-image {
+    max-width: 100%;
+    height: auto;
+  }
+  .rotate {
+    transform: rotate(-90deg);
+  }
+</style>

package/src/legend/legendHelper.js

@@ -0,0 +1,204 @@
+import { getShapeFromOptions } from '@vcmap/core';
+import { shallowRef } from 'vue';
+
+/**
+ * @enum {string}
+ * @property {string} Image - an image
+ * @property {string} IFRAME - an iframe
+ * @property {string} Style - a parametric style element
+ */
+export const LegendType = {
+  Image: 'ImageLegendItem',
+  Iframe: 'IframeLegendItem',
+  Style: 'StyleLegendItem',
+};
+
+/**
+ * @enum {string}
+ */
+export const StyleRowType = {
+  Stroke: 'StrokeLegendRow',
+  Fill: 'FillLegendRow',
+  Circle: 'CircleLegendRow',
+  Icon: 'IconLegendRow',
+  Shape: 'RegularShapeLegendRow',
+  Text: 'TextLegendRow',
+};
+
+/**
+ * @typedef {Object} LegendItem
+ * @property {LegendType} type - determines rendering, specialised properties are type based.
+ */
+
+/**
+ * @typedef {LegendItem} ImageLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ * @property {string} [tooltip] - Optional further explanation of the legend
+ */
+
+/**
+ * @typedef {LegendItem} IframeLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ */
+
+/**
+ * @typedef {LegendItem} StyleLegendItem
+ * @property {number} [colNr=2] Number of columns. Valid values are 1 or 2. Per default 2.
+ * @property {Array<StyleLegendRow>} rows - style definitions with description
+ */
+
+/**
+ * @typedef {Object} StyleLegendRow
+ * @property {StyleRowType} type - determines rendering of the row, specialised properties are type based.
+ * @property {string} title - Description of the style. Can be an i18n string
+ * @property {string} [tooltip] - Optional further explanation of the legend row
+ */
+
+/**
+ * @typedef {StyleLegendRow} StrokeLegendRow
+ * @property {import("ol/style/Stroke").Options} stroke
+ */
+
+/**
+ * @typedef {StyleLegendRow} FillLegendRow
+ * @property {import("ol/style/Fill").Options} fill
+ * @property {import("ol/style/Stroke").Options} [stroke]
+ */
+
+/**
+ * @typedef {StyleLegendRow} CircleLegendRow
+ * @property {import("ol/style/Circle").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} IconLegendRow
+ * @property {import("ol/style/Icon").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} RegularShapeLegendRow
+ * @property {import("ol/style/RegularShape").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} TextLegendRow
+ * @property {import("ol/style/Text").Options} text
+ * @property {string} [label='Text']
+ */
+
+/**
+ * @type {import("ol/style/Image").Options} image
+ * @return {string}
+ */
+export function getImageSrcFromShape(image) {
+  if (image.src) {
+    return image.src;
+  }
+  const shape = getShapeFromOptions(image);
+  const imageRep = shape.getImage(1);
+  return imageRep.currentSrc || imageRep.toDataURL();
+}
+
+/**
+ * @typedef {Object} LegendEntry
+ * @property {string} key
+ * @property {string} title - layer or entry name
+ * @property {boolean} [open=true] - panel state of entry
+ * @property {Array<LegendItem>} legend - legend properties
+ * @property {Array<VcsAction>} actions - popout actions
+ */
+
+/**
+ * creates a LegendEntry with title, options and optionally popout action to the entries array
+ * @param {string} key - layerName
+ * @param {string} title
+ * @param {Array<LegendItem>} legend
+ * @returns {LegendEntry}
+ */
+export function createLayerLegendEntry(key, title, legend) {
+  const actions = [];
+  legend.forEach((item) => {
+    // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
+    if (item.src && item.popoutBtn && actions.length < 1) {
+      actions.push({
+        name: 'legendPopoutAction',
+        icon: 'mdi-open-in-new',
+        title: 'legend.openInNew',
+        callback: () => window.open(item.src, '_blank'),
+      });
+    }
+  });
+  return { key, title, legend, actions, open: true };
+}
+
+/**
+ *
+ * @param {VcsUiApp} app
+ * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: (function():void)}}
+ */
+export function getLegendEntries(app) {
+  /**
+   * @type {import("vue").Ref<Array<LegendEntry>>}>}
+   */
+  const entries = shallowRef([]);
+  /**
+   * @type {Object<string,function():void>}
+   */
+  const styleChangedListener = {};
+
+  /**
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  function removeEntryForLayer(layer) {
+    const layerName = layer.name;
+    // reassign to trigger update
+    entries.value = entries.value.filter(({ key }) => key !== layerName);
+    if (styleChangedListener[layerName]) {
+      styleChangedListener[layerName]();
+      delete styleChangedListener[layerName];
+    }
+  }
+
+  /**
+   * adds or removes a LegendEntry on layer state changes and layer style changes
+   * adds a styleChangedListener for all layers changing its state
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  function syncLayerLegendEntries(layer) {
+    removeEntryForLayer(layer);
+    if (layer.active) {
+      const key = layer.name;
+      const title = layer.properties.title || layer.name;
+      const legend =
+        layer.style?.properties?.legend ?? layer.properties?.legend;
+      if (legend) {
+        const legendEntry = createLayerLegendEntry(key, title, legend);
+        // use spread since push won't trigger updates. Put new entries at the start
+        entries.value = [legendEntry, ...entries.value];
+      }
+      if (layer.styleChanged) {
+        styleChangedListener[layer.name] = layer.styleChanged.addEventListener(
+          () => syncLayerLegendEntries(layer),
+        );
+      }
+    }
+  }
+
+  const destroyChangedListener = app.layers.stateChanged.addEventListener(
+    syncLayerLegendEntries,
+  );
+  const destroyRemovedListener =
+    app.layers.removed.addEventListener(removeEntryForLayer);
+
+  [...app.layers].forEach(syncLayerLegendEntries);
+
+  const destroy = () => {
+    destroyChangedListener();
+    destroyRemovedListener();
+    Object.values(styleChangedListener).forEach((cb) => cb());
+  };
+
+  return { entries, destroy };
+}