free-drawing

Appearance

@fabwcie/free-drawing / components/tools/Overlay/BaseOverlay / BaseOverlay

Class: BaseOverlay ​

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

Options panel of a tool or of the selection, common to all shapes: stroke and background colors, stroke width and style, corners, opacity and stacking order. Buttons only call drawer setters, fields follow drawer.options.change

Extended by ​

Constructors ​

Constructor ​

new BaseOverlay(drawer, options?): BaseOverlay

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:107

Create the panel and its sections in floating region (hidden until show), fields following option changes

Parameters ​

drawer ​

Drawer

Drawer whose options and selection the fields change

options? ​

Partial<OverlayOptions>

Sections shown and titles, defaults for missing ones

Returns ​

BaseOverlay

Properties ​

$edgesBtnContainer ​

$edgesBtnContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:77

Element of sharp and round buttons and of radius field

$edgesContainer ​

$edgesContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:75

Corners section, shown with toggleEdgesBtns (rectangles)

$edgesRadius ​

$edgesRadius: HTMLInputElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:79

Corner radius field, empty for a radius following size (round)

$fillColorBtnContainer ​

$fillColorBtnContainer: HTMLDivElement

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

Element of background color buttons

$fillColorContainer ​

$fillColorContainer: HTMLDivElement

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

Background color section, shown with fillBtns option or toggleFillBtns (rectangle and ellipse)

$opacityContainer ​

$opacityContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:82

Opacity section: title and range

$opacityRange ​

$opacityRange: HTMLInputElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:84

Opacity range from 0 to 10 (tenths), applied on change

$orderContainer ​

$orderContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:87

Stacking order section (back, backward, forward, front), shown only for selected shapes

$overlayContainer ​

$overlayContainer: HTMLDivElement

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

Panel element (region named by label option) in floating region, shown with show

$strokeColorBtnContainer ​

$strokeColorBtnContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:53

Element of stroke color buttons

$strokeColorContainer ​

$strokeColorContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:49

Stroke color section (text color for texts), titled by colorTitle option or setColorTitle

$strokeStyleBtnContainer ​

$strokeStyleBtnContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:72

Element of stroke style buttons

$strokeStyleContainer ​

$strokeStyleContainer: HTMLDivElement

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

Stroke style section (solid, dashed, dotted), shown with styleBtns option or toggleStyleBtns

$strokeWidthBtnContainer ​

$strokeWidthBtnContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:67

Element of stroke width buttons (line icons of each width)

$strokeWidthContainer ​

$strokeWidthContainer: HTMLDivElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:65

Stroke width section, hidden with widthBtns option false

drawer ​

drawer: Drawer

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

Drawer whose options and selection the fields change

fillColorPicker ​

fillColorPicker: ColorPicker

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

Background color choice calling drawer.setFillColor, transparent for no fill

options? ​

optional options?: Partial<OverlayOptions>

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:100

Sections and titles given by the subclass, defaults when missing

selectors ​

selectors: object

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:90

CSS classes of sections and of their buttons, shared with subclasses

button ​

button: string = 'overlay-picker__button'

Class of section buttons, those set pressed by _setActiveBtn

buttonContainer ​

buttonContainer: string = 'overlay-picker-btn-container'

Class of the fields element of a section

container ​

container: string = 'overlay-picker-container'

Class of a section (title and fields)

strokeColorPicker ​

strokeColorPicker: ColorPicker

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:55

Stroke color choice calling drawer.setStrokeColor, without transparent: drawing would be invisible

Methods ​

_createButton() ​

protected _createButton(content, attr, value, label): HTMLButtonElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:412

Toggle button of a field, label is its accessible name (icon or short content)

Parameters ​

content ​

string

HTML of the button: svg icon or short text

attr ​

string

Data attribute holding the value, used by updateFields to find the active button

value ​

string

Option value the button chooses

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 accessible name

Returns ​

HTMLButtonElement

Button not pressed, not appended yet

_createEdgesFields() ​

private _createEdgesFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:266

Corners section: sharp and round buttons, radius field, hidden until toggleEdgesBtns

Returns ​

void

_createFillColorFields() ​

private _createFillColorFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:191

Background color section: light colors and transparent, hidden unless fillBtns option

Returns ​

void

_createOpacityField() ​

private _createOpacityField(): void

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

Opacity section: range named by its title, announced as percentage

Returns ​

void

_createOrderFields() ​

private _createOrderFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:334

Stacking order section: buttons calling drawer.reorderShapes, with their shortcut

Returns ​

void

_createSection() ​

protected _createSection(title): object

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

Group of fields named by its title

Parameters ​

title ​

"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 section title

Returns ​

Section element (title then fields element) and its fields element, not appended yet

$btnContainer ​

$btnContainer: HTMLDivElement

Element of the section fields, after its title

$container ​

$container: HTMLDivElement

Section element: group named by its title

_createStrokeColorFields() ​

private _createStrokeColorFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:159

Stroke color section: palette (black, red, green, blue, orange) and custom color

Returns ​

void

_createStrokeStyleFields() ​

private _createStrokeStyleFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:242

Stroke style section (solid, dashed, dotted), hidden unless styleBtns option

Returns ​

void

_createStrokeWidthFields() ​

private _createStrokeWidthFields(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:216

Stroke width section: a line icon of each width, hidden with widthBtns option false

Returns ​

void

_createTitle() ​

protected _createTitle(text): HTMLHeadingElement

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:373

Section title, referenced by its fields

Parameters ​

text ​

"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 title text, translated again on language change

Returns ​

HTMLHeadingElement

Title element with a unique id (for aria-labelledby)

_init() ​

private _init(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:128

Create every section, then append them in panel order

Returns ​

void

_setActiveBtn() ​

protected _setActiveBtn($btnContainer, $btn): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:471

Set given button active in its container (null to only remove active one)

Parameters ​

$btnContainer ​

HTMLDivElement

Fields element whose buttons are updated

$btn ​

Element | null

Button set pressed, the others are released; null releases all

Returns ​

void

_updateOpacityText() ​

private _updateOpacityText(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:364

Opacity announced as percentage (range is from 0 to 10)

Returns ​

void

appendContent() ​

appendContent(elements): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:427

Append sections at the end of the panel

Parameters ​

elements ​

HTMLElement[]

Sections appended in this order

Returns ​

void

hide() ​

hide(): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:566

Hide panel (tool deactivated, selection cleared...)

Returns ​

void

setColorTitle() ​

setColorTitle(title): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:558

Change the title of the color section: stroke of shapes, color when it is also the one of texts

Parameters ​

title ​

"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 title, e.g. 'overlay.stroke' or 'overlay.color'

Returns ​

void

show() ​

show(shape?): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:435

Show panel with fields of first given shape, else of drawer options (tool options)

Parameters ​

shape? ​

(Shape<ShapeConfig> | Group)[]

selected shapes, stacking order section shown only for them

Returns ​

void

toggleEdgesBtns() ​

toggleEdgesBtns(visible): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:542

Show / hide corners buttons, only relevant for rectangles

Parameters ​

visible ​

boolean

True to show the section, false to hide it

Returns ​

void

toggleFillBtns() ​

toggleFillBtns(visible): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:534

Show / hide background color buttons, only relevant for rectangle and ellipse

Parameters ​

visible ​

boolean

True to show the section, false to hide it

Returns ​

void

toggleStyleBtns() ​

toggleStyleBtns(visible): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:526

Show / hide stroke style buttons (dash), only relevant for outline shapes

Parameters ​

visible ​

boolean

True to show the section, false to hide it

Returns ​

void

toggleWidthBtns() ​

toggleWidthBtns(visible): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:550

Show / hide stroke width buttons, not relevant for texts and highlights

Parameters ​

visible ​

boolean

True to show the section, false to hide it

Returns ​

void

updateFields() ​

updateFields(change): void

Defined in: packages/free-drawing/src/components/tools/Overlay/BaseOverlay.ts:481

Update fields state, only given keys are updated

Parameters ​

change ​

OptionsChange

Changed options (from drawer.options.change) or values of the shape shown

Returns ​

void