@fabwcie/free-drawing / DrawerLayout / DrawerLayout

Class: DrawerLayout

Defined in: packages/free-drawing/src/DrawerLayout.ts:32

Layout of a drawer: its container in the element of the drawer (canvas of the stage, interface over it), regions of the interface, size of the window followed by a drawer of window size, interface ignoring pointer during pointer actions, zen mode.

Order of container (stacking and tab order): canvas, header, floating elements added while the drawer is created, footer, floating elements added later (dialogs, toasts, text editor).

Constructors

Constructor

new DrawerLayout(drawer): DrawerLayout

Defined in: packages/free-drawing/src/DrawerLayout.ts:50

Container put in the element of the drawer (its content replaced) with header and footer regions

Parameters

drawer

Drawer

Drawer of this layout (element, size, texts), resized with the window when it has its size

Returns

DrawerLayout

Properties

$container

readonly $container: HTMLDivElement

Defined in: packages/free-drawing/src/DrawerLayout.ts:34

Container of the drawer: canvas and interface, keyboard shortcuts

---

$footer

readonly $footer: HTMLElement

Defined in: packages/free-drawing/src/DrawerLayout.ts:38

Bottom interface: its start, toolbar, help

---

$footerStart

readonly $footerStart: HTMLDivElement

Defined in: packages/free-drawing/src/DrawerLayout.ts:40

Bottom left interface: zoom, undo / redo

---

$header

readonly $header: HTMLDivElement

Defined in: packages/free-drawing/src/DrawerLayout.ts:36

Top left interface: settings menu, layers button, position

---

drawer

private readonly drawer: Drawer

Defined in: packages/free-drawing/src/DrawerLayout.ts:50

Drawer of this layout (element, size, texts), resized with the window when it has its size

---

zen

zen: boolean = false

Defined in: packages/free-drawing/src/DrawerLayout.ts:42

Interface hidden but toolbar, menu and selection options, see setZen

Methods

_followWindow()

private _followWindow(): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:135

Drawer of window size: it follows the size of the window

Returns

void

---

add()

add(region, $element, options?): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:96

Add an element of the interface to a region

Parameters

region

LayoutRegion

Region receiving the element: header, footerStart, footer or floating

$element

HTMLElement

Element of the interface

options?

LayoutItemOptions = {}

Hidden in zen mode (hideInZen), placed after an element (after) instead of end of region

Returns

void

---

ready()

ready(): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:86

Drawer created: floating elements added from now on are after the footer

Returns

void

---

setPointerEvents()

setPointerEvents(state): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:127

Interface receives pointer or not (during pointer actions: drawing, selecting...), see --drawer-pointer-events

Parameters

state

"none" | "all"

'none' ignores pointer on panels, 'all' gives it back

Returns

void

---

setStage()

setStage(stage): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:79

Stage created in container (konva empties it): its canvas, then header and footer drawn over it

Parameters

stage

Stage

Konva stage of the drawer, its content put first in container

Returns

void

---

setZen()

setZen(zen): void

Defined in: packages/free-drawing/src/DrawerLayout.ts:118

Zen mode: elements added with hideInZen hidden

Parameters

zen

boolean

True hides these elements (is-zen class), false shows them

Returns

void