@fabwcie/free-drawing / components/tools/Settings/Settings / Settings

Class: Settings

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:32

Settings menu of header (dropdown): file actions, collaboration, view toggles, language, preferences and background color. Also toggles grid, snapping and zen mode for shortcuts, context menu and command palette

Extends

• Dropdown

Constructors

Constructor

new Settings(drawer): Settings

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:76

Create the menu items (commands, collaboration and save now only when available) and the button in header

Parameters

drawer

Drawer

Drawer the menu acts on, whose options give the items shown

Returns

Settings

Overrides

Dropdown.constructor

Properties

_events

_events: object = {}

Defined in: packages/free-drawing/src/utils/MicroEvent.ts:46

Listeners by event name, in order of registration

Index Signature

[key: string]: TCallback[]

Inherited from

Dropdown._events

---

$bgColorBtnContainer

$bgColorBtnContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:68

Element of background color buttons

---

$bgColorContainer

$bgColorContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:66

Background color section (group named by its title)

---

$button

$button: HTMLButtonElement

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:14

Button showing / hiding the menu (aria-expanded)

Inherited from

Dropdown.$button

---

$clearCanvasButton

$clearCanvasButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:52

Item clearing drawing after confirmation, disabled in read only

---

$clearStorageButton

$clearStorageButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:64

Item removing drawing saved in localStorage, after confirmation

---

$collaborationButton

$collaborationButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:50

Item opening collaboration dialog, with session state, only with collaboration option

---

$commandsButton

$commandsButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:38

Item opening command palette (Ctrl+K), only with commandPalette option

---

$copyLinkButton

$copyLinkButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:48

Item copying a link holding the drawing

---

$darkModeButton

$darkModeButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:60

Toggle item of dark mode (Alt+Shift+D), follows drawer.theme.change

---

$dropdownContainer

$dropdownContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:12

Element holding the button and the menu, to add to the page

Inherited from

Dropdown.$dropdownContainer

---

$dropdownItem

$dropdownItem: HTMLLIElement

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:20

List item element with the item class, created for subclasses (not added to the list)

Inherited from

Dropdown.$dropdownItem

---

$dropdownList

$dropdownList: HTMLUListElement

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:18

List of the menu, its default content

Inherited from

Dropdown.$dropdownList

---

$exportButton

$exportButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:36

Item opening export dialog (Ctrl+Shift+E)

---

$githubButton

$githubButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:56

Item opening repository of the library in a new tab

---

$languageSelect

$languageSelect: HTMLSelectElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:62

Language choice: auto (browser language) or a language, follows drawer.language.change

---

$menu

$menu: HTMLDivElement

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:16

Menu shown below the button, holds the content

Inherited from

Dropdown.$menu

---

$openButton

$openButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:42

Item opening a .freedrawing file (Ctrl+O), disabled in read only

---

$preferencesButton

$preferencesButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:40

Item opening preferences dialog (Ctrl+,)

---

$saveAsButton

$saveAsButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:44

Item saving drawing in a .freedrawing file (Ctrl+S)

---

$saveButton

$saveButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:46

Save now, shown without auto save

---

$toggleGridButton

$toggleGridButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:54

Toggle item of grid (Alt+G)

---

$zenModeButton

$zenModeButton: HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:58

Toggle item of zen mode (Alt+Z)

---

bgColorPicker

bgColorPicker: ColorPicker

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:70

Background color choice calling drawer.setBgColor, transparent included

---

drawer

drawer: Drawer

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:34

Drawer the menu acts on

Accessors

zenMode

Get Signature

get zenMode(): boolean

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:369

Interface hidden except toolbar and menu

Returns

boolean

Methods

_createItem()

private _createItem(icon, label, shortcut?): HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:236

Menu item: icon, translated label and shortcut

Parameters

icon

string

Svg icon shown first

label

"drawer.label" | "language.auto" | "toast.collaborationUnavailable" | "toast.canDraw" | "toast.viewOnly" | "toast.saveFailed" | "toast.saved" | "toast.loadFailed" | "toast.invalidFile" | "toast.linkCopied" | "toast.linkNotCopied" | "toast.invalidLink" | "toast.clipboardUnavailable" | "toast.exportFailed" | "toast.imageCopied" | "toast.imageNotCopied" | "toast.selectionTool" | "modal.close" | "confirm.message" | "confirm.clearCanvas" | "confirm.clearStorage" | "confirm.cancel" | "confirm.confirm" | "menu.label" | "menu.open" | "menu.saveAs" | "menu.save" | "menu.unsaved" | "menu.copyLink" | "menu.collaboration" | "menu.collaborationOn" | "menu.collaborationUsers" | "menu.export" | "menu.clearCanvas" | "menu.showGrid" | "menu.zenMode" | "menu.darkMode" | "menu.github" | "menu.githubLabel" | "menu.clearStorage" | "menu.background" | "menu.language" | "menu.commands" | "menu.preferences" | "preferences.title" | "preferences.autoSave" | "preferences.save" | "preferences.appearance" | "preferences.theme" | "preferences.light" | "preferences.dark" | "preferences.system" | "preferences.drawing" | "commands.search" | "commands.empty" | "commands.file" | "commands.language" | "color.white" | "color.lightGray" | "color.lightBlue" | "color.lightYellow" | "color.lightBeige" | "color.lightRed" | "color.lightGreen" | "color.black" | "color.red" | "color.green" | "color.blue" | "color.orange" | "color.yellow" | "color.pink" | "color.transparent" | "color.custom" | "help.title" | "help.documentation" | "help.issue" | "help.shortcuts" | "help.tools" | "help.editor" | "help.view" | "help.or" | "help.selectAll" | "help.deleteSelection" | "help.duplicate" | "help.group" | "help.selectInGroup" | "help.constrainDrawing" | "help.whileDrawing" | "help.arrowUnlinked" | "help.constrainSelection" | "help.whileTransforming" | "help.move" | "help.forwardBackward" | "help.frontBack" | "help.lock" | "help.paste" | "help.open" | "help.save" | "help.export" | "help.grid" | "help.layers" | "help.layersSelect" | "help.snap" | "help.zoom" | "help.toolsConstrain" | "key.delete" | "key.arrows" | "key.click" | "key.space" | "key.wheel" | "toolbar.label" | "toolbar.moreTools" | "toolbar.keepTool" | "tools.pan" | "tools.selection" | "tools.brush" | "tools.eraser" | "tools.text" | "tools.line" | "tools.square" | "tools.circle" | "tools.arrow" | "tools.triangle" | "tools.diamond" | "tools.heart" | "tools.cloud" | "tools.highlighter" | "tools.laser" | "tools.frame" | "zoom.label" | "zoom.out" | "zoom.in" | "zoom.reset" | "history.label" | "history.undo" | "history.redo" | "position.label" | "position.recenter" | "context.paste" | "context.snap" | "context.lock" | "context.unlock" | "selectionMenu.label" | "action.duplicate" | "action.group" | "action.ungroup" | "action.sendToBack" | "action.sendBackward" | "action.bringForward" | "action.bringToFront" | "action.delete" | "action.rotateRight" | "action.rotateLeft" | "action.flipHorizontal" | "action.flipVertical" | "action.fitTextWidth" | "action.copyPng" | "action.copySvg" | "overlay.tool" | "overlay.selection" | "overlay.shape" | "overlay.brush" | "overlay.highlighter" | "overlay.text" | "overlay.stroke" | "overlay.color" | "overlay.background" | "overlay.strokeWidth" | "overlay.strokeStyle" | "overlay.edges" | "overlay.opacity" | "overlay.layers" | "width.thin" | "width.medium" | "width.thick" | "width.extraThick" | "style.solid" | "style.dashed" | "style.dotted" | "edges.sharp" | "edges.round" | "edges.radius" | "edges.auto" | "text.fontFamily" | "text.fontSize" | "text.small" | "text.medium" | "text.large" | "text.extraLarge" | "text.style" | "text.bold" | "text.italic" | "text.underline" | "text.strikethrough" | "text.align" | "text.alignLeft" | "text.alignCenter" | "text.alignRight" | "layers.title" | "layers.group" | "layers.close" | "layers.empty" | "layers.drag" | "layers.shapesOf" | "layers.hide" | "layers.lock" | "layers.delete" | "layers.name" | "layers.toggle" | "layers.range" | "shapes.freehand" | "shapes.line" | "shapes.rect" | "shapes.ellipse" | "shapes.arrow" | "shapes.triangle" | "shapes.diamond" | "shapes.heart" | "shapes.cloud" | "shapes.highlighter" | "shapes.frame" | "shapes.frameName" | "shapes.text" | "shapes.group" | "export.title" | "export.empty" | "export.options" | "export.selected" | "export.background" | "export.dark" | "export.scale" | "export.saveAs" | "export.saveFile" | "export.copy" | "export.preview" | "collab.title" | "collab.intro" | "collab.introInvited" | "collab.introJoined" | "collab.introJoinedOf" | "collab.name" | "collab.anonymous" | "collab.link" | "collab.copy" | "collab.qrCode" | "collab.start" | "collab.join" | "collab.stop" | "collab.connected" | "collab.connecting" | "collab.you" | "collab.invitedBy" | "collab.canDrawLabel" | "collab.canDraw" | "collab.newUsersCanDraw" | "collab.owner" | "collab.viewOnly"

Key of the item text, translated again on language change

shortcut?

string

Keys shown after the text (hidden from screen readers), none when missing

Returns

HTMLButtonElement

Item button, not appended yet

---

_createLanguageItem()

private _createLanguageItem(): HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:259

Language choice: browser one or a language

Returns

HTMLDivElement

Item holding the label and the language select (set to current choice)

---

_updateCollaborationState()

private _updateCollaborationState(): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:295

Session state shown in collaboration item

Returns

void

---

getSeparator()

getSeparator(): HTMLHRElement

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:308

Separator between groups of menu items

Returns

HTMLHRElement

New hr element

---

hide()

hide(): void

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:71

Hides the menu and triggers drawer.dropdown.hide

Returns

void

Inherited from

Dropdown.hide

---

initEvents()

private initEvents(): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:317

Actions of menu items, and items following drawer state (read only, session, language, theme)

Returns

void

---

isShown()

isShown(): boolean

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:81

Whether the menu is shown

Returns

boolean

True while the menu is shown

Inherited from

Dropdown.isShown

---

off()

off(events, fct): void

Defined in: packages/free-drawing/src/utils/MicroEvent.ts:71

Remove a listener of events: without listener all listeners of these events, without arguments all listeners

Parameters

events

string

event name, or several separated by spaces

fct

TCallback

listener given to on

Returns

void

Inherited from

Dropdown.off

---

on()

on(events, fct): void

Defined in: packages/free-drawing/src/utils/MicroEvent.ts:58

Listen to events

Parameters

events

string

event name, or several separated by spaces

fct

TCallback

listener, called on each trigger

Returns

void

Inherited from

Dropdown.on

---

setContent()

setContent(content): void

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:53

Sets the content of the menu: an HTML string replaces it, a node is added at its end

Parameters

content

string | Node

HTML markup replacing the content, or node added after it

Returns

void

Inherited from

Dropdown.setContent

---

show()

show(): void

Defined in: packages/free-drawing/src/components/Dropdown/Dropdown.ts:64

Shows the menu

Returns

void

Inherited from

Dropdown.show

---

toggleGrid()

toggleGrid(): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:399

Show grid (object snapping turned off) or hide it: menu item, Alt+G, context menu, command palette

Returns

void

---

toggleSnapping()

toggleSnapping(): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:388

Switch snapping of selection widget (Alt+S, context menu, command palette), nothing without it

Returns

void

---

toggleZenMode()

toggleZenMode(): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:376

Switch zen mode (menu item, Alt+Z, preferences), saved in preferences

Returns

void

---

trigger()

trigger(events, ...args): void

Defined in: packages/free-drawing/src/utils/MicroEvent.ts:99

Call listeners of events, in order of registration

Parameters

events

string

event name, or several separated by spaces

args

...any

arguments given to listeners

Returns

void

Inherited from

Dropdown.trigger

---

updateBgColor()

updateBgColor(color): void

Defined in: packages/free-drawing/src/components/tools/Settings/Settings.ts:225

Set active background color button

Parameters

color

ColorLike

Background color of the drawing (custom color when not in palette)

Returns

void