When using Pts as an npm package, you can choose to import only a small part of Pts into your own project. Perhaps just a couple of Line functions are all you need:
import {Pt, Line} from "pts"
Pts is an ES6 library by default. If you want to include it in your older ES5 projects, import it like this:
import {Pt, Line} from "pts/dist/es5"
For using Pts with React, react-pts-canvas is a component which you can extend to make it your own. Also take a look at react-pts-canvas-examples which includes Pts examples in React.
clone() or $...Pt is a subclass of Float32Array, and Group is a subclass of Array that should only contain Pt in it.
Since objects and arrays in javascript are passed by reference, remember to clone them if you are going to change their values. Functions starting with $ such as $add means it will return a new Pt and keeping the original unchanged.
myGroup.push( space.center.clone() );
pt.$subtract( 10 ); // use $fn to get a new Pt
While Pt extends Float32Array and Group extends Array, typescript compiler at the moment (2.4.2) isn't smart enough to auto-cast the return type when you use an Array or Float32Array function. That means if you use typescript, you may need to recast some native Array functions such as map or slice.
let p:Pt = new Pt(1,2,3);
let p2 = p.map( (d) => d+1 ); // typescript thinks p2 is Float32Array
let p3 = p.map( (d) => d+1 ) as Pt; // type is now cast back to Pt
Support this open-source project by filing bugs and pull requests on github. If you have other feedbacks, please ping @williamngan.
Show us what you have made with Pts too!