@samatawy/diagrams
    Preparing search index...

    Class DiagramEditView

    A class representing a diagram in edit mode. It provides tools for selection of nodes as well as mutation of the diagram's structure by user actions.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    history fileDialogs? prompts? keyboardFlags current settings freehand palette_mode modified can_paste can_paste_styles activeTextEditor? id nodes groups layers sheet_id? background? meta? ownsCanvas contextMenu? coordinates cache host canvas context pixelRatio canvasBackgroundColor event_dispatcher resizeObserver? selected_nodes selectionOptions fitViewport animations grid guideOptions guides dragStartOnNode dragPanningWithSpace hover_listener? click_listener? double_click_listener?

    Accessors

    canOpenDiagram canOpenStylesheet canSaveStylesheet sheetRepository currentSheet render_mode opacity lineWidth lineDash arrowAt arrowType strokeColor fillColor freehandColor freehandLineWidth shadowStyle strokeStyle fillStyle textStyle nodeText currentTool canPaste canPasteStyles imageId imageMode imageAlign imagePadding canUndo canRedo image_assets assetStore metadata eventDispatcher onHover onClick onDoubleClick

    Methods

    destroy clear newDiagram loadDiagram openDiagram saveDiagram saveImageDiagram loadStylesheet openStylesheet saveStylesheet setCurrentSheet ensureCustomSheet publishCurrentSheetAs applyClassChange setTool beginToolDragCreate createDragDraft setStrokeColor setFillColor setBackgroundColor setBackground setImageId setOpacity setLineWidth setLineDash setArrowAt setArrowType setStrokeStyle setFillStyle setShadowStyle setTextStyle setNodeText applyNodePatch applyDiagramPatch getFrequentColors isModified addUndo undo redo copyStyles pasteStyles cutSelected copySelected pasteNodes setCurrentLayer addLayer moveToNewLayer selectLayer showLayer hideLayer deleteLayer bringSelectionForward sendSelectionBackward bringSelectionToFront sendSelectionToBack bringNodeForward sendNodeBackward bringNodeToFront sendNodeToBack bringLayerForward sendLayerBackward bringLayerToFront sendLayerToBack deleteSelected cloneSelected cloneNode cloneNodes groupSelected ungroupSelected changeNodeType alignSelected spreadSelected render renderSelection renderConnectionHandles pointerDown pointerMove pointerUp dblClick setKeyboardFlag keydown keyup contextmenu init renderPreview ensureCurrentLayer exitDrawing zoomTo panBy moveSelectedWithUndo pickNodeImage setNodeImage setSelectedNodeImageSource setSelectedNodeSvgSource clearSelectedNodeImageSource showActions node group layer upsertGroup setNodeGroup nodeGroup groupOwner setNodeLayer deleteGroup resolveNodeImageSource clearImageAssets getMeta setMeta deleteMeta getNodeMeta setNodeMeta deleteNodeMeta read write export save applyNodeImageSource layerNodes serializeNode serializeGroup createLayer handlePointerDown handlePointerMove handlePointerUp handlePointerLeave handleDblClick handleWheel handleKeyDown handleKeyUp handleContextMenu getCache getCoordinates getKeyboard setKeyboard getCanvas selectNode selection isSelected select deselect clearSelection selectAll setSelection toggleSelection setViewport fitHorizontally fitToNodes zoomBy upsertNode upsertLayer deleteNode setNodeImageSource setNodeSvgSource clearNodeImageSource renderGuides updateGrid updateGuides setGuides clearGuides clearGuidelines resetView exportImage saveImage getNodeBounds startAnimation stopAnimation stopAnimations animateLineDash animateNodeShutter animateViewport onEvent clearEvent hitNode hitNodes hitHandle hitConnectionHandle getCursor emitKeyboardModeHint wheel shouldIgnoreGlobalKeydown

    Constructors

    • Creates an instance of DiagramEditView.

      Parameters

      • id: string

        The unique identifier for the diagram.

      • target: HTMLElement | HTMLCanvasElement

        The HTML element or canvas where the diagram will be rendered.

      • Optionalinitial: Partial<Omit<Diagram, "id">>

        Optional initial properties for the diagram.

      Returns DiagramEditView

    Properties

    history: HistoryStack
    fileDialogs?: DiagramFileDialogs
    prompts?: DiagramEditViewPrompts
    keyboardFlags: EditKeyboardFlags
    current: {
        layer?: ILayer;
        tool?: string;
        toolOptions?: { url?: string };
        draft?: INode;
        zoom_factor: number;
        sheet?: SpecSheet;
    } = ...
    settings: {
        opacity: number;
        lineWidth: number;
        lineDash: string | number[];
        arrow_at: ArrowDirection;
        arrow_type: ArrowType;
        strokeColor: string;
        fillColor: string;
        fillGradient?: IGradient;
        shadowColor: string;
        shadowBlur: number;
        shadowOffsetX: number;
        shadowOffsetY: number;
        fontFace: string;
        fontSize: number;
        textColor: string;
        textWeight: IFontWeight;
        textItalic: boolean;
        textHalo: string;
        textAlign: ITextAlign;
        textBaseline: ITextBaseline;
        textOrientation?: ITextOrientation;
        nodeText?: string;
        imageMode?: ImageMode;
        imageAlign?: ImageAlign;
        imagePadding?: number;
    } = ...
    freehand: { strokeColor: string; lineWidth: number } = ...
    palette_mode: "fill" | "stroke" = 'stroke'
    modified: boolean = false
    can_paste: boolean = false
    can_paste_styles: boolean = false
    activeTextEditor?: {
        element: HTMLTextAreaElement;
        nodeId: string;
        originalText: string;
        singleLine: boolean;
    }
    id: string

    The unique identifier of the diagram, which is used to reference the diagram within the application and for serialization purposes.

    nodes: INode[]

    An array of nodes that belong to the diagram, which represent the entities and elements that can be connected and manipulated within the diagram.

    groups: IGroup[]

    An optional array of groups that belong to the diagram, which can be used to organize nodes into visual collections. Grouped nodes maintain their relative positions.

    layers: ILayer[] = []

    An array of layers that belong to the diagram, which can be used to organize nodes into different visual layers.

    sheet_id?: string

    An optional identifier for the sheet associated with the diagram, which can be used to apply specific styles and configurations to the diagram's nodes and connections.

    background?: FillStyle

    An optional background fill style for the diagram, which can be used to set the background color or gradient of the diagram area.

    meta?: Record<string, any>

    An optional metadata object for the diagram, which can be used to store additional information about the diagram that is not part of its core structure. This can include custom properties, annotations, or any other relevant data that is not related to diagram rendering.

    ownsCanvas: boolean
    contextMenu?: ContextMenu

    Optional context menu invoked when the user right-clicks on the canvas. Assign a DiagramContextMenu or ContextMenu instance here.

    view.contextMenu = new DiagramContextMenu(view);
    coordinates: CoordinateSystem
    cache: ViewCache
    host: HTMLElement
    canvas: HTMLCanvasElement
    context: CanvasRenderingContext2D
    pixelRatio: number = 1
    canvasBackgroundColor: string = DiagramConstants.CANVAS_BACKGROUND_COLOR
    event_dispatcher: EventDispatcher
    resizeObserver?: ResizeObserver
    selected_nodes: INode[] = []
    selectionOptions: DiagramSelectionOptions = ...
    fitViewport: FitViewport
    animations: DiagramAnimations
    grid: IGrid = ...
    guideOptions: DiagramGuideOptions = ...
    guides: DiagramLineGuide[] = []
    dragStartOnNode: boolean = false
    dragPanningWithSpace: boolean = false
    hover_listener?: DiagramPointerListener
    click_listener?: DiagramPointerListener
    double_click_listener?: DiagramPointerListener

    Accessors

    • get canOpenDiagram(): boolean

      Indicates whether open-diagram operations are available.

      Returns boolean

      True when file dialog integrations are configured.

    • get canOpenStylesheet(): boolean

      Indicates whether open-stylesheet operations are available.

      Returns boolean

      True when file dialog integrations are configured.

    • get canSaveStylesheet(): boolean

      Indicates whether there is an active stylesheet that can be saved.

      Returns boolean

      True when a current sheet can be resolved from the repository.

    • get currentSheet(): SpecSheet | undefined

      Gets the currently active sheet, if any.

      Returns SpecSheet | undefined

      The current sheet, or undefined if no sheet is active.

    • set currentSheet(value: string | SpecSheet | undefined): void

      Sets the currently active sheet, applying its styles to the diagram and emitting a sheet-loaded event.

      Parameters

      • value: string | SpecSheet | undefined

        The sheet to set as current, or undefined to clear the current sheet.

      Returns void

    • get render_mode(): RenderMode

      Gets the active render mode for this view.

      • 'view': optimized for static viewing of diagrams, with limited interactivity and simplified rendering.
      • 'editing': optimized for user interaction and mutation of the diagram.

      Returns RenderMode

    • get opacity(): number

      Gets the opacity of the first selected node, or the current default if nothing is selected. Returns a value in the range [0, 100].

      Returns number

    • set opacity(value: number): void

      Sets the default opacity and applies it to the current selection.

      Parameters

      • value: number

        Opacity value in the range [0, 1].

      Returns void

    • get lineDash(): string | number[]

      Gets the current default line dash pattern for borders and connections.

      Returns string | number[]

    • set lineDash(value: string | number[]): void

      Sets the default line dash and applies it to the current selection.

      Parameters

      • value: string | number[]

        Line dash value.

      Returns void

    • get nodeText(): string | undefined

      Gets the default node text for newly created text-capable nodes.

      Returns string | undefined

    • set nodeText(value: string | undefined): void

      Sets the default node text for newly created text-capable nodes.

      Parameters

      • value: string | undefined

        Text value.

      Returns void

    • get imageId(): string

      Gets the image asset id shared by the current selection. Returns the common id when all selected nodes agree, or an empty string when the selection is empty, no node has an image, or nodes have different ids.

      Returns string

    • get canUndo(): boolean

      Returns true if there are actions in the undo stack that can be undone, false otherwise.

      Returns boolean

      A boolean indicating whether an undo operation can be performed.

    • get canRedo(): boolean

      Returns true if there are actions in the redo stack that can be redone, false otherwise.

      Returns boolean

      A boolean indicating whether a redo operation can be performed.

    • get image_assets(): Record<string, string>

      Returns Record<string, string>

    • get assetStore(): AssetStore

      The diagram's asset store, for registering and resolving image/SVG asset sources.

      Returns AssetStore

      The AssetStore instance associated with the diagram.

    • get metadata(): Record<string, any>

      Gets the metadata object for the diagram. If no metadata exists, an empty object is returned.

      Returns Record<string, any>

      The metadata object for the diagram.

    • set metadata(data: Record<string, any>): void

      Sets the metadata object for the diagram. If a null or undefined value is provided, the metadata is cleared.

      Parameters

      • data: Record<string, any>

        The metadata object to set for the diagram.

      Returns void

    Methods

    • Clears the current diagram after resolving any unsaved-change prompt. A prompt will be shown if the diagram has unsaved changes.

      Returns Promise<boolean>

      True when a new empty diagram was created; otherwise false.

    • Loads a diagram from a live diagram instance, a serialized JSON string, or a deserialized payload. A prompt will be shown if the diagram has unsaved changes.

      Parameters

      Returns Promise<boolean>

      True when the source was loaded; otherwise false when loading was canceled.

    • Saves image diagram.

      Parameters

      • options: { fileName?: string; mimeType?: string; quality?: number; padding?: number } = {}

        Optional creation options.

      Returns Promise<string | undefined>

      The resolved value, or undefined when it cannot be resolved.

    • Sets the currently active sheet, applying its styles to the diagram and emitting a sheet-loaded event.

      Parameters

      • value: string | SpecSheet | undefined

        The sheet to set as current, or undefined to clear the current sheet.

      Returns void

    • Forks the current sheet to a diagram-scoped custom id on first mutation. When no sheet is active at all, creates a fresh empty custom sheet and emits sheet-loaded.

      Returns void

    • Publishes the current sheet under a new id/name so it can be reused by other diagrams. The current diagram is switched to the published sheet.

      Parameters

      • sheet_id: string
      • name: string
      • Optionaldescription: string

      Returns SpecSheet

    • Propagates direct style edits into all nodes that share classes with the originating nodes.

      Parameters

      • sources: INode[]

        Selected nodes that originated the style change.

      • change: Partial<NodeStyle>

        Style delta to merge into class definitions.

      Returns void

    • Sets the current tool for the diagram. The default tool is 'select', which allows for selection and manipulation of existing nodes.

      Parameters

      • tool: string

        The name of the tool to set.

      • Optionaloptions: any

        Optional parameters for the tool.

      Returns Promise<void>

      A promise that resolves when the tool is set.

    • Begins a tool drag-create gesture and lets the canvas own pointer capture.

      Parameters

      • draft: Partial<INode>

        Partial node data to initialize the draft.

      • OptionalpointerId: number

        Optional pointer id for capture ownership transfer.

      Returns void

    • Creates a draft node for the current tool, if applicable. This is used for tools that create new nodes.

      Parameters

      • draft: Partial<INode>

        Partial node data to initialize the draft.

      Returns void

    • Sets the stroke color for the selected nodes and new nodes to be created.

      Parameters

      • color: string

        The stroke color to set.

      Returns void

    • Sets the fill color for the selected nodes and new nodes to be created.

      Parameters

      • color: string

        The fill color to set.

      Returns void

    • Sets or clears the image asset id on all selected nodes.

      Parameters

      • id: string | undefined

        Asset id to apply, or undefined / empty string to clear the image.

      Returns void

    • Sets the opacity for the selected nodes and the default for new nodes.

      Parameters

      • value: number

        Opacity in the range [0, 100].

      Returns void

    • Sets the line width for the selected nodes and new nodes to be created.

      Parameters

      • width: number

        The line width to set.

      Returns void

    • Sets the line dash pattern for the selected nodes and new nodes to be created.

      Parameters

      • dash: string | number[]

        The line dash pattern to set, either as a string or an array of numbers.

      Returns void

    • Sets the text for the selected nodes and new nodes to be created.

      Parameters

      • text: string

        The text to set.

      Returns void

    • Applies a flat patch record to all currently selected nodes, adding an undo step. Intended for use by inspector-style editors that produce a key-value diff. Also mirrors patch values into diagram default settings where applicable.

      Parameters

      • patch: Record<string, unknown>

        The key-value changes to apply.

      • sourceKey: string

        The originating property key, used for the styleChanged event.

      Returns void

    • Applies a flat patch record to the diagram itself, adding an undo step. Intended for inspector-style editors that produce diagram.* key-value diffs.

      Parameters

      • patch: Record<string, unknown>

        The key-value changes to apply.

      • sourceKey: string

        The originating property key, used for the styleChanged event.

      Returns void

    • List colors used in this diagram in descending order of their usage frequency.

      Returns string[]

      Colors as an array of strings.

    • Take a snapshot of the current diagram state and push it onto the undo stack. This should be called before making any changes to the diagram that should be undoable. After calling this method, the canUndo property will return true, indicating that there is now an action in the undo stack that can be undone.

      Returns void

    • Redoes the last undone action on the diagram, restoring it to the state before the undo was performed.

      Returns Promise<void>

    • Copies the selected nodes to the clipboard in JSON format. The copied data includes all properties of the nodes, allowing for accurate reconstruction when pasted. After copying, the canPaste flag is set to true, indicating that there is data available in the clipboard that can be pasted into the diagram.

      Parameters

      Returns void

    • Adds a new layer to the diagram at the specified position.

      Parameters

      • id: string

        The layer ID.

      • place: "top" | "bottom" = 'top'

        The position to add the new layer ('top' or 'bottom').

      Returns void

    • Hides the specified layer, making it invisible in the diagram. Hidden layers are not rendered and their nodes cannot be interacted with until they are shown again.

      Parameters

      • layer: ILayer

        The layer to hide.

      Returns void

    • Clones the currently selected nodes in the diagram. The cloned nodes are offset by 24 pixels in both x and y directions. // TODO: Support groups cloning

      Returns Promise<void>

    • Changes the type of the specified node.

      Parameters

      • node: string | INode

        The node or node ID to change the type of.

      • type: string

        The new type to assign to the node.

      Returns void

    • Aligns the currently selected nodes in the specified direction.

      Parameters

      • dir: "left" | "center" | "right" | "top" | "middle" | "bottom"

        The direction to align the nodes ('left', 'right', 'center', 'top', 'bottom', 'middle').

      Returns void

    • Spreads the currently selected nodes evenly in the specified direction.

      Parameters

      • dir: "row" | "column"

        The direction to spread the nodes ('row' or 'column').

      Returns void

    • Renders the selection markers for the specified node or all selected nodes if no node is specified.

      Parameters

      • Optionalnode: INode

        The node to render selection markers for. If not provided, all selected nodes are rendered.

      • show: AnchorScope = 'selection_handles'

        The scope of anchors to show ('selection_handles' or 'connection_handles'). Defaults to 'selection_handles'.

      Returns void

    • Respond to pointer down events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.

      Parameters

      • event: PointerEvent

        The pointer event.

      Returns void

    • Respond to pointer move events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.

      Parameters

      • event: PointerEvent

        The pointer event.

      Returns void

    • Respond to pointer up events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.

      Parameters

      • event: PointerEvent

        The pointer event.

      Returns void

    • Respond to key down events, handling deletion, copying, pasting, cutting, undoing, and exiting drawing mode based on the event properties and current selection state.

      Parameters

      • event: KeyboardEvent

        The keyboard event.

      Returns void

    • Zooms the canvas to a given level. Zooming to above 1 zooms in, below 1 zooms out. The zoom is centered on the given center point, or the center of the canvas if no center is provided.

      Parameters

      • zoom: number

        The zoom value.

      • OptionalcenterX: number

        The center x value.

      • OptionalcenterY: number

        The center y value.

      • mode: AnimationMode = 'instant'

        The animation mode for the zoom operation.

      Returns void

    • Moves selected nodes with undo.

      Parameters

      • byX: number

        Horizontal delta value.

      • byY: number

        Vertical delta value.

      Returns void

    • Applies a selected image file to the current node selection.

      Parameters

      • Optionalevent: any

        File input event or undefined to trigger picker flow.

      Returns void

    • Applies an image source to all currently selected nodes.

      Parameters

      • imageSrc: string

        The image source URL or data URL.

      • mode: ImageMode = 'contain'

        The image display mode, either 'contain' or 'cover'. Defaults to 'contain'.

      • OptionalimageId: string

        Optional image identifier.

      Returns void

    • Applies SVG markup or source URL/data URL to all currently selected nodes.

      Parameters

      • svgOrSrc: string

        The SVG markup string or source URL/data URL.

      • mode: ImageMode = 'contain'

        The image display mode, either 'contain' or 'cover'. Defaults to 'contain'.

      • OptionalimageId: string

        Optional image identifier.

      Returns void

    • Clears image source configuration from all currently selected nodes. This does not remove images from the asset store.

      Returns void

    • Retrieves a node by its ID.

      Parameters

      • id: string

        The ID of the node to retrieve.

      Returns INode | undefined

      The node with the specified ID, or undefined if not found.

    • Returns a group by its ID.

      Parameters

      • id: string

        The ID of the group to return.

      Returns IGroup | undefined

      The group with the specified ID, or undefined if not found.

    • Retrieves a layer by its ID.

      Parameters

      • id: string

        The ID of the layer to retrieve.

      Returns ILayer | undefined

      The layer with the specified ID, or undefined if not found.

    • Add or remove a node from a group. If the groupId is undefined, the node is removed from any group it belongs to. A node can only belong to one group at a time. If the node is already in a different group, it will be removed from that group before being added to the new group.

      Parameters

      • node: string | INode

        The node or node ID to add to the group.

      • groupId: string | undefined

        The ID of the group to add the node to, or undefined to remove the node from any group.

      Returns void

    • Add or remove a node from a layer. If the layerId is undefined, the node is removed from any layer it belongs to. A node can only belong to one layer at a time. If the node is already in a different layer, it will be removed from that layer before being added to the new layer.

      Parameters

      • node: string | INode

        The node or node ID to add to the layer.

      • layerId: string | undefined

        The ID of the layer to add the node to, or undefined to remove the node from any layer.

      Returns void

    • Deletes a group from the diagram. Effectively ungrouping nodes.

      Parameters

      • groupId: string

        The ID of the group to delete.

      Returns void

    • Gets the value of a specific metadata key for the diagram.

      Parameters

      • Optionalkey: string

        The key of the metadata to retrieve.

      Returns any

      The value of the specified metadata key, or undefined if the key does not exist.

    • Sets the value of a specific metadata key for the diagram.

      Parameters

      • key: string

        The key of the metadata to set.

      • value: any

        The value to set for the specified metadata key.

      Returns void

    • Deletes a specific metadata key from the diagram.

      Parameters

      • Optionalkey: string

        The key of the metadata to delete. If not provided, all metadata for the diagram is deleted.

      Returns void

    • Gets the value of a specific metadata key for a node.

      Parameters

      • node: string | INode

        The node or node ID to retrieve metadata from.

      • key: string

        The key of the metadata to retrieve.

      Returns any

      The value of the specified metadata key, or undefined if the key does not exist.

    • Sets the value of a specific metadata key for a node.

      Parameters

      • node: string | INode

        The node or node ID to set metadata for.

      • key: string

        The key of the metadata to set.

      • value: any

        The value to set for the specified metadata key.

      Returns void

    • Deletes a specific metadata key from a node.

      Parameters

      • node: string | INode

        The node or node ID to delete metadata from.

      • Optionalkey: string

        The key of the metadata to delete. If not provided, all metadata for the node is deleted.

      Returns void

    • Exports the current diagram in a native format. Supported formats are JSON text, UTF-8 bytes, and Blob (browser runtime).

      Parameters

      • format: DiagramExportFormat = 'json'

        The format to export the diagram in ('json', 'bytes', or 'blob'). (defaults to 'json')

      • pretty: boolean = true

        Whether to pretty-print the output (applicable to JSON format). (defaults to true)

      • serializer: ISerializer = jsonSerializer

        The serializer to use for exporting the diagram. (optional)

      Returns string | Blob | Uint8Array<ArrayBufferLike>

      The exported diagram data in the specified format.

    • Saves the current diagram directly from the model. In Node.js this writes to the file system; in browsers this triggers a file download.

      Parameters

      • options: DiagramSaveOptions = {}

        The options for saving the diagram, including path, file name, serializer, pretty-printing, and MIME type.

      Returns Promise<string>

      A promise that resolves to the path or download URL of the saved file.

    • Creates a new layer with the specified properties.

      Parameters

      • id: string

        The ID of the layer.

      • name: string = id

        The name of the layer.

      • visible: boolean = true

        Whether the layer is visible.

      • nodes: string[] = []

        The nodes within the layer.

      Returns ILayer

      The created layer.

    • Selects a node.

      Parameters

      • node: INode

        The node to select.

      • option: "in_group" | "isolated"

        Determines whether to select related nodes or isolate the selection.

      Returns void

    • Deselects a node.

      Parameters

      • node: INode

        The node to deselect.

      • option: "in_group" | "isolated"

        Determines whether to deselect related nodes or isolate the deselection.

      Returns void

    • Selects all nodes in the diagram. Honors the enable_multi selection option to determine whether multiple nodes can be selected at once.

      Returns void

    • Fits the diagram content to the width of the viewport, with optional padding and alignment.

      Parameters

      • Optionaloptions: { padding?: number; alignment?: FitAlign }

        Optional configuration for padding and alignment.

      Returns void

    • Fits the diagram content to the viewport, with optional padding and alignment.

      Parameters

      • Optionaloptions: { padding?: number; alignment?: FitAlign }

        Optional configuration for padding and alignment.

      Returns void

    • Zoom the diagram by multiplying current zoom by a factor, optionally around a canvas-space center point.

      Parameters

      • factor: number

        The zoom multiplier. Values greater than 1 zoom in and values between 0 and 1 zoom out.

      • OptionalcenterX: number

        The x coordinate (canvas space) to keep visually stable during zoom.

      • OptionalcenterY: number

        The y coordinate (canvas space) to keep visually stable during zoom.

      • mode: AnimationMode = 'instant'

        The animation mode for the zoom operation.

      Returns void

    • Updates the grid settings for the diagram and re-renders it to reflect the changes.

      Parameters

      • json: Partial<IGrid>

        A partial object containing the grid properties to update. Only the provided properties will be updated, while the others will remain unchanged.

      Returns void

    • Exports the full visible diagram content as an image blob. This export is uncropped and ignores the current viewport pan/zoom. The exported image will be sized to fit the bounds of all visible nodes, plus optional padding.

      Parameters

      • options: ImageWriteOptions = {}

        The options for writing the image, including padding and MIME type.

      • serializer: ImageSerializer = ...

        The serializer to use for writing the image.

      Returns Promise<Blob>

      A promise that resolves to a Blob containing the exported image.

    • Calculate the bounding rectangle that encompasses all visible nodes in the diagram.

      Returns IRect | undefined

      The bounding rectangle of all visible nodes, or undefined if there are no visible nodes.

    • Parameters

      • target: { zoom?: number; pan?: { x: number; y: number } }
      • Optionalfunc: () => void

      Returns void

    • Returns the first node found at the specified coordinates, if any.

      Parameters

      • x: number

        The x-coordinate to test.

      • y: number

        The y-coordinate to test.

      Returns INode | undefined

    • Returns all nodes at the specified coordinates. Nodes are returned in order, so the topmost node is first in the array.

      Parameters

      • x: number

        The x-coordinate to test.

      • y: number

        The y-coordinate to test.

      Returns INode[]

      An ordered array of nodes at the specified coordinates.

    • Returns the handle at the specified coordinates, if any.

      Parameters

      • x: number

        The x-coordinate to test.

      • y: number

        The y-coordinate to test.

      • Optionaltarget: INode

        The target node to test, if any.

      Returns NodeHandle

      The handle at the specified coordinates, or NodeHandle.NONE if none is found.

    • Returns the connection-enabled handle at the specified coordinates, if any. Each node type can define its own connection handles, which may differ from the standard resize/move handles.

      Parameters

      • x: number

        The x-coordinate to test.

      • y: number

        The y-coordinate to test.

      • Optionaltarget: INode

        The target node to test, if any.

      Returns IHandlePoint

      The connection-enabled handle at the specified coordinates, or { handle: NodeHandle.NONE, point: { x: 0, y: 0 } } if none is found.

    • Respond to wheel events on the canvas, handling zooming when the Ctrl or Meta key is pressed and panning otherwise.

      Parameters

      • event: WheelEvent

        The wheel event.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods
    destroyclearnewDiagramloadDiagramopenDiagramsaveDiagramsaveImageDiagramloadStylesheetopenStylesheetsaveStylesheetsetCurrentSheetensureCustomSheetpublishCurrentSheetAsapplyClassChangesetToolbeginToolDragCreatecreateDragDraftsetStrokeColorsetFillColorsetBackgroundColorsetBackgroundsetImageIdsetOpacitysetLineWidthsetLineDashsetArrowAtsetArrowTypesetStrokeStylesetFillStylesetShadowStylesetTextStylesetNodeTextapplyNodePatchapplyDiagramPatchgetFrequentColorsisModifiedaddUndoundoredocopyStylespasteStylescutSelectedcopySelectedpasteNodessetCurrentLayeraddLayermoveToNewLayerselectLayershowLayerhideLayerdeleteLayerbringSelectionForwardsendSelectionBackwardbringSelectionToFrontsendSelectionToBackbringNodeForwardsendNodeBackwardbringNodeToFrontsendNodeToBackbringLayerForwardsendLayerBackwardbringLayerToFrontsendLayerToBackdeleteSelectedcloneSelectedcloneNodecloneNodesgroupSelectedungroupSelectedchangeNodeTypealignSelectedspreadSelectedrenderrenderSelectionrenderConnectionHandlespointerDownpointerMovepointerUpdblClicksetKeyboardFlagkeydownkeyupcontextmenuinitrenderPreviewensureCurrentLayerexitDrawingzoomTopanBymoveSelectedWithUndopickNodeImagesetNodeImagesetSelectedNodeImageSourcesetSelectedNodeSvgSourceclearSelectedNodeImageSourceshowActionsnodegrouplayerupsertGroupsetNodeGroupnodeGroupgroupOwnersetNodeLayerdeleteGroupresolveNodeImageSourceclearImageAssetsgetMetasetMetadeleteMetagetNodeMetasetNodeMetadeleteNodeMetareadwriteexportsaveapplyNodeImageSourcelayerNodesserializeNodeserializeGroupcreateLayerhandlePointerDownhandlePointerMovehandlePointerUphandlePointerLeavehandleDblClickhandleWheelhandleKeyDownhandleKeyUphandleContextMenugetCachegetCoordinatesgetKeyboardsetKeyboardgetCanvasselectNodeselectionisSelectedselectdeselectclearSelectionselectAllsetSelectiontoggleSelectionsetViewportfitHorizontallyfitToNodeszoomByupsertNodeupsertLayerdeleteNodesetNodeImageSourcesetNodeSvgSourceclearNodeImageSourcerenderGuidesupdateGridupdateGuidessetGuidesclearGuidesclearGuidelinesresetViewexportImagesaveImagegetNodeBoundsstartAnimationstopAnimationstopAnimationsanimateLineDashanimateNodeShutteranimateViewportonEventclearEventhitNodehitNodeshitHandlehitConnectionHandlegetCursoremitKeyboardModeHintwheelshouldIgnoreGlobalKeydown