---
title: "CoordinatesConvertUtils | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CoordinatesConvertUtils/"
---

# CoordinatesConvertUtils

> [`CoordinatesConvertUtils`](#coordinatesconvertutils)

## Classes

### CoordinatesConvertUtils

#### Constructors

##### Constructor

```ts
new CoordinatesConvertUtils(): CoordinatesConvertUtils;
```

###### Returns

#### Methods

##### contentToControlPoint()

```ts
static contentToControlPoint(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`PointF`

##### contentToControlRectangle()

```ts
static contentToControlRectangle(rect, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | `RectangleF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`any`

##### contentToWhitespaceRectangle()

```ts
static contentToWhitespaceRectangle(rect, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | `RectangleF` |
| `context` | [`IRulersContext`](#irulerscontext) & [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`any`

##### controlToContentPoint()

```ts
static controlToContentPoint(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`PointF`

##### controlToContentRectangle()

```ts
static controlToContentRectangle(rect, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | `RectangleF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`any`

##### controlToPagePoint()

```ts
static controlToPagePoint(point, viewerElement): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `any` |
| `viewerElement` | `HTMLElement` |

###### Returns

`PointF`

##### controlToWorkspacePoint()

```ts
static controlToWorkspacePoint(point, context): any;
```

Translates coordinates from the control-related coordinate system to the workspace-related one

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `point` | `PointF` | Coordinates in the control coordinate system |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) | - |

###### Returns

`any`

Coordinates in the workspace coordinate system

##### controlToWorkspacePointCorrect()

```ts
static controlToWorkspacePointCorrect(point, context): PointF;
```

Translates coordinates from the control-related coordinate system to the workspace-related one.

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `point` | `PointF` | Coordinates in the control coordinate system (PointF). |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) | - |

###### Returns

`PointF`

Coordinates in the workspace coordinate system (PointF).

##### controlToWorkspaceRectangle()

```ts
static controlToWorkspaceRectangle(rectangle, context): any;
```

Translates rectangle coordinates from the control-related coordinate system to the workspace-related one.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rectangle` | `RectangleF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`any`

Rectangle coordinates in the workspace coordinate system (Rectangle).

##### getElementPageCoord()

```ts
static getElementPageCoord(domElement): object;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `domElement` | `HTMLElement` |

###### Returns

`object`

###### left

```ts
left: number = offset.left;
```

###### top

```ts
top: number = offset.top;
```

##### pageToControlPoint()

```ts
static pageToControlPoint(pagePoint, viewer): any;
```

Translates coordinates from the page-related coordinate system to the control-related one

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `pagePoint` | `PointF` | Coordinates in the page coordinate system. |
| `viewer` | [`IViewer`](#iviewer) | - |

###### Returns

`any`

##### pageToWhitespace()

```ts
static pageToWhitespace(pagePoint, viewer): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `pagePoint` | `PointF` |
| `viewer` | [`IViewer`](#iviewer) & [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) & [`IRulersContext`](#irulerscontext) |

###### Returns

`PointF`

##### pageToWorkspacePoint()

```ts
static pageToWorkspacePoint(
   pagePoint, 
   viewer, 
   dontRotate?): any;
```

Translates coordinates from the page-related coordinate system to the workspace-related one

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `pagePoint` | `PointF` | `undefined` | Coordinates in the page coordinate system |
| `viewer` | [`IViewer`](#iviewer) & [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) | `undefined` | - |
| `dontRotate` | `boolean` | `false` | - |

###### Returns

`any`

##### productToControlPoint()

```ts
static productToControlPoint(
   point, 
   context, 
   offset): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |
| `offset` | `PointF` |

###### Returns

`PointF`

##### productToWorkspace()

```ts
static productToWorkspace(product, offset?): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `product` | `PointF` |
| `offset?` | `PointF` |

###### Returns

`any`

##### whitespaceToWorkspacePoint()

```ts
static whitespaceToWorkspacePoint(point, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IRulersContext`](#irulerscontext) |

###### Returns

`any`

##### whitespaceToWorkspacePointCorrect()

```ts
static whitespaceToWorkspacePointCorrect(point, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) & [`IRulersContext`](#irulerscontext) |

###### Returns

`any`

##### workspaceToContentPoint()

```ts
static workspaceToContentPoint(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`PointF`

##### workspaceToControlPoint()

```ts
static workspaceToControlPoint(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`PointF`

##### workspaceToControlPointCorrect()

```ts
static workspaceToControlPointCorrect(source, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `source` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) |

###### Returns

`PointF`

##### workspaceToControlRectangle()

```ts
static workspaceToControlRectangle(rect, context): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | `RectangleF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) |

###### Returns

`any`

##### workspaceToPagePoint()

```ts
static workspaceToPagePoint(source, viewer): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `source` | `PointF` |
| `viewer` | [`IViewer`](#iviewer) & [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) |

###### Returns

`PointF`

##### workspaceToProduct()

```ts
static workspaceToProduct(workspacePoint, offset?): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `workspacePoint` | `PointF` |
| `offset?` | `PointF` |

###### Returns

`any`

##### workspaceToWhiteSpacePoint()

```ts
static workspaceToWhiteSpacePoint(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IRulersContext`](#irulerscontext) |

###### Returns

`PointF`

##### workspaceToWhiteSpacePointCorrect()

```ts
static workspaceToWhiteSpacePointCorrect(point, context): PointF;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `point` | `PointF` |
| `context` | [`IViewportContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewportContext.md#iviewportcontext) & [`IWorkspaceContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IWorkspaceContext.md#iworkspacecontext) & [`IRulersContext`](#irulerscontext) |

###### Returns

`PointF`

## Interfaces

### IRulersContext

#### Properties

##### rulerEnabled

```ts
rulerEnabled: boolean;
```

##### rulerWidth

```ts
rulerWidth: number;
```

***

### IViewer

#### Properties

##### element

```ts
element: HTMLElement;
```