@vcmap/ui 6.2.2 → 6.2.4

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-b13e28a1.js";
+export * from "./ui-f33a5ee2.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-6a295c0b.js";
+export * from "./vue-004523e0.js";

package/dist/assets/{vuetify-a1930526.js → vuetify-2fc014c4.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-a1930526.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-6a295c0b.js";
+} await loadCss('./assets/vuetify-2fc014c4.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-004523e0.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-a1930526.js";
+export * from "./vuetify-2fc014c4.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";
@@ -277,13 +279,15 @@ export { default as VcsSplashScreen } from "./src/application/VcsSplashScreen.vu
 export type * from "./src/application/VcsSplashScreen.vue.d.ts";
 export { default as Search } from "./src/search/search.js";
 export type * from "./src/search/search.d.ts";
+export { searchComponentId } from "./src/search/SearchComponent.vue";
+export type * from "./src/search/SearchComponent.vue.d.ts";
 export { markText } from "./src/search/markText.js";
 export type * from "./src/search/markText.d.ts";
 export { default as ResultItemComponent } from "./src/search/ResultItem.vue";
 export type * from "./src/search/ResultItem.vue.d.ts";
 export { default as ResultsComponent } from "./src/search/ResultsComponent.vue";
 export type * from "./src/search/ResultsComponent.vue.d.ts";
-export { addLoadingOverlay, callSafeAction, createMapButtonAction, createToggleAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction, searchComponentId } from "./src/actions/actionHelper.js";
+export { addLoadingOverlay, callSafeAction, createMapButtonAction, createToggleAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { createDeepPickingAction, deepPickingWindowId } from "./src/actions/deepPickingAction.js";
 export type * from "./src/actions/deepPickingAction.d.ts";

package/index.js

@@ -11,7 +11,6 @@ export {
   createLinkAction,
   createGoToViewpointAction,
   createZoomToFeatureAction,
-  searchComponentId,
 } from './src/actions/actionHelper.js';
 export {
   createDeepPickingAction,
@@ -313,6 +312,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';
@@ -376,6 +376,7 @@ export {
   getLegendEntries,
 } from './src/legend/legendHelper.js';
 export { default as Search } from './src/search/search.js';
+export { searchComponentId } from './src/search/SearchComponent.vue';
 export { markText } from './src/search/markText.js';
 export { default as ResultItemComponent } from './src/search/ResultItem.vue';
 export { default as ResultsComponent } from './src/search/ResultsComponent.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.2.2",
+  "version": "6.2.4",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {

package/plugins/@vcmap-show-case/extent-example/src/ExtentExample.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container class="pa-0">
+    <VcsExtentEditor heading="Default WGS84 projection" v-model="wgs84Extent" />
+    <VcsExtentEditor
+      heading="Mercator projection example"
+      v-model="mercatorExtent"
+    />
+  </v-container>
+</template>
+<script>
+  import { VcsExtentEditor } from '@vcmap/ui';
+  import { VContainer } from 'vuetify/components';
+  import { Extent, mercatorProjection, wgs84Projection } from '@vcmap/core';
+
+  export default {
+    name: 'ExtentExample',
+    components: { VcsExtentEditor, VContainer },
+    setup() {
+      const wgs84Extent = new Extent({ projection: wgs84Projection }).toJSON();
+      const mercatorExtent = new Extent({
+        projection: mercatorProjection,
+      }).toJSON();
+
+      return { wgs84Extent, mercatorExtent };
+    },
+  };
+</script>
+<style lang="scss" scoped></style>

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

@@ -1,19 +1,11 @@
-import {
-  ButtonLocation,
-  createToggleAction,
-  WindowSlot,
-  VcsExtentEditor,
-} from '@vcmap/ui';
-import { Extent } from '@vcmap/core';
-import { reactive } from 'vue';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from '../package.json';
+import ExtentExample from './ExtentExample.vue';
 
 /**
  * @returns {VcsPlugin}
  */
 export default async function extentExample() {
-  const modelValue = reactive(new Extent().toJSON());
-
   return {
     get name() {
       return packageJSON.name;
@@ -33,15 +25,12 @@ export default async function extentExample() {
         },
         {
           id: 'extent-example',
-          component: VcsExtentEditor,
+          component: ExtentExample,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
             headerTitle: 'Extent Example',
             headerIcon: '$vcsBoundingBox',
           },
-          props: {
-            modelValue,
-          },
         },
         app.windowManager,
         packageJSON.name,

package/src/actions/actionHelper.d.ts

@@ -118,7 +118,6 @@ export function addLoadingOverlay(app: import("../vcsUiApp.js").default, owner:
     maxWidth?: string | number | undefined;
     persistent?: boolean | undefined;
 } | undefined): () => void;
-export const searchComponentId: "searchId";
 export type ActionOptions = Omit<VcsAction, 'callback'>;
 export type ActionCallback = (p?: PointerEvent) => (void | Promise<void>);
 export type VcsAction = {

package/src/actions/actionHelper.js

@@ -18,7 +18,9 @@ import {
   getFittedWindowPositionOptions,
   getTargetSize,
 } from '../manager/window/windowHelper.js';
-import SearchComponent from '../search/SearchComponent.vue';
+import SearchComponent, {
+  searchComponentId,
+} from '../search/SearchComponent.vue';
 import VcsLoadingOverlay from '../components/plugins/VcsLoadingOverlay.vue';
 
 /**
@@ -215,8 +217,6 @@ export function createToggleAction(
   return { action, destroy };
 }
 
-export const searchComponentId = 'searchId';
-
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {{action: import("vue").UnwrapRef<VcsAction>, destroy: function():void}}

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/components/extent/VcsExtent.vue

@@ -18,6 +18,7 @@
       hide-z
       v-model="min"
       :disabled="disabled"
+      :extent="extent"
       :axis-rules="[
         [(v) => checkInput(v, max[0])],
         [(v) => checkInput(v, max[1])],
@@ -35,6 +36,7 @@
       hide-z
       v-model="max"
       :disabled="disabled"
+      :extent="extent"
       :axis-rules="[
         [(v) => checkInput(min[0], v)],
         [(v) => checkInput(min[1], v)],
@@ -54,7 +56,7 @@
 <script>
   import { computed, toRaw } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/components';
-  import { Extent } from '@vcmap/core';
+  import { Extent, Projection } from '@vcmap/core';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
@@ -100,6 +102,14 @@
     setup(props, { emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
 
+      const { proj } = new Projection(localValue.value.projection);
+      const extent = proj.getExtent() || [
+        -Infinity,
+        -Infinity,
+        Infinity,
+        Infinity,
+      ];
+
       const getCoordinate = (start, end = 4) =>
         computed({
           get() {
@@ -121,6 +131,7 @@
         min: getCoordinate(0, 2),
         max: getCoordinate(2),
         checkInput,
+        extent,
         cid,
       };
     },

package/src/components/extent/VcsExtent.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     min: import("vue").WritableComputedRef<any>;
     max: import("vue").WritableComputedRef<any>;
     checkInput: typeof checkInput;
+    extent: import("ol/extent.js", { with: { "resolution-mode": "import" } }).Extent;
     cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {

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>
@@ -134,6 +135,7 @@
    * @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.
    */
 
   /**
@@ -254,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

@@ -32,4 +32,8 @@ export type VcsTreeNodeItem = {
      * - 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';
 
@@ -143,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

@@ -31,10 +31,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     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;

package/src/contentTree/contentTreeItem.js

@@ -436,7 +436,7 @@ class ContentTreeItem {
   removeAction(actionName) {
     const index = this._getActionIndex(actionName);
     if (index > -1) {
-      this._actions.value.splice(index, 1);
+      this._actions.value = this._actions.value.filter((_, i) => i !== index);
     }
   }