CanvasComponent

The canvas will be empty with no associated inputMode.

All child nodes of the htmlElement 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 padding of the control specified using this property, the control will automatically scroll.

The default is (10,10,10,10)

This influences the amount of visible whitespace in the view coordinate system around the contentBounds after a fitContent operation. The default value is (10,10,10,10).

For the ZOOM_TO_CURRENT_ITEM on a GraphComponent, the margins define the visible whitespace around the rectangle in which the respective item is centered. This way it is also possible to get asymmetric whitespace around the item. The same applies to the ZOOM command with a Rect, IBoundsProvider, or an ILookup returning an IBoundsProvider as parameter.

Note limits that are enforced by the viewportLimiter have a higher priority than these margins.

The default is (10,10,10,10)

This value converted into world coordinates can be queried from within the IHitTestable implementation from the hitTestRadius property, which automatically takes the zoom level into account. Note that the context's property automatically switches between the value for mouse, touch, and stylus, based on the last input event.

The default value is 3 for MOUSE, 6 for PEN, and 12 for TOUCH.

Scrollbars don't need to be displayed in order to move the viewport. This can be achieved programmatically or using special IInputMode instances. The default is AUTO.

When setting either scrollbar policy (or both) to AUTO both scrollbars overlay the content and vanish automatically when not currently interacted with.

This recognizer is only used if mouseWheelBehavior has the SCROLL flag.

The default is SHIFT_IS_DOWN.

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.

Small pointer moves are ignored, so jittery pointer types like PEN or TOUCH will not block the event.

The default value is 250 milliseconds.

Small pointer moves are ignored, so jittery pointer types like PEN or TOUCH will not block the event.

The default value is 750 milliseconds.

Valid values for this property are as follows:

• NONE – No action is being taken when turning the mouse wheel.
• ZOOM – The zoom level of the viewport is adjusted when turning the mouse wheel or pinching on a touchpad. This is the default.
• SCROLL – The viewport is scrolled vertically when turning the mouse wheel, and horizontally when turning the mouse wheel while pressing the Shift key. No modifier key is required if bidirectional wheel events are available (e.g. touchpad or two-axis mouse wheel).
• SCROLL, ZOOM – Both SCROLL and ZOOM can be combined to allow both scrolling and zooming. The default action without any modifiers pressed is scrolling vertically. Pressing Shift while turning the mouse wheel will scroll horizontally. Zooming will happen when the mouseWheelZoomEventRecognizer is satisfied (by default this is pressing Control while turning the mouse wheel).
• Any of the above options, except for NONE can be combined with ONLY_WHEN_FOCUSED to allow the interaction only when the CanvasComponent is focused.

The mouseWheelBehavior can be omitted by calling preventDefault on the event args of the wheel event.

Scrolling can work either a few lines at a time (per notch of the scroll wheel) or one page at a time. This is a system setting. This property controls how many pixels represent a line if scrolling is done by line. In case scrolling is done by page, this property has no effect.

The default value is 25 pixels. To speed up scrolling, set a larger value, to slow down scrolling, set a smaller value. Set negative values to invert the scrolling/panning behavior, e.g., for trackpads.

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

The default implementation detects whether ctrl or shift have been pressed separately or a precision trackpad is used for panning. In these cases, false will be returned, enabling zooming with the mouse both via scroll wheels and pinch zooming via trackpads.

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 container element is passed to the constructor of this CanvasComponent, all its child nodes are passed to this overlay panel. Apart from that, content may be added to and removed from this panel at any time.

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.

Scrollbars don't need to be displayed in order to move the viewport. This can be achieved programmatically or using special IInputMode instances. The default is AUTO.

When setting either scrollbar policy (or both) to AUTO both scrollbars overlay the content and vanish automatically when not currently interacted with.

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 other 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

See the documentation of the Command which parameter can be used with the given command.

It is strongly advised to query this method before calling executeCommand.

Some commands can only be executed if a GraphViewerInputMode or GraphEditorInputMode is installed.

This method should be called when the component is not needed anymore and should be garbage collected. After calling this method the component must not be used anymore.

During this call, 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.

See the documentation of the Command for which parameters can be used with the given command.

It is strongly advised to query canExecuteCommand whether the command can be executed.

Some commands can only be executed if a GraphViewerInputMode or GraphEditorInputMode is installed.

This is usually used to make sure a large graph fits into the viewport. The limitFitContentZoom property controls the behavior for small graphs. If limitFitContentZoom is true, the maximum zoom level is 1; setting the property to false will zoom in far enough so that even small graphs fit the viewport (limited to maximumZoom, though).

The viewportLimiter is taken into account.

If a projection is set, the bounding rectangle of the contentBounds is used and and viewportLimiter is ignored.

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 create or update the visuals that make up the visual tree.

Note that most of the time this method does not need to be called by client code. Instead calling invalidate will ultimately trigger this method. However invalidation calls will be coalesced and the actual execution of the update will be delayed until the next event dispatch.

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

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

This refers to all supported pointer clicks, i.e. mouse clicks, touch taps, and stylus clicks.

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

If the mouse enters this canvas control with a mouse button pressed, this event is fired instantly but the current button state reported by the PointerEventArgs does not include this button unless the browser supports the property MouseEvent.buttons. See the Known Issues for more details.

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

If the mouse leaves this canvas control with the mouse button pressed, this event is deferred until the mouse button is released. Thus, this event will not interfere with the typical mouse button event cycle.

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

This happens if the pointer is held in the same position for the duration specified in longPressTime after a pointer-down.

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

Move elements are delivered if no mouse button is pressed. This event will be fired, too, if the mouse does not move but the world coordinates to which the current mouse position maps change. E.g. this will happen if the zoom level or the view point is changed.

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

The default mouseWheelBehavior can be omitted by calling preventDefault on the event args.