@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -60,7 +60,7 @@
     pointVectorProperties,
     nonPointVectorProperties,
   } from './VcsVectorPropertiesComponent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * @typedef {Object} EditorManager
@@ -290,6 +290,9 @@
         nFeatures: features.value.length,
       }));
 
+      /**
+       * @returns {{actions: VcsActions, destroy: function():void}}
+       */
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
@@ -301,26 +304,49 @@
             name: mode,
             title: `components.editor.${mode}`,
             icon: EditorTransformationIcons[mode],
-            active: computed(() => currentTransformationMode.value === mode),
+            active: mode === currentTransformationMode.value,
             callback: () => {
               toggleTransformationSession(mode);
             },
           };
         });
 
+        const transformationModeWatcher = watch(
+          currentTransformationMode,
+          (mode) => {
+            allowedActions.forEach((action) => {
+              if (Object.values(TransformationMode).includes(action.name)) {
+                action.active = mode === action.name;
+              }
+            });
+          },
+        );
+
+        let geometryEditingWatcher;
         if (features.value.length === 1) {
-          allowedActions.unshift({
+          const editGeometryAction = {
             name: 'editGeometry',
             title: `components.editor.edit`,
             icon: '$vcsEditVertices',
-            active: isGeometryEditing,
+            active: isGeometryEditing.value,
             callback: () => {
               toggleEditGeometrySession();
             },
+          };
+          allowedActions.unshift(editGeometryAction);
+
+          geometryEditingWatcher = watch(isGeometryEditing, () => {
+            editGeometryAction.active = isGeometryEditing.value;
           });
         }
 
-        return allowedActions;
+        return {
+          actions: allowedActions,
+          destroy() {
+            transformationModeWatcher();
+            geometryEditingWatcher?.();
+          },
+        };
       }
 
       function getAllowedVectorProperties() {
@@ -350,6 +376,8 @@
         return properties;
       }
 
+      let destroyModifyActions = () => {};
+
       const geometryTypesWatcher = watch(
         currentGeometryTypes,
         (curr, prev) => {
@@ -359,7 +387,11 @@
             (curr.nFeatures > 1 && prev.nFeatures === 1) ||
             (prev.nFeatures > 1 && curr.nFeatures === 1)
           ) {
-            availableModifyActions.value = getAllowedModifyActions();
+            destroyModifyActions();
+            const modifyActions = getAllowedModifyActions();
+            destroyModifyActions = modifyActions.destroy;
+
+            availableModifyActions.value = modifyActions.actions;
             availableVectorProperties.value = getAllowedVectorProperties();
           }
         },
@@ -379,6 +411,7 @@
         geometryTypesWatcher();
         propsWatcher();
         editorManager.stopEditing();
+        destroyModifyActions();
       });
 
       return {

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -460,7 +460,7 @@
     useProxiedComplexModel,
     useModelHasProperty,
   } from '../modelHelper.js';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsSelect from '../form-inputs-controls/VcsSelect.vue';

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -176,11 +176,12 @@
     onUnmounted,
     reactive,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { CesiumMap, ObliqueMap, OpenlayersMap, Viewpoint } from '@vcmap/core';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
@@ -188,6 +189,20 @@
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
+  /**
+   * Updates the localValue ref by keeping name and properties
+   * @param {import("vue").Ref<import("vue").UnwrapRef<import("@vcmap/core").ViewpointOptions>>} localValue
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
+   */
+  function updateLocalValueFromViewpoint(localValue, viewpoint) {
+    const options = viewpoint.toJSON();
+    options.name = localValue.value.name;
+    if (localValue.value.properties) {
+      options.properties = toRaw(localValue.value.properties);
+    }
+    localValue.value = options;
+  }
+
   /**
    * Set up post render handler, if action is active.
    * If action is inactive, destroy post render handler to allow manual editing.
@@ -213,9 +228,7 @@
           ) {
             return;
           }
-          const options = viewpoint.toJSON();
-          options.name = localValue.value.name;
-          localValue.value = options;
+          updateLocalValueFromViewpoint(localValue, viewpoint);
           cachedViewpoint = viewpoint;
         },
       );
@@ -416,10 +429,10 @@
         title: 'components.viewpoint.updateFromView',
         async callback() {
           if (app.maps.activeMap) {
-            const viewpoint = await app.maps.activeMap.getViewpoint();
-            const options = viewpoint.toJSON();
-            options.name = localValue.value.name;
-            localValue.value = options;
+            updateLocalValueFromViewpoint(
+              localValue,
+              await app.maps.activeMap.getViewpoint(),
+            );
           }
         },
       };

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -7,6 +7,7 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
+      v-bind="$attrs"
       v-model="localConfig"
       hide-name
       :name-rules="nameRules"

package/src/contentTree/contentTreeItem.d.ts

@@ -272,11 +272,11 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    set icon(icon: string | HTMLImageElement | HTMLCanvasElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
-    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
+    get icon(): string | HTMLImageElement | HTMLCanvasElement | undefined;
     /**
      * @param {number} weight
      */

package/src/contentTree/contentTreeItem.js

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, shallowRef } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
@@ -258,7 +258,7 @@ class ContentTreeItem {
    * @param {StateActionState} state
    */
   set state(state) {
-    check(state, Object.values(StateActionState));
+    check(state, ofEnum(StateActionState));
 
     if (this._state.value !== state) {
       this._state.value = state;
@@ -277,7 +277,7 @@ class ContentTreeItem {
    * @param {string} url
    */
   set infoUrl(url) {
-    checkMaybe(url, String);
+    check(url, maybe(String));
 
     if (this._infoUrl !== url) {
       this._infoUrl = url;
@@ -309,7 +309,7 @@ class ContentTreeItem {
    * @param {string|undefined} title
    */
   set title(title) {
-    checkMaybe(title, String);
+    check(title, maybe(String));
 
     this._title.value = title;
   }
@@ -325,7 +325,7 @@ class ContentTreeItem {
    * @param {string|undefined} tooltip
    */
   set tooltip(tooltip) {
-    checkMaybe(tooltip, String);
+    check(tooltip, maybe(String));
 
     this._tooltip.value = tooltip;
   }
@@ -341,7 +341,7 @@ class ContentTreeItem {
    * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
    */
   set icon(icon) {
-    checkMaybe(icon, [String, HTMLElement]);
+    check(icon, maybe(oneOf(String, HTMLElement)));
 
     this._icon.value = icon;
   }
@@ -411,7 +411,7 @@ class ContentTreeItem {
    */
   addAction(action, weight = 11) {
     check(action.name, String);
-    checkMaybe(weight, Number);
+    check(weight, maybe(Number));
 
     const index = this._getActionIndex(action.name);
     if (index > -1) {

package/src/featureInfo/featureInfo.js

@@ -21,7 +21,7 @@ import {
   Entity,
 } from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
@@ -390,15 +390,13 @@ class FeatureInfo extends Collection {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [
-      Feature,
-      Entity,
-      Cesium3DTileFeature,
-      Cesium3DTilePointFeature,
-    ]);
-    checkMaybe(position, [Number]);
-    checkMaybe(windowPosition, [Number]);
-    checkMaybe(featureInfoView, AbstractFeatureInfoView);
+    check(
+      feature,
+      oneOf(Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature),
+    );
+    check(position, maybe([Number]));
+    check(windowPosition, maybe([Number]));
+    check(featureInfoView, maybe(AbstractFeatureInfoView));
 
     const usedFeatureInfoView =
       feature[featureInfoViewSymbol] ??

package/src/init.d.ts

@@ -18,41 +18,8 @@ export function initAppFromModule(mountTarget: string, configUrl?: string | unde
  * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export function initAppFromAppConfig(mountTarget: string, appUrl: string): Promise<import("@src/vcsUiApp.js").default>;
-export namespace VcsUiAppConfigPattern {
-    let id: (StringConstructor | undefined)[];
-    let layers: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let maps: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let styles: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let viewpoints: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let startingViewpointName: (StringConstructor | undefined)[];
-    let startingMapName: (StringConstructor | undefined)[];
-    let projection: (ObjectConstructor | undefined)[];
-    let categories: ({
-        name: StringConstructor;
-        items: ObjectConstructor[];
-    }[] | undefined)[];
-    let obliqueCollections: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let plugins: (ObjectConstructor[] | undefined)[];
-    let contentTree: (ObjectConstructor[] | undefined)[];
-    let uiConfig: (ObjectConstructor[] | undefined)[];
-    let featureInfo: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let i18n: (ObjectConstructor[] | undefined)[];
-}
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
+ */
+export const VcsUiAppConfigPattern: Record<string, import("@vcsuite/check").Pattern>;

package/src/init.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { check, checkMaybe, is } from '@vcsuite/check';
+import { check, is, maybe, oneOf, optional } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
 import VcsUiApp from './vcsUiApp.js';
@@ -15,23 +15,24 @@ const VcsObjectPattern = {
 
 /**
  * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
  */
 export const VcsUiAppConfigPattern = {
-  id: [undefined, String],
-  layers: [undefined, [VcsObjectPattern]],
-  maps: [undefined, [VcsObjectPattern]],
-  styles: [undefined, [VcsObjectPattern]],
-  viewpoints: [undefined, [VcsObjectPattern]],
-  startingViewpointName: [undefined, String],
-  startingMapName: [undefined, String],
-  projection: [undefined, Object],
-  categories: [undefined, [{ name: String, items: [Object] }]],
-  obliqueCollections: [undefined, [VcsObjectPattern]],
-  plugins: [undefined, [Object]],
-  contentTree: [undefined, [Object]],
-  uiConfig: [undefined, [Object]],
-  featureInfo: [undefined, [VcsObjectPattern]],
-  i18n: [undefined, [Object]],
+  id: optional(String),
+  layers: optional([VcsObjectPattern]),
+  maps: optional([VcsObjectPattern]),
+  styles: optional([VcsObjectPattern]),
+  viewpoints: optional([VcsObjectPattern]),
+  startingViewpointName: optional(String),
+  startingMapName: optional(String),
+  projection: optional(Object),
+  categories: optional([{ name: String, items: [Object] }]),
+  obliqueCollections: optional([VcsObjectPattern]),
+  plugins: optional([Object]),
+  contentTree: optional([Object]),
+  uiConfig: optional([Object]),
+  featureInfo: optional([VcsObjectPattern]),
+  i18n: optional([Object]),
 };
 
 /**
@@ -62,7 +63,7 @@ export default async function initApp(mountTarget) {
  */
 export async function initAppFromModule(mountTarget, configUrl) {
   check(mountTarget, String);
-  checkMaybe(configUrl, String);
+  check(configUrl, maybe(String));
 
   const app = await initApp(mountTarget);
   if (configUrl) {
@@ -90,7 +91,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
    */
   const appConfig = await fetch(appUrl).then((response) => response.json());
 
-  check(appConfig.modules, [String, Object]);
+  check(appConfig.modules, [oneOf(String, Object)]);
 
   const modules = await Promise.all(
     appConfig.modules.map(async (c) => {

package/src/legend/StyleLegendItem.vue

@@ -1,17 +1,13 @@
 <template>
-  <v-list density="compact">
-    <v-row>
+  <v-list>
+    <v-row no-gutters>
       <v-col
         v-for="(row, idx) in item.rows"
         :key="idx"
         :cols="cols"
         :class="{ 'w-100': item.colNr === 1, 'w-50': item.colNr !== 1 }"
       >
-        <v-list-item
-          density="compact"
-          class="pa-0"
-          :class="determineInnerPadding(idx)"
-        >
+        <v-list-item class="pa-0" :class="determineInnerPadding(idx)">
           <template #prepend>
             <v-img
               v-if="
@@ -20,7 +16,6 @@
               "
               width="32"
               height="24"
-              cover
               :src="getImageSrcFromShape(row.image)"
             />
             <svg
@@ -93,7 +88,7 @@
           </template>
 
           <v-list-item-title
-            class="pt-2"
+            class="pa-2"
             :title="$st(row.tooltip || row.title)"
           >
             {{ $st(row.title) }}

package/src/legend/VcsLegend.vue

@@ -6,51 +6,37 @@
       v-if="entries.length > 0"
       class="rounded-0"
     >
-      <v-expansion-panel
+      <vcs-expansion-panel
         v-for="(entry, i) in entries"
         :key="i"
-        class="px-2"
+        :heading="entry.title"
+        :header-actions="entry.actions"
         @group:selected="entry.open = !entry.open"
       >
-        <v-expansion-panel-title hide-actions>
-          <template #default="{ open }">
-            <div class="d-flex justify-space-between">
-              <div class="d-flex align-center">
-                <v-icon class="mr-1" :class="{ rotate: !open }">
-                  mdi-chevron-down
-                </v-icon>
-                {{ $st(entry.title) }}
-              </div>
-              <VcsActionButtonList :actions="entry.actions" />
+        <v-list class="pl-6 pb-2">
+          <div v-for="(item, idx) in entry.legend" :key="idx">
+            <div v-if="item.type === LegendType.Image">
+              <img
+                :src="$st(item.src)"
+                :alt="item.src"
+                class="legend-image"
+                :title="item.tooltip"
+              />
             </div>
-          </template>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text class="pl-6 pb-2">
-          <v-list density="compact">
-            <div v-for="(item, idx) in entry.legend" :key="idx">
-              <div v-if="item.type === LegendType.Image">
-                <img
-                  :src="$st(item.src)"
-                  :alt="item.src"
-                  class="legend-image"
-                  :title="item.tooltip"
-                />
-              </div>
-              <div v-else-if="item.type === LegendType.Iframe">
-                <iframe
-                  :id="`legendIframe${idx}`"
-                  :src="$st(item.src)"
-                  scrolling="no"
-                  style="width: 100%; height: 100%"
-                  frameBorder="0"
-                  @load="setIframeHeight(`legendIframe${idx}`)"
-                />
-              </div>
-              <style-legend-item v-else :item="item" />
+            <div v-else-if="item.type === LegendType.Iframe">
+              <iframe
+                :id="`legendIframe${idx}`"
+                :src="$st(item.src)"
+                scrolling="no"
+                style="width: 100%; height: 100%"
+                frameBorder="0"
+                @load="setIframeHeight(`legendIframe${idx}`)"
+              />
             </div>
-          </v-list>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
+            <style-legend-item v-else :item="item" />
+          </div>
+        </v-list>
+      </vcs-expansion-panel>
     </v-expansion-panels>
     <v-sheet v-else class="ma-2">
       {{ $t('legend.empty') }}
@@ -59,19 +45,11 @@
 </template>
 
 <script>
-  import {
-    VExpansionPanels,
-    VExpansionPanel,
-    VExpansionPanelText,
-    VExpansionPanelTitle,
-    VIcon,
-    VList,
-    VSheet,
-  } from 'vuetify/components';
+  import { VExpansionPanels, VList, VSheet } from 'vuetify/components';
   import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
-  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+  import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
@@ -81,13 +59,9 @@
   export default {
     name: 'VcsLegend',
     components: {
-      VcsActionButtonList,
+      VcsExpansionPanel,
       StyleLegendItem,
       VExpansionPanels,
-      VExpansionPanel,
-      VExpansionPanelText,
-      VExpansionPanelTitle,
-      VIcon,
       VList,
       VSheet,
     },

package/src/manager/buttonManager.js

@@ -1,7 +1,7 @@
 import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { ActionPattern } from '../components/lists/VcsActionList.vue';
 import { getActionFromOptions } from '../actions/actionHelper.js';
@@ -101,10 +101,10 @@ class ButtonManager {
    * @returns {ButtonComponent}
    */
   add(buttonComponentOptions, owner) {
-    checkMaybe(buttonComponentOptions.id, String);
-    checkMaybe(buttonComponentOptions.weight, Number);
+    check(buttonComponentOptions.id, maybe(String));
+    check(buttonComponentOptions.weight, maybe(Number));
     check(buttonComponentOptions.action, ActionPattern);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
       throw new Error(

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,39 +1,24 @@
 <template>
-  <v-expansion-panel>
-    <v-expansion-panel-title hide-actions class="px-2">
-      <div class="d-flex justify-space-between">
-        <div class="d-flex align-center gc-1">
-          <v-icon :class="{ rotate: !open }"> mdi-chevron-down </v-icon>
-          <span>
-            {{ $st(title) }}
-          </span>
-          <span v-if="selectable && selection.length > 0">
-            {{ `(${selection.length})` }}
-          </span>
-        </div>
-        <VcsActionButtonList
-          v-if="actions?.length > 0"
-          :actions="actions"
-          :overflow-count="overflowCount"
-        />
-      </div>
-    </v-expansion-panel-title>
-    <v-expansion-panel-text class="pb-1">
+  <vcs-expansion-panel
+    :heading="title"
+    :header-actions="actions"
+    :action-button-list-overflow-count="overflowCount"
+  >
+    <template #header-append>
+      <span v-if="selectable && selection.length > 0" class="ml-1">
+        {{ `(${selection.length})` }}
+      </span>
+    </template>
+    <template #default>
       <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
-    </v-expansion-panel-text>
-  </v-expansion-panel>
+    </template>
+  </vcs-expansion-panel>
 </template>
 
 <script>
   import { computed, inject } from 'vue';
-  import {
-    VIcon,
-    VExpansionPanel,
-    VExpansionPanelTitle,
-    VExpansionPanelText,
-  } from 'vuetify/components';
+  import VcsExpansionPanel from '../../components/section/VcsExpansionPanel.vue';
   import { createSelectionActions } from '../../components/lists/VcsList.vue';
-  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
 
   /**
@@ -51,12 +36,8 @@
   export default {
     name: 'CollectionComponent',
     components: {
+      VcsExpansionPanel,
       CollectionComponentContent,
-      VcsActionButtonList,
-      VExpansionPanel,
-      VExpansionPanelTitle,
-      VExpansionPanelText,
-      VIcon,
     },
     props: {
       open: {
@@ -64,6 +45,7 @@
         default: false,
       },
     },
+    emits: ['openList'],
     setup(_props, { emit }) {
       /**
        * @type {CollectionComponentClass}
@@ -97,11 +79,4 @@
   };
 </script>
 
-<style lang="scss" scoped>
-  .rotate {
-    transform: rotate(-90deg);
-  }
-  .v-icon {
-    font-size: 16px;
-  }
-</style>
+<style lang="scss" scoped></style>