Class: Viewport

player/Viewport.Viewport(presentation, editMode)

Viewing area for Sozi presentation.

Constructor

new Viewport(presentation, editMode)

Initialize a new viewport for the given presentation.

Parameters:
Name Type Description
presentation module:model/Presentation.Presentation

The presentations to display.
editMode boolean

Is the presentation opened in an editor?
Source:

Extends

  • EventEmitter

Members

cameras :Array.<module:player/Camera.Camera>

The cameras that operate in this viewport.

Type:
Default Value:
  • []
Source:

clipMode :object

A description of the current clipping modification.

Supported operations are:

  • "select": draw a new clipping rectangle.
  • "move": move the current clipping rectangle.
  • "n", "s", "e", "w": move the north, south, east, or west border of the current clipping rectangle.
  • "ne", "nw", "se", "sw": move the north-east, north-west, south-east, or south-west corner of the current clipping rectangle.
Type:
  • object
Properties:
Name Type Description
cameras Array.<module:player/Camera.Camera>

The cameras affected by the clipping operation.
operation string

The type of modification in progress.
Default Value:
  • {"cameras":"","operation":"select"}
Source:

dragMode :string

The effect of dragging in this viewport.

Acceptable values are: "scale", "translate", "rotate", "clip".

Type:
  • string
Default Value:
  • translate
Source:

editMode :boolean

Is the presentation opened in an editor?

Type:
  • boolean
Source:

(readonly) height :number

The height of the current viewport.

If the SVG is inlined in an HTML document, the returned height includes the padding height of the container.

If the SVG is a standalone document, the returned height is the window's inner height.

Type:
  • number
Source:

mouseDragX :number

The current X coordinate of the mous during a drag action.

Type:
  • number
Source:

mouseDragY :number

The current Y coordinate of the mous during a drag action.

Type:
  • number
Source:

presentation :module:model/Presentation.Presentation

The presentations to display.

Type:
Source:

(readonly) ready :boolean

Is this viewport ready to for a repaint operation?

Type:
  • boolean
Source:

showHiddenElements :boolean

Should the viewport reveal the hidden SVG elements?

Type:
  • boolean
Source:

(readonly) svgRoot :SVGSVGElement

The SVG root element.

Type:
  • SVGSVGElement
Source:

(nullable) wheelTimeout :number

A timeout ID to detect the end of a mouse wheel gesture.

Type:
  • number
Source:

(readonly) width :number

The width of the current viewport.

If the SVG is inlined in an HTML document, the returned width includes the padding width of the container.

If the SVG is a standalone document, the returned width is the window's inner width.

Type:
  • number
Source:

(readonly) x :number

The X coordinate of the current viewport in the current browser window.

If the SVG is a standalone document, the returned value is 0.

Type:
  • number
Source:

(readonly) y :number

The Y coordinate of the current viewport in the current browser window.

If the SVG is a standalone document, the returned value is 0.

Type:
  • number
Source:

Methods

clip(x0, y0, x1, y1)

Clip the content of this viewport.

Parameters:
Name Type Description
x0 number

The X coordinate of the first corner of the clipping rectangle.
y0 number

The Y coordinate of the first corner of the clipping rectangle.
x1 number

The X coordinate of the opposite corner of the clipping rectangle.
y1 number

The Y coordinate of the opposite corner of the clipping rectangle.
Source:
See:

clipRel(w, n, e, s)

Update the clipping rectangles for all selected cameras.

Parameters:
Name Type Description
w number

The X offset with respect to the west border.
n number

The Y offset with respect to the north border.
e number

The X offset with respect to the east border.
s number

The Y offset with respect to the south border.
Source:
See:

dragEndHandler(evt) → {void}

The mouse drag end event handler.

This function is registered as an event listener after a mouse-down event.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Listens to Events:
  • event:mouseup
Returns:
Type
void

dragHandler(evt) → {void}

The mouse drag event handler.

This function is registered as an event listener after a mouse-down event.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Listens to Events:
  • event:mousemove
Returns:
Type
void

getClipMode(evt) → {object}

Detect the current clip mode depending on the current mouse location.

This method will compare the current mouse coordinates with the borders of the clipping rectangle of each camera, and decide which clipping operation is in progress on which cameras.

Parameters:
Name Type Description
evt MouseEvent

A DOM event containing the current mouse coordinates.
Source:
See:
Returns:
  • A list of cameras and a clipping operation.
Type
object

getLayer(nodeId) → {module:model/Presentation.Layer}

Get a layer of the document.

Parameters:
Name Type Description
nodeId string

The ID of an SVG group.
Source:
Returns:
  • A layer representation.
Type
module:model/Presentation.Layer

makeUniqueId(prefix) → {string}

Create a unique SVG element ID.

The result is an identifier with the given prefix followed by a random integer. This method always creates an ID that is not taken in the current SVG document.

Parameters:
Name Type Description
prefix string

A string to use as a prefix in the resulting ID.
Source:
Returns:
  • A new unique ID.
Type
string

onContextMenu(evt)

Process a right-click in this viewport.

This method forwards the contextmenu event as a viewport click event.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Fires:
Listens to Events:
  • event:contextmenu

onDrag(evt)

Process a mouse drag event.

This method is called when a mouse move event happens after a mouse down event.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Fires:
Listens to Events:
  • event:mousemove

onDragEnd(evt)

Process a drag end event.

This method is called when a mouse up event happens after a mouse down event. If the mouse has been moved past the drag threshold, this method will fire a dragEnd event. Otherwise, it will fire a click event.

Parameters:
Name Type Description
evt MouseEvent

A DOM event
Source:
Fires:
Listens to Events:
  • event:mouseup

onLoad()

Complete the initialization of this viewport when the document has been loaded.

This method registers event handlers and creates a camera for each layer.

Source:

onMouseDown(evt)

Process a mouse down event in this viewport.

If the mouse button pressed is the left button, this method will setup event listeners for detecting a drag action.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Fires:
Listens to Events:
  • event:mousedown

onMouseMove(evt)

Process a mouse move event in this viewport.

This method changes the mouse cursor shape depending on the current mode.

Parameters:
Name Type Description
evt MouseEvent

A DOM event.
Source:
Listens to Events:
  • event:mousemove

onWheel(evt)

Process a mouse wheel event in this viewport.

The effect of the mouse wheel depends on the state of the Shift key:

  • released: zoom in and out,
  • pressed: rotate clockwise or counter-clockwise
Parameters:
Name Type Description
evt WheelEvent

A DOM event.
Source:
Fires:

repaint()

Repaint the current viewport.

This method updates:

  • the dimensions of the SVG document,
  • all cameras,
  • the visibility of all hidden elements.
Source:

rotate(angle)

Rotate the content of this viewport with the given angle.

The rotation is centered around the center of the display area.

Parameters:
Name Type Description
angle number

The rotation angle, in degrees.
Source:
See:

setAtStates(states)

Set the states of the cameras of the current viewport.

Parameters:
Name Type Description
states Array.<module:model/CameraState.CameraState>

The camera states to copy.
Source:

translate(deltaX, deltaY)

Apply an additional translation to the SVG document based on onscreen coordinates.

This method delegates to the cameras of the currently selected layers.

Parameters:
Name Type Description
deltaX number

The horizontal displacement, in pixels.
deltaY number

The vertical displacement, in pixels.
Source:

update()

Update all cameras in the current viewport.

Source:
See:

zoom(factor, x, y)

Zooms the content of this viewport with the given factor.

The zoom is centered around (x, y).

Parameters:
Name Type Description
factor number

The scaling factor, above 1 to zoom in, below 1 to zoom out.
x number

The X coordinate of the transformation center (this point will not move during the operation).
y number

The Y coordinate of the transformation center (this point will not move during the operation).
Source:
See: