A component for displaying and editing an IGraph.
Remarks
This is a specialized CanvasComponent that can hold, display, and edit an IGraph instance. It provides access to the graph and selection instances.
This class suppports the following Commands.
- FIT_GRAPH_BOUNDS that invokes fitGraphBounds
- SET_CURRENT_ITEM for setting the currentItem
- ZOOM_TO_CURRENT_ITEM for adjusting the viewport to the currentItem
The ZOOM_TO_CURRENT_ITEM is enabled, if navigationCommandsEnabled is true.
By default, this class sets a plain GraphViewerInputMode as the inputMode to enable basic exploratory interaction with the graph. To enable interactive editing, use a GraphEditorInputMode, instead.
Related Reading in the Developer's Guide
Related Programming Samples
- Graph Viewer
- Displays sample graphs from various application domains.
- Graph Editor
- Shows the graph editing features of the graph component.
- 01 Creating the View
- Introduces the GraphComponent class, the central UI element for working with graphs.
Type Details
- yFiles module
- view
See Also
Constructors
Creates a new instance of the GraphComponent in the given div element.
Remarks
If the graph and selection properties are not populated externally, they will be initialized with default values upon first access. Thus, this instance can be used right away without any further initialization.
All child nodes of the div element are added to the overlayPanel.
Parameters
A map of options to pass to the method.
- htmlElement - HTMLElement
- The existing
divelement to use for rendering the canvas into. All its child nodes are added to the overlayPanel - currentItem - IModelItem
- The currently focused item. This option sets the currentItem property on the created object.
- selectionIndicatorManager - SelectionIndicatorManager<IModelItem>
- The selectionIndicatorManager property. This option either sets the value directly or recursively sets properties to the instance of the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
- The HighlightIndicatorManager<T> which is responsible for rendering the highlights. This option either sets the value directly or recursively sets properties to the instance of the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
- The FocusIndicatorManager<T> that manages display of the focus indicator for keyboard operations. This option either sets the value directly or recursively sets properties to the instance of the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
- The graphModelManager property. This option either sets the value directly or recursively sets properties to the instance of the graphModelManager property on the created object.
- graph - IGraph
- The graph that is displayed in this control. This option either sets the value directly or recursively sets properties to the instance of the graph property on the created object.
- selection - IGraphSelection
- The selection model that stores the selection state for the visualization. This option sets the selection property on the created object.
- highlights - IObservableCollection<IModelItem>
- The collection model that stores the highlight state for the visualization. This option sets the highlights property on the created object.
- clipboard - GraphClipboard
- The GraphClipboard associated with this control. This option either sets the value directly or recursively sets properties to the instance of the clipboard property on the created object.
- viewportLimiter - ViewportLimiter
- The ViewportLimiter instance that can be used to limit the explorable region. This option either sets the value directly or recursively sets properties to the instance of the viewportLimiter property on the created object.
- mouseWheelBehavior - MouseWheelBehaviors
- The action to perform when turning the mouse wheel. This option sets the mouseWheelBehavior property on the created object.
- centerZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether zooming with the mouse wheel should zoom to the center of the view instead of the mouse location. This option sets the centerZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether turning the mouse wheel should perform zooming instead of scrolling. This option sets the mouseWheelZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- horizontalScrollEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether the mouse wheel should scroll in horizontal instead of vertical direction. This option sets the horizontalScrollEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- verticalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the vertical scrollbar. This option sets the verticalScrollBarPolicy property on the created object.
- horizontalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the horizontal scrollbar. This option sets the horizontalScrollBarPolicy property on the created object.
- contentBounds - Rect
- The rectangle in world coordinates that holds the contents. This option sets the contentBounds property on the created object.
- contentMargins - Insets
- The margins in view coordinates that should be used by the fitContent operation or zoom commands which zoom to a given rectangle. This option sets the contentMargins property on the created object.
- animatedViewportChanges - ViewportChanges
- A combination of viewport changes that should be performed in an animated fashion. This option sets the animatedViewportChanges property on the created object.
- inputMode - IInputMode
- The single IInputMode instance that shall be installed for this canvas. This option sets the inputMode property on the created object.
- hitTestRadius - number
- The radius of the area around the pointer in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadius property on the created object.
- limitFitContentZoom - boolean
- A value indicating whether the maximum zoom level for fitContent and FIT_CONTENT is limited to 1. This option sets the limitFitContentZoom property on the created object.
- zoom - number
- The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- maximumZoom - number
- The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- minimumZoom - number
- The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- viewPoint - Point
- The current viewpoint. This option sets the viewPoint property on the created object.
- navigationCommandsEnabled - boolean
- A value indicating whether navigation related command bindings are enabled. This option sets the navigationCommandsEnabled property on the created object.
- center - Point
- The world coordinate at the center of the control. This option sets the center property on the created object.
- autoScrollOnBounds - boolean
- A property that causes the control to automatically pan the view when the mouse is dragged outside the bounds of the control. This option sets the autoScrollOnBounds property on the created object.
- visualCaching - VisualCachingPolicy
- The policy for caching Visuals which are temporarily removed from the visual tree. This option sets the visualCaching property on the created object.
- doubleClickTime - TimeSpan
- The value of the double-click time. This option sets the doubleClickTime property on the created object.
- longPressTime - TimeSpan
- The duration a pointing device must be held down without moving before the pointer-long-press event is raised. This option sets the longPressTime property on the created object.
- longRestTime - TimeSpan
- The duration a pointing device must not move before the pointer-long-rest event is raised. This option sets the longRestTime property on the created object.
- mouseWheelZoomFactor - number
- The factor by which the zoom level changes when the mouse wheel is turned. This option sets the mouseWheelZoomFactor property on the created object.
- mouseWheelScrollFactor - number
- A factor that controls how fast the viewport scrolls when the mouse wheel is turned. This option sets the mouseWheelScrollFactor property on the created object.
- autoScrollPadding - Insets
- The distance from the edge of the viewport, in which auto-scrolling should happen. This option sets the autoScrollPadding property on the created object.
- inputModeContext - IInputModeContext
- The IInputModeContext instance that is used by the inputMode instance. This option sets the inputModeContext property on the created object.
- quantizeInputCoordinates - boolean
- A value indicating whether input coordinates (mouse and touch) should be quantized depending on the zoom level to give nicer values. This option sets the quantizeInputCoordinates property on the created object.
- projection - Matrix
- A Matrix that is applied to the viewport. This option sets the projection property on the created object.
- captureAllKeyboardInput - boolean
- A value indicating whether all keyboard input is captured. This option sets the captureAllKeyboardInput property on the created object.
- captureAllPointerInput - boolean
- A value indicating whether all pointer input is captured. This option sets the captureAllPointerInput property on the created object.
- mouseCapture - boolean
- A value that specifies whether this control receives mouse input after the mouse is dragged out of its bounding area. This option sets the mouseCapture property on the created object.
- devicePixelRatio - number
- The scaling factor for HTML canvas and WebGL rendering. This option sets the devicePixelRatio property on the created object.
- useGlassPane - boolean
- Whether to add a 'glass pane' overlay to the CanvasComponent that acts as the source for all mouse and touch events. This option sets the useGlassPane property on the created object.
- shapeRendering - ShapeRenderingType
- The shape-rendering type for this visual and its children. This option sets the shapeRendering property on the created object.
- imageRendering - ImageRenderingType
- The image-rendering type for this visual and its children. This option sets the imageRendering property on the created object.
Throws
- Exception({ name: 'ArgumentError' })
- if the
htmlElementelement is already used by another component.
Creates a new instance of the GraphComponent.
Remarks
div element that needs to be manually added to the DOM.Parameters
A map of options to pass to the method.
- currentItem - IModelItem
- The currently focused item. This option sets the currentItem property on the created object.
- selectionIndicatorManager - SelectionIndicatorManager<IModelItem>
- The selectionIndicatorManager property. This option either sets the value directly or recursively sets properties to the instance of the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
- The HighlightIndicatorManager<T> which is responsible for rendering the highlights. This option either sets the value directly or recursively sets properties to the instance of the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
- The FocusIndicatorManager<T> that manages display of the focus indicator for keyboard operations. This option either sets the value directly or recursively sets properties to the instance of the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
- The graphModelManager property. This option either sets the value directly or recursively sets properties to the instance of the graphModelManager property on the created object.
- graph - IGraph
- The graph that is displayed in this control. This option either sets the value directly or recursively sets properties to the instance of the graph property on the created object.
- selection - IGraphSelection
- The selection model that stores the selection state for the visualization. This option sets the selection property on the created object.
- highlights - IObservableCollection<IModelItem>
- The collection model that stores the highlight state for the visualization. This option sets the highlights property on the created object.
- clipboard - GraphClipboard
- The GraphClipboard associated with this control. This option either sets the value directly or recursively sets properties to the instance of the clipboard property on the created object.
- viewportLimiter - ViewportLimiter
- The ViewportLimiter instance that can be used to limit the explorable region. This option either sets the value directly or recursively sets properties to the instance of the viewportLimiter property on the created object.
- mouseWheelBehavior - MouseWheelBehaviors
- The action to perform when turning the mouse wheel. This option sets the mouseWheelBehavior property on the created object.
- centerZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether zooming with the mouse wheel should zoom to the center of the view instead of the mouse location. This option sets the centerZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether turning the mouse wheel should perform zooming instead of scrolling. This option sets the mouseWheelZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- horizontalScrollEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether the mouse wheel should scroll in horizontal instead of vertical direction. This option sets the horizontalScrollEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- verticalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the vertical scrollbar. This option sets the verticalScrollBarPolicy property on the created object.
- horizontalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the horizontal scrollbar. This option sets the horizontalScrollBarPolicy property on the created object.
- contentBounds - Rect
- The rectangle in world coordinates that holds the contents. This option sets the contentBounds property on the created object.
- contentMargins - Insets
- The margins in view coordinates that should be used by the fitContent operation or zoom commands which zoom to a given rectangle. This option sets the contentMargins property on the created object.
- animatedViewportChanges - ViewportChanges
- A combination of viewport changes that should be performed in an animated fashion. This option sets the animatedViewportChanges property on the created object.
- inputMode - IInputMode
- The single IInputMode instance that shall be installed for this canvas. This option sets the inputMode property on the created object.
- hitTestRadius - number
- The radius of the area around the pointer in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadius property on the created object.
- limitFitContentZoom - boolean
- A value indicating whether the maximum zoom level for fitContent and FIT_CONTENT is limited to 1. This option sets the limitFitContentZoom property on the created object.
- zoom - number
- The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- maximumZoom - number
- The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- minimumZoom - number
- The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- viewPoint - Point
- The current viewpoint. This option sets the viewPoint property on the created object.
- navigationCommandsEnabled - boolean
- A value indicating whether navigation related command bindings are enabled. This option sets the navigationCommandsEnabled property on the created object.
- center - Point
- The world coordinate at the center of the control. This option sets the center property on the created object.
- autoScrollOnBounds - boolean
- A property that causes the control to automatically pan the view when the mouse is dragged outside the bounds of the control. This option sets the autoScrollOnBounds property on the created object.
- visualCaching - VisualCachingPolicy
- The policy for caching Visuals which are temporarily removed from the visual tree. This option sets the visualCaching property on the created object.
- doubleClickTime - TimeSpan
- The value of the double-click time. This option sets the doubleClickTime property on the created object.
- longPressTime - TimeSpan
- The duration a pointing device must be held down without moving before the pointer-long-press event is raised. This option sets the longPressTime property on the created object.
- longRestTime - TimeSpan
- The duration a pointing device must not move before the pointer-long-rest event is raised. This option sets the longRestTime property on the created object.
- mouseWheelZoomFactor - number
- The factor by which the zoom level changes when the mouse wheel is turned. This option sets the mouseWheelZoomFactor property on the created object.
- mouseWheelScrollFactor - number
- A factor that controls how fast the viewport scrolls when the mouse wheel is turned. This option sets the mouseWheelScrollFactor property on the created object.
- autoScrollPadding - Insets
- The distance from the edge of the viewport, in which auto-scrolling should happen. This option sets the autoScrollPadding property on the created object.
- inputModeContext - IInputModeContext
- The IInputModeContext instance that is used by the inputMode instance. This option sets the inputModeContext property on the created object.
- quantizeInputCoordinates - boolean
- A value indicating whether input coordinates (mouse and touch) should be quantized depending on the zoom level to give nicer values. This option sets the quantizeInputCoordinates property on the created object.
- projection - Matrix
- A Matrix that is applied to the viewport. This option sets the projection property on the created object.
- captureAllKeyboardInput - boolean
- A value indicating whether all keyboard input is captured. This option sets the captureAllKeyboardInput property on the created object.
- captureAllPointerInput - boolean
- A value indicating whether all pointer input is captured. This option sets the captureAllPointerInput property on the created object.
- mouseCapture - boolean
- A value that specifies whether this control receives mouse input after the mouse is dragged out of its bounding area. This option sets the mouseCapture property on the created object.
- devicePixelRatio - number
- The scaling factor for HTML canvas and WebGL rendering. This option sets the devicePixelRatio property on the created object.
- useGlassPane - boolean
- Whether to add a 'glass pane' overlay to the CanvasComponent that acts as the source for all mouse and touch events. This option sets the useGlassPane property on the created object.
- shapeRendering - ShapeRenderingType
- The shape-rendering type for this visual and its children. This option sets the shapeRendering property on the created object.
- imageRendering - ImageRenderingType
- The image-rendering type for this visual and its children. This option sets the imageRendering property on the created object.
Creates a new instance of GraphComponent using the div element that is specified by the selector.
Remarks
If the graph and selection properties are not populated externally they will be initialized with default values upon first access. Thus this instance can be used right away without any further initialization.
All child nodes of the div element are added to the overlayPanel.
Parameters
A map of options to pass to the method.
- selector - string
- The CSS selector or id for an existing
divelement. All child nodes of this element are added to the overlayPanel. - currentItem - IModelItem
- The currently focused item. This option sets the currentItem property on the created object.
- selectionIndicatorManager - SelectionIndicatorManager<IModelItem>
- The selectionIndicatorManager property. This option either sets the value directly or recursively sets properties to the instance of the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
- The HighlightIndicatorManager<T> which is responsible for rendering the highlights. This option either sets the value directly or recursively sets properties to the instance of the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
- The FocusIndicatorManager<T> that manages display of the focus indicator for keyboard operations. This option either sets the value directly or recursively sets properties to the instance of the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
- The graphModelManager property. This option either sets the value directly or recursively sets properties to the instance of the graphModelManager property on the created object.
- graph - IGraph
- The graph that is displayed in this control. This option either sets the value directly or recursively sets properties to the instance of the graph property on the created object.
- selection - IGraphSelection
- The selection model that stores the selection state for the visualization. This option sets the selection property on the created object.
- highlights - IObservableCollection<IModelItem>
- The collection model that stores the highlight state for the visualization. This option sets the highlights property on the created object.
- clipboard - GraphClipboard
- The GraphClipboard associated with this control. This option either sets the value directly or recursively sets properties to the instance of the clipboard property on the created object.
- viewportLimiter - ViewportLimiter
- The ViewportLimiter instance that can be used to limit the explorable region. This option either sets the value directly or recursively sets properties to the instance of the viewportLimiter property on the created object.
- mouseWheelBehavior - MouseWheelBehaviors
- The action to perform when turning the mouse wheel. This option sets the mouseWheelBehavior property on the created object.
- centerZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether zooming with the mouse wheel should zoom to the center of the view instead of the mouse location. This option sets the centerZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether turning the mouse wheel should perform zooming instead of scrolling. This option sets the mouseWheelZoomEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- horizontalScrollEventRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that determines whether the mouse wheel should scroll in horizontal instead of vertical direction. This option sets the horizontalScrollEventRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(EventArgs, unknown):boolean
- An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(evt: EventArgs, eventSource: unknown) : booleanA callback that recognizes events.Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
- verticalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the vertical scrollbar. This option sets the verticalScrollBarPolicy property on the created object.
- horizontalScrollBarPolicy - ScrollBarVisibility
- The visibility policy for the horizontal scrollbar. This option sets the horizontalScrollBarPolicy property on the created object.
- contentBounds - Rect
- The rectangle in world coordinates that holds the contents. This option sets the contentBounds property on the created object.
- contentMargins - Insets
- The margins in view coordinates that should be used by the fitContent operation or zoom commands which zoom to a given rectangle. This option sets the contentMargins property on the created object.
- animatedViewportChanges - ViewportChanges
- A combination of viewport changes that should be performed in an animated fashion. This option sets the animatedViewportChanges property on the created object.
- inputMode - IInputMode
- The single IInputMode instance that shall be installed for this canvas. This option sets the inputMode property on the created object.
- hitTestRadius - number
- The radius of the area around the pointer in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadius property on the created object.
- limitFitContentZoom - boolean
- A value indicating whether the maximum zoom level for fitContent and FIT_CONTENT is limited to 1. This option sets the limitFitContentZoom property on the created object.
- zoom - number
- The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- maximumZoom - number
- The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- minimumZoom - number
- The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- viewPoint - Point
- The current viewpoint. This option sets the viewPoint property on the created object.
- navigationCommandsEnabled - boolean
- A value indicating whether navigation related command bindings are enabled. This option sets the navigationCommandsEnabled property on the created object.
- center - Point
- The world coordinate at the center of the control. This option sets the center property on the created object.
- autoScrollOnBounds - boolean
- A property that causes the control to automatically pan the view when the mouse is dragged outside the bounds of the control. This option sets the autoScrollOnBounds property on the created object.
- visualCaching - VisualCachingPolicy
- The policy for caching Visuals which are temporarily removed from the visual tree. This option sets the visualCaching property on the created object.
- doubleClickTime - TimeSpan
- The value of the double-click time. This option sets the doubleClickTime property on the created object.
- longPressTime - TimeSpan
- The duration a pointing device must be held down without moving before the pointer-long-press event is raised. This option sets the longPressTime property on the created object.
- longRestTime - TimeSpan
- The duration a pointing device must not move before the pointer-long-rest event is raised. This option sets the longRestTime property on the created object.
- mouseWheelZoomFactor - number
- The factor by which the zoom level changes when the mouse wheel is turned. This option sets the mouseWheelZoomFactor property on the created object.
- mouseWheelScrollFactor - number
- A factor that controls how fast the viewport scrolls when the mouse wheel is turned. This option sets the mouseWheelScrollFactor property on the created object.
- autoScrollPadding - Insets
- The distance from the edge of the viewport, in which auto-scrolling should happen. This option sets the autoScrollPadding property on the created object.
- inputModeContext - IInputModeContext
- The IInputModeContext instance that is used by the inputMode instance. This option sets the inputModeContext property on the created object.
- quantizeInputCoordinates - boolean
- A value indicating whether input coordinates (mouse and touch) should be quantized depending on the zoom level to give nicer values. This option sets the quantizeInputCoordinates property on the created object.
- projection - Matrix
- A Matrix that is applied to the viewport. This option sets the projection property on the created object.
- captureAllKeyboardInput - boolean
- A value indicating whether all keyboard input is captured. This option sets the captureAllKeyboardInput property on the created object.
- captureAllPointerInput - boolean
- A value indicating whether all pointer input is captured. This option sets the captureAllPointerInput property on the created object.
- mouseCapture - boolean
- A value that specifies whether this control receives mouse input after the mouse is dragged out of its bounding area. This option sets the mouseCapture property on the created object.
- devicePixelRatio - number
- The scaling factor for HTML canvas and WebGL rendering. This option sets the devicePixelRatio property on the created object.
- useGlassPane - boolean
- Whether to add a 'glass pane' overlay to the CanvasComponent that acts as the source for all mouse and touch events. This option sets the useGlassPane property on the created object.
- shapeRendering - ShapeRenderingType
- The shape-rendering type for this visual and its children. This option sets the shapeRendering property on the created object.
- imageRendering - ImageRenderingType
- The image-rendering type for this visual and its children. This option sets the imageRendering property on the created object.
Throws
- Exception({ name: 'ArgumentError' })
- if the <div> element specified by the
selectoris already used by another component.
Properties
Gets or sets a combination of viewport changes that should be performed in an animated fashion.
Property Value
Examples
graphComponent.animatedViewportChanges =
ViewportChanges.MOUSE_WHEEL_ZOOM | ViewportChanges.ZOOM_COMMANDSee Also
Defined in
Gets the aria-live region of the CanvasComponent.
Remarks
Elements appended to this region are read by screen readers.
The live region is initialized with aria-live="polite" and aria-atomic="false" and added to the DOM upon first access.
Defined in
Gets or sets a property that causes the control to automatically pan the view when the mouse is dragged outside the bounds of the control.
Defined in
Gets or sets the distance from the edge of the viewport, in which auto-scrolling should happen.
Remarks
If the mouse is being dragged within the padding of the control specified using this property, the control will automatically scroll.
The default is (10,10,10,10)
Property Value
See Also
Defined in
Gets an implementation of ICanvasContext that describes the state of this CanvasComponent.
Gets or sets a value indicating whether all keyboard input is captured.
Gets or sets a value indicating whether all pointer input is captured.
Gets or sets the world coordinate at the center of the control.
Remarks
Examples
console.log(
`Current center: ${graphComponent.center} , and view point: ${graphComponent.viewPoint}`,
)
graphComponent.center = new Point(150, 50)
console.log(`New center is: ${graphComponent.center}`)
console.log(
`The view point has also changed: ${graphComponent.viewPoint}`,
)See Also
Defined in
Gets or sets an event recognizer that determines whether zooming with the mouse wheel should zoom to the center of the view instead of the mouse location.
Remarks
Signature Details
function(evt: EventArgs, eventSource: unknown) : boolean
Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
graphComponent.centerZoomEventRecognizer = EventRecognizers.SHIFT_IS_DOWNgraphComponent.centerZoomEventRecognizer = EventRecognizers.NEVERSee Also
Defined in
Gets or sets the GraphClipboard associated with this control.
Remarks
See Also
Gets and sets the rectangle in world coordinates that holds the contents.
Remarks
See Also
Defined in
Gets and sets the margins in view coordinates that should be used by the fitContent operation or zoom commands which zoom to a given rectangle.
Remarks
This influences the amount of visible whitespace in the view coordinate system around the contentBounds after a fitContent operation. The default value is (10,10,10,10).
For the ZOOM_TO_CURRENT_ITEM on a GraphComponent, the margins define the visible whitespace around the rectangle in which the respective item is centered. This way it is also possible to get asymmetric whitespace around the item. The same applies to the ZOOM command with a Rect, IBoundsProvider, or an ILookup returning an IBoundsProvider as parameter.
Note limits that are enforced by the viewportLimiter have a higher priority than these margins.
The default is (10,10,10,10)
See Also
Defined in
Gets or sets the currently focused item.
Remarks
The focused item is shown with a faint dotted border by default.
This is a concept related to selection. The main difference is that there can be at most one focused item, while multiple items can be selected at once.
Property Value
See Also
Sample Graphs
Gets or sets the scaling factor for HTML canvas and WebGL rendering.
Remarks
Defined in
Gets or sets the value of the double-click time.
Remarks
Defined in
Gets the dropTarget associated with this instance.
Property Value
Defined in
Gets a value indicating whether this CanvasComponent is currently focused.
Gets or sets the FocusIndicatorManager<T> that manages display of the focus indicator for keyboard operations.
See Also
Gets or sets the graph that is displayed in this control.
Remarks
Some IInputModes (notably GraphViewerInputMode and GraphEditorInputMode) may retain references to items in the old graph until certain interactions, so it sometimes can be a good idea to re-create and replace the input mode when changing to graph so the old graph reference is eligible for garbage collection.
When changing the graph to one that uses the same IModelItem instances as the old one (e.g. when using FilteredGraphWrapper), the current selection is retained.
See Also
Gets or sets the graphModelManager property.
Remarks
Gets a value indicating whether this instance currently has mouse capture.
Gets or sets the HighlightIndicatorManager<T> which is responsible for rendering the highlights.
Examples
// Add a highlight
graphComponent.highlightIndicatorManager.items?.add(node)
// Determine whether an item is highlighted
graphComponent.highlightIndicatorManager.items?.includes(node)
// Remove it again
graphComponent.highlightIndicatorManager.items?.remove(node)
// Clear all highlights
graphComponent.highlightIndicatorManager.items?.clear()See Also
Gets or sets the collection model that stores the highlight state for the visualization.
Remarks
The default implementation allows for highlighting elements that are not part of the graph and will thus not automatically clear the highlight of an element that gets removed from the graph.
A concept related to highlighting is selection and the currentItem, which represent the currently focused item. This is also shown in a selection- or highlight-like fashion.
Examples
// Add a highlight
graphComponent.highlights.add(node)
// Determine whether an item is highlighted
const highlighted = graphComponent.highlights.includes(node)
// Remove the highlighting
graphComponent.highlights.remove(node)
// check whether there are any highlights
const anyHighlights = graphComponent.highlights.size > 0
// Iterate all highlighted items
graphComponent.highlights.forEach((highlightedItem) => {
// ...
})
// Clear all highlights
graphComponent.highlights.clear()
// listen to low-level changes in the selection
graphComponent.highlights.addEventListener('item-added', (args) => {
console.log(`Highlighted ${args.item}`)
})
graphComponent.highlights.addEventListener('item-removed', (args) => {
console.log(`Removed highlight from ${args.item}`)
})See Also
Gets or sets the radius of the area around the pointer in view coordinates in which an IHitTestable may lie to be considered a valid hit.
Remarks
This value converted into world coordinates can be queried from within the IHitTestable implementation from the hitTestRadius property, which automatically takes the zoom level into account. Note that the context's property automatically switches between the value for mouse, touch, and stylus, based on the last input event.
The default value is 3 for MOUSE, 6 for PEN, and 12 for TOUCH.
See Also
Defined in
Gets or sets the visibility policy for the horizontal scrollbar.
Remarks
Scrollbars don't need to be displayed in order to move the viewport. This can be achieved programmatically or using special IInputMode instances. The default is AUTO.
When setting either scrollbar policy (or both) to AUTO both scrollbars overlay the content and vanish automatically when not currently interacted with.
See Also
Defined in
Gets or sets an event recognizer that determines whether the mouse wheel should scroll in horizontal instead of vertical direction.
Remarks
This recognizer is only used if mouseWheelBehavior has the SCROLL flag.
The default is SHIFT_IS_DOWN.
Signature Details
function(evt: EventArgs, eventSource: unknown) : boolean
Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
graphComponent.horizontalScrollEventRecognizer =
EventRecognizers.CTRL_DOWNDefined in
Gets the HTMLElement that represents this instance.
Defined in
Gets or sets the image-rendering type for this visual and its children.
Remarks
Defined in
Gets the size of the usable area in which the graph will be displayed.
Gets or sets the single IInputMode instance that shall be installed for this canvas.
Examples
graphComponent.inputMode = new GraphEditorInputMode()// set a new instance - by default, a GraphViewerInputMode is already set
graphComponent.inputMode = new GraphViewerInputMode()See Also
Defined in
Gets or sets the IInputModeContext instance that is used by the inputMode instance.
Defined in
Gets the last location provided by a pointing device (for instance mouse or touch).
Remarks
Defined in
Gets the last pointer event triggered by this instance.
Gets or sets a value indicating whether the maximum zoom level for fitContent and FIT_CONTENT is limited to 1.
Remarks
If this property is true, fitContent and FIT_CONTENT will limit the maximum zoom level to 1. This can lead to very small graphs not filling the viewport. If this property is set to false, zooming will only be limited by maximumZoom.
The default value is true.
Defined in
Gets or sets the duration a pointing device must be held down without moving before the pointer-long-press event is raised.
Remarks
Small pointer moves are ignored, so jittery pointer types like PEN or TOUCH will not block the event.
The default value is 250 milliseconds.
See Also
context-menu event, we recommend lowering this value to, for exammple, 100ms because handling the context-menu event will stop other input modes from acting on the subsequent long-press event (e.g., edge creation). Therefore, lowering the longPressTime will extend the time frame between the long-press and the context-menu event.Defined in
Gets or sets the duration a pointing device must not move before the pointer-long-rest event is raised.
Gets or sets the maximum zoom factor for this CanvasComponent.
Remarks
100000.0 and the enforced maximum value is 1000000.0.Examples
graphComponent.maximumZoom = 4See Also
Defined in
Gets or sets the minimum zoom factor for this CanvasComponent.
Remarks
0.0001, the enforced minimum 0.0000001.Examples
graphComponent.minimumZoom = 1See Also
Defined in
Gets or sets a value that specifies whether this control receives mouse input after the mouse is dragged out of its bounding area.
Remarks
Defined in
Gets or sets the action to perform when turning the mouse wheel.
Remarks
Valid values for this property are as follows:
- NONE – No action is being taken when turning the mouse wheel.
- ZOOM – The zoom level of the viewport is adjusted when turning the mouse wheel or pinching on a touchpad. This is the default.
- SCROLL – The viewport is scrolled vertically when turning the mouse wheel, and horizontally when turning the mouse wheel while pressing the Shift key. No modifier key is required if bidirectional wheel events are available (e.g. touchpad or two-axis mouse wheel).
- SCROLL, ZOOM – Both SCROLL and ZOOM can be combined to allow both scrolling and zooming. The default action without any modifiers pressed is scrolling vertically. Pressing Shift while turning the mouse wheel will scroll horizontally. Zooming will happen when the mouseWheelZoomEventRecognizer is satisfied (by default this is pressing Control while turning the mouse wheel).
- Any of the above options, except for NONE can be combined with ONLY_WHEN_FOCUSED to allow the interaction only when the CanvasComponent is focused.
The mouseWheelBehavior can be omitted by calling preventDefault on the event args of the wheel event.
Examples
// The mouse wheel should be used for scrolling.
graphComponent.mouseWheelBehavior = MouseWheelBehaviors.SCROLL
// The mouse wheel can be used either for scrolling or zooming, depending on the modifiers
// but only when the control is focused.
graphComponent.mouseWheelBehavior =
MouseWheelBehaviors.SCROLL |
MouseWheelBehaviors.ZOOM |
MouseWheelBehaviors.ONLY_WHEN_FOCUSEDSee Also
Defined in
Gets or sets a factor that controls how fast the viewport scrolls when the mouse wheel is turned.
Remarks
Scrolling can work either a few lines at a time (per notch of the scroll wheel) or one page at a time. This is a system setting. This property controls how many pixels represent a line if scrolling is done by line. In case scrolling is done by page, this property has no effect.
The default value is 25 pixels. To speed up scrolling, set a larger value, to slow down scrolling, set a smaller value. Set negative values to invert the scrolling/panning behavior, e.g., for trackpads.
See Also
Defined in
Gets or sets an event recognizer that determines whether turning the mouse wheel should perform zooming instead of scrolling.
Remarks
This recognizer is only used if mouseWheelBehavior has both the SCROLL and ZOOM flags.
The default implementation detects whether ctrl or shift have been pressed separately or a precision trackpad is used for panning. In these cases, false will be returned, enabling zooming with the mouse both via scroll wheels and pinch zooming via trackpads.
Signature Details
function(evt: EventArgs, eventSource: unknown) : boolean
Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
graphComponent.mouseWheelZoomEventRecognizer =
EventRecognizers.ALT_IS_DOWNSee Also
Defined in
Gets or sets the factor by which the zoom level changes when the mouse wheel is turned.
Gets or sets an event recognizer that temporarily enables mouse wheel events.
Remarks
If ONLY_WHEN_FOCUSED is set but this CanvasComponent is currently not focused, events accepted by this recognizer will force this CanvasComponent to handle the mouse wheel events anyways.
The default is NEVER. A common use case is to set this recognizer to accept modifier keys such as CTRL_IS_DOWN.
Signature Details
function(evt: EventArgs, eventSource: unknown) : boolean
Parameters
- evt - EventArgs
- The arguments of the event to be decided to handle.
- eventSource - unknown
- The source of the event.
Returns
- boolean
trueif theevtis considered to be handled.
Defined in
Returns an HTML element that can be used to show arbitrary HTML content like overlays, fly-outs, or pop-ups on top of this CanvasComponent.
Remarks
An HTML element that was added to the overlay panel is drawn above the content of this CanvasComponent but below its scrollbars. In contrast to labels or other model items, this element keeps its size when the canvas is zoomed. It should be placed with the CSS property position: absolute to prevent multiple overlay elements to interfere with each other.
If a container element is passed to the constructor of this CanvasComponent, all its child nodes are passed to this overlay panel. Apart from that, content may be added to and removed from this panel at any time.
Defined in
Gets or sets a value indicating whether input coordinates (mouse and touch) should be quantized depending on the zoom level to give nicer values.
Remarks
By default, the coordinates of input events are translated directly to world coordinates, which, with many zoom levels can end up with world coordinates like 326.76821937283548; this excessive precision is an artifact of the fact that every viewport pixel covers a fractional amount of world coordinates.
This option quantizes the coordinates depending on the zoom level so that above value may end up, e.g. as 326.75 instead. This is done in a way to minimize visual deviation from the exact value (much less than a pixel), so visually almost nothing changes. Zooming in will increase the precision as much as necessary, but not so far to be excessive. The benefit is that coordinates are easier to recognize in a debugger, graph elements end up with locations that are easier to read, GraphML files become smaller because less space is wasted on unnecessary floating point precision, and numerical instability in certain cases (e.g. some snapping scenarios) is eliminated.
The default value is true.
Defined in
Gets the render tree for the canvas that holds all IRenderTreeElements that will be rendered by this instance.
Gets a value indicating whether the UI is right to left.
Remarks
Property Value
true if the main UI direction is right to left; otherwise, false.Defined in
Gets or sets the selection model that stores the selection state for the visualization.
Remarks
The selection model instance needs to be adjusted, typically when the graph instance is changed.
A concept related to selection is the currentItem, which represents the currently focused item. This is also shown in a selection-like fashion.
Examples
// Determine whether an item is selected
let selected = graphComponent.selection.includes(node)
// alternatively, if you know the type:
selected = graphComponent.selection.nodes.includes(node)
// Deselect an edge
graphComponent.selection.remove(edge)
// check whether the selection is empty
const isEmpty = graphComponent.selection.size === 0
// Iterate over selected nodes
for (const n of graphComponent.selection.nodes) {
// ...
}
// Iterate all selected items
graphComponent.selection.forEach((selection) => {
// ...
})
// Unselect all edges
graphComponent.selection.edges.clear()
// clear the whole selection
graphComponent.selection.clear()
// select all nodes
graphComponent.graph.nodes.forEach((n) => {
graphComponent.selection.nodes.add(n)
})
// listen to low-level changes in the selection
graphComponent.selection.addEventListener('item-added', (args) => {
console.log(`Selected ${args.item}`)
})
graphComponent.selection.addEventListener('item-removed', (args) => {
console.log(`Deselected ${args.item}`)
})See Also
Sample Graphs
Gets or sets the selectionIndicatorManager property.
See Also
Gets or sets the shape-rendering type for this visual and its children.
Remarks
Defined in
Returns the size of the HTML element.
Defined in
Gets the control's svgDefsManager
Defined in
Gets or sets whether to add a 'glass pane' overlay to the CanvasComponent that acts as the source for all mouse and touch events.
Remarks
Defined in
Gets or sets the visibility policy for the vertical scrollbar.
Remarks
Scrollbars don't need to be displayed in order to move the viewport. This can be achieved programmatically or using special IInputMode instances. The default is AUTO.
When setting either scrollbar policy (or both) to AUTO both scrollbars overlay the content and vanish automatically when not currently interacted with.
See Also
Defined in
Gets or sets the current viewpoint.
Remarks
Examples
console.log(
`Current view point: ${graphComponent.viewPoint} , and center: ${graphComponent.center}`,
)
graphComponent.viewPoint = new Point(150, 50)
console.log(`New view point is: ${graphComponent.viewPoint}`)
console.log(`The center has also changed: ${graphComponent.center}`)See Also
Defined in
Gets the smallest rectangle in world coordinates that encompasses the visible viewing region.
See Also
Defined in
Gets or sets the ViewportLimiter instance that can be used to limit the explorable region.
Remarks
By default, there are no limits set on the explorable region.
When a projection is set, the viewportLimiter is ignored.
See Also
Defined in
Gets or sets the policy for caching Visuals which are temporarily removed from the visual tree.
Remarks
Visuals are temporarily removed when they are moved outside the visual part of the canvas (the viewport ) and re-added when they enter the viewport again. Caching prevents the need to re-build the visuals from scratch.
Visuals are only cached if this property is set to other value than NEVER and if a dispose visual callback is registered during creation.
Defined in
Gets or sets the zoom factor for this CanvasComponent.
Remarks
A zoom level of 1.0 will make each unit in world-coordinate space appear exactly one unit in screen coordinates wide. The default is 1.0. When setting this property to change the zoom level, the center point will remain the same.
The valid range is bounded by minimumZoom and maximumZoom
Examples
console.log(
`Resetting the zoom level from ${graphComponent.zoom} to 100 %.`,
)
graphComponent.zoom = 1See Also
Defined in
Methods
addGenericInputModeContextLookup
(genericLink: function(IInputModeContext, Constructor, IContextLookup):any) : IContextLookupChainLinkAdds a generic callback as a chain link to the lookup.
Remarks
Parameters
A map of options to pass to the method.
- genericLink - function(IInputModeContext, Constructor, IContextLookup):any
- The generic callback to add to the lookup chain.
Signature Details
function(arg1: IInputModeContext, arg2: Constructor, arg3: IContextLookup) : anyEncapsulates a method that has three parameters and returns a value of the type specified by theTResultparameter.Parameters
- arg1 - IInputModeContext
- The first parameter of the method that this delegate encapsulates.
- arg2 - Constructor
- The second parameter of the method that this delegate encapsulates.
- arg3 - IContextLookup
- The third parameter of the method that this delegate encapsulates.
Returns
- any
- The return value of the method that this delegate encapsulates.
Returns
- ↪IContextLookupChainLink
- An IContextLookupChainLink that has been added to the lookup.
Defined in
applyLayoutAnimated
(layout: ILayoutAlgorithm, animationDuration?: TimeSpan, layoutData?: LayoutData<INode,IEdge,ILabel,ILabel>, stopDuration?: TimeSpan, cancelDuration?: TimeSpan, animateViewport?: boolean, portAdjustmentPolicies?: ItemMapping<IPort,PortAdjustmentPolicy>, portPlacementPolicies?: ItemMapping<IPort,PortPlacementPolicy>, portLabelPolicies?: ItemMapping<ILabel,PortLabelPolicy>, anchoredItems?: ItemMapping<IModelItem,LayoutAnchoringPolicy>, targetBoundsPadding?: Insets, labelPlacementPolicies?: ItemMapping<ILabel,LabelPlacementPolicy>, nodeComparator?: function(INode, INode):number, edgeComparator?: function(IEdge, IEdge):number) : Promise<void>Runs a layout on the graph of the GraphComponent and animates the transition.
Remarks
Parameters
A map of options to pass to the method.
- layout - ILayoutAlgorithm
- The layout to run.
- animationDuration - TimeSpan
- The duration of the animation. The default value is 0.5 seconds.
- layoutData - LayoutData<INode,IEdge,ILabel,ILabel>
- The layout data to apply.
- stopDuration - TimeSpan
- the maximum runtime for the layout calculation before it is automatically stopped.
- cancelDuration - TimeSpan
- the maximum runtime for the layout calculation before it is automatically canceled.
- animateViewport - boolean
- A value indicating whether the viewport should be animated to the new bounds of the graph.
- portAdjustmentPolicies - ItemMapping<IPort,PortAdjustmentPolicy>
- The policy that specifies how port locations should be adjusted after a layout has been calculated.
- portPlacementPolicies - ItemMapping<IPort,PortPlacementPolicy>
- The policy that specifies how ports should be placed by the layout algorithm.
- portLabelPolicies - ItemMapping<ILabel,PortLabelPolicy>
- anchoredItems - ItemMapping<IModelItem,LayoutAnchoringPolicy>
- Specifies which part of the items should be used to anchor the graph during layout.
- targetBoundsPadding - Insets
- The insets (in world coordinates) that will be added to the content rectangle when calculating the target viewport.
- labelPlacementPolicies - ItemMapping<ILabel,LabelPlacementPolicy>
- Sets how ILabels should be placed by the layout algorithm.
- nodeComparator - function(INode, INode):number
- A comparison function that normalizes the order of the nodes for the layout calculation to ensure the same order for multiple layout invocations.
- edgeComparator - function(IEdge, IEdge):number
- A comparison function that normalizes the order of the edges for the layout calculation to ensure the same order for multiple layout invocations.
Returns
See Also
LayoutExecutor type is available at runtime.Returns whether the given command can be executed with the given optional parameter.
Remarks
See the documentation of the Command which parameter can be used with the given command.
It is strongly advised to query this method before calling executeCommand.
Some commands can only be executed if a GraphViewerInputMode or GraphEditorInputMode is installed.
Parameters
A map of options to pass to the method.
- command - Command
- The command to execute.
- parameter - any
- An optional parameter to provide for the command.
Returns
- ↪boolean
- Returns
trueif the command can be executed, otherwisefalse.
See Also
Defined in
Cleans up by removing any connection from the htmlElement element to the GraphComponent instance and any associated element that was created during the lifetime of the component.
Remarks
The graph instance is not affected by this and will keep its references and listeners. To remove them, set the graph to a new empty default graph. Otherwise, re-using the graph in another component may cause unexpected behavior.
In addition, the entire visual tree is cleared and an immediate final visual tree update is performed. As a result, pending dispose callbacks for registered visuals are executed and associated resources can be released.
Overrides
Helper method that ensures that the viewport limit as returned by the viewportLimiter is obeyed.
Remarks
Parameters
A map of options to pass to the method.
- mode - ViewportLimitingMode
- The mode defining how viewport limitations are applied. Defaults to PROGRAMMATIC_NAVIGATION.
See Also
Defined in
Creates an appropriate IRenderContext that can be used to create visuals using IVisualCreator implementations.
Remarks
Returns
- ↪IRenderContext
- A new context instance that is bound to this instance.
Defined in
Ensures that the provided bounds in world coordinates are visible by adjusting the viewport accordingly.
Parameters
A map of options to pass to the method.
- bounds - Rect
- The bounds to make visible.
- viewportPadding - Insets
- Padding in view coordinates to keep free around the content.
- mode - ViewportLimitingMode
- The mode the viewport limiter should use.
Returns
See Also
Defined in
ensureVisible
(points: IEnumerable<Point>, viewportPadding?: Insets, mode?: ViewportLimitingMode) : Promise<void>Ensures that the provided points in world coordinates are all visible by adjusting the viewport accordingly.
Remarks
Parameters
A map of options to pass to the method.
- points - IEnumerable<Point>
- The points to make visible.
- viewportPadding - Insets
- Padding in view coordinates to keep free around the content.
- mode - ViewportLimitingMode
- The mode the viewport limiter should use.
Returns
See Also
Defined in
Executes the given command with the given optional parameter on this CanvasComponent.
Remarks
See the documentation of the Command for which parameters can be used with the given command.
It is strongly advised to query canExecuteCommand whether the command can be executed.
Some commands can only be executed if a GraphViewerInputMode or GraphEditorInputMode is installed.
Parameters
A map of options to pass to the method.
- command - Command
- The command to execute.
- parameter - any
- An optional parameter to provide for the command.
See Also
Defined in
Exports the graphical content for this CanvasComponent.
Remarks
This method will create the visual content using the world coordinate system.
Note that for creating standalone SVG exports, the SvgExport should be used instead.
Note that no viewport transform will be applied. Additionally, a projection will be applied only to canvas visuals. SVG visuals will be exported unprojected.
Parameters
A map of options to pass to the method.
- context - IRenderContext
- The context to use.
Returns
- ↪Element
- An SVG element that represents the contents of this control.
See Also
Defined in
Fires the size changed event.
Parameters
A map of options to pass to the method.
- oldSize - Size
- The old size.
Defined in
Adjusts the viewport to fully encompass the contentBounds.
Remarks
This is usually used to make sure a large graph fits into the viewport. The limitFitContentZoom property controls the behavior for small graphs. If limitFitContentZoom is true, the maximum zoom level is 1; setting the property to false will zoom in far enough so that even small graphs fit the viewport (limited to maximumZoom, though).
The viewportLimiter is taken into account.
If a projection is set, the bounding rectangle of the contentBounds is used and and viewportLimiter is ignored.
Parameters
A map of options to pass to the method.
- animated - boolean
- Whether to change the viewport in an animated fashion.
Returns
See Also
Defined in
Updates the content bounds for the contentGroup considering the provided margins and adjusts the viewport to encompass the contents.
Parameters
A map of options to pass to the method.
- margins - Insets
- The visible whitespace around the actual contentBounds.
- animated - boolean
- Whether to change the viewport in an animated fashion.
Returns
See Also
Focuses the htmlElement element that is backing this instance.
Parameters
A map of options to pass to the method.
- options - FocusOptions
- The optional focus options.
Defined in
getInputModeContextDecoratorFor
<TInterface>(interfaceType: Constructor<TInterface>) : LookupDecorator<IInputModeContext,TInterface>Gets the LookupDecorator<IInputModeContext,TInterface> that can be used to decorate the lookup call in the inputModeContext.
Type Parameters
- TInterface
Returns
- ↪LookupDecorator<IInputModeContext,TInterface>
- The LookupDecorator<IInputModeContext,TInterface> instance that can be used for decorating the lookup operation within the context.
Defined in
getViewportAnimationDuration
(newCenter: Point, newZoom: number, viewportChanges: ViewportChanges) : TimeSpanDetermines the animation duration for a viewport animation.
Remarks
Parameters
A map of options to pass to the method.
- newCenter - Point
- The new center of the viewport.
- newZoom - number
- The new zoom factor.
- viewportChanges - ViewportChanges
- The kind of viewport change that triggered this method. Even though ViewportChanges supports multiple values as bitwise flags, only one of them is ever passed here.
Returns
Examples
protected getViewportAnimationDuration(
newCenter: Point,
newZoom: number,
viewportChanges: ViewportChanges,
): TimeSpan {
if (
viewportChanges == ViewportChanges.MOUSE_WHEEL_SCROLL &&
this.center.distanceTo(newCenter) > 200
) {
// Use a duration between 100 and 500 ms depending on the distance scrolled
return TimeSpan.fromMilliseconds(
Math.max(Math.min(this.center.distanceTo(newCenter), 500), 100),
)
}
if (
(viewportChanges == ViewportChanges.ZOOM_COMMAND ||
viewportChanges == ViewportChanges.MOUSE_WHEEL_ZOOM) &&
newZoom > this.zoom
) {
// Use a shorter duration when zooming in
return TimeSpan.fromMilliseconds(100)
}
if (viewportChanges == ViewportChanges.FIT_CONTENT_COMMAND) {
// Never animate FIT_CONTENT or FIT_GRAPH_BOUNDS
return TimeSpan.ZERO
}
return super.getViewportAnimationDuration(
newCenter,
newZoom,
viewportChanges,
)
}See Also
Defined in
Ensures that the contentBounds encompasses the given rectangle.
Remarks
Parameters
A map of options to pass to the method.
- rectangle - Rect
- The rectangle that should be included in the content bounds
Defined in
Used by the default implementation of inputModeContext to resolve lookup calls.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context.
- type - Constructor
- The Type to query
Returns
- ↪any?
- The result of the query.
See Also
Defined in
Converts intermediate coordinates to view coordinates expressed in the control's coordinate system.
Remarks
Parameters
A map of options to pass to the method.
- intermediatePoint - Point
- the coordinates in the view coordinate system
Returns
- ↪Point
- The coordinates in pixels relative to the control's upper left corner in the view coordinate system
See Also
Defined in
Converts intermediate coordinates to world coordinates.
Remarks
Parameters
A map of options to pass to the method.
- intermediatePoint - Point
- Coordinates expressed in the intermediate coordinate system
Returns
- ↪Point
- The coordinates expressed in the world coordinate system.
See Also
Defined in
Invalidates this instance and marks it as in need for an update.
Remarks
Calling this method is fast and will only mark the component as dirty for a future, asynchronously executed call to updateVisual.
Alternatively, updateVisualAsync can be used which returns a promise that is resolved once the component has been updated.
Defined in
Returns an instance that implements the given type or null.
Remarks
null implementations for the types, nor does it have to return the same instance any time. Also, it depends on the type and context whether the instance returned stays up to date or needs to be re-obtained for further use.Type Parameters
- T
Parameters
A map of options to pass to the method.
- type - Constructor<T>
- the type for which an instance shall be returned
Returns
- ↪T?
- an instance that is assignable to the type or
null
See Also
Implements
Calls evt.preventDefault() for each contextMenu event that occurs on this instance.
Remarks
contextMenu event can be enabled.Parameters
A map of options to pass to the method.
- evt - Event
- The event.
Defined in
Calls evt.preventDefault() if captureAllPointerInput is enabled.
Remarks
Parameters
A map of options to pass to the method.
- evt - Event
- The event.
Defined in
This method will be called when the mouse wheel was turned and if the mouseWheelBehavior property is set to SCROLL.
Remarks
Parameters
A map of options to pass to the method.
- evt - PointerEventArgs
- The event describing the action
See Also
Defined in
This method will be called when the mouse wheel was turned and if the mouseWheelBehavior property is set to ZOOM.
Remarks
Parameters
A map of options to pass to the method.
- evt - PointerEventArgs
- the event describing the action
See Also
Defined in
Converts html page coordinates to view coordinates.
Converts html page coordinates to world coordinates.
Stops the mouse capture and returns to normal event capturing.
Remarks
true and a mouse down event is received, the control starts capturing all mouse events by registering handlers on the document element. Mouse capturing is normally stopped when the mouse button is released. Mouse capture can be manually stopped by calling this function.Defined in
Updates the contentBounds to encompass the bounds of all elements in the current scene graph plus the given margins.
Remarks
group of scene graph and query their bounds. The resulting bounds will be set to the content bounds plus the provided margins.Parameters
A map of options to pass to the method.
- margins - Insets
- The additional margins to add to the calculated bounds.
- group - IRenderTreeGroup
- The scene graph group to traverse. If none is specified, the contentGroup is used.
See Also
Defined in
Updates the visual tree that displays the contents of this control.
Remarks
Calling this method will synchronously update the visual tree and the SVG DOM and Canvas rendering.
This method will create or update the visuals that make up the visual tree.
Note that most of the time this method does not need to be called by client code. Instead calling invalidate will ultimately trigger this method. However invalidation calls will be coalesced and the actual execution of the update will be delayed until the next event dispatch.
See Also
Defined in
Invalidates this instance and marks it as in need for an update.
Remarks
Returns
Defined in
Converts view coordinates to intermediate coordinates, effectively canceling any projection if set.
Remarks
Parameters
A map of options to pass to the method.
- viewPoint - Point
- the coordinates in the view coordinate system
Returns
- ↪Point
- The coordinates in pixels relative to the control's upper left corner in the intermediate coordinate system
See Also
Defined in
Converts view coordinates to the html page coordinates.
Converts coordinates expressed in the component's coordinate system to world coordinates.
Converts world coordinates to the component's coordinate system before the projection is applied.
Remarks
Parameters
A map of options to pass to the method.
- worldPoint - Point
- the coordinates in the world coordinate system
Returns
- ↪Point
- Coordinates expressed in pixels relative to the control's upper left corner in the intermediate coordinate system
See Also
Defined in
Converts world coordinates to view coordinates expressed in the control's coordinate system.
Sets the zoom level and viewport center to the given values.
Remarks
Parameters
A map of options to pass to the method.
- zoom - number
- The new zoom level.
- center - Point
- The optional new center of the viewport in world coordinates. If not specified, this implementation zooms to the current viewport center.
Examples
graphComponent.zoomTo(2, new Point(42, 42))See Also
Defined in
Sets the zoom level and viewport center so that the given rectangle in world coordinates fits the viewport.
Remarks
Parameters
A map of options to pass to the method.
- bounds - Rect
- The coordinates of the rectangle to zoom to.
Examples
graphComponent.zoomTo(new Rect(50, 30, 120, 75))See Also
Defined in
Transitions to a new zoom level and viewport center in an animated fashion.
Remarks
Parameters
A map of options to pass to the method.
- zoom - number
- The new zoom level.
- center - Point
- The optional new center of the viewport in world coordinates. If not specified, this implementation zooms to the current viewport center.
Returns
- ↪Promise<void>
- A Promise that resolves once the animation is finished.
Examples
await graphComponent.zoomToAnimated(2, new Point(42, 42))
// Subsequent code runs after the animation completesSee Also
Defined in
Transitions the viewport in an animated fashion to a new zoom level and center so that the given rectangle in world coordinates fits the viewport.
Remarks
Parameters
A map of options to pass to the method.
- bounds - Rect
- The coordinates of the rectangle to zoom to.
Returns
- ↪Promise<void>
- A Promise that resolves when the viewport has been adjusted.
Examples
await graphComponent.zoomToAnimated(new Rect(50, 30, 120, 75))
// Subsequent code runs after the animation completesSee Also
Defined in
Events
Occurs when the executability state of a command might have changed.
Remarks
See Also
Defined in
Occurs when the contentBounds have been changed.
Defined in
Occurs when the currentItem property has changed its value.
Occurs when keys are being pressed, i.e., on keydown.
Occurs when keys are being released, i.e., on keyup.
Occurs when the mouse capture has been lost.
Remarks
Defined in
Occurs when the mouse capture has been lost.
Remarks
Defined in
Occurs when the user clicks the pointer.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
This happens if press and release happens at the same position.
This refers to all supported pointer clicks, i.e. mouse clicks, touch taps, and stylus clicks.
Defined in
Occurs when a mouse button has been pressed, i.e., on mousedown.
Remarks
Defined in
Occurs when the mouse is being moved while at least one of the mouse buttons is pressed.
Remarks
Defined in
Occurs when the mouse has entered the canvas.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
If the mouse enters this canvas control with a mouse button pressed, this event is fired instantly but the current button state reported by the PointerEventArgs does not include this button unless the browser supports the property MouseEvent.buttons. See the Known Issues for more details.
Defined in
Occurs when the mouse has exited the canvas.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
If the mouse leaves this canvas control with the mouse button pressed, this event is deferred until the mouse button is released. Thus, this event will not interfere with the typical mouse button event cycle.
Defined in
Occurs when the user performed a long press gesture with a pointer device.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
This happens if the pointer is held in the same position for the duration specified in longPressTime after a pointer-down.
Defined in
Occurs during a DRAG or MOVE, when the pointer only moves a lit bit during the amount of time specified in longRestTime.
Remarks
Defined in
Occurs when the mouse has been moved in world coordinates.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
Move elements are delivered if no mouse button is pressed. This event will be fired, too, if the mouse does not move but the world coordinates to which the current mouse position maps change. E.g. this will happen if the zoom level or the view point is changed.
Defined in
Occurs when the mouse button has been released, i.e., on mouseup.
Remarks
Defined in
Occurs before the visual tree is painted to prepare the IRenderContext.
Defined in
Occurs if the selection instance has been changed, not when the selected items change.
Remarks
See Also
Occurs when the size of this component is changed.
Defined in
Occurs after the visual tree has been updated.
Defined in
Occurs before the visual tree is updated.
Defined in
Occurs when the viewport property has been changed.
Occurs when the mouse wheel has turned.
Remarks
This event delivers PointerEventArgs in world coordinates using double precision floating points.
The default mouseWheelBehavior can be omitted by calling preventDefault on the event args.
Defined in
Occurs when the value of the zoom property has been changed.