import { DiagramSettings, ColorType, ConnectorBase, Port, IPoint, ConnectorBaseState, ConnectorEndPoints, StencilBase, PortLocation, StencilBaseState, StencilSet, IStencilSet, DiagramState, FontSize, RectangleTextStencil, ArrowType, IStencilProperties } from './core'; /** * Location of the resize grip in relation to the stencil. */ declare type GripLocation = 'topleft' | 'topcenter' | 'topright' | 'leftcenter' | 'rightcenter' | 'bottomleft' | 'bottomcenter' | 'bottomright'; /** * Represents a single resize-manipulation grip used in marker's manipulation controls. */ declare class ResizeGrip { enabled: boolean; /** * Grip's visual element. */ visual: SVGGraphicsElement; /** * Grip's size (raduis). */ readonly GRIP_SIZE = 10; /** * Creates a new grip. */ constructor(); /** * Returns true if passed SVG element belongs to the grip. False otherwise. * * @param el - target element. */ ownsTarget(el: EventTarget): boolean; } /** * String name value pairs. */ declare class StringSet extends Map { } /** * Collection of string sets by language. */ declare class LangStringSet extends Map { } /** * Collection of language strings for a module. */ declare class ModuleStringSet extends Map { } /** * Simple language (localization) subsystem. */ declare class Language { private stringStore; /** * Default language. * * Used when strings are requested without specifying a language. */ defaultLang: string; /** * Default module name. * * Used when strings are requested without specifying a module. */ defaultModule: string; /** * Add strings for a module and language. * @param module module name. * @param lang language identifier. * @param strings string setting values. */ addStrings(module: string, lang: string, strings: StringSet | Array<[string, string]>): void; /** * Gets a string for specified key, module and language. * @param key identifier of the string. * @param module module name. * @param lang language identifier. * @returns localized string. */ getString(key: string, module?: string, lang?: string): string | undefined; } /** * Base class for all property panels. */ declare abstract class PropertyPanelBase { /** * Panel title. */ title: string; /** * Language (localization) subsystem. */ protected language: Language; /** * Creates a new panel. * @param title * @param language */ constructor(title: string, language: Language); /** * Returns panel UI. */ abstract getUi(): HTMLDivElement; } /** * Color class represents a color used in swatches in the editor UI. * In addition to the CSS color value it allows for a custom label to present the color * to the user. */ declare class Color { /** * CSS-compatible color value. */ value: string; private _label?; /** * Returns the label for the color. * If custom label isn't set it returns the real color value. */ get label(): string; /** * Sets a custom label (name) for the color. */ set label(value: string | undefined); /** * Creates a Color object based on supplied value and optional custom label. * @param value * @param label */ constructor(value: string, label?: string); } /** * Represents a collection of colors. * * @see {@link Color} */ declare class ColorSet extends Array { /** * Creates a new ColorSet from a list of colors. * @param colors comma-separated list of colors. */ constructor(...colors: (Color | string)[]); } /** * Represents a font family (for text properties). */ declare class FontFamily { /** * CSS font family string. */ value: string; private _label?; /** * Get the display label for the font family value. */ get label(): string; /** * Sets the display label for the font family value. */ set label(value: string | undefined); /** * Creates a new font family object. * @param value CSS font-family setting value. * @param label optional label describing the font family. */ constructor(value: string, label?: string); } /** * Editor settings is a class for holding the default and custom settings for * stencils and connector types. */ declare class EditorSettings extends DiagramSettings { private _contextStringArrays; /** * Returns a string array setting for provided context and setting name. * @param context setting group (stencil or connector type, etc.) * @param name setting name. * @returns string array setting value. */ getContextStringArray(context: string, name: string): string[] | undefined; /** * Sets the contextual string array setting. * @param context setting group (stencil or connector type, etc.) * @param name setting name. * @param value string array setting value. */ setContextStringArray(context: string, name: string, value: string[]): void; /** * Default colors for text. */ defaultTextColorSet: ColorSet; /** * Default stroke (line, outline) color set. */ defaultStrokeColorSet: ColorSet; /** * Default fill color set. */ defaultFillColorSet: ColorSet; /** * Default background color set. */ defaultBackgroundColorSet: ColorSet; private _colorSets; /** * Returns a contextual color set. * @param context setting group (stencil or connector type, etc.) * @param type type of color (fill, stroke, text, etc.) * @returns contextual color set. */ getColorSet(context: string, type: ColorType): ColorSet; /** * Sets a contextual color set. * @param context setting group (stencil or connector type, etc.) * @param type type of color (fill, stroke, text, etc.) * @param colorSet color set value. */ setContextColorSet(context: string, type: ColorType, colorSet: ColorSet): void; /** * Default stroke dash array collection. * * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) * docs for details. */ defaultStrokeDasharrays: string[]; /** * Returns a contextual dash array. * * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) * docs for details. * * @param context setting group (stencil or connector type, etc.) * @returns dash array. */ getDashArrays(context: string): string[]; /** * Sets a contextual dash array setting. * * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) * docs for details. * * @param context setting group (stencil or connector type, etc.) * @param value dash array value */ setContextDashArrays(context: string, value: string[]): void; /** * Array of default stroke width options (in pixels). */ defaultStrokeWidths: string[]; /** * Returns a contextual stroke width collection setting. * @param context setting group (stencil or connector type, etc.) * @returns stroke width collection (in pixels) */ getStrokeWidths(context: string): string[]; /** * Sets a contextual stroke width collection setting. * @param context setting group (stencil or connector type, etc.) * @param value stroke width array. */ setContextStrokeWidths(context: string, value: string[]): void; /** * Default collection of font families. */ defaultFontFamilies: FontFamily[]; private _fontFamilies; /** * Returns a contextual collection of font families. * @param context setting group (stencil or connector type, etc.) * @returns collection of font families for the context. */ getFontFamilies(context: string): FontFamily[]; /** * Sets a contextual collection of font families. * @param context setting group (stencil or connector type, etc.) * @param value array of font families. */ setContextFontFamilies(context: string, value: FontFamily[]): void; } /** * Represents properties passed to the connector editor constructor. * * @see {@link editor!ConnectorBaseEditor} */ interface ConnectorEditorProperties { /** * Internal identifier for the connector. */ iid: number; /** * SVG container for the connector and editor elements. */ container: SVGGElement; /** * HTML overlay container for editor's elements (such as label text editor). */ overlayContainer: HTMLDivElement; /** * Settings for the editor. */ settings: EditorSettings; /** * Language (localization) subsystem. */ language: Language; /** * Type of the connector [to create]. */ connectorType: typeof ConnectorBase; /** * Previously created connector to edit. */ connector?: ConnectorBase; } /** * Represents the state of the connector editor. */ declare type ConnectorState = 'new' | 'creating' | 'select' | 'move' | 'edit' | 'move-label'; /** * ConnectorBaseEditor covers basic connector creating and editing features. * It is used to edit most of the common connector types that don't require * some special editor treatment. */ declare class ConnectorBaseEditor { /** * Current state of the connector editor. */ protected _state: ConnectorState; /** * Returns current state of the connector editor. */ get state(): ConnectorState; /** * Fired when the connector creation is completed. * @group Events */ onConnectorCreated?: (connector: ConnectorBaseEditor) => void; /** * Fired when the connector is changed (moved, edited, etc.). * @group Events */ onConnectorUpdated?: (connector: ConnectorBaseEditor) => void; /** * Initial X coordinate where pointer manipulation has started. */ protected manipulationStartX: number; /** * Initial Y coordinate where pointer manipulation has started. */ protected manipulationStartY: number; /** * Pointer's X coordinate after the previous pointer event. */ protected prevX: number; /** * Pointer's Y coordinate after the previous pointer event. */ protected prevY: number; private manipulationStartX1; private manipulationStartY1; private manipulationStartX2; private manipulationStartY2; private isDraggingLabel; private textBlockEditor; /** * Container for control elements. */ protected controlBox: SVGGElement; /** * First manipulation grip */ protected grip1: ResizeGrip; /** * Second manipulation grip. */ protected grip2: ResizeGrip; /** * Active manipulation grip. */ protected activeGrip?: ResizeGrip; /** * Connector being edited by this connector editor. */ connector: ConnectorBase; /** * Reference to the port being moved. */ movingPort?: Port; /** * SVG group container encapsulating all the connector's elements. */ protected _container: SVGGElement; /** * Returns the SVG group container for the connector's elements. */ get container(): SVGGElement; /** * HTML overlay container for editor elements like text editor, etc. */ protected overlayContainer: HTMLDivElement; private strokePanel; private arrowTypePanel; private lineStylePanel; private lineWidthPanel; private _settings; /** * Returns editor settings. */ protected get settings(): EditorSettings; /** * Language (localization) subsystem instance. */ protected _language: Language; /** * Creates a new instance of the connector editor. * @param properties connector editor properties. */ constructor(properties: ConnectorEditorProperties); /** * Returns true if the supplied element (event target) belongs to this connector * or connector editor. * @param el target element. * @returns true if the element belongs to the connector or editor. */ ownsTarget(el: EventTarget | null): boolean; /** * Is connector selected? */ protected _isSelected: boolean; /** * Returns true if the connector is currently selected. */ get isSelected(): boolean; /** * Selects the connector. */ select(): void; /** * Deselects the connector. */ deselect(): void; /** * Hides the connector editor controls. */ protected hideControlBox(): void; /** * Shows the connector editor controls. */ protected showControlBox(): void; /** * Handles `pointerdown` event on the connector editor. * @param point pointer location. * @param target immediate pointer event target. */ pointerDown(point: IPoint, target?: EventTarget): void; /** * Handles double-click event on the connector - opens the text editor for the label. * @param point pointer location. * @param target immediate event target. */ dblClick(point: IPoint, target?: EventTarget): void; /** * Handles pointer manipulation depending on the editor's state (movement, resizing, etc.) * @param point pointer location. */ manipulate(point: IPoint): void; /** * Resizes the connector. * @param point pointer location. */ protected resize(point: IPoint): void; /** * Creates the control box for the editor. */ protected setupControlBox(): void; private adjustControlBox; /** * Adds control grips to the editor. */ protected addControlGrips(): void; /** * Creates a control grip (for resizing). * @returns created grip. */ protected createGrip(): ResizeGrip; /** * Positions control grips according to the connector's position. */ protected positionGrips(): void; /** * Positions a control grip at specified location. * @param grip grip to position. * @param x horizontal coordinate. * @param y vertical coordinate. */ protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void; /** * Handles the `pointerup` event. * @param point pointer location. */ pointerUp(point: IPoint): void; private showTextEditor; private positionTextEditor; private textChanged; /** * Returns diagram editor property panels for the connector. */ get propertyPanels(): PropertyPanelBase[]; /** * Disposes of the editor. */ dispose(): void; /** * Scales the connector and editor. * @param scaleX horizontal scale factor. * @param scaleY vertical scale factor. */ scale(scaleX: number, scaleY: number): void; /** * Restores the connector's state and adjusts the editor accordingly. * @param state connector's state. * @param endPoints connector's end points. */ restoreState(state: ConnectorBaseState, endPoints: ConnectorEndPoints): void; } /** * Visual representation of a port for connectors. * * @see {@link core!Port} */ declare class PortConnector { /** * Port the visual represents. */ port: Port; /** * Port connector visual element. */ visual: SVGGraphicsElement; /** * Visual size. */ readonly PORT_SIZE = 5; /** * Creates a new visual for the port. * @param port underlying port. */ constructor(port: Port); /** * Returns true if supplied element belongs to the port connector. * @param el target element. * @returns true if the element belongs to this port connector. */ ownsTarget(el: EventTarget): boolean; /** * Updates the visual. */ adjustVisual(): void; } /** * Describes the properties object passed to the {@link StencilBaseEditor} constructor. */ interface StencilEditorProperties { /** * Internal identifier for the stencil. */ iid: number; /** * SVG container for the stencil and editor elements. */ container: SVGGElement; /** * HTML overlay container for editor's HTML elements (such as label text editor). */ overlayContainer: HTMLDivElement; /** * Settings for the editor. */ settings: EditorSettings; /** * Language (localization) subsystem. */ language: Language; /** * Type of stencil to create. */ stencilType: typeof StencilBase; /** * Previously created stencil to edit. */ stencil?: StencilBase; } /** * The state of the stencil editor. */ declare type StencilEditorState = 'new' | 'creating' | 'select' | 'focus' | 'move' | 'resize' | 'edit' | 'connect'; /** * The core stencil editor class for most stencil types. */ declare class StencilBaseEditor { /** * Type of the edited stencil. */ protected _stencilType: typeof StencilBase; /** * Stencil being edited. */ protected _stencil: StencilBase; /** * Returns the stencil being edited. */ get stencil(): StencilBase; /** * SVG container for the stencil's and editor's visual elements. */ protected _container: SVGGElement; /** * Returns the SVG container for the stencil's and editor's visual elements. */ get container(): SVGGElement; /** * Overlay container for HTML elements like text editors, etc. */ protected _overlayContainer: HTMLDivElement; /** * Overlay container for HTML elements like text editors, etc. */ get overlayContainer(): HTMLDivElement; /** * Editor's state. */ protected _state: StencilEditorState; /** * Gets editor's state. */ get state(): StencilEditorState; /** * Sets editor's state. */ set state(value: StencilEditorState); private _settings; /** * Editor settings and contextual settings manager. */ protected get settings(): EditorSettings; /** * Resize grips. */ protected resizeGrips: Map; /** * Currently active grip. */ protected activeGrip?: ResizeGrip; /** * Collection of ports. */ protected portConnectors: Map; /** * SVG group holding editor's control box. */ protected _controlBox: SVGGElement; /** * SVG group holding resize grips. */ protected _gripBox: SVGGElement; private readonly CB_DISTANCE; private _controlRect?; /** * SVG group for holding connector ports. */ protected _portBox: SVGGElement; /** * Outline displayed in "connect" mode. */ protected _connectorOutline?: SVGPathElement; private shapePanel; /** * Language (localization) subsystem. */ protected _language: Language; /** * Creates a new stencil editor. * @param properties stencil editor properties. */ constructor(properties: StencilEditorProperties); /** * Returns true if the element belongs to the stencil or the editor. * @param el target element. * @returns true if the element belongs to the stencil or editor. */ ownsTarget(el: EventTarget | null): boolean; /** * Returns a port under the current pointer. * @param ev pointer event. * @param exact if true, returns the port exactly under the pointer, otherwise - closest. * @param zoomLevel current zoom level. * @returns target port. */ getTargetPort(ev: PointerEvent | null, exact?: boolean, zoomLevel?: number): PortConnector | undefined; /** * Fired when stencil is created. */ onStencilCreated?: (stencilEditor: StencilBaseEditor) => void; /** * Fired when stencil changes. */ onStencilChanged?: (stencilEditor: StencilBaseEditor) => void; /** * Creates visuals for the stencil and editor. */ protected setupVisuals(): void; private setupControlBox; private setupPortBox; private addResizeGrips; private addPorts; private positionGrips; private positionPorts; private positionGrip; /** * Hides the control box. */ protected hideControlBox(): void; /** * Shows the control box. */ protected showControlBox(): void; /** * Hides the port box. */ protected hidePortBox(): void; /** * Shows the port box. */ protected showPortBox(): void; private adjustControlBox; private adjustPortBox; /** * Switches the stencil editor to connect mode. */ switchToConnectMode(): void; /** * Switches the stencil editor out of the connect mode. */ switchConnectModeOff(): void; /** * Scales the editor and stencil. * @param scaleX horizontal scale factor. * @param scaleY vertical scale factor. */ scale(scaleX: number, scaleY: number): void; /** * x coordinate of the top-left corner at the start of manipulation. */ protected manipulationStartLeft: number; /** * y coordinate of the top-left corner at the start of manipulation. */ protected manipulationStartTop: number; /** * Width at the start of manipulation. */ protected manipulationStartWidth: number; /** * Height at the start of manipulation. */ protected manipulationStartHeight: number; /** * x coordinate of the pointer at the start of manipulation. */ protected manipulationStartX: number; /** * y coordinate of the pointer at the start of manipulation. */ protected manipulationStartY: number; /** * Pointer's horizontal distance from the top left corner. */ protected offsetX: number; /** * Pointer's vertical distance from the top left corner. */ protected offsetY: number; /** * Initial actions when manipulation starts. * @param point pointer location */ initManipulation(point: IPoint): void; /** * Handles a `pointerdown` event. * @param point pointer location. * @param target event target element. */ pointerDown(point: IPoint, target?: EventTarget): void; /** * Handles a double-click event. * @param point pointer location. * @param target pointer event target. */ dblClick(point: IPoint, target?: EventTarget): void; /** * Finds a resize grip by the target visual. * @param target event target. * @returns resize grip or undefined if not found. */ protected findGripByVisual(target: SVGGraphicsElement): ResizeGrip | undefined; /** * Moves the stencil to specified location. * @param x horizontal location. * @param y vertical location. */ moveStencilTo(x?: number, y?: number): void; /** * Handles manipulation. * @param point pointer location. */ manipulate(point: IPoint): void; /** * Resizes the stencil. * @param point pointer location. */ protected resize(point: IPoint): void; /** * Adjusts stencil and editor size. */ protected setSize(): void; /** * When set to true `stencilcreate` event isn't fired. */ protected _suppressStencilCreateEvent: boolean; pointerUp(point: IPoint): void; /** * Creates a stencil at specified location. * @param point location at which to create the stencil. */ create(point: IPoint): void; /** * Is stencil selected? */ protected _isSelected: boolean; /** * Returns true if the stencil is selected. */ get isSelected(): boolean; /** * Is stencil in focus? */ protected _isFocused: boolean; /** * Returns true if the stencil is in focus. */ get isFocused(): boolean; /** * Select the stencil. */ select(): void; /** * Deselect the stencil. */ deselect(): void; /** * Puts the stencil editor in focus. */ focus(): void; /** * Unfocus the stencil. */ blur(): void; /** * Returns property panels for the UI for this stencil. */ get propertyPanels(): PropertyPanelBase[]; /** * Restores the stencil from previously saved state. * @param state stencil state (configuration) */ restoreState(state: StencilBaseState): void; } /** * Stencil editor set descriptor. */ interface IStencilEditorSet { /** * Editor set identifier. */ id: string; /** * {@link core!StencilSet} covered by the editor set. */ stencilSet: StencilSet; /** * Display name for the editor set. */ displayName?: string; /** * Localization strings. */ defaultStringSet?: StringSet; /** * A mapping collection of stencils and corresponding editors. */ stencilEditorTypes: Map; /** * A mapping collection of connectors and corresponding editors. */ connectorEditorTypes: Map; /** * Connector types available in this stencil editor set. */ availableConnectorTypes: typeof ConnectorBase[]; /** * The default selected connector type. */ defaultConnectorType: typeof ConnectorBase; /** * Returns the editor type for the supplied stencil type. * @param stencilType stencil type for editing. */ getStencilEditor(stencilType: typeof StencilBase): typeof StencilBaseEditor; /** * Returns the connector editor type for the supplied connector type. * @param connectorType connector type for editing. */ getConnectorEditor(connectorType: typeof ConnectorBase): typeof ConnectorBaseEditor; } /** * Represents a collection of stencil and connector types and respective editors * for a specific diagram type creation and editing. */ declare class StencilEditorSet implements IStencilEditorSet { id: string; stencilSet: IStencilSet; displayName?: string; defaultStringSet?: StringSet; defaultStencilEditor: typeof StencilBaseEditor; defaultConnectorEditor: typeof ConnectorBaseEditor; stencilEditorTypes: Map; connectorEditorTypes: Map; availableConnectorTypes: typeof ConnectorBase[]; defaultConnectorType: typeof ConnectorBase; /** * The default document to load when creating a new diagram for this set. */ newDocumentTemplate?: DiagramState; /** * Creates a new stencil editor set. * @param id editor set identifier. * @param stencilSet stencil set. */ constructor(id: string, stencilSet: IStencilSet); /** * Returns an editor type for the provided stencil type. * @param stencilType stencil type. * @returns if specified returns a custom editor type for the supplied stencil type, * otherwise returns the default editor type for this stencil editor set. */ getStencilEditor(stencilType: typeof StencilBase): typeof StencilBaseEditor; /** * Returns an editor type for the provided connector type. * @param connectorType connector type. * @returns if specified returns a custom editor type for the supplied connector type, * otherwise returns the default editor type for this stencil editor set. */ getConnectorEditor(connectorType: typeof ConnectorBase): typeof ConnectorBaseEditor; /** * Adds an editor type for one or more stencil types. * @param editorType editor type. * @param stencilTypes list of stencil types to be edited by this editor. */ addStencilEditor(editorType: typeof StencilBaseEditor, ...stencilTypes: (typeof StencilBase)[]): void; /** * Adds an editor type for one or more connector types. * @param editorType editor type. * @param connectorTypes list of connector types to be edited by this editor. */ addConnectorEditor(editorType: typeof ConnectorBaseEditor, ...connectorTypes: (typeof ConnectorBase)[]): void; } /** * Diagram editor operation mode: * * - `select` - editor primarily treats pointer events for stencil/connector selection * - `connect` - editor primarily treats pointer events for connecting stencils */ declare type DiagramEditorMode = 'select' | 'connect'; /** * {@link editor!DiagramEditor} events. */ interface DiagramEditorEventMap { /** * Save button clicked. */ saveclick: CustomEvent; /** * Editor initialized. */ editorinit: CustomEvent; /** * Diagram loaded (restored). */ diagramload: CustomEvent; /** * Diagram state changed. * * Fired on every stencil/connector creation, edit, deletion. */ statechange: CustomEvent; /** * Pointer entered stencil space. */ stencilpointerenter: CustomEvent; /** * Pointer left stencil space. */ stencilpointerleave: CustomEvent; /** * Stencil clicked. */ stencilclick: CustomEvent; /** * Pointer entered connector space. */ connectorpointerenter: CustomEvent; /** * Pointer left connector space. */ connectorpointerleave: CustomEvent; /** * Connector clicked. */ connectorclick: CustomEvent; } /** * Defines the data object for the editor's render event. * * @see {@link editor!DiagramEditorEventMap.saveclick} */ interface RenderEventData { /** * Diagram's state (configuration). */ state: DiagramState; } /** * Defines the data object for {@link DiagramEditor} level events. * * @see * - {@link DiagramEditorEventMap.editorinit} * - {@link DiagramEditorEventMap.diagramload} * - {@link DiagramEditorEventMap.statechange} */ interface DiagramEditorEventData { /** * {@link DiagramEditor} instance. */ editor: DiagramEditor; } /** * Defines the data object for stencil related events. * * @see * - {@link DiagramEditorEventMap.stencilpointerenter} * - {@link DiagramEditorEventMap.stencilpointerleave} * - {@link DiagramEditorEventMap.stencilclick} */ interface StencilEditorEventData { /** * Diagram editor instance. */ diagramEditor: DiagramEditor; /** * Stencil editor for the affected stencil. */ stencilEditor: StencilBaseEditor; } /** * Defines the data object for connector releated events. * * @see * - {@link DiagramEditorEventMap.connectorpointerenter} * - {@link DiagramEditorEventMap.connectorpointerleave} * - {@link DiagramEditorEventMap.connectorclick} */ interface ConnectorEditorEventData { /** * Diagram editor instance. */ diagramEditor: DiagramEditor; /** * Connector editor for the affected connector. */ connectorEditor: ConnectorBaseEditor; } /** * 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: * * ```html * * ``` * * Or you can add it in code. * * One important thing to set when the component loads is the {@link editor!StencilEditorSet} you want to use. * * Here we add a Flowchart stencil set: * * ```ts * let editor = document.getElementById('mjsDiaEditor'); * editor.stencilEditorSet = flowchartStencilEditorSet; * ``` * * You may want to add a previously saved state via the {@link DiagramEditor#restoreState}. * * Finally, you most probably want to handle the {@link editor!DiagramEditorEventMap.saveclick} event * to store the editing results: * * ```ts * editor.addEventListener('saveclick', (ev) => { * // process state (represents the created diagram) * console.log(ev.detail.state); * }); * ``` * * @see * Check out MJS Diagram [docs](https://markerjs.com/docs/diagram/getting-started) * and [demos](https://markerjs.com/demos/diagram/getting-started/) for more details. */ declare class DiagramEditor extends HTMLElement { private _container?; private _toolbarContainer?; private _contentContainer?; private _canvasContainer?; private _toolboxContainer?; private _overlayContainer; private _overlayContentContainer; private _internalUiContainer; private _logoUI?; private mode; private _isInitialized; private _mainCanvas?; private _groupLayer?; private _connectorLayer?; private _objectLayer?; private _currentStencilEditor?; private _selectedStencilEditors; private _stencilEditors; private _currentConnectorType; private _currentConnectorEditor?; private _connectorEditors; private _connectorTypePanel; private _newStencilPanel; private _alignPanel; private _arrangePanel; private _documentBackgroundPanel; private _documentDimensionsPanel; private _newStencilOutline; private _marqueeSelectOutline; private _marqueeSelectRect; /** * Steps zoom in/out buttons go through. */ zoomSteps: number[]; private _zoomLevel; /** * Returns the current zoom level. */ get zoomLevel(): number; /** * Sets the current zoom level. */ set zoomLevel(value: number); private _stencilEditorSet; /** * Returns the current stencil editor set. */ get stencilEditorSet(): StencilEditorSet; /** * Sets the current stencil editor set. * * @remarks * Note that all the current edits are lost when new stencil set is set. */ set stencilEditorSet(value: StencilEditorSet); private _toolboxPanel; private _toolbar?; protected _manipulationStartX: number; protected _manipulationStartY: number; private undoRedoManager; /** * Editor settings. * * Control available colors, font families, etc. through this property. */ readonly settings: EditorSettings; /** * Enables multi-language support. */ readonly languageManager: Language; set language(value: string); get language(): string; private _resizeObserver?; /** * Creates the new instance of the editor. */ constructor(); private _iid; /** * Generates a new internal identifier used to identify stencils and connectors when * serialized to the state JSON. * @returns new internally unique identifier. */ getNewIId(): number; private setupPanels; private addStyles; private createLayout; private addToolbar; private addToolbox; private _currentToolboxPanels; private addToolboxPanel; private addToolboxPanels; private removeToolboxPanels; private _isToolboxVisible; private toggleToolbox; private toolbarButtonClicked; private showAddPanel; private toggleConnectMode; private showDocumentPropertiesPanel; private setDocumentBgColor; private setDocumentSize; private switchToConnectMode; private switchConnectModeOff; private deleteSelected; private findConnectorEditor; private deleteStencilEditor; private deleteConnector; private width; private height; private documentWidth; private documentHeight; private documentBgColor; private addMainCanvas; private setMainCanvasSize; private initOverlay; private initUiLayer; private connectedCallback; private disconnectedCallback; private applyStencilSet; private attachEvents; private attachWindowEvents; private detachEvents; private detachWindowEvents; private setupResizeObserver; private touchPoints; private isDragging; private isSelecting; private connectionStartPort?; private connectionEndPort?; private selectHitEditor; private pushToConnectorLayer; private popFromConnectorLayer; private deselectCurrentConnector; private selectHitConnector; private selectConnector; private onCanvasPointerDown; private onDblClick; private onPointerMove; private onCanvasPointerMove; private removeConnectorFromPort; private onCanvasPointerUp; private onCanvasPointerOut; private _currentHitEditor?; private getHitEditor; private getHitConnector; private onPointerUp; private onPointerOut; private onKeyUp; /** * Creates a new stencil of the specified type * @param stencilType stencil type as either type or its string representation */ createNewStencil(stencilType: typeof StencilBase | string | undefined): void; private stencilCreated; private stencilChanged; private connectorCreated; private connectorUpdated; /** * Sets the currently active stencil editor. If multiple stencils are selected then * there's no "current" stencil. Passing nothing/undefined unsets the current stencil. * @param stencilEditor stencil editor to make active. */ setCurrentStencil(stencilEditor?: StencilBaseEditor): void; /** * Selects a stencil. If there already is a selected stencil then the * supplied stencil is added to the selection. * @param stencilEditor stencil editor to select. */ selectStencil(stencilEditor: StencilBaseEditor): void; /** * Removes the supplied stencil editor from selection. If no stencil editor is supplied, * all selected stencils are unselected. * @param stencilEditor stencil editor to select. */ deselectStencil(stencilEditor?: StencilBaseEditor): void; private addNewStencil; private addNewConnector; private changeConnectorType; private finishMarqueeSelection; addEventListener(type: T, listener: (this: DiagramEditor, ev: DiagramEditorEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void; removeEventListener(type: T, listener: (this: DiagramEditor, ev: DiagramEditorEventMap[T]) => void, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): 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. * * @param commands list of commands * * @example * The code below hides `zoomreset` and `redo` buttons. * * ```typescript * editor.hideToolbarButtons('zoomreset', 'redo'); * ``` * @since 1.1.0 */ hideToolbarButtons(...commands: string[]): void; /** * Returns the diagram configration state object. Use it to store the state in databases, files, etc. * @returns diagram configuration as a serializable object. */ getState(): DiagramState; private restoreConnector; /** * Restores (loads) previous saved (or manually created) diagram. * @param state diagram configuration object. */ restoreState(state: DiagramState): void; /** * Zooms in or out to the supplied zoom level (1 = 100%). * @param factor zoom level. */ zoom(factor: number): void; /** * Use this method to reneder the current diagram as a static raster image. * @param width target width * @param height target height * @param imageType image type (image/png, image/jpeg, etc.) * @param quality render quality for lossy codecs (1=100% for jpeg). * @returns rendered image as a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs). */ render(width?: number, height?: number, imageType?: string, quality?: number): Promise; /** * Returns true if undo operation can be performed (undo stack is not empty). */ get isUndoPossible(): boolean; /** * Returns true if redo operation can be performed (redo stack is not empty). */ get isRedoPossible(): boolean; private addUndoStep; /** * Undo last action. */ undo(): void; private undoStep; /** * Redo previously undone action. */ redo(): void; private redoStep; /** * NOTE: * * before removing or modifying this method please consider supporting MJS Diagram * by visiting https://markerjs.com/buy for details * * thank you! */ private toggleLogo; private addLogo; private removeLogo; private positionLogo; private readonly PAGE_MARGIN; private alignHorizontally; private alignVertically; private arrange; } /** * Color change event handler type. */ declare type ColorChangeHandler = (newColor: string) => void; /** * Color picker tooblox panel. */ declare class ColorPickerPanel extends PropertyPanelBase { /** * Available colors. */ colors: ColorSet; /** * Selected color. */ currentColor?: string; private colorBoxes; /** * Color change event handler. */ onColorChanged?: ColorChangeHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language, colors: ColorSet, currentColor?: string); getUi(): HTMLDivElement; private getColorBox; private setCurrentColor; } /** * Font family change event handler type. */ declare type FontFamilyChangeHandler = (newStyle: string) => void; /** * Font size change event handler type. */ declare type FontSizeChangeHandler = (newSize: FontSize) => void; /** * Font properties toolbox panel. */ declare class FontPanel extends PropertyPanelBase { /** * Available font families. */ fontFamilies: FontFamily[]; /** * Currently selected font family. */ currentFontFamily?: string; /** * Current font size. */ currentFontSize: FontSize; /** * Font family change event handler. */ onFontFamilyChanged?: FontFamilyChangeHandler; /** * Font size change event handler. */ onFontSizeChanged?: FontSizeChangeHandler; /** * Creates a new font properties panel * @param title panel title * @param language language (localization) subsystem * @param fontFamilies available font families * @param currentFontFamily select font family * @param currentFontSize current font size */ constructor(title: string, language: Language, fontFamilies: FontFamily[], currentFontFamily?: string, currentFontSize?: FontSize); getUi(): HTMLDivElement; private setFontFamily; private setFontSize; } /** * Text properties panel controlled properties. */ interface TextPropertiesPanelProperties { /** * Available text colors. */ textColors: ColorSet; /** * Selected text color. */ textColor?: string; /** * Available font families. */ fontFamilies: FontFamily[]; /** * Selected font family. */ fontFamily?: string; /** * Current font size. */ fontSize?: FontSize; } /** * Toolbox meta-panel for text properties. */ declare class TextPropertiesPanel extends PropertyPanelBase { private colorPanel; private fontPanel; /** * Font color change event handler. */ onColorChanged?: ColorChangeHandler; /** * Font family change event handler. */ onFontFamilyChanged?: FontFamilyChangeHandler; /** * Font size change event handler. */ onFontSizeChanged?: FontSizeChangeHandler; /** * Current text color. */ textColor?: string; /** * Current font family. */ fontFamily?: string; /** * Current font size. */ fontSize?: FontSize; /** * Creates a new text properties panel. * @param title panel title * @param language language (localization) subsystem * @param properties panel properties */ constructor(title: string, language: Language, properties: TextPropertiesPanelProperties); getUi(): HTMLDivElement; private colorChanged; private fontFamilyChanged; private fontSizeChanged; } /** * The default editor for the text-based stencils. */ declare class TextStencilEditor extends StencilBaseEditor { /** * Panel for the text-related editor properties. */ protected textPanel: TextPropertiesPanel; /** * Returns the stencil being edited. */ get stencil(): RectangleTextStencil; private textBlockEditor; private isMoved; private pointerDownPoint?; private pointerDownTimestamp; /** * Creates a new text stencil editor instance. * @param properties editor properties. */ constructor(properties: StencilEditorProperties); get propertyPanels(): PropertyPanelBase[]; pointerDown(point: IPoint, target?: EventTarget): void; dblClick(point: IPoint, target?: EventTarget): void; manipulate(point: IPoint): void; protected resize(point: IPoint): void; pointerUp(point: IPoint): void; private showTextEditor; private positionTextEditor; private textChanged; create(point: IPoint): void; select(): void; deselect(): void; protected setColor(color: string): void; protected setFont(font: string): void; protected hideVisual(): void; protected showVisual(): void; scale(scaleX: number, scaleY: number): void; restoreState(state: StencilBaseState): void; } /** * Specialized stencil editor for image stencils. * * @see {@link core!ImageStencil} */ declare class ImageStencilEditor extends TextStencilEditor { } /** * Specialized stencil editor for custom image stencils. * * @see {@link core!CustomImageStencil} */ declare class CustomImageStencilEditor extends TextStencilEditor { private imagePanel; private labelLocationPanel; constructor(properties: StencilEditorProperties); get propertyPanels(): PropertyPanelBase[]; restoreState(state: StencilBaseState): void; } /** * Text changed event handler type. */ declare type TextChangedHandler = (text: string) => void; /** * Represents a text block editor element. */ declare class TextBlockEditor { private textEditor; private isInFocus; private _width; /** * Returns editor width in pixels. */ get width(): number; /** * Sets editor width in pixels. */ set width(value: number); private _height; /** * Returns editor height in pixels. */ get height(): number; /** * Sets editor height in pixels. */ set height(value: number); private _left; /** * Returns the horizontal (X) location of the editor's left corner (in pixels). */ get left(): number; /** * Sets the horizontal (X) location of the editor's left corner (in pixels). */ set left(value: number); private _top; /** * Returns the vertical (Y) location of the editor's top left corner (in pixels). */ get top(): number; /** * Sets the vertical (Y) location of the editor's top left corner (in pixels). */ set top(value: number); private _text; /** * Returns the text block text. */ get text(): string; /** * Sets the text block text. */ set text(value: string); private _fontFamily; /** * Returns text block's font family. */ get fontFamily(): string; /** * Sets the text block's font family. */ set fontFamily(value: string); private _fontSize; /** * Returns text block's font size. */ get fontSize(): string; /** * Sets text block's font size. */ set fontSize(value: string); private _textColor; /** * Returns text block's font color. */ get textColor(): string; /** * Returns text block's font color. */ set textColor(value: string); /** * Text changed event handler. */ onTextChanged?: TextChangedHandler; /** * Creates a new text block editor instance. */ constructor(); private isSetupCompleted; private setup; /** * Returns editor's UI, * @returns UI in a div element. */ getEditorUi(): HTMLDivElement; /** * Focuses text editing in the editor. */ focus(): void; /** * Unfocuses the editor. */ blur(): void; } /** * Horizontal alignment options. */ declare type HorizontalAlignment = 'left' | 'center' | 'right'; /** * Vertical alignment options. */ declare type VerticalAlignment = 'top' | 'middle' | 'bottom'; /** * Horizontal alignment change event handler type. */ declare type HorizontalAlignmentClickHandler = (alignment: HorizontalAlignment) => void; /** * Vertical alignment change event handler type. */ declare type VerticalAlignmentClickHandler = (alignment: VerticalAlignment) => void; /** * Toolbox panel for editing object and text alignment. */ declare class AlignPanel extends PropertyPanelBase { /** * Horizontal alignmen change event handler. */ onHorizontalAlignmentClicked?: HorizontalAlignmentClickHandler; /** * Vertical alignment change event handler. */ onVerticalAlignmentClicked?: VerticalAlignmentClickHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language); getUi(): HTMLDivElement; private horizontalAlignmentClicked; private verticalAlignmentClicked; } /** * Arrangement options. */ declare type ArrangementType = 'front' | 'forward' | 'backward' | 'back'; /** * Arrange event handler type. */ declare type ArrangeClickHandler = (arrange: ArrangementType) => void; /** * Object arrangemen panel. */ declare class ArrangePanel extends PropertyPanelBase { /** * Handler for the arrange event. */ onArrangeClicked?: ArrangeClickHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language); getUi(): HTMLDivElement; private arrangeClicked; } /** * Arrow type change event handler type. */ declare type ArrowTypeChangeHandler = (newType: ArrowType) => void; /** * Arrow type toolbox panel. */ declare class ArrowTypePanel extends PropertyPanelBase { private currentType?; private typeBoxes; /** * Arrow type change event handler. */ onArrowTypeChanged?: ArrowTypeChangeHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language, currentType?: ArrowType); getUi(): HTMLDivElement; private setCurrentType; } /** * Connector type change event handler type. */ declare type ConnectorTypeChangeHandler = (newType: typeof ConnectorBase) => void; /** * Connector type selection toolbox panel. */ declare class ConnectorTypePanel extends PropertyPanelBase { /** * Avalable connector types. */ connectorTypes: typeof ConnectorBase[]; private currentType?; private typeBoxes; /** * Connector type event handler. */ onConnectorTypeChanged?: ConnectorTypeChangeHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language, connectorTypes: typeof ConnectorBase[], currentType?: typeof ConnectorBase); getUi(): HTMLDivElement; private getTypeBox; private setCurrentType; /** * Selects connector type based on the supplied name. * @param typeName connector type name */ selectType(typeName: string): void; } /** * Dimensions change event handler type. */ declare type DimensionsChangeHandler = (newWidth: number, newHeight: number) => void; /** * Dimensions toolbox panel. */ declare class DimensionsPanel extends PropertyPanelBase { /** * Current width. */ currentWidth: number; /** * Current height. */ currentHeight: number; private widthInput; private heightInput; /** * Dimension change event handler. */ onDimensionsChanged?: DimensionsChangeHandler; /** * {@inheritDoc editor!PropertyPanelBase.constructor} */ constructor(title: string, language: Language, currentWidth: number, currentHeight: number); getUi(): HTMLDivElement; private setCurrentDimensions; } /** * Line style change event handler type. */ declare type LineStyleChangeHandler = (newStyle: string) => void; /** * Line style toolbox panel. * Can be [re]used to control different line attributes. */ declare class LineStylePanel extends PropertyPanelBase { /** * Available line styles. */ lineStyles: string[]; /** * Selected line style. */ currentStyle?: string; private typeBoxes; /** * Common line attributes. */ lineAttributes: Array<[string, string]>; /** * Panel controlled attribute name. */ lineStyleAttribute: string; /** * Line style change event handler. */ onLineStyleChanged?: LineStyleChangeHandler; /** * Creates a new line style panel. * @param title panel title * @param language language (localization) subsystem * @param lineStyleAttribute name of the line attribute to edit * @param lineStyles available styles * @param currentStyle currently selected style */ constructor(title: string, language: Language, lineStyleAttribute: string, lineStyles: string[], currentStyle?: string); getUi(): HTMLDivElement; private getTypeBox; private setCurrentType; /** * Selects supplied style box. * @param style current style to select. */ selectStyle(style: string): void; } /** * New stencil type selected event handler type. */ declare type CreateNewStencilHandler = (stencilType?: typeof StencilBase) => void; /** * Toolbox panel displaying available stencil types. */ declare class NewStencilPanel extends PropertyPanelBase { /** * Available stencil types. */ stencilTypes: IStencilProperties[]; private currentType?; private typeBoxes; /** * New type selected event handler. */ onCreateNewStencil?: CreateNewStencilHandler; /** * Creates a new stencil toolbox panel. * @param title panel title * @param language language (localization) subsystem * @param stencilTypes available stencil types * @param currentType selected stencil type */ constructor(title: string, language: Language, stencilTypes: IStencilProperties[], currentType?: typeof StencilBase); getUi(): HTMLDivElement; private getTypeBox; private setCurrentType; /** * Deselects selected stencil type. */ deselectType(): void; } /** * Shape panel controlled properties. */ interface ShapePropertiesPanelProperties { /** * Available fill colors. */ fillColors: ColorSet; /** * Selected fill color. */ fillColor?: string; /** * Available stroke colors. */ strokeColors: ColorSet; /** * Selected stroke color. */ strokeColor?: string; /** * Available line styles. */ lineStyles: string[]; /** * Selected line style. */ lineStyle?: string; /** * Available line widths. */ lineWidths: string[]; /** * Current line width. */ lineWidth: string; } /** * Toolbox meta-panel for editing shape properties. */ declare class ShapePropertiesPanel extends PropertyPanelBase { private strokePanel; private fillPanel; private lineStylePanel; private lineWidthPanel; /** * Stroke color change event handler. */ onStrokeColorChanged?: ColorChangeHandler; /** * Fill color change event handler. */ onFillColorChanged?: ColorChangeHandler; /** * Line style change event handler. */ onLineStyleChanged?: LineStyleChangeHandler; /** * Line width change event handler. */ onLineWidthChanged?: LineStyleChangeHandler; /** * Current stroke color. */ strokeColor?: string; /** * Current fill color. */ fillColor?: string; /** * Current line style. */ lineStyle?: string; /** * Current line width. */ lineWidth?: string; /** * If set to `false` the fill related panels are hidden. */ fillPanelsEnabled: boolean; /** * If set to 'false` the stroke related panels are hidden. */ strokePanelsEnabled: boolean; /** * Creates a shape properties panel. * @param title panel title * @param language language (localization) subsystem * @param properties panel properties */ constructor(title: string, language: Language, properties: ShapePropertiesPanelProperties); getUi(): HTMLDivElement; private strokeColorChanged; private fillColorChanged; private lineStyleChanged; private lineWidthChanged; } /** * Basic stencil editor set sets up editing capabilities for creating * diagrams with the {@link core!basicStencilSet}. */ declare const basicStencilEditorSet: StencilEditorSet; export { AlignPanel, ArrangeClickHandler, ArrangePanel, ArrangementType, ArrowTypeChangeHandler, ArrowTypePanel, Color, ColorChangeHandler, ColorPickerPanel, ColorSet, ConnectorBaseEditor, ConnectorEditorEventData, ConnectorEditorProperties, ConnectorState, ConnectorTypeChangeHandler, ConnectorTypePanel, CreateNewStencilHandler, CustomImageStencilEditor, DiagramEditor, DiagramEditorEventData, DiagramEditorEventMap, DiagramEditorMode, DimensionsChangeHandler, DimensionsPanel, EditorSettings, FontFamily, FontFamilyChangeHandler, FontPanel, FontSizeChangeHandler, GripLocation, HorizontalAlignment, HorizontalAlignmentClickHandler, IStencilEditorSet, ImageStencilEditor, LangStringSet, Language, LineStyleChangeHandler, LineStylePanel, ModuleStringSet, NewStencilPanel, PortConnector, PropertyPanelBase, RenderEventData, ResizeGrip, ShapePropertiesPanel, ShapePropertiesPanelProperties, StencilBaseEditor, StencilEditorEventData, StencilEditorProperties, StencilEditorSet, StencilEditorState, StringSet, TextBlockEditor, TextChangedHandler, TextPropertiesPanel, TextPropertiesPanelProperties, TextStencilEditor, VerticalAlignment, VerticalAlignmentClickHandler, basicStencilEditorSet };