@vcmap/ui 5.0.0-rc.10

package/plugins/example/mySuperComponent.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-sheet style="height: 100%">
+    <v-container class="pa-2">
+      <v-row
+        dense
+        align="center"
+      >
+        <v-col>
+          <label> test</label>
+        </v-col>
+        <v-col>
+          <v-text-field hide-details dense outlined />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field dense hide-details outlined class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field dense hide-details class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" dense hide-details outlined class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" dense hide-details class="ma-0" />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field hide-details outlined />
+        </v-col>
+        <v-col>
+          <v-text-field
+            hide-details
+            class="ma-0 pb-1 pt-1"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" hide-details outlined />
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="test"
+            hide-details
+            class="ma-0 pb-1 pt-1"
+          />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            @mouseover="hover1 = true"
+            @mouseleave="hover1 = false"
+            :outlined="hover1"
+            class="ma-0"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            @mouseover="hover2 = true"
+            @mouseleave="hover2 = false"
+            :outlined="hover2"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            label="test"
+            @mouseover="hover3 = true"
+            @mouseleave="hover3 = false"
+            :outlined="hover3"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            label="test"
+            @mouseover="hover4 = true"
+            @mouseleave="hover4 = false"
+            :outlined="hover4"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <button
+      @click="outlined = !outlined"
+    >
+      test
+    </button>
+  </v-sheet>
+</template>
+<script>
+
+  import Vue from 'vue';
+
+  export default {
+    name: 'MySuperComponent',
+    components: {
+    },
+    data() {
+      return {
+        hover1: false,
+        hover2: false,
+        hover3: false,
+        hover4: false,
+        outlined: false,
+        email: 'test',
+      };
+    },
+  };
+</script>

package/plugins/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@vcmap/hello-world": "^1.0.0"
+  }
+}

package/plugins/test/allIconsComponent.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-sheet class="overflow-auto icons-window">
+    <v-list>
+      <v-list-item
+        v-for="icon in icons"
+        :key="icon"
+      >
+        <v-list-item-title>{{ icon }}</v-list-item-title>
+        <v-list-item-icon>
+          <v-icon>{{ icon }}</v-icon>
+        </v-list-item-icon>
+      </v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script>
+  import { Icons } from '@vcmap/ui';
+
+  export default {
+    name: 'AllIconsComponent',
+    computed: {
+      icons() {
+        return Object.keys(Icons).map(n => `$${n}`);
+      },
+    },
+  };
+</script>
+
+<style scoped>
+.icons-window {
+  max-height: 600px;
+}
+</style>

package/plugins/test/editor.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <v-textarea
+      v-model="configString"
+      v-if="!loading"
+    />
+    <v-progress-circular
+      v-else
+    />
+
+    <VcsButton @click="replaceContext">
+      Apply
+    </VcsButton>
+    <VcsButton @click="removeContext">
+      Remove
+    </VcsButton>
+  </div>
+</template>
+
+<script>
+  import { ref, inject } from '@vue/composition-api';
+  import { VcsButton } from '@vcmap/ui';
+  import { Context } from '@vcmap/core';
+
+  const contextId = 'foo';
+
+  export default {
+    name: 'Editor',
+    components: {
+      VcsButton,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const context = app.getContextById(contextId);
+      const configString = ref(JSON.stringify(context ? context.config : {}, null, 2));
+      const loading = ref(false);
+
+      return {
+        configString,
+        loading,
+        async replaceContext() {
+          loading.value = true;
+          const config = JSON.parse(configString.value);
+          config.id = contextId;
+          const newContext = new Context(config);
+          await this.removeContext();
+          await app.addContext(newContext);
+          loading.value = false;
+        },
+        async removeContext() {
+          if (app.getContextById(contextId)) {
+            await app.removeContext(contextId);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/plugins/test/emptyComponent.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-sheet style="height: 100%">
+    Statisches Window
+    <v-sheet />
+  </v-sheet>
+</template>
+
+<script>
+
+  export default {
+    name: 'EmptyComponent',
+  };
+</script>

package/plugins/test/index.js

@@ -0,0 +1,116 @@
+import VectorSource from 'ol/source/Vector.js';
+import { Feature } from 'ol';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { toolboxData } from './toolbox-data.js';
+import editor from './editor.vue';
+import windowManagerExample from './windowManagerExample.vue';
+import AllIconsComponent from './allIconsComponent.vue';
+
+let source;
+
+function getSource() {
+  if (!source) {
+    source = new VectorSource();
+  }
+  return source;
+}
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function () {
+  return {
+    name: '@vcmap/test',
+    onVcsAppMounted(app) {
+      const { action: configEditorAction, destroy: destroyConfigEditorAction } = createToggleAction(
+        {
+          name: 'Config Editor',
+        },
+        {
+          id: 'config-editor',
+          state: {
+            headerTitle: 'Context Editor',
+          },
+          component: editor,
+          slot: WindowSlot.STATIC,
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      const { action: windowAction, destroy: destroyWindowAction } = createToggleAction(
+        {
+          name: 'Windows',
+        },
+        {
+          id: 'windowManagerExample',
+          state: {
+            headerTitle: 'windowManager Example',
+          },
+          component: windowManagerExample,
+          position: {
+            left: '60%',
+            right: '10%',
+            top: '10%',
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      const { action: iconAction, destroy: destroyIconAction } = createToggleAction(
+        {
+          name: 'Icons',
+        },
+        {
+          id: 'allIcons',
+          state: {
+            headerTitle: 'All Icons',
+          },
+          component: AllIconsComponent,
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      this._destroyActions = [destroyConfigEditorAction, destroyWindowAction, destroyIconAction];
+      const alertAction = {
+        name: 'VC Systems',
+        callback() {
+          getSource().addFeature(new Feature({}));
+          window.alert(`there are ${getSource().getFeatures().length} features ${app.maps.activeMap.name}`);
+        },
+      };
+      app.navbarManager.add(
+        { id: 'config-editor', action: configEditorAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
+      app.navbarManager.add(
+        { id: 'windowManagerExample', action: windowAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
+      app.navbarManager.add(
+        { id: 'allIcons', action: iconAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
+      app.navbarManager.add(
+        { id: 'alert', action: alertAction },
+        '@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));
+      });
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach(cb => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/plugins/test/myCustomHeader.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'MyCustomHeader',
+    setup(props, { emit }) {
+      return {
+        clicked: () => {
+          emit('close');
+        },
+      };
+    },
+  };
+</script>

package/plugins/test/toolbox-data.js

@@ -0,0 +1,129 @@
+// 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; },
+          },
+        },
+      ],
+    },
+    '@vcmap/test',
+  ],
+  [
+    {
+      id: 'multiSelect',
+      icon: '$vcsPen',
+      title: 'multi select',
+      buttonComponents: [
+        {
+          id: 'pen',
+          action: {
+            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: {
+            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; },
+          },
+        },
+      ],
+    },
+    '@vcmap/test',
+  ],
+  [
+    {
+      id: 'toggle',
+      buttonComponents: [
+        {
+          id: 'split',
+          action: {
+            name: 'split',
+            title: 'split view',
+            icon: '$vcsSplitView',
+            active: false,
+            callback() { this.active = !this.active; },
+          },
+        },
+      ],
+    },
+    '@vcmap/test',
+  ],
+  [
+    {
+      id: 'flight',
+      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; },
+          },
+        },
+      ],
+    },
+    '@vcmap/test',
+  ],
+];

package/plugins/test/vcsContent.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-sheet>
+    <span>
+      content
+    </span>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+.vcsTest span {
+  background-color: red;
+}
+
+</style>
+<script>
+  export default {
+    name: 'VcsContent',
+    setup() {
+      return { };
+    },
+  };
+</script>

package/plugins/test/windowManagerExample.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <VcsButton v-for="(example, index) in examples" :key="`b-${index}`" @click="(e) => toggle(e, example)">
+      toggle {{ example }}
+    </VcsButton>
+
+    <VcsButton @click="toggleClass()">
+      Change Static2 TestClass
+    </VcsButton>
+  </div>
+</template>
+<style>
+
+
+</style>
+<script>
+  import { inject, onUnmounted, ref, computed } from '@vue/composition-api';
+  import { getLogger } from '@vcsuite/logger';
+
+  import { WindowSlot, VcsButton } from '@vcmap/ui';
+  import VcsContent from './vcsContent.vue';
+  import MyCustomHeader from './myCustomHeader.vue';
+  import EmptyComponent from './emptyComponent.vue';
+
+  const showTestClass = ref(false);
+
+  export default {
+    name: 'WindowManagerExample',
+    components: { VcsButton },
+    setup() {
+      const exampleWindows = [
+        {
+          id: 'dynamicLeft',
+          headerTitle: 'Example dynamicLeft',
+          component: EmptyComponent,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2',
+          state: {
+            headerTitle: 'Example dynamicLeft2',
+          },
+          component: EmptyComponent,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicRight',
+          state: {
+            headerTitle: 'Example dynamicRight',
+          },
+          component: EmptyComponent,
+          headerComponent: MyCustomHeader,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        {
+          id: 'dynamicRight2',
+          state: {
+            headerTitle: 'Example dynamicRight2',
+          },
+          component: EmptyComponent,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        {
+          id: 'static',
+          state: {
+            headerTitle: 'Example static',
+            styles: { 'background-color': 'red' },
+          },
+          component: VcsContent,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'static2',
+          state: {
+            headerTitle: 'Example static2 With TestClass',
+            classes: {
+              vcsTest: computed(() => {
+                return showTestClass.value;
+              }),
+            },
+          },
+          component: VcsContent,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'position1',
+          state: {
+            headerTitle: 'Example position1',
+          },
+          component: VcsContent,
+          position: {
+            left: '30%',
+            right: '30%',
+            top: '40%',
+            bottom: '20%',
+          },
+        },
+        {
+          id: 'position2',
+          state: {
+            hideHeader: true,
+            headerTitle: 'Example position2',
+          },
+          component: EmptyComponent,
+          position: {
+            left: '35%',
+            right: '35%',
+            top: '40%',
+            bottom: '20%',
+          },
+        },
+      ];
+
+      onUnmounted(() => {
+        // can be used to get a callback when the window is closed
+        getLogger('windowManagerExample').log('got unmounted');
+      });
+
+      /**
+       * @type {Map<string, WindowComponent>}
+       */
+      const windowComponents = new Map();
+
+      const app = inject('vcsApp');
+      return {
+        toggleClass() {
+          showTestClass.value = !showTestClass.value;
+        },
+        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);
+          }
+        },
+        examples: exampleWindows.map(item => item.id),
+      };
+    },
+  };
+</script>