calculate-position

KO | EN

gitlite — search

#git #ui #claude-code #data-science #github #tailwindcss #cli #privacy #agents #codex

calculate-position

(★ 11)

No description available.

File Explorer

ZIP Download

- config.yml
- CONTRIBUTING.md
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- extensions.json
- launch.json
- settings.json
- - direction.spec.ts
  - direction.ts
  - position.spec.ts
  - position.ts
  - rectange.spec.ts
  - rectangle.ts
  - types.ts
- index.ts
.editorconfig
.eslintrc.js
.gitignore
.prettierignore
LICENSE
package.json
README.md
tsconfig.json
tsconfig.module.json
yarn.lock

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Calculates the best position (left/top coords) for a given anchor and dimensions.

Mostly useful for placing popups and tooltips correctly in the viewports.

Behind the scenes we calculate all the position positions for the popup element (TopLeft, TopRight etc) and then choose the one that has the largest overlap with the viewport (normal the window).

### calculateBestDirection

Calculates the best direction (e.g. BottomLeft) for a given anchor and dimensions.

Valid directions are:
- `TopLeft`
- `TopRight`
- `TopCenter`
- `BottomLeft`
- `BottomRight`
- `BottomCenter`

`BottomRight` is the default direction.

Valid arguments:
```
@param anchor - anchor position that calculations will be based of
@param dimensions - width/height dimensions of popup element
@param viewport - (optional) viewport rectangle (defaults to window)
```

Example:
```js
import {calculateBestDirection} from 'calculate-position'

const anchor = popupAnchorElement.getBoundingClientRect()
const dimensions = {width: popupWidth, height: popupHeight}

console.log(calculateBestDirection({anchor, dimensions}))
// => Direction.TopLeft
```

### calculateBestPosition

Returns coordinates (i.e. `top` and `left`) for a given anchor and dimensions.

Valid arguments:
```
@param anchor - anchor position that calculations will be based of. Typically an element being hovered over.
@param dimensions - width/height dimensions of popup element
@param viewport - optional viewport rectangle (defaults to window)
```

Example:
```js
import {calculateBestPosition} from 'calculate-position'

const anchor = anchorElement.getBoundingClientRect()
const dimensions = {width: popupWidth, height: popupHeight}

console.log(calculateBestPosition({anchor, dimensions}))
// => {left: 200, top: 100}
```

calculate-position

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

calculate-position

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README