@vcmap/ui 6.2.1 → 6.2.3

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-ffa735dc.js";
+export * from "./ui-d3a7bd39.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-09a72820.js";
+export * from "./vue-cbd2bd60.js";

package/dist/assets/{vuetify-def19d80.js → vuetify-8e1623b2.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-def19d80.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-09a72820.js";
+} await loadCss('./assets/vuetify-8e1623b2.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-cbd2bd60.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-def19d80.js";
+export * from "./vuetify-8e1623b2.js";

package/index.d.ts

@@ -209,6 +209,8 @@ export * from "./src/components/modelHelper.js";
 export type * from "./src/components/modelHelper.d.ts";
 export * from "./src/components/composables.js";
 export type * from "./src/components/composables.d.ts";
+export { moveDraggableItems } from "./src/components/lists/dragHelper.js";
+export type * from "./src/components/lists/dragHelper.d.ts";
 export { default as VcsTreeview } from "./src/components/lists/VcsTreeview.vue";
 export type * from "./src/components/lists/VcsTreeview.vue.d.ts";
 export { default as VcsTreeNode } from "./src/components/lists/VcsTreeNode.vue";
@@ -325,7 +327,7 @@ export { applyKeyMapping, applyValueMapping, default as AbstractFeatureInfoView
 export type * from "./src/featureInfo/abstractFeatureInfoView.d.ts";
 export { extractNestedKey, default as BalloonFeatureInfoView } from "./src/featureInfo/balloonFeatureInfoView.js";
 export type * from "./src/featureInfo/balloonFeatureInfoView.d.ts";
-export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener } from "./src/featureInfo/balloonHelper.js";
+export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener, getBalloonPositionFromFeature } from "./src/featureInfo/balloonHelper.js";
 export type * from "./src/featureInfo/balloonHelper.d.ts";
 export { getHighlightStyleFromStyle, getHighlightStyle, getClusterHighlightStyle, featureInfoViewSymbol } from "./src/featureInfo/featureInfo.js";
 export type * from "./src/featureInfo/featureInfo.d.ts";

package/index.js

@@ -191,6 +191,7 @@ export {
   getBalloonPosition,
   setBalloonPosition,
   setupBalloonPositionListener,
+  getBalloonPositionFromFeature,
 } from './src/featureInfo/balloonHelper.js';
 export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.vue';
 export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';
@@ -312,6 +313,7 @@ export { default as VcsList } from './src/components/lists/VcsList.vue';
 export { default as VcsListItemComponent } from './src/components/lists/VcsListItemComponent.vue';
 export { default as VcsGroupedList } from './src/components/lists/VcsGroupedList.vue';
 export * from './src/components/lists/listHelper.js';
+export { moveDraggableItems } from './src/components/lists/dragHelper.js';
 export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
 export { default as VcsTreeNode } from './src/components/lists/VcsTreeNode.vue';
 export { default as VcsTreeviewTitle } from './src/components/lists/VcsTreeviewTitle.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.2.1",
+  "version": "6.2.3",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -58,13 +58,14 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.3",
-    "@vcmap/core": "^6.2.2",
+    "@vcmap/core": "^6.2.3",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"
   },
   "overrides": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "@zip.js/zip.js": "2.7.68"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",

package/plugins/@vcmap-show-case/category-tester/src/CollectionComponentOptions.vue

@@ -24,13 +24,22 @@
         />
       </v-col>
     </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel>{{ $st(`pagination`) }}</VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsCheckbox v-model="pagination" />
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
-  import { inject, isRef, reactive } from 'vue';
+  import { inject, isRef, reactive, watch, ref } from 'vue';
   import { VContainer, VRow, VCol } from 'vuetify/components';
   import { VcsCheckbox, VcsLabel, VcsTextField } from '@vcmap/ui';
+  import { Collection } from '@vcmap/core';
 
   /**
    * Shows CollectionComponentOptions of a provided collectionComponent
@@ -45,7 +54,9 @@
       VRow,
       VCol,
     },
+    props: {},
     setup() {
+      /** @type {import("@vcmap/ui").CollectionComponentClass} */
       const collectionComponent = inject('collectionComponent');
       const localOptions = reactive({
         draggable: collectionComponent.draggable,
@@ -54,7 +65,34 @@
         renamable: collectionComponent.renamable,
         removable: collectionComponent.removable,
       });
-
+      // clone is for demonstration purposes only: caches the original items while pagination is active.
+      const collectionClone = new Collection();
+      const pagination = ref(!!collectionComponent.pagination.value);
+      watch(pagination, (value) => {
+        if (value) {
+          collectionClone.clear();
+          [...collectionComponent.collection].forEach((item) => {
+            collectionClone.add(item);
+          });
+          collectionComponent.setPagination({
+            // just for demonstration purposes -> get Items should fetch items from server.
+            getItems(startIndex, count) {
+              return {
+                items: [...collectionClone].slice(
+                  startIndex,
+                  count + startIndex,
+                ),
+                total: collectionClone.size,
+              };
+            },
+          });
+        } else {
+          collectionComponent.setPagination(undefined);
+          [...collectionClone].forEach((item) => {
+            collectionComponent.collection.add(item);
+          });
+        }
+      });
       return {
         title: collectionComponent.title,
         keys: Object.keys(localOptions),
@@ -67,6 +105,7 @@
             collectionComponent[key] = value;
           }
         },
+        pagination,
       };
     },
   };

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

@@ -54,6 +54,7 @@ export default async function categoryTest() {
           singleSelect: 'Einfachauswahl',
           renamable: 'umbenennbar',
           removable: 'löschbar',
+          pagination: 'Pagination',
           fooEditor: {
             name: 'Name',
             title: 'Titel',
@@ -70,6 +71,7 @@ export default async function categoryTest() {
           singleSelect: 'single select',
           renamable: 'renamable',
           removable: 'removable',
+          pagination: 'Pagination',
           fooEditor: {
             name: 'Name',
             title: 'Title',

package/src/application/VcsSettings.vue

@@ -99,6 +99,10 @@
       };
       setupI18n();
       const setLocale = () => {
+        if (!languages.value.includes(app.locale)) {
+          localLanguage.value = 'en';
+          return;
+        }
         localLanguage.value = app.locale;
       };
       setLocale();

package/src/application/VcsSplashScreen.vue

@@ -12,6 +12,9 @@
     <v-card>
       <v-card-text class="pb-0 overflow-y-auto">
         <VcsMarkdown :content="$st(options.content)" />
+      </v-card-text>
+
+      <div class="vcs-splash-screen-checkboxes px-8">
         <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
           <template #label>
             <VcsMarkdown
@@ -32,7 +35,7 @@
             </div>
           </template>
         </VcsCheckbox>
-      </v-card-text>
+      </div>
 
       <v-card-actions class="vcs-splash-screen-actions">
         <div class="d-flex gc-2 w-100 justify-end">
@@ -197,4 +200,9 @@
     position: sticky !important;
     bottom: 0;
   }
+  .vcs-splash-screen-checkboxes {
+    background-color: rgb(var(--v-theme-surface));
+    position: sticky !important;
+    bottom: 0;
+  }
 </style>

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -73,7 +73,7 @@
   import VcsList from '../lists/VcsList.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsButton from '../buttons/VcsButton.vue';
-  import { moveItem } from '../../manager/collectionManager/CollectionComponentList.vue';
+  import { moveItem } from '../lists/dragHelper.js';
   import CollectionComponentClass from '../../manager/collectionManager/collectionComponentClass.js';
   import { WindowSlot } from '../../manager/window/windowManager.js';
   import VcsViewpointEditor from '../viewpoint/VcsViewpointEditor.vue';
@@ -330,7 +330,7 @@
         draggable: collectionComponent.draggable,
         actions: collectionComponent.getActions(),
         move(event) {
-          moveItem(collectionComponent, event);
+          moveItem(collectionComponent.collection, event);
         },
         durationRule,
         showDuration(index) {

package/src/components/lists/VcsList.vue

@@ -46,7 +46,6 @@
           "
           @dragend="dragEnd($event)"
           @drop="drop($event, item)"
-          @dragleave="dragLeave($event)"
           :class="{
             'v-list-item__selected': selected.includes(item),
             'v-list-item__lighten_even': lightenEven,
@@ -246,23 +245,16 @@
     return items;
   });
 
-  const {
-    dragging,
-    isDraggable,
-    dragStart,
-    dragOver,
-    dragLeave,
-    dragEnd,
-    drop,
-  } = setupDraggableListOrTree(props, query, (e, value) =>
-    emit(e, {
-      ...value,
-      // @deprecate: targetIndex will be removed on next mayor release
-      targetIndex: props.items.findIndex(
-        (i) => i.name === value.targetItem.name,
-      ),
-    }),
-  );
+  const { dragging, isDraggable, dragStart, dragOver, dragEnd, drop } =
+    setupDraggableListOrTree(props, query, (e, value) =>
+      emit(e, {
+        ...value,
+        // @deprecate: targetIndex will be removed on next mayor release
+        targetIndex: props.items.findIndex(
+          (i) => i.name === value.targetItem.name,
+        ),
+      }),
+    );
 
   const { select, selected, selectionActions } = setupSelectableList(
     props,

package/src/components/lists/VcsTreeNode.vue

@@ -14,12 +14,13 @@
       ref="treenodeRef"
       no-gutters
       class="treenode flex-nowrap text-truncate"
-      :class="`level-${level} ${children.length ? 'group' : 'item'}`"
+      :class="`level-${level} ${isGroup ? 'group' : 'item'}`"
     >
       <VBtn
-        v-if="children.length"
+        v-if="isGroup"
         class="chevron-btn"
         variant="text"
+        :disabled="item.children.length === 0"
         :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
         @click="bubbleItemToggled(item.name)"
       />
@@ -41,7 +42,7 @@
       <slot name="title" v-bind="{ item }">
         <VcsTreeviewTitle
           :item="item"
-          :cursor-pointer="item.clickable || (openOnClick && !!children.length)"
+          :cursor-pointer="item.clickable || (openOnClick && isGroup)"
           @click="(event) => $emit('click', item, event)"
         />
       </slot>
@@ -53,7 +54,7 @@
           :disabled="item.disabled"
           right
           tooltip-position="right"
-          block-overflow
+          :block-overflow="item.blockOverflow ?? true"
           class="col-4 pa-0 ml-auto pr-4"
         />
       </slot>
@@ -133,6 +134,8 @@
    * @property {Array<VcsTreeNodeItem>} [children] - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
    * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
    * @property {function(string):void} [clicked] - A callback called when the item is clicked.
+   * @property {boolean} [blockOverflow=true] - Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow.
+   * @property {boolean} [forceNodeDisplay] - Forces the item to display as a node (with chevron) even when it has no children.
    */
 
   /**
@@ -253,6 +256,9 @@
         forwardSlots,
         treenodeRef,
         isOpen,
+        isGroup: computed(
+          () => children.value.length > 0 || props.item.forceNodeDisplay,
+        ),
         matchFilter,
         iconSize,
         children,

package/src/components/lists/VcsTreeNode.vue.d.ts

@@ -28,4 +28,12 @@ export type VcsTreeNodeItem = {
      * - A callback called when the item is clicked.
      */
     clicked?: ((arg0: string) => void) | undefined;
+    /**
+     * - Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow.
+     */
+    blockOverflow?: boolean | undefined;
+    /**
+     * - Forces the item to display as a node (with chevron) even when it has no children.
+     */
+    forceNodeDisplay?: boolean | undefined;
 };

package/src/components/lists/VcsTreeview.vue

@@ -36,7 +36,6 @@
         @dragover="dragOver"
         @dragend="dragEnd"
         @drop="drop"
-        @dragleave="dragLeave"
         @item-toggled="itemToggled"
         @click="itemClicked"
       >
@@ -150,9 +149,7 @@
             localOpenedItems.value.push(...newItems);
           }
         },
-        {
-          immediate: true,
-        },
+        { immediate: true },
       );
 
       function itemToggled(itemName) {
@@ -166,14 +163,13 @@
 
       const { xs } = useDisplay();
 
-      const { isDraggable, dragStart, dragOver, dragLeave, dragEnd, drop } =
+      const { isDraggable, dragStart, dragOver, dragEnd, drop } =
         setupDraggableListOrTree(props, localSearchValue, emit);
 
       return {
         isDraggable,
         dragStart,
         dragOver,
-        dragLeave,
         dragEnd,
         drop,
         localSearchValue,

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -51,7 +51,6 @@ declare const _default: import("vue").DefineComponent<{
     isDraggable: import("vue").ComputedRef<boolean>;
     dragStart: (e: MouseEvent, item: import("./dragHelper.js", { with: { "resolution-mode": "import" } }).VcsDraggableItem) => void;
     dragOver: (e: MouseEvent, item: import("./dragHelper.js", { with: { "resolution-mode": "import" } }).VcsDraggableItem, dropTarget: HTMLElement, dropTargetZones?: import("./dragHelper.js", { with: { "resolution-mode": "import" } }).DropZones | undefined, isOpen?: boolean | undefined) => void;
-    dragLeave: (e: MouseEvent) => void;
     dragEnd: (e: MouseEvent) => void;
     drop: (e: MouseEvent, item: import("./dragHelper.js", { with: { "resolution-mode": "import" } }).VcsDraggableItem) => void;
     localSearchValue: import("vue").Ref<any>;

package/src/components/lists/dragHelper.d.ts

@@ -30,7 +30,6 @@
  *     dropTargetZones?: DropZones,
  *     isOpen?: boolean,
  *   ) => void;
- *   dragLeave: (e: MouseEvent) => void;
  *   dragEnd: (e: MouseEvent) => void;
  *   drop: (
  *     e: MouseEvent,
@@ -78,6 +77,15 @@ export function setupDraggableListOrTree(props: Object & {
  * @param {ItemMovedEvent} event
  */
 export function moveDraggableItems(items: Array<VcsDraggableItem>, { item, targetItem, position }: ItemMovedEvent): void;
+/**
+ * Moves an item to a new position.
+ * New position is derived from a target item in the collection.
+ * This ensures correct movement, if rendered list is only a subset of the collection.
+ * @template T
+ * @param {import("@vcmap/core").IndexedCollection<T>} collection
+ * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
+ */
+export function moveItem<T>(collection: import("@vcmap/core").IndexedCollection<T>, event: import("../../components/lists/dragHelper.js").ItemMovedEvent): void;
 export type InsertMode = number;
 export namespace InsertMode {
     let BEFORE: number;
@@ -96,7 +104,6 @@ export type DraggableListOrTreeSetup = {
     isDraggable: import("vue").ComputedRef<boolean>;
     dragStart: (e: MouseEvent, item: VcsDraggableItem) => void;
     dragOver: (e: MouseEvent, item: VcsDraggableItem, dropTarget: HTMLElement, dropTargetZones?: DropZones, isOpen?: boolean) => void;
-    dragLeave: (e: MouseEvent) => void;
     dragEnd: (e: MouseEvent) => void;
     drop: (e: MouseEvent, item: VcsDraggableItem) => void;
 };

package/src/components/lists/dragHelper.js

@@ -43,7 +43,6 @@ export const InsertMode = {
  *     dropTargetZones?: DropZones,
  *     isOpen?: boolean,
  *   ) => void;
- *   dragLeave: (e: MouseEvent) => void;
  *   dragEnd: (e: MouseEvent) => void;
  *   drop: (
  *     e: MouseEvent,
@@ -100,6 +99,11 @@ export function setupDraggableListOrTree(props, query, emit) {
     return !query.value && props.draggable;
   });
 
+  /**
+   * @type {HTMLElement | undefined}
+   */
+  let lastDropTarget;
+
   /**
    *
    * @param {HTMLElement} target
@@ -148,7 +152,7 @@ export function setupDraggableListOrTree(props, query, emit) {
     ) {
       dropPosition = InsertMode.AFTER;
       currentTarget.classList.add('drop-target-after');
-    } else if (dropTargetZones === true || dropTargetZones.into === true) {
+    } else if (isIntoAllowed) {
       dropPosition = InsertMode.INTO;
       currentTarget.classList.add('drop-target-into');
       e.dataTransfer.dropEffect = 'copy';
@@ -158,7 +162,7 @@ export function setupDraggableListOrTree(props, query, emit) {
   }
 
   /**
-   * @param {MouseEvent} e
+   * @param {DragEvent} e
    * @param {VcsDraggableItem} item
    */
   function drop(e, item) {
@@ -178,7 +182,7 @@ export function setupDraggableListOrTree(props, query, emit) {
   }
 
   /**
-   * @param {MouseEvent} e
+   * @param {DragEvent} e
    * @param {VcsDraggableItem} item
    */
   function dragStart(e, item) {
@@ -191,7 +195,7 @@ export function setupDraggableListOrTree(props, query, emit) {
   }
 
   /**
-   * @param {MouseEvent} e
+   * @param {DragEvent} e
    * @param {VcsDraggableItem} item
    * @param {HTMLElement} dropTarget
    * @param {DropZones} [dropTargetZones=true]
@@ -207,14 +211,22 @@ export function setupDraggableListOrTree(props, query, emit) {
     e.stopPropagation();
     e.preventDefault();
     if (
-      !isDraggable.value ||
-      !dragging.value ||
-      draggedItem?.name === item.name
+      (!isDraggable.value ||
+        !dragging.value ||
+        draggedItem?.name === item.name) &&
+      e.dataTransfer
     ) {
       e.dataTransfer.dropEffect = 'none';
       return;
     }
 
+    if (lastDropTarget !== e.currentTarget) {
+      if (lastDropTarget) {
+        clearDropTargetClasses(lastDropTarget);
+      }
+      lastDropTarget = e.currentTarget;
+    }
+
     clearDropTargetClasses(e.currentTarget);
     addDropTargetClasses(
       e,
@@ -227,22 +239,16 @@ export function setupDraggableListOrTree(props, query, emit) {
   }
 
   /**
-   * @param {MouseEvent} e
-   */
-  function dragLeave(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    dropPosition = null;
-    clearDropTargetClasses(e.currentTarget);
-  }
-
-  /**
-   * @param {MouseEvent} e
+   * @param {DragEvent} e
    */
   function dragEnd(e) {
     e.stopPropagation();
     dropPosition = null;
     dragging.value = false;
+    if (lastDropTarget) {
+      clearDropTargetClasses(lastDropTarget);
+      lastDropTarget = null;
+    }
   }
 
   return {
@@ -250,7 +256,6 @@ export function setupDraggableListOrTree(props, query, emit) {
     isDraggable,
     dragStart,
     dragOver,
-    dragLeave,
     dragEnd,
     drop,
   };
@@ -272,7 +277,7 @@ function findAndSplice(
   insertPosition,
   ...itemsToInsert
 ) {
-  const index = array.findIndex((i) => i === item);
+  const index = array.indexOf(item);
 
   if (index !== -1) {
     if (insertPosition === InsertMode.AFTER) {
@@ -323,3 +328,24 @@ export function moveDraggableItems(items, { item, targetItem, position }) {
   findAndSplice(items, item, 1);
   findAndSplice(items, targetItem, 0, position, item);
 }
+
+/**
+ * Moves an item to a new position.
+ * New position is derived from a target item in the collection.
+ * This ensures correct movement, if rendered list is only a subset of the collection.
+ * @template T
+ * @param {import("@vcmap/core").IndexedCollection<T>} collection
+ * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
+ */
+export function moveItem(collection, event) {
+  if (collection.moveTo) {
+    const item = collection.getByKey(event.item.name);
+    const target = collection.getByKey(event.targetItem.name);
+
+    const itemIndex = collection.indexOf(item);
+    const targetIndex = collection.indexOf(target);
+    const relativePosition = itemIndex < targetIndex ? -1 : 1;
+    const offset = relativePosition === event.position ? event.position : 0;
+    collection.moveTo(item, targetIndex + offset);
+  }
+}

package/src/contentTree/LayerSwap.vue

@@ -29,6 +29,10 @@
   import VcsHelp from '../components/notification/VcsHelp.vue';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
   import WMSGroupContentTreeItem from './wmsGroupContentTreeItem.js';
+  import {
+    moveItem,
+    moveDraggableItems,
+  } from '../components/lists/dragHelper.js';
 
   export const layerSwapId = 'layer-swap-window';
 
@@ -89,6 +93,15 @@
             name: l.name,
             title: l.properties?.title || l.name,
             index: app.layers.indexOf(l),
+            actions: [
+              {
+                name: 'layer-swap.delete',
+                icon: 'mdi-delete',
+                title: 'components.layerSwap.deleteButton',
+                callback: () => l.deactivate(),
+              },
+            ],
+            blockOverflow: false,
           };
           if (wmsGroupItemsMap[l.name]) {
             return {
@@ -134,16 +147,23 @@
           }
           return { into: false };
         },
-        move({ item, targetItem }) {
+        /**
+         * @param {import("../components/lists/dragHelper.js").ItemMovedEvent} event
+         */
+        move(event) {
+          const { item, targetItem, position } = event;
           const layer = app.layers.getByKey(item.name);
           if (layer && !targetItem[vcsLayerName]) {
-            app.layers.moveTo(layer, targetItem.index);
+            moveItem(app.layers, event);
           } else if (item[vcsLayerName] === targetItem[vcsLayerName]) {
             const wmsLayer = app.layers.getByKey(item[vcsLayerName]);
             if (wmsLayer instanceof WMSLayer) {
               const newLayerNames = wmsLayer.getLayers();
-              newLayerNames.splice(item.index, 1);
-              newLayerNames.splice(targetItem.index, 0, item[wmsLayerName]);
+              moveDraggableItems(newLayerNames, {
+                item: item[wmsLayerName],
+                targetItem: targetItem[wmsLayerName],
+                position,
+              });
               wmsLayer
                 .setLayers(newLayerNames)
                 .catch((e) => getLogger('LayerSwap.vue').error(e));

package/src/contentTree/LayerSwap.vue.d.ts

@@ -4,6 +4,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         name: any;
         title: any;
         index: any;
+        actions: {
+            name: string;
+            icon: string;
+            title: string;
+            callback: () => any;
+        }[];
+        blockOverflow: boolean;
     } | {
         children: (Partial<import("./contentTreeItem.js", { with: { "resolution-mode": "import" } }).TreeViewItem> & {
             index: number;
@@ -13,14 +20,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         name: any;
         title: any;
         index: any;
+        actions: {
+            name: string;
+            icon: string;
+            title: string;
+            callback: () => any;
+        }[];
+        blockOverflow: boolean;
     })[]>;
     dropTargetZones(item: any, targetItem: any): false | {
         into: boolean;
     };
-    move({ item, targetItem }: {
-        item: any;
-        targetItem: any;
-    }): void;
+    /**
+     * @param {import("../components/lists/dragHelper.js").ItemMovedEvent} event
+     */
+    move(event: import("../components/lists/dragHelper.js").ItemMovedEvent): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 declare const wmsLayerName: unique symbol;