bezierjs
bezierjs copied to clipboard
Pomax
Typescript support
Having spent futile 4 hours trying to use this library in a typescript code base (ES6 module imports), I wonder if anyone has managed, and show how.
Seems like @danmarshall did some work on this, but none seem to work.
There's this typescript fork/port, which I couldn't install at all - it just throws errors when you run npm install; it is also at 2.1.0 at the moment.
Then, there's the typings definitions, and an npm package for @types/bezier-js, but the devil will take me I only get compilation/run-time errors with these.
Anyone?
2.0.3
"devDependencies": {
"@angular/core": "^2.0.1",
"@types/bezier-js": "0.0.5",
"@types/es6-shim": "^0.31.32",
"@types/jasmine": "^2.5.35",
"bezier-js": "^2.2.1",
"browserify": "^13.0.1",
"chokidar-cli": "^1.2.0",
"figlet-cli": "^0.1.0",
"http-server": "^0.9.0",
"istanbul": "^1.1.0-alpha.1",
"jasmine": "^2.4.1",
"jasmine-fail-fast": "^2.0.0",
"jsdom": "^9.4.1",
"npm-run-all": "^3.1.0",
"rxjs": "^5.0.0-beta.12",
"ts-node": "^1.4.3",
"tsify": "^2.0.2",
"typescript": "^2.0.3",
"uglify-js": "^2.7.0",
"zone.js": "^0.6.25"
},
Then:
import { Bezier } from 'bezier-js';
I'll have to look in to how @types works for v1.8 / v2.0. I'm not sure why it wouldn't be backward compatible.
I just did an npm install on a fresh clone, no errors. What are the errors you see on npm install ?
npm install danmarshall/bezierjs --save-dev
Throws:
npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master:
npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master:
npm ERR! git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 master: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 master:
npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/izhaki/.nvm/versions/node/v4.4.7/bin/node" "/Users/izhaki/.nvm/versions/node/v4.4.7/bin/npm" "install" "danmarshall/bezierjs" "--save-dev"
npm ERR! node v4.4.7
npm ERR! npm v3.10.3
npm ERR! code 128
npm ERR! Command failed: git rev-list -n1 master
npm ERR! fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git <command> [<revision>...] -- [<file>...]'
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Volumes/Data/Cloud/CloudStation/Development/gefri/npm-debug.log
Can you just npm install bezier-js --save and then just use the d.ts file ?
Tried that (with https://github.com/danmarshall/bezierjs/blob/gh-pages/bezier.d.ts), but it exports BezierJs and I import 'bezier-js' so I get compilation error 'module not found'
When I import using
import { Bezier } from 'bezier-js';
That line compiles (and VS Code hints the right definition):
new Bezier( 0, 0, 0, 0, 0, 0 )
So the @types/bezier-js seems to be sound.
It's just that at runtime I get complains:
TypeError: bezier_js_1.Bezier is not a function
If I console.log(Bezier) I get undefined.
If I import using import * as Bezier from 'bezier-js', then console.log( Bezier ) I get:
{ [Function]
fromSVG: [Function],
quadraticFromPoints: [Function],
cubicFromPoints: [Function],
getUtils: [Function] }
Which seems to be the definition of class Bezier (with its static functions).
But then if I try
new Bezier( ... )
I get:
Cannot use 'new' with an expression whose type lacks a call or construct signature.
Module '"bezier-js"' has no exported member 'BezierJs'.
I can push the non-working code for you to play with.
Also are you "packaging" the Node version of bezier-js or are you using a
It's all within NPM.
In package.json:
"test": "ts-node ./tests/unit/jasmine.js"
So ts-node will internally transpile all typescript.
https://github.com/Izhaki/gefri/tree/bezier-ts
If you clone the repository:
git checkout bezier-ts
npm install
npm test
should get you going.
The actual file to modify is https://github.com/Izhaki/gefri/blob/bezier-ts/src/view/viewees/visibles/path/PathSegments.ts
Also note https://github.com/Izhaki/gefri/blob/bezier-ts/src/bezier.d.ts
I'll take a look. Meanwhile, you might want to see how I do it in Maker.js : https://github.com/Microsoft/maker.js/blob/master/src/models/BezierCurve.ts
In Maker.js seems to make make use of the global var in the browser. Do you have a non-browser example (ie, Node?)
By the way, the reason your fork won't install is because the bezier repository hasn't got a master branch. This worked:
npm install danmarshall/bezierjs#gh-pages --save-dev
But tsc still complains:
Cannot find module 'bezier-js'
OK. Have made some progress (with some help from this SO answer).
If I just:
npm install bezier-js --save-dev
Add bezier-js.d.ts:
declare module 'bezier-js' {
export = class Bezier {
constructor(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4?: number, y4?: number);
}
}
And:
import Bezier = require( 'bezier-js' );
I can now call:
new Bezier( 0, 0, 0, 0, 0, 0)
Looking at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/bezier-js/index.d.ts, it seems to export a namespace, whereas my bezier-js.d.ts file exports the class directly.
@Izhaki do you still get Intellisense for the rest of the Bezier properties?
@paulvanbrenk should the definition be fixed in the @types repo ?
Yes, any updates you make to definition should be in the Definitely Typed repo, or you can ship the d.ts file as part of the npm package... and keep them in the bezierjs repo.
@danmarshall If I use my (4 lines) bezier-js.d.ts, which was used without the @types/bezier-js, then obviously not. But I can simply copy the content of https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/bezier-js/index.d.ts (without the namespace) to get these.
I'm not an expert on typings, but I have a feeling that the @types file simply doesn't need the namespace - it will make it work in node and looking at Maker.js, I'm pretty sure you'll get it working there as well.
OK, just to confirm.
npm install bezier-js @types/bezier-js --save-dev
then if I manually edit node_modules/@types/bezier-js/index.d.ts to the file below. It complies and run, and works with Intellisense (so long you import using import Bezier = require( 'bezier-js' );).
Note that when installing via npm, bezier-js doesn't export utils or PolyBezier, only Bezier. Whilst you can get utils from Bezier.getUtils(), I'm not sure how to expose PolyBezier with the current code (again, not an expert).
// Type definitions for Bezier.js
// Project: https://github.com/Pomax/bezierjs
// Definitions by: Dan Marshall <https://github.com/danmarshall>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
interface Point {
x: number;
y: number;
z?: number;
}
interface Projection extends Point {
t?: number;
d?: number;
}
interface Inflection {
x: number[];
y: number[];
z?: number[];
values: number[];
}
interface Offset extends Point {
c: Point;
n: Point;
}
interface Pair {
left: Bezier;
right: Bezier;
}
interface Split extends Pair {
span: Point[];
_t1?: number;
_t2?: number;
}
interface MinMax {
min: number;
mid?: number;
max: number;
size?: number;
}
interface BBox {
x: MinMax;
y: MinMax;
z?: MinMax;
}
interface Line {
p1: Point;
p2: Point;
}
interface Arc extends Point {
e: number;
r: number;
s: number;
}
interface Shape {
startcap: BezierCap;
forward: Bezier;
back: Bezier;
endcap: BezierCap;
bbox: BBox;
intersections: (shape: Shape) => string[][] | number[][];
}
interface ABC {
A: Point;
B: Point;
C: Point;
}
interface Closest {
mdist: number;
mpos: number;
}
/**
* Bezier curve constructor. The constructor argument can be one of three things:
*
* 1. array/4 of {x:..., y:..., z:...}, z optional
* 2. numerical array/8 ordered x1,y1,x2,y2,x3,y3,x4,y4
* 3. numerical array/12 ordered x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4
*
*/
declare class Bezier {
private _linear;
clockwise: boolean;
_3d: boolean;
_t1: number;
_t2: number;
_lut: Point[];
dpoints: Point[][];
order: number;
points: Point[];
dims: string[];
dimlen: number;
constructor(points: Point[]);
constructor(coords: number[]);
constructor(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4?: number, y4?: number);
constructor(p1: Point, p2: Point, p3: Point, p4?: Point);
static fromSVG(svgString: string): Bezier;
static getABC(n: number, S: Point, B: Point, E: Point, t: number): ABC;
static quadraticFromPoints(p1: Point, p2: Point, p3: Point, t: number): Bezier;
static cubicFromPoints(S: Point, B: Point, E: Point, t: number, d1: number): Bezier;
static getUtils(): typeof utils;
getUtils(): typeof utils;
valueOf(): string;
toString(): string;
toSVG(): string;
update(): void;
computedirection(): void;
length(): number;
getLUT(steps?: number): Point[];
on(point: Point, error: number): number;
project(point: Point): Projection;
get(t: number): Point;
point(idx: number): Point;
compute(t: number): Point;
raise(): Bezier;
derivative(t: number): Point;
inflections(): number[];
normal(t: number): Point;
private __normal2(t);
private __normal3(t);
private __normal(t);
hull(t: number): Point[];
split(t1: number): Split;
split(t1: number, t2: number): Bezier;
extrema(): Inflection;
bbox(): BBox;
overlaps(curve: Bezier): boolean;
offset(t: number, d?: number): Offset | Bezier[];
simple(): boolean;
reduce(): Bezier[];
scale(d: Function): Bezier;
scale(d: number): Bezier;
outline(d1: number, d2?: number, d3?: number, d4?: number): PolyBezier;
outlineshapes(d1: number, d2: number, curveIntersectionThreshold?: number): Shape[];
intersects(curve: Bezier, curveIntersectionThreshold?: number): string[] | number[];
intersects(curve: Line): string[] | number[];
lineIntersects(line: Line): number[];
selfintersects(curveIntersectionThreshold?: number): string[];
curveintersects(c1: Bezier[], c2: Bezier[], curveIntersectionThreshold?: number): string[];
arcs(errorThreshold?: number): Arc[];
private _error(pc, np1, s, e);
private _iterate(errorThreshold, circles);
}
declare class BezierCap extends Bezier {
virtual: boolean;
}
declare namespace utils {
var Tvalues: number[];
var Cvalues: number[];
function arcfn(t: number, derivativeFn: Function): number;
function between(v: number, m: number, M: number): boolean;
function approximately(a: number, b: number, precision?: number): boolean;
function length(derivativeFn: Function): number;
function map(v: number, ds: number, de: number, ts: number, te: number): number;
function lerp(r: number, v1: Point, v2: Point): Point;
function pointToString(p: Point): string;
function pointsToString(points: Point[]): string;
function copy(obj: Object): any;
function angle(o: Point, v1: Point, v2: Point): number;
function round(v: number, d: number): number;
function dist(p1: Point, p2: Point): number;
function closest(LUT: Point[], point: Point): Closest;
function abcratio(t: number, n: number): number;
function projectionratio(t: number, n: number): number;
function lli8(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): Point;
function lli4(p1: Point, p2: Point, p3: Point, p4: Point): Point;
function lli(v1: Offset, v2: Offset): Point;
function makeline(p1: Point, p2: Point): Bezier;
function findbbox(sections: Bezier[]): BBox;
function shapeintersections(s1: Shape, bbox1: BBox, s2: Shape, bbox2: BBox, curveIntersectionThreshold?: number): string[][] | number[][];
function makeshape(forward: Bezier, back: Bezier, curveIntersectionThreshold?: number): Shape;
function getminmax(curve: Bezier, d: string, list: number[]): MinMax;
function align(points: Point[], line: Line): Point[];
function roots(points: Point[], line: Line): number[];
function droots(p: number[]): number[];
function inflections(points: Point[]): number[];
function bboxoverlap(b1: BBox, b2: BBox): boolean;
function expandbox(bbox: BBox, _bbox: BBox): void;
function pairiteration(c1: Bezier, c2: Bezier, curveIntersectionThreshold?: number): string[];
function getccenter(p1: Point, p2: Point, p3: Point): Arc;
}
/**
* Poly Bezier
* @param {[type]} curves [description]
*/
declare class PolyBezier {
curves: Bezier[];
private _3d;
points: Point[];
constructor(curves: Bezier[]);
valueOf(): string;
toString(): string;
addCurve(curve: Bezier): void;
length(): number;
curve(idx: number): Bezier;
bbox(): BBox;
offset(d: number): PolyBezier;
}
declare module "bezier-js" {
export = Bezier
}
I don't think the lib exports the PolyBezier constructor, it's just there for declaring the result of Bezier.outline()
It's not exposed for a really simple reason: it's a shim at best. It's not a true PolyBezier that does proper on/off-curve point manipulation, etc. It's just an array of Beziers, with the smallest number of fall-through functions to make working with the result from reduce() and outline() possible
Has this been fixed? I was unable to get this working too... I can use the library but typescript won't resolve the types. Is it possible there is a bug in the DefinitelyTyped definitions?
@alexjlockwood In the interim, have a look how I got it working: https://github.com/Izhaki/gefri/blob/master/src/view/viewees/visibles/path/bezier-js.d.ts
@Izhaki since you got it working would you mind sending a PR to the DefinitelyTyped repo?
@Izhaki @alexjlockwood the declaration file seems to have been fixed in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/bezier-js/index.d.ts
hi @Izhaki when I try to import it in a component in typescript, it says: ... exercise.component/exercise.component.ts (3,8): Module '"bezier-js"' has no default export. how can I fix that?
@Izhaki I tried to import it into a Typescript class this way: import Bezier from 'bezier-js'; Which said there is no module or default module to load. The problem was due to the last line of code in the node_modules/@types/bezier-js/index.d.ts file. I had to change it to: declare module "bezier-js" { export default Bezier }
The problem is still there. @tooxoot seems to have a solution in the reference above.
The way I solved it without replacing the d.ts file is by importing the type and the constructor separately:
import { Bezier } from 'bezier-js';
let BezierClass: typeof Bezier = require('bezier-js');
But this really is a bandaid fix
@rikkertkoppes you can send a PR to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/bezier-js/index.d.ts
Had major issues with trying to get this to work as I cannot use require for my current project. Is there a fix that works for standard import statements yet? Seemingly the problem I am seeing so far is that the Javascript file: 'bezier-js/lib/bezier.js' has:
module exports = Bezier.
Then when using:
import * as BezierJs from 'bezier-js'
let Bezier:BezierJs.Bezier = new BezierJs.Bezier()
I get error saying that Bezier does not exist on BezierJS.
logging BezierJs is resolving to the class Bezier instead of a namespace/module object
Problem still remains, exactly as described by @Izhaki . Bandaid fix by @rikkertkoppes works for me.
import { Bezier } from 'bezier-js';
let BezierClass: typeof Bezier = require('bezier-js');
Digging into this, I've learned that importing CommonJS with TypeScript uses the following format:
import m = require("mod");
Note that the ES6 from keyword is not used with CommonJS modules in TypeScript. So, this will not work:
import Bezier from 'bezier-js'
Also just to be clear, we are only talking about TypeScript and not any other dialect like Babel.
Here's a couple more discussions regarding this "legacy" syntax:
- https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
- https://github.com/Microsoft/TypeScript/issues/2242#issuecomment-83694181
- https://stackoverflow.com/questions/39415661/what-does-resolves-to-a-non-module-entity-and-cannot-be-imported-using-this
Now, there is a fault in the current declaration file: the final bit should look like this:
declare module "bezier-js" {
export = BezierJs.Bezier; //currently is: export = BezierJs;
}
When this gets fixed (meaning a PR needs to be filed, merged, then deployed to npm/@types/bezier-js as part of the process of DefinitelyTyped) this will enable the import statement to look like this:
import Bezier = require('bezier-js');
But, IMHO, this legacy syntax is a little muddy - one thinks they are using ES6 modules, but import ... require ... is not exactly import ... from .... People may want to use an entirely old-school TypeScript syntax to make it perfectly clear that you are using CommonJS:
const Bezier = require('bezier-js') as typeof BezierJs.Bezier;
Lastly, I just want to thank Mike @Pomax for enduring this discussion. This repo is about Bezier curve stuff. Discussions about TypeScript typings belong in the DefinitelyTyped GitHub repo. If there is a problem with the typings, everyone is free to send a PR to fix them up.
This most recent comment does not seem to be a solution.
My question is why doesn't this work:
npm i bezier-js
npm i @types/bezier-js
then
import Bezier from 'bezier-js
or
import { Bezier } from 'bezier-js
Opening an issue in DefinitelyTyped.
Now that version 3 of bezier-js has been released (cheers, @Pomax!) the existing typings also need an upgrade.
Correct, because I don't use TypeScript, so any TS support is community driven.
Hi @Pomax, are you open for transforming this project to Typescript? I'm in the middle of rewriting it just for fun, and wanted to check if you're okay with a PR :)
I believe keeping type definitions right with the project is a better way, than waiting for someone else to double check and rewrite the types manually in some other place.
