07 Resizing

Panes are separated by PaneDivider component. Resizing is initiated when mouse pointer is pressed on a PaneDivider.

A context, TransformContext in defined in FlexDivide which handles the resizing of Panes

  type TransformContext = {
    startResize(
      x: number,
      y: number,
      divider: HTMLElement,
      pane: Pane,
      paneIndex: number,
      type: string,
      equal: boolean,
      onResize: () => {}
    ): void;
    initialize(): void;
    updateResize(type: string, equal?: boolean): void;
    splitSize();
    setResizePanes(type: string);
    setResizeInnerPanes();
    saveResizePanes(type: string, resizing?: boolean): void;
    shrinkPane(
      marker: ResizeMarker,
      newPosition: number,
      direction: string,
      property: string,
      forwarded: boolean,
      reverse?: boolean
    ): number;
    doResize(event: MouseEvent): void;
    stopResize(): void;
  }

• startResize - This method is called when mouse pointer is pressed on a PaneDivider. Initial parameters are saved. See more details here - PanelResize
• initialize - When mouse is moved after mouse down, resizing is initialized.
• updateResize - Update resizing parameters on mouse move
• setResizePanes - Get the bounds of the Panes affected by the resize operations
• setResizeInnerPanes - Get the bounds of the inner Panes if it is Pane Group affected by the resize operations
• doResize - Calculate new sizes of the Panes and update the UI elements
• shrinkPane - Shrink adjacent Panes if required
• splitSize - On a double click on a PaneDivider, total space is equally divided between the Panes.
• stopResize - Stop resizing and reset all resize parameters
• saveResizePanes - Save the new sizes of the Panes and update Workspace ⠀ ⠀ ⠀

Next : Workspace