Class DiagramEditor

DiagramEditor is the main diagram editing web component of the MJS Diagram library.

You add an instance of DiagramEditor to your page to enable diagram editing.

You can add it in your HTML markup as a custom element with something like this:

<mjs-diagram-editor id="mjsDiaEditor"></mjs-diagram-editor>

Or you can add it in code.

One important thing to set when the component loads is the StencilEditorSet you want to use.

Here we add a Flowchart stencil set:

let editor = document.getElementById('mjsDiaEditor');
editor.stencilEditorSet = flowchartStencilEditorSet;

You may want to add a previously saved state via the restoreState.

Finally, you most probably want to handle the saveclick event to store the editing results:

editor.addEventListener('saveclick', (ev) => {
  // process state (represents the created diagram)
  console.log(ev.detail.state);
});

See

Check out MJS Diagram docs and demos for more details.

Hierarchy

HTMLElement
- DiagramEditor

Index

Constructors

constructor

new DiagramEditor(): DiagramEditor
Creates the new instance of the editor.

Returns DiagramEditor

Overrides HTMLElement.constructor

Properties

`Protected` _manipulationStartX

_manipulationStartX: number = 0

`Protected` _manipulationStartY

_manipulationStartY: number = 0

`Readonly` languageManager

languageManager: Language = ...

Enables multi-language support.

`Readonly` settings

settings: EditorSettings = ...

Editor settings.

Control available colors, font families, etc. through this property.

zoomSteps

zoomSteps: number[] = ...

Steps zoom in/out buttons go through.

Accessors

isRedoPossible

get isRedoPossible(): boolean
Returns true if redo operation can be performed (redo stack is not empty).

Returns boolean

isUndoPossible

get isUndoPossible(): boolean
Returns true if undo operation can be performed (undo stack is not empty).

Returns boolean

language

get language(): string
Returns string
set language(value): void
Parameters
- value: string
Returns void

stencilEditorSet

get stencilEditorSet(): StencilEditorSet
Returns the current stencil editor set.

Returns StencilEditorSet
set stencilEditorSet(value): void
Sets the current stencil editor set.

Remarks
Note that all the current edits are lost when new stencil set is set.
Parameters
- value: StencilEditorSet
Returns void

zoomLevel

get zoomLevel(): number
Returns the current zoom level.

Returns number
set zoomLevel(value): void
Sets the current zoom level.
Parameters
- value: number
Returns void

Methods

addEventListener

addEventListener<T>(type, listener, options?): void
Type Parameters
- T extends keyof DiagramEditorEventMap
Parameters
- type: T
- listener: ((this, ev) => void)
  - - (this, ev): void
    - Parameters
      
      this: DiagramEditor
      
      ev: DiagramEditorEventMap[T]
      
      Returns void
- Optional options: boolean | AddEventListenerOptions
Returns void

Overrides HTMLElement.addEventListener
addEventListener<K>(type, listener, options?): void
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: ((this, ev) => void)
  - - (this, ev): void
    - Parameters
      
      this: HTMLElement
      
      ev: HTMLElementEventMap[K]
      
      Returns void
- Optional options: boolean | AddEventListenerOptions
Returns void

Overrides HTMLElement.addEventListener

createNewStencil

createNewStencil(stencilType): void
Creates a new stencil of the specified type
Parameters
- stencilType: undefined | string | typeof StencilBase
  
  stencil type as either type or its string representation
Returns void

deselectStencil

deselectStencil(stencilEditor?): void
Removes the supplied stencil editor from selection. If no stencil editor is supplied, all selected stencils are unselected.
Parameters
- Optional stencilEditor: StencilBaseEditor
  
  stencil editor to select.
Returns void

getNewIId

getNewIId(): number
Generates a new internal identifier used to identify stencils and connectors when serialized to the state JSON.

Returns number
new internally unique identifier.

getState

getState(): DiagramState
Returns the diagram configration state object. Use it to store the state in databases, files, etc.

Returns DiagramState
diagram configuration as a serializable object.

hideToolbarButtons

hideToolbarButtons(...commands): void
Hides toolbar buttons for provided commands.

Available buttons/commands:

select, delete, save, undo, redo, add, connect, document-setup, zoomout, zoomin, zoomreset, properties.

This method can be used to both remove buttons to preserve space and simplify user experience by removing unnecessary functions and to remove access to certain functions. For example, you may constantly auto-save the diagram in your code so the save button isn't necessary and misleading.

Example
The code below hides zoomreset and redo buttons.
```
editor.hideToolbarButtons('zoomreset', 'redo');
```
Since
1.1.0
Parameters
- Rest ...commands: string[]
  
  list of commands
Returns void

redo

redo(): void
Redo previously undone action.

Returns void

removeEventListener

removeEventListener<T>(type, listener, options?): void
Type Parameters
- T extends keyof DiagramEditorEventMap
Parameters
- type: T
- listener: ((this, ev) => void)
  - - (this, ev): void
    - Parameters
      
      this: DiagramEditor
      
      ev: DiagramEditorEventMap[T]
      
      Returns void
- Optional options: boolean | EventListenerOptions
Returns void

Overrides HTMLElement.removeEventListener
removeEventListener<K>(type, listener, options?): void
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: ((this, ev) => void)
  - - (this, ev): void
    - Parameters
      
      this: HTMLElement
      
      ev: HTMLElementEventMap[K]
      
      Returns void
- Optional options: boolean | EventListenerOptions
Returns void

Overrides HTMLElement.removeEventListener

render

render(width?, height?, imageType?, quality?): Promise<undefined | string>
Use this method to reneder the current diagram as a static raster image.
Parameters
- Optional width: number
  
  target width
- Optional height: number
  
  target height
- imageType: string = 'image/png'
  
  image type (image/png, image/jpeg, etc.)
- Optional quality: number
  
  render quality for lossy codecs (1=100% for jpeg).
Returns Promise<undefined | string>
rendered image as a data URL.

restoreState

restoreState(state): void
Restores (loads) previous saved (or manually created) diagram.
Parameters
- state: DiagramState
  
  diagram configuration object.
Returns void

selectStencil

selectStencil(stencilEditor): void
Selects a stencil. If there already is a selected stencil then the supplied stencil is added to the selection.
Parameters
- stencilEditor: StencilBaseEditor
  
  stencil editor to select.
Returns void

setCurrentStencil

setCurrentStencil(stencilEditor?): void
Sets the currently active stencil editor. If multiple stencils are selected then there's no "current" stencil. Passing nothing/undefined unsets the current stencil.
Parameters
- Optional stencilEditor: StencilBaseEditor
  
  stencil editor to make active.
Returns void

undo

undo(): void
Undo last action.

Returns void

zoom

zoom(factor): void
Zooms in or out to the supplied zoom level (1 = 100%).
Parameters
- factor: number
  
  zoom level.
Returns void

Class DiagramEditor

See

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns DiagramEditor

Properties

Protected _manipulationStartX

Protected _manipulationStartY

Readonly languageManager

Readonly settings

zoomSteps

Accessors

isRedoPossible

Returns boolean

isUndoPossible

Returns boolean

language

Returns string

Parameters

value: string

Returns void

stencilEditorSet

Returns StencilEditorSet

Remarks

Parameters

value: StencilEditorSet

Returns void

zoomLevel

Returns number

Parameters

value: number

Returns void

Methods

addEventListener

Type Parameters

T extends keyof DiagramEditorEventMap

Parameters

type: T

listener: ((this, ev) => void)

Parameters

this: DiagramEditor

ev: DiagramEditorEventMap[T]

Returns void

Optional options: boolean | AddEventListenerOptions

Returns void

Type Parameters

K extends keyof HTMLElementEventMap

Parameters

type: K

listener: ((this, ev) => void)

Parameters

this: HTMLElement

ev: HTMLElementEventMap[K]

Returns void

Optional options: boolean | AddEventListenerOptions

Returns void

createNewStencil

Parameters

stencilType: undefined | string | typeof StencilBase

Returns void

deselectStencil

Parameters

Optional stencilEditor: StencilBaseEditor

Returns void

getNewIId

Returns number

getState

Returns DiagramState

hideToolbarButtons

Example

Since

Parameters

Rest ...commands: string[]

Returns void

`Protected` _manipulationStartX

`Protected` _manipulationStartY

`Readonly` languageManager

`Readonly` settings

`Optional` options: boolean | AddEventListenerOptions

`Optional` options: boolean | AddEventListenerOptions

`Optional` stencilEditor: StencilBaseEditor

`Rest` ...commands: string[]

`Optional` options: boolean | EventListenerOptions

`Optional` options: boolean | EventListenerOptions

`Optional` width: number

`Optional` height: number

`Optional` quality: number

`Optional` stencilEditor: StencilBaseEditor