calculate-position - GitLite

KO | EN

gitlite — search

#rust #cpp #http #open-source #self-hosted #android #gemini #javascript #artificial-intelligence #dotnet

calculate-position

(★ 11)

No description available.

파일 탐색기

ZIP 다운로드

- 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

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// 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}
```