@vcmap/ui 5.0.0-rc.8 → 5.0.0

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

@@ -0,0 +1,288 @@
+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: 'singleSelect2',
+        type: ToolboxType.SINGLE,
+        action: {
+          name: 'select',
+          title: 'single select',
+          icon: 'mdi-eye',
+          active: false,
+          disabled: false,
+          callback() {
+            this.disabled = true;
+            setTimeout(() => {
+              this.disabled = false;
+            }, 2000);
+          },
+        },
+      },
+      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',
+              disabled: true,
+            },
+          ],
+        },
+      },
+      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',
+              disabled: true,
+              active: false,
+              callback() {
+                this.active = !this.active;
+              },
+            },
+          },
+        ],
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'flight2',
+        type: ToolboxType.GROUP,
+        icon: '$vcsVideoRecorder',
+        title: 'flight2',
+        disabled: true,
+        buttonComponents: [
+          {
+            id: 'flight',
+            action: {
+              name: 'flight',
+              title: 'add flight',
+              icon: 'mdi-camera-plus',
+              active: false,
+              callback() {
+                this.active = !this.active;
+              },
+            },
+          },
+        ],
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'multiSelect2',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'multiSelect',
+          title: 'multi select',
+          disabled: true,
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'pen',
+              title: 'Item 3',
+              icon: '$vcsPen',
+            },
+            {
+              name: 'object',
+              title: 'Item 4',
+              icon: '$vcsObjectSelect',
+            },
+          ],
+        },
+      },
+      packageJSON.name,
+    ],
+  ];
+
+  return { toolboxData, destroy };
+}

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/@vcmap-show-case/wizard-example/package.json

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

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

@@ -0,0 +1,127 @@
+<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>
+        <!-- px-2 because does not contain input components -->
+        <v-container class="px-2 py-0">
+          <div>This is the content of the first step.</div>
+          <VcsFormButton @click="increaseStep()" class="my-2">
+            Next
+          </VcsFormButton>
+        </v-container>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep
+      step="2"
+      editable
+      :header-actions="actions.second"
+      heading="This is the second step"
+      v-model.number="step"
+      :rules="[(v) => !!formValid]"
+    >
+      <template #help>
+        Allowed options:
+        <ol>
+          <li>is</li>
+          <li>a</li>
+          <li>test</li>
+        </ol>
+      </template>
+      <template #content>
+        <v-container class="px-1 py-0">
+          <v-form ref="form" v-model="formValid" lazy-validation>
+            <VcsSelect
+              :items="['this', 'is', 'a', 'test']"
+              v-model="selection"
+              placeholder="Select"
+              :rules="[
+                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+              ]"
+            />
+            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
+          </v-form>
+        </v-container>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep step="3" v-model.number="step">
+      <template #header>
+        <div class="d-flex flex-grow-1 flex-row-reverse">
+          <VcsFormButton
+            :disabled="!selection || !formValid"
+            @click="finish()"
+            variant="filled"
+          >
+            Finish
+          </VcsFormButton>
+        </div>
+      </template>
+    </VcsWizardStep>
+  </VcsWizard>
+</template>
+
+<script>
+  import {
+    VcsWizard,
+    VcsWizardStep,
+    VcsFormButton,
+    VcsSelect,
+  } from '@vcmap/ui';
+  import { VForm, VContainer } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  /** Component to showcase the VcsWizard and VcsWizardStep. */
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VcsWizardStep,
+      VcsFormButton,
+      VcsSelect,
+      VForm,
+      VContainer,
+    },
+    setup() {
+      const step = ref(1);
+      const selection = ref();
+      const form = ref();
+      const formValid = ref(false);
+      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,
+        formValid,
+        form,
+        finish() {
+          step.value = 1;
+          form.value.reset();
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,53 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import WizardExample from './WizardExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async () => {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Wizard Example',
+          icon: '$vcsWand',
+          title: 'Wizard Example Plugin',
+        },
+        {
+          id: 'wizard-example',
+          component: WizardExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'VCS Wizard',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'wizard-example', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/package.json

@@ -1,5 +1,12 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.0"
-  }
+    "@vcmap/print": "^1.0.2",
+    "@vcmap/swipe-tool": "^1.0.3",
+    "@vcmap/export": "^1.0.1",
+    "@vcmap/shadow": "^1.0.1",
+    "@vcmap/draw": "^1.0.0",
+    "@vcmap/create-link": "^1.0.1",
+    "@vcmap/search-nominatim": "^1.0.1"
+  },
+  "optionalDependencies": {}
 }

package/public/assets/@mdi/font/LICENSE

@@ -0,0 +1,20 @@
+Pictogrammers Free License
+--------------------------
+
+This icon collection is released as free, open source, and GPL friendly by
+the [Pictogrammers](http://pictogrammers.com/) icon group. You may use it
+for commercial projects, open source projects, or anything really.
+
+# Icons: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+Some of the icons are redistributed under the Apache 2.0 license. All other
+icons are either redistributed under their respective licenses or are
+distributed under the Apache 2.0 license.
+
+# Fonts: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+All web and desktop fonts are distributed under the Apache 2.0 license. Web
+and desktop fonts contain some icons that are redistributed under the Apache
+2.0 license. All other icons are either redistributed under their respective
+licenses or are distributed under the Apache 2.0 license.
+
+# Code: MIT (https://opensource.org/licenses/MIT)
+The MIT license applies to all non-font and non-icon files.