Class DiagramToolset

A toolbar component that displays a list of tools for the diagram editor. It allows users to select a tool, and the selected tool is highlighted. The component emits a 'tool-selected' event when a tool is selected. The layout of the tools can be customized via the configuration options.

Index

Constructors

constructor

new DiagramToolset(
    host: HTMLElement,
    diagram: DiagramEditView,
    config?: Partial<ToolsetConfig>,
): DiagramToolset
Creates a tool palette mounted inside the given host element.
Parameters
- host: HTMLElement
  The element that will contain the tool buttons.
- diagram: DiagramEditView
  The diagram view whose tool selection the palette controls.
- config: Partial<ToolsetConfig> = {}
  Optional layout and style configuration.
Returns DiagramToolset
- Defined in src/editor/toolbox/diagram.toolset.ts:111

Properties

`Protected`host

host: HTMLElement

`Protected`diagram

diagram: DiagramEditView

`Protected`config

config: ToolsetConfig

`Protected`manualTools

manualTools: Map<string, string> = ...

`Protected`renderedTools

renderedTools: string[] = []

Accessors

name

get name(): string
Returns string
- Defined in src/editor/toolbox/diagram.toolset.ts:140
set name(value: string): void
Parameters
- value: string
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:144

Methods

destroy

destroy(): void
Cleans up the palette and detaches diagram listeners.

Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:133

refresh

refresh(): void
Rebuilds and re-renders the tool list from the current registry and layout.

Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:151

addTool

addTool(tool: string, label?: string): void
Adds a tool entry manually, useful for custom or non-registered tools.
Parameters
- tool: string
  The tool identifier string.
- Optionallabel: string
  Optional display label; defaults to a prettified version of the tool name.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:177

clearTools

clearTools(): void
Removes all manually added tools and clears the rendered palette.

Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:185

setDiagramView

setDiagramView(diagram: DiagramEditView): void
Swaps the underlying diagram view, for example after remounting.
Parameters
- diagram: DiagramEditView
  The new diagram view to attach to.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:195

`Protected` `Readonly`onDiagramToolChanged

onDiagramToolChanged(event: Event): void
Handles diagram tool-change events and updates the highlighted tool button.
Parameters
- event: Event
  The custom event carrying the new tool name.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:206

`Protected`bindDiagramEvents

bindDiagramEvents(): void
Subscribes to DIAGRAM_TOOL_CHANGED_EVENT on the diagram host to track active tool changes.

Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:216

`Protected`unbindDiagramEvents

unbindDiagramEvents(): void
Unsubscribes DIAGRAM_TOOL_CHANGED_EVENT listener attached by bindDiagramEvents.

Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:224

`Protected`resolveLayout

resolveLayout(allTools: string[]): string[]
Orders the available tools according to the configured layout, inserting wildcard tools as needed.
Parameters
- allTools: string[]
  The full list of tool identifiers to arrange.
Returns string[]
The ordered list of tool identifiers to render.
- Defined in src/editor/toolbox/diagram.toolset.ts:234

`Protected`renderTool

renderTool(tool: string, label: string): void
Builds and appends a single tool button to the palette.
Parameters
- tool: string
  The tool identifier string.
- label: string
  The display label and tooltip for the button.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:278

`Protected`attachDragCreateBehavior

attachDragCreateBehavior(button: HTMLButtonElement, tool: string): void
Attaches pointer-based drag-to-create behavior to a tool button. Does nothing when the tool's adapter does not produce a draft node.
Parameters
- button: HTMLButtonElement
  The button element to instrument.
- tool: string
  The tool identifier whose adapter supplies the draft node.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:319

`Protected`highlight

highlight(tool: string): void
Marks the given tool button as active and clears the active state from all others.
Parameters
- tool: string
  The tool identifier to highlight.
Returns void
- Defined in src/editor/toolbox/diagram.toolset.ts:360

Class DiagramToolset

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns DiagramToolset

Properties

Protectedhost

Protecteddiagram

Protectedconfig

ProtectedmanualTools

ProtectedrenderedTools

Accessors

name

Returns string

Parameters

Returns void

Methods

destroy

Returns void

refresh

Returns void

addTool

Parameters

Returns void

clearTools

Returns void

setDiagramView

Parameters

Returns void

Protected ReadonlyonDiagramToolChanged

Parameters

Returns void

ProtectedbindDiagramEvents

Returns void

ProtectedunbindDiagramEvents

Returns void

ProtectedresolveLayout

Parameters

Returns string[]

ProtectedrenderTool

Parameters

Returns void

ProtectedattachDragCreateBehavior

Parameters

Returns void

Protectedhighlight

Parameters

Returns void

Settings

On This Page

`Protected`host

`Protected`diagram

`Protected`config

`Protected`manualTools

`Protected`renderedTools

`Protected` `Readonly`onDiagramToolChanged

`Protected`bindDiagramEvents

`Protected`unbindDiagramEvents

`Protected`resolveLayout

`Protected`renderTool

`Protected`attachDragCreateBehavior

`Protected`highlight