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 has bindings for the following ICommands.
- 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.
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-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.view.GraphComponent
See Also
Constructors
Creates a new instance of the GraphComponent in the given div element.
Remarks
If the graph and GraphSelection 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.
- div - HTMLDivElement
- 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 sets the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
The highlightIndicatorManager property. This option sets the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
The focusIndicatorManager property. This option sets the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
The graphModelManager property. This option sets the graphModelManager property on the created object.
- graph - IGraph
The graph that is displayed in this control. This option sets the graph property on the created object.
- selection - IGraphSelection
The selection model that is used for this control. This option sets the selection property on the created object.
- clipboard - GraphClipboard
The GraphClipboard associated with this control. This option sets the clipboard 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.
- preventFocusScrolling - boolean
A value indicating whether to prevent scrolling if the element gets focused. This option sets the preventFocusScrolling property on the created object.
- devicePixelRatio - number
The scaling factor for HTML5 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.
- viewportLimiter - ViewportLimiter
The ViewportLimiter instance that can be used to limit the explorable region. This option sets 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(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(Object, EventArgs):boolean
An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
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.
- animateScrollCommands - boolean
A value indicating whether ICommands for scrolling like for example SCROLL_PAGE_DOWN, the scrolling should be performed in animated fashion. This option sets the animateScrollCommands property on the created object.
- contentRect - Rect
The Rectangle in world coordinates that holds the contents. This option sets the contentRect property on the created object.
- contentMargins - Insets
The insets 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 which 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 mouse 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.
- hitTestRadiusTouch - number
The radius of the area around the touch point in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadiusTouch 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.
- theme - Theme
The theme of this component that is used to configure the general look and feel of its interaction visualization. This option sets the theme property on the created object.
- zoom - number
The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- minimumZoom - number
The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- maximumZoom - number
The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- viewPoint - Point
The current view point. This option sets the viewPoint 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.
- autoDrag - boolean
A property that causes the control to automatically pan the view when the mouse gets dragged outside of the bounds of the control. This option sets the autoDrag 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.
- contentGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put actual content in. This option sets the contentGroup property on the created object.
- highlightGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers to highlight IModelItems. This option sets the highlightGroup property on the created object.
- focusGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers of the currentItem. This option sets the focusGroup property on the created object.
- selectionGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put the selection indicators in. This option sets the selectionGroup property on the created object.
- inputModeGroup - ICanvasObjectGroup
The ICanvasObjectGroup where the IInputModes should add their temporary content to. This option sets the inputModeGroup property on the created object.
- backgroundGroup - ICanvasObjectGroup
The BackgroundGroup property. This option sets the backgroundGroup 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.
- dragTime - TimeSpan
The value of the drag time. This option sets the dragTime property on the created object.
- doubleClickTime - TimeSpan
The value of the double click time. This option sets the doubleClickTime property on the created object.
- doubleTapTime - TimeSpan
The value of the double tap time. This option sets the doubleTapTime property on the created object.
- longPressTime - TimeSpan
The value of the long press time. This option sets the longPressTime property on the created object.
- dragSize - Size
The area in view coordinates the mouse may stay in before a movement is considered a drag. This option sets the dragSize property on the created object.
- dragSizeTouch - Size
The area in view coordinates the touch point may stay in before a movement is considered a drag. This option sets the dragSizeTouch property on the created object.
- doubleClickSize - Size
The area in view coordinates the mouse needs to stay in before multiple clicks are considered multiple single clicks instead of multi-clicks. This option sets the doubleClickSize property on the created object.
- doubleTapSize - Size
The area in view coordinates the touch pointer needs to stay in before multiple taps are considered multiple single taps instead of multi-taps. This option sets the doubleTapSize 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.
- autoDragInsets - Insets
The auto drag insets. This option sets the autoDragInsets property on the created object.
- inputModeContext - IInputModeContext
The InputModeContext property. This option sets the inputModeContext 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.
- 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.
- sizeChangedDetection - SizeChangedDetectionMode
How size changes of this CanvasComponent will be detected. This option sets the sizeChangedDetection 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.
Throws
- Exception({ name: 'ArgumentError' })
- if the
divelement 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 sets the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
The highlightIndicatorManager property. This option sets the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
The focusIndicatorManager property. This option sets the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
The graphModelManager property. This option sets the graphModelManager property on the created object.
- graph - IGraph
The graph that is displayed in this control. This option sets the graph property on the created object.
- selection - IGraphSelection
The selection model that is used for this control. This option sets the selection property on the created object.
- clipboard - GraphClipboard
The GraphClipboard associated with this control. This option sets the clipboard 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.
- preventFocusScrolling - boolean
A value indicating whether to prevent scrolling if the element gets focused. This option sets the preventFocusScrolling property on the created object.
- devicePixelRatio - number
The scaling factor for HTML5 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.
- viewportLimiter - ViewportLimiter
The ViewportLimiter instance that can be used to limit the explorable region. This option sets 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(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(Object, EventArgs):boolean
An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
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.
- animateScrollCommands - boolean
A value indicating whether ICommands for scrolling like for example SCROLL_PAGE_DOWN, the scrolling should be performed in animated fashion. This option sets the animateScrollCommands property on the created object.
- contentRect - Rect
The Rectangle in world coordinates that holds the contents. This option sets the contentRect property on the created object.
- contentMargins - Insets
The insets 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 which 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 mouse 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.
- hitTestRadiusTouch - number
The radius of the area around the touch point in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadiusTouch 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.
- theme - Theme
The theme of this component that is used to configure the general look and feel of its interaction visualization. This option sets the theme property on the created object.
- zoom - number
The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- minimumZoom - number
The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- maximumZoom - number
The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- viewPoint - Point
The current view point. This option sets the viewPoint 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.
- autoDrag - boolean
A property that causes the control to automatically pan the view when the mouse gets dragged outside of the bounds of the control. This option sets the autoDrag 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.
- contentGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put actual content in. This option sets the contentGroup property on the created object.
- highlightGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers to highlight IModelItems. This option sets the highlightGroup property on the created object.
- focusGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers of the currentItem. This option sets the focusGroup property on the created object.
- selectionGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put the selection indicators in. This option sets the selectionGroup property on the created object.
- inputModeGroup - ICanvasObjectGroup
The ICanvasObjectGroup where the IInputModes should add their temporary content to. This option sets the inputModeGroup property on the created object.
- backgroundGroup - ICanvasObjectGroup
The BackgroundGroup property. This option sets the backgroundGroup 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.
- dragTime - TimeSpan
The value of the drag time. This option sets the dragTime property on the created object.
- doubleClickTime - TimeSpan
The value of the double click time. This option sets the doubleClickTime property on the created object.
- doubleTapTime - TimeSpan
The value of the double tap time. This option sets the doubleTapTime property on the created object.
- longPressTime - TimeSpan
The value of the long press time. This option sets the longPressTime property on the created object.
- dragSize - Size
The area in view coordinates the mouse may stay in before a movement is considered a drag. This option sets the dragSize property on the created object.
- dragSizeTouch - Size
The area in view coordinates the touch point may stay in before a movement is considered a drag. This option sets the dragSizeTouch property on the created object.
- doubleClickSize - Size
The area in view coordinates the mouse needs to stay in before multiple clicks are considered multiple single clicks instead of multi-clicks. This option sets the doubleClickSize property on the created object.
- doubleTapSize - Size
The area in view coordinates the touch pointer needs to stay in before multiple taps are considered multiple single taps instead of multi-taps. This option sets the doubleTapSize 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.
- autoDragInsets - Insets
The auto drag insets. This option sets the autoDragInsets property on the created object.
- inputModeContext - IInputModeContext
The InputModeContext property. This option sets the inputModeContext 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.
- 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.
- sizeChangedDetection - SizeChangedDetectionMode
How size changes of this CanvasComponent will be detected. This option sets the sizeChangedDetection 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.
Creates a new instance of GraphComponent using the div element that is specified by the selector.
Remarks
If the graph and GraphSelection 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 sets the selectionIndicatorManager property on the created object.
- highlightIndicatorManager - HighlightIndicatorManager<IModelItem>
The highlightIndicatorManager property. This option sets the highlightIndicatorManager property on the created object.
- focusIndicatorManager - FocusIndicatorManager<IModelItem>
The focusIndicatorManager property. This option sets the focusIndicatorManager property on the created object.
- graphModelManager - GraphModelManager
The graphModelManager property. This option sets the graphModelManager property on the created object.
- graph - IGraph
The graph that is displayed in this control. This option sets the graph property on the created object.
- selection - IGraphSelection
The selection model that is used for this control. This option sets the selection property on the created object.
- clipboard - GraphClipboard
The GraphClipboard associated with this control. This option sets the clipboard 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.
- preventFocusScrolling - boolean
A value indicating whether to prevent scrolling if the element gets focused. This option sets the preventFocusScrolling property on the created object.
- devicePixelRatio - number
The scaling factor for HTML5 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.
- viewportLimiter - ViewportLimiter
The ViewportLimiter instance that can be used to limit the explorable region. This option sets 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(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- mouseWheelZoomEventRecognizer - function(Object, EventArgs):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(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
- noFocusMouseWheelRecognizer - function(Object, EventArgs):boolean
An event recognizer that temporarily enables mouse wheel events. This option sets the noFocusMouseWheelRecognizer property on the created object.
Signature Details
function(eventSource: any, evt: EventArgs) : 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
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
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.
- animateScrollCommands - boolean
A value indicating whether ICommands for scrolling like for example SCROLL_PAGE_DOWN, the scrolling should be performed in animated fashion. This option sets the animateScrollCommands property on the created object.
- contentRect - Rect
The Rectangle in world coordinates that holds the contents. This option sets the contentRect property on the created object.
- contentMargins - Insets
The insets 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 which 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 mouse 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.
- hitTestRadiusTouch - number
The radius of the area around the touch point in view coordinates in which an IHitTestable may lie to be considered a valid hit. This option sets the hitTestRadiusTouch 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.
- theme - Theme
The theme of this component that is used to configure the general look and feel of its interaction visualization. This option sets the theme property on the created object.
- zoom - number
The zoom factor for this CanvasComponent. This option sets the zoom property on the created object.
- minimumZoom - number
The minimum zoom factor for this CanvasComponent. This option sets the minimumZoom property on the created object.
- maximumZoom - number
The maximum zoom factor for this CanvasComponent. This option sets the maximumZoom property on the created object.
- viewPoint - Point
The current view point. This option sets the viewPoint 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.
- autoDrag - boolean
A property that causes the control to automatically pan the view when the mouse gets dragged outside of the bounds of the control. This option sets the autoDrag 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.
- contentGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put actual content in. This option sets the contentGroup property on the created object.
- highlightGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers to highlight IModelItems. This option sets the highlightGroup property on the created object.
- focusGroup - ICanvasObjectGroup
The ICanvasObjectGroup which is used for visual markers of the currentItem. This option sets the focusGroup property on the created object.
- selectionGroup - ICanvasObjectGroup
The ICanvasObjectGroup that should be used by the application code to put the selection indicators in. This option sets the selectionGroup property on the created object.
- inputModeGroup - ICanvasObjectGroup
The ICanvasObjectGroup where the IInputModes should add their temporary content to. This option sets the inputModeGroup property on the created object.
- backgroundGroup - ICanvasObjectGroup
The BackgroundGroup property. This option sets the backgroundGroup 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.
- dragTime - TimeSpan
The value of the drag time. This option sets the dragTime property on the created object.
- doubleClickTime - TimeSpan
The value of the double click time. This option sets the doubleClickTime property on the created object.
- doubleTapTime - TimeSpan
The value of the double tap time. This option sets the doubleTapTime property on the created object.
- longPressTime - TimeSpan
The value of the long press time. This option sets the longPressTime property on the created object.
- dragSize - Size
The area in view coordinates the mouse may stay in before a movement is considered a drag. This option sets the dragSize property on the created object.
- dragSizeTouch - Size
The area in view coordinates the touch point may stay in before a movement is considered a drag. This option sets the dragSizeTouch property on the created object.
- doubleClickSize - Size
The area in view coordinates the mouse needs to stay in before multiple clicks are considered multiple single clicks instead of multi-clicks. This option sets the doubleClickSize property on the created object.
- doubleTapSize - Size
The area in view coordinates the touch pointer needs to stay in before multiple taps are considered multiple single taps instead of multi-taps. This option sets the doubleTapSize 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.
- autoDragInsets - Insets
The auto drag insets. This option sets the autoDragInsets property on the created object.
- inputModeContext - IInputModeContext
The InputModeContext property. This option sets the inputModeContext 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.
- 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.
- sizeChangedDetection - SizeChangedDetectionMode
How size changes of this CanvasComponent will be detected. This option sets the sizeChangedDetection 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.
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 which should be performed in an animated fashion.
Examples
graphComponent.animatedViewportChanges =
ViewportChanges.MOUSE_WHEEL_ZOOM | ViewportChanges.ZOOM_COMMANDSee Also
Defined in
Gets or sets a value indicating whether ICommands for scrolling like for example SCROLL_PAGE_DOWN, the scrolling should be performed in animated fashion.
Deprecation warning
The AnimatedViewportChanges property should be changed to include or exclude ViewportChanges.ScrollCommand instead.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 gets dragged outside of the bounds of the control.
Defined in
Gets or sets the auto drag insets.
Remarks
If the mouse is being dragged within the insets of the control specified using this property, the control will automatically scroll.
The default is (10,10,10,10)
See Also
Defined in
Gets or sets the BackgroundGroup property.
Remarks
The background group is the ICanvasObjectGroup that should be used by the application code to put background elements in.
If the field has not yet been initialized upon first access, the factory method createBackgroundGroup will be called. Upon change the BackgroundGroupChanged event will be fired.
Examples
The backgroundGroup can be used for displaying visuals in the background of the main content. For example, a background image:
/**
* Creates the image for the background visual.
*/
class ImageVisualCreator extends BaseClass(IVisualCreator) {
/**
* @param {!IRenderContext} context
* @returns {!Visual}
*/
createVisual(context) {
const image = window.document.createElementNS(
'http://www.w3.org/2000/svg',
'image'
)
image.setAttribute('width', '640')
image.setAttribute('height', '480')
image.setAttribute('x', '-150')
image.setAttribute('y', '-160')
image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'ylogo.svg')
return new SvgVisual(image)
}
/**
* @param {!IRenderContext} context
* @param {!Visual} oldVisual
* @returns {!Visual}
*/
updateVisual(context, oldVisual) {
return oldVisual
}
}
graphComponent.backgroundGroup.addChild(
new ImageVisualCreator(),
ICanvasObjectDescriptor.ALWAYS_DIRTY_INSTANCE
)/**
* Creates the image for the background visual.
*/
class ImageVisualCreator
extends BaseClass<IVisualCreator>(IVisualCreator)
implements IVisualCreator
{
createVisual(context: IRenderContext): Visual {
const image = window.document.createElementNS(
'http://www.w3.org/2000/svg',
'image'
)
image.setAttribute('width', '640')
image.setAttribute('height', '480')
image.setAttribute('x', '-150')
image.setAttribute('y', '-160')
image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'ylogo.svg')
return new SvgVisual(image)
}
updateVisual(context: IRenderContext, oldVisual: Visual): Visual {
return oldVisual
}
}
graphComponent.backgroundGroup.addChild(
new ImageVisualCreator(),
ICanvasObjectDescriptor.ALWAYS_DIRTY_INSTANCE
)This image will scroll and zoom with the content, though. If a static image that doesn't move with the content is needed, add it as CSS background to the div element of this component.
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.
Defined in
Gets or sets a value indicating whether all pointer input is captured.
Defined in
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(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
graphComponent.centerZoomEventRecognizer =
KeyEventRecognizers.SHIFT_IS_DOWNgraphComponent.centerZoomEventRecognizer = EventRecognizers.NEVERSee Also
Defined in
Gets or sets the GraphClipboard associated with this control.
Remarks
See Also
Gets or sets the ICanvasObjectGroup that should be used by the application code to put actual content in.
Remarks
See Also
Defined in
Gets and sets the insets in view coordinates that should be used by the fitContent operation or zoom commands which zoom to a given rectangle.
Remarks
The given insets can be seen as margins around a given content, hence the name. For example, for the fitContent operation these are the margins around the contentRect.
This influences the amount of visible whitespace in the view coordinate system around the contentRect 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, or an ILookup returning an IBoundsProvider as parameter.
Note limits that are enforced by the viewportLimiter have a higher priority than these insets.
The default is (10,10,10,10)
See Also
Defined in
Gets and sets the Rectangle in world coordinates that holds the contents.
Remarks
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.
See Also
Sample Graphs
Gets a list of the active TouchDevices at the time of invocation.
Gets or sets the scaling factor for HTML5 canvas and WebGL rendering.
Remarks
Defined in
Gets the div element that represents this instance.
Defined in
Gets or sets the area in view coordinates the mouse needs to stay in before multiple clicks are considered multiple single clicks instead of multi-clicks.
Remarks
(10, 10).See Also
Defined in
Gets or sets the value of the double click time.
Remarks
See Also
Defined in
Gets or sets the area in view coordinates the touch pointer needs to stay in before multiple taps are considered multiple single taps instead of multi-taps.
Remarks
(20, 20).See Also
Defined in
Gets or sets the value of the double tap time.
Remarks
See Also
Defined in
Gets or sets the area in view coordinates the mouse may stay in before a movement is considered a drag.
Remarks
If the mouse is moved within this area longer than dragTime milliseconds, the movement will be considered a drag, nevertheless. The larger the area the later a mouse movement will be recognized as a drag. This influences the click-sensitivity, since a mouse button release is only considered a click if there was no drag since the last mouse button press. The default value is (5, 5).
Note that for pen input, the dragSizeTouch is considered.
See Also
Defined in
Gets or sets the area in view coordinates the touch point may stay in before a movement is considered a drag.
Remarks
If the finger is moved within this area longer than dragTime milliseconds, the movement will be considered a drag, nevertheless. The larger the area the later a finger movement will be recognized as a drag. This influences the sensitivity to taps, since lifting the finger is only considered a tap if there was no drag since the touch point appeared. The default value is (20, 20).
This drag size is also considered for pen input.
See Also
Defined in
Gets or sets the value of the drag time.
Remarks
See Also
Defined in
Gets the dropTarget associated with this instance.
Defined in
Gets a value indicating whether this CanvasComponent is currently focused.
Defined in
Gets or sets the ICanvasObjectGroup which is used for visual markers of the currentItem.
Remarks
See Also
Defined in
Gets or sets the focusIndicatorManager property.
Remarks
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.
If the property has not been explicitly initialized upon first access, the factory method createGraph will be called.
See Also
Gets or sets the graphModelManager property.
Remarks
If the field has not yet been initialized upon first access, the factory method createGraphModelManager will be called.
Setting a new value to this property will install the new GraphModelManager and uninstall the old one.
Gets a value indicating whether this instance currently has mouse capture.
Defined in
Gets or sets the ICanvasObjectGroup which is used for visual markers to highlight IModelItems.
Remarks
See Also
Defined in
Gets or sets the highlightIndicatorManager property.
Remarks
Examples
// Add a highlight
graphComponent.highlightIndicatorManager.addHighlight(node)
// Determine whether an item is highlighted
graphComponent.highlightIndicatorManager.selectionModel.isSelected(node)
// Remove it again
graphComponent.highlightIndicatorManager.removeHighlight(node)
// Clear all highlights
graphComponent.highlightIndicatorManager.clearHighlights()// Add a highlight
graphComponent.highlightIndicatorManager.addHighlight(node)
// Determine whether an item is highlighted
graphComponent.highlightIndicatorManager.selectionModel!.isSelected(node)
// Remove it again
graphComponent.highlightIndicatorManager.removeHighlight(node)
// Clear all highlights
graphComponent.highlightIndicatorManager.clearHighlights()See Also
Gets or sets the radius of the area around the mouse 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 this value and hitTestRadiusTouch, based on the last input event.
The default value is 3.
See Also
Defined in
Gets or sets the radius of the area around the touch point 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 this value and hitTestRadius, based on the last input event.
The default value is 10.
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 AS_NEEDED.
When setting either scrollbar policy (or both) to AS_NEEDED_DYNAMIC both scrollbars overlay the content and vanish automatically when not currently interacted with.
See Also
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()graphComponent.inputMode = new GraphViewerInputMode()See Also
Defined in
Gets or sets the InputModeContext property.
Remarks
This context object is passed to IInputMode instances during installation and removal.
If the field has not yet been initialized upon first access, the factory method createInputModeContext will be called.
Defined in
Gets the LookupChain that can be used do decorate the lookup call in the inputModeContext.
Defined in
Gets or sets the ICanvasObjectGroup where the IInputModes should add their temporary content to.
Remarks
This group by default is in front of the contentGroup.
If the field has not yet been initialized upon first access, the factory method createInputModeGroup will be called. Upon change the InputModeGroupChanged event will be fired.
Examples
In this example a custom IReshapeHandler installs a ghost visualization in the inputModeGroup.
/**
* @param {!IInputModeContext} context
*/
initializeReshape(context) {
this.originalHandler.initializeReshape(context)
// ...
const node = new SimpleNode({
layout: this.originalHandler.bounds,
style: new ShapeNodeStyle({
fill: 'transparent',
stroke: '2px solid gray'
})
})
this.shadowObject = context.canvasComponent.inputModeGroup
.addChild(node, GraphModelManager.DEFAULT_NODE_DESCRIPTOR)
.toFront()
}
/**
* @param {!IInputModeContext} context
* @param {!Rect} originalBounds
*/
cancelReshape(context, originalBounds) {
this.shadowObject.remove()
this.originalHandler.cancelReshape(context, originalBounds)
}initializeReshape(context: IInputModeContext) {
this.originalHandler.initializeReshape(context)
// ...
const node = new SimpleNode({
layout: this.originalHandler.bounds,
style: new ShapeNodeStyle({
fill: 'transparent',
stroke: '2px solid gray'
})
})
this.shadowObject = context
.canvasComponent!.inputModeGroup.addChild(
node,
GraphModelManager.DEFAULT_NODE_DESCRIPTOR
)
.toFront()
}
cancelReshape(context: IInputModeContext, originalBounds: Rect) {
this.shadowObject.remove()
this.originalHandler.cancelReshape(context, originalBounds)
}The sample shows only the initializeReshape method where the ghost is installed and cancelReshape where the ghost is removed, again.
See Also
Defined in
Gets a value indicating whether at least one finger is on the touch screen.
Defined in
Gets the last location provided by a pointing device (for instance mouse or touch).
Remarks
See Also
Defined in
Gets the last mouse event or touch event triggered by this instance.
See Also
Defined in
Gets the last mouse event triggered by this instance.
Defined in
Gets the last touch event triggered by this instance.
Defined in
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 value of the long press time.
Remarks
See Also
context-menu event, we recommend to lower this value to (e.g.) 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 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
- 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. Zoooming will happen when the mouseWheelZoomEventRecognizer is satisfied (by default, this is pressing Control while turning the mouse wheel).
On touchpads, this combination enables bidirectional panning with two fingers and pinch zooming. - 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.
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 of 5 pixels. To speed up scrolling, set a larger value, to slow down scrolling, set a smaller value.
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 is CTRL_IS_DOWN.
Signature Details
function(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
Returns
- boolean
trueif theevtis considered to be handled.
Examples
graphComponent.mouseWheelZoomEventRecognizer =
KeyEventRecognizers.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(eventSource: any, evt: EventArgs) : boolean
Parameters
- eventSource - any
- The source of the event.
- evt - EventArgs
- The arguments of the event to be decided to handle.
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 div 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 to prevent scrolling if the element gets focused.
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 resources for this instance.
Remarks
Defined in
Gets a value indicating whether the UI is right to left.
Remarks
Defined in
Gets the root of the scene graph.
Gets or sets the selection model that is used for this control.
Remarks
The selection model instance needs to be adjusted, normally if the graph instance is changed. If the field has not yet been initialized upon first access, the factory method createSelection will be called.
A concept related to selection is the currentItem, which represent the currently focused item. This is also shown in a selection-like fashion.
Examples
// Determine whether a node is selected
const selected = graphComponent.selection.isSelected(node)
// Deselect an edge
graphComponent.selection.setSelected(edge, false)
// Iterate over selected nodes
for (const n of graphComponent.selection.selectedNodes) {
// ...
}See Also
Sample Graphs
Gets or sets the ICanvasObjectGroup that should be used by the application code to put the selection indicators in.
Remarks
See Also
Defined in
Gets or sets the selectionIndicatorManager property.
Remarks
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 or sets how size changes of this CanvasComponent will be detected.
Remarks
CanvasComponent comes with its own methods to detect whether the size of its div element has changed. This is needed to update its size accordingly.
The preferred and default mode is SENSOR. If that is not available, TIMER is used as fall back instead.
If the div of this control is removed from the DOM and the current mode is TIMER, the timer will be stopped to allow garbage collection. Thus, if the element is later re-added to the DOM, you must explicitly set the timer mode again.
SENSOR will automatically detect reinsertions into the DOM except in Internet Explorer 9. Thus, if the element is re-added to the DOM, you must explicitly set the timer mode again in this browser.
Defined in
Gets the control's svgDefsManager
Defined in
Gets or sets the theme of this component that is used to configure the general look and feel of its interaction visualization.
Remarks
While there are other means to customize each of those visualizations individually, setting a custom theme allows you to switch to another visualization style or different color set in a one-liner:
// set a new Theme using the round variant, a scale of two and orange/blue colors
graphComponent.theme = new Theme(
'simple-round',
'#ff6c00',
'#a4f0ff',
'#242265',
2
)The default theme uses the following properties:
- ThemeVariant: CLASSIC
- primaryColor: BLACK
- secondaryColor: a blue color using the value '#3399FF'
- backgroundColor: WHITE
- scale: 1
See Also
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 AS_NEEDED.
When setting either scrollbar policy (or both) to AS_NEEDED_DYNAMIC both scrollbars overlay the content and vanish automatically when not currently interacted with.
See Also
Defined in
Gets or sets the current view point.
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 another 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
Cleans up by removing any connection from the div 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 view port limit as returned by the viewportLimiter are obeyed.
Compares two ICanvasObject instances that are live in this canvas.
Remarks
Parameters
A map of options to pass to the method.
- canvasObject1 - ICanvasObject
- the first object to compare
- canvasObject2 - ICanvasObject
- the second object to compare
Returns
- ↪number
- 0 if canvasObject1 == canvasObject2, >0 if canvasObject1 is painted before canvasObject2, <0 if canvasObject1 is painted after canvasObject2
Defined in
Replaces the cursor to account for projection.
Parameters
A map of options to pass to the method.
- cursor - Cursor
- The cursor to adjust, can be
null.
Defined in
Factory method for the BackgroundGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup
Defined in
Factory method for the contentGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup
Defined in
Factory method for the focusGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup
Defined in
Factory method for the focusIndicatorManager property.
Remarks
Returns
- ↪FocusIndicatorManager<IModelItem>
- A new instance of GraphFocusIndicatorManager.
Factory method for the graph property.
Remarks
Returns
- ↪IGraph
- a new instance of DefaultGraph
Creates the default instance to use if no custom instance has been set.
Returns
- ↪GraphClipboard
- A default GraphClipboard instance.
Factory method for the graphModelManager property.
Remarks
Returns
- ↪GraphModelManager
- a new instance of GraphModelManager.
Factory method for the highlightGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup
Defined in
Factory method for the highlightIndicatorManager property.
Remarks
Returns
- ↪HighlightIndicatorManager<IModelItem>
- A new instance of GraphHighlightIndicatorManager.
Factory method for the inputModeContext property.
Remarks
Returns
- ↪IInputModeContext
- a new instance of IInputModeContext that has this instance set as its canvasComponent and uses this instance's inputModeContextLookup method to satisfy requests.
Defined in
Factory method for the inputModeGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup
Defined in
Creates an appropriate render context 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
Factory method for the selection property.
Remarks
Returns
- ↪IGraphSelection
- a new instance of GraphSelection
Factory method for the selectionGroup property.
Remarks
Returns
- ↪ICanvasObjectGroup
- a new instance of ICanvasObjectGroup.
Defined in
Factory method for the selectionIndicatorManager property.
Remarks
Returns
- ↪SelectionIndicatorManager<IModelItem>
- A new instance of GraphSelectionIndicatorManager
Ensures that the provided bounds in world coordinates are visible by adjusting the viewport accordingly.
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.
- viewportInsets - Insets
- Insets in view coordinates to keep free around the content.
Returns
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.
Defined in
Adjusts the view port to fully encompass the contentRect.
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 contentRect 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 rectangle for the contentGroup considering the provided insets and adjusts the viewport to encompass the contents.
Parameters
A map of options to pass to the method.
- insets - Insets
- The visible whitespace around the actual contentRect.
- animated - boolean
- Whether to change the viewport in an animated fashion.
Returns
See Also
Focuses the div element that is backing this instance.
Defined in
Calculates the bounds for a given canvas object in the scene graph.
Remarks
Parameters
A map of options to pass to the method.
- canvasObject - ICanvasObject
- the canvas object to query the bounds from
Returns
- ↪Rect
- the non-
nullbounds
Defined in
Returns the top most canvas object instance that is hit at the given coordinate set.
Remarks
Parameters
A map of options to pass to the method.
- location - Point
- the coordinates of the query in the world coordinate system
Defined in
Enumerates over all possible ICanvasObject instances in the tree below the given group.
Parameters
A map of options to pass to the method.
- root - ICanvasObjectGroup
- The group at which the enumeration should yield all the children recursively. If omitted/
null, this will iterate over all elements in the tree.
Returns
- ↪IEnumerable<ICanvasObject>
- An enumerable for all ICanvasObjects in the tree below the given group.
Defined in
Returns a list of all canvas objects in hit order at the given world coordinate location.
Remarks
Parameters
A map of options to pass to the method.
- location - Point
- the coordinates of the query in the world coordinate system
Returns
- ↪IEnumerable<ICanvasObject>
- an enumerable of canvas object that are hit in reverse painting order
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
/**
* @param {!Point} newCenter
* @param {number} newZoom
* @param {!ViewportChanges} viewportChanges
* @returns {!TimeSpan}
*/
getViewportAnimationDuration(newCenter, newZoom, viewportChanges) {
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
)
}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
Gets the Visual that is currently visualizing the given ICanvasObject.
Remarks
null. However if a visual is currently being displayed for the given canvas object, it will be returned. This method should be used with care. Manipulation of the given instance should normally be done through the corresponding IVisualCreator that created the visual in the first place. This method rather serves as a utility method for UI testing frameworks and similar use cases.Parameters
A map of options to pass to the method.
- canvasObject - ICanvasObject
- The canvas object.
Returns
- ↪Visual
- The Visual that is currently used by the
canvasObject. This may benullif the givencanvasObjectis currently not visible.
Defined in
Retrieves the IVisualCreator for a given ICanvasObject.
Parameters
A map of options to pass to the method.
- canvasObject - ICanvasObject
- the canvas object to query the visual creator implementation from
Returns
- ↪IVisualCreator
- an instance of the visual creator interface
See Also
Defined in
Assures that the content rectangle 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 rectangle
Defined in
hitElementsAt
(location: Point, root?: ICanvasObjectGroup, filter?: function(ICanvasObject):boolean) : IEnumerable<ICanvasObject>Enumerates all hit elements in the canvas below the given group that are accepted by a given filter.
Remarks
Parameters
A map of options to pass to the method.
- location - Point
- the coordinates to perform the hit test at
- root - ICanvasObjectGroup
- the root of the scene graph to use
- filter - function(ICanvasObject):boolean
- The predicate that decides whether a given canvas object should be considered for testing at all or
null.Signature Details
function(obj: ICanvasObject) : booleanRepresents the method that defines a set of criteria and determines whether the specified object meets those criteria.Parameters
- obj - ICanvasObject
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
Returns
- ↪IEnumerable<ICanvasObject>
- a live enumeration of the elements that are hit
See Also
Defined in
hitElementsAt
(context: IInputModeContext, location: Point, root?: ICanvasObjectGroup, filter?: function(ICanvasObject):boolean) : IEnumerable<ICanvasObject>Enumerates all hit elements in the canvas below the given group that are accepted by a given filter using a specific ICanvasContext as the argument to the isHit method.
Remarks
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context instance to pass to isHit.
- location - Point
- the coordinates to perform the hit test at
- root - ICanvasObjectGroup
- the root of the scene graph to use
- filter - function(ICanvasObject):boolean
- The predicate that decides whether a given canvas object should be considered for testing at all or
null.Signature Details
function(obj: ICanvasObject) : booleanRepresents the method that defines a set of criteria and determines whether the specified object meets those criteria.Parameters
- obj - ICanvasObject
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
Returns
- ↪IEnumerable<ICanvasObject>
- a live enumeration of the elements that are hit
See Also
Defined in
Used by the default implementation of inputModeContext to resolve lookup calls.
Parameters
A map of options to pass to the method.
- type - Class
- 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 controls 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
Calculates the hit tests a given canvas object in the scene graph.
Remarks
IHitTestable returned by the descriptor this method returns false.Parameters
A map of options to pass to the method.
- canvasObject - ICanvasObject
- the canvas object to query the bounds from
- location - Point
- the coordinates of the query in the world coordinate system
Returns
- ↪boolean
- whether the canvas object is hit at the given coordinates
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 reobtained for subsequent use.Type Parameters
- T: any
Parameters
A map of options to pass to the method.
- type - Class<T>
- The type for which an instance shall be returned.
Returns
- ↪T
- an instance that is assignable to 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
morphLayout
(layout: ILayoutAlgorithm, morphDuration?: TimeSpan, layoutData?: LayoutData, animateViewport?: boolean, easedAnimation?: boolean, updateContentRect?: boolean, allowUserInteraction?: boolean, automaticEdgeGrouping?: boolean, configureTableLayout?: boolean, considerViewportLimiter?: boolean, fixPorts?: boolean, hideEdgesAtEdges?: boolean, portAdjustmentPolicy?: PortAdjustmentPolicy, portLabelPolicies?: ItemMapping<ILabel,PortLabelPolicy>, targetBoundsInsets?: Insets, labelPreferredPlacementPolicy?: LabelPreferredPlacementPolicy) : 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.
- morphDuration - TimeSpan
- The duration of the animation of the layout.
- layoutData - LayoutData
- The layout data to apply.
- animateViewport - boolean
- A value indicating whether the viewport should be animated to the new bounds of the graph.
- easedAnimation - boolean
- A value indicating whether to use eased animation.
- updateContentRect - boolean
- A value indicating whether the content rectangle property of the CanvasComponent
- allowUserInteraction - boolean
- A value indicating whether user interaction should be allowed during the animation.
- automaticEdgeGrouping - boolean
- A value indicating whether edge groups are automatically created for edges that are connected to the same port.
- configureTableLayout - boolean
- considerViewportLimiter - boolean
- A value that controls whether strong port constraints are automatically created.
- fixPorts - boolean
- A value that controls whether strong port constraints are automatically created.
- hideEdgesAtEdges - boolean
- A value that controls whether edges at other edges will be hidden from the layout graph or included.
- portAdjustmentPolicy - PortAdjustmentPolicy
- The policy that specifies how port locations should be adjusted after a layout has been calculated.
- portLabelPolicies - ItemMapping<ILabel,PortLabelPolicy>
- targetBoundsInsets - Insets
- the insets (in world coordinates) that will be added to the content rectangle when calculating the target viewport.
- labelPreferredPlacementPolicy - LabelPreferredPlacementPolicy
- The policy that specifies how edge labels should be treated by the layout algorithm.
Returns
See Also
Class.ensure(LayoutExecutor) More information.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 - MouseEventArgs
- 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 - MouseEventArgs
- the event describing the action
See Also
Defined in
Raises the PrepareRenderContext.
Parameters
A map of options to pass to the method.
- evt - PrepareRenderContextEventArgs
- The event arguments to raise.
See Also
Defined in
Raises the UpdatedVisual.
Raises the UpdatingVisual.
Adds a callback to the invocation chain and triggers the chain's execution.
Remarks
Parameters
A map of options to pass to the method.
- callback - Function
- The function that should be executed.
- args - Object
- The arguments with which the function should be called.
Defined in
Sets the content rectangle.
Remarks
See Also
Defined in
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
Converts view coordinates to the html page coordinates.
Converts world coordinates to view coordinates expressed in the control's coordinate system.
Converts html page coordinates to view coordinates.
Converts coordinates expressed in the component's coordinate system to world coordinates.
Converts html page coordinates to world coordinates.
Updates the contentRect to encompass the bounds by all elements in the current scene graph plus the given margins.
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 determine the dirty canvas objects using the isDirty method and 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 the execution of 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 controls upper left corner in the intermediate coordinate system
See Also
Defined in
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 controls upper left corner in the intermediate coordinate system.
See Also
Defined in
Sets the zoom level and viewport center to the given values.
Remarks
Parameters
A map of options to pass to the method.
- center - Point
- The new center of the viewport in world coordinates.
- zoom - number
- The new zoom level.
Examples
graphComponent.zoomTo(new Point(42, 42), 2)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.
- center - Point
- The new center of the viewport in world coordinates.
- zoom - number
- The new zoom level.
Returns
- ↪Promise<void>
- A Promise that will resolve once the animation is finished.
Examples
await graphComponent.zoomToAnimated(new Point(42, 42), 2)
// 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 will resolve once the animation is finished.
Examples
await graphComponent.zoomToAnimated(new Rect(50, 30, 120, 75))
// Subsequent code runs after the animation completesSee Also
Defined in
Events
Occurs when the backgroundGroup property has been changed.
Defined in
Event Registration
addBackgroundGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeBackgroundGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs when the contentGroup property has been changed.
Defined in
Event Registration
addContentGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeContentGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs when the margins for the fit content operation have been changed.
Occurs when the content rectangle has been changed.
Occurs when the currentItem property has changed its value.
Event Registration
addCurrentItemChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeCurrentItemChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: this, evt: PropertyChangedEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PropertyChangedEventArgs
- An object that contains the event data.
Occurs when the focusGroup property has been changed.
Defined in
Event Registration
addFocusGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeFocusGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs when the graph property has been changed.
Event Registration
addGraphChangedListener(function(this, ItemEventArgs<IGraph>):void)Event Deregistration
removeGraphChangedListener(function(this, ItemEventArgs<IGraph>):void)Signature Details
function(sender: this, evt: ItemEventArgs<IGraph>)
Parameters
- sender - this
- The source of the event.
- evt - ItemEventArgs<IGraph>
- An object that contains the event data.
Occurs when the highlightGroup property has been changed.
Defined in
Event Registration
addHighlightGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeHighlightGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs when the inputModeContext property has been changed.
Defined in
Event Registration
addInputModeContextChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeInputModeContextChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: this, evt: PropertyChangedEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PropertyChangedEventArgs
- An object that contains the event data.
Occurs when the inputModeGroup property has been changed.
Defined in
Event Registration
addInputModeGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeInputModeGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs when keys are being pressed, i.e., on keydown.
Remarks
Defined in
Event Registration
addKeyDownListener(function(this, KeyEventArgs):void)Event Deregistration
removeKeyDownListener(function(this, KeyEventArgs):void)Signature Details
function(sender: this, evt: KeyEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - KeyEventArgs
- An object that contains the event data.
Occurs when keys are being typed, i.e., on keypress.
Remarks
Defined in
Event Registration
addKeyPressListener(function(this, KeyEventArgs):void)Event Deregistration
removeKeyPressListener(function(this, KeyEventArgs):void)Signature Details
function(sender: this, evt: KeyEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - KeyEventArgs
- An object that contains the event data.
Occurs when keys are being released, i.e., on keyup.
Remarks
Defined in
Event Registration
addKeyUpListener(function(this, KeyEventArgs):void)Event Deregistration
removeKeyUpListener(function(this, KeyEventArgs):void)Signature Details
function(sender: this, evt: KeyEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - KeyEventArgs
- An object that contains the event data.
Occurs when the user clicked the mouse.
Remarks
This event delivers MouseEventArgs in world coordinates using double precision floating points.
This happens if press and release happens at the same position.
Defined in
Event Registration
addMouseClickListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseClickListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when a mouse button has been pressed, i.e., on mousedown.
Remarks
Defined in
Event Registration
addMouseDownListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseDownListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse is being moved while at least one of the mouse buttons is pressed.
Remarks
Defined in
Event Registration
addMouseDragListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseDragListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse has entered the canvas.
Remarks
This event delivers MouseEventArgs 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 MouseEventArgs does not include this button unless the browser supports the property MouseEvent.buttons. See the Known Issues for more details.
Defined in
Event Registration
addMouseEnterListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseEnterListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse has exited the canvas.
Remarks
This event delivers MouseEventArgs 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
Event Registration
addMouseLeaveListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseLeaveListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse capture has been lost.
Remarks
Defined in
Event Registration
addMouseLostCaptureListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseLostCaptureListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse has been moved in world coordinates.
Remarks
This event delivers MouseEventArgs 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
Event Registration
addMouseMoveListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseMoveListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse button has been released, i.e., on mouseup.
Remarks
Defined in
Event Registration
addMouseUpListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseUpListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs when the mouse wheel has turned.
Remarks
Defined in
Event Registration
addMouseWheelListener(function(this, MouseEventArgs):void)Event Deregistration
removeMouseWheelListener(function(this, MouseEventArgs):void)Signature Details
function(sender: this, evt: MouseEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - MouseEventArgs
- An object that contains the event data.
Occurs before the visual tree is painted to prepare the IRenderContext.
Defined in
Event Registration
addPrepareRenderContextListener(function(this, PrepareRenderContextEventArgs):void)Event Deregistration
removePrepareRenderContextListener(function(this, PrepareRenderContextEventArgs):void)Signature Details
function(sender: this, evt: PrepareRenderContextEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PrepareRenderContextEventArgs
- An object that contains the event data.
Occurs when the selectionGroup property has been changed.
Defined in
Event Registration
addSelectionGroupChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeSelectionGroupChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Occurs if the selection instance has been changed, not when the selected items change.
Remarks
See Also
Event Registration
addSelectionModelChangedListener(function(this, ItemEventArgs<IGraphSelection>):void)Event Deregistration
removeSelectionModelChangedListener(function(this, ItemEventArgs<IGraphSelection>):void)Signature Details
function(sender: this, evt: ItemEventArgs<IGraphSelection>)
Parameters
- sender - this
- The source of the event.
- evt - ItemEventArgs<IGraphSelection>
- An object that contains the event data.
Occurs when the size of this component is changed.
See Also
Defined in
Event Registration
addSizeChangedListener(function(this, SizeChangedEventArgs):void)Event Deregistration
removeSizeChangedListener(function(this, SizeChangedEventArgs):void)Signature Details
function(sender: this, evt: SizeChangedEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - SizeChangedEventArgs
- An object that contains the event data.
Occurs when the user performed a tap gesture with a finger on the touch screen.
Remarks
An event that delivers TouchEventArgs in world coordinates using double precision floating points when the user performed a tap gesture with a finger on the touch screen.
This happens if down and up happens at the same position.
Defined in
Event Registration
addTouchClickListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchClickListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when a finger has been put on the touch screen.
Remarks
Defined in
Event Registration
addTouchDownListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchDownListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when a finger on the touch screen has entered the canvas.
Remarks
Defined in
Event Registration
addTouchEnterListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchEnterListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when a finger on the touch screen has exited the canvas.
Remarks
Defined in
Event Registration
addTouchLeaveListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchLeaveListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when the user performed a long press gesture with a finger on the touch screen.
Remarks
This event delivers TouchEventArgs in world coordinates using double precision floating points.
This happens if the finger is held in the same position for the duration specified in longPressTime after a TouchDown.
Defined in
Event Registration
addTouchLongPressListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchLongPressListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when the touch capture has been lost.
Remarks
Defined in
Event Registration
addTouchLostCaptureListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchLostCaptureListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when a finger has been moved on the touch screen.
Remarks
Defined in
Event Registration
addTouchMoveListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchMoveListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs when a finger has been removed from the touch screen.
Remarks
Defined in
Event Registration
addTouchUpListener(function(this, TouchEventArgs):void)Event Deregistration
removeTouchUpListener(function(this, TouchEventArgs):void)Signature Details
function(sender: this, evt: TouchEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - TouchEventArgs
- An object that contains the event data.
Occurs after the visual tree has been updated.
Occurs before the visual tree is updated.
Occurs when the viewport property has been changed.
See Also
Defined in
Event Registration
addViewportChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removeViewportChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: this, evt: PropertyChangedEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - PropertyChangedEventArgs
- An object that contains the event data.