Set default width fo menu widgets

[Max-ChenFei]

    // Compute the desired offset position for the handle.
    let rect = this.node.getBoundingClientRect();
    let xPos = event.clientX - rect.left - this._pressData.deltaX;
    let yPos = event.clientY - rect.top - this._pressData.deltaY;

    // Set the handle as close to the desired position as possible.
    let layout = this.layout as DockLayout;
    layout.moveHandle(this._pressData.handle, xPos, yPos);

[drcd1]

the layout.moveHandle() function only works when the docked panel is already being displayed - it uses pixel units. It will not solve our problem, because often dockpanels are not really seen for a while (i.e.: if they are within hidden tabs). We might be able to do something convoluted like checking to see if it's the first time we're showing a dock, and if so, move the handles to our desired default values... but this is not really ideal.

[Max-ChenFei]

    // Compute how much the items to the right can expand.
    let growLimit = 0;
    for (let i = index + 1, n = sizers.length; i < n; ++i) {
      let sizer = sizers[i];
      growLimit += sizer.maxSize - sizer.size;
    }

    // Compute how much the items to the left can shrink.
    let shrinkLimit = 0;
    for (let i = 0; i <= index; ++i) {
      let sizer = sizers[i];
      shrinkLimit += sizer.size - sizer.minSize;
    }

the sizer

[Max-ChenFei]

    // Bail early if there is no root or if the handle is hidden.
    let hidden = handle.classList.contains('lm-mod-hidden');
    if (!this._root || hidden) {
      return;
    }

    // Lookup the split node for the handle.
    let data = this._root.findSplitNode(handle);
    if (!data) {
      return;
    }

    // Compute the desired delta movement for the handle.
    let delta: number;
    if (data.node.orientation === 'horizontal') {
      delta = offsetX - handle.offsetLeft;
    } else {
      delta = offsetY - handle.offsetTop;
    }

    // Bail if there is no handle movement.
    if (delta === 0) {
      return;
    }

    // Prevent sibling resizing unless needed.
    data.node.holdSizes();

    // Adjust the sizers to reflect the handle movement.
    BoxEngine.adjust(data.node.sizers, data.index, delta);

    // Update the layout of the widgets.
    if (this.parent) {
      this.parent.update();
    }
  }

[Max-ChenFei]

get handler and children from docklayout._root

    /**
     * Find the split layout node which contains the given handle.
     */
    findSplitNode(
      handle: HTMLDivElement
    ): { index: number; node: SplitLayoutNode } | null {
      let index = this.handles.indexOf(handle);
      if (index !== -1) {
        return { index, node: this };
      }
      for (let i = 0, n = this.children.length; i < n; ++i) {
        let result = this.children[i].findSplitNode(handle);
        if (result) {
          return result;
        }
      }
      return null;
    }

did recursion to find the SplitLayoutNode of this widgets and index means the order of the handle

nested splitlayoutnode and tablayoutnode

[Max-ChenFei]

access to the handle via dockpanel.layout._root.handles or document.dock.layout.handles() from left to right or top to bottom at the first level.

[Max-ChenFei]

Save layout and restore

  let children_config = [
        {currentIndex: 0, type: "tab-area", widgets: [r1]},
        {currentIndex: 0, type: "tab-area", widgets: [r2, r4]},
        {currentIndex: 0, type: "tab-area", widgets: [r3]}];
    let layout_config = { main:  { type: 'split-area', orientation: 'horizontal', children: children_config, sizes: [0.1, 0.8, 0.1]}};
    dock.restoreLayout(layout_config);