perfect-graph / Modules / utils/addFlexLayout/flex-layout / YogaLayout

Class: YogaLayout

utils/addFlexLayout/flex-layout.YogaLayout

Table of contents

Constructors

• constructor

Properties

• _animation
• _aspectRatio
• _cachedLayout
• _gap
• _height
• _lastLayout
• _lastRecalculationDuration
• _marginLeft
• _marginTop
• _needUpdateAsRoot
• _width
• animationConfig
• children
• keepAspectRatio
• node
• parent
• rescaleToYoga
• target
• AFTER_LAYOUT_UPDATED_EVENT
• LAYOUT_UPDATED_EVENT
• NEED_LAYOUT_UPDATE
• isRendering
• roots

Accessors

• alignContent
• alignItems
• alignSelf
• animationState
• aspectRatio
• border
• borderAll
• borderBottom
• borderLeft
• borderRight
• borderTop
• bottom
• calculatedHeight
• calculatedWidth
• config
• display
• flexBasis
• flexDirection
• flexGrow
• flexShrink
• flexWrap
• gap
• hasContantDeclaredSize
• height
• isHeightCalculatedFromPixi
• isRoot
• isWidthCalculatedFromPixi
• justifyContent
• left
• margin
• marginAll
• marginBottom
• marginLeft
• marginRight
• marginTop
• maxHeight
• maxWidth
• minHeight
• minWidth
• padding
• paddingAll
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• position
• right
• root
• top
• width

Methods

• _parseValue
• addChild
• copy
• fillDefaults
• fromConfig
• getComputedLayout
• recalculateLayout
• removeChild
• requestLayoutUpdate
• update
• updateGap
• willLayoutWillBeRecomputed

Constructors

constructor

• new YogaLayout(pixiObject?)

Parameters

Name	Type
pixiObject	any

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:116

Properties

_animation

• Private _animation: IAnimationState

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:95

---

_aspectRatio

• Private _aspectRatio: number

Used instead of Yoga.AspectRatio because of Yoga issue https://github.com/facebook/yoga/issues/677

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:105

---

_cachedLayout

• Private _cachedLayout: any

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:89

---

_gap

• Private _gap: number = 0

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:107

---

_height

• Private _height: YogaSize

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:87

---

_lastLayout

• Private _lastLayout: any

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:91

---

_lastRecalculationDuration

• Private _lastRecalculationDuration: number = 0

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:93

---

_marginLeft

• Private _marginLeft: number = 0

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:114

---

_marginTop

• Private _marginTop: number = 0

Internal values stored to reduce calls to nbind

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:112

---

_needUpdateAsRoot

• Private _needUpdateAsRoot: boolean = false

Will be recalculated in next frame

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:100

---

_width

• Private _width: YogaSize

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:85

---

animationConfig

• animationConfig: IYogaAnimationConfig

If set, position transitions will be animated

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:72

---

children

• children: YogaLayout[] = []

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:65

---

keepAspectRatio

• keepAspectRatio: undefined | boolean

If true and rescaleToYoga===true, resizing will keep aspect ratio of obejct. Defaults to true on PIXI.Text and PIXI.Sprite.

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:83

---

node

• Readonly node: YogaNode

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:63

---

parent

• Optional parent: YogaLayout

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:67

---

rescaleToYoga

• rescaleToYoga: boolean = false

True if Yoga should manage PIXI objects width/height

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:77

---

target

• Readonly target: any

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:61

---

AFTER_LAYOUT_UPDATED_EVENT

▪ Static Readonly AFTER_LAYOUT_UPDATED_EVENT: "AFTER_LAYOUT_UPDATED_EVENT"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:57

---

LAYOUT_UPDATED_EVENT

▪ Static Readonly LAYOUT_UPDATED_EVENT: "LAYOUT_UPDATED_EVENT"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:55

---

NEED_LAYOUT_UPDATE

▪ Static Readonly NEED_LAYOUT_UPDATE: "NEED_LAYOUT_UPDATE"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:59

---

isRendering

▪ Static isRendering: boolean = true

Internal value. True if we are currently in WebGLRenderer.render() (based on 'prerender' and 'postrender' events). Used to skip some updateTransform calls.

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:48

---

roots

▪ Static roots: Map<string, YogaLayout>

Experimental feature for building layouts independent of pixi tree

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:53

Accessors

alignContent

• get alignContent(): "auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:423

• set alignContent(align): void

Parameters

Name	Type
align	"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:417

---

alignItems

• get alignItems(): "auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:434

• set alignItems(align): void

Parameters

Name	Type
align	"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:428

---

alignSelf

• get alignSelf(): "auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:446

• set alignSelf(align): void

Parameters

Name	Type
align	"auto" | "baseline" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:440

---

animationState

• get animationState(): Readonly<IAnimationState>

Returns

Readonly<IAnimationState>

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:148

---

aspectRatio

• get aspectRatio(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:320

• set aspectRatio(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:312

---

border

• get border(): number[]

Returns

number[]

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:620

• set border(margin): void

Parameters

Name	Type
margin	number[]

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:612

---

borderAll

• set borderAll(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:624

---

borderBottom

• get borderBottom(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:642

• set borderBottom(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:637

---

borderLeft

• get borderLeft(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:651

• set borderLeft(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:646

---

borderRight

• get borderRight(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:660

• set borderRight(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:655

---

borderTop

• get borderTop(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:633

• set borderTop(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:628

---

bottom

• get bottom(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:678

• set bottom(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:673

---

calculatedHeight

• get calculatedHeight(): number

Returns computed height in pixels

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:342

---

calculatedWidth

• get calculatedWidth(): number

Returns computed width in pixels

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:335

---

config

• set config(config): void

Same as 'fromConfig()'

Parameters

Name	Type
config	Partial<YogaLayout>

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:171

---

display

• get display(): "flex" | "none"

Returns

"flex" | "none"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:743

• set display(value): void

Parameters

Name	Type
value	"flex" | "none"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:737

---

flexBasis

• get flexBasis(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:486

• set flexBasis(basis): void

Parameters

Name	Type
basis	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:481

---

flexDirection

• get flexDirection(): "row" | "column" | "column-reverse" | "row-reverse"

Returns

"row" | "column" | "column-reverse" | "row-reverse"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:401

• set flexDirection(direction): void

Parameters

Name	Type
direction	"row" | "column" | "column-reverse" | "row-reverse"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:393

---

flexGrow

• get flexGrow(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:468

• set flexGrow(grow): void

Parameters

Name	Type
grow	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:463

---

flexShrink

• get flexShrink(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:477

• set flexShrink(shrink): void

Parameters

Name	Type
shrink	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:472

---

flexWrap

• get flexWrap(): "wrap" | "no-wrap" | "wrap-reverse"

Returns

"wrap" | "no-wrap" | "wrap-reverse"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:458

• set flexWrap(wrap): void

Parameters

Name	Type
wrap	"wrap" | "no-wrap" | "wrap-reverse"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:452

---

gap

• get gap(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:757

• set gap(val): void

Parameters

Name	Type
val	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:748

---

hasContantDeclaredSize

• get hasContantDeclaredSize(): boolean

Returns true if object size is independent of its children sizes.

Returns

boolean

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:248

---

height

• get height(): YogaSize

Can handle:

• pixels (eg 150)
• percents ("50%")
• "auto" to use values from yoga
• "pixi" to use DisplayObject.width/height

Returns

YogaSize

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:388

• set height(value): void

Can handle:

• pixels (eg 150)
• percents ("50%")
• "auto" to use values from yoga
• "pixi" to use DisplayObject.width/height

Parameters

Name	Type
value	YogaSize

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:377

---

isHeightCalculatedFromPixi

• get isHeightCalculatedFromPixi(): boolean

Returns

boolean

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:328

---

isRoot

• get isRoot(): boolean

Returns

boolean

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:241

---

isWidthCalculatedFromPixi

• get isWidthCalculatedFromPixi(): boolean

Returns

boolean

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:324

---

justifyContent

• get justifyContent(): "center" | "flex-start" | "flex-end" | "space-between" | "space-around"

Returns

"center" | "flex-start" | "flex-end" | "space-between" | "space-around"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:412

• set justifyContent(just): void

Parameters

Name	Type
just	"center" | "flex-start" | "flex-end" | "space-between" | "space-around"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:406

---

left

• get left(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:687

• set left(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:682

---

margin

• get margin(): number[]

Returns

number[]

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:566

• set margin(margin): void

Parameters

Name	Type
margin	number[]

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:554

---

marginAll

• set marginAll(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:562

---

marginBottom

• get marginBottom(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:587

• set marginBottom(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:582

---

marginLeft

• get marginLeft(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:599

• set marginLeft(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:591

---

marginRight

• get marginRight(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:608

• set marginRight(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:603

---

marginTop

• get marginTop(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:578

• set marginTop(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:570

---

maxHeight

• get maxHeight(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:732

• set maxHeight(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:727

---

maxWidth

• get maxWidth(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:723

• set maxWidth(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:718

---

minHeight

• get minHeight(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:714

• set minHeight(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:709

---

minWidth

• get minWidth(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:705

• set minWidth(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:700

---

padding

• get padding(): number[]

Returns

number[]

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:510

• set padding(margin): void

Parameters

Name	Type
margin	number[]

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:502

---

paddingAll

• set paddingAll(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:514

---

paddingBottom

• get paddingBottom(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:532

• set paddingBottom(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:527

---

paddingLeft

• get paddingLeft(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:541

• set paddingLeft(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:536

---

paddingRight

• get paddingRight(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:550

• set paddingRight(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:545

---

paddingTop

• get paddingTop(): number

Returns

number

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:523

• set paddingTop(value): void

Parameters

Name	Type
value	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:518

---

position

• get position(): "relative" | "absolute"

Returns

"relative" | "absolute"

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:497

• set position(type): void

Parameters

Name	Type
type	"relative" | "absolute"

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:491

---

right

• get right(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:696

• set right(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:691

---

root

• set root(val): void

Parameters

Name	Type
val	string

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:152

---

top

• get top(): PixelsOrPercentage

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:669

• set top(value): void

Parameters

Name	Type
value	PixelsOrPercentage

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:664

---

width

• get width(): YogaSize

Can handle:

• pixels (eg 150)
• percents ("50%")
• "auto" to use values from yoga
• "pixi" to use DisplayObject.width/height

Returns

YogaSize

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:365

• set width(value): void

Can handle:

• pixels (eg 150)
• percents ("50%")
• "auto" to use values from yoga
• "pixi" to use DisplayObject.width/height

Parameters

Name	Type
value	YogaSize

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:354

Methods

_parseValue

▸ Private _parseValue(value): PixelsOrPercentage

Parameters

Name	Type
value	Object
value.unit	any
value.value	any

Returns

PixelsOrPercentage

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:778

---

addChild

▸ addChild(yoga, index?): void

Parameters

Name	Type
yoga	YogaLayout
index	number

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:196

---

copy

▸ copy(layout): void

Copies all properties (styles, size, rescaleToYoga etc) from other YogaLayout objects

Parameters

Name	Type
layout	YogaLayout

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:179

---

fillDefaults

▸ fillDefaults(): void

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:188

---

fromConfig

▸ fromConfig(config): void

Assigns given properties to this yoga layout

Parameters

Name	Type
config	Partial<YogaLayout>

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:163

---

getComputedLayout

▸ getComputedLayout(): any

Returns

any

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:258

---

recalculateLayout

▸ recalculateLayout(): void

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:222

---

removeChild

▸ removeChild(yoga): void

Parameters

Name	Type
yoga	YogaLayout

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:206

---

requestLayoutUpdate

▸ requestLayoutUpdate(): void

Mark object as dirty and request layout recalculation

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:218

---

update

▸ update(): void

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:229

---

updateGap

▸ updateGap(): void

Returns

void

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:761

---

willLayoutWillBeRecomputed

▸ willLayoutWillBeRecomputed(): boolean

Returns

boolean

Defined in

utils/addFlexLayout/flex-layout/YogaLayout.ts:253