@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/plugins/simple-graph/README.md

@@ -0,0 +1,51 @@
+# 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](./simpleGraphView.js) | [SimpleGraphComponent](./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/simple-graph/SimpleGraphComponent.vue

@@ -0,0 +1,70 @@
+<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>
+
+/**
+ * @description A simple table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }
+ * @vue-prop {Object} attributes - the feature's attributes
+ * @vue-prop {string[]} [labels] - optional array of strings labeling all data points
+ * @vue-prop {string} [graph='trend'] - Choose between a trendline or bars
+ * @vue-prop {string} [color='primary'] - optional color of the sparkline of the graph
+ * @vue-prop {string[]} [gradient] - optional array of colors to use as a linear-gradient
+ * @vue-prop {boolean} [fill=false] - if true, filled area below sparkline
+ * @vue-prop {boolean|number|string} [smooth=true] - optional number of px to use as a corner radius. true defaults to 8, false is 0
+ * @vue-computed {number[]} values - numeric values for the graph derived from the attributeKeys
+ */
+  export default {
+    name: 'SimpleGraphComponent',
+    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/simple-graph/index.js

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

package/plugins/simple-graph/package.json

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

package/plugins/simple-graph/simpleGraphView.js

@@ -0,0 +1,76 @@
+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/test/editor.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-  import { ref, inject } from '@vue/composition-api';
+  import { ref, inject } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { Context } from '@vcmap/core';
 

package/plugins/test/index.js

@@ -1,6 +1,8 @@
 import VectorSource from 'ol/source/Vector.js';
 import { Feature } from 'ol';
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import {
+  ButtonLocation, createModalAction, createToggleAction, setStateToUrl, ToolboxType, WindowSlot,
+} from '@vcmap/ui';
 import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
@@ -32,10 +34,7 @@ export default async function () {
             headerTitle: 'Context Editor',
           },
           component: editor,
-          slot: WindowSlot.STATIC,
-          position: {
-            width: 500,
-          },
+          slot: WindowSlot.DYNAMIC_LEFT,
         },
         app.windowManager,
         '@vcmap/test',
@@ -73,7 +72,37 @@ export default async function () {
         app.windowManager,
         '@vcmap/test',
       );
-      this._destroyActions = [destroyConfigEditorAction, destroyWindowAction, destroyIconAction];
+      const { action: clipboardDialogAction, destroy: destroryClipboardDialogAction } = createModalAction(
+        {
+          name: 'Create Link',
+        },
+        {
+          component: {
+            template: '<div>{{url}}</div>',
+            data() {
+              return {
+                url: '',
+              };
+            },
+            async created() {
+              this.url = setStateToUrl(await app.getState(true)).toString();
+            },
+          },
+          position: {
+            top: '50px',
+            left: '8%',
+            right: '8%',
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      this._destroyActions = [
+        destroyConfigEditorAction,
+        destroyWindowAction,
+        destroyIconAction,
+        destroryClipboardDialogAction,
+      ];
       const alertAction = {
         name: 'VC Systems',
         callback() {
@@ -101,10 +130,48 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
-      toolboxData.forEach(([{ id, icon, title, buttonComponents }, owner]) => {
-        const group = app.toolboxManager.requestGroup(id, icon, title);
-        buttonComponents.forEach(c => group.buttonManager.add(c, owner));
+      app.navbarManager.add(
+        {
+          id: 'createLink',
+          action: clipboardDialogAction,
+        },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
+      toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
+        let group;
+        if (app.toolboxManager.has(toolboxComponentOptions.id)) {
+          group = app.toolboxManager.get(toolboxComponentOptions.id);
+        } else {
+          group = app.toolboxManager.add(toolboxComponentOptions, owner);
+        }
+        if (group.type === ToolboxType.GROUP && buttonComponents) {
+          buttonComponents.forEach(c => group.buttonManager.add(c, owner));
+        }
       });
+
+      app.contextMenuManager.addEventHandler(async (event) => {
+        const actions = [{
+          id: 'foo2',
+          name: 'Log Position',
+          icon: '$vcsInfo',
+          callback() {
+            console.log(event.positionOrPixel);
+          },
+        }];
+        if (event.feature) {
+          actions.push({
+            id: 'foo',
+            name: 'Log Feature',
+            icon: '$vcsInfo',
+            callback() {
+              console.log('feature right clicked');
+              console.log(event.feature);
+            },
+          });
+        }
+        return actions;
+      }, '@vcmap/test');
     },
     destroy() {
       if (this._destroyActions) {

package/plugins/test/toolbox-data.js

@@ -1,104 +1,129 @@
+import { ToolboxType } from '@vcmap/ui';
+
+const dummySelectAction = {
+  active: false,
+  currentIndex: 0,
+  _stop() {
+    console.log('stopping session', this._session);
+    this._session = null;
+    this.active = false;
+  },
+  _start() {
+    const startSession = tool => ({ type: tool });
+    this._session = startSession(this.tools[this.currentIndex].name);
+    this.active = true;
+    console.log('starting session', this._session);
+  },
+  callback() {
+    if (this.active) {
+      this._stop();
+    } else {
+      this._start();
+    }
+  },
+  selected(index) {
+    this.currentIndex = index;
+    if (this.active) {
+      this._session.type = this.tools[this.currentIndex].name;
+      console.log('updating active session', this._session);
+    } else {
+      this._start();
+    }
+  },
+};
+
 // eslint-disable-next-line import/prefer-default-export
 export const toolboxData = [
   [
     {
-      id: 'select',
-      buttonComponents: [
-        {
-          id: 'select',
-          action: {
-            name: 'select',
-            title: 'select',
-            icon: '$vcsPointSelect',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ],
+      id: 'singleSelect',
+      type: ToolboxType.SINGLE,
+      action: {
+        name: 'select',
+        title: 'single select',
+        icon: '$vcsPointSelect',
+        active: false,
+        callback() { this.active = !this.active; },
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'multiSelect',
-      icon: '$vcsPen',
-      title: 'multi select',
-      buttonComponents: [
-        {
-          id: 'pen',
-          action: {
+      type: ToolboxType.SELECT,
+      action: {
+        name: 'multiSelect',
+        title: 'multi select',
+        ...dummySelectAction,
+        tools: [
+          {
             name: 'pen',
             title: 'Item 1',
             icon: '$vcsPen',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-        {
-          id: 'object',
-          action: {
+          {
             name: 'object',
             title: 'Item 2',
             icon: '$vcsObjectSelect',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-      ],
+        ],
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'measurement',
-      icon: '$vcsDimensionsHouse',
-      title: 'measurement',
-      buttonComponents: [
-        {
-          id: 'distance',
-          action: {
+      type: ToolboxType.SELECT,
+      action: {
+        name: 'measurement',
+        title: 'measurement',
+        ...dummySelectAction,
+        tools: [
+          {
             name: 'distance',
             title: '2D distance',
             icon: '$vcs2dDistance',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-        {
-          id: 'area',
-          action: {
+          {
             name: 'area',
             title: '2D area',
             icon: '$vcs2dArea',
-            active: false,
-            callback() { this.active = !this.active; },
           },
-        },
-      ],
+          {
+            name: 'distance3D',
+            title: '3D distance',
+            icon: '$vcs3dDistance',
+          },
+          {
+            name: 'area3D',
+            title: '3D area',
+            icon: '$vcs3dArea',
+          },
+        ],
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'toggle',
-      buttonComponents: [
-        {
-          id: 'split',
-          action: {
-            name: 'split',
-            title: 'split view',
-            icon: '$vcsSplitView',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ],
+      type: ToolboxType.SINGLE,
+      action: {
+        name: 'split',
+        title: 'split view',
+        icon: '$vcsSplitView',
+        active: false,
+        callback() { this.active = !this.active; },
+      },
     },
     '@vcmap/test',
   ],
   [
     {
       id: 'flight',
+      type: ToolboxType.GROUP,
       icon: '$vcsVideoRecorder',
       title: 'flight',
       buttonComponents: [

package/plugins/test/windowManagerExample.vue

@@ -14,7 +14,7 @@
 
 </style>
 <script>
-  import { inject, onUnmounted, ref, computed } from '@vue/composition-api';
+  import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
 
   import { WindowSlot, VcsButton } from '@vcmap/ui';

package/src/actions/stateRefAction.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import { check } from '@vcsuite/check';
 
 /**
@@ -30,7 +30,7 @@ const stateI18nMap = {
 /**
  * Creates an action
  * @param {string} name
- * @param {import("@vue/composition-api").Ref<StateActionState>} stateRef
+ * @param {import("vue").Ref<StateActionState>} stateRef
  * @param {function():void} callback
  * @returns {{ action: VcsAction, destroy: function():void }}
  */

package/src/actions/styleSelector.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-  import { computed, inject, onUnmounted, ref } from '@vue/composition-api';
+  import { computed, inject, onUnmounted, ref } from 'vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {

package/src/application/Navbar.vue

@@ -44,7 +44,13 @@
           </v-toolbar-items>
         </v-col>
         <v-col class="align-center d-flex justify-center">
-          <div v-if="$vuetify.breakpoint.mdAndUp" class="company-logo" />
+          <div v-if="$vuetify.breakpoint.mdAndUp" class="d-flex">
+            <img v-if="config.logo" class="logo" :src="config.logo" alt="Logo">
+            <div v-else class="company-logo logo" />
+            <div v-if="config.appTitle" class="ml-4">
+              {{ $t(config.appTitle) }}
+            </div>
+          </div>
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
           <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
@@ -109,10 +115,14 @@
   .v-toolbar__items > div{
     gap: 8px;
   }
+  .logo {
+    max-height: 36px;
+    margin: 0 auto;
+  }
 </style>
 
 <script>
-  import { inject, ref, computed } from '@vue/composition-api';
+  import { inject, ref, computed } from 'vue';
   import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import VcsActionList from '../components/lists/VcsActionList.vue';
@@ -137,6 +147,7 @@
         projectActions: getActions(ButtonLocation.PROJECT),
         shareActions: getActions(ButtonLocation.SHARE),
         menuActions: getActions(ButtonLocation.MENU),
+        config: app.uiConfig.config,
       };
     },
   };