@eclipse-scout/core 22.0.33 → 22.0.37

package/src/popup/Popup.js

@@ -3,7 +3,7 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -29,6 +29,7 @@ export default class Popup extends Widget {
     this.windowPaddingX = 10;
     this.windowPaddingY = 5;
     this.withGlassPane = false;
+    this._withGlassPane = null;
     this.withFocusContext = true;
     this.initialFocus = () => FocusRule.AUTO;
     this.focusableContainer = false;
@@ -67,12 +68,19 @@ export default class Popup extends Widget {
     // This is necessary because the mousedown listener is attached to the capture phase and therefore executed before any other.
     // If anchor was clicked, popup would already be closed and then opened again -> popup could never be closed by clicking the anchor
     this.closeOnAnchorMouseDown = true;
+    this._closeOnAnchorMouseDown = null;
 
     // Defines whether the popup should be closed on a mouse click outside of the popup
     this.closeOnMouseDownOutside = true;
+    this._closeOnMouseDownOutside = null;
 
     // Defines whether the popup should be closed whenever another popup opens.
     this.closeOnOtherPopupOpen = true;
+    this._closeOnOtherPopupOpen = null;
+
+    // Defines whether the popup should behave like a modal form. If true, the properties closeOnAnchorMouseDown, closeOnMouseDownOutside
+    // and closeOnOtherPopupOpen ore overruled and set to false. The property withGlassPane is overruled too and set to true.
+    this.modal = false;
 
     this._openLater = false;
 
@@ -145,10 +153,8 @@ export default class Popup extends Widget {
     if (options.location) {
       this.anchorBounds = new Rectangle(options.location.x, options.location.y, 0, 0);
     }
-    if (this.withGlassPane) {
-      this._glassPaneRenderer = new GlassPaneRenderer(this);
-    }
     this._setAnchor(this.anchor);
+    this._setModal(this.modal);
   }
 
   /**
@@ -299,6 +305,7 @@ export default class Popup extends Widget {
     this._renderWithArrow();
     this._renderWithFocusContext();
     this._renderWithGlassPane();
+    this._renderModal();
   }
 
   _postRender() {
@@ -383,9 +390,89 @@ export default class Popup extends Widget {
     this.session.focusManager.installFocusContext(this.$container, FocusRule.PREPARE);
   }
 
+  setModal(modal) {
+    this.setProperty('modal', modal);
+  }
+
+  _setModal(modal) {
+    this._setProperty('modal', modal);
+    if (modal) {
+      widgets.preserveAndSetProperty(() => this.setProperty('withGlassPane', true), () => this.withGlassPane, this, '_withGlassPane');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnAnchorMouseDown', false), () => this.closeOnAnchorMouseDown, this, '_closeOnAnchorMouseDown');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnMouseDownOutside', false), () => this.closeOnMouseDownOutside, this, '_closeOnMouseDownOutside');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnOtherPopupOpen', false), () => this.closeOnOtherPopupOpen, this, '_closeOnOtherPopupOpen');
+    } else {
+      widgets.resetProperty(v => this.setWithGlassPane(v), this, '_withGlassPane');
+      widgets.resetProperty(v => this.setCloseOnAnchorMouseDown(v), this, '_closeOnAnchorMouseDown');
+      widgets.resetProperty(v => this.setCloseOnMouseDownOutside(v), this, '_closeOnMouseDownOutside');
+      widgets.resetProperty(v => this.setCloseOnOtherPopupOpen(v), this, '_closeOnOtherPopupOpen');
+    }
+  }
+
+  _renderModal() {
+    this.$container.toggleClass('modal', this.modal);
+  }
+
+  setWithGlassPane(withGlassPane) {
+    if (!this.modal) {
+      this.setProperty('withGlassPane', withGlassPane);
+    } else {
+      this._withGlassPane = withGlassPane;
+    }
+  }
+
   _renderWithGlassPane() {
-    if (this._glassPaneRenderer) {
+    if (this.withGlassPane && !this._glassPaneRenderer) {
+      this._glassPaneRenderer = new GlassPaneRenderer(this);
       this._glassPaneRenderer.renderGlassPanes();
+    } else if (!this.withGlassPane && this._glassPaneRenderer) {
+      this._glassPaneRenderer.removeGlassPanes();
+      this._glassPaneRenderer = null;
+    }
+  }
+
+  setCloseOnMouseDownOutside(closeOnMouseDownOutside) {
+    if (!this.modal) {
+      this.setProperty('closeOnMouseDownOutside', closeOnMouseDownOutside);
+    } else {
+      this._closeOnMouseDownOutside = closeOnMouseDownOutside;
+    }
+  }
+
+  _renderCloseOnMouseDownOutside() {
+    // The listener needs to be executed in the capturing phase -> prevents that _onDocumentMouseDown will be executed right after the popup gets opened using mouse down, otherwise the popup would be closed immediately
+    if (this.closeOnMouseDownOutside && !this._documentMouseDownHandler) {
+      this._documentMouseDownHandler = this._onDocumentMouseDown.bind(this);
+      this.$container.document(true).addEventListener('mousedown', this._documentMouseDownHandler, true); // true=the event handler is executed in the capturing phase
+    } else if (!this.closeOnMouseDownOutside && this._documentMouseDownHandler) {
+      this.$container.document(true).removeEventListener('mousedown', this._documentMouseDownHandler, true);
+      this._documentMouseDownHandler = null;
+    }
+  }
+
+  setCloseOnAnchorMouseDown(closeOnAnchorMouseDown) {
+    if (!this.modal) {
+      this.setProperty('closeOnAnchorMouseDown', closeOnAnchorMouseDown);
+    } else {
+      this._closeOnAnchorMouseDown = closeOnAnchorMouseDown;
+    }
+  }
+
+  setCloseOnOtherPopupOpen(closeOnOtherPopupOpen) {
+    if (!this.modal) {
+      this.setProperty('closeOnOtherPopupOpen', closeOnOtherPopupOpen);
+    } else {
+      this._closeOnOtherPopupOpen = closeOnOtherPopupOpen;
+    }
+  }
+
+  _renderCloseOnOtherPopupOpen() {
+    if (this.closeOnOtherPopupOpen && !this._popupOpenHandler) {
+      this._popupOpenHandler = this._onPopupOpen.bind(this);
+      this.session.desktop.on('popupOpen', this._popupOpenHandler);
+    } else if (!this.closeOnOtherPopupOpen && this._popupOpenHandler) {
+      this.session.desktop.off('popupOpen', this._popupOpenHandler);
+      this._popupOpenHandler = null;
     }
   }
 
@@ -482,17 +569,9 @@ export default class Popup extends Widget {
    */
   _attachCloseHandlers() {
     // Install mouse close handler
-    // The listener needs to be executed in the capturing phase -> prevents that _onDocumentMouseDown will be executed right after the popup gets opened using mouse down, otherwise the popup would be closed immediately
-    if (this.closeOnMouseDownOutside) {
-      this._documentMouseDownHandler = this._onDocumentMouseDown.bind(this);
-      this.$container.document(true).addEventListener('mousedown', this._documentMouseDownHandler, true); // true=the event handler is executed in the capturing phase
-    }
-
+    this._renderCloseOnMouseDownOutside();
     // Install popup open close handler
-    if (this.closeOnOtherPopupOpen) {
-      this._popupOpenHandler = this._onPopupOpen.bind(this);
-      this.session.desktop.on('popupOpen', this._popupOpenHandler);
-    }
+    this._renderCloseOnOtherPopupOpen();
   }
 
   _attachAnchorHandlers() {

package/src/popup/Popup.less

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -24,6 +24,10 @@
   &.before-animate-open {
     .invisible();
   }
+
+  &.modal.animate-modality-highlight {
+    #scout.animation-shake();
+  }
 }
 
 .popup-arrow {

package/src/session/Session.js

@@ -1069,12 +1069,13 @@ export default class Session {
    *          do nothing. Can be used to prevent double messages for the same error.
    */
   showFatalMessage(options, errorCode) {
-    if (errorCode) {
-      if (this._fatalMessagesOnScreen[errorCode]) {
-        return;
-      }
-      this._fatalMessagesOnScreen[errorCode] = true;
+    if (!errorCode) {
+      errorCode = App.get().errorHandler.getJsErrorCode();
+    }
+    if (this._fatalMessagesOnScreen[errorCode]) {
+      return;
     }
+    this._fatalMessagesOnScreen[errorCode] = true;
 
     options = options || {};
     let model = {
@@ -1107,6 +1108,10 @@ export default class Session {
     messageBox.render($entryPoint);
   }
 
+  isFatalMessageShown() {
+    return Object.keys(this._fatalMessagesOnScreen).length > 0;
+  }
+
   uploadFiles(target, files, uploadProperties, maxTotalSize, allowedTypes) {
     let formData = new FormData(),
       acceptedFiles = [];

package/src/style/sizes.less

@@ -351,6 +351,7 @@
 @tooltip-padding-x: 12px;
 @tooltip-padding-y: @context-menu-item-padding-y;
 @tree-node-icon-width: 16px;
+@tree-node-icon-padding-right: 9px;
 @tree-node-bitmap-icon-size: @tree-node-icon-width;
 @tree-node-bitmap-icon-margin-top: -2px;
 @tree-node-checkbox-size: 20px;
@@ -364,6 +365,7 @@
 @tree-node-padding-left: 28px;
 @tree-node-padding-right: 7px;
 @tree-node-padding-y: 7px;
+@tree-node-padding-level-diff-parent-has-icon: @tree-node-icon-width + @tree-node-icon-padding-right;
 @view-tab-key-box-bottom: 9px;
 @view-tab-icon-font-size: 20px;
 @view-tab-selected-width: 56px;

package/src/table/TableFooter.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -583,13 +583,13 @@ export default class TableFooter extends Widget {
       if (footer.animating) {
         // Layout may be called when container stays open but changes its size using an animation.
         // At that time the controlContainer has not yet the final size, therefore measuring is not possible, but not necessary anyway.
-        controlContainerHeight = control.height;
+        controlContainerHeight = scout.nvl(control && control.height, controlContainerHeight);
       } else {
         // Measure the real height
         controlContainerHeight = graphics.size(footer.$controlContainer).height;
         // Expand control height? (but only if not resizing)
         if (!footer.resizing && growControl) {
-          controlContainerHeight = Math.max(control.height, controlContainerHeight);
+          controlContainerHeight = Math.max(control && control.height, controlContainerHeight);
         }
       }
     }

package/src/table/TableFooter.less

@@ -24,7 +24,7 @@
   left: 0;
   height: 16px;
   cursor: row-resize;
-  z-index: 1;
+  z-index: 2;
   border-top: @table-control-resize-border-width solid @table-control-resize-border-color;
 }
 
@@ -44,7 +44,7 @@
   }
 
   display: none;
-  z-index: 1;
+  z-index: 2; // Must not be smaller than z-index of scrollbar, see Table.less
   /* Reset nowrap, forms may have fields which need wrapping (e.g. label field) */
   white-space: normal;
 

package/src/table/controls/TableControl.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -99,13 +99,18 @@ export default class TableControl extends Action {
   /**
    * Renders the content if not already rendered.<br>
    * Opens the container if the container is not already open.<br>
-   * Does nothing if the content is not available yet to -> don't open container if content is not rendered yet to prevent blank container or laggy opening.
+   * Does nothing if the content is not available yet to -> don't open container if content is not rendered yet to prevent blank container or laggy opening.<br>
+   * Does nothing if the control is not selected.
    */
   renderContent() {
     if (!this.contentRendered && !this.isContentAvailable()) {
       return;
     }
 
+    if (!this.selected) {
+      return;
+    }
+
     if (!this.tableFooter.open) {
       this.tableFooter.openControlContainer(this);
     }

package/src/table/keystrokes/AbstractTableNavigationKeyStroke.js

@@ -197,6 +197,6 @@ export default class AbstractTableNavigationKeyStroke extends KeyStroke {
   }
 
   _isEnabled() {
-    return !this.field.tileMode;
+    return !this.field.tileMode && super._isEnabled();
   }
 }

package/src/tile/TileGrid.js

@@ -51,6 +51,7 @@ export default class TileGrid extends Widget {
     this.virtual = false;
     this.virtualScrolling = null;
     this.withPlaceholders = false;
+    this.placeholderProducer = null;
 
     this.$filterFieldContainer = null;
     this.textFilterEnabled = false;
@@ -610,6 +611,10 @@ export default class TileGrid extends Widget {
     this.invalidateLayoutTree();
   }
 
+  setPlaceholderProducer(placeholderProducer) {
+    this.setProperty('placeholderProducer', placeholderProducer);
+  }
+
   fillUpWithPlaceholders() {
     if (!this.withPlaceholders) {
       this._deleteAllPlaceholders();
@@ -623,9 +628,7 @@ export default class TileGrid extends Widget {
     if (!this.withPlaceholders) {
       return this.tiles;
     }
-    return this.tiles.filter(tile => {
-      return !(tile instanceof PlaceholderTile);
-    });
+    return this.tiles.filter(tile => !(tile instanceof PlaceholderTile));
   }
 
   _createPlaceholders() {
@@ -635,7 +638,8 @@ export default class TileGrid extends Widget {
       placeholders = [];
 
     if (tiles.length > 0) {
-      lastX = tiles[tiles.length - 1].gridData.x;
+      let tile = tiles[tiles.length - 1];
+      lastX = tile.gridData.x + tile.gridData.w - 1;
     } else {
       // If there are no tiles, create one row with placeholders
       lastX = -1;
@@ -655,9 +659,17 @@ export default class TileGrid extends Widget {
   }
 
   _createPlaceholder() {
-    return scout.create('PlaceholderTile', {
-      parent: this
-    });
+    let placeholder = (this.placeholderProducer && this.placeholderProducer()) || {};
+    if (placeholder instanceof PlaceholderTile) {
+      return placeholder;
+    }
+    if (objects.isPlainObject(placeholder)) {
+      return scout.create($.extend(true, {}, {
+        objectType: 'PlaceholderTile',
+        parent: this
+      }, placeholder));
+    }
+    throw new Error('Placeholder producer returned unexpected result.');
   }
 
   _deleteObsoletePlaceholders() {
@@ -1000,7 +1012,7 @@ export default class TileGrid extends Widget {
   }
 
   _applyFilters(tiles, fullReset) {
-    return this.filterSupport.applyFilters(tiles, fullReset);
+    return this.filterSupport.applyFilters(tiles.filter(tile => !(tile instanceof PlaceholderTile)), fullReset);
   }
 
   /**
@@ -1010,7 +1022,7 @@ export default class TileGrid extends Widget {
     return new FilterSupport({
       widget: this,
       $container: () => this.$filterFieldContainer,
-      getElementsForFiltering: () => this.tiles,
+      getElementsForFiltering: this.tilesWithoutPlaceholders.bind(this),
       createTextFilter: this._createTextFilter.bind(this),
       updateTextFilterText: this._updateTextFilterText.bind(this)
     });

package/src/timepicker/TimePicker.js

@@ -204,39 +204,6 @@ export default class TimePicker extends Widget {
 
   }
 
-  _findNextAllowedDate(years, months, days) {
-    let i, date,
-      sum = years + months + days,
-      dir = sum > 0 ? 1 : -1,
-      now = this.selectedDate || dates.trunc(new Date());
-
-    // if we shift by year or month, shift the 'now' date and then use that date as starting point
-    // to find the next allowed date.
-    if (years !== 0) {
-      now = dates.shift(now, years, 0, 0);
-    } else if (months !== 0) {
-      now = dates.shift(now, 0, months, 0);
-    }
-
-    if (dir === 1) { // find next allowed date, starting from currently selected date
-      for (i = 0; i < this.allowedDates.length; i++) {
-        date = this.allowedDates[i];
-        if (dates.compare(now, date) < 0) {
-          return date;
-        }
-      }
-    } else if (dir === -1) { // find previous allowed date, starting from currently selected date
-      for (i = this.allowedDates.length - 1; i >= 0; i--) {
-        date = this.allowedDates[i];
-        if (dates.compare(now, date) > 0) {
-          return date;
-        }
-      }
-    }
-
-    return null;
-  }
-
   _onNavigationMouseDown(event) {
     let $target = $(event.currentTarget);
     let diff = $target.data('shift');

package/src/tree/Tree.js

@@ -37,6 +37,7 @@ export default class Tree extends Widget {
     this.nodesMap = {}; // all nodes by id
     this.nodePaddingLevelCheckable = 23; /* padding for one tree-level if the tree is checkable */
     this.nodePaddingLevelNotCheckable = 18; /* padding for one tree-level if the tree is not checkable. this includes outline trees! */
+    this.nodePaddingLevelDiffParentHasIcon = null; /* is read from CSS */
     this.nodePaddingLeft = null; /* is read from CSS */
     this.nodeCheckBoxPaddingLeft = 29;
     this.nodeControlPaddingLeft = null; /* is read from CSS */
@@ -70,6 +71,7 @@ export default class Tree extends Widget {
 
     // contains all parents of a selected node, the selected node and the first level children
     this._inSelectionPathList = {};
+    this._changeNodeTaskScheduled = false;
     this.viewRangeRendered = new Range(0, 0);
     this.viewRangeSize = 20;
 
@@ -890,7 +892,7 @@ export default class Tree extends Widget {
 
   _renderNode(node) {
     let paddingLeft = this._computeNodePaddingLeft(node);
-    node.render(this.$container, paddingLeft, this.checkable, this.enabledComputed);
+    node.render(this.$container, paddingLeft);
     return node.$node;
   }
 
@@ -953,7 +955,7 @@ export default class Tree extends Widget {
       let $control = $node.children('.tree-node-control');
       let $checkbox = $node.children('.tree-node-checkbox');
 
-      node._updateControl($control, this);
+      node._updateControl($control);
       if (this.checkable) {
         if ($checkbox.length === 0) {
           node._renderCheckbox();
@@ -1312,7 +1314,7 @@ export default class Tree extends Widget {
       let node = $node.data('node');
       let paddingLeft = this._computeNodePaddingLeft(node);
       $node.cssPaddingLeft(objects.isNullOrUndefined(paddingLeft) ? '' : paddingLeft);
-      node._updateControl($node.children('.tree-node-control'), this);
+      node._updateControl($node.children('.tree-node-control'));
     });
   }
 
@@ -2087,18 +2089,41 @@ export default class Tree extends Widget {
     if (this.isBreadcrumbStyleActive()) {
       return this.nodePaddingLeft;
     }
-    let padding = node.level * this.nodePaddingLevel + this.nodePaddingLeft;
+    let padding = this.nodePaddingLeft + this._computeNodePaddingLeftForLevel(node);
     if (this.checkable) {
       padding += this.nodeCheckBoxPaddingLeft;
     }
     return padding;
   }
 
+  _computeNodeControlPaddingLeft(node) {
+    return this.nodeControlPaddingLeft + this._computeNodePaddingLeftForLevel(node);
+  }
+
+  _computeNodePaddingLeftForLevel(node) {
+    if (this.checkable || !this.nodePaddingLevelDiffParentHasIcon) {
+      return node.level * this.nodePaddingLevel;
+    }
+    let padding = 0;
+    let parentNode = node.parentNode;
+    while (parentNode) {
+      padding += this.nodePaddingLevel;
+      // Increase the padding if the parent node has an icon to make the hierarchy more clear
+      // This is not necessary if the child nodes have icons as well, the padding even looks too big, as it is the case for checkable trees.
+      // We only check the first child node for an icon because that one has the biggest impact on the hierarchy visualization. It also increases performance a little.
+      if (parentNode.iconId && !parentNode.childNodes[0].iconId) {
+        padding += this.nodePaddingLevelDiffParentHasIcon;
+      }
+      parentNode = parentNode.parentNode;
+    }
+    return padding;
+  }
+
   /**
    * Reads the paddings from CSS and stores them in nodePaddingLeft and nodeControlPaddingLeft
    */
   _computeNodePaddings() {
-    if (this.nodePaddingLeft !== null && this.nodeControlPaddingLeft !== null) {
+    if (this.nodePaddingLeft !== null && this.nodeControlPaddingLeft !== null && this.nodePaddingLevelDiffParentHasIcon !== null) {
       return;
     }
     let $dummyNode = this.$data.appendDiv('tree-node');
@@ -2109,6 +2134,9 @@ export default class Tree extends Widget {
     if (this.nodeControlPaddingLeft === null) {
       this.nodeControlPaddingLeft = $dummyNodeControl.cssPaddingLeft();
     }
+    if (this.nodePaddingLevelDiffParentHasIcon === null) {
+      this.nodePaddingLevelDiffParentHasIcon = this.$container.cssPxValue('--node-padding-level-diff-parent-has-icon');
+    }
     $dummyNode.remove();
   }
 
@@ -3169,6 +3197,19 @@ export default class Tree extends Widget {
     this.applyFiltersForNode(node);
     if (this.rendered) {
       node._decorate();
+      // The padding size of a node depends on whether the node or the parent node has an icon, see _computeNodePaddingLeftForLevel
+      // Unfortunately, we cannot easily detect whether the icon has changed or not.
+      // However, the padding calculation only needs to be done if the node that toggles the icon is visible and expanded or has an expanded parent.
+      let paddingDirty = !!this.nodePaddingLevelDiffParentHasIcon && !!this.visibleNodesMap[node.id] && (node.expanded || !!node.parentNode);
+      if (paddingDirty && !this._changeNodeTaskScheduled) {
+        // Because the change node event is not batch capable, performance would slow down if many change node events are processed
+        // To mitigate this, the updating is done later
+        queueMicrotask(() => {
+          this._updateNodePaddingsLeft();
+          this._changeNodeTaskScheduled = false;
+        });
+        this._changeNodeTaskScheduled = true;
+      }
     }
     this.trigger('nodeChanged', {
       node: node

package/src/tree/Tree.less

@@ -10,6 +10,8 @@
  */
 .tree {
   position: relative;
+  // The value of the css variable is read by Tree.js and added to the level padding if the parent node has an icon
+  --node-padding-level-diff-parent-has-icon: @tree-node-padding-level-diff-parent-has-icon;
 
   &:focus,
   &.focused {
@@ -122,7 +124,7 @@
 
   & > .icon {
     vertical-align: top;
-    padding-right: 9px;
+    padding-right: @tree-node-icon-padding-right;
     display: inline-block;
     text-align: center;
     min-width: @tree-node-icon-width;

package/src/tree/TreeNode.js

@@ -253,12 +253,13 @@ export default class TreeNode {
 
   _renderControl() {
     let $control = this.$node.prependDiv('tree-node-control');
-    this._updateControl($control, this.getTree());
+    this._updateControl($control);
   }
 
-  _updateControl($control, tree) {
+  _updateControl($control) {
+    let tree = this.getTree();
     $control.toggleClass('checkable', tree.checkable);
-    $control.cssPaddingLeft(tree.nodeControlPaddingLeft + this.level * tree.nodePaddingLevel);
+    $control.cssPaddingLeft(tree._computeNodeControlPaddingLeft(this));
     $control.setVisible(!this.leaf);
   }