fix: sorting with optional & hidden layers (#491)

* fix: sortting based on related li * chore: fix uid ts error * fix: check id & title properties+remove layer_uid * chore: remove getUid
EOX-A · Dec 5, 2023 · da132e7 · da132e7
1 parent 598de4f
commit da132e7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/elements/layercontrol/src/components/layerList.js b/elements/layercontrol/src/components/layerList.js
@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { when } from "lit/directives/when.js";
 import { repeat } from "lit/directives/repeat.js";
-import { createSortable, getLayerType } from "../helpers";
+import { checkProperties, createSortable, getLayerType } from "../helpers";
 import "./layer";
 import "./layerGroup";
 import _debounce from "lodash.debounce";
@@ -80,7 +80,13 @@ export class EOxLayerControlLayerList extends LitElement {
 
   firstUpdated() {
     if (this.layers) {
-      createSortable(this.renderRoot.querySelector("ul"), this.layers, this);
+      checkProperties(this.layers, this.idProperty, this.titleProperty);
+      createSortable(
+        this.renderRoot.querySelector("ul"),
+        this.layers,
+        this.idProperty,
+        this
+      );
     }
   }
 

diff --git a/elements/layercontrol/src/helpers.js b/elements/layercontrol/src/helpers.js
@@ -4,13 +4,18 @@ import Sortable from "sortablejs";
  *
  * @param {HTMLElement} element
  * @param {import("ol").Collection<import("ol/layer").Layer | import("ol/layer").Group>} collection
+ * @param {string} idProperty
  * @param {import("lit").LitElement} that
  */
-export const createSortable = (element, collection, that) => {
+export const createSortable = (element, collection, idProperty, that) => {
   /**
    * @type {any[]}
    */
   let childNodes = [];
+  /**
+   * @type {HTMLElement}
+   */
+  let related = null;
   /** @type HTMLElement & {_sortable: import("sortablejs")}*/ (
     element
   )._sortable = Sortable.create(element, {
@@ -31,6 +36,9 @@ export const createSortable = (element, collection, that) => {
           !node.classList.contains("sortable-fallback")
       );
     },
+    onMove(e) {
+      related = e.related;
+    },
     onEnd: (e) => {
       // Undo DOM changes by re-adding all children in their original order.
       const node = e.item;
@@ -44,34 +52,24 @@ export const createSortable = (element, collection, that) => {
       const layers = collection.getArray();
       const layer = layers.find(
         (l) =>
-          // @ts-ignore
-          l.ol_uid ===
+          l.get(idProperty) ===
           /** @type Element & {layer: import("ol/layer").Layer} */ (
             e.item.querySelector("eox-layercontrol-layer")
-            // @ts-ignore
-          ).layer.ol_uid
+          ).layer.get(idProperty)
+      );
+      const relatedLayer = layers.find(
+        (layer) => layer.get(idProperty) == related.dataset.layer
       );
-      const numberOfHiddenLayers = layers.filter(
-        (l) => l.get("layerControlHide") || l.get("layerControlOptional")
-      ).length;
-      const target =
-        layers[layers.length - 1 - e.newIndex - numberOfHiddenLayers];
       let draggedIndex;
       let dropIndex;
-      // remove dragged layer from collection
-      for (
-        draggedIndex = layers.length - 1;
-        draggedIndex > -1;
-        draggedIndex--
-      ) {
+      for (draggedIndex = 0; draggedIndex < layers.length; draggedIndex++) {
         if (layers[draggedIndex] == layer) {
           collection.removeAt(draggedIndex);
           break;
         }
       }
-      // re-add dragged layer at position of layer that has beend dropped on
-      for (dropIndex = layers.length - 1; dropIndex > -1; dropIndex--) {
-        if (layers[dropIndex] === target) {
+      for (dropIndex = 0; dropIndex < layers.length; dropIndex++) {
+        if (layers[dropIndex] === relatedLayer) {
           if (draggedIndex > dropIndex) collection.insertAt(dropIndex, layer);
           else collection.insertAt(dropIndex + 1, layer);
           break;
@@ -82,6 +80,28 @@ export const createSortable = (element, collection, that) => {
   });
 };
 
+/**
+ * Initially check if all layers have an id and title,
+ * fill in some backup in case they haven't
+ *
+ * @param {import("ol").Collection<import("ol/layer").Layer | import("ol/layer").Group>} collection
+ * @param {string} idProperty
+ * @param {string} titleProperty
+ */
+//
+export function checkProperties(collection, idProperty, titleProperty) {
+  const layerArray = collection.getArray();
+  layerArray.forEach((layer) => {
+    if (!layer.get(idProperty)) {
+      //@ts-ignore
+      layer.set(idProperty, layer.ol_uid);
+    }
+    if (!layer.get(titleProperty)) {
+      //@ts-ignore
+      layer.set(titleProperty, `layer ${layer.ol_uid}`);
+    }
+  });
+}
 /**
  * Filter all map layers by property
  *