reneco-hierarchized-picker 0.4.2-beta.4 → 0.4.2-beta.6

package/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js

@@ -44,6 +44,96 @@ var vanillaContextMenu = createCommonjsModule(function (module, exports) {
 
 const VanillaContextMenu = /*@__PURE__*/getDefaultExportFromCjs(vanillaContextMenu);
 
+let curDraggingItem = null;
+let lastDraggedOverNodeId = null;
+let lastDraggedOverTimeForAscendent = new Date().getTime();
+let lastDraggedOverTimeForLevel = new Date().getTime();
+const acceptableDelayBetweenSimilarActions = 300;
+/**
+ * Handles the drag start event.
+ */
+function onItemDragStart(el, e) {
+  curDraggingItem = el;
+  el.classList.add('dragging');
+  e.stopPropagation();
+}
+/**
+ * Handles the drag end event.
+ */
+function onItemDragEnd(el, e) {
+  el.classList.remove('dragging');
+  e.stopPropagation();
+  clearDragOverStyles(el.parentElement);
+}
+/**
+ * Handles the drag over event.
+ */
+function onItemDragOver(el, e) {
+  const now = new Date().getTime();
+  if (now - lastDraggedOverTimeForAscendent < 50 && el.dataset.nodeId !== lastDraggedOverNodeId) {
+    return;
+  }
+  lastDraggedOverTimeForAscendent = now;
+  if (el.dataset.nodeId === lastDraggedOverNodeId) {
+    if (now - lastDraggedOverTimeForLevel < acceptableDelayBetweenSimilarActions) {
+      return;
+    }
+    lastDraggedOverTimeForLevel = now;
+  }
+  else {
+    lastDraggedOverNodeId = el.dataset.nodeId;
+  }
+  clearDragOverStyles(el);
+  if (el === curDraggingItem) {
+    el.classList.remove('dragover');
+    return;
+  }
+  const pos = getDragOverPosition(el, e);
+  el.classList.add(`dragover-${pos}`);
+  el.classList.add('dragover');
+  e.stopPropagation();
+  e.preventDefault();
+}
+/**
+ * Handles the drag leave event.
+ */
+function onItemDragLeave(el, e) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+}
+/**
+ * Handles the drop event.
+ */
+function onItemDrop(el, e, dropCallback) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+  if (curDraggingItem) {
+    const pos = getDragOverPosition(el, e);
+    dropCallback(curDraggingItem, el, pos);
+  }
+}
+/**
+ * Determines the drop position based on the mouse event.
+ */
+function getDragOverPosition(el, e) {
+  const h = el.offsetHeight;
+  const before = h / 4;
+  const after = h - before;
+  const y = e.offsetY;
+  return y <= before ? 'before' : y >= after ? 'after' : 'over';
+}
+/**
+ * Clears the drag-over styles from the element.
+ */
+function clearDragOverStyles(el) {
+  if (!el)
+    return;
+  const prevClasses = Array.from(el.classList).filter(name => name.startsWith('dragover-'));
+  prevClasses.forEach(name => el.classList.remove(name));
+}
+
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
@@ -575,19 +665,21 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (this.options.parentApi.theOptions.dragAndDropEnabled) {
     li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
-      this.options.parentApi.onItemDragStart(li, e);
+      onItemDragStart(li, e);
     });
     li.addEventListener('dragend', e => {
-      this.options.parentApi.onItemDragEnd(li, e);
+      onItemDragEnd(li, e);
     });
     li.addEventListener('dragover', e => {
-      this.options.parentApi.onItemDragOver(li, e);
+      onItemDragOver(li, e);
     });
     li.addEventListener('dragleave', e => {
-      this.options.parentApi.onItemDragLeave(li, e);
+      onItemDragLeave(li, e);
     });
     li.addEventListener('drop', e => {
-      this.options.parentApi.onItemDrop(li, e);
+      onItemDrop(li, e, (dragEl, dropEl, position) => {
+        this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
+      });
     });
   }
   return li;
@@ -18347,6 +18439,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,

package/dist/collection/components/treejs/index.js

@@ -1,4 +1,5 @@
 import VanillaContextMenu from 'vanilla-context-menu';
+import { onItemDragStart, onItemDragEnd, onItemDragOver, onItemDragLeave, onItemDrop } from '../../features/tree/drag-drop';
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
@@ -542,19 +543,21 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (this.options.parentApi.theOptions.dragAndDropEnabled) {
     li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
-      this.options.parentApi.onItemDragStart(li, e);
+      onItemDragStart(li, e);
     });
     li.addEventListener('dragend', e => {
-      this.options.parentApi.onItemDragEnd(li, e);
+      onItemDragEnd(li, e);
     });
     li.addEventListener('dragover', e => {
-      this.options.parentApi.onItemDragOver(li, e);
+      onItemDragOver(li, e);
     });
     li.addEventListener('dragleave', e => {
-      this.options.parentApi.onItemDragLeave(li, e);
+      onItemDragLeave(li, e);
     });
     li.addEventListener('drop', e => {
-      this.options.parentApi.onItemDrop(li, e);
+      onItemDrop(li, e, (dragEl, dropEl, position) => {
+        this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
+      });
     });
   }
   return li;

package/dist/collection/features/tree/tree-utils.js

@@ -79,6 +79,7 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,

package/dist/custom-elements/index.js

@@ -41,6 +41,96 @@ var vanillaContextMenu = createCommonjsModule(function (module, exports) {
 
 const VanillaContextMenu = /*@__PURE__*/getDefaultExportFromCjs(vanillaContextMenu);
 
+let curDraggingItem = null;
+let lastDraggedOverNodeId = null;
+let lastDraggedOverTimeForAscendent = new Date().getTime();
+let lastDraggedOverTimeForLevel = new Date().getTime();
+const acceptableDelayBetweenSimilarActions = 300;
+/**
+ * Handles the drag start event.
+ */
+function onItemDragStart(el, e) {
+  curDraggingItem = el;
+  el.classList.add('dragging');
+  e.stopPropagation();
+}
+/**
+ * Handles the drag end event.
+ */
+function onItemDragEnd(el, e) {
+  el.classList.remove('dragging');
+  e.stopPropagation();
+  clearDragOverStyles(el.parentElement);
+}
+/**
+ * Handles the drag over event.
+ */
+function onItemDragOver(el, e) {
+  const now = new Date().getTime();
+  if (now - lastDraggedOverTimeForAscendent < 50 && el.dataset.nodeId !== lastDraggedOverNodeId) {
+    return;
+  }
+  lastDraggedOverTimeForAscendent = now;
+  if (el.dataset.nodeId === lastDraggedOverNodeId) {
+    if (now - lastDraggedOverTimeForLevel < acceptableDelayBetweenSimilarActions) {
+      return;
+    }
+    lastDraggedOverTimeForLevel = now;
+  }
+  else {
+    lastDraggedOverNodeId = el.dataset.nodeId;
+  }
+  clearDragOverStyles(el);
+  if (el === curDraggingItem) {
+    el.classList.remove('dragover');
+    return;
+  }
+  const pos = getDragOverPosition(el, e);
+  el.classList.add(`dragover-${pos}`);
+  el.classList.add('dragover');
+  e.stopPropagation();
+  e.preventDefault();
+}
+/**
+ * Handles the drag leave event.
+ */
+function onItemDragLeave(el, e) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+}
+/**
+ * Handles the drop event.
+ */
+function onItemDrop(el, e, dropCallback) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+  if (curDraggingItem) {
+    const pos = getDragOverPosition(el, e);
+    dropCallback(curDraggingItem, el, pos);
+  }
+}
+/**
+ * Determines the drop position based on the mouse event.
+ */
+function getDragOverPosition(el, e) {
+  const h = el.offsetHeight;
+  const before = h / 4;
+  const after = h - before;
+  const y = e.offsetY;
+  return y <= before ? 'before' : y >= after ? 'after' : 'over';
+}
+/**
+ * Clears the drag-over styles from the element.
+ */
+function clearDragOverStyles(el) {
+  if (!el)
+    return;
+  const prevClasses = Array.from(el.classList).filter(name => name.startsWith('dragover-'));
+  prevClasses.forEach(name => el.classList.remove(name));
+}
+
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
@@ -572,19 +662,21 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (this.options.parentApi.theOptions.dragAndDropEnabled) {
     li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
-      this.options.parentApi.onItemDragStart(li, e);
+      onItemDragStart(li, e);
     });
     li.addEventListener('dragend', e => {
-      this.options.parentApi.onItemDragEnd(li, e);
+      onItemDragEnd(li, e);
     });
     li.addEventListener('dragover', e => {
-      this.options.parentApi.onItemDragOver(li, e);
+      onItemDragOver(li, e);
     });
     li.addEventListener('dragleave', e => {
-      this.options.parentApi.onItemDragLeave(li, e);
+      onItemDragLeave(li, e);
     });
     li.addEventListener('drop', e => {
-      this.options.parentApi.onItemDrop(li, e);
+      onItemDrop(li, e, (dragEl, dropEl, position) => {
+        this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
+      });
     });
   }
   return li;
@@ -18344,6 +18436,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,

package/dist/esm/reneco-hierarchized-picker_2.entry.js

@@ -40,6 +40,96 @@ var vanillaContextMenu = createCommonjsModule(function (module, exports) {
 
 const VanillaContextMenu = /*@__PURE__*/getDefaultExportFromCjs(vanillaContextMenu);
 
+let curDraggingItem = null;
+let lastDraggedOverNodeId = null;
+let lastDraggedOverTimeForAscendent = new Date().getTime();
+let lastDraggedOverTimeForLevel = new Date().getTime();
+const acceptableDelayBetweenSimilarActions = 300;
+/**
+ * Handles the drag start event.
+ */
+function onItemDragStart(el, e) {
+  curDraggingItem = el;
+  el.classList.add('dragging');
+  e.stopPropagation();
+}
+/**
+ * Handles the drag end event.
+ */
+function onItemDragEnd(el, e) {
+  el.classList.remove('dragging');
+  e.stopPropagation();
+  clearDragOverStyles(el.parentElement);
+}
+/**
+ * Handles the drag over event.
+ */
+function onItemDragOver(el, e) {
+  const now = new Date().getTime();
+  if (now - lastDraggedOverTimeForAscendent < 50 && el.dataset.nodeId !== lastDraggedOverNodeId) {
+    return;
+  }
+  lastDraggedOverTimeForAscendent = now;
+  if (el.dataset.nodeId === lastDraggedOverNodeId) {
+    if (now - lastDraggedOverTimeForLevel < acceptableDelayBetweenSimilarActions) {
+      return;
+    }
+    lastDraggedOverTimeForLevel = now;
+  }
+  else {
+    lastDraggedOverNodeId = el.dataset.nodeId;
+  }
+  clearDragOverStyles(el);
+  if (el === curDraggingItem) {
+    el.classList.remove('dragover');
+    return;
+  }
+  const pos = getDragOverPosition(el, e);
+  el.classList.add(`dragover-${pos}`);
+  el.classList.add('dragover');
+  e.stopPropagation();
+  e.preventDefault();
+}
+/**
+ * Handles the drag leave event.
+ */
+function onItemDragLeave(el, e) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+}
+/**
+ * Handles the drop event.
+ */
+function onItemDrop(el, e, dropCallback) {
+  clearDragOverStyles(el);
+  el.classList.remove('dragover');
+  e.stopPropagation();
+  if (curDraggingItem) {
+    const pos = getDragOverPosition(el, e);
+    dropCallback(curDraggingItem, el, pos);
+  }
+}
+/**
+ * Determines the drop position based on the mouse event.
+ */
+function getDragOverPosition(el, e) {
+  const h = el.offsetHeight;
+  const before = h / 4;
+  const after = h - before;
+  const y = e.offsetY;
+  return y <= before ? 'before' : y >= after ? 'after' : 'over';
+}
+/**
+ * Clears the drag-over styles from the element.
+ */
+function clearDragOverStyles(el) {
+  if (!el)
+    return;
+  const prevClasses = Array.from(el.classList).filter(name => name.startsWith('dragover-'));
+  prevClasses.forEach(name => el.classList.remove(name));
+}
+
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
@@ -571,19 +661,21 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (this.options.parentApi.theOptions.dragAndDropEnabled) {
     li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
-      this.options.parentApi.onItemDragStart(li, e);
+      onItemDragStart(li, e);
     });
     li.addEventListener('dragend', e => {
-      this.options.parentApi.onItemDragEnd(li, e);
+      onItemDragEnd(li, e);
     });
     li.addEventListener('dragover', e => {
-      this.options.parentApi.onItemDragOver(li, e);
+      onItemDragOver(li, e);
     });
     li.addEventListener('dragleave', e => {
-      this.options.parentApi.onItemDragLeave(li, e);
+      onItemDragLeave(li, e);
     });
     li.addEventListener('drop', e => {
-      this.options.parentApi.onItemDrop(li, e);
+      onItemDrop(li, e, (dragEl, dropEl, position) => {
+        this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
+      });
     });
   }
   return li;
@@ -18343,6 +18435,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,