@genexus/genexus-ide-ui 0.0.45 → 0.0.47

package/dist/components/tree-x-list.js

@@ -2,10 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:relative;width:100%}";
 
-/**
- * This variable specifies a reference to the main ch-tree-x element
- */
-let mainTreeRef;
 const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -15,59 +11,14 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Level in the tree at which the control is placed.
      */
     this.level = 0;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "none";
-    this.updateLastItemDashedLine = () => {
-      // @todo WA to avoid StencilJS' bug. The showLines Watch is dispatched
-      // before the componentDidLoad lifecycle method completes
-      if (!this.slotRef) {
-        return;
-      }
-      const treeItems = this.slotRef.assignedElements();
-      if (treeItems.length === 0) {
-        return;
-      }
-      const lastItemIndex = treeItems.length - 1;
-      for (let i = 0; i < lastItemIndex; i++) {
-        treeItems[i].lastItem = false;
-      }
-      treeItems[lastItemIndex].lastItem = true;
-    };
-  }
-  handleShowLinesChange(newValue) {
-    // Displayed items may have changed since the last time that `showLines === true`
-    if (newValue !== "none" && this.level !== 0) {
-      this.updateLastItemDashedLine();
-    }
-  }
-  componentWillLoad() {
-    // Set tree level
-    const parentElement = this.el.parentElement;
-    // Set item level
-    this.level = parentElement.level + 1;
-    // If the mainTreeRef is not defined, the first item that will load this
-    // reference will be the top tree-x-list
-    if (!mainTreeRef) {
-      mainTreeRef = parentElement;
-    }
-    this.showLines = mainTreeRef.showLines;
   }
   render() {
-    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines !== "none" && this.level !== 0
-        ? this.updateLastItemDashedLine
-        : null, ref: el => (this.slotRef = el) })));
+    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", null)));
   }
   get el() { return this; }
-  static get watchers() { return {
-    "showLines": ["handleShowLinesChange"]
-  }; }
   static get style() { return treeXListCss; }
 }, [1, "ch-tree-x-list", {
-    "level": [1026],
-    "showLines": [1025, "show-lines"]
+    "level": [2]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/tree-x.js

@@ -18,9 +18,8 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
 const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
 
 const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
-const TREE_LIST_TAG_NAME = "ch-tree-x-list";
+const TREE_TAG_NAME = "ch-tree-x";
 // Selectors
-const TREE_LIST_AND_ITEM_SELECTOR = TREE_LIST_TAG_NAME + "," + TREE_ITEM_TAG_NAME;
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
 const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
@@ -77,10 +76,6 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.draggedParentIds = [];
     this.draggingInTheDocument = false;
     this.draggingInTree = false;
-    /**
-     * Level in the tree at which the control is placed.
-     */
-    this.level = -1;
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
@@ -95,11 +90,6 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * tree.
      */
     this.scrollToEdgeOnDrag = true;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "none";
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
@@ -108,6 +98,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.trackItemDrag = (event) => {
       event.preventDefault();
       this.lastDragEvent = event;
+      this.updateDropEffect(event);
       if (!this.needForRAF) {
         return;
       }
@@ -127,57 +118,6 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         requestAnimationFrame(this.fixScrollPositionOnDrag);
       });
     };
-    this.handleKeyDownEvents = (event) => {
-      const keyHandler = this.keyDownEvents[event.key];
-      if (keyHandler) {
-        keyHandler(event);
-      }
-    };
-  }
-  handleShowLinesChange(newShowLines) {
-    const treeItems = this.el.querySelectorAll(TREE_LIST_AND_ITEM_SELECTOR);
-    treeItems.forEach(item => {
-      item.showLines = newShowLines;
-    });
-  }
-  /**
-   * Given an item id, it displays and scrolls into the item view.
-   */
-  async scrollIntoVisible(treeItemId) {
-    const itemRef = this.el.querySelector(`${TREE_ITEM_TAG_NAME}#${treeItemId}`);
-    if (!itemRef) {
-      return;
-    }
-    let parentItem = itemRef.parentElement.parentElement;
-    // Expand all parents
-    while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
-      parentItem.expanded = true;
-      parentItem = parentItem.parentElement.parentElement;
-    }
-    // Wait until the parents are expanded
-    requestAnimationFrame(() => {
-      itemRef.scrollIntoView();
-    });
-  }
-  /**
-   * Update the information about the valid droppable zones.
-   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
-   * @param newContainerId ID of the container where the drag is trying to be made.
-   * @param draggedItems Information about the dragged items.
-   * @param validDrop Current state of the droppable zone.
-   */
-  async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
-    var _a;
-    if (!this.draggingInTheDocument ||
-      requestTimestamp <= this.dragStartTimestamp) {
-      return;
-    }
-    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
-    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
-    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
-    if (shouldUpdateDragEnterInCurrentContainer) {
-      this.lastOpenSubTreeItem.dragState = "enter";
-    }
   }
   // /**
   //  * Returns an array of the selected tree items, providing the id, caption and
@@ -194,6 +134,13 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //     selected: item.selected
   //   }));
   // }
+  // Set edit mode in items
+  handleKeyDownEvents(event) {
+    const keyHandler = this.keyDownEvents[event.key];
+    if (keyHandler) {
+      keyHandler(event);
+    }
+  }
   // We can't use capture, because the dataTransfer info would not be defined
   // Also, we cant use capture and setTimeout with 0 seconds, because the
   // getData method can only be accessed during the dragstart and drop event
@@ -248,6 +195,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     this.itemsDropped.emit({
       newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+      draggingSelectedItems: this.draggingSelectedItems,
       draggedItems: draggedItems,
       dropInTheSameTree: this.draggingInTree
     });
@@ -257,7 +205,13 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       capture: true
     });
     this.currentDraggedItem = event.target;
-    this.updateDragInfo(event.detail);
+    const allItemsCanBeDragged = this.checkDragValidityAndUpdateDragInfo(event.detail);
+    if (!allItemsCanBeDragged) {
+      // This effect disables drop interactions in all page elements, so there
+      // is no need to capture and prevent the drop event in the window
+      event.detail.dragEvent.dataTransfer.effectAllowed = "none";
+      return;
+    }
     this.draggingInTree = true;
     if (this.scrollToEdgeOnDrag) {
       this.fixScrollPositionOnDrag();
@@ -271,26 +225,94 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // Reset not allowed droppable ids
     this.resetVariables();
   }
+  /**
+   * Only sync the info about the selected items. It does not update the state
+   * of the previous selected items.
+   */
+  handleSelectedItemSync(event) {
+    event.stopPropagation();
+    const selectedItemInfo = event.detail;
+    // If the item is selected, add it to list
+    if (selectedItemInfo.selected) {
+      this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
+    }
+    else {
+      this.selectedItemsInfo.delete(selectedItemInfo.id);
+    }
+  }
   handleSelectedItemChange(event) {
     event.stopPropagation();
     const selectedItemInfo = event.detail;
     const selectedItemEl = event.target;
     this.handleItemSelection(selectedItemEl, selectedItemInfo);
   }
+  /**
+   * Clear all information about the selected items. This method is intended to
+   * be used when selected items are reordered and the selected references will
+   * no longer be useful.
+   */
+  async clearSelectedItemsInfo() {
+    this.clearSelectedItems();
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    const itemRef = this.el.querySelector(`${TREE_ITEM_TAG_NAME}#${treeItemId}`);
+    if (!itemRef) {
+      return;
+    }
+    let parentItem = itemRef.parentElement.parentElement;
+    // Expand all parents
+    while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
+      parentItem.expanded = true;
+      parentItem = parentItem.parentElement.parentElement;
+    }
+    // Wait until the parents are expanded
+    requestAnimationFrame(() => {
+      itemRef.scrollIntoView();
+    });
+  }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    var _a;
+    if (!this.draggingInTheDocument ||
+      requestTimestamp <= this.dragStartTimestamp) {
+      return;
+    }
+    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
+    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
+    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
+    if (shouldUpdateDragEnterInCurrentContainer) {
+      this.lastOpenSubTreeItem.dragState = "enter";
+    }
+  }
   validDroppableZone(event) {
     const containerTarget = event.target;
-    // When dragging in the same tree, don't mark droppable zones if they are
-    // the dragged items or their direct parents
-    if (this.draggingInTree &&
-      (this.draggedIds.includes(containerTarget.id) ||
-        this.draggedParentIds.includes(containerTarget.id))) {
-      return "invalid";
-    }
     const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
     const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
     if (droppableZoneState != null) {
       return droppableZoneState;
     }
+    // Do not show drop zones if:
+    //   - The effect does not allow it.
+    //   - The drop is disabled in the container target.
+    //   - When dragging in the same tree, don't mark droppable zones if they are
+    //     the dragged items or their direct parents.
+    if (event.dataTransfer.effectAllowed === "none" ||
+      containerTarget.dropDisabled ||
+      (this.draggingInTree &&
+        (this.draggedIds.includes(containerTarget.id) ||
+          this.draggedParentIds.includes(containerTarget.id)))) {
+      this.validDroppableZoneCache.set(cacheKey, "invalid");
+      return "invalid";
+    }
     this.validDroppableZoneCache.set(cacheKey, "checking");
     this.droppableZoneEnter.emit({
       newContainer: {
@@ -310,25 +332,43 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
     }, this.openSubTreeCountdown);
   }
+  updateDropEffect(event) {
+    const itemTarget = event.target;
+    // Check if it is a valid item
+    if (itemTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME ||
+      itemTarget.closest(TREE_TAG_NAME) !== this.el) {
+      return;
+    }
+    const cacheKey = getDroppableZoneKey(itemTarget.id, this.draggedItems);
+    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    if (droppableZoneState === "invalid") {
+      event.dataTransfer.dropEffect = "none";
+    }
+  }
   resetVariables() {
     this.draggedIds = [];
     this.draggedParentIds = [];
   }
   /**
-   * Update the dataTransfer in the drag event to store the ids and metadata of
-   * the dragged items. Also it updates the visual information of the dragged
+   * First, it check if all items can be dragged. If so, it updates the
+   * dataTransfer in the drag event to store the ids and metadata of the
+   * dragged items. Also it updates the visual information of the dragged
    * items.
+   * @returns If all selected items can be dragged.
    */
-  updateDragInfo(dragInfo) {
+  checkDragValidityAndUpdateDragInfo(dragInfo) {
     const draggedElement = dragInfo.elem;
     const isDraggingSelectedItems = this.selectedItemsInfo.has(draggedElement.id);
     this.draggingSelectedItems = isDraggingSelectedItems;
     let dataTransferInfo = [];
+    let dragIsEnabledForAllItems;
     if (isDraggingSelectedItems) {
       const selectedItemKeys = [...this.selectedItemsInfo.keys()];
+      const selectedItemValues = [...this.selectedItemsInfo.values()];
       const selectedItemCount = selectedItemKeys.length;
+      dragIsEnabledForAllItems = selectedItemValues.every(el => !el.itemRef.dragDisabled);
       this.draggedIds = selectedItemKeys;
-      dataTransferInfo = [...this.selectedItemsInfo.values()].map(el => ({
+      dataTransferInfo = selectedItemValues.map(el => ({
         id: el.id,
         metadata: el.metadata
       }));
@@ -338,6 +378,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           : selectedItemCount.toString();
     }
     else {
+      dragIsEnabledForAllItems = !draggedElement.dragDisabled;
       dataTransferInfo = [
         { id: draggedElement.id, metadata: draggedElement.metadata }
       ];
@@ -347,7 +388,11 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
     // Update drag event info
     const data = JSON.stringify(dataTransferInfo);
-    dragInfo.dataTransfer.setData(TEXT_FORMAT, data);
+    dragInfo.dragEvent.dataTransfer.setData(TEXT_FORMAT, data);
+    // We must keep the data binding and processing even if there is an item
+    // that can't be dragged, otherwise, other trees or element might behave
+    // unexpected when a dragstart event comes
+    return dragIsEnabledForAllItems;
   }
   getDirectParentsOfDraggableItems(draggingSelectedItems) {
     if (!draggingSelectedItems) {
@@ -370,6 +415,8 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // If the Control key was not pressed or multi selection is disabled,
     // remove all selected items
     if (!selectedItemInfo.ctrlKeyPressed || !this.multiSelection) {
+      // Don't update the state of the selected item if no needed
+      this.selectedItemsInfo.delete(selectedItemInfo.id);
       this.selectedItemsInfo.forEach(treeItem => {
         treeItem.itemRef.selected = false;
       });
@@ -381,23 +428,13 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (selectedItemInfo.selected) {
       this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
     }
-    else {
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-    }
     // Sync with UI model
     this.selectedItemsChange.emit(this.selectedItemsInfo);
   }
   clearSelectedItems() {
     this.selectedItemsInfo.clear();
   }
-  connectedCallback() {
-    // Set edit mode in items
-    this.el.addEventListener("keydown", this.handleKeyDownEvents, {
-      capture: true
-    });
-  }
   disconnectedCallback() {
-    this.el.removeEventListener("keydown", this.handleKeyDownEvents);
     this.resetVariables();
     // Remove dragover body event
     this.handleItemDragEnd();
@@ -410,22 +447,18 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
   }
   get el() { return this; }
-  static get watchers() { return {
-    "showLines": ["handleShowLinesChange"]
-  }; }
   static get style() { return treeXCss; }
 }, [4, "ch-tree-x", {
-    "level": [2],
     "multiSelection": [4, "multi-selection"],
     "openSubTreeCountdown": [2, "open-sub-tree-countdown"],
     "scrollToEdgeOnDrag": [4, "scroll-to-edge-on-drag"],
-    "showLines": [1, "show-lines"],
     "waitDropProcessing": [4, "wait-drop-processing"],
     "draggingInTheDocument": [32],
     "draggingInTree": [32],
+    "clearSelectedItemsInfo": [64],
     "scrollIntoVisible": [64],
     "updateValidDroppableZone": [64]
-  }, [[9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
+  }, [[2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemSync", "handleSelectedItemSync"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;