Show: Inherited Protected Private Deprecated

# WidgetPosition Class

Uses:

- WidgetInteractionPoint

Defined in: `src/ui/react/src/components/base/widget-position.js:4`

Calculates the position where an Widget should be displayed based on the point where user interacted with the editor.

## Index

### Methods

- _animate
- _getXPoint
- _getYPoint
- cancelAnimation
- getConstrainedPosition
- getDefaultProps
- getInteractionPoint
- getWidgetXYPoint
- isVisible
- moveToPoint
- show
- updatePosition

### Properties

- constrainToViewport
- editorEvent
- gutter

## Methods

### `_animate`

(

- `callback`

)
protected

Defined in `src/ui/react/src/components/base/widget-position.js:255`

Requests an animation frame, if possible, to simulate an animation.

#### Parameters:

- `callback` Function

  The function to be executed on the scheduled frame.

### `_getXPoint`

(

- `selectionData`
- `eventX`

)
Number protected

Inherited from WidgetInteractionPoint: `src/ui/react/src/components/base/widget-interaction-point.js:95`

Returns the position of the Widget.

#### Parameters:

- `selectionData` Object

  The data about the selection in the editor as returned from getSelectionData

- `eventX` Object

  The X coordinate received from the native event (mouseup).

#### Returns:

Number:

The calculated X point in page coordinates.

### `_getYPoint`

(

- `selectionData`
- `nativeEvent`

)
Number protected

Inherited from WidgetInteractionPoint: `src/ui/react/src/components/base/widget-interaction-point.js:129`

Returns the position of the Widget.

#### Parameters:

- `selectionData` Object

  The data about the selection in the editor as returned from getSelectionData

- `nativeEvent` Object

  The data about event is fired

#### Returns:

Number:

The calculated Y point in page coordinates.

### `cancelAnimation`

()

Defined in `src/ui/react/src/components/base/widget-position.js:53`

Cancels an scheduled animation frame.

### `getConstrainedPosition`

(

- `attrs`
- `viewPaneSize`

)
Object

Defined in `src/ui/react/src/components/base/widget-position.js:64`

Returns an object which contains the position of the element in page coordinates, restricted to fit to given viewport.

#### Parameters:

- `attrs` Object

  The following properties, provided as numbers:

  - height
  - left
  - top
  - width
- `viewPaneSize` Object

  Optional. If not provided, the current viewport will be used. Should contain at least these properties:

  - width

#### Returns:

Object:

An object with `x` and `y` properties, which represent the constrained position of the element.

### `getDefaultProps`

()

Defined in `src/ui/react/src/components/base/widget-position.js:38`

Lifecycle. Returns the default values of the properties used in the widget.

### `getInteractionPoint`

() Object

Inherited from WidgetInteractionPoint: `src/ui/react/src/components/base/widget-interaction-point.js:20`

Returns the position, in page coordinates, according to which a widget should appear. Depending on the direction of the selection, the wdiget may appear above of or on bottom of the selection.

It depends on the props editorEvent to analyze the following user-interaction parameters:

- {Object} selectionData The data about the selection in the editor as returned from getSelectionData
- {Number} pos Contains the coordinates of the position, considered as most appropriate. This may be the point where the user released the mouse, or just the beginning or the end of the selection.

#### Returns:

Object:

An Object which contains the following properties: direction, x, y, where x and y are in page coordinates and direction can be one of these: CKEDITOR.SELECTION_BOTTOM_TO_TOP or CKEDITOR.SELECTION_TOP_TO_BOTTOM

### `getWidgetXYPoint`

(

- `left`
- `top`
- `direction`

)
Array protected

Defined in `src/ui/react/src/components/base/widget-position.js:99`

Returns the position of the Widget taking in consideration the WidgetPosition/gutter:attribute attribute.

#### Parameters:

- `left` Number

  The left offset in page coordinates where Toolbar should be shown.

- `top` Number

  The top offset in page coordinates where Toolbar should be shown.

- `direction` Number

  The direction of the selection. May be one of the following: CKEDITOR.SELECTION_BOTTOM_TO_TOP or CKEDITOR.SELECTION_TOP_TO_BOTTOM

#### Returns:

Array:

An Array with left and top offsets in page coordinates.

### `isVisible`

() Boolean

Defined in `src/ui/react/src/components/base/widget-position.js:143`

Returns true if the widget is visible, false otherwise

#### Returns:

Boolean:

True if the widget is visible, false otherwise

### `moveToPoint`

(

- `startPoint`
- `endPoint`

)

Defined in `src/ui/react/src/components/base/widget-position.js:161`

Moves a widget from a starting point to a destination point.

#### Parameters:

- `startPoint` Object

  The starting point for the movement.

- `endPoint` Object

  The destination point for the movement.

### `show`

()

Defined in `src/ui/react/src/components/base/widget-position.js:190`

Shows the widget with the default animation transition.

### `updatePosition`

()

Defined in `src/ui/react/src/components/base/widget-position.js:235`

Updates the widget position based on the current interaction point.

## Properties

### `constrainToViewport`

Boolean

Defined in `src/ui/react/src/components/base/widget-position.js:17`

Should the widget to be restricted to the viewport, or not.

Default: true

### `editorEvent`

SyntheticEvent

Inherited from WidgetInteractionPoint: `src/ui/react/src/components/base/widget-interaction-point.js:12`

The provided editor event.

### `gutter`

Object

Defined in `src/ui/react/src/components/base/widget-position.js:25`

The gutter (vertical and horizontal) between the interaction point and where the widget should be rendered.

Default: { left: 0, top: 10 }