BlockSuite

Appearance

BlockSuite API Documentation / @blocksuite/affine-widget-edgeless-toolbar

@blocksuite/affine-widget-edgeless-toolbar ​

Classes ​

EdgelessDraggableElementController ​

Type Parameters ​

T ​

T

Implements ​

  • ReactiveController

Constructors ​

Constructor ​

new EdgelessDraggableElementController<T>(host, options): EdgelessDraggableElementController<T>

Parameters ​
host ​

EdgelessDraggableElementHost & ReactiveControllerHost

options ​

EdgelessDraggableElementOptions<T>

Returns ​

EdgelessDraggableElementController<T>

Properties ​

clearTimeout ​

clearTimeout: Timeout | null = null

events ​

events: EventCache = {}

host ​

host: EdgelessDraggableElementHost & ReactiveControllerHost

info ​

info: DraggingInfo<T>

options ​

options: EdgelessDraggableElementOptions<T>

overlay ​

overlay: OverlayLayer | null = null

states ​

states: ReactiveState<T>

Accessors ​

gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

Methods ​

cancel() ​

cancel(): void

Cancel the current dragging & animate even if dragOut

Returns ​

void

cancelWithoutAnimation() ​

cancelWithoutAnimation(): void

Same as cancel but without animation

Returns ​

void

clickToDrag() ​

clickToDrag(target, startPos): void

A workaround to apply click event manually

Parameters ​
target ​

HTMLElement

startPos ​
x ​

number

y ​

number

Returns ​

void

dragAndMoveTo() ​

dragAndMoveTo(target, to): void

Parameters ​
target ​

HTMLElement

to ​
x ​

number

y ​

number

Returns ​

void

hostConnected() ​

hostConnected(): void

Called when the host is connected to the component tree. For custom element hosts, this corresponds to the connectedCallback() lifecycle, which is only called when the component is connected to the document.

Returns ​

void

Implementation of ​

ReactiveController.hostConnected

hostDisconnected() ​

hostDisconnected(): void

Called when the host is disconnected from the component tree. For custom element hosts, this corresponds to the disconnectedCallback() lifecycle, which is called the host or an ancestor component is disconnected from the document.

Returns ​

void

Implementation of ​

ReactiveController.hostDisconnected

onMouseDown() ​

onMouseDown(e, elementInfo): void

Parameters ​
e ​

MouseEvent

elementInfo ​

ElementInfo<T>

Returns ​

void

onTouchStart() ​

onTouchStart(e, elementInfo): void

Parameters ​
e ​

TouchEvent

elementInfo ​

ElementInfo<T>

Returns ​

void

removeAllEvents() ​

removeAllEvents(): void

Returns ​

void

reset() ​

reset(): void

Returns ​

void

updateElementInfo() ​

updateElementInfo(elementInfo): void

Parameters ​
elementInfo ​

Partial<ElementInfo<T>>

Returns ​

void

abstract EdgelessToolbarToolClass ​

Extends ​

  • DisposableClass

Extended by ​

Constructors ​

Properties ​

active ​

active: boolean

createPopper ​

createPopper: <T>(tagName, reference, options?) => MenuPopper<HTMLElementTagNameMap[T]>

Type Parameters ​
T ​

T extends keyof HTMLElementTagNameMap

Parameters ​
tagName ​

T

reference ​

HTMLElement

options? ​
duration? ​

number

transition duration in ms

onDispose? ​

() => void

setProps? ​

(ele) => void

Returns ​

MenuPopper<HTMLElementTagNameMap[T]>

edgeless ​

edgeless: BlockComponent

edgelessTool ​

edgelessTool: ToolOptionWithType

enableActiveBackground? ​

optional enableActiveBackground?: boolean

gfx ​

gfx: GfxController

popper ​

popper: MenuPopper<HTMLElement> | null

setEdgelessTool ​

setEdgelessTool: <T>(toolType, options?) => void

Type Parameters ​
T ​

T extends BaseTool<Record<string, unknown>>

Parameters ​
toolType ​

ToolType<T>

options? ​

ToolOptions<T>

Returns ​

void

theme ​

theme: ColorScheme

toolbarContainer ​

toolbarContainer: HTMLElement | null

toolbarSlots ​

toolbarSlots: EdgelessToolbarSlots

tryDisposePopper ​

tryDisposePopper: () => boolean

Returns ​

boolean

true if operation was successful

type ​

abstract type: ToolType | ToolType[]

Accessors ​

toolbar ​

EdgelessToolbarWidget ​

Extends ​

Constructors ​

Constructor ​

new EdgelessToolbarWidget(): EdgelessToolbarWidget

Returns ​

EdgelessToolbarWidget

Overrides ​

WidgetComponent<RootBlockModel>.constructor

Other ​

activePopper ​

activePopper: MenuPopper<HTMLElement> | null = null

containerWidth ​
edgelessTool ​
Get Signature ​

get edgelessTool(): string

Returns ​

string

gfx ​
Get Signature ​

get gfx(): GfxController

Returns ​

GfxController

isPresentMode ​
Get Signature ​

get isPresentMode(): boolean

Returns ​

boolean

presentFrameMenuShow ​
presentSettingMenuShow ​
scrollSeniorToolIndex ​
scrollSeniorToolSize ​
Get Signature ​

get scrollSeniorToolSize(): number

Returns ​

number

slots ​
Get Signature ​

get slots(): EdgelessToolbarSlots

Returns ​

EdgelessToolbarSlots

toolbarContainer ​
connectedCallback() ​

connectedCallback(): void

Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

ts
connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns ​

void

Overrides ​

WidgetComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Invoked when the component is removed from the document's DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

ts
disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns ​

void

Overrides ​

WidgetComponent.disconnectedCallback

render() ​

render(): typeof nothing | TemplateResult<1>

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns ​

typeof nothing | TemplateResult<1>

Overrides ​

WidgetComponent.render

attributes ​

controllers ​

dev-mode ​

properties ​

rendering ​

styles ​

styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

WidgetComponent.styles

updates ​

firstUpdated() ​

firstUpdated(): void

Invoked when the element is first updated. Implement to perform one time work on the element after update.

ts
firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns ​

void

Overrides ​

WidgetComponent.firstUpdated

abstract QuickToolMixinClass ​

Extends ​

Constructors ​

Properties ​

Accessors ​

abstract ToolbarButtonWithMenuClass ​

Extends ​

Constructors ​

Properties ​

Accessors ​

Interfaces ​

EdgelessToolbarSlots ​

Properties ​

resize ​

resize: Subject<{ h: number; w: number; }>

Type Parameters ​

T ​

T extends HTMLElement

Properties ​

cancel? ​

optional cancel?: () => void

Returns ​

void

dispose ​

dispose: () => void

Returns ​

void

element ​

element: T

QuickTool ​

Properties ​

content ​

content: TemplateResult

enable? ​

optional enable?: boolean

optional menu?: MenuConfig

if not configured, the tool will not be shown in dense mode

priority? ​

optional priority?: number

type? ​

optional type?: string

SeniorTool ​

Properties ​

content ​

content: TemplateResult

enable? ​

optional enable?: boolean

name ​

name: string

Used to show in nav-button's tooltip

Type Aliases ​

DenseMenuBuilder ​

DenseMenuBuilder = (edgeless, gfx) => MenuConfig

Helper function to build a menu configuration for a tool in dense mode

Parameters ​

edgeless ​

BlockComponent

gfx ​

GfxController

Returns ​

MenuConfig

Menu<T> = object

Type Parameters ​

T ​

T

Properties ​

currentValue ​

currentValue: T

icon? ​

optional icon?: TemplateResult

items ​

items: MenuItem<T>[]

label ​

label: string

onPick ​

onPick: (value) => void

Parameters ​
value ​

T

Returns ​

void

tooltip? ​

optional tooltip?: string

MenuItem<T> = object

Type Parameters ​

T ​

T

Properties ​

disabled? ​

optional disabled?: boolean

icon? ​

optional icon?: TemplateResult

key? ​

optional key?: string

value ​

value: T

ToolBuilder ​

ToolBuilder<T> = (options) => T

Type Parameters ​

T ​

T

Parameters ​

options ​
block ​

BlockComponent

gfx ​

GfxController

toolbarContainer ​

HTMLElement

Returns ​

T

Variables ​

EDGELESS_TOOLBAR_WIDGET ​

const EDGELESS_TOOLBAR_WIDGET: "edgeless-toolbar-widget" = 'edgeless-toolbar-widget'

edgelessToolbarContext ​

const edgelessToolbarContext: object

Type Declaration ​

__context__ ​

__context__: EdgelessToolbarWidget

edgelessToolbarSlotsContext ​

const edgelessToolbarSlotsContext: object

Type Declaration ​

__context__ ​

__context__: EdgelessToolbarSlots

edgelessToolbarThemeContext ​

const edgelessToolbarThemeContext: object

Type Declaration ​

__context__ ​

__context__: ColorScheme

edgelessToolbarWidget ​

const edgelessToolbarWidget: ExtensionType

LINE_STYLE_LIST ​

const LINE_STYLE_LIST: [{ icon: TemplateResult<1>; key: "General"; value: false; }, { icon: TemplateResult<1>; key: "Scribbled"; value: true; }]

QuickToolIdentifier ​

const QuickToolIdentifier: ServiceIdentifier<ToolBuilder<QuickTool>> & <U>(variant) => ServiceIdentifier<U>

SeniorToolIdentifier ​

const SeniorToolIdentifier: ServiceIdentifier<ToolBuilder<SeniorTool>> & <U>(variant) => ServiceIdentifier<U>

Functions ​

createPopper() ​

createPopper<T>(tagName, reference, options?): MenuPopper<HTMLElementTagNameMap[T]>

Type Parameters ​

T ​

T extends keyof HTMLElementTagNameMap

Parameters ​

tagName ​

T

reference ​

HTMLElement

options? ​
duration? ​

number

transition duration in ms

onDispose? ​

() => void

setProps? ​

(ele) => void

Returns ​

MenuPopper<HTMLElementTagNameMap[T]>

EdgelessToolbarToolMixin() ​

EdgelessToolbarToolMixin<T>(SuperClass): T & Constructor<EdgelessToolbarToolClass>

Type Parameters ​

T ​

T extends Constructor<LitElement>

Parameters ​

SuperClass ​

T

Returns ​

T & Constructor<EdgelessToolbarToolClass>

getRootBlock() ​

getRootBlock(ctx): BlockComponent<BlockModel<object>, BlockService, string> | null

Parameters ​

ctx ​

ToolbarContext

Returns ​

BlockComponent<BlockModel<object>, BlockService, string> | null

QuickToolExtension() ​

QuickToolExtension(id, builder): ExtensionType

Parameters ​

id ​

string

builder ​

ToolBuilder<QuickTool>

Returns ​

ExtensionType

QuickToolMixin() ​

QuickToolMixin<T>(SuperClass): T & Constructor<QuickToolMixinClass>

Mixin for quick tool item.

Type Parameters ​

T ​

T extends Constructor<LitElement>

Parameters ​

SuperClass ​

T

Returns ​

T & Constructor<QuickToolMixinClass>

renderCurrentMenuItemWith() ​

renderCurrentMenuItemWith<T, F>(items, currentValue, field): MenuItem<T>[F] | undefined

Type Parameters ​

T ​

T

F ​

F extends keyof MenuItem<T>

Parameters ​

items ​

MenuItem<T>[]

currentValue ​

T

field ​

F

Returns ​

MenuItem<T>[F] | undefined

renderMenu() ​

renderMenu<T>(__namedParameters): TemplateResult<1>

Type Parameters ​

T ​

T

Parameters ​

__namedParameters ​

Menu<T>

Returns ​

TemplateResult<1>

renderMenuItems() ​

renderMenuItems<T>(items, currentValue, onPick): unknown

Type Parameters ​

T ​

T

Parameters ​

items ​

MenuItem<T>[]

currentValue ​

T

onPick ​

(value) => void

Returns ​

unknown

SeniorToolExtension() ​

SeniorToolExtension(id, builder): ExtensionType

Parameters ​

id ​

string

builder ​

ToolBuilder<SeniorTool>

Returns ​

ExtensionType

ToolbarButtonWithMenuMixin() ​

ToolbarButtonWithMenuMixin<T>(SuperClass): T & Constructor<ToolbarButtonWithMenuClass>

Type Parameters ​

T ​

T extends Constructor<LitElement> = Constructor<LitElement>

Parameters ​

SuperClass ​

T

Returns ​

T & Constructor<ToolbarButtonWithMenuClass>

Copyright © 2022-present Toeverything