@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/plugins/@vcmap-show-case/simple-graph/README.md

@@ -0,0 +1,71 @@
+# VC Map Plugin Simple Graph
+
+This is a plugin adding a new Feature Info View using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }.
+
+| View class                                | VueComponent                                         | description                                              |
+| ----------------------------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
+| [SimpleGraphView](src/simpleGraphView.js) | [SimpleGraphComponent](src/SimpleGraphComponent.vue) | A simple graph view including trend lines and bar graph. |
+
+## configuration
+
+See `{FeatureInfoViewOptions}` for general configuration of Feature Views.
+Use `{string[]} attributeKeys` to define, which feature properties contain graph data.
+Use `{WindowComponentOptions} window` to define the position and size of the graph window.
+The graph can be configured as follows:
+
+| Property | Type                     | default   | Description                                          |
+| -------- | ------------------------ | --------- | ---------------------------------------------------- |
+| labels   | string[] | number[] | []        | optional array of strings labeling all data points   |
+| graph    | string                   | 'trend'   | Choose between a trendline or bars                   |
+| color    | string                   | 'primary' | optional color of the sparkline of the graph         |
+| gradient | string[]                 | []        | optional array of colors to use as a linear-gradient |
+| fill     | boolean                  | false     | if true, filled area below sparkline                 |
+| smooth   | number | string     | 8         | optional number of px to use as a corner radius      |
+
+### Example
+
+```json
+{
+  "type": "SimpleGraphView",
+  "name": "graphBar",
+  "attributeKeys": [
+    "globalRadRoofsMonth_01",
+    "globalRadRoofsMonth_02",
+    "globalRadRoofsMonth_03",
+    "globalRadRoofsMonth_04",
+    "globalRadRoofsMonth_05",
+    "globalRadRoofsMonth_06",
+    "globalRadRoofsMonth_07",
+    "globalRadRoofsMonth_08",
+    "globalRadRoofsMonth_09",
+    "globalRadRoofsMonth_10",
+    "globalRadRoofsMonth_11",
+    "globalRadRoofsMonth_12"
+  ],
+  "labels": [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ],
+  "color": "secondary",
+  "graph": "bar",
+  "gradient": ["red", "orange", "yellow"],
+  "window": {
+    "slot": "detached",
+    "position": {
+      "left": "20%",
+      "right": "20%",
+      "bottom": "0%"
+    }
+  }
+}
+```

package/plugins/@vcmap-show-case/simple-graph/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vcmap-show-case/simple-graph",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0",
+  "dependencies": {
+    "@vcsuite/parsers": "^1.0.1"
+  },
+  "peerDependencies": {
+    "@vcmap/ui": "5.0.0-rc.2"
+  }
+}

package/plugins/@vcmap-show-case/simple-graph/src/SimpleGraphComponent.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-sparkline
+    padding="24"
+    stroke-linecap="round"
+    :show-labels="labels.length > 0"
+    :labels="labels"
+    :type="graph"
+    :color="color"
+    :gradient="gradient"
+    :fill="fill"
+    :smooth="smooth"
+    :value="values"
+  />
+</template>
+<script>
+  import { VSparkline } from 'vuetify/lib';
+
+  export default {
+    name: 'SimpleGraphComponent',
+    components: [VSparkline],
+    props: {
+      attributes: {
+        type: Object,
+        required: true,
+      },
+      labels: {
+        type: Array,
+        default: () => [],
+      },
+      graph: {
+        type: String,
+        default: 'trend',
+      },
+      color: {
+        type: String,
+        default: 'primary',
+      },
+      gradient: {
+        type: Array,
+        default: () => [],
+      },
+      fill: {
+        type: Boolean,
+        default: false,
+      },
+      smooth: {
+        type: Number,
+        default: 8,
+      },
+    },
+    computed: {
+      values() {
+        return Object.values(this.attributes);
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/simple-graph/src/index.js

@@ -0,0 +1,17 @@
+import SimpleGraphView from './simpleGraphView.js';
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function simpleGraph() {
+  return {
+    name: '@vcmap/simpleGraph',
+    onVcsAppMounted(app) {
+      /** Example for registering custom component on FeatureInfo */
+      app.featureInfoClassRegistry.registerClass(
+        app.dynamicModuleId,
+        SimpleGraphView.className,
+        SimpleGraphView,
+      );
+    },
+  };
+}

package/plugins/@vcmap-show-case/simple-graph/src/simpleGraphView.js

@@ -0,0 +1,78 @@
+import { parseBoolean } from '@vcsuite/parsers';
+import { AbstractFeatureInfoView } from '@vcmap/ui';
+import SimpleGraphComponent from './SimpleGraphComponent.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} SimpleGraphFeatureInfoViewOptions
+ * @property {string[]|number[]} [labels] - optional array of strings labeling all data points
+ * @property {string} [graph='trend'] - Choose between a trendline or bars
+ * @property {string} [color='primary'] - optional color of the sparkline of the graph
+ * @property {string[]} [gradient] - optional array of colors to use as a linear-gradient
+ * @property {boolean} [fill=false] - if true, filled area below sparkline
+ * @property {number|string} [smooth=8] - optional number of px to use as a corner radius
+ */
+
+/**
+ * @class
+ * @description A graph view.
+ */
+class SimpleGraphView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'SimpleGraphView';
+  }
+
+  /**
+   * @param {SimpleGraphFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, SimpleGraphComponent);
+    /**
+     * @type {string[]|number[]}
+     */
+    this.labels = options.labels || [];
+    /**
+     * @type {string}
+     */
+    this.graph = options.graph || 'trend';
+    /**
+     * @type {string}
+     */
+    this.color = options.color || 'primary';
+    /**
+     * @type {string[]}
+     */
+    this.gradient = options.gradient || [];
+    /**
+     * @type {boolean}
+     */
+    this.fill = parseBoolean(options.fill, false);
+    /**
+     * @type {number|string}
+     */
+    this.smooth = options.smooth ?? 8;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {FeatureInfoProps}
+   */
+  getProperties({ feature }, layer) {
+    return {
+      featureId: feature.getId(),
+      layerName: layer.name,
+      attributes: this.getAttributes(feature),
+      labels: this.labels,
+      graph: this.graph,
+      color: this.color,
+      gradient: this.gradient,
+      fill: this.fill,
+      smooth: this.smooth,
+    };
+  }
+}
+
+export default SimpleGraphView;

package/plugins/@vcmap-show-case/style-input-example/README.md

@@ -0,0 +1,4 @@
+# Style input example
+
+This is a show-case plugin demonstrating the components for changeing style of vector layers and vector features.
+See [style](../../../src/components/style) for the used components.

package/plugins/@vcmap-show-case/style-input-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/style-input-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/style-input-example/src/StyleExample.vue

@@ -0,0 +1,190 @@
+<template>
+  <v-sheet>
+    <VcsFormSection heading="Style menus">
+      <VcsVectorStyleComponent
+        v-model="styleOptions"
+        :value-default="defaultStyleOptions"
+      />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Fill Selector">
+      <VcsFillSelector v-model="styleOptions.fill" />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Stroke Selector">
+      <VcsStrokeSelector v-model="styleOptions.stroke" />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Image Selector">
+      <VcsImageSelector
+        v-model="styleOptions.image"
+        :value-default="defaultStyleOptions.image"
+        :extended-shape-settings="true"
+      />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Text Selector">
+      <VcsTextSelector
+        v-model="styleOptions.text"
+        :value-default="defaultStyleOptions.text"
+      />
+    </VcsFormSection>
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet } from 'vuetify/lib';
+  import { onMounted, ref, watchEffect } from 'vue';
+  import {
+    VcsFormSection,
+    VcsFillSelector,
+    VcsStrokeSelector,
+    VcsImageSelector,
+    VcsTextSelector,
+    VcsVectorStyleComponent,
+    VectorStyleMenus,
+  } from '@vcmap/ui';
+  import { parseColor } from '@vcmap/core';
+  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+
+  export default {
+    name: 'StyleExample',
+    components: {
+      VSheet,
+      VcsFormSection,
+      VcsFillSelector,
+      VcsStrokeSelector,
+      VcsImageSelector,
+      VcsTextSelector,
+      VcsVectorStyleComponent,
+    },
+    setup() {
+      const exampleStyle = new Style({
+        fill: new Fill({ color: 'rgba(255,255,255,0.4)' }),
+        stroke: undefined,
+        image: new RegularShape({
+          points: undefined,
+          radius: 11,
+          angle: undefined,
+          radius2: undefined,
+          fill: new Fill({ color: 'rgba(255,255,255,1)' }),
+          stroke: new Stroke({ color: 'rgba(0,0,0,1)', width: 1 }),
+        }),
+        text: new Text({
+          font: '10px Arial, Helvetica, sans-serif',
+          fill: new Fill({ color: 'rgba(0,0,0,1)' }),
+          stroke: new Stroke({ color: 'rgba(255,255,255,1)', width: 1 }),
+        }),
+      });
+
+      const defaultStyleOptions = {
+        fill: undefined,
+        stroke: {
+          color: [0, 0, 0, 1],
+          width: 2,
+        },
+        image: {
+          fill: undefined,
+          stroke: {
+            color: [0, 0, 0, 1],
+            width: 2,
+          },
+          radius: 10,
+          scale: 1,
+          opacity: 1,
+        },
+        text: {
+          font: '10px Arial, Helvetica, sans-serif',
+          offsetX: 0,
+          offsetY: 0,
+          text: '',
+        },
+      };
+
+      const styleOptions = ref({
+        fill: undefined,
+        stroke: undefined,
+        image: undefined,
+        text: undefined,
+      });
+
+      const fill = exampleStyle.getFill();
+      const stroke = exampleStyle.getStroke();
+      const image = exampleStyle.getImage();
+      const text = exampleStyle.getText();
+
+      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
+      if (fill) {
+        styleOptions.value.fill = {
+          color: parseColor(fill.getColor()),
+        };
+      }
+      if (stroke) {
+        styleOptions.value.stroke = {
+          color: parseColor(stroke.getColor()),
+          width: exampleStyle.getStroke().getWidth(),
+        };
+      }
+      if (image) {
+        if (image instanceof RegularShape) {
+          styleOptions.value.image = {
+            points: image.getPoints(),
+            radius: image.getRadius(),
+            radius2: image.getRadius2(),
+            angle: image.getAngle(),
+            fill: {
+              color: parseColor(image.getFill().getColor()),
+            },
+            stroke: {
+              color: parseColor(image.getStroke().getColor()),
+              width: image.getStroke().getWidth(),
+            },
+          };
+        } else if (image instanceof Icon) {
+          styleOptions.value.image = {
+            src: image.getSrc(),
+            scale: image.getScale(),
+            opacity: image.getOpacity(),
+          };
+        }
+      }
+      if (text) {
+        styleOptions.value.text = {
+          font: text.getFont(),
+          fill: {
+            color: parseColor(text.getFill()?.getColor()),
+          },
+          stroke: {
+            color: parseColor(text.getStroke()?.getColor()),
+            width: text.getStroke().getWidth(),
+          },
+          textBaseline: text.getTextBaseline(),
+          offsetY: text.getOffsetY(),
+          offsetX: text.getOffsetX(),
+          text: text.getText(),
+        };
+      }
+
+      onMounted(() => {
+        watchEffect(() => {
+          const newFill = styleOptions.value.fill;
+          const newStroke = styleOptions.value.stroke;
+          const newImage = styleOptions.value.image;
+          // const newText = styleOptions.value.text;
+          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
+          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
+          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
+          if (newImage?.points) {
+            // exampleStyle.setImage(new RegularShape(newImage));
+          } else if (newImage?.src) {
+            exampleStyle.setImage(new Icon(newImage));
+          } else {
+            exampleStyle.setImage(null);
+          }
+        });
+      });
+
+      return {
+        styleOptions,
+        defaultStyleOptions,
+        VectorStyleMenus,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/style-input-example/src/index.js

@@ -0,0 +1,42 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import component from './StyleExample.vue';
+
+export default function createStyleExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Style Example',
+          icon: '$vcsColorSwatch',
+        },
+        {
+          id: 'style-input-example',
+          state: {
+            headerTitle: 'Style example',
+            headerIcon: '$vcsColorSwatch',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'style', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/switch-map-callback-example/README.md

@@ -0,0 +1,21 @@
+# @vcmap-show-case/switch-map-callback-example
+
+This plugin adds a MapSwitcherCallback to the uiApp.
+
+This can be used to switch the map i the ContentTree,
+on Click of an Item.
+
+```json
+
+    {
+      "name": "myMapSwitcherEntry",
+      "type": "ContentTreeItem",
+      "title": "SwitchMapCallback Test",
+      "onClick": [
+        {
+          "type": "SwitchMapCallback",
+          "mapName": "ol3"
+        }
+      ]
+    },
+```

package/plugins/@vcmap-show-case/switch-map-callback-example/config.json

@@ -0,0 +1,3 @@
+{
+  "name": "@vcmap-show-case/switch-map-callback-example"
+}

package/plugins/@vcmap-show-case/switch-map-callback-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/switch-map-callback-example",
+  "version": "1.0.0",
+  "description": "An Example plugin to add a Map Switcher Callback"
+}

package/plugins/@vcmap-show-case/switch-map-callback-example/src/index.js

@@ -0,0 +1,34 @@
+import { version, name } from '../package.json';
+import SwitchMapCallback from './switchMapCallback.js';
+
+/**
+ * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T>}
+ * @template {Object} T
+ */
+export default function switchMapCallbackExample() {
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     */
+    initialize(vcsUiApp) {
+      this._app = vcsUiApp;
+      this._app.callbackClassRegistry.registerClass(
+        this._app.dynamicModuleId,
+        SwitchMapCallback.className,
+        SwitchMapCallback,
+      );
+    },
+    destroy() {
+      this._app.callbackClassRegistry.unregisterClass(
+        this._app.dynamicModuleId,
+        SwitchMapCallback.className,
+      );
+    },
+  };
+}

package/plugins/@vcmap-show-case/switch-map-callback-example/src/switchMapCallback.js

@@ -0,0 +1,47 @@
+import { VcsCallback } from '@vcmap/ui';
+
+/**
+ * @typedef {VcsCallbackOptions} SwitchMapCallbackOptions
+ * @property {string} mapName - name of the map
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class SwitchMapCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'SwitchMapCallback';
+  }
+
+  /**
+   * @param {SwitchMapCallbackOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._mapName = options.mapName;
+  }
+
+  callback() {
+    this._app.maps.setActiveMap(this._mapName);
+  }
+
+  /**
+   * @returns {SwitchMapCallbackOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.mapName = this._mapName;
+    return config;
+  }
+}
+
+export default SwitchMapCallback;

package/plugins/@vcmap-show-case/table-example/README.md

@@ -0,0 +1,3 @@
+# List Example
+
+This is a show-case plugin demonstrating the usage of [VcsDataTable](../../../src/components/tables/VcsDataTable.vue).

package/plugins/@vcmap-show-case/table-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/table-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}