@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/plugins/@vcmap-show-case/vector-properties-example/src/VectorPropertiesExample.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-sheet>
+    <v-container>
+      <v-row>
+        <v-col>
+          <VcsList
+            :items="propertiesToSelectFrom"
+            :selectable="true"
+            v-model="propertiesToDisplay"
+            title="Select all"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="hideDividers" label="Hide dividers" />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="expandable" label="Expandable" />
+        </v-col>
+      </v-row>
+    </v-container>
+    <VcsVectorPropertiesComponent
+      v-model="featureProperties"
+      :value-default="defaultOptions"
+      :show3-d-properties="is3D"
+      :properties="propertiesToDisplay.map((item) => item.name)"
+      :hide-dividers="hideDividers"
+      :expandable="expandable"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
+  import {
+    VcsVectorPropertiesComponent,
+    VcsList,
+    VcsCheckbox,
+  } from '@vcmap/ui';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { Feature } from 'ol';
+  import { Polygon } from 'ol/geom.js';
+
+  export const polygonCoords = [
+    [
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+      [13.374380945328324, 52.51418689937603, 33.692166432214975],
+      [13.376569529360477, 52.516925129014055, 34.36842554294618],
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+    ],
+  ];
+
+  export default {
+    name: 'VectorPropertiesExample',
+    components: {
+      VcsVectorPropertiesComponent,
+      VcsList,
+      VcsCheckbox,
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      /** @type {import('@vcmap/core').VcsApp} */
+      const vcsApp = inject('vcsApp');
+      const is3D = ref(false);
+
+      function updateIs3D() {
+        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
+      }
+      const mapActivatedListener =
+        vcsApp.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
+
+      const feature = new Feature({
+        geometry: new Polygon(polygonCoords),
+      });
+      const layer = new VectorLayer({
+        name: 'vectorPropertiesExampleLayer',
+        projection: {
+          epsg: 'EPSG:4326',
+        },
+      });
+
+      const featureProperties = ref(
+        layer.vectorProperties.getValuesForFeatures([feature]),
+      );
+      watch(featureProperties, () => {
+        layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
+          feature,
+        ]);
+      });
+
+      const defaultOptions = VectorProperties.getDefaultOptions();
+      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
+        name: key,
+        title: key,
+      }));
+
+      onMounted(() => {
+        vcsApp.layers.add(layer);
+        layer.addFeatures([feature]);
+        layer.activate();
+      });
+
+      onUnmounted(() => {
+        layer.deactivate();
+        vcsApp.layers.remove(layer);
+        layer.destroy();
+        mapActivatedListener();
+      });
+      return {
+        featureProperties,
+        defaultOptions,
+        is3D,
+        propertiesToSelectFrom,
+        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        hideDividers: ref(false),
+        expandable: ref(false),
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,40 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import component from './VectorPropertiesExample.vue';
+
+export default function createVectorPropertiesExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Vector Properties Example',
+        },
+        {
+          id: 'vector-properties-example',
+          state: {
+            headerTitle: 'Vector Properties Example',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'vectorProperties', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/window-tester/README.md

@@ -0,0 +1,3 @@
+# Window Tester
+
+This is a show-case plugin demonstrating the concept of [WINDOWS](../../../documentation/WINDOWS.md).

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

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

package/plugins/@vcmap-show-case/window-tester/src/EmptyComponent.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-sheet style="height: 100%">
+    <span> Static Window </span>
+  </v-sheet>
+</template>
+<style scoped>
+  .vcsTest span {
+    background-color: red;
+  }
+</style>
+<script>
+  import { VSheet } from 'vuetify/lib';
+
+  export default {
+    name: 'EmptyComponent',
+    components: { VSheet },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/src/MyCustomHeader.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div>
+      Ha, this is a custom Header with a
+      <span @click="clicked"> CLOSE thing. </span>
+    </div>
+    <div>
+      And here is '<b>{{ sample }}</b
+      >' passed through
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'MyCustomHeader',
+    props: {
+      sample: {
+        type: String,
+        default: 'MyCustomHeader',
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        clicked: () => {
+          emit('close');
+        },
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/src/WindowExample.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <VcsFormButton
+      v-for="(example, index) in examples"
+      :key="`b-${index}`"
+      @click="(e) => toggle(e, example)"
+      class="pa-1"
+    >
+      toggle {{ example }}
+    </VcsFormButton>
+
+    <VcsFormButton @click="toggleClass()" :active="showTestClass" class="pa-1">
+      Change Static2 TestClass
+    </VcsFormButton>
+  </div>
+</template>
+<style></style>
+<script>
+  import { inject, onUnmounted, ref, computed } from 'vue';
+  import { getLogger } from '@vcsuite/logger';
+
+  import { WindowSlot, VcsFormButton } from '@vcmap/ui';
+  import WindowExampleToggleChild from './WindowExampleToggleChild.vue';
+  import WindowExampleContent from './WindowExampleContent.vue';
+  import MyCustomHeader from './MyCustomHeader.vue';
+  import EmptyComponent from './EmptyComponent.vue';
+  import { name as owner } from '../package.json';
+
+  const showTestClass = ref(false);
+
+  export default {
+    name: 'WindowExample',
+    components: { VcsFormButton },
+    setup() {
+      const exampleWindows = [
+        {
+          id: 'dynamicLeft',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft'],
+          },
+          component: WindowExampleToggleChild,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft2'],
+          },
+          component: WindowExampleToggleChild,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2 large',
+          state: {
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example dynamicLeft2 with 1000px width',
+            ],
+          },
+          component: WindowExampleToggleChild,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          position: {
+            width: '1000px',
+          },
+        },
+        {
+          id: 'dynamicRight',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight'],
+          },
+          component: WindowExampleContent,
+          headerComponent: MyCustomHeader,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+          props: {
+            sample: 'A window property',
+          },
+        },
+        {
+          id: 'dynamicRight2',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight2'],
+          },
+          component: WindowExampleContent,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        {
+          id: 'static',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example static'],
+            styles: { 'background-color': 'red' },
+          },
+          component: WindowExampleToggleChild,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'static2',
+          state: {
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example static2 With TestClass',
+            ],
+            classes: {
+              vcsTest: computed(() => {
+                return showTestClass.value;
+              }),
+            },
+          },
+          component: EmptyComponent,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'position1',
+          state: {
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position1 relative',
+            ],
+          },
+          component: WindowExampleToggleChild,
+          position: {
+            left: '30%',
+            right: '30%',
+            top: '40%',
+            bottom: '20%',
+          },
+        },
+        {
+          id: 'position2',
+          state: {
+            hideHeader: false,
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position2 absolute',
+            ],
+          },
+          component: WindowExampleToggleChild,
+          position: {
+            left: '200px',
+            top: '300px',
+            minHeight: '250px',
+            maxHeight: '500px',
+            minWidth: '400px',
+            maxWidth: '1000px',
+          },
+        },
+      ];
+
+      onUnmounted(() => {
+        // can be used to get a callback when the window is closed
+        getLogger('windowManagerExample').log('got unmounted');
+      });
+
+      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 = exampleWindows.find(
+              (item) => item.id === windowId,
+            );
+            app.windowManager.add(windowComponentOptions, owner);
+          }
+        },
+        examples: exampleWindows.map((item) => item.id),
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleContent.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-sheet>
+    <span> content </span>
+  </v-sheet>
+</template>
+
+<style scoped></style>
+<script>
+  import { VSheet } from 'vuetify/lib';
+
+  export default {
+    name: 'WindowExampleContent',
+    components: { VSheet },
+    setup() {
+      return {};
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleToggleChild.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-container>
+    <VcsFormButton @click="toggle">toggle child</VcsFormButton>
+  </v-container>
+</template>
+
+<style scoped></style>
+<script>
+  import { VContainer } from 'vuetify/lib';
+  import { VcsFormButton, WindowSlot } from '@vcmap/ui';
+  import { inject } from 'vue';
+  import WindowExampleContent from './WindowExampleContent.vue';
+  import { name as owner } from '../package.json';
+
+  export default {
+    name: 'WindowExampleContent',
+    components: { VContainer, VcsFormButton },
+    setup(props, { attrs }) {
+      const app = inject('vcsApp');
+      const parentId = attrs['window-state'].id;
+      const childId = `dynamicChild-${parentId}`;
+      const childComponent = {
+        id: childId,
+        parentId,
+        state: {
+          headerTitle: 'Example dynamicChild',
+          headerIcon: 'mdi-human-child',
+        },
+        component: WindowExampleContent,
+        slot: WindowSlot.DYNAMIC_CHILD,
+      };
+
+      return {
+        toggle(e) {
+          if (app.windowManager.has(childId)) {
+            app.windowManager.remove(childId);
+          } else {
+            e.stopPropagation();
+            app.windowManager.add(childComponent, owner);
+          }
+        },
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,80 @@
+import { ButtonLocation, createToggleAction, ToolboxType } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import { getToolboxData } from './toolboxData.js';
+import windowExample from './WindowExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function windowTester() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Window Tester',
+        },
+        {
+          id: 'window-tester',
+          state: {
+            headerTitle: 'windowTester.title',
+          },
+          component: windowExample,
+          position: {
+            left: '55%',
+            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];
+    },
+    i18n: {
+      de: {
+        windowTester: {
+          title: 'Fenster Tester',
+        },
+      },
+      en: {
+        windowTester: {
+          title: 'Window Tester',
+        },
+      },
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach((cb) => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}