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

Table of Contents

• 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}])

pointIsOnLine

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

The point is on a line segment

pointIsOnLine({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'))

domExactSize

@param dom: html Dom @returns {width: number, height: number}

exact size of the dom, offsetWidth is int, and not exact

<div id="a" style="width: 75.357px;height: 45.259px">
</div>
domExactSize(document.getElementById('a'))

pointInCrosLine

@param line1: [{x: number, y: number}, {x: number, y: number}] @param line2: [{x: number, y: number}, {x: number, y: number}] @returns {x: number, y: number} || false

two line's cros point

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

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

# run test
npm run test

# distribution build-bundle
npm run build

License

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