Options
All
  • Public
  • Public/Protected
  • All
Menu

Class StackPanelLayoutRegion

Represents a linear stack of widgets, arranged either top-to-bottom or left-to-right. The root element of any dashboard is a StackPanel. StackPanels may be arbitrarily nested, and may host any other layout regions as children.

Hierarchy

Index

Classes

Interfaces

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

content

content: Panel

Private Optional dragIndex

dragIndex: undefined | number

Private Optional dragStart

dragStart: undefined | number

Protected metadata

metadata: ParentMetadata<IStackPanelProperties>

Private originalSizings

originalSizings: ["flexSize" | "fixedSize.px" | null, number][] = []

Private splitters

splitters: Set<HTMLDivElement> = new Set()

The drag-resize splitters for this panel

typeName

typeName: StackPanelLayoutRegion = LayoutTypes.StackPanelLayoutRegion

Static FixedSize

FixedSize: AttachedProperty<DashboardLayoutRegion<IDashboardLayoutProperties>, null | number> = new AttachedProperty<DashboardLayoutRegion, number | null>({name: "Fixed Size (px)",changed: (owner, _old, newValue) => {if (newValue != null) {FlexSize.set(owner, null);}if (owner.parentRegion) {owner.parentRegion.fit();owner.parentRegion.update();}owner.setStale();},create: () => null})

Static FlexSize

FlexSize: AttachedProperty<DashboardLayoutRegion<IDashboardLayoutProperties>, null | number> = new AttachedProperty<DashboardLayoutRegion, number | null>({name: "Stretch",changed: (owner, _old, newValue) => {if (newValue != null) {// clear fixed size if not nullFixedSize.set(owner, null);}if (owner.parentRegion) {owner.parentRegion.fit();owner.parentRegion.update();}owner.setStale();},create: () => 1,})

Static IsExpanded

IsExpanded: AttachedProperty<DashboardLayoutRegion<IDashboardLayoutProperties>, null | false | true> = new AttachedProperty<DashboardLayoutRegion, boolean | null>({name: "Expanded",changed: (owner, wasExpanded, willExpand) => {if (wasExpanded === willExpand) return;if (owner.parentRegion) {const mode = owner.parentRegion.getLayoutProperty("accordionMode");if (willExpand && mode === "Single") {for (const widget of owner.parentRegion.widgets) {if (widget === owner) continue;if (!IsExpanded.get(widget)) {continue;}IsExpanded.set(widget, false);}}owner.parentRegion.fit();owner.parentRegion.update();}owner.setStale();},create: () => null})

Static Private evTypes

evTypes: string[] = ["keyup", "pointerup", "contextmenu", "pointermove"]

Accessors

widgets

Methods

Private _markSubtreeForUpdate

  • _markSubtreeForUpdate(): void

Private _updateSkippedSubtrees

  • _updateSkippedSubtrees(): void

addChild

Private cancelResize

  • cancelResize(ev?: PointerEvent | KeyboardEvent): void

clearAttachedProperties

copyAttachedProperties

createDragShadow

  • Create a drag shadow for one of this region's children.

    remarks

    Drag shadows are signifiers of the region being dragged, and indicate to the user what the dragged region is. For some regions (like the Canvas), it's useful to customize this shadow to expose more information (such as how it will be positioned in the CanvasPanel).

    The shadow must be completely static- it will not recieve any events, and will be destroyed at the end of the drag operation.

    Parameters

    • child: DashboardLayoutRegion<any>

      The region that is being dragged

    • clientX: number

      The X coordinate that the drag will start from

    • clientY: number

      The Y coordinate that the drag will start from

    Returns HTMLElement

    A valid HTML node that will follow the mouse during the drag.

dispose

  • dispose(): void

Private endResize

  • endResize(): void

getAttachedPropertyForChild

Protected getDefault

  • getDefault(propertyName: string): unknown

Private getMaxSizeConstraint

  • getMaxSizeConstraint(): number

handleEvent

  • handleEvent(ev: DOMEvent): void

insertChild

Protected installContentTap

  • installContentTap(): void

  • Installs a message tap on the content to listen for child-removed.

    This tap is necessary for regions that use a custom layout algorithm, since the parent won't necessarily be notified when a Panel child is removed.

    Returns void

layoutChildren

  • layoutChildren(): void

  • Function to layout the children within this stack panel.

    Layout algorithm description

    Terms
    • [[ ]]: A name enclosed in double brackets is a region layout property
    • Flex item: An element that defines a [[flexSize]] in it's properties
    • Absolutely-sized item: An element that defines a [[fixedSize]] in it's properties
    • basis-direction: The axis along which this Stack panel is arranged. May be vertical (top-to-bottom) or horizontal (left-to-right).
    • basis-size: An element's desired size along this StackPanel's basis-direction.
    • minor-axis-size: An element's desired size along the opposite to this StackPanel's basis-direction

    Algorithm
    1. Definitions
      1. Let useAccordions = false if <a href="../interfaces/istackpanelproperties.html#accordionmode">accordionMode</a> = 'None' else true
      2. Let splitterSize = 25 if useAccordions else [[splitterSize]]
      3. Let minSize = 0.
      4. Let maxSize = (the size of the parent container in the basis-direction)
        • (twice the padding of the parent).
      5. Let totalFlex = 0.
    2. For each element:
      1. If the element does not have <a href="../interfaces/regionwithchildren.iprops.html#showregion">showRegion</a>:
        1. Continue.
      2. Add splitterSize to minSize
      3. If useAccordionsand the element does not have <a href="stackpanellayoutregion.html#isexpanded">IsExpanded</a>:
        1. Continue
      4. ElseIf the element is absolutely positioned:
        1. Add the element's [[fixedSize]] to minSize.
      5. Else:
        1. Add the element's [[flexSize]] to totalFlex
    3. If not useAccordions:
      1. Subtract splitterSize from minSize COMMENT. don't render last splitter
    4. If minSize exceeds maxSize:
      1. Set totalFlex to Infinity COMMENT. do not allow flex items to layout, but leave their splitters in place
    5. Let flowSize = (maxSize - minSize) / totalFlex.
    6. For each element:
      1. If useAccordions and the element does not have <a href="stackpanellayoutregion.html#isexpanded">IsExpanded</a>:
        1. Calculate the basis-size as 0
      2. ElseIf the element does not have <a href="../interfaces/regionwithchildren.iprops.html#showregion">showRegion</a>:
        1. Calculate the basis-size as 0
      3. ElseIf the element is a flex item:
        1. Calculate the basis-size as [[flexSize]] * flowSize
      4. Else:
        1. Calculate the basis-size as [[fixedSize]]
      5. Set the element size to the minor-axis-size by basis-size
      6. If the element does not have <a href="../interfaces/regionwithchildren.iprops.html#showregion">showRegion</a>:
        1. Continue
      7. If useAccordions:
        1. Insert an Accordion folder before the element
      8. ElseIf element is not the last element with <a href="../interfaces/regionwithchildren.iprops.html#showregion">showRegion</a>:
        1. Insert a splitter after the element
    7. Return

    Returns void

Private makeAccordion

Private makeSplitter

  • makeSplitter(isHoriz: boolean, splitterSize: number, calculatedSize: object): HTMLDivElement

Private moveResize

  • moveResize(ev: PointerEvent): void

Protected onAfterAttach

  • onAfterAttach(): void

Protected onBeforeDetach

  • onBeforeDetach(): void

Protected onChildRegionAdded

Protected onChildRegionRemoved

  • Handle that gets called when a child is removed from this region.

    remarks

    Subclassers can override this method to implement custom logic, such as removing CSS classes or event handlers. Custom chroming elements added via Region Chroming will be removed automatically.

    This function is not called until after the oldChild has been moved, and will not be called if the old child is disposed. It will also not be called when this region is being disposed.

    The default implementation of this function is a no-op.

    Parameters

    Returns void

Protected onCloseRequest

  • onCloseRequest(): void

processMessage

  • processMessage(msg: Message): void

pruneSubtree

  • pruneSubtree(): void

  • Clean up this subtree by removing auto-generated empty regions.

    Notes

    This is a framework function and not meant to be called by user code. The MavenWorks framework will automatically manage the health of the layout, pruning when useful.

    Whether a region is "prunable" or not is specified by the <a href="../interfaces/regionwithchildren.iprops.html#prunable">prunable</a> layout property. For regions created with SurroundWith, this property is true.

    see

    IRegionWithChildrenProps.prunable

    see

    DashboardActions.SurroundWith

    Returns void

Private removeSplitters

  • removeSplitters(): void

setFresh

  • setFresh(): void

sizeContentToFit

  • sizeContentToFit(bounds: object): void

Private startResize

  • startResize(ev: PointerEvent): void

subtree

updateFromProperties

  • updateFromProperties(): void

Static GetMetadata

Generated using TypeDoc