@flatten-js/core

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Home - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="Arc.html">Arc</a></li><li class="nav-item">F<a href="Arc.html#clone">clone</a></li><li class="nav-item">F<a href="Arc.html#contains">contains</a></li><li class="nav-item">F<a href="Arc.html#split">split</a></li><li class="nav-item">F<a href="Arc.html#middle">middle</a></li><li class="nav-item">F<a href="Arc.html#chordHeight">chordHeight</a></li><li class="nav-item">F<a href="Arc.html#intersect">intersect</a></li><li class="nav-item">F<a href="Arc.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Arc.html#breakToFunctional">breakToFunctional</a></li><li class="nav-item">F<a href="Arc.html#tangentInStart">tangentInStart</a></li><li class="nav-item">F<a href="Arc.html#tangentInEnd">tangentInEnd</a></li><li class="nav-item">F<a href="Arc.html#reverse">reverse</a></li><li class="nav-item">F<a href="Arc.html#translate">translate</a></li><li class="nav-item">F<a href="Arc.html#rotate">rotate</a></li><li class="nav-item">F<a href="Arc.html#scale">scale</a></li><li class="nav-item">F<a href="Arc.html#transform">transform</a></li><li class="nav-item">F<a href="Arc.html#sortPoints">sortPoints</a></li><li class="nav-item">F<a href="Arc.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Arc.html#svg">svg</a></li><li class="nav-heading">C<a href="Box.html">Box</a></li><li class="nav-item">F<a href="Box.html#clone">clone</a></li><li class="nav-item">F<a href="Box.html#not_intersect">not_intersect</a></li><li class="nav-item">F<a href="Box.html#intersect">intersect</a></li><li class="nav-item">F<a href="Box.html#merge">merge</a></li><li class="nav-item">F<a href="Box.html#less_than">less_than</a></li><li class="nav-item">F<a href="Box.html#equal_to">equal_to</a></li><li class="nav-item">F<a href="Box.html#set">set</a></li><li class="nav-item">F<a href="Box.html#toPoints">toPoints</a></li><li class="nav-item">F<a href="Box.html#toSegments">toSegments</a></li><li class="nav-item">F<a href="Box.html#svg">svg</a></li><li class="nav-heading">C<a href="Circle.html">Circle</a></li><li class="nav-item">F<a href="Circle.html#clone">clone</a></li><li class="nav-item">F<a href="Circle.html#contains">contains</a></li><li class="nav-item">F<a href="Circle.html#toArc">toArc</a></li><li class="nav-item">F<a href="Circle.html#intersect">intersect</a></li><li class="nav-item">F<a href="Circle.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Circle.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Circle.html#svg">svg</a></li><li class="nav-heading">C<a href="Edge.html">Edge</a></li><li class="nav-item">F<a href="Edge.html#middle">middle</a></li><li class="nav-item">F<a href="Edge.html#contains">contains</a></li><li class="nav-item">F<a href="Edge.html#setInclusion">setInclusion</a></li><li class="nav-item">F<a href="Edge.html#setOverlap">setOverlap</a></li><li class="nav-heading">C<a href="Face.html">Face</a></li><li class="nav-item">F<a href="Face.html#append">append</a></li><li class="nav-item">F<a href="Face.html#insert">insert</a></li><li class="nav-item">F<a href="Face.html#remove">remove</a></li><li class="nav-item">F<a href="Face.html#reverse">reverse</a></li><li class="nav-item">F<a href="Face.html#setArcLength">setArcLength</a></li><li class="nav-item">F<a href="Face.html#area">area</a></li><li class="nav-item">F<a href="Face.html#signedArea">signedArea</a></li><li class="nav-item">F<a href="Face.html#orientation">orientation</a></li><li class="nav-item">F<a href="Face.html#isSimple">isSimple</a></li><li class="nav-item">F<a href="Face.html#findEdgeByPoint">findEdgeByPoint</a></li><li class="nav-item">F<a href="Face.html#toPolygon">toPolygon</a></li><li class="nav-item">F<a href="Face.html#svg">svg</a></li><li class="nav-heading">C<a href="Line.html">Line</a></li><li class="nav-item">F<a href="Line.html#clone">clone</a></li><li class="nav-item">F<a href="Line.html#parallelTo">parallelTo</a></li><li class="nav-item">F<a href="Line.html#incidentTo">incidentTo</a></li><li class="nav-item">F<a href="Line.html#contains">contains</a></li><li class="nav-item">F<a href="Line.html#coord">coord</a></li><li class="nav-item">F<a href="Line.html#intersect">intersect</a></li><li class="nav-item">F<a href="Line.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Line.html#split">split</a></li><li class="nav-item">F<a href="Line.html#sortPoints">sortPoints</a></li><li class="nav-item">F<a href="Line.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Line.html#svg">svg</a></li><li class="nav-heading">C<a href="Matrix.html">Matrix</a></li><li class="nav-item">F<a href="Matrix.html#clone">clone</a></li><li class="nav-item">F<a href="Matrix.html#transform">transform</a></li><li class="nav-item">F<a href="Matrix.html#multiply">multiply</a></li><li class="nav-item">F<a href="Matrix.html#translate">translate</a></li><li class="nav-item">F<a href="Matrix.html#rotate">rotate</a></li><li class="nav-item">F<a href="Matrix.html#scale">scale</a></li><li class="nav-item">F<a href="Matrix.html#equalTo">equalTo</a></li><li class="nav-heading">C<a href="Multiline.html">Multiline</a></li><li class="nav-item">F<a href="Multiline.html#clone">clone</a></li><li class="nav-item">F<a href="Multiline.html#addVertex">addVertex</a></li><li class="nav-item">F<a href="Multiline.html#split">split</a></li><li class="nav-item">F<a href="Multiline.html#findEdgeByPoint">findEdgeByPoint</a></li><li class="nav-item">F<a href="Multiline.html#translate">translate</a></li><li class="nav-item">F<a href="Multiline.html#rotate">rotate</a></li><li class="nav-item">F<a href="Multiline.html#transform">transform</a></li><li class="nav-item">F<a href="Multiline.html#toShapes">toShapes</a></li><li class="nav-item">F<a href="Multiline.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Multiline.html#svg">svg</a></li><li class="nav-heading">C<a href="Point.html">Point</a></li><li class="nav-item">F<a href="Point.html#clone">clone</a></li><li class="nav-item">F<a href="Point.html#equalTo">equalTo</a></li><li class="nav-item">F<a href="Point.html#lessThan">lessThan</a></li><li class="nav-item">F<a href="Point.html#rotate">rotate</a></li><li class="nav-item">F<a href="Point.html#translate">translate</a></li><li class="nav-item">F<a href="Point.html#transform">transform</a></li><li class="nav-item">F<a href="Point.html#projectionOn">projectionOn</a></li><li class="nav-item">F<a href="Point.html#leftTo">leftTo</a></li><li class="nav-item">F<a href="Point.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Point.html#on">on</a></li><li class="nav-item">F<a href="Point.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Point.html#svg">svg</a></li><li class="nav-heading">C<a href="Polygon.html">Polygon</a></li><li class="nav-item">F<a href="Polygon.html#clone">clone</a></li><li class="nav-item">F<a href="Polygon.html#isEmpty">isEmpty</a></li><li class="nav-item">F<a href="Polygon.html#isValid">isValid</a></li><li class="nav-item">F<a href="Polygon.html#area">area</a></li><li class="nav-item">F<a href="Polygon.html#addFace">addFace</a></li><li class="nav-item">F<a href="Polygon.html#deleteFace">deleteFace</a></li><li class="nav-item">F<a href="Polygon.html#removeChain">removeChain</a></li><li class="nav-item">F<a href="Polygon.html#addVertex">addVertex</a></li><li class="nav-item">F<a href="Polygon.html#cut">cut</a></li><li class="nav-item">F<a href="Polygon.html#cutFace">cutFace</a></li><li class="nav-item">F<a href="Polygon.html#findEdgeByPoint">findEdgeByPoint</a></li><li class="nav-item">F<a href="Polygon.html#splitToIslands">splitToIslands</a></li><li class="nav-item">F<a href="Polygon.html#reverse">reverse</a></li><li class="nav-item">F<a href="Polygon.html#contains">contains</a></li><li class="nav-item">F<a href="Polygon.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Polygon.html#intersect">intersect</a></li><li class="nav-item">F<a href="Polygon.html#translate">translate</a></li><li class="nav-item">F<a href="Polygon.html#rotate">rotate</a></li><li class="nav-item">F<a href="Polygon.html#transform">transform</a></li><li class="nav-item">F<a href="Polygon.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Polygon.html#toArray">toArray</a></li><li class="nav-item">F<a href="Polygon.html#svg">svg</a></li><li class="nav-heading">C<a href="Ray.html">Ray</a></li><li class="nav-item">F<a href="Ray.html#clone">clone</a></li><li class="nav-item">F<a href="Ray.html#contains">contains</a></li><li class="nav-item">F<a href="Ray.html#split">split</a></li><li class="nav-item">F<a href="Ray.html#intersect">intersect</a></li><li class="nav-item">F<a href="Ray.html#svg">svg</a></li><li class="nav-heading">C<a href="Segment.html">Segment</a></li><li class="nav-item">F<a href="Segment.html#clone">clone</a></li><li class="nav-item">F<a href="Segment.html#equalTo">equalTo</a></li><li class="nav-item">F<a href="Segment.html#contains">contains</a></li><li class="nav-item">F<a href="Segment.html#intersect">intersect</a></li><li class="nav-item">F<a href="Segment.html#distanceTo">distanceTo</a></li><li class="nav-item">F<a href="Segment.html#tangentInStart">tangentInStart</a></li><li class="nav-item">F<a href="Segment.html#tangentInEnd">tangentInEnd</a></li><li class="nav-item">F<a href="Segment.html#reverse">reverse</a></li><li class="nav-item">F<a href="Segment.html#split">split</a></li><li class="nav-item">F<a href="Segment.html#middle">middle</a></li><li class="nav-item">F<a href="Segment.html#translate">translate</a></li><li class="nav-item">F<a href="Segment.html#rotate">rotate</a></li><li class="nav-item">F<a href="Segment.html#transform">transform</a></li><li class="nav-item">F<a href="Segment.html#isZeroLength">isZeroLength</a></li><li class="nav-item">F<a href="Segment.html#sortPoints">sortPoints</a></li><li class="nav-item">F<a href="Segment.html#toJSON">toJSON</a></li><li class="nav-item">F<a href="Segment.html#svg">svg</a></li><li class="nav-heading">C<a href="Vector.html">Vector</a></li><li class="nav-item">F<a href="Vector.html#clone">clone</a></li><li class="nav-item">F<a href="Vector.html#equalTo">equalTo</a></li><li class="nav-item">F<a href="Vector.html#multiply">multiply</a></li><li class="nav-item">F<a href="Vector.html#dot">dot</a></li><li class="nav-item">F<a href="Vector.html#cross">cross</a></li><li class="nav-item">F<a href="Vector.html#normalize">normalize</a></li><li class="nav-item">F<a href="Vector.html#rotate">rotate</a></li><li class="nav-item">F<a href="Vector.html#rotate90CCW">rotate90CCW</a></li><li class="nav-item">F<a href="Vector.html#rotate90CW">rotate90CW</a></li><li class="nav-item">F<a href="Vector.html#invert">invert</a></li><li class="nav-item">F<a href="Vector.html#add">add</a></li><li class="nav-item">F<a href="Vector.html#subtract">subtract</a></li><li class="nav-item">F<a href="Vector.html#angleTo">angleTo</a></li><li class="nav-item">F<a href="Vector.html#projectionOn">projectionOn</a></li><li class="nav-item">F<a href="Vector.html#toJSON">toJSON</a></li><li class="nav-heading">C<a href="CircularLinkedList.html">CircularLinkedList</a></li><li class="nav-item">F<a href="CircularLinkedList.html#append">append</a></li><li class="nav-item">F<a href="CircularLinkedList.html#insert">insert</a></li><li class="nav-item">F<a href="CircularLinkedList.html#remove">remove</a></li><li class="nav-heading">C<a href="DE9IM.html">DE9IM</a></li><li class="nav-item">F<a href="DE9IM.html#toString">toString</a></li><li class="nav-heading">C<a href="LinkedList.html">LinkedList</a></li><li class="nav-item">F<a href="LinkedList.html#toArray">toArray</a></li><li class="nav-item">F<a href="LinkedList.html#append">append</a></li><li class="nav-item">F<a href="LinkedList.html#insert">insert</a></li><li class="nav-item">F<a href="LinkedList.html#remove">remove</a></li><li class="nav-item">F<a href="LinkedList.html#isEmpty">isEmpty</a></li><li class="nav-item">F<a href="LinkedList.html#.testInfiniteLoop">testInfiniteLoop</a></li><li class="nav-heading">C<a href="PlanarSet.html">PlanarSet</a></li><li class="nav-item">F<a href="PlanarSet.html#add">add</a></li><li class="nav-item">F<a href="PlanarSet.html#delete">delete</a></li><li class="nav-item">F<a href="PlanarSet.html#clear">clear</a></li><li class="nav-item">F<a href="PlanarSet.html#search">search</a></li><li class="nav-item">F<a href="PlanarSet.html#hit">hit</a></li><li class="nav-item">F<a href="PlanarSet.html#svg">svg</a></li><li class="nav-heading">C<a href="Errors.html">Errors</a></li><li class="nav-heading">Modules</li><li class="nav-heading">M<a href="module-BooleanOperations.html">BooleanOperations</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.unify">unify</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.subtract">subtract</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.intersect">intersect</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.innerClip">innerClip</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.outerClip">outerClip</a></li><li class="nav-item">F<a href="module-BooleanOperations.html#.calculateIntersections">calculateIntersections</a></li><li class="nav-heading">M<a href="module-RayShoot.html">RayShoot</a></li><li class="nav-item">F<a href="module-RayShoot.html#.ray_shoot">ray_shoot</a></li><li class="nav-heading">M<a href="module-Relation.html">Relation</a></li><li class="nav-item">F<a href="module-Relation.html#.equal">equal</a></li><li class="nav-item">F<a href="module-Relation.html#.intersect">intersect</a></li><li class="nav-item">F<a href="module-Relation.html#.touch">touch</a></li><li class="nav-item">F<a href="module-Relation.html#.disjoint">disjoint</a></li><li class="nav-item">F<a href="module-Relation.html#.inside">inside</a></li><li class="nav-item">F<a href="module-Relation.html#.covered">covered</a></li><li class="nav-item">F<a href="module-Relation.html#.contain">contain</a></li><li class="nav-item">F<a href="module-Relation.html#.cover">cover</a></li><li class="nav-item">F<a href="module-Relation.html#.relate">relate</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#inverse">inverse</a></li><li class="nav-item">M<a href="global.html#arc">arc</a></li><li class="nav-item">M<a href="global.html#box">box</a></li><li class="nav-item">M<a href="global.html#circle">circle</a></li><li class="nav-item">M<a href="global.html#line">line</a></li><li class="nav-item">M<a href="global.html#matrix">matrix</a></li><li class="nav-item">M<a href="global.html#multiline">multiline</a></li><li class="nav-item">M<a href="global.html#point">point</a></li><li class="nav-item">M<a href="global.html#polygon">polygon</a></li><li class="nav-item">M<a href="global.html#segment">segment</a></li><li class="nav-item">M<a href="global.html#vector">vector</a></li><li class="nav-item">M<a href="global.html#CCW">CCW</a></li><li class="nav-item">M<a href="global.html#CW">CW</a></li><li class="nav-item">M<a href="global.html#ORIENTATION">ORIENTATION</a></li><li class="nav-item">M<a href="global.html#DP_TOL">DP_TOL</a></li><li class="nav-item">F<a href="global.html#setTolerance">setTolerance</a></li><li class="nav-item">F<a href="global.html#getTolerance">getTolerance</a></li><li class="nav-item">F<a href="global.html#EQ_0">EQ_0</a></li><li class="nav-item">F<a href="global.html#EQ">EQ</a></li><li class="nav-item">F<a href="global.html#GT">GT</a></li><li class="nav-item">F<a href="global.html#GE">GE</a></li><li class="nav-item">F<a href="global.html#LT">LT</a></li><li class="nav-item">F<a href="global.html#LE">LE</a></li> </nav> <div id="main"> <section class="readme"> <article><a href="https://badge.fury.io/js/%40flatten-js%2Fcore"><img src="https://badge.fury.io/js/%40flatten-js%2Fcore.svg" alt="npm version"></a> <a href="https://travis-ci.org/alexbol99/flatten-js"><img src="https://travis-ci.org/alexbol99/flatten-js.svg?branch=master" alt="Build Status"></a> <a href="https://coveralls.io/github/alexbol99/flatten-js?branch=master"><img alt="Coverage Status" src="https://coveralls.io/repos/github/alexbol99/flatten-js/badge.svg?branch=master"></a> <a href="https://www.jsdelivr.com/package/npm/@flatten-js/core"><img alt="" src="https://data.jsdelivr.com/v1/package/npm/@flatten-js/core/badge"></a> <a href="https://openbase.com/js/@flatten-js/core?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge"><img alt="Rate on Openbase" src="https://badges.openbase.com/js/rating/@flatten-js/core.svg"></a> <h1>Javascript library for 2d geometry</h1> flatten-js is a javascript library for manipulating abstract geometrical shapes like point, vector, line, ray, segment, circle, arc and polygon. Shapes may be organized into Planar Set - searchable container which support spatial queries. flatten-js provides a lot of useful methods and algorithms like finding intersections, checking inclusion, calculating distance, applying affine transformations, performing boolean operations and more. Packages are distributed in 3 formats: commonjs, umd and es6 modules. Package.json file provides various entry points suitable for different targets. TypeScript users may take advantage of static type checking with typescript definition file index.d.ts included into the package. flatten-js does not concern too much about visualization. Anyway, all classes implement svg() method, that returns a string which may be inserted into SVG container. It works pretty well together with <a href="https://d3js.org/">d3js</a> library, but it is definitely possible to create bridges to other graphic libraries. The best way to start working with FlattenJS is to use awesome <a href="https://beta.observablehq.com/">Observable</a> javascript interactive notebooks. Check out collection of <a href="https://observablehq.com/collection/@alexbol99/flatten-js-tutorials">Tutorials</a> published in Observable Notebooks. Full documentation may be found here: <a href="https://alexbol99.github.io/flatten-js/index.html">https://alexbol99.github.io/flatten-js/index.html</a> <h2>Contacts</h2> Follow me on Twitter <a href="https://twitter.com/alex_bol_">@alex_bol_</a> <h2>Installation</h2> <pre><code>npm install --save @flatten-js/core </code></pre> <h2>Usage</h2> <pre class="prettyprint source lang-javascript"><code>import {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} from '@flatten-js/core'; </code></pre> It is possible to import Flatten namespace as default import, and then destruct all classes from it. <pre class="prettyprint source lang-javascript"><code>import Flatten from '@flatten-js/core' const {Point, Vector, Circle, Line, Ray, Segment, Arc, Box, Polygon, Matrix, PlanarSet} = Flatten; </code></pre> Some classes have shortcuts to avoid annoying new constructor: <pre class="prettyprint source lang-javascript"><code>import {point, vector, circle, line, ray, segment, arc, polygon, matrix} from '@flatten-js/core'; </code></pre> <h2>Example</h2> After module imported, it is possible to create some construction: <pre class="prettyprint source lang-javascript"><code> // extract object creators import {point, circle, segment} from '@flatten-js/core'; // make some construction let s1 = segment(10,10,200,200); let s2 = segment(10,160,200,30); let c = circle(point(200, 110), 50); let ip = s1.intersect(s2); </code></pre> You may test the code above also in <a href="https://npm.runkit.com/@flatten-js/core">NPM RunKit</a> You may also check out examples section in the code which illustrate different use cases: <ul> <li>in nodejs</li> <li>in a browser using <code><script></code> tag with unpkg.com loader</li> <li>in a React application</li> </ul> <h2>Content of the library</h2> <h3>Basic shapes</h3> flatten-js library implements following basic shapes: <ul> <li><a href="https://alexbol99.github.io/flatten-js/Point.html">Point</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Vector.html">Vector</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Line.html">Line</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Ray.html">Ray</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Segment.html">Segment</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Arc.html">Arc (circular)</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Circle.html">Circle</a></li> <li><a href="https://alexbol99.github.io/flatten-js/Box.html">Box (may be used as rectangle)</a></li> </ul> <h3>Polygon</h3> <a href="https://alexbol99.github.io/flatten-js/Polygon.html">Polygon</a> in flatten-js library is actually a multi-polygon. Polygon is a collection of faces - closed oriented chains of edges, which may be of type Segment or Arc. The most external face called island, a face included into it is called hole. Holes in turn may have inner islands, number of inclusion levels is unlimited. Orientation of islands and holes is matter for calculation of relationships and boolean operations, holes should have orientation opposite to islands. It means that for proper results faces in a polygon should be orientable: they should not have self-intersections. Faces also should not overlap each other. Method <code>isValid()</code> checks if polygon fit these rules. Constructor of the polygon object accept various inputs: <ul> <li>Array of shapes (instances of Flatten.Segment or Flatten.Arc) that represent closed chains</li> <li>Array of shapes as json objects that represent closed chains</li> <li>Array of points (Flatten.Point) that represent vertices of the polygon</li> <li>Array of numeric pairs [x,y] that represent vertices of the polygon</li> <li>Instances of Circle or Box</li> </ul> Polygon provides various useful methods: <ul> <li><code>area</code> - calculate area of a polygon</li> <li><code>addFace</code> - add a new face to polygon</li> <li><code>deleteFace</code> - removes face from polygon</li> <li><code>addVertex</code> - split an edge of polygon adn create new vertex</li> <li><code>cut</code> - cut polygon with multiline into sub-polygons</li> <li><code>findEdgeByPoint</code> - find edge in polygon</li> <li><code>contains</code> - test if polygon contains shape (point, segment or arc)</li> <li><code>transform</code> - transform polygon using affine transformation matrix</li> <li><code>reverse</code> - revert orientation of faces</li> <li><code>splitToIslands</code> - split to array of islands with holes</li> </ul> <h3>Multiline</h3> Multiline represent an unclosed chain of edges of type Segment or Arc <h3>Planar Set</h3> Planar Set is a container of shapes that enables spatial seach by rectangular query. <h3>Affine transformations</h3> Affine transformation matrix is a 3x3 matrix of the form <pre class="prettyprint source"><code> [ a c tx A = b d ty 0 0 1 ] </code></pre> Where a, b, c, d, represent rotation and scaling, tx, ty represent translation. Matrix constructor without parameters creates an identity matrix, and then resulted matrix may be composed by chaining basic operations, like <code>translate</code>, <code>rotate</code> and <code>scale</code>, like this: <pre class="prettyprint source lang-javascript"><code>// Rotate segment by 45 deg around its center let {point,segment,matrix} = Flatten; let s = segment(point(20,30), point(60,70)); let center = s.box.center; let angle = 45.*Math.PI/180.; let m = matrix() .translate(center.x, center.y) .rotate(angle) .translate(-center.x, -center.y); let t_s = s.transform(m); </code></pre> <h3>Intersection points</h3> All classes have method <code>intersect(otherShape)</code> that return array of intersection points, if two shapes intersect each other, or empty array otherwise. The is no predefined order of intersection points in the array. Please don't be confused, there are another two methods <code>BooleanOperations.intersect()</code> that performs boolean intersection of polygons and logical predicate <code>Relations.intersect()</code> that check if two shapes intersected or not. <h3>Distance between shapes</h3> All basic classes and polygon have method <code>distanceTo(othershape)</code> that calculate distance to other shape. Together with the distance function returns the shortest segment between two shapes - segment between two closest point, where the first point lays on <code>this</code> shape, and the second - on the other shape, see example: <pre class="prettyprint source lang-javascript"><code>let s = segment(point(10,30), point(150, 40)); let c = circle(point(75,75),10); let [dist,shortest_segment] = s.distanceTo(c); </code></pre> <h3>Intersection model (DE-9IM)</h3> The Dimensionally Extended nine-Intersection Model (<a href="https://en.wikipedia.org/wiki/DE-9IM">DE-9IM</a>) is a topological model and a standard used to describe the spatial relations of two geometries in 2-dimensional plane. First, for every shape we define: <ul> <li>An interior</li> <li>A boundary</li> <li>An exterior</li> </ul> For polygons, the interior, boundary and exterior are obvious, other types have some exclusions: <ul> <li>Point has no interior</li> <li>Line has no boundary</li> </ul> The DE-9IM model based on a 3×3 intersection matrix with the form: <pre class="prettyprint source"><code> [ I(a) ^ I(b) B(a) ^ I(b) E(a) ^ I(b) de9im = I(a) ^ B(b) B(a) ^ B(b) E(a) ^ B(b) I(a) ^ E(b) B(a) ^ E(b) E(a) ^ E(b) ] </code></pre> where <code>a</code>and <code>b</code> are two shapes (geometries), <code>I(), B(), E()</code> denotes interior, boundary and exterior operator and <code>^</code> denotes operation of intersection. Dimension of intersection result depends on the dimension of shapes, for example, <ul> <li>intersection between an interior of the line and an interior of the polygon is an array of segments</li> <li>intersection between an interior of the line and boundary polygon is an array of points (may include segments in case of touching)</li> <li>intersection between interiors of two polygons (if exists) will be a polygon.</li> </ul> DE-9IM matrix describes any possible relationships between two shapes on the plane. DE-9IM matrix is available via method <code>relate</code> under namespace <code>Relations</code>. Each element of DE-9IM matrix is an array of the objects representing corresponding intersection. Empty array represents case of no intersection. If intersection is not applicable (i.e. intersection with a boundary for a line which has no boundary), correspondent cell left undefined. Intersection between two exteriors not calculated because usually it is meaningless. <pre class="prettyprint source lang-javascript"><code>let {relate} = Flatten.Relations; // // define two shapes: polygon1, polygon2 // let de9im = relate(polygon1, polygon2); // // explore 8 of 9 fields of the de9im matrix: // de9im.I2I de9im.B2I de9im.E2I // de9im.I2B de9im.B2B de9im.E2B // de9im.I2E de9im.B2E N/A </code></pre> Another common way to represent DE-9IM matrix is a string where <ul> <li><code>T</code> represent intersection where array is not impty</li> <li><code>F</code> represent intersection where array is empty</li> <li><code>.</code> means not relevant or not applicable</li> </ul> String may be obtained with <code>de9im.toString()</code> method. <h3>Relationship predicates</h3> The spatial relationships between two shapes exposed via namespace <code>Relations</code>. The spatial predicates return <code>true</code> if relationship match and <code>false</code> otherwise. <pre class="prettyprint source lang-javascript"><code>let {intersect, disjoint, equal, touch, inside, contain, covered, cover} = Flatten.Relations; // define shape a and shape b let p = intersect(a, b); console.log(p) // true / false </code></pre> <ul> <li><code>intersect</code> - shapes a and b have at least one common point</li> <li><code>disjoint</code> - opposite to <code>intersect</code></li> <li><code>equal</code> - shapes a and b are topologically equal</li> <li><code>touch</code> - shapes a and b have at least one point in common but their interiors not intersect</li> <li><code>inside</code> - shape a lies in the interior of shape b</li> <li><code>contain</code> - shape b lies in the interior of shape b</li> <li><code>covered</code> - every point of a lies or in the interior or on the boundary of shape b</li> <li><code>covered</code> - every point of b lies or in the interior or on the boundary of shape a</li> </ul> <h3>Boolean operations</h3> Boolean operations on polygons available via namespace BooleanOperations. Polygons in boolean operation should be valid: both operands should have same meaning of face orientation, faces should not overlap each other and should not have self-intersections. User is responsible to provide valid polygons, boolean operation methods do not check validity. <pre class="prettyprint source lang-javascript"><code>let {unify, subtract, intersect, innerClip, outerClip} = BooleanOperations; </code></pre> <ul> <li><code>unify</code> - unify two polygons and return resulted polygon</li> <li><code>subtract</code> - subtract second polygon from the first and return resulted polygon</li> <li><code>intersect</code> - intersect two polygons and return resulted polygon</li> <li><code>innerClip</code> - intersect two polygons and return boundary of intersection as 2 arrays. The first aray contains edges of the first polygon, the second - the edges of the second</li> <l