The ViewPort represents a "view" into a virtual space, that is not tied to the available screen space or HTML elements. Because of this, it is infinite, but it also uses its own "units" (virtual space pixels).
You can think of the view port as describing what rectangular portion of the virtual space (from top left to bottom right) should be visible inside the bounds of containing HTML element where the virtual space is being rendered.
This is lower-level than the Space, so in most cases you probably won't want to create one of these directly.
Please see the Guide for more information.
- ViewPort
- destroy
- setBounds
- translateClientRectToVirtualSpace
- translateClientXYCoordinatesToVirtualSpace
- updateContainerSize
+ new ViewPort(containerDiv: HTMLDivElement, options?: ViewPortOptions): ViewPort
Parameters:
| Name | Type |
|---|---|
containerDiv |
HTMLDivElement |
options? |
ViewPortOptions |
Returns: ViewPort
• camera: ViewPortCamera
The camera provides methods to move and animate the ViewPort.
• centerX: VirtualSpacePixelUnit
• centerY: VirtualSpacePixelUnit
• containerHeight: ClientPixelUnit
• containerWidth: ClientPixelUnit
• height: VirtualSpacePixelUnit
• left: VirtualSpacePixelUnit
• top: VirtualSpacePixelUnit
• width: VirtualSpacePixelUnit
• zoomFactor: ZoomFactor
▸ destroy(): void
Call this to detach all event listeners that the ViewPort sets up. After this is called no further updates will happen.
Returns: void
▸ setBounds(bounds: ViewPortBounds): void
Constrain the virtual space so the user can not pan beyond, and the camera cannot show anything beyond, the provided min/max values for x, y, and the zoom factor.
Parameters:
| Name | Type |
|---|---|
bounds |
ViewPortBounds |
Returns: void
▸ translateClientRectToVirtualSpace(rectOrElement: ClientRect | HTMLElement): VirtualSpaceRect
Parameters:
| Name | Type |
|---|---|
rectOrElement |
ClientRect | HTMLElement |
Returns: VirtualSpaceRect
▸ translateClientXYCoordinatesToVirtualSpace(clientX: ClientPixelUnit, clientY: ClientPixelUnit): object
Parameters:
| Name | Type |
|---|---|
clientX |
ClientPixelUnit |
clientY |
ClientPixelUnit |
Returns: object
▸ updateContainerSize(): void
This should be used when the div is resized. By default resizes due to the window itself resizing will be automatically handled, but any other resizes won't be handled (since there isn't a good way to get notified when the div resizes.
If you are getting access to the ViewPort via Space or
SpaceContext you should not call this method directly and should
instead call the Space.updateSize method.
Returns: void