reneco-hierarchized-picker 0.4.2-beta.5 → 0.4.2-beta.7

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));
 }
@@ -199,7 +289,8 @@ Tree.prototype.bindEvent = function (ele) {
           return typeof item === 'string'
             ? item
             : Object.assign(Object.assign({}, item), { callback: e => {
-                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
+                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId] && that.nodesById[e.target.nodeId].children &&
+                    that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
                 delete targetOutput.children;
                 this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
               } });
@@ -575,19 +666,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,7 +18440,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
-        nodeid: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
@@ -19184,8 +19277,9 @@ const HierarchizedPickerComponent = class {
   async setNodeAsSelected(id, treeToUpdate, userClick) {
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
-      (this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
+      (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
       return;
+    }
     if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
       return;
     this.ignoreOptionsChanges = true;

package/dist/collection/components/hierarchized-picker/hierarchized-picker.js

@@ -619,8 +619,9 @@ export class HierarchizedPickerComponent {
   async setNodeAsSelected(id, treeToUpdate, userClick) {
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
-      (this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
+      (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
       return;
+    }
     if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
       return;
     this.ignoreOptionsChanges = true;

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));
 }
@@ -165,7 +166,8 @@ Tree.prototype.bindEvent = function (ele) {
           return typeof item === 'string'
             ? item
             : Object.assign(Object.assign({}, item), { callback: e => {
-                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
+                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId] && that.nodesById[e.target.nodeId].children &&
+                    that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
                 delete targetOutput.children;
                 this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
               } });
@@ -542,19 +544,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,7 +79,7 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
-        nodeid: 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));
 }
@@ -196,7 +286,8 @@ Tree.prototype.bindEvent = function (ele) {
           return typeof item === 'string'
             ? item
             : Object.assign(Object.assign({}, item), { callback: e => {
-                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
+                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId] && that.nodesById[e.target.nodeId].children &&
+                    that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
                 delete targetOutput.children;
                 this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
               } });
@@ -572,19 +663,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,7 +18437,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
-        nodeid: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
@@ -19182,8 +19275,9 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   async setNodeAsSelected(id, treeToUpdate, userClick) {
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
-      (this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
+      (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
       return;
+    }
     if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
       return;
     this.ignoreOptionsChanges = true;

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));
 }
@@ -195,7 +285,8 @@ Tree.prototype.bindEvent = function (ele) {
           return typeof item === 'string'
             ? item
             : Object.assign(Object.assign({}, item), { callback: e => {
-                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
+                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId] && that.nodesById[e.target.nodeId].children &&
+                    that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
                 delete targetOutput.children;
                 this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
               } });
@@ -571,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;
@@ -18343,7 +18436,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const deprecated = getPropertyFromNode(value, 'deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
-        nodeid: keyPropFromNode,
+        nodeId: keyPropFromNode,
         depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
@@ -19180,8 +19273,9 @@ const HierarchizedPickerComponent = class {
   async setNodeAsSelected(id, treeToUpdate, userClick) {
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
-      (this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
+      (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
       return;
+    }
     if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
       return;
     this.ignoreOptionsChanges = true;