@vcmap/ui 6.0.0-rc.6 → 6.0.0-rc.8

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-5dda32d2.js";
+export * from "./ui-bf3d1f84.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-87bc6efe.js";
+export * from "./vue-43880c5a.js";

package/dist/assets/{vuetify-4c4e4217.js → vuetify-99bf601c.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-4c4e4217.css');import { watch as Z, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as le, reactive as gt, computed as y, watchEffect as Le, toRefs as Wt, capitalize as On, isVNode as Lc, Comment as Rc, unref as it, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Be, inject as be, defineComponent as Hc, camelize as Ir, h as jt, toRaw as _e, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ge, nextTick as we, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as O, onBeforeMount as Tr, withDirectives as $e, resolveDirective as ct, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-87bc6efe.js";
+} await loadCss('./assets/vuetify-99bf601c.css');import { watch as Z, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as le, reactive as gt, computed as y, watchEffect as Le, toRefs as Wt, capitalize as On, isVNode as Lc, Comment as Rc, unref as it, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Be, inject as be, defineComponent as Hc, camelize as Ir, h as jt, toRaw as _e, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ge, nextTick as we, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as O, onBeforeMount as Tr, withDirectives as $e, resolveDirective as ct, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-43880c5a.js";
 function ot(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-4c4e4217.js";
+export * from "./vuetify-99bf601c.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.6",
+  "version": "6.0.0-rc.8",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -56,8 +56,8 @@
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^10.0.1",
-    "@vcmap/core": "^6.0.0-rc.5",
+    "@vcmap-cesium/engine": "^11.0.2",
+    "@vcmap/core": "^6.0.0-rc.8",
     "ol": "^10.0.0",
     "vue": "~3.4.38",
     "vuetify": "^3.7.1"

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -41,9 +41,9 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col>
+            <v-col cols="6">
               <VcsLabel :disabled="disabled" html-for="conditionalInput">
-                ConditionalInput
+                Conditional Input with long label
               </VcsLabel>
             </v-col>
             <v-col>

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -39,10 +39,9 @@
                   parentId: name,
                   slot: WindowSlot.DYNAMIC_CHILD,
                   props: {
-                    getConfig: () =>
-                      Promise.resolve(
-                        vcsApp.plugins.getSerializedByKey(plugin.name),
-                      ),
+                    getConfig: () => {
+                      return vcsApp.plugins.getSerializedByKey(plugin.name);
+                    },
                     setConfig(config) {
                       if (config) {
                         vcsApp.notifier.add({

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -13,7 +13,7 @@
         <v-icon
           v-if="module.description && toggleable"
           right
-          v-bind="{ ...$attrs, ...props }"
+          v-bind="{ ...$attrs, ...$props }"
         >
           mdi-help-circle
         </v-icon>

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

@@ -0,0 +1,420 @@
+<script setup>
+  import {
+    inject,
+    computed,
+    shallowRef,
+    onUnmounted,
+    ref,
+    onMounted,
+    provide,
+  } from 'vue';
+  import { unByKey } from 'ol/Observable';
+  import { Viewpoint, VectorProperties } from '@vcmap/core';
+  import { VcsFormSection, VcsFormButton } from '@vcmap/ui';
+  import { VContainer, VRow, VCol, VDivider } from 'vuetify/components';
+  import { name } from '../package.json';
+  import {
+    getArrowFeature,
+    getCircleFeature,
+    getGeometryCollectionFeature,
+    getLabelFeature,
+    getLineStringFeature,
+    getLineStringsFeature,
+    getModelFeature,
+    getPointFeature,
+    getPointsFeature,
+    getPolygonFeature,
+    getPolygonsFeature,
+    getPrimitiveFeature,
+    getTiltedLineStringFeature,
+    getTiltedPolygonFeature,
+  } from './lib.js';
+  import LayoutHandler from './LayoutHandler.vue';
+
+  /** @type {import("@vcmap/ui").VcsUiApp} */
+  const vcsApp = inject('vcsApp');
+  const { layer } = vcsApp.plugins.getByKey(name);
+  const features = shallowRef(layer.getFeatures());
+  provide('features', features);
+  /** @type {import("ol/source").Vector} */
+  const source = layer.getSource();
+
+  const props = defineProps({
+    featureProperties: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const sourceListeners = [
+    source.on('addfeature', ({ feature }) => {
+      new VectorProperties({}).setValuesForFeatures(props.featureProperties, [
+        feature,
+      ]);
+      features.value = layer.getFeatures();
+    }),
+    source.on('removefeature', () => {
+      features.value = layer.getFeatures();
+    }),
+  ];
+
+  const layout = ref('XYZ');
+
+  const primitive = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Primitive');
+    },
+    set(value) {
+      if (value && !primitive.value) {
+        layer.addFeatures([getPrimitiveFeature(layout.value)]);
+      } else if (primitive.value) {
+        source.removeFeature(source.getFeatureById('Primitive'));
+      }
+    },
+  });
+
+  const model = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Model');
+    },
+    set(value) {
+      if (value && !model.value) {
+        layer.addFeatures([getModelFeature(layout.value)]);
+      } else if (model.value) {
+        source.removeFeature(source.getFeatureById('Model'));
+      }
+    },
+  });
+
+  const label = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Label');
+    },
+    set(value) {
+      if (value && !label.value) {
+        layer.addFeatures([getLabelFeature(layout.value)]);
+      } else if (label.value) {
+        source.removeFeature(source.getFeatureById('Label'));
+      }
+    },
+  });
+
+  const arrow = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Arrow');
+    },
+    set(value) {
+      if (value && !arrow.value) {
+        layer.addFeatures([getArrowFeature(layout.value)]);
+      } else if (arrow.value) {
+        source.removeFeature(source.getFeatureById('Arrow'));
+      }
+    },
+  });
+
+  const circle = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Circle');
+    },
+    set(value) {
+      if (value && !circle.value) {
+        layer.addFeatures([getCircleFeature(layout.value)]);
+      } else if (circle.value) {
+        source.removeFeature(source.getFeatureById('Circle'));
+      }
+    },
+  });
+
+  const point = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Point');
+    },
+    set(value) {
+      if (value && !point.value) {
+        layer.addFeatures([getPointFeature(layout.value)]);
+      } else if (point.value) {
+        source.removeFeature(source.getFeatureById('Point'));
+      }
+    },
+  });
+
+  const points = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Points');
+    },
+    set(value) {
+      if (value && !points.value) {
+        layer.addFeatures([getPointsFeature(layout.value)]);
+      } else if (points.value) {
+        source.removeFeature(source.getFeatureById('Points'));
+      }
+    },
+  });
+
+  const lineString = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'LineString');
+    },
+    set(value) {
+      if (value && !lineString.value) {
+        layer.addFeatures([getLineStringFeature(layout.value)]);
+      } else if (lineString.value) {
+        source.removeFeature(source.getFeatureById('LineString'));
+      }
+    },
+  });
+
+  const lineStrings = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'LineStrings');
+    },
+    set(value) {
+      if (value && !lineStrings.value) {
+        layer.addFeatures([getLineStringsFeature(layout.value)]);
+      } else if (lineStrings.value) {
+        source.removeFeature(source.getFeatureById('LineStrings'));
+      }
+    },
+  });
+
+  const polygon = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Polygon');
+    },
+    set(value) {
+      if (value && !polygon.value) {
+        layer.addFeatures([getPolygonFeature(layout.value)]);
+      } else if (polygon.value) {
+        source.removeFeature(source.getFeatureById('Polygon'));
+      }
+    },
+  });
+
+  const polygons = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'Polygons');
+    },
+    set(value) {
+      if (value && !polygons.value) {
+        layer.addFeatures([getPolygonsFeature(layout.value)]);
+      } else if (polygons.value) {
+        source.removeFeature(source.getFeatureById('Polygons'));
+      }
+    },
+  });
+
+  const geometryCollection = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'GeometryCollection');
+    },
+    set(value) {
+      if (value && !geometryCollection.value) {
+        layer.addFeatures([getGeometryCollectionFeature(layout.value)]);
+      } else if (geometryCollection.value) {
+        source.removeFeature(source.getFeatureById('GeometryCollection'));
+      }
+    },
+  });
+
+  const tiltedPolygon = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'TiltedPolygon');
+    },
+    set(value) {
+      if (value && !geometryCollection.value) {
+        layer.addFeatures([getTiltedPolygonFeature(layout.value)]);
+      } else if (geometryCollection.value) {
+        source.removeFeature(source.getFeatureById('TiltedPolygon'));
+      }
+    },
+  });
+
+  const tiltedLineString = computed({
+    get() {
+      return features.value.some((f) => f.getId() === 'TiltedLineString');
+    },
+    set(value) {
+      if (value && !geometryCollection.value) {
+        layer.addFeatures([getTiltedLineStringFeature(layout.value)]);
+      } else if (geometryCollection.value) {
+        source.removeFeature(source.getFeatureById('TiltedLineString'));
+      }
+    },
+  });
+
+  const reset = {
+    name: 'reset',
+    icon: '$vcsReturn',
+    callback() {
+      layer.removeAllFeatures();
+      layer.addFeatures([
+        getPrimitiveFeature(),
+        getModelFeature(),
+        getCircleFeature(),
+        getPointFeature(),
+        getLineStringFeature(),
+        getPolygonFeature(),
+      ]);
+    },
+  };
+
+  const goToDefaultViewpoint = {
+    name: 'defaultVP',
+    icon: 'mdi-target',
+    callback() {
+      vcsApp.maps.activeMap.gotoViewpoint(
+        new Viewpoint({
+          cameraPosition: [
+            13.367898854716408, 52.514030248633524, 1546.0176382209434,
+          ],
+          groundPosition: [
+            13.367898854716412, 52.51403023793378, 33.15479339682457,
+          ],
+          distance: 1512.862844824798,
+          heading: 360,
+          pitch: -90,
+          roll: 0,
+        }),
+      );
+    },
+  };
+
+  onMounted(() => {
+    goToDefaultViewpoint.callback();
+  });
+
+  onUnmounted(() => {
+    unByKey(sourceListeners);
+  });
+</script>
+
+<template>
+  <VcsFormSection
+    heading="Geometry Settings"
+    expandable
+    :header-actions="[goToDefaultViewpoint, reset]"
+  >
+    <v-container class="pa-2">
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton
+            @click="primitive = !primitive"
+            :active="primitive"
+            icon="$vcsCone"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="model = !model"
+            :active="model"
+            icon="mdi-human"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="arrow = !arrow"
+            :active="arrow"
+            icon="mdi-arrow-left-right"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="label = !label"
+            :active="label"
+            icon="mdi-text"
+          />
+        </v-col>
+      </v-row>
+      <v-divider class="my-2" />
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton
+            @click="circle = !circle"
+            :active="circle"
+            icon="$vcsCircle"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="lineString = !lineString"
+            :active="lineString"
+            icon="$vcsLine"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="polygon = !polygon"
+            :active="polygon"
+            icon="$vcsTriangle"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="point = !point"
+            :active="point"
+            icon="$vcsPoint"
+          />
+        </v-col>
+      </v-row>
+      <v-divider class="my-2" />
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton
+            @click="geometryCollection = !geometryCollection"
+            :active="geometryCollection"
+            icon="$vcsShapes"
+          />
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="lineStrings = !lineStrings"
+            :active="lineStrings"
+            icon="$vcsLine"
+            >+</VcsFormButton
+          >
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="polygons = !polygons"
+            :active="polygons"
+            icon="$vcsTriangle"
+            >+</VcsFormButton
+          >
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="points = !points"
+            :active="points"
+            icon="$vcsPoint"
+            >+</VcsFormButton
+          >
+        </v-col>
+      </v-row>
+      <v-divider class="my-2" />
+      <v-row no-gutters>
+        <v-col></v-col>
+        <v-col>
+          <VcsFormButton
+            @click="tiltedLineString = !tiltedLineString"
+            :active="tiltedLineString"
+            icon="$vcsLine"
+            >/</VcsFormButton
+          >
+        </v-col>
+        <v-col>
+          <VcsFormButton
+            @click="tiltedPolygon = !tiltedPolygon"
+            :active="tiltedPolygon"
+            icon="$vcsTriangle"
+            >/</VcsFormButton
+          >
+        </v-col>
+        <v-col />
+      </v-row>
+      <v-divider class="my-2" />
+      <LayoutHandler @layout-changed="layout = $event" />
+    </v-container>
+  </VcsFormSection>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,97 @@
+<script setup>
+  import { VCol, VRow, VSwitch } from 'vuetify/components';
+  import { computed, shallowRef, inject, onUnmounted, ref } from 'vue';
+  import { CesiumMap, from2Dto3DLayout, from3Dto2DLayout } from '@vcmap/core';
+  import { HeightReference } from '@vcmap-cesium/engine';
+
+  /**
+   * @type {import("vue").ShallowRef<import("ol").Feature[]>}
+   */
+  const features = inject('features');
+  /**
+   * @type {import("@vcmap/ui").VcsUiApp}
+   */
+  const vcsApp = inject('vcsApp');
+
+  const cesiumMap = shallowRef(
+    vcsApp.maps.activeMap instanceof CesiumMap ? vcsApp.maps.activeMap : null,
+  );
+
+  const mapListener = vcsApp.maps.mapActivated.addEventListener((newMap) => {
+    if (newMap instanceof CesiumMap) {
+      cesiumMap.value = newMap;
+    } else {
+      cesiumMap.value = null;
+    }
+  });
+
+  const localLayoutValue = ref(
+    features.value[0]?.getGeometry().getLayout() ?? 'XYZ',
+  );
+
+  const heightReference = ref(HeightReference.CLAMP_TO_GROUND);
+
+  const emit = defineEmits(['layoutChanged']);
+  emit('layoutChanged', localLayoutValue.value);
+
+  const layout = computed({
+    get() {
+      return localLayoutValue.value;
+    },
+    set(value) {
+      if (value === 'XY') {
+        features.value.forEach((f) => {
+          from3Dto2DLayout(f.getGeometry());
+        });
+      } else if (cesiumMap.value) {
+        features.value.forEach((f) => {
+          from2Dto3DLayout(
+            f.getGeometry(),
+            cesiumMap.value.getScene(),
+            heightReference.value,
+          );
+        });
+      }
+      localLayoutValue.value = value;
+      emit('layoutChanged', localLayoutValue.value);
+    },
+  });
+
+  onUnmounted(() => {
+    mapListener();
+  });
+</script>
+
+<template>
+  <v-row no-gutters>
+    <v-col cols="2" />
+    <v-col>
+      <v-switch
+        false-value="XY"
+        true-value="XYZ"
+        false-icon="$vcs2d"
+        true-icon="$vcs3d"
+        :label="layout"
+        :disabled="!cesiumMap && layout === 'XY'"
+        v-model="layout"
+      />
+    </v-col>
+    <v-col>
+      <v-switch
+        :false-value="HeightReference.CLAMP_TO_TERRAIN"
+        :true-value="HeightReference.CLAMP_TO_GROUND"
+        v-model="heightReference"
+        false-icon="$vcsGlobalTerrain"
+        true-icon="$vcsGlobeNature"
+        :label="
+          heightReference === HeightReference.CLAMP_TO_GROUND
+            ? 'to Ground'
+            : 'to Terrain'
+        "
+      />
+    </v-col>
+    <v-col cols="2" />
+  </v-row>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,90 @@
+<script setup>
+  import {
+    VcsFormSection,
+    LayerContentTreeItem,
+    VcsTreeview,
+    VcsSlider,
+  } from '@vcmap/ui';
+  import { VContainer, VRow, VCol, VSwitch } from 'vuetify/components';
+  import { inject, onUnmounted, ref, watch } from 'vue';
+  /** @type {import("@vcmap/ui").VcsUiApp} */
+  const vcsApp = inject('vcsApp');
+  const terrainLayerItem = new LayerContentTreeItem(
+    {
+      name: 'terrain',
+      layerName: 'GermanyBaseTerrain',
+    },
+    vcsApp,
+  );
+
+  const meshLayerItem = new LayerContentTreeItem(
+    { layerName: 'mesh_surface', name: 'mesh' },
+    vcsApp,
+  );
+
+  const [cesiumMap] = vcsApp.maps.getByType('CesiumMap');
+  const transparency = ref(null);
+  const transparencyEnabled = ref(false);
+
+  let initialTransparency = false;
+  if (cesiumMap) {
+    initialTransparency = cesiumMap.getScene().globe.translucency.enabled;
+    transparency.value =
+      cesiumMap.getScene().globe.translucency.frontFaceAlpha ?? 1;
+
+    watch(transparency, (value) => {
+      cesiumMap.getScene().globe.translucency.frontFaceAlpha = value;
+    });
+
+    watch(transparencyEnabled, (value) => {
+      cesiumMap.getScene().globe.translucency.enabled = value;
+    });
+  }
+
+  onUnmounted(() => {
+    if (initialTransparency != null) {
+      cesiumMap.getScene().globe.translucency.enabled = initialTransparency;
+    }
+  });
+</script>
+
+<template>
+  <vcs-form-section heading="Terrain Settings" expandable>
+    <v-container class="pa-2">
+      <v-row no-gutters>
+        <v-col>
+          <vcs-treeview
+            :items="[
+              terrainLayerItem.getTreeViewItem(),
+              meshLayerItem.getTreeViewItem(),
+            ]"
+            item-children="visibleChildren"
+          ></vcs-treeview>
+        </v-col>
+      </v-row>
+      <template v-if="transparency !== null">
+        <v-row class="pa-4"> Globe Transparency </v-row>
+        <v-row no-gutters class="d-flex align-content-space-between">
+          <v-col cols="2" class="pl-2">
+            <v-switch v-model="transparencyEnabled" />
+          </v-col>
+          <v-col>
+            <vcs-slider
+              :disabled="!transparencyEnabled"
+              :step="0.01"
+              type="number"
+              :min="0"
+              max="1"
+              v-model="transparency"
+            />
+          </v-col>
+          <v-col cols="2" class="pl-2">
+            {{ transparency }}
+          </v-col>
+        </v-row>
+      </template>
+    </v-container>
+  </vcs-form-section>
+</template>
+
+<style scoped lang="scss"></style>