Package Exports

@xpf0000/dom-points

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@xpf0000/dom-points) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Dom-Points

DOM Tools Collection, include matrixToDeg pointsDistance pointToLineCross pointToLineDistance pointIsInPolygon polygonIsInPolygon clientDeg clientCenterPoint clientOriginalPoints clientBoundsPoints rectBoundsToRect...

Install and basic usage
- Methods
Contributing
License

Install and basic usage

$ npm install --save @xpf0000/dom-points

import { pointsDistance } from '@xpf0000/dom-points'
pointsDistance({x: number, y: number}, {x: 20, y: 20})

<script type="module" src="./dist/domPoints.js"></script>

<script type="module">
      let dist = DomPoints.pointsDistance({x: number, y: number}, {x: 20, y: 20})
</script>

Methods

matrixToDeg

@param matrix
@returns {number}

transform matrix to Deg

matrixToDeg('matrix(0.939693, 0.34202, -0.34202, 0.939693, 0, 0)')

pointsDistance

@param p1: {x: number, y: number}
@param p2: {x: number, y: number}
@returns {number}

point p1 distance to p2

pointsDistance({x: number, y: number}, {x: 20, y: 20})

pointToLineDistance

@param p: {x: number, y: number}
@param line: [{x: number, y: number}, {x: number, y: number}]
@returns {number}

point distance to line

pointToLineDistance({x: number, y: number}, [{x: number, y: number}, {x: number, y: number}])

pointToLineCross

@param p: {x: number, y: number}
@param line: [{x: number, y: number}, {x: number, y: number}]
@returns {number}

The intersection of a point and a line segment

pointToLineCross({x: number, y: number}, [{x: number, y: number}, {x: number, y: number}])

pointIsInPolygon

@param p: {x: number, y: number}
@param polygon: [{x: number, y: number}, {x: number, y: number}, {x: number, y: number}...]
@returns {boolean}

Is the point inside the polygon

pointIsInPolygon({x: number, y: number}, [{x: number, y: number}, {x: number, y: number}, {x: number, y: number}])

polygonIsInPolygon

@param polygon: [{x: number, y: number},{x: number, y: number},{x: number, y: number}...]
@param polygon1: [{x: number, y: number}, {x: number, y: number}, {x: number, y: number}...]
@returns {boolean}

Is the polygon inside the polygon

polygonIsInPolygon([{x: number, y: number},{x: number, y: number},{x: number, y: number}], [{x: number, y: number}, {x: number, y: number}, {x: number, y: number}])

rotatePoint

@param center: {x: number, y: number}
@param point: {x: number, y: number}
@param deg: 0
@returns {x: number, y: number}

the new point of point rotates the deg angle around the center

rotatePoint({x: number, y: number}, {x: number, y: number}, 0)

clientDeg

@param dom: html Dom
@returns {number}

the deg angle of dom to client

<div id="a" style="transform: rotate(15deg)">
    <div id="b" style="transform: rotate(-60deg)">
        <div id="c" style="transform: rotate(130deg)">
        </div>
    </div>
</div>
clientDeg(document.getElementById('c'))

clientCenterPoint

@param dom: html Dom
@returns {x: number, y: number}

the center point of dom to client

<div id="a" style="transform: rotate(15deg)">
    <div id="b" style="transform: rotate(-60deg)">
        <div id="c" style="transform: rotate(130deg)">
        </div>
    </div>
</div>
clientCenterPoint(document.getElementById('c'))

clientOriginalPoints

@param dom: html Dom
@returns [{x: number, y: number},{x: number, y: number},{x: number, y: number},{x: number, y: number}]

the points of the four corners of dom to client without rotate

<div id="a" style="transform: rotate(15deg)">
    <div id="b" style="transform: rotate(-60deg)">
        <div id="c" style="transform: rotate(130deg)">
        </div>
    </div>
</div>
clientOriginalPoints(document.getElementById('c'))

clientBoundsPoints

@param dom: html Dom
@returns [{x: number, y: number},{x: number, y: number},{x: number, y: number},{x: number, y: number}]

the points of the four corners of a rect which make by dom rotated to client

<div id="a" style="transform: rotate(15deg)">
    <div id="b" style="transform: rotate(-60deg)">
        <div id="c" style="transform: rotate(130deg)">
        </div>
    </div>
</div>
clientBoundsPoints(document.getElementById('c'))

rectBoundsToRect

@param dom: html Dom
@param toDom: html Dom
@returns {top: number, left: number, bottom: number, width: number, right: number, height: number}

the position of a rect which make by dom rotated to toDom

<div id="a" style="transform: rotate(15deg)">
    <div id="b" style="transform: rotate(-60deg)">
        <div id="c" style="transform: rotate(130deg)">
        </div>
    </div>
</div>
rectBoundsToRect(document.getElementById('c'), document.getElementById('a'))

Contributing

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

# serve with hot reload at localhost:8080
npm run serve

# distribution build-bundle
npm run build

License

The MIT License (MIT). Please see License File for more information.

@xpf0000/dom-points