class sap.ui.vk.svg.Viewport

Control sample: sap.ui.vk.svg.Viewport
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/vk/svg/Viewport
Application Component: CA-UI5-VTK

Provides a control for SVG representation of 2D drawing data.


Constructor

Constructor for a SVG viewport.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.ui.vk.svg.Viewport()

Borrowed Properties

Name Type Default Value Description
backgroundColorBottom sap.ui.core.CSSColor rgba(255, 255, 255, 1)

Viewport background bottom color in the CSS Color format

Visibility: public
backgroundColorTop sap.ui.core.CSSColor rgba(50, 50, 50, 1)

Viewport background top color in the CSS Color format

Visibility: public
disableHotspotHovering boolean false

Disables hotspot hovering

Visibility: public
freezeCamera boolean false

Freeze camera

Visibility: public
height sap.ui.core.CSSSize 100%

Viewport height

Visibility: public
hotspotColor sap.ui.core.CSSColor rgba(89, 0, 0, 0.73)

Color used for highlighting hotspots in the CSS Color format

Visibility: public
hotspotColorABGR int 1493172411

Color used for highlighting hotspots in the ABGR format

Visibility: public
keepOutputSize boolean false Visibility: public
renderMode sap.ui.vk.RenderMode Default

Viewport render mode

Visibility: public
selectionDisplayMode sap.ui.vk.SelectionDisplayMode Highlight

Selection display mode

Visibility: public
selectionMode sap.ui.vk.SelectionMode Sticky

Selection mode

Visibility: public
showAllHotspots boolean false

Enables or disables showing of all hotspots

Visibility: public
showAllHotspotsTintColor sap.ui.core.CSSColor rgba(255, 255, 0, .35)

Color used to highlight all hotspots when the showAllHotspots property has a value of true.

Visibility: public
showDebugInfo boolean false

Shows or hides the debug info.

Visibility: public
showSafeArea boolean false

Shows or hides the Safe Area

Visibility: public
showSelectionBoundingBoxes boolean true

Show selection bounding boxes

Visibility: public
width sap.ui.core.CSSSize 100%

Viewport width

Visibility: public

Borrowed Aggregations

Name Cardinality Type Description
annotations 0..n sap.ui.vk.Annotation

HTML Annotations present in the active view

content 0..n sap.ui.core.Control

The controls inside the viewport.

outputSettings 0..1 sap.ui.vk.OutputSettings

Output size settings of the viewport

safeArea 0..1 sap.ui.vk.SafeArea

SafeArea control for viewport


Events Overview

Event Description
cameraChanged

This event bubbles up the control hierarchy.

hotspotEnter

This event bubbles up the control hierarchy.

hotspotLeave

This event bubbles up the control hierarchy.

cameraChanged

This event bubbles up the control hierarchy.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
offset float[]

Returns a new camera offset.

zoom float

Returns a new camera zoom factor.

hotspotEnter

This event bubbles up the control hierarchy.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
nodeRef any

hotspotLeave

This event bubbles up the control hierarchy.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
nodeRef any

Methods Overview

Method Description
activateView

Activates the view based on view object passed

attachCameraChanged

Attaches event handler fnFunction to the cameraChanged event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

attachHotspotEnter

Attaches event handler fnFunction to the hotspotEnter event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

attachHotspotLeave

Attaches event handler fnFunction to the hotspotLeave event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

detachCameraChanged

Detaches event handler fnFunction from the cameraChanged event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

detachHotspotEnter

Detaches event handler fnFunction from the hotspotEnter event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

detachHotspotLeave

Detaches event handler fnFunction from the hotspotLeave event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

sap.ui.vk.svg.Viewport.extend

Creates a new subclass of class sap.ui.vk.svg.Viewport with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.vk.ViewportBase.extend.

fireCameraChanged

Fires event cameraChanged to attached listeners.

fireHotspotEnter

Fires event hotspotEnter to attached listeners.

fireHotspotLeave

Fires event hotspotLeave to attached listeners.

getCurrentView

Get current view - remembered when activateView function is called

getImage

Returns viewport content as an image of desired size.

sap.ui.vk.svg.Viewport.getMetadata

Returns a metadata object for class sap.ui.vk.svg.Viewport.

getOutputSize

Gets position and size of the viewport square. The information can be used for making calculations when restoring Redlining elements.

getScene

Gets the Viewport Scene

getViewInfo

Retrieves information about the current camera view in the scene, and saves the information in a JSON-like object. The information can then be used at a later time to restore the scene to the same camera view using the setViewInfo method.

onSetViewStateManager
queueCommand

Queues a command for execution during the rendering cycle. All gesture operations should be called using this method.

setScene

Attaches the scene to the Viewport for rendering.

setViewInfo

Sets the current scene to use the camera view information acquired from the getViewInfo method.
Internally, the setViewInfo method activates certain steps at certain animation times, and then changes the camera position, rotation and field of view (FOV) / zoom factor.

showHotspots
zoomTo

Zooms the scene to a bounding box created from a particular set of nodes.

activateView

Activates the view based on view object passed

Param Type DefaultValue Description
view sap.ui.vk.View

View object definition

attachCameraChanged

Attaches event handler fnFunction to the cameraChanged event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.vk.svg.Viewport itself

attachHotspotEnter

Attaches event handler fnFunction to the hotspotEnter event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.vk.svg.Viewport itself

attachHotspotLeave

Attaches event handler fnFunction to the hotspotLeave event of this sap.ui.vk.svg.Viewport.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.vk.svg.Viewport itself.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.vk.svg.Viewport itself

detachCameraChanged

Detaches event handler fnFunction from the cameraChanged event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachHotspotEnter

Detaches event handler fnFunction from the hotspotEnter event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachHotspotLeave

Detaches event handler fnFunction from the hotspotLeave event of this sap.ui.vk.svg.Viewport.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.ui.vk.svg.Viewport.extend

Creates a new subclass of class sap.ui.vk.svg.Viewport with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.vk.ViewportBase.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireCameraChanged

Fires event cameraChanged to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

offset float[]

Returns a new camera offset.

zoom float

Returns a new camera zoom factor.

fireHotspotEnter

Fires event hotspotEnter to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

nodeRef any

fireHotspotLeave

Fires event hotspotLeave to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

nodeRef any

getCurrentView

Get current view - remembered when activateView function is called

getImage

Returns viewport content as an image of desired size.

Param Type DefaultValue Description
width int

Requested image width in pixels. Allowed values are 8 to 2048, default is 16

height int

Requested image height in pixels. Allowed values are 8 to 2048, default is 16

topColor string

The sap.ui.core.CSSColor to be used for top background color

bottomColor string

The sap.ui.core.CSSColor to be used for bottom background color

includeSelection boolean

Include selected nodes

sap.ui.vk.svg.Viewport.getMetadata

Returns a metadata object for class sap.ui.vk.svg.Viewport.

getOutputSize

Gets position and size of the viewport square. The information can be used for making calculations when restoring Redlining elements.

getScene

Gets the Viewport Scene

getViewInfo

Retrieves information about the current camera view in the scene, and saves the information in a JSON-like object. The information can then be used at a later time to restore the scene to the same camera view using the setViewInfo method.

Param Type DefaultValue Description
query object

Query object which indicates what information to be retrieved.

visibility boolean object false

Indicator to retrieve visibility information.

mode sap.ui.vk.VisibilityMode sap.ui.vk.VisibilityMode.Complete

Indicator to retrieve the complete visibility definition or just the difference.

selection boolean object false

Indicator to retrieve selection information.

onSetViewStateManager

queueCommand

Queues a command for execution during the rendering cycle. All gesture operations should be called using this method.

Param Type DefaultValue Description
command function

The command to be executed.

setScene

Attaches the scene to the Viewport for rendering.

Param Type DefaultValue Description
scene sap.ui.vk.svg.Scene

The scene to attach to the Viewport.

setViewInfo

Sets the current scene to use the camera view information acquired from the getViewInfo method.
Internally, the setViewInfo method activates certain steps at certain animation times, and then changes the camera position, rotation and field of view (FOV) / zoom factor.

Param Type DefaultValue Description
viewInfo object

A JSON-like object containing view information acquired using the getViewInfo method.

camera object

A JSON-like object containing the camera information.

visibility object

A JSON-like object containing the visibility information.

mode sap.ui.vk.VisibilityMode

If the mode equals to complete then the visible and hidden fields are defined. If the mode equals differences then the changes field is defined.

visible string[]

List of Ids of visible nodes.

hidden string[]

List of Ids of hidden nodes.

changes string[]

List of Ids of nodes with inverted visibility.

selection object

A JSON-like object containing the selection information.

selected string[]

List of Ids of selected nodes.

outlined string[]

List of Ids of outlined nodes.

flyToDuration float 0

Fly-to animation duration in seconds.

showHotspots

Param Type DefaultValue Description
nodeRefs any any[]

The node reference or the array of node references that we want to tint.

show boolean

Whether to highlight the nodes or remove the highlight.

color int sap.ui.vk.CSSColor

The color to use for highlighting the nodes passed as argument.

zoomTo

Zooms the scene to a bounding box created from a particular set of nodes.

Param Type DefaultValue Description
what sap.ui.vk.ZoomTo sap.ui.vk.ZoomTo[]

What set of nodes to zoom to.

nodeRef any

Is used if what == (sap.ui.vk.ZoomTo.Node || ZoomTo.NodeSetIsolation)

crossFadeSeconds float

Time to perform the "fly to" animation. Set to 0 to do this immediately.

margin float

Margin. Set to 0 to zoom to the entire screen.