@vcmap/ui 5.0.0-rc.17 → 5.0.0-rc.20

package/plugins/{test/windowManagerExample.vue → @vcmap-show-case/window-tester/WindowExample.vue}

@@ -1,10 +1,14 @@
 <template>
   <div>
-    <VcsButton v-for="(example, index) in examples" :key="`b-${index}`" @click="(e) => toggle(e, example)">
+    <VcsButton
+      v-for="(example, index) in examples"
+      :key="`b-${index}`"
+      @click="(e) => toggle(e, example)"
+    >
       toggle {{ example }}
     </VcsButton>
 
-    <VcsButton @click="toggleClass()">
+    <VcsButton @click="toggleClass()" :active="showTestClass">
       Change Static2 TestClass
     </VcsButton>
   </div>
@@ -18,21 +22,21 @@
   import { getLogger } from '@vcsuite/logger';
 
   import { WindowSlot, VcsButton } from '@vcmap/ui';
-  import VcsContent from './vcsContent.vue';
+  import VcsContent from './windowExampleContent.vue';
   import MyCustomHeader from './myCustomHeader.vue';
   import EmptyComponent from './emptyComponent.vue';
 
   const showTestClass = ref(false);
 
   export default {
-    name: 'WindowManagerExample',
+    name: 'WindowExample',
     components: { VcsButton },
     setup() {
       const exampleWindows = [
         {
           id: 'dynamicLeft',
           headerTitle: 'Example dynamicLeft',
-          component: EmptyComponent,
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
@@ -40,15 +44,26 @@
           state: {
             headerTitle: 'Example dynamicLeft2',
           },
-          component: EmptyComponent,
+          component: VcsContent,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2 large',
+          state: {
+            headerTitle: 'Example dynamicLeft2 with 1000px width',
+          },
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_LEFT,
+          position: {
+            width: '1000px',
+          },
         },
         {
           id: 'dynamicRight',
           state: {
             headerTitle: 'Example dynamicRight',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
           props: {
@@ -60,7 +75,7 @@
           state: {
             headerTitle: 'Example dynamicRight2',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           slot: WindowSlot.DYNAMIC_RIGHT,
         },
         {
@@ -69,7 +84,7 @@
             headerTitle: 'Example static',
             styles: { 'background-color': 'red' },
           },
-          component: VcsContent,
+          component: EmptyComponent,
           slot: WindowSlot.STATIC,
         },
         {
@@ -82,7 +97,7 @@
               }),
             },
           },
-          component: VcsContent,
+          component: EmptyComponent,
           slot: WindowSlot.STATIC,
         },
         {
@@ -104,7 +119,7 @@
             hideHeader: false,
             headerTitle: 'Example position2 absolute',
           },
-          component: EmptyComponent,
+          component: VcsContent,
           position: {
             left: '200px',
             top: '300px',
@@ -121,25 +136,26 @@
         getLogger('windowManagerExample').log('got unmounted');
       });
 
-      /**
-       * @type {Map<string, WindowComponent>}
-       */
-      const windowComponents = new Map();
-
       const app = inject('vcsApp');
       return {
+        showTestClass,
         toggleClass() {
           showTestClass.value = !showTestClass.value;
+          if (app.windowManager.has('static2')) {
+            if (showTestClass.value) {
+              app.windowManager.get('static2').state.classes = ['vcsTest'];
+            } else {
+              app.windowManager.get('static2').state.classes = [];
+            }
+          }
         },
         toggle(e, windowId) {
           if (app.windowManager.has(windowId)) {
             app.windowManager.remove(windowId);
           } else {
             e.stopPropagation();
-            const windowComponentOptions =
-              windowComponents.get(windowId) || exampleWindows.find(item => item.id === windowId);
-            const windowComponent = app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
-            windowComponents.set(windowId, windowComponent);
+            const windowComponentOptions = exampleWindows.find(item => item.id === windowId);
+            app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
           }
         },
         examples: exampleWindows.map(item => item.id),

package/plugins/{test → @vcmap-show-case/window-tester}/emptyComponent.vue

@@ -1,10 +1,15 @@
 <template>
   <v-sheet style="height: 100%">
-    Statisches Window
-    <v-sheet />
+    <span>
+      Static Window
+    </span>
   </v-sheet>
 </template>
-
+<style scoped>
+.vcsTest span {
+  background-color: red;
+}
+</style>
 <script>
 
   import { VSheet } from 'vuetify/lib';

package/plugins/@vcmap-show-case/window-tester/index.js

@@ -0,0 +1,62 @@
+import {
+  ButtonLocation, createToggleAction, ToolboxType,
+} from '@vcmap/ui';
+import packageJSON from './package.json';
+import { getToolboxData } from './toolbox-data.js';
+import windowExample from './WindowExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function () {
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Window Tester',
+        },
+        {
+          id: 'window-tester',
+          state: {
+            headerTitle: 'Window Tester',
+          },
+          component: windowExample,
+          position: {
+            left: '60%',
+            right: '10%',
+            top: '10%',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'window-tester', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
+      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));
+        }
+      });
+      this._destroyAction = [destroy, destroyToolboxData];
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach(cb => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/window-tester/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/window-tester",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/window-tester/toolbox-data.js

@@ -0,0 +1,211 @@
+import { ToolboxType } from '@vcmap/ui';
+import { reactive } from 'vue';
+import WindowExampleContent from './windowExampleContent.vue';
+import packageJSON from './package.json';
+
+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();
+    }
+  },
+};
+
+function createDummyTriStateAction(app) {
+  const windowComponent = {
+    id: 'tri-state-example',
+    state: {
+      headerTitle: 'Example Session Toggle',
+    },
+    component: WindowExampleContent,
+  };
+
+  const action = reactive({
+    name: 'tri-state-action',
+    icon: 'mdi-triangle',
+    active: false,
+    background: false,
+    callback() {
+      if (this.active) {
+        if (this.background) {
+          return app.windowManager.add(windowComponent, '@vcmap/test');
+        } else {
+          app.windowManager.remove(windowComponent.id);
+          this.active = false;
+        }
+      } else {
+        this.active = true;
+        return app.windowManager.add(windowComponent, '@vcmap/test');
+      }
+      return null;
+    },
+  });
+
+  const listeners = [
+    app.windowManager.added.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.active = true;
+        action.background = false;
+      }
+    }),
+    app.windowManager.removed.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.background = true;
+      }
+    }),
+  ];
+
+  const destroy = () => {
+    if (app.windowManager.has(windowComponent.id)) {
+      app.windowManager.remove(windowComponent.id);
+    }
+    listeners.forEach(cb => cb());
+  };
+
+  return { action, destroy };
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function getToolboxData(app) {
+  const { action: triStateAction, destroy } = createDummyTriStateAction(app);
+
+  const toolboxData = [
+    [
+      {
+        id: 'singleSelect',
+        type: ToolboxType.SINGLE,
+        action: {
+          name: 'select',
+          title: 'single select',
+          icon: '$vcsPointSelect',
+          active: false,
+          callback() { this.active = !this.active; },
+        },
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'multiSelect',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'multiSelect',
+          title: 'multi select',
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'pen',
+              title: 'Item 1',
+              icon: '$vcsPen',
+            },
+            {
+              name: 'object',
+              title: 'Item 2',
+              icon: '$vcsObjectSelect',
+            },
+          ],
+        },
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'measurement',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'measurement',
+          title: 'measurement',
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'distance',
+              title: '2D distance',
+              icon: '$vcs2dDistance',
+            },
+            {
+              name: 'area',
+              title: '2D area',
+              icon: '$vcs2dArea',
+            },
+            {
+              name: 'distance3D',
+              title: '3D distance',
+              icon: '$vcs3dDistance',
+            },
+            {
+              name: 'area3D',
+              title: '3D area',
+              icon: '$vcs3dArea',
+            },
+          ],
+        },
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'toggle',
+        type: ToolboxType.SINGLE,
+        action: triStateAction,
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'flight',
+        type: ToolboxType.GROUP,
+        icon: '$vcsVideoRecorder',
+        title: 'flight',
+        buttonComponents: [
+          {
+            id: 'flight',
+            action: {
+              name: 'flight',
+              title: 'add flight',
+              icon: 'mdi-camera-plus',
+              active: false,
+              callback() { this.active = !this.active; },
+            },
+          },
+          {
+            id: 'export',
+            action: {
+              name: 'export',
+              title: 'export flight',
+              icon: '$vcsExportFlight',
+              active: false,
+              callback() { this.active = !this.active; },
+            },
+          },
+        ],
+      },
+      packageJSON.name,
+    ],
+  ];
+
+  return { toolboxData, destroy };
+}

package/plugins/{test/vcsContent.vue → @vcmap-show-case/window-tester/windowExampleContent.vue}

@@ -8,16 +8,12 @@
 
 <style scoped>
 
-.vcsTest span {
-  background-color: red;
-}
-
 </style>
 <script>
   import { VSheet } from 'vuetify/lib';
 
   export default {
-    name: 'VcsContent',
+    name: 'WindowExampleContent',
     components: { VSheet },
     setup() {
       return { };

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

@@ -0,0 +1,3 @@
+# Wizard Example
+
+This is a show-case plugin demonstrating the usage of [VcsWizard](../../../src/components/form-inputs-controls/VcsWizard.vue).

package/plugins/{wizardExample → @vcmap-show-case/wizard-example}/index.js

@@ -1,15 +1,21 @@
 import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
 import WizardExample from './wizardExample.vue';
 
+/**
+ * @returns {VcsPlugin}
+ */
 export default async () => {
   return {
-    name: 'wizardExample',
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
-          name: 'wizardExample',
-          icon: '$vcsLegend',
-          title: 'VCS Wizard Example',
+          name: 'Wizard Example',
+          icon: '$vcsWand',
+          title: 'Wizard Example Plugin',
         },
         {
           id: 'wizard-example',
@@ -22,11 +28,11 @@ export default async () => {
           },
         },
         app.windowManager,
-        'wizardExample',
+        packageJSON.name,
       );
       app.navbarManager.add(
         { id: 'wizard-example', action },
-        'wizardExample',
+        packageJSON.name,
         ButtonLocation.TOOL,
       );
       this._destroyAction = destroy;

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

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/wizard-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/wizard-example/wizardExample.vue

@@ -0,0 +1,95 @@
+<template>
+  <VcsWizard
+    v-model.number="step"
+  >
+    <VcsWizardStep
+      step="1"
+      :complete="step > 1"
+      help-text="1. this is the help text"
+      heading="This is the first step"
+      v-model.number="step"
+    >
+      <template #content>
+        <div>
+          This is the content of the first step.
+        </div>
+        <VcsButton
+          @click="increaseStep()"
+          class="my-2"
+        >
+          Next
+        </VcsButton>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep
+      :rules="[() => false]"
+      step="2"
+      editable
+      :header-actions="actions.second"
+      heading="This is the second step"
+      v-model.number="step"
+    >
+      <template #help>
+        <ol>
+          <li>this</li>
+          <li>is</li>
+          <li>the help slot</li>
+        </ol>
+      </template>
+      <template #content>
+        <VcsSelect
+          :items="['this', 'is', 'a', 'test']"
+          v-model="selection"
+          label="Select"
+          class="my-2"
+        />
+        <VcsButton
+          @click="decreaseStep()"
+        >
+          Back
+        </VcsButton>
+      </template>
+    </VcsWizardStep>
+  </VcsWizard>
+</template>
+
+<script>
+  import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { ref } from 'vue';
+
+  /** Component to showcase the VcsWizard and VcsWizardStep. */
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VcsWizardStep,
+      VcsButton,
+      VcsSelect,
+    },
+    setup() {
+      const step = ref(1);
+      const selection = ref();
+      const actions = {
+        second: [{
+          name: 'resetSecondStep',
+          title: 'Reset step',
+          icon: '$vcsReturn',
+          callback() {
+            selection.value = undefined;
+          },
+        }],
+      };
+      return {
+        step,
+        increaseStep() { step.value += 1; },
+        decreaseStep() { step.value -= 1; },
+        selection,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/plugins/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@vcmap/hello-world": "^1.0.7",
-    "@vcmap/print": "^1.0.1"
+    "@vcmap/print": "^1.0.2",
+    "@vcmap/swipe-tool": "^1.0.3"
   }
 }

package/src/actions/actionHelper.js

@@ -1,6 +1,8 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
-import { Collection, Extent, MapCollection, mercatorProjection, Viewpoint } from '@vcmap/core';
+import {
+  Collection, Extent, MapCollection, mercatorProjection, Viewpoint,
+} from '@vcmap/core';
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
@@ -115,10 +117,8 @@ export function createSearchButtonAction(app) {
           id: 'searchId',
           component: SearchComponent,
           state: { hideHeader: true },
-          slot: WindowSlot.DETACHED,
+          slot: WindowSlot.DYNAMIC_RIGHT,
           position: {
-            right: 0,
-            top: 0,
             width: 440,
           },
         },

package/src/actions/stateRefAction.js

@@ -19,14 +19,6 @@ const stateIconMap = {
   [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
@@ -42,14 +34,12 @@ export function createStateRefAction(name, stateRef, callback) {
   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 {