CanvasComponent

The canvas will be empty with no associated inputMode.

All child nodes of the div element are added to the overlayPanel.

The canvas will be empty with no associated inputMode.

All child nodes of the div element are passed to the overlayPanel.

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.

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)

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.

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)

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.

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.

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.

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.

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.

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.

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.

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.

• 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.

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.

This recognizer is only used if mouseWheelBehavior has both the SCROLL and ZOOM flags.

The default is CTRL_IS_DOWN.

By default this feature is enabled.

This property enables/disables the following commands:

• INCREASE_ZOOM
• ZOOM
• DECREASE_ZOOM
• SCROLL_PAGE_DOWN
• SCROLL_PAGE_UP
• SCROLL_PAGE_LEFT
• SCROLL_PAGE_RIGHT

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.

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.

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.

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.

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

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.

By default there are no limits set on the explorable region.

When a projection is set, the viewportLimiter is ignored.

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.

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

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.

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.

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.

This event delivers MouseEventArgs in world coordinates using double precision floating points.

This happens if press and release happens at the same position.

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.

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.

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.

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.

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.