@eclipse-scout/core 22.0.0-beta.10 → 22.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.0-beta.10",
+  "version": "22.0.1",
   "description": "Eclipse Scout runtime",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,7 +26,7 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "22.0.0-beta.10",
+    "@eclipse-scout/cli": "22.0.1",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/App.js

@@ -291,7 +291,7 @@ export default class App {
     $loadingRoot.css('opacity', $loadingRoot.css('opacity'));
     // Add animation listener before adding the classes to ensure the listener will always be triggered even while debugging
     $loadingRoot.oneAnimationEnd(() => $loadingRoot.remove());
-    if ($loadingRoot.css('opacity') == 1) {
+    if ($loadingRoot.css('opacity') === '1') {
       $loadingRoot.addClass('fadeout and-more');
     } else {
       $loadingRoot.addClass('fadeout');

package/src/box/Box.less

@@ -26,9 +26,9 @@
 }
 
 .box-content {
-  border: 1px solid @border-color;
+  border: @popup-border-width solid @popup-border-color;
   border-radius: @border-radius-large;
-  background-color: @background-color;
+  background-color: @popup-background-color;
   max-width: @box-width;
   margin: 0 auto;
   padding: 45px 95px 50px 95px;

package/src/breadcrumbbar/BreadcrumbBarLayout.js

@@ -44,7 +44,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
     this._collapse(breadcrumbItems, containerSize);
   }
 
-  _collapse = function($container, containerSize) {
+  _collapse($container, containerSize) {
     let currentIndex = 1;
     const visibleBreadcrumbItems = this._visibleBreadcrumbItems();
     let prefSize = this._actualPrefSize(visibleBreadcrumbItems, true);
@@ -116,7 +116,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
   /**
    * @return {number} the preferred width of all breadcrumbItems (plus ellipsis breadcrumb)
    */
-  _breadcrumbItemsWidth = function(breadcrumbItems, considerEllipsis) {
+  _breadcrumbItemsWidth(breadcrumbItems, considerEllipsis) {
     let breadcrumbsWidth = 0;
     breadcrumbItems = breadcrumbItems || this._visibleBreadcrumbItems();
     breadcrumbItems.forEach(breadcrumbItem => {

package/src/desktop/desktoptab/DesktopTabAreaLayout.js

@@ -19,4 +19,4 @@ export default class DesktopTabAreaLayout extends SimpleTabAreaLayout {
     super.layout($container);
     this.tabArea.updateFirstTabSelected();
   }
-}
+}

package/src/desktop/viewbutton/ViewButton.less

@@ -35,6 +35,11 @@
     border-radius: @view-tab-selected-border-radius;
   }
 
+  & > .edge {
+    // Ensure GlassPane.js does not set position: relative if glass pane is added before view tab is selected
+    position: absolute;
+  }
+
   &.selected:not(.in-background) {
     margin: @view-tab-selected-margin-top 0 0;
     border-radius: @view-tab-selected-border-radius @view-tab-selected-border-radius 0 0;

package/src/login/LoginBox.less

@@ -53,18 +53,20 @@
  */
 .login-button.default {
 
-  &.login-error {
-    border-color: @palette-red-4;
-    background-color: @palette-red-4;
+  &.login-error:not(.disabled) {
+    border-color: transparent;
+    background-color: @error-color;
 
     &:hover {
-      background-color: @palette-red-4;
-      border-color: @palette-red-4;
+      background-color: @error-default-button-background-hover-color;
     }
 
     &:active {
-      border-color: @palette-red-4;
-      background-color: darken(@palette-red-4, 5%);
+      background-color: @error-default-button-background-active-color;
+    }
+
+    &:focus {
+      #scout.focus-border(@box-shadow-color: @error-focus-box-shadow-color, @border-color: mix(@error-color, @error-focus-box-shadow-color, 25%));
     }
   }
 

package/src/messagebox/MessageBox.less

@@ -88,7 +88,7 @@
       }
     }
 
-    .severity-button(@error-color, @focus-color: @error-focus-box-shadow-color);
+    .severity-button(@error-color, @error-default-button-background-hover-color, @error-default-button-background-active-color, @error-focus-box-shadow-color);
   }
 
   &.warning {
@@ -100,7 +100,7 @@
       }
     }
 
-    .severity-button(@warning-color, @focus-color: @warning-focus-box-shadow-color);
+    .severity-button(@warning-color, @warning-default-button-background-hover-color, @warning-default-button-background-active-color, @warning-focus-box-shadow-color);
   }
 
   &.ok {
@@ -112,7 +112,7 @@
       }
     }
 
-    .severity-button(@ok-color, @focus-color: @ok-focus-box-shadow-color);
+    .severity-button(@ok-color, @ok-default-button-background-hover-color, @ok-default-button-background-active-color, @ok-focus-box-shadow-color);
   }
 
   &.animate-open {

package/src/style/colors-dark.less

@@ -75,8 +75,14 @@
 @warning-color: @palette-orange-2;
 @ok-color: @palette-green-2;
 @error-background-color: @background-color;
+@error-default-button-background-hover-color: lighten(@error-color, 6%);
+@error-default-button-background-active-color: lighten(@error-color, 10%);
 @error-focus-box-shadow-color: mix(@error-color, @palette-black, 50%);
+@warning-default-button-background-hover-color: lighten(@warning-color, 8%);
+@warning-default-button-background-active-color: lighten(@warning-color, 12%);
 @warning-focus-box-shadow-color: mix(@warning-color, @palette-black, 50%);
+@ok-default-button-background-hover-color: lighten(@ok-color, 8%);
+@ok-default-button-background-active-color: lighten(@ok-color, 14%);
 @ok-focus-box-shadow-color: mix(@ok-color, @palette-black, 50%);
 @focus-border-color: @focus-color;
 @focus-box-shadow-color: darken(@focus-color, 30%);
@@ -102,7 +108,8 @@
 @popup-2-background-color: @palette-gray-6;
 @popup-2-backdrop-background-color: fade(@popup-2-background-color, 80%);
 @popup-2-backdrop-filter: blur(15px);
-@selected-hover-background-color: darken(@selected-background-color, 10%);
+@selected-hover-background-color: lighten(@selected-background-color, 8%);
+@selected-active-background-color: lighten(@selected-background-color, 12%);
 @selected-disabled-background-color: @palette-gray-5;
 @text-color: @palette-gray-2;
 @text-color-1: @palette-gray-3;

package/src/style/colors.less

@@ -101,8 +101,14 @@
 @ok-color: @palette-green-5;
 @error-background-color: @palette-red-0;
 @error-border-color: @error-color;
+@error-default-button-background-hover-color: darken(@error-color, 6%);
+@error-default-button-background-active-color: darken(@error-color, 13%);
 @error-focus-box-shadow-color: fade(@error-color, 40%);
+@warning-default-button-background-hover-color: darken(@warning-color, 6%);
+@warning-default-button-background-active-color: darken(@warning-color, 13%);
 @warning-focus-box-shadow-color: fade(@warning-color, 40%);
+@ok-default-button-background-hover-color: darken(@ok-color, 6%);
+@ok-default-button-background-active-color: darken(@ok-color, 13%);
 @ok-focus-box-shadow-color: fade(@ok-color, 40%);
 @focus-border-color: @accent-color-3;
 @focus-box-shadow-color: darken(@accent-color-1, 10%);

package/src/style/mixins.less

@@ -213,8 +213,7 @@
     }
   }
 
-  .tooltip-status,
-  .info-status {
+  .tooltip-status {
     visibility: visible;
     cursor: pointer;
 
@@ -236,6 +235,10 @@
     }
   }
 
+  .info-status {
+    #scout.tooltip-status();
+  }
+
   .ok-status {
     visibility: visible;
     cursor: pointer;

package/src/table/Table.js

@@ -848,7 +848,7 @@ export default class Table extends Widget {
   _isAggregatedTooltip($cell) {
     let $row = $cell.parent();
     return $row.data('aggregateRow') /* row in the table */
-      || $row.hasClass('table-aggregate') /* aggregate table control */;
+      || $row.hasClass('table-aggregate'); /* aggregate table control */
   }
 
   reload(reloadReason) {

package/src/table/columns/ColumnOptimalWidthMeasurer.js

@@ -178,7 +178,7 @@ export default class ColumnOptimalWidthMeasurer {
       return 0;
     }
     let $neighbour = cellRange[cellRange.length - 1];
-    if ($neighbour.hasClass('empty') || $cell.hasClass('halign-right') == $neighbour.hasClass('halign-right')) {
+    if ($neighbour.hasClass('empty') || $cell.hasClass('halign-right') === $neighbour.hasClass('halign-right')) {
       return 0;
     }
     let $neighbourText = $neighbour.children('.text');

package/src/tagbar/TagBarOverflowPopupLayout.js

@@ -20,4 +20,4 @@ export default class TagBarOverflowPopupLayout extends PopupLayout {
     prefSize.width += this.popup.htmlComp.insets().horizontal();
     return prefSize;
   }
-}
+}

package/src/tile/fields/button/ButtonTile.js

@@ -15,4 +15,4 @@ export default class ButtonTile extends FormFieldTile {
     super._render();
     this.$container.addClass('button-tile');
   }
-}
+}

package/src/tree/LazyNodeFilter.js

@@ -18,10 +18,11 @@ export default class LazyNodeFilter {
   accept(node) {
     if (node.expanded) {
       return true;
-    } else {
-      // not expanded: remove lazy expand marker (forget lazy expanded children)
-      node.childNodes.forEach(child => delete child._lazyNodeFilterAccepted);
     }
+    // not expanded: remove lazy expand marker (forget lazy expanded children)
+    node.childNodes.forEach(child => {
+      child._lazyNodeFilterAccepted = false;
+    });
 
     if (!node.parentNode || !node.parentNode.expandedLazy || !node.parentNode.lazyExpandingEnabled || !this.tree.lazyExpandingEnabled) {
       // no lazy expanding supported
@@ -34,7 +35,7 @@ export default class LazyNodeFilter {
       if (typeof selectedNode === 'string') {
         break;
       }
-      if (selectedNode == node) {
+      if (selectedNode === node) {
         node._lazyNodeFilterAccepted = true;
         return true;
       }

package/src/tree/Tree.js

@@ -128,10 +128,8 @@ export default class Tree extends Widget {
     this.initialTraversing = true;
     this._setCheckable(this.checkable);
     this._ensureTreeNodes(this.nodes);
-    this.visitNodes(this._initTreeNode.bind(this));
-    this.visitNodes(this._updateFlatListAndSelectionPath.bind(this));
+    this._initNodes(this.nodes);
     this.initialTraversing = false;
-    this.selectedNodes = this._nodesByIds(this.selectedNodes);
     this.menuBar = scout.create('MenuBar', {
       parent: this,
       position: MenuBar.Position.BOTTOM,
@@ -145,6 +143,22 @@ export default class Tree extends Widget {
     this._setMenus(this.menus);
   }
 
+  /**
+   * Initialize nodes, applies filters and updates flat list
+   */
+  _initNodes(nodes, parentNode) {
+    if (!nodes) {
+      nodes = this.nodes;
+    }
+    Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
+    if (typeof this.selectedNodes[0] === 'string') {
+      this.selectedNodes = this._nodesByIds(this.selectedNodes);
+    }
+    this._updateSelectionPath();
+    nodes.forEach(node => this.applyFiltersForNode(node));
+    Tree.visitNodes((node, parentNode) => this._addToVisibleFlatList(node, false), nodes, parentNode);
+  }
+
   /**
    * Iterates through the given array and converts node-models to instances of TreeNode (or a subclass).
    * If the array element is already a TreeNode the function leaves the element untouched. This function also
@@ -226,44 +240,25 @@ export default class Tree extends Widget {
   }
 
   isSelectedNode(node) {
-    if (this.initialTraversing) {
-      return this.selectedNodes.indexOf(node.id) > -1;
-    }
     return this.selectedNodes.indexOf(node) > -1;
   }
 
-  _updateFlatListAndSelectionPath(node, parentNode) {
-    // if this node is selected all parent nodes have to be added to selectionPath
-    if (this.isSelectedNode(node) && (node.parentNode && !this.visibleNodesMap[node.parentNode.id] || node.level === 0)) {
-      let p = node;
-      while (p) {
-        this._inSelectionPathList[p.id] = true;
-        p.filterDirty = true;
-
-        if (p !== node) {
-          // ensure node is expanded
-          node.expanded = true;
-          // if parent was filtered before, try refilter after adding to selection path.
-          if (p.level === 0) {
-            this.applyFiltersForNode(p);
-
-            // add visible nodes to visible nodes array when they are initialized
-            this._addToVisibleFlatList(p, false);
-
-            // process children
-            this._addChildrenToFlatList(p, this.visibleNodesFlat.length - 1, false, null, true);
-          }
-        }
-        p = p.parentNode;
-      }
-    } else if (node.parentNode && this.isSelectedNode(node.parentNode)) {
-      this._inSelectionPathList[node.id] = true;
+  _updateSelectionPath() {
+    let selectedNode = this.selectedNodes[0];
+    if (!selectedNode) {
+      return;
     }
+    this._inSelectionPathList[selectedNode.id] = true;
 
-    this.applyFiltersForNode(node);
+    selectedNode.childNodes.forEach(child => {
+      this._inSelectionPathList[child.id] = true;
+    });
 
-    // add visible nodes to visible nodes array when they are initialized
-    this._addToVisibleFlatList(node, false);
+    let parentNode = selectedNode.parentNode;
+    while (parentNode) {
+      this._inSelectionPathList[parentNode.id] = true;
+      parentNode = parentNode.parentNode;
+    }
   }
 
   _initTreeNode(node, parentNode) {
@@ -1432,9 +1427,7 @@ export default class Tree extends Widget {
           this._removeFromFlatList(node, false);
         }
       } else if (renderExpansionOpts.expandLazyChanged) {
-        node.childNodes.forEach(child => {
-          this.applyFiltersForNode(child, true, renderAnimated);
-        });
+        this.applyFiltersForNode(node, false, renderAnimated);
       }
 
       if (this.groupedNodes[node.id]) {
@@ -1648,7 +1641,8 @@ export default class Tree extends Widget {
       let insertIndex, isAlreadyAdded = this.visibleNodesMap[node.id];
       if (isAlreadyAdded) {
         this.insertBatchInVisibleNodes(insertBatch, this._showNodes(insertBatch), animatedRendering);
-        this.checkAndHandleBatchAnimationWrapper(parentNode, animatedRendering, insertBatch);
+        // Animate rendering is always false because it would generate a bunch of animation wrappers which stay forever without really starting an animation...
+        this.checkAndHandleBatchAnimationWrapper(parentNode, false, insertBatch);
         insertBatch = this.newInsertBatch(insertBatch.nextBatchInsertIndex());
         insertBatch = this._addChildrenToFlatListIfExpanded(1, node, insertIndex, animatedRendering, insertBatch, forceFilter);
       } else {
@@ -2194,9 +2188,7 @@ export default class Tree extends Widget {
           parentNode.childNodes.push(entry);
         });
       }
-      // initialize node and add to visible list if node is visible
-      Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
-      Tree.visitNodes(this._updateFlatListAndSelectionPath.bind(this), nodes, parentNode);
+      this._initNodes(nodes, parentNode);
       if (this.groupedNodes[parentNode.id]) {
         this._updateItemPath(false, parentNode);
       }
@@ -2219,9 +2211,7 @@ export default class Tree extends Widget {
       } else {
         arrays.pushAll(this.nodes, nodes);
       }
-      // initialize node and add to visible list if node is visible
-      Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
-      Tree.visitNodes(this._updateFlatListAndSelectionPath.bind(this), nodes, parentNode);
+      this._initNodes(nodes, parentNode);
     }
     if (this.rendered) {
       this.viewRangeDirty = true;
@@ -2345,9 +2335,7 @@ export default class Tree extends Widget {
     }, this);
 
     // update child node indices
-    parentNodesToReindex.forEach(function(p) {
-      this._updateChildNodeIndex(p.childNodes);
-    }, this);
+    parentNodesToReindex.forEach(p => this._updateChildNodeIndex(p.childNodes));
     this._updateChildNodeIndex(topLevelNodesToReindex);
 
     this.deselectNodes(deletedNodes, {collectChildren: true});
@@ -2761,7 +2749,6 @@ export default class Tree extends Widget {
     }
     result.newlyShown.forEach(node => this._addToVisibleFlatList(node, this.filterAnimated));
     result.newlyHidden.forEach(node => this._removeFromFlatList(node, this.filterAnimated));
-    this._nodesFiltered(result.newlyHidden);
     this.filteredElementsDirty = false;
   }
 
@@ -2771,7 +2758,7 @@ export default class Tree extends Widget {
     // iterate from end to beginning (child nodes first) so that the state of the children has already been updated
     for (let i = this.visibleNodesFlat.length - 1; i >= 0; i--) {
       let node = this.visibleNodesFlat[i];
-      let result = this._applyFiltersForNodeRec(node, false, animated);
+      let result = this._applyFiltersForNodeRec(node, true, animated);
       if (result.newlyHidden.length) {
         if (!node.isFilterAccepted()) {
           newlyHidden.push(...result.newlyHidden);
@@ -2800,11 +2787,11 @@ export default class Tree extends Widget {
       result.newlyShown.unshift(...parentResult.newlyShown);
       parent = parent.parentNode;
     }
+    this._nodesFiltered(result.newlyHidden);
 
     if (applyNewHiddenShownNodes) {
       result.newlyShown.forEach(node => this._addToVisibleFlatList(node, animated));
       result.newlyHidden.forEach(node => this._removeFromFlatList(node, animated));
-      this._nodesFiltered(result.newlyHidden);
     }
     return result;
   }
@@ -2816,14 +2803,18 @@ export default class Tree extends Widget {
     let changed = this._applyFiltersForNode(node);
     let hasChildrenWithFilterAccepted = false;
     if (node.level < 32 /* see org.eclipse.scout.rt.client.ui.basic.tree.AbstractTree.expandAllRec */) {
-      node.childNodes.forEach(childNode => {
-        if (recursive) {
+      if (recursive) {
+        node.childNodes.forEach(childNode => {
           let result = this._applyFiltersForNodeRec(childNode, true, animated);
           newlyHidden.push(...result.newlyHidden);
           newlyShown.push(...result.newlyShown);
-        }
-        hasChildrenWithFilterAccepted = hasChildrenWithFilterAccepted || childNode.filterAccepted;
-      });
+          hasChildrenWithFilterAccepted = hasChildrenWithFilterAccepted || childNode.filterAccepted;
+        });
+      } else if (!node.filterAccepted) {
+        // Check children only if filterAccepted is false because only then hasChildrenWithFilterAccepted is used (see below).
+        // This has great impact on performance when there are many nodes
+        hasChildrenWithFilterAccepted = node.childNodes.some(childNode => childNode.filterAccepted);
+      }
     }
 
     // set filter accepted on this node if it has children with filter accepted (so that the children are visible)
@@ -3053,6 +3044,10 @@ export default class Tree extends Widget {
           that.runningAnimationsFinishFunc();
           $node.removeClass('hiding');
           if (!$node.hasClass('showing')) {
+            // JQuery sets display to none which we don't need because node will be detached.
+            // If node is added using another method than slideDown (used by show node), it would be invisible.
+            // Example: parent is collapsed while nodes are hiding -> remove filter, expand parent -> invisible nodes
+            $node.css('display', '');
             $node.detach();
             node.attached = false;
           }
@@ -3066,15 +3061,11 @@ export default class Tree extends Widget {
   }
 
   _nodesToIds(nodes) {
-    return nodes.map(node => {
-      return node.id;
-    });
+    return nodes.map(node => node.id);
   }
 
   _nodesByIds(ids) {
-    return ids.map(id => {
-      return this.nodesMap[id];
-    });
+    return ids.map(id => this.nodesMap[id]);
   }
 
   _nodeById(id) {

package/src/util/dragAndDrop.js

@@ -175,13 +175,13 @@ export function _createDragAndDropHandlerOptions(target) {
     target: target,
     supportedScoutTypes: dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
     validateFiles: (files, defaultValidator) => defaultValidator(files),
-    onDrop: (files) => {
+    onDrop: files => {
     },
     dropType: () => dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
     dropMaximumSize: () => target.dropMaximumSize,
     doInstall: () => target.enabledComputed,
     container: () => target.$container,
-    additionalDropProperties: (event) => {
+    additionalDropProperties: event => {
     }
   };
 }
@@ -269,6 +269,7 @@ export default {
  * @property {String} [selector] CSS selector which will be added to the event source.
  * @property {dropType} [dropType] Returns the allowed drop type during a drop event. Default is {@link dragAndDrop.SCOUT_TYPES.FILE_TRANSFER}
  * @property {dropMaximumSize} [dropMaximumSize] Returns the maximum allowed size of a dropped object. Default is {@link DragAndDropTarget.dropMaximumSize}
- * @property {validateFiles} [validateFiles] An optional function to add a custom file validation logic. Throw a {@link dropValidationErrorMessage} to indicate a failed validation. if no custom validator is installed, the default maximum file size validator is invoked.
+ * @property {validateFiles} [validateFiles] An optional function to add a custom file validation logic. Throw a {@link dropValidationErrorMessage} to indicate a failed validation.
+ *           If no custom validator is installed, the default maximum file size validator is invoked.
  * @property {additionalDropProperties} [additionalDropProperties] Returns additional drop properties to be used in {@link DragAndDropHandler.uploadFiles} as uploadProperties
- */
+ */

package/src/util/events.js

@@ -220,7 +220,7 @@ export function onSwipe($element, id, onDown, onMove, onUp) {
       let pageX = events.pageX(event);
       let deltaX = pageX - origPageX;
       let newLeft = origPosLeft + deltaX;
-      if (newLeft != curPosLeft) {
+      if (newLeft !== curPosLeft) {
         // only update swipe direction if it actually changed
         direction = Math.sign(newLeft - curPosLeft);
       }

package/src/widget/FilterSupport.js

@@ -51,7 +51,7 @@ export default class FilterSupport extends WidgetSupport {
       scout.assertParameter('getElementsForFiltering', options.getElementsForFiltering);
       this._getElementsForFiltering = options.getElementsForFiltering;
     }
-    this._getElementText = options.getElementText || ((element) => $(element).text());
+    this._getElementText = options.getElementText || (element => $(element).text());
 
     if (options.createTextFilter) {
       scout.assertParameter('updateTextFilterText', options.updateTextFilterText);